fix: line chart does not handle temporal field correctly (#68)

* fix: fallback to default margin when margin is partially set * feat: can disable axis title * feat: adjust margin according to axis title visibility * feat: include margin in formData * feat: add buildQuery * fix: address kyle comments * fix: remove string false * fix: line chart temporal scale * fix: format
zhaoyongjie · Nov 25, 2021 · ec2d386 · ec2d386
1 parent fe97216
commit ec2d386
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/...ackages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/basic.tsx b/...ackages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/Line/stories/basic.tsx
@@ -19,7 +19,7 @@ export default [
                 x: {
                   field: 'x',
                   type: 'temporal',
-                  format: '%Y',
+                  format: '%Y-%m',
                   scale: {
                     type: 'time',
                   },

diff --git a/...set-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx b/...set-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx
@@ -83,6 +83,8 @@ class LineChart extends PureComponent<Props> {
     const { width, height } = dim;
     const { data, encoding, margin, theme } = this.props;
 
+    const { channels } = this.encoder;
+
     const fieldNames = data.keys
       .filter(k => k !== encoding.x.field && k !== encoding.y.field)
       .sort((a, b) => a.localeCompare(b));
@@ -94,15 +96,15 @@ class LineChart extends PureComponent<Props> {
 
       const series: Series = {
         key: fieldNames.map(f => firstDatum[f]).join(','),
-        color: this.encoder.channels.color.encode(firstDatum),
-        fill: this.encoder.channels.fill.encode(firstDatum, false),
-        strokeDasharray: this.encoder.channels.strokeDasharray.encode(firstDatum),
+        color: channels.color.encode(firstDatum),
+        fill: channels.fill.encode(firstDatum, false),
+        strokeDasharray: channels.strokeDasharray.encode(firstDatum),
         values: [],
       };
 
       series.values = seriesData.map(v => ({
-        x: this.encoder.channels.x.encode(v),
-        y: this.encoder.channels.y.encode(v),
+        x: channels.x.get(v),
+        y: channels.y.get(v),
         data: v,
         parent: series,
       }));
@@ -157,8 +159,8 @@ class LineChart extends PureComponent<Props> {
       height,
       margin: { ...DEFAULT_MARGIN, ...margin },
       theme,
-      xEncoder: this.encoder.channels.x,
-      yEncoder: this.encoder.channels.y,
+      xEncoder: channels.x,
+      yEncoder: channels.y,
       children,
     });
 
@@ -186,8 +188,8 @@ class LineChart extends PureComponent<Props> {
             snapTooltipToDataX
             theme={theme}
             tooltipData={tooltipData}
-            xScale={this.encoder.channels.x.definition.scale}
-            yScale={this.encoder.channels.y.definition.scale}
+            xScale={channels.x.definition.scale}
+            yScale={channels.y.definition.scale}
           >
             {children}
             {layout.renderXAxis()}