feat: remove children from XYChartLayout parameter

apache-superset · Jun 5, 2019 · cd74445 · cd74445
1 parent e2ea8c8
commit cd74445
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 56 deletions.
diff --git a/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx b/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx
@@ -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>
     ));
   }

diff --git a/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx b/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx
@@ -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,14 +203,23 @@ 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,
       margin: this.createMargin(margin),
       theme,
       xEncoder: channels.x,
       yEncoder: channels.y,
-      children,
     });
 
     return layout.renderChartWithFrame((chartDim: Dimension) => (

diff --git a/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx b/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx
@@ -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,25 +112,13 @@ 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,
       margin: this.createMargin(margin),
       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>
     ));
   }

diff --git a/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx b/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx
@@ -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,