@forter/chart - npm Package Compare versions

Comparing version 5.13.5 to 5.13.6

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [5.13.6](https://github.com/forter/web-components/compare/@forter/chart@5.13.5...@forter/chart@5.13.6) (2022-04-04)
+
+**Note:** Version bump only for package @forter/chart
+
+
+
+
+
 ## [5.13.5](https://github.com/forter/web-components/compare/@forter/chart@5.13.4...@forter/chart@5.13.5) (2022-02-24)
@@ -8,0 +16,0 @@

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

 import { cloneDeep, merge } from 'lodash-es';
+import { CHART_TYPES } from '../enums.js';
 
-const SUPPORTED_CHART_TYPES = ['line', 'bar'];
+const SUPPORTED_CHART_TYPES = Object.values(CHART_TYPES);
 const font = {
   family: '"Open Sans"'
 };
+const labelFont = {
+  family: 'Open Sans',
+  size: 11,
+  weight: 600
+};
 const DEFAULT_OPTIONS = {
@@ -15,2 +21,3 @@ maintainAspectRatio: false,
   plugins: {
+    datalabels: true,
     tooltip: {
@@ -163,10 +170,29 @@ usePointStyle: false,
     } = dataset;
+    const chartData = (dataset.aggregation.data || []).map(item => ({
+      x: item.dimensions[0],
+      y: item.value,
+      yFormatted: item.formattedValue,
+      aggregationLabel: item.aggregationLabel,
+      dimensions: item.dimensions
+    }));
+
+    const formatLabel = ctx => {
+      const category = ctx.raw.g.toUpperCase();
+      const value = chartData[ctx.dataIndex].yFormatted;
+      return [category, '', value];
+    };
+
     const config = {
-      data: (dataset.aggregation.data || []).map(item => ({
-        x: item.dimensions[0],
-        y: item.value,
-        yFormatted: item.formattedValue,
-        aggregationLabel: item.aggregationLabel,
-        dimensions: item.dimensions
-      })),
+      key: 'y',
+      groups: ['x'],
+      labels: {
+        display: true,
+        padding: 15,
+        align: 'left',
+        position: 'top',
+        color: 'white',
+        font: labelFont,
+        formatter: formatLabel
+      },
+      data: chartData,
       ...DEFAULT_DATASET_CONFIG,
@@ -173,0 +199,0 @@ ...dataset.style,

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

 import { get } from 'lodash-es';
+import { CHART_TYPES } from '../enums.js';
 
@@ -30,2 +31,6 @@ /* eslint-disable max-len */
 const DEFAULT_COLORS = ['var(--fc-turquoise-500)', 'var(--fc-ocean-500)', 'var(--fc-brand-blue-500)', 'var(--fc-indigo-500)', 'var(--fc-purple-500)', 'var(--fc-pink-purple-500)', 'var(--fc-magenta-500)', 'var(--fc-orange-500)', 'var(--fc-gold-500)', 'var(--fc-olive-500)'];
+const TREEMAP_COLORS = {
+  FROM: '#90BDFF',
+  TO: '#002255'
+};
 
@@ -79,3 +84,44 @@ const getDimensionValueColor = ({
 };
+/**
+  * Blend two colors together by percentage
+  * @param color1 color to blend
+  * @param color2 color to blend
+  * @param percent how much in percent should color1 match color2
+  **/
 
+
+const blendColorsByPercent = (color1, color2, percent) => {
+  const red1 = parseInt(color1[1] + color1[2], 16);
+  const green1 = parseInt(color1[3] + color1[4], 16);
+  const blue1 = parseInt(color1[5] + color1[6], 16);
+  const red2 = parseInt(color2[1] + color2[2], 16);
+  const green2 = parseInt(color2[3] + color2[4], 16);
+  const blue2 = parseInt(color2[5] + color2[6], 16);
+  const red = Math.round(mix(red1, red2, percent));
+  const green = Math.round(mix(green1, green2, percent));
+  const blue = Math.round(mix(blue1, blue2, percent));
+  return generateHex(red, green, blue);
+};
+/**
+ * Converts RGB to Hex
+ * @param {*} r red
+ * @param {*} g green
+ * @param {*} b blue
+ */
+
+
+const generateHex = (r, g, b) => {
+  r = r.toString(16);
+  g = g.toString(16);
+  b = b.toString(16);
+  if (r.length < 2) r = `0${r}`;
+  if (g.length < 2) g = `0${g}`;
+  if (b.length < 2) b = `0${b}`;
+  return `#${r + g + b}`;
+};
+
+const mix = (start, end, percent) => {
+  return start + percent * (end - start);
+};
+
 const updateColorsInDatasets = (config, chartJSConfig, context) => {
@@ -121,5 +167,7 @@ const {
       dataset.borderColor = dataset.borderColor ? dataset.borderColor : predefinedColor ? predefinedColor : DEFAULT_COLORS[index];
-    }
+    } // Checking if chart is a Treemap for color blending
 
-    dataset.backgroundColor = translateColorArray(dataset.backgroundColor, context);
+
+    dataset.backgroundColor = dataset.type === CHART_TYPES.TREEMAP ? ctx => blendColorsByPercent(TREEMAP_COLORS.FROM, TREEMAP_COLORS.TO, ctx.index * (1 / dataset.data.length) // Calculates percentage based on index
+    ) : translateColorArray(dataset.backgroundColor, context);
     dataset.borderColor = translateColorArray(dataset.borderColor, context);
@@ -126,0 +174,0 @@ return dataset;

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';
@@ -106,2 +107,4 @@
 var htmlLegendBuilder = ((config, chartJSConfig, context) => {
+  var _chartJSConfig$data;
+
   const legendObject = {
@@ -119,3 +122,8 @@ options: {
     plugins: [htmlLegendPlugin(context)]
-  };
+  }; // Hide legends when the chart is of type "treemap"
+
+  if ((chartJSConfig === null || chartJSConfig === void 0 ? void 0 : (_chartJSConfig$data = chartJSConfig.data) === null || _chartJSConfig$data === void 0 ? void 0 : _chartJSConfig$data.datasets[0].type) === CHART_TYPES.TREEMAP) {
+    context.shadowRoot.getElementById('legend-container').style.display = 'none';
+  }
+
   return merge(chartJSConfig, legendObject);
@@ -122,0 +130,0 @@ });

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

@@ -10,2 +10,3 @@ import { html } from 'lit-element';
   } = context;
+  if (config.series[0].seriesType === 'TREEMAP') return chartJSConfig;
   context.tooltipPosition = {
@@ -12,0 +13,0 @@ x: -999,

fc-chart.css.js

@@ -130,3 +130,5 @@ import { css } from 'lit-element';
   width: 100%;
-  height: calc(100% - 44px - 20px);
+  height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
 }
@@ -195,3 +197,2 @@
   width: fit-content;
-  overflow: hidden;
 }
@@ -198,0 +199,0 @@

FcChart.js

@@ -19,2 +19,3 @@ import { defineProperty as _defineProperty } from './_virtual/_rollupPluginBabelHelpers.js';
 import htmlLegendBuilder from './chart-config-builders/html-legend-builder.js';
+import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
 
@@ -98,2 +99,3 @@ /**
     Chart.register([annotationPlugin]);
+    Chart.register(TreemapController, TreemapElement);
     Chart.register(...registerables);
@@ -100,0 +102,0 @@ }

package.json

 {
   "name": "@forter/chart",
-  "version": "5.13.5",
+  "version": "5.13.6",
   "description": "chart from Forter Components",
@@ -53,9 +53,10 @@ "author": "Forter Developers",
     "@forter/core": "^2.0.5",
-    "chart.js": "3.5.0",
+    "chart.js": "3.6.0",
     "chartjs-adapter-moment": "^1.0.0",
-    "chartjs-plugin-annotation": "1.0.2",
+    "chartjs-chart-treemap": "^2.0.2",
+    "chartjs-plugin-annotation": "1.4.0",
     "lodash-es": "^4.17.21",
     "object-hash": "2.2.0"
   },
-  "gitHead": "c3611f199ec71d683f6d1a0753304d5a112aeef5"
+  "gitHead": "a60832e4ddfda2a5ee60e3ed1e993f3a426df8c8"
 }

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

 import { merge, cloneDeep } from 'lodash-es';
+import { CHART_TYPES } from '../enums';
 
-const SUPPORTED_CHART_TYPES = ['line', 'bar'];
+const SUPPORTED_CHART_TYPES = Object.values(CHART_TYPES);
 
-const font = {
-  family: '"Open Sans"'
+const font = { family: '"Open Sans"' };
+
+const labelFont = {
+  family: 'Open Sans',
+  size: 11,
+  weight: 600
 };
@@ -17,2 +22,3 @@
   plugins: {
+    datalabels: true,
     tooltip: {
@@ -108,2 +114,3 @@ usePointStyle: false,
   const series = allSeries.filter(series => !['KPI', 'CONST'].includes(series.seriesType));
+
   if (xAxisType === 'SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD') {
@@ -114,2 +121,3 @@ // assumption - only one series in this case
     const rawDatasets = {};
+
     dataset.aggregation.data.forEach(dataPoint => {
@@ -149,10 +157,30 @@ const [timeDimension, nonTimeDimension] = dataPoint.dimensions;
     const { seriesType, periodOverPeriod } = dataset;
+
+    const chartData = (dataset.aggregation.data || []).map(item => ({
+      x: item.dimensions[0],
+      y: item.value,
+      yFormatted: item.formattedValue,
+      aggregationLabel: item.aggregationLabel,
+      dimensions: item.dimensions
+    }));
+
+    const formatLabel = ctx => {
+      const category = ctx.raw.g.toUpperCase();
+      const value = chartData[ctx.dataIndex].yFormatted;
+      return [category, '', value];
+    };
+
     const config = {
-      data: (dataset.aggregation.data || []).map(item => ({
-        x: item.dimensions[0],
-        y: item.value,
-        yFormatted: item.formattedValue,
-        aggregationLabel: item.aggregationLabel,
-        dimensions: item.dimensions
-      })),
+      key: 'y',
+      groups: ['x'],
+      labels: {
+        display: true,
+        padding: 15,
+        align: 'left',
+        position: 'top',
+        color: 'white',
+        font: labelFont,
+        formatter: formatLabel
+      },
+      data: chartData,
       ...DEFAULT_DATASET_CONFIG,
@@ -159,0 +187,0 @@ ...dataset.style,

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

 /* eslint-disable max-len */
 import { get } from 'lodash-es';
+import { CHART_TYPES } from '../enums';
 
@@ -40,2 +41,7 @@ export const translateColor = (color, context) => {
 
+const TREEMAP_COLORS = {
+  FROM: '#90BDFF',
+  TO: '#002255'
+};
+
 const getDimensionValueColor = ({ dimensionsStyle, dataSource, dimensionField, normalizedDimensionValue }) => get(dimensionsStyle, `${dataSource}.${dimensionField}.${normalizedDimensionValue}`)?.color;
@@ -61,5 +67,51 @@
 
+/**
+  * Blend two colors together by percentage
+  * @param color1 color to blend
+  * @param color2 color to blend
+  * @param percent how much in percent should color1 match color2
+  **/
 
+const blendColorsByPercent = (color1, color2, percent) => {
+  const red1 = parseInt(color1[1] + color1[2], 16);
+  const green1 = parseInt(color1[3] + color1[4], 16);
+  const blue1 = parseInt(color1[5] + color1[6], 16);
+
+  const red2 = parseInt(color2[1] + color2[2], 16);
+  const green2 = parseInt(color2[3] + color2[4], 16);
+  const blue2 = parseInt(color2[5] + color2[6], 16);
+
+  const red = Math.round(mix(red1, red2, percent));
+  const green = Math.round(mix(green1, green2, percent));
+  const blue = Math.round(mix(blue1, blue2, percent));
+
+  return generateHex(red, green, blue);
+};
+
+/**
+ * Converts RGB to Hex
+ * @param {*} r red
+ * @param {*} g green
+ * @param {*} b blue
+ */
+
+const generateHex = (r, g, b) => {
+  r = r.toString(16);
+  g = g.toString(16);
+  b = b.toString(16);
+
+  if (r.length < 2) r = `0${r}`;
+  if (g.length < 2) g = `0${g}`;
+  if (b.length < 2) b = `0${b}`;
+
+  return `#${r + g + b}`;
+};
+
+const mix = (start, end, percent) => {
+  return start + ((percent) * (end - start));
+};
+
 export const updateColorsInDatasets = (config, chartJSConfig, context) => {
   const { xAxisType, dimensionsStyle, dataSource } = config;
+
   chartJSConfig.data.datasets = chartJSConfig.data.datasets.map((dataset, index) => {
@@ -83,6 +135,10 @@ if (xAxisType === 'SINGLE_TIME_FIELD') {
 
-    dataset.backgroundColor = translateColorArray(
-      dataset.backgroundColor,
-      context
-    );
+    // Checking if chart is a Treemap for color blending
+    dataset.backgroundColor = (dataset.type === CHART_TYPES.TREEMAP)
+      ? ctx => blendColorsByPercent(
+        TREEMAP_COLORS.FROM,
+        TREEMAP_COLORS.TO,
+        ctx.index * (1 / dataset.data.length) // Calculates percentage based on index
+      )
+      : translateColorArray(dataset.backgroundColor, context);
 
@@ -89,0 +145,0 @@ dataset.borderColor = translateColorArray(

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';
@@ -106,3 +107,8 @@
 
+  // Hide legends when the chart is of type "treemap"
+  if (chartJSConfig?.data?.datasets[0].type === CHART_TYPES.TREEMAP) {
+    context.shadowRoot.getElementById('legend-container').style.display = 'none';
+  }
+
   return merge(chartJSConfig, legendObject);
 };

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

@@ -7,2 +7,4 @@ import { get, merge } from 'lodash-es';
 
+  if (config.series[0].seriesType === 'TREEMAP') return chartJSConfig;
+
   context.tooltipPosition = {
@@ -9,0 +11,0 @@ x: -999,

src/FcChart.js

@@ -18,2 +18,3 @@ import { LitElement, html } from 'lit-element';
 import htmlLegendBuilder from './chart-config-builders/html-legend-builder';
+import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
 
@@ -82,2 +83,3 @@ /**
     Chart.register([annotationPlugin]);
+    Chart.register(TreemapController, TreemapElement);
     Chart.register(...registerables);
@@ -84,0 +86,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

212350

increased by6.07%

Number of package files

62

increased by5.08%

Lines of code

3643

increased by4.68%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedchartjs-chart-treemap@^2.0.2

• + Addedchart.js@3.6.0(transitive)

• + Addedchartjs-chart-treemap@2.3.1(transitive)

• + Addedchartjs-plugin-annotation@1.4.0(transitive)

• - Removedchart.js@3.5.0(transitive)

• - Removedchartjs-plugin-annotation@1.0.2(transitive)

• Updatedchart.js@3.6.0

• Updatedchartjs-plugin-annotation@1.4.0