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

Merge pull request #16532 from influxdata/zs-optionalsuffix15909 

Zs optionalsuffix15909
pull/16564/head
Zoe Steinkamp 2020-01-16 09:14:13 -07:00 committed by GitHub
parent 06f7c1ea9b 8835f4ea1d
commit cd8eeaaf95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 167 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard.go
View File

@ -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"`

16
http/swagger.yml
View File

@ -8590,17 +8590,7 @@ components:
type: integer
GaugeViewProperties:
type: object
required:
- type
- queries
- colors
- shape
- note
- showNoteWhenEmpty
- prefix
- suffix
- legend
- decimalPlaces
required: [type, queries, colors, shape, note, showNoteWhenEmpty, prefix, tickPrefix, suffix, tickSuffix, legend, decimalPlaces]
properties:
type:
type: string
@ -8624,8 +8614,12 @@ components:
type: boolean
prefix:
type: string
tickPrefix:
type: string
suffix:
type: string
tickSuffix:
type: string
legend:
$ref: '#/components/schemas/Legend'
decimalPlaces:

2
pkger/clone_resource.go
View File

@ -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)

4
pkger/models.go
View File

@ -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,

15
ui/src/shared/components/Gauge.tsx
View File

@ -28,7 +28,9 @@ interface Props {
gaugePosition: number
colors?: Color[]
prefix: string
tickPrefix: string
suffix: string
tickSuffix: string
decimalPlaces: DecimalPlaces
}
@ -279,7 +281,8 @@ class Gauge extends Component<Props> {
minValue,
maxValue
) => {
const {prefix, suffix, decimalPlaces} = this.props
const {tickPrefix, tickSuffix, decimalPlaces} = this.props
let {prefix, suffix} = this.props
const {degree, lineCount, labelColor, labelFontSize} = GAUGE_SPECS
const tickValues = [
@ -287,6 +290,14 @@ class Gauge extends Component<Props> {
maxValue,
]
if(tickPrefix === "true"){
prefix = "";
}
if(tickSuffix === "true"){
suffix = "";
}
const labels = tickValues.map(tick =>
formatStatValue(tick, {decimalPlaces, prefix, suffix})
)
@ -340,7 +351,7 @@ class Gauge extends Component<Props> {
const textContent = formatStatValue(gaugePosition, {
decimalPlaces,
prefix,
suffix,
suffix
})
ctx.fillText(textContent, 0, textY)

11
ui/src/shared/components/GaugeChart.tsx
View File

@ -20,7 +20,14 @@ interface Props {
class GaugeChart extends PureComponent<Props> {
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 (
<AutoSizer>
@ -31,7 +38,9 @@ class GaugeChart extends PureComponent<Props> {
height={height}
colors={colors}
prefix={prefix}
tickPrefix={tickPrefix}
suffix={suffix}
tickSuffix={tickSuffix}
gaugePosition={value}
decimalPlaces={decimalPlaces}
/>

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

@ -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

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

@ -89,7 +89,9 @@ function defaultGaugeViewProperties() {
queries: [defaultViewQuery()],
colors: DEFAULT_GAUGE_COLORS as Color[],
prefix: '',
tickPrefix:'',
suffix: '',
tickSuffix:'',
note: '',
showNoteWhenEmpty: false,
decimalPlaces: {

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

@ -67,7 +67,9 @@ export type Action =
| SetYAxisBase
| SetYAxisScale
| SetPrefix
| SetTickPrefix
| SetSuffix
| SetTickSuffix
| SetActiveQueryIndexAction
| AddQueryAction
| RemoveQueryAction
@ -299,6 +301,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 +321,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}

59
ui/src/timeMachine/components/view_options/Affixes.tsx
View File

@ -2,21 +2,36 @@
import React, {PureComponent, ChangeEvent} from 'react'
// Components
import {Form, Input, Grid} from '@influxdata/clockface'
import {
Form,
Input,
Grid,
Toggle,
InputToggleType,
InputLabel,
FlexBox,
AlignItems,
ComponentSize,
JustifyContent
} 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<Props> {
public render() {
const {prefix, suffix} = this.props
const {prefix, tickPrefix, suffix, tickSuffix} = this.props
return (
<>
@ -38,6 +53,30 @@ class Affixes extends PureComponent<Props> {
/>
</Form.Element>
</Grid.Column>
<Grid.Column widthXS={Columns.Six}>
<FlexBox alignItems={AlignItems.Center} margin={ComponentSize.Small} justifyContent={JustifyContent.SpaceAround}>
<Toggle
id='prefixoptional'
type={InputToggleType.Checkbox}
value={tickPrefix}
onChange={this.handleUpdateTickPrefix}
size={ComponentSize.ExtraSmall}
/>
<InputLabel active={!!tickPrefix}>Optional Prefix</InputLabel>
</FlexBox>
</Grid.Column>
<Grid.Column widthXS={Columns.Six}>
<FlexBox alignItems={AlignItems.Center} margin={ComponentSize.Small}>
<Toggle
id='suffixoptional'
type={InputToggleType.Checkbox}
value={tickSuffix}
onChange={this.handleUpdateTickSuffix}
size={ComponentSize.ExtraSmall}
/>
<InputLabel active={!!tickSuffix}>Optional Suffix</InputLabel>
</FlexBox>
</Grid.Column>
</>
)
}
@ -53,6 +92,22 @@ class Affixes extends PureComponent<Props> {
const suffix = e.target.value
onUpdateSuffix(suffix)
}
private handleUpdateTickSuffix = (e: string): void => {
const {onUpdateTickSuffix} = this.props
if (e === 'false' || !!!e) {
onUpdateTickSuffix('true')
} else {
onUpdateTickSuffix('false')
}
}
private handleUpdateTickPrefix = (e: string): void => {
const {onUpdateTickPrefix} = this.props
if (e === 'false' || !!!e) {
onUpdateTickPrefix('true')
} else {
onUpdateTickPrefix('false')
}
}
}
export default Affixes

16
ui/src/timeMachine/components/view_options/GaugeOptions.tsx
View File

@ -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<Props> {
public render() {
const {
prefix,
tickPrefix,
suffix,
tickSuffix,
onUpdatePrefix,
onUpdateTickPrefix,
onUpdateSuffix,
onUpdateTickSuffix,
onUpdateColors,
} = this.props
@ -55,9 +65,13 @@ class GaugeOptions extends PureComponent<Props> {
</Grid.Column>
<Affixes
prefix={prefix}
tickPrefix={tickPrefix}
suffix={suffix}
tickSuffix={tickSuffix}
onUpdatePrefix={onUpdatePrefix}
onUpdateTickPrefix={onUpdateTickPrefix}
onUpdateSuffix={onUpdateSuffix}
onUpdateTickSuffix={onUpdateTickSuffix}
/>
{this.decimalPlaces}
<Grid.Column>
@ -92,7 +106,9 @@ class GaugeOptions extends PureComponent<Props> {
const mdtp: DispatchProps = {
onUpdatePrefix: setPrefix,
onUpdateTickPrefix: setTickPrefix,
onUpdateSuffix: setSuffix,
onUpdateTickSuffix: setTickSuffix,
onUpdateDecimalPlaces: setDecimalPlaces,
onUpdateColors: setColors,
}

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

@ -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