@splunk/visualizations 28.6.0 → 28.8.0

package/docs-llm/choropleth-svg/examples-react.md

@@ -0,0 +1,389 @@
+# ChoroplethSVG Examples
+
+**Component Reference:** ChoroplethSVG or @splunk/visualizations/ChoroplethSvg
+
+## Loaded as a literal SVG
+
+- **Key:** Literal Svg Example
+
+```jsx
+import React from 'react';
+import ChoroplethSvg from '@splunk/visualizations/ChoroplethSvg';
+import { campusSvg } from '../../mockdata/campusSvg.js';
+
+export default () => (
+    <ChoroplethSvg
+        width={700}
+        height={500}
+        options={{ svg: campusSvg }}
+        dataSources={{
+            primary: {
+                data: {
+                    fields: [{ name: 'foo' }],
+                    columns: [[1]],
+                },
+            },
+        }}
+    />
+);
+```
+
+## Loaded as a SVG data URI
+
+- **Key:** Data Urisvg Example
+
+```jsx
+import React from 'react';
+import ChoroplethSvg from '@splunk/visualizations/ChoroplethSvg';
+import { campusSvgDataURI } from '../../mockdata/campusSvgDataURI.js';
+
+export default () => (
+    <ChoroplethSvg
+        width={700}
+        height={500}
+        options={{ svg: campusSvgDataURI }}
+        dataSources={{
+            primary: {
+                data: {
+                    fields: [{ name: 'foo' }],
+                    columns: [[1]],
+                },
+            },
+        }}
+    />
+);
+```
+
+## Remote SVG Example
+
+- **Key:** Remote Svg Example
+
+```jsx
+import React from 'react';
+import ChoroplethSvg from '@splunk/visualizations/ChoroplethSvg';
+import { FeatureFlagContextProvider } from '@splunk/visualization-context/FeatureFlagContext';
+
+export default () => (
+    <FeatureFlagContextProvider value={{ enableSvgHttpDownloader: true }}>
+        <ChoroplethSvg
+            width={700}
+            height={500}
+            options={{
+                svg: 'https://splunkudftest.s3-us-west-1.amazonaws.com/campus.svg',
+            }}
+            dataSources={{
+                primary: {
+                    data: {
+                        fields: [{ name: 'foo' }],
+                        columns: [[1]],
+                    },
+                },
+            }}
+        />
+    </FeatureFlagContextProvider>
+);
+```
+
+## Set the background color
+
+- **Key:** Background Color Example
+
+```jsx
+import React from 'react';
+import ChoroplethSvg from '@splunk/visualizations/ChoroplethSvg';
+import { campusSvg } from '../../mockdata/campusSvg.js';
+
+export default () => (
+    <ChoroplethSvg
+        width={700}
+        height={700}
+        options={{
+            backgroundColor: '#00FFFF',
+            svg: campusSvg,
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    fields: [{ name: 'foo' }],
+                    columns: [[1]],
+                },
+            },
+        }}
+    />
+);
+```
+
+## Specify match color values for individual region fill colors using areaIds
+
+- **Key:** Area Id Match Color
+
+```jsx
+import React from 'react';
+import ChoroplethSvg from '@splunk/visualizations/ChoroplethSvg';
+import { campusSvg } from '../../mockdata/campusSvg';
+
+export default () => (
+    <ChoroplethSvg
+        width={700}
+        height={500}
+        context={{
+            matches: [
+                {
+                    match: 'ATX-270-B',
+                    value: '#FF7152',
+                },
+                {
+                    match: 'N-224',
+                    value: '#FC9850',
+                },
+                {
+                    match: 'VM-203',
+                    value: '#4BEBA8',
+                },
+                {
+                    match: 'RF-380',
+                    value: '#F4DF7A',
+                },
+            ],
+        }}
+        options={{
+            svg: campusSvg,
+            areaIds: '> primary|seriesByIndex(0)',
+            areaValues: '> primary|seriesByIndex(1)',
+            areaColors: '> areaIds|matchValue(matches)',
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    fields: [
+                        {
+                            name: 'buildings',
+                        },
+                        {
+                            name: 'values',
+                        },
+                    ],
+                    columns: [
+                        ['ATX-270-B', 'N-224', 'VM-203', 'RF-380'],
+                        [10000, 55000, 90000, 75000],
+                    ],
+                },
+            },
+        }}
+    />
+);
+```
+
+## Specify range values for individual region fill colors
+
+- **Key:** Color Ranges Example
+
+```jsx
+import React from 'react';
+import ChoroplethSvg from '@splunk/visualizations/ChoroplethSvg';
+import { campusSvgDataURI } from '../../mockdata/campusSvgDataURI.js';
+
+export default () => (
+    <ChoroplethSvg
+        context={{
+            areaColorThresholds: [
+                {
+                    from: 100000,
+                    value: '#4BEBA8',
+                },
+                {
+                    from: 50000,
+                    to: 100000,
+                    value: '#F4DF7A',
+                },
+                {
+                    from: 1000,
+                    to: 50000,
+                    value: '#FC9850',
+                },
+                {
+                    to: 1000,
+                    value: '#FF7152',
+                },
+            ],
+        }}
+        width={700}
+        height={500}
+        options={{
+            areaIds: '> primary | seriesByIndex(0)',
+            areaValues: '> primary | seriesByIndex(1)',
+            areaColors: '> areaValues | rangeValue(areaColorThresholds)',
+            svg: campusSvgDataURI,
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    fields: [
+                        {
+                            name: 'buildings',
+                        },
+                        {
+                            name: 'values',
+                        },
+                    ],
+                    columns: [
+                        ['ATX-270-B', 'N-224', 'VM-203', 'RF-380'],
+                        [10000, 55000, 90000, 75000],
+                    ],
+                },
+            },
+        }}
+    />
+);
+```
+
+## Specify multiple formatting configs for each individual region fill colors
+
+- **Key:** Multiple Color Ranges Example
+
+```jsx
+import React from 'react';
+import ChoroplethSvg from '@splunk/visualizations/ChoroplethSvg';
+import { campusSvgDataURI } from '../../mockdata/campusSvgDataURI.js';
+
+export default () => (
+    <ChoroplethSvg
+        context={{
+            areaColorsConfig: {
+                nameField: 'buildings',
+                valueField: 'values',
+                formatters: {
+                    'ATX-270-B': {
+                        type: 'matchValue',
+                        config: [
+                            {
+                                match: 10000,
+                                value: '#00FF00',
+                            },
+                            {
+                                match: 20000,
+                                value: '#FF0000',
+                            },
+                        ],
+                    },
+                    'N-224': {
+                        type: 'gradient',
+                        config: {
+                            colors: ['#FF7152', '#FFEBA8'],
+                        },
+                    },
+                    'VM-203': {
+                        type: 'rangeValue',
+                        config: [
+                            {
+                                from: 80000,
+                                value: '#4B4BFF',
+                            },
+                            {
+                                to: 20000,
+                                value: '#FF0000',
+                            },
+                        ],
+                    },
+                    'RF-380': {
+                        type: 'rangeValue',
+                        config: [
+                            {
+                                from: 80000,
+                                value: '#4BEBA8',
+                            },
+                            {
+                                from: 60000,
+                                to: 80000,
+                                value: '#F4DF7A',
+                            },
+                            {
+                                from: 20000,
+                                to: 60000,
+                                value: '#FC9850',
+                            },
+                            {
+                                to: 20000,
+                                value: '#FF0000',
+                            },
+                        ],
+                    },
+                },
+            },
+        }}
+        width={700}
+        height={500}
+        options={{
+            areaIds: '> primary | seriesByIndex(0)',
+            areaValues: '> primary | seriesByIndex(1)',
+            areaColors: '> primary | multiFormat(areaColorsConfig)',
+            svg: campusSvgDataURI,
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    fields: [
+                        {
+                            name: 'buildings',
+                        },
+                        {
+                            name: 'values',
+                        },
+                    ],
+                    columns: [
+                        ['ATX-270-B', 'N-224', 'VM-203', 'RF-380'],
+                        [10000, 55000, 90000, 75000],
+                    ],
+                },
+            },
+        }}
+    />
+);
+```
+
+## Specify linear gradient for individual region fill colors
+
+- **Key:** Color Gradient Example
+
+```jsx
+import React from 'react';
+import ChoroplethSvg from '@splunk/visualizations/ChoroplethSvg';
+import { campusSvg } from '../../mockdata/campusSvg';
+
+export default () => (
+    <ChoroplethSvg
+        context={{
+            areaColorGradient: {
+                colors: ['#FF7152', '#4BEBA8'],
+            },
+        }}
+        loading={false}
+        width={700}
+        height={500}
+        options={{
+            areaIds: '> primary | seriesByIndex(0)',
+            areaValues: '> primary | seriesByIndex(1)',
+            areaColors: '> areaValues | gradient(areaColorGradient)',
+            svg: campusSvg,
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    fields: [
+                        {
+                            name: 'buildings',
+                        },
+                        {
+                            name: 'values',
+                        },
+                    ],
+                    columns: [
+                        ['ATX-270-B', 'N-224', 'VM-203', 'RF-380'],
+                        [10000, 55000, 90000, 75000],
+                    ],
+                },
+            },
+        }}
+    />
+);
+```

package/docs-llm/choropleth-svg/options.md

@@ -0,0 +1,15 @@
+# Choropleth Svg Visualization Options
+
+**Component Reference:** Choropleth Svg or @splunk/visualizations/choroplethSvg
+
+Source: `@splunk/visualization-schemas/choroplethSvgOptionsSchema`
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `areaColors` | array<string> | `> areaValues\|rangeValue(areaColorsRangeConfig)` | Specify the dataSource field that should be used to set the svg fill attribute of identified areas. Items: string |
+| `areaIds` | array<string> | `> primary\|seriesByType("string")` | Specify the dataSource field that should be used to identify each area in the Choropleth svg, where the area has been tagged with an id field. Items: string |
+| `areaValues` | array<number> | `> primary\|seriesByType("number")` | Specify the dataSource field that indicates the values for the areas. Items: number |
+| `backgroundColor` | string | `> themes.defaultBackgroundColor` | the background color behind the SVG, title, and description. Pattern: `^#(?:[0-9a-fA-F]{3,4}\|[0-9a-fA-F]{6}\|[0-9a-fA-F]{8})$\|^transparent$\|^rgb\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3})\\)$\|^rgba\\(\\s*(\\d{1,3}%?),\\s*(\\d{1,3}%?),\\s*(\\d{1,3}%?),\\s*(\\d*(?:\\.\\d+)?)\\)$\|\\$(\\w+:)?([^$\|:]+?)(\\\|[\|\\w]+)?\\$` |
+| `svg` | string | — | Literal svg, or svg data URI. |
+
+_Auto-generated; do not edit by hand._

package/docs-llm/choropleth-svg/overview.md

@@ -0,0 +1,23 @@
+# ChoroplethSVG Visualization Guide
+
+**Component Reference:** ChoroplethSVG or @splunk/visualizations/ChoroplethSvg
+
+## Overview
+
+A choropleth SVG can be used to represent values within predefined regions with color. It is great for showing spatial data. Any custom Scalable Vector Graphic (SVG) image can be used. Use a choropleth SVG to display contextual data in objects, maps, or other custom shapes.
+
+## Details
+
+- **Category:** Spatial
+
+## Tips
+
+- Use a legend to help viewers understand the meaning of the colors in the SVG.
+
+## Variations
+
+| Variation | Description | Key |
+| --- | --- | --- |
+| Coloring By Gradient | Use gradient coloring to convey ordinal, quantitative data in choropleth images. | colorByGradient |
+| Coloring By Range Value | Use range value coloring to convey numeric thresholds. | colorByRangeValue |
+| Coloring By Match Value | Use match value coloring to convey specific numeric or string values. | colorByMatchValue |