Skip to content

Commit 8593e51

Browse files
ChitlangeSahasChitlangeSahas
authored
fix(dataExplorer): inconsistent spacing and component usage (#5947)
* fix(dataExplorer): inconsistent spacing and component usage * fix(dataExplorer): lint * fix: single stat, has it's own options file * fix: single stat, because it has it's own options file * fix: band and heatmap * fix: all other remaining map types * chore: prettier * chore: remove unused clockface component * chore: no console * chore: no console * chore: remove import * fix: use CSS selectors * chore: margin style * chore: fix css selector * chore: variable for styling * chore: lint~ * chore: lint one last time! * chore: lint
1 parent 8336d99 commit 8593e51

File tree

16 files changed

+146
-216
lines changed

16 files changed

+146
-216
lines changed

‎src/shared/components/Checkbox.scss‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/shared/components/Checkbox.tsx‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/style/chronograf.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,6 @@
8585
@import 'src/dataLoaders/components/DataLoadersOverlay.scss';
8686
@import 'src/shared/components/EmptyGraphError.scss';
8787
@import 'src/shared/components/AutoDomainInput.scss';
88-
@import 'src/shared/components/Checkbox.scss';
8988
@import 'src/shared/components/dapperScrollbars/DapperScrollbars.scss';
9089
@import 'src/shared/components/search_widget/SearchWidget.scss';
9190
@import 'src/templates/components/CreateFromTemplateOverlay.scss';

‎src/timeMachine/components/ViewOptions.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@
2020
}
2121
}
2222

23+
.view-options-container {
24+
h5:first-child {
25+
margin-top: 0;
26+
}
27+
}
28+
2329
.view-options--header {
2430
@include no-user-select();
2531
font-weight: 500;
@@ -43,7 +49,6 @@ h4.view-options--header {
4349
h5.view-options--header {
4450
font-size: 14px;
4551
border-bottom: $cf-border solid $cf-grey-25;
46-
margin-top: $cf-space-l;
4752
margin-bottom: $cf-space-s;
4853
padding-bottom: $cf-space-3xs;
4954
}

‎src/visualization/components/internal/AdaptiveZoomOption.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
// Libraries
2-
import React, {CSSProperties, FC} from 'react'
2+
import React, {FC} from 'react'
33

44
// Components
55
import {
66
AlignItems,
77
ComponentSize,
88
FlexBox,
99
FlexDirection,
10-
InfluxColors,
1110
InputLabel,
1211
QuestionMarkTooltip,
1312
SlideToggle,
@@ -24,18 +23,15 @@ interface AdaptiveZoomToggleProps {
2423
type: string
2524
}
2625

27-
const getToggleColor = (toggle: boolean): CSSProperties => {
28-
if (toggle) {
29-
return {color: InfluxColors.Grey95}
30-
}
31-
return {color: InfluxColors.Grey65}
32-
}
33-
3426
const adaptiveZoomTooltipStyle = {
3527
maxWidth: '40%',
3628
padding: '2px 18px',
3729
}
3830

31+
const adaptiveZoomContainerStyle = {
32+
marginBottom: '16px',
33+
}
34+
3935
const adaptiveZoomTooltip = (
4036
<div>
4137
<p>
@@ -73,15 +69,14 @@ export const AdaptiveZoomToggle: FC<AdaptiveZoomToggleProps> = ({
7369
stretchToFitWidth={true}
7470
className="adaptive-zoom-toggle"
7571
testID="adaptive-zoom-toggle"
72+
style={adaptiveZoomContainerStyle}
7673
>
7774
<SlideToggle
7875
active={!adaptiveZoomHide}
7976
size={ComponentSize.ExtraSmall}
8077
onChange={handleSetAdaptiveZoom}
8178
/>
82-
<InputLabel style={getToggleColor(adaptiveZoomHide)}>
83-
Adaptive Zoom
84-
</InputLabel>
79+
<InputLabel>Adaptive Zoom</InputLabel>
8580
<QuestionMarkTooltip
8681
diameter={16}
8782
tooltipContents={adaptiveZoomTooltip}

‎src/visualization/components/internal/LegendOptions.tsx‎

Lines changed: 46 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Libraries
2-
import React, {ChangeEvent, CSSProperties, FC} from 'react'
2+
import React, {ChangeEvent, FC} from 'react'
33

44
// Components
55
import {
@@ -10,7 +10,6 @@ import {
1010
FlexBox,
1111
FlexDirection,
1212
Form,
13-
InfluxColors,
1413
InputLabel,
1514
InputToggleType,
1615
RangeSlider,
@@ -55,13 +54,6 @@ interface ColorizeRowsToggleProps {
5554
testID?: string
5655
}
5756

58-
const getToggleColor = (toggle: boolean): CSSProperties => {
59-
if (toggle) {
60-
return {color: InfluxColors.Grey95}
61-
}
62-
return {color: InfluxColors.Grey65}
63-
}
64-
6557
export const OrientationToggle: FC<OrientationToggleProps> = ({
6658
eventName,
6759
graphType,
@@ -88,47 +80,52 @@ export const OrientationToggle: FC<OrientationToggleProps> = ({
8880
className="legend-orientation-toggle"
8981
testID={testID}
9082
>
91-
<InputLabel className="legend-orientation-label">Orientation</InputLabel>
92-
<Toggle
93-
tabIndex={1}
94-
value="horizontal"
95-
className="legend-orientation--horizontal"
96-
id={`${parentName}-orientation--horizontal`}
97-
name={`${parentName}-orientation--horizontal`}
98-
checked={legendOrientation === LEGEND_ORIENTATION_THRESHOLD_HORIZONTAL}
99-
onChange={setOrientation}
100-
type={InputToggleType.Radio}
101-
size={ComponentSize.ExtraSmall}
102-
color={ComponentColor.Primary}
103-
appearance={Appearance.Outline}
104-
>
105-
<InputLabel
106-
active={legendOrientation === LEGEND_ORIENTATION_THRESHOLD_HORIZONTAL}
107-
htmlFor={`${parentName}-orientation--horizontal`}
83+
<Form.Element label="Orientation">
84+
<Toggle
85+
tabIndex={1}
86+
value="horizontal"
87+
className="legend-orientation--horizontal"
88+
id={`${parentName}-orientation--horizontal`}
89+
name={`${parentName}-orientation--horizontal`}
90+
checked={
91+
legendOrientation === LEGEND_ORIENTATION_THRESHOLD_HORIZONTAL
92+
}
93+
onChange={setOrientation}
94+
type={InputToggleType.Radio}
95+
size={ComponentSize.ExtraSmall}
96+
color={ComponentColor.Primary}
97+
appearance={Appearance.Outline}
10898
>
109-
Horizontal
110-
</InputLabel>
111-
</Toggle>
112-
<Toggle
113-
tabIndex={2}
114-
value="vertical"
115-
className="legend-orientation--vertical"
116-
id={`${parentName}-orientation--vertical`}
117-
name={`${parentName}-orientation--vertical`}
118-
checked={legendOrientation <= 0}
119-
onChange={setOrientation}
120-
type={InputToggleType.Radio}
121-
size={ComponentSize.ExtraSmall}
122-
color={ComponentColor.Primary}
123-
appearance={Appearance.Outline}
124-
>
125-
<InputLabel
126-
active={legendOrientation <= 0}
127-
htmlFor={`${parentName}-orientation--vertical`}
99+
<InputLabel
100+
active={
101+
legendOrientation === LEGEND_ORIENTATION_THRESHOLD_HORIZONTAL
102+
}
103+
htmlFor={`${parentName}-orientation--horizontal`}
104+
>
105+
Horizontal
106+
</InputLabel>
107+
</Toggle>
108+
<Toggle
109+
tabIndex={2}
110+
value="vertical"
111+
className="legend-orientation--vertical"
112+
id={`${parentName}-orientation--vertical`}
113+
name={`${parentName}-orientation--vertical`}
114+
checked={legendOrientation <= 0}
115+
onChange={setOrientation}
116+
type={InputToggleType.Radio}
117+
size={ComponentSize.ExtraSmall}
118+
color={ComponentColor.Primary}
119+
appearance={Appearance.Outline}
128120
>
129-
Vertical
130-
</InputLabel>
131-
</Toggle>
121+
<InputLabel
122+
active={legendOrientation <= 0}
123+
htmlFor={`${parentName}-orientation--vertical`}
124+
>
125+
Vertical
126+
</InputLabel>
127+
</Toggle>
128+
</Form.Element>
132129
</FlexBox>
133130
)
134131
}
@@ -186,9 +183,7 @@ export const ColorizeRowsToggle: FC<ColorizeRowsToggleProps> = ({
186183
size={ComponentSize.ExtraSmall}
187184
onChange={handleSetColorization}
188185
/>
189-
<InputLabel style={getToggleColor(legendColorizeRows)}>
190-
Colorize Rows
191-
</InputLabel>
186+
<InputLabel>Colorize Rows</InputLabel>
192187
</FlexBox>
193188
)
194189
}

‎src/visualization/components/internal/StaticLegend.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,9 @@
77
}
88

99
.latest-y-axis {
10-
margin-top: $cf-space-s;
1110
margin-bottom: $cf-space-2xs;
1211
}
1312

14-
.latest-x-axis,
1513
.static-legend-height-slider {
1614
margin-bottom: $cf-space-s;
1715
}

‎src/visualization/components/internal/StaticLegend.tsx‎

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -244,41 +244,46 @@ const StaticLegend: FC<Props> = ({properties, update}) => {
244244
handleSetColorization={handleSetColorization}
245245
testID="static-legend-colorize-rows-toggle"
246246
/>
247-
<InputLabel className="latest-axis-label">
248-
Displayed Value
249-
</InputLabel>
250-
<Toggle
251-
tabIndex={1}
252-
value="y"
253-
id="latest-y-axis"
254-
className="latest-y-axis"
255-
name="valueAxis"
256-
checked={valueAxis !== 'x'}
257-
onChange={handleSetValueAxis}
258-
type={InputToggleType.Radio}
259-
size={ComponentSize.ExtraSmall}
260-
appearance={Appearance.Outline}
261-
>
262-
<InputLabel active={valueAxis !== 'x'} htmlFor="latest-y-axis">
263-
Latest Y Axis
264-
</InputLabel>
265-
</Toggle>
266-
<Toggle
267-
tabIndex={2}
268-
value="x"
269-
id="latest-x-axis"
270-
className="latest-x-axis"
271-
name="valueAxis"
272-
checked={valueAxis === 'x'}
273-
onChange={handleSetValueAxis}
274-
type={InputToggleType.Radio}
275-
size={ComponentSize.ExtraSmall}
276-
appearance={Appearance.Outline}
277-
>
278-
<InputLabel active={valueAxis === 'x'} htmlFor="latest-x-axis">
279-
Latest X Axis
280-
</InputLabel>
281-
</Toggle>
247+
<Form.Element label="Displayed Value">
248+
<Toggle
249+
tabIndex={1}
250+
value="y"
251+
id="latest-y-axis"
252+
className="latest-y-axis"
253+
name="valueAxis"
254+
checked={valueAxis !== 'x'}
255+
onChange={handleSetValueAxis}
256+
type={InputToggleType.Radio}
257+
size={ComponentSize.ExtraSmall}
258+
appearance={Appearance.Outline}
259+
>
260+
<InputLabel
261+
active={valueAxis !== 'x'}
262+
htmlFor="latest-y-axis"
263+
>
264+
Latest Y Axis
265+
</InputLabel>
266+
</Toggle>
267+
<Toggle
268+
tabIndex={2}
269+
value="x"
270+
id="latest-x-axis"
271+
className="latest-x-axis"
272+
name="valueAxis"
273+
checked={valueAxis === 'x'}
274+
onChange={handleSetValueAxis}
275+
type={InputToggleType.Radio}
276+
size={ComponentSize.ExtraSmall}
277+
appearance={Appearance.Outline}
278+
>
279+
<InputLabel
280+
active={valueAxis === 'x'}
281+
htmlFor="latest-x-axis"
282+
>
283+
Latest X Axis
284+
</InputLabel>
285+
</Toggle>
286+
</Form.Element>
282287
<Form.Element
283288
className="static-legend-height-slider"
284289
label={convertHeightRatioToPercentage(heightRatio)}

0 commit comments

Comments
 (0)