dashboard-charts
Advanced tools
dashboard-charts - npm Package Compare versions
Comparing version 0.5.0 to 0.5.2
| { | ||
| "name": "dashboard-charts", | ||
| "version": "0.5.0", | ||
| "version": "0.5.2", | ||
| "description": "Clinical Dashboards", | ||
@@ -5,0 +5,0 @@ "module": "./src/index.js", |
| # Dashboard Charts | ||
| A JavaScript library containing all of the default charts for use within the [Dashboard Framework](https://github.com/RhoInc/dashboard-framework). | ||
|  | ||
| Click [here](https://rhoinc.github.io/dashboard-charts/test-page/) to open an interactive example. | ||
| ## Adding a chart | ||
| 1. Copy `./src/_template_` and rename in _camelCase_ to the new chart's name: `cp -R ./src/_template_ ./src/newChart`. | ||
| 2. Update function name in `./src/newChart/wrapper.js`. | ||
| 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/newChart/configuration/rendererSettings.js`: renderer-specific settings, like data mappings | ||
| * `./src/newChart/configuration/webchartsSettings.js`: Webcharts chart settings that define the chart | ||
| * `./src/newChart/configuration/controlInputs.js`: Webcharts controls settings | ||
| * `./src/newChart/configuration/syncSettings.js`: sync renderer-specific settings and Webcharts chart settings, like applying data mappings | ||
| * `./src/newChart/configuration/syncControlInputs.js`: sync renderer-specific settings and Webcharts controls settings, like applying data mappings | ||
| 4. Update chart callbacks in `./src/newChart/callbacks`. | ||
| 5. Update `./src/newChart/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 settings in `./src/newChart/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 | ||
| * `./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: | ||
| * In `./src/newChart/test-page/index.html` replace all instances of _ _title_ _ with the chart title. | ||
| * In `./src/newChart/test-page/index.js`: | ||
| * Replace _ _csv_ _ with the URL of the test data file. | ||
| * Replace `_main_` with the chart name (_newChart_ in this example). | ||
| * 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 | ||
| - [Interactive Example](https://rhoinc.github.io/dashboard-charts/test-page/) | ||
@@ -0,0 +0,0 @@ The most straightforward way to customize [ chart name ] chart is by using a configuration object whose properties describe the behavior and appearance of the chart. Since the [ chart name ] chart is a Webcharts `chart` object, many default Webcharts settings are set in the [webchartsSettings.js file](https://github.com/RhoInc/dashboard-charts/blob/master/src/[ chart name ]/webchartsSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings. |
@@ -0,0 +0,0 @@ The most straightforward way to customize the derived accrual over time chart is by using a configuration object whose properties describe the behavior and appearance of the chart. Since the derived accrual over time chart is a Webcharts `chart` object, many default Webcharts settings are set in the [webchartsSettings.js file](https://github.com/RhoInc/dashboard-charts/blob/master/src/accrual-over-time-derived/configuration/webchartsSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings. |
@@ -0,0 +0,0 @@ The Derived Accrual over Time chart accepts [JSON](https://en.wikipedia.org/wiki/JSON) data of the format returned by [`d3.csv()`](https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md). It plots participant accrual over time by population, . |
@@ -7,3 +7,3 @@ d3.csv( | ||
| function(data) { | ||
| const instance = dashboardCharts.renderers.derivedAccrualOverTime( | ||
| const instance = dashboardCharts.renderers.accrualOverTimeDerived( | ||
| '#container', // element | ||
@@ -10,0 +10,0 @@ {} // settings |
@@ -0,0 +0,0 @@ The most straightforward way to customize the accrual over time chart is by using a configuration object whose properties describe the behavior and appearance of the chart. Since the accrual chart is a Webcharts `chart` object, many default Webcharts settings are set in the [webchartsSettings.js file](https://github.com/RhoInc/dashboard-charts/blob/master/src/accrual-over-time/configuration/webchartsSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings. |
@@ -0,0 +0,0 @@ The Accrual over Time chart accepts [JSON](https://en.wikipedia.org/wiki/JSON) data of the format returned by [`d3.csv()`](https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md). It plots study accrual over time by population. |
| d3.csv( | ||
| 'https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-enrollment-over-time.csv', | ||
| 'https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-accrual-over-time.csv', | ||
| function(d, i) { | ||
@@ -7,3 +7,3 @@ return d; | ||
| function(data) { | ||
| const instance = dashboardCharts.renderers.enrollmentOverTime( | ||
| const instance = dashboardCharts.renderers.accrualOverTime( | ||
| '#container', // element | ||
@@ -10,0 +10,0 @@ {} // settings |
@@ -0,0 +0,0 @@ The most straightforward way to customize the accrual chart is by using a configuration object whose properties describe the behavior and appearance of the chart. Since the accrual chart is a Webcharts `chart` object, many default Webcharts settings are set in the [webchartsSettings.js file](https://github.com/RhoInc/dashboard-charts/blob/master/src/accrual/configuration/webchartsSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings. |
@@ -0,0 +0,0 @@ The Accrual chart accepts [JSON](https://en.wikipedia.org/wiki/JSON) data of the format returned by [`d3.csv()`](https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md). It plots the number of participants in each study populations by category. |
@@ -7,3 +7,3 @@ d3.csv( | ||
| function(data) { | ||
| const instance = dashboardCharts.renderers.enrollment( | ||
| const instance = dashboardCharts.renderers.accrual( | ||
| '#container', // element | ||
@@ -10,0 +10,0 @@ {} // settings |
@@ -0,0 +0,0 @@ The most straightforward way to customize forms chart is by using a configuration object whose properties describe the behavior and appearance of the chart. Since the forms chart is a Webcharts `chart` object, many default Webcharts settings are set in the [webchartsSettings.js file](https://github.com/RhoInc/dashboard-charts/blob/master/src/forms/configuration/webchartsSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings. |
@@ -0,0 +0,0 @@ The Forms chart accepts [JSON](https://en.wikipedia.org/wiki/JSON) data of the format returned by [`d3.csv()`](https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md). It plots the number of forms by site and form status. |
@@ -0,0 +0,0 @@ The most straightforward way to customize queries chart is by using a configuration object whose properties describe the behavior and appearance of the chart. Since the query chart is a Webcharts `chart` object, many default Webcharts settings are set in the [webchartsSettings.js file](https://github.com/RhoInc/dashboard-charts/blob/master/src/queries/configuration/webchartsSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings. |
@@ -0,0 +0,0 @@ The Queries chart accepts [JSON](https://en.wikipedia.org/wiki/JSON) data of the format returned by [`d3.csv()`](https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md). It plots the number of queries by site and query status. |
@@ -0,0 +0,0 @@ The most straightforward way to customize the visit completion chart is by using a configuration object whose properties describe the behavior and appearance of the chart. Since the visit completion chart is a Webcharts `chart` object, many default Webcharts settings are set in the [webchartsSettings.js file](https://github.com/RhoInc/dashboard-charts/blob/master/src/visitCompletion/configuration/webchartsSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings. |
@@ -0,0 +0,0 @@ The Visit Completion chart accepts [JSON](https://en.wikipedia.org/wiki/JSON) data of the format returned by [`d3.csv()`](https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md). It plots the number of participants by vist and visit status. |
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by2.63%
39
Worsened metrics
- Total package byte prevSize
- decreased by-1.22%
243199