Skip to content

Commit b1a0078

Browse files
arsen-afaunovarsen-afaunov
committed
Add shape settings scope tabs
1 parent 6deb542 commit b1a0078

File tree

15 files changed

+646
-221
lines changed

15 files changed

+646
-221
lines changed

‎src/server/modes/charts/plugins/datalens/utils/shape-helpers.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,18 @@ export const mapAndShapeGraph = ({
4848
graph.dashStyle = SHAPES_IN_ORDER[shapeIndex % SHAPES_IN_ORDER.length];
4949
}
5050

51-
if (
52-
shapesConfig &&
53-
shapesConfig.mountedShapesLineWidths &&
54-
title &&
55-
shapesConfig.mountedShapesLineWidths[title]
56-
) {
57-
const lineWidth = shapesConfig.mountedShapesLineWidths?.[title] as number;
51+
// Determine line width: use individual line width if set, otherwise fall back to chart-level width
52+
let lineWidth: number | undefined;
53+
54+
if (title && shapesConfig?.mountedShapesLineWidths?.[title]) {
55+
// Individual line has a specific width set
56+
lineWidth = shapesConfig.mountedShapesLineWidths[title];
57+
} else if (shapesConfig?.chartLineWidth !== undefined) {
58+
// Fall back to chart-level line width
59+
lineWidth = shapesConfig.chartLineWidth;
60+
}
5861

62+
if (lineWidth !== undefined) {
5963
graph.lineWidth = lineWidth;
6064
graph.states = {
6165
hover: {

‎src/shared/constants/qa/wizard.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ export const enum ChartSettingsDialogQA {
197197
}
198198

199199
export const enum DialogShapeSettings {
200+
LineSettingsScopeTab = 'line-settings-scope-tab',
200201
LineWidthSelectControl = 'line-width-select-control',
201202
LineWidthSelectOption = 'line-width-select-option',
202203
}

‎src/shared/types/config/wizard/v15.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,7 @@ export type V15ColorsConfig = {
312312
export type V15ShapesConfig = {
313313
mountedShapes?: Record<string, string>;
314314
mountedShapesLineWidths?: Record<string, number>;
315+
chartLineWidth?: number;
315316
fieldGuid?: string;
316317
};
317318

‎src/shared/types/wizard/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,7 @@ export type Sort = Field & {
511511
export interface ShapesConfig {
512512
mountedShapes?: Record<string, string>;
513513
mountedShapesLineWidths?: Record<string, number>;
514+
chartLineWidth?: number;
514515
fieldGuid?: string;
515516
}
516517

‎src/ui/components/NumberFormatSettings/NumberInput/NumberInput.tsx‎

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,47 @@
11
import React from 'react';
22

3-
import {Button, TextInput} from '@gravity-ui/uikit';
3+
import {Minus, Plus} from '@gravity-ui/icons';
4+
import {Button, Icon, TextInput} from '@gravity-ui/uikit';
45
import block from 'bem-cn-lite';
6+
import type {ValueOf} from 'shared';
57

68
import './NumberInput.scss';
79

10+
const STEP_BUTTON_DIRECTION = {
11+
Plus: '+',
12+
Minus: '-',
13+
} as const;
14+
15+
type StepButtonDirection = ValueOf<typeof STEP_BUTTON_DIRECTION>;
16+
17+
interface StepButtonProps {
18+
direction: StepButtonDirection;
19+
disabled: boolean;
20+
onClick: () => void;
21+
}
22+
23+
const DIRECTION_CONFIG: Record<
24+
StepButtonDirection,
25+
{icon: typeof Plus | typeof Minus; pin: 'brick-round' | 'round-brick'}
26+
> = {
27+
[STEP_BUTTON_DIRECTION.Plus]: {icon: Plus, pin: 'brick-round'},
28+
[STEP_BUTTON_DIRECTION.Minus]: {icon: Minus, pin: 'round-brick'},
29+
};
30+
31+
const b = block('wizard-number-input');
32+
33+
const StepButton: React.FC<StepButtonProps> = ({direction, disabled, onClick}) => {
34+
const {icon, pin} = DIRECTION_CONFIG[direction];
35+
36+
return (
37+
<div className={b('input-button')}>
38+
<Button view="outlined" pin={pin} width="max" disabled={disabled} onClick={onClick}>
39+
<Icon data={icon} />
40+
</Button>
41+
</div>
42+
);
43+
};
44+
845
interface NumberInputProps {
946
value: number;
1047
max?: number;
@@ -13,8 +50,6 @@ interface NumberInputProps {
1350
qa?: string;
1451
}
1552

16-
const b = block('wizard-number-input');
17-
1853
const NumberInput: React.FC<NumberInputProps> = ({
1954
value,
2055
onChange,
@@ -50,7 +85,6 @@ const NumberInput: React.FC<NumberInputProps> = ({
5085
const onBlur = React.useCallback(
5186
(e: React.FocusEvent<HTMLInputElement>) => {
5287
const relatedTarget = e.relatedTarget as HTMLElement | null;
53-
// Skip clampAndCommit if focus moved to +/- buttons
5488
if (relatedTarget?.closest(`.${b('input-button')}`)) {
5589
return;
5690
}
@@ -92,15 +126,11 @@ const NumberInput: React.FC<NumberInputProps> = ({
92126

93127
return (
94128
<div className={b({})}>
95-
<Button
96-
className={b('input-button')}
97-
view="outlined"
98-
pin="round-brick"
129+
<StepButton
130+
direction={STEP_BUTTON_DIRECTION.Minus}
99131
disabled={isMinusDisabled}
100132
onClick={onMinus}
101-
>
102-
-
103-
</Button>
133+
/>
104134
<TextInput
105135
qa={qa}
106136
type="number"
@@ -112,15 +142,11 @@ const NumberInput: React.FC<NumberInputProps> = ({
112142
onKeyDown={onKeyDown}
113143
className={b('text-input')}
114144
/>
115-
<Button
116-
className={b('input-button')}
117-
view="outlined"
118-
pin="brick-round"
145+
<StepButton
146+
direction={STEP_BUTTON_DIRECTION.Plus}
119147
disabled={isPlusDisabled}
120148
onClick={onPlus}
121-
>
122-
+
123-
</Button>
149+
/>
124150
</div>
125151
);
126152
};

‎src/ui/units/wizard/components/Dialogs/DialogShapes/DialogLineWidth/DialogLineWidth.tsx‎

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,74 @@ import React from 'react';
22

33
import {Flex, Text} from '@gravity-ui/uikit';
44
import NumberInput from 'ui/components/NumberFormatSettings/NumberInput/NumberInput';
5-
import {LINE_WIDTH_MAX_VALUE, LINE_WIDTH_MIN_VALUE} from 'ui/units/wizard/constants/shapes';
5+
import {
6+
LINE_WIDTH_AUTO_VALUE,
7+
LINE_WIDTH_MAX_VALUE,
8+
LINE_WIDTH_MIN_VALUE,
9+
} from 'ui/units/wizard/constants/shapes';
610

711
import {LineWidthSelect} from '../../../LineWidthSelect/LineWidthSelect';
812

913
interface DialogLineWidthProps {
10-
value: number;
11-
onChange: (lineWidth: number) => void;
14+
value: string;
15+
onChange: (lineWidth: string) => void;
16+
style?: React.CSSProperties;
17+
allowDefault?: boolean;
1218
}
1319

1420
// TODO: Fix in a separate branch
1521
const I18N_STUB = {
1622
'dialog-line-width-title': 'Толщина линии',
1723
};
1824

19-
export const DialogLineWidth = React.memo(({value, onChange}: DialogLineWidthProps) => {
20-
return (
21-
<Flex direction="column" gap={2}>
22-
<Flex direction="row" alignItems="center" justifyContent="space-between">
23-
<Text variant="body-1">{I18N_STUB['dialog-line-width-title']}</Text>
24-
<LineWidthSelect value={value} onChange={onChange} />
25-
</Flex>
26-
<Flex direction="row" alignItems="center" justifyContent="flex-end">
27-
<NumberInput
28-
value={value}
29-
min={LINE_WIDTH_MIN_VALUE}
30-
max={LINE_WIDTH_MAX_VALUE}
31-
onChange={onChange}
32-
/>
25+
export const DialogLineWidth = React.memo(
26+
({value, onChange, allowDefault, style}: DialogLineWidthProps) => {
27+
const handleNumberInputChange = React.useCallback(
28+
(nextValue: number) => {
29+
return onChange(nextValue.toString());
30+
},
31+
[onChange],
32+
);
33+
34+
const isAutoValue = value === LINE_WIDTH_AUTO_VALUE;
35+
36+
const numberInput = React.useMemo(() => {
37+
if (isAutoValue) {
38+
return null;
39+
}
40+
41+
const valueNumber = Number.parseInt(value, 10);
42+
43+
if (Number.isNaN(valueNumber)) {
44+
return null;
45+
}
46+
47+
return (
48+
<Flex direction="row" alignItems="center" justifyContent="flex-end">
49+
<NumberInput
50+
value={valueNumber}
51+
min={LINE_WIDTH_MIN_VALUE}
52+
max={LINE_WIDTH_MAX_VALUE}
53+
onChange={handleNumberInputChange}
54+
/>
55+
</Flex>
56+
);
57+
}, [handleNumberInputChange, value, isAutoValue]);
58+
59+
return (
60+
<Flex direction="column" gap={2} style={style}>
61+
<Flex direction="row" alignItems="center" justifyContent="space-between">
62+
<Text variant="body-1">{I18N_STUB['dialog-line-width-title']}</Text>
63+
<LineWidthSelect
64+
allowDefault={allowDefault}
65+
value={value}
66+
onChange={onChange}
67+
/>
68+
</Flex>
69+
{numberInput}
3370
</Flex>
34-
</Flex>
35-
);
36-
});
71+
);
72+
},
73+
);
3774

3875
DialogLineWidth.displayName = 'DialogLineWidth';

‎src/ui/units/wizard/components/Dialogs/DialogShapes/DialogShapes.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,17 @@
1515
justify-content: center;
1616
}
1717

18-
& .g-dialog-body {
18+
&_other-shapes .g-dialog-body {
1919
display: flex;
2020
padding: 0;
2121
overflow-y: auto;
2222
height: calc(80vh - 153px);
2323
border-top: 1px solid var(--g-color-line-generic);
2424
border-bottom: 1px solid var(--g-color-line-generic);
2525
}
26+
27+
&_lines-shapes .g-dialog-body {
28+
padding: 0;
29+
border-bottom: 1px solid var(--g-color-line-generic);
30+
}
2631
}

0 commit comments

Comments
 (0)