d2-charts-api - npm Package Compare versions

Comparing version 31.0.14 to 32.0.0

.vscode/settings.json

 {
-  "editor.formatOnSave": false
-}
+}

lib/config/adapters/dhis_highcharts/chart.js

@@ -20,4 +20,6 @@ 'use strict';
 var DEFAULT_CHART = {
-    fontFamily: 'Roboto,Helvetica Neue,Helvetica,Arial,sans-serif !important',
-    spacingTop: 20
+    spacingTop: 20,
+    style: {
+        fontFamily: 'Roboto,Helvetica Neue,Helvetica,Arial,sans-serif'
+    }
 };
@@ -24,0 +26,0 @@

lib/config/adapters/dhis_highcharts/index.js

@@ -17,2 +17,3 @@ 'use strict';
     var _layout = getTransformedLayout(layout);
+    var _extraOptions = getTransformedExtraOptions(extraOptions);
 
@@ -29,21 +30,21 @@ var series = store.generateData({
         // type etc
-        chart: (0, _chart2.default)(_layout, el, extraOptions.dashboard),
+        chart: (0, _chart2.default)(_layout, el, _extraOptions.dashboard),
 
         // title
-        title: (0, _title2.default)(_layout, store.data[0].metaData, extraOptions.dashboard),
+        title: (0, _title2.default)(_layout, store.data[0].metaData, _extraOptions.dashboard),
 
         // subtitle
-        subtitle: (0, _subtitle2.default)(series, _layout, store.data[0].metaData, extraOptions.dashboard),
+        subtitle: (0, _subtitle2.default)(series, _layout, store.data[0].metaData, _extraOptions.dashboard),
 
         // x-axis
-        xAxis: (0, _xAxis2.default)(store, _layout, extraOptions),
+        xAxis: (0, _xAxis2.default)(store, _layout, _extraOptions),
 
         // y-axis
-        yAxis: (0, _yAxis2.default)(_layout, series, extraOptions),
+        yAxis: (0, _yAxis2.default)(_layout, series, _extraOptions),
 
         // series
-        series: (0, _series2.default)(series.slice(), store, _layout, isStacked, extraOptions),
+        series: (0, _series2.default)(series.slice(), store, _layout, isStacked, _extraOptions),
 
         // legend
-        legend: (0, _legend2.default)(_layout, extraOptions.dashboard),
+        legend: (0, _legend2.default)(_layout, _extraOptions.dashboard),
 
@@ -148,2 +149,4 @@ // pane
 
+var _themes = require('../../../util/colors/themes');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -160,2 +163,8 @@
 };
+
+var getTransformedExtraOptions = function getTransformedExtraOptions(extraOptions) {
+    return _extends({}, extraOptions, {
+        multiAxisTheme: extraOptions.multiAxisTheme || _themes.defaultMultiAxisTheme1
+    });
+};
 //# sourceMappingURL=index.js.map

lib/config/adapters/dhis_highcharts/series/index.js

@@ -45,2 +45,6 @@ 'use strict';
 
+var _seriesItems = require('../seriesItems');
+
+var _gradientColorGenerator = require('../../../../util/colors/gradientColorGenerator');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,7 +54,13 @@
 
-var HIGHCHARTS_COLUMN = 'column';
-var HIGHCHARTS_BAR = 'bar';
-var HIGHCHARTS_PERCENT = 'percent';
-var HIGHCHARTS_NORMAL = 'normal';
+var HIGHCHARTS_TYPE_COLUMN = 'column';
+var HIGHCHARTS_TYPE_BAR = 'bar';
+var HIGHCHARTS_TYPE_PERCENT = 'percent';
+var HIGHCHARTS_TYPE_NORMAL = 'normal';
 
+var epiCurveTypes = [HIGHCHARTS_TYPE_COLUMN, HIGHCHARTS_TYPE_BAR];
+
+function getAnimation(option, fallback) {
+    return typeof option === 'number' ? option : fallback;
+}
+
 function getColor(colors, index) {
@@ -60,7 +70,60 @@ return colors[index] || getColor(colors, index - colors.length);
 
-function getAnimation(option, fallback) {
-    return typeof option === 'number' ? option : fallback;
+// returns:
+// {
+//     id1: 'color1',
+//     id2: 'color2',
+//     id3: 'color3',
+// };
+function getIdColorMap(seriesItems, series, layout, extraOptions) {
+    if ((0, _seriesItems.hasExtraAxis)(seriesItems) && (0, _type.isDualAxis)(layout.type)) {
+        // {
+        //     0: ['id1', 'id2', 'id3'],
+        //     1: ['id4', 'id5'],
+        // };
+        var axisIdsMap = (0, _seriesItems.getAxisIdsMap)(seriesItems, series);
+        // {
+        //     0: {
+        //         startColor: '#3f6a92',
+        //         endColor: '#6cb8ff'
+        //     },
+        //     1: {
+        //         startColor: '#9e3640',
+        //         endColor: '#ff5666',
+        //     },
+        // };
+        var theme = extraOptions.multiAxisTheme;
+        // {
+        //     0: ['color1', 'color2', 'color3'],
+        //     1: ['color4', 'color5'],
+        // };
+        var colorsByAxis = Object.keys(axisIdsMap).reduce(function (map, axis) {
+            var numberOfIds = axisIdsMap[axis].length;
+            map[axis] = (0, _gradientColorGenerator.generateColors)(theme[axis].startColor, theme[axis].endColor, numberOfIds, true);
+            return map;
+        }, {});
+
+        return Object.keys(colorsByAxis).reduce(function (map, axis) {
+            var colors = colorsByAxis[axis];
+            var ids = axisIdsMap[axis];
+
+            ids.forEach(function (id, index) {
+                map[id] = colors[index];
+            });
+
+            return map;
+        }, {});
+    } else {
+        var colors = extraOptions.colors;
+
+        return series.reduce(function (map, s, index) {
+            map[s.id] = getColor(colors, index);
+            return map;
+        }, {});
+    }
 }
 
 function getDefault(series, store, layout, isStacked, extraOptions) {
+    var fullIdAxisMap = (0, _seriesItems.getFullIdAxisMap)(layout.seriesItems, series);
+    var idColorMap = getIdColorMap(layout.seriesItems, series, layout, extraOptions);
+
     series.forEach(function (seriesObj, index) {
@@ -77,18 +140,22 @@ // show values
             // DHIS2-1060: stacked charts can optionally be shown as 100% stacked charts
-            seriesObj.stacking = layout.percentStackedValues === true ? HIGHCHARTS_PERCENT : HIGHCHARTS_NORMAL;
+            seriesObj.stacking = layout.percentStackedValues === true ? HIGHCHARTS_TYPE_PERCENT : HIGHCHARTS_TYPE_NORMAL;
         }
 
         // DHIS2-2101
-        // show bar/columm chart as EPI curve (basically remove spacing between bars/columns)
-        var seriesType = (0, _type2.default)(layout.type).type;
+        // show bar/column chart as EPI curve (basically remove spacing between bars/columns)
+        if (layout.noSpaceBetweenColumns) {
+            var seriesType = (0, _type2.default)(layout.type).type;
 
-        if ((seriesType === HIGHCHARTS_COLUMN || seriesType === HIGHCHARTS_BAR) && layout.noSpaceBetweenColumns) {
-            seriesObj.pointPadding = 0;
-            seriesObj.groupPadding = 0;
+            if (arrayContains(epiCurveTypes, seriesType)) {
+                seriesObj.pointPadding = 0;
+                seriesObj.groupPadding = 0;
+            }
         }
 
         // color
-        seriesObj.color = getColor(extraOptions.colors, index);
+        seriesObj.color = idColorMap[seriesObj.id];
 
-        // custom names for series for Year on year chart type
+        seriesObj.yAxis = fullIdAxisMap[seriesObj.id];
+
+        // custom names for "year over year" series
         if (extraOptions.yearlySeries) {
@@ -95,0 +162,0 @@ seriesObj.name = extraOptions.yearlySeries[index];

lib/config/adapters/dhis_highcharts/type.js

@@ -9,2 +9,3 @@ 'use strict';
 exports.isYearOverYear = isYearOverYear;
+exports.isDualAxis = isDualAxis;
 
@@ -61,2 +62,4 @@ exports.default = function (type) {
 
+var dualAxisTypes = [CHART_TYPE_COLUMN, CHART_TYPE_BAR, CHART_TYPE_LINE, CHART_TYPE_AREA];
+
 function getIsStacked(type) {
@@ -69,2 +72,6 @@ return (0, _arrayContains2.default)(stackedTypes, type);
 }
+
+function isDualAxis(type) {
+    return (0, _arrayContains2.default)(dualAxisTypes, type);
+}
 //# sourceMappingURL=type.js.map

lib/config/adapters/dhis_highcharts/yAxis/index.js

@@ -17,3 +17,3 @@ 'use strict';
         default:
-            yAxis = getDefault(layout);
+            yAxis = getDefault(layout, extraOptions);
     }
@@ -50,2 +50,4 @@
 
+var _seriesItems = require('../seriesItems');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -113,17 +115,44 @@
 
-function getDefault(layout) {
-    return (0, _objectClean2.default)({
-        min: getMinValue(layout),
-        max: getMaxValue(layout),
-        tickAmount: getSteps(layout),
-        title: (0, _getAxisTitle2.default)(layout.rangeAxisLabel),
-        plotLines: (0, _arrayClean2.default)([getTargetLine(layout), getBaseLine(layout)]),
-        gridLineColor: DEFAULT_GRIDLINE_COLOR,
-        labels: getLabels(layout),
+function getDefault(layout, extraOptions) {
+    var axes = [];
 
-        // DHIS2-649: put first serie at the bottom of the stack
-        // in this way the legend sequence matches the serie sequence
-        reversedStacks: (0, _type.getIsStacked)(layout.type) ? false : true
-    });
+    if ((0, _type.isDualAxis)(layout.type) && (0, _seriesItems.hasExtraAxis)(layout.seriesItems)) {
+        axes.push({
+            title: {
+                text: 'Axis 1',
+                style: {
+                    color: extraOptions.multiAxisTheme[0].mainColor,
+                    'font-weight': 700
+                }
+            }
+        });
+
+        axes.push({
+            title: {
+                text: 'Axis 2',
+                style: {
+                    color: extraOptions.multiAxisTheme[1].mainColor,
+                    'font-weight': 700
+                }
+            },
+            opposite: true
+        });
+    } else {
+        axes.push((0, _objectClean2.default)({
+            min: getMinValue(layout),
+            max: getMaxValue(layout),
+            tickAmount: getSteps(layout),
+            title: (0, _getAxisTitle2.default)(layout.rangeAxisLabel),
+            plotLines: (0, _arrayClean2.default)([getTargetLine(layout), getBaseLine(layout)]),
+            gridLineColor: DEFAULT_GRIDLINE_COLOR,
+            labels: getLabels(layout),
+
+            // DHIS2-649: put first serie at the bottom of the stack
+            // in this way the legend sequence matches the serie sequence
+            reversedStacks: (0, _type.getIsStacked)(layout.type) ? false : true
+        }));
+    }
+
+    return axes;
 }
 //# sourceMappingURL=index.js.map

lib/store/adapters/dhis_highcharts/index.js

@@ -105,3 +105,4 @@ 'use strict';
         acc.push({
-            name: serieLabel,
+            id: seriesId,
+            name: metaData.items[seriesId].name,
             data: serieData
@@ -108,0 +109,0 @@ });

lib/util/colors/index.js

@@ -6,5 +6,10 @@ 'use strict';
 });
-var theme1 = '#a9be3b|#558cc0|#d34957|#ff9f3a|#968f8f|#b7409f|#ffda64|#4fbdae|#b78040|#676767|#6a33cf|#4a7833'.split('|');
+exports.generateColors = exports.theme1 = undefined;
 
-exports.theme1 = theme1;
+var _themes = require('./themes');
+
+var _gradientColorGenerator = require('./gradientColorGenerator.js');
+
+exports.theme1 = _themes.theme1;
+exports.generateColors = _gradientColorGenerator.generateColors;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "d2-charts-api",
-  "version": "31.0.14",
+  "version": "32.0.0",
   "description": "DHIS2 charts api",
@@ -5,0 +5,0 @@ "main": "index.js",

src/config/adapters/dhis_highcharts/chart.js

 import getType from './type';
 
 const DEFAULT_CHART = {
-    fontFamily: 'Roboto,Helvetica Neue,Helvetica,Arial,sans-serif !important',
-    spacingTop: 20
+    spacingTop: 20,
+    style: {
+        fontFamily: 'Roboto,Helvetica Neue,Helvetica,Arial,sans-serif',
+    },
 };
@@ -7,0 +9,0 @@

src/config/adapters/dhis_highcharts/index.js

@@ -16,2 +16,3 @@ import objectClean from 'd2-utilizr/lib/objectClean';
 import addTrendLines, { isRegressionIneligible } from './addTrendLines';
+import { defaultMultiAxisTheme1 } from '../../../util/colors/themes';
 
@@ -27,4 +28,10 @@ const getTransformedLayout = layout => ({
 
+const getTransformedExtraOptions = extraOptions => ({
+    ...extraOptions,
+    multiAxisTheme: extraOptions.multiAxisTheme || defaultMultiAxisTheme1,
+});
+
 export default function({ store, layout, el, extraConfig, extraOptions }) {
     const _layout = getTransformedLayout(layout);
+    const _extraOptions = getTransformedExtraOptions(extraOptions);
 
@@ -41,21 +48,21 @@ let series = store.generateData({
         // type etc
-        chart: getChart(_layout, el, extraOptions.dashboard),
+        chart: getChart(_layout, el, _extraOptions.dashboard),
 
         // title
-        title: getTitle(_layout, store.data[0].metaData, extraOptions.dashboard),
+        title: getTitle(_layout, store.data[0].metaData, _extraOptions.dashboard),
 
         // subtitle
-        subtitle: getSubtitle(series, _layout, store.data[0].metaData, extraOptions.dashboard),
+        subtitle: getSubtitle(series, _layout, store.data[0].metaData, _extraOptions.dashboard),
 
         // x-axis
-        xAxis: getXAxis(store, _layout, extraOptions),
+        xAxis: getXAxis(store, _layout, _extraOptions),
 
         // y-axis
-        yAxis: getYAxis(_layout, series, extraOptions),
+        yAxis: getYAxis(_layout, series, _extraOptions),
 
         // series
-        series: getSeries(series.slice(), store, _layout, isStacked, extraOptions),
+        series: getSeries(series.slice(), store, _layout, isStacked, _extraOptions),
 
         // legend
-        legend: getLegend(_layout, extraOptions.dashboard),
+        legend: getLegend(_layout, _extraOptions.dashboard),
 
@@ -62,0 +69,0 @@ // pane

src/config/adapters/dhis_highcharts/series/index.js

 import getCumulativeData from './../getCumulativeData';
 import getPie from './pie';
 import getGauge from './gauge';
-import getType from '../type';
+import getType, { isDualAxis } from '../type';
 import { CHART_TYPE_PIE, CHART_TYPE_GAUGE } from '../type';
+import { getFullIdAxisMap, getAxisIdsMap, hasExtraAxis } from '../seriesItems';
+import { generateColors } from '../../../../util/colors/gradientColorGenerator';
 
 const DEFAULT_ANIMATION_DURATION = 200;
 
-const HIGHCHARTS_COLUMN = 'column';
-const HIGHCHARTS_BAR = 'bar';
-const HIGHCHARTS_PERCENT = 'percent';
-const HIGHCHARTS_NORMAL = 'normal';
+const HIGHCHARTS_TYPE_COLUMN = 'column';
+const HIGHCHARTS_TYPE_BAR = 'bar';
+const HIGHCHARTS_TYPE_PERCENT = 'percent';
+const HIGHCHARTS_TYPE_NORMAL = 'normal';
 
+const epiCurveTypes = [HIGHCHARTS_TYPE_COLUMN, HIGHCHARTS_TYPE_BAR];
+
+function getAnimation(option, fallback) {
+    return typeof option === 'number' ? option : fallback;
+}
+
 function getColor(colors, index) {
@@ -18,7 +26,61 @@ return colors[index] || getColor(colors, index - colors.length);
 
-function getAnimation(option, fallback) {
-    return typeof option === 'number' ? option : fallback;
+// returns:
+// {
+//     id1: 'color1',
+//     id2: 'color2',
+//     id3: 'color3',
+// };
+function getIdColorMap(seriesItems, series, layout, extraOptions) {
+    if (hasExtraAxis(seriesItems) && isDualAxis(layout.type)) {
+        // {
+        //     0: ['id1', 'id2', 'id3'],
+        //     1: ['id4', 'id5'],
+        // };
+        const axisIdsMap = getAxisIdsMap(seriesItems, series);
+        // {
+        //     0: {
+        //         startColor: '#3f6a92',
+        //         endColor: '#6cb8ff'
+        //     },
+        //     1: {
+        //         startColor: '#9e3640',
+        //         endColor: '#ff5666',
+        //     },
+        // };
+        const theme = extraOptions.multiAxisTheme;
+        // {
+        //     0: ['color1', 'color2', 'color3'],
+        //     1: ['color4', 'color5'],
+        // };
+        const colorsByAxis = Object.keys(axisIdsMap).reduce((map, axis) => {
+            const numberOfIds = axisIdsMap[axis].length;
+            map[axis] = generateColors(theme[axis].startColor, theme[axis].endColor, numberOfIds, true);
+            return map;
+        }, {});
+
+        return Object.keys(colorsByAxis).reduce((map, axis) => {
+            const colors = colorsByAxis[axis];
+            const ids = axisIdsMap[axis];
+
+            ids.forEach((id, index) => {
+                map[id] = colors[index];
+            });
+
+            return map;
+        }, {});
+    }
+    else {
+        const colors = extraOptions.colors;
+
+        return series.reduce((map, s, index) => {
+            map[s.id] = getColor(colors, index);
+            return map;
+        }, {});
+    }
 }
 
 function getDefault(series, store, layout, isStacked, extraOptions) {
+    const fullIdAxisMap = getFullIdAxisMap(layout.seriesItems, series);
+    const idColorMap = getIdColorMap(layout.seriesItems, series, layout, extraOptions);
+
     series.forEach((seriesObj, index) => {
@@ -35,18 +97,22 @@ // show values
             // DHIS2-1060: stacked charts can optionally be shown as 100% stacked charts
-            seriesObj.stacking = layout.percentStackedValues === true ? HIGHCHARTS_PERCENT : HIGHCHARTS_NORMAL;
+            seriesObj.stacking = layout.percentStackedValues === true ? HIGHCHARTS_TYPE_PERCENT : HIGHCHARTS_TYPE_NORMAL;
         }
 
         // DHIS2-2101
-        // show bar/columm chart as EPI curve (basically remove spacing between bars/columns)
-        const seriesType = getType(layout.type).type;
+        // show bar/column chart as EPI curve (basically remove spacing between bars/columns)
+        if (layout.noSpaceBetweenColumns) {
+            const seriesType = getType(layout.type).type;
 
-        if ((seriesType === HIGHCHARTS_COLUMN || seriesType === HIGHCHARTS_BAR) && layout.noSpaceBetweenColumns) {
-            seriesObj.pointPadding = 0;
-            seriesObj.groupPadding = 0;
+            if (arrayContains(epiCurveTypes, seriesType)) {
+                seriesObj.pointPadding = 0;
+                seriesObj.groupPadding = 0;
+            }
         }
 
         // color
-        seriesObj.color = getColor(extraOptions.colors, index);
+        seriesObj.color = idColorMap[seriesObj.id];
 
-        // custom names for series for Year on year chart type
+        seriesObj.yAxis = fullIdAxisMap[seriesObj.id];
+
+        // custom names for "year over year" series
         if (extraOptions.yearlySeries) {
@@ -53,0 +119,0 @@ seriesObj.name = extraOptions.yearlySeries[index];

src/config/adapters/dhis_highcharts/type.js

@@ -30,2 +30,9 @@ import arrayContains from 'd2-utilizr/lib/arrayContains';
 
+const dualAxisTypes = [
+    CHART_TYPE_COLUMN,
+    CHART_TYPE_BAR,
+    CHART_TYPE_LINE,
+    CHART_TYPE_AREA,
+];
+
 export function getIsStacked(type) {
@@ -39,2 +46,6 @@ return arrayContains(stackedTypes, type);
 
+export function isDualAxis(type) {
+    return arrayContains(dualAxisTypes, type);
+}
+
 export default function(type) {
@@ -41,0 +52,0 @@ switch (type) {

src/config/adapters/dhis_highcharts/yAxis/index.js

@@ -6,5 +6,6 @@ import arrayClean from 'd2-utilizr/lib/arrayClean';
 import getAxisTitle from '../getAxisTitle';
-import { CHART_TYPE_GAUGE } from '../type';
+import { CHART_TYPE_GAUGE, isDualAxis } from '../type';
 import getGauge from './gauge';
 import { getIsStacked } from '../type';
+import { hasExtraAxis } from '../seriesItems';
 
@@ -87,16 +88,44 @@ const DEFAULT_MIN_VALUE = 0;
 
-function getDefault(layout) {
-    return objectClean({
-        min: getMinValue(layout),
-        max: getMaxValue(layout),
-        tickAmount: getSteps(layout),
-        title: getAxisTitle(layout.rangeAxisLabel),
-        plotLines: arrayClean([getTargetLine(layout), getBaseLine(layout)]),
-        gridLineColor: DEFAULT_GRIDLINE_COLOR,
-        labels: getLabels(layout),
+function getDefault(layout, extraOptions) {
+    const axes = [];
 
-        // DHIS2-649: put first serie at the bottom of the stack
-        // in this way the legend sequence matches the serie sequence
-        reversedStacks: getIsStacked(layout.type) ? false : true,
-    });
+    if (isDualAxis(layout.type) && hasExtraAxis(layout.seriesItems)) {
+        axes.push({
+            title: {
+                text: 'Axis 1',
+                style: {
+                    color: extraOptions.multiAxisTheme[0].mainColor,
+                    'font-weight': 700,
+                },
+            },
+        });
+
+        axes.push({
+            title: {
+                text: 'Axis 2',
+                style: {
+                    color: extraOptions.multiAxisTheme[1].mainColor,
+                    'font-weight': 700,
+                },
+            },
+            opposite: true,
+        });
+    }
+    else {
+        axes.push(objectClean({
+            min: getMinValue(layout),
+            max: getMaxValue(layout),
+            tickAmount: getSteps(layout),
+            title: getAxisTitle(layout.rangeAxisLabel),
+            plotLines: arrayClean([getTargetLine(layout), getBaseLine(layout)]),
+            gridLineColor: DEFAULT_GRIDLINE_COLOR,
+            labels: getLabels(layout),
+
+            // DHIS2-649: put first serie at the bottom of the stack
+            // in this way the legend sequence matches the serie sequence
+            reversedStacks: getIsStacked(layout.type) ? false : true,
+        }));
+    }
+
+    return axes;
 }
@@ -112,3 +141,3 @@
         default:
-            yAxis = getDefault(layout);
+            yAxis = getDefault(layout, extraOptions);
     }
@@ -115,0 +144,0 @@

src/store/adapters/dhis_highcharts/index.js

@@ -59,3 +59,4 @@ import getYearOnYear from './yearOnYear';
         acc.push({
-            name: serieLabel,
+            id: seriesId,
+            name: metaData.items[seriesId].name,
             data: serieData,
@@ -62,0 +63,0 @@ });

src/util/colors/index.js

@@ -1,5 +0,7 @@
-const theme1 = '#a9be3b|#558cc0|#d34957|#ff9f3a|#968f8f|#b7409f|#ffda64|#4fbdae|#b78040|#676767|#6a33cf|#4a7833'.split('|');
+import { theme1 } from './themes';
+import { generateColors } from './gradientColorGenerator.js';
 
 export {
-    theme1
+    theme1,
+    generateColors
 };

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

Number of package files

142

increased by5.97%

Lines of code

3907

increased by12.24%

Worsened metrics

Total package byte prevSize

334647

decreased by-11.6%

No dependency changes