Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@forter/chart
Advanced tools
@forter/chart - npm Package Compare versions
Comparing version 5.40.0 to 5.41.0
@@ -6,2 +6,14 @@ # Change Log | ||
| # [5.41.0](https://github.com/forter/web-components/compare/@forter/chart@5.40.0...@forter/chart@5.41.0) (2024-06-09) | ||
| ### Features | ||
| * **chart:** funnel plugin and builders ([62aadfc](https://github.com/forter/web-components/commit/62aadfc)) | ||
| * **chart:** merge and modify to match changes ([2fb971b](https://github.com/forter/web-components/commit/2fb971b)) | ||
| # [5.40.0](https://github.com/forter/web-components/compare/@forter/chart@5.39.0...@forter/chart@5.40.0) (2024-06-09) | ||
@@ -8,0 +20,0 @@ |
@@ -47,2 +47,3 @@ import { merge, cloneDeep } from 'lodash-es'; | ||
| * @param {string} xAxisType the type of the x axis. | ||
| * @param {string} seriesType the type of the series. | ||
| * @return {{x:(number|string), y:(number|string)}} | ||
@@ -52,4 +53,5 @@ */ | ||
| const XAndYvalues = (item, segmentAxis, hasDimensions, xAxisType) => { | ||
| const aggregationLabel = xAxisType === X_AXIS_TYPE.SIMPLE_KPI ? item.aggregationLabel : ''; | ||
| const XAndYvalues = (item, segmentAxis, hasDimensions, xAxisType, seriesType) => { | ||
| const isSimpleKPI = xAxisType === X_AXIS_TYPE.SIMPLE_KPI && seriesType !== CHART_TYPES.FUNNEL.toUpperCase(); | ||
| const aggregationLabel = isSimpleKPI ? item.aggregationLabel : ''; | ||
| const itemLabel = hasDimensions ? item.dimensions[0] : aggregationLabel; | ||
@@ -70,4 +72,4 @@ | ||
| const chartDataAggregationBuilder = (data, hasDimensions, segmentAxis = 'X', xAxisType) => { | ||
| const chartData = data.map(item => ({ ...XAndYvalues(item, segmentAxis, hasDimensions, xAxisType), | ||
| const chartDataAggregationBuilder = (data, hasDimensions, segmentAxis = 'X', xAxisType, seriesType) => { | ||
| const chartData = data.map(item => ({ ...XAndYvalues(item, segmentAxis, hasDimensions, xAxisType, seriesType), | ||
| yFormatted: item.formattedValue, | ||
@@ -141,3 +143,3 @@ aggregationLabel: item.aggregationLabel, | ||
| const segmentAxis = [CHART_TYPES.HORIZONTAL_BAR].includes(seriesType) ? 'Y' : 'X'; | ||
| const chartData = chartDataAggregationBuilder(aggregation.data || [], hasDimensions, segmentAxis, xAxisType); | ||
| const chartData = chartDataAggregationBuilder(aggregation.data || [], hasDimensions, segmentAxis, xAxisType, seriesType); | ||
@@ -200,3 +202,3 @@ const formatEllipsis = (ctx, text) => { | ||
| const normalizeKpiBarsDatasets = (config, basicConfig) => { | ||
| if (config.xAxisType !== X_AXIS_TYPE.SIMPLE_KPI) { | ||
| if (config.xAxisType !== X_AXIS_TYPE.SIMPLE_KPI || config.series[0].seriesType === CHART_TYPES.FUNNEL.toUpperCase()) { | ||
| return basicConfig; | ||
@@ -228,3 +230,3 @@ } | ||
| const type = ['HORIZONTAL_BAR', 'BAR'].includes(config.series[0].seriesType) ? 'bar' : 'line'; | ||
| const type = [CHART_TYPES.HORIZONTAL_BAR.toUpperCase(), CHART_TYPES.BAR.toUpperCase()].includes(config.series[0].seriesType) ? 'bar' : 'line'; | ||
| let basicConfig = { | ||
@@ -231,0 +233,0 @@ type, |
@@ -47,2 +47,6 @@ import { get } from 'lodash-es'; | ||
| }; | ||
| const FUNNEL_COLORS = { | ||
| FROM: '#0043a9', | ||
| TO: '#bdd8ff' | ||
| }; | ||
@@ -149,5 +153,3 @@ const getDimensionValueColor = ({ | ||
| } = config; | ||
| chartJSConfig.data.datasets = chartJSConfig.data.datasets.map((dataset, index) => { | ||
| var _context$renderRoot; | ||
| chartJSConfig.data.datasets = chartJSConfig.data.datasets.map((dataset, index, array) => { | ||
| if (xAxisType === 'SINGLE_TIME_FIELD') { | ||
@@ -204,12 +206,28 @@ // single time field means the datasets are per different kpis, and therefore color overrrides can come from the config | ||
| const isTreeMap = dataset.type === CHART_TYPES.TREEMAP; // Checking if chart is a Treemap for color blending | ||
| const isTreeMap = dataset.type === CHART_TYPES.TREEMAP; | ||
| const isFunnel = chartJSConfig.type === CHART_TYPES.FUNNEL; | ||
| dataset.backgroundColor = translateColorArray(dataset.backgroundColor, context); // Treemap color blending | ||
| dataset.backgroundColor = isTreeMap ? 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); // Saturating the colors of the blend | ||
| if (isTreeMap) { | ||
| var _context$renderRoot; | ||
| if (isTreeMap && ((_context$renderRoot = context.renderRoot) === null || _context$renderRoot === void 0 ? void 0 : _context$renderRoot.children[0])) { | ||
| context.renderRoot.children[0].style.filter = 'saturate(1.4)'; | ||
| dataset.backgroundColor = ctx => blendColorsByPercent(TREEMAP_COLORS.FROM, TREEMAP_COLORS.TO, ctx.index * (1 / dataset.data.length) // Calculates percentage based on index | ||
| ); | ||
| if ((_context$renderRoot = context.renderRoot) === null || _context$renderRoot === void 0 ? void 0 : _context$renderRoot.children[0]) { | ||
| context.renderRoot.children[0].style.filter = 'saturate(1.4)'; | ||
| } | ||
| } | ||
| if (isFunnel) { | ||
| var _context$renderRoot2; | ||
| dataset.backgroundColor = ctx => blendColorsByPercent(FUNNEL_COLORS.FROM, FUNNEL_COLORS.TO, index * (1 / array.length)); | ||
| if ((_context$renderRoot2 = context.renderRoot) === null || _context$renderRoot2 === void 0 ? void 0 : _context$renderRoot2.children[0]) { | ||
| context.renderRoot.children[0].style.filter = 'saturate(1.4)'; | ||
| } | ||
| } | ||
| dataset.borderColor = translateColorArray(dataset.borderColor, context); | ||
| return dataset; | ||
@@ -216,0 +234,0 @@ }); |
| import { merge } from 'lodash-es'; | ||
| import { CHART_TYPES } from '../enums.js'; | ||
| import { CHART_TYPES, X_AXIS_TYPE } from '../enums.js'; | ||
| import { dashedLegend } from './html-legend-striped.svg.js'; | ||
@@ -188,3 +188,3 @@ | ||
| 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 || (chartJSConfig === null || chartJSConfig === void 0 ? void 0 : chartJSConfig.type) === CHART_TYPES.SANKEY || (config === null || config === void 0 ? void 0 : config.series[0].seriesType) === CHART_TYPES.HORIZONTAL_BAR || (config === null || config === void 0 ? void 0 : config.xAxisType) === 'SIMPLE_KPI') { | ||
| 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 || (chartJSConfig === null || chartJSConfig === void 0 ? void 0 : chartJSConfig.type) === CHART_TYPES.SANKEY || (chartJSConfig === null || chartJSConfig === void 0 ? void 0 : chartJSConfig.type) === CHART_TYPES.FUNNEL || (config === null || config === void 0 ? void 0 : config.series[0].seriesType) === CHART_TYPES.HORIZONTAL_BAR || (config === null || config === void 0 ? void 0 : config.xAxisType) === X_AXIS_TYPE.SIMPLE_KPI) { | ||
| context.shadowRoot.getElementById('legend-container').style.display = 'none'; | ||
@@ -191,0 +191,0 @@ } |
@@ -7,2 +7,3 @@ const CHART_TYPES = { | ||
| SANKEY: 'sankey', | ||
| FUNNEL: 'funnel', | ||
| HORIZONTAL_BAR: 'HORIZONTAL_BAR' | ||
@@ -9,0 +10,0 @@ }; |
@@ -12,2 +12,3 @@ import { defineProperty as _defineProperty } from './_virtual/_rollupPluginBabelHelpers.js'; | ||
| import generateSankeyConfig from './chart-config-builders/sankey-config-builder.js'; | ||
| import generateFunnelConfig from './chart-config-builders/funnel-config-builder.js'; | ||
| import generateTooltipConfig from './chart-config-builders/tooltip-config-builder.js'; | ||
@@ -25,2 +26,3 @@ import insertYAxisTicks from './chart-config-builders/y-axis-symbol-config-builder.js'; | ||
| import { SankeyController, Flow } from 'fds-sankey'; | ||
| import { funnelPlugin } from './plugins/funnel.js'; | ||
@@ -120,3 +122,4 @@ /** | ||
| Chart.register(SankeyController, Flow); | ||
| Chart.register(...registerables); // Update label formatters after chart animations finish (animation duration: 1s) | ||
| Chart.register(...registerables); | ||
| Chart.register(funnelPlugin); // Update label formatters after chart animations finish (animation duration: 1s) | ||
@@ -175,3 +178,3 @@ setTimeout(() => { | ||
| getConfigBuilders() { | ||
| return [generateBasicChartJSConfig, generateChartJsConfigOptions, generateSankeyConfig, insertYAxisTicks, insertTimeAxisTicks, updateColorsInDatasets, periodOverPeriodBuilder, registerSeriesClickEvent, insertXAxisTicks, htmlLegendBuilder, insertAnnotations, doughnutBuilder, generateTooltipConfig]; | ||
| return [generateBasicChartJSConfig, generateChartJsConfigOptions, generateSankeyConfig, generateFunnelConfig, insertYAxisTicks, insertTimeAxisTicks, updateColorsInDatasets, periodOverPeriodBuilder, registerSeriesClickEvent, insertXAxisTicks, htmlLegendBuilder, insertAnnotations, doughnutBuilder, generateTooltipConfig]; | ||
| } | ||
@@ -178,0 +181,0 @@ |
| { | ||
| "name": "@forter/chart", | ||
| "version": "5.40.0", | ||
| "version": "5.41.0", | ||
| "description": "chart from Forter Components", | ||
@@ -61,3 +61,3 @@ "author": "Forter Developers", | ||
| }, | ||
| "gitHead": "bfc4555ba9401d2ec790da0d54579e2bcb641ace" | ||
| "gitHead": "97c39cb875326266a29059fb22e789869c6f62de" | ||
| } |
@@ -44,6 +44,12 @@ import { cloneDeep, merge } from 'lodash-es'; | ||
| * @param {string} xAxisType the type of the x axis. | ||
| * @param {string} seriesType the type of the series. | ||
| * @return {{x:(number|string), y:(number|string)}} | ||
| */ | ||
| const XAndYvalues = (item, segmentAxis, hasDimensions, xAxisType) => { | ||
| const aggregationLabel = xAxisType === X_AXIS_TYPE.SIMPLE_KPI ? item.aggregationLabel : ''; | ||
| const XAndYvalues = (item, segmentAxis, hasDimensions, xAxisType, seriesType) => { | ||
| const isSimpleKPI = ( | ||
| (xAxisType === X_AXIS_TYPE.SIMPLE_KPI) && | ||
| (seriesType !== CHART_TYPES.FUNNEL.toUpperCase()) | ||
| ); | ||
| const aggregationLabel = isSimpleKPI ? item.aggregationLabel : ''; | ||
| const itemLabel = hasDimensions ? item.dimensions[0] : aggregationLabel; | ||
@@ -56,5 +62,11 @@ if (segmentAxis === 'X') { | ||
| const chartDataAggregationBuilder = (data, hasDimensions, segmentAxis = 'X', xAxisType) => { | ||
| const chartDataAggregationBuilder = ( | ||
| data, | ||
| hasDimensions, | ||
| segmentAxis = 'X', | ||
| xAxisType, | ||
| seriesType | ||
| ) => { | ||
| const chartData = data.map(item => ({ | ||
| ...XAndYvalues(item, segmentAxis, hasDimensions, xAxisType), | ||
| ...XAndYvalues(item, segmentAxis, hasDimensions, xAxisType, seriesType), | ||
| yFormatted: item.formattedValue, | ||
@@ -122,3 +134,4 @@ aggregationLabel: item.aggregationLabel, | ||
| segmentAxis, | ||
| xAxisType | ||
| xAxisType, | ||
| seriesType | ||
| ); | ||
@@ -183,3 +196,6 @@ | ||
| const normalizeKpiBarsDatasets = (config, basicConfig) => { | ||
| if (config.xAxisType !== X_AXIS_TYPE.SIMPLE_KPI) { | ||
| if ( | ||
| config.xAxisType !== X_AXIS_TYPE.SIMPLE_KPI || | ||
| config.series[0].seriesType === CHART_TYPES.FUNNEL.toUpperCase() | ||
| ) { | ||
| return basicConfig; | ||
@@ -205,4 +221,8 @@ } | ||
| } | ||
| const type = ['HORIZONTAL_BAR', 'BAR'].includes(config.series[0].seriesType) ? 'bar' : 'line'; | ||
| const type = [ | ||
| CHART_TYPES.HORIZONTAL_BAR.toUpperCase(), | ||
| CHART_TYPES.BAR.toUpperCase(), | ||
| ].includes(config.series[0].seriesType) ? 'bar' : 'line'; | ||
| let basicConfig = { | ||
@@ -209,0 +229,0 @@ type, |
@@ -60,2 +60,7 @@ /* eslint-disable max-len */ | ||
| const FUNNEL_COLORS = { | ||
| FROM: '#0043a9', | ||
| TO: '#bdd8ff' | ||
| }; | ||
| const getDimensionValueColor = ({ dimensionsStyle, dataSource, dimensionField, normalizedDimensionValue }) => get(dimensionsStyle, [dataSource, dimensionField, normalizedDimensionValue])?.color; | ||
@@ -132,3 +137,3 @@ | ||
| const { xAxisType, dimensionsStyle, dataSource } = config; | ||
| chartJSConfig.data.datasets = chartJSConfig.data.datasets.map((dataset, index) => { | ||
| chartJSConfig.data.datasets = chartJSConfig.data.datasets.map((dataset, index, array) => { | ||
| if (xAxisType === 'SINGLE_TIME_FIELD') { | ||
@@ -161,12 +166,29 @@ // single time field means the datasets are per different kpis, and therefore color overrrides can come from the config | ||
| const isTreeMap = dataset.type === CHART_TYPES.TREEMAP; | ||
| const isFunnel = chartJSConfig.type === CHART_TYPES.FUNNEL; | ||
| // Checking if chart is a Treemap for color blending | ||
| dataset.backgroundColor = (isTreeMap) | ||
| ? ctx => blendColorsByPercent( | ||
| dataset.backgroundColor = translateColorArray(dataset.backgroundColor, context); | ||
| // Treemap color blending | ||
| if (isTreeMap) { | ||
| dataset.backgroundColor = ctx => blendColorsByPercent( | ||
| TREEMAP_COLORS.FROM, | ||
| TREEMAP_COLORS.TO, | ||
| ctx.index * (1 / dataset.data.length) // Calculates percentage based on index | ||
| ) | ||
| : translateColorArray(dataset.backgroundColor, context); | ||
| ); | ||
| if (context.renderRoot?.children[0]) { | ||
| context.renderRoot.children[0].style.filter = 'saturate(1.4)'; | ||
| } | ||
| } | ||
| if (isFunnel) { | ||
| dataset.backgroundColor = ctx => blendColorsByPercent( | ||
| FUNNEL_COLORS.FROM, | ||
| FUNNEL_COLORS.TO, | ||
| index * (1 / array.length) | ||
| ); | ||
| if (context.renderRoot?.children[0]) { | ||
| context.renderRoot.children[0].style.filter = 'saturate(1.4)'; | ||
| } | ||
| } | ||
| dataset.borderColor = translateColorArray( | ||
@@ -176,7 +198,2 @@ dataset.borderColor, | ||
| // Saturating the colors of the blend | ||
| if (isTreeMap && context.renderRoot?.children[0]) { | ||
| context.renderRoot.children[0].style.filter = 'saturate(1.4)'; | ||
| } | ||
| return dataset; | ||
@@ -183,0 +200,0 @@ }); |
| import { merge } from 'lodash-es'; | ||
| import { CHART_TYPES } from '../enums'; | ||
| import { CHART_TYPES, X_AXIS_TYPE } from '../enums'; | ||
| import { dashedLegend } from './html-legend-striped.svg'; | ||
@@ -169,4 +169,5 @@ | ||
| chartJSConfig?.type === CHART_TYPES.SANKEY || | ||
| chartJSConfig?.type === CHART_TYPES.FUNNEL || | ||
| config?.series[0].seriesType === CHART_TYPES.HORIZONTAL_BAR || | ||
| config?.xAxisType === 'SIMPLE_KPI' | ||
| config?.xAxisType === X_AXIS_TYPE.SIMPLE_KPI | ||
| ) { | ||
@@ -173,0 +174,0 @@ context.shadowRoot.getElementById('legend-container').style.display = 'none'; |
@@ -7,3 +7,4 @@ export const CHART_TYPES = { | ||
| SANKEY: 'sankey', | ||
| HORIZONTAL_BAR: 'HORIZONTAL_BAR' | ||
| FUNNEL: 'funnel', | ||
| HORIZONTAL_BAR: 'HORIZONTAL_BAR', | ||
| }; | ||
@@ -10,0 +11,0 @@ |
@@ -11,2 +11,3 @@ /* eslint-disable max-len */ | ||
| import generateSankeyConfig from './chart-config-builders/sankey-config-builder'; | ||
| import generateFunnelConfig from './chart-config-builders/funnel-config-builder'; | ||
| import generateTooltipConfig from './chart-config-builders/tooltip-config-builder'; | ||
@@ -25,2 +26,3 @@ import insertYAxisTicks from './chart-config-builders/y-axis-symbol-config-builder'; | ||
| import { SankeyController, Flow } from 'fds-sankey'; | ||
| import { funnelPlugin } from './plugins/funnel'; | ||
@@ -91,2 +93,3 @@ /** | ||
| firstUpdated() { | ||
@@ -98,2 +101,3 @@ this.context = this.canvas.getContext('2d'); | ||
| Chart.register(...registerables); | ||
| Chart.register(funnelPlugin); | ||
@@ -146,2 +150,3 @@ // Update label formatters after chart animations finish (animation duration: 1s) | ||
| generateSankeyConfig, | ||
| generateFunnelConfig, | ||
| insertYAxisTicks, | ||
@@ -148,0 +153,0 @@ insertTimeAxisTicks, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by6.14%
406522
- Number of package files
- increased by8.22%
79
- Lines of code
- increased by5.76%
6407
No dependency changes