@splunk/visualizations 27.0.0 → 27.1.0

package/TRELLIS.md

@@ -1,10 +1,10 @@
 # Trellis layout
 
-> Trellis is only available for single value visualizations.
+> Trellis is only available for Area, Bar, Column, Line and Single value visualizations.
 
 Organize your search results with the trellis layout for a holistic view of your data. Trellis layout visualizes your search results by separating each value field or aggregation.
 
-The search in the following example returns customer purchases by product category. Applying a trellis layout creates a view of each product category as its own single value visualization.
+The search in the following example returns customer purchases by product category. Applying a trellis layout creates a view of each product category as its own visualization.
 
 `index="sample-data" | stats count by productName`
 
@@ -18,8 +18,8 @@ Configure your visualization for the trellis layout by adding the `splitByLayout
 
 Customers with access to a Unified Dashboard Framework (UDF) **Edit** mode can create the trellis layout using the following steps. If you’re not using UDF, skip to step 4.
 
-1. Select a single value visualization using the visual editor by clicking the **Add Chart** dropdown menu in the editing toolbar.
-2. Select the single value on your dashboard so that it's highlighted with the blue editing outline.
+1. Select a visualization that supports trellis (Area, Bar, Column, Line, Single value) using the visual editor by clicking the **Add Chart** dropdown menu in the editing toolbar.
+2. Select the visualization on your dashboard so that it's highlighted with the blue editing outline.
 3. Set up a new data source by adding selecting **+ Create Search** and adding a search to the **Search query** window. Or, select an existing data source under the **Search**, **Saved Search**, or **Chain Search** dropdown lists.
 4. Activate the trellis layout by toggling on **Trellis Layout** in the **Data display** section of the Configuration panel.
 
@@ -28,15 +28,16 @@ Customers with access to a Unified Dashboard Framework (UDF) **Edit** mode can c
 Additionally, you can add the following trellis configurations to the `options` stanza for further customization.
 
 ```markup
-| Option                 | Type   | Default                         | Description                                                                                                                                                                                                                                                                                                                        |
-| ---------------------- | ------ | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| splitByLayout          | string | off                             | Specify the layout method to display the visualization, which splits the data into individual visualizations based on a specific category. The available values are off and trellis.                                                                                                                                               |
-| trellisBackgroundColor | string | > themes.defaultBackgroundColor | Specify the background color of the whole panel in the trellis layout display. For example, “#FF0000”. You can use a hexadecimal code 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.                                         |
-| trellisColumns         | number | n/a                             | Specify the number of columns in a trellis layout container. For example, six columns allow six visualizations per row. Rows populate to accommodate the total number of visualizations. If no column number is specified, the number of columns is automatically set based on the value specified for trellisMinColumnWidth.      |
-| trellisMinColumnWidth  | number | 100                             | Specify the minimum width, in pixels, of each visualization in the trellis container. If you resize the window or panel, you can view the remaining visualizations by scrolling.                                                                                                                                                   |
-| trellisPageCount       | number | 20                              | Specify the maximum number of visualizations to display on a single page in the trellis container. The remaining visualizations paginate accordingly.                                                                                                                                                                              |
-| trellisRowHeight       | number | 70                              | Specify each visualization's height, in pixels, in the trellis container. If you resize the window or panel, you can view the remaining visualizations by scrolling.                                                                                                                                                               |
-| trellisSplitBy         | string | n/a                             | If applicable, specify the column's field name with categories used or aggregations to split the data into individual visualizations for trellis display. If you use an SPL `timechart` command, this might default to the SPL `by` clause field. If you use an SPL `chart` command, this might default to the first string field. |
+| Option                 | Type    | Default                         | Description                                                                                                                                                                                                                                                                                                                        |
+| ---------------------- | ------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| splitByLayout          | string  | off                             | Specify the layout method to display the visualization, which splits the data into individual visualizations based on a specific category. The available values are off and trellis.                                                                                                                                               |
+| trellisBackgroundColor | string  | > themes.defaultBackgroundColor | Specify the background color of the whole panel in the trellis layout display. For example, “#FF0000”. You can use a hexadecimal code 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.                                         |
+| trellisColumns         | number  | n/a                             | Specify the number of columns in a trellis layout container. For example, six columns allow six visualizations per row. Rows populate to accommodate the total number of visualizations. If no column number is specified, the number of columns is automatically set based on the value specified for trellisMinColumnWidth.      |
+| trellisMinColumnWidth  | number  | 100                             | Specify the minimum width, in pixels, of each visualization in the trellis container. If you resize the window or panel, you can view the remaining visualizations by scrolling.                                                                                                                                                   |
+| trellisPageCount       | number  | 20                              | Specify the maximum number of visualizations to display on a single page in the trellis container. The remaining visualizations paginate accordingly.                                                                                                                                                                              |
+| trellisRowHeight       | number  | 70                              | Specify each visualization's height, in pixels, in the trellis container. If you resize the window or panel, you can view the remaining visualizations by scrolling.                                                                                                                                                               |
+| trellisSharedScale     | boolean | true                            | If applicable, specify whether all visualizations will share the same scale in the trellis container. This only applies to Area, Bar, Column and Line chart.                                                                                                                                                                       |
+| trellisSplitBy         | string  | n/a                             | If applicable, specify the column's field name with categories used or aggregations to split the data into individual visualizations for trellis display. If you use an SPL `timechart` command, this might default to the SPL `by` clause field. If you use an SPL `chart` command, this might default to the first string field. |
 ```
 
 ## Overview of data-splitting logic
@@ -47,7 +48,7 @@ If your application has SPL support, the following are examples of how SPL searc
 
 ### Split data with the timechart command
 
-When using the SPL `timechart` command, the trellis layout defaults to an associated `by` clause. The following example shows how the trellis layout categorizes each single value visualization by product name as a result of the SPL search `index="sample-data" | timechart count by productName`.
+When using the SPL `timechart` command, the trellis layout defaults to an associated `by` clause. The following example shows how the trellis layout categorizes each Single value visualization by product name as a result of the SPL search `index="sample-data" | timechart count by productName`.
 
 ![](./src/common/docs/images/trellis-timechart.png)
 
@@ -114,7 +115,7 @@ export default () => (
 
 ### Split data with the chart or stats commands
 
-The trellis layout defaults to the first string field when using the SPL `chart` or `stats` command with one `by` clause. The following example shows how the trellis layout categorizes each single value visualization by the `productName` column as a result of the SPL search `index="sample-data" | chart count by productName`.
+The trellis layout defaults to the first string field when using the SPL `chart` or `stats` command with one `by` clause. The following example shows how the trellis layout categorizes each visualization, in this case Single value, by the `productName` column as a result of the SPL search `index="sample-data" | chart count by productName`.
 
 ![](./src/common/docs/images/trellis-chart-stats.png)
 

package/Table.js

@@ -1062,7 +1062,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.0.0 - 9bf093b7d",
+        "data-splunk-visualization-version": "27.1.0 - fe8b048df",
         width,
         height,
         backgroundColor
@@ -1128,7 +1128,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.0.0 - 9bf093b7d"
+  "data-splunk-visualization-version": "27.1.0 - fe8b048df"
 })`
     position: relative;
     width: 100%;
@@ -1615,6 +1615,25 @@ var getFeatureFlag = (context, flagName) => {
   return false;
 };
 
+// esm-externals:@splunk/visualizations-shared/trellisUtils
+var trellisUtils_exports = {};
+__export(trellisUtils_exports, {
+  default: () => trellisUtils_default
+});
+var defaultImport32 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+__reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
+var trellisUtils_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// src/common/utils/trellisUtils.ts
+var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
+  if (isTrellisOn && !options.legendDisplay) {
+    return {
+      legendDisplay: "off"
+    };
+  }
+  return {};
+};
+
 // src/common/withDashboardViz.tsx
 var withDashboardViz = (opts) => {
   const {
@@ -1622,6 +1641,8 @@ var withDashboardViz = (opts) => {
     vizConfig,
     computeVizProps: computeVizProps2 = () => {
     },
+    computeVizPropsBeforeEval = () => {
+    },
     disableEditModeCover,
     useIconPlaceholder
   } = opts;
@@ -1671,14 +1692,26 @@ var withDashboardViz = (opts) => {
     const isDownsamplingEnabledByFeatureFlag = Boolean(
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableDownsampling
     );
+    const isTrellisFeatureFlagOn = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableTrellis
+    );
+    const isTrellisOn = isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (options == null ? void 0 : options.splitByLayout) === "trellis" /* TRELLIS */;
     const isMounted = react_exports.useRef(true);
-    const optionsToEvaluate = react_exports.useMemo(
-      () => ({
+    const optionsToEvaluate = react_exports.useMemo(() => {
+      var _a2;
+      const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
+      const computedOptions = (_a2 = computeVizPropsBeforeEval(options)) != null ? _a2 : {};
+      return {
         context: (0, lodash_exports.defaultsDeep)({}, context, vizConfig.defaultContext),
-        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)({}, options, defaultOptions)
-      }),
-      [options, context]
-    );
+        options: (0, hocUtils_exports.deepMergeWithArrayPrimitiveOverrides)(
+          {},
+          legendDisplay,
+          computedOptions,
+          options,
+          defaultOptions
+        )
+      };
+    }, [isTrellisOn, options, context]);
     const [threshold, setThreshold] = react_exports.useState(Number(width));
     const onDownsamplingThresholdChange = react_exports.useCallback((newThreshold) => {
       setThreshold(newThreshold);
@@ -1759,11 +1792,8 @@ var withDashboardViz = (opts) => {
       useAsyncEvaluatedOptions
     ]);
     const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
-    const isTrellisFeatureFlagOn = Boolean(
-      featureFlagContext && featureFlagContext.visualizations_enableTrellis
-    );
     let clonedEvaluatedOptions = evaluatedOptionsToUse;
-    if (isTrellisFeatureFlagOn && ((_a = vizConfig == null ? void 0 : vizConfig.supports) == null ? void 0 : _a.includes("trellis" /* TRELLIS */)) && (clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.splitByLayout) === "trellis" /* TRELLIS */) {
+    if (isTrellisOn) {
       clonedEvaluatedOptions = __spreadProps(__spreadValues({}, evaluatedOptionsToUse), {
         backgroundColor: clonedEvaluatedOptions == null ? void 0 : clonedEvaluatedOptions.trellisBackgroundColor
       });
@@ -1874,36 +1904,36 @@ var debounce_exports = {};
 __export(debounce_exports, {
   default: () => debounce_default
 });
-var defaultImport32 = __toESM(require("lodash/debounce"));
+var defaultImport33 = __toESM(require("lodash/debounce"));
 __reExport(debounce_exports, require("lodash/debounce"));
-var debounce_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var debounce_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // esm-externals:@splunk/react-ui/Table
 var Table_exports = {};
 __export(Table_exports, {
   default: () => Table_default
 });
-var defaultImport33 = __toESM(require("@splunk/react-ui/Table"));
+var defaultImport34 = __toESM(require("@splunk/react-ui/Table"));
 __reExport(Table_exports, require("@splunk/react-ui/Table"));
-var Table_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var Table_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/react-ui/Paginator
 var Paginator_exports = {};
 __export(Paginator_exports, {
   default: () => Paginator_default
 });
-var defaultImport34 = __toESM(require("@splunk/react-ui/Paginator"));
+var defaultImport35 = __toESM(require("@splunk/react-ui/Paginator"));
 __reExport(Paginator_exports, require("@splunk/react-ui/Paginator"));
-var Paginator_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var Paginator_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/react-ui/Message
 var Message_exports2 = {};
 __export(Message_exports2, {
   default: () => Message_default2
 });
-var defaultImport35 = __toESM(require("@splunk/react-ui/Message"));
+var defaultImport36 = __toESM(require("@splunk/react-ui/Message"));
 __reExport(Message_exports2, require("@splunk/react-ui/Message"));
-var Message_default2 = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var Message_default2 = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/Table/hooks.tsx
 var isArray = (v) => Array.isArray(v);
@@ -2400,9 +2430,9 @@ var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport36 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport37 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var Popover_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/SparkLine/SparkLine.jsx
 var StyledSvg = styled_components_default.svg`