@splunk/visualizations 28.6.0 → 28.8.0

package/docs-llm/column/options.md

@@ -0,0 +1,94 @@
+# Column Visualization Options
+
+**Component Reference:** Column or @splunk/visualizations/column
+
+Source: `@splunk/visualization-schemas/columnOptionsSchema`
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `additionalTooltipFields` | array<string> | `[]` | Specify the fields to add to the default set of tooltips. Tooltips appear when you hover over events. These fields and their corresponding values are shown in addition to the ones displayed by default. Items: string |
+| `annotationColor` | array<string> | — | Specify the annotation colors. For example, [“#FF0000”, “#0000FF", “#008000”]. You can use a data source or hexadecimal code to apply the color. Items: string |
+| `annotationLabel` | array<string> | — | Specify a list of labels to use for annotations. For example, [“Sales”, “Revenue”, “Orders”].You can use a data source to apply the labels. Items: string |
+| `annotationX` | array<string \| number> | — | Specify a data source field to apply to the event annotation on the x-axis. Items: string \| number |
+| `backgroundColor` | string | `> themes.defaultBackgroundColor` | Specify the color to use for the background. You can use a data source or a hexadecimal code to apply the color. 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]+)?\\$` |
+| `columnGrouping` | string | `auto` | Specify a column grouping mode. If chart.stackMode is defined, it overrides grouping mode settings. Allowed values: `auto`, `overlay` |
+| `columnSpacing` | number | — | Specifies the spacing (px) between columns in a column chart. |
+| `dataValuesDisplay` | string | `off` | Specify the labels to display. Enter "all" to show labels for all data points, "off" to show no labels, or "minmax" to show high and low values. Allowed values: `off`, `all`, `minmax` |
+| `legendDisplay` | string | — | Specify the location of the legend on the panel. By default, legendDisplay is off when splitByLayout is trellis, and right otherwise. Allowed values: `right`, `left`, `top`, `bottom`, `off` |
+| `legendLabels` | array<string> | — | Specify a list of labels to populate the legend in advance. For example, ["percent", "count"]. Items: string |
+| `legendMode` | string | `standard` | Specify visual and behavioral settings for the tooltip and legend. "seriesCompare" is useful when comparing series. Allowed values: `standard`, `seriesCompare` |
+| `legendTruncation` | string | `ellipsisEnd` | Specify how to display legend labels when they overflow the layout boundaries by replacing overflow text with an ellipsis. Allowed values: `ellipsisEnd`, `ellipsisMiddle`, `ellipsisStart`, `ellipsisOff` |
+| `lineDashStyle` | string | `solid` | Specify a dash style for all overlay field lines. Allowed values: `solid`, `shortDash`, `shortDot`, `shortDashDot`, `shortDashDotDot`, `dot`, `dash`, `longDash`, `dashDot`, `longDashDot`, `longDashDotDot` |
+| `lineDashStylesByField` | object | — | Specify a dash style to use for overlay lines for each field. For example, {"count": "longDashDot", "percent": "longDashDotDot"}.<br />        Valid values: "solid", "shortDash", "shortDot", "shortDashDot", "shortDashDotDot", "dot", "dash",<br />        "longDash", "dashDot", "longDashDot", "longDashDotDot". |
+| `lineWidth` | number | `2` | Specify the line width (px) for overlay field lines. |
+| `overlayFields` | array<string> \| string | — | Specify one or more fields to differentiate on the chart and display as chart overlays. Items: string |
+| `resultLimit` | number | `50000` | Specify the number of data points to render in a chart. |
+| `seriesColors` | array<string> | `["#7B56DB","#009CEB","#00CDAF","#DD9900","#FF677B","#CB2196","#813193","#0051B5","#008C80","#99B100","#FFA476","#FF6ACE","#AE8CFF","#00689D","#00490A","#465D00","#9D6300","#F6540B","#FF969E","#E47BFE"]` | Specify the colors to use in a series. For example, ["#FF0000", "#0000FF", "#008000"]. Items: string |
+| `seriesColorsByField` | object | — | Specify the colors to use for specific fields in a series. For example, {“count”: “#008000”, “percent”: “#FFA500”}. |
+| `seriesSpacing` | number | — | Specify the spacing (px) between clustered series in column and bar charts. |
+| `showIndependentYRanges` | boolean | `false` | Specify whether split series charts have independent y-ranges. |
+| `showOverlayY2Axis` | boolean | `false` | Enable a second y-axis for chart overlays. All overlay fields will map to a second y-axis. |
+| `showRoundedY2AxisLabels` | boolean | `true` | Specify whether to round the second y-axis values to the nearest integer. |
+| `showSplitSeries` | boolean | `false` | Specify whether to split a multi-series chart into separate charts that are stacked from top to bottom; uses one chart for each series. |
+| `showTooltip` | boolean | `true` | Specify whether to make a tooltip visible on hover |
+| `showXMajorGridLines` | boolean | `false` | Specify whether to show major grid lines on the x-axis. |
+| `showY2AxisWithZero` | boolean | `false` | Specify whether to include zero in the second y-axis range. |
+| `showY2MajorGridLines` | boolean | `false` | Specify whether to show major grid lines on the second y-axis. |
+| `showY2MinorGridLines` | boolean | `false` | Specify whether to show minor grid lines on the second y-axis. |
+| `showYAxisExtendedRange` | boolean | `true` | Specify whether to extend the y-axis to include whole major tick marks. |
+| `showYAxisWithZero` | boolean | `false` | Specify whether to include zero in the y-axis range. |
+| `showYMajorGridLines` | boolean | `true` | Specify whether to show major grid lines on the y-axis. |
+| `showYMinorGridLines` | boolean | `false` | Specify whether to show minor grid lines on the y-axis. |
+| `splitByLayout` | string | `off` | Specify the layout method by which to display the visualization, which splits the data into individual visualizations based on a certain category. Allowed values: `off`, `trellis` |
+| `stackMode` | string | `auto` | Specify stack mode. Allowed values: `auto`, `stacked`, `stacked100` |
+| `trellisBackgroundColor` | string | `> themes.defaultBackgroundColor` | Specify the color used for the trellis container background by using a hexadecimal code. For example, #0000FF. 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]+)?\\$` |
+| `trellisColumns` | number | `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. Range: min 1 |
+| `trellisMinColumnWidth` | number | `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. Range: min 1 |
+| `trellisPageCount` | number | `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. Range: min 1 |
+| `trellisRowHeight` | number | `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. Range: min 1 |
+| `trellisSharedScale` | boolean | `true` | Specify whether all visualizations will share the same scale in the trellis container. |
+| `trellisSortBy` | 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. Allowed values: `result`, `name` |
+| `trellisSortOrder` | string | `ascending` | Specify the sort order for the individual visualizations in the trellis container. This setting applies to the sort method specified in trellisSortBy. Allowed values: `ascending`, `descending` |
+| `trellisSplitBy` | 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. |
+| `x` | array<string \| number> | `> primary \| seriesByIndex(0)` | Specify a data source to apply to the x-axis. Items: string \| number |
+| `xAxisLabelRotation` | number | `0` | Specify the rotation of the x-axis label in degrees. Allowed values: `-90`, `-45`, `0`, `45`, `90` |
+| `xAxisLabelVisibility` | string | `auto` | Specify whether to show labels on the x-axis. Allowed values: `auto`, `show`, `hide` |
+| `xAxisLineVisibility` | string | `hide` | Specify whether to show the x-axis line. Allowed values: `hide`, `show` |
+| `xAxisMajorTickSize` | number | `6` | Specify the size (px) of major tick marks on the x-axis. |
+| `xAxisMajorTickVisibility` | string | `auto` | Specify whether to show major tick marks on the x-axis. Allowed values: `auto`, `show`, `hide` |
+| `xAxisMaxLabelParts` | number | `3` | Specify the maximum number of time-parts for a tick label. The 3 possible parts are year, month, and time. Values can range from 1 to 3. Range: min 1, max 3 |
+| `xAxisTitleText` | string | — | Specify the title of the x-axis. |
+| `xAxisTitleVisibility` | string | `show` | Specify whether to show the title of the x-axis. Allowed values: `hide`, `show` |
+| `xField` | string | `> x \| getField()` | Specify a field to map to the x-axis. |
+| `y` | array<string \| number> | `> primary \| frameBySeriesIndexRange(1)` | Specify a data source to apply to the y-axis. Items: string \| number |
+| `y2` | array<string \| number> | — | Specify a data source to apply to the second y-axis Items: string \| number |
+| `y2AxisAbbreviation` | string | `auto` | Specify whether to abbreviate large second y-axis values with the closest International System of Units (SI) prefix. Allowed values: `auto`, `off` |
+| `y2AxisLabelVisibility` | string | `auto` | Specify whether to show labels on the second y-axis. Allowed values: `auto`, `show`, `hide` |
+| `y2AxisLineVisibility` | string | `hide` | Specify whether to show the second y-axis line. Allowed values: `hide`, `show` |
+| `y2AxisMajorTickInterval` | string \| number | `auto` | Specify the spacing unit between major tick marks along the numeric second y-axis. |
+| `y2AxisMajorTickSize` | number | `6` | Specify the size (px) of major tick marks on the second y-axis. |
+| `y2AxisMajorTickVisibility` | string | `auto` | Specify whether to show  major tick marks on the second y-axis. Allowed values: `auto`, `show`, `hide` |
+| `y2AxisMax` | string \| number | `auto` | Specify the largest value for the visible second y-axis range. |
+| `y2AxisMin` | string \| number | `auto` | Specify the smallest value for the visible second y-axis range. |
+| `y2AxisMinorTickSize` | number | `6` | Specify the size (px) of minor tick marks on the second y-axis. |
+| `y2AxisMinorTickVisibility` | string | `auto` | Specify whether to show minor tick marks on the second y-axis. Allowed values: `auto`, `show`, `hide` |
+| `y2AxisScale` | string | `linear` | Specify the type of scale that applies to a numerical second y-axis. Allowed values: `linear`, `log` |
+| `y2AxisTitleText` | string | — | Specify the title of the second y-axis. |
+| `y2AxisTitleVisibility` | string | `show` | Specify whether to show the title of the second y-axis. Allowed values: `hide`, `show` |
+| `y2Fields` | array<string> \| string | `> y2 \| getField()` | Specify one or more fields to map to a second y-axis. Items: string |
+| `yAxisAbbreviation` | string | `auto` | Specify whether to abbreviate large y-axis values with the closest International System of Units (SI) prefix. Allowed values: `auto`, `off` |
+| `yAxisLabelVisibility` | string | `auto` | Specify whether to show labels on the y-axis. Allowed values: `auto`, `show`, `hide` |
+| `yAxisLineVisibility` | string | `hide` | Specify whether to show the y-axis line. Allowed values: `hide`, `show` |
+| `yAxisMajorTickInterval` | string \| number | `auto` | Specify the spacing unit between major tick marks along the numeric y-axis. |
+| `yAxisMajorTickSize` | number | `6` | Specify the size (px) of major tick marks on the y-axis. |
+| `yAxisMajorTickVisibility` | string | `auto` | Specify whether to show major tick marks on the y-axis. Allowed values: `auto`, `show`, `hide` |
+| `yAxisMax` | string \| number | `auto` | Specify the largest value for the visible y-axis range. |
+| `yAxisMin` | string \| number | `auto` | Specify the smallest value for the visible y-axis range. |
+| `yAxisMinorTickSize` | number | `6` | Specify the size (px) of minor tick marks on the y-axis. |
+| `yAxisMinorTickVisibility` | string | `auto` | Specify whether to show minor tick marks on the y-axis. Allowed values: `auto`, `show`, `hide` |
+| `yAxisScale` | string | `linear` | Specify the type of scale that applies to a numerical y-axis. Allowed values: `linear`, `log` |
+| `yAxisTitleText` | string | — | Specify the title of the y-axis. |
+| `yAxisTitleVisibility` | string | `show` | Specify whether to show the title of the y-axis. Allowed values: `hide`, `show` |
+| `yFields` | string | `> y \| getField()` | Specify a field to map to the y-axis. |
+
+_Auto-generated; do not edit by hand._

package/docs-llm/column/overview.md

@@ -0,0 +1,31 @@
+# Column Visualization Guide
+
+**Component Reference:** Column or @splunk/visualizations/Column
+
+## Overview
+
+Like area and line charts, a column chart shows the progression of numeric values with respect to another variable, such as time. A column chart also works well with discrete data point values. Because of that distinction, a column chart can show data mapped to a label on an axis, such as country or state, instead of mapping the data to a numeric value. You can use a stacked column chart to show multiple data series in a column.
+
+## Details
+
+- **Category:** Trends
+- **Visualization Type:** splunk.column
+
+## Tips
+
+- Use a zero baseline with a column chart.
+- Add color to highlight multi or stacked series.
+- Order groups of data to emphasize their significance.
+- Consider a bar chart if you want to reorient the display of data along the y-axis.
+
+## Variations
+
+| Variation | Description | Key |
+| --- | --- | --- |
+| Single Series | Use a basic column chart to show the progression of one series over time. | single |
+| Multi Series | Use a multi-series column chart to compare the progression of multiple series over time. | multi |
+| Stacked Series | Use stacked column charts to represent multiple data series. Stacked columns should only be used if all chart values are either positive or negative. Position the data series of central importance directly on the x-axis in order to best see its development over time. | stacked |
+| Stacked 100% Series | Use stacked 100% column charts to represent multiple data series combined together to show how the partial amounts add up to a whole. | stacked100 |
+| Overlay Series | Column charts can select specific data series to be displayed as an overlay line. These are helpful when you’d like to highlight a field such as a max, average, or other differentiated series. You may also display this on the y2-axis (vertical axis on the right side of the chart) if the overlay series has a large difference in scale than the other series. | overlay |
+| Data Value Labeling | Use data value labeling to display specific details about your chart when appropriate, such as min/max value. Avoid labeling all your data points if they clutter your visualization as they may distract rather than add to communication. | dataValueLabelling |
+| Coloring By Field | Match colors to fields if you have semantic meaning to specific categorical colors across your dashboard or organization. | colorByField |

package/docs-llm/dsl/examples-json.md

@@ -0,0 +1,43 @@
+# DSL Overview Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "foo": 2,
+    "bar": 3
+  },
+  "options": {
+    "foo": 1,
+    "color": "> foo",
+    "value": "> bar"
+  },
+  "dataSources": {}
+}
+```
+
+## Example 2
+
+```json
+{
+  "context": {
+    "trendColorThresholds": [
+      {
+        "from": 1321,
+        "value": "#00FFFF"
+      },
+      {
+        "to": 1321,
+        "value": "#FF00FF"
+      }
+    ]
+  },
+  "options": {
+    "sparklineValues": "> primary | seriesByIndex(0)",
+    "trendValue": "> sparklineValues | delta(-2)",
+    "trendColor": "> trendValue | rangeValue(trendColorThresholds)"
+  },
+  "dataSources": {}
+}
+```

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

@@ -0,0 +1,78 @@
+# DSL Overview Examples
+
+## Example 1
+
+```jsx
+<SampleViz
+    context={{
+        foo: 2,
+        bar: 3,
+    }}
+    options={{
+        foo: 1,
+        // the DSL will first look at the local scope before searching through context.foo, datasources.foo, and themes.foo
+        // in this case, color will be resolved as 1
+        color: '> foo',
+        // since there is no local match, the DSL will look through the global scopes to find a corresponding identifier
+        // in this case, value will be resolved as 3
+        value: '> bar',
+    }}
+/>
+```
+
+## Example 2
+
+```jsx
+import SingleValue from '@splunk/visualizations/SingleValue';
+
+export default () => (
+    <SingleValue
+        context={{
+            trendColorThresholds: [
+                {
+                    from: 1321,
+                    value: '#00FFFF',
+                },
+                {
+                    to: 1321,
+                    value: '#FF00FF',
+                },
+            ],
+        }}
+        options={{
+            sparklineValues: '> primary | seriesByIndex(0)',
+            trendValue: '> sparklineValues | delta(-2)',
+            trendColor: '> trendValue | rangeValue(trendColorThresholds)',
+        }}
+        dataSources={{
+            primary: {
+                // the JSON input for a DataFrame has the structure of { data: { columns: [...], fields: [...], meta: {...} }
+                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: 'bar',
+                        },
+                    ],
+                },
+                meta: {},
+            },
+        }}
+    />
+);
+```

package/docs-llm/dsl/formatters/format-by-type-examples-json.md

@@ -0,0 +1,58 @@
+# FormatByType Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "formattedConfig": {
+      "number": {
+        "unit": "$",
+        "unitPosition": "before",
+        "precision": 2,
+        "thousandSeparated": true
+      }
+    }
+  },
+  "options": {
+    "columnFormat": {
+      "formatted": {
+        "data": "> table | seriesByName(\"formatted\") | formatByType(formattedConfig)"
+      }
+    }
+  },
+  "dataSources": {
+    "primary": {
+      "requestParams": {
+        "offset": 0,
+        "count": 20
+      },
+      "data": {
+        "fields": [
+          {
+            "name": "number"
+          },
+          {
+            "name": "formatted"
+          }
+        ],
+        "columns": [
+          [
+            -927916.96,
+            -924916.9,
+            -654089.75
+          ],
+          [
+            -927916.96,
+            -924916.9,
+            -654089.75
+          ]
+        ]
+      },
+      "meta": {
+        "totalCount": 100
+      }
+    }
+  }
+}
+```

package/docs-llm/dsl/formatters/format-by-type-examples-react.md

@@ -0,0 +1,43 @@
+# FormatByType Formatter Examples
+
+## Example 1
+
+```jsx
+<Table
+    context = {{
+        formattedConfig: {
+            number: {
+                unit: '$',
+                unitPosition: 'before',
+                precision: 2,
+                thousandSeparated: true,
+            },
+        },
+    }}
+
+    options = {{
+        columnFormat: {
+            formatted: {
+                data: '> table | seriesByName("formatted") | formatByType(formattedConfig)',
+            },
+        },
+    }}
+
+    dataSources = {{
+        primary: {
+            requestParams: { offset: 0, count: 20 },
+            data: {
+                fields: [
+                    { name: 'number' },
+                    { name: 'formatted' },
+                ],
+                columns: [
+                    [-927916.96, -924916.9, -654089.75],
+                    [-927916.96, -924916.9, -654089.75],
+                ],
+            },
+            meta: { totalCount: 100 },
+        },
+    }}
+ />
+```

package/docs-llm/dsl/formatters/format-by-type.md

@@ -0,0 +1,38 @@
+# FormatByType Formatter
+
+@class FormatByType
+
+Formats the value based on the value type and the provided config.
+ ## Config Object
+
+ ### number
+
+ * **unit?**: `string` to be appended or prepended to the value
+ * **unitPosition?**: `{"before" | "after"}` where should the `unit` be placed. Maps to numbro `prefix` or `postfix`
+ * **numberPrecision?**: `number` maps to numbro `mantissa`
+ * **mantissa?**: `number` number of decimal points to show
+ * **trimMantissa?**: `boolean` ending 0s in decimal points will be trimmed
+ * **thousandSeparated?**: `boolean` should show `,` for thousands
+ * **output?**: `"currency" | "percent" | "byte" | "time" | "ordinal" | "number"` value will be converted to one of thse formats
+ * **base?**: `"decimal" | "binary" | "general"` used for converting value to bytes
+ * **prefix?**: `string` string to be added in front of the value
+ * **suffix?**: `string` string to be appended to the value
+ * **postfix?**: `string` string to be appended to the value
+ * **forceAverage?**: `"trillion" | "billion" | "million" | "thousand"` can be used to force one the selected average
+ * **average?**: `boolean` rounds up the value to the closed average
+ * **totalLength?**: `number` used only for `average`. The number length to format data in
+ * **spaceSeparated?**: `boolean` used with `average` to introduce space between number and average
+ * **abbreviations?**: `{
+        thousand?: string;
+        million?: string;
+        billion?: string;
+        trillion?: string;
+    }` abbreviation values for averages.
+ * **negative?**: `"sign" | "parenthesis"` display sign or parenthesis for negative numbers
+ * **forceSign?**: `boolean` always show + or - sign
+
+ * For examples, refer [Numbro](https://numbrojs.com/format.html#format)
+
+#### time
+
+ * **format**: valid moment format string.  Refer - [moment display](https://momentjs.com/docs/#/displaying/)

package/docs-llm/dsl/formatters/frame-examples-json.md

@@ -0,0 +1,42 @@
+# Frame Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "users": "> primary | seriesByName(\"users\")",
+    "ids": "> primary | seriesByName(\"ids\")"
+  },
+  "options": {
+    "frameOption1": "> frame(users, ids)",
+    "frameOption2": "> frame(frameOption1, ids)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "Maurine",
+            "Jennings",
+            "Giuseppe"
+          ],
+          [
+            "1",
+            "2",
+            "3"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "users"
+          },
+          {
+            "name": "ids"
+          }
+        ]
+      }
+    }
+  }
+}
+```

package/docs-llm/dsl/formatters/frame-examples-react.md

@@ -0,0 +1,24 @@
+# Frame Formatter Examples
+
+## Example 1
+
+```jsx
+<SampleViz
+    context={{
+        users: '> primary | seriesByName("users")',
+        ids: '> primary | seriesByName("ids")'
+    }}
+    options={{
+        frameOption1: '> frame(users, ids)' // returns [['Maurine', 'Jennings', 'Giuseppe'], ['1', '2', '3']]
+        frameOption2: '> frame(frameOption1, ids)' // returns [['Maurine', 'Jennings', 'Giuseppe'], ['1', '2', '3'], ['1', '2', '3']]
+    }}
+    dataSources={{
+        primary: {
+            data: {
+                columns: [['Maurine', 'Jennings', 'Giuseppe'], ['1', '2', '3']],
+                fields: [{ name: 'users' }, { name: 'ids' }]
+            }
+        }
+    }}
+/>
+```

package/docs-llm/dsl/formatters/frame.md

@@ -0,0 +1,6 @@
+# Frame Formatter
+
+This formatter returns a new DataFrame made by combining its arguments.
+
+Example: frame(series1, series2, frame1). It is also possible to pass
+DataPoint as argument, in which case the DataPoint is wrapped in DataSeries.

package/docs-llm/dsl/formatters/gradient-examples-json.md

@@ -0,0 +1,98 @@
+# Gradient Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "gradientConfig": {
+      "stops": [
+        50,
+        100,
+        150
+      ],
+      "colors": [
+        "red",
+        "green",
+        "blue"
+      ]
+    }
+  },
+  "options": {
+    "colorOption": "> primary | seriesByIndex(0) | gradient(gradientConfig)",
+    "colorOption1": "> primary | seriesByIndex(1) | gradient(gradientConfig)"
+  },
+  "dataSources": {
+    "primary": {
+      "columns": [
+        [
+          0,
+          50,
+          230
+        ],
+        [
+          50,
+          100,
+          150
+        ]
+      ],
+      "fields": [
+        {
+          "name": "foo"
+        },
+        {
+          "name": "bar"
+        }
+      ]
+    }
+  }
+}
+```
+
+## Example 2
+
+```json
+{
+  "context": {
+    "gradientConfig": {
+      "stops": [
+        50,
+        100,
+        150
+      ],
+      "colors": [
+        "red",
+        "green",
+        "blue"
+      ]
+    }
+  },
+  "options": {
+    "colorOption": "> table | gradient(gradientConfig)"
+  },
+  "dataSources": {
+    "primary": {
+      "columns": [
+        [
+          0,
+          50,
+          230
+        ],
+        [
+          50,
+          100,
+          150
+        ]
+      ],
+      "fields": [
+        {
+          "name": "foo"
+        },
+        {
+          "name": "bar"
+        }
+      ]
+    }
+  }
+}
+```

package/docs-llm/dsl/formatters/gradient-examples-react.md

@@ -0,0 +1,44 @@
+# Gradient Formatter Examples
+
+## Example 1
+
+```jsx
+<SampleViz
+    context={{
+        gradientConfig: { stops: [50, 100, 150], colors: ['red', 'green', 'blue'] }
+    }}
+    options={{
+        colorOption: '> primary | seriesByIndex(0) | gradient(gradientConfig)' // it maps [0, 50, 230] to ['#7B56DB66', '#FF0000', '#7B56DB']
+        colorOption1: '> primary | seriesByIndex(1) | gradient(gradientConfig)' // it maps [50, 100, 150] to ['red', 'green', 'blue']
+    }}
+    dataSources={{
+        data: {
+            primary: {
+                columns: [[0, 50, 230], [50, 100, 150]],
+                fields: [{ name: 'foo' }, { name: 'bar' }]
+            }
+        }
+    }}
+/>
+```
+
+## Example 2
+
+```jsx
+<SampleViz
+    context={{
+        gradientConfig: { stops: [50, 100, 150], colors: ['red', 'green', 'blue'] }
+    }}
+    options={{
+        colorOption: '> table | gradient(gradientConfig)'
+    }}
+    dataSources={{
+        data: {
+            primary: {
+                columns: [[0, 50, 230], [50, 100, 150]],
+                fields: [{ name: 'foo' }, { name: 'bar' }]
+            }
+        }
+    }}
+/>
+```

package/docs-llm/dsl/formatters/gradient.md

@@ -0,0 +1,23 @@
+# Gradient Formatter
+
+Based on stops and colors, this formatter maps the value to an interpolated color.
+
+The `config` follows this criteria: `{ stops: [0, 100, 230], colors: ['red', 'green', 'blue'] }`
+
+If no config is specified, the default `colors` are `['rgba(123,86,219,0.4)', 'rgba(123,86,219,1)']`. The default `stops` are dependent on the DataSeries provided.
+
+Given a DataSeries with n values, the stops would consist of [min, ...(configured stops),  max] if stops values are contained in [min, max] - recommended.
+And min/max map to 'rgba(123,86,219,0.4)'/'rgba(123,86,219,1)', respectively.
+
+For example, if 0 < value < 100, the corresponding interpolated color will be between red and green.
+
+DataFrame (table) usage:
+When the input is a DataFrame (for example, a table), the formatter computes a global min/max across
+all numeric series in the frame. Those min/max are then used to build stops, and the formatter returns
+a new DataFrame of type `'color'` with each numeric cell mapped to its interpolated color.
+
+Minimal DSL example with a DataFrame in context as `table`:
+
+If no `stops` are provided, they are derived from the global DataFrame min/max.
+
+@extends AbstractFormatter<DataType, DataType>