@splunk/visualizations 28.5.3 → 28.7.0

package/docs-llm/pie/examples-react.md

@@ -0,0 +1,606 @@
+# Pie Examples
+
+**Component Reference:** Pie or @splunk/visualizations/Pie
+
+## Basic Pie
+
+- **Key:** Basic Pie
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{}}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Background Color - Orange
+
+- **Key:** Background Color
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{ backgroundColor: '#f29335' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Collapse Label - New Label
+
+- **Key:** Collapsinglabel
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{ collapseLabel: 'New Collapsing Label' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Collapse Threshold - 5
+
+- **Key:** Slicecollapsingthreshold
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{ collapseThreshold: 0.05 }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Label Display - Percent
+
+- **Key:** Labelswithpercentpie
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{ labelDisplay: 'valuesAndPercentage' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Label Display - Off
+
+- **Key:** Nolabelspie
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{ labelDisplay: 'off' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Result Limit - 5
+
+- **Key:** Truncatedsizepie
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{ resultLimit: '5' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Series Colors: Yellow, Blue, Green
+
+- **Key:** Series Colors
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{ seriesColors: ['#FFFF00', '#0000FF', '#008000'] }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Series Colors by Field: December - Green, May - Red
+
+- **Key:** Field Colors
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{
+            seriesColorsByField: { December: '#008000', May: '#FF0000' },
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Show Donut Hole - True
+
+- **Key:** Donut
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{
+            showDonutHole: true,
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'January',
+                            'February',
+                            'March',
+                            'April',
+                            'May',
+                            'June',
+                            'July',
+                            'August',
+                            'September',
+                            'October',
+                            'November',
+                            'December',
+                        ],
+                        ['1', '1', '1', '2', '10', '10', '5', '5', '5', '5', '5', '50'],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Collapse - Exclude zeros and non-numeric values in the consolidated slice.
+
+- **Key:** Collapse Exclude Zero
+
+```jsx
+import React from 'react';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <Pie
+        options={{ collapseExcludeZero: true }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [{ name: 'component' }, { name: 'count' }],
+                    columns: [
+                        [
+                            'a',
+                            'b',
+                            'c',
+                            'd',
+                            'e',
+                            'f',
+                            'g',
+                            'h',
+                            'i',
+                            'j',
+                            'k',
+                            'l',
+                            'm',
+                            'n',
+                            'o',
+                            'p',
+                            'q',
+                            'r',
+                            's',
+                            't',
+                            'u',
+                            'v',
+                            'w',
+                            'x',
+                            'y',
+                            'z',
+                        ],
+                        [
+                            '0',
+                            '0',
+                            '0',
+                            '1',
+                            '1',
+                            '1',
+                            '86',
+                            '98',
+                            '29',
+                            '13',
+                            '68',
+                            '60',
+                            '44',
+                            '73',
+                            '63',
+                            '57',
+                            '36',
+                            '31',
+                            '42',
+                            '58',
+                            '86',
+                            '44',
+                            '62',
+                            '97',
+                            '90',
+                            '97',
+                        ],
+                    ],
+                },
+                meta: { totalCount: 20 },
+            },
+        }}
+    />
+);
+```
+
+## Trellis
+
+- **Key:** Trellis
+
+```jsx
+import React from 'react';
+import { FeatureFlagContextProvider } from '@splunk/visualization-context/FeatureFlagContext';
+import Pie from '@splunk/visualizations/Pie';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <Pie
+            height={400}
+            options={{
+                splitByLayout: 'trellis',
+                trellisSplitBy: 'month',
+                trellis: {
+                    minColumnWidth: 200,
+                },
+            }}
+            dataSources={{
+                primary: {
+                    data: {
+                        fields: [
+                            {
+                                name: 'component',
+                                groupby_rank: '0',
+                            },
+                            {
+                                name: 'month',
+                                groupby_rank: '1',
+                            },
+                            {
+                                name: 'count',
+                            },
+                        ],
+                        columns: [
+                            [
+                                'Database',
+                                'API',
+                                'UI',
+                                'Database',
+                                'API',
+                                'UI',
+                                'Database',
+                                'API',
+                                'UI',
+                                'Database',
+                                'API',
+                                'UI',
+                                'Database',
+                                'API',
+                                'UI',
+                                'Database',
+                                'API',
+                                'UI',
+                            ],
+                            [
+                                'January',
+                                'January',
+                                'January',
+                                'March',
+                                'March',
+                                'March',
+                                'May',
+                                'May',
+                                'May',
+                                'July',
+                                'July',
+                                'July',
+                                'September',
+                                'September',
+                                'September',
+                                'November',
+                                'November',
+                                'November',
+                            ],
+                            [
+                                '45',
+                                '32',
+                                '23',
+                                '42',
+                                '35',
+                                '28',
+                                '52',
+                                '38',
+                                '30',
+                                '48',
+                                '35',
+                                '27',
+                                '50',
+                                '40',
+                                '25',
+                                '47',
+                                '36',
+                                '29',
+                            ],
+                        ],
+                    },
+                    meta: {},
+                },
+            }}
+        />
+    </FeatureFlagContextProvider>
+);
+```

package/docs-llm/pie/options.md

@@ -0,0 +1,34 @@
+# Pie Visualization Options
+
+**Component Reference:** Pie or @splunk/visualizations/pie
+
+Source: `@splunk/visualization-schemas/pieOptionsSchema`
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `backgroundColor` | string \| string | `> themes.defaultBackgroundColor` | Specify the color for the background. You may use a dataSource to apply the color. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e". |
+| `collapseExcludeZero` | boolean \| string | `false` | Specify whether to exclude zeros and non-numeric values in the consolidated slice. |
+| `collapseLabel` | string \| string | `other` | Specify the label for the consolidated slice. |
+| `collapseThreshold` | number \| string | `0.01` | Specify the size threshold as a number between 0 and 1 (inclusive), of the whole pie at which slices collapse into one consolidated slice. |
+| `label` | array<string> \| string | `> primary \| seriesByIndex(0)` | List of string values to display the pie chart labels. |
+| `labelDisplay` | string \| string | `values` | Specify whether to display the labels and/or slice percentages. |
+| `labelField` | string \| string | `> label \| getField()` | Specify the field that corresponds to the labels. |
+| `legendDisplay` | string \| string | `off` | Specify the location of the legend on the panel. |
+| `percentagePrecision` | number \| string | `0` | Specify the number of decimal places to display for percentages. The minimum value is 0. The maximum value is 16. |
+| `resultLimit` | number \| string | `50000` | Specify the number of data points rendered in a chart. |
+| `seriesColors` | array<string> \| string | `["#7B56DB","#009CEB","#00CDAF","#DD9900","#FF677B","#CB2196","#813193","#0051B5","#008C80","#99B100","#FFA476","#FF6ACE","#AE8CFF","#00689D","#00490A","#465D00","#9D6300","#F6540B","#FF969E","#E47BFE"]` | Specify the colors used for a series. For example, ["#FF0000", "#0000FF", "#008000"]. |
+| `seriesColorsByField` | object | — | Specify the colors used for specific pie slice labels. For example: {"April": "#008000", "May": "#FFA500"}. |
+| `showDonutHole` | boolean \| string | `false` | Specify whether the pie should be a donut. |
+| `splitByLayout` | string \| string | `off` | Specify the layout method by which to display the visualization, which splits the data into individual visualizations based on a certain category. |
+| `trellisBackgroundColor` | string \| string | `> themes.defaultBackgroundColor` | Specify the color used for the trellis container background by using a hexadecimal code. For example, #0000FF. |
+| `trellisColumns` | number \| string | `3` | Specify the number of visualizations to display in a given row of the trellis container. The remaining visualizations will wrap accordingly. If nothing is specified, it will be auto-set based on the trellisMinColumnWidth. The minimum value is 1. |
+| `trellisMinColumnWidth` | number \| string | `250` | Specify the minimum width, in pixels, of each visualization in the trellis container. If the window or panel is resized, the remaining visualizations may be viewed by scrolling. The minimum value is 1. |
+| `trellisPageCount` | number \| string | `20` | Specify the maximum number of visualizations to display in a single page in the trellis container. The remaining visualizations will paginate accordingly. The minimum value is 1. |
+| `trellisRowHeight` | number \| string | `180` | Specify the height, in pixels, of each visualization in the trellis container. If the window or panel is resized, the remaining visualizations may be viewed by scrolling. The minimum value is 1. |
+| `trellisSortBy` | string \| string | `result` | Specify the sort method for the individual visualizations in the trellis container. Use result to sort by search result order, or name to sort alphabetically by visualization label. |
+| `trellisSortOrder` | string \| string | `ascending` | Specify the sort order for the individual visualizations in the trellis container. This setting applies to the sort method specified in trellisSortBy. |
+| `trellisSplitBy` | string \| string | — | Specify the field name of the column with categories used, or “aggregations”, to split the data into individual visualizations for trellis display, if applicable. If a SPL `timechart` command is used, this may default to the SPL `by` clause field. If a SPL `chart` command is used, this may default to the first string field. |
+| `value` | array<number> \| string | `> primary \| seriesByIndex(1)` | List of numerical values to power the pie chart. |
+| `valueField` | string \| string | `> value \| getField()` | Specify the field that corresponds to the data powering values. |
+
+_Auto-generated; do not edit by hand._

package/docs-llm/pie/overview.md

@@ -0,0 +1,23 @@
+# Pie Visualization Guide
+
+**Component Reference:** Pie or @splunk/visualizations/Pie
+
+## Overview
+
+Use a pie chart to show how different field values combine over an entire data set. Each slice of a pie chart represents the relative importance or volume of a particular category out of a whole.
+
+## Details
+
+- **Category:** Comparisons
+- **Visualization Type:** splunk.pie
+
+## Tips
+
+- Only use a pie chart when you are comparing values that are part of a whole.
+- If you would like to compare non time series data that does not add up to a whole, try using a bar chart or another comparison chart instead.
+
+## Variations
+
+| Variation | Description | Key |
+| --- | --- | --- |
+| Donut | Use a donut pie chart for a stylistic change. | donut |