Add Prefix and Suffix to Gauge cells

Doesn’t look great when the user has set both but that’s a separate
issue

ui/src/dashboards/components/GaugeOptions.js

@@ -15,7 +15,10 @@ import {
   MIN_THRESHOLDS,
 } from 'src/dashboards/constants/gaugeColors'
 
-import {updateGaugeColors} from 'src/dashboards/actions/cellEditorOverlay'
+import {
+  updateGaugeColors,
+  updateAxes,
+} from 'src/dashboards/actions/cellEditorOverlay'
 
 class GaugeOptions extends Component {
   handleAddThreshold = () => {
@@ -118,8 +121,22 @@ class GaugeOptions extends Component {
     return allowedToUpdate
   }
 
+  handleUpdatePrefix = e => {
+    const {handleUpdateAxes, axes} = this.props
+    const newAxes = {...axes, y: {...axes.y, prefix: e.target.value}}
+
+    handleUpdateAxes(newAxes)
+  }
+
+  handleUpdateSuffix = e => {
+    const {handleUpdateAxes, axes} = this.props
+    const newAxes = {...axes, y: {...axes.y, suffix: e.target.value}}
+
+    handleUpdateAxes(newAxes)
+  }
+
   render() {
-    const {gaugeColors} = this.props
+    const {gaugeColors, axes: {y: {prefix, suffix}}} = this.props
 
     const disableMaxColor = gaugeColors.length > MIN_THRESHOLDS
     const disableAddThreshold = gaugeColors.length > MAX_THRESHOLDS
@@ -157,6 +174,28 @@ class GaugeOptions extends Component {
               />
             )}
           </div>
+          <div className="single-stat-controls">
+            <div className="form-group col-xs-6">
+              <label>Prefix</label>
+              <input
+                className="form-control input-sm"
+                placeholder="%, MPH, etc."
+                defaultValue={prefix}
+                onChange={this.handleUpdatePrefix}
+                maxLength="5"
+              />
+            </div>
+            <div className="form-group col-xs-6">
+              <label>Suffix</label>
+              <input
+                className="form-control input-sm"
+                placeholder="%, MPH, etc."
+                defaultValue={suffix}
+                onChange={this.handleUpdateSuffix}
+                maxLength="5"
+              />
+            </div>
+          </div>
         </div>
       </FancyScrollbar>
     )
@@ -176,13 +215,17 @@ GaugeOptions.propTypes = {
     }).isRequired
   ),
   handleUpdateGaugeColors: func.isRequired,
+  handleUpdateAxes: func.isRequired,
+  axes: shape({}).isRequired,
 }
 
-const mapStateToProps = ({cellEditorOverlay: {gaugeColors}}) => ({
+const mapStateToProps = ({cellEditorOverlay: {gaugeColors, cell: {axes}}}) => ({
   gaugeColors,
+  axes,
 })
 
 const mapDispatchToProps = dispatch => ({
   handleUpdateGaugeColors: bindActionCreators(updateGaugeColors, dispatch),
+  handleUpdateAxes: bindActionCreators(updateAxes, dispatch),
 })
 export default connect(mapStateToProps, mapDispatchToProps)(GaugeOptions)

ui/src/shared/components/Gauge.js

@@ -226,6 +226,7 @@ class Gauge extends Component {
     minValue,
     maxValue
   ) => {
+    const {prefix, suffix} = this.props
     const {degree, lineCount, labelColor, labelFontSize} = GAUGE_SPECS
 
     const incrementValue = (maxValue - minValue) / lineCount
@@ -258,12 +259,14 @@ class Gauge extends Component {
       if (i > 3) {
         ctx.textAlign = 'left'
       }
+      const labelText = `${prefix}${gaugeValues[i]}${suffix}`
+
       ctx.rotate(startDegree)
       ctx.rotate(i * arcIncrement)
       ctx.translate(labelRadius, 0)
       ctx.rotate(i * -arcIncrement)
       ctx.rotate(-startDegree)
-      ctx.fillText(gaugeValues[i], 0, 0)
+      ctx.fillText(labelText, 0, 0)
       ctx.rotate(startDegree)
       ctx.rotate(i * arcIncrement)
       ctx.translate(-labelRadius, 0)
@@ -273,7 +276,7 @@ class Gauge extends Component {
   }
 
   drawGaugeValue = (ctx, radius, labelValueFontSize) => {
-    const {gaugePosition} = this.props
+    const {gaugePosition, prefix, suffix} = this.props
     const {valueColor} = GAUGE_SPECS
 
     ctx.font = `${labelValueFontSize}px Roboto`
@@ -282,7 +285,8 @@ class Gauge extends Component {
     ctx.textAlign = 'center'
 
     const textY = radius
-    ctx.fillText(gaugePosition.toString(), 0, textY)
+    const textContent = `${prefix}${gaugePosition.toString()}${suffix}`
+    ctx.fillText(textContent, 0, textY)
   }
 
   drawNeedle = (ctx, radius, minValue, maxValue) => {
@@ -335,6 +339,8 @@ Gauge.propTypes = {
       value: string.isRequired,
     }).isRequired
   ).isRequired,
+  prefix: string.isRequired,
+  suffix: string.isRequired,
 }
 
 export default Gauge

ui/src/shared/components/GaugeChart.js

@@ -17,6 +17,8 @@ class GaugeChart extends PureComponent {
       colors,
       resizeCoords,
       resizerTopHeight,
+      prefix,
+      suffix,
     } = this.props
 
     // If data for this graph is being fetched for the first time, show a graph-wide spinner.
@@ -54,6 +56,8 @@ class GaugeChart extends PureComponent {
           height={height}
           colors={colors}
           gaugePosition={roundedValue}
+          prefix={prefix}
+          suffix={suffix}
         />
       </div>
     )
@@ -81,6 +85,8 @@ GaugeChart.propTypes = {
       value: string.isRequired,
     }).isRequired
   ),
+  prefix: string.isRequired,
+  suffix: string.isRequired,
 }
 
 export default GaugeChart

ui/src/shared/components/RefreshingGraph.js

@@ -28,6 +28,9 @@ const RefreshingGraph = ({
   editQueryStatus,
   grabDataForDownload,
 }) => {
+  const prefix = axes.y.prefix || ''
+  const suffix = axes.y.suffix || ''
+
   if (!queries.length) {
     return (
       <div className="graph-empty">
@@ -47,8 +50,8 @@ const RefreshingGraph = ({
         templates={templates}
         autoRefresh={autoRefresh}
         cellHeight={cellHeight}
-        prefix={axes.y.prefix || ''}
-        suffix={axes.y.suffix || ''}
+        prefix={prefix}
+        suffix={suffix}
       />
     )
   }
@@ -64,6 +67,8 @@ const RefreshingGraph = ({
         cellHeight={cellHeight}
         resizerTopHeight={resizerTopHeight}
         resizeCoords={resizeCoords}
+        prefix={prefix}
+        suffix={suffix}
       />
     )
   }