Skip to content

Commit fe3869d

Browse files
chnnchnn
committed
feat(ui): add option to shade area below line graphs
1 parent 90cf07b commit fe3869d

File tree

14 files changed

+142
-18
lines changed

14 files changed

+142
-18
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
### Features
44

55
1. [14059](https://github.com/influxdata/influxdb/pull/14059): Enable formatting line graph y ticks with binary prefix
6+
1. [14128](https://github.com/influxdata/influxdb/pull/14128): Add option to shade area below line graphs
67

78
### Bug Fixes
89

‎dashboard.go

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -593,6 +593,7 @@ type LinePlusSingleStatProperties struct {
593593
ShowNoteWhenEmpty bool `json:"showNoteWhenEmpty"`
594594
XColumn string `json:"xColumn"`
595595
YColumn string `json:"yColumn"`
596+
ShadeBelow bool `json:"shadeBelow"`
596597
}
597598

598599
// XYViewProperties represents options for line, bar, step, or stacked view in Chronograf
@@ -607,6 +608,7 @@ type XYViewProperties struct {
607608
ShowNoteWhenEmpty bool `json:"showNoteWhenEmpty"`
608609
XColumn string `json:"xColumn"`
609610
YColumn string `json:"yColumn"`
611+
ShadeBelow bool `json:"shadeBelow"`
610612
}
611613

612614
// SingleStatViewProperties represents options for single stat view in Chronograf

‎dashboard_test.go

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,12 @@ func TestView_MarshalJSON(t *testing.T) {
4545
"type": "xy",
4646
"colors": null,
4747
"legend": {},
48-
"geom": "",
48+
"geom": "",
4949
"note": "",
50-
"showNoteWhenEmpty": false,
51-
"xColumn": "",
52-
"yColumn": ""
50+
"showNoteWhenEmpty": false,
51+
"xColumn": "",
52+
"yColumn": "",
53+
"shadeBelow": false
5354
}
5455
}
5556
`,

‎ui/package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
"@influxdata/influx": "github:influxdata/influxdb2-js#dev",
144144
"@influxdata/influxdb-templates": "influxdata/influxdb-templates",
145145
"@influxdata/react-custom-scrollbars": "4.3.8",
146-
"@influxdata/giraffe": "0.11.1",
146+
"@influxdata/giraffe": "0.12.0",
147147
"axios": "^0.18.0",
148148
"babel-polyfill": "^6.26.0",
149149
"bignumber.js": "^4.0.2",

‎ui/src/shared/components/Checkbox.scss

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
$checkbox--size: 14px;
2+
$checkbox--dot-size: 6px;
3+
$checkbox--h-padding: $ix-marg-c;
4+
5+
.fancy-checkbox {
6+
color: $g11-sidewalk;
7+
font-size: 12px;
8+
font-weight: 600;
9+
position: relative;
10+
padding-left: $checkbox--size + $ix-marg-b;
11+
position: relative;
12+
cursor: pointer;
13+
14+
input {
15+
position: absolute;
16+
left: -9999px;
17+
}
18+
19+
&:before,
20+
&:after {
21+
content: '';
22+
position: absolute;
23+
top: 50%;
24+
transform: translate(-50%, -50%);
25+
transition: background-color 0.25s ease;
26+
}
27+
28+
&:before {
29+
left: $checkbox--size / 2;
30+
z-index: 2;
31+
width: $checkbox--size;
32+
height: $checkbox--size;
33+
background-color: $g2-kevlar;
34+
border-radius: 3px;
35+
}
36+
37+
&:after {
38+
left: $checkbox--size / 2;
39+
z-index: 3;
40+
width: $checkbox--dot-size;
41+
height: $checkbox--dot-size;
42+
background-color: $c-hydrogen;
43+
transition: opacity 0.25s ease, transform 0.25s ease;
44+
border-radius: 50%;
45+
opacity: 0;
46+
transform: translate(-50%, -50%) scale(1.8,1.8);
47+
}
48+
49+
&.checked {
50+
&:before {
51+
background-color: $c-sapphire;
52+
}
53+
&:after {
54+
opacity: 1;
55+
transform: translate(-50%, -50%) scale(1,1);
56+
}
57+
}
58+
}

‎ui/src/shared/components/Checkbox.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Libraries
2+
import React, {FunctionComponent} from 'react'
3+
4+
interface Props {
5+
label: string
6+
checked: boolean
7+
onSetChecked: (checked: boolean) => void
8+
}
9+
10+
// TODO: Replace this with the Clockface checkbox once available
11+
//
12+
// See https://github.com/influxdata/influxdb/issues/14125.
13+
const Checkbox: FunctionComponent<Props> = ({label, checked, onSetChecked}) => {
14+
return (
15+
<label className={`fancy-checkbox ${checked ? 'checked' : ''}`}>
16+
<input
17+
type="checkbox"
18+
checked={!!checked}
19+
onChange={() => onSetChecked(!checked)}
20+
/>
21+
{label}
22+
</label>
23+
)
24+
}
25+
26+
export default Checkbox

‎ui/src/shared/components/XYContainer.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const XYContainer: FunctionComponent<Props> = ({
4343
colors,
4444
xColumn: storedXColumn,
4545
yColumn: storedYColumn,
46+
shadeBelow,
4647
axes: {
4748
x: {label: xAxisLabel, bounds: xBounds},
4849
y: {
@@ -125,6 +126,8 @@ const XYContainer: FunctionComponent<Props> = ({
125126
fill: groupKey,
126127
interpolation,
127128
colors: colorHexes,
129+
shadeBelow: !!shadeBelow,
130+
shadeBelowOpacity: 0.08,
128131
},
129132
],
130133
}

‎ui/src/shared/utils/featureFlag.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import {CLOUD} from 'src/shared/constants'
44
const OSS_FLAGS = {
55
heatmap: true,
66
scatter: true,
7+
lineGraphShading: true,
78
}
89

910
const CLOUD_FLAGS = {
1011
heatmap: false, // We need to ensure the API updates have been deployed before enabling
1112
scatter: false, // ditto ^^
13+
lineGraphShading: false, // ditto! ^^
1214
}
1315

1416
export const isFlagEnabled = (flagName: string) => {

‎ui/src/style/chronograf.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
@import 'src/dataLoaders/components/DataLoadersOverlay.scss';
106106
@import 'src/shared/components/EmptyGraphError.scss';
107107
@import 'src/shared/components/AutoDomainInput.scss';
108+
@import 'src/shared/components/Checkbox.scss';
108109
@import 'src/shared/components/dapperScrollbars/DapperScrollbars.scss';
109110
@import 'src/templates/components/createFromTemplateOverlay/CreateFromTemplateOverlay.scss';
110111
@import 'src/onboarding/components/SigninForm.scss';

‎ui/src/timeMachine/actions/index.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export type Action =
7171
| SetXDomainAction
7272
| SetYDomainAction
7373
| SetXAxisLabelAction
74+
| SetShadeBelowAction
7475

7576
interface SetActiveTimeMachineAction {
7677
type: 'SET_ACTIVE_TIME_MACHINE'
@@ -486,6 +487,16 @@ export const setYColumn = (yColumn: string): SetYColumnAction => ({
486487
payload: {yColumn},
487488
})
488489

490+
interface SetShadeBelowAction {
491+
type: 'SET_SHADE_BELOW'
492+
payload: {shadeBelow}
493+
}
494+
495+
export const setShadeBelow = (shadeBelow: boolean): SetShadeBelowAction => ({
496+
type: 'SET_SHADE_BELOW',
497+
payload: {shadeBelow},
498+
})
499+
489500
interface SetBinSizeAction {
490501
type: 'SET_BIN_SIZE'
491502
payload: {binSize: number}

‎ui/src/timeMachine/components/view_options/LineOptions.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import ColorSelector from 'src/timeMachine/components/view_options/ColorSelector
1111
import AutoDomainInput from 'src/shared/components/AutoDomainInput'
1212
import YAxisBase from 'src/timeMachine/components/view_options/YAxisBase'
1313
import ColumnSelector from 'src/shared/components/ColumnSelector'
14+
import Checkbox from 'src/shared/components/Checkbox'
15+
import {FeatureFlag} from 'src/shared/utils/featureFlag'
1416

1517
// Actions
1618
import {
@@ -23,6 +25,7 @@ import {
2325
setGeom,
2426
setXColumn,
2527
setYColumn,
28+
setShadeBelow,
2629
} from 'src/timeMachine/actions'
2730

2831
// Utils
@@ -45,6 +48,7 @@ interface OwnProps {
4548
axes: Axes
4649
geom?: XYViewGeom
4750
colors: Color[]
51+
shadeBelow?: boolean
4852
}
4953

5054
interface StateProps {
@@ -60,6 +64,7 @@ interface DispatchProps {
6064
onUpdateYAxisBounds: typeof setYAxisBounds
6165
onUpdateYAxisBase: typeof setYAxisBase
6266
onUpdateColors: typeof setColors
67+
onSetShadeBelow: typeof setShadeBelow
6368
onSetXColumn: typeof setXColumn
6469
onSetYColumn: typeof setYColumn
6570
onSetGeom: typeof setGeom
@@ -75,11 +80,13 @@ class LineOptions extends PureComponent<Props> {
7580
},
7681
colors,
7782
geom,
83+
shadeBelow,
7884
onUpdateColors,
7985
onUpdateYAxisLabel,
8086
onUpdateAxisPrefix,
8187
onUpdateAxisSuffix,
8288
onUpdateYAxisBase,
89+
onSetShadeBelow,
8390
onSetGeom,
8491
onSetYColumn,
8592
yColumn,
@@ -114,6 +121,15 @@ class LineOptions extends PureComponent<Props> {
114121
colors={colors.filter(c => c.type === 'scale')}
115122
onUpdateColors={onUpdateColors}
116123
/>
124+
<Grid.Column>
125+
<FeatureFlag name="lineGraphShading">
126+
<Checkbox
127+
label="Shade Area Below Lines"
128+
checked={!!shadeBelow}
129+
onSetChecked={onSetShadeBelow}
130+
/>
131+
</FeatureFlag>
132+
</Grid.Column>
117133
<Grid.Column>
118134
<h5 className="view-options--header">Y Axis</h5>
119135
</Grid.Column>
@@ -170,6 +186,7 @@ const mdtp: DispatchProps = {
170186
onUpdateYAxisBase: setYAxisBase,
171187
onSetXColumn: setXColumn,
172188
onSetYColumn: setYColumn,
189+
onSetShadeBelow: setShadeBelow,
173190
onUpdateColors: setColors,
174191
onSetGeom: setGeom,
175192
}

‎ui/src/timeMachine/reducers/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -438,6 +438,12 @@ export const timeMachineReducer = (
438438
return setViewProperties(state, {decimalPlaces})
439439
}
440440

441+
case 'SET_SHADE_BELOW': {
442+
const {shadeBelow} = action.payload
443+
444+
return setViewProperties(state, {shadeBelow})
445+
}
446+
441447
case 'SET_BACKGROUND_THRESHOLD_COLORING': {
442448
const viewColors = state.view.properties.colors as Color[]
443449

‎ui/src/types/dashboards.ts

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -116,12 +116,6 @@ export type NewView<T extends ViewProperties = ViewProperties> = Omit<
116116
'id' | 'links'
117117
>
118118

119-
export interface ViewLinks {
120-
self: string
121-
}
122-
123-
export type DygraphViewProperties = XYView | LinePlusSingleStatView
124-
125119
export type ViewProperties =
126120
| XYView
127121
| LinePlusSingleStatView
@@ -173,8 +167,9 @@ export interface XYView {
173167
queries: DashboardQuery[]
174168
shape: ViewShape.ChronografV2
175169
axes: Axes
176-
xColumn: string
177-
yColumn: string
170+
xColumn?: string
171+
yColumn?: string
172+
shadeBelow?: boolean
178173
colors: Color[]
179174
legend: Legend
180175
note: string
@@ -190,8 +185,9 @@ export interface LinePlusSingleStatView {
190185
legend: Legend
191186
prefix: string
192187
suffix: string
193-
xColumn: string
194-
yColumn: string
188+
xColumn?: string
189+
yColumn?: string
190+
shadeBelow?: boolean
195191
decimalPlaces: DecimalPlaces
196192
note: string
197193
showNoteWhenEmpty: boolean

0 commit comments

Comments
 (0)