feat(ui): add positioning option to line graphs

dashboard.go

@@ -624,6 +624,7 @@ type LinePlusSingleStatProperties struct {
 	XColumn           string           `json:"xColumn"`
 	YColumn           string           `json:"yColumn"`
 	ShadeBelow        bool             `json:"shadeBelow"`
+	Position          string           `json:"position"`
 }
 
 // XYViewProperties represents options for line, bar, step, or stacked view in Chronograf
@@ -639,6 +640,7 @@ type XYViewProperties struct {
 	XColumn           string           `json:"xColumn"`
 	YColumn           string           `json:"yColumn"`
 	ShadeBelow        bool             `json:"shadeBelow"`
+	Position          string           `json:"position"`
 }
 
 // CheckViewProperties represents options for a view representing a check

dashboard_test.go

@@ -50,7 +50,8 @@ func TestView_MarshalJSON(t *testing.T) {
     "showNoteWhenEmpty": false,
     "xColumn": "",
     "yColumn": "",
-    "shadeBelow": false
+    "shadeBelow": false,
+    "position": ""
   }
 }
 `,

http/swagger.yml

@@ -7975,6 +7975,7 @@ components:
         - legend
         - note
         - showNoteWhenEmpty
+        - position
       properties:
         type:
           type: string
@@ -8006,6 +8007,9 @@ components:
           type: string
         shadeBelow:
           type: boolean
+        position:
+          type: string
+          enum: [overlaid, stacked]
         geom:
           $ref: '#/components/schemas/XYGeom'
     XYGeom:
@@ -8025,6 +8029,7 @@ components:
         - prefix
         - suffix
         - decimalPlaces
+        - position
       properties:
         type:
           type: string
@@ -8056,6 +8061,9 @@ components:
           type: string
         shadeBelow:
           type: boolean
+        position:
+          type: string
+          enum: [overlaid, stacked]
         prefix:
           type: string
         suffix:

ui/mocks/dummyData.ts

@@ -1010,6 +1010,7 @@ export const viewProperties: ViewProperties = {
   xColumn: '_time',
   yColumn: '_value',
   shadeBelow: true,
+  position: 'overlaid',
 }
 
 export const numericColumnData: NumericColumnData = [

ui/package.json

@@ -129,7 +129,7 @@
   "dependencies": {
     "@influxdata/clockface": "1.0.6",
     "@influxdata/flux-parser": "^0.3.0",
-    "@influxdata/giraffe": "0.16.5",
+    "@influxdata/giraffe": "0.16.8",
     "@influxdata/influx": "0.5.5",
     "@influxdata/influxdb-templates": "0.9.0",
     "@influxdata/react-custom-scrollbars": "4.3.8",

ui/src/shared/components/ViewSwitcher.tsx

@@ -101,6 +101,7 @@ const ViewSwitcher: FunctionComponent<Props> = ({
         colors: properties.colors.filter(c => c.type === 'scale'),
         type: 'xy' as 'xy',
         geom: 'line' as 'line',
+        position: 'overlaid' as 'overlaid',
       } as XYViewProperties
 
       const singleStatProperties = {

ui/src/shared/components/XYPlot.tsx

@@ -66,6 +66,7 @@ const XYPlot: FunctionComponent<Props> = ({
         base: yTickBase,
       },
     },
+    position,
   },
 }) => {
   const storedXDomain = useMemo(() => parseBounds(xBounds), [xBounds])
@@ -149,6 +150,7 @@ const XYPlot: FunctionComponent<Props> = ({
         y: yColumn,
         fill: groupKey,
         interpolation,
+        position,
         colors: colorHexes,
         shadeBelow: !!shadeBelow,
         shadeBelowOpacity: 0.08,

ui/src/shared/utils/mocks/resourceToTemplate.ts

@@ -72,6 +72,7 @@ export const myView: View = {
     showNoteWhenEmpty: false,
     xColumn: null,
     yColumn: null,
+    position: 'overlaid',
   },
 }
 

ui/src/shared/utils/resourceToTemplate.test.ts

@@ -348,6 +348,7 @@ describe('resourceToTemplate', () => {
                   showNoteWhenEmpty: false,
                   xColumn: null,
                   yColumn: null,
+                  position: 'overlaid',
                 },
               },
             },

ui/src/shared/utils/view.ts

@@ -124,6 +124,7 @@ const NEW_VIEW_CREATORS = {
       geom: 'line',
       xColumn: null,
       yColumn: null,
+      position: 'overlaid',
     },
   }),
   histogram: (): NewView<HistogramViewProperties> => ({
@@ -192,6 +193,7 @@ const NEW_VIEW_CREATORS = {
       shape: 'chronograf-v2',
       xColumn: null,
       yColumn: null,
+      position: 'overlaid',
     },
   }),
   table: (): NewView<TableViewProperties> => ({

ui/src/timeMachine/actions/index.ts

@@ -32,7 +32,7 @@ import {
   GetState,
 } from 'src/types'
 import {Color} from 'src/types/colors'
-import {HistogramPosition} from '@influxdata/giraffe'
+import {HistogramPosition, LinePosition} from '@influxdata/giraffe'
 import {RemoteDataState} from '@influxdata/clockface'
 import {createView} from 'src/shared/utils/view'
 import {setValues} from 'src/variables/actions'
@@ -83,6 +83,7 @@ export type Action =
   | SetSymbolColumnsAction
   | SetBinCountAction
   | SetHistogramPositionAction
+  | ReturnType<typeof setLinePosition>
   | SetXDomainAction
   | SetYDomainAction
   | SetXAxisLabelAction
@@ -603,6 +604,11 @@ export const setHistogramPosition = (
   payload: {position},
 })
 
+export const setLinePosition = (position: LinePosition) => ({
+  type: 'SET_LINE_POSITION' as 'SET_LINE_POSITION',
+  payload: {position},
+})
+
 interface SetXDomainAction {
   type: 'SET_VIEW_X_DOMAIN'
   payload: {xDomain: [number, number]}

ui/src/timeMachine/components/view_options/LineOptions.tsx

@@ -1,9 +1,10 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
+import {capitalize} from 'lodash'
 
 // Components
-import {Grid} from '@influxdata/clockface'
+import {Grid, Form, Dropdown} from '@influxdata/clockface'
 import Geom from 'src/timeMachine/components/view_options/Geom'
 import YAxisTitle from 'src/timeMachine/components/view_options/YAxisTitle'
 import AxisAffixes from 'src/timeMachine/components/view_options/AxisAffixes'
@@ -25,6 +26,7 @@ import {
   setXColumn,
   setYColumn,
   setShadeBelow,
+  setLinePosition,
 } from 'src/timeMachine/actions'
 
 // Utils
@@ -38,13 +40,15 @@ import {
 // Types
 import {ViewType} from 'src/types'
 import {AppState, XYGeom, Axes, Color} from 'src/types'
+import {LinePosition} from '@influxdata/giraffe'
 
 interface OwnProps {
   type: ViewType
   axes: Axes
   geom?: XYGeom
   colors: Color[]
   shadeBelow?: boolean
+  position: LinePosition
 }
 
 interface StateProps {
@@ -64,6 +68,7 @@ interface DispatchProps {
   onSetXColumn: typeof setXColumn
   onSetYColumn: typeof setYColumn
   onSetGeom: typeof setGeom
+  onSetPosition: typeof setLinePosition
 }
 
 type Props = OwnProps & DispatchProps & StateProps
@@ -77,6 +82,8 @@ class LineOptions extends PureComponent<Props> {
       colors,
       geom,
       shadeBelow,
+      position,
+      onSetPosition,
       onUpdateColors,
       onUpdateYAxisLabel,
       onUpdateAxisPrefix,
@@ -140,6 +147,35 @@ class LineOptions extends PureComponent<Props> {
             onSetDomain={this.handleSetYDomain}
             label="Y Axis Domain"
           />
+          <Form.Element label="Positioning">
+            <Dropdown
+              button={(active, onClick) => (
+                <Dropdown.Button active={active} onClick={onClick}>
+                  {capitalize(position)}
+                </Dropdown.Button>
+              )}
+              menu={onCollapse => (
+                <Dropdown.Menu onCollapse={onCollapse}>
+                  <Dropdown.Item
+                    id="overlaid"
+                    value="overlaid"
+                    onClick={onSetPosition}
+                    selected={position === 'overlaid'}
+                  >
+                    Overlaid
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    id="stacked"
+                    value="stacked"
+                    onClick={onSetPosition}
+                    selected={position === 'stacked'}
+                  >
+                    Stacked
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              )}
+            />
+          </Form.Element>
         </Grid.Column>
       </>
     )
@@ -181,6 +217,7 @@ const mdtp: DispatchProps = {
   onSetShadeBelow: setShadeBelow,
   onUpdateColors: setColors,
   onSetGeom: setGeom,
+  onSetPosition: setLinePosition,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

ui/src/timeMachine/reducers/index.ts

@@ -443,6 +443,12 @@ export const timeMachineReducer = (
       return setViewProperties(state, {position})
     }
 
+    case 'SET_LINE_POSITION': {
+      const {position} = action.payload
+
+      return setViewProperties(state, {position})
+    }
+
     case 'SET_BIN_COUNT': {
       const {binCount} = action.payload
 

ui/yarn.lock

@@ -1014,10 +1014,10 @@
   resolved "https://registry.yarnpkg.com/@influxdata/flux-parser/-/flux-parser-0.3.0.tgz#b63123ac814ad32c65e46a4097ba3d8b959416a5"
   integrity sha512-nsm801l60kXFulcSWA2YH2YRz9oSsMlTK9Evn6Og9BoQnQMcwUsSUEug8mQRIUljnkNYV58JSs0W0mP8h7Y/ZQ==
 
-"@influxdata/giraffe@0.16.5":
-  version "0.16.5"
-  resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-0.16.5.tgz#31cb7732656420d69e4998332763b2234ddbcdac"
-  integrity sha512-LoPGngLpv2WAuc6y9hTBVrm7nxd+c6NiSlmuhCUtXRAlGrW1t3zdEF5CxX6OVEhnZqnpD55hLcFDjDw3Iw/b5w==
+"@influxdata/giraffe@0.16.8":
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-0.16.8.tgz#3bb07532fa09d252443f298aed651327f5b72853"
+  integrity sha512-/2osPn9o3Zo/Y9QrL012M6cOHouYEexs2pgZJn3EdGLY+1KkqJEgaJ5+xfCGus72IYO0XGKX24/BvW4WHwC3EA==
 
 "@influxdata/influx@0.5.5":
   version "0.5.5"