@splunk/visualizations 28.5.3 → 28.7.0

package/docs-llm/single-value-radial/examples-json.md

@@ -0,0 +1,1178 @@
+# Single Value Radial Examples
+
+**Visualization Reference:** undefined
+
+## Basic Single Value Radial
+
+- **Key:** Basic
+
+```json
+{
+  "context": {},
+  "options": {},
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Background Color - Red
+
+- **Key:** Background Color Red
+
+```json
+{
+  "context": {},
+  "options": {
+    "backgroundColor": "#ff0000"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Major Value - Based on Foo Field
+
+- **Key:** Radial Field Foo
+
+```json
+{
+  "context": {},
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "70",
+            "80"
+          ],
+          [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "3200"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Major Value - Based on Bar Field
+
+- **Key:** Radial Field Bar
+
+```json
+{
+  "context": {},
+  "options": {
+    "majorValue": "> primary | seriesByName(\"bar\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "70",
+            "80"
+          ],
+          [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "3200"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Max Value - 1000
+
+- **Key:** Radial Max Value
+
+```json
+{
+  "context": {},
+  "options": {
+    "maxValue": 1000
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Radial Stroke Color - Flamenco, Radial Background Color - Valencia
+
+- **Key:** Radialcolorcustom
+
+```json
+{
+  "context": {},
+  "options": {
+    "radialBackgroundColor": "#DC4E41",
+    "radialStrokeColor": "#F1813F"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Radial Background Color - Based on Data Series Color
+
+- **Key:** Radial Color Data Series
+
+```json
+{
+  "context": {},
+  "options": {
+    "radialBackgroundColor": "> primary | seriesByName(\"bar\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "55"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Radial Stroke Color - Based on Data Series Color
+
+- **Key:** Radial Stroke Color Data Series
+
+```json
+{
+  "context": {},
+  "options": {
+    "radialStrokeColor": "> primary | seriesByName(\"bar\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "88"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Trend Display - Percent
+
+- **Key:** Radial Trend Mode Percent
+
+```json
+{
+  "context": {},
+  "options": {
+    "trendDisplay": "percent"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Basic Single Value Radial - With Gauge
+
+- **Key:** Basicwithgauge
+
+```json
+{
+  "context": {},
+  "options": {
+    "isGaugeOn": true,
+    "gaugeRanges": [
+      {
+        "to": 50,
+        "value": "#118832"
+      },
+      {
+        "from": 50,
+        "to": 90,
+        "value": "#CBA700"
+      },
+      {
+        "from": 90,
+        "value": "#D41F1F"
+      }
+    ]
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Background Color - Red - With Gauge
+
+- **Key:** Background Color Red With Gauge
+
+```json
+{
+  "context": {},
+  "options": {
+    "backgroundColor": "#ff0000",
+    "isGaugeOn": true,
+    "gaugeRanges": [
+      {
+        "to": 50,
+        "value": "#118832"
+      },
+      {
+        "from": 50,
+        "to": 90,
+        "value": "#CBA700"
+      },
+      {
+        "from": 90,
+        "value": "#D41F1F"
+      }
+    ]
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Major Value and Trend Value - Based on majorValueDisplay
+
+- **Key:** Majorvaluebasedonmajorvaluedisplay
+
+```json
+{
+  "context": {
+    "byteFormatConfig": {
+      "number": {
+        "output": "byte",
+        "base": "decimal",
+        "mantissa": 2
+      }
+    }
+  },
+  "options": {
+    "trendValue": "> primary | seriesByName(\"ingested_bytes\") | delta(-2)",
+    "trendDisplay": "percent",
+    "majorValue": "> primary | seriesByName(\"ingested_bytes\") | lastPoint()",
+    "majorValueDisplay": "> majorValue | formatByType(byteFormatConfig)"
+  },
+  "dataSources": {
+    "primary": {
+      "requestParams": {
+        "offset": 0,
+        "count": 20
+      },
+      "data": {
+        "columns": [
+          [
+            "154305299",
+            "126949782"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "ingested_bytes"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Major Value - Based on Foo Field - With Gauge
+
+- **Key:** Radial Field Foo With Gauge
+
+```json
+{
+  "context": {},
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "isGaugeOn": true,
+    "gaugeRanges": [
+      {
+        "to": 50,
+        "value": "#118832"
+      },
+      {
+        "from": 50,
+        "to": 90,
+        "value": "#CBA700"
+      },
+      {
+        "from": 90,
+        "value": "#D41F1F"
+      }
+    ]
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "70",
+            "80"
+          ],
+          [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "3200"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Major Value - Based on Bar Field - With Gauge
+
+- **Key:** Radial Field Bar With Gauge
+
+```json
+{
+  "context": {},
+  "options": {
+    "majorValue": "> primary | seriesByName(\"bar\") | lastPoint()",
+    "isGaugeOn": true,
+    "gaugeRanges": [
+      {
+        "to": 50,
+        "value": "#118832"
+      },
+      {
+        "from": 50,
+        "to": 90,
+        "value": "#CBA700"
+      },
+      {
+        "from": 90,
+        "value": "#D41F1F"
+      }
+    ]
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "70",
+            "80"
+          ],
+          [
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+            "6",
+            "7",
+            "3200"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Radial Background Color - Based on Data Series Color - With Gauge
+
+- **Key:** Radial Color Data Series With Gauge
+
+```json
+{
+  "context": {},
+  "options": {
+    "radialBackgroundColor": "> primary | seriesByName(\"bar\") | lastPoint()",
+    "isGaugeOn": true,
+    "gaugeRanges": [
+      {
+        "to": 50,
+        "value": "#118832"
+      },
+      {
+        "from": 50,
+        "to": 90,
+        "value": "#CBA700"
+      },
+      {
+        "from": 90,
+        "value": "#D41F1F"
+      }
+    ]
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "55"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Trend Display - Percent - With Gauge
+
+- **Key:** Radial Trend Mode Percent With Gauge
+
+```json
+{
+  "context": {},
+  "options": {
+    "trendDisplay": "percent",
+    "isGaugeOn": true,
+    "gaugeRanges": [
+      {
+        "to": 50,
+        "value": "#118832"
+      },
+      {
+        "from": 50,
+        "to": 90,
+        "value": "#CBA700"
+      },
+      {
+        "from": 90,
+        "value": "#D41F1F"
+      }
+    ]
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## One Gauge Range
+
+- **Key:** One Gauge Range
+
+```json
+{
+  "context": {},
+  "options": {
+    "isGaugeOn": true,
+    "gaugeRanges": [
+      {
+        "to": 30,
+        "value": "#118832"
+      },
+      {
+        "from": 30,
+        "to": 50,
+        "value": "#118832"
+      },
+      {
+        "from": 50,
+        "value": "#118832"
+      }
+    ],
+    "minValue": 30,
+    "maxValue": 50
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Five Gauge Ranges
+
+- **Key:** Five Gauge Ranges
+
+```json
+{
+  "context": {},
+  "options": {
+    "isGaugeOn": true,
+    "gaugeRanges": [
+      {
+        "to": 25,
+        "value": "#2CBA00"
+      },
+      {
+        "from": 25,
+        "to": 50,
+        "value": "#A3FF00"
+      },
+      {
+        "from": 50,
+        "to": 100,
+        "value": "#FFF400"
+      },
+      {
+        "from": 100,
+        "to": 175,
+        "value": "#FFA700"
+      },
+      {
+        "from": 175,
+        "value": "#FF0000"
+      }
+    ],
+    "maxValue": 200
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "5",
+            "12",
+            "46",
+            "23",
+            "51",
+            "115",
+            "63",
+            "88"
+          ],
+          [
+            "2018-08-19T00:00:00.000+00:00",
+            "2018-08-20T00:00:00.000+00:00",
+            "2018-08-21T00:00:00.000+00:00",
+            "2018-08-22T00:00:00.000+00:00",
+            "2018-08-23T00:00:00.000+00:00",
+            "2018-08-24T00:00:00.000+00:00",
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Trellis
+
+- **Key:** Trellis
+
+```json
+{
+  "context": {},
+  "options": {
+    "splitByLayout": "trellis",
+    "trellisSplitBy": "component",
+    "trellisColumns": 3,
+    "trellis": {
+      "minColumnWidth": 400
+    }
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "fields": [
+          {
+            "name": "component",
+            "groupby_rank": "0"
+          },
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ],
+        "columns": [
+          [
+            "Database",
+            "API",
+            "Cache",
+            "Queue",
+            "Frontend",
+            "Backend"
+          ],
+          [
+            "55",
+            "72",
+            "64",
+            "80",
+            "68",
+            "75"
+          ],
+          [
+            "110",
+            "121",
+            "107",
+            "134",
+            "115",
+            "125"
+          ]
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Trellis - With Gauge
+
+- **Key:** Trellis With Gauge
+
+```json
+{
+  "context": {},
+  "options": {
+    "splitByLayout": "trellis",
+    "trellisSplitBy": "component",
+    "isGaugeOn": true,
+    "gaugeRanges": [
+      {
+        "to": 50,
+        "value": "#118832"
+      },
+      {
+        "from": 50,
+        "to": 90,
+        "value": "#CBA700"
+      },
+      {
+        "from": 90,
+        "value": "#D41F1F"
+      }
+    ],
+    "trellisColumns": 3,
+    "trellis": {
+      "minColumnWidth": 400
+    }
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "fields": [
+          {
+            "name": "component",
+            "groupby_rank": "0"
+          },
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ],
+        "columns": [
+          [
+            "Database",
+            "API",
+            "Cache",
+            "Queue",
+            "Frontend",
+            "Backend"
+          ],
+          [
+            "55",
+            "72",
+            "64",
+            "80",
+            "68",
+            "75"
+          ],
+          [
+            "110",
+            "121",
+            "107",
+            "134",
+            "115",
+            "125"
+          ]
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```