@splunk/visualizations 26.0.0 → 26.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (152) hide show
  1. package/Area.config.js +103 -19
  2. package/Area.config.js.map +1 -1
  3. package/Area.js +646 -243
  4. package/Area.js.map +1 -1
  5. package/Bar.config.js +105 -21
  6. package/Bar.config.js.map +1 -1
  7. package/Bar.js +653 -237
  8. package/Bar.js.map +1 -1
  9. package/Bubble.config.js +95 -21
  10. package/Bubble.config.js.map +1 -1
  11. package/Bubble.js +635 -229
  12. package/Bubble.js.map +1 -1
  13. package/ChoroplethSvg.config.js +66 -15
  14. package/ChoroplethSvg.config.js.map +1 -1
  15. package/ChoroplethSvg.js +589 -211
  16. package/ChoroplethSvg.js.map +1 -1
  17. package/Column.config.js +104 -19
  18. package/Column.config.js.map +1 -1
  19. package/Column.js +666 -239
  20. package/Column.js.map +1 -1
  21. package/Ellipse.config.js +83 -18
  22. package/Ellipse.config.js.map +1 -1
  23. package/Ellipse.js +444 -156
  24. package/Ellipse.js.map +1 -1
  25. package/Events.config.js +101 -19
  26. package/Events.config.js.map +1 -1
  27. package/Events.js +792 -322
  28. package/Events.js.map +1 -1
  29. package/FillerGauge.config.js +97 -28
  30. package/FillerGauge.config.js.map +1 -1
  31. package/FillerGauge.js +786 -390
  32. package/FillerGauge.js.map +1 -1
  33. package/Image.config.js +63 -19
  34. package/Image.config.js.map +1 -1
  35. package/Image.js +439 -164
  36. package/Image.js.map +1 -1
  37. package/Line.config.js +107 -23
  38. package/Line.config.js.map +1 -1
  39. package/Line.js +841 -456
  40. package/Line.js.map +1 -1
  41. package/LinkGraph.config.js +73 -23
  42. package/LinkGraph.config.js.map +1 -1
  43. package/LinkGraph.js +653 -230
  44. package/LinkGraph.js.map +1 -1
  45. package/MIGRATION.md +1082 -0
  46. package/Map.config.js +244 -99
  47. package/Map.config.js.map +1 -1
  48. package/Map.js +1223 -612
  49. package/Map.js.map +1 -1
  50. package/Markdown.config.js +71 -21
  51. package/Markdown.config.js.map +1 -1
  52. package/Markdown.js +477 -202
  53. package/Markdown.js.map +1 -1
  54. package/MarkerGauge.config.js +80 -22
  55. package/MarkerGauge.config.js.map +1 -1
  56. package/MarkerGauge.js +819 -418
  57. package/MarkerGauge.js.map +1 -1
  58. package/ParallelCoordinates.config.js +73 -19
  59. package/ParallelCoordinates.config.js.map +1 -1
  60. package/ParallelCoordinates.js +870 -491
  61. package/ParallelCoordinates.js.map +1 -1
  62. package/Pie.config.js +76 -23
  63. package/Pie.config.js.map +1 -1
  64. package/Pie.js +643 -233
  65. package/Pie.js.map +1 -1
  66. package/Punchcard.config.js +82 -30
  67. package/Punchcard.config.js.map +1 -1
  68. package/Punchcard.js +863 -387
  69. package/Punchcard.js.map +1 -1
  70. package/Rectangle.config.js +86 -20
  71. package/Rectangle.config.js.map +1 -1
  72. package/Rectangle.js +449 -159
  73. package/Rectangle.js.map +1 -1
  74. package/Sankey.config.js +85 -23
  75. package/Sankey.config.js.map +1 -1
  76. package/Sankey.js +895 -349
  77. package/Sankey.js.map +1 -1
  78. package/Scatter.config.js +97 -23
  79. package/Scatter.config.js.map +1 -1
  80. package/Scatter.js +639 -234
  81. package/Scatter.js.map +1 -1
  82. package/SingleValue.config.js +95 -25
  83. package/SingleValue.config.js.map +1 -1
  84. package/SingleValue.js +1198 -656
  85. package/SingleValue.js.map +1 -1
  86. package/SingleValueBasic.js +287 -226
  87. package/SingleValueBasic.js.map +1 -1
  88. package/SingleValueIcon.config.js +93 -23
  89. package/SingleValueIcon.config.js.map +1 -1
  90. package/SingleValueIcon.js +991 -522
  91. package/SingleValueIcon.js.map +1 -1
  92. package/SingleValueRadial.config.js +100 -27
  93. package/SingleValueRadial.config.js.map +1 -1
  94. package/SingleValueRadial.js +1185 -624
  95. package/SingleValueRadial.js.map +1 -1
  96. package/SparkLine.js +127 -68
  97. package/SparkLine.js.map +1 -1
  98. package/Table.config.js +74 -21
  99. package/Table.config.js.map +1 -1
  100. package/Table.js +827 -329
  101. package/Table.js.map +1 -1
  102. package/common/Charting.js +152 -69
  103. package/common/Charting.js.map +1 -1
  104. package/common/ChartingApi.js +25 -14
  105. package/common/ChartingApi.js.map +1 -1
  106. package/common/DocExampleWithVizSandbox.js +530 -0
  107. package/common/DocExampleWithVizSandbox.js.map +1 -0
  108. package/common/EventsDoc.js +139 -104
  109. package/common/EventsDoc.js.map +1 -1
  110. package/common/GaugeMajorTicks.js +79 -69
  111. package/common/GaugeMajorTicks.js.map +1 -1
  112. package/common/GaugeValueMarker.js +54 -45
  113. package/common/GaugeValueMarker.js.map +1 -1
  114. package/common/OptionsDoc.js +178 -87
  115. package/common/OptionsDoc.js.map +1 -1
  116. package/common/OverviewDoc.js +530 -68
  117. package/common/OverviewDoc.js.map +1 -1
  118. package/common/SplunkVisualization.js +47 -20
  119. package/common/SplunkVisualization.js.map +1 -1
  120. package/common/SplunkVisualizationApi.js +15 -9
  121. package/common/SplunkVisualizationApi.js.map +1 -1
  122. package/common/ThemesDoc.js +57 -44
  123. package/common/ThemesDoc.js.map +1 -1
  124. package/common/chartingUtils.js +52 -20
  125. package/common/chartingUtils.js.map +1 -1
  126. package/common/docUtils.js +139 -7
  127. package/common/docUtils.js.map +1 -1
  128. package/common/gaugeUtils.js +185 -102
  129. package/common/gaugeUtils.js.map +1 -1
  130. package/common/shapeUtils.js +28 -16
  131. package/common/shapeUtils.js.map +1 -1
  132. package/common/utils/configUtils.js +50 -15
  133. package/common/utils/configUtils.js.map +1 -1
  134. package/common/utils/dataUtils.js +8 -3
  135. package/common/utils/dataUtils.js.map +1 -1
  136. package/common/utils/hocUtils.js +4 -2
  137. package/common/utils/hocUtils.js.map +1 -1
  138. package/common/utils/layoutUtils.js +2 -1
  139. package/common/utils/layoutUtils.js.map +1 -1
  140. package/common/utils/mapUtils.js +288 -128
  141. package/common/utils/mapUtils.js.map +1 -1
  142. package/common/utils/singleValueUtils.js +242 -197
  143. package/common/utils/singleValueUtils.js.map +1 -1
  144. package/common/utils/testHelper.js +10 -1
  145. package/common/utils/testHelper.js.map +1 -1
  146. package/common/utils/trellisUtils.js +62 -1
  147. package/common/utils/trellisUtils.js.map +1 -1
  148. package/common/utils/urlUtils.js +3 -1
  149. package/common/utils/urlUtils.js.map +1 -1
  150. package/common/withDashboardViz.js +389 -192
  151. package/common/withDashboardViz.js.map +1 -1
  152. package/package.json +18 -26
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Copyright © 2018 Splunk Inc.
2
+ * Copyright © 2024 Splunk Inc.
3
3
  * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
4
4
  * in part without a valid written license from Splunk Inc. is PROHIBITED.
5
5
  */
@@ -87,7 +87,7 @@ module.exports =
87
87
  /******/
88
88
  /******/
89
89
  /******/ // Load entry module and return exports
90
- /******/ return __webpack_require__(__webpack_require__.s = 66);
90
+ /******/ return __webpack_require__(__webpack_require__.s = 76);
91
91
  /******/ })
92
92
  /************************************************************************/
93
93
  /******/ ({
@@ -106,13 +106,6 @@ module.exports = require("prop-types");
106
106
 
107
107
  /***/ }),
108
108
 
109
- /***/ 10:
110
- /***/ (function(module, exports) {
111
-
112
- module.exports = require("@babel/runtime/helpers/slicedToArray");
113
-
114
- /***/ }),
115
-
116
109
  /***/ 12:
117
110
  /***/ (function(module, exports) {
118
111
 
@@ -134,103 +127,103 @@ module.exports = require("@splunk/visualizations-shared/colorUtils");
134
127
 
135
128
  /***/ }),
136
129
 
137
- /***/ 19:
130
+ /***/ 2:
138
131
  /***/ (function(module, exports) {
139
132
 
140
- module.exports = require("@splunk/visualization-themes/variables");
133
+ module.exports = require("styled-components");
141
134
 
142
135
  /***/ }),
143
136
 
144
- /***/ 2:
137
+ /***/ 21:
145
138
  /***/ (function(module, exports) {
146
139
 
147
- module.exports = require("styled-components");
140
+ module.exports = require("@splunk/visualization-themes/variables");
148
141
 
149
142
  /***/ }),
150
143
 
151
- /***/ 30:
144
+ /***/ 41:
152
145
  /***/ (function(module, exports) {
153
146
 
154
147
  module.exports = require("@splunk/react-ui/Select");
155
148
 
156
149
  /***/ }),
157
150
 
158
- /***/ 37:
151
+ /***/ 48:
159
152
  /***/ (function(module, exports) {
160
153
 
161
154
  module.exports = require("lodash/omit");
162
155
 
163
156
  /***/ }),
164
157
 
165
- /***/ 38:
158
+ /***/ 49:
166
159
  /***/ (function(module, exports) {
167
160
 
168
161
  module.exports = require("lodash/cloneDeep");
169
162
 
170
163
  /***/ }),
171
164
 
172
- /***/ 39:
165
+ /***/ 50:
173
166
  /***/ (function(module, exports) {
174
167
 
175
168
  module.exports = require("@splunk/react-ui/Message");
176
169
 
177
170
  /***/ }),
178
171
 
179
- /***/ 40:
172
+ /***/ 51:
180
173
  /***/ (function(module, exports) {
181
174
 
182
175
  module.exports = require("@splunk/react-ui/Tooltip");
183
176
 
184
177
  /***/ }),
185
178
 
186
- /***/ 41:
179
+ /***/ 52:
187
180
  /***/ (function(module, exports) {
188
181
 
189
182
  module.exports = require("@splunk/themes/SplunkThemeProvider");
190
183
 
191
184
  /***/ }),
192
185
 
193
- /***/ 5:
186
+ /***/ 6:
194
187
  /***/ (function(module, exports) {
195
188
 
196
189
  module.exports = require("@splunk/react-ui/Heading");
197
190
 
198
191
  /***/ }),
199
192
 
200
- /***/ 66:
193
+ /***/ 76:
201
194
  /***/ (function(module, __webpack_exports__, __webpack_require__) {
202
195
 
203
196
  "use strict";
204
197
  __webpack_require__.r(__webpack_exports__);
205
198
  /* harmony import */ var _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(13);
206
199
  /* harmony import */ var _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0__);
207
- /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(10);
200
+ /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
208
201
  /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
209
202
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
210
203
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
211
204
  /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
212
205
  /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
213
- /* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
206
+ /* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
214
207
  /* harmony import */ var _splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Heading__WEBPACK_IMPORTED_MODULE_4__);
215
208
  /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2);
216
209
  /* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(styled_components__WEBPACK_IMPORTED_MODULE_5__);
217
- /* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(37);
210
+ /* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(48);
218
211
  /* harmony import */ var lodash_omit__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(lodash_omit__WEBPACK_IMPORTED_MODULE_6__);
219
- /* harmony import */ var lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(38);
212
+ /* harmony import */ var lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(49);
220
213
  /* harmony import */ var lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7__);
221
214
  /* harmony import */ var _splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(12);
222
215
  /* harmony import */ var _splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8__);
223
- /* harmony import */ var _splunk_react_ui_Select__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(30);
216
+ /* harmony import */ var _splunk_react_ui_Select__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(41);
224
217
  /* harmony import */ var _splunk_react_ui_Select__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Select__WEBPACK_IMPORTED_MODULE_9__);
225
- /* harmony import */ var _splunk_react_ui_Message__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(39);
218
+ /* harmony import */ var _splunk_react_ui_Message__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(50);
226
219
  /* harmony import */ var _splunk_react_ui_Message__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Message__WEBPACK_IMPORTED_MODULE_10__);
227
- /* harmony import */ var _splunk_react_ui_Tooltip__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(40);
220
+ /* harmony import */ var _splunk_react_ui_Tooltip__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(51);
228
221
  /* harmony import */ var _splunk_react_ui_Tooltip__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_ui_Tooltip__WEBPACK_IMPORTED_MODULE_11__);
229
- /* harmony import */ var _splunk_themes_SplunkThemeProvider__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(41);
222
+ /* harmony import */ var _splunk_themes_SplunkThemeProvider__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(52);
230
223
  /* harmony import */ var _splunk_themes_SplunkThemeProvider__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_splunk_themes_SplunkThemeProvider__WEBPACK_IMPORTED_MODULE_12__);
231
224
  /* harmony import */ var _splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(14);
232
225
  /* harmony import */ var _splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13__);
233
- /* harmony import */ var _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(19);
226
+ /* harmony import */ var _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(21);
234
227
  /* harmony import */ var _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(_splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__);
235
228
 
236
229
 
@@ -248,6 +241,7 @@ __webpack_require__.r(__webpack_exports__);
248
241
 
249
242
 
250
243
 
244
+
251
245
  var ThemeVar = styled_components__WEBPACK_IMPORTED_MODULE_5___default.a.div.withConfig({
252
246
  displayName: "ThemesDoc__ThemeVar",
253
247
  componentId: "ycgc2f-0"
@@ -272,13 +266,15 @@ var ColorPreview = styled_components__WEBPACK_IMPORTED_MODULE_5___default.a.div.
272
266
  })(["width:20px;height:20px;background:", ";display:inline-block;vertical-align:bottom;margin-right:5px;border:1px solid rgba(0,0,0,0.3);border-radius:5px;"], function (props) {
273
267
  return props.color;
274
268
  });
269
+
275
270
  var Pair = function Pair(_ref) {
276
271
  var title = _ref.title,
277
- text = _ref.text;
272
+ text = _ref.text;
278
273
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PairContainer, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(PairTitle, null, "".concat(title, ":")), Object(_splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13__["isColor"])(text) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(ColorPreview, {
279
274
  color: text
280
275
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("samp", null, text));
281
276
  };
277
+
282
278
  Pair.propTypes = {
283
279
  title: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string,
284
280
  text: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.string
@@ -347,25 +343,30 @@ var themeIdToVariant = {
347
343
  label: 'Prisma Dark Compact'
348
344
  }
349
345
  };
346
+
350
347
  var ThemesDoc = function ThemesDoc(props) {
351
348
  var renderVisualization = props.renderVisualization,
352
- themeVars = props.themes;
349
+ themeVars = props.themes;
350
+
353
351
  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_2__["useState"])(''),
354
- _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
355
- highlightedThemeVariable = _useState2[0],
356
- setHighlightedThemeVariable = _useState2[1];
352
+ _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
353
+ highlightedThemeVariable = _useState2[0],
354
+ setHighlightedThemeVariable = _useState2[1];
355
+
357
356
  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_2__["useState"])(themeIdToVariant.enterpriseLightComfortable),
358
- _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState3, 2),
359
- selectedTheme = _useState4[0],
360
- setSelectedTheme = _useState4[1];
361
- var previewTheme = lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7___default()(themeVars);
362
- // if the highlighted theme variable is a color, color it red
357
+ _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState3, 2),
358
+ selectedTheme = _useState4[0],
359
+ setSelectedTheme = _useState4[1];
360
+
361
+ var previewTheme = lodash_cloneDeep__WEBPACK_IMPORTED_MODULE_7___default()(themeVars); // if the highlighted theme variable is a color, color it red
363
362
  // TODO(fkurniawan): fix red highlighting. this broke ~v20.7.0, and approach needs to be modified again owing to SUI upgrade
363
+
364
364
  if (Object(_splunk_visualizations_shared_colorUtils__WEBPACK_IMPORTED_MODULE_13__["isColor"])(themeVars[highlightedThemeVariable])) {
365
365
  previewTheme[highlightedThemeVariable] = function () {
366
366
  return 'red';
367
367
  };
368
368
  }
369
+
369
370
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(_splunk_react_ui_ColumnLayout__WEBPACK_IMPORTED_MODULE_8___default.a, {
370
371
  style: {
371
372
  marginTop: -20
@@ -408,19 +409,23 @@ var ThemesDoc = function ThemesDoc(props) {
408
409
  level: 4
409
410
  }, "Variables"), Object.keys(previewTheme).map(function (varKey) {
410
411
  var _sharedThemeVariables, _themeFamilyMapping$s;
412
+
411
413
  var themeValue = previewTheme[varKey]({
412
414
  theme: {
413
415
  splunkThemeV1: lodash_omit__WEBPACK_IMPORTED_MODULE_6___default()(selectedTheme, ['label'])
414
416
  }
415
- });
416
- // if a theme variable is in @splunk/visualization-themes and it has the same value
417
+ }); // if a theme variable is in @splunk/visualization-themes and it has the same value
417
418
  // we assume we used the shared variable.
418
- var isFromSharedVariables = (_splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__ === null || _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__ === void 0 ? void 0 : (_sharedThemeVariables = _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__[themeFamilyMapping === null || themeFamilyMapping === void 0 ? void 0 : (_themeFamilyMapping$s = themeFamilyMapping[selectedTheme.family]) === null || _themeFamilyMapping$s === void 0 ? void 0 : _themeFamilyMapping$s[selectedTheme.colorScheme]]) === null || _sharedThemeVariables === void 0 ? void 0 : _sharedThemeVariables[varKey]) === themeValue;
419
- // for now we only show simple theme values (nested theme objects shouldn't have been introduced in the first place)
419
+
420
+ var isFromSharedVariables = (_splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__ === null || _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__ === void 0 ? void 0 : (_sharedThemeVariables = _splunk_visualization_themes_variables__WEBPACK_IMPORTED_MODULE_14__[themeFamilyMapping === null || themeFamilyMapping === void 0 ? void 0 : (_themeFamilyMapping$s = themeFamilyMapping[selectedTheme.family]) === null || _themeFamilyMapping$s === void 0 ? void 0 : _themeFamilyMapping$s[selectedTheme.colorScheme]]) === null || _sharedThemeVariables === void 0 ? void 0 : _sharedThemeVariables[varKey]) === themeValue; // for now we only show simple theme values (nested theme objects shouldn't have been introduced in the first place)
421
+
420
422
  var isJSON;
423
+
421
424
  try {
422
425
  isJSON = _babel_runtime_helpers_typeof__WEBPACK_IMPORTED_MODULE_0___default()(JSON.parse(themeValue)) === 'object';
423
426
  } catch (e) {} // eslint-disable-line no-empty
427
+
428
+
424
429
  return !isJSON && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(ThemeVar, {
425
430
  key: varKey,
426
431
  onMouseOver: function onMouseOver() {
@@ -439,6 +444,7 @@ var ThemesDoc = function ThemesDoc(props) {
439
444
  }));
440
445
  }))));
441
446
  };
447
+
442
448
  ThemesDoc.propTypes = {
443
449
  themes: prop_types__WEBPACK_IMPORTED_MODULE_3___default.a.object.isRequired,
444
450
  // @TODO: replace with themes object from viz config when we add docs/descs to theme vars
@@ -446,6 +452,13 @@ ThemesDoc.propTypes = {
446
452
  };
447
453
  /* harmony default export */ __webpack_exports__["default"] = (ThemesDoc);
448
454
 
455
+ /***/ }),
456
+
457
+ /***/ 8:
458
+ /***/ (function(module, exports) {
459
+
460
+ module.exports = require("@babel/runtime/helpers/slicedToArray");
461
+
449
462
  /***/ })
450
463
 
451
464
  /******/ });
@@ -1 +1 @@
1
- {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"react\"","webpack:///external \"prop-types\"","webpack:///external \"@babel/runtime/helpers/slicedToArray\"","webpack:///external \"@splunk/react-ui/ColumnLayout\"","webpack:///external \"@babel/runtime/helpers/typeof\"","webpack:///external \"@splunk/visualizations-shared/colorUtils\"","webpack:///external \"@splunk/visualization-themes/variables\"","webpack:///external \"styled-components\"","webpack:///external \"@splunk/react-ui/Select\"","webpack:///external \"lodash/omit\"","webpack:///external \"lodash/cloneDeep\"","webpack:///external \"@splunk/react-ui/Message\"","webpack:///external \"@splunk/react-ui/Tooltip\"","webpack:///external \"@splunk/themes/SplunkThemeProvider\"","webpack:///external \"@splunk/react-ui/Heading\"","webpack:///./src/common/ThemesDoc.jsx"],"names":["ThemeVar","styled","div","withConfig","displayName","componentId","ThemeVarName","props","highlighted","PairContainer","PairTitle","span","ColorPreview","color","Pair","_ref","title","text","React","createElement","concat","isColor","propTypes","T","string","themeFamilyMapping","enterprise","colorScheme","dark","light","prisma","themeIdToVariant","enterpriseLightComfortable","density","family","label","enterpriseLightCompact","enterpriseDarkComfortable","enterpriseDarkCompact","prismaLightComfortable","prismaLightCompact","prismaDarkComfortable","prismaDarkCompact","ThemesDoc","renderVisualization","themeVars","themes","_useState","useState","_useState2","_slicedToArray","highlightedThemeVariable","setHighlightedThemeVariable","_useState3","_useState4","selectedTheme","setSelectedTheme","previewTheme","cloneDeep","ColumnLayout","style","marginTop","Row","Column","Heading","level","Select","value","onChange","e","_ref2","Object","keys","map","themeId","Option","key","colStyle","padding","SplunkThemeProvider","Message","type","varKey","_sharedThemeVariables","_themeFamilyMapping$s","themeValue","theme","splunkThemeV1","omit","isFromSharedVariables","sharedThemeVariables","isJSON","_typeof","JSON","parse","onMouseOver","onMouseOut","Tooltip","content","object","isRequired","func"],"mappings":"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","file":"ThemesDoc.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 66);\n","module.exports = require(\"react\");","module.exports = require(\"prop-types\");","module.exports = require(\"@babel/runtime/helpers/slicedToArray\");","module.exports = require(\"@splunk/react-ui/ColumnLayout\");","module.exports = require(\"@babel/runtime/helpers/typeof\");","module.exports = require(\"@splunk/visualizations-shared/colorUtils\");","module.exports = require(\"@splunk/visualization-themes/variables\");","module.exports = require(\"styled-components\");","module.exports = require(\"@splunk/react-ui/Select\");","module.exports = require(\"lodash/omit\");","module.exports = require(\"lodash/cloneDeep\");","module.exports = require(\"@splunk/react-ui/Message\");","module.exports = require(\"@splunk/react-ui/Tooltip\");","module.exports = require(\"@splunk/themes/SplunkThemeProvider\");","module.exports = require(\"@splunk/react-ui/Heading\");","/* eslint-disable react/no-multi-comp */\nimport React, { useState } from 'react';\nimport T from 'prop-types';\nimport Heading from '@splunk/react-ui/Heading';\nimport styled from 'styled-components';\nimport omit from 'lodash/omit';\nimport cloneDeep from 'lodash/cloneDeep';\nimport ColumnLayout from '@splunk/react-ui/ColumnLayout';\nimport Select from '@splunk/react-ui/Select';\nimport Message from '@splunk/react-ui/Message';\nimport Tooltip from '@splunk/react-ui/Tooltip';\nimport SplunkThemeProvider from '@splunk/themes/SplunkThemeProvider';\nimport { isColor } from '@splunk/visualizations-shared/colorUtils';\nimport * as sharedThemeVariables from '@splunk/visualization-themes/variables';\n\nconst ThemeVar = styled.div`\n margin-top: 20px;\n cursor: pointer;\n`;\nconst ThemeVarName = styled.div`\n color: #5ca300;\n padding-bottom: 5px;\n display: inline-block;\n padding-right: 5px;\n font-weight: ${props => (props.highlighted ? 'bold' : 'normal')};\n`;\nconst PairContainer = styled.div`\n margin-left: 40px;\n margin-top: 10px;\n`;\nconst PairTitle = styled.span`\n display: inline-block;\n color: #8293a7;\n width: 80px;\n`;\nconst ColorPreview = styled.div`\n width: 20px;\n height: 20px;\n background: ${props => props.color};\n display: inline-block;\n vertical-align: bottom;\n margin-right: 5px;\n border: 1px solid rgba(0, 0, 0, 0.3);\n border-radius: 5px;\n`;\n\nconst Pair = ({ title, text }) => (\n <PairContainer>\n <PairTitle>{`${title}:`}</PairTitle>\n {isColor(text) && <ColorPreview color={text} />}\n <samp>{text}</samp>\n </PairContainer>\n);\nPair.propTypes = {\n title: T.string,\n text: T.string,\n};\n\nconst themeFamilyMapping = {\n enterprise: {\n colorScheme: {\n dark: 'enterpriseDark',\n light: 'enterprise',\n },\n },\n prisma: {\n colorScheme: {\n dark: 'scp',\n light: 'enterprise',\n },\n },\n};\n\nconst themeIdToVariant = {\n enterpriseLightComfortable: {\n colorScheme: 'light',\n density: 'comfortable',\n family: 'enterprise',\n label: 'Enterprise Light Comfortable',\n },\n enterpriseLightCompact: {\n colorScheme: 'light',\n density: 'compact',\n family: 'enterprise',\n label: 'Enterprise Light Compact',\n },\n enterpriseDarkComfortable: {\n colorScheme: 'dark',\n density: 'comfortable',\n family: 'enterprise',\n label: 'Enterprise Dark Comfortable',\n },\n enterpriseDarkCompact: {\n colorScheme: 'dark',\n density: 'compact',\n family: 'enterprise',\n label: 'Enterprise Dark Compact',\n },\n prismaLightComfortable: {\n colorScheme: 'light',\n density: 'comfortable',\n family: 'prisma',\n label: 'Prisma Light Comfortable',\n },\n prismaLightCompact: {\n colorScheme: 'light',\n density: 'compact',\n family: 'prisma',\n label: 'Prisma Light Compact',\n },\n prismaDarkComfortable: {\n colorScheme: 'dark',\n density: 'comfortable',\n family: 'prisma',\n label: 'Prisma Dark Comfortable',\n },\n prismaDarkCompact: {\n colorScheme: 'dark',\n density: 'compact',\n family: 'prisma',\n label: 'Prisma Dark Compact',\n },\n};\n\nconst ThemesDoc = props => {\n const { renderVisualization, themes: themeVars } = props;\n const [highlightedThemeVariable, setHighlightedThemeVariable] = useState('');\n const [selectedTheme, setSelectedTheme] = useState(themeIdToVariant.enterpriseLightComfortable);\n const previewTheme = cloneDeep(themeVars);\n // if the highlighted theme variable is a color, color it red\n // TODO(fkurniawan): fix red highlighting. this broke ~v20.7.0, and approach needs to be modified again owing to SUI upgrade\n if (isColor(themeVars[highlightedThemeVariable])) {\n previewTheme[highlightedThemeVariable] = () => 'red';\n }\n return (\n <ColumnLayout style={{ marginTop: -20 }}>\n <ColumnLayout.Row>\n <ColumnLayout.Column span={12}>\n <Heading level={4}>Theme</Heading>\n <Select value={selectedTheme} onChange={(e, { value }) => setSelectedTheme(value)}>\n {Object.keys(themeIdToVariant).map(themeId => (\n <Select.Option\n key={themeId}\n label={themeIdToVariant[themeId].label}\n value={themeIdToVariant[themeId]}\n />\n ))}\n </Select>\n </ColumnLayout.Column>\n </ColumnLayout.Row>\n <ColumnLayout.Row>\n <ColumnLayout.Column colStyle={{ padding: 10 }} span={4}>\n <Heading level={4}>Preview</Heading>\n <SplunkThemeProvider\n family={selectedTheme.family}\n colorScheme={selectedTheme.colorScheme}\n density={selectedTheme.density}\n >\n {renderVisualization()}\n </SplunkThemeProvider>\n <Message type=\"info\">\n This preview may differ from the visualization&apos;s default look and feel. <br />\n It exists to show areas affected by theme variables.\n </Message>\n </ColumnLayout.Column>\n <ColumnLayout.Column colStyle={{ padding: 10 }} span={8}>\n <Heading level={4}>Variables</Heading>\n {Object.keys(previewTheme).map(varKey => {\n const themeValue = previewTheme[varKey]({\n theme: { splunkThemeV1: omit(selectedTheme, ['label']) },\n });\n // if a theme variable is in @splunk/visualization-themes and it has the same value\n // we assume we used the shared variable.\n const isFromSharedVariables =\n sharedThemeVariables?.[\n themeFamilyMapping?.[selectedTheme.family]?.[selectedTheme.colorScheme]\n ]?.[varKey] === themeValue;\n // for now we only show simple theme values (nested theme objects shouldn't have been introduced in the first place)\n let isJSON;\n try {\n isJSON = typeof JSON.parse(themeValue) === 'object';\n } catch (e) {} // eslint-disable-line no-empty\n return (\n !isJSON && (\n <ThemeVar\n key={varKey}\n onMouseOver={() => setHighlightedThemeVariable(varKey)}\n onMouseOut={() => setHighlightedThemeVariable('')}\n >\n <ThemeVarName\n highlighted={varKey === highlightedThemeVariable}\n >{`${varKey}`}</ThemeVarName>\n {isFromSharedVariables && (\n <Tooltip content=\"This is a shared theme variable from @splunk/visualization-themes\" />\n )}\n <Pair title=\"Value\" text={themeValue} />\n </ThemeVar>\n )\n );\n })}\n </ColumnLayout.Column>\n </ColumnLayout.Row>\n </ColumnLayout>\n );\n};\n\nThemesDoc.propTypes = {\n themes: T.object.isRequired, // @TODO: replace with themes object from viz config when we add docs/descs to theme vars\n renderVisualization: T.func.isRequired,\n};\n\nexport default ThemesDoc;\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///external \"react\"","webpack:///external \"prop-types\"","webpack:///external \"@splunk/react-ui/ColumnLayout\"","webpack:///external \"@babel/runtime/helpers/typeof\"","webpack:///external \"@splunk/visualizations-shared/colorUtils\"","webpack:///external \"styled-components\"","webpack:///external \"@splunk/visualization-themes/variables\"","webpack:///external \"@splunk/react-ui/Select\"","webpack:///external \"lodash/omit\"","webpack:///external \"lodash/cloneDeep\"","webpack:///external \"@splunk/react-ui/Message\"","webpack:///external \"@splunk/react-ui/Tooltip\"","webpack:///external \"@splunk/themes/SplunkThemeProvider\"","webpack:///external \"@splunk/react-ui/Heading\"","webpack:///./src/common/ThemesDoc.jsx","webpack:///external \"@babel/runtime/helpers/slicedToArray\""],"names":["ThemeVar","styled","ThemeVarName","props","PairContainer","PairTitle","ColorPreview","Pair","title","text","isColor","T","string","themeFamilyMapping","enterprise","colorScheme","dark","light","prisma","themeIdToVariant","enterpriseLightComfortable","density","family","label","enterpriseLightCompact","enterpriseDarkComfortable","enterpriseDarkCompact","prismaLightComfortable","prismaLightCompact","prismaDarkComfortable","prismaDarkCompact","ThemesDoc","renderVisualization","themeVars","useState","highlightedThemeVariable","setHighlightedThemeVariable","selectedTheme","setSelectedTheme","previewTheme","cloneDeep","marginTop","value","padding","themeValue","theme","splunkThemeV1","omit","isFromSharedVariables","isJSON","JSON","varKey","themes","isRequired"],"mappings":"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","file":"ThemesDoc.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 76);\n","module.exports = require(\"react\");","module.exports = require(\"prop-types\");","module.exports = require(\"@splunk/react-ui/ColumnLayout\");","module.exports = require(\"@babel/runtime/helpers/typeof\");","module.exports = require(\"@splunk/visualizations-shared/colorUtils\");","module.exports = require(\"styled-components\");","module.exports = require(\"@splunk/visualization-themes/variables\");","module.exports = require(\"@splunk/react-ui/Select\");","module.exports = require(\"lodash/omit\");","module.exports = require(\"lodash/cloneDeep\");","module.exports = require(\"@splunk/react-ui/Message\");","module.exports = require(\"@splunk/react-ui/Tooltip\");","module.exports = require(\"@splunk/themes/SplunkThemeProvider\");","module.exports = require(\"@splunk/react-ui/Heading\");","/* eslint-disable react/no-multi-comp */\nimport React, { useState } from 'react';\nimport T from 'prop-types';\nimport Heading from '@splunk/react-ui/Heading';\nimport styled from 'styled-components';\nimport omit from 'lodash/omit';\nimport cloneDeep from 'lodash/cloneDeep';\nimport ColumnLayout from '@splunk/react-ui/ColumnLayout';\nimport Select from '@splunk/react-ui/Select';\nimport Message from '@splunk/react-ui/Message';\nimport Tooltip from '@splunk/react-ui/Tooltip';\nimport SplunkThemeProvider from '@splunk/themes/SplunkThemeProvider';\nimport { isColor } from '@splunk/visualizations-shared/colorUtils';\nimport * as sharedThemeVariables from '@splunk/visualization-themes/variables';\n\nconst ThemeVar = styled.div`\n margin-top: 20px;\n cursor: pointer;\n`;\nconst ThemeVarName = styled.div`\n color: #5ca300;\n padding-bottom: 5px;\n display: inline-block;\n padding-right: 5px;\n font-weight: ${props => (props.highlighted ? 'bold' : 'normal')};\n`;\nconst PairContainer = styled.div`\n margin-left: 40px;\n margin-top: 10px;\n`;\nconst PairTitle = styled.span`\n display: inline-block;\n color: #8293a7;\n width: 80px;\n`;\nconst ColorPreview = styled.div`\n width: 20px;\n height: 20px;\n background: ${props => props.color};\n display: inline-block;\n vertical-align: bottom;\n margin-right: 5px;\n border: 1px solid rgba(0, 0, 0, 0.3);\n border-radius: 5px;\n`;\n\nconst Pair = ({ title, text }) => (\n <PairContainer>\n <PairTitle>{`${title}:`}</PairTitle>\n {isColor(text) && <ColorPreview color={text} />}\n <samp>{text}</samp>\n </PairContainer>\n);\nPair.propTypes = {\n title: T.string,\n text: T.string,\n};\n\nconst themeFamilyMapping = {\n enterprise: {\n colorScheme: {\n dark: 'enterpriseDark',\n light: 'enterprise',\n },\n },\n prisma: {\n colorScheme: {\n dark: 'scp',\n light: 'enterprise',\n },\n },\n};\n\nconst themeIdToVariant = {\n enterpriseLightComfortable: {\n colorScheme: 'light',\n density: 'comfortable',\n family: 'enterprise',\n label: 'Enterprise Light Comfortable',\n },\n enterpriseLightCompact: {\n colorScheme: 'light',\n density: 'compact',\n family: 'enterprise',\n label: 'Enterprise Light Compact',\n },\n enterpriseDarkComfortable: {\n colorScheme: 'dark',\n density: 'comfortable',\n family: 'enterprise',\n label: 'Enterprise Dark Comfortable',\n },\n enterpriseDarkCompact: {\n colorScheme: 'dark',\n density: 'compact',\n family: 'enterprise',\n label: 'Enterprise Dark Compact',\n },\n prismaLightComfortable: {\n colorScheme: 'light',\n density: 'comfortable',\n family: 'prisma',\n label: 'Prisma Light Comfortable',\n },\n prismaLightCompact: {\n colorScheme: 'light',\n density: 'compact',\n family: 'prisma',\n label: 'Prisma Light Compact',\n },\n prismaDarkComfortable: {\n colorScheme: 'dark',\n density: 'comfortable',\n family: 'prisma',\n label: 'Prisma Dark Comfortable',\n },\n prismaDarkCompact: {\n colorScheme: 'dark',\n density: 'compact',\n family: 'prisma',\n label: 'Prisma Dark Compact',\n },\n};\n\nconst ThemesDoc = props => {\n const { renderVisualization, themes: themeVars } = props;\n const [highlightedThemeVariable, setHighlightedThemeVariable] = useState('');\n const [selectedTheme, setSelectedTheme] = useState(themeIdToVariant.enterpriseLightComfortable);\n const previewTheme = cloneDeep(themeVars);\n // if the highlighted theme variable is a color, color it red\n // TODO(fkurniawan): fix red highlighting. this broke ~v20.7.0, and approach needs to be modified again owing to SUI upgrade\n if (isColor(themeVars[highlightedThemeVariable])) {\n previewTheme[highlightedThemeVariable] = () => 'red';\n }\n return (\n <ColumnLayout style={{ marginTop: -20 }}>\n <ColumnLayout.Row>\n <ColumnLayout.Column span={12}>\n <Heading level={4}>Theme</Heading>\n <Select value={selectedTheme} onChange={(e, { value }) => setSelectedTheme(value)}>\n {Object.keys(themeIdToVariant).map(themeId => (\n <Select.Option\n key={themeId}\n label={themeIdToVariant[themeId].label}\n value={themeIdToVariant[themeId]}\n />\n ))}\n </Select>\n </ColumnLayout.Column>\n </ColumnLayout.Row>\n <ColumnLayout.Row>\n <ColumnLayout.Column colStyle={{ padding: 10 }} span={4}>\n <Heading level={4}>Preview</Heading>\n <SplunkThemeProvider\n family={selectedTheme.family}\n colorScheme={selectedTheme.colorScheme}\n density={selectedTheme.density}\n >\n {renderVisualization()}\n </SplunkThemeProvider>\n <Message type=\"info\">\n This preview may differ from the visualization&apos;s default look and feel. <br />\n It exists to show areas affected by theme variables.\n </Message>\n </ColumnLayout.Column>\n <ColumnLayout.Column colStyle={{ padding: 10 }} span={8}>\n <Heading level={4}>Variables</Heading>\n {Object.keys(previewTheme).map(varKey => {\n const themeValue = previewTheme[varKey]({\n theme: { splunkThemeV1: omit(selectedTheme, ['label']) },\n });\n // if a theme variable is in @splunk/visualization-themes and it has the same value\n // we assume we used the shared variable.\n const isFromSharedVariables =\n sharedThemeVariables?.[\n themeFamilyMapping?.[selectedTheme.family]?.[selectedTheme.colorScheme]\n ]?.[varKey] === themeValue;\n // for now we only show simple theme values (nested theme objects shouldn't have been introduced in the first place)\n let isJSON;\n try {\n isJSON = typeof JSON.parse(themeValue) === 'object';\n } catch (e) {} // eslint-disable-line no-empty\n return (\n !isJSON && (\n <ThemeVar\n key={varKey}\n onMouseOver={() => setHighlightedThemeVariable(varKey)}\n onMouseOut={() => setHighlightedThemeVariable('')}\n >\n <ThemeVarName\n highlighted={varKey === highlightedThemeVariable}\n >{`${varKey}`}</ThemeVarName>\n {isFromSharedVariables && (\n <Tooltip content=\"This is a shared theme variable from @splunk/visualization-themes\" />\n )}\n <Pair title=\"Value\" text={themeValue} />\n </ThemeVar>\n )\n );\n })}\n </ColumnLayout.Column>\n </ColumnLayout.Row>\n </ColumnLayout>\n );\n};\n\nThemesDoc.propTypes = {\n themes: T.object.isRequired, // @TODO: replace with themes object from viz config when we add docs/descs to theme vars\n renderVisualization: T.func.isRequired,\n};\n\nexport default ThemesDoc;\n","module.exports = require(\"@babel/runtime/helpers/slicedToArray\");"],"sourceRoot":""}
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Copyright © 2018 Splunk Inc.
2
+ * Copyright © 2024 Splunk Inc.
3
3
  * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
4
4
  * in part without a valid written license from Splunk Inc. is PROHIBITED.
5
5
  */
@@ -87,46 +87,51 @@ module.exports =
87
87
  /******/
88
88
  /******/
89
89
  /******/ // Load entry module and return exports
90
- /******/ return __webpack_require__(__webpack_require__.s = 67);
90
+ /******/ return __webpack_require__(__webpack_require__.s = 77);
91
91
  /******/ })
92
92
  /************************************************************************/
93
93
  /******/ ({
94
94
 
95
- /***/ 26:
95
+ /***/ 3:
96
96
  /***/ (function(module, exports) {
97
97
 
98
- module.exports = require("@babel/runtime/helpers/toConsumableArray");
98
+ module.exports = require("lodash");
99
99
 
100
100
  /***/ }),
101
101
 
102
- /***/ 3:
102
+ /***/ 37:
103
103
  /***/ (function(module, exports) {
104
104
 
105
- module.exports = require("lodash");
105
+ module.exports = require("@babel/runtime/helpers/toConsumableArray");
106
106
 
107
107
  /***/ }),
108
108
 
109
- /***/ 67:
109
+ /***/ 77:
110
110
  /***/ (function(module, exports, __webpack_require__) {
111
111
 
112
112
  "use strict";
113
113
 
114
114
 
115
- var _toConsumableArray = __webpack_require__(26);
115
+ var _toConsumableArray = __webpack_require__(37);
116
+
116
117
  var __rest = this && this.__rest || function (s, e) {
117
118
  var t = {};
119
+
118
120
  for (var p in s) {
119
121
  if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
120
122
  }
123
+
121
124
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
122
125
  if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
123
126
  }
124
127
  return t;
125
128
  };
129
+
126
130
  Object.defineProperty(exports, "__esModule", {
127
131
  value: true
128
132
  });
129
133
  exports.constructFieldsAndColumns = exports.toArrayForSeries = exports.isMultiSeriesData = exports.convertOverlayFields = exports.convertY2AxisOptions = exports.mapToValues = exports.truncateData = exports.getAnnotations = void 0;
134
+
130
135
  var lodash_1 = __webpack_require__(3);
131
136
  /**
132
137
  * Get formatted annotations
@@ -137,10 +142,12 @@ var lodash_1 = __webpack_require__(3);
137
142
  * @param {Array} options.annotationLabel
138
143
  * @returns {Array}
139
144
  */
145
+
146
+
140
147
  var getAnnotations = function getAnnotations(_ref) {
141
148
  var annotationX = _ref.annotationX,
142
- annotationColor = _ref.annotationColor,
143
- annotationLabel = _ref.annotationLabel;
149
+ annotationColor = _ref.annotationColor,
150
+ annotationLabel = _ref.annotationLabel;
144
151
  return annotationX && annotationX.length ? annotationX.map(function (timestamp, i) {
145
152
  return {
146
153
  color: annotationColor && annotationColor[i],
@@ -149,6 +156,7 @@ var getAnnotations = function getAnnotations(_ref) {
149
156
  };
150
157
  }) : [];
151
158
  };
159
+
152
160
  exports.getAnnotations = getAnnotations;
153
161
  /**
154
162
  * Truncate the result set to given limit
@@ -157,20 +165,25 @@ exports.getAnnotations = getAnnotations;
157
165
  * @param {Number|String} truncationLimit - options['chart.resultTruncationLimit']
158
166
  * @returns {Object}
159
167
  */
168
+
160
169
  var truncateData = function truncateData(dataSet, truncationLimit) {
161
170
  if (!dataSet) {
162
171
  return null;
163
172
  }
173
+
164
174
  var limit = parseInt(truncationLimit, 10);
175
+
165
176
  if (!limit || limit <= 0) {
166
177
  return dataSet;
167
178
  }
179
+
168
180
  var truncatedData = Object.assign({}, dataSet);
169
181
  truncatedData.columns = truncatedData.columns.map(function (columnData) {
170
182
  return columnData && Array.isArray(columnData) ? columnData.slice(0, limit) : columnData;
171
183
  });
172
184
  return truncatedData;
173
185
  };
186
+
174
187
  exports.truncateData = truncateData;
175
188
  /**
176
189
  * Helper method to update the option values into the values that SC accepts
@@ -178,12 +191,14 @@ exports.truncateData = truncateData;
178
191
  * @param {Object} options
179
192
  * @returns {Object}
180
193
  */
194
+
181
195
  var mapToValues = function mapToValues(optionValuesSCMapping) {
182
196
  return function (options) {
183
197
  var convertedOptions = Object.assign({}, options);
184
198
  Object.keys(optionValuesSCMapping).forEach(function (key) {
185
199
  if ((0, lodash_1.has)(options, key)) {
186
200
  var updatedValue = optionValuesSCMapping[key][options[key]];
201
+
187
202
  if (!(0, lodash_1.isUndefined)(updatedValue)) {
188
203
  convertedOptions[key] = updatedValue;
189
204
  }
@@ -192,6 +207,7 @@ var mapToValues = function mapToValues(optionValuesSCMapping) {
192
207
  return convertedOptions;
193
208
  };
194
209
  };
210
+
195
211
  exports.mapToValues = mapToValues;
196
212
  /**
197
213
  * Helper method to process options related to y2Fields
@@ -199,18 +215,23 @@ exports.mapToValues = mapToValues;
199
215
  * @param {Object} originalOptions
200
216
  * @returns {Object}
201
217
  */
218
+
202
219
  var convertY2AxisOptions = function convertY2AxisOptions(_a) {
203
220
  var y2Fields = _a.y2Fields,
204
- originalOptions = __rest(_a, ["y2Fields"]);
221
+ originalOptions = __rest(_a, ["y2Fields"]);
222
+
205
223
  var convertedOptions = Object.assign({}, originalOptions);
224
+
206
225
  if (y2Fields) {
207
226
  convertedOptions['axisY2.enabled'] = true;
208
227
  convertedOptions['axisY2.fields'] = (0, lodash_1.isArray)(y2Fields) ? y2Fields.filter(function (name) {
209
228
  return name;
210
229
  }).join(',') : y2Fields;
211
230
  }
231
+
212
232
  return convertedOptions;
213
233
  };
234
+
214
235
  exports.convertY2AxisOptions = convertY2AxisOptions;
215
236
  /**
216
237
  * Helper method to format value for overlayFields
@@ -218,9 +239,11 @@ exports.convertY2AxisOptions = convertY2AxisOptions;
218
239
  * @param {Object} originalOptions
219
240
  * @returns {Object}
220
241
  */
242
+
221
243
  var convertOverlayFields = function convertOverlayFields(originalOptions) {
222
244
  var convertedOptions = Object.assign({}, originalOptions);
223
245
  var overlayFields = originalOptions.overlayFields;
246
+
224
247
  if (overlayFields) {
225
248
  convertedOptions.overlayFields = Array.isArray(overlayFields) ? overlayFields.filter(function (field) {
226
249
  return field;
@@ -228,17 +251,21 @@ var convertOverlayFields = function convertOverlayFields(originalOptions) {
228
251
  return field.trim();
229
252
  }).join(',') : overlayFields;
230
253
  }
254
+
231
255
  return convertedOptions;
232
256
  };
257
+
233
258
  exports.convertOverlayFields = convertOverlayFields;
234
259
  /**
235
260
  * checks whether data is multi series data
236
261
  * @param {array} data array
237
262
  * @return {Boolean}
238
263
  */
264
+
239
265
  var isMultiSeriesData = function isMultiSeriesData(data) {
240
266
  return Array.isArray(data) && Array.isArray(data[0]);
241
267
  };
268
+
242
269
  exports.isMultiSeriesData = isMultiSeriesData;
243
270
  /**
244
271
  * checks whether data is multi series data and returns value as array
@@ -246,19 +273,22 @@ exports.isMultiSeriesData = isMultiSeriesData;
246
273
  * @param {*} value to return as array
247
274
  * @return {array}
248
275
  */
276
+
249
277
  var toArrayForSeries = function toArrayForSeries(data, value) {
250
278
  return (0, exports.isMultiSeriesData)(data) ? value : [value];
251
279
  };
280
+
252
281
  exports.toArrayForSeries = toArrayForSeries;
282
+
253
283
  var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
254
284
  var _ref2$x = _ref2.x,
255
- x = _ref2$x === void 0 ? [] : _ref2$x,
256
- _ref2$y = _ref2.y,
257
- y = _ref2$y === void 0 ? [] : _ref2$y,
258
- xField = _ref2.xField,
259
- yFields = _ref2.yFields,
260
- y2 = _ref2.y2,
261
- y2Fields = _ref2.y2Fields;
285
+ x = _ref2$x === void 0 ? [] : _ref2$x,
286
+ _ref2$y = _ref2.y,
287
+ y = _ref2$y === void 0 ? [] : _ref2$y,
288
+ xField = _ref2.xField,
289
+ yFields = _ref2.yFields,
290
+ y2 = _ref2.y2,
291
+ y2Fields = _ref2.y2Fields;
262
292
  var columns = [x.map(String)].concat(_toConsumableArray((0, exports.toArrayForSeries)(y, y).map(function (series) {
263
293
  return series.map(String);
264
294
  })));
@@ -269,10 +299,10 @@ var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
269
299
  return {
270
300
  name: field
271
301
  };
272
- })));
273
- // splunk-charting requires y2 to be part of columns
302
+ }))); // splunk-charting requires y2 to be part of columns
274
303
  // when y & y2 options are configured with different (mutually exclusive) series
275
304
  // y2 columns need to be added to columns
305
+
276
306
  if (y2Fields) {
277
307
  var y2FieldsArray = (0, exports.toArrayForSeries)(y2, y2Fields);
278
308
  var y2AsArray = (0, exports.toArrayForSeries)(y2, y2).map(function (series) {
@@ -287,11 +317,13 @@ var constructFieldsAndColumns = function constructFieldsAndColumns(_ref2) {
287
317
  }
288
318
  });
289
319
  }
320
+
290
321
  return {
291
322
  columns: columns,
292
323
  fields: fields
293
324
  };
294
325
  };
326
+
295
327
  exports.constructFieldsAndColumns = constructFieldsAndColumns;
296
328
 
297
329
  /***/ })