diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx similarity index 100% rename from superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/PopKPI.tsx rename to superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/PopKPI.tsx diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/buildQuery.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/buildQuery.ts similarity index 65% rename from superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/buildQuery.ts rename to superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/buildQuery.ts index 641f9e3858a41..abf91104034b6 100644 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/buildQuery.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/buildQuery.ts @@ -23,21 +23,6 @@ import { QueryFormData, } from '@superset-ui/core'; -/** - * The buildQuery function is used to create an instance of QueryContext that's - * sent to the chart data endpoint. In addition to containing information of which - * datasource to use, it specifies the type (e.g. full payload, samples, query) and - * format (e.g. CSV or JSON) of the result and whether or not to force refresh the data from - * the datasource as opposed to using a cached copy of the data, if available. - * - * More importantly though, QueryContext contains a property `queries`, which is an array of - * QueryObjects specifying individual data requests to be made. A QueryObject specifies which - * columns, metrics and filters, among others, to use during the query. Usually it will be enough - * to specify just one query based on the baseQueryObject, but for some more advanced use cases - * it is possible to define post processing operations in the QueryObject, or multiple queries - * if a viz needs multiple different result sets. - */ - export default function buildQuery(formData: QueryFormData) { const { cols: groupby, diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts similarity index 71% rename from superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts rename to superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts index 1f01a8a4b7b66..5e7fb8af2f3ad 100644 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/controlPanel.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/controlPanel.ts @@ -28,6 +28,7 @@ import { getStandardizedControls, sharedControls, } from '@superset-ui/chart-controls'; +import { headerFontSize, subheaderFontSize } from '../sharedControls'; const config: ControlPanelConfig = { controlPanelSections: [ @@ -102,71 +103,13 @@ const config: ControlPanelConfig = { controlSetRows: [ ['y_axis_format'], ['currency_format'], + [headerFontSize], [ { - name: 'header_font_size', + ...subheaderFontSize, config: { - type: 'SelectControl', - label: t('Big Number Font Size'), - renderTrigger: true, - clearable: false, - default: 60, - options: [ - { - label: t('Tiny'), - value: 16, - }, - { - label: t('Small'), - value: 20, - }, - { - label: t('Normal'), - value: 30, - }, - { - label: t('Large'), - value: 48, - }, - { - label: t('Huge'), - value: 60, - }, - ], - }, - }, - ], - [ - { - name: 'subheader_font_size', - config: { - type: 'SelectControl', - label: t('Subheader Font Size'), - renderTrigger: true, - clearable: false, - default: 40, - options: [ - { - label: t('Tiny'), - value: 16, - }, - { - label: t('Small'), - value: 20, - }, - { - label: t('Normal'), - value: 26, - }, - { - label: t('Large'), - value: 32, - }, - { - label: t('Huge'), - value: 40, - }, - ], + ...subheaderFontSize.config, + label: t('Comparison font size'), }, }, ], diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/images/thumbnail.png b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/images/thumbnail.png similarity index 100% rename from superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/images/thumbnail.png rename to superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/images/thumbnail.png diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/index.ts similarity index 72% rename from superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/index.ts rename to superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/index.ts index 39ce12aa3c5cf..a2730641533c9 100644 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/index.ts @@ -20,19 +20,9 @@ import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core'; import buildQuery from './buildQuery'; import controlPanel from './controlPanel'; import transformProps from './transformProps'; -import thumbnail from '../images/thumbnail.png'; +import thumbnail from './images/thumbnail.png'; export default class PopKPIPlugin extends ChartPlugin { - /** - * The constructor is used to pass relevant metadata and callbacks that get - * registered in respective registries that are used throughout the library - * and application. A more thorough description of each property is given in - * the respective imported file. - * - * It is worth noting that `buildQuery` and is optional, and only needed for - * advanced visualizations that require either post processing operations - * (pivoting, rolling aggregations, sorting etc) or submitting multiple queries. - */ constructor() { const metadata = new ChartMetadata({ category: t('KPI'), @@ -45,6 +35,7 @@ export default class PopKPIPlugin extends ChartPlugin { t('Percentages'), t('Report'), t('Description'), + t('Advanced-Analytics'), ], thumbnail, }); @@ -52,7 +43,7 @@ export default class PopKPIPlugin extends ChartPlugin { super({ buildQuery, controlPanel, - loadChart: () => import('../PopKPI'), + loadChart: () => import('./PopKPI'), metadata, transformProps, }); diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts similarity index 96% rename from superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts rename to superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts index 5e49950410c0b..40f8b14fbdc5a 100644 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/plugin/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts @@ -25,6 +25,7 @@ import { getNumberFormatter, formatTimeRange, } from '@superset-ui/core'; +import { getComparisonFontSize, getHeaderFontSize } from './utils'; export const parseMetricValue = (metricValue: number | string | null) => { if (typeof metricValue === 'string') { @@ -142,7 +143,6 @@ export default function transformProps(chartProps: ChartProps) { width, height, data, - // and now your control data, manipulated as needed, and passed through as props! metric, metricName, bigNumber, @@ -150,8 +150,8 @@ export default function transformProps(chartProps: ChartProps) { valueDifference, percentDifferenceFormattedString: percentDifference, boldText, - headerFontSize, - subheaderFontSize, + headerFontSize: getHeaderFontSize(headerFontSize), + subheaderFontSize: getComparisonFontSize(subheaderFontSize), headerText, compType, comparisonColorEnabled, diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts similarity index 100% rename from superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/types.ts rename to superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/types.ts diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.test.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.test.ts new file mode 100644 index 0000000000000..60dea80a7af50 --- /dev/null +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.test.ts @@ -0,0 +1,39 @@ +/** + * 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 { getComparisonFontSize, getHeaderFontSize } from './utils'; + +test('getHeaderFontSize', () => { + expect(getHeaderFontSize(0.2)).toEqual(16); + expect(getHeaderFontSize(0.3)).toEqual(20); + expect(getHeaderFontSize(0.4)).toEqual(30); + expect(getHeaderFontSize(0.5)).toEqual(48); + expect(getHeaderFontSize(0.6)).toEqual(60); + expect(getHeaderFontSize(0.15)).toEqual(60); + expect(getHeaderFontSize(2)).toEqual(60); +}); + +test('getComparisonFontSize', () => { + expect(getComparisonFontSize(0.125)).toEqual(16); + expect(getComparisonFontSize(0.15)).toEqual(20); + expect(getComparisonFontSize(0.2)).toEqual(26); + expect(getComparisonFontSize(0.3)).toEqual(32); + expect(getComparisonFontSize(0.4)).toEqual(40); + expect(getComparisonFontSize(0.05)).toEqual(40); + expect(getComparisonFontSize(0.9)).toEqual(40); +}); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.ts new file mode 100644 index 0000000000000..a12f0c975483e --- /dev/null +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/utils.ts @@ -0,0 +1,59 @@ +/** + * 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 { headerFontSize, subheaderFontSize } from '../sharedControls'; + +const headerFontSizes = [16, 20, 30, 48, 60]; +const comparisonFontSizes = [16, 20, 26, 32, 40]; + +const headerProportionValues = + headerFontSize.config.options.map( + (option: { label: string; value: number }) => option.value, + ) ?? []; + +const subheaderProportionValues = + subheaderFontSize.config.options.map( + (option: { label: string; value: number }) => option.value, + ) ?? []; + +const getFontSizeMapping = ( + proportionValues: number[], + actualSizes: number[], +) => + proportionValues.reduce((acc, value, index) => { + acc[value] = actualSizes[index] ?? actualSizes[actualSizes.length - 1]; + return acc; + }, {}); + +const headerFontSizesMapping = getFontSizeMapping( + headerProportionValues, + headerFontSizes, +); + +const comparisonFontSizesMapping = getFontSizeMapping( + subheaderProportionValues, + comparisonFontSizes, +); + +export const getHeaderFontSize = (proportionValue: number) => + headerFontSizesMapping[proportionValue] ?? + headerFontSizes[headerFontSizes.length - 1]; + +export const getComparisonFontSize = (proportionValue: number) => + comparisonFontSizesMapping[proportionValue] ?? + comparisonFontSizes[comparisonFontSizes.length - 1]; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/index.ts index f9b7f3c8a033f..334493f419301 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/index.ts @@ -19,3 +19,4 @@ export { default as BigNumberChartPlugin } from './BigNumberWithTrendline'; export { default as BigNumberTotalChartPlugin } from './BigNumberTotal'; +export { default as BigNumberPeriodOverPeriodChartPlugin } from './BigNumberPeriodOverPeriod'; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/index.ts index 1a7458a58605e..2e1920313840c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/index.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/index.ts @@ -32,7 +32,11 @@ export { default as EchartsRadarChartPlugin } from './Radar'; export { default as EchartsFunnelChartPlugin } from './Funnel'; export { default as EchartsTreeChartPlugin } from './Tree'; export { default as EchartsTreemapChartPlugin } from './Treemap'; -export { BigNumberChartPlugin, BigNumberTotalChartPlugin } from './BigNumber'; +export { + BigNumberChartPlugin, + BigNumberTotalChartPlugin, + BigNumberPeriodOverPeriodChartPlugin, +} from './BigNumber'; export { default as EchartsSunburstChartPlugin } from './Sunburst'; export { default as EchartsBubbleChartPlugin } from './Bubble'; export { default as EchartsWaterfallChartPlugin } from './Waterfall'; diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/README.md b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/README.md deleted file mode 100644 index 2e3fbea212b5d..0000000000000 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/README.md +++ /dev/null @@ -1,87 +0,0 @@ -/\*\* - -- 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 -``` diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/package.json b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/package.json deleted file mode 100644 index 49f8f2935e5d6..0000000000000 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/package.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "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" - } -} diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/index.ts b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/index.ts deleted file mode 100644 index e9fe3ec782104..0000000000000 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/src/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * 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 - */ diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/tsconfig.json b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/tsconfig.json deleted file mode 100644 index b6bfaa2d98446..0000000000000 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/tsconfig.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "compilerOptions": { - "declarationDir": "lib", - "outDir": "lib", - "rootDir": "src" - }, - "exclude": [ - "lib", - "test" - ], - "extends": "../../tsconfig.json", - "include": [ - "src/**/*", - "types/**/*", - "../../types/**/*" - ], - "references": [ - { - "path": "../../packages/superset-ui-chart-controls" - }, - { - "path": "../../packages/superset-ui-core" - } - ] -} diff --git a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/types/types/external.d.ts b/superset-frontend/plugins/plugin-chart-period-over-period-kpi/types/types/external.d.ts deleted file mode 100644 index a273f3a2ba3ed..0000000000000 --- a/superset-frontend/plugins/plugin-chart-period-over-period-kpi/types/types/external.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* - * 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. - */ - -declare module '*.png' { - const value: any; - export default value; -} diff --git a/superset-frontend/src/visualizations/presets/MainPreset.js b/superset-frontend/src/visualizations/presets/MainPreset.js index 7e39f3b502445..698663e1da0d4 100644 --- a/superset-frontend/src/visualizations/presets/MainPreset.js +++ b/superset-frontend/src/visualizations/presets/MainPreset.js @@ -66,6 +66,7 @@ import { EchartsSunburstChartPlugin, EchartsBubbleChartPlugin, EchartsWaterfallChartPlugin, + BigNumberPeriodOverPeriodChartPlugin, } from '@superset-ui/plugin-chart-echarts'; import { SelectFilterPlugin, @@ -76,7 +77,6 @@ import { } from 'src/filters/components'; import { PivotTableChartPlugin as PivotTableChartPluginV2 } from '@superset-ui/plugin-chart-pivot-table'; import { HandlebarsChartPlugin } from '@superset-ui/plugin-chart-handlebars'; -import { PopKPIPlugin } from '@superset-ui/plugin-chart-period-over-period-kpi'; import TimeTableChartPlugin from '../TimeTable'; export default class MainPreset extends Preset { @@ -84,7 +84,11 @@ export default class MainPreset extends Preset { const experimentalPlugins = isFeatureEnabled( FeatureFlag.ChartPluginsExperimental, ) - ? [new PopKPIPlugin().configure({ key: 'pop_kpi' })] + ? [ + new BigNumberPeriodOverPeriodChartPlugin().configure({ + key: 'pop_kpi', + }), + ] : []; super({