@gravity-ui/chartkit 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [2.11.0](https://github.com/gravity-ui/chartkit/compare/v2.10.1...v2.11.0) (2023-06-20)
+
+
+### Features
+
+* add renderError property ([#175](https://github.com/gravity-ui/chartkit/issues/175)) ([84c03a9](https://github.com/gravity-ui/chartkit/commit/84c03a9f8516e9fb846e25a920aa82b00c660a02))
+* **main:** Add renderErrorView prop for custom render and handle errors ([15e314f](https://github.com/gravity-ui/chartkit/commit/15e314f40c378aa65c4d83055760f49fb56af539))
+
+
+### Bug Fixes
+
+* **main:** reset "No data" error on change data ([ac0da94](https://github.com/gravity-ui/chartkit/commit/ac0da94fd21ff558a739c00b8904645d5ba006ef))
+
+## [2.10.1](https://github.com/gravity-ui/chartkit/compare/v2.10.0...v2.10.1) (2023-06-19)
+
+
+### Bug Fixes
+
+* **Highcharts plugin:** show totals of selected series on legend click ([#176](https://github.com/gravity-ui/chartkit/issues/176)) ([ac7fe22](https://github.com/gravity-ui/chartkit/commit/ac7fe224363f7379f6dd35db0a3a682cdc7a2bc2))
+
 ## [2.10.0](https://github.com/gravity-ui/chartkit/compare/v2.9.0...v2.10.0) (2023-06-05)
 
 

package/build/components/ChartKit.d.ts

@@ -13,6 +13,7 @@ export declare const ChartKit: <T extends keyof import("../types").ChartKitWidge
     onLoad?: ((data?: import("../types").ChartKitOnLoadData<T> | undefined) => void) | undefined;
     onRender?: ((data: import("../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../types").ChartKitOnChartLoad<T>) => void) | undefined;
+    renderError?: import("../types").RenderError | undefined;
     onError?: import("../types").ChartKitOnError | undefined;
 } & { [key in keyof Omit<import("../types").ChartKitWidget[T], "widget" | "data">]: import("../types").ChartKitWidget[T][key]; } & {
     ref?: React.ForwardedRef<ChartKitRef | undefined> | undefined;

package/build/components/ChartKit.js

@@ -36,7 +36,7 @@ const ChartKitComponent = (props) => {
             React.createElement(ChartComponent, Object.assign({ ref: widgetRef, id: id, lang: lang }, restProps)))));
 };
 const ChartKitComponentWithErrorBoundary = React.forwardRef(function ChartKitComponentWithErrorBoundary(props, ref) {
-    return (React.createElement(ErrorBoundary, { onError: props.onError },
+    return (React.createElement(ErrorBoundary, { onError: props.onError, data: props.data, renderError: props.renderError },
         React.createElement(ChartKitComponent, Object.assign({ instanceRef: ref }, props))));
 }) /* https://stackoverflow.com/a/58473012 */;
 export const ChartKit = typedMemo(ChartKitComponentWithErrorBoundary);

package/build/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ChartKitError } from '../../libs';
-import type { ChartKitOnError } from '../../types';
+import type { ChartKitOnError, ChartKitType, ChartKitWidget, RenderError } from '../../types';
 declare type Props = {
     onError?: ChartKitOnError;
+    data: ChartKitWidget[ChartKitType]['data'];
+    renderError?: RenderError;
 };
 declare type State = {
     error?: ChartKitError | Error;
@@ -13,6 +15,8 @@ export declare class ErrorBoundary extends React.Component<Props, State> {
     };
     state: State;
     componentDidCatch(): void;
+    componentDidUpdate(prevProps: Readonly<Props>): void;
     render(): React.ReactNode;
+    resetError: () => void;
 }
 export {};

package/build/components/ErrorBoundary/ErrorBoundary.js

@@ -1,11 +1,17 @@
 import React from 'react';
-import { ErrorView } from '../ErrorView/ErrorView';
+import { getErrorMessage } from '../../utils/getErrorMessage';
+import { CHARTKIT_ERROR_CODE } from '../../libs';
 export class ErrorBoundary extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
             error: undefined,
         };
+        this.resetError = () => {
+            if (this.state.error) {
+                this.setState({ error: undefined });
+            }
+        };
     }
     static getDerivedStateFromError(error) {
         return { error };
@@ -17,10 +23,26 @@ export class ErrorBoundary extends React.Component {
             (_b = (_a = this.props).onError) === null || _b === void 0 ? void 0 : _b.call(_a, { error });
         }
     }
+    componentDidUpdate(prevProps) {
+        if (prevProps.data !== this.props.data) {
+            const { error } = this.state;
+            if (error && 'code' in error && error.code === CHARTKIT_ERROR_CODE.NO_DATA) {
+                this.resetError();
+            }
+        }
+    }
     render() {
         const { error } = this.state;
         if (error) {
-            return React.createElement(ErrorView, { error: error });
+            const message = getErrorMessage(error);
+            if (this.props.renderError) {
+                return this.props.renderError({
+                    error,
+                    message,
+                    resetError: this.resetError,
+                });
+            }
+            return React.createElement("div", null, message);
         }
         return this.props.children;
     }

package/build/plugins/highcharts/__stories__/components/ChartStory.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
+import { RenderError } from '../../../../types';
 import { HighchartsWidgetData } from '../../types';
 export declare type ChartStoryProps = {
+    data: HighchartsWidgetData;
+    withoutPlugin?: boolean;
+    visible?: boolean;
     height?: string;
     width?: string;
-    data: HighchartsWidgetData;
+    renderError?: RenderError;
 };
 export declare const ChartStory: React.FC<ChartStoryProps>;

package/build/plugins/highcharts/__stories__/components/ChartStory.js

@@ -8,15 +8,21 @@ const DEFAULT_STORY_HEIGHT = '300px';
 const DEFAULT_STORY_WIDTH = '100%';
 export const ChartStory = (props) => {
     const { height, width, data } = props;
-    const [visible, setVisible] = React.useState(false);
+    const initRef = React.useRef(false);
+    const [visible, setVisible] = React.useState(Boolean(props.visible));
     const chartKitRef = React.useRef();
+    if (!initRef.current) {
+        if (!props.withoutPlugin) {
+            settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
+        }
+        initRef.current = true;
+    }
     if (!visible) {
-        settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
         return React.createElement(Button, { onClick: () => setVisible(true) }, "Show chart");
     }
     return (React.createElement("div", { style: {
             height: height || DEFAULT_STORY_HEIGHT,
             width: width || DEFAULT_STORY_WIDTH,
         } },
-        React.createElement(ChartKit, { ref: chartKitRef, type: "highcharts", data: data })));
+        React.createElement(ChartKit, { ref: chartKitRef, type: "highcharts", data: data, renderError: props.renderError })));
 };

package/build/plugins/highcharts/__stories__/custom-error-render/custom-error-render.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const CustomErrorRender: Story<import("@storybook/react").Args>;

package/build/plugins/highcharts/__stories__/custom-error-render/custom-error-render.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ChartStory } from '../components/ChartStory';
+import { Button } from '@gravity-ui/uikit';
+import { CHARTKIT_ERROR_CODE, settings } from '../../../../libs';
+import { HighchartsPlugin } from '../../index';
+import holidays from '../../mocks/holidays';
+import { noData, filledData } from '../../mocks/custom-error-render';
+export default {
+    title: 'Plugins/Highcharts/CustomErrorRender',
+    component: ChartKit,
+};
+const Template = () => {
+    const [data, setData] = React.useState(noData);
+    const renderErrorView = React.useCallback(({ error, message, resetError }) => {
+        function renderFixButton() {
+            if (!('code' in error)) {
+                return null;
+            }
+            switch (error.code) {
+                case CHARTKIT_ERROR_CODE.UNKNOWN_PLUGIN:
+                    return (React.createElement(Button, { onClick: () => {
+                            settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
+                            resetError();
+                        } }, "Add highcharts plugin"));
+                case CHARTKIT_ERROR_CODE.NO_DATA:
+                    return (React.createElement(Button, { onClick: () => {
+                            setData(filledData);
+                        } }, "Add data"));
+                default:
+                    return null;
+            }
+        }
+        return (React.createElement("div", null,
+            React.createElement("h2", null, message),
+            renderFixButton()));
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement(ChartStory, { withoutPlugin: true, data: data, visible: true, renderError: renderErrorView })));
+};
+export const CustomErrorRender = Template.bind({});

package/build/plugins/highcharts/__stories__/no-data/no-data.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const NoData: Story<import("@storybook/react").Args>;

package/build/plugins/highcharts/__stories__/no-data/no-data.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { noData, filledData } from '../../mocks/no-data';
+import { ChartStory } from '../components/ChartStory';
+import { Button } from '@gravity-ui/uikit';
+export default {
+    title: 'Plugins/Highcharts/NoData',
+    component: ChartKit,
+};
+const Template = () => {
+    const [data, setData] = React.useState(noData);
+    const handleUpdateData = React.useCallback(() => {
+        setData(filledData);
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement("div", { style: { marginBottom: 12 } },
+            React.createElement(Button, { onClick: handleUpdateData }, "Add data")),
+        React.createElement(ChartStory, { data: data, visible: true })));
+};
+export const NoData = Template.bind({});

package/build/plugins/highcharts/__stories__/pie/WithTotals.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const WithTotals: Story<any>;

package/build/plugins/highcharts/__stories__/pie/WithTotals.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../../mocks/pie-with-totals';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Pie',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const WithTotals = Template.bind({});

package/build/plugins/highcharts/mocks/custom-error-render.d.ts

@@ -0,0 +1,3 @@
+import type { HighchartsWidgetData } from '../types';
+export declare const noData: HighchartsWidgetData;
+export declare const filledData: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/custom-error-render.js

@@ -0,0 +1,69 @@
+const baseData = {
+    config: {
+        hideHolidays: false,
+        normalizeDiv: false,
+        normalizeSub: false,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'arearange',
+        },
+        title: {
+            text: 'Temperature variation by day',
+        },
+        xAxis: {
+            type: 'datetime',
+        },
+        tooltip: {
+            valueSuffix: '°C',
+        },
+    },
+};
+export const noData = Object.assign(Object.assign({}, baseData), { data: {
+        graphs: [
+            {
+                name: 'Temperatures',
+                data: [],
+            },
+        ],
+    } });
+export const filledData = Object.assign(Object.assign({}, baseData), { data: {
+        graphs: [
+            {
+                name: 'Temperatures',
+                data: [
+                    [1246406400000, 10.4, 17],
+                    [1246492800000, 10.3, 28.6],
+                    [1246579200000, 14.8, 18.4],
+                    [1246665600000, 11.5, 25.8],
+                    [1246752000000, 11.1, 24.4],
+                    [1246838400000, 17.7, 19.6],
+                    [1246924800000, 15.1, 18.1],
+                    [1247011200000, 15.1, 27.2],
+                    [1247097600000, 17, 17.5],
+                    [1247184000000, 12.6, 18.5],
+                    [1247270400000, 12.2, 26],
+                    [1247356800000, 15.9, 22.9],
+                    [1247443200000, 17.1, 18.1],
+                    [1247529600000, 13.3, 24.2],
+                    [1247616000000, 17, 28.1],
+                    [1247702400000, 16.2, 22.6],
+                    [1247788800000, 10.6, 19],
+                    [1247875200000, 11.3, 19.7],
+                    [1247961600000, 14.1, 24.6],
+                    [1248048000000, 14.2, 22.5],
+                    [1248134400000, 14.1, 28.5],
+                    [1248220800000, 14, 27],
+                    [1248307200000, 10.2, 20.6],
+                    [1248393600000, 13.1, 29.9],
+                    [1248480000000, 13.7, 21.1],
+                    [1248566400000, 15, 28.6],
+                    [1248652800000, 12, 17.5],
+                    [1248739200000, 17.8, 24.4],
+                    [1248825600000, 11.7, 25.9],
+                    [1248912000000, 13.6, 25.6],
+                    [1248998400000, 17.3, 22.2],
+                ],
+            },
+        ],
+    } });

package/build/plugins/highcharts/mocks/no-data.d.ts

@@ -0,0 +1,3 @@
+import type { HighchartsWidgetData } from '../types';
+export declare const noData: HighchartsWidgetData;
+export declare const filledData: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/no-data.js

@@ -0,0 +1,69 @@
+const baseData = {
+    config: {
+        hideHolidays: false,
+        normalizeDiv: false,
+        normalizeSub: false,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'arearange',
+        },
+        title: {
+            text: 'Temperature variation by day',
+        },
+        xAxis: {
+            type: 'datetime',
+        },
+        tooltip: {
+            valueSuffix: '°C',
+        },
+    },
+};
+export const noData = Object.assign(Object.assign({}, baseData), { data: {
+        graphs: [
+            {
+                name: 'Temperatures',
+                data: [],
+            },
+        ],
+    } });
+export const filledData = Object.assign(Object.assign({}, baseData), { data: {
+        graphs: [
+            {
+                name: 'Temperatures',
+                data: [
+                    [1246406400000, 10.4, 17],
+                    [1246492800000, 10.3, 28.6],
+                    [1246579200000, 14.8, 18.4],
+                    [1246665600000, 11.5, 25.8],
+                    [1246752000000, 11.1, 24.4],
+                    [1246838400000, 17.7, 19.6],
+                    [1246924800000, 15.1, 18.1],
+                    [1247011200000, 15.1, 27.2],
+                    [1247097600000, 17, 17.5],
+                    [1247184000000, 12.6, 18.5],
+                    [1247270400000, 12.2, 26],
+                    [1247356800000, 15.9, 22.9],
+                    [1247443200000, 17.1, 18.1],
+                    [1247529600000, 13.3, 24.2],
+                    [1247616000000, 17, 28.1],
+                    [1247702400000, 16.2, 22.6],
+                    [1247788800000, 10.6, 19],
+                    [1247875200000, 11.3, 19.7],
+                    [1247961600000, 14.1, 24.6],
+                    [1248048000000, 14.2, 22.5],
+                    [1248134400000, 14.1, 28.5],
+                    [1248220800000, 14, 27],
+                    [1248307200000, 10.2, 20.6],
+                    [1248393600000, 13.1, 29.9],
+                    [1248480000000, 13.7, 21.1],
+                    [1248566400000, 15, 28.6],
+                    [1248652800000, 12, 17.5],
+                    [1248739200000, 17.8, 24.4],
+                    [1248825600000, 11.7, 25.9],
+                    [1248912000000, 13.6, 25.6],
+                    [1248998400000, 17.3, 22.2],
+                ],
+            },
+        ],
+    } });

package/build/plugins/highcharts/mocks/pie-with-totals.d.ts

@@ -0,0 +1,2 @@
+import { HighchartsWidgetData } from '../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/mocks/pie-with-totals.js

@@ -0,0 +1,43 @@
+export const data = {
+    data: {
+        graphs: [
+            {
+                name: 'Number of requests',
+                tooltip: {
+                    chartKitFormatting: true,
+                    chartKitPrecision: 0,
+                },
+                dataLabels: {
+                    format: null,
+                    chartKitFormatting: true,
+                    chartKitPrecision: 0,
+                    chartKitPrefix: '',
+                    chartKitPostfix: '',
+                    chartKitLabelMode: 'absolute',
+                    chartKitFormat: 'number',
+                    chartKitShowRankDelimiter: true,
+                },
+                data: [
+                    { name: 'Furniture', y: 14344, label: 14344 },
+                    { name: 'Domestic chemistry', y: 14244, label: 14244 },
+                    { name: 'Household goods', y: 14181, label: 14181 },
+                ],
+            },
+        ],
+        categories: ['Furniture', 'Domestic chemistry', 'Household goods'],
+        totals: 42769,
+    },
+    config: {
+        showPercentInTooltip: true,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'pie',
+        },
+        plotOptions: {
+            pie: {
+                innerSize: '50%',
+            },
+        },
+    },
+};

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

@@ -8,6 +8,7 @@ declare const HighchartsWidget: React.ForwardRefExoticComponent<{
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"highcharts"> | undefined) => void) | undefined;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"highcharts">) => void) | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
 } & {
     hoistConfigError?: boolean | undefined;

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

@@ -1227,11 +1227,14 @@ export function prepareConfig(data, options, isMobile, holidays) {
                 } }, (chartType === 'pie' &&
                 totals && {
                 render: function () {
+                    var _a;
                     const chart = this;
                     const chartSeries = chart.series[0];
                     const innerWidth = chartSeries === null || chartSeries === void 0 ? void 0 : chartSeries.center[3];
+                    const formatOptions = (_a = chartSeries === null || chartSeries === void 0 ? void 0 : chartSeries.userOptions) === null || _a === void 0 ? void 0 : _a.tooltip;
+                    const value = formatDonutTotals(chartSeries === null || chartSeries === void 0 ? void 0 : chartSeries.total, formatOptions) || totals;
                     if (innerWidth) {
-                        debouncedAdjustDonutFontSize(chart, chartSeries, innerWidth, totals);
+                        debouncedAdjustDonutFontSize(chart, chartSeries, innerWidth, value);
                     }
                 },
             })),

package/build/plugins/highcharts/types/widget.d.ts

@@ -34,6 +34,7 @@ export declare type HighchartsWidgetData = {
     } | {
         graphs: CkHighchartsSeriesOptionsType[];
         categories: string[];
+        totals?: number | string;
     } | {
         graphs: CkHighchartsSeriesOptionsType[];
     }) & {

package/build/plugins/indicator/renderer/IndicatorWidget.d.ts

@@ -9,6 +9,7 @@ declare const IndicatorWidget: React.ForwardRefExoticComponent<{
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"indicator"> | undefined) => void) | undefined;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"indicator">) => void) | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
 } & {
     formatNumber?: (<T = any>(value: number, options?: T | undefined) => string) | undefined;

package/build/plugins/yagr/renderer/YagrWidget.d.ts

@@ -11,6 +11,7 @@ declare const YagrWidget: React.ForwardRefExoticComponent<{
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"yagr"> | undefined) => void) | undefined;
     onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
     onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"yagr">) => void) | undefined;
+    renderError?: import("../../../types").RenderError | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
 } & {} & {
     id: string;

package/build/types/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ChartKitWidget } from './widget';
+import { ChartKitError } from '../libs';
 export type { ChartKitHolidays } from './misc';
 export declare type ChartKitLang = 'ru' | 'en';
 export declare type ChartKitType = keyof ChartKitWidget;
@@ -38,6 +39,7 @@ export declare type ChartKitProps<T extends ChartKitType> = {
      * @param data
      */
     onChartLoad?: (data: ChartKitOnChartLoad<T>) => void;
+    renderError?: RenderError;
     onError?: ChartKitOnError;
 } & {
     [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key];
@@ -46,4 +48,10 @@ export declare type ChartKitPlugin = {
     type: ChartKitType;
     renderer: React.LazyExoticComponent<any>;
 };
+export declare type RenderErrorOpts = {
+    message: string;
+    error: ChartKitError | Error;
+    resetError: () => void;
+};
+export declare type RenderError = (opts: RenderErrorOpts) => React.ReactNode;
 export type { ChartKitWidget };

package/build/utils/getErrorMessage.d.ts

@@ -0,0 +1,2 @@
+import type { ChartKitError } from '../libs';
+export declare function getErrorMessage(error: ChartKitError | Error): string;

package/build/utils/getErrorMessage.js

@@ -0,0 +1,5 @@
+import { i18n } from '../i18n';
+export function getErrorMessage(error) {
+    const code = 'code' in error && error.code;
+    return (error.message || code || i18n('error', 'label_unknown-error')).toString();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",

package/build/components/ErrorView/ErrorView.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { ChartKitError } from '../../libs';
-declare type Props = {
-    error: ChartKitError | Error;
-};
-export declare const ErrorView: ({ error }: Props) => JSX.Element;
-export {};

package/build/components/ErrorView/ErrorView.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { i18n } from '../../i18n';
-export const ErrorView = ({ error }) => {
-    const code = 'code' in error && error.code;
-    const message = error.message || code || i18n('error', 'label_unknown-error');
-    return React.createElement("div", null, message);
-};