@gravity-ui/chartkit 0.9.1 → 0.10.0

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

@@ -0,0 +1,552 @@
+import type { ChartKitHolidays } from '../../../../types';
+import type { HighchartsWidgetData, ChartKitComment, ExtendedHChart } from '../../types';
+import type { ConfigOptions } from './types';
+import './graph.css';
+declare type GetGraphArgs = {
+    options: ConfigOptions;
+    data: HighchartsWidgetData['data'];
+    comments?: ChartKitComment[];
+    holidays?: ChartKitHolidays;
+    isMobile?: boolean;
+};
+declare function getGraph({ options, data, comments, isMobile, holidays }: GetGraphArgs): {
+    config: {
+        chart: {
+            type: any;
+        } & {
+            zoomType: string;
+            backgroundColor: string;
+            className: string;
+        } & {
+            events: {
+                render?: (() => void) | undefined;
+                load: () => void;
+                selection: () => void;
+                drilldown: () => void;
+                drillup: () => void;
+                click: (event: any) => void;
+                redraw: () => void;
+            };
+        };
+        plotOptions: {
+            [x: number]: {
+                stacking: any;
+            };
+        } & {
+            series: {
+                borderColor: string;
+                label: {
+                    enabled: boolean;
+                };
+                tooltip: {
+                    headerFormat: string;
+                    pointFormat: string;
+                };
+                dataLabels: {
+                    style: {
+                        textOutline: string;
+                        color: string;
+                    };
+                };
+                turboThreshold: number;
+            };
+            area: {
+                boostThreshold: number;
+                trackByArea: boolean;
+                stickyTracking: boolean;
+            } & {
+                states: {
+                    hover: {
+                        lineWidthPlus: number;
+                    };
+                };
+                dataGrouping: {
+                    approximation: string;
+                };
+                marker: {
+                    enabled: boolean;
+                    radius: number;
+                    states: {
+                        hover: {
+                            radiusPlus: number;
+                        };
+                    };
+                };
+            } & {
+                dataLabels: {
+                    formatter: () => any;
+                };
+            } & {
+                states: {
+                    hover: {
+                        animation: {
+                            duration: number;
+                            easing: string;
+                        };
+                        lineWidth: number;
+                        opacity: number;
+                    };
+                    inactive: {
+                        opacity: number;
+                    };
+                };
+            };
+            areaspline: {
+                states: {
+                    hover: {
+                        lineWidthPlus: number;
+                    };
+                };
+                dataGrouping: {
+                    approximation: string;
+                };
+                marker: {
+                    enabled: boolean;
+                    radius: number;
+                    states: {
+                        hover: {
+                            radiusPlus: number;
+                        };
+                    };
+                };
+            };
+            bar: {
+                borderWidth: number;
+                pointWidth: number;
+            } & {
+                states: {
+                    hover: {
+                        lineWidthPlus: number;
+                    };
+                };
+                dataGrouping: {
+                    approximation: string;
+                };
+                marker: {
+                    enabled: boolean;
+                    radius: number;
+                    states: {
+                        hover: {
+                            radiusPlus: number;
+                        };
+                    };
+                };
+            } & {
+                dataLabels: {
+                    formatter: () => any;
+                };
+            } & {
+                states: {
+                    inactive: {
+                        enabled: boolean;
+                    };
+                };
+            };
+            column: {
+                states: {
+                    hover: {
+                        lineWidthPlus: number;
+                    };
+                };
+                dataGrouping: {
+                    approximation: string;
+                };
+                marker: {
+                    enabled: boolean;
+                    radius: number;
+                    states: {
+                        hover: {
+                            radiusPlus: number;
+                        };
+                    };
+                };
+            } & {
+                dataLabels: {
+                    formatter: () => any;
+                };
+            } & {
+                states: {
+                    inactive: {
+                        enabled: boolean;
+                    };
+                };
+            };
+            line: {
+                states: {
+                    hover: {
+                        lineWidthPlus: number;
+                    };
+                };
+                dataGrouping: {
+                    approximation: string;
+                };
+                marker: {
+                    enabled: boolean;
+                    radius: number;
+                    states: {
+                        hover: {
+                            radiusPlus: number;
+                        };
+                    };
+                };
+            } & {
+                dataLabels: {
+                    formatter: () => any;
+                };
+            } & {
+                states: {
+                    hover: {
+                        animation: {
+                            duration: number;
+                            easing: string;
+                        };
+                        lineWidth: number;
+                        opacity: number;
+                    };
+                    inactive: {
+                        opacity: number;
+                    };
+                };
+            };
+            spline: {
+                states: {
+                    hover: {
+                        lineWidthPlus: number;
+                    };
+                };
+                dataGrouping: {
+                    approximation: string;
+                };
+                marker: {
+                    enabled: boolean;
+                    radius: number;
+                    states: {
+                        hover: {
+                            radiusPlus: number;
+                        };
+                    };
+                };
+            };
+            arearange: {
+                tooltip: {
+                    pointFormat: string;
+                };
+            } & {
+                states: {
+                    hover: {
+                        lineWidthPlus: number;
+                    };
+                };
+                dataGrouping: {
+                    approximation: string;
+                };
+                marker: {
+                    enabled: boolean;
+                    radius: number;
+                    states: {
+                        hover: {
+                            radiusPlus: number;
+                        };
+                    };
+                };
+            };
+            scatter: {
+                tooltip: {
+                    headerFormat: string;
+                    pointFormat: string;
+                };
+            };
+            bubble: {
+                tooltip: {
+                    headerFormat: string;
+                    pointFormat: string;
+                };
+            };
+            sankey: {
+                tooltip: {
+                    headerFormat: string;
+                    pointFormat: string;
+                };
+            };
+            heatmap: {
+                tooltip: {
+                    headerFormat: string;
+                    pointFormat: string;
+                };
+            };
+            treemap: {
+                tooltip: {
+                    headerFormat: null;
+                    pointFormat: string;
+                };
+            };
+            timeline: {
+                tooltip: {
+                    headerFormat: string;
+                    pointFormat: string;
+                };
+            };
+            variwide: {};
+            waterfall: {};
+            pie: {
+                tooltip: {
+                    headerFormat: null;
+                    pointFormat: string;
+                };
+                dataLabels: {
+                    formatter: () => any;
+                };
+            } & {
+                allowPointSelect: boolean;
+                slicedOffset: number;
+                cursor: string;
+                showInLegend: boolean;
+            } & {
+                states: {
+                    inactive: {
+                        enabled: boolean;
+                    };
+                };
+            };
+            histogram: {
+                tooltip: {
+                    headerFormat: null;
+                    pointFormat: string;
+                };
+            };
+            bellcurve: {};
+            streamgraph: {};
+            ohlc: {
+                tooltip: {
+                    pointFormat: string;
+                };
+            };
+            ema: {};
+            sma: {};
+            wordcloud: {
+                tooltip: {
+                    pointFormat: string;
+                };
+            };
+            xrange: {
+                tooltip: {
+                    headerFormat: string;
+                    pointFormat: string;
+                };
+            };
+            solidgauge: {
+                allowPointSelect: boolean;
+                slicedOffset: number;
+                cursor: string;
+                showInLegend: boolean;
+            };
+            funnel: {
+                allowPointSelect: boolean;
+                slicedOffset: number;
+                cursor: string;
+                showInLegend: boolean;
+            };
+            boxplot: {
+                tooltip: {
+                    pointFormat: string;
+                };
+            };
+        } & {
+            xrange: {
+                stickyTracking: boolean;
+            };
+            series: {
+                events: {
+                    legendItemClick: (event: any) => void;
+                    mouseOver: () => void;
+                    mouseOut: () => void;
+                    click: (event: any) => void;
+                };
+                point: {
+                    events: {
+                        click: (event: any) => boolean;
+                    };
+                };
+                marker: {
+                    states: {
+                        hover: {
+                            enabled: boolean;
+                        };
+                        select: {
+                            enabled: boolean;
+                        };
+                    };
+                } | {
+                    states?: undefined;
+                };
+            };
+            pie: {
+                point: {
+                    events: {
+                        legendItemClick: (event: any) => void;
+                    };
+                };
+            };
+            area: {
+                trackByArea: boolean;
+                stickyTracking: boolean;
+            } | {
+                trackByArea?: undefined;
+                stickyTracking?: undefined;
+            };
+        };
+        title: {
+            style: {
+                color: string;
+            };
+        } & {
+            text: any;
+            floating: any;
+        };
+        tooltip: {
+            split: boolean;
+            shared: boolean;
+            outside: boolean;
+            followPointer: boolean;
+            dateTimeLabelFormats: {
+                millisecond: string;
+                second: string;
+                minute: string;
+                hour: string;
+                day: string;
+                week: string;
+                quarter: string;
+            };
+        } & {
+            replaceCellAt?: any;
+            insertCellAt?: any;
+            positioner?: typeof import("./config/config").portraitOrientationTooltipPositioner | undefined;
+            shared: boolean;
+            splitTooltip: any;
+            distance: number;
+            style: {
+                width: string;
+            };
+            className: string;
+            outside: boolean;
+        };
+        legend: {
+            itemStyle: {
+                color: string;
+            };
+            itemHoverStyle: {
+                color: string;
+            };
+            itemHiddenStyle: {
+                color: string;
+            };
+        } & ({
+            alignColumns: boolean;
+            labelFormatter: () => any;
+            navigation: {
+                activeColor: string;
+                inactiveColor: string;
+                style: {
+                    color: string;
+                };
+            };
+        } | {
+            enabled: boolean;
+        });
+        xAxis: {
+            crosshair: boolean;
+            gridLineColor: string;
+            lineColor: string;
+            labels: {
+                style: {
+                    color: string;
+                };
+            };
+            tickPixelInterval: number;
+            tickColor: string;
+            tickmarkPlacement: string;
+            dateTimeLabelFormats: {
+                day: string;
+                week: string;
+                quarter: string;
+            };
+        } & {
+            crosshair: boolean | {
+                width: number;
+                color: string;
+                zIndex: number;
+            };
+            labels: {
+                formatter: () => any;
+            };
+        };
+        yAxis: {
+            gridLineColor: string;
+            lineColor: string;
+            labels: {
+                style: {
+                    color: string;
+                };
+            };
+            tickColor: string;
+            stackLabels: {
+                style: {
+                    textOutline: string;
+                    color: string;
+                };
+            };
+        } & {
+            crosshair: boolean | {
+                width: number;
+                color: string;
+                zIndex: number;
+            };
+            labels: {
+                formatter: () => any;
+            };
+        };
+        exporting: {
+            buttons: {
+                contextButton: {
+                    enabled: boolean;
+                };
+            };
+        };
+        rangeSelector: {
+            enabled: boolean;
+            inputEnabled: boolean;
+        };
+        scrollbar: {
+            enabled: boolean;
+            barBackgroundColor: string;
+            barBorderColor: string;
+            buttonArrowColor: string;
+            buttonBorderColor: string;
+            buttonBackgroundColor: string;
+            trackBackgroundColor: string;
+            trackBorderColor: string;
+        };
+        navigator: {
+            height: number;
+            outlineColor: string;
+            xAxis: {
+                gridLineColor: string;
+            };
+            handles: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        } & {
+            adaptToUpdatedData: boolean;
+        };
+        _config: any;
+        subtitle: {
+            text: any;
+        };
+        series: any;
+        _externalComments: ChartKitComment[];
+        _internalComments: ChartKitComment[];
+    };
+    callback: (chart: ExtendedHChart) => void;
+};
+export { getGraph };

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

@@ -0,0 +1,85 @@
+import { drawComments } from './comments/drawing';
+import { prepareData } from './prepare-data';
+import { prepareConfig } from './config/config';
+import { initHighcharts } from './highcharts/highcharts';
+import { addHolidays } from './add-holidays';
+import './graph.css';
+let highchartsInitialized = false;
+function getGraph({ options, data, comments, isMobile, holidays }) {
+    if (!highchartsInitialized) {
+        highchartsInitialized = true;
+        initHighcharts({ isMobile });
+    }
+    prepareData(data, options, holidays);
+    return {
+        config: Object.assign({ _externalComments: (!options.disableExternalComments && comments) || [], _internalComments: data.comments || [] }, prepareConfig(data, options, isMobile, holidays)),
+        callback: (chart) => {
+            var _a, _b, _c;
+            if (!chart) {
+                console.error('CHARTKIT_NO_CHART_CALLBACK');
+                return;
+            }
+            chart.userOptions._getComments = () => chart.userOptions._internalComments.concat(chart.userOptions._externalComments);
+            let needRedraw = false;
+            chart.series.forEach((serie) => {
+                if (serie.userOptions.noCheckNullValues) {
+                    return;
+                }
+                if (['line', 'spline', 'area', 'stack'].includes(serie.type) &&
+                    !serie.options.connectNulls) {
+                    const { data } = serie;
+                    data.forEach((point, index) => {
+                        if (point.y !== null &&
+                            (data[index - 1] === undefined ||
+                                // eslint-disable-next-line eqeqeq, no-eq-null
+                                data[index - 1].y == null) &&
+                            // eslint-disable-next-line eqeqeq, no-eq-null
+                            (index === data.length - 1 || data[index + 1].y == null)) {
+                            point.update({ marker: { enabled: true } }, false, false);
+                            needRedraw = true;
+                        }
+                    });
+                }
+            });
+            if (options.highstock) {
+                let extmin;
+                let extmax;
+                if (options.extremes && options.extremes.min && options.extremes.max) {
+                    extmin = options.extremes.min;
+                    extmax = options.extremes.max;
+                }
+                else if (options.highstock.range_min && options.highstock.range_max) {
+                    extmin = parseInt((options.highstock.override_range_min ||
+                        options.highstock.range_min), 10);
+                    extmax = parseInt((options.highstock.override_range_max ||
+                        options.highstock.range_max), 10);
+                }
+                if (extmin && extmax) {
+                    // https://github.com/highcharts/highcharts/issues/9028
+                    const xAxis = chart.xAxis.find((xAxis) => !chart.navigator ||
+                        xAxis !== chart.navigator.xAxis) || ((_a = chart.navigator) === null || _a === void 0 ? void 0 : _a.xAxis);
+                    extmin = Math.max((_b = chart.xAxis[0]) === null || _b === void 0 ? void 0 : _b.dataMin, extmin);
+                    extmax = Math.min(chart.xAxis[0].dataMax, extmax);
+                    (_c = xAxis) === null || _c === void 0 ? void 0 : _c.setExtremes(extmin, extmax, false, false);
+                    needRedraw = true;
+                }
+            }
+            if (holidays && !options.hideHolidaysBands) {
+                if (needRedraw) {
+                    addHolidays(chart, holidays);
+                }
+                else {
+                    needRedraw = addHolidays(chart, holidays);
+                }
+            }
+            if (needRedraw) {
+                chart.redraw();
+            }
+            if (chart && chart.userOptions._getComments()) {
+                drawComments(chart, chart.userOptions._getComments(), chart.userOptions._config);
+            }
+            chart.userOptions.isCallbackCalled = true;
+        },
+    };
+}
+export { getGraph };

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

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

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

@@ -0,0 +1,17 @@
+const colors = [
+    ['#4DA2F1', '#84D1EE', '#1F68A9', '#52A6C5'],
+    ['#FF3D64', '#FF91A1', '#ED65A9', '#BE2443'],
+    ['#8AD554', '#54A520', '#0FA08D', '#70C1AF'],
+    ['#FFC636', '#DB9100', '#FF7E00', '#FFB46C'],
+    ['#FFB9DD', '#BA74B3', '#E8B0A4', '#DCA3D7'],
+];
+function mergeColors() {
+    const result = [];
+    for (let i = 0; i < colors[0].length; i++) {
+        for (let j = 0; j < colors.length; j++) {
+            result.push(colors[j][i]);
+        }
+    }
+    return result;
+}
+export default mergeColors().slice();

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

@@ -0,0 +1,4 @@
+export function initHighcharts({ isMobile }: {
+    isMobile: any;
+}): void;
+export function initHighchartsMap(): void;