mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
refactor: remove new box plot code until refactored (#25)
This commit is contained in:
Krist Wongsuphasawat
Yongjie Zhao
parent
8265ed4917
commit
773de699d8
@ -1,29 +0,0 @@
|
||||
/* eslint-disable no-magic-numbers */
|
||||
import React from 'react';
|
||||
import { SuperChart } from '@superset-ui/chart';
|
||||
import data from './data';
|
||||
|
||||
export default [
|
||||
{
|
||||
renderStory: () => (
|
||||
<SuperChart
|
||||
chartType="box-plot2"
|
||||
chartProps={{
|
||||
datasource: { verboseMap: {} },
|
||||
formData: {
|
||||
colorScheme: 'd3Category10',
|
||||
groupby: ['region'],
|
||||
metrics: ['sum__SP_POP_TOTL'],
|
||||
vizType: 'box_plot',
|
||||
whiskerOptions: 'Min/max (no outliers)',
|
||||
},
|
||||
height: 400,
|
||||
payload: { data },
|
||||
width: 400,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
storyName: 'Basic',
|
||||
storyPath: 'preset-chart-xy|BoxPlotChartPlugin',
|
||||
},
|
||||
];
|
||||
@ -1,80 +0,0 @@
|
||||
/* eslint-disable sort-keys, no-magic-numbers */
|
||||
export default [
|
||||
{
|
||||
label: 'East Asia & Pacific',
|
||||
values: {
|
||||
Q1: 1384725172.5,
|
||||
Q2: 1717904169.0,
|
||||
Q3: 2032724922.5,
|
||||
whisker_high: 2240687901.0,
|
||||
whisker_low: 1031863394.0,
|
||||
outliers: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Europe & Central Asia',
|
||||
values: {
|
||||
Q1: 751386460.5,
|
||||
Q2: 820716895.0,
|
||||
Q3: 862814192.5,
|
||||
whisker_high: 903095786.0,
|
||||
whisker_low: 660881033.0,
|
||||
outliers: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Latin America & Caribbean',
|
||||
values: {
|
||||
Q1: 313690832.5,
|
||||
Q2: 421490233.0,
|
||||
Q3: 529668114.5,
|
||||
whisker_high: 626270167.0,
|
||||
whisker_low: 220564224.0,
|
||||
outliers: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Middle East & North Africa',
|
||||
values: {
|
||||
Q1: 152382756.5,
|
||||
Q2: 232066828.0,
|
||||
Q3: 318191071.5,
|
||||
whisker_high: 417451428.0,
|
||||
whisker_low: 105512645.0,
|
||||
outliers: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'North America',
|
||||
values: {
|
||||
Q1: 235506847.5,
|
||||
Q2: 268896849.0,
|
||||
Q3: 314553651.5,
|
||||
whisker_high: 354462656.0,
|
||||
whisker_low: 198624409.0,
|
||||
outliers: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'South Asia',
|
||||
values: {
|
||||
Q1: 772373036.5,
|
||||
Q2: 1059570231.0,
|
||||
Q3: 1398841234.0,
|
||||
whisker_high: 1720976995.0,
|
||||
whisker_low: 572036107.0,
|
||||
outliers: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Sub-Saharan Africa',
|
||||
values: {
|
||||
Q1: 320037758.0,
|
||||
Q2: 467337821.0,
|
||||
Q3: 676768689.0,
|
||||
whisker_high: 974315323.0,
|
||||
whisker_low: 228268752.0,
|
||||
outliers: [],
|
||||
},
|
||||
},
|
||||
];
|
||||
@ -1,8 +0,0 @@
|
||||
import { BoxPlotChartPlugin } from '../../../../../superset-ui-preset-chart-xy/src';
|
||||
import Stories from './Stories';
|
||||
|
||||
new BoxPlotChartPlugin().configure({ key: 'box-plot2' }).register();
|
||||
|
||||
export default {
|
||||
examples: [...Stories],
|
||||
};
|
||||
@ -1,151 +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 sort-keys, no-magic-numbers, complexity */
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { BoxPlotSeries, XYChart } from '@data-ui/xy-chart';
|
||||
import { themeShape } from '@data-ui/xy-chart/esm/utils/propShapes';
|
||||
import { chartTheme } from '@data-ui/theme';
|
||||
import { CategoricalColorNamespace } from '@superset-ui/color';
|
||||
import createTooltip from './createTooltip';
|
||||
import renderLegend from '../utils/renderLegend';
|
||||
import XYChartLayout from '../utils/XYChartLayout';
|
||||
import WithLegend from '../components/WithLegend';
|
||||
|
||||
chartTheme.gridStyles.stroke = '#f1f3f5';
|
||||
|
||||
const propTypes = {
|
||||
className: PropTypes.string,
|
||||
data: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
key: PropTypes.string,
|
||||
values: PropTypes.arrayOf(PropTypes.number),
|
||||
}),
|
||||
).isRequired,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
margin: PropTypes.shape({
|
||||
top: PropTypes.number,
|
||||
left: PropTypes.number,
|
||||
bottom: PropTypes.number,
|
||||
right: PropTypes.number,
|
||||
}),
|
||||
encoding: PropTypes.shape({
|
||||
x: PropTypes.object,
|
||||
y: PropTypes.object,
|
||||
color: PropTypes.object,
|
||||
}).isRequired,
|
||||
isHorizontal: PropTypes.bool,
|
||||
theme: themeShape,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
className: '',
|
||||
margin: { top: 10, right: 10, left: 10, bottom: 10 },
|
||||
isHorizontal: false,
|
||||
theme: chartTheme,
|
||||
};
|
||||
|
||||
class BoxPlot extends React.PureComponent {
|
||||
renderChart({ width, height }) {
|
||||
const { data, encoding, margin, theme, isHorizontal } = this.props;
|
||||
|
||||
const config = {
|
||||
width,
|
||||
height,
|
||||
minContentWidth: 0,
|
||||
minContentHeight: 0,
|
||||
margin,
|
||||
theme,
|
||||
encoding: isHorizontal
|
||||
? {
|
||||
...encoding,
|
||||
x: { ...encoding.y, axis: { ...encoding.y.axis, orientation: 'bottom' } },
|
||||
y: { ...encoding.x, axis: { ...encoding.x.axis, orientation: 'left' } },
|
||||
}
|
||||
: encoding,
|
||||
};
|
||||
|
||||
const colorFn = CategoricalColorNamespace.getScale(
|
||||
encoding.color.scale.scheme,
|
||||
encoding.color.scale.namespace,
|
||||
);
|
||||
|
||||
const colorField = encoding.color.field;
|
||||
|
||||
const children = [
|
||||
<BoxPlotSeries
|
||||
key={datum => datum[encoding.x.field]}
|
||||
animated
|
||||
data={
|
||||
isHorizontal
|
||||
? data.map(row => ({ ...row, y: row[encoding.x.field] }))
|
||||
: data.map(row => ({ ...row, x: row[encoding.x.field] }))
|
||||
}
|
||||
fill={datum => colorFn(datum[colorField])}
|
||||
fillOpacity={0.4}
|
||||
stroke={datum => colorFn(datum[colorField])}
|
||||
strokeWidth={1}
|
||||
widthRatio={0.6}
|
||||
horizontal={isHorizontal}
|
||||
/>,
|
||||
];
|
||||
|
||||
const layout = new XYChartLayout({ ...config, children });
|
||||
|
||||
return layout.createChartWithFrame(dim => (
|
||||
<XYChart
|
||||
width={dim.width}
|
||||
height={dim.height}
|
||||
ariaLabel="BoxPlot"
|
||||
margin={layout.margin}
|
||||
renderTooltip={createTooltip(encoding.y.axis.tickFormat)}
|
||||
showYGrid
|
||||
theme={config.theme}
|
||||
xScale={config.encoding.x.scale}
|
||||
yScale={config.encoding.y.scale}
|
||||
>
|
||||
{children}
|
||||
{layout.createXAxis()}
|
||||
{layout.createYAxis()}
|
||||
</XYChart>
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, data, width, height, encoding } = this.props;
|
||||
|
||||
return (
|
||||
<WithLegend
|
||||
className={`superset-chart-box-plot ${className}`}
|
||||
width={width}
|
||||
height={height}
|
||||
position="top"
|
||||
renderLegend={() => renderLegend(data, encoding.color)}
|
||||
renderChart={parent => this.renderChart(parent)}
|
||||
hideLegend={!encoding.color.legend}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BoxPlot.propTypes = propTypes;
|
||||
BoxPlot.defaultProps = defaultProps;
|
||||
|
||||
export default BoxPlot;
|
||||
@ -1,72 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default function createBoxPlotTooltip(formatValue) {
|
||||
const propTypes = {
|
||||
color: PropTypes.string,
|
||||
datum: PropTypes.shape({
|
||||
firstQuartile: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
median: PropTypes.number,
|
||||
min: PropTypes.number,
|
||||
outliers: PropTypes.arrayOf(PropTypes.number),
|
||||
thirdQuartile: PropTypes.number,
|
||||
}).isRequired,
|
||||
};
|
||||
const defaultProps = {
|
||||
color: '#222',
|
||||
};
|
||||
|
||||
function BoxPlotTooltip({ datum, color }) {
|
||||
const { label, min, max, median, firstQuartile, thirdQuartile, outliers } = datum;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<strong style={{ color }}>{label}</strong>
|
||||
</div>
|
||||
{min && (
|
||||
<div>
|
||||
<strong style={{ color }}>Min </strong>
|
||||
{formatValue(min)}
|
||||
</div>
|
||||
)}
|
||||
{max && (
|
||||
<div>
|
||||
<strong style={{ color }}>Max </strong>
|
||||
{formatValue(max)}
|
||||
</div>
|
||||
)}
|
||||
{median && (
|
||||
<div>
|
||||
<strong style={{ color }}>Median </strong>
|
||||
{formatValue(median)}
|
||||
</div>
|
||||
)}
|
||||
{firstQuartile && (
|
||||
<div>
|
||||
<strong style={{ color }}>First quartile </strong>
|
||||
{formatValue(firstQuartile)}
|
||||
</div>
|
||||
)}
|
||||
{thirdQuartile && (
|
||||
<div>
|
||||
<strong style={{ color }}>Third quartile </strong>
|
||||
{formatValue(thirdQuartile)}
|
||||
</div>
|
||||
)}
|
||||
{outliers && outliers.length > 0 && (
|
||||
<div>
|
||||
<strong style={{ color }}># Outliers </strong>
|
||||
{outliers.length}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
BoxPlotTooltip.propTypes = propTypes;
|
||||
BoxPlotTooltip.defaultProps = defaultProps;
|
||||
|
||||
return BoxPlotTooltip;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
@ -1,39 +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.
|
||||
*/
|
||||
import { t } from '@superset-ui/translation';
|
||||
import { ChartMetadata, ChartPlugin } from '@superset-ui/chart';
|
||||
import transformProps from './transformProps';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
description: '',
|
||||
name: t('Box Plot'),
|
||||
thumbnail,
|
||||
useLegacyApi: true,
|
||||
});
|
||||
|
||||
export default class BoxPlotChartPlugin extends ChartPlugin {
|
||||
constructor() {
|
||||
super({
|
||||
loadChart: () => import('./BoxPlot'),
|
||||
metadata,
|
||||
transformProps,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,90 +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 sort-keys, no-magic-numbers */
|
||||
import { getNumberFormatter } from '@superset-ui/number-format';
|
||||
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, datasource = {}, formData, payload } = chartProps;
|
||||
const { verboseMap = {} } = datasource;
|
||||
const { colorScheme, groupby, metrics } = formData;
|
||||
|
||||
const data = payload.data.map(({ label, values }) => ({
|
||||
label,
|
||||
min: values.whisker_low,
|
||||
max: values.whisker_high,
|
||||
firstQuartile: values.Q1,
|
||||
median: values.Q2,
|
||||
thirdQuartile: values.Q3,
|
||||
outliers: values.outliers,
|
||||
}));
|
||||
|
||||
const xAxisLabel = groupby.join('/');
|
||||
const yAxisLabel = metrics.length > 0 ? verboseMap[metrics[0]] || metrics[0] : '';
|
||||
|
||||
const boxPlotValues = data.reduce((r, e) => r.push(e.min, e.max, ...e.outliers) && r, []);
|
||||
const minBoxPlotValue = Math.min(...boxPlotValues);
|
||||
const maxBoxPlotValue = Math.max(...boxPlotValues);
|
||||
const valueDomain = [
|
||||
minBoxPlotValue - 0.1 * Math.abs(minBoxPlotValue),
|
||||
maxBoxPlotValue + 0.1 * Math.abs(maxBoxPlotValue),
|
||||
];
|
||||
|
||||
const formatValue = getNumberFormatter();
|
||||
|
||||
return {
|
||||
data,
|
||||
width,
|
||||
height,
|
||||
// margin,
|
||||
// theme,
|
||||
encoding: {
|
||||
x: {
|
||||
field: 'label',
|
||||
scale: {
|
||||
type: 'band',
|
||||
paddingInner: 0.15,
|
||||
paddingOuter: 0.3,
|
||||
},
|
||||
axis: {
|
||||
label: xAxisLabel,
|
||||
orientation: 'bottom',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
scale: {
|
||||
type: 'linear',
|
||||
domain: valueDomain,
|
||||
},
|
||||
axis: {
|
||||
label: yAxisLabel,
|
||||
numTicks: 5,
|
||||
orientation: 'left',
|
||||
tickFormat: formatValue,
|
||||
},
|
||||
},
|
||||
color: {
|
||||
field: 'label',
|
||||
scale: {
|
||||
scheme: colorScheme,
|
||||
},
|
||||
legend: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,2 +1,2 @@
|
||||
export { default as BoxPlotChartPlugin } from './BoxPlot';
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
export { default as LineChartPlugin } from './Line';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user