mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
refactor: 💡 move boxplot into preset-chart-xy
This commit is contained in:
Krist Wongsuphasawat
Yongjie Zhao
parent
896657e147
commit
abba9ae424
@ -1,103 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { AxisBottom, AxisTop } from '@vx/axis';
|
||||
import { axisStylesShape, tickStylesShape } from '@data-ui/xy-chart/esm/utils/propShapes';
|
||||
|
||||
const propTypes = {
|
||||
axisStyles: axisStylesShape,
|
||||
hideZero: PropTypes.bool,
|
||||
// probably injected by parent
|
||||
innerHeight: PropTypes.number,
|
||||
label: PropTypes.string,
|
||||
labelOffset: PropTypes.number,
|
||||
labelProps: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
|
||||
numTicks: PropTypes.number,
|
||||
orientation: PropTypes.oneOf(['bottom', 'top']),
|
||||
rangePadding: PropTypes.number,
|
||||
scale: PropTypes.func,
|
||||
tickComponent: PropTypes.func,
|
||||
tickFormat: PropTypes.func,
|
||||
tickLabelProps: PropTypes.func,
|
||||
tickStyles: tickStylesShape,
|
||||
tickValues: PropTypes.arrayOf(
|
||||
// number or date/moment object
|
||||
PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.string]),
|
||||
),
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
axisStyles: {},
|
||||
hideZero: false,
|
||||
innerHeight: null,
|
||||
label: null,
|
||||
labelOffset: 14,
|
||||
labelProps: null,
|
||||
numTicks: null,
|
||||
orientation: 'bottom',
|
||||
rangePadding: null,
|
||||
scale: null,
|
||||
tickComponent: null,
|
||||
tickFormat: null,
|
||||
tickLabelProps: null,
|
||||
tickStyles: {},
|
||||
tickValues: undefined,
|
||||
};
|
||||
|
||||
export default class XAxis extends React.PureComponent {
|
||||
render() {
|
||||
const {
|
||||
axisStyles,
|
||||
innerHeight,
|
||||
hideZero,
|
||||
label,
|
||||
labelOffset,
|
||||
labelProps,
|
||||
numTicks,
|
||||
orientation,
|
||||
rangePadding,
|
||||
scale,
|
||||
tickComponent,
|
||||
tickFormat,
|
||||
tickLabelProps: passedTickLabelProps,
|
||||
tickStyles,
|
||||
tickValues,
|
||||
} = this.props;
|
||||
if (!scale || !innerHeight) return null;
|
||||
const Axis = orientation === 'bottom' ? AxisBottom : AxisTop;
|
||||
|
||||
let tickLabelProps = passedTickLabelProps;
|
||||
if (!tickLabelProps) {
|
||||
tickLabelProps =
|
||||
tickStyles.label && tickStyles.label[orientation]
|
||||
? () => tickStyles.label[orientation]
|
||||
: undefined;
|
||||
}
|
||||
|
||||
return (
|
||||
<Axis
|
||||
top={orientation === 'bottom' ? innerHeight : 0}
|
||||
left={0}
|
||||
rangePadding={rangePadding}
|
||||
hideTicks={numTicks === 0}
|
||||
hideZero={hideZero}
|
||||
label={label}
|
||||
labelOffset={labelOffset}
|
||||
labelProps={labelProps || (axisStyles.label || {})[orientation]}
|
||||
numTicks={numTicks}
|
||||
scale={scale}
|
||||
stroke={axisStyles.stroke}
|
||||
strokeWidth={axisStyles.strokeWidth}
|
||||
tickComponent={tickComponent}
|
||||
tickFormat={tickFormat}
|
||||
tickLabelProps={tickLabelProps}
|
||||
tickLength={tickStyles.tickLength}
|
||||
tickStroke={tickStyles.stroke}
|
||||
tickValues={tickValues}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
XAxis.propTypes = propTypes;
|
||||
XAxis.defaultProps = defaultProps;
|
||||
XAxis.displayName = 'XAxis';
|
||||
@ -10,7 +10,7 @@ module.exports = (storybookBaseConfig, configType, defaultConfig) => {
|
||||
|
||||
defaultConfig.module.rules.push({
|
||||
exclude: /node_modules/,
|
||||
include: new RegExp(`${path.resolve(__dirname, '../../superset-ui-legacy-')}.+/src`),
|
||||
include: new RegExp(`${path.resolve(__dirname, '../../superset-ui-(plugin|preset)-')}.+/src`),
|
||||
test: /\.jsx?$/,
|
||||
use: defaultConfig.module.rules[0].use,
|
||||
});
|
||||
|
||||
@ -24,6 +24,6 @@ export default [
|
||||
/>
|
||||
),
|
||||
storyName: 'Basic',
|
||||
storyPath: 'plugin-chart-box-plot|BoxPlotChartPlugin',
|
||||
storyPath: 'preset-chart-xy|BoxPlotChartPlugin',
|
||||
},
|
||||
];
|
||||
@ -1,4 +1,4 @@
|
||||
import BoxPlotChartPlugin from '../../../../superset-ui-legacy-plugin-chart-box-plot/src';
|
||||
import { BoxPlotChartPlugin } from '../../../../../superset-ui-preset-chart-xy/src';
|
||||
import Stories from './Stories';
|
||||
|
||||
new BoxPlotChartPlugin().configure({ key: 'box-plot2' }).register();
|
||||
@ -1,7 +1,7 @@
|
||||
## @superset-ui/legacy-plugin-chart-box-plot
|
||||
## @superset-ui/preset-chart-xy
|
||||
|
||||
[](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-box-plot.svg?style=flat-square)
|
||||
[](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-legacy-plugin-chart-box-plot)
|
||||
[](https://img.shields.io/npm/v/@superset-ui/preset-chart-xy.svg?style=flat-square)
|
||||
[](https://david-dm.org/apache-superset/superset-ui-plugins?path=packages/superset-ui-preset-chart-xy)
|
||||
|
||||
This plugin provides Box Plot for Superset.
|
||||
|
||||
@ -10,7 +10,7 @@ This plugin provides Box Plot for Superset.
|
||||
Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.
|
||||
|
||||
```js
|
||||
import BoxPlotChartPlugin from '@superset-ui/legacy-plugin-chart-box-plot';
|
||||
import { BoxPlotChartPlugin } from '@superset-ui/preset-chart-xy';
|
||||
|
||||
new BoxPlotChartPlugin()
|
||||
.configure({ key: 'box-plot' })
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@superset-ui/legacy-plugin-chart-box-plot",
|
||||
"name": "@superset-ui/preset-chart-xy",
|
||||
"version": "0.0.0",
|
||||
"description": "Superset Legacy Chart - Box Plot",
|
||||
"description": "Superset Chart - XY",
|
||||
"sideEffects": false,
|
||||
"main": "lib/index.js",
|
||||
"module": "esm/index.js",
|
||||
@ -23,10 +23,10 @@ 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 './utils/createBoxPlotTooltip';
|
||||
import renderLegend from './utils/renderLegend';
|
||||
import XYChartLayout from './utils/XYChartLayout';
|
||||
import WithLegend from './WithLegend';
|
||||
import createTooltip from './createBoxPlotTooltip';
|
||||
import renderLegend from '../utils/renderLegend';
|
||||
import XYChartLayout from '../utils/XYChartLayout';
|
||||
import WithLegend from '../components/WithLegend';
|
||||
|
||||
chartTheme.gridStyles.stroke = '#f1f3f5';
|
||||
|
||||
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
@ -28,7 +28,7 @@ const metadata = new ChartMetadata({
|
||||
useLegacyApi: true,
|
||||
});
|
||||
|
||||
export default class HistogramChartPlugin extends ChartPlugin {
|
||||
export default class BoxPlotChartPlugin extends ChartPlugin {
|
||||
constructor() {
|
||||
super({
|
||||
loadChart: () => import('./BoxPlot'),
|
||||
@ -0,0 +1,3 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
export { default as BoxPlotChartPlugin } from './BoxPlot';
|
||||
@ -2,14 +2,13 @@
|
||||
|
||||
import React from 'react';
|
||||
import collectScalesFromProps from '@data-ui/xy-chart/esm/utils/collectScalesFromProps';
|
||||
import { YAxis } from '@data-ui/xy-chart';
|
||||
import { XAxis, YAxis } from '@data-ui/xy-chart';
|
||||
import adjustMargin from './adjustMargin';
|
||||
import computeXAxisLayout from './computeXAxisLayout';
|
||||
import computeYAxisLayout from './computeYAxisLayout';
|
||||
import createTickComponent from './createTickComponent';
|
||||
import getTickLabels from './getTickLabels';
|
||||
import XAxis from '../XAxis';
|
||||
import ChartFrame from '../ChartFrame';
|
||||
import ChartFrame from '../components/ChartFrame';
|
||||
|
||||
// Additional margin to avoid content hidden behind scroll bar
|
||||
const OVERFLOW_MARGIN = 8;
|
||||
@ -2,13 +2,12 @@
|
||||
|
||||
import React from 'react';
|
||||
import collectScalesFromProps from '@data-ui/xy-chart/esm/utils/collectScalesFromProps';
|
||||
import { YAxis } from '@data-ui/xy-chart';
|
||||
import { XAxis, YAxis } from '@data-ui/xy-chart';
|
||||
import adjustMargin from './adjustMargin';
|
||||
import computeXAxisLayout from './computeXAxisLayout';
|
||||
import computeYAxisLayout from './computeYAxisLayout';
|
||||
import createTickComponent from './createTickComponent';
|
||||
import getTickLabels from './getTickLabels';
|
||||
import XAxis from '../XAxis';
|
||||
|
||||
const OVERFLOW_MARGIN = 8;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user