diff --git a/docker/superset/Dockerfile b/docker/superset/Dockerfile index 2988a643..1c45fcc1 100644 --- a/docker/superset/Dockerfile +++ b/docker/superset/Dockerfile @@ -1,4 +1,4 @@ -# Based on https://github.com/apache/superset/blob/1.1.0/Dockerfile +# Based on https://github.com/apache/superset/blob/1.0.0rc1/Dockerfile ###################################################################### # PY stage that simply does a pip install on our requirements @@ -30,10 +30,7 @@ RUN cd /app \ ###################################################################### # Node stage to deal with static asset construction ###################################################################### -FROM node:14 AS superset-node - -ARG NPM_VER=7 -RUN npm install -g npm@${NPM_VER} +FROM node:12 AS superset-node ARG NPM_BUILD_CMD="build" ENV BUILD_CMD=${NPM_BUILD_CMD} @@ -48,7 +45,7 @@ COPY ./plugins/plugins /app/superset-frontend/plugins RUN /frontend-mem-nag.sh \ && cd /app/superset-frontend \ - && for f in $(ls /app/superset-frontend/plugins) ; do npm install --save ./plugins/$f ; done \ + && for f in $(ls /app/superset-frontend/plugins) ; do npm install --save plugins/$f ; done \ && npm ci \ && mkdir -p package_json_files \ && cp package*.json package_json_files diff --git a/superset/README.md b/superset/README.md index dfddd0dd..c36ed61a 100644 --- a/superset/README.md +++ b/superset/README.md @@ -1,18 +1,8 @@ -# Update Superset - -1. `cd` into superset's submodule directory and checkout to the new desired release tag. - -2. Check if there any changes made to superset's Dockerfile (on the root of the repository for the current latest release), adapt them, and insert them on our custom Dockerfile under the `docker/superset` directory. - -3. Check if there any changes made to superset's `superset-frontend/src/visualizations/MainPreset.js` file. You can use the script `mainpreset_has_changes.py` under the `plugins` directory to check that. Apply the new changes if any and remember to keep our plugins imported and registered (Currently we only have the *Box plot* plugin). - -4. If the version of the frontend package `@superset-ui/plugin-chart-echarts` changed it's necessary to update our box plot plugin. Follow the instructions present [here](https://github.com/EHDEN/NetworkDashboards/tree/master/superset/plugins/plugins/plugin-chart-box-plot#how-to-update) also take into account the instruction of the next section. - -# Plugin Development +# Development Instructions on how you can set up your development environment to develop on a custom superset plugin: and add it to develop a superset plugin: -1. Clone the [superset](https://github.com/apache/superset) repository. **IMPORTANT NOTE**: Since we build the superset's docker image using the existing superset's submodule, it's better not to use it to develop the plugins. If you decide to use it anyways, remember [this](https://github.com/EHDEN/NetworkDashboards/blob/master/docker/superset/Dockerfile#L54) and [this](https://github.com/EHDEN/NetworkDashboards/blob/master/docker/superset/Dockerfile#L99) steps. They might override directories (`superset-frontend/node_modules` and `superset/static/assets`) that are generated during the build process, which can cause frontend compilation errors or the app can serve outdated static files. +1. Clone the [superset](https://github.com/apache/superset) repository. 2. Clone the [superset-ui](https://github.com/apache-superset/superset-ui) repository into the directory superset-frontend of the superset repository. diff --git a/superset/plugins/MainPreset.js b/superset/plugins/MainPreset.js index 4aef96b6..bfef2eb3 100644 --- a/superset/plugins/MainPreset.js +++ b/superset/plugins/MainPreset.js @@ -25,6 +25,7 @@ import CalendarChartPlugin from '@superset-ui/legacy-plugin-chart-calendar'; import ChordChartPlugin from '@superset-ui/legacy-plugin-chart-chord'; import CountryMapChartPlugin from '@superset-ui/legacy-plugin-chart-country-map'; import EventFlowChartPlugin from '@superset-ui/legacy-plugin-chart-event-flow'; +import ForceDirectedChartPlugin from '@superset-ui/legacy-plugin-chart-force-directed'; import HeatmapChartPlugin from '@superset-ui/legacy-plugin-chart-heatmap'; import HistogramChartPlugin from '@superset-ui/legacy-plugin-chart-histogram'; import HorizonChartPlugin from '@superset-ui/legacy-plugin-chart-horizon'; @@ -57,15 +58,13 @@ import { EchartsPieChartPlugin, //EchartsBoxPlotChartPlugin, EchartsTimeseriesChartPlugin, - EchartsGraphChartPlugin, } from '@superset-ui/plugin-chart-echarts'; import { EchartsBoxPlotChartPlugin, } from '@superset-ui/plugin-chart-box-plot'; import { - SelectFilterPlugin, - RangeFilterPlugin, - TimeFilterPlugin, + AntdSelectFilterPlugin, + AntdRangeFilterPlugin, } from 'src/filters/components/'; import FilterBoxChartPlugin from '../FilterBox/FilterBoxChartPlugin'; import TimeTableChartPlugin from '../TimeTable/TimeTableChartPlugin'; @@ -91,7 +90,7 @@ export default class MainPreset extends Preset { new DualLineChartPlugin().configure({ key: 'dual_line' }), new EventFlowChartPlugin().configure({ key: 'event_flow' }), new FilterBoxChartPlugin().configure({ key: 'filter_box' }), - new EchartsGraphChartPlugin().configure({ key: 'graph_chart' }), + new ForceDirectedChartPlugin().configure({ key: 'directed_force' }), new HeatmapChartPlugin().configure({ key: 'heatmap' }), new HistogramChartPlugin().configure({ key: 'histogram' }), new HorizonChartPlugin().configure({ key: 'horizon' }), @@ -115,9 +114,8 @@ export default class MainPreset extends Preset { new EchartsTimeseriesChartPlugin().configure({ key: 'echarts_timeseries', }), - new SelectFilterPlugin().configure({ key: 'filter_select' }), - new RangeFilterPlugin().configure({ key: 'filter_range' }), - new TimeFilterPlugin().configure({ key: 'filter_time' }), + new AntdSelectFilterPlugin().configure({ key: 'filter_select' }), + new AntdRangeFilterPlugin().configure({ key: 'filter_range' }), ], }); } diff --git a/superset/plugins/plugins/plugin-chart-box-plot/README.md b/superset/plugins/plugins/plugin-chart-box-plot/README.md index 9f430063..67753090 100644 --- a/superset/plugins/plugins/plugin-chart-box-plot/README.md +++ b/superset/plugins/plugins/plugin-chart-box-plot/README.md @@ -1,6 +1,8 @@ ## @superset-ui/plugin-chart-box-plot -Box Plot Chart with a raw mode. Based on the Box Plot present [here](https://github.com/apache-superset/superset-ui/tree/v0.17.10/plugins/plugin-chart-echarts) +Box Plot Chart with a raw mode. Based on the Box Plot present [here](https://github.com/apache-superset/superset-ui/tree/v0.16.8/plugins/plugin-chart-echarts) + +To check if there are changes on the original repo you can use the `has_changes.py` script. [![Version](https://img.shields.io/npm/v/@superset-ui/plugin-chart-echarts.svg?style=flat-square)](https://www.npmjs.com/package/@superset-ui/plugin-chart-echarts) [![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-plugin-chart-echarts&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-plugin-chart-echarts) @@ -13,7 +15,7 @@ This plugin provides Echarts viz plugins for Superset: 1. Check what release version of the `@superset-ui/plugin-chart-echarts` npm plugin, superset is using (see the file at `superset-frontend/package.json`). -2. If it is greater than 0.17.10, go to the [history](https://github.com/apache-superset/superset-ui/commits/master/plugins/plugin-chart-echarts) of commits done to the plugin-chart-echarts plugin of the superset-ui repository and update to the most recent commit that has the same version that is being used by your superset version. A fast way check the changes done between two commits: `git diff [old_commit_hash] [recent_commit_hash] -- plugins/plugin-chart-echarts` +2. If it is greater than 0.16.9, go to the [history](https://github.com/apache-superset/superset-ui/commits/master/plugins/plugin-chart-echarts) of commits done to the plugin-chart-echarts plugin of the superset-ui repository and update to the most recent commit that has the same version that is being used by your superset version. A fast way check the changes done between two commits: `git diff [old_commit_hash] [recent_commit_hash] -- plugins/plugin-chart-echarts` ### Demo diff --git a/superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/buildQuery.js b/superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/buildQuery.js index b531d6d8..ecbd7527 100644 --- a/superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/buildQuery.js +++ b/superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/buildQuery.js @@ -21,7 +21,6 @@ const PERCENTILE_REGEX = /(\d+)\/(\d+) percentiles/; export default function buildQuery(formData) { const { query_mode, - groupby, minimum, p10, p25, @@ -29,10 +28,13 @@ export default function buildQuery(formData) { p75, p90, maximum, - whiskerOptions, - columns: distributionColumns = [] + whiskerOptions } = formData; return buildQueryContext(formData, baseQueryObject => { + const { + groupby + } = baseQueryObject; + if (query_mode == 'raw') { if (groupby.length == 0) { throw new Error(`Error: No series column defined.`); @@ -70,6 +72,7 @@ export default function buildQuery(formData) { metrics } = baseQueryObject; const percentileMatch = PERCENTILE_REGEX.exec(whiskerOptions); + const distributionColumns = columns || []; if (whiskerOptions === 'Tukey') { whiskerType = 'tukey'; @@ -84,12 +87,14 @@ export default function buildQuery(formData) { return [{ ...baseQueryObject, is_timeseries: distributionColumns.length === 0, + groupby: (groupby || []).concat(distributionColumns), + columns: [], post_processing: [{ operation: 'boxplot', options: { whisker_type: whiskerType, percentiles, - groupby: columns.filter(x => !distributionColumns.includes(x)), + groupby, metrics: metrics.map(getMetricLabel) } }] diff --git a/superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/transformProps.js b/superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/transformProps.js index 84c5128d..645e62c1 100644 --- a/superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/transformProps.js +++ b/superset/plugins/plugins/plugin-chart-box-plot/esm/BoxPlot/transformProps.js @@ -164,36 +164,8 @@ export default function transformProps(chartProps) { rotate: -45 };else axisLabel = { show: true - }; - const series = [{ - name: 'boxplot', - type: 'boxplot', - data: transformedData, - tooltip: { - formatter: param => { - // @ts-ignore - const { - value, - name - } = param; - const headline = name ? `
${name}
` : ''; - let stats; - - if (queryMode == QueryMode.raw) { - stats = [`Max: ${numberFormatter(value[7])}`, `90th Percentile: ${numberFormatter(value[5])}`, `75th Percentile: ${numberFormatter(value[4])}`, `Median: ${numberFormatter(value[3])}`, `25th Percentile: ${numberFormatter(value[2])}`, `10th Percentile: ${numberFormatter(value[1])}`, `Min: ${numberFormatter(value[6])}`]; - } else { - stats = [`Max: ${numberFormatter(value[5])}`, `3rd Quartile: ${numberFormatter(value[4])}`, `Mean: ${numberFormatter(value[6])}`, `Median: ${numberFormatter(value[3])}`, `1st Quartile: ${numberFormatter(value[2])}`, `Min: ${numberFormatter(value[1])}`, `# Observations: ${numberFormatter(value[7])}`]; - } + }; // @ts-ignore - if (value[8].length > 0) { - stats.push(`# Outliers: ${numberFormatter(value[8].length)}`); - } - - return headline + stats.join('${name}
` : ''; + let stats; + + if (queryMode == QueryMode.raw) { + stats = [`Max: ${numberFormatter(value[7])}`, `90th Percentile: ${numberFormatter(value[5])}`, `75th Percentile: ${numberFormatter(value[4])}`, `Median: ${numberFormatter(value[3])}`, `25th Percentile: ${numberFormatter(value[2])}`, `10th Percentile: ${numberFormatter(value[1])}`, `Min: ${numberFormatter(value[6])}`]; + } else { + stats = [`Max: ${numberFormatter(value[5])}`, `3rd Quartile: ${numberFormatter(value[4])}`, `Mean: ${numberFormatter(value[6])}`, `Median: ${numberFormatter(value[3])}`, `1st Quartile: ${numberFormatter(value[2])}`, `Min: ${numberFormatter(value[1])}`, `# Observations: ${numberFormatter(value[7])}`]; + } + + if (value[8].length > 0) { + stats.push(`# Outliers: ${numberFormatter(value[8].length)}`); + } + + return headline + stats.join('${name}
` : ''; - let stats; - if (queryMode == QueryMode.raw) { - stats = [ - `Max: ${numberFormatter(value[7])}`, - `90th Percentile: ${numberFormatter(value[5])}`, - `75th Percentile: ${numberFormatter(value[4])}`, - `Median: ${numberFormatter(value[3])}`, - `25th Percentile: ${numberFormatter(value[2])}`, - `10th Percentile: ${numberFormatter(value[1])}`, - `Min: ${numberFormatter(value[6])}`, - ]; - } - else { - stats = [ - `Max: ${numberFormatter(value[5])}`, - `3rd Quartile: ${numberFormatter(value[4])}`, - `Mean: ${numberFormatter(value[6])}`, - `Median: ${numberFormatter(value[3])}`, - `1st Quartile: ${numberFormatter(value[2])}`, - `Min: ${numberFormatter(value[1])}`, - `# Observations: ${numberFormatter(value[7])}`, - ]; - } - if (value[8].length > 0) { - stats.push(`# Outliers: ${numberFormatter(value[8].length)}`); - } - return headline + stats.join('${name}
` : ''; + let stats; + if (queryMode == QueryMode.raw) { + stats = [ + `Max: ${numberFormatter(value[7])}`, + `90th Percentile: ${numberFormatter(value[5])}`, + `75th Percentile: ${numberFormatter(value[4])}`, + `Median: ${numberFormatter(value[3])}`, + `25th Percentile: ${numberFormatter(value[2])}`, + `10th Percentile: ${numberFormatter(value[1])}`, + `Min: ${numberFormatter(value[6])}`, + ]; + } + else { + stats = [ + `Max: ${numberFormatter(value[5])}`, + `3rd Quartile: ${numberFormatter(value[4])}`, + `Mean: ${numberFormatter(value[6])}`, + `Median: ${numberFormatter(value[3])}`, + `1st Quartile: ${numberFormatter(value[2])}`, + `Min: ${numberFormatter(value[1])}`, + `# Observations: ${numberFormatter(value[7])}`, + ]; + } + if (value[8].length > 0) { + stats.push(`# Outliers: ${numberFormatter(value[8].length)}`); + } + return headline + stats.join('