@forter/chart - npm Package Compare versions

Comparing version 5.14.1 to 5.15.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [5.15.0](https://github.com/forter/web-components/compare/@forter/chart@5.14.1...@forter/chart@5.15.0) (2022-04-25)
+
+
+### Features
+
+* **chart:** period over period multi series ([#910](https://github.com/forter/web-components/issues/910)) ([5035ac6](https://github.com/forter/web-components/commit/5035ac6))
+
+
+
+
+
 ## [5.14.1](https://github.com/forter/web-components/compare/@forter/chart@5.14.0...@forter/chart@5.14.1) (2022-04-18)
@@ -8,0 +19,0 @@

chart-config-builders/html-legend-builder.js

 import { merge } from 'lodash-es';
 import { CHART_TYPES } from '../enums.js';
-import stripedHTMLLegend from './html-legend-striped.svg.js';
+import { dashedLegend } from './html-legend-striped.svg.js';
 
@@ -81,3 +81,3 @@ const onLegendClick = (chart, item, context) => {
           
-          ${dash ? stripedHTMLLegend : `<div></div>`}
+          ${dash ? dashedLegend() : `<div></div>`}
           
@@ -84,0 +84,0 @@ </div>

chart-config-builders/html-legend-striped.svg.js

@@ -1,5 +0,10 @@
-var stripedHTMLLegend = `
+const dashedLegend = () => {
+  // because this SVG is used a bunch of times, and the fill is controlled by a pattern, the
+  // pattern has to be unique, otherwise different elements with the same pattern will get the same styling.
+  // at least this is what happened in our legend use case.
+  const pattern = `pattern_${Math.random() * 10000000}`;
+  return `
   <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
     <defs>
-      <pattern id="pattern_DklIV" patternUnits="userSpaceOnUse" width="2.5" height="2.5" patternTransform="rotate(45)">
+      <pattern id="${pattern}" patternUnits="userSpaceOnUse" width="2.5" height="2.5" patternTransform="rotate(45)">
         <line x1="0" y="0" x2="0" y2="2.5" stroke-width="2" />
@@ -9,6 +14,7 @@ <line x1="2" y="0" x2="2" y2="2.5" stroke-width="2" opacity="0.1"/>
     </defs>
-    <rect width="100%" height="100%" fill="url(#pattern_DklIV)" :opacity="1" />
+    <rect width="100%" height="100%" fill="url(#${pattern})" :opacity="1" />
   </svg>`;
+};
 
-export default stripedHTMLLegend;
+export { dashedLegend };
 //# sourceMappingURL=html-legend-striped.svg.js.map

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

@@ -22,3 +22,7 @@ import { isPeriodOverPeriodChart, NEGATIVE_COLOR, POSITIVE_COLOR } from './period-over-period.helpers.js';
     chartJSConfig.data.datasets = extractPeriodOverPeriodDataSets(config, chartJSConfig.data.datasets, context, tickConfig);
+    chartJSConfig.data.datasets = showFirstPeriodOverPeriodDataSets(chartJSConfig.data.datasets);
     chartJSConfig.options = setPeriodOverPeriodXAxis(tickConfig, chartJSConfig.options, chartJSConfig.data.datasets);
+  } else {
+    // in case any period over period styling are left over from previous iteration, remove so style doesnt look strange
+    chartJSConfig.data.datasets = removePeriodOverPeriodStyle(chartJSConfig.data.datasets);
   }
@@ -105,12 +109,14 @@
   const popDatasets = [];
-  const otherDatasets = [];
   series.map((series, index) => {
     let dataset;
-    const periodOverPeriodLabel = series.periodOverPeriod.label;
+    const {
+      period,
+      label
+    } = series.periodOverPeriod;
 
-    if (periodOverPeriodLabel === POP_SCALES.PREVIOUS) {
+    if (period === POP_SCALES.PREVIOUS) {
       var _dataset, _dataset$periodOverPe;
 
       dataset = { ...datasets[index],
-        label: tickConfig.PREVIOUS || periodOverPeriodLabel,
+        label: label || tickConfig.PREVIOUS,
         data: [],
@@ -129,7 +135,7 @@ borderDash: [5, 5],
       dataset.fill.above = `${translatedColor}40`;
-    } else if (periodOverPeriodLabel === POP_SCALES.CURRENT) {
+    } else if (period === POP_SCALES.CURRENT) {
       var _dataset2, _dataset2$periodOverP;
 
       dataset = { ...datasets[index],
-        label: tickConfig.CURRENT || periodOverPeriodLabel,
+        label: label || tickConfig.CURRENT,
         data: [],
@@ -163,14 +169,36 @@ xAxisID: POP_SCALES.CURRENT,
     });
+    popDatasets.push(dataset);
+  });
+  return popDatasets;
+};
 
-    if (periodOverPeriodLabel === POP_SCALES.CURRENT) {
-      popDatasets.unshift(dataset);
-    } else if (periodOverPeriodLabel === POP_SCALES.PREVIOUS) {
-      popDatasets.push(dataset);
-    } else {
-      otherDatasets.push(dataset);
+const showFirstPeriodOverPeriodDataSets = datasets => {
+  // Show only the first series, and it's previous period comparison. Mark the others as hidden.
+  if (datasets.length <= 2) {
+    return datasets;
+  }
+
+  return datasets.map((dataset, index) => {
+    if (index > 1) {
+      dataset.hidden = true;
     }
+
+    return dataset;
   });
-  return [...popDatasets, ...otherDatasets];
 };
 
+const removePeriodOverPeriodStyle = datasets => {
+  return datasets.map(dataset => {
+    /* eslint-disable */
+    const {
+      below,
+      above,
+      target,
+      ...fill
+    } = dataset.fill || {};
+    dataset.fill = fill;
+    return dataset;
+  });
+};
+
 const POP_SCALES = {
@@ -177,0 +205,0 @@ PREVIOUS: 'PREVIOUS',

package.json

 {
   "name": "@forter/chart",
-  "version": "5.14.1",
+  "version": "5.15.0",
   "description": "chart from Forter Components",
@@ -60,3 +60,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "b86469afafca0efcdf6c5d30e40046670cb92c43"
+  "gitHead": "e7fd444e6311016164268d9c02972c1742430a31"
 }

src/chart-config-builders/html-legend-builder.js

 import { merge } from 'lodash-es';
 import { CHART_TYPES } from '../enums';
-import stripedHTMLLegend from './html-legend-striped.svg';
+import { dashedLegend } from './html-legend-striped.svg';
 
@@ -61,2 +61,4 @@ const onLegendClick = (chart, item, context) => {
   const style = itemWidth ? `--legend-item-width:${itemWidth}` : ``;
+
+
   return `${items.map(item => {
@@ -70,3 +72,3 @@ const dash = item && item.lineDash && item.lineDash.length;
           
-          ${dash ? stripedHTMLLegend : `<div></div>`}
+          ${dash ? dashedLegend() : `<div></div>`}
           
@@ -73,0 +75,0 @@ </div>

src/chart-config-builders/html-legend-striped.svg.js

@@ -1,5 +0,10 @@
-export default `
+export const dashedLegend = () => {
+  // because this SVG is used a bunch of times, and the fill is controlled by a pattern, the
+  // pattern has to be unique, otherwise different elements with the same pattern will get the same styling.
+  // at least this is what happened in our legend use case.
+  const pattern = `pattern_${Math.random() * 10000000}`;
+  return `
   <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
     <defs>
-      <pattern id="pattern_DklIV" patternUnits="userSpaceOnUse" width="2.5" height="2.5" patternTransform="rotate(45)">
+      <pattern id="${pattern}" patternUnits="userSpaceOnUse" width="2.5" height="2.5" patternTransform="rotate(45)">
         <line x1="0" y="0" x2="0" y2="2.5" stroke-width="2" />
@@ -9,3 +14,4 @@ <line x1="2" y="0" x2="2" y2="2.5" stroke-width="2" opacity="0.1"/>
     </defs>
-    <rect width="100%" height="100%" fill="url(#pattern_DklIV)" :opacity="1" />
+    <rect width="100%" height="100%" fill="url(#${pattern})" :opacity="1" />
   </svg>`;
+};

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

@@ -19,4 +19,8 @@ /* eslint-disable max-len */
       extractPeriodOverPeriodDataSets(config, chartJSConfig.data.datasets, context, tickConfig);
+    chartJSConfig.data.datasets = showFirstPeriodOverPeriodDataSets(chartJSConfig.data.datasets);
     chartJSConfig.options =
         setPeriodOverPeriodXAxis(tickConfig, chartJSConfig.options, chartJSConfig.data.datasets);
+  } else {
+    // in case any period over period styling are left over from previous iteration, remove so style doesnt look strange
+    chartJSConfig.data.datasets = removePeriodOverPeriodStyle(chartJSConfig.data.datasets);
   }
@@ -107,10 +111,9 @@
   const popDatasets = [];
-  const otherDatasets = [];
   series.map((series, index) => {
     let dataset;
-    const periodOverPeriodLabel = series.periodOverPeriod.label;
-    if (periodOverPeriodLabel === POP_SCALES.PREVIOUS) {
+    const { period, label } = series.periodOverPeriod;
+    if (period === POP_SCALES.PREVIOUS) {
       dataset = {
         ...datasets[index],
-        label: tickConfig.PREVIOUS || periodOverPeriodLabel,
+        label: label || tickConfig.PREVIOUS,
         data: [],
@@ -130,6 +133,6 @@ borderDash: [5, 5],
       dataset.fill.above = `${translatedColor}40`;
-    } else if (periodOverPeriodLabel === POP_SCALES.CURRENT) {
+    } else if (period === POP_SCALES.CURRENT) {
       dataset = {
         ...datasets[index],
-        label: tickConfig.CURRENT || periodOverPeriodLabel,
+        label: label || tickConfig.CURRENT,
         data: [],
@@ -160,15 +163,31 @@ xAxisID: POP_SCALES.CURRENT,
     });
+    popDatasets.push(dataset);
+  });
 
-    if (periodOverPeriodLabel === POP_SCALES.CURRENT) {
-      popDatasets.unshift(dataset);
-    } else if (periodOverPeriodLabel === POP_SCALES.PREVIOUS) {
-      popDatasets.push(dataset);
-    } else {
-      otherDatasets.push(dataset);
+  return popDatasets;
+};
+
+const showFirstPeriodOverPeriodDataSets = datasets => {
+  // Show only the first series, and it's previous period comparison. Mark the others as hidden.
+  if (datasets.length <= 2) {
+    return datasets;
+  }
+  return datasets.map((dataset, index) => {
+    if (index > 1) {
+      dataset.hidden = true;
     }
+    return dataset;
   });
+};
 
-  return [...popDatasets, ...otherDatasets];
+const removePeriodOverPeriodStyle = datasets => {
+  return datasets.map(dataset => {
+    /* eslint-disable */
+    const { below, above, target, ...fill } = dataset.fill || {};
+    dataset.fill = fill;
+    return dataset;
+  });
 };
 
+
 const POP_SCALES = {
@@ -175,0 +194,0 @@ PREVIOUS: 'PREVIOUS',

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

220335

increased by1.68%

Lines of code

3731

increased by1.47%

No dependency changes