feat: add new plugin to generate period over period KPI charts

superset-frontend/package.json

@@ -112,6 +112,7 @@
     "@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-ui/plugin-chart-period-over-period-kpi": "file:./plugins/plugin-chart-period-over-period-kpi",
     "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard",
     "@types/d3-format": "^3.0.1",
     "@visx/axis": "^3.0.1",

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

@@ -0,0 +1,65 @@
+# custom-viz
+
+This is the Custom Viz Superset Chart Plugin.
+
+### 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 ../../custom-viz
+```
+
+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 { CustomViz } from 'custom-viz';
+```
+
+to import the plugin and later add the following to the array that's passed to the `plugins` property:
+```js
+new CustomViz().configure({ key: 'custom-viz' }),
+```
+
+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": "Period Over Period KPI",
+  "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,105 @@
+/**
+ * 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, { useEffect, createRef } from 'react';
+import { 
+  styled,
+  } from '@superset-ui/core';
+import { PopKPIProps, PopKPIStylesProps } from './types';
+
+// The following Styles component is a <div> element, which has been styled using Emotion
+// For docs, visit https://emotion.sh/docs/styled
+
+// Theming variables are provided for your use via a ThemeProvider
+// imported from @superset-ui/core. For variables available, please visit
+// https://github.com/apache-superset/superset-ui/blob/master/packages/superset-ui-core/src/style/index.ts
+
+const Styles = styled.div<PopKPIStylesProps>`
+
+  font-family: ${({ theme }) => theme.typography.families.sansSerif};
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: ${({ theme }) => theme.tdUnit * 4}px;
+  border-radius: ${({ theme }) => theme.tdUnit * 2}px;
+  height: ${({ height }) => height}px;
+  width: ${({ width }) => width}px;
+`;
+
+const BigValueContainer = styled.div`
+  font-size: ${props=> props.headerFontSize ? props.headerFontSize : 60}px;
+  font-weight: ${({ theme }) => theme.typography.weights.normal};
+  text-align: center;
+`;
+
+const TableContainer = styled.div`
+  width: 100%;
+  display: table;
+`
+
+const ComparisonContainer = styled.div`
+  display: table-row;
+`;
+
+const ComparisonValue = styled.div`
+  font-weight: ${({ theme }) => theme.typography.weights.light};
+  width: 33%;
+  display: table-cell;
+  font-size: ${props=> props.subheaderFontSize ? props.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>();
+
+  useEffect(() => {
+    const root = rootElem.current as HTMLElement;
+  });
+
+  return (
+    <Styles
+      ref={rootElem}
+      boldText={props.boldText}
+      headerFontSize={props.headerFontSize}
+      height={height}
+      width={width}
+    >
+
+      <BigValueContainer headerFontSize={headerFontSize}>{bigNumber}</BigValueContainer>
+      <TableContainer>
+        <ComparisonContainer>
+          <ComparisonValue subheaderFontSize={subheaderFontSize}> #: {prevNumber}</ComparisonValue>
+          <ComparisonValue subheaderFontSize={subheaderFontSize}> Δ: {valueDifference}</ComparisonValue>
+          <ComparisonValue subheaderFontSize={subheaderFontSize}> %: {percentDifference}</ComparisonValue>
+        </ComparisonContainer>
+      </TableContainer>
+    </Styles>
+  );
+}

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
+ */