Skip to content

Commit a09e555

Browse files
eschuthoFernandoAntonio-RiveroMartnez
authored
feat: Period over Period Big Number comparison chart (apache#26908)
Co-authored-by: Fernando <[email protected]> Co-authored-by: Antonio Rivero <[email protected]>
1 parent bd9afcd commit a09e555

File tree

18 files changed

+1066
-1
lines changed

18 files changed

+1066
-1
lines changed

Diff for: ‎RESOURCES/FEATURE_FLAGS.md

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ These features are considered **unfinished** and should only be used on developm
3131
- PRESTO_EXPAND_DATA
3232
- SHARE_QUERIES_VIA_KV_STORE
3333
- TAGGING_SYSTEM
34+
- CHART_PLUGINS_EXPERIMENTAL
3435

3536
## In Testing
3637

Diff for: ‎superset-frontend/package-lock.json

+44
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎superset-frontend/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@
111111
"@superset-ui/legacy-preset-chart-nvd3": "file:./plugins/legacy-preset-chart-nvd3",
112112
"@superset-ui/plugin-chart-echarts": "file:./plugins/plugin-chart-echarts",
113113
"@superset-ui/plugin-chart-handlebars": "file:./plugins/plugin-chart-handlebars",
114+
"@superset-ui/plugin-chart-period-over-period-kpi": "file:./plugins/plugin-chart-period-over-period-kpi",
114115
"@superset-ui/plugin-chart-pivot-table": "file:./plugins/plugin-chart-pivot-table",
115116
"@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
116117
"@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",

Diff for: ‎superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export enum FeatureFlag {
2626
ALERT_REPORTS = 'ALERT_REPORTS',
2727
ALLOW_FULL_CSV_EXPORT = 'ALLOW_FULL_CSV_EXPORT',
2828
AVOID_COLORS_COLLISION = 'AVOID_COLORS_COLLISION',
29+
CHART_PLUGINS_EXPERIMENTAL = 'CHART_PLUGINS_EXPERIMENTAL',
2930
CONFIRM_DASHBOARD_DIFF = 'CONFIRM_DASHBOARD_DIFF',
3031
/** @deprecated */
3132
DASHBOARD_CROSS_FILTERS = 'DASHBOARD_CROSS_FILTERS',

Diff for: ‎superset-frontend/plugins/plugin-chart-period-over-period-kpi/README.md

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/\*\*
2+
3+
- Licensed to the Apache Software Foundation (ASF) under one
4+
- or more contributor license agreements. See the NOTICE file
5+
- distributed with this work for additional information
6+
- regarding copyright ownership. The ASF licenses this file
7+
- to you under the Apache License, Version 2.0 (the
8+
- "License"); you may not use this file except in compliance
9+
- with the License. You may obtain a copy of the License at
10+
-
11+
- http://www.apache.org/licenses/LICENSE-2.0
12+
-
13+
- Unless required by applicable law or agreed to in writing,
14+
- software distributed under the License is distributed on an
15+
- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16+
- KIND, either express or implied. See the License for the
17+
- specific language governing permissions and limitations
18+
- under the License.
19+
\*/
20+
21+
# custom-viz
22+
23+
This plugin provides a BigNumber visualization with period over period time comparisons
24+
25+
### Usage
26+
27+
To build the plugin, run the following commands:
28+
29+
```
30+
npm ci
31+
npm run build
32+
```
33+
34+
Alternatively, to run the plugin in development mode (=rebuilding whenever changes are made), start the dev server with the following command:
35+
36+
```
37+
npm run dev
38+
```
39+
40+
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
41+
42+
```
43+
npm i -S ../../plugin-chart-period-over-period-kpi
44+
```
45+
46+
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:
47+
48+
```
49+
"references": [
50+
{
51+
"path": "../../packages/superset-ui-chart-controls"
52+
},
53+
{
54+
"path": "../../packages/superset-ui-core"
55+
}
56+
]
57+
```
58+
59+
You may also wish to add the following to the `include` array in `tsconfig.json` to make Superset types available to your plugin:
60+
61+
```
62+
"../../types/**/*"
63+
```
64+
65+
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:
66+
67+
```
68+
"extends": "../../tsconfig.json",
69+
```
70+
71+
After this edit the `superset-frontend/src/visualizations/presets/MainPreset.js` and make the following changes:
72+
73+
```js
74+
import { PopKPIPlugin } from '@superset-ui/plugin-chart-period-over-period-kpi';
75+
```
76+
77+
to import the plugin and later add the following to the array that's passed to the `plugins` property:
78+
79+
```js
80+
new PopKPIPlugin().configure({ key: 'pop_kpi' }),
81+
```
82+
83+
After that the plugin should show up when you run Superset, e.g. the development server:
84+
85+
```
86+
npm run dev-server
87+
```

Diff for: ‎superset-frontend/plugins/plugin-chart-period-over-period-kpi/package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "@superset-ui/plugin-chart-period-over-period-kpi",
3+
"version": "0.1.0",
4+
"description": "Big Number with Time Period Comparison",
5+
"sideEffects": false,
6+
"main": "lib/index.js",
7+
"module": "esm/index.js",
8+
"files": [
9+
"esm",
10+
"lib"
11+
],
12+
"private": true,
13+
"keywords": [
14+
"superset"
15+
],
16+
"author": "Bytecodeio",
17+
"license": "Apache-2.0",
18+
"publishConfig": {
19+
"access": "public"
20+
},
21+
"dependencies": {
22+
"moment": "^2.30.1"
23+
},
24+
"peerDependencies": {
25+
"@superset-ui/chart-controls": "*",
26+
"@superset-ui/core": "*",
27+
"react": "^16.13.1"
28+
},
29+
"devDependencies": {
30+
"@types/jest": "^26.0.4",
31+
"jest": "^26.6.3"
32+
}
33+
}

Diff for: ‎superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
import React, { createRef } from 'react';
20+
import { css, styled, useTheme } from '@superset-ui/core';
21+
import { PopKPIComparisonValueStyleProps, PopKPIProps } from './types';
22+
23+
const ComparisonValue = styled.div<PopKPIComparisonValueStyleProps>`
24+
${({ theme, subheaderFontSize }) => `
25+
font-weight: ${theme.typography.weights.light};
26+
width: 33%;
27+
display: table-cell;
28+
font-size: ${subheaderFontSize || 20}px;
29+
text-align: center;
30+
`}
31+
`;
32+
33+
export default function PopKPI(props: PopKPIProps) {
34+
const {
35+
height,
36+
width,
37+
bigNumber,
38+
prevNumber,
39+
valueDifference,
40+
percentDifference,
41+
headerFontSize,
42+
subheaderFontSize,
43+
} = props;
44+
45+
const rootElem = createRef<HTMLDivElement>();
46+
const theme = useTheme();
47+
48+
const wrapperDivStyles = css`
49+
font-family: ${theme.typography.families.sansSerif};
50+
position: relative;
51+
display: flex;
52+
flex-direction: column;
53+
justify-content: center;
54+
padding: ${theme.gridUnit * 4}px;
55+
border-radius: ${theme.gridUnit * 2}px;
56+
height: ${height}px;
57+
width: ${width}px;
58+
`;
59+
60+
const bigValueContainerStyles = css`
61+
font-size: ${headerFontSize || 60}px;
62+
font-weight: ${theme.typography.weights.normal};
63+
text-align: center;
64+
`;
65+
66+
return (
67+
<div ref={rootElem} css={wrapperDivStyles}>
68+
<div css={bigValueContainerStyles}>{bigNumber}</div>
69+
<div
70+
css={css`
71+
width: 100%;
72+
display: table;
73+
`}
74+
>
75+
<div
76+
css={css`
77+
display: table-row;
78+
`}
79+
>
80+
<ComparisonValue subheaderFontSize={subheaderFontSize}>
81+
{' '}
82+
#: {prevNumber}
83+
</ComparisonValue>
84+
<ComparisonValue subheaderFontSize={subheaderFontSize}>
85+
{' '}
86+
Δ: {valueDifference}
87+
</ComparisonValue>
88+
<ComparisonValue subheaderFontSize={subheaderFontSize}>
89+
{' '}
90+
%: {percentDifference}
91+
</ComparisonValue>
92+
</div>
93+
</div>
94+
</div>
95+
);
96+
}

Diff for: ‎superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/images/thumbnail.png

22.6 KB
Loading

Diff for: ‎superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/index.ts

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

0 commit comments

Comments
 (0)