feat(Queries): chart kit [YTFRONT-4506]

packages/ui/src/ui/pages/query-tracker/QueryResultsVisualization/components/Chart.tsx

@@ -1,38 +1,34 @@
-import React, {useMemo} from 'react';
+import React, {forwardRef, useMemo} from 'react';
 import ChartKit from '../../../../components/YagrChartKit/YagrChartKit';
 import {settings} from '@gravity-ui/chartkit';
 import type {ChartKitRef} from '@gravity-ui/chartkit';
 import {prepareWidgetData} from '../preparers/prepareWidgetData';
 import {useSelector} from 'react-redux';
-import {
-    selectIsPlaceholdersFieldsFilled,
-    selectQueryResultVisualization,
-} from '../../module/queryChart/selectors';
-import type {QueryResult} from '../preparers/types';
+import {selectChartVisualization, selectQueryResult} from '../../module/queryChart/selectors';
 import {EmptyPlaceholdersMessage} from './EmptyPlaceholdersMessage';
 import {D3Plugin} from '@gravity-ui/chartkit/d3';
 
 settings.set({plugins: [...settings.get('plugins'), D3Plugin]});
 
-type LineBasicProps = {
-    result: QueryResult;
-};
+export const BaseChart = forwardRef<ChartKitRef | undefined>(function BaseChartComponent(_, ref) {
+    const result = useSelector(selectQueryResult);
+    const visualization = useSelector(selectChartVisualization);
 
-export const BaseChart = React.forwardRef<ChartKitRef | undefined, LineBasicProps>(
-    function BaseChartComponent({result}, ref) {
-        const visualization = useSelector(selectQueryResultVisualization);
-        const fieldsIsFilled = useSelector(selectIsPlaceholdersFieldsFilled);
+    const widgetData = useMemo(() => {
+        return prepareWidgetData(result, visualization);
+    }, [result, visualization]);
 
-        const widgetData = useMemo(() => {
-            return prepareWidgetData({result, visualization});
-        }, [result, visualization]);
+    const axisKey = useMemo(() => {
+        return (
+            visualization.xField + visualization.config.xAxis.type + visualization.yField.join('')
+        );
+    }, [visualization]);
 
-        if (!fieldsIsFilled) {
-            return <EmptyPlaceholdersMessage />;
-        }
+    if (!visualization.xField || !visualization.yField || !widgetData) {
+        return <EmptyPlaceholdersMessage />;
+    }
 
-        return <ChartKit type="d3" data={widgetData} ref={ref} />;
-    },
-);
+    return <ChartKit type="d3" data={widgetData} ref={ref} key={axisKey} />;
+});
 
 export const Chart = React.memo(BaseChart);

packages/ui/src/ui/pages/query-tracker/QueryResultsVisualization/components/ChartLeftMenu.scss

@@ -0,0 +1,11 @@
+.yt-chart-left-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 200px;
+    overflow-y: auto;
+
+    &__separator {
+        border-bottom: 1px solid var(--g-color-line-generic);
+    }
+}

packages/ui/src/ui/pages/query-tracker/QueryResultsVisualization/components/ChartLeftMenu.tsx

@@ -0,0 +1,62 @@
+import React, {FC, useEffect} from 'react';
+import {Select} from '@gravity-ui/uikit';
+import {useDispatch, useSelector} from 'react-redux';
+import {setVisualizationType} from '../../module/queryChart/queryChartSlice';
+import {selectChartVisualization} from '../../module/queryChart/selectors';
+import './ChartLeftMenu.scss';
+import cn from 'bem-cn-lite';
+import {ChartType} from '../constants';
+import {ConfigWizard, Wizard} from './Wizard';
+import {getQueryDraft} from '../../module/query/selectors';
+import {saveQueryChartConfig} from '../../module/queryChart/actions';
+
+const options: {value: (typeof ChartType)[keyof typeof ChartType]; content: string}[] = (
+    Object.keys(ChartType) as Array<keyof typeof ChartType>
+).map((key) => ({
+    value: ChartType[key],
+    content: `${key} chart`,
+}));
+
+const b = cn('yt-chart-left-menu');
+
+export const ChartLeftMenu: FC = () => {
+    const dispatch = useDispatch();
+    const visualization = useSelector(selectChartVisualization);
+    const {id} = useSelector(getQueryDraft);
+    const {type} = visualization;
+
+    useEffect(() => {
+        if (!id) return;
+
+        dispatch(
+            saveQueryChartConfig({
+                queryId: id,
+                state: visualization,
+            }),
+        );
+    }, [id, visualization, dispatch]);
+
+    const handleChangeVisualization = (val: string[]) => {
+        dispatch(setVisualizationType(val[0] as ChartType));
+    };
+
+    return (
+        <div className={b()}>
+            <Select
+                placeholder="Chart type"
+                value={[type || '']}
+                options={options}
+                onUpdate={handleChangeVisualization}
+                hasClear
+            />
+            {type && (
+                <>
+                    <div className={b('separator')}></div>
+                    <Wizard />
+                    <div className={b('separator')}></div>
+                    <ConfigWizard />
+                </>
+            )}
+        </div>
+    );
+};