Skip to content

Commit ce85f47

Browse files
AntoineThebaudAntoineThebaud
authored
[ENHANCEMENT] TimeSeriesChart: Visual: hide useless controls instead of disabling (#345)
* [ENHANCEMENT] TimeSeriesChart: Visual: hide useless controls instead of disabling Signed-off-by: Antoine THEBAUD <[email protected]> * update test accordingly Signed-off-by: Antoine THEBAUD <[email protected]> --------- Signed-off-by: Antoine THEBAUD <[email protected]>
1 parent de13104 commit ce85f47

File tree

2 files changed

+82
-68
lines changed

2 files changed

+82
-68
lines changed

‎timeserieschart/src/VisualOptionsEditor.test.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('VisualOptionsEditor', () => {
2626

2727
it('can update the line width visual option', () => {
2828
const onChange = jest.fn();
29-
renderVisualOptionsEditor({ lineWidth: 3, pointRadius: 2 }, onChange);
29+
renderVisualOptionsEditor({ display: 'line', lineWidth: 3, pointRadius: 2 }, onChange);
3030

3131
expect(screen.getByText(VISUAL_CONFIG.lineWidth.label)).toBeInTheDocument();
3232

@@ -50,6 +50,19 @@ describe('VisualOptionsEditor', () => {
5050

5151
// to move slider and update visual options
5252
fireEvent.mouseDown(sliderInput, { clientX: 220, clientY: 100 });
53-
expect(onChange).toHaveBeenCalledWith({ lineWidth: 1.25, pointRadius: 2.75 });
53+
expect(onChange).toHaveBeenCalledWith({ display: 'line', lineWidth: 1.25, pointRadius: 2.75 });
54+
});
55+
56+
it('hides line-specific controls when display is bar', () => {
57+
renderVisualOptionsEditor({ display: 'bar', lineWidth: 3, pointRadius: 2 });
58+
59+
// Line width control should not be present
60+
expect(screen.queryByText(VISUAL_CONFIG.lineWidth.label)).not.toBeInTheDocument();
61+
62+
// Area opacity control should not be present
63+
expect(screen.queryByText(VISUAL_CONFIG.areaOpacity.label)).not.toBeInTheDocument();
64+
65+
// Connect nulls control should not be present
66+
expect(screen.queryByText(VISUAL_CONFIG.connectNulls.label)).not.toBeInTheDocument();
5467
});
5568
});

‎timeserieschart/src/VisualOptionsEditor.tsx‎

Lines changed: 67 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -59,65 +59,6 @@ export function VisualOptionsEditor({ value, onChange }: VisualOptionsEditorProp
5959

6060
return (
6161
<OptionsEditorGroup title="Visual">
62-
<OptionsEditorControl
63-
label="Display"
64-
control={
65-
<ToggleButtonGroup
66-
color="primary"
67-
exclusive
68-
value={value.display}
69-
onChange={(__, newValue) => {
70-
onChange({
71-
...value,
72-
display: newValue,
73-
});
74-
}}
75-
>
76-
<ToggleButton
77-
value="line"
78-
selected={value.display === undefined || value.display === 'line'}
79-
aria-label="display line series"
80-
>
81-
Line
82-
</ToggleButton>
83-
<ToggleButton value="bar" aria-label="display bar series">
84-
Bar
85-
</ToggleButton>
86-
</ToggleButtonGroup>
87-
}
88-
/>
89-
<OptionsEditorControl
90-
label={VISUAL_CONFIG.lineWidth.label}
91-
control={
92-
<Slider
93-
data-testid={VISUAL_CONFIG.lineWidth.testId}
94-
value={value.lineWidth ?? DEFAULT_LINE_WIDTH}
95-
valueLabelDisplay="auto"
96-
step={VISUAL_CONFIG.lineWidth.step}
97-
marks
98-
min={VISUAL_CONFIG.lineWidth.min}
99-
max={VISUAL_CONFIG.lineWidth.max}
100-
disabled={value.display === 'bar'}
101-
onChange={handleLineWidthChange}
102-
/>
103-
}
104-
/>
105-
<OptionsEditorControl
106-
label={VISUAL_CONFIG.areaOpacity.label}
107-
control={
108-
<Slider
109-
data-testid={VISUAL_CONFIG.areaOpacity.testId}
110-
value={value.areaOpacity ?? DEFAULT_AREA_OPACITY}
111-
valueLabelDisplay="auto"
112-
step={VISUAL_CONFIG.areaOpacity.step}
113-
marks
114-
min={VISUAL_CONFIG.areaOpacity.min}
115-
max={VISUAL_CONFIG.areaOpacity.max}
116-
disabled={value.display === 'bar'}
117-
onChange={handleAreaOpacityChange}
118-
/>
119-
}
120-
/>
12162
<OptionsEditorControl
12263
label={VISUAL_CONFIG.stack.label}
12364
control={
@@ -144,20 +85,80 @@ export function VisualOptionsEditor({ value, onChange }: VisualOptionsEditorProp
14485
}
14586
/>
14687
<OptionsEditorControl
147-
label={VISUAL_CONFIG.connectNulls.label}
88+
label="Display"
14889
control={
149-
<Switch
150-
checked={value.connectNulls ?? DEFAULT_CONNECT_NULLS}
151-
disabled={value.display === 'bar'}
152-
onChange={(e) => {
90+
<ToggleButtonGroup
91+
color="primary"
92+
exclusive
93+
value={value.display}
94+
onChange={(__, newValue) => {
15395
onChange({
15496
...value,
155-
connectNulls: e.target.checked,
97+
display: newValue,
15698
});
15799
}}
158-
/>
100+
>
101+
<ToggleButton
102+
value="line"
103+
selected={value.display === undefined || value.display === 'line'}
104+
aria-label="display line series"
105+
>
106+
Line
107+
</ToggleButton>
108+
<ToggleButton value="bar" aria-label="display bar series">
109+
Bar
110+
</ToggleButton>
111+
</ToggleButtonGroup>
159112
}
160113
/>
114+
{value.display === 'line' && (
115+
<>
116+
<OptionsEditorControl
117+
label={VISUAL_CONFIG.lineWidth.label}
118+
control={
119+
<Slider
120+
data-testid={VISUAL_CONFIG.lineWidth.testId}
121+
value={value.lineWidth ?? DEFAULT_LINE_WIDTH}
122+
valueLabelDisplay="auto"
123+
step={VISUAL_CONFIG.lineWidth.step}
124+
marks
125+
min={VISUAL_CONFIG.lineWidth.min}
126+
max={VISUAL_CONFIG.lineWidth.max}
127+
onChange={handleLineWidthChange}
128+
/>
129+
}
130+
/>
131+
<OptionsEditorControl
132+
label={VISUAL_CONFIG.areaOpacity.label}
133+
control={
134+
<Slider
135+
data-testid={VISUAL_CONFIG.areaOpacity.testId}
136+
value={value.areaOpacity ?? DEFAULT_AREA_OPACITY}
137+
valueLabelDisplay="auto"
138+
step={VISUAL_CONFIG.areaOpacity.step}
139+
marks
140+
min={VISUAL_CONFIG.areaOpacity.min}
141+
max={VISUAL_CONFIG.areaOpacity.max}
142+
onChange={handleAreaOpacityChange}
143+
/>
144+
}
145+
/>
146+
<OptionsEditorControl
147+
label={VISUAL_CONFIG.connectNulls.label}
148+
control={
149+
<Switch
150+
checked={value.connectNulls ?? DEFAULT_CONNECT_NULLS}
151+
onChange={(e) => {
152+
onChange({
153+
...value,
154+
connectNulls: e.target.checked,
155+
});
156+
}}
157+
/>
158+
}
159+
/>
160+
</>
161+
)}
161162
</OptionsEditorGroup>
162163
);
163164
}

0 commit comments

Comments
 (0)