dashboard-charts

Clinical Dashboards

Usage no npm install needed!

<script type="module">
  import dashboardCharts from 'https://cdn.skypack.dev/dashboard-charts';
</script>

README

Dashboard Charts

A JavaScript library containing all of the default charts for use within the Dashboard Framework.

dashboard

Click here to open an interactive example.

Adding a chart

  1. Copy ./src/_template_ and rename in hyphenated-lowcase to the new chart's name: cp -R ./src/_template_ ./src/new-chart.
  2. Update function name in ./src/new-chart/wrapper.js to newChart.
  3. Update configuration files:
    • ./src/new-chart/configuration/rendererSettings.js: renderer-specific settings, like data mappings
    • ./src/new-chart/configuration/webchartsSettings.js: Webcharts chart settings that define the chart
    • ./src/new-chart/configuration/controlInputs.js: Webcharts controls settings
    • ./src/new-chart/configuration/syncSettings.js: sync renderer-specific settings and Webcharts chart settings, like applying data mappings
    • ./src/new-chart/configuration/syncControlInputs.js: sync renderer-specific settings and Webcharts controls settings, like applying data mappings
  4. Update chart callbacks in ./src/new-chart/callbacks.
  5. Update ./src/new-chart/settings-schema.js:
    • replace all instances of [ chart title ] with chart title
    • replace all instances of [ chart name ] with chart name (newChart in this example)
    • replace [ data structure ] with the input data structure
    • replace [ data file ] with the name of the test data file, e.g. dashboard-new-chart for a chart named newChart
    • for each setting in ./src/new-chart/configuration/rendererSettings, add a property to the properties object of the same name with these properties:
      • title
      • description
      • type
      • default
      • data-mapping
      • data-type
      • required
  6. Update test page:
    • Run npm run build-test-pages from the command line, or...
    • In ./src/new-chart/test-page/index.html replace all instances of _ title _ with the chart title.
    • In ./src/new-chart/test-page/index.js:
      • Replace _ csv _ with the URL of the test data file.
      • Replace _main_ with the chart name (newChart in this example).

Links