feat: Period over Period Big Number comparison chart (#26908)

Co-authored-by: Fernando <[email protected]>
Co-authored-by: Antonio Rivero <[email protected]>

RESOURCES/FEATURE_FLAGS.md

@@ -31,6 +31,7 @@ These features are considered **unfinished** and should only be used on developm
 - PRESTO_EXPAND_DATA
 - SHARE_QUERIES_VIA_KV_STORE
 - TAGGING_SYSTEM
+- CHART_PLUGINS_EXPERIMENTAL
 
 ## In Testing
 

superset-frontend/package.json

@@ -111,6 +111,7 @@
     "@superset-ui/legacy-preset-chart-nvd3": "file:./plugins/legacy-preset-chart-nvd3",
     "@superset-ui/plugin-chart-echarts": "file:./plugins/plugin-chart-echarts",
     "@superset-ui/plugin-chart-handlebars": "file:./plugins/plugin-chart-handlebars",
+    "@superset-ui/plugin-chart-period-over-period-kpi": "file:./plugins/plugin-chart-period-over-period-kpi",
     "@superset-ui/plugin-chart-pivot-table": "file:./plugins/plugin-chart-pivot-table",
     "@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
     "@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -26,6 +26,7 @@ export enum FeatureFlag {
   ALERT_REPORTS = 'ALERT_REPORTS',
   ALLOW_FULL_CSV_EXPORT = 'ALLOW_FULL_CSV_EXPORT',
   AVOID_COLORS_COLLISION = 'AVOID_COLORS_COLLISION',
+  CHART_PLUGINS_EXPERIMENTAL = 'CHART_PLUGINS_EXPERIMENTAL',
   CONFIRM_DASHBOARD_DIFF = 'CONFIRM_DASHBOARD_DIFF',
   /** @deprecated */
   DASHBOARD_CROSS_FILTERS = 'DASHBOARD_CROSS_FILTERS',

superset-frontend/plugins/plugin-chart-period-over-period-kpi/README.md

@@ -0,0 +1,87 @@
+/\*\*
+
+- Licensed to the Apache Software Foundation (ASF) under one
+- or more contributor license agreements. See the NOTICE file
+- distributed with this work for additional information
+- regarding copyright ownership. The ASF licenses this file
+- to you under the Apache License, Version 2.0 (the
+- "License"); you may not use this file except in compliance
+- with the License. You may obtain a copy of the License at
+-
+- http://www.apache.org/licenses/LICENSE-2.0
+-
+- Unless required by applicable law or agreed to in writing,
+- software distributed under the License is distributed on an
+- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+- KIND, either express or implied. See the License for the
+- specific language governing permissions and limitations
+- under the License.
+  \*/
+
+# custom-viz
+
+This plugin provides a BigNumber visualization with period over period time comparisons
+
+### Usage
+
+To build the plugin, run the following commands:
+
+```
+npm ci
+npm run build
+```
+
+Alternatively, to run the plugin in development mode (=rebuilding whenever changes are made), start the dev server with the following command:
+
+```
+npm run dev
+```
+
+To add the package to Superset, go to the `superset-frontend` subdirectory in your Superset source folder (assuming both the `custom-viz` plugin and `superset` repos are in the same root directory) and run
+
+```
+npm i -S ../../plugin-chart-period-over-period-kpi
+```
+
+If your Superset plugin exists in the `superset-frontend` directory and you wish to resolve TypeScript errors about `@superset-ui/core` not being resolved correctly, add the following to your `tsconfig.json` file:
+
+```
+"references": [
+  {
+    "path": "../../packages/superset-ui-chart-controls"
+  },
+  {
+    "path": "../../packages/superset-ui-core"
+  }
+]
+```
+
+You may also wish to add the following to the `include` array in `tsconfig.json` to make Superset types available to your plugin:
+
+```
+"../../types/**/*"
+```
+
+Finally, if you wish to ensure your plugin `tsconfig.json` is aligned with the root Superset project, you may add the following to your `tsconfig.json` file:
+
+```
+"extends": "../../tsconfig.json",
+```
+
+After this edit the `superset-frontend/src/visualizations/presets/MainPreset.js` and make the following changes:
+
+```js
+import { PopKPIPlugin } from '@superset-ui/plugin-chart-period-over-period-kpi';
+```
+
+to import the plugin and later add the following to the array that's passed to the `plugins` property:
+
+```js
+new PopKPIPlugin().configure({ key: 'pop_kpi' }),
+```
+
+After that the plugin should show up when you run Superset, e.g. the development server:
+
+```
+npm run dev-server
+```

superset-frontend/plugins/plugin-chart-period-over-period-kpi/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@superset-ui/plugin-chart-period-over-period-kpi",
+  "version": "0.1.0",
+  "description": "Big Number with Time Period Comparison",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib"
+  ],
+  "private": true,
+  "keywords": [
+    "superset"
+  ],
+  "author": "Bytecodeio",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "moment": "^2.30.1"
+  },
+  "peerDependencies": {
+    "@superset-ui/chart-controls": "*",
+    "@superset-ui/core": "*",
+    "react": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^26.0.4",
+    "jest": "^26.6.3"
+  }
+}

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

@@ -0,0 +1,96 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { createRef } from 'react';
+import { css, styled, useTheme } from '@superset-ui/core';
+import { PopKPIComparisonValueStyleProps, PopKPIProps } from './types';
+
+const ComparisonValue = styled.div<PopKPIComparisonValueStyleProps>`
+  ${({ theme, subheaderFontSize }) => `
+    font-weight: ${theme.typography.weights.light};
+    width: 33%;
+    display: table-cell;
+    font-size: ${subheaderFontSize || 20}px;
+    text-align: center;
+  `}
+`;
+
+export default function PopKPI(props: PopKPIProps) {
+  const {
+    height,
+    width,
+    bigNumber,
+    prevNumber,
+    valueDifference,
+    percentDifference,
+    headerFontSize,
+    subheaderFontSize,
+  } = props;
+
+  const rootElem = createRef<HTMLDivElement>();
+  const theme = useTheme();
+
+  const wrapperDivStyles = css`
+    font-family: ${theme.typography.families.sansSerif};
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: ${theme.gridUnit * 4}px;
+    border-radius: ${theme.gridUnit * 2}px;
+    height: ${height}px;
+    width: ${width}px;
+  `;
+
+  const bigValueContainerStyles = css`
+    font-size: ${headerFontSize || 60}px;
+    font-weight: ${theme.typography.weights.normal};
+    text-align: center;
+  `;
+
+  return (
+    <div ref={rootElem} css={wrapperDivStyles}>
+      <div css={bigValueContainerStyles}>{bigNumber}</div>
+      <div
+        css={css`
+          width: 100%;
+          display: table;
+        `}
+      >
+        <div
+          css={css`
+            display: table-row;
+          `}
+        >
+          <ComparisonValue subheaderFontSize={subheaderFontSize}>
+            {' '}
+            #: {prevNumber}
+          </ComparisonValue>
+          <ComparisonValue subheaderFontSize={subheaderFontSize}>
+            {' '}
+            Δ: {valueDifference}
+          </ComparisonValue>
+          <ComparisonValue subheaderFontSize={subheaderFontSize}>
+            {' '}
+            %: {percentDifference}
+          </ComparisonValue>
+        </div>
+      </div>
+    </div>
+  );
+}

superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export { default as PopKPIPlugin } from './plugin';
+/**
+ * Note: this file exports the default export from PopKPI.tsx.
+ * If you want to export multiple visualization modules, you will need to
+ * either add additional plugin folders (similar in structure to ./plugin)
+ * OR export multiple instances of `ChartPlugin` extensions in ./plugin/index.ts
+ * which in turn load exports from CustomViz.tsx
+ */