dashboard-charts
v1.0.0
Published
Clinical Dashboards
Downloads
4
Keywords
Readme
Dashboard Charts
A JavaScript library containing all of the default charts for use within the Dashboard Framework.
Click here to open an interactive example.
Adding a chart
- Copy
./src/_template_
and rename in hyphenated-lowcase to the new chart's name:cp -R ./src/_template_ ./src/new-chart
. - Update function name in
./src/new-chart/wrapper.js
to newChart. - 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
- Update chart callbacks in
./src/new-chart/callbacks
. - 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 theproperties
object of the same name with these properties:- title
- description
- type
- default
- data-mapping
- data-type
- required
- 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).
- Run