@forter/chart - npm Package Compare versions

Comparing version 5.7.1 to 5.7.2

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [5.7.2](https://github.com/forter/web-components/compare/@forter/chart@5.7.1...@forter/chart@5.7.2) (2021-10-04)
+
+
+### Bug Fixes
+
+* **chart:** anchored time axes to min and max values ([fcfb562](https://github.com/forter/web-components/commit/fcfb562))
+
+
+
+
+
 ## [5.7.1](https://github.com/forter/web-components/compare/@forter/chart@5.7.0...@forter/chart@5.7.1) (2021-10-04)
@@ -8,0 +19,0 @@

chart-config-builders/period-over-period-builder.js

@@ -14,3 +14,3 @@ import { isPeriodOverPeriodChart } from './period-over-period.helpers.js';
     chartJSConfig.data.datasets = extractPeriodOverPeriodDataSets(config, chartJSConfig.data.datasets, context, tickConfig);
-    chartJSConfig.options = setPeriodOverPeriodXAxis(tickConfig, chartJSConfig.options);
+    chartJSConfig.options = setPeriodOverPeriodXAxis(tickConfig, chartJSConfig.options, chartJSConfig.data.datasets);
   }
@@ -21,9 +21,11 @@
 
-const setPeriodOverPeriodXAxis = (tickConfig, options) => {
+const setPeriodOverPeriodXAxis = (tickConfig, options, datasets) => {
+  const minXValues = datasets.reduce((minXValues, dataset) => {
+    minXValues[dataset.xAxisID] = moment(dataset.data[0].x, 'DD MMM YYYY');
+    return minXValues;
+  }, {});
   const current = { ...options.scales.x,
     axis: 'x',
-    min: null,
-    // todo
-    max: null,
-    // todo
+    min: minXValues[POP_SCALES.CURRENT].format('x'),
+    max: minXValues[POP_SCALES.CURRENT].add(tickConfig.periodWindow, 'day').format('x'),
     type: 'time',
@@ -56,5 +58,5 @@ time: {
 
-    if (currentDate.subtract(tickMap[id].counter * tickConfig.showEvery, tickConfig.unit).isSame(tickMap[id].firstDate) && tickMap[id].counter < tickConfig.length) {
+    if (currentDate.subtract(tickMap[id].counter * tickConfig.showEvery, tickConfig.unit).isSame(tickMap[id].firstDate)) {
       tickMap[id].counter++;
-      return `${tickConfig.text} ${tickMap[id].counter}`;
+      return index < tickConfig.periodWindow ? `${tickConfig.text} ${tickMap[id].counter}` : '';
     }
@@ -71,6 +73,4 @@
     axis: 'x',
-    min: null,
-    // todo
-    max: null,
-    // todo
+    min: minXValues[POP_SCALES.PREVIOUS].format('x'),
+    max: minXValues[POP_SCALES.PREVIOUS].add(tickConfig.periodWindow, 'day').format('x'),
     type: 'time',
@@ -97,3 +97,4 @@ time: {
 }, datasets, context, tickConfig) => {
-  const newDatasets = [];
+  const popDatasets = [];
+  const otherDatasets = [];
   series.map((series, index) => {
@@ -110,3 +111,3 @@ let dataset;
         fill: {
-          target: '+1',
+          target: '-1',
           above: 'transparent',
@@ -129,3 +130,3 @@ below: 'transparent'
           above: 'transparent',
-          target: '-1'
+          target: '+1'
         }
@@ -155,5 +156,12 @@ };
     });
-    newDatasets.push(dataset);
+
+    if (series.label === POP_SCALES.CURRENT) {
+      popDatasets.unshift(dataset);
+    } else if (series.label === POP_SCALES.PREVIOUS) {
+      popDatasets.push(dataset);
+    } else {
+      otherDatasets.push(dataset);
+    }
   });
-  return newDatasets;
+  return [...popDatasets, ...otherDatasets];
 };
@@ -169,6 +177,6 @@
     unit: 'day',
-    length: 6,
     [POP_SCALES.CURRENT]: 'Last 7 days',
     [POP_SCALES.PREVIOUS]: 'Previous 7 days',
-    showEvery: 1
+    showEvery: 1,
+    periodWindow: 7
   },
@@ -178,6 +186,6 @@ LAST_30_DAYS_OVER_LAST_30_TO_60_DAYS: {
     unit: 'day',
-    length: 4,
     [POP_SCALES.CURRENT]: 'Last 30 days',
     [POP_SCALES.PREVIOUS]: 'Previous 30 days',
-    showEvery: 7
+    showEvery: 7,
+    periodWindow: 30
   },
@@ -187,6 +195,6 @@ LAST_90_DAYS_OVER_LAST_90_TO_180_DAYS: {
     unit: 'month',
-    length: 3,
     [POP_SCALES.CURRENT]: 'Last 90 days',
     [POP_SCALES.PREVIOUS]: 'Previous 90 days',
-    showEvery: 1
+    showEvery: 1,
+    periodWindow: 90
   }
@@ -193,0 +201,0 @@ };

package.json

 {
   "name": "@forter/chart",
-  "version": "5.7.1",
+  "version": "5.7.2",
   "description": "chart from Forter Components",
@@ -59,3 +59,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "0ba31b6a40191215100665ce4536753664143186"
+  "gitHead": "831cd45f43e2bfcc8280a6dc41e7218195beb4a9"
 }

src/chart-config-builders/period-over-period-builder.js

@@ -16,3 +16,4 @@ import {
       extractPeriodOverPeriodDataSets(config, chartJSConfig.data.datasets, context, tickConfig);
-    chartJSConfig.options = setPeriodOverPeriodXAxis(tickConfig, chartJSConfig.options);
+    chartJSConfig.options =
+        setPeriodOverPeriodXAxis(tickConfig, chartJSConfig.options, chartJSConfig.data.datasets);
   }
@@ -23,8 +24,13 @@
 
-const setPeriodOverPeriodXAxis = (tickConfig, options ) => {
+const setPeriodOverPeriodXAxis = (tickConfig, options, datasets) => {
+  const minXValues = datasets.reduce((minXValues, dataset) => {
+    minXValues[dataset.xAxisID] = moment(dataset.data[0].x, 'DD MMM YYYY');
+    return minXValues;
+  }, {});
+
   const current = {
     ...options.scales.x,
     axis: 'x',
-    min: null, // todo
-    max: null, // todo
+    min: minXValues[POP_SCALES.CURRENT].format('x'),
+    max: minXValues[POP_SCALES.CURRENT].add(tickConfig.periodWindow, 'day').format('x'),
     type: 'time',
@@ -55,6 +61,8 @@ time: {
       currentDate.subtract(tickMap[id].counter * tickConfig.showEvery, tickConfig.unit)
-        .isSame(tickMap[id].firstDate) &&
-      tickMap[id].counter < tickConfig.length) {
+        .isSame(tickMap[id].firstDate)) {
       tickMap[id].counter++;
-      return `${tickConfig.text} ${tickMap[id].counter}`;
+
+      return index < tickConfig.periodWindow
+        ? `${tickConfig.text} ${tickMap[id].counter}`
+        : '';
     }
@@ -72,4 +80,4 @@
     axis: 'x',
-    min: null, // todo
-    max: null, // todo
+    min: minXValues[POP_SCALES.PREVIOUS].format('x'),
+    max: minXValues[POP_SCALES.PREVIOUS].add(tickConfig.periodWindow, 'day').format('x'),
     type: 'time',
@@ -94,3 +102,4 @@ time: {
 const extractPeriodOverPeriodDataSets = ({ series }, datasets, context, tickConfig) => {
-  const newDatasets = [];
+  const popDatasets = [];
+  const otherDatasets = [];
   series.map((series, index) => {
@@ -107,3 +116,3 @@ let dataset;
         fill: {
-          target: '+1',
+          target: '-1',
           above: 'transparent',
@@ -127,3 +136,3 @@ below: 'transparent'
           above: 'transparent',
-          target: '-1'
+          target: '+1'
         }
@@ -150,5 +159,12 @@ };
 
-    newDatasets.push(dataset);
+    if (series.label === POP_SCALES.CURRENT) {
+      popDatasets.unshift(dataset);
+    } else if (series.label === POP_SCALES.PREVIOUS) {
+      popDatasets.push(dataset);
+    } else {
+      otherDatasets.push(dataset);
+    }
   });
-  return newDatasets;
+
+  return [...popDatasets, ...otherDatasets];
 };
@@ -165,6 +181,6 @@
     unit: 'day',
-    length: 6,
     [POP_SCALES.CURRENT]: 'Last 7 days',
     [POP_SCALES.PREVIOUS]: 'Previous 7 days',
-    showEvery: 1
+    showEvery: 1,
+    periodWindow: 7
   },
@@ -174,6 +190,6 @@ LAST_30_DAYS_OVER_LAST_30_TO_60_DAYS: {
     unit: 'day',
-    length: 4,
     [POP_SCALES.CURRENT]: 'Last 30 days',
     [POP_SCALES.PREVIOUS]: 'Previous 30 days',
-    showEvery: 7
+    showEvery: 7,
+    periodWindow: 30
   },
@@ -183,6 +199,6 @@ LAST_90_DAYS_OVER_LAST_90_TO_180_DAYS: {
     unit: 'month',
-    length: 3,
     [POP_SCALES.CURRENT]: 'Last 90 days',
     [POP_SCALES.PREVIOUS]: 'Previous 90 days',
-    showEvery: 1
+    showEvery: 1,
+    periodWindow: 90
   }
@@ -189,0 +205,0 @@ };

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

148812

increased by2.23%

Lines of code

2788

increased by0.72%

No dependency changes