Add chart modeling settings

src/shared/types/menu.ts

@@ -24,4 +24,8 @@ export enum MenuItemsIds {
     SETTINGS = 'settings',
     ALERTS = 'alerts',
     FULLSCREEEN = 'fullscreen',
+    CHART_MODELING = 'modeling',
+    CHART_MODELING_TREND = 'trend',
+    CHART_MODELING_SMOOTHING = 'smoothing',
+    CHART_MODELING_SETTINGS = 'modelingSettings',
 }

src/ui/components/ChartModelingSettings/ChartModelingSettings.scss

@@ -0,0 +1,77 @@
+.chart-modeling-settings {
+    &__container {
+        top: var(--dl-chart-modelling-settings-top, 40px);
+        width: 280px;
+        z-index: 2;
+        background: var(--g-color-base-float);
+        overflow: auto;
+    }
+
+    &__section {
+        border-bottom: 1px solid var(--g-color-line-generic-solid);
+        padding: var(--g-spacing-4);
+    }
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__title {
+        margin-right: var(--g-spacing-2);
+    }
+
+    &__section-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__form-row {
+        padding: var(--g-spacing-5) 0 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-2);
+
+        &_switch {
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+
+    &__shape-and-width-controls {
+        display: flex;
+        gap: var(--g-spacing-2);
+    }
+
+    &__line-width-input {
+        width: 120px;
+    }
+
+    &__shape-select {
+        width: 112px;
+    }
+
+    &__shape-select-icon {
+        display: flex;
+        overflow: hidden;
+    }
+
+    &__widget-name {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-1);
+        padding-top: var(--g-spacing-2);
+    }
+
+    &__control-label {
+        cursor: pointer;
+    }
+
+    &__label-with-hint {
+        display: flex;
+        gap: var(--g-spacing-1);
+    }
+}

src/ui/components/ChartModelingSettings/ChartModelingSettings.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+
+import {Xmark} from '@gravity-ui/icons';
+import {Drawer, DrawerItem} from '@gravity-ui/navigation';
+import {Alert, Button, Icon, Label, Switch, Text} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import {useDispatch, useSelector} from 'react-redux';
+import {DEFAULT_SMOOTHING, DEFAULT_TREND_SETTINGS} from 'shared/constants/chart-modeling';
+import type {DatalensGlobalState} from 'ui/index';
+import {chartModelingActions} from 'ui/store/toolkit/chart-modeling/actions';
+import {getChartModelingState, getEditingWidgetId} from 'ui/store/toolkit/chart-modeling/selectors';
+
+import {EntityIcon} from '../EntityIcon/EntityIcon';
+
+import {SmothSettings} from './components/SmothSettings';
+import {TrendSettings} from './components/TrendSettings';
+import {i18n} from './i18n';
+import {getChartModelingWarning} from './utils';
+
+import './ChartModelingSettings.scss';
+
+const b = block('chart-modeling-settings');
+
+export const ChartModelingSettings = () => {
+    const dispatch = useDispatch();
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const widgetId = useSelector(getEditingWidgetId);
+    const isOpen = Boolean(widgetId);
+    const chartState = useSelector((state: DatalensGlobalState) =>
+        getChartModelingState(state, widgetId),
+    );
+    const widgetName = chartState?.widgetName;
+    const warning = React.useMemo(
+        () => getChartModelingWarning(chartState?.warnings)?.description,
+        [chartState?.warnings],
+    );
+
+    const handleClose = React.useCallback(() => {
+        dispatch(chartModelingActions.closeChartModelingDialog());
+    }, [dispatch]);
+
+    const shouldLinkSeries = Boolean(
+        (chartState?.smoothing?.settings?.linked ?? DEFAULT_SMOOTHING.linked) ||
+            (chartState?.trends?.settings?.linked ?? DEFAULT_TREND_SETTINGS.linked),
+    );
+    const handleLinkSeries = React.useCallback(() => {
+        if (!widgetId) {
+            return;
+        }
+
+        dispatch(
+            chartModelingActions.updateChartSettings({
+                id: widgetId,
+                settings: {
+                    smoothing: {
+                        ...chartState.smoothing,
+                        settings: {
+                            ...chartState.smoothing?.settings,
+                            linked: !shouldLinkSeries,
+                        },
+                    },
+                    trends: {
+                        ...chartState.trends,
+                        settings: {
+                            ...chartState.trends?.settings,
+                            linked: !shouldLinkSeries,
+                        },
+                    },
+                },
+            }),
+        );
+    }, [chartState, dispatch, shouldLinkSeries, widgetId]);
+
+    React.useEffect(() => {
+        return () => {
+            dispatch(chartModelingActions.closeChartModelingDialog());
+        };
+    }, [dispatch]);
+
+    return (
+        <Drawer className={b()} hideVeil={true} keepMounted={true}>
+            <DrawerItem
+                id="item"
+                visible={isOpen}
+                direction="right"
+                className={b('container')}
+                ref={containerRef}
+            >
+                <div className={b('section')}>
+                    <div className={b('header')}>
+                        <div>
+                            <Text className={b('title')} variant="subheader-2">
+                                {i18n('title_modeling')}
+                            </Text>
+                            <Label theme="info" size="xs">
+                                Preview
+                            </Label>
+                        </div>
+                        <Button view="flat" size="m" onClick={handleClose}>
+                            <Icon data={Xmark} />
+                        </Button>
+                    </div>
+                    {widgetName && (
+                        <div className={b('widget-name')}>
+                            <EntityIcon size="m" type={'chart-wizard'} iconSize={12} />
+                            <Text>{widgetName}</Text>
+                        </div>
+                    )}
+                </div>
+                {Boolean(widgetId) && (
+                    <React.Fragment>
+                        {warning && <Alert theme="warning" message={warning} corners="square" />}
+                        <div className={b('section')}>
+                            <SmothSettings chartState={chartState} widgetId={String(widgetId)} />
+                        </div>
+                        <div className={b('section')}>
+                            <TrendSettings chartState={chartState} widgetId={String(widgetId)} />
+                        </div>
+                        <div className={b('section')}>
+                            <div className={b('section-header')}>
+                                <Text variant="subheader-1">
+                                    {i18n('label_additional-settings')}
+                                </Text>
+                            </div>
+                            <div className={b('form-row', {switch: true})}>
+                                <Text className={b('control-label')} onClick={handleLinkSeries}>
+                                    {i18n('label_link-series')}
+                                </Text>
+                                <Switch
+                                    onChange={handleLinkSeries}
+                                    size="l"
+                                    checked={shouldLinkSeries}
+                                ></Switch>
+                            </div>
+                        </div>
+                    </React.Fragment>
+                )}
+            </DrawerItem>
+        </Drawer>
+    );
+};

src/ui/components/ChartModelingSettings/components/ShapeSelect/ShapeSelect.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {Select, type SelectOption} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+import type {LineShapeType} from 'shared';
+import {SHAPES_PALETTE_ORDER} from 'shared';
+import {selectClientAvailableLineShapes} from 'ui/constants/common';
+
+import {i18n} from '../../i18n';
+
+import {getShapedLineIcon} from './utils';
+
+const b = block('chart-modeling-settings');
+
+function getShapeSelectOptions() {
+    const availableLineShapes = selectClientAvailableLineShapes();
+    const values = availableLineShapes.sort(
+        (shape1, shape2) => SHAPES_PALETTE_ORDER[shape1] - SHAPES_PALETTE_ORDER[shape2],
+    );
+
+    const items: SelectOption[] = values.map((v) => ({value: v}));
+    return items;
+}
+
+function renderShapeSelectOption({value, width}: {value: string; width: number}) {
+    if (value === 'auto') {
+        return <React.Fragment>{i18n('label_auto')}</React.Fragment>;
+    }
+
+    return (
+        <div className={b('shape-select-icon')}>
+            {getShapedLineIcon({shape: value as LineShapeType, width, height: 2})}
+        </div>
+    );
+}
+
+export const ShapeSelect = ({
+    value,
+    onChange,
+}: {
+    value: string;
+    onChange: (values: string[]) => void;
+}) => {
+    return (
+        <Select
+            value={[value]}
+            onUpdate={onChange}
+            options={getShapeSelectOptions()}
+            renderOption={({value: item}) => renderShapeSelectOption({value: item, width: 112})}
+            renderSelectedOption={({value: item}) =>
+                renderShapeSelectOption({value: item, width: 80})
+            }
+            className={b('shape-select')}
+        />
+    );
+};

src/ui/components/ChartModelingSettings/components/ShapeSelect/utils.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import {line as lineGenerator} from 'd3';
+import type {LineShapeType} from 'shared';
+
+function getLineDashArray(dashStyle: LineShapeType, strokeWidth = 2) {
+    const arrayValue = dashStyle
+        .toLowerCase()
+        .replace('shortdashdotdot', '3,1,1,1,1,1,')
+        .replace('shortdashdot', '3,1,1,1')
+        .replace('shortdot', '1,1,')
+        .replace('shortdash', '3,1,')
+        .replace('longdash', '8,3,')
+        .replace(/dot/g, '1,3,')
+        .replace('dash', '4,3,')
+        .replace(/,$/, '')
+        .split(',')
+        .map((part) => {
+            return `${parseInt(part, 10) * strokeWidth}`;
+        });
+
+    return arrayValue.join(',').replace(/NaN/g, 'none');
+}
+
+const line = lineGenerator();
+export function getShapedLineIcon({
+    shape,
+    width,
+    height = 2,
+}: {
+    width: number;
+    height: number;
+    shape: LineShapeType;
+}) {
+    const path = line([
+        [0, height / 2],
+        [width, height / 2],
+    ]);
+
+    return (
+        <svg width={width} height={height}>
+            <g>
+                <path
+                    fill="none"
+                    d={path ?? ''}
+                    stroke="currentColor"
+                    strokeWidth={height}
+                    strokeDasharray={getLineDashArray(shape)}
+                ></path>
+            </g>
+        </svg>
+    );
+}