@splunk/visualizations 28.5.3 → 28.7.0

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

@@ -0,0 +1,40 @@
+# Lerp Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "nodeSizeConfig": {
+      "inputMin": 0,
+      "inputMax": 100,
+      "outputMin": 10,
+      "outputMax": 60
+    }
+  },
+  "options": {
+    "nodeValues": "> primary | seriesByName(\"nodeValues\")",
+    "nodeSize": "> nodeValues | lerp(nodeSizeConfig)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "fields": [
+          {
+            "name": "nodeValues"
+          }
+        ],
+        "columns": [
+          [
+            0,
+            25,
+            50,
+            75,
+            100
+          ]
+        ]
+      }
+    }
+  }
+}
+```

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

@@ -0,0 +1,28 @@
+# Lerp Formatter Examples
+
+## Example 1
+
+```jsx
+<SampleViz
+    context={{
+        nodeSizeConfig: {
+            inputMin: 0,
+            inputMax: 100,
+            outputMin: 10,
+            outputMax: 60,
+        },
+    }}
+    options={{
+        nodeValues: '> primary | seriesByName("nodeValues")',
+        nodeSize: '> nodeValues | lerp(nodeSizeConfig)',
+    }}
+    dataSources={{
+        primary: {
+            data: {
+                fields: [{ name: 'nodeValues' }],
+                columns: [[0, 25, 50, 75, 100]],
+            },
+        },
+    }}
+/>
+```

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

@@ -0,0 +1,19 @@
+# Lerp Formatter
+
+Linearly maps numeric values onto a new numeric range.
+
+Similar to the `gradient` formatter, the input domain is derived from the data (per-series or
+DataFrame-wide) and the output is interpolated between the configured output range.
+
+`outputMin` and `outputMax` default to `[0, 1]` when no config is provided.
+`inputMin` and `inputMax` are derived from the input data unless provided.
+
+## Config Object
+ * **outputMin**: `number` minimum value of the mapped output range. Defaults to `0`.
+ * **outputMax**: `number` maximum value of the mapped output range. Defaults to `1`.
+ * **inputMin**: `number` lower bound of the input domain. Optional.
+ * **inputMax**: `number` upper bound of the input domain. Optional.
+
+If the input value is outside of `[inputMin, inputMax]`, the value is clamped to the nearest bound.
+
+@extends AbstractFormatter<'number', 'number'>

package/docs-llm/dsl/formatters/match-value-examples-json.md

@@ -0,0 +1,65 @@
+# MatchValue Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "colorMatches": [
+      {
+        "match": 500,
+        "value": "#FF0000"
+      },
+      {
+        "match": 750,
+        "value": "#00FF00"
+      },
+      {
+        "match": "vis*",
+        "value": "#FFFFFF"
+      }
+    ]
+  },
+  "options": {
+    "colorOption": "> primary | seriesByIndex(0) | lastPoint() | matchValue(colorMatches, \"#0000FF\")",
+    "colorOption2": "> primary | seriesByIndex(1) | lastPoint() | matchValue(colorMatches, \"#0000FF\")",
+    "colorOption3": "> primary | seriesByIndex(2) | lastPoint() | matchValue(colorMatches, \"#0000FF\")"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            100,
+            200,
+            300,
+            400,
+            500
+          ],
+          [
+            600,
+            700,
+            800,
+            900,
+            1000
+          ],
+          [
+            "visual"
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          },
+          {
+            "name": "baz"
+          }
+        ]
+      }
+    }
+  }
+}
+```

package/docs-llm/dsl/formatters/match-value-examples-react.md

@@ -0,0 +1,37 @@
+# MatchValue Formatter Examples
+
+## Example 1
+
+```jsx
+<SampleViz
+    context={{
+        colorMatches: [
+            {
+                match: 500,
+                value: '#FF0000',
+            },
+            {
+                match: 750,
+                value: '#00FF00',
+            },
+            {
+                match: "vis*",
+                value: '#FFFFFF',
+            },
+        ],
+    }}
+    options={{
+        colorOption: '> primary | seriesByIndex(0) | lastPoint() | matchValue(colorMatches, "#0000FF")' // returns #FF0000
+        colorOption2: '> primary | seriesByIndex(1) | lastPoint() | matchValue(colorMatches, "#0000FF")' // returns #0000FF
+        colorOption3: '> primary | seriesByIndex(2) | lastPoint() | matchValue(colorMatches, "#0000FF")' // returns #FFFFFF
+    }}
+    dataSources={{
+        primary: {
+            data: {
+                columns: [[100, 200, 300, 400, 500], [600, 700, 800, 900, 1000], ["visual"]]
+                fields: [{ name: 'foo' }, { name: 'bar' }, { name: 'baz' }],
+            }
+        }
+    }}
+/>
+```

package/docs-llm/dsl/formatters/match-value.md

@@ -0,0 +1,13 @@
+# MatchValue Formatter
+
+This formatter accepts a list of potential matches and a defaultValue (if no match is found) as the config.
+
+It maps each element in the DataSeries to find a corresponding matched value and returns the matched value if found, or the defaultValue if present.
+Otherwise if neither are present, it returns the original value.
+
+The asterisk (`*`) character can be used as a wildcard in match values to represent any number of characters in a string. It can be placed anywhere within the string. Matching prioritizes exact values, followed by values with more common characters.
+If multiple match values share the same length and number of wildcards, they will be matched according to their order of entry.
+
+For example, given the match values `["vis*, "*ual"]`, the string `"visual"` would match `"vis*"`.
+
+@extends AbstractFormatter<DataType, DataType>

package/docs-llm/dsl/formatters/max-contrast-examples-json.md

@@ -0,0 +1,39 @@
+# MaxContrast Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "contrastConfig": {
+      "colors": [
+        "white",
+        "black"
+      ]
+    }
+  },
+  "options": {
+    "color1": "green",
+    "maxContrastOfColor1": "> color1 | maxContrast(contrastConfig)",
+    "color2": "gray",
+    "maxContrastOfColor2": "> color2 | maxContrast(contrastConfig)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "fields": [
+          {
+            "name": "foo"
+          }
+        ],
+        "columns": [
+          [
+            100,
+            200
+          ]
+        ]
+      }
+    }
+  }
+}
+```

package/docs-llm/dsl/formatters/max-contrast-examples-react.md

@@ -0,0 +1,27 @@
+# MaxContrast Formatter Examples
+
+## Example 1
+
+```jsx
+<SampleViz
+    context={{
+         contrastConfig: {
+             colors: ['white', 'black']
+         }
+    }}
+    options={{
+        color1: 'green',
+        maxContrastOfColor1: '> color1 | maxContrast(contrastConfig)',    // white
+        color2: 'gray'
+        maxContrastOfColor2: '> color2 | maxContrast(contrastConfig)',    // black
+    }}
+    dataSources={{
+        primary: {
+            data: {
+                fields: [{ name: 'foo' }]
+                columns: [[100, 200]]
+            }
+        }
+    }}
+/>
+```

package/docs-llm/dsl/formatters/max-contrast.md

@@ -0,0 +1,9 @@
+# MaxContrast Formatter
+
+MaxContrast can be used to pick the color with maxContrast.
+
+Leverages [Chromajs.contrast](https://gka.github.io/chroma.js/#chroma-contrast) to determine contrast between color and values
+
+## Config Object
+ * **colors**: 'string[]' array of colors to compare contrast against
+ * **default**: 'string' default color if no colors or the contrast is not found

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

@@ -0,0 +1,67 @@
+# MultiFormat Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "areaColorsFormat": {
+      "nameField": "pathIds",
+      "valueField": "values",
+      "formatters": {
+        "id1": {
+          "type": "matchValue",
+          "config": [
+            {
+              "match": 100,
+              "value": "#FF0000"
+            }
+          ]
+        },
+        "id2": {
+          "type": "rangeValue",
+          "config": [
+            {
+              "to": 100,
+              "value": "#00FF00"
+            },
+            {
+              "from": 100,
+              "value": "#0000FF"
+            }
+          ]
+        }
+      }
+    }
+  },
+  "options": {
+    "areaIds": "> primary | seriesByName(\"pathIds\")",
+    "areaValues": "> primary | seriesByName(\"values\")",
+    "areaColors": "> primary | multiFormat(areaColorsFormat)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            "id1",
+            "id2"
+          ],
+          [
+            100,
+            200
+          ]
+        ],
+        "fields": [
+          {
+            "name": "pathIds"
+          },
+          {
+            "name": "values"
+          }
+        ]
+      }
+    }
+  }
+}
+```

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

@@ -0,0 +1,49 @@
+# MultiFormat Formatter Examples
+
+## Example 1
+
+```jsx
+<ChoroplethSvg
+        context={{
+            areaColorsFormat: {
+                nameField: 'pathIds',
+                valueField: 'values',
+                formatters: {
+                    id1: {
+                        type: 'matchValue',
+                        config: [{
+                            match: 100,
+                            value: '#FF0000'
+                        }]
+                    },
+                    id2: {
+                        type: 'rangeValue',
+                        config: [
+                            {
+                                to: 100,
+                                value: '#00FF00'
+                            }
+                            {
+                                from: 100,
+                                value: '#0000FF'
+                            }
+                        ]
+                    }
+                }
+            }
+        }}
+        options={{
+            areaIds: '> primary | seriesByName("pathIds")', // returns ['id1', 'id2']
+            areaValues: '> primary | seriesByName("values")', // returns [100, 200]
+            areaColors: '> primary | multiFormat(areaColorsFormat)' // returns ['#FF0000', '#0000FF']
+        }}
+        dataSources={{
+            primary: {
+                data: {
+                    columns: [['id1', 'id2'], [100, 200]]
+                    fields: [{ name: 'pathIds' }, { name: 'values' }]
+                }
+            }
+        }}
+    />
+```

package/docs-llm/dsl/formatters/multi-format.md

@@ -0,0 +1,12 @@
+# MultiFormat Formatter
+
+Formatter which accepts a config object containing a map of field-specific formatters.
+The field-specific formatter is used to evaluate each fields' corresponding values.
+
+The three required fields are as follows:
+
+- `nameField`, which denotes the list of keys with custom formatters to be applied against
+
+- `valueField`, which denotes the field to derive the values from
+
+- `formatter1. which is an object that requires the `type` of formatter and the specific required for the specified formatter.

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

@@ -0,0 +1,49 @@
+# Objects Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "staticOptions": [
+      [
+        "All Users"
+      ],
+      [
+        "*"
+      ]
+    ],
+    "field1": "> primary | seriesByName(\"users\") | renameSeries(\"label\")",
+    "field2": "> primary | seriesByName(\"ids\") | renameSeries(\"value\")"
+  },
+  "options": {
+    "items": "> frame(field1, field2) | prepend(staticOptions) | objects()"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "fields": [
+          {
+            "name": "users"
+          },
+          {
+            "name": "ids"
+          }
+        ],
+        "columns": [
+          [
+            "jane doe",
+            "joe schmo",
+            "jack schmidt"
+          ],
+          [
+            "jdoe",
+            "jschmo",
+            "jschmidt"
+          ]
+        ]
+      }
+    }
+  }
+}
+```

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

@@ -0,0 +1,37 @@
+# Objects Formatter Examples
+
+## Example 1
+
+```jsx
+// UDF inputs
+{
+    "inputs": {
+        "input1": {
+            "context": {
+                 "staticOptions": [["All Users"], ["*"]],
+                 "field1": "> primary | seriesByName(\"users\") | renameSeries(\"label\")",
+                 "field2": "> primary | seriesByName(\"ids\") | renameSeries(\"value\")"",
+             },
+             "type": "input.multiselect",
+             "options": {
+                 "items": "> frame(field1, field2) | prepend(staticOptions) | objects()"
+                     // returns [
+                     //     { label: 'All users', value: '*' },
+                     //     { label: 'jane doe', value: 'jdoe' },
+                     //     { label: 'joe schmo', value: 'jschmo' },
+                     //     { label: 'jack schmidt', value: 'jschmidt' },
+                     // ]
+                 ]
+             },
+             "dataSources": {
+                 "primary": {
+                     "data": {
+                         "fields": [{ "name": 'users' } , { "name": "ids" } ],
+                         "columns": [[ "jane doe", "joe schmo", "jack schmidt"], ["jdoe", "jschmo", "jschmidt"]]
+                     }
+                 }
+            },
+        }
+    }
+}
+```

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

@@ -0,0 +1,3 @@
+# Objects Formatter
+
+Formatter which converts a DataPrimitive into an array of objects. This is typically used in conjunction with UDF inputs.

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

@@ -0,0 +1,59 @@
+# Pick Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {
+    "mapConfig": {
+      "bar": "barLabel",
+      "foo": "fooLabel"
+    },
+    "rowBackgroundColors": [
+      "#FF0000",
+      "#00FF00",
+      "#0000FF"
+    ],
+    "rowTextColors": [
+      "#110000",
+      "#000011"
+    ]
+  },
+  "options": {
+    "rowBackgroundColor": "> primary | seriesByIndex(0) | pick(rowBackgroundColors)",
+    "rowTextColor": "> primary | seriesByIndex(0) | pick(rowTextColors)",
+    "barOption": "> primary | seriesByIndex(1) | lastPoint() | pick(mapConfig)",
+    "fooOption": "> primary | seriesByIndex(0) | lastPoint() | pick(mapConfig)"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "columns": [
+          [
+            100,
+            200,
+            300,
+            400,
+            500
+          ],
+          [
+            600,
+            700,
+            800,
+            900,
+            1000
+          ]
+        ],
+        "fields": [
+          {
+            "name": "foo"
+          },
+          {
+            "name": "bar"
+          }
+        ]
+      }
+    }
+  }
+}
+```

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

@@ -0,0 +1,30 @@
+# Pick Formatter Examples
+
+## Example 1
+
+```jsx
+<SampleViz
+    context={{
+        mapConfig: {
+            bar: 'barLabel',
+            foo: 'fooLabel',
+        },
+        rowBackgroundColors: ['#FF0000', '#00FF00', '#0000FF'],
+        rowTextColors: ['#110000', '#000011'],
+    }}
+    options={{
+        rowBackgroundColor: '> primary | seriesByIndex(0) | pick(rowBackgroundColors)', // returns ['#FF0000', '#00FF00', '#0000FF', '#FF0000', '#0000FF']
+        rowTextColor: '> primary | seriesByIndex(0) | pick(rowTextColors)', // returns ['#110000', '#000011', '#110000', '#000011', '#110000']
+        barOption: '> primary | seriesByIndex(1) | lastPoint() | pick(mapConfig)', // returns 'barLabel'
+        fooOption: '> primary | seriesByIndex(0) | lastPoint() | pick(mapConfig)', // returns 'fooLabel'
+    }}
+    dataSources={{
+        primary: {
+            data: {
+                columns: [[100, 200, 300, 400, 500], [600, 700, 800, 900, 1000]]
+                fields: [{ name: 'foo' }, { name: 'bar' }],
+            }
+        }
+    }}
+/>
+```

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

@@ -0,0 +1,9 @@
+# Pick Formatter
+
+Formatter which can accept a map or array config.
+
+If a map is provided, it will use the DataPoint's field name to pick the corresponding entry in the config.
+
+If an array is provided, it cycles through the array of values passed in via the config n times (where n = DataSeries.length) and returns this as the output.
+
+For example, if the config contains 2 elements and the DataSeries contains 10 elements, it will loop through the config 5 times, alternating between which element is appended to the output.

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

@@ -0,0 +1,29 @@
+# Prefix Formatter Examples
+
+## Example 1
+
+```json
+{
+  "context": {},
+  "options": {
+    "textOption": "> primary | seriesByName(\"foo\") | lastPoint() | prefix(\"bar\")"
+  },
+  "dataSources": {
+    "primary": {
+      "data": {
+        "fields": [
+          {
+            "name": "foo"
+          }
+        ],
+        "columns": [
+          [
+            100,
+            200
+          ]
+        ]
+      }
+    }
+  }
+}
+```

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

@@ -0,0 +1,19 @@
+# Prefix Formatter Examples
+
+## Example 1
+
+```jsx
+<SampleViz
+    options={{
+        textOption: '> primary | seriesByName("foo") | lastPoint() | prefix("bar")' // returns "bar100"
+    }}
+    dataSources={{
+        primary: {
+            data: {
+                fields: [{ name: 'foo' }]
+                columns: [[100, 200]]
+            }
+        }
+    }}
+/>
+```

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

@@ -0,0 +1,3 @@
+# Prefix Formatter
+
+Prepends the given prefix (passed as a parameter) to the DataPoint.