@gravity-ui/chartkit 0.9.1 → 0.10.0

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

@@ -0,0 +1,15 @@
+export const getFormatOptionsFromLine = (line) => {
+    if (!line) {
+        return undefined;
+    }
+    const options = {
+        format: line.chartKitFormat,
+        postfix: line.chartKitPostfix,
+        precision: line.chartKitPrecision,
+        prefix: line.chartKitPrefix,
+        showRankDelimiter: line.chartKitShowRankDelimiter,
+        unit: line.chartKitUnit,
+    };
+    const hasValues = Object.values(options).some((value) => typeof value !== 'undefined');
+    return hasValues ? options : undefined;
+};

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

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

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

@@ -0,0 +1,11 @@
+import { getFormatOptionsFromLine } from './getFormatOptionsFromLine';
+describe('plugins/highcharts/config', () => {
+    test.each([
+        [{ chartKitFormat: 'percent' }, { format: 'percent' }],
+        [{}, undefined],
+        [undefined, undefined],
+    ])('getFormatOptionsFromLine (line: %j)', (line, expected) => {
+        const result = getFormatOptionsFromLine(line);
+        expect(result).toEqual(expected);
+    });
+});

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

@@ -0,0 +1 @@
+export declare const getXAxisThresholdValue: (graphs: Record<string, any>[], operation: 'min' | 'max') => number | null;

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

@@ -0,0 +1,9 @@
+export const getXAxisThresholdValue = (graphs, operation) => {
+    const xAxisValues = graphs.reduce((acc, series) => {
+        const data = series.data || [];
+        return [...acc, ...data.map((point) => point.x)];
+    }, []);
+    const fn = operation === 'min' ? Math.min : Math.max;
+    const xAxisValue = fn(...xAxisValues);
+    return isFinite(xAxisValue) ? xAxisValue : null;
+};

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

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

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

@@ -0,0 +1,20 @@
+import { getXAxisThresholdValue } from './getXAxisThresholdValue';
+const MOCKED_SERIES = [
+    { data: [{ x: 1 }, { x: 2 }, { x: -11 }, { x: 0 }, { x: 1 }] },
+    { data: [{ x: 100 }, { x: -1232 }] },
+    { data: [] },
+];
+describe('plugins/highcharts/config/getXAxisThresholdValue', () => {
+    it("should return maximun value from x axis in case of 'max' operation", () => {
+        const result = getXAxisThresholdValue(MOCKED_SERIES, 'max');
+        expect(result).toEqual(100);
+    });
+    it("should return minimum value from x axis in case of 'min' operation", () => {
+        const result = getXAxisThresholdValue(MOCKED_SERIES, 'min');
+        expect(result).toEqual(-1232);
+    });
+    it.each([['min'], ['max']])('should return null in case of empty series array', (operation) => {
+        const result = getXAxisThresholdValue([], operation);
+        expect(result).toBeNull();
+    });
+});

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

@@ -0,0 +1,13 @@
+export { addShowInNavigatorToSeries } from './addShowInNavigatorToSeries';
+export { buildNavigatorFallback } from './buildNavigatorFallback';
+export { calculatePrecision } from './calculatePrecision';
+export { concatStrings } from './concatStrings';
+export { getChartKitFormattedValue } from './getChartKitFormattedValue';
+export { getFormatOptionsFromLine } from './getFormatOptionsFromLine';
+export { getXAxisThresholdValue } from './getXAxisThresholdValue';
+export { isTooltipShared } from './isTooltipShared';
+export { isNavigatorSeries } from './isNavigatorSeries';
+export { isSafari } from './isSafari';
+export { mergeArrayWithObject } from './mergeArrayWithObject';
+export { numberFormat } from './numberFormat';
+export { setNavigatorDefaultPeriod } from './setNavigatorDefaultPeriod';

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

@@ -0,0 +1,13 @@
+export { addShowInNavigatorToSeries } from './addShowInNavigatorToSeries';
+export { buildNavigatorFallback } from './buildNavigatorFallback';
+export { calculatePrecision } from './calculatePrecision';
+export { concatStrings } from './concatStrings';
+export { getChartKitFormattedValue } from './getChartKitFormattedValue';
+export { getFormatOptionsFromLine } from './getFormatOptionsFromLine';
+export { getXAxisThresholdValue } from './getXAxisThresholdValue';
+export { isTooltipShared } from './isTooltipShared';
+export { isNavigatorSeries } from './isNavigatorSeries';
+export { isSafari } from './isSafari';
+export { mergeArrayWithObject } from './mergeArrayWithObject';
+export { numberFormat } from './numberFormat';
+export { setNavigatorDefaultPeriod } from './setNavigatorDefaultPeriod';

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

@@ -0,0 +1,2 @@
+import type { Highcharts } from '../../../../types';
+export declare const isNavigatorSeries: (series?: Highcharts.Series | undefined) => boolean;

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

@@ -0,0 +1,3 @@
+export const isNavigatorSeries = (series) => {
+    return (series === null || series === void 0 ? void 0 : series.options.className) === 'highcharts-navigator-series';
+};

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

@@ -0,0 +1 @@
+export declare const isSafari: boolean;

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

@@ -0,0 +1,12 @@
+// https://stackoverflow.com/a/9851769/5806646
+// @ts-ignore
+export const isSafari = 
+// @ts-ignore
+/constructor/i.test(window.HTMLElement) ||
+    (function (p) {
+        return p.toString() === '[object SafariRemoteNotification]';
+    })(
+    // @ts-ignore
+    !window['safari'] ||
+        // @ts-ignore
+        (typeof safari !== 'undefined' && safari.pushNotification));

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

@@ -0,0 +1 @@
+export declare const isTooltipShared: (chartType: string) => boolean;

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

@@ -0,0 +1,8 @@
+// In case of using 'sankey' or 'xrange', the shared property must be set to false, otherwise the tooltip behaves incorrectly:
+// Point.onMouseOver -> Highcharts.Pointer.runPointActions -> H.Tooltip.refresh -> Cannot read property 'series' of undefined
+export const isTooltipShared = (chartType) => {
+    if (['sankey', 'xrange'].includes(chartType)) {
+        return false;
+    }
+    return true;
+};

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

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

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

@@ -0,0 +1,31 @@
+import { HighchartsType } from '../../constants';
+import { isTooltipShared } from './isTooltipShared';
+const chartTypes = [
+    [HighchartsType.Sankey, false],
+    [HighchartsType.Xrange, false],
+    [HighchartsType.Line, true],
+    [HighchartsType.Area, true],
+    [HighchartsType.Arearange, true],
+    [HighchartsType.Bar, true],
+    [HighchartsType.Column, true],
+    [HighchartsType.Columnrange, true],
+    [HighchartsType.Funnel, true],
+    [HighchartsType.Pie, true],
+    [HighchartsType.Map, true],
+    [HighchartsType.Scatter, true],
+    [HighchartsType.Bubble, true],
+    [HighchartsType.Heatmap, true],
+    [HighchartsType.Treemap, true],
+    [HighchartsType.Networkgraph, true],
+    [HighchartsType.Variwide, true],
+    [HighchartsType.Waterfall, true],
+    [HighchartsType.Streamgraph, true],
+    [HighchartsType.Wordcloud, true],
+    [HighchartsType.Boxplot, true],
+    [HighchartsType.Timeline, true],
+];
+describe('plugins/highcharts/config/calculatePrecision', () => {
+    test.each(chartTypes)(`for %s return %s`, (chartType, assert) => {
+        expect(isTooltipShared(chartType)).toBe(assert);
+    });
+});

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

@@ -0,0 +1,5 @@
+declare class LocalStorage {
+    static restore(key: string): any;
+    static store(key: string, data: unknown): void;
+}
+export default LocalStorage;

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

@@ -0,0 +1,23 @@
+class LocalStorage {
+    static restore(key) {
+        try {
+            const data = window.localStorage.getItem(key);
+            if (data === null) {
+                return null;
+            }
+            return JSON.parse(data);
+        }
+        catch (err) {
+            return null;
+        }
+    }
+    static store(key, data) {
+        try {
+            window.localStorage.setItem(key, JSON.stringify(data));
+        }
+        catch (err) {
+            console.error(`data not saved in localeStorage: ${err}`);
+        }
+    }
+}
+export default LocalStorage;

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

@@ -0,0 +1 @@
+export declare const mergeArrayWithObject: (a: unknown[] | unknown, b: unknown[] | unknown) => any[] | undefined;

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

@@ -0,0 +1,10 @@
+import merge from 'lodash/merge';
+export const mergeArrayWithObject = (a, b) => {
+    if (Array.isArray(a) && b && typeof b === 'object' && !Array.isArray(b)) {
+        return a.map((value) => merge(value, b));
+    }
+    if (Array.isArray(b) && a && typeof a === 'object' && !Array.isArray(a)) {
+        return b.map((value) => merge({}, a, value));
+    }
+    return undefined;
+};

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

@@ -0,0 +1,2 @@
+import type { FormatNumberOptions } from '../../../../../shared';
+export declare const numberFormat: (val: number, round?: number | undefined, options?: FormatNumberOptions) => string | null;

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

@@ -0,0 +1,19 @@
+import { formatNumber } from '../../../../../shared';
+export const numberFormat = (val, round, options = {}) => {
+    if (parseInt(val, 10) === val) {
+        if (typeof round === 'number') {
+            return formatNumber(val, Object.assign({ precision: Math.min(round, 20) }, options));
+        }
+        else {
+            return formatNumber(val, Object.assign({ precision: 0 }, options));
+        }
+    }
+    else if (val) {
+        let resultRound = round;
+        if (typeof resultRound !== 'number') {
+            resultRound = val.toString().split('.')[1].length;
+        }
+        return formatNumber(val, Object.assign({ precision: Math.min(resultRound, 20) }, options));
+    }
+    return null;
+};

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

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

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

@@ -0,0 +1,20 @@
+import { i18nInstance } from '../../../../../shared/format-number/i18n/i18n';
+import { numberFormat } from './numberFormat';
+i18nInstance.setLang('en');
+describe('plugins/highcharts/config', () => {
+    test.each([
+        [100, undefined, undefined, '100'],
+        [100, 0, undefined, '100'],
+        [100, 2, undefined, '100.00'],
+        [100, 21, undefined, '100.00000000000000000000'],
+        [NaN, 0, undefined, null],
+        [100, undefined, undefined, '100'],
+        [100, 2, { precision: 3 }, '100.000'],
+        [100.234, 2, { precision: 3 }, '100.234'],
+        [100000, undefined, { unit: 'k' }, '100K'],
+        [100000, 2, { unit: 'k' }, '100.00K'],
+    ])('numberFormat (args: {value: %p, round: %p})', (value, round, options, expected) => {
+        const result = numberFormat(value, round, options);
+        expect(result).toEqual(expected);
+    });
+});

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

@@ -0,0 +1,13 @@
+import type { Highcharts } from '../../../../types';
+import type { NavigatorPeriod } from '../types';
+declare type SetNavigatorDefaultPeriod = {
+    params: Record<string, any>;
+    periodSettings: NavigatorPeriod;
+};
+declare type NavigatorPeriodInMS = {
+    minRange: number;
+    range: number;
+};
+export declare const setNavigatorDefaultPeriod: ({ params, periodSettings }: SetNavigatorDefaultPeriod) => void;
+export declare const getDefaultPeriodInMS: (periodSettings: NavigatorPeriod, series: Highcharts.Series[]) => NavigatorPeriodInMS | null;
+export {};

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

@@ -0,0 +1,27 @@
+import moment from 'moment';
+import { getXAxisThresholdValue } from './getXAxisThresholdValue';
+const HOUR_IN_MS = 1000 * 60 * 60;
+const DAY_IN_MS = HOUR_IN_MS * 24;
+export const setNavigatorDefaultPeriod = ({ params, periodSettings }) => {
+    const periodInMS = getDefaultPeriodInMS(periodSettings, params.series);
+    if (!periodInMS) {
+        return;
+    }
+    const { range, minRange } = periodInMS;
+    params.xAxis.range = range;
+    params.xAxis.minRange = minRange;
+};
+export const getDefaultPeriodInMS = (periodSettings, series) => {
+    const { type, value, period } = periodSettings;
+    const minRange = type === 'date' ? DAY_IN_MS : HOUR_IN_MS;
+    const maxXValue = getXAxisThresholdValue(series, 'max');
+    if (maxXValue === null) {
+        return null;
+    }
+    const minXValue = moment(maxXValue).subtract(value, period);
+    const range = maxXValue - minXValue.valueOf();
+    return {
+        minRange,
+        range,
+    };
+};

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

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

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

@@ -0,0 +1,45 @@
+import { getDefaultPeriodInMS } from './setNavigatorDefaultPeriod';
+const date1 = new Date('2021-01-01');
+const date2 = new Date('2021-01-02');
+const date3 = new Date('2021-01-03');
+const MOCKED_SERIES = [
+    {
+        data: [{ x: date1.valueOf() }, { x: date3.valueOf() }],
+    },
+    {
+        data: [{ x: date2.valueOf() }],
+    },
+];
+const DAY_MIN_RANGE = 60 * 60 * 1000 * 24;
+const HOUR_MIN_RANGE = 60 * 60 * 1000;
+describe('plugins/highcharts/config/getDefaultPeriodInMS', () => {
+    let settings;
+    beforeEach(() => {
+        settings = {
+            type: 'date',
+            value: '2',
+            period: 'day',
+        };
+    });
+    it('should return range & minRange for date in ms', () => {
+        const result = getDefaultPeriodInMS(settings, MOCKED_SERIES);
+        const expectedResult = {
+            minRange: DAY_MIN_RANGE,
+            range: date3.valueOf() - date1.valueOf(),
+        };
+        expect(result).toEqual(expectedResult);
+    });
+    it(`should set {minRange: ${HOUR_MIN_RANGE}} in case of settings.type !== 'date'`, () => {
+        settings.type = 'datetime';
+        const result = getDefaultPeriodInMS(settings, MOCKED_SERIES);
+        const expectedResult = {
+            minRange: HOUR_MIN_RANGE,
+            range: date3.valueOf() - date1.valueOf(),
+        };
+        expect(result).toEqual(expectedResult);
+    });
+    it('should return null in case of empty series', () => {
+        const result = getDefaultPeriodInMS(settings, []);
+        expect(result).toBeNull();
+    });
+});

package/build/plugins/highcharts/renderer/helpers/constants.d.ts

@@ -0,0 +1,28 @@
+export declare enum HighchartsType {
+    Area = "area",
+    Arearange = "arearange",
+    Bar = "bar",
+    Boxplot = "boxplot",
+    Bubble = "bubble",
+    Column = "column",
+    Columnrange = "columnrange",
+    Funnel = "funnel",
+    Heatmap = "heatmap",
+    Line = "line",
+    Map = "map",
+    Networkgraph = "networkgraph",
+    Pie = "pie",
+    Sankey = "sankey",
+    Scatter = "scatter",
+    Streamgraph = "streamgraph",
+    Timeline = "timeline",
+    Treemap = "treemap",
+    Variwide = "variwide",
+    Waterfall = "waterfall",
+    Wordcloud = "wordcloud",
+    Xrange = "xrange"
+}
+export declare enum NavigatorLinesMode {
+    All = "all",
+    Selected = "selected"
+}

package/build/plugins/highcharts/renderer/helpers/constants.js

@@ -0,0 +1,30 @@
+export var HighchartsType;
+(function (HighchartsType) {
+    HighchartsType["Area"] = "area";
+    HighchartsType["Arearange"] = "arearange";
+    HighchartsType["Bar"] = "bar";
+    HighchartsType["Boxplot"] = "boxplot";
+    HighchartsType["Bubble"] = "bubble";
+    HighchartsType["Column"] = "column";
+    HighchartsType["Columnrange"] = "columnrange";
+    HighchartsType["Funnel"] = "funnel";
+    HighchartsType["Heatmap"] = "heatmap";
+    HighchartsType["Line"] = "line";
+    HighchartsType["Map"] = "map";
+    HighchartsType["Networkgraph"] = "networkgraph";
+    HighchartsType["Pie"] = "pie";
+    HighchartsType["Sankey"] = "sankey";
+    HighchartsType["Scatter"] = "scatter";
+    HighchartsType["Streamgraph"] = "streamgraph";
+    HighchartsType["Timeline"] = "timeline";
+    HighchartsType["Treemap"] = "treemap";
+    HighchartsType["Variwide"] = "variwide";
+    HighchartsType["Waterfall"] = "waterfall";
+    HighchartsType["Wordcloud"] = "wordcloud";
+    HighchartsType["Xrange"] = "xrange";
+})(HighchartsType || (HighchartsType = {}));
+export var NavigatorLinesMode;
+(function (NavigatorLinesMode) {
+    NavigatorLinesMode["All"] = "all";
+    NavigatorLinesMode["Selected"] = "selected";
+})(NavigatorLinesMode || (NavigatorLinesMode = {}));

package/build/plugins/highcharts/renderer/helpers/graph.css

@@ -0,0 +1,89 @@
+.chartkit-graph .highcharts-plot-line-label,
+.chartkit-graph .highcharts-plot-band-label {
+  fill: var(--highcharts-plot-line-label);
+}
+
+.chartkit-graph .highcharts-plot-band_comment {
+  opacity: 0.5;
+}
+
+.chartkit-tooltip {
+  border: 1px solid var(--highcharts-grid-line);
+  border-radius: 3px;
+  background: var(--highcharts-tooltip-bg);
+  padding: 10px 14px;
+  color: var(--highcharts-tooltip-text);
+  font-size: 12px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+.chartkit-tooltip_split-tooltip {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  border-bottom: 1px solid var(--yc-color-line-generic);
+}
+
+.chartkit-tooltip_yandex-map {
+  position: absolute;
+}
+
+.chartkit-tooltip__header {
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.chartkit-tooltip__header + .chartkit-tooltip__row .chartkit-tooltip__cell {
+  padding-top: 10px;
+}
+
+.chartkit-tooltip__footer {
+  color: #aaaaaa;
+  font-size: 10px;
+}
+
+.chartkit-tooltip__footer:not(:only-child) {
+  margin-top: 8px;
+}
+
+.chartkit-tooltip__row {
+  display: table-row;
+}
+
+.chartkit-tooltip__cell {
+  display: table-cell;
+  padding: 2px 7px 2px 0;
+  max-width: 370px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.chartkit-tooltip__cell_yandex-map {
+  white-space: nowrap;
+}
+
+.chartkit-tooltip__color {
+  position: relative;
+  top: -1px;
+  width: 12px;
+  height: 6px;
+  margin-right: 3px;
+  border-radius: 1px;
+  display: inline-block;
+}
+
+.chartkit-tooltip__series-name {
+  padding-right: 45px;
+}
+
+.chartkit-tooltip h3 {
+  margin: 0;
+}
+
+.chartkit-tooltip__point-container_type_timeline {
+  max-width: 350px;
+  white-space: normal;
+  padding-top: 5px;
+}