Display stacked and step plot graphs

ui/src/shared/components/LayoutRenderer.js

@@ -104,11 +104,21 @@ export const LayoutRenderer = React.createClass({
         );
       }
 
+      const displayOptions = {
+        stepPlot: cell.type === 'line-stepplot',
+        stackedGraph: cell.type === 'line-stacked',
+      }
+
       return (
         <div key={cell.i}>
           <h2 className="hosts-graph-heading">{cell.name}</h2>
           <div className="hosts-graph graph-container">
-            <RefreshingLineGraph queries={qs} autoRefresh={autoRefreshMs} showSingleStat={cell.type === "line-plus-single-stat"} />
+            <RefreshingLineGraph
+              queries={qs}
+              autoRefresh={autoRefreshMs}
+              showSingleStat={cell.type === "line-plus-single-stat"}
+              displayOptions={displayOptions}
+            />
           </div>
         </div>
       );

ui/src/shared/components/LineGraph.js

@@ -63,7 +63,7 @@ export default React.createClass({
   },
 
   render() {
-    const {data, ranges, isFetchingInitially, isRefreshing, isGraphFilled, overrideLineColors, title, underlayCallback, queries, showSingleStat, ruleValues} = this.props;
+    const {data, ranges, isFetchingInitially, isRefreshing, isGraphFilled, overrideLineColors, title, underlayCallback, queries, showSingleStat, displayOptions, ruleValues} = this.props;
     const {labels, timeSeries, dygraphSeries} = this._timeSeries;
 
     // If data for this graph is being fetched for the first time, show a graph-wide spinner.
@@ -75,7 +75,7 @@ export default React.createClass({
       );
     }
 
-    const options = {
+    const options = Object.assign({}, {
       labels,
       connectSeparatedPoints: true,
       labelsKMB: true,
@@ -89,7 +89,7 @@ export default React.createClass({
       underlayCallback,
       ylabel: _.get(queries, ['0', 'label'], ''),
       y2label: _.get(queries, ['1', 'label'], ''),
-    };
+    }, displayOptions);
 
     let roundedValue;
     if (showSingleStat) {