fix(legacy-preset-chart-nvd3): redraw markers after legend interaction (

#6) * fix(legacy-preset-chart-nvd3): redraw markers after legend interaction * fix: lint
apache-superset · Mar 4, 2019 · b257c32 · b257c32
1 parent fccf620
commit b257c32
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 11 deletions.
diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
@@ -619,6 +619,17 @@ function nvd3Vis(element, props) {
         .selectAll('.nv-point')
         .style('stroke-opacity', 1)
         .style('fill-opacity', 1);
+
+      // redo on legend toggle; nvd3 calls the callback *before* the line is
+      // drawn, so we need to add a small delay here
+      chart.dispatch.on('stateChange', () => {
+        setTimeout(() => {
+          svg
+            .selectAll('.nv-point')
+            .style('stroke-opacity', 1)
+            .style('fill-opacity', 1);
+        }, 10);
+      });
     }
 
     if (chart.yAxis !== undefined || chart.yAxis2 !== undefined) {

diff --git a/...ages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.jsx b/...ages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.jsx
@@ -39,4 +39,39 @@ export default [
     storyName: 'Basic',
     storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
   },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="line"
+        chartProps={{
+          datasource: { verboseMap: {} },
+          formData: {
+            bottomMargin: 'auto',
+            colorScheme: 'd3Category10',
+            leftMargin: 'auto',
+            lineInterpolation: 'linear',
+            richTooltip: true,
+            showBrush: 'auto',
+            showLegend: true,
+            showMarkers: true,
+            vizType: 'line',
+            xAxisFormat: 'smart_date',
+            xAxisLabel: '',
+            xAxisShowminmax: false,
+            xTicksLayout: 'auto',
+            yAxisBounds: [null, null],
+            yAxisFormat: '.3s',
+            yAxisLabel: '',
+            yAxisShowminmax: false,
+            yLogScale: false,
+          },
+          height: 400,
+          payload: { data },
+          width: 400,
+        }}
+      />
+    ),
+    storyName: 'Markers',
+    storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
+  },
 ];
diff --git a/packages/superset-ui-preset-chart-xy/src/Line/transformProps.js b/packages/superset-ui-preset-chart-xy/src/Line/transformProps.js
@@ -4,17 +4,8 @@ import { getTimeFormatter } from '@superset-ui/time-format';
 /* eslint-disable sort-keys */
 
 export default function transformProps(chartProps) {
-  const { width, height, datasource = {}, formData, payload } = chartProps;
-  const { verboseMap = {} } = datasource;
-  const {
-    colorScheme,
-    groupby,
-    metrics,
-    xAxisLabel,
-    xAxisFormat,
-    yAxisLabel,
-    yAxisFormat,
-  } = formData;
+  const { width, height, formData, payload } = chartProps;
+  const { colorScheme, xAxisLabel, xAxisFormat, yAxisLabel, yAxisFormat } = formData;
 
   return {
     data: payload.data,