Add blank chart events and state

src/ui/libs/DatalensChartkit/ChartKit/plugins/BlankChart/renderer/BlankChartWidget.scss

@@ -3,6 +3,7 @@
     flex-direction: column;
     height: 100%;
     width: 100%;
+    outline: none;
 
     &__content {
         height: 100%;

src/ui/libs/DatalensChartkit/ChartKit/plugins/BlankChart/renderer/BlankChartWidget.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import {CHARTKIT_ERROR_CODE, ChartKitError} from '@gravity-ui/chartkit';
 import block from 'bem-cn-lite';
 import debounce from 'lodash/debounce';
+import merge from 'lodash/merge';
+import pick from 'lodash/pick';
 import {Loader} from 'ui/libs/DatalensChartkit/ChartKit/components';
 
 import {ChartQa} from '../../../../../../../shared';
@@ -14,6 +16,8 @@ import './BlankChartWidget.scss';
 
 const b = block('chartkit-blank-chart-widget');
 
+export const chartStorage = new Map<string, any>();
+
 const BlankChartWidget = (props: BlankChartWidgetProps) => {
     const {
         id,
@@ -35,19 +39,62 @@ const BlankChartWidget = (props: BlankChartWidgetProps) => {
         }
     }, []);
 
+    const chartState = React.useRef<any>({});
+
     React.useEffect(() => {
-        if (dimensions && originalData?.render) {
-            const content = originalData.render({...dimensions});
-            if (contentRef.current) {
-                contentRef.current.innerHTML = String(content ?? '');
-
-                const widgetRendering = Performance.getDuration(generatedId);
-                if (onLoad && widgetRendering) {
-                    onLoad({widget: props.data, widgetRendering});
+        chartStorage.set(generatedId, {
+            chartId: generatedId,
+            getState: () => chartState.current,
+            setState: (value: any, options?: {silent: boolean}) => {
+                chartState.current = merge({}, chartState.current, value);
+
+                if (!options?.silent) {
+                    render();
                 }
+            },
+        });
+
+        return () => {
+            chartStorage.delete(generatedId);
+        };
+    }, [generatedId, dimensions]);
+
+    const render = () => {
+        if (!originalData?.render) {
+            return;
+        }
+
+        if (contentRef.current && dimensions) {
+            const context = chartStorage.get(generatedId);
+            const content = originalData.render.call(context, dimensions);
+            contentRef.current.innerHTML = String(content ?? '');
+        }
+    };
+
+    React.useEffect(() => {
+        if (dimensions) {
+            render();
+            const widgetRendering = Performance.getDuration(generatedId);
+            if (onLoad && widgetRendering) {
+                onLoad({widget: props.data, widgetRendering});
             }
         }
-    }, [dimensions, generatedId, onLoad, originalData, props.data]);
+    }, [dimensions, generatedId, onLoad, props.data]);
+
+    const handleClick = React.useCallback((_event) => {
+        if (originalData?.events?.click) {
+            const context = chartStorage.get(generatedId);
+            originalData.events.click.call(context, {});
+        }
+    }, []);
+
+    const handleKeyDown = React.useCallback((event) => {
+        if (originalData?.events?.keydown) {
+            const context = chartStorage.get(generatedId);
+            const eventProps = pick(event, 'which');
+            originalData.events.keydown.call(context, eventProps);
+        }
+    }, []);
 
     const debuncedHandleResize = React.useMemo(() => debounce(handleResize, 100), [handleResize]);
 
@@ -70,7 +117,13 @@ const BlankChartWidget = (props: BlankChartWidgetProps) => {
     }
 
     return (
-        <div className={b()} ref={ref}>
+        <div
+            className={b()}
+            ref={ref}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+            tabIndex={-1}
+        >
             <div data-qa={ChartQa.Chart} className={b('content')} ref={contentRef}>
                 <Loader />
             </div>

src/ui/libs/DatalensChartkit/ChartKit/plugins/BlankChart/types.ts

@@ -11,7 +11,11 @@ export type BlankChartWidgetProps = {
     id: string;
     data: {
         data: {
-            render: (options: WidgetDimensions & {}) => any;
+            render: (options: WidgetDimensions | undefined) => any;
+            events?: {
+                click: (event: any) => void;
+                keydown: (event: any) => void;
+            };
         };
         config: any;
     };

src/ui/libs/DatalensChartkit/modules/data-provider/charts/ui-sandbox.ts

@@ -5,6 +5,7 @@ import merge from 'lodash/merge';
 import pick from 'lodash/pick';
 import set from 'lodash/set';
 import type {InterruptHandler, QuickJSWASMModule} from 'quickjs-emscripten';
+import {chartStorage} from 'ui/libs/DatalensChartkit/ChartKit/plugins/BlankChart/renderer/BlankChartWidget';
 
 import type {ChartKitHtmlItem} from '../../../../../../shared';
 import {WRAPPED_FN_KEY, WRAPPED_HTML_KEY} from '../../../../../../shared';
@@ -211,7 +212,11 @@ async function getUnwrappedFunction(args: {
         }
 
         // prepare function context
-        const fnContext = clearVmProp(this);
+        let fnContext = this;
+
+        if (entryType === 'graph_node') {
+            fnContext = clearVmProp(fnContext);
+        }
 
         // set global api
         const globalApi = {
@@ -221,6 +226,7 @@ async function getUnwrappedFunction(args: {
                 log: (...logArgs: unknown[]) => console.log(...logArgs),
             },
             setTimeout: (handler: TimerHandler, timeout: number) => setTimeout(handler, timeout),
+            clearTimeout: (timeoutId: number) => clearTimeout(timeoutId),
             window: {
                 open: function (url: string, target?: string) {
                     try {
@@ -326,6 +332,20 @@ async function getUnwrappedFunction(args: {
                     },
                 },
             });
+        } else if (entryType === 'blank-chart_node') {
+            const chartId = get(this, 'chartId');
+            const chartContext = chartStorage.get(chartId);
+
+            merge(globalApi, {
+                Chart: {
+                    getState: () => {
+                        return chartContext.getState();
+                    },
+                    setState: (update: any, options?: any) => {
+                        chartContext?.setState(update, options);
+                    },
+                },
+            });
         }
 
         const oneRunTimeLimit = options?.fnExecTimeLimit ?? UI_SANDBOX_FN_TIME_LIMIT;