Merge branch 'master' into minor-theme-improvements

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### UI Improvements
 1. [#1512](https://github.com/influxdata/chronograf/pull/1512): When dashboard time range is changed, reset graphs that are zoomed in
+1. [#1599](https://github.com/influxdata/chronograf/pull/1599): Bar graph option added to dashboard
 
 ## v1.3.2.1 [2017-06-06]
 

server/swagger.json

@@ -4006,7 +4006,8 @@
 									"line",
 									"line-plus-single-stat",
 									"line-stacked",
-									"line-stepplot"
+									"line-stepplot",
+									"bar"
 								],
 								"default": "line"
 							},
@@ -4146,4 +4147,4 @@
 			}
 		}
 	}
-}
+}

ui/src/data_explorer/components/VisView.js

@@ -63,6 +63,7 @@ const VisView = ({
       activeQueryIndex={activeQueryIndex}
       isInDataExplorer={isInDataExplorer}
       showSingleStat={cellType === 'line-plus-single-stat'}
+      isBarGraph={cellType === 'bar'}
       displayOptions={displayOptions}
       editQueryStatus={editQueryStatus}
     />

ui/src/external/dygraph.js

@@ -9,9 +9,9 @@ import Dygraph from 'dygraphs/src-es5/dygraph'
  *       g2 = new Dygraph(...),
  *       ...;
  *   var sync = Dygraph.synchronize(g1, g2, ...);
- *   // charts are now synchronized
+ *   // graphs are now synchronized
  *   sync.detach();
- *   // charts are no longer synchronized
+ *   // graphs are no longer synchronized
  *
  * You can set options using the last parameter, for example:
  *

ui/src/shared/components/Dygraph.js

@@ -23,6 +23,74 @@ const LINE_COLORS = [
   '#a0725b',
 ]
 
+const darkenColor = colorStr => {
+  // Defined in dygraph-utils.js
+  const color = Dygraphs.toRGB_(colorStr)
+  color.r = Math.floor((255 + color.r) / 2)
+  color.g = Math.floor((255 + color.g) / 2)
+  color.b = Math.floor((255 + color.b) / 2)
+  return `rgb(${color.r},${color.g},${color.b})`
+}
+// Bar Graph code below is from http://dygraphs.com/tests/plotters.html
+const multiColumnBarPlotter = e => {
+  // We need to handle all the series simultaneously.
+  if (e.seriesIndex !== 0) {
+    return
+  }
+
+  const g = e.dygraph
+  const ctx = e.drawingContext
+  const sets = e.allSeriesPoints
+  const yBottom = e.dygraph.toDomYCoord(0)
+
+  // Find the minimum separation between x-values.
+  // This determines the bar width.
+  let minSep = Infinity
+  for (let j = 0; j < sets.length; j++) {
+    const points = sets[j]
+    for (let i = 1; i < points.length; i++) {
+      const sep = points[i].canvasx - points[i - 1].canvasx
+      if (sep < minSep) {
+        minSep = sep
+      }
+    }
+  }
+
+  const barWidth = Math.floor(2.0 / 3 * minSep)
+
+  const fillColors = []
+  const strokeColors = g.getColors()
+  for (let i = 0; i < strokeColors.length; i++) {
+    fillColors.push(darkenColor(strokeColors[i]))
+  }
+
+  for (let j = 0; j < sets.length; j++) {
+    ctx.fillStyle = fillColors[j]
+    ctx.strokeStyle = strokeColors[j]
+    for (let i = 0; i < sets[j].length; i++) {
+      const p = sets[j][i]
+      const centerX = p.canvasx
+      const xLeft = sets.length === 1
+        ? centerX - barWidth / 2
+        : centerX - barWidth / 2 * (1 - j / (sets.length - 1))
+
+      ctx.fillRect(
+        xLeft,
+        p.canvasy,
+        barWidth / sets.length,
+        yBottom - p.canvasy
+      )
+
+      ctx.strokeRect(
+        xLeft,
+        p.canvasy,
+        barWidth / sets.length,
+        yBottom - p.canvasy
+      )
+    }
+  }
+}
+
 export default class Dygraph extends Component {
   constructor(props) {
     super(props)
@@ -61,6 +129,7 @@ export default class Dygraph extends Component {
       ruleValues,
       overrideLineColors,
       isGraphFilled,
+      isBarGraph,
       options,
     } = this.props
 
@@ -155,6 +224,10 @@ export default class Dygraph extends Component {
       },
     }
 
+    if (isBarGraph) {
+      defaultOptions.plotter = multiColumnBarPlotter
+    }
+
     this.dygraph = new Dygraphs(graphContainerNode, timeSeries, {
       ...defaultOptions,
       ...options,
@@ -189,7 +262,14 @@ export default class Dygraph extends Component {
   }
 
   componentDidUpdate() {
-    const {labels, ranges, options, dygraphSeries, ruleValues} = this.props
+    const {
+      labels,
+      ranges,
+      options,
+      dygraphSeries,
+      ruleValues,
+      isBarGraph,
+    } = this.props
     const dygraph = this.dygraph
     if (!dygraph) {
       throw new Error(
@@ -217,6 +297,7 @@ export default class Dygraph extends Component {
       stackedGraph: options.stackedGraph,
       underlayCallback: options.underlayCallback,
       series: dygraphSeries,
+      plotter: isBarGraph ? multiColumnBarPlotter : null,
     })
     // part of optional workaround for preventing updateOptions from breaking legend
     // if (this.lastMouseMoveEvent) {
@@ -265,6 +346,7 @@ Dygraph.propTypes = {
   options: shape({}),
   containerStyle: shape({}),
   isGraphFilled: bool,
+  isBarGraph: bool,
   overrideLineColors: array,
   dygraphSeries: shape({}).isRequired,
   ruleValues: shape({

ui/src/shared/components/LayoutRenderer.js

@@ -110,6 +110,7 @@ export const LayoutRenderer = React.createClass({
         timeRange={timeRange}
         autoRefresh={autoRefresh}
         showSingleStat={type === 'line-plus-single-stat'}
+        isBarGraph={type === 'bar'}
         displayOptions={displayOptions}
         synchronizer={synchronizer}
       />

ui/src/shared/components/LineGraph.js

@@ -22,6 +22,7 @@ export default React.createClass({
     isRefreshing: bool,
     underlayCallback: func,
     isGraphFilled: bool,
+    isBarGraph: bool,
     overrideLineColors: array,
     queries: arrayOf(shape({}).isRequired).isRequired,
     showSingleStat: bool,
@@ -80,6 +81,7 @@ export default React.createClass({
       isFetchingInitially,
       isRefreshing,
       isGraphFilled,
+      isBarGraph,
       overrideLineColors,
       title,
       underlayCallback,
@@ -101,25 +103,22 @@ export default React.createClass({
       )
     }
 
-    const options = Object.assign(
+    const options = {
-      {},
+      labels,
-      {
+      connectSeparatedPoints: true,
-        labels,
+      labelsKMB: true,
-        connectSeparatedPoints: true,
+      axisLineColor: '#383846',
-        labelsKMB: true,
+      gridLineColor: '#383846',
-        axisLineColor: '#383846',
+      title,
-        gridLineColor: '#383846',
+      rightGap: 0,
-        title,
+      yRangePad: 10,
-        rightGap: 0,
+      axisLabelWidth: 38,
-        yRangePad: 10,
+      drawAxesAtZero: true,
-        axisLabelWidth: 38,
+      underlayCallback,
-        drawAxesAtZero: true,
+      ylabel: _.get(queries, ['0', 'label'], ''),
-        underlayCallback,
+      y2label: _.get(queries, ['1', 'label'], ''),
-        ylabel: _.get(queries, ['0', 'label'], ''),
+      ...displayOptions,
-        y2label: _.get(queries, ['1', 'label'], ''),
+    }
-      },
-      displayOptions
-    )
 
     let roundedValue
     if (showSingleStat) {
@@ -141,6 +140,7 @@ export default React.createClass({
           containerStyle={{width: '100%', height: '100%'}}
           overrideLineColors={overrideLineColors}
           isGraphFilled={isGraphFilled}
+          isBarGraph={isBarGraph}
           timeSeries={timeSeries}
           labels={labels}
           options={options}

ui/src/shared/data/graphTypes.hson

@@ -4,4 +4,5 @@
   {type: "line-stepplot", menuOption: "Step-Plot"},
   {type: "single-stat", menuOption: "SingleStat"},
   {type: "line-plus-single-stat", menuOption: "Line + Stat"},
+  {type: "bar", menuOption: "Bar"},
 ]