@splunk/visualizations 28.5.3 → 28.7.0

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

@@ -0,0 +1,1573 @@
+# Single Value Icon Examples
+
+**Component Reference:** Single Value Icon or @splunk/visualizations/SingleValueIcon
+
+## Basic Single Value Icon
+
+- **Key:** Basic
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValueIcon';
+
+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 third value of Bar Field
+
+- **Key:** Backgroundcolorthirdvaluebar
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import { IconContextProvider } from '@splunk/visualization-context/IconContext';
+import IconRegistry from '@splunk/visualization-context/IconRegistry';
+import MockedProvider from '@splunk/visualization-context/MockedProvider';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+const iconRegistry = IconRegistry.create();
+const mockedProvider = new MockedProvider();
+iconRegistry.addProvider(mockedProvider);
+mockedProvider.upload('https://upload.wikimedia.org/wikipedia/commons/3/36/Ladder_%28example%29.svg');
+
+export default () => (
+    <IconContextProvider value={iconRegistry}>
+        <SingleValueIcon
+            options={{
+                icon: 'mock://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: {},
+                },
+            }}
+        />
+    </IconContextProvider>
+);
+```
+
+## Icon - Custom SVG Icon
+
+- **Key:** Custom Svg Icon
+
+```jsx
+import React from 'react';
+import { IconContextProvider } from '@splunk/visualization-context/IconContext';
+import IconRegistry from '@splunk/visualization-context/IconRegistry';
+import MockedProvider from '@splunk/visualization-context/MockedProvider';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+const iconRegistry = IconRegistry.create();
+const provider = new MockedProvider();
+iconRegistry.addProvider(provider);
+
+const svgIcon =
+    '<svg aria-hidden="true" height="100%" tabindex="-1" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg" class="SVG__StyledSVG-sc-13m0oii-0 gBwlHY"><path d="M4.70711 11.707C4.31658 12.0975 3.68342 12.0975 3.29289 11.707C2.90237 11.3164 2.90237 10.6833 3.29289 10.2927L10.5858 2.99985C11.3668 2.2188 12.6332 2.2188 13.4142 2.99985L20.7071 10.2927C21.0976 10.6833 21.0976 11.3164 20.7071 11.707C20.3166 12.0975 19.6834 12.0975 19.2929 11.707L12 4.41406L4.70711 11.707Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.03608 19.9998C3.13181 19.9998 2.67895 18.9065 3.31836 18.2671L11.2822 10.3033C11.6785 9.90698 12.3212 9.90695 12.7176 10.3033L20.6814 18.2671C21.3208 18.9066 20.8679 19.9998 19.9637 19.9998H4.03608Z"></path></svg>';
+const svgBase64 = `data:image/svg+xml;base64,${btoa(svgIcon)}`;
+const imageId = provider.upload(svgBase64, {});
+
+export default () => (
+    <IconContextProvider value={iconRegistry}>
+        <SingleValueIcon
+            options={{
+                icon: `mock://${imageId}`,
+                iconColor: '#53a051',
+            }}
+            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: {},
+                },
+            }}
+        />
+    </IconContextProvider>
+);
+```
+
+## Icon - Activity, Show Value - False
+
+- **Key:** Fix Icon No Values
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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 and Trend Value - Based on Foo Field
+
+- **Key:** Field Foo
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValueIcon
+        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
+
+```jsx
+import React from 'react';
+import SingleValue from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <SingleValue
+        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
+
+```jsx
+import React from 'react';
+import { FeatureFlagContextProvider } from '@splunk/visualization-context/FeatureFlagContext';
+import SingleValueIcon from '@splunk/visualizations/SingleValueIcon';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <SingleValueIcon
+            height={300}
+            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: {},
+                },
+            }}
+        />
+    </FeatureFlagContextProvider>
+);
+```