@gravity-ui/chartkit 0.9.0 → 0.10.0

package/build/plugins/highcharts/renderer/helpers/config/options.js

@@ -0,0 +1,350 @@
+/** Default options for Highcharts & Highstock */
+import block from 'bem-cn-lite';
+import merge from 'lodash/merge';
+import { i18n } from '../../../../../i18n';
+import { getChartKitFormattedValue } from './utils';
+import LocalStorage from './utils/localStorage';
+const b = block('chartkit-tooltip');
+function getTooltipHeaderFormat(format, showColor) {
+    return `<div class="${b('header')}">
+        ${showColor
+        ? `<span class="${b('color')}" style="background-color:{point.color};"></span>`
+        : ''}
+        ${format}
+    </div>`;
+}
+function getTooltipPointFormat(cells, showColor) {
+    return `<div class="${b('row')}">
+        ${typeof showColor === 'boolean'
+        ? `<div class="${b('cell')}">
+                <span class="${b('color')}" ${showColor ? 'style="background-color:{point.color};"' : ''}></span>
+            </div>`
+        : ''}
+        ${cells.map((cell) => `<div class="${b('cell')}">${cell}</div>`).join('')}
+    </div>`;
+}
+function getFlowClear() {
+    return '<span/>';
+}
+function getDataLabelsFormatter(getValue) {
+    return function dataLabelsFormatter() {
+        var _a;
+        const value = getValue(this);
+        if (typeof value === 'number' && ((_a = this.series.options.dataLabels) === null || _a === void 0 ? void 0 : _a.chartKitFormatting)) {
+            return getChartKitFormattedValue(this.series.options.dataLabels, value, this.percentage);
+        }
+        return value;
+    };
+}
+const first = {
+    states: {
+        hover: {
+            lineWidthPlus: 1,
+        },
+    },
+    dataGrouping: {
+        approximation: 'open',
+    },
+    marker: {
+        enabled: false,
+        radius: 3,
+        states: {
+            hover: {
+                radiusPlus: 1,
+            },
+        },
+    },
+};
+const second = {
+    allowPointSelect: true,
+    slicedOffset: 20,
+    cursor: 'pointer',
+    showInLegend: true,
+};
+const wizardGraphDataLabels = {
+    dataLabels: {
+        formatter: getDataLabelsFormatter(function (point) {
+            var _a, _b;
+            return (_b = (_a = point.point.label) !== null && _a !== void 0 ? _a : point.point.value) !== null && _b !== void 0 ? _b : point.y;
+        }),
+    },
+};
+const notChangeOpacityForInactive = {
+    states: {
+        inactive: {
+            enabled: false,
+        },
+    },
+};
+const statesForLine = {
+    states: {
+        hover: {
+            animation: {
+                duration: 500,
+                easing: 'easeInQuint',
+            },
+            lineWidth: 4,
+            opacity: 1,
+        },
+        inactive: {
+            opacity: 1,
+        },
+    },
+};
+const options = {
+    chart: {
+        zoomType: 'xy',
+        backgroundColor: 'transparent',
+        className: 'chartkit-highcharts',
+    },
+    title: {
+        style: {
+            color: 'var(--highcharts-title)',
+        },
+    },
+    tooltip: {
+        split: false,
+        shared: true,
+        outside: true,
+        followPointer: true,
+        dateTimeLabelFormats: {
+            millisecond: '%d %B %Y %H:%M:%S.%L',
+            second: '%d %B %Y %H:%M:%S',
+            minute: '%d %B %Y %H:%M',
+            hour: '%d %B %Y %H:%M',
+            day: '%d %B %Y %A',
+            week: '%d %B %Y',
+            quarter: "%Q'%Y",
+        },
+    },
+    legend: {
+        itemStyle: {
+            color: 'var(--highcharts-legend-item)',
+        },
+        itemHoverStyle: {
+            color: 'var(--highcharts-legend-item-hover)',
+        },
+        itemHiddenStyle: {
+            color: 'var(--highcharts-legend-item-hidden)',
+        },
+    },
+    xAxis: {
+        crosshair: false,
+        gridLineColor: 'var(--highcharts-grid-line)',
+        lineColor: 'var(--highcharts-axis-line)',
+        labels: {
+            style: {
+                color: 'var(--highcharts-axis-labels)',
+            },
+        },
+        tickPixelInterval: 120,
+        tickColor: 'var(--highcharts-tick)',
+        tickmarkPlacement: 'on',
+        dateTimeLabelFormats: {
+            day: '%d.%m.%y',
+            week: '%d.%m.%y',
+            quarter: "%Q'%Y",
+        },
+    },
+    yAxis: {
+        gridLineColor: 'var(--highcharts-grid-line)',
+        lineColor: 'var(--highcharts-axis-line)',
+        labels: {
+            style: {
+                color: 'var(--highcharts-axis-labels)',
+            },
+        },
+        tickColor: 'var(--highcharts-tick)',
+        stackLabels: {
+            style: {
+                textOutline: 'none',
+                color: 'var(--highcharts-data-labels)',
+            },
+        },
+    },
+    plotOptions: {
+        series: {
+            borderColor: 'var(--highcharts-series-border)',
+            label: {
+                enabled: false,
+            },
+            tooltip: {
+                headerFormat: getTooltipHeaderFormat('{point.key}'),
+                pointFormat: getTooltipPointFormat([`<span class=${b('series-name')}>{series.name}</span>`, '{point.y}'], true),
+            },
+            dataLabels: {
+                style: {
+                    textOutline: 'none',
+                    color: 'var(--highcharts-data-labels)',
+                },
+            },
+            turboThreshold: 0,
+        },
+        area: Object.assign({
+            boostThreshold: 0,
+            trackByArea: true,
+            stickyTracking: false,
+        }, first, wizardGraphDataLabels, statesForLine),
+        areaspline: first,
+        bar: Object.assign({
+            borderWidth: 0,
+            pointWidth: 4,
+        }, first, wizardGraphDataLabels, notChangeOpacityForInactive),
+        column: Object.assign({}, first, wizardGraphDataLabels, notChangeOpacityForInactive),
+        line: Object.assign({}, first, wizardGraphDataLabels, statesForLine),
+        spline: first,
+        arearange: Object.assign({
+            tooltip: {
+                pointFormat: getTooltipPointFormat(['{point.low} - {point.high}', '{series.name}'], true),
+            },
+        }, first),
+        scatter: {
+            tooltip: {
+                headerFormat: getTooltipHeaderFormat('{series.name}', true),
+                pointFormat: getTooltipPointFormat([
+                    '<div>X: {point.x}</div><div>Y: {point.y}<div/>',
+                ]),
+            },
+        },
+        bubble: {
+            tooltip: {
+                headerFormat: getTooltipHeaderFormat('{series.name}', true),
+                pointFormat: getTooltipPointFormat([
+                    `({point.x}, {point.y}), ${i18n('chartkit', 'tooltip-point-format-size')}: {point.z}`,
+                ]),
+            },
+        },
+        sankey: {
+            tooltip: {
+                headerFormat: getTooltipHeaderFormat('{series.name}', true),
+                pointFormat: getTooltipPointFormat([
+                    '{point.fromNode.name} → {point.toNode.name}: <b>{point.weight}</b>',
+                ]),
+            },
+        },
+        heatmap: {
+            tooltip: {
+                headerFormat: getTooltipHeaderFormat('{series.name}', true),
+                pointFormat: getTooltipPointFormat(['{point.x}, {point.y}: {point.value}']),
+            },
+        },
+        treemap: {
+            tooltip: {
+                headerFormat: null,
+                pointFormat: getTooltipPointFormat(['<b>{point.name}</b>: {point.value}']),
+            },
+        },
+        timeline: {
+            tooltip: {
+                headerFormat: getTooltipHeaderFormat('{point.key}', true),
+                pointFormat: `
+                    <div class="${b('point-container', { type: 'timeline' })}">
+                        <div>{point.description}</div>
+                    </div>
+                `,
+            },
+        },
+        variwide: {},
+        waterfall: {},
+        pie: Object.assign({
+            tooltip: {
+                headerFormat: null,
+                pointFormat: getTooltipPointFormat(['{point.y}', '{point.name}'], true),
+            },
+            dataLabels: {
+                formatter: getDataLabelsFormatter(function (point) {
+                    var _a;
+                    return ((_a = point.point.label) !== null && _a !== void 0 ? _a : 
+                    // https://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.formatter
+                    (point.point.isNull ? undefined : point.point.name));
+                }),
+            },
+        }, second, notChangeOpacityForInactive),
+        histogram: {
+            tooltip: {
+                headerFormat: null,
+                pointFormat: getTooltipHeaderFormat('{point.x} - {point.x2}') +
+                    getTooltipPointFormat(['{point.y}', '{series.name}'], true),
+            },
+        },
+        bellcurve: {},
+        streamgraph: {},
+        ohlc: {
+            tooltip: {
+                pointFormat: getTooltipPointFormat(['{series.name}'], true) +
+                    getTooltipPointFormat(['', '{point.open}', 'Open']) +
+                    getTooltipPointFormat(['', '{point.high}', 'High']) +
+                    getTooltipPointFormat(['', '{point.low}', 'Low']) +
+                    getTooltipPointFormat(['', '{point.close}', 'Close']),
+            },
+        },
+        ema: {},
+        sma: {},
+        wordcloud: {
+            tooltip: {
+                pointFormat: getTooltipPointFormat(['{point.weight}', '{series.name}'], true),
+            },
+        },
+        xrange: {
+            tooltip: {
+                headerFormat: getTooltipHeaderFormat('{point.x} - {point.x2}'),
+                pointFormat: getTooltipPointFormat(['{point.yCategory}', '{series.name}'], true),
+            },
+        },
+        solidgauge: second,
+        funnel: second,
+        boxplot: {
+            tooltip: {
+                pointFormat: getTooltipPointFormat(['{series.name}'], true) +
+                    getFlowClear() +
+                    getTooltipPointFormat(['{point.high}', 'Maximum'], false) +
+                    getTooltipPointFormat(['{point.q3}', 'Upper quartile'], false) +
+                    getTooltipPointFormat(['{point.median}', 'Median'], false) +
+                    getTooltipPointFormat(['{point.q1}', 'Lower quartile'], false) +
+                    getTooltipPointFormat(['{point.low}', 'Minimum'], false),
+            },
+        },
+    },
+    exporting: {
+        buttons: {
+            contextButton: {
+                enabled: false,
+            },
+        },
+    },
+    rangeSelector: {
+        enabled: false,
+        inputEnabled: false,
+    },
+    scrollbar: {
+        enabled: false,
+        barBackgroundColor: 'var(--highcarts-navigator-body)',
+        barBorderColor: 'var(--highcarts-navigator-border)',
+        buttonArrowColor: 'var(--highcarts-navigator-track)',
+        buttonBorderColor: 'var(--highcarts-navigator-border)',
+        buttonBackgroundColor: 'var(--highcarts-navigator-body)',
+        trackBackgroundColor: 'var(--highcarts-navigator-track)',
+        trackBorderColor: 'var(--highcarts-navigator-border)',
+    },
+    navigator: {
+        height: 30,
+        outlineColor: 'var(--highcarts-navigator-border)',
+        xAxis: {
+            gridLineColor: 'var(--highcarts-navigator-border)',
+        },
+        handles: {
+            backgroundColor: 'var(--highcarts-navigator-track)',
+            borderColor: 'var(--highcarts-navigator-body)',
+        },
+    },
+};
+const externalOptions = LocalStorage.restore('__chartkit_highcharts_external_options');
+if (externalOptions) {
+    try {
+        merge(options, externalOptions);
+    }
+    catch (error) {
+        console.error(error);
+    }
+}
+export default options;

package/build/plugins/highcharts/renderer/helpers/config/types.d.ts

@@ -0,0 +1,6 @@
+export declare type NavigatorPeriod = {
+    type: string;
+    value: string;
+    period: Period;
+};
+export declare type Period = 'month' | 'year' | 'day' | 'hour' | 'week' | 'quarter';

package/build/plugins/highcharts/renderer/helpers/config/types.js

@@ -0,0 +1 @@
+export {};

package/build/plugins/highcharts/renderer/helpers/config/utils/addShowInNavigatorToSeries.d.ts

@@ -0,0 +1,10 @@
+import { NavigatorLinesMode } from '../../constants';
+declare type AddShowInNavigatorToSeriesArgs = {
+    linesMode: NavigatorLinesMode;
+    graphs: Record<string, any>[];
+    baseSeriesName: string;
+    params: Record<string, any>;
+    selectedLines: string[];
+};
+export declare const addShowInNavigatorToSeries: ({ linesMode, graphs, baseSeriesName, params, selectedLines, }: AddShowInNavigatorToSeriesArgs) => void;
+export {};

package/build/plugins/highcharts/renderer/helpers/config/utils/addShowInNavigatorToSeries.js

@@ -0,0 +1,42 @@
+import { NavigatorLinesMode } from '../../constants';
+import { getXAxisThresholdValue } from './getXAxisThresholdValue';
+export const addShowInNavigatorToSeries = ({ linesMode, graphs, baseSeriesName, params, selectedLines, }) => {
+    if (linesMode === NavigatorLinesMode.All) {
+        graphs.forEach((item) => {
+            item.showInNavigator = true;
+        });
+    }
+    else {
+        const mergedLines = [...selectedLines];
+        if (baseSeriesName) {
+            mergedLines.push(baseSeriesName);
+        }
+        if (mergedLines.length) {
+            graphs.forEach((item) => {
+                const itemName = item.sname || item.name || item.title;
+                if (typeof item.showInNavigator === 'undefined') {
+                    item.showInNavigator = mergedLines.includes(itemName);
+                }
+            });
+        }
+        else {
+            graphs.forEach((item) => {
+                item.showInNavigator = false;
+            });
+            const xMinValue = getXAxisThresholdValue(graphs, 'min');
+            const xMaxValue = getXAxisThresholdValue(graphs, 'max');
+            const navigatorParams = Object.assign({}, params.navigator) || {};
+            if (navigatorParams.xAxis) {
+                navigatorParams.xAxis.min = xMinValue;
+                navigatorParams.xAxis.max = xMaxValue;
+            }
+            else {
+                navigatorParams.xAxis = {
+                    min: xMinValue,
+                    max: xMaxValue,
+                };
+            }
+            params.navigator = navigatorParams;
+        }
+    }
+};

package/build/plugins/highcharts/renderer/helpers/config/utils/addShowInNavigatorToSeries.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/plugins/highcharts/renderer/helpers/config/utils/addShowInNavigatorToSeries.test.js

@@ -0,0 +1,99 @@
+import { NavigatorLinesMode } from '../../constants';
+import { addShowInNavigatorToSeries } from './addShowInNavigatorToSeries';
+describe('plugins/highcharts/config/addShowInNavigatorToSeries', () => {
+    let MOCKED_SERIES;
+    let MOCKED_PARAMS;
+    beforeEach(() => {
+        MOCKED_SERIES = [{ name: 'Test1' }, { name: 'Test2' }, { name: 'Test3' }];
+        MOCKED_PARAMS = { navigator: {} };
+    });
+    it("should set {showInNavigator: true} to all series in case of {linesMode: 'all'}", () => {
+        const linesMode = NavigatorLinesMode.All;
+        addShowInNavigatorToSeries({
+            linesMode,
+            graphs: MOCKED_SERIES,
+            params: MOCKED_PARAMS,
+            selectedLines: [],
+            baseSeriesName: '',
+        });
+        const expectedResult = [
+            { name: 'Test1', showInNavigator: true },
+            { name: 'Test2', showInNavigator: true },
+            { name: 'Test3', showInNavigator: true },
+        ];
+        expect(MOCKED_SERIES).toEqual(expectedResult);
+    });
+    it("should set {showInNavigator: false} to all series in case of {linesMode: 'selected'} and add min & max to params.navigator.xAxis", () => {
+        const linesMode = NavigatorLinesMode.Selected;
+        addShowInNavigatorToSeries({
+            linesMode,
+            graphs: MOCKED_SERIES,
+            params: MOCKED_PARAMS,
+            selectedLines: [],
+            baseSeriesName: '',
+        });
+        const expectedSeries = [
+            { name: 'Test1', showInNavigator: false },
+            { name: 'Test2', showInNavigator: false },
+            { name: 'Test3', showInNavigator: false },
+        ];
+        const expectedParams = {
+            navigator: {
+                xAxis: {
+                    max: null,
+                    min: null,
+                },
+            },
+        };
+        expect(MOCKED_SERIES).toEqual(expectedSeries);
+        expect(MOCKED_PARAMS).toEqual(expectedParams);
+    });
+    it('should set {showInNavigator: true} in case of selectedLines contains series', () => {
+        const linesMode = NavigatorLinesMode.Selected;
+        addShowInNavigatorToSeries({
+            linesMode,
+            graphs: MOCKED_SERIES,
+            params: MOCKED_PARAMS,
+            selectedLines: ['Test3'],
+            baseSeriesName: '',
+        });
+        const expectedSeries = [
+            { name: 'Test1', showInNavigator: false },
+            { name: 'Test2', showInNavigator: false },
+            { name: 'Test3', showInNavigator: true },
+        ];
+        expect(MOCKED_SERIES).toEqual(expectedSeries);
+    });
+    it('should set {showInNavigator: true} in case of series equals to baseSeriesName', () => {
+        const linesMode = NavigatorLinesMode.Selected;
+        addShowInNavigatorToSeries({
+            linesMode,
+            graphs: MOCKED_SERIES,
+            params: MOCKED_PARAMS,
+            selectedLines: [],
+            baseSeriesName: 'Test2',
+        });
+        const expectedSeries = [
+            { name: 'Test1', showInNavigator: false },
+            { name: 'Test2', showInNavigator: true },
+            { name: 'Test3', showInNavigator: false },
+        ];
+        expect(MOCKED_SERIES).toEqual(expectedSeries);
+    });
+    it('should set {showInNavigator: true} in case of selectedLines and baseSeriesName', () => {
+        const linesMode = NavigatorLinesMode.Selected;
+        addShowInNavigatorToSeries({
+            linesMode,
+            graphs: MOCKED_SERIES,
+            params: MOCKED_PARAMS,
+            selectedLines: ['Test1'],
+            baseSeriesName: 'Test2',
+        });
+        const expectedSeries = [
+            { name: 'Test1', showInNavigator: true },
+            { name: 'Test2', showInNavigator: true },
+            { name: 'Test3', showInNavigator: false },
+        ];
+        expect(MOCKED_SERIES).toEqual(expectedSeries);
+    });
+});

package/build/plugins/highcharts/renderer/helpers/config/utils/buildNavigatorFallback.d.ts

@@ -0,0 +1 @@
+export declare const buildNavigatorFallback: (graphs: Record<string, any>[], baseSeriesName?: string | undefined) => void;

package/build/plugins/highcharts/renderer/helpers/config/utils/buildNavigatorFallback.js

@@ -0,0 +1,17 @@
+export const buildNavigatorFallback = (graphs, baseSeriesName) => {
+    if (baseSeriesName) {
+        graphs.forEach((item) => {
+            if (typeof item.showInNavigator === 'undefined') {
+                item.showInNavigator =
+                    item.sname === baseSeriesName ||
+                        item.name === baseSeriesName ||
+                        item.title === baseSeriesName;
+            }
+        });
+    }
+    else {
+        graphs.forEach((item) => {
+            item.showInNavigator = true;
+        });
+    }
+};

package/build/plugins/highcharts/renderer/helpers/config/utils/buildNavigatorFallback.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/plugins/highcharts/renderer/helpers/config/utils/buildNavigatorFallback.test.js

@@ -0,0 +1,28 @@
+import { buildNavigatorFallback } from './buildNavigatorFallback';
+const MOCKED_GRAPHS = [{ name: 'Test' }, { name: 'Test1' }, { name: 'Test2' }];
+const baseSeriesName = 'Test2';
+const missedSeriesName = 'Test3';
+describe('plugins/highcharts/config/buildNavigatorFallback', () => {
+    it('should set {showInNavigator: true} to current series in case of initialized baseSeriesName', () => {
+        const expectedResult = [
+            { name: 'Test', showInNavigator: false },
+            { name: 'Test1', showInNavigator: false },
+            { name: 'Test2', showInNavigator: true },
+        ];
+        buildNavigatorFallback(MOCKED_GRAPHS, baseSeriesName);
+        expect(MOCKED_GRAPHS).toEqual(expectedResult);
+    });
+    it('should set {showInNavigator: true} to all series in case of baseSeriesName are not initialized', () => {
+        const expectedResult = [
+            { name: 'Test', showInNavigator: true },
+            { name: 'Test1', showInNavigator: true },
+            { name: 'Test2', showInNavigator: true },
+        ];
+        buildNavigatorFallback(MOCKED_GRAPHS);
+        expect(MOCKED_GRAPHS).toEqual(expectedResult);
+    });
+    it('should not set {showInNavigator: true} to current series in case of baseSeriesName are not finded in graphs', () => {
+        buildNavigatorFallback(MOCKED_GRAPHS, missedSeriesName);
+        expect(MOCKED_GRAPHS).toEqual(MOCKED_GRAPHS);
+    });
+});

package/build/plugins/highcharts/renderer/helpers/config/utils/calculatePrecision.d.ts

@@ -0,0 +1,5 @@
+export declare const calculatePrecision: (alternativePrecision: number | null, options: {
+    normalizeDiv: boolean;
+    normalizeSub: boolean;
+    precision?: number;
+}, originalValue?: number | undefined) => number | null | undefined;

package/build/plugins/highcharts/renderer/helpers/config/utils/calculatePrecision.js

@@ -0,0 +1,20 @@
+import isInteger from 'lodash/isInteger';
+export const calculatePrecision = (alternativePrecision, options, originalValue) => {
+    const hasPrecisionOption = options.precision || options.precision === 0;
+    const hasAlternativePrecision = alternativePrecision || alternativePrecision === 0;
+    const hasFloat = originalValue && !isInteger(originalValue);
+    let precision;
+    if (options.normalizeDiv || options.normalizeSub) {
+        precision = 2;
+    }
+    if (hasPrecisionOption) {
+        precision = options.precision;
+    }
+    if (!precision && precision !== 0 && hasAlternativePrecision) {
+        precision = alternativePrecision;
+    }
+    if (hasFloat && !precision && precision !== 0 && !hasAlternativePrecision) {
+        precision = 2;
+    }
+    return precision;
+};

package/build/plugins/highcharts/renderer/helpers/config/utils/calculatePrecision.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/plugins/highcharts/renderer/helpers/config/utils/calculatePrecision.test.js

@@ -0,0 +1,27 @@
+import { calculatePrecision } from './calculatePrecision';
+describe('plugins/highcharts/config/calculatePrecision', () => {
+    test('should return undefined', () => {
+        expect(calculatePrecision(null, { normalizeDiv: false, normalizeSub: false })).toEqual(undefined);
+        expect(calculatePrecision(null, { normalizeDiv: false, normalizeSub: false }, 1)).toEqual(undefined);
+    });
+    test('should return 2 in case of some of normalized options are initialized', () => {
+        expect(calculatePrecision(null, { normalizeDiv: true, normalizeSub: false }, 99)).toEqual(2);
+        expect(calculatePrecision(null, { normalizeDiv: false, normalizeSub: true }, 99.99)).toEqual(2);
+        expect(calculatePrecision(null, { normalizeDiv: false, normalizeSub: true })).toEqual(2);
+        expect(calculatePrecision(10, { normalizeDiv: true, normalizeSub: true })).toEqual(2);
+    });
+    test('should return precision value from func arguments', () => {
+        expect(calculatePrecision(null, { normalizeDiv: false, normalizeSub: false, precision: 3 })).toEqual(3);
+        expect(calculatePrecision(null, { normalizeDiv: true, normalizeSub: false, precision: 4 }, 99.99)).toEqual(4);
+        expect(calculatePrecision(null, { normalizeDiv: false, normalizeSub: true, precision: 5 }, 99)).toEqual(5);
+        expect(calculatePrecision(10, { normalizeDiv: false, normalizeSub: false, precision: 3 })).toEqual(3);
+    });
+    test('should return alternativePrecision value from func arguments', () => {
+        expect(calculatePrecision(10, { normalizeDiv: false, normalizeSub: false })).toEqual(10);
+        expect(calculatePrecision(10, { normalizeDiv: false, normalizeSub: false }, 99)).toEqual(10);
+        expect(calculatePrecision(10, { normalizeDiv: false, normalizeSub: false }, 99.99)).toEqual(10);
+    });
+    test('should return 2 for decimal number by default', () => {
+        expect(calculatePrecision(null, { normalizeDiv: false, normalizeSub: false }, 0.1111111)).toEqual(2);
+    });
+});

package/build/plugins/highcharts/renderer/helpers/config/utils/concatStrings.d.ts

@@ -0,0 +1 @@
+export declare const concatStrings: (...strs: unknown[]) => string;

package/build/plugins/highcharts/renderer/helpers/config/utils/concatStrings.js

@@ -0,0 +1 @@
+export const concatStrings = (...strs) => strs.filter(Boolean).join(' ');

package/build/plugins/highcharts/renderer/helpers/config/utils/getChartKitFormattedValue.d.ts

@@ -0,0 +1,2 @@
+import type { ChartKitFormatNumberSettings } from '../../types';
+export declare const getChartKitFormattedValue: (chartKitFormatSettings: ChartKitFormatNumberSettings, value: number, percentage: number) => string;

package/build/plugins/highcharts/renderer/helpers/config/utils/getChartKitFormattedValue.js

@@ -0,0 +1,15 @@
+import { formatNumber } from '../../../../../shared';
+export const getChartKitFormattedValue = (chartKitFormatSettings, value, percentage) => {
+    const { chartKitPrecision, chartKitPrefix, chartKitPostfix, chartKitUnit, chartKitFormat, chartKitLabelMode, chartKitShowRankDelimiter, } = chartKitFormatSettings;
+    const formatOptions = {
+        precision: chartKitPrecision,
+        prefix: chartKitPrefix,
+        postfix: chartKitPostfix,
+        format: chartKitFormat,
+        showRankDelimiter: chartKitShowRankDelimiter,
+        unit: chartKitUnit,
+        labelMode: chartKitLabelMode,
+    };
+    const valueToFormat = chartKitLabelMode === 'percent' ? percentage : value;
+    return formatNumber(valueToFormat, formatOptions);
+};

package/build/plugins/highcharts/renderer/helpers/config/utils/getFormatOptionsFromLine.d.ts

@@ -0,0 +1,3 @@
+import type { FormatNumberOptions } from '../../../../../shared';
+import type { TooltipLine } from '../../tooltip/types';
+export declare const getFormatOptionsFromLine: (line?: Partial<TooltipLine> | undefined) => FormatNumberOptions | undefined;