dashboard-charts - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

dashboardCharts.js

@@ -165,7 +165,7 @@ (function(global, factory) {
             color_by: null, // set in ./syncSettings
-            color_dom: ['Screened', 'Randomized'], // set in ../callbacks/onInit
-            colors: ['#a6bddb', '#3690c0', '#034e7b'], // set in ../callbacks/onInit
+            color_dom: null, // set in ../callbacks/onInit
+            colors: null, // set in ../callbacks/onInit
             legend: {
                 label: '',
-                order: ['Screened', 'Randomized'] // set in ../callbacks/onInit
+                order: null // set in ../callbacks/onInit
             },
@@ -210,2 +210,5 @@ resizable: false,
             arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'status';
+
+        var _this = this;
+
         var status_order_col =
@@ -253,6 +256,19 @@ arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'status_order';
 
-        //Update chart settings.
-        this.config.color_dom = this.status_set.map(function(status) {
-            return status.split(':|:')[0];
-        });
+        //Update color domain.
+        if (!(Array.isArray(this.config.color_dom) && this.config.color_dom.length))
+            this.config.color_dom = this.status_set.map(function(status) {
+                return status.split(':|:')[0];
+            });
+        else
+            this.config.color_dom = this.config.color_dom.concat(
+                this.status_set
+                    .map(function(status) {
+                        return status.split(':|:')[0];
+                    })
+                    .filter(function(status) {
+                        return _this.config.color_dom.indexOf(status) < 0;
+                    })
+            );
+
+        //Update colors.
         if (variables.indexOf(status_color_col) > -1)
@@ -262,5 +278,18 @@ this.config.colors = this.status_set.map(function(status) {
             });
-        this.config.legend.order = this.status_set.map(function(status) {
-            return status.split(':|:')[0];
-        });
+
+        //Update legend order.
+        if (!(Array.isArray(this.config.legend.order) && this.config.legend.order.length))
+            this.config.legend.order = this.status_set.map(function(status) {
+                return status.split(':|:')[0];
+            });
+        else
+            this.config.legend.order = this.config.legend.order.concat(
+                this.status_set
+                    .map(function(status) {
+                        return status.split(':|:')[0];
+                    })
+                    .filter(function(status) {
+                        return _this.config.legend.order.indexOf(status) < 0;
+                    })
+            );
     }
@@ -356,3 +385,3 @@
                     ' (' +
-                    context.raw_data.filter(function(di) {
+                    context.filtered_data.filter(function(di) {
                         return di[context.config.population_col] === d.label;
@@ -439,13 +468,7 @@ }).length +
             color_by: null, // set in ./syncSettings
-            color_dom: ['Completed', 'Expected', 'Overdue', 'Missed', 'Terminated'], // set in ../callbacks/onInit
-            colors: ['#4daf4a', '#377eb8', '#ff7f00', '#e41a1c', '#999999'], // set in ./syncSettings
+            color_dom: null, // set in ../callbacks/onInit
+            colors: null, // set in ./syncSettings
             legend: {
                 label: '',
-                order: [
-                    'Completed',
-                    'Expected',
-                    'Overdue',
-                    'Missed',
-                    'Terminated' // set in ../callbacks/onInit
-                ]
+                order: null // set in ../callbacks/onInit
             },
@@ -539,3 +562,3 @@ resizable: false,
 
-    function enrollment$1() {
+    function visitCompletion() {
         var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'body';
@@ -578,3 +601,3 @@ var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
             x: {
-                column: null, // set in syncSettings
+                column: null, // set in ./syncSettings
                 type: 'ordinal',
@@ -591,5 +614,5 @@ label: ''
                     arrange: 'stacked',
-                    split: null, // set in syncSettings
+                    split: null, // set in ./syncSettings
                     type: 'bar',
-                    per: [], // set in syncSettings
+                    per: [], // set in ./syncSettings
                     summarizeY: 'percent',
@@ -599,8 +622,8 @@ tooltip: '$y'
             ],
-            color_by: null, // set in syncSettings
-            color_dom: ['Resolved', 'Outstanding <= 90 days', 'Outstanding > 90 days'], // set in ../callbacks/onInit
-            colors: ['#66c2a5', '#fecc5c', '#e34a33'], // set in ../callbacks/onInit
+            color_by: null, // set in ./syncSettings
+            color_dom: null, // set in ../callbacks/onInit
+            colors: null, // set in ../callbacks/onInit
             legend: {
                 label: '',
-                order: ['Resolved', 'Outstanding <= 90 days', 'Outstanding > 90 days'] // set in ../callbacks/onInit
+                order: null // set in ../callbacks/onInit
             },
@@ -683,3 +706,3 @@ resizable: false,
 
-    function enrollment$2() {
+    function queries() {
         var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'body';
@@ -725,3 +748,3 @@ var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
                 type: 'time',
-                column: null, // set in syncSettings
+                column: null, // set in ./syncSettings
                 label: '',
@@ -732,3 +755,3 @@ format: '%b-%y'
                 type: 'linear',
-                column: null, // set in syncSettings
+                column: null, // set in ./syncSettings
                 label: '',
@@ -740,3 +763,3 @@ behavior: 'firstfilter'
                     type: 'line',
-                    per: [], // set in syncSettings
+                    per: [], // set in ./syncSettings
                     summarizeY: 'sum',
@@ -746,8 +769,8 @@ tooltip: '$y'
             ],
-            color_by: null, // set in syncSettings
-            color_dom: ['Screened', 'Randomized', 'Target'], // set in ../callbacks/onInit
-            colors: ['#a6bddb', '#3690c0', '#034e7b'], // set in ../callbacks/onInit
+            color_by: null, // set in ./syncSettings
+            color_dom: null, // set in ../callbacks/onInit
+            colors: null, // set in ../callbacks/onInit
             legend: {
                 label: '',
-                order: ['Screened', 'Randomized', 'Target'] // set in ../callbacks/onInit
+                order: null // set in ../callbacks/onInit
             },
@@ -961,3 +984,4 @@ resizable: false,
                 type: 'linear',
-                behavior: 'firstfilter'
+                behavior: 'firstfilter',
+                format: '1d'
             },
@@ -975,7 +999,7 @@ marks: [
             color_by: null, // set in ./syncSettings
-            color_dom: ['Received', 'Outstanding <= 90 days', 'Outstanding > 90 days'], // set in ../callbacks/onInit
-            colors: ['#66c2a5', '#fecc5c', '#e34a33'], // set in ../callbacks/onInit
+            color_dom: null, // set in ../callbacks/onInit
+            colors: null, // set in ../callbacks/onInit
             legend: {
                 label: '',
-                order: ['Received', 'Outstanding <= 90 days', 'Outstanding > 90 days'] // set in ../callbacks/onInit
+                order: null // set in ../callbacks/onInit
             },
@@ -1058,3 +1082,3 @@ resizable: false,
 
-    function enrollment$3() {
+    function forms() {
         var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'body';
@@ -1087,6 +1111,6 @@ var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         enrollment: enrollment,
-        visitCompletion: enrollment$1,
-        queries: enrollment$2,
+        visitCompletion: visitCompletion,
+        queries: queries,
         enrollmentOverTime: enrollmentOverTime,
-        forms: enrollment$3
+        forms: forms
     };
@@ -1093,0 +1117,0 @@

package.json

 {
   "name": "dashboard-charts",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Clinical Dashboards",
@@ -34,5 +34,4 @@ "module": "./src/index.js",
     "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "rollup-watch": "^4.3.1"
+    "rollup-plugin-node-resolve": "^4.0.0"
   }
 }

README.md

 # Dashboard Charts
+A JavaScript library containing all of the default charts for use within the [Dashboard Framework](https://github.com/RhoInc/dashboard-framework).
 
-A JavaScript library containing all of the default charts for use within [Dashboard Framework](https://github.com/RhoInc/dashboard-framework).
-
-Click [here](https://rhoinc.github.io/dashboard-charts/build/test-page/) to open an interactive example.
+Click [here](https://rhoinc.github.io/dashboard-charts/test-page/) to open an interactive example.
  
 ## Links 
-- [Interactive Example](https://rhoinc.github.io/dashboard-charts/build/test-page/)
+- [Interactive Example](https://rhoinc.github.io/dashboard-charts/test-page/)
 

src/enrollment/callbacks/onResize.js

@@ -22,3 +22,3 @@ import customizeTooltips from '../../util/customizeTooltips';
                 ' (' +
-                context.raw_data.filter(function(di) {
+                context.filtered_data.filter(function(di) {
                     return di[context.config.population_col] === d.label;
@@ -25,0 +25,0 @@ }).length +

src/enrollment/configuration-wiki.md

@@ -86,17 +86,7 @@ The most straightforward way to customize the screening and randomization chart is by using a configuration object whose properties describe the behavior and appearance of the chart. Since the screening and randomization chart is a Webcharts `chart` object, many default Webcharts settings are set in the [defaultSettings.js file](https://github.com/RhoInc/the screening and randomization chart/blob/master/src/defaultSettings.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.
     "color_by": null,
-    "color_dom": [
-        "Screened",
-        "Randomized"
-    ],
-    "colors": [
-        "#a6bddb",
-        "#3690c0",
-        "#034e7b"
-    ],
+    "color_dom": null,
+    "colors": null,
     "legend": {
         "label": "",
-        "order": [
-            "Screened",
-            "Randomized"
-        ]
+        "order": null
     },
@@ -103,0 +93,0 @@ "resizable": false,

src/enrollment/configuration/webchartsSettings.js

@@ -27,7 +27,7 @@ export default function webchartsSettings() {
         color_by: null, // set in ./syncSettings
-        color_dom: ['Screened', 'Randomized'], // set in ../callbacks/onInit
-        colors: ['#a6bddb', '#3690c0', '#034e7b'], // set in ../callbacks/onInit
+        color_dom: null, // set in ../callbacks/onInit
+        colors: null, // set in ../callbacks/onInit
         legend: {
             label: '',
-            order: ['Screened', 'Randomized'] // set in ../callbacks/onInit
+            order: null // set in ../callbacks/onInit
         },
@@ -34,0 +34,0 @@ resizable: false,

src/enrollment/data-guidelines-wiki.md

@@ -0,0 +0,0 @@ The Enrollment 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 site.

src/enrollment/test-page/index.js

@@ -1,7 +0,10 @@
-d3.csv('https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-enrollment.csv', function(error, data) {
-    if (error) console.log(error);
+d3.csv(
+    'https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-enrollment.csv',
+    function(error, data) {
+        if (error) console.log(error);
 
-    var settings = {};
-    var instance = dashboardCharts.renderers.enrollment('#container', settings);
-    instance.init(data);
-});
+        var settings = {};
+        var instance = dashboardCharts.renderers.enrollment('#container', settings);
+        instance.init(data);
+    }
+);

src/enrollmentOverTime/configuration-wiki.md

@@ -89,19 +89,7 @@ The most straightforward way to customize the enrollment chart is by using a configuration object whose properties describe the behavior and appearance of the chart. Since the enrollment chart is a Webcharts `chart` object, many default Webcharts settings are set in the [defaultSettings.js file](https://github.com/RhoInc/query-overview/blob/master/src/defaultSettings.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.
     "color_by": null,
-    "color_dom": [
-        "Screened",
-        "Randomized",
-        "Target"
-    ],
-    "colors": [
-        "#a6bddb",
-        "#3690c0",
-        "#034e7b"
-    ],
+    "color_dom": null,
+    "colors": null,
     "legend": {
         "label": "",
-        "order": [
-            "Screened",
-            "Randomized",
-            "Target"
-        ]
+        "order": null
     },
@@ -108,0 +96,0 @@ "resizable": false,

src/enrollmentOverTime/configuration/webchartsSettings.js

@@ -5,3 +5,3 @@ export default function webchartsSettings() {
             type: 'time',
-            column: null, // set in syncSettings
+            column: null, // set in ./syncSettings
             label: '',
@@ -12,3 +12,3 @@ format: '%b-%y'
             type: 'linear',
-            column: null, // set in syncSettings
+            column: null, // set in ./syncSettings
             label: '',
@@ -20,3 +20,3 @@ behavior: 'firstfilter'
                 type: 'line',
-                per: [], // set in syncSettings
+                per: [], // set in ./syncSettings
                 summarizeY: 'sum',
@@ -26,8 +26,8 @@ tooltip: '$y'
         ],
-        color_by: null, // set in syncSettings
-        color_dom: ['Screened', 'Randomized', 'Target'], // set in ../callbacks/onInit
-        colors: ['#a6bddb', '#3690c0', '#034e7b'], // set in ../callbacks/onInit
+        color_by: null, // set in ./syncSettings
+        color_dom: null, // set in ../callbacks/onInit
+        colors: null, // set in ../callbacks/onInit
         legend: {
             label: '',
-            order: ['Screened', 'Randomized', 'Target'] // set in ../callbacks/onInit
+            order: null // set in ../callbacks/onInit
         },
@@ -34,0 +34,0 @@ resizable: false,

src/enrollmentOverTime/data-guidelines-wiki.md

@@ -0,0 +0,0 @@ The Enrollment 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 enrollment over time by population.

src/enrollmentOverTime/test-page/index.js

@@ -1,7 +0,10 @@
-d3.csv('https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-enrollment-over-time.csv', function(error, data){
-    if (error) console.log(error);
+d3.csv(
+    'https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-enrollment-over-time.csv',
+    function(error, data) {
+        if (error) console.log(error);
 
-    var settings = {};
-    var instance = dashboardCharts.renderers.enrollmentOverTime('#container', settings);
-    instance.init(data);
-});
+        var settings = {};
+        var instance = dashboardCharts.renderers.enrollmentOverTime('#container', settings);
+        instance.init(data);
+    }
+);

src/forms/configuration-wiki.md

@@ -57,3 +57,4 @@ 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 [defaultSettings.js file](https://github.com/RhoInc/the forms chart/blob/master/src/defaultSettings.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.
         "type": "linear",
-        "behavior": "firstfilter"
+        "behavior": "firstfilter",
+        "format": "1d"
     },
@@ -71,19 +72,7 @@ "marks": [
     "color_by": null,
-    "color_dom": [
-        "Received",
-        "Outstanding <= 90 days",
-        "Outstanding > 90 days"
-    ],
-    "colors": [
-        "#66c2a5",
-        "#fecc5c",
-        "#e34a33"
-    ],
+    "color_dom": null,
+    "colors": null,
     "legend": {
         "label": "",
-        "order": [
-            "Received",
-            "Outstanding <= 90 days",
-            "Outstanding > 90 days"
-        ]
+        "order": null
     },
@@ -90,0 +79,0 @@ "resizable": false,

src/forms/configuration/webchartsSettings.js

@@ -10,3 +10,4 @@ export default function webchartsSettings() {
             type: 'linear',
-            behavior: 'firstfilter'
+            behavior: 'firstfilter',
+            format: '1d'
         },
@@ -24,7 +25,7 @@ marks: [
         color_by: null, // set in ./syncSettings
-        color_dom: ['Received', 'Outstanding <= 90 days', 'Outstanding > 90 days'], // set in ../callbacks/onInit
-        colors: ['#66c2a5', '#fecc5c', '#e34a33'], // set in ../callbacks/onInit
+        color_dom: null, // set in ../callbacks/onInit
+        colors: null, // set in ../callbacks/onInit
         legend: {
             label: '',
-            order: ['Received', 'Outstanding <= 90 days', 'Outstanding > 90 days'] // set in ../callbacks/onInit
+            order: null // set in ../callbacks/onInit
         },
@@ -31,0 +32,0 @@ resizable: false,

src/forms/data-guidelines-wiki.md

@@ -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.

src/forms/test-page/index.js

@@ -1,7 +0,10 @@
-d3.csv('https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-forms.csv', function (error, data) {
-    if (error) console.log(error);
+d3.csv(
+    'https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-forms.csv',
+    function(error, data) {
+        if (error) console.log(error);
 
-    var settings = {};
-    var instance = dashboardCharts.renderers.forms('#container');
-    instance.init(data);
-});
+        var settings = {};
+        var instance = dashboardCharts.renderers.forms('#container');
+        instance.init(data);
+    }
+);

src/forms/wrapper.js

@@ -5,3 +5,3 @@ import configuration from './configuration/index';
 
-export default function enrollment(element = 'body', settings = {}) {
+export default function forms(element = 'body', settings = {}) {
     //Sync settings.
@@ -8,0 +8,0 @@ const mergedSettings = Object.assign({}, configuration.settings, settings);

src/queries/configuration-wiki.md

@@ -71,19 +71,7 @@ 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 [defaultSettings.js file](https://github.com/RhoInc/the query chart/blob/master/src/defaultSettings.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.
     "color_by": null,
-    "color_dom": [
-        "Resolved",
-        "Outstanding <= 90 days",
-        "Outstanding > 90 days"
-    ],
-    "colors": [
-        "#66c2a5",
-        "#fecc5c",
-        "#e34a33"
-    ],
+    "color_dom": null,
+    "colors": null,
     "legend": {
         "label": "",
-        "order": [
-            "Resolved",
-            "Outstanding <= 90 days",
-            "Outstanding > 90 days"
-        ]
+        "order": null
     },
@@ -90,0 +78,0 @@ "resizable": false,

src/queries/configuration/webchartsSettings.js

 export default function webchartsSettings() {
     return {
         x: {
-            column: null, // set in syncSettings
+            column: null, // set in ./syncSettings
             type: 'ordinal',
@@ -16,5 +16,5 @@ label: ''
                 arrange: 'stacked',
-                split: null, // set in syncSettings
+                split: null, // set in ./syncSettings
                 type: 'bar',
-                per: [], // set in syncSettings
+                per: [], // set in ./syncSettings
                 summarizeY: 'percent',
@@ -24,8 +24,8 @@ tooltip: '$y'
         ],
-        color_by: null, // set in syncSettings
-        color_dom: ['Resolved', 'Outstanding <= 90 days', 'Outstanding > 90 days'], // set in ../callbacks/onInit
-        colors: ['#66c2a5', '#fecc5c', '#e34a33'], // set in ../callbacks/onInit
+        color_by: null, // set in ./syncSettings
+        color_dom: null, // set in ../callbacks/onInit
+        colors: null, // set in ../callbacks/onInit
         legend: {
             label: '',
-            order: ['Resolved', 'Outstanding <= 90 days', 'Outstanding > 90 days'] // set in ../callbacks/onInit
+            order: null // set in ../callbacks/onInit
         },
@@ -32,0 +32,0 @@ resizable: false,

src/queries/data-guidelines-wiki.md

@@ -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.

src/queries/test-page/index.js

@@ -1,7 +0,10 @@
-d3.csv('https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-queries.csv', function (error, data) {
-    if (error) console.log(error);
+d3.csv(
+    'https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-queries.csv',
+    function(error, data) {
+        if (error) console.log(error);
 
-    var settings = {};
-    var instance = dashboardCharts.renderers.queries('#container');
-    instance.init(data);
-});
+        var settings = {};
+        var instance = dashboardCharts.renderers.queries('#container');
+        instance.init(data);
+    }
+);

src/queries/wrapper.js

@@ -5,3 +5,3 @@ import configuration from './configuration/index';
 
-export default function enrollment(element = 'body', settings = {}) {
+export default function queries(element = 'body', settings = {}) {
     //Sync settings.
@@ -8,0 +8,0 @@ const mergedSettings = Object.assign({}, configuration.settings, settings);

src/util/defineStatusSet.js

@@ -41,7 +41,25 @@ export default function defineStatusSet(
 
-    //Update chart settings.
-    this.config.color_dom = this.status_set.map(status => status.split(':|:')[0]);
+    //Update color domain.
+    if (!(Array.isArray(this.config.color_dom) && this.config.color_dom.length))
+        this.config.color_dom = this.status_set.map(status => status.split(':|:')[0]);
+    else
+        this.config.color_dom = this.config.color_dom.concat(
+            this.status_set
+                .map(status => status.split(':|:')[0])
+                .filter(status => this.config.color_dom.indexOf(status) < 0)
+        );
+
+    //Update colors.
     if (variables.indexOf(status_color_col) > -1)
         this.config.colors = this.status_set.map(status => status.split(':|:')[2]);
-    this.config.legend.order = this.status_set.map(status => status.split(':|:')[0]);
+
+    //Update legend order.
+    if (!(Array.isArray(this.config.legend.order) && this.config.legend.order.length))
+        this.config.legend.order = this.status_set.map(status => status.split(':|:')[0]);
+    else
+        this.config.legend.order = this.config.legend.order.concat(
+            this.status_set
+                .map(status => status.split(':|:')[0])
+                .filter(status => this.config.legend.order.indexOf(status) < 0)
+        );
 }

src/visitCompletion/configuration-wiki.md

@@ -94,25 +94,7 @@ 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 [defaultSettings.js file](https://github.com/RhoInc/the visit completion chart/blob/master/src/defaultSettings.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.
     "color_by": null,
-    "color_dom": [
-        "Completed",
-        "Expected",
-        "Overdue",
-        "Missed",
-        "Terminated"
-    ],
-    "colors": [
-        "#4daf4a",
-        "#377eb8",
-        "#ff7f00",
-        "#e41a1c",
-        "#999999"
-    ],
+    "color_dom": null,
+    "colors": null,
     "legend": {
         "label": "",
-        "order": [
-            "Completed",
-            "Expected",
-            "Overdue",
-            "Missed",
-            "Terminated"
-        ]
+        "order": null
     },
@@ -119,0 +101,0 @@ "resizable": false,

src/visitCompletion/configuration/webchartsSettings.js

@@ -26,13 +26,7 @@ export default function webchartsSettings() {
         color_by: null, // set in ./syncSettings
-        color_dom: ['Completed', 'Expected', 'Overdue', 'Missed', 'Terminated'], // set in ../callbacks/onInit
-        colors: ['#4daf4a', '#377eb8', '#ff7f00', '#e41a1c', '#999999'], // set in ./syncSettings
+        color_dom: null, // set in ../callbacks/onInit
+        colors: null, // set in ./syncSettings
         legend: {
             label: '',
-            order: [
-                'Completed',
-                'Expected',
-                'Overdue',
-                'Missed',
-                'Terminated' // set in ../callbacks/onInit
-            ]
+            order: null // set in ../callbacks/onInit
         },
@@ -39,0 +33,0 @@ resizable: false,

src/visitCompletion/data-guidelines-wiki.md

@@ -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.

src/visitCompletion/test-page/index.js

@@ -1,7 +0,10 @@
-d3.csv('https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-visit-completion.csv', function(error, data) {
-    if (error) console.log(error);
+d3.csv(
+    'https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-visit-completion.csv',
+    function(error, data) {
+        if (error) console.log(error);
 
-    var settings = {};
-    var instance = dashboardCharts.renderers.visitCompletion('#container', settings);
-    instance.init(data);
-});
+        var settings = {};
+        var instance = dashboardCharts.renderers.visitCompletion('#container', settings);
+        instance.init(data);
+    }
+);

src/visitCompletion/wrapper.js

@@ -5,3 +5,3 @@ import configuration from './configuration/index';
 
-export default function enrollment(element = 'body', settings = {}) {
+export default function visitCompletion(element = 'body', settings = {}) {
     //Sync settings.
@@ -8,0 +8,0 @@ const mergedSettings = Object.assign({}, configuration.settings, settings);

test-page/index.js

@@ -5,3 +5,3 @@ /**-------------------------------------------------------------------------------------------\
 
-    var dataElementTL = ".gg-dash-item.top.left";
+    var dataElementTL = '.gg-dash-item.top.left';
     var instanceTL =  dashboardCharts.renderers.enrollment(dataElementTL + ' .gg-dash-item-content');
@@ -17,3 +17,3 @@
 
-    var dataElementTM = ".gg-dash-item.top.middle";
+    var dataElementTM = '.gg-dash-item.top.middle';
     var instanceTM =  dashboardCharts.renderers.visitCompletion(dataElementTM + ' .gg-dash-item-content', dataElementTM + ' .gg-dash-item-content', dataElementTM + ' .gg-dash-item-title');
@@ -29,4 +29,4 @@
 
-    var dataElementTR = ".gg-dash-item.top.right";
-    var instanceTR = dashboardCharts.renderers.queries(dataElementTR + " .gg-dash-item-content");
+    var dataElementTR = '.gg-dash-item.top.right';
+    var instanceTR = dashboardCharts.renderers.queries(dataElementTR + ' .gg-dash-item-content');
 
@@ -41,4 +41,4 @@ d3.csv('https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-queries.csv', function (error, data) {
 
-    var dataElementBL = ".gg-dash-item.bottom.left"
-    var instanceBL = dashboardCharts.renderers.enrollmentOverTime(dataElementBL+" .gg-dash-item-content")
+    var dataElementBL = '.gg-dash-item.bottom.left'
+    var instanceBL = dashboardCharts.renderers.enrollmentOverTime(dataElementBL+' .gg-dash-item-content')
 
@@ -53,4 +53,4 @@ d3.csv('https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-enrollment-over-time.csv', function(error, data){
 
-    var dataElementBR = ".gg-dash-item.bottom.middle";
-    var instanceBR = dashboardCharts.renderers.forms(dataElementBR + " .gg-dash-item-content");
+    var dataElementBR = '.gg-dash-item.bottom.middle';
+    var instanceBR = dashboardCharts.renderers.forms(dataElementBR + ' .gg-dash-item-content');
 
@@ -57,0 +57,0 @@ d3.csv('https://raw.githubusercontent.com/RhoInc/data-library/master/data/clinical-trials/data-cleaning/dashboard-forms.csv', function (error, data) {

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

158371

increased by3.69%

Dev dependency count

9

decreased by-10%

Number of package files

143

increased by17.21%

Lines of code

3335

increased by6.01%

Worsened metrics

Number of lines in readme file

9

decreased by-10%

No dependency changes