fix(main): reset "No data" error on change data

src/components/ChartKit.tsx

@@ -60,8 +60,21 @@ const ChartKitComponentWithErrorBoundary = React.forwardRef<
     ChartKitRef | undefined,
     ChartKitProps<ChartKitType>
 >(function ChartKitComponentWithErrorBoundary(props, ref) {
+    const resetErrorRef = React.useRef<(() => void) | null>(null);
+    const {data} = props;
+
+    React.useEffect(() => {
+        if (resetErrorRef.current) {
+            resetErrorRef.current();
+        }
+    }, [data]);
+
+    const handleResetError = React.useCallback((resetError) => {
+        resetErrorRef.current = resetError;
+    }, []);
+
     return (
-        <ErrorBoundary onError={props.onError}>
+        <ErrorBoundary onError={props.onError} resetError={handleResetError}>
             <ChartKitComponent instanceRef={ref} {...props} />
         </ErrorBoundary>
     );

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -5,6 +5,7 @@ import {ErrorView} from '../ErrorView/ErrorView';
 
 type Props = {
     onError?: ChartKitOnError;
+    resetError?(resetError: () => void): void;
 };
 
 type State = {
@@ -23,6 +24,10 @@ export class ErrorBoundary extends React.Component<Props, State> {
     componentDidCatch() {
         const {error} = this.state;
 
+        this.props.resetError?.(() => {
+            this.setState({error: undefined});
+        });
+
         if (error) {
             this.props.onError?.({error});
         }

src/plugins/highcharts/__stories__/components/ChartStory.tsx

@@ -11,19 +11,25 @@ const DEFAULT_STORY_HEIGHT = '300px';
 const DEFAULT_STORY_WIDTH = '100%';
 
 export type ChartStoryProps = {
+    data: HighchartsWidgetData;
+
+    visible?: boolean;
     height?: string;
     width?: string;
-
-    data: HighchartsWidgetData;
 };
 export const ChartStory: React.FC<ChartStoryProps> = (props: ChartStoryProps) => {
     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<ChartKitRef>();
 
-    if (!visible) {
+    if (!initRef.current) {
         settings.set({plugins: [HighchartsPlugin], extra: {holidays}});
+        initRef.current = true;
+    }
+
+    if (!visible) {
         return <Button onClick={() => setVisible(true)}>Show chart</Button>;
     }
 

src/plugins/highcharts/__stories__/no-data/no-data.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {Meta, Story} from '@storybook/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,
+} as Meta;
+
+const Template: Story = () => {
+    const [data, setData] = React.useState(noData);
+
+    const handleUpdateData = React.useCallback(() => {
+        setData(filledData);
+    }, []);
+
+    return (
+        <div>
+            <div style={{marginBottom: 12}}>
+                <Button onClick={handleUpdateData}>Add data</Button>
+            </div>
+            <ChartStory data={data} visible={true} />
+        </div>
+    );
+};
+
+export const NoData = Template.bind({});

src/plugins/highcharts/mocks/no-data.ts

@@ -0,0 +1,80 @@
+import type {HighchartsWidgetData} from '../types';
+import _ from 'lodash';
+
+const baseData: Omit<HighchartsWidgetData, 'data'> = {
+    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: HighchartsWidgetData = {
+    ...baseData,
+    data: {
+        graphs: [
+            {
+                name: 'Temperatures',
+                data: [],
+            },
+        ],
+    },
+};
+
+export const filledData: HighchartsWidgetData = {
+    ...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],
+                ],
+            },
+        ],
+    },
+};