@splunk/visualizations 28.6.0 → 28.7.0

package/docs-llm/single-value/examples-react.md

@@ -0,0 +1,2296 @@
+# Single Value Examples
+
+**Component Reference:** Single Value or @splunk/visualizations/SingleValue
+
+## Basic Single Value
+
+- **Key:** Basic
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Basic - With Event Handlers
+
+- **Key:** Event Handlers
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        hasEventHandlers
+        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
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        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 Major Value
+
+- **Key:** Background Color From Major Value
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            backgroundColorThresholds: [
+                {
+                    from: 1321,
+                    value: '#00FFFF',
+                },
+                {
+                    to: 1321,
+                    value: '#FF00FF',
+                },
+            ],
+        }}
+        options={{
+            majorValue: '> sparklineValues | lastPoint()',
+            backgroundColor: '> majorValue | rangeValue(backgroundColorThresholds)',
+        }}
+        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 Trend Value
+
+- **Key:** Background Color From Trend Value
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            backgroundColorThresholds: [
+                {
+                    from: 391,
+                    value: '#00FFFF',
+                },
+                {
+                    to: 391,
+                    value: '#0080FF',
+                },
+            ],
+        }}
+        options={{
+            trendValue: '> sparklineValues | delta(-2)',
+            backgroundColor: '> trendValue | rangeValue(backgroundColorThresholds)',
+        }}
+        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 Data Series Color
+
+- **Key:** Colordataseries
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            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: {},
+            },
+        }}
+    />
+);
+```
+
+## Major Color - Green
+
+- **Key:** Major Color
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            majorColor: '#008000',
+        }}
+        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 Last Major Value
+
+- **Key:** Majorcolorusinglastmajorvalue
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            majorColorThresholds: [
+                {
+                    from: 3201,
+                    value: '#00FFFF',
+                },
+                {
+                    to: 3201,
+                    value: '#FF00FF',
+                },
+            ],
+        }}
+        options={{
+            majorValue: '> primary | seriesByIndex(0) | lastPoint()',
+            trendValue: '> primary | seriesByIndex(0) | delta(-2)',
+            majorColor: '> majorValue | rangeValue(majorColorThresholds)',
+        }}
+        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 Trend Value
+
+- **Key:** Major Color From Trend Value
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            majorColorThresholds: [
+                {
+                    from: 389,
+                    value: '#00FFFF',
+                },
+                {
+                    to: 389,
+                    value: '#FF00FF',
+                },
+            ],
+        }}
+        options={{
+            sparklineValues: '> primary | seriesByIndex(0)',
+            majorValue: '> sparklineValues | lastPoint()',
+            trendValue: '> sparklineValues | delta(-2)',
+            majorColor: '> trendValue | rangeValue(majorColorThresholds)',
+        }}
+        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 Font Size - 40, Trend Font Size - 30
+
+- **Key:** Custom Font Sizes
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            majorFontSize: 40,
+            trendFontSize: 30,
+        }}
+        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 Value - Based on Foo Field
+
+- **Key:** Majorvaluefoo
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            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 Value and Trend Value - Based on majorValueDisplay
+
+- **Key:** Majorvaluebasedonmajorvaluedisplay
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            trendValue: '> primary | seriesByName("ingested_bytes") | delta(-2)',
+            trendDisplay: 'percent',
+            majorValue: '> primary | seriesByName("ingested_bytes") | lastPoint()',
+            majorValueDisplay: '> majorValue | formatByType(byteFormatConfig)',
+        }}
+        context={{
+            byteFormatConfig: {
+                number: {
+                    output: 'byte',
+                    base: 'decimal',
+                    mantissa: 2,
+                },
+            },
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    columns: [['154305299', '126949782']],
+                    fields: [
+                        {
+                            name: 'ingested_bytes',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Major Value - Using Sum of Data Series
+
+- **Key:** Major Value Sum
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            majorValue: '> primary | seriesByName("count") | sum()',
+            underLabel: 'Total Events',
+            trendDisplay: 'off',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['12', '115', '393', '260', '584'],
+                        [
+                            '2018-05-02T18:10:46.000-07:00',
+                            '2018-05-02T18:11:47.000-07:00',
+                            '2018-05-02T18:12:48.000-07:00',
+                            '2018-05-02T18:13:49.000-07:00',
+                            '2018-05-02T18:15:50.000-07:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Major Value - Based on Bar Field
+
+- **Key:** Major Value Bar
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            majorValue: '> primary | seriesByName("bar") | lastPoint()',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '930', '1320'],
+                        ['1', '2', '3', '4', '5', '6', '7', '3200'],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Number Precision - 2
+
+- **Key:** Precision
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            numberPrecision: 2,
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Should Abbreviate Trend Value - False, default
+
+- **Key:** No Trend Unit
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{}}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '930', '13200'],
+                        [
+                            '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: {},
+            },
+        }}
+    />
+);
+```
+
+## Should Abbreviate Trend Value - True
+
+- **Key:** Trend Unit
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            shouldAbbreviateTrendValue: true,
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '930', '13200'],
+                        [
+                            '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: {},
+            },
+        }}
+    />
+);
+```
+
+## Should Sparkline Accept Null Data - True, default (Deprecated)
+
+- **Key:** Sparkline Null
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{}}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '2', '3', '4', null, '6', '7', '32'],
+                        [
+                            '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: {},
+            },
+        }}
+    />
+);
+```
+
+## Should Sparkline Accept Null Data - False (Deprecated)
+
+- **Key:** Sparkline No Null
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            shouldSparklineAcceptNullData: false,
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '2', '3', '4', null, '6', '7', '32'],
+                        [
+                            '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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Null Value Display - Gaps (default)
+
+- **Key:** Sparkline Null Value Display Gaps
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineNullValueDisplay: 'gaps',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '2', '3', null, null, '6', '7', '8'],
+                        [
+                            '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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Null Value Display - Connect
+
+- **Key:** Sparkline Null Value Display Connect
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineNullValueDisplay: 'connect',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '2', '3', null, null, '6', '7', '8'],
+                        [
+                            '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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Null Value Display - Zero
+
+- **Key:** Sparkline Null Value Display Zero
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineNullValueDisplay: 'zero',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '2', '3', null, null, '6', '7', '8'],
+                        [
+                            '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: {},
+            },
+        }}
+    />
+);
+```
+
+## Should Use Thousand Separators - False
+
+- **Key:** No Thousand Separators
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            shouldUseThousandSeparators: false,
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Show Sparkline Area Graph - True
+
+- **Key:** Sparkline Area Graph
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            showSparklineAreaGraph: true,
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Show Sparkline Area Graph - True, Sparkline Area Color - Blue
+
+- **Key:** Fill Color
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineAreaColor: '#0000FF',
+            showSparklineAreaGraph: true,
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Show Sparkline Area Graph - True, Sparkline Area Color - Red
+
+- **Key:** Color Data Series Area Graph
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            showSparklineAreaGraph: true,
+            sparklineAreaColor: '#FF0000',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Show Sparkline Area Graph - True, Sparkline Area Color - Based on Major Value
+
+- **Key:** Fill Color Using Major Value
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            areaColors: [
+                {
+                    from: 1321,
+                    value: '#00FF00',
+                },
+                {
+                    to: 1321,
+                    value: '#00FFFF',
+                },
+            ],
+        }}
+        options={{
+            majorValue: '> primary | seriesByIndex(0) | lastPoint()',
+            sparklineAreaColor: '> majorValue | rangeValue(areaColors)',
+            showSparklineAreaGraph: true,
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Show Sparkline Area Graph - True, Sparkline Area Color - Based on Trend Value
+
+- **Key:** Fill Color Using Trend Value
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            areaColors: [
+                {
+                    from: 391,
+                    value: '#00FF00',
+                },
+                {
+                    to: 391,
+                    value: '#FF00FF',
+                },
+            ],
+        }}
+        options={{
+            trendValue: '> primary | seriesByIndex(0) | delta(-2)',
+            sparklineAreaColor: '> trendValue | rangeValue(areaColors)',
+            showSparklineAreaGraph: true,
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Show Sparkline Area Graph - True, Sparkline Highlight Dots -  4, Sparkline Highlight Segments - 3
+
+- **Key:** Sparkline High Light
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineHighlightSegments: 3,
+            sparklineHighlightDots: 4,
+            showSparklineAreaGraph: true,
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Display - Off
+
+- **Key:** No Sparkline
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineDisplay: 'off',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Display - Before
+
+- **Key:** Sparkline Before
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineDisplay: '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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Display - After, Show Sparkline Tooltip - True
+
+- **Key:** Sparkline After
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineDisplay: 'after',
+            showSparklineTooltip: true,
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Stroke Color - Red
+
+- **Key:** Stroke Color
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineStrokeColor: '#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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Stroke Color - Based on Major Value
+
+- **Key:** Stroke Color Using Major Value
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            strokeColorThresholds: [
+                {
+                    from: 1321,
+                    value: '#00FF00',
+                },
+                {
+                    to: 1321,
+                    value: '#00FFFF',
+                },
+            ],
+        }}
+        options={{
+            majorValue: '> primary | seriesByIndex(0) | lastPoint()',
+            sparklineStrokeColor: '> majorValue | rangeValue(strokeColorThresholds)',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Stroke Color - Based on Trend Value
+
+- **Key:** Stroke Color Using Trend Value
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            strokeColorThresholds: [
+                {
+                    from: 391,
+                    value: '#00FF00',
+                },
+                {
+                    to: 391,
+                    value: '#FF00FF',
+                },
+            ],
+        }}
+        options={{
+            trendValue: '> primary | seriesByIndex(0) | delta(-2)',
+            sparklineStrokeColor: '> trendValue | rangeValue(strokeColorThresholds)',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Values - Based on Foo Field
+
+- **Key:** Field Foo
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineValues: '>  primary | seriesByName("foo")',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '930', '1320'],
+                        ['1', '2', '3', '4', '5', '6', '7', '3200'],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Sparkline Values - Based on Bar Field
+
+- **Key:** Field Bar
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineValues: '>  primary | seriesByName("bar")',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '930', '1320'],
+                        ['1', '2', '3', '4', '5', '6', '7', '3200'],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Trend Color - Red
+
+- **Key:** Trend Color
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            trendColor: '#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: {},
+            },
+        }}
+    />
+);
+```
+
+## Trend Color - Based on Custom Thresholds
+
+- **Key:** Custom Trend Color Range
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            trendColorThresholds: [
+                {
+                    from: 1321,
+                    value: '#00FFFF',
+                },
+                {
+                    to: 1321,
+                    value: '#FF00FF',
+                },
+            ],
+        }}
+        options={{
+            trendValue: '> sparklineValues | delta(-2)',
+            trendColor: '> trendValue | rangeValue(trendColorThresholds)',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Trend Display - Off
+
+- **Key:** No Trend Indicator
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            trendDisplay: 'off',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Trend Display - Percent
+
+- **Key:** Trend Mode Percent
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            trendDisplay: 'percent',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Trend Value - Based on Foo Field
+
+- **Key:** Trendvaluefoo
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            trendValue: '> primary | seriesByName("foo") | delta(-2)',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Trend Value - Based on Bar Field
+
+- **Key:** Trend Value Bar
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineValues: '> primary | seriesByName("bar")',
+            majorValue: '> sparklineValues | lastPoint()',
+            trendValue: '> sparklineValues | delta(-2)',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '930', '1320'],
+                        ['1', '2', '3', '4', '5', '6', '7', '3200'],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Trend Value - Based on difference between the first and last data points
+
+- **Key:** Trendvaluecustomcomparator
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            sparklineValues: '> primary | seriesByName("foo")',
+            majorValue: '> sparklineValues | lastPoint()',
+            trendValue: '> sparklineValues | delta(0)',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Under Label - Specified
+
+- **Key:** Under Label
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            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: {},
+            },
+        }}
+    />
+);
+```
+
+## Under Label - Specified, Under Label Font Size - 30
+
+- **Key:** Underlabelcustomfontsize
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            underLabel: 'Under Label Test',
+            underLabelFontSize: 30,
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Unit - Specified
+
+- **Key:** Unit After
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            unit: ' Total',
+        }}
+        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: {},
+            },
+        }}
+    />
+);
+```
+
+## Unit - Specified, Unit Position - Before
+
+- **Key:** Unit Before
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        options={{
+            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: {},
+            },
+        }}
+    />
+);
+```
+
+## Trellis
+
+- **Key:** Trellis
+
+```jsx
+import React from 'react';
+import { FeatureFlagContextProvider } from '@splunk/visualization-context/FeatureFlagContext';
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <SingleValue
+            height={250}
+            options={{
+                splitByLayout: 'trellis',
+                trellisSplitBy: 'component',
+                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: {},
+                },
+            }}
+        />
+    </FeatureFlagContextProvider>
+);
+```