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

Remove MIN & MAX type from gauge

pull/10616/head
Alex P 2017-12-08 15:35:03 -08:00
parent 3bb1c577a6
commit 74ed08f987
1 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/src/shared/components/Gauge.js
View File

@ -3,11 +3,7 @@ import _ from 'lodash'
import {GAUGE_SPECS} from 'shared/constants/gaugeSpecs' import {GAUGE_SPECS} from 'shared/constants/gaugeSpecs'
import { import {MIN_THRESHOLDS} from 'src/dashboards/constants/gaugeColors'
COLOR_TYPE_MIN,
COLOR_TYPE_MAX,
MIN_THRESHOLDS,
} from 'src/dashboards/constants/gaugeColors'
class Gauge extends Component { class Gauge extends Component {
constructor(props) { constructor(props) {
@ -47,18 +43,23 @@ class Gauge extends Component {
return return
} }
// Distill out max and min values // Distill out max and min values
const minValue = Number( const sortedColors = _.sortBy(colors, color => Number(color.value))
colors.find(color => color.type === COLOR_TYPE_MIN).value const minValue = Number(sortedColors[0].value)
) const maxValue = Number(sortedColors[sortedColors.length - 1].value)
const maxValue = Number(
colors.find(color => color.type === COLOR_TYPE_MAX).value
)
// The following functions must be called in the specified order // The following functions must be called in the specified order
if (colors.length === MIN_THRESHOLDS) { if (colors.length === MIN_THRESHOLDS) {
this.drawGradientGauge(ctx, centerX, centerY, radius, gradientThickness) this.drawGradientGauge(
sortedColors,
ctx,
centerX,
centerY,
radius,
gradientThickness
)
} else { } else {
this.drawSegmentedGauge( this.drawSegmentedGauge(
sortedColors,
ctx, ctx,
centerX, centerX,
centerY, centerY,
@ -82,10 +83,7 @@ class Gauge extends Component {
this.drawNeedle(ctx, radius, minValue, maxValue) this.drawNeedle(ctx, radius, minValue, maxValue)
} }
drawGradientGauge = (ctx, xc, yc, r, gradientThickness) => { drawGradientGauge = (colors, ctx, xc, yc, r, gradientThickness) => {
const {colors} = this.props
const sortedColors = _.sortBy(colors, color => Number(color.value))
const arcStart = Math.PI * 0.75 const arcStart = Math.PI * 0.75
const arcEnd = arcStart + Math.PI * 1.5 const arcEnd = arcStart + Math.PI * 1.5
@ -96,8 +94,8 @@ class Gauge extends Component {
const yEnd = yc + Math.sin(arcEnd) * r const yEnd = yc + Math.sin(arcEnd) * r
const gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd) const gradient = ctx.createLinearGradient(xStart, yStart, xEnd, yEnd)
gradient.addColorStop(0, sortedColors[0].hex) gradient.addColorStop(0, colors[0].hex)
gradient.addColorStop(1.0, sortedColors[1].hex) gradient.addColorStop(1.0, colors[1].hex)
ctx.beginPath() ctx.beginPath()
ctx.lineWidth = gradientThickness ctx.lineWidth = gradientThickness
@ -107,6 +105,7 @@ class Gauge extends Component {
} }
drawSegmentedGauge = ( drawSegmentedGauge = (
colors,
ctx, ctx,
xc, xc,
yc, yc,
@ -115,18 +114,15 @@ class Gauge extends Component {
maxValue, maxValue,
gradientThickness gradientThickness
) => { ) => {
const {colors} = this.props
const sortedColors = _.sortBy(colors, color => Number(color.value))
const trueValueRange = Math.abs(maxValue - minValue) const trueValueRange = Math.abs(maxValue - minValue)
const totalArcLength = Math.PI * 1.5 const totalArcLength = Math.PI * 1.5
let startingPoint = Math.PI * 0.75 let startingPoint = Math.PI * 0.75
// Iterate through colors, draw arc for each // Iterate through colors, draw arc for each
for (let c = 0; c < sortedColors.length - 1; c++) { for (let c = 0; c < colors.length - 1; c++) {
// Use this color and the next to determine arc length // Use this color and the next to determine arc length
const color = sortedColors[c] const color = colors[c]
const nextColor = sortedColors[c + 1] const nextColor = colors[c + 1]
// adjust values by subtracting minValue from them // adjust values by subtracting minValue from them
const adjustedValue = Number(color.value) - minValue const adjustedValue = Number(color.value) - minValue