@splunk/visualizations 27.0.0 → 27.1.0

package/Area.config.js

@@ -146,6 +146,13 @@ var insertLayout = (layout, index, ...layoutItems) => [
 ];
 
 // src/common/editorConfig/AxesChartDataConfig.ts
+var isTrellisFeatureFlagOn = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
 var AxesChartDataConfig = {
   label: (0, i18n_exports._)("Data configurations"),
   layout: [
@@ -199,7 +206,8 @@ var AxesChartDataConfigBar = {
         filterByTypes: ["number"],
         supportsDSL: true,
         expectedDataPrimitive: ["series", "frame"]
-      }
+      },
+      isDisabled: isTrellisEnabled
     }
   ])
 };
@@ -302,10 +310,136 @@ var AxesChartDataConfigAreaColumnLine = {
   ]
 };
 
+// src/common/editorConfig/TrellisEditors.ts
+var isTrellisFeatureFlagOn2 = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled2 = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn2({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+var TrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn2
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Split by"),
+      option: "trellisSplitBy",
+      editor: "editor.trellisSplitBy",
+      editorProps: {
+        dataSourceKey: "primary"
+      },
+      showEditor: isTrellisEnabled2
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Number of columns"),
+      option: "trellisColumns",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      placeholder: (0, i18n_exports._)("Auto"),
+      showEditor: isTrellisEnabled2
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Min column width"),
+      option: "trellisMinColumnWidth",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled2
+    },
+    {
+      label: (0, i18n_exports._)("Row height"),
+      option: "trellisRowHeight",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled2
+    }
+  ],
+  [
+    {
+      label: (0, i18n_exports._)("Max number of components per page"),
+      option: "trellisPageCount",
+      editor: "editor.number",
+      editorProps: {
+        min: 1
+      },
+      showEditor: isTrellisEnabled2
+    }
+  ]
+];
+var TimechartTrellisEditorConfig = [
+  [
+    {
+      label: (0, i18n_exports._)("Trellis layout"),
+      option: "splitByLayout",
+      editor: "editor.toggle",
+      showEditor: isTrellisFeatureFlagOn2,
+      // add help text for timecharts
+      editorProps: {
+        help: (0, i18n_exports._)(
+          "Y2-axis and overlay field configurations are not supported when trellis is enabled."
+        ),
+        helpFormat: "under"
+      }
+    }
+  ],
+  ...TrellisEditorConfig.slice(1),
+  [
+    {
+      label: (0, i18n_exports._)("Shared y-axis scale"),
+      option: "trellisSharedScale",
+      editor: "editor.checkbox",
+      showEditor: isTrellisEnabled2
+    }
+  ]
+];
+var TrellisBackgroundColorEditor = {
+  label: (0, i18n_exports._)("Trellis background"),
+  option: "trellisBackgroundColor",
+  editor: "editor.color",
+  showEditor: isTrellisEnabled2
+};
+
 // src/common/editorConfig/AxesChartDataDisplay.ts
-var AxesChartDataDisplayLine = {
+var isTrellisFeatureFlagOn3 = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisEnabled3 = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return isTrellisFeatureFlagOn3({ featureFlags }) && splitByLayout === visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
+var AxesChartDataDisplayBase = {
   label: (0, i18n_exports._)("Data display"),
   layout: [
+    [
+      {
+        label: (0, i18n_exports._)("Stack mode"),
+        option: "stackMode",
+        editor: "editor.select",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Not stacked"), value: "auto" },
+            { label: (0, i18n_exports._)("Stacked"), value: "stacked" },
+            { label: (0, i18n_exports._)("Stacked 100%"), value: "stacked100" }
+          ]
+        }
+      }
+    ],
     [
       {
         label: (0, i18n_exports._)("Null value display"),
@@ -341,7 +475,8 @@ var AxesChartDataDisplayLine = {
         editor: "editor.columnMultiSelectionByFieldNameEditor",
         editorProps: {
           filterByTypes: ["number"]
-        }
+        },
+        isDisabled: isTrellisEnabled3
       }
     ],
     [
@@ -358,60 +493,33 @@ var AxesChartDataDisplayLine = {
         editor: "editor.checkbox",
         showEditor: ({ options }) => options.showSplitSeries
       }
-    ]
-  ]
-};
-var AxesChartDataDisplay = {
-  label: AxesChartDataDisplayLine.label,
-  layout: [
-    [
-      {
-        label: (0, i18n_exports._)("Stack mode"),
-        option: "stackMode",
-        editor: "editor.select",
-        editorProps: {
-          values: [
-            { label: (0, i18n_exports._)("Not stacked"), value: "auto" },
-            { label: (0, i18n_exports._)("Stacked"), value: "stacked" },
-            { label: (0, i18n_exports._)("Stacked 100%"), value: "stacked100" }
-          ]
-        }
-      }
     ],
-    ...AxesChartDataDisplayLine.layout
+    ...TimechartTrellisEditorConfig
   ]
 };
+var AxesChartDataDisplayArea = AxesChartDataDisplayBase;
 var AxesChartDataDisplayBar = {
-  label: AxesChartDataDisplayLine.label,
+  label: AxesChartDataDisplayBase.label,
   layout: [
-    [
-      {
-        label: (0, i18n_exports._)("Stack mode"),
-        option: "stackMode",
-        editor: "editor.select",
-        editorProps: {
-          values: [
-            { label: (0, i18n_exports._)("Not stacked"), value: "auto" },
-            { label: (0, i18n_exports._)("Stacked"), value: "stacked" },
-            { label: (0, i18n_exports._)("Stacked 100%"), value: "stacked100" }
-          ]
-        }
-      }
-    ],
-    // remove nullValueDisplay
-    ...(0, lodash_exports.drop)(AxesChartDataDisplayLine.layout)
+    AxesChartDataDisplayBase.layout[0],
+    // remove null value display editor at index 1
+    ...AxesChartDataDisplayBase.layout.slice(2)
   ]
 };
 var AxesChartDataDisplayColumn = {
-  label: AxesChartDataDisplayBar.label,
+  label: AxesChartDataDisplayBase.label,
   layout: [
-    ...insertLayout(AxesChartDataDisplayBar.layout, 2, [
+    AxesChartDataDisplayBase.layout[0],
+    // remove null value display and add data value display
+    AxesChartDataDisplayBase.layout[2],
+    [
       {
         label: (0, i18n_exports._)("Show tooltip on hover"),
         option: "showTooltip",
         editor: "editor.checkbox"
       }
-    ]),
+    ],
+    ...AxesChartDataDisplayBase.layout.slice(3),
     [
       {
         label: (0, i18n_exports._)("Column grouping mode"),
@@ -427,7 +535,13 @@ var AxesChartDataDisplayColumn = {
     ]
   ]
 };
-var AxesChartDataDisplay_default = AxesChartDataDisplay;
+var AxesChartDataDisplayLine = {
+  label: AxesChartDataDisplayBase.label,
+  layout: [
+    // remove stacked mode editor
+    ...AxesChartDataDisplayBase.layout.slice(1)
+  ]
+};
 
 // src/common/editorConfig/BackgroundColor.ts
 var background = ({
@@ -477,7 +591,19 @@ var AxesChartColorAndStyle = {
     ]
   ]
 };
-var AxesChartColorAndStyle_default = AxesChartColorAndStyle;
+var AreaAxesChartColorAndStyleWithTrellis = __spreadProps(__spreadValues({}, AxesChartColorAndStyle), {
+  layout: [
+    AxesChartColorAndStyle.layout[0],
+    [
+      __spreadProps(__spreadValues({}, TrellisBackgroundColorEditor), {
+        editorProps: {
+          themes
+        }
+      })
+    ],
+    ...AxesChartColorAndStyle.layout.slice(1)
+  ]
+});
 
 // src/common/editorConfig/AxesChartLegend.ts
 var AxesChartLegend = {
@@ -517,7 +643,54 @@ var AxesChartLegend = {
     ]
   ]
 };
-var AxesChartLegend_default = AxesChartLegend;
+var AxesChartLegendWithTrellisAndMode = ({
+  showLegendTooltip = false,
+  hideModeWhenOff = false
+}) => ({
+  label: AxesChartLegend.label,
+  layout: [
+    [
+      {
+        label: (0, i18n_exports._)("Legend display"),
+        option: "legendDisplay",
+        editor: "editor.select",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Right"), value: "right" },
+            { label: (0, i18n_exports._)("Left"), value: "left" },
+            { label: (0, i18n_exports._)("Top"), value: "top" },
+            { label: (0, i18n_exports._)("Bottom"), value: "bottom" },
+            { label: (0, i18n_exports._)("Off"), value: "off" }
+          ],
+          tooltip: showLegendTooltip && (0, i18n_exports._)('Legend mode must be "Standard" to configure legend display')
+        },
+        isDisabled: showLegendTooltip ? ({ options }) => options.legendMode === "seriesCompare" : void 0,
+        overrideDefaultValue: ({ options }) => (options == null ? void 0 : options.splitByLayout) === "trellis" ? "off" : "right"
+      }
+    ],
+    [
+      __spreadProps(__spreadValues({}, AxesChartLegend.layout[1][0]), {
+        showEditor: ({ options }) => options.legendDisplay === "left" || options.legendDisplay === "right" || options.legendDisplay === "top" || options.legendDisplay === "bottom" || // when Trellis is on, the default value of legendDisplay is off
+        options.legendDisplay === void 0 && options.splitByLayout !== "trellis"
+      })
+    ],
+    [
+      {
+        label: (0, i18n_exports._)("Legend mode"),
+        option: "legendMode",
+        editor: "editor.radioBar",
+        editorProps: {
+          values: [
+            { label: (0, i18n_exports._)("Standard"), value: "standard" },
+            { label: (0, i18n_exports._)("Compare series"), value: "seriesCompare" }
+          ]
+        },
+        showEditor: ({ options }) => hideModeWhenOff ? options.legendDisplay === "left" || options.legendDisplay === "right" || options.legendDisplay === "top" || options.legendDisplay === "bottom" || // when Trellis is on, the default value of legendDisplay is off
+        options.legendDisplay === void 0 && options.splitByLayout !== "trellis" : true
+      }
+    ]
+  ]
+});
 
 // src/common/editorConfig/AxesChartXGridAndLabels.ts
 var AxesChartXGridAndLabelsCommon = {
@@ -961,6 +1134,13 @@ var AxesChartYGridAndLabels = {
 var AxesChartYGridAndLabels_default = AxesChartYGridAndLabels;
 
 // src/common/editorConfig/AxesChartY2GridAndLabels.ts
+var isTrellisFeatureFlagOn4 = ({ featureFlags }) => {
+  return Boolean(featureFlags == null ? void 0 : featureFlags.visualizations_enableTrellis);
+};
+var isTrellisOff = ({ options, featureFlags }) => {
+  const { splitByLayout = visualization_schemas_exports.LAYOUT_TYPE.Off } = options;
+  return !isTrellisFeatureFlagOn4({ featureFlags }) || splitByLayout !== visualization_schemas_exports.LAYOUT_TYPE.Trellis;
+};
 var axesChartY2GridAndLabels = {
   label: (0, i18n_exports._)("Y2-axis grid and labels"),
   layout: [
@@ -968,15 +1148,16 @@ var axesChartY2GridAndLabels = {
       {
         label: (0, i18n_exports._)("Axis title"),
         option: "y2AxisTitleVisibility",
-        editor: "editor.toggle"
+        editor: "editor.toggle",
+        showEditor: isTrellisOff
       }
     ],
     [
       {
-        label: (0, i18n_exports._)("Axis title"),
+        label: (0, i18n_exports._)("Axis title text"),
         option: "y2AxisTitleText",
         editor: "editor.text",
-        showEditor: ({ options }) => options.y2AxisTitleVisibility === "show" || options.y2AxisTitleVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisTitleVisibility === "show" || options.y2AxisTitleVisibility === void 0)
       }
     ],
     [
@@ -984,7 +1165,7 @@ var axesChartY2GridAndLabels = {
         label: (0, i18n_exports._)("Show overlays on the y2-axis"),
         option: "showOverlayY2Axis",
         editor: "editor.checkbox",
-        showEditor: ({ options }) => Array.isArray(options.overlayFields) && options.overlayFields.length > 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && Array.isArray(options.overlayFields) && options.overlayFields.length > 0
       }
     ],
     [
@@ -997,7 +1178,8 @@ var axesChartY2GridAndLabels = {
             { label: (0, i18n_exports._)("Linear"), value: "linear" },
             { label: (0, i18n_exports._)("Log"), value: "log" }
           ]
-        }
+        },
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1011,7 +1193,8 @@ var axesChartY2GridAndLabels = {
             { label: (0, i18n_exports._)("Show"), value: "show" },
             { label: (0, i18n_exports._)("Hide"), value: "hide" }
           ]
-        }
+        },
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1019,7 +1202,7 @@ var axesChartY2GridAndLabels = {
         label: (0, i18n_exports._)("Round axis labels"),
         option: "showRoundedY2AxisLabels",
         editor: "editor.checkbox",
-        showEditor: ({ options }) => options.y2AxisLabelVisibility === "show" || options.y2AxisLabelVisibility === "auto" || options.y2AxisLabelVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisLabelVisibility === "show" || options.y2AxisLabelVisibility === "auto" || options.y2AxisLabelVisibility === void 0)
       }
     ],
     [
@@ -1027,40 +1210,45 @@ var axesChartY2GridAndLabels = {
         label: (0, i18n_exports._)("SI prefix abbreviation for labels"),
         option: "y2AxisAbbreviation",
         editor: "editor.checkbox",
-        showEditor: ({ options }) => options.y2AxisLabelVisibility === "show" || options.y2AxisLabelVisibility === "auto" || options.y2AxisLabelVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisLabelVisibility === "show" || options.y2AxisLabelVisibility === "auto" || options.y2AxisLabelVisibility === void 0)
       }
     ],
     [
       {
         label: (0, i18n_exports._)("Include zero"),
         option: "showY2AxisWithZero",
-        editor: "editor.checkbox"
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
       }
     ],
     [
       {
         label: (0, i18n_exports._)("Minimum axis value"),
         option: "y2AxisMin",
-        editor: "editor.number"
+        editor: "editor.number",
+        showEditor: isTrellisOff
       },
       {
         label: (0, i18n_exports._)("Maximum axis value"),
         option: "y2AxisMax",
-        editor: "editor.number"
+        editor: "editor.number",
+        showEditor: isTrellisOff
       }
     ],
     [
       {
         label: (0, i18n_exports._)("Axis line visibility"),
         option: "y2AxisLineVisibility",
-        editor: "editor.checkbox"
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
       }
     ],
     [
       {
         label: (0, i18n_exports._)("Major gridlines"),
         option: "showY2MajorGridLines",
-        editor: "editor.checkbox"
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1074,7 +1262,8 @@ var axesChartY2GridAndLabels = {
             { label: (0, i18n_exports._)("Show"), value: "show" },
             { label: (0, i18n_exports._)("Hide"), value: "hide" }
           ]
-        }
+        },
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1087,7 +1276,7 @@ var axesChartY2GridAndLabels = {
           max: 10,
           step: 1
         },
-        showEditor: ({ options }) => options.y2AxisMajorTickVisibility === "show" || options.y2AxisMajorTickVisibility === "auto" || options.y2AxisMajorTickVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisMajorTickVisibility === "show" || options.y2AxisMajorTickVisibility === "auto" || options.y2AxisMajorTickVisibility === void 0)
       }
     ],
     [
@@ -1095,14 +1284,15 @@ var axesChartY2GridAndLabels = {
         label: (0, i18n_exports._)("Major tick interval spacing"),
         option: "y2AxisMajorTickInterval",
         editor: "editor.number",
-        showEditor: ({ options }) => options.y2AxisMajorTickVisibility === "show" || options.y2AxisMajorTickVisibility === "auto" || options.y2AxisMajorTickVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisMajorTickVisibility === "show" || options.y2AxisMajorTickVisibility === "auto" || options.y2AxisMajorTickVisibility === void 0)
       }
     ],
     [
       {
         label: (0, i18n_exports._)("Minor gridlines"),
         option: "showY2MinorGridLines",
-        editor: "editor.checkbox"
+        editor: "editor.checkbox",
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1116,7 +1306,8 @@ var axesChartY2GridAndLabels = {
             { label: (0, i18n_exports._)("Show"), value: "show" },
             { label: (0, i18n_exports._)("Hide"), value: "hide" }
           ]
-        }
+        },
+        showEditor: isTrellisOff
       }
     ],
     [
@@ -1129,7 +1320,7 @@ var axesChartY2GridAndLabels = {
           max: 10,
           step: 1
         },
-        showEditor: ({ options }) => options.y2AxisMinorTickVisibility === "show" || options.y2AxisMinorTickVisibility === "auto" || options.y2AxisMinorTickVisibility === void 0
+        showEditor: ({ options, featureFlags }) => isTrellisOff({ options, featureFlags }) && (options.y2AxisMinorTickVisibility === "show" || options.y2AxisMinorTickVisibility === "auto" || options.y2AxisMinorTickVisibility === void 0)
       }
     ]
   ]
@@ -1167,15 +1358,22 @@ var themes2 = {
       light: variables_default.backgroundColor(props)
     },
     prisma: variables_default.backgroundColorSidebar(props)
+  })(props),
+  defaultFontColor: (props) => pick_default({
+    enterprise: {
+      dark: variables_default.textColor(props),
+      light: variables_default.textColor(props)
+    },
+    prisma: variables_default.contentColorDefault(props)
   })(props)
 };
 var editorConfig = [
   AxesChartDataConfigAreaColumnLine,
-  AxesChartDataDisplay_default,
+  AxesChartDataDisplayArea,
   {
-    label: AxesChartColorAndStyle_default.label,
+    label: AreaAxesChartColorAndStyleWithTrellis.label,
     layout: [
-      ...AxesChartColorAndStyle_default.layout,
+      ...AreaAxesChartColorAndStyleWithTrellis.layout,
       [
         {
           label: (0, i18n_exports._)("Area opacity (0-1)"),
@@ -1222,59 +1420,7 @@ var editorConfig = [
       ]
     ]
   },
-  {
-    label: AxesChartLegend_default.label,
-    layout: [
-      [
-        {
-          label: (0, i18n_exports._)("Legend display"),
-          option: "legendDisplay",
-          editor: "editor.select",
-          editorProps: {
-            values: [
-              { label: (0, i18n_exports._)("Right"), value: "right" },
-              { label: (0, i18n_exports._)("Left"), value: "left" },
-              { label: (0, i18n_exports._)("Top"), value: "top" },
-              { label: (0, i18n_exports._)("Bottom"), value: "bottom" },
-              { label: (0, i18n_exports._)("Off"), value: "off" }
-            ],
-            tooltip: (0, i18n_exports._)('Legend mode must be "Standard" to configure legend display')
-          },
-          isDisabled: ({ options }) => options.legendMode === "seriesCompare"
-        }
-      ],
-      [
-        {
-          label: (0, i18n_exports._)("Legend truncation"),
-          option: "legendTruncation",
-          editor: "editor.radioBar",
-          editorProps: {
-            values: [
-              { label: (0, i18n_exports._)("A..."), value: "ellipsisEnd" },
-              { label: (0, i18n_exports._)("A...Z"), value: "ellipsisMiddle" },
-              { label: (0, i18n_exports._)("...Z"), value: "ellipsisStart" },
-              { label: (0, i18n_exports._)("Off"), value: "ellipsisOff" }
-            ]
-          },
-          showEditor: ({ options }) => options.legendDisplay === "left" || options.legendDisplay === "right" || options.legendDisplay === "top" || options.legendDisplay === "bottom" || options.legendDisplay === void 0
-        }
-      ],
-      [
-        {
-          label: (0, i18n_exports._)("Legend mode"),
-          option: "legendMode",
-          editor: "editor.radioBar",
-          editorProps: {
-            values: [
-              { label: (0, i18n_exports._)("Standard"), value: "standard" },
-              { label: (0, i18n_exports._)("Compare series"), value: "seriesCompare" }
-            ]
-          },
-          showEditor: ({ options }) => options.legendDisplay === "left" || options.legendDisplay === "right" || options.legendDisplay === "top" || options.legendDisplay === "bottom" || options.legendDisplay === void 0
-        }
-      ]
-    ]
-  },
+  AxesChartLegendWithTrellisAndMode({ showLegendTooltip: true, hideModeWhenOff: true }),
   AxesChartXGridAndLabels_default,
   AxesChartYGridAndLabels_default,
   AxesChartY2GridAndLabels_default
@@ -1320,7 +1466,8 @@ var config = {
     "dynamic-options" /* DYNAMIC_OPTIONS */,
     "placeholder" /* PLACEHOLDER */,
     "events" /* EVENTS */,
-    "downsampling" /* DOWNSAMPLING */
+    "downsampling" /* DOWNSAMPLING */,
+    "trellis" /* TRELLIS */
   ],
   themes: themes2
 };