@forter/chart - npm Package Compare versions

Comparing version 5.6.0 to 5.7.0

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log
 
+# [5.7.0](https://github.com/forter/web-components/compare/@forter/chart@5.6.0...@forter/chart@5.7.0) (2021-10-03)
+
+
+### Features
+
+* **chart:** migrate from dayjs to moment ([88edf82](https://github.com/forter/web-components/commit/88edf82))
+* **chart:** period over period chart ([9f4cff6](https://github.com/forter/web-components/commit/9f4cff6))
+* **chart:** period over period styling ([3bd7a1a](https://github.com/forter/web-components/commit/3bd7a1a))
+
+
+
+
+
 # [5.6.0](https://github.com/forter/web-components/compare/@forter/chart@5.5.3...@forter/chart@5.6.0) (2021-09-23)
@@ -8,0 +21,0 @@

chart-config-builders/basic-config-builder.js

@@ -1,2 +0,2 @@
-import { merge } from 'lodash-es';
+import { cloneDeep, merge } from 'lodash-es';
 
@@ -30,3 +30,2 @@ const SUPPORTED_CHART_TYPES = ['line', 'bar'];
       ticks: {
-        // stepSize: 3, this has a very bad impact on datasets with huge numbers
         color: '#8696AC',
@@ -59,25 +58,2 @@ padding: 0
 };
-
-function handleTimeConfig(xAxisType) {
-  /* eslint-disable */
-  const isTimeAxisType = ['SINGLE_TIME_FIELD', 'SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD'].includes(xAxisType);
-
-  if (isTimeAxisType) {
-    DEFAULT_OPTIONS.scales.x.ticks.stepSize = 1;
-    DEFAULT_OPTIONS.scales.x.ticks.align = 'start';
-    DEFAULT_OPTIONS.scales.x.type = 'time';
-    DEFAULT_OPTIONS.scales.x.time = {
-      unit: 'day',
-      displayFormats: {
-        quarter: 'MMM YYYY'
-      }
-    };
-  } else {
-    DEFAULT_OPTIONS.scales.x.ticks.stepSize && delete DEFAULT_OPTIONS.scales.x.ticks.stepSize;
-    DEFAULT_OPTIONS.scales.x.ticks.align && delete DEFAULT_OPTIONS.scales.x.ticks.align;
-    DEFAULT_OPTIONS.scales.x.type && delete DEFAULT_OPTIONS.scales.x.type;
-    DEFAULT_OPTIONS.scales.x.time && delete DEFAULT_OPTIONS.scales.x.time;
-  }
-}
-
 const DEFAULT_DATASET_CONFIG = {
@@ -94,4 +70,3 @@ borderRadius: 5,
 var generateBasicChartJSConfig = ((config, chartJSConfig) => {
-  handleTimeConfig(config.xAxisType);
-  const basicConfig = {
+  let basicConfig = {
     type: 'line',
@@ -101,5 +76,5 @@ data: {
     },
-    options: DEFAULT_OPTIONS,
-    ...config.style
+    options: cloneDeep(DEFAULT_OPTIONS)
   };
+  basicConfig = merge(basicConfig, config.style);
   return merge(chartJSConfig, basicConfig);
@@ -138,9 +113,11 @@ });
     });
-    const datasets = Object.entries(rawDatasets).map(([key, value], index) => ({ ...DEFAULT_DATASET_CONFIG,
-      ...dataset.style,
-      type: seriesType.toLowerCase(),
-      label: key,
-      data: value
-    }));
-    return datasets;
+    return Object.entries(rawDatasets).map(([key, value], index) => {
+      let data = { ...DEFAULT_DATASET_CONFIG,
+        type: seriesType.toLowerCase(),
+        label: key,
+        data: value
+      };
+      data = merge(data, dataset.style);
+      return data;
+    });
   }
@@ -147,0 +124,0 @@

chart-config-builders/dataset-color-config-builder.js

@@ -52,3 +52,3 @@ const translateColor = (color, context) => {
 
-export { updateColorsInDatasets };
+export { translateColor, updateColorsInDatasets };
 //# sourceMappingURL=dataset-color-config-builder.js.map

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

 import { merge } from 'lodash-es';
+import stripedHTMLLegend from './html-legend-striped.svg.js';
 
@@ -19,8 +20,16 @@ const onLegendClick = (chart, item) => {
 const renderLegend = items => {
-  return `${items.map(item => `
-    <li
-      class="legend-item ${item && item.hidden ? 'disabled-legend-item' : ''}"> 
-      <div class="legend-color-box" style="--legend-color: ${item && item.fillStyle};"></div>
-      <span class="legend-label">${item && item.text}</span>
-    </li>`).join('')}`;
+  return `${items.map(item => {
+    const dash = item && item.lineDash && item.lineDash.length;
+    return `<li
+        class="legend-item ${item && item.hidden ? 'disabled-legend-item' : ''}"> 
+        <div
+          class="legend-color-box ${dash ? 'dash' : ''}"
+          style="--legend-color: ${item && item.fillStyle};">
+          
+          ${dash ? stripedHTMLLegend : `<div></div>`}
+          
+        </div>
+        <span class="legend-label">${item && item.text}</span>
+      </li>`;
+  }).join('')}`;
 };
@@ -27,0 +36,0 @@

chart-config-builders/time-axis-config-builder.js

 import { merge } from 'lodash-es';
 
-const isPeriodOverPeriod = config => config.periodOverPeriod;
-
 var insertTimeAxisTicks = ((config, chartJSConfig) => {
-  const isTimeAxisType = ['SINGLE_TIME_FIELD'].includes(config.xAxisType);
+  const {
+    xAxisType
+  } = config;
+  const isTimeAxisType = ['SINGLE_TIME_FIELD', 'SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD'].includes(xAxisType);
 
@@ -12,22 +13,23 @@ if (!isTimeAxisType) {
 
-  if (!isPeriodOverPeriod(config)) {
-    return chartJSConfig;
-  }
-
-  const callback = function (value, index, values) {
-    return index % 7 === 0 && index === values.length - 1 ? '' : index % 7 === 0 ? `WEEK ${(index + 7) / 7}` : null;
+  const x = {
+    ticks: {
+      stepSize: 1,
+      align: 'start'
+    },
+    type: 'time',
+    time: {
+      unit: 'day',
+      displayFormats: {
+        quarter: 'MMM YYYY'
+      }
+    }
   };
-
-  const callbackObject = {
+  const configObject = {
     options: {
       scales: {
-        x: {
-          ticks: {
-            callback
-          }
-        }
+        x
       }
     }
   };
-  return merge(chartJSConfig, callbackObject);
+  return merge(chartJSConfig, configObject);
 });
@@ -34,0 +36,0 @@

chart-config-builders/x-axis-config-builder.js

 import { merge } from 'lodash-es';
+import { isPeriodOverPeriodChart } from './period-over-period.helpers.js';
 
@@ -6,3 +7,3 @@ var insertXAxisTicks = ((config, chartJSConfig, context) => {
 
-  if (isTimeAxisType) {
+  if (isTimeAxisType || isPeriodOverPeriodChart(config)) {
     return chartJSConfig;
@@ -9,0 +10,0 @@ }

fc-chart.css.js

@@ -180,3 +180,3 @@ import { css } from 'lit-element';
   cursor: pointer;
-  gap: 4px;
+  gap: 6px;
   user-select: none;
@@ -186,10 +186,33 @@ }
 .legend-color-box {
-  width: 8px;
-  height: 8px;
-  border-radius: 2px;
+  --legend-color-box-size: 10px;
+
+  width: var(--legend-color-box-size);
+  height: var(--legend-color-box-size);
+  border-radius: 3px;
   transition: background 0.2s ease-in-out;
-  box-shadow: inset 0 0 0 10px var(--legend-color);
+  box-shadow: inset 0 0 0 var(--legend-color-box-size) var(--legend-color);
   position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
+.legend-color-box.dash {
+  box-shadow: none !important;
+}
+
+.legend-color-box svg {
+  width: inherit;
+  height: inherit;
+}
+
+.legend-color-box:not(.dash) svg {
+  display: none;
+}
+
+.legend-color-box svg line {
+  stroke: var(--legend-color);
+}
+
 :host .legend-item > * {
@@ -200,4 +223,6 @@ transition: opacity 0.2s ease-in-out;
 :host .disabled-legend-item .legend-color-box {
-  background: var(--fc-blue-gray-300) !important;
+  --legend-color: var(--fc-blue-gray-300) !important;
+}
 
+:host .disabled-legend-item .legend-color-box.border {
   --legend-color: var(--fc-blue-gray-300) !important;
@@ -243,3 +268,2 @@ }
   color: transparent !important;
-  margin-right: 18px;
 }
@@ -246,0 +270,0 @@

FcChart.js

@@ -12,6 +12,7 @@ import { defineProperty as _defineProperty } from './_virtual/_rollupPluginBabelHelpers.js';
 import insertTimeAxisTicks from './chart-config-builders/time-axis-config-builder.js';
+import { updateColorsInDatasets } from './chart-config-builders/dataset-color-config-builder.js';
+import periodOverPeriodBuilder from './chart-config-builders/period-over-period-builder.js';
 import insertXAxisTicks from './chart-config-builders/x-axis-config-builder.js';
 import { registerSeriesClickEvent } from './chart-config-builders/register-series-click-event.js';
 import colors from '@forter/styles/colors.css';
-import { updateColorsInDatasets } from './chart-config-builders/dataset-color-config-builder.js';
 import htmlLegendBuilder from './chart-config-builders/html-legend-builder.js';
@@ -127,4 +128,4 @@
 
-    const chartJsConfig = this.buildChartJSConfig(config);
-    this.chart = config && new Chart(this.context, chartJsConfig);
+    this.chartJsConfig = this.buildChartJSConfig(config);
+    this.chart = config && new Chart(this.context, this.chartJsConfig);
   }
@@ -140,3 +141,3 @@
   getConfigBuilders() {
-    return [generateBasicChartJSConfig, insertYAxisTicks, insertTimeAxisTicks, generateTooltipConfig, updateColorsInDatasets, registerSeriesClickEvent, insertXAxisTicks, htmlLegendBuilder];
+    return [generateBasicChartJSConfig, insertYAxisTicks, insertTimeAxisTicks, updateColorsInDatasets, periodOverPeriodBuilder, generateTooltipConfig, registerSeriesClickEvent, insertXAxisTicks, htmlLegendBuilder];
   }
@@ -143,0 +144,0 @@

package.json

 {
   "name": "@forter/chart",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "chart from Forter Components",
@@ -59,3 +59,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "dabd9e06b4467aaae523d4fcf459d8ec23d0bc90"
+  "gitHead": "12892e15b75a867838a9f21c58cecb8c7908ec60"
 }

src/chart-config-builders/basic-config-builder.js

@@ -1,2 +0,2 @@
-import { merge } from 'lodash-es';
+import { merge, cloneDeep } from 'lodash-es';
 
@@ -31,3 +31,2 @@ const SUPPORTED_CHART_TYPES = ['line', 'bar'];
       ticks: {
-        // stepSize: 3, this has a very bad impact on datasets with huge numbers
         color: '#8696AC',
@@ -61,23 +60,2 @@ padding: 0
 
-function handleTimeConfig(xAxisType) {
-  /* eslint-disable */
-  const isTimeAxisType = ['SINGLE_TIME_FIELD', 'SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD'].includes(xAxisType);
-  if (isTimeAxisType) {
-    DEFAULT_OPTIONS.scales.x.ticks.stepSize = 1;
-    DEFAULT_OPTIONS.scales.x.ticks.align = 'start';
-    DEFAULT_OPTIONS.scales.x.type = 'time';
-    DEFAULT_OPTIONS.scales.x.time = {
-      unit: 'day',
-      displayFormats: {
-        quarter: 'MMM YYYY'
-      }
-    };
-  } else {
-    DEFAULT_OPTIONS.scales.x.ticks.stepSize && delete DEFAULT_OPTIONS.scales.x.ticks.stepSize;
-    DEFAULT_OPTIONS.scales.x.ticks.align && delete DEFAULT_OPTIONS.scales.x.ticks.align;
-    DEFAULT_OPTIONS.scales.x.type && delete DEFAULT_OPTIONS.scales.x.type;
-    DEFAULT_OPTIONS.scales.x.time && delete DEFAULT_OPTIONS.scales.x.time;
-  }
-}
-
 const DEFAULT_DATASET_CONFIG = {
@@ -94,5 +72,5 @@ borderRadius: 5,
 
+
 export default (config, chartJSConfig) => {
-  handleTimeConfig(config.xAxisType);
-  const basicConfig = {
+  let basicConfig = {
     type: 'line',
@@ -102,5 +80,7 @@ data: {
     },
-    options: DEFAULT_OPTIONS,
-    ...config.style
+    options: cloneDeep(DEFAULT_OPTIONS),
   };
+
+  basicConfig = merge(basicConfig, config.style);
+
   return merge(chartJSConfig, basicConfig);
@@ -111,2 +91,3 @@ };
   const { series = [], xAxisType } = config;
+
   if (xAxisType === 'SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD') {
@@ -130,12 +111,14 @@ // assumption - only one series in this case
 
-    const datasets = Object.entries(rawDatasets).map(([key, value], index) => (
-      {
+    return Object.entries(rawDatasets).map(([key, value], index) => {
+      let data = {
         ...DEFAULT_DATASET_CONFIG,
-        ...dataset.style,
         type: seriesType.toLowerCase(),
         label: key,
         data: value
-      }
-    ));
-    return datasets;
+      };
+
+      data = merge(data, dataset.style);
+
+      return data;
+    });
   }
@@ -155,3 +138,6 @@
       ...dataset.style,
-      label: ((xAxisType !== 'SINGLE_NON_TIME_FIELD' || dataset.seriesType === 'LINE') && dataset.label) || undefined
+      label:
+        ((xAxisType !== 'SINGLE_NON_TIME_FIELD' || dataset.seriesType === 'LINE') &&
+          dataset.label) ||
+        undefined
     };
@@ -166,1 +152,2 @@
 };
+

src/chart-config-builders/dataset-color-config-builder.js

@@ -1,2 +0,2 @@
-const translateColor = (color, context) => {
+export const translateColor = (color, context) => {
   if (!color) {
@@ -3,0 +3,0 @@ return;

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

 import { merge } from 'lodash-es';
+import stripedHTMLLegend from './html-legend-striped.svg';
 
@@ -17,8 +18,17 @@ const onLegendClick = (chart, item) => {
 const renderLegend = items => {
-  return `${items.map(item => `
-    <li
-      class="legend-item ${item && item.hidden ? 'disabled-legend-item' : ''}"> 
-      <div class="legend-color-box" style="--legend-color: ${item && item.fillStyle};"></div>
-      <span class="legend-label">${item && item.text}</span>
-    </li>`).join('')}`;
+  return `${items.map(item => {
+    const dash = item && item.lineDash && item.lineDash.length;
+
+    return `<li
+        class="legend-item ${item && item.hidden ? 'disabled-legend-item' : ''}"> 
+        <div
+          class="legend-color-box ${dash ? 'dash' : ''}"
+          style="--legend-color: ${item && item.fillStyle};">
+          
+          ${dash ? stripedHTMLLegend : `<div></div>`}
+          
+        </div>
+        <span class="legend-label">${item && item.text}</span>
+      </li>`;
+  }).join('')}`;
 };
@@ -25,0 +35,0 @@

src/chart-config-builders/time-axis-config-builder.js

 import { merge } from 'lodash-es';
 
-const isPeriodOverPeriod = config => config.periodOverPeriod;
+export default (config, chartJSConfig) => {
+  const { xAxisType } = config;
 
+  const isTimeAxisType =
+    ['SINGLE_TIME_FIELD', 'SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD'].includes(xAxisType);
 
-export default (config, chartJSConfig) => {
-  const isTimeAxisType = ['SINGLE_TIME_FIELD'].includes(config.xAxisType);
   if (!isTimeAxisType) {
@@ -12,17 +13,19 @@ return chartJSConfig;
 
-  if (!isPeriodOverPeriod(config)) {
-    return chartJSConfig;
-  }
-
-  const callback = function(value, index, values) {
-    return index % 7 === 0 && index === values.length - 1
-      ? ''
-      : index % 7 === 0
-        ? `WEEK ${(index + 7) / 7}`
-        : null;
+  const x = {
+    ticks: {
+      stepSize: 1,
+      align: 'start',
+    },
+    type: 'time',
+    time: {
+      unit: 'day',
+      displayFormats: {
+        quarter: 'MMM YYYY'
+      }
+    }
   };
 
-  const callbackObject = { options: { scales: { x: { ticks: { callback } } } } };
+  const configObject = { options: { scales: { x } } };
 
-  return merge(chartJSConfig, callbackObject);
+  return merge(chartJSConfig, configObject);
 };

src/chart-config-builders/x-axis-config-builder.js

 import { merge } from 'lodash-es';
 
+import {
+  isPeriodOverPeriodChart }
+  from './period-over-period.helpers';
+
 export default (config, chartJSConfig, context) => {
   const isTimeAxisType = ['SINGLE_TIME_FIELD'].includes(config.xAxisType);
-  if (isTimeAxisType) {
+  if (isTimeAxisType || isPeriodOverPeriodChart(config)) {
     return chartJSConfig;
@@ -7,0 +11,0 @@ }

src/FcChart.js

@@ -11,2 +11,3 @@ import { LitElement, html } from 'lit-element';
 import insertTimeAxisTicks from './chart-config-builders/time-axis-config-builder';
+import periodOverPeriodBuilder from './chart-config-builders/period-over-period-builder';
 import insertXAxisTicks from './chart-config-builders/x-axis-config-builder';
@@ -106,4 +107,4 @@ import { registerSeriesClickEvent } from './chart-config-builders/register-series-click-event';
     }
-    const chartJsConfig = this.buildChartJSConfig(config);
-    this.chart = config && new Chart(this.context, chartJsConfig);
+    this.chartJsConfig = this.buildChartJSConfig(config);
+    this.chart = config && new Chart(this.context, this.chartJsConfig);
   }
@@ -125,4 +126,5 @@
       insertTimeAxisTicks,
+      updateColorsInDatasets,
+      periodOverPeriodBuilder,
       generateTooltipConfig,
-      updateColorsInDatasets,
       registerSeriesClickEvent,
@@ -129,0 +131,0 @@ insertXAxisTicks,

No alert changes

Improved metrics

Total package byte prevSize

143967

increased by15.91%

Number of package files

56

increased by19.15%

Lines of code

2755

increased by15.76%

No dependency changes