3. Widgets¶

3.1. Introduction¶

The configuration of each widget is present in config_customer.yaml. The following table lists some of the common properties of widgets.

Property	Mandatory	Type	Description
appId	optional	string	The Explorer instance to fetch data from. If not set, the default instance is used.
area	depends	string	The geo widget can be configured for a specific area to display, e.g. Germany.
clickmap	optional	map	Some widgets can redirect to an Explorer preset when the user clicks on (a specific part of) the widget. Map must contain one key/value pair. The key refers to a Javascript function defined in DASHBOARD_FUNCTION_TEMPLATES. This function is called with the base URL of Explorer as the first argument and the preset reference of the widget as the second argument. It must return a map with presetref as key and the desired preset reference as the value, e.g. `{ presetref: 'sample' }`.
colors	optional	array/map	Several widgets allow fixed or conditional colors to be set for lines and backgrounds. See specific widget for allowed values.
content	optional	map	Some widgets allow providing content or styling via this setting, e.g. the markdown, the presetlist and the text widget.
datamap	depends	map	Most widgets need this to map data from an Explorer preset to data that the widget understands. Map must contain one key/value pair. The key refers to a Javascript function defined in DASHBOARD_FUNCTION_TEMPLATES. This function is called with data from the Explorer preset as the first parameter. It must return a data structure specific to the widget. The value is also a map (possibly null) containing properties that can be used inside the function. For example, if the value is `{ column: 2 }`, the Javascript function may contain `{{ column\|tojson }}` which will be replaced with `2`.
highlightcolor	optional	string	Some chart-like widgets allow setting a highlight color. This can be useful for highlighting a single value, e.g. to compare a single practice amongst its peers. This value defines the color.
highlightmap	optional	map	Some chart-like widgets allow setting a highlight color. This can be useful for highlighting a single value, e.g. to compare a single practice amongst its peers. Similar to datamap, there must be one key/value pair.
labelmap	depends	map	Most chart-like widgets need this to create labels that go with the data, e.g. the label ‘January’ has the value 15. Similar to datamap, there must be one key/value pair.
options	optional	map	Chart widgets are powered by the chartjs library. This options map is given directly to that library for styling of the chart, e.g. `{ "scales": { "y": { "min": 0, "max": 10 } } }`
parametermap	optional	map	If parameters is set, this setting allows a function to be defined that alters the value(s) of the parameter widget. This can be used for example to have a parameter year that feeds one widget and another widget that shows the previous year. The latter widget then defines a function that subtracts one from the year parameter. Map must contain one key/value pair. The key refers to a Javascript function defined in DASHBOARD_FUNCTION_TEMPLATES. This function is called with the parameter value(s) as they are set at that moment. It must return the same data-structure with the changed values, e.g. `data.year = parseInt(data.year)-1; return data;`
parameters	optional	array	Data from a preset in Explorer can be filtered, e.g. to provide only values for the current year. Each item in this array should point to the identifier of a parameter widget. If that parameter is present on the dashboard and the user selects a value, that value is sent to Explorer to filter the data.
presetref	depends	string	The Explorer preset reference to fetch data from. Mandatory for most widgets.
renderer	mandatory	string	Renderer to use, e.g. chart, geo or wordcloud.
rows	depends	array	The textlist widget can be configured to display a list of text widgets.
subtitle	optional	string	Subtitle displayed on the widget.
title	mandatory	string	Title displayed on the widget.
type	depends	string	Some widget renderers need a type, e.g. the chart renderer has types bar and line.

3.2. Bar¶

DASHBOARD_WIDGETS:
  bar1:
    title: Bar 1
    renderer: chart
    type: bar
    presetref: DUMMY
    colors: ["#0074bc", "#99c7e4", "#94c11c", "#fcce4c", "#ef7d14", "#723a66"]
    datamap: { bar1Data: null }
    labelmap: { bar1Labels: null }

DASHBOARD_FUNCTION_TEMPLATES:
  bar1Data: |
    function (data) {
      return [3, 6, 2, 9, 5, 4];
    }
  bar1Labels: |
    function (data) {
      return ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06"];
    }

DASHBOARD_WIDGETS:
  bar2:
    title: Bar 2
    renderer: chart
    type: bar
    presetref: DUMMY
    colors: ["#99c7e4", "#94c11c", "#fcce4c"]
    datamap: { bar2Data: null }
    labelmap: { bar2Labels: null }

DASHBOARD_FUNCTION_TEMPLATES:
  bar2Data: |
    function (data) {
      return [[32, 61, 24, 91], [40, 58, 25, 98], [35, 70, 23, 95]];
    }
  bar2Labels: |
    function (data) {
      return [["Jan", "Feb", "Mar", "Apr"], ["Practice", "Benchmark", "Previous"]];
    }

DASHBOARD_WIDGETS:
  bar3:
    title: Bar 3
    subtitle: Highlight
    renderer: chart
    type: bar
    presetref: DUMMY
    colors: ["#ef7d14"]
    datamap: { bar3Data: null }
    labelmap: { bar3Labels: null }
    highlightmap: { bar3Highlight: null }

DASHBOARD_FUNCTION_TEMPLATES:
  bar3Data: |
    function (data) {
      return [2, 3, 5, 6, 7, 7, 8, 8, 8, 9];
    }
  bar3Labels: |
    function (data) {
      return ["", "", "", "", "", "", "", "", "", ""];
    }
  bar3Highlight: |
    function (data, value, label) {
      return label == 7;
    }

3.3. Doughnut¶

DASHBOARD_WIDGETS:
  doughnut1:
    title: Doughnut 1
    renderer: chart
    type: doughnut
    presetref: DUMMY
    colors: ["#0074bc", "#94c11c", "#fcce4c", "#ef7d14"]
    datamap: { doughnut1Data: null }
    labelmap: { doughnut1Labels: null }

DASHBOARD_FUNCTION_TEMPLATES:
  doughnut1Data: |
    function (data) {
      return [3, 6, 2, 9];
    }
  doughnut1Labels: |
    function (data) {
      return ["Value A", "Value B", "Value C", "Value D"];
    }

3.4. Feedbacklist¶

DASHBOARD_WIDGETS:
  feedbacklist1:
    title: Feedbacklist 1
    subtitle: Lorem ipsum
    renderer: feedbacklist
    presetref: DUMMY
    colors: { 6: ["#eb4c56", "#ffffff"], 8: ["#f4a35a", "#333333"], 9: ["#fcce4c", "#333333"], 11: ["#4c9dd0", "#ffffff"] }
    datamap: { feedbacklist1Data: null }
    clickmap: { presetRef: { ref: "FEEDBACK" } }

DASHBOARD_FUNCTION_TEMPLATES:
  feedbacklist1Data: |
    function (data) {
      return [
        [9.4, "Martine Slechteren", "Bekwaam en deskundig. Duidelijke uitleg.", "Gaat super!", "Geen verbeterpunten"],
        [8.1, "Bas de Goede", "Was gewoon goed.", "Goed bezig", "Lagere kosten"],
        [6.3, "Anoniem", "Vond de communicatie niet zo goed.", "Behandeling goed", "Beter communiceren"]
      ];
    }

3.5. Gauge¶

DASHBOARD_WIDGETS:
  gauge1:
    title: Gauge 1
    subtitle: Lorem ipsum
    renderer: gauge
    presetref: DUMMY
    colors: { "below": "#eb4c56", "above": "#b4d35f" }
    datamap: { gauge1Data: null }

DASHBOARD_FUNCTION_TEMPLATES:
  gauge1Data: |
    function (data) {
      return [
        95, 91, 9.5, ["Benchmark 9.1", "n = 128"]
      ];
    }

DASHBOARD_WIDGETS:
  gauge2:
    title: Gauge 2
    subtitle: Lorem ipsum
    renderer: gauge
    presetref: DUMMY
    colors: { "below": "#eb4c56", "above": "#b4d35f" }
    datamap: { gauge2Data: null }

DASHBOARD_FUNCTION_TEMPLATES:
  gauge2Data: |
    function (data) {
      return [
        75, 80, 75, ["Benchmark 80", "n = 312"]
      ];
    }

3.6. Geo¶

DASHBOARD_WIDGETS:
  geo1:
    title: Geo 1
    renderer: geo
    area: Germany
    presetref: DUMMY
    datamap: { geo1Data: null }
    labelmap: { geo1Labels: null }

DASHBOARD_FUNCTION_TEMPLATES:
  geo1Data: |
    function (data) {
      return [2, 4, 7, 0];
    }
  geo1Labels: |
    function (data) {
      return [
        ["Berlin", 52.520007, 13.404954],
        ["Frankfurt", 50.110922, 8.682127],
        ["Fröndenberg", 51.473981, 7.768603],
        ["Hannover", 52.375892, 9.732010],
      ];
    }

3.7. Itemlist¶

DASHBOARD_WIDGETS:
  itemlist1:
    title: Itemlist 1
    subtitle: Lorem ipsum
    renderer: itemlist
    presetref: DUMMY
    colors: { 10: ["#4c9dd0", "#ffffff"], 20: ["#fcce4c", "#333333"], 40: ["#f4a35a", "#333333"], 999999: ["#eb4c56", "#ffffff"] }
    datamap: { itemlist1Data: null }

DASHBOARD_FUNCTION_TEMPLATES:
  itemlist1Data: |
    function (data) {
      return [
        ["bi-folder", "Files closed too late", "Treatment took place more than 60 days ago", 40],
        ["bi-envelope-x", "Incorrect email address", "No (valid) email address entered", 20],
        ["bi-person-exclamation", "Unknown practitioner", "Practitioner is not activated", 5]
      ];
    }

3.8. Line¶

DASHBOARD_WIDGETS:
  line1:
    title: Line 1
    renderer: chart
    type: line
    presetref: DUMMY
    colors: ["#723a66"]
    options: { "scales": { "y": { "min": 0, "max": 10 } } }
    datamap: { line1Data: null }
    labelmap: { line1Labels: null }

DASHBOARD_FUNCTION_TEMPLATES:
  line1Data: |
    function (data) {
      return [3, 6, 2, 9, 5, 4];
    }
  line1Labels: |
    function (data) {
      return ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06"];
    }

DASHBOARD_WIDGETS:
  line2:
    title: Line 2
    renderer: chart
    type: line
    presetref: DUMMY
    colors: ["#0074bc", "#fcce4c"]
    options: { "scales": { "y": { "min": 0, "max": 10 } } }
    datamap: { line2Data: null }
    labelmap: { line2Labels: null }

DASHBOARD_FUNCTION_TEMPLATES:
  line2Data: |
    function (data) {
      return [[3, 8, 2, 4], [9, 5, 4, 7]];
    }
  line2Labels: |
    function (data) {
      return [["2020-01", "2020-02", "2020-03", "2020-04"], ["Series A", "Series B"]];
    }

3.9. Markdown¶

DASHBOARD_WIDGETS:
  markdown3:
    title: Markdown 3
    subtitle: Lorem ipsum
    renderer: markdown
    content:
      markdown: |
        Some **bold** and *italic* text

        ### Header

        1. Item 1
        1. Item 2
        1. Item 3

3.10. Percentage¶

DASHBOARD_WIDGETS:
  percentage1:
    title: Percentage 1
    subtitle: Lorem ipsum
    renderer: percentage
    presetref: DUMMY
    colors: { 25: "#eb4c56", 50: "#f4a35a", 75: "#fcce4c", 101: "#4c9dd0" }
    datamap: { percentage1Data: null }

DASHBOARD_FUNCTION_TEMPLATES:
  percentage1Data: |
    function (data) {
      return [
        1234,
        46.9,
        "Questionnaires"
      ];
    }

DASHBOARD_WIDGETS:
  percentage2:
    title: Percentage 2
    subtitle: Lorem ipsum
    renderer: percentage
    presetref: DUMMY
    colors: { 25: "#eb4c56", 50: "#f4a35a", 75: "#fcce4c", 101: "#4c9dd0" }
    datamap: { percentage2Data: null }

DASHBOARD_FUNCTION_TEMPLATES:
  percentage2Data: |
    function (data) {
      return [
        42,
        61.3,
        "Messages"
      ];
    }

3.11. Presetlist¶

DASHBOARD_WIDGETS:
  presetlist1:
    title: Presetlist 1
    subtitle: Favorite presets
    renderer: presetlist
    content: { "exp2": ["PREF_3", "PREF_4"] }

3.12. Sankey¶

DASHBOARD_WIDGETS:
  sankey1:
    title: Sankey 1
    renderer: sankey
    presetref: DUMMY
    datamap: { sankey1Data: null }
    labelmap: { sankey1Labels: null }
    colors: ["#0074bc", "#99c7e4", "#94c11c", "#fcce4c", "#ef7d14"]
    options:
      column:
        "a": 0
        "b": 1
        "c": 1
        "d": 2
        "e": 2
      priority:
        "a": 1
        "b": 2
        "c": 3
        "d": 4
        "e": 5

DASHBOARD_FUNCTION_TEMPLATES:
  sankey1Data: |
    function(data) {
      return [
        {from: "a", to: "b", flow: 80},
        {from: "a", to: "c", flow: 20},
        {from: "b", to: "d", flow: 50},
        {from: "b", to: "e", flow: 30},
      ];
    }
  sankey1Labels: |
    function (data) {
      return {
        a: "Label A",
        b: "Label B",
        c: "Label C",
        d: "Label D",
        e: "Label E"
      };
    }

3.13. Scatter¶

DASHBOARD_WIDGETS:
  scatter1:
    title: Scatter 1
    renderer: chart
    type: scatter
    presetref: DUMMY
    datamap: { scatter1Data: null }

DASHBOARD_FUNCTION_TEMPLATES:
  scatter1Data: |
    function (data) {
      return [
        { x: 1, y: 10 },
        { x: 2, y: 5 },
        { x: 4, y: 2 },
        { x: 8, y: 1 }
      ];
    }

3.14. StackedBar¶

DASHBOARD_WIDGETS:
  stackedbar1:
    title: StackedBar 1
    renderer: chart
    type: stackedBar
    presetref: DUMMY
    datamap: { stackedbar1Data: null }
    labelmap: { stackedbar1Labels: null }

DASHBOARD_FUNCTION_TEMPLATES:
  stackedbar1Data: |
    function (data) {
      return [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [3.5, 3.0, 2.5, 2.0, 1.5]];
    }
  stackedbar1Labels: |
    function (data) {
      return [["Jan", "Feb", "Mar", "Apr", "May"], ["Dataset1", "Dataset2", "Dataset3"]];
    }

3.15. Table¶

DASHBOARD_WIDGETS:
  table1:
    title: Table 1
    subtitle: No options
    renderer: table
    presetref: DUMMY
    datamap: { tableData: null }
    labelmap: { tableLabels: null }

DASHBOARD_FUNCTION_TEMPLATES:
  tableData: |
    function (data) {
      return [[25, 26, 27], [28, 29, 30], [31, 32, 33], [34, 35, 36], [37, 38, 39], [40, 41, 42], [43, 44, 45], [46, 47, 48],
              [1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12], [13, 14, 15], [16, 17, 18], [19, 20, 21], [22, 23, 24],
              [49, 50, 51], [52, 53, 54], [55, 56, 57], [58, 59, 60], [61, 62, 63], [64, 65, 66], [67, 68, 69], [70, 71, 72]];
    }
  tableLabels: |
    function (data) {
      return ["Col1", "Col2", "Col3"];
    }

DASHBOARD_WIDGETS:
  table2:
    title: Table 2
    subtitle: "Options: info, ordering, paging, searching"
    renderer: table
    options:
      { "info": True, "ordering": True, "paging": True, "searching": True }
    presetref: DUMMY
    datamap: { tableData: null }
    labelmap: { tableLabels: null }

DASHBOARD_FUNCTION_TEMPLATES:
  tableData: |
    function (data) {
      return [[25, 26, 27], [28, 29, 30], [31, 32, 33], [34, 35, 36], [37, 38, 39], [40, 41, 42], [43, 44, 45], [46, 47, 48],
              [1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12], [13, 14, 15], [16, 17, 18], [19, 20, 21], [22, 23, 24],
              [49, 50, 51], [52, 53, 54], [55, 56, 57], [58, 59, 60], [61, 62, 63], [64, 65, 66], [67, 68, 69], [70, 71, 72]];
    }
  tableLabels: |
    function (data) {
      return ["Col1", "Col2", "Col3"];
    }

3.16. Text¶

DASHBOARD_WIDGETS:
  text1:
    title: Text 1
    subtitle: Lorem ipsum
    renderer: text
    presetref: DUMMY
    content:
      {
        "color": "#4c9dd0",
        "size": "48",
        "bold": true,
        "italic": false,
        "underline": true,
      }
    datamap: { text1Data: null }

DASHBOARD_FUNCTION_TEMPLATES:
  text1Data: |
    function (data) {
      return ["1111"];
    }

3.17. Textlist¶

DASHBOARD_WIDGETS:
  textlist1:
    title: Textlist 1
    subtitle: Lorem ipsum
    renderer: textlist
    rows:
      - { id: "text1" }
      - { id: "text2" }
      - { line_plus: "yes" }
      - { id: "text3" }
      - { line_minus: "yes" }
      - { id: "text3" }

3.18. Tree¶

DASHBOARD_WIDGETS:
  tree1:
    title: Tree 1
    renderer: tree

3.19. Wordcloud¶

DASHBOARD_WIDGETS:
  wordcloud1:
    title: Wordcloud 1
    renderer: wordcloud
    presetref: DUMMY
    datamap: { wordcloud1Data: null }

DASHBOARD_FUNCTION_TEMPLATES:
  wordcloud1Data: |
    function (data) {
      return [
        ["Hello", "World", "Cloud", "Test1", "Test2", "Test3", "Test4", "Test5"],
        [50, 30, 20, 50, 30, 20, 40, 15],
        ["#FC9039", "#72B5C5", "#812A00", "#1B6776", "#91705A", "#63BAAB"]
      ];
    }