@splunk/visualizations 28.5.3 → 28.7.0

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

@@ -0,0 +1,1686 @@
+# Single Value Icon Examples
+
+**Visualization Reference:** undefined
+
+## Basic Single Value Icon
+
+- **Key:** Basic
+
+```json
+{
+  "context": {},
+  "options": {},
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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
+
+```json
+{
+  "context": {},
+  "options": {
+    "backgroundColor": "#FF0000"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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 - Based on third value of Bar Field
+
+- **Key:** Backgroundcolorthirdvaluebar
+
+```json
+{
+  "context": {},
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "backgroundColor": "> primary | seriesByName(\"bar\") | pointByIndex(2)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Background Color - Based on last value of Foo Field
+
+- **Key:** Last Indexfoo
+
+```json
+{
+  "context": {
+    "backgroundColors": [
+      {
+        "from": 5000,
+        "value": "#A52A2A"
+      },
+      {
+        "from": 1000,
+        "to": 5000,
+        "value": "#FFA500"
+      },
+      {
+        "from": 500,
+        "to": 1000,
+        "value": "#FFFF00"
+      },
+      {
+        "from": 100,
+        "to": 500,
+        "value": "#800080"
+      },
+      {
+        "to": 100,
+        "value": "#0000FF"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "backgroundColor": "> majorValue | rangeValue(backgroundColors)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Background Color - Based on third value of Foo Field
+
+- **Key:** Backgroundcolorthirdvaluefoo
+
+```json
+{
+  "context": {
+    "backgroundColors": [
+      {
+        "from": 100,
+        "value": "#A52A2A"
+      },
+      {
+        "from": 40,
+        "to": 100,
+        "value": "#FFA500"
+      },
+      {
+        "from": 13,
+        "to": 40,
+        "value": "#FFFF00"
+      },
+      {
+        "from": 1,
+        "to": 13,
+        "value": "#800080"
+      },
+      {
+        "from": 0,
+        "to": 1,
+        "value": "#0000FF"
+      },
+      {
+        "to": 0,
+        "value": "#000000"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "backgroundColor": "> primary | seriesByName(\"foo\") | pointByIndex(2) | rangeValue(backgroundColors)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Background Color - Based on Data Series Color
+
+- **Key:** Color Data Series
+
+```json
+{
+  "context": {},
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "backgroundColor": "> primary | seriesByName(\"bar\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Icon - Clock
+
+- **Key:** Fix Icon
+
+```json
+{
+  "context": {},
+  "options": {
+    "icon": "clock",
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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": {}
+    }
+  }
+}
+```
+
+## Icon - Persisted Icon in IconRegistry
+
+- **Key:** Remote Icon
+
+```json
+{
+  "context": {},
+  "options": {},
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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": {}
+    }
+  }
+}
+```
+
+## Icon - Custom SVG Icon
+
+- **Key:** Custom Svg Icon
+
+```json
+{
+  "context": {},
+  "options": {},
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "930",
+            "1320"
+          ],
+          [
+            "2018-08-25T00:00:00.000+00:00",
+            "2018-08-26T00:00:00.000+00:00"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "_time"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Icon - Activity, Show Value - False
+
+- **Key:** Fix Icon No Values
+
+```json
+{
+  "context": {},
+  "options": {
+    "icon": "activity",
+    "showValue": false,
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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": {}
+    }
+  }
+}
+```
+
+## Icon - Based on Threshold Value
+
+- **Key:** Icon By Threshold
+
+```json
+{
+  "context": {
+    "iconMatches": [
+      {
+        "from": 1560,
+        "value": "default"
+      },
+      {
+        "from": 70,
+        "to": 1560,
+        "value": "star"
+      },
+      {
+        "from": 30,
+        "to": 70,
+        "value": "pencil"
+      },
+      {
+        "from": 0,
+        "to": 30,
+        "value": "clock"
+      },
+      {
+        "to": 0,
+        "value": "activity"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "icon": "> majorValue | rangeValue(iconMatches)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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": {}
+    }
+  }
+}
+```
+
+## Icon Color - Blue
+
+- **Key:** Icon Color
+
+```json
+{
+  "context": {},
+  "options": {
+    "iconColor": "#0000FF"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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": {}
+    }
+  }
+}
+```
+
+## Icon Color - Based on Major Value
+
+- **Key:** Icon Color Using Major Value
+
+```json
+{
+  "context": {
+    "iconColors": [
+      {
+        "from": 5000,
+        "value": "#A52A2A"
+      },
+      {
+        "from": 1000,
+        "to": 5000,
+        "value": "#FFA500"
+      },
+      {
+        "from": 500,
+        "to": 1000,
+        "value": "#FFFF00"
+      },
+      {
+        "from": 100,
+        "to": 500,
+        "value": "#800080"
+      },
+      {
+        "to": 100,
+        "value": "#0000FF"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "iconColor": "> majorValue | rangeValue(iconColors)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Icon Color - Based on Trend Value
+
+- **Key:** Icon Color Using Trend Value
+
+```json
+{
+  "context": {
+    "iconColors": [
+      {
+        "from": 5000,
+        "value": "#A52A2A"
+      },
+      {
+        "from": 1000,
+        "to": 5000,
+        "value": "#FFA500"
+      },
+      {
+        "from": 500,
+        "to": 1000,
+        "value": "#FFFF00"
+      },
+      {
+        "from": 100,
+        "to": 500,
+        "value": "#800080"
+      },
+      {
+        "to": 100,
+        "value": "#0000FF"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "iconColor": "> trendValue | rangeValue(iconColors)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Icon Opacity - 0.2, Under Label - Specified
+
+- **Key:** Icon Opacity
+
+```json
+{
+  "context": {},
+  "options": {
+    "iconOpacity": 0.2,
+    "underLabel": "Under Label Test"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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": {}
+    }
+  }
+}
+```
+
+## Icon Position - After
+
+- **Key:** Fix Icon After
+
+```json
+{
+  "context": {},
+  "options": {
+    "icon": "clock",
+    "iconPosition": "after",
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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": {}
+    }
+  }
+}
+```
+
+## Icon - Pencil, Icon Position - Top, Unit - Specified, Unit Position - Before
+
+- **Key:** Fix Icon Top
+
+```json
+{
+  "context": {},
+  "options": {
+    "icon": "pencil",
+    "iconPosition": "top",
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "unit": "$",
+    "unitPosition": "before"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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": {}
+    }
+  }
+}
+```
+
+## Icon - Star, Icon Position - Below
+
+- **Key:** Fix Icon Below
+
+```json
+{
+  "context": {},
+  "options": {
+    "icon": "star",
+    "iconPosition": "below",
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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": {}
+    }
+  }
+}
+```
+
+## Icon Position - Based on Major Value
+
+- **Key:** Fix Icon Dynamic
+
+```json
+{
+  "context": {
+    "iconPositionValues": [
+      {
+        "from": "1321",
+        "value": "top"
+      },
+      {
+        "to": "1321",
+        "value": "below"
+      }
+    ]
+  },
+  "options": {
+    "icon": "clock",
+    "iconPosition": "> majorValue | rangeValue(iconPositionValues)",
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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 Color - Based on Major Value
+
+- **Key:** Major Color Using Major Value
+
+```json
+{
+  "context": {
+    "majorColors": [
+      {
+        "from": 5000,
+        "value": "#A52A2A"
+      },
+      {
+        "from": 1000,
+        "to": 5000,
+        "value": "#FFA500"
+      },
+      {
+        "from": 500,
+        "to": 1000,
+        "value": "#FFFF00"
+      },
+      {
+        "from": 100,
+        "to": 500,
+        "value": "#800080"
+      },
+      {
+        "to": 100,
+        "value": "#0000FF"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "majorColor": "> majorValue | rangeValue(majorColors)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Major Color - Based on Trend Value, Major Font Size - 80
+
+- **Key:** Major Color Using Trend Value
+
+```json
+{
+  "context": {
+    "majorColors": [
+      {
+        "from": 5000,
+        "value": "#A52A2A"
+      },
+      {
+        "from": 1000,
+        "to": 5000,
+        "value": "#FFA500"
+      },
+      {
+        "from": 500,
+        "to": 1000,
+        "value": "#FFFF00"
+      },
+      {
+        "from": 100,
+        "to": 500,
+        "value": "#800080"
+      },
+      {
+        "to": 100,
+        "value": "#0000FF"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "majorColor": "> trendValue | rangeValue(majorColors)",
+    "majorFontSize": 80
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "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 and Trend Value - Based on Foo Field
+
+- **Key:** Field Foo
+
+```json
+{
+  "context": {},
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "1195",
+            "1220"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Major Value and Trend Value - Based on Bar Field
+
+- **Key:** Field Bar
+
+```json
+{
+  "context": {},
+  "options": {
+    "majorValue": "> primary | seriesByName(\"bar\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"bar\") | delta(-2)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "1195",
+            "1220"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Trend Color - Based on Major Value
+
+- **Key:** Trend Color Using Major Value
+
+```json
+{
+  "context": {
+    "trendColorThresholds": [
+      {
+        "from": 5000,
+        "value": "#A52A2A"
+      },
+      {
+        "from": 1000,
+        "to": 5000,
+        "value": "#FFA500"
+      },
+      {
+        "from": 500,
+        "to": 1000,
+        "value": "#FFFF00"
+      },
+      {
+        "from": 100,
+        "to": 500,
+        "value": "#800080"
+      },
+      {
+        "to": 100,
+        "value": "#0000FF"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "trendColor": "> majorValue | rangeValue(trendColorThresholds)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Trend Color - Based on Trend Value, Trend Font Size - 60
+
+- **Key:** Trend Color Using Trend Value
+
+```json
+{
+  "context": {
+    "trendColorThresholds": [
+      {
+        "from": 5000,
+        "value": "#A52A2A"
+      },
+      {
+        "from": 1000,
+        "to": 5000,
+        "value": "#FFA500"
+      },
+      {
+        "from": 500,
+        "to": 1000,
+        "value": "#FFFF00"
+      },
+      {
+        "from": 100,
+        "to": 500,
+        "value": "#800080"
+      },
+      {
+        "to": 100,
+        "value": "#0000FF"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "trendColor": "> trendValue | rangeValue(trendColorThresholds)",
+    "trendFontSize": 60
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "#FF0000",
+            "#00FFFF",
+            "#0000FF",
+            "#800080",
+            "#FFFF00",
+            "#FFA500",
+            "#A52A2A",
+            "#008000"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```
+
+## Trend Display Mode - Based on Threshold Value
+
+- **Key:** Trend Display Mode
+
+```json
+{
+  "context": {
+    "trendDisplayModeValues": [
+      {
+        "from": "391",
+        "value": "absolute"
+      },
+      {
+        "to": "391",
+        "value": "percent"
+      }
+    ]
+  },
+  "options": {
+    "majorValue": "> primary | seriesByName(\"foo\") | lastPoint()",
+    "trendValue": "> primary | seriesByName(\"foo\") | delta(-2)",
+    "trendDisplayMode": "> trendValue | rangeValue(trendDisplayModeValues)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "1",
+            "62",
+            "103",
+            "308",
+            "587",
+            "876",
+            "930",
+            "1320"
+          ],
+          [
+            "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",
+    "icon": "clock",
+    "trellisColumns": 3,
+    "trellis": {
+      "minColumnWidth": 400
+    }
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "fields": [
+          {
+            "name": "component",
+            "groupby_rank": "0"
+          },
+          {
+            "name": "foo"
+          }
+        ],
+        "columns": [
+          [
+            "Database",
+            "API",
+            "Cache",
+            "Queue",
+            "Frontend",
+            "Backend"
+          ],
+          [
+            "1523",
+            "2847",
+            "1956",
+            "3124",
+            "2135",
+            "2689"
+          ]
+        ]
+      },
+      "meta": {}
+    }
+  }
+}
+```