@splunk/visualizations 28.5.3 → 28.7.0

package/docs-llm/marker-gauge/examples-react.md

@@ -0,0 +1,367 @@
+# Marker Gauge Examples
+
+**Component Reference:** Marker Gauge or @splunk/visualizations/MarkerGauge
+
+## Basic Marker Gauge
+
+- **Key:** Basic
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{}}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Background Color - Light Blue
+
+- **Key:** Background Color
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{ backgroundColor: '#ADD8E6' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Gauge Ranges: negative 10 to 40 - Cyan
+
+- **Key:** Ranges Single Step
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{
+            gaugeRanges: [
+                {
+                    from: -10,
+                    to: 40,
+                    value: '#00FFFF',
+                },
+            ],
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Gauge Ranges: 0 to 10 - Cyan, 10 to 20 - Orange, 20 to 30 - Green, 30 to 40 - Light Blue
+
+- **Key:** Ranges Multiple Step
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{
+            gaugeRanges: [
+                {
+                    from: 0,
+                    to: 10,
+                    value: '#00FFFF',
+                },
+                {
+                    from: 10,
+                    to: 20,
+                    value: '#FFA500',
+                },
+                {
+                    from: 20,
+                    to: 30,
+                    value: '#008000',
+                },
+                {
+                    from: 30,
+                    to: 40,
+                    value: '#ADD8E6',
+                },
+            ],
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Label Display - Percentage
+
+- **Key:** Percentage Range
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{ labelDisplay: 'percentage' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Label Display - Off
+
+- **Key:** No Labels
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{ labelDisplay: 'off' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Major Tick Interval - 10
+
+- **Key:** Major Unit
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{ majorTickInterval: 10 }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Orientation - Horizontal
+
+- **Key:** Horizontal
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{
+            orientation: 'horizontal',
+        }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Value Display - Percentage
+
+- **Key:** Percentage Value
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{ valueDisplay: 'percentage' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Value Display - Off
+
+- **Key:** No Value
+
+```jsx
+import React from 'react';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <MarkerGauge
+        options={{ valueDisplay: 'off' }}
+        dataSources={{
+            primary: {
+                requestParams: { offset: 0, count: 20 },
+                data: {
+                    fields: [
+                        {
+                            name: 'count',
+                        },
+                    ],
+                    columns: [['20']],
+                },
+                meta: { totalCount: 100 },
+            },
+        }}
+    />
+);
+```
+
+## Trellis
+
+- **Key:** Trellis
+
+```jsx
+import React from 'react';
+import { FeatureFlagContextProvider } from '@splunk/visualization-context/FeatureFlagContext';
+import MarkerGauge from '@splunk/visualizations/MarkerGauge';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ visualizations_enableTrellis: true }}>
+        <MarkerGauge
+            options={{
+                splitByLayout: 'trellis',
+                trellisSplitBy: 'component',
+            }}
+            dataSources={{
+                primary: {
+                    data: {
+                        fields: [
+                            {
+                                name: 'component',
+                                groupby_rank: '0',
+                            },
+                            {
+                                name: 'count',
+                            },
+                        ],
+                        columns: [
+                            ['Database', 'API', 'Cache', 'Queue', 'Frontend', 'Backend'],
+                            ['78', '65', '82', '91', '73', '88'],
+                        ],
+                    },
+                    meta: {},
+                },
+            }}
+        />
+    </FeatureFlagContextProvider>
+);
+```

package/docs-llm/marker-gauge/options.md

@@ -0,0 +1,26 @@
+# Marker Gauge Visualization Options
+
+**Component Reference:** Marker Gauge or @splunk/visualizations/markerGauge
+
+Source: `@splunk/visualization-schemas/markerGaugeOptionsSchema`
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `backgroundColor` | string \| string | `> themes.defaultBackgroundColor` | Specify the color used for the background. The default for enterprise light is "#ffffff". The default for enterprise dark is "#000000". The default for prisma dark is "#0b0c0e". |
+| `gaugeRanges` | array<object> \| string | `[{"from":0,"to":50,"value":"#118832"},{"from":50,"to":90,"value":"#CBA700"},{"from":90,"to":100,"value":"#D41F1F"}]` | Specify the overall range of the gauge as a series of continuous, color-coded subranges. For example, [{"from": 0, "to": 20, "value": "#4BEBA8"}, {"from": 20, "to": 50, "value": "#F4DF7A"}]. |
+| `labelDisplay` | string \| string | `number` | Specify whether to display the labels as numbers, percentages, or off. The label center aligns to the value. |
+| `majorTickInterval` | string \| number \| string | `auto` | Specify the interval between major tick marks. |
+| `orientation` | string \| string | `vertical` | Specify the axis orientation of the gauge. |
+| `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 | `200` | 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 | `200` | 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, name to sort alphabetically by visualization label, or value to sort by the major value. |
+| `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` | string \| string | `> primary \| seriesByType("number") \| lastPoint()` | Specify the dataSource applied to the value of the marker gauge. |
+| `valueDisplay` | string \| string | `number` | Specify whether to display the value as a number, percentage, or off. |
+
+_Auto-generated; do not edit by hand._

package/docs-llm/marker-gauge/overview.md

@@ -0,0 +1,5 @@
+# Marker Gauge Visualization Guide
+
+**Component Reference:** Marker Gauge or @splunk/visualizations/MarkerGauge
+
+_Overview content not available for this visualization._