Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into nisley-patch-alpha-12

pull/14129/head
Nate Isley 2019-06-13 11:53:53 -07:00 committed by GitHub
parent c6fbfcb18d fe3869d60e
commit 4919d934e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 142 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -4,6 +4,7 @@
1. [14059](https://github.com/influxdata/influxdb/pull/14059): Enable formatting line graph y ticks with binary prefix
1. [14052](https://github.com/influxdata/influxdb/pull/14052): Add x and y column pickers to graph types
1. [14128](https://github.com/influxdata/influxdb/pull/14128): Add option to shade area below line graphs
### Bug Fixes

2
dashboard.go
View File

@ -593,6 +593,7 @@ type LinePlusSingleStatProperties struct {
ShowNoteWhenEmpty bool `json:"showNoteWhenEmpty"`
XColumn string `json:"xColumn"`
YColumn string `json:"yColumn"`
ShadeBelow bool `json:"shadeBelow"`
}
// XYViewProperties represents options for line, bar, step, or stacked view in Chronograf
@ -607,6 +608,7 @@ type XYViewProperties struct {
ShowNoteWhenEmpty bool `json:"showNoteWhenEmpty"`
XColumn string `json:"xColumn"`
YColumn string `json:"yColumn"`
ShadeBelow bool `json:"shadeBelow"`
}
// SingleStatViewProperties represents options for single stat view in Chronograf

9
dashboard_test.go
View File

@ -45,11 +45,12 @@ func TestView_MarshalJSON(t *testing.T) {
"type": "xy",
"colors": null,
"legend": {},
"geom": "",
"geom": "",
"note": "",
"showNoteWhenEmpty": false,
"xColumn": "",
"yColumn": ""
"showNoteWhenEmpty": false,
"xColumn": "",
"yColumn": "",
"shadeBelow": false
}
}
`,

6
ui/package-lock.json generated
View File

@ -1030,9 +1030,9 @@
}
},
"@influxdata/giraffe": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/@influxdata/giraffe/-/giraffe-0.11.1.tgz",
"integrity": "sha512-Jwpfl7shKOHgJ5S/ZAw2my8zlPh20CcfeFzGZdTZ2kdPUX+YxMTj3fOhLw6i0Ksh9qp0JMc/Mm0SUAkRYMz+wA==",
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/@influxdata/giraffe/-/giraffe-0.12.0.tgz",
"integrity": "sha512-sVVABC9+isYSJ9OGX0ZpDXDkOa9cIgQAAdNo6PIo8qdIeTzP6uVGWP/NM6GqjFZtfS4Hqyj1jybKAf4i+QH8yQ==",
"requires": {
"d3-array": "^2.0.3",
"d3-color": "^1.2.3",

2
ui/package.json
View File

@ -143,7 +143,7 @@
"@influxdata/influx": "github:influxdata/influxdb2-js#dev",
"@influxdata/influxdb-templates": "influxdata/influxdb-templates",
"@influxdata/react-custom-scrollbars": "4.3.8",
"@influxdata/giraffe": "0.11.1",
"@influxdata/giraffe": "0.12.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bignumber.js": "^4.0.2",

58
ui/src/shared/components/Checkbox.scss Normal file
View File

@ -0,0 +1,58 @@
$checkbox--size: 14px;
$checkbox--dot-size: 6px;
$checkbox--h-padding: $ix-marg-c;
.fancy-checkbox {
color: $g11-sidewalk;
font-size: 12px;
font-weight: 600;
position: relative;
padding-left: $checkbox--size + $ix-marg-b;
position: relative;
cursor: pointer;
input {
position: absolute;
left: -9999px;
}
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: background-color 0.25s ease;
}
&:before {
left: $checkbox--size / 2;
z-index: 2;
width: $checkbox--size;
height: $checkbox--size;
background-color: $g2-kevlar;
border-radius: 3px;
}
&:after {
left: $checkbox--size / 2;
z-index: 3;
width: $checkbox--dot-size;
height: $checkbox--dot-size;
background-color: $c-hydrogen;
transition: opacity 0.25s ease, transform 0.25s ease;
border-radius: 50%;
opacity: 0;
transform: translate(-50%, -50%) scale(1.8,1.8);
}
&.checked {
&:before {
background-color: $c-sapphire;
}
&:after {
opacity: 1;
transform: translate(-50%, -50%) scale(1,1);
}
}
}

26
ui/src/shared/components/Checkbox.tsx Normal file
View File

@ -0,0 +1,26 @@
// Libraries
import React, {FunctionComponent} from 'react'
interface Props {
label: string
checked: boolean
onSetChecked: (checked: boolean) => void
}
// TODO: Replace this with the Clockface checkbox once available
//
// See https://github.com/influxdata/influxdb/issues/14125.
const Checkbox: FunctionComponent<Props> = ({label, checked, onSetChecked}) => {
return (
<label className={`fancy-checkbox ${checked ? 'checked' : ''}`}>
<input
type="checkbox"
checked={!!checked}
onChange={() => onSetChecked(!checked)}
/>
{label}
</label>
)
}
export default Checkbox

3
ui/src/shared/components/XYContainer.tsx
View File

@ -43,6 +43,7 @@ const XYContainer: FunctionComponent<Props> = ({
colors,
xColumn: storedXColumn,
yColumn: storedYColumn,
shadeBelow,
axes: {
x: {label: xAxisLabel, bounds: xBounds},
y: {
@ -125,6 +126,8 @@ const XYContainer: FunctionComponent<Props> = ({
fill: groupKey,
interpolation,
colors: colorHexes,
shadeBelow: !!shadeBelow,
shadeBelowOpacity: 0.08,
},
],
}

2
ui/src/shared/utils/featureFlag.ts
View File

@ -4,11 +4,13 @@ import {CLOUD} from 'src/shared/constants'
const OSS_FLAGS = {
heatmap: true,
scatter: true,
lineGraphShading: true,
}
const CLOUD_FLAGS = {
heatmap: false, // We need to ensure the API updates have been deployed before enabling
scatter: false, // ditto ^^
lineGraphShading: false, // ditto! ^^
}
export const isFlagEnabled = (flagName: string) => {

1
ui/src/style/chronograf.scss
View File

@ -105,6 +105,7 @@
@import 'src/dataLoaders/components/DataLoadersOverlay.scss';
@import 'src/shared/components/EmptyGraphError.scss';
@import 'src/shared/components/AutoDomainInput.scss';
@import 'src/shared/components/Checkbox.scss';
@import 'src/shared/components/dapperScrollbars/DapperScrollbars.scss';
@import 'src/templates/components/createFromTemplateOverlay/CreateFromTemplateOverlay.scss';
@import 'src/onboarding/components/SigninForm.scss';

11
ui/src/timeMachine/actions/index.ts
View File

@ -71,6 +71,7 @@ export type Action =
| SetXDomainAction
| SetYDomainAction
| SetXAxisLabelAction
| SetShadeBelowAction
interface SetActiveTimeMachineAction {
type: 'SET_ACTIVE_TIME_MACHINE'
@ -486,6 +487,16 @@ export const setYColumn = (yColumn: string): SetYColumnAction => ({
payload: {yColumn},
})
interface SetShadeBelowAction {
type: 'SET_SHADE_BELOW'
payload: {shadeBelow}
}
export const setShadeBelow = (shadeBelow: boolean): SetShadeBelowAction => ({
type: 'SET_SHADE_BELOW',
payload: {shadeBelow},
})
interface SetBinSizeAction {
type: 'SET_BIN_SIZE'
payload: {binSize: number}

17
ui/src/timeMachine/components/view_options/LineOptions.tsx
View File

@ -11,6 +11,8 @@ import ColorSelector from 'src/timeMachine/components/view_options/ColorSelector
import AutoDomainInput from 'src/shared/components/AutoDomainInput'
import YAxisBase from 'src/timeMachine/components/view_options/YAxisBase'
import ColumnSelector from 'src/shared/components/ColumnSelector'
import Checkbox from 'src/shared/components/Checkbox'
import {FeatureFlag} from 'src/shared/utils/featureFlag'
// Actions
import {
@ -23,6 +25,7 @@ import {
setGeom,
setXColumn,
setYColumn,
setShadeBelow,
} from 'src/timeMachine/actions'
// Utils
@ -45,6 +48,7 @@ interface OwnProps {
axes: Axes
geom?: XYViewGeom
colors: Color[]
shadeBelow?: boolean
}
interface StateProps {
@ -60,6 +64,7 @@ interface DispatchProps {
onUpdateYAxisBounds: typeof setYAxisBounds
onUpdateYAxisBase: typeof setYAxisBase
onUpdateColors: typeof setColors
onSetShadeBelow: typeof setShadeBelow
onSetXColumn: typeof setXColumn
onSetYColumn: typeof setYColumn
onSetGeom: typeof setGeom
@ -75,11 +80,13 @@ class LineOptions extends PureComponent<Props> {
},
colors,
geom,
shadeBelow,
onUpdateColors,
onUpdateYAxisLabel,
onUpdateAxisPrefix,
onUpdateAxisSuffix,
onUpdateYAxisBase,
onSetShadeBelow,
onSetGeom,
onSetYColumn,
yColumn,
@ -114,6 +121,15 @@ class LineOptions extends PureComponent<Props> {
colors={colors.filter(c => c.type === 'scale')}
onUpdateColors={onUpdateColors}
/>
<Grid.Column>
<FeatureFlag name="lineGraphShading">
<Checkbox
label="Shade Area Below Lines"
checked={!!shadeBelow}
onSetChecked={onSetShadeBelow}
/>
</FeatureFlag>
</Grid.Column>
<Grid.Column>
<h5 className="view-options--header">Y Axis</h5>
</Grid.Column>
@ -170,6 +186,7 @@ const mdtp: DispatchProps = {
onUpdateYAxisBase: setYAxisBase,
onSetXColumn: setXColumn,
onSetYColumn: setYColumn,
onSetShadeBelow: setShadeBelow,
onUpdateColors: setColors,
onSetGeom: setGeom,
}

6
ui/src/timeMachine/reducers/index.ts
View File

@ -438,6 +438,12 @@ export const timeMachineReducer = (
return setViewProperties(state, {decimalPlaces})
}
case 'SET_SHADE_BELOW': {
const {shadeBelow} = action.payload
return setViewProperties(state, {shadeBelow})
}
case 'SET_BACKGROUND_THRESHOLD_COLORING': {
const viewColors = state.view.properties.colors as Color[]

16
ui/src/types/dashboards.ts
View File

@ -116,12 +116,6 @@ export type NewView<T extends ViewProperties = ViewProperties> = Omit<
'id' | 'links'
>
export interface ViewLinks {
self: string
}
export type DygraphViewProperties = XYView | LinePlusSingleStatView
export type ViewProperties =
| XYView
| LinePlusSingleStatView
@ -173,8 +167,9 @@ export interface XYView {
queries: DashboardQuery[]
shape: ViewShape.ChronografV2
axes: Axes
xColumn: string
yColumn: string
xColumn?: string
yColumn?: string
shadeBelow?: boolean
colors: Color[]
legend: Legend
note: string
@ -190,8 +185,9 @@ export interface LinePlusSingleStatView {
legend: Legend
prefix: string
suffix: string
xColumn: string
yColumn: string
xColumn?: string
yColumn?: string
shadeBelow?: boolean
decimalPlaces: DecimalPlaces
note: string
showNoteWhenEmpty: boolean