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:

pkger/clone_resource.go

@@ -141,6 +141,7 @@ func convertCellView(cv cellView) chart {
 		ch.Shade = p.ShadeBelow
 		ch.XCol = p.XColumn
 		ch.YCol = p.YColumn
+		ch.Position = p.Position
 	case influxdb.SingleStatViewProperties:
 		setCommon(chartKindSingleStat, p.ViewColors, p.DecimalPlaces, p.Queries)
 		setNoteFixes(p.Note, p.ShowNoteWhenEmpty, p.Prefix, p.Suffix)
@@ -165,6 +166,7 @@ func convertCellView(cv cellView) chart {
 		ch.Shade = p.ShadeBelow
 		ch.XCol = p.XColumn
 		ch.YCol = p.YColumn
+		ch.Position = p.Position
 	}
 
 	return ch

pkger/models.go

@@ -1006,6 +1006,7 @@ func (c chart) properties() influxdb.ViewProperties {
 			Queries:           c.Queries.influxDashQueries(),
 			ViewColors:        c.Colors.influxViewColors(),
 			Axes:              c.Axes.influxAxes(),
+			Position:          c.Position,
 		}
 	case chartKindXY:
 		return influxdb.XYViewProperties{
@@ -1020,6 +1021,7 @@ func (c chart) properties() influxdb.ViewProperties {
 			ViewColors:        c.Colors.influxViewColors(),
 			Axes:              c.Axes.influxAxes(),
 			Geom:              c.Geom,
+			Position:          c.Position,
 		}
 	default:
 		return nil
@@ -1058,14 +1060,27 @@ func (c chart) validProperties() []validationErr {
 	case chartKindSingleStatPlusLine:
 		fails = append(fails, c.Colors.hasTypes(colorTypeText)...)
 		fails = append(fails, c.Axes.hasAxes("x", "y")...)
+		fails = append(fails, validPosition(c.Position)...)
 	case chartKindXY:
 		fails = append(fails, validGeometry(c.Geom)...)
 		fails = append(fails, c.Axes.hasAxes("x", "y")...)
+		fails = append(fails, validPosition(c.Position)...)
 	}
 
 	return fails
 }
 
+func validPosition(pos string) []validationErr {
+	pos = strings.ToLower(pos)
+	if pos != "" && pos != "overlaid" && pos != "stacked" {
+		return []validationErr{{
+			Field: fieldChartPosition,
+			Msg:   fmt.Sprintf("invalid position supplied %q; valid positions is one of [overlaid, stacked]", pos),
+		}}
+	}
+	return nil
+}
+
 var geometryTypes = map[string]bool{
 	"line":    true,
 	"step":    true,

pkger/parser_test.go

@@ -686,7 +686,7 @@ spec:
 			})
 		})
 
-		t.Run("single dashboard heatmap chart", func(t *testing.T) {
+		t.Run("single heatmap chart", func(t *testing.T) {
 			testfileRunner(t, "testdata/dashboard_heatmap", func(t *testing.T, pkg *Pkg) {
 				sum := pkg.Summary()
 				require.Len(t, sum.Dashboards, 1)
@@ -934,7 +934,7 @@ spec:
 			})
 		})
 
-		t.Run("single dashboard histogram chart", func(t *testing.T) {
+		t.Run("single histogram chart", func(t *testing.T) {
 			testfileRunner(t, "testdata/dashboard_histogram", func(t *testing.T, pkg *Pkg) {
 				sum := pkg.Summary()
 				require.Len(t, sum.Dashboards, 1)
@@ -1176,7 +1176,7 @@ spec:
 			})
 		})
 
-		t.Run("single dashboard markdown chart", func(t *testing.T) {
+		t.Run("single markdown chart", func(t *testing.T) {
 			testfileRunner(t, "testdata/dashboard_markdown", func(t *testing.T, pkg *Pkg) {
 				sum := pkg.Summary()
 				require.Len(t, sum.Dashboards, 1)
@@ -2029,6 +2029,7 @@ spec:
 				assert.Equal(t, int32(1), props.DecimalPlaces.Digits)
 				assert.Equal(t, "days", props.Suffix)
 				assert.Equal(t, "sumtin", props.Prefix)
+				assert.Equal(t, "overlaid", props.Position)
 				assert.Equal(t, "leg_type", props.Legend.Type)
 				assert.Equal(t, "horizontal", props.Legend.Orientation)
 
@@ -2400,6 +2401,7 @@ spec:
 					assert.Equal(t, true, props.ShadeBelow)
 					assert.Equal(t, "xy chart note", props.Note)
 					assert.True(t, props.ShowNoteWhenEmpty)
+					assert.Equal(t, "stacked", props.Position)
 
 					require.Len(t, props.Queries, 1)
 					q := props.Queries[0]

pkger/service_test.go

@@ -953,6 +953,7 @@ func TestService(t *testing.T) {
 								ViewColors:        []influxdb.ViewColor{{Type: "text", Hex: "red"}},
 								XColumn:           "x",
 								YColumn:           "y",
+								Position:          "stacked",
 							},
 						},
 					},
@@ -975,6 +976,7 @@ func TestService(t *testing.T) {
 								ViewColors:        []influxdb.ViewColor{{Type: "text", Hex: "red"}},
 								XColumn:           "x",
 								YColumn:           "y",
+								Position:          "overlaid",
 							},
 						},
 					},

pkger/testdata/dashboard_single_stat_plus_line.json

@@ -28,6 +28,7 @@
             "shade": true,
             "xColumn": "_time",
             "yColumn": "_value",
+            "position": "overlaid",
             "legend": {
               "type": "leg_type",
               "orientation": "horizontal"

pkger/testdata/dashboard_single_stat_plus_line.yml

@@ -22,6 +22,7 @@ spec:
           width:  6
           height: 3
           shade: true
+          position: overlaid
           legend:
             type: leg_type
             orientation: horizontal

pkger/testdata/dashboard_xy.json

@@ -24,6 +24,7 @@
             "width": 6,
             "height": 3,
             "decimalPlaces": 1,
+            "position": "stacked",
             "shade": true,
             "xColumn": "_time",
             "yColumn": "_value",

pkger/testdata/dashboard_xy.yml

@@ -20,6 +20,7 @@ spec:
           height: 3
           shade: true
           geom: line
+          position: stacked
           legend:
           queries:
             - query: >

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]}