@splunk/visualizations 28.6.0 → 28.7.0

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

@@ -0,0 +1,1028 @@
+# Single Value Radial Examples
+
+**Component Reference:** Single Value Radial or @splunk/visualizations/SingleValueRadial
+
+## Basic Single Value Radial
+
+- **Key:** Basic
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{}}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Background Color - Red
+
+- **Key:** Background Color Red
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            backgroundColor: '#ff0000',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Major Value - Based on Foo Field
+
+- **Key:** Radial Field Foo
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            majorValue: '> primary | seriesByName("foo") | lastPoint()',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '70', '80'],
+                        ['1', '2', '3', '4', '5', '6', '7', '3200'],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Major Value - Based on Bar Field
+
+- **Key:** Radial Field Bar
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            majorValue: '> primary | seriesByName("bar") | lastPoint()',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '70', '80'],
+                        ['1', '2', '3', '4', '5', '6', '7', '3200'],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Max Value - 1000
+
+- **Key:** Radial Max Value
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            maxValue: 1000,
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Radial Stroke Color - Flamenco, Radial Background Color - Valencia
+
+- **Key:** Radialcolorcustom
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            radialBackgroundColor: '#DC4E41',
+            radialStrokeColor: '#F1813F',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Radial Background Color - Based on Data Series Color
+
+- **Key:** Radial Color Data Series
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            radialBackgroundColor: '> primary | seriesByName("bar") | lastPoint()',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '55'],
+                        [
+                            '#FF0000',
+                            '#00FFFF',
+                            '#0000FF',
+                            '#800080',
+                            '#FFFF00',
+                            '#FFA500',
+                            '#A52A2A',
+                            '#008000',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Radial Stroke Color - Based on Data Series Color
+
+- **Key:** Radial Stroke Color Data Series
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            radialStrokeColor: '> primary | seriesByName("bar") | lastPoint()',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '88'],
+                        [
+                            '#FF0000',
+                            '#00FFFF',
+                            '#0000FF',
+                            '#800080',
+                            '#FFFF00',
+                            '#FFA500',
+                            '#A52A2A',
+                            '#008000',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Trend Display - Percent
+
+- **Key:** Radial Trend Mode Percent
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            trendDisplay: 'percent',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Basic Single Value Radial - With Gauge
+
+- **Key:** Basicwithgauge
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            isGaugeOn: true,
+            gaugeRanges: [
+                {
+                    to: 50,
+                    value: '#118832',
+                },
+                {
+                    from: 50,
+                    to: 90,
+                    value: '#CBA700',
+                },
+                {
+                    from: 90,
+                    value: '#D41F1F',
+                },
+            ],
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Background Color - Red - With Gauge
+
+- **Key:** Background Color Red With Gauge
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            backgroundColor: '#ff0000',
+            isGaugeOn: true,
+            gaugeRanges: [
+                {
+                    to: 50,
+                    value: '#118832',
+                },
+                {
+                    from: 50,
+                    to: 90,
+                    value: '#CBA700',
+                },
+                {
+                    from: 90,
+                    value: '#D41F1F',
+                },
+            ],
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Major Value and Trend Value - Based on majorValueDisplay
+
+- **Key:** Majorvaluebasedonmajorvaluedisplay
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        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 - Based on Foo Field - With Gauge
+
+- **Key:** Radial Field Foo With Gauge
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            majorValue: '> primary | seriesByName("foo") | lastPoint()',
+            isGaugeOn: true,
+            gaugeRanges: [
+                {
+                    to: 50,
+                    value: '#118832',
+                },
+                {
+                    from: 50,
+                    to: 90,
+                    value: '#CBA700',
+                },
+                {
+                    from: 90,
+                    value: '#D41F1F',
+                },
+            ],
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '70', '80'],
+                        ['1', '2', '3', '4', '5', '6', '7', '3200'],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Major Value - Based on Bar Field - With Gauge
+
+- **Key:** Radial Field Bar With Gauge
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            majorValue: '> primary | seriesByName("bar") | lastPoint()',
+            isGaugeOn: true,
+            gaugeRanges: [
+                {
+                    to: 50,
+                    value: '#118832',
+                },
+                {
+                    from: 50,
+                    to: 90,
+                    value: '#CBA700',
+                },
+                {
+                    from: 90,
+                    value: '#D41F1F',
+                },
+            ],
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['1', '62', '103', '308', '587', '876', '70', '80'],
+                        ['1', '2', '3', '4', '5', '6', '7', '3200'],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Radial Background Color - Based on Data Series Color - With Gauge
+
+- **Key:** Radial Color Data Series With Gauge
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            radialBackgroundColor: '> primary | seriesByName("bar") | lastPoint()',
+            isGaugeOn: true,
+            gaugeRanges: [
+                {
+                    to: 50,
+                    value: '#118832',
+                },
+                {
+                    from: 50,
+                    to: 90,
+                    value: '#CBA700',
+                },
+                {
+                    from: 90,
+                    value: '#D41F1F',
+                },
+            ],
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '55'],
+                        [
+                            '#FF0000',
+                            '#00FFFF',
+                            '#0000FF',
+                            '#800080',
+                            '#FFFF00',
+                            '#FFA500',
+                            '#A52A2A',
+                            '#008000',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Trend Display - Percent - With Gauge
+
+- **Key:** Radial Trend Mode Percent With Gauge
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            trendDisplay: 'percent',
+            isGaugeOn: true,
+            gaugeRanges: [
+                {
+                    to: 50,
+                    value: '#118832',
+                },
+                {
+                    from: 50,
+                    to: 90,
+                    value: '#CBA700',
+                },
+                {
+                    from: 90,
+                    value: '#D41F1F',
+                },
+            ],
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## One Gauge Range
+
+- **Key:** One Gauge Range
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            isGaugeOn: true,
+            gaugeRanges: [
+                {
+                    to: 30,
+                    value: '#118832',
+                },
+                {
+                    from: 30,
+                    to: 50,
+                    value: '#118832',
+                },
+                {
+                    from: 50,
+                    value: '#118832',
+                },
+            ],
+            minValue: 30,
+            maxValue: 50,
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Five Gauge Ranges
+
+- **Key:** Five Gauge Ranges
+
+```jsx
+import React from 'react';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <SingleValueRadial
+        options={{
+            isGaugeOn: true,
+            gaugeRanges: [
+                {
+                    to: 25,
+                    value: '#2CBA00',
+                },
+                {
+                    from: 25,
+                    to: 50,
+                    value: '#A3FF00',
+                },
+                {
+                    from: 50,
+                    to: 100,
+                    value: '#FFF400',
+                },
+                {
+                    from: 100,
+                    to: 175,
+                    value: '#FFA700',
+                },
+                {
+                    from: 175,
+                    value: '#FF0000',
+                },
+            ],
+            maxValue: 200,
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [
+                        ['5', '12', '46', '23', '51', '115', '63', '88'],
+                        [
+                            '2018-08-19T00:00:00.000+00:00',
+                            '2018-08-20T00:00:00.000+00:00',
+                            '2018-08-21T00:00:00.000+00:00',
+                            '2018-08-22T00:00:00.000+00:00',
+                            '2018-08-23T00:00:00.000+00:00',
+                            '2018-08-24T00:00:00.000+00:00',
+                            '2018-08-25T00:00:00.000+00:00',
+                            '2018-08-26T00:00:00.000+00:00',
+                        ],
+                    ],
+                    fields: [
+                        {
+                            name: 'foo',
+                        },
+                        {
+                            name: '_time',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```
+
+## Trellis
+
+- **Key:** Trellis
+
+```jsx
+import React from 'react';
+import { FeatureFlagContextProvider } from '@splunk/visualization-context/FeatureFlagContext';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <SingleValueRadial
+            height={250}
+            options={{
+                splitByLayout: 'trellis',
+                trellisSplitBy: 'component',
+                trellisColumns: 3,
+                trellis: {
+                    minColumnWidth: 400,
+                },
+            }}
+            dataSources={{
+                primary: {
+                    data: {
+                        fields: [
+                            {
+                                name: 'component',
+                                groupby_rank: '0',
+                            },
+                            {
+                                name: 'foo',
+                            },
+                            {
+                                name: 'bar',
+                            },
+                        ],
+                        columns: [
+                            ['Database', 'API', 'Cache', 'Queue', 'Frontend', 'Backend'],
+                            ['55', '72', '64', '80', '68', '75'],
+                            ['110', '121', '107', '134', '115', '125'],
+                        ],
+                    },
+                    meta: {},
+                },
+            }}
+        />
+    </FeatureFlagContextProvider>
+);
+```
+
+## Trellis - With Gauge
+
+- **Key:** Trellis With Gauge
+
+```jsx
+import React from 'react';
+import { FeatureFlagContextProvider } from '@splunk/visualization-context/FeatureFlagContext';
+import SingleValueRadial from '@splunk/visualizations/SingleValueRadial';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <SingleValueRadial
+            height={250}
+            options={{
+                splitByLayout: 'trellis',
+                trellisSplitBy: 'component',
+                isGaugeOn: true,
+                gaugeRanges: [
+                    {
+                        to: 50,
+                        value: '#118832',
+                    },
+                    {
+                        from: 50,
+                        to: 90,
+                        value: '#CBA700',
+                    },
+                    {
+                        from: 90,
+                        value: '#D41F1F',
+                    },
+                ],
+                trellisColumns: 3,
+                trellis: {
+                    minColumnWidth: 400,
+                },
+            }}
+            dataSources={{
+                primary: {
+                    data: {
+                        fields: [
+                            {
+                                name: 'component',
+                                groupby_rank: '0',
+                            },
+                            {
+                                name: 'foo',
+                            },
+                            {
+                                name: 'bar',
+                            },
+                        ],
+                        columns: [
+                            ['Database', 'API', 'Cache', 'Queue', 'Frontend', 'Backend'],
+                            ['55', '72', '64', '80', '68', '75'],
+                            ['110', '121', '107', '134', '115', '125'],
+                        ],
+                    },
+                    meta: {},
+                },
+            }}
+        />
+    </FeatureFlagContextProvider>
+);
+```