@splunk/visualizations 23.4.0 → 24.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@splunk/visualizations",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Splunk",
-  "version": "23.4.0",
+  "version": "24.1.0",
   "scripts": {
     "build": "NODE_ENV=production webpack --config ./webpack.config.js --bail",
     "build-storybook": "build-storybook -c .storybook -s fonts -o .storybook-bundle",
@@ -12,39 +12,39 @@
     "clean:webpack": "git ls-files --others -i --exclude-standard *.js *.map | xargs rm",
     "clean:test-reports": "rm -rf ./test-reports",
     "dev": "NODE_ENV=development webpack --config ./webpack.config.js --watch",
-    "docs": "NODE_ENV=production webpack --config webpack.docs.config.js",
+    "docs": "INTERNAL=true NODE_ENV=production webpack --config webpack.docs.config.js",
+    "docs:external": "INTERNAL=false NODE_ENV=production webpack --config webpack.docs.config.js",
     "docs:publish": "cicd-publish-docs build/docs --force",
-    "docs:start": "webpack-dev-server --watch --config webpack.docs.config.js  --open 'Google Chrome'",
-    "lint": "yarn run lint:js && yarn run lint:ts",
+    "docs:publish:external": "../build-tools/createPublicPackage.js && cicd-publish-docs build/docs-external --force && ../build-tools/revertPublicPackage.js",
+    "docs:start": "INTERNAL=true webpack-dev-server --watch --config webpack.docs.config.js  --open 'Google Chrome'",
+    "docs:start:external": "INTERNAL=false webpack-dev-server --watch --config webpack.docs.config.js  --open 'Google Chrome'",
+    "lint": "eslint src --ext \".js,.jsx,.es,.ts,.tsx\"",
     "lint:ci": "eslint src --ext \".js,.jsx,.ts,.tsx\" -f junit -o test-reports/lint-results.xml",
-    "lint:fix": "yarn run lint:js --fix && yarn run lint:ts --fix",
-    "lint:js": "eslint src --ext \".js,.jsx,.es\"",
-    "lint:ts": "eslint src --ext \".ts,.tsx\" --config ../../.tslintrc.js --no-eslintrc",
-    "publish:ci": "cicd-publish-package && cicd-publish-docs",
+    "lint:fix": "yarn run lint --fix",
     "storybook": "start-storybook -p 6006 -c .storybook -s fonts",
     "test": "yarn run test:unit && yarn run test:visual",
     "test:ci": "yarn run test:unit:ci && yarn run test:visual:ci",
     "test:unit": "jest src/.* .storybook/.*",
     "test:unit:ci": "yarn run test:unit",
     "test:unit:watch": "yarn run test:unit --watch",
-    "test:visual": "../../tools/visual.test.sh -p visualizations",
-    "test:visual:ci": "yarn run build-storybook && jest ./tests/.*",
-    "test:visual:update": "yarn test:visual --update"
+    "test:visual": "yarn build-storybook --quiet && yarn loki test --reactUri file:./.storybook-bundle",
+    "test:visual:ci": "yarn test:visual --requireReference --verboseRenderer",
+    "test:visual:update": "yarn loki approve"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.0",
     "@mdhnpm/rgb-hex-converter": "^1.0.3",
-    "@splunk/charting-bundle": "^23.4.0",
-    "@splunk/react-icons": "^3.0.1",
+    "@splunk/charting-bundle": "^24.1.0",
+    "@splunk/react-icons": "^3.1.0",
     "@splunk/react-sparkline": "^0.6.0",
-    "@splunk/react-ui": "^4.0.3",
+    "@splunk/react-ui": "^4.4.1",
     "@splunk/themes": "^0.8.0",
     "@splunk/ui-utils": "^1.2.1",
-    "@splunk/visualization-color-palettes": "^23.4.0",
-    "@splunk/visualization-encoding": "^23.4.0",
-    "@splunk/visualization-icons": "^23.4.0",
-    "@splunk/visualization-themes": "^23.4.0",
-    "@splunk/visualizations-shared": "^23.4.0",
+    "@splunk/visualization-color-palettes": "^24.1.0",
+    "@splunk/visualization-encoding": "^24.1.0",
+    "@splunk/visualization-icons": "^24.1.0",
+    "@splunk/visualization-themes": "^24.1.0",
+    "@splunk/visualizations-shared": "^24.1.0",
     "@xmldom/xmldom": "^0.7.2",
     "cssesc": "3.0.0",
     "d3-array": "^2.12.1",
@@ -63,7 +63,7 @@
     "xpath": "^0.0.32"
   },
   "peerDependencies": {
-    "@splunk/visualization-context": "^23.4.0",
+    "@splunk/visualization-context": "^24.1.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "styled-components": "^5.1"
@@ -75,14 +75,12 @@
     "@splunk/dynamic-editors": "^0.8.2",
     "@splunk/jsdoc-loader": "^3.0.0",
     "@splunk/react-docs": "^0.11.0",
-    "@splunk/visualization-build-tools": "^23.4.0",
+    "@splunk/visualization-build-tools": "^24.1.0",
     "@splunk/webpack-configs": "^4.0.0",
     "@storybook/addon-actions": "^6.1.20",
     "@storybook/addon-docs": "^6.1.20",
     "@storybook/addon-essentials": "^6.1.20",
     "@storybook/addon-links": "^6.1.20",
-    "@storybook/addon-storyshots": "^6.1.20",
-    "@storybook/addon-storyshots-puppeteer": "^6.1.20",
     "@storybook/addons": "^6.1.20",
     "@storybook/react": "^6.1.20",
     "@storybook/theming": "^6.1.1",
@@ -95,7 +93,7 @@
     "@types/d3-interpolate": "^2.0.1",
     "@types/d3-scale": "^3.3.0",
     "@types/d3-selection": "^2.0.0",
-    "@types/enzyme": "3.10.9",
+    "@types/enzyme": "3.10.10",
     "@types/jest": "^26.0.0",
     "@types/json-schema": "^7.0.6",
     "@types/react": "^16.7.0",
@@ -104,6 +102,7 @@
     "babel-jest": "^26.0.0",
     "babel-plugin-styled-components": "^1.12.0",
     "cheerio": "^1.0.0-rc.10",
+    "copy-webpack-plugin": "^4.5.2",
     "faker": "5.1.0",
     "jest": "^26.0.0",
     "jest-canvas-mock": "^2.2.0",

package/API.md

@@ -1,365 +0,0 @@
-# Visualizations API
-
-Visualization is a React component with the following props defined:
-
-```js
-import { Component } from 'react';
-import T from 'prop-types';
-import { noop } from 'lodash';
-
-class SplunkVisualization extends Component {
-    static propTypes = {
-        /**
-         * display mode
-         */
-        mode: T.oneOf(['view', 'edit', 'export']).isRequired,
-        /**
-         * width in pixels or string, defaults to 100%
-         */
-        width: T.oneOfType([T.string, T.number]).isRequired,
-        /**
-         * height in pixels or string
-         */
-        height: T.oneOfType([T.string, T.number]).isRequired,
-        /**
-         * visualization context used for dynamic option evaluation
-         */
-        context: T.object,
-        /**
-         * visualization formatting options
-         */
-        options: T.object,
-        /**
-         * A callback to update formatting options
-         */
-        onOptionsChange: T.func,
-        /**
-         * datasource state which include data and request params, object key indicate the datasource type.
-         */
-        dataSources: T.objectOf(
-            T.shape({
-                /**
-                 * current request params
-                 */
-                requestParams: T.object,
-                /**
-                 * current dataset
-                 */
-                data: T.shape({
-                    fields: T.array,
-                    columns: T.array,
-                }),
-                /**
-                 * error
-                 */
-                error: T.shape({
-                    level: T.string,
-                    message: T.string,
-                }),
-                /**
-                 * meta data that came with the dataset
-                 */
-                meta: T.object,
-            })
-        ),
-        /**
-         * A callback to trigger event
-         */
-        onEventTrigger: T.func,
-        /**
-         * Inform viz if there are handlers listening to events
-         */
-        hasEventHandlers: T.bool,
-        /**
-         * A callback to communicate computed props to a consumer
-         */
-        onComputedProps: T.func,
-        /**
-         * A callback to obtain visualization api
-         */
-        vizActionHandlerRef: T.func,
-        /**
-         * If set to "true" there will be an indication that the visualization data is loading
-         */
-        loading: T.bool,
-        theme: T.object,
-        /**
-         * A callback to request new data with updated request params
-         */
-        onRequestParamsChange: T.func,
-    };
-    static defaultProps = {
-        width: '100%',
-        height: 250,
-        dataSources: {},
-        onEventTrigger: () => {},
-        mode: 'view',
-        hasEventHandlers: false,
-        options: {},
-        context: {},
-        onOptionsChange: () => {},
-        vizActionHandlerRef: () => {},
-        onComputedProps: () => {},
-        loading: false,
-        onRequestParamsChange: noop,
-    };
-}
-
-export default SplunkVisualization;
-```
-
-## Basic Principle
-
-### A visualization should
-
--   Honestly present data with specific formatting options.
--   Communicate events with an `onEventTrigger` callback.
--   Be predictable. Always render identical result given a fixed dataset and options.
-
-### A visualization should NOT
-
--   Depend on global variables.
--   Issue requests to fetch data.
-
-## Visualization Data
-
-The Visualization component reads data from a dataSources object in json_cols format.
-
-For example:
-
-```js
-dataSources={{
-    primary: {
-        requestParams: { offset: 0, count: 20 },
-        data: {
-            fields: [{ name: 'component' }, { name: 'count' }, { name: 'percent' }],
-            columns: [
-                        [
-                            'splunkd',
-                            'splunkd_ui_access',
-                            'splunkd_access',
-                            'splunk_web_access',
-                            'scheduler',
-                            'splunk_web_service',
-                        ],
-                        ['600', '525', '295', '213', '122', '19'],
-                        ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
-            ],
-        },
-        meta: { totalCount: 100 },
-    },
-}}
-```
-
-### RequestParams
-
-The RequestParams object defines how a visualization reacts with the data sets.
-
-The following example returns the first 20 results of a given data source:
-
-```js
-{
-    requestParams: { offset: 0, count: 20 },
-    data: {
-        fields: [{ name: 'component' }, { name: 'count' }, { name: 'percent' }],
-        columns: [
-                    [
-                        'splunkd',
-                        'splunkd_ui_access',
-                        'splunkd_access',
-                        'splunk_web_access',
-                        'scheduler',
-                        'splunk_web_service',
-                    ],
-                    ['600', '525', '295', '213', '122', '19'],
-                    ['87.966380', '50.381304', '60.023780', '121.183272', '70.250513', '90.194752'],
-        ],
-    },
-    meta: { totalCount: 100 },
-}
-```
-
-If necessary, the Visualization component can invoke the `onRequestParamsChange` callback to request data with updated request parameters (RequestParams).
-
-For Example:
-
-```js
-this.props.onRequestParamsChange('primary', {
-    ...this.props.dataSources.primary.requestParams,
-    offset: 20,
-    count: 20,
-});
-```
-
-A complete example can be found under _Update RequestParams_ from the Table visualization.
-
-All available RequestParams are documented in the DataSource module.
-
-### DataSources
-
-DataSource is a module that does the data fetching, see @splunk/datasources for more details.
-
--   While Visualization and DataSource are designed to work together, Visualization itself can be used as a standalone React component.
--   Each Visualization can be powered by multiple DataSources - 0 to 1 `primary` DataSource and 0 to n secondary DataSource
-
-### Data Contract
-
-Each visualization exposes a property called `dataContract` to indicate which datasources are supported.
-
-The following snippet is an example data contract:
-
-```js
-const dataContract = {
-    requiredDataSources: [
-        {
-            name: 'primary',
-            description: 'DataSource that powers the visualization',
-        },
-    ],
-    optionalDataSources: [
-        {
-            name: 'annotation',
-            description: 'DataSource that populates event annotations',
-        },
-    ],
-    initialRequestParams: {
-        primary: { offset: 0, count: 10000 },
-    },
-};
-```
-
-From the data contract above, UDF is able to infer that the visualization requires one datasource called `primary` and supports an optional datasource called `annotation`. It also exposes initialRequestParams to let datasources know what parameters to use for the initial fetching of data.
-
-#### Supported DataSources
-
-The data contract contains a property `requiredDataSources` and `optionalDataSources` to indicate what kind of DataSources it supports.
-
-For example, Table only supports primary DataSource:
-
-```js
-const dataContract = {
-    requiredDataSources: [
-        {
-            name: 'primary',
-            description: 'DataSource that powers the visualization',
-        },
-    ],
-    //...
-};
-```
-
-while Line Chart supports an additional annotation DataSource:
-
-```js
-const dataContract = {
-    requiredDataSources: [
-        {
-            name: 'primary',
-            description: 'DataSource that powers the visualization',
-        },
-    ],
-    optionalDataSources: [
-        {
-            name: 'annotation',
-            description: 'DataSource that populates event annotations',
-        },
-    ],
-    //...
-};
-```
-
-#### Initial RequestParams
-
-In order to retrieve the first batch of data, the initial RequestParams needs to be figured out before the Visualization gets rendered. The `initialRequestParams` property in the `dataContract` serves this purpose.
-
-initialRequestParams can be an object
-
-```js
-initialRequestParams: {
-    offset: 0,
-    count: 10000,
-}
-```
-
-or a function that takes the visualization options and returns the initial RequestParams
-
-```js
-initialRequestParams: (options = {}) => ({
-    offset: 0,
-    count: options.count || 20,
-});
-```
-
-## Meta
-
-Meta object tells visualization extra information besides the data.
-
-For example:
-
-```js
-{
-    totalCount: 100, // total results
-    progress: 50, // 0-100, current search progress
-}
-```
-
-It's up to the viz implementation to decide whether to use them. Checkout Meta from DataSource package for details.
-
-## Size
-
-If either `width` or `height` is provided, the visualization will render within the specified dimensions and handle the size change.
-
-## onComputedProps
-
-`onComputedProps` allows visualizations to communicate calculated props (e.g. a background color that is calculated based on data) upwards to its consumer.
-
-For Example:
-
-```js
-const TitleContainer = styled.div`
-    background-color: ${props => props.backgroundColor};
-`;
-const DashboardWrapper = props => {
-    const [state, setState] = useState({ backgroundColor: '#f00' });
-    const { title, ...otherVizProps } = props;
-    return (
-        <>
-            <TitleContainer backgroundColor={state.backgroundColor}>{title}</TitleContainer>
-            <Visualization {...otherVizProps} onComputedProps={setState} />
-        </>
-    );
-};
-```
-
-### Visualization Config
-
-The visualization config is used to programmatically reason about a visualization at build & runtime
-
-A visualization `config` contains the following properties:
-
--   **key**: Preset key used in the definition. Key format must be 'splunk.type'. Example: splunk.customBar
--   **name**: The canonical name for the visualization. Recommended format is splunk.type Visualization. Example: Custom Bar Visualization
--   **category**: Visualization class. Currently available categories are 'Table', 'Single Value', 'Trends', 'Comparisons', 'Gauge', 'Distributions', 'Shapes', 'Flow' and 'Choropleth Maps'
--   **icon**: A react element that renders an svg icon
--   **dataContract**: The data contract defines the availability for the visualization to use a datasource, and the default configuration for results. This configuration is also used by the editing interface to determine what datasources need to be configured
--   **optionsSchema**: The schema is used to validate the properties of a datasource configuration and is also used in concert with the editor config to provide default values. This should be a standard [json schema](https://json-schema.org/)
--   **editorConfig**: The editor static property defines a configuration that renders an editor in the sidebar
--   **size**: The size dimensions for the visualization
--   **events**: User interaction events that the visualization allows (e.g. click of a Pie slice, hover on a data point in a Line chart)
--   **defaultContext**: A place where DSL configuration variables can be defined. Used when no context is configured
--   **supports**: A list of supported behaviors by the visualization component
--   **themes**: An object that denotes key-value pairs of functions that return resolved values used to style the visualization based on the theme
--   **requiredProps**: A list of properties that must be defined in order for the placeholder to be replaced with the actual vizualization
-
-The following snippet is an example Visualization config:
-
-```js
-const LinkGraphConfig = {
-    key: 'splunk.linkgraph',
-    name: 'Link Graph',
-    icon: LinkGraphIcon,
-    optionsSchema: {},
-    editorConfig: {},
-    events: {},
-};
-```

package/jest.visual.config.js

@@ -1,14 +0,0 @@
-const buildConfig = require('@splunk/visualization-build-tools/jest-config').default;
-
-module.exports = buildConfig(
-    {
-        react: true,
-        coverageKind: 'visual',
-        suiteName: 'visualization',
-        browser: false,
-    },
-    {
-        // visual tests should not generate code coverage
-        coveragePathIgnorePatterns: ['/node_modules/'],
-    }
-);