feat: gauge mini

cmd/chronograf-migrator/dashboard.go

@@ -99,6 +99,12 @@ func convert1To2Cell(cell chronograf.DashboardCell) *influxdb.Cell {
 			Note:       cell.Note,
 			// TODO(desa): what to do about ShowNoteWhenEmpty?
 		}
+	case "gauge-mini":
+		v.Properties = influxdb.GaugeMiniViewProperties{
+			Queries:    convertQueries(cell.Queries),
+			ViewColors: convertColors(cell.CellColors),
+			Note:       cell.Note,
+		}
 	case "table":
 		v.Properties = influxdb.TableViewProperties{
 			Queries:    convertQueries(cell.Queries),

dashboard.go

@@ -372,6 +372,7 @@ type ViewContents struct {
 const (
 	ViewPropertyTypeCheck              = "check"
 	ViewPropertyTypeGauge              = "gauge"
+	ViewPropertyTypeGaugeMini          = "gauge-mini"
 	ViewPropertyTypeHeatMap            = "heatmap"
 	ViewPropertyTypeHistogram          = "histogram"
 	ViewPropertyTypeLogViewer          = "log-viewer"
@@ -457,6 +458,12 @@ func UnmarshalViewPropertiesJSON(b []byte) (ViewProperties, error) {
 				return nil, err
 			}
 			vis = gvw
+		case ViewPropertyTypeGaugeMini:
+			var gvm GaugeMiniViewProperties
+			if err := json.Unmarshal(v.B, &gvm); err != nil {
+				return nil, err
+			}
+			vis = gvm
 		case ViewPropertyTypeTable:
 			var tv TableViewProperties
 			if err := json.Unmarshal(v.B, &tv); err != nil {
@@ -564,6 +571,15 @@ func MarshalViewPropertiesJSON(v ViewProperties) ([]byte, error) {
 			Shape:             "chronograf-v2",
 			GeoViewProperties: vis,
 		}
+	case GaugeMiniViewProperties:
+		s = struct {
+			Shape string `json:"shape"`
+			GaugeMiniViewProperties
+		}{
+			Shape: "chronograf-v2",
+
+			GaugeMiniViewProperties: vis,
+		}
 	case XYViewProperties:
 		s = struct {
 			Shape string `json:"shape"`
@@ -1008,6 +1024,53 @@ type GeoViewProperties struct {
 	ShowNoteWhenEmpty      bool             `json:"showNoteWhenEmpty"`
 }
 
+type FormatStatValueOptions struct {
+	DecimalPlaces DecimalPlaces `json:"decimalPlaces"`
+	Prefix        string        `json:"prefix"`
+	Suffix        string        `json:"suffix"`
+}
+
+// GaugeMiniViewProperties represents options for gauge view in Chronograf
+type GaugeMiniViewProperties struct {
+	Type              string           `json:"type"`
+	Queries           []DashboardQuery `json:"queries"`
+	ViewColors        []ViewColor      `json:"colors"`
+	Note              string           `json:"note"`
+	ShowNoteWhenEmpty bool             `json:"showNoteWhenEmpty"`
+
+	Mode            string                   `json:"mode"`
+	TextMode        string                   `json:"textMode"`
+
+	ValueHeight     float64 `json:"valueHeight"`
+	GaugeHeight     float64 `json:"gaugeHeight"`
+	ValueRounding   float64 `json:"valueRounding"`
+	GaugeRounding   float64 `json:"gaugeRounding"`
+	BarPaddings     float64 `json:"barPaddings"`
+	SidePaddings    float64 `json:"sidePaddings"`
+	OveflowFraction float64 `json:"oveflowFraction"`
+
+	ColorSecondary string `json:"colorSecondary"`
+
+	LabelMain          string  `json:"labelMain"`
+	LabelMainFontSize  float64 `json:"labelMainFontSize"`
+	LabelMainFontColor string  `json:"labelMainFontColor"`
+
+	LabelBarsEnabled   bool    `json:"labelBarsEnabled"`
+	LabelBarsFontSize  float64 `json:"labelBarsFontSize"`
+	LabelBarsFontColor string  `json:"labelBarsFontColor"`
+
+	ValuePadding          float64                `json:"valuePadding"`
+	ValueFontSize         float64                `json:"valueFontSize"`
+	ValueFontColorInside  string                 `json:"valueFontColorInside"`
+	ValueFontColorOutside string                 `json:"valueFontColorOutside"`
+	ValueFormater         FormatStatValueOptions `json:"valueFormater"`
+
+	AxesSteps     json.RawMessage        `json:"axesSteps"`
+	AxesFontSize  float64                `json:"axesFontSize"`
+	AxesFontColor string                 `json:"axesFontColor"`
+	AxesFormater  FormatStatValueOptions `json:"axesFormater"`
+}
+
 // TableViewProperties represents options for table view in Chronograf
 type TableViewProperties struct {
 	Type              string           `json:"type"`
@@ -1056,6 +1119,7 @@ func (ScatterViewProperties) viewProperties()        {}
 func (MosaicViewProperties) viewProperties()         {}
 func (GaugeViewProperties) viewProperties()          {}
 func (GeoViewProperties) viewProperties()            {}
+func (GaugeMiniViewProperties) viewProperties()      {}
 func (TableViewProperties) viewProperties()          {}
 func (MarkdownViewProperties) viewProperties()       {}
 func (LogViewProperties) viewProperties()            {}
@@ -1071,6 +1135,7 @@ func (v ScatterViewProperties) GetType() string        { return v.Type }
 func (v MosaicViewProperties) GetType() string         { return v.Type }
 func (v GaugeViewProperties) GetType() string          { return v.Type }
 func (v GeoViewProperties) GetType() string            { return v.Type }
+func (v GaugeMiniViewProperties) GetType() string      { return v.Type }
 func (v TableViewProperties) GetType() string          { return v.Type }
 func (v MarkdownViewProperties) GetType() string       { return v.Type }
 func (v LogViewProperties) GetType() string            { return v.Type }

flags.yml

@@ -100,6 +100,14 @@
   expose: true
   lifetime: temporary
 
+- name: Gauge Mini Graph Type
+  description: Enables the creation of a Gauge Mini graph in Dashboards
+  key: gaugeMini
+  default: false
+  contact: Bonitoo-io
+  expose: true
+  lifetime: temporary
+
 - name: Notebooks
   description: Determine if the notebook feature's route and navbar icon are visible to the user
   key: notebooks

http/swagger.yml

@@ -9648,6 +9648,106 @@ components:
           $ref: "#/components/schemas/Legend"
         decimalPlaces:
           $ref: "#/components/schemas/DecimalPlaces"
+    FormatStatValueOptions:
+      type: object
+      properties:
+        decimalPlaces:
+          $ref: "#/components/schemas/DecimalPlaces"
+        prefix:
+          type: string
+        suffix:
+          type: string
+    GaugeMiniViewProperties:
+      type: object
+      required:
+        [
+          type,
+          queries,
+          colors,
+          shape,
+          note,
+          showNoteWhenEmpty,
+        ]
+      properties:
+        type:
+          type: string
+          enum: [gauge-mini]
+        queries:
+          type: array
+          items:
+            $ref: "#/components/schemas/DashboardQuery"
+        colors:
+          description: Colors define color encoding of data into a visualization
+          type: array
+          items:
+            $ref: "#/components/schemas/DashboardColor"
+        shape:
+          type: string
+          enum: ["chronograf-v2"]
+        note:
+          type: string
+        showNoteWhenEmpty:
+          description: If true, will display note when empty
+          type: boolean
+        mode:
+          type: string
+          enum: [progress, bullet]
+        textMode:
+          type: string
+          enum: [follow, left]
+        valueHeight:
+          type: number
+        gaugeHeight:
+          type: number
+        valueRounding:
+          type: number
+        gaugeRounding:
+          type: number
+        barPaddings:
+          type: number
+        sidePaddings:
+          type: number
+        oveflowFraction:
+          type: number
+        colorSecondary:
+          type: string
+        labelMain:
+          type: string
+        labelMainFontSize:
+          type: number
+        labelMainFontColor:
+          type: string
+        labelBarsEnabled:
+          type: boolean
+        labelBarsFontSize:
+          type: number
+        labelBarsFontColor:
+          type: string
+        valuePadding:
+          type: number
+        valueFontSize:
+          type: number
+        valueFontColorInside:
+          type: string
+        valueFontColorOutside:
+          type: string
+        valueFormater:
+          $ref: "#/components/schemas/FormatStatValueOptions"
+        axesSteps:
+          oneOf:
+            - type: number
+            - type: string
+              enum: [thresholds]
+            - type: undefined
+            - type: array
+              items:
+                type: number
+        axesFontSize:
+          type: number
+        axesFontColor:
+          type: string
+        axesFormater:
+          $ref: "#/components/schemas/FormatStatValueOptions"
     TableViewProperties:
       type: object
       required:
@@ -10092,6 +10192,7 @@ components:
         - $ref: "#/components/schemas/SingleStatViewProperties"
         - $ref: "#/components/schemas/HistogramViewProperties"
         - $ref: "#/components/schemas/GaugeViewProperties"
+        - $ref: "#/components/schemas/GaugeMiniViewProperties"
         - $ref: "#/components/schemas/TableViewProperties"
         - $ref: "#/components/schemas/MarkdownViewProperties"
         - $ref: "#/components/schemas/CheckViewProperties"

pkger/clone_resource.go

@@ -761,6 +761,12 @@ func convertCellView(cell influxdb.Cell) chart {
 		ch.GeoLayers = convertGeoLayers(p.GeoLayers)
 		ch.Note = p.Note
 		ch.NoteOnEmpty = p.ShowNoteWhenEmpty
+	case influxdb.GaugeMiniViewProperties:
+		ch.Kind = chartKindGauge
+		ch.Colors = convertColors(p.ViewColors)
+		ch.Queries = convertQueries(p.Queries)
+		ch.Note = p.Note
+		ch.NoteOnEmpty = p.ShowNoteWhenEmpty
 	case influxdb.HeatmapViewProperties:
 		ch.Kind = chartKindHeatMap
 		ch.Queries = convertQueries(p.Queries)

pkger/parser_models.go

@@ -424,6 +424,7 @@ const (
 	chartKindUnknown            chartKind = ""
 	chartKindGauge              chartKind = "gauge"
 	chartKindGeo                chartKind = "geo"
+	chartKindGaugeMini          chartKind = "gauge-mini"
 	chartKindHeatMap            chartKind = "heatmap"
 	chartKindHistogram          chartKind = "histogram"
 	chartKindMarkdown           chartKind = "markdown"
@@ -438,8 +439,8 @@ const (
 
 func (c chartKind) ok() bool {
 	switch c {
-	case chartKindGauge, chartKindGeo, chartKindHeatMap, chartKindHistogram,
-		chartKindMarkdown, chartKindMosaic, chartKindScatter,
+	case chartKindGauge, chartKindGeo, chartKindGaugeMini, chartKindHeatMap, 
+    chartKindHistogram, chartKindMarkdown, chartKindMosaic, chartKindScatter,
 		chartKindSingleStat, chartKindSingleStatPlusLine, chartKindTable,
 		chartKindXY, chartKindBand:
 		return true