pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-19 20:19:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove children from XYChartLayout parameter

Browse Source
This commit is contained in:
Krist Wongsuphasawat 2019-06-05 00:34:30 -07:00 committed by Yongjie Zhao
parent 01264fdec1
commit 28ef524596
4 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx
View File

@ -78,23 +78,14 @@ export default class BoxPlot extends React.PureComponent<Props> {
const isHorizontal = channels.y.definition.type === 'nominal';
const children = [
<BoxPlotSeries
key={channels.x.definition.field}
animated
data={
isHorizontal
? data.map(row => ({ ...row, y: channels.y.get(row) }))
: data.map(row => ({ ...row, x: channels.x.get(row) }))
}
fill={(datum: PlainObject) => channels.color.encode(datum, '#55acee')}
fillOpacity={0.4}
stroke={(datum: PlainObject) => channels.color.encode(datum)}
strokeWidth={1}
widthRatio={0.6}
horizontal={channels.y.definition.type === 'nominal'}
/>,
];
if (typeof channels.x.scale !== 'undefined') {
const xDomain = channels.x.getDomain(data);
channels.x.scale.setDomain(xDomain);
}
if (typeof channels.y.scale !== 'undefined') {
const yDomain = channels.y.getDomain(data);
channels.y.scale.setDomain(yDomain);
}
const layout = this.createXYChartLayout({
width,
@ -103,7 +94,6 @@ export default class BoxPlot extends React.PureComponent<Props> {
theme,
xEncoder: channels.x,
yEncoder: channels.y,
children,
});
return layout.renderChartWithFrame((chartDim: Dimension) => (
@ -122,7 +112,21 @@ export default class BoxPlot extends React.PureComponent<Props> {
>
{layout.renderXAxis()}
{layout.renderYAxis()}
{children}
<BoxPlotSeries
key={channels.x.definition.field}
animated
data={
isHorizontal
? data.map(row => ({ ...row, y: channels.y.get(row) }))
: data.map(row => ({ ...row, x: channels.x.get(row) }))
}
fill={(datum: PlainObject) => channels.color.encode(datum, '#55acee')}
fillOpacity={0.4}
stroke={(datum: PlainObject) => channels.color.encode(datum)}
strokeWidth={1}
widthRatio={0.6}
horizontal={channels.y.definition.type === 'nominal'}
/>
</XYChart>
));
}

12
superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx
View File

@ -2,6 +2,7 @@
import React, { PureComponent } from 'react';
import { kebabCase, groupBy, flatMap, uniqueId, values } from 'lodash';
import { extent as d3Extent } from 'd3-array';
import {
AreaSeries,
LinearGradient,
@ -202,6 +203,16 @@ export default class LineChart extends PureComponent<Props> {
const { channels } = encoder;
const allSeries = this.createAllSeries({ encoder, data });
const children = this.createChildren(allSeries);
if (typeof channels.x.scale !== 'undefined') {
const xDomain = channels.x.getDomain(data);
channels.x.scale.setDomain(xDomain);
}
if (typeof channels.y.scale !== 'undefined') {
const yDomain = channels.y.getDomain(data);
channels.y.scale.setDomain(yDomain);
}
const layout = this.createXYChartLayout({
width,
height,
@ -209,7 +220,6 @@ export default class LineChart extends PureComponent<Props> {
theme,
xEncoder: channels.x,
yEncoder: channels.y,
children,
});
return layout.renderChartWithFrame((chartDim: Dimension) => (

39
superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx
View File

@ -14,6 +14,7 @@ import createMarginSelector, { DEFAULT_MARGIN } from '../utils/selectors/createM
import createXYChartLayoutSelector from '../utils/selectors/createXYChartLayoutSelector';
import DefaultTooltipRenderer from './DefaultTooltipRenderer';
import convertScaleToDataUIScale from '../utils/convertScaleToDataUIScaleShape';
import { isScaleFieldDef } from '../encodeable/types/ChannelDef';
export interface TooltipProps {
datum: EncodedPoint;
@ -84,11 +85,22 @@ export default class ScatterPlot extends PureComponent<Props> {
const { data, margin, theme, TooltipRenderer } = this.props;
const { channels } = this.encoder;
if (typeof channels.size.scale !== 'undefined') {
const domain = d3Extent(data, d => channels.size.get<number>(d));
if (typeof channels.x.scale !== 'undefined') {
const xDomain = channels.x.getDomain(data);
channels.x.scale.setDomain(xDomain);
}
if (typeof channels.y.scale !== 'undefined') {
const yDomain = channels.y.getDomain(data);
channels.y.scale.setDomain(yDomain);
}
if (
isScaleFieldDef(channels.size.definition) &&
channels.size.definition.type === 'quantitative'
) {
const domain = channels.size.getDomain(data) as number[];
const [min, max] = domain;
const adjustedDomain = [Math.min(min || 0, 0), Math.max(max || 1, 1)];
channels.size.scale.setDomain(adjustedDomain);
channels.size.scale!.setDomain(adjustedDomain);
}
const encodedData = data.map(d => ({
@ -100,17 +112,6 @@ export default class ScatterPlot extends PureComponent<Props> {
data: d,
}));
const children = [
<PointSeries
key={channels.x.definition.field}
data={encodedData}
fill={(d: EncodedPoint) => d.fill}
fillOpacity={0.5}
stroke={(d: EncodedPoint) => d.stroke}
size={(d: EncodedPoint) => d.size}
/>,
];
const layout = this.createXYChartLayout({
width,
height,
@ -118,7 +119,6 @@ export default class ScatterPlot extends PureComponent<Props> {
theme,
xEncoder: channels.x,
yEncoder: channels.y,
children,
});
return layout.renderChartWithFrame((chartDim: Dimension) => (
@ -137,7 +137,14 @@ export default class ScatterPlot extends PureComponent<Props> {
>
{layout.renderXAxis()}
{layout.renderYAxis()}
{children}
<PointSeries
key={channels.x.definition.field}
data={encodedData}
fill={(d: EncodedPoint) => d.fill}
fillOpacity={0.5}
stroke={(d: EncodedPoint) => d.stroke}
size={(d: EncodedPoint) => d.size}
/>
</XYChart>
));
}

20
superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx
View File

@ -1,7 +1,6 @@
/* eslint-disable sort-keys, no-magic-numbers */
import React, { ReactNode } from 'react';
import collectScalesFromProps from '@data-ui/xy-chart/esm/utils/collectScalesFromProps';
import { XAxis, YAxis } from '@data-ui/xy-chart';
import { ChartTheme } from '@data-ui/theme';
import { Margin, mergeMargin, Dimension } from '@superset-ui/dimension';
@ -11,7 +10,6 @@ import ChannelEncoder from '../encodeable/ChannelEncoder';
import { XFieldDef, YFieldDef } from '../encodeable/types/ChannelDef';
import { PlainObject } from '../encodeable/types/Data';
import { DEFAULT_LABEL_ANGLE } from './constants';
import convertScaleToDataUIScale from './convertScaleToDataUIScaleShape';
import { AxisLayout } from '../encodeable/AxisAgent';
// Additional margin to avoid content hidden behind scroll bar
@ -25,7 +23,6 @@ export interface XYChartLayoutConfig {
margin: Margin;
xEncoder: ChannelEncoder<XFieldDef>;
yEncoder: ChannelEncoder<YFieldDef>;
children: ReactNode[];
theme: ChartTheme;
}
@ -53,23 +50,9 @@ export default class XYChartLayout {
margin,
xEncoder,
yEncoder,
children,
theme,
} = config;
const { xScale, yScale } = collectScalesFromProps({
width,
height,
margin,
xScale: convertScaleToDataUIScale(xEncoder.scale!.config || {}),
yScale: convertScaleToDataUIScale(yEncoder.scale!.config || {}),
theme,
children,
});
if (typeof yEncoder.scale !== 'undefined') {
yEncoder.scale.setDomain(yScale.domain());
}
if (typeof yEncoder.axis !== 'undefined') {
this.yLayout = yEncoder.axis.computeLayout({
axisWidth: Math.max(height - margin.top - margin.bottom),
@ -82,9 +65,6 @@ export default class XYChartLayout {
const secondMargin = this.yLayout ? mergeMargin(margin, this.yLayout.minMargin) : margin;
const innerWidth = Math.max(width - secondMargin.left - secondMargin.right, minContentWidth);
if (typeof xEncoder.scale !== 'undefined') {
xEncoder.scale.setDomain(xScale.domain());
}
if (typeof xEncoder.axis !== 'undefined') {
this.xLayout = xEncoder.axis.computeLayout({
axisWidth: innerWidth,