@splunk/visualizations 24.5.1 → 24.6.0

package/Table.js

@@ -129,12 +129,13 @@ module.exports = require("@splunk/themes/variables");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validTextOverflows = exports.validAlignments = exports.validHeaderVisibilities = exports.validSparklineTypes = exports.validCellRenderers = void 0;
+exports.validFontSizes = exports.validTextOverflows = exports.validAlignments = exports.validHeaderVisibilities = exports.validSparklineTypes = exports.validCellRenderers = void 0;
 exports.validCellRenderers = ['TextCell', 'ArrayCell', 'SparklineCell'];
 exports.validSparklineTypes = ['line', 'area'];
 exports.validHeaderVisibilities = ['none', 'fixed', 'inline'];
 exports.validAlignments = ['left', 'center', 'right'];
 exports.validTextOverflows = ['anywhere', 'break-word', 'ellipsis'];
+exports.validFontSizes = ['extraSmall', 'small', 'default', 'large'];
 
 /***/ }),
 
@@ -220,7 +221,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
 
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "24.5.1 - edc4c958c",
+      "data-splunk-visualization-version": "24.6.0 - 539dff0ca",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -326,8 +327,14 @@ var computeVizProps = function computeVizProps(_a) {
 
   if (vizProps.onOptionsChange) {
     var handleColumnFormatChange = function handleColumnFormatChange(updatedColumnFormat) {
+      var cloneOfExistingColumnFormat = lodash_1.get(vizProps, 'options.columnFormat', {});
+      var keys = Object.keys(updatedColumnFormat);
+      var values = Object.values(updatedColumnFormat);
+      keys.forEach(function (key, index) {
+        lodash_1.set(cloneOfExistingColumnFormat, "".concat(key, ".width"), lodash_1.get(values[index], 'width'));
+      });
       vizProps.onOptionsChange({
-        columnFormat: updatedColumnFormat
+        columnFormat: cloneOfExistingColumnFormat
       });
     };
 
@@ -823,12 +830,12 @@ var matchColorConfig = [{
 var optionsSchema = {
   backgroundColor: {
     default: '> themes.defaultBackgroundColor',
-    description: 'Specify the color for the background. You may use a dataSource 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".',
+    description: 'Specify the color for the background. You might use a data source 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".',
     pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
     type: 'string'
   },
   columnFormat: {
-    description: 'Allows users to set column formatting for individual columns.',
+    description: 'Allows column formatting for individual columns.',
     type: 'object',
     patternProperties: {
       '.*': {
@@ -836,7 +843,7 @@ var optionsSchema = {
         type: 'object',
         properties: {
           align: {
-            description: 'Alignment for each cell in the column. Valid alignments include "left", "center", and "right".',
+            description: 'Specify the alignment for each cell in a column. Valid alignments include "left", "center", and "right".',
             type: 'array',
             items: {
               type: 'string',
@@ -844,7 +851,7 @@ var optionsSchema = {
             }
           },
           cellTypes: {
-            description: 'Cell renderer for each cell in the column. Valid cell renders include "TextCell", "ArrayCell", "SparklineCell".',
+            description: 'Specify how to render data in cells. Valid cell renders include "TextCell", "ArrayCell", "SparklineCell".',
             type: 'array',
             items: {
               type: 'string',
@@ -852,7 +859,7 @@ var optionsSchema = {
             }
           },
           data: {
-            description: 'Array of datapoint to be displayed in the column rows.',
+            description: 'Specify data points to be displayed in the cells of a column.',
             type: 'array',
             items: {
               oneOf: [{
@@ -868,7 +875,7 @@ var optionsSchema = {
             }
           },
           rowBackgroundColors: {
-            description: 'Array of colors for background color of each row of the column of the table.',
+            description: 'Specify a list of colors, in hexadecimal code, for the background color of each column of the table. For example, ["#2C333B", "32373D"].',
             type: 'array',
             items: {
               type: 'string',
@@ -876,7 +883,7 @@ var optionsSchema = {
             }
           },
           rowColors: {
-            description: 'Array of colors for text color of each row of the column of the table.',
+            description: 'Specify a list of colors, in hexadecimal code, for the text color of the cells of a column. For example, ["#2C333B", "32373D"].',
             type: 'array',
             items: {
               type: 'string',
@@ -884,7 +891,7 @@ var optionsSchema = {
             }
           },
           sparklineAreaColors: {
-            description: 'Array of colors for sparkline area color of each row of the column of the table.',
+            description: 'Specify a list of colors, in hexadecimal code, for the sparkline area of each column. For example, ["#2C333B", "32373D"].',
             type: 'array',
             items: {
               type: 'string',
@@ -892,7 +899,7 @@ var optionsSchema = {
             }
           },
           sparklineColors: {
-            description: 'Array of colors for sparkline line color of each row of the column of the table.',
+            description: 'Specify a list of colors, in hexadecimal code, for the sparkline stroke of each column. For example, ["#2C333B", "32373D"].',
             type: 'array',
             items: {
               type: 'string',
@@ -900,7 +907,7 @@ var optionsSchema = {
             }
           },
           sparklineTypes: {
-            description: 'Area or Line Sparkline. Valid sparkline types include "line", "area".',
+            description: 'Choose either area or line formatting for the Sparkline. Valid sparkline types include "line" and "area".',
             type: 'array',
             items: {
               type: 'string',
@@ -914,7 +921,7 @@ var optionsSchema = {
             enum: consts_1.validTextOverflows.concat()
           },
           width: {
-            description: 'Controls how wide in pixels (where 1px = 1/96th of 1in) the column should be displayed.',
+            description: 'Controls how wide in pixels (where 1 px = 1/96th of 1 in) the column should be displayed.',
             type: 'number',
             minimum: 30
           }
@@ -927,9 +934,21 @@ var optionsSchema = {
     type: 'number',
     default: 10
   },
+  font: {
+    default: 'proportional',
+    description: 'Specify the font style to use for table content.',
+    type: 'string',
+    pattern: schemaUtils_1.getPattern(['proportional', 'monospace'])
+  },
+  fontSize: {
+    default: 'default',
+    description: 'Specify the font size to use for table content. Font sizes range from extra small (10px) to large (16px) with the default being 14px.',
+    type: 'string',
+    pattern: schemaUtils_1.getPattern(consts_1.validFontSizes)
+  },
   headers: {
     default: '> table | getField()',
-    description: 'Array of headers to display on the table.',
+    description: "Specify an array of headers to display on the table. Though these can be statically listed, it's best to use the dynamic default, as it will return the fields of your search.",
     type: 'array',
     items: {
       type: 'string'
@@ -937,14 +956,14 @@ var optionsSchema = {
   },
   headerVisibility: {
     default: 'inline',
-    description: 'Header visibility can be none, fixed (docked) or inline.',
+    description: 'Specify how to display the table header row.',
     pattern: schemaUtils_1.getPattern(consts_1.validHeaderVisibilities),
     enum: consts_1.validHeaderVisibilities.concat(),
     type: 'string'
   },
   paginateDataSourceKey: {
     default: 'primary',
-    description: 'Use the specified datasource key for pagination and sorting.',
+    description: 'Specify the data source key for pagination and sorting.',
     type: 'string'
   },
   showInternalFields: {
@@ -983,7 +1002,7 @@ var optionsSchema = {
     properties: {
       align: {
         default: '> table | type() | matchValue(tableAlignByType)',
-        description: 'Alignment for each cell in the table. Valid alignments include "left", "center", and "right".',
+        description: 'Specify alignment for each cell in the table. Valid alignments include "left", "center", and "right".',
         type: 'array',
         items: {
           type: 'array',
@@ -995,7 +1014,7 @@ var optionsSchema = {
       },
       cellTypes: {
         default: '> table | type() | matchValue(tableCellTypeByType)',
-        description: 'Render the data in one of the supported cell type. Valid cell renders include "TextCell", "ArrayCell", "SparklineCell".',
+        description: 'Specify how to render data in cells. Valid cell renders include "TextCell", "ArrayCell", "SparklineCell".',
         type: 'array',
         items: {
           type: 'array',
@@ -1026,18 +1045,18 @@ var optionsSchema = {
       },
       headerBackgroundColor: {
         default: '> themes.defaultHeaderBackgroundColor',
-        description: 'Background color of table header.',
+        description: 'Specify the table header background color using a hexadecimal code. For example, "#FFFFFF".',
         pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
         type: 'string'
       },
       headerColor: {
-        description: 'Text color of the table header.',
+        description: 'Specify the table header text color using a hexadecimal code. For example, "#FFFFFF".',
         pattern: schemaUtils_1.COLOR_OR_TOKEN_PATTERN,
         type: 'string'
       },
       rowBackgroundColors: {
         default: '> table | seriesByIndex(0) | pick(tableAltRowBackgroundColorsByTheme)',
-        description: 'Array of colors for background color of each row of the table.',
+        description: 'Specify a list of colors, in hexadecimal code, for the background color of each row of the table. For example, ["#2C333B", "32373D"].',
         type: 'array',
         items: {
           type: 'array',
@@ -1048,7 +1067,7 @@ var optionsSchema = {
         }
       },
       rowColors: {
-        description: 'Array of colors for text color of each row of the table.',
+        description: 'Specify a list of colors, in hexadecimal code, for the text color of each row of the table. For example, ["#2C333B", "32373D"].',
         type: 'array',
         items: {
           type: 'array',
@@ -1059,7 +1078,7 @@ var optionsSchema = {
         }
       },
       sparklineAreaColors: {
-        description: 'Array of colors for sparkline area of each row of the table.',
+        description: 'Specify a list of colors, in hexadecimal code, for the sparkline area of each row of the table. For example, ["#2C333B", "32373D"].',
         type: 'array',
         items: {
           type: 'array',
@@ -1070,7 +1089,7 @@ var optionsSchema = {
         }
       },
       sparklineColors: {
-        description: 'Array of colors for sparkline line of each row of the table.',
+        description: 'Specify a list of colors, in hexadecimal code, for the sparkline stroke of each row of the table. For example, ["#2C333B", "32373D"].',
         type: 'array',
         items: {
           type: 'array',
@@ -1081,7 +1100,7 @@ var optionsSchema = {
         }
       },
       sparklineTypes: {
-        description: 'Area or Line Sparkline. Valid sparkline types include "line", "area".',
+        description: 'Choose either area or line formatting for the Sparkline.',
         type: 'array',
         items: {
           type: 'array',
@@ -1206,6 +1225,42 @@ var editorConfig = [{
       labelWidth: EDITOR_LABEL_WIDTH,
       palette: _toConsumableArray(backgroundColorPaletteSet)
     }
+  }], [{
+    option: 'font',
+    label: i18n_1._('Font'),
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Proportional (Default)'),
+        value: 'proportional'
+      }, {
+        label: i18n_1._('Monospace'),
+        value: 'monospace'
+      }],
+      labelPosition: 'top',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
+  }], [{
+    option: 'fontSize',
+    label: i18n_1._('Font Size'),
+    editor: 'editor.select',
+    editorProps: {
+      values: [{
+        label: i18n_1._('Extra Small (font 10px, row 24px)'),
+        value: 'extraSmall'
+      }, {
+        label: i18n_1._('Small (font 12px, row 24px)'),
+        value: 'small'
+      }, {
+        label: i18n_1._('Default (font 14px, row 32px)'),
+        value: 'default'
+      }, {
+        label: i18n_1._('Large (font 16px, row 36px)'),
+        value: 'large'
+      }],
+      labelPosition: 'top',
+      labelWidth: EDITOR_LABEL_WIDTH
+    }
   }]]
 }, {
   label: i18n_1._('Column Formatting'),
@@ -1424,7 +1479,13 @@ var PAGINATOR_SPACING = 5;
 var SUITableContainer = styled_components_1.default.div.withConfig({
   displayName: "PureTable__SUITableContainer",
   componentId: "tovzjg-3"
-})(["box-sizing:border-box;flex-grow:1;overflow:hidden;", ";", ";", " ", " & [data-fixed-column='true']{table-layout:", ";width:", ";}"], function (_ref) {
+})(["& *{font-family:", ";font-size:", ";line-height:", ";}box-sizing:border-box;flex-grow:1;overflow:hidden;", ";", ";", " ", " & [data-fixed-column='true']{table-layout:", ";width:", ";}"], function (props) {
+  return props.font;
+}, function (props) {
+  return props.fontSize;
+}, function (props) {
+  return props.lineHeight;
+}, function (_ref) {
   var width = _ref.width,
       height = _ref.height,
       isPaging = _ref.isPaging,
@@ -1550,6 +1611,23 @@ var HeadCell = function HeadCell(_a) {
   }, props), value);
 };
 
+var fontMap = {
+  proportional: 'Splunk Platform Sans',
+  monospace: 'Splunk Platform Mono'
+};
+var fontSizeMap = {
+  extraSmall: '10px',
+  small: '12px',
+  default: '14px',
+  large: '16px'
+};
+var rowHeightMap = {
+  extraSmall: '12px',
+  small: '12px',
+  default: '20px',
+  large: '24px'
+};
+
 var PureTable = function PureTable(props) {
   var count = props.count,
       width = props.width,
@@ -1570,7 +1648,9 @@ var PureTable = function PureTable(props) {
       onColumnFormatChange = props.onColumnFormatChange,
       columnFormat = props.columnFormat,
       mode = props.mode,
-      headerVisibility = props.headerVisibility;
+      headerVisibility = props.headerVisibility,
+      font = props.font,
+      fontSize = props.fontSize;
 
   var _React$useState = React.useState(columnFormat),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -1717,6 +1797,9 @@ var PureTable = function PureTable(props) {
     };
   };
 
+  var fontMapped = fontMap[font] || fontMap.proportional;
+  var fontSizeMapped = fontSizeMap[fontSize] || fontSizeMap.default;
+  var rowHeightMapped = rowHeightMap[fontSize] || rowHeightMap.default;
   return React.createElement(VizTableContainer, {
     backgroundColor: backgroundColor,
     ref: containerRef
@@ -1725,7 +1808,10 @@ var PureTable = function PureTable(props) {
     height: height,
     isPaging: isPaging,
     headerStyle: tableHeader.style,
-    widthSet: widthSet
+    widthSet: widthSet,
+    font: fontMapped,
+    fontSize: fontSizeMapped,
+    lineHeight: rowHeightMapped
   }, React.createElement(Table_1.default, {
     headType: headerVisibility !== 'none' ? 'inline' : undefined,
     innerStyle: {
@@ -1849,7 +1935,9 @@ PureTable.propTypes = {
   }),
   theme: T.any,
   width: T.oneOfType([T.number]),
-  onColumnFormatChange: T.func
+  onColumnFormatChange: T.func,
+  font: T.string,
+  fontSize: T.string
 };
 PureTable.defaultProps = {
   columnFormat: {},
@@ -1870,7 +1958,9 @@ PureTable.defaultProps = {
   tableFormat: {},
   theme: {},
   width: 300,
-  onColumnFormatChange: lodash_1.noop
+  onColumnFormatChange: lodash_1.noop,
+  font: fontMap.proportional,
+  fontSize: fontSizeMap.default
 };
 PureTable.displayName = 'VizTable';
 exports.default = withEmptyTableMessage(FixedSizeContainer_1.default(PureTable));
@@ -3327,7 +3417,7 @@ var Cover = styled_components_1.default.div.withConfig({
   componentId: "sc-1gsbnxb-0"
 })(["position:absolute;left:0;right:0;top:0;bottom:0;"]);
 var Blocker = styled_components_1.default.div.attrs({
-  'data-splunk-visualization-version': "24.5.1 - edc4c958c"
+  'data-splunk-visualization-version': "24.6.0 - 539dff0ca"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"