@splunk/visualizations 25.8.1 → 25.9.1

package/README.internal.md

@@ -2,7 +2,9 @@ A visualization is a React component that you can use in an application like Das
 
 The visualizations library consists of React components built on top of Highcharts and D3.js. If you’re familiar with these libraries, you can build on that knowledge and add tooltips, legends, and data series to a chart. You can choose from more than 20 different visualizations that show data in a variety of formats. If you would like to use Splunk visualizations in your applications, read on to learn more.
 
-If you don’t find a visualization you would like to use, go to [Contribute a Visualization](https://devplat.splunkdev.page/vision/?path=/story/overview-how-to-contribute--page). If you have any questions, please reach out to [ssg-swp-viz@splunk.com](ssg-swp-viz@splunk.com).
+Documentation for the Splunk Visualizations library can be found at [@splunk/visualizations](https://splunkui.splunkeng.com/Packages/visualizations).
+
+If you don’t find a visualization you would like to use, go to [Contribute a Visualization](https://splunkui.splunkeng.com/Packages/visualizations/?path=%2FHowtoContribute). If you have any questions, please reach out to [ssg-swp-viz@splunk.com](ssg-swp-viz@splunk.com) or Slack us at [#splunk-viz](slack://channel?team=T024FQ3UW&id=CCC0XPLD6).
 
 ## Install
 
@@ -56,11 +58,11 @@ You can use UDF to create dashboards with visualizations, or you can work direct
 -   Splunk visualizations to enhance data presentation
 -   tokens to pass runtime values within a dashboard
 
-To install the UDF library, see the setup guide in the [Quick Start](https://eng-docs.splunkeng.com/dashboard-docs/latest/?path=%2FQuickStart). When you have it installed, follow the quick start to install dependencies and learn about using the libraries.
+To install the UDF library, see the setup guide in the [Quick Start](https://splunkui.splunkeng.com/Packages/dashboard-docs/?path=%2FQuickStart). When you have it installed, follow the quick start to install dependencies and learn about using the libraries.
 
 You can also include visualizations in single page apps by using visualizations directly. To use visualizations directly, follow the [Splunk UI tutorials](https://splunkui.splunkeng.com/Create/Overview) to create a component and a simple app. The tutorials will create the app structure for other development.
 
-Install the visualizations libraries and dependencies listed in the Visualizations docs. Some of the packages may have been installed with the Splunk UI setup.
+Install the visualizations libraries and dependencies listed in the [Visualizations docs](https://splunkui.splunkeng.com/Packages/visualizations). Some of the packages may have been installed with the Splunk UI setup.
 
 ## Customize a visualization
 
@@ -75,6 +77,14 @@ A React visualization is reusable bits of code that you can use in an app or das
 
 **Options** provide an extensive set of builtin properties that you configure. In React, properties are referred to as props. You can set props programmatically, or use an app to set them. For every visualization, there is a description and a type. In some cases, a prop value is selected from a set of values or an enumeration. In other cases, the author specifies the value of a prop. By setting props, you can change fonts, colors, data sources, or opacity of colors in a chart. Default values exist for most components so you can also leave a prop as is.
 
-**Events** offer a mechanism to capture user activity on a chart. Activities can include point clicks on a chart or legend, range selection on a chart, as well as events like holding the pointer over a point or moving the pointer away. Each platform visualization has a tab for events that lists the events available for the chart. When an event occurs, such as a point click, the click event captures the data. You can use the data to drill down further by using the data points. For more information, see the [Interaction Guide](https://eng-docs.splunkeng.com/visualizations/latest/?path=%2FInteractionGuide).
+**Events** offer a mechanism to capture user activity on a chart. Activities can include point clicks on a chart or legend, range selection on a chart, as well as events like holding the pointer over a point or moving the pointer away. Each platform visualization has a tab for events that lists the events available for the chart. When an event occurs, such as a point click, the click event captures the data. You can use the data to drill down further by using the data points. For more information, see the [Interaction Guide](https://splunkui.splunkeng.com/Packages/visualizations/?path=%2FInteractionGuide).
+
+Dynamic options syntax (DOS), also referred to as DSL in the docs, exposes even more functionality in charts. A chart that presents text or background display according to a threshold value makes a data presentation more impactful. Dynamic options are a domain-specific language to bind data to options and make data presentation more reflective of changes. The dynamic options syntax consists of data sources, selector functions, and formatters. In the dynamic options syntax, the categories can be combined to create a pipeline. The pipeline begins with a data source, then includes selector functions to extract the data of interest, and formatters to transform and map the data. For more information about dynamic options syntax, see [Fundamentals of DSL](https://splunkui.splunkeng.com/Packages/visualizations/?path=%2FFundamentalsofDSL).
+
+## Resources
 
-Dynamic options syntax (DOS), also referred to as DSL in the docs, exposes even more functionality in charts. A chart that presents text or background display according to a threshold value makes a data presentation more impactful. Dynamic options are a domain-specific language to bind data to options and make data presentation more reflective of changes. The dynamic options syntax consists of data sources, selector functions, and formatters. In the dynamic options syntax, the categories can be combined to create a pipeline. The pipeline begins with a data source, then includes selector functions to extract the data of interest, and formatters to transform and map the data. For more information about dynamic options syntax, see [Fundamentals of DSL](https://eng-docs.splunkeng.com/visualizations/latest/?path=%2FFundamentalsofDSL).
+-   Release schedule can be found at [UDF & Visualization Releases](https://splunk.atlassian.net/wiki/spaces/SWP/pages/1078219509308/UDF+Visualization+Releases)
+-   Documentation and API reference can be found at [@splunk/visualizations](https://splunkui.splunkeng.com/Packages/visualizations)
+-   Storybooks playground with the main branch can be found at [devplat.splunkdev.page/vision](https://devplat.splunkdev.page/vision)
+-   A Splunk app using UDF with the main branch visualization viewing/editing/exporting experience can be found at [vizplayground:8000](http://vizplayground:8000)
+    -   To request access to the Viz Playground instance, please fill out [this form](https://forms.gle/JEkUDXiYE52qLzcL6)

package/README.md

@@ -2,6 +2,8 @@ A visualization is a React component that you can use in an application like Das
 
 The visualizations library consists of React components built on top of Highcharts and D3.js. If you’re familiar with these libraries, you can build on that knowledge and add tooltips, legends, and data series to a chart. You can choose from more than 20 different visualizations that show data in a variety of formats. If you would like to use Splunk visualizations in your applications, read on to learn more.
 
+Documentation for the Splunk Visualizations library can be found at [@splunk/visualizations](https://splunkui.splunk.com/Packages/visualizations).
+
 ## Install
 
 Install @splunk/visualizations
@@ -58,7 +60,7 @@ To install the UDF library, see the setup guide in the [Quick Start](https://spl
 
 You can also include visualizations in single page apps by using visualizations directly. To use visualizations directly, follow the [Splunk UI tutorials](https://splunkui.splunk.com/Create/Overview) to create a component and a simple app. The tutorials will create the app structure for other development.
 
-Install the visualizations libraries and dependencies listed in the Visualizations docs. Some of the packages may have been installed with the Splunk UI setup.
+Install the visualizations libraries and dependencies listed in the [Visualizations docs](https://splunkui.splunk.com/Packages/visualizations). Some of the packages may have been installed with the Splunk UI setup.
 
 ## Customize a visualization
 

package/Rectangle.js

@@ -87,7 +87,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 451);
+/******/ 	return __webpack_require__(__webpack_require__.s = 449);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -412,7 +412,7 @@ var withFixedSizeContainer = function withFixedSizeContainer(Viz) {
     }
     return React.createElement(FixSizeItem, {
       "data-test": "fix-size-item",
-      "data-splunk-visualization-version": "25.8.1 - 742d5fb96",
+      "data-splunk-visualization-version": "25.9.1 - 5ba41e723",
       width: width,
       height: height,
       backgroundColor: backgroundColor
@@ -502,7 +502,7 @@ var styled_components_1 = __webpack_require__(4);
 var lodash_1 = __webpack_require__(3);
 var T = __webpack_require__(1);
 var withDashboardViz_1 = __webpack_require__(36);
-var config_1 = __webpack_require__(452);
+var config_1 = __webpack_require__(450);
 exports.config = config_1.default;
 var shapeUtils_1 = __webpack_require__(117);
 var SVGContainer = styled_components_1.default.svg.withConfig({
@@ -1188,10 +1188,18 @@ var withDashboardViz = function withDashboardViz(opts) {
     var _React$useState3 = React.useState("".concat(vizConfig.name, " - ").concat(id_1.createGUID())),
       _React$useState4 = _slicedToArray(_React$useState3, 1),
       visualizationID = _React$useState4[0];
-    var _React$useState5 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
+    var _React$useState5 = React.useState({}),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      useAsyncEvaluatedOptions = _React$useState6[0],
-      setUseAsyncEvaluatedOptions = _React$useState6[1];
+      dataSourcesInState = _React$useState6[0],
+      setDataSourcesInState = _React$useState6[1];
+    var _React$useState7 = React.useState(),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      dataFramesInState = _React$useState8[0],
+      setDataFramesInState = _React$useState8[1];
+    var _React$useState9 = React.useState(Boolean(featureFlagContext && featureFlagContext.visualizations_useWebWorkersForDSL && typeof Worker !== 'undefined')),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      useAsyncEvaluatedOptions = _React$useState10[0],
+      setUseAsyncEvaluatedOptions = _React$useState10[1];
     evaluatedOptions = useDeepMemo_1.useDeepMemo(function () {
       try {
         if (useAsyncEvaluatedOptions) {
@@ -1214,10 +1222,16 @@ var withDashboardViz = function withDashboardViz(opts) {
             setUseAsyncEvaluatedOptions(false);
           });
         } else {
+          var dataFrames = dataFramesInState;
+          if (dataSources !== dataSourcesInState) {
+            setDataSourcesInState(dataSources);
+            dataFrames = Options_1.Options.dataFrameFromDataSource(dataSources);
+            setDataFramesInState(dataFrames);
+          }
           return Options_1.Options.evaluate({
             context: lodash_1.defaultsDeep({}, context, vizConfig.defaultContext),
             options: hocUtils_1.deepMergeWithArrayPrimitiveOverrides({}, options, defaultOptions)
-          }, dataSources, themeFunc);
+          }, dataSources, themeFunc, dataFrames);
         }
       } catch (e) {
         // eslint-disable-next-line no-console
@@ -1610,6 +1624,44 @@ exports.useDeepMemo = useDeepMemo;
 
 /***/ }),
 
+/***/ 449:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  Object.defineProperty(o, k2, {
+    enumerable: true,
+    get: function get() {
+      return m[k];
+    }
+  });
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = this && this.__exportStar || function (m, exports) {
+  for (var p in m) {
+    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+  }
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+__exportStar(__webpack_require__(161), exports);
+var Rectangle_1 = __webpack_require__(161);
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return Rectangle_1.default;
+  }
+});
+
+/***/ }),
+
 /***/ 45:
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -1679,45 +1731,7 @@ exports.default = FixedSizeContainer_1.default(exports.MissingPropsMessage);
 
 /***/ }),
 
-/***/ 451:
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  Object.defineProperty(o, k2, {
-    enumerable: true,
-    get: function get() {
-      return m[k];
-    }
-  });
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __exportStar = this && this.__exportStar || function (m, exports) {
-  for (var p in m) {
-    if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-  }
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-__exportStar(__webpack_require__(161), exports);
-var Rectangle_1 = __webpack_require__(161);
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return Rectangle_1.default;
-  }
-});
-
-/***/ }),
-
-/***/ 452:
+/***/ 450:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -2062,7 +2076,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': "25.8.1 - 742d5fb96"
+  'data-splunk-visualization-version': "25.9.1 - 5ba41e723"
 }).withConfig({
   displayName: "withEditModeCover__Blocker",
   componentId: "sc-1gsbnxb-1"