Creating a widget - psovea/frontend GitHub Wiki

Adding a component

Each Widget should have a component, which is passed to the Widget by a component property. Example:

component={<DoughnutChart metric="district" colors={['#ff6666', '#ff4d4d', '#ff3333', '#ff1a1a', '#ff0000', '#e60000', '#cc0000', '#b30000']} />}

To be able to update a component, an update(data, newSettings) function is needed, with which it can receive its new data. As the component also needs to have access to its settings, the updated settings are also passed to this function.

Properties

name	type	description
`component`	React component	The component the widget should show
`title`	String	The title of the widget
`componentID`	String	The id of the component in the HTML, used for styling purposes
`settings`	`[(value -> state) -> settings component]`	List of functions that return a settings component. The given function is then given to the property of the settings component that handle value changes in the settings component.
`names`	`{<index>: name:String}`	An object indicating which property the settings at `<index>` component should change.
`defaultSettings`	`{name: Any}`	An object indicating the default settings, explained more thoroughly in the next section
`settingsTitles`	String	The titles of each settings component

Settings Explanation

To add a new component to the dashboard with, there are some rules that it should obey. First, it must have a defaultSettings property, which is needed by the fetch it does to the prometheus database. The keys of this defaultSettings object should be equal to the keys as described in the name column in the endpoint explanation. The value associated with each key also have a specific type, which can be found in the table below

name	type	description	example
`period`	Int	The period from now in seconds (in the past).	`86400` (single day)
`district[]`	[String]	Districts in Amsterdam	`["Centrum", "Nieuw-West", "Zuidoost", "Noord", "Oost", "West", "Westpoort", "Zuid"]`
`transport_type[]`	[String]	Transport types, strings must be upper case	`["METRO", "TRAM", "BUS"]`
`line_number[]`	[String]	Specific line numbers	`["22", "23"]`
`operator[]`	[String]	Operators (we currently only support GVB)	`["GVB"]`
`return_filter[]`	[String]	Using this property, the names of the metrics are added to the response object.	`["district", "stop_end"]`
`days`	[Int]	Used when asking for specific periods, the weekdays to consider, with 0 Monday and 1 Tuesday	`7`

When adding a settings widget, it is very important to indicate which settings property it alters. For example, if I add a <Slider/> component that alters the period value, the names object should contain {<index>: "period"}, where <index> is the index of the setting component in the array in which it resides.

Example

<Widget
  component={<BarChart />}
  title="Vertraging per dag"
  componentId="bar"
  settings={[
    (f) => <Slider onChange={f} min={5} max={21} defaultValue={7}
                   marks={mergeAll([...Array(22).keys()].filter(x => x >= 5).map(i => ({ [i]: i })))}
                   step={null} key='slider' />,

    (f) => <Searchbar updater={f} options={["Bus", "Tram", "Metro", "Boot"]} multipleOptions={true} placeholderText={"vervoerstype"} key='search-transport' />,
    (f) => <Searchbar updater={f} endpoint={"get-lines"} params={this.state.bar1} multipleOptions={false} placeholderText={"lijn"} key='search-line' filterFunc={(item) => `${item.public_id}: ${item.line_name}`} />
  ]}
  defaultSettings={{
    "days": 7,
    "district[]": ["Centrum", "Nieuw-West", "Zuidoost", "Noord", "Oost", "West", "Westpoort", "Zuid"],
    "transport_type[]": [""],
    "line_number[]": [""]
  }}
  names={{ 0: "days", 1: "transport_type[]", 2: "line_number[]" }}
  addSetting={this.updateState.bind(this)}
  settingsTitles={["Aantal Dagen", "Vervoersmiddel", "Lijn"]}
/>