From 9afac5bac622e0dccd8cb55c156c8df777233789 Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Wed, 8 Jan 2020 10:00:02 -0700 Subject: [PATCH 1/5] feat(ui): add the optional suffix and prefix to guage (#15909) --- dashboard.go | 2 + http/swagger.yml | 6 ++ pkger/clone_resource.go | 2 + pkger/models.go | 4 ++ ui/src/shared/components/Gauge.tsx | 4 +- ui/src/shared/components/GaugeChart.tsx | 11 +++- ui/src/shared/utils/view.ts | 2 + ui/src/timeMachine/actions/index.ts | 22 ++++++++ .../components/view_options/Affixes.tsx | 56 ++++++++++++++++++- .../components/view_options/GaugeOptions.tsx | 16 ++++++ ui/src/timeMachine/reducers/index.ts | 32 +++++++++++ 11 files changed, 153 insertions(+), 4 deletions(-) diff --git a/dashboard.go b/dashboard.go index b575bce506..795309aac8 100644 --- a/dashboard.go +++ b/dashboard.go @@ -785,7 +785,9 @@ type GaugeViewProperties struct { Type string `json:"type"` Queries []DashboardQuery `json:"queries"` Prefix string `json:"prefix"` + TickPrefix string `json:"tickPrefix"` Suffix string `json:"suffix"` + TickSuffix string `json:"tickSuffix"` ViewColors []ViewColor `json:"colors"` DecimalPlaces DecimalPlaces `json:"decimalPlaces"` Note string `json:"note"` diff --git a/http/swagger.yml b/http/swagger.yml index 3e3c508102..16f838327c 100644 --- a/http/swagger.yml +++ b/http/swagger.yml @@ -8598,7 +8598,9 @@ components: - note - showNoteWhenEmpty - prefix + - tickPrefix - suffix + - tickSuffix - legend - decimalPlaces properties: @@ -8624,8 +8626,12 @@ components: type: boolean prefix: type: string + tickPrefix: + type: string suffix: type: string + tickSuffix: + type: string legend: $ref: '#/components/schemas/Legend' decimalPlaces: diff --git a/pkger/clone_resource.go b/pkger/clone_resource.go index 37bbc37cd2..aa3373a936 100644 --- a/pkger/clone_resource.go +++ b/pkger/clone_resource.go @@ -208,6 +208,8 @@ func convertCellView(cell influxdb.Cell) chart { case influxdb.GaugeViewProperties: setCommon(chartKindGauge, p.ViewColors, p.DecimalPlaces, p.Queries) setNoteFixes(p.Note, p.ShowNoteWhenEmpty, p.Prefix, p.Suffix) + ch.TickPrefix = p.TickPrefix + ch.TickSuffix = p.TickSuffix case influxdb.HeatmapViewProperties: ch.Kind = chartKindHeatMap ch.Queries = convertQueries(p.Queries) diff --git a/pkger/models.go b/pkger/models.go index 3abd9b19bd..cf4b1c0e85 100644 --- a/pkger/models.go +++ b/pkger/models.go @@ -2169,7 +2169,9 @@ type chart struct { Kind chartKind Name string Prefix string + TickPrefix string Suffix string + TickSuffix string Note string NoteOnEmpty bool DecimalPlaces int @@ -2196,7 +2198,9 @@ func (c chart) properties() influxdb.ViewProperties { Type: influxdb.ViewPropertyTypeGauge, Queries: c.Queries.influxDashQueries(), Prefix: c.Prefix, + TickPrefix: c.TickPrefix, Suffix: c.Suffix, + TickSuffix: c.TickSuffix, ViewColors: c.Colors.influxViewColors(), DecimalPlaces: influxdb.DecimalPlaces{ IsEnforced: c.EnforceDecimals, diff --git a/ui/src/shared/components/Gauge.tsx b/ui/src/shared/components/Gauge.tsx index b6426351e9..634e4120b6 100644 --- a/ui/src/shared/components/Gauge.tsx +++ b/ui/src/shared/components/Gauge.tsx @@ -28,7 +28,9 @@ interface Props { gaugePosition: number colors?: Color[] prefix: string + tickPrefix: string suffix: string + tickSuffix: string decimalPlaces: DecimalPlaces } @@ -340,7 +342,7 @@ class Gauge extends Component { const textContent = formatStatValue(gaugePosition, { decimalPlaces, prefix, - suffix, + suffix }) ctx.fillText(textContent, 0, textY) diff --git a/ui/src/shared/components/GaugeChart.tsx b/ui/src/shared/components/GaugeChart.tsx index 707bf84490..8ae62963ed 100644 --- a/ui/src/shared/components/GaugeChart.tsx +++ b/ui/src/shared/components/GaugeChart.tsx @@ -20,7 +20,14 @@ interface Props { class GaugeChart extends PureComponent { public render() { const {value} = this.props - const {colors, prefix, suffix, decimalPlaces} = this.props.properties + const { + colors, + prefix, + tickPrefix, + suffix, + tickSuffix, + decimalPlaces, + } = this.props.properties return ( @@ -31,7 +38,9 @@ class GaugeChart extends PureComponent { height={height} colors={colors} prefix={prefix} + tickPrefix={tickPrefix} suffix={suffix} + tickSuffix={tickSuffix} gaugePosition={value} decimalPlaces={decimalPlaces} /> diff --git a/ui/src/shared/utils/view.ts b/ui/src/shared/utils/view.ts index ee40a1c1b9..2d8218b4a9 100644 --- a/ui/src/shared/utils/view.ts +++ b/ui/src/shared/utils/view.ts @@ -89,7 +89,9 @@ function defaultGaugeViewProperties() { queries: [defaultViewQuery()], colors: DEFAULT_GAUGE_COLORS as Color[], prefix: '', + tickPrefix:'', suffix: '', + tickSuffix:'', note: '', showNoteWhenEmpty: false, decimalPlaces: { diff --git a/ui/src/timeMachine/actions/index.ts b/ui/src/timeMachine/actions/index.ts index d29676d5da..f485d8a2f8 100644 --- a/ui/src/timeMachine/actions/index.ts +++ b/ui/src/timeMachine/actions/index.ts @@ -68,6 +68,7 @@ export type Action = | SetYAxisScale | SetPrefix | SetSuffix + | SetOptionalSuffix | SetActiveQueryIndexAction | AddQueryAction | RemoveQueryAction @@ -299,6 +300,16 @@ export const setPrefix = (prefix: string): SetPrefix => ({ payload: {prefix}, }) +interface SetTickPrefix { + type: 'SET_TICK_PREFIX' + payload: {tickPrefix: string} +} + +export const setTickPrefix = (tickPrefix: string): SetTickPrefix => ({ + type: 'SET_TICK_PREFIX', + payload: {tickPrefix}, +}) + interface SetSuffix { type: 'SET_SUFFIX' payload: {suffix: string} @@ -309,6 +320,17 @@ export const setSuffix = (suffix: string): SetSuffix => ({ payload: {suffix}, }) +interface SetTickSuffix { + type: 'SET_TICK_SUFFIX' + payload: {tickSuffix: string} +} + +export const setTickSuffix = (tickSuffix: string): SetTickSuffix => ({ + type: 'SET_TICK_SUFFIX', + payload: {tickSuffix}, +}) + + interface SetStaticLegend { type: 'SET_STATIC_LEGEND' payload: {staticLegend: boolean} diff --git a/ui/src/timeMachine/components/view_options/Affixes.tsx b/ui/src/timeMachine/components/view_options/Affixes.tsx index 6be2752d76..c58d095bc1 100644 --- a/ui/src/timeMachine/components/view_options/Affixes.tsx +++ b/ui/src/timeMachine/components/view_options/Affixes.tsx @@ -2,21 +2,35 @@ import React, {PureComponent, ChangeEvent} from 'react' // Components -import {Form, Input, Grid} from '@influxdata/clockface' +import { + Form, + Input, + Grid, + Toggle, + InputToggleType, + InputLabel, + FlexBox, + AlignItems, + ComponentSize, +} from '@influxdata/clockface' // Types import {Columns} from '@influxdata/clockface' interface Props { prefix: string + tickPrefix: string suffix: string + tickSuffix: string onUpdatePrefix: (prefix: string) => void + onUpdateTickPrefix: (tickPrefix: string) => void onUpdateSuffix: (suffix: string) => void + onUpdateTickSuffix: (tickSuffix: string) => void } class Affixes extends PureComponent { public render() { - const {prefix, suffix} = this.props + const {prefix, tickPrefix, suffix, tickSuffix} = this.props return ( <> @@ -38,6 +52,30 @@ class Affixes extends PureComponent { /> + + + + Optional Prefix + + + + + + Optional Suffix + + ) } @@ -53,6 +91,20 @@ class Affixes extends PureComponent { const suffix = e.target.value onUpdateSuffix(suffix) } + private handleUpdateTickSuffix = (e: string): void => { + const {onUpdateTickSuffix} = this.props + console.log(e) + if (e === 'false' || !!!e) { + onUpdateTickSuffix('true') + } else { + onUpdateTickSuffix('false') + } + } + private handleUpdateTickPrefix = (e: string): void => { + const {onUpdateTickPrefix} = this.props + const tickPrefix = e + onUpdateTickPrefix(tickPrefix) + } } export default Affixes diff --git a/ui/src/timeMachine/components/view_options/GaugeOptions.tsx b/ui/src/timeMachine/components/view_options/GaugeOptions.tsx index e1717a1356..bed87ad783 100644 --- a/ui/src/timeMachine/components/view_options/GaugeOptions.tsx +++ b/ui/src/timeMachine/components/view_options/GaugeOptions.tsx @@ -12,7 +12,9 @@ import ThresholdsSettings from 'src/shared/components/ThresholdsSettings' import { setDecimalPlaces, setPrefix, + setTickPrefix, setSuffix, + setTickSuffix, setColors, } from 'src/timeMachine/actions' @@ -26,12 +28,16 @@ interface OwnProps { colors: Color[] decimalPlaces?: DecimalPlaces prefix: string + tickPrefix: string suffix: string + tickSuffix: string } interface DispatchProps { onUpdatePrefix: (prefix: string) => void + onUpdateTickPrefix: (tickPrefix: string) => void onUpdateSuffix: (suffix: string) => void + onUpdateTickSuffix: (tickSuffix: string) => void onUpdateDecimalPlaces: (decimalPlaces: DecimalPlaces) => void onUpdateColors: (colors: Color[]) => void } @@ -42,9 +48,13 @@ class GaugeOptions extends PureComponent { public render() { const { prefix, + tickPrefix, suffix, + tickSuffix, onUpdatePrefix, + onUpdateTickPrefix, onUpdateSuffix, + onUpdateTickSuffix, onUpdateColors, } = this.props @@ -55,9 +65,13 @@ class GaugeOptions extends PureComponent { {this.decimalPlaces} @@ -92,7 +106,9 @@ class GaugeOptions extends PureComponent { const mdtp: DispatchProps = { onUpdatePrefix: setPrefix, + onUpdateTickPrefix: setTickPrefix, onUpdateSuffix: setSuffix, + onUpdateTickSuffix: setTickSuffix, onUpdateDecimalPlaces: setDecimalPlaces, onUpdateColors: setColors, } diff --git a/ui/src/timeMachine/reducers/index.ts b/ui/src/timeMachine/reducers/index.ts index c4fbd37e9b..52910db01f 100644 --- a/ui/src/timeMachine/reducers/index.ts +++ b/ui/src/timeMachine/reducers/index.ts @@ -484,6 +484,22 @@ export const timeMachineReducer = ( } } + case 'SET_TICK_PREFIX': { + const {tickPrefix} = action.payload + + switch (state.view.properties.type) { + case 'gauge': + case 'single-stat': + case 'line-plus-single-stat': + return setViewProperties(state, {tickPrefix}) + case 'check': + case 'xy': + return setYAxis(state, {tickPrefix}) + default: + return state + } + } + case 'SET_SUFFIX': { const {suffix} = action.payload @@ -500,6 +516,22 @@ export const timeMachineReducer = ( } } + case 'SET_TICK_SUFFIX': { + const {tickSuffix} = action.payload + + switch (state.view.properties.type) { + case 'gauge': + case 'single-stat': + case 'line-plus-single-stat': + return setViewProperties(state, {tickSuffix}) + case 'check': + case 'xy': + return setYAxis(state, {tickSuffix}) + default: + return state + } + } + case 'SET_COLORS': { const {colors} = action.payload From e92648426d637bb8689f6a1395a4be2495049744 Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Mon, 13 Jan 2020 12:43:41 -0700 Subject: [PATCH 2/5] feat(ui): add the optional suffix and prefix to guage (#15909) --- ui/src/shared/components/Gauge.tsx | 10 +++++++++- ui/src/shared/utils/formatStatValue.ts | 2 +- .../timeMachine/components/view_options/Affixes.tsx | 11 +++++++---- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/ui/src/shared/components/Gauge.tsx b/ui/src/shared/components/Gauge.tsx index 634e4120b6..2a0b76b655 100644 --- a/ui/src/shared/components/Gauge.tsx +++ b/ui/src/shared/components/Gauge.tsx @@ -281,7 +281,7 @@ class Gauge extends Component { minValue, maxValue ) => { - const {prefix, suffix, decimalPlaces} = this.props + let {tickPrefix, prefix, tickSuffix, suffix, decimalPlaces} = this.props const {degree, lineCount, labelColor, labelFontSize} = GAUGE_SPECS const tickValues = [ @@ -289,6 +289,14 @@ class Gauge extends Component { maxValue, ] + if(tickPrefix === "true"){ + prefix = ""; + } + + if(tickSuffix === "true"){ + suffix = ""; + } + const labels = tickValues.map(tick => formatStatValue(tick, {decimalPlaces, prefix, suffix}) ) diff --git a/ui/src/shared/utils/formatStatValue.ts b/ui/src/shared/utils/formatStatValue.ts index 399fd98a5c..a14b9111a5 100644 --- a/ui/src/shared/utils/formatStatValue.ts +++ b/ui/src/shared/utils/formatStatValue.ts @@ -20,7 +20,7 @@ export const formatStatValue = ( value: number | string = 0, {decimalPlaces, prefix, suffix}: FormatStatValueOptions = {} ): string => { - let localeFormattedValue + let localeFormattedValue = '' if (isNumber(value)) { let digits: number diff --git a/ui/src/timeMachine/components/view_options/Affixes.tsx b/ui/src/timeMachine/components/view_options/Affixes.tsx index c58d095bc1..bf0cad28ee 100644 --- a/ui/src/timeMachine/components/view_options/Affixes.tsx +++ b/ui/src/timeMachine/components/view_options/Affixes.tsx @@ -12,6 +12,7 @@ import { FlexBox, AlignItems, ComponentSize, + JustifyContent } from '@influxdata/clockface' // Types @@ -53,7 +54,7 @@ class Affixes extends PureComponent { - + { } private handleUpdateTickSuffix = (e: string): void => { const {onUpdateTickSuffix} = this.props - console.log(e) if (e === 'false' || !!!e) { onUpdateTickSuffix('true') } else { @@ -102,8 +102,11 @@ class Affixes extends PureComponent { } private handleUpdateTickPrefix = (e: string): void => { const {onUpdateTickPrefix} = this.props - const tickPrefix = e - onUpdateTickPrefix(tickPrefix) + if (e === 'false' || !!!e) { + onUpdateTickPrefix('true') + } else { + onUpdateTickPrefix('false') + } } } From b28376841e1adc5d078a007d77f007b565f47a40 Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Mon, 13 Jan 2020 22:41:18 -0700 Subject: [PATCH 3/5] feat(ui): add the optional suffix and prefix to guage (#15909) --- ui/src/timeMachine/actions/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/timeMachine/actions/index.ts b/ui/src/timeMachine/actions/index.ts index f485d8a2f8..950ac5a271 100644 --- a/ui/src/timeMachine/actions/index.ts +++ b/ui/src/timeMachine/actions/index.ts @@ -68,7 +68,6 @@ export type Action = | SetYAxisScale | SetPrefix | SetSuffix - | SetOptionalSuffix | SetActiveQueryIndexAction | AddQueryAction | RemoveQueryAction From 3fb61e18d14bb8bfce615da11877bf723d66f8e4 Mon Sep 17 00:00:00 2001 From: Zoe Steinkamp Date: Tue, 14 Jan 2020 09:57:54 -0700 Subject: [PATCH 4/5] feat(ui): add the optional suffix and prefix to guage (#15909) --- ui/src/shared/components/Gauge.tsx | 3 ++- ui/src/timeMachine/actions/index.ts | 2 ++ ui/src/timeMachine/components/view_options/Affixes.tsx | 4 ++-- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/ui/src/shared/components/Gauge.tsx b/ui/src/shared/components/Gauge.tsx index 2a0b76b655..2da15149b3 100644 --- a/ui/src/shared/components/Gauge.tsx +++ b/ui/src/shared/components/Gauge.tsx @@ -281,7 +281,8 @@ class Gauge extends Component { minValue, maxValue ) => { - let {tickPrefix, prefix, tickSuffix, suffix, decimalPlaces} = this.props + const {tickPrefix, tickSuffix, decimalPlaces} = this.props + let {prefix, suffix} = this.props const {degree, lineCount, labelColor, labelFontSize} = GAUGE_SPECS const tickValues = [ diff --git a/ui/src/timeMachine/actions/index.ts b/ui/src/timeMachine/actions/index.ts index 950ac5a271..f3f648b335 100644 --- a/ui/src/timeMachine/actions/index.ts +++ b/ui/src/timeMachine/actions/index.ts @@ -67,7 +67,9 @@ export type Action = | SetYAxisBase | SetYAxisScale | SetPrefix + | SetTickPrefix | SetSuffix + | SetTickSuffix | SetActiveQueryIndexAction | AddQueryAction | RemoveQueryAction diff --git a/ui/src/timeMachine/components/view_options/Affixes.tsx b/ui/src/timeMachine/components/view_options/Affixes.tsx index bf0cad28ee..ef62528a60 100644 --- a/ui/src/timeMachine/components/view_options/Affixes.tsx +++ b/ui/src/timeMachine/components/view_options/Affixes.tsx @@ -56,7 +56,7 @@ class Affixes extends PureComponent { { Date: Wed, 15 Jan 2020 16:07:07 -0700 Subject: [PATCH 5/5] feat(ui): add the optional suffix and prefix to guage (#15909) --- http/swagger.yml | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/http/swagger.yml b/http/swagger.yml index 16f838327c..326181516a 100644 --- a/http/swagger.yml +++ b/http/swagger.yml @@ -8590,19 +8590,7 @@ components: type: integer GaugeViewProperties: type: object - required: - - type - - queries - - colors - - shape - - note - - showNoteWhenEmpty - - prefix - - tickPrefix - - suffix - - tickSuffix - - legend - - decimalPlaces + required: [type, queries, colors, shape, note, showNoteWhenEmpty, prefix, tickPrefix, suffix, tickSuffix, legend, decimalPlaces] properties: type: type: string