From b257c32f1a63451495d419195afabe844f27a17c Mon Sep 17 00:00:00 2001
From: Beto Dealmeida <roberto@dealmeida.net>
Date: Mon, 4 Mar 2019 23:21:54 +0200
Subject: [PATCH] fix(legacy-preset-chart-nvd3): redraw markers after legend
 interaction (#6)

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

* fix: lint
---
 .../src/NVD3Vis.js                            | 11 ++++++
 .../legacy-preset-chart-nvd3/Line/Stories.jsx | 35 +++++++++++++++++++
 .../src/Line/transformProps.js                | 13 ++-----
 3 files changed, 48 insertions(+), 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
index b8ea18f36..98a737f17 100644
--- 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/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.jsx b/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.jsx
index e18820c3c..64147cafd 100644
--- a/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/Line/Stories.jsx
+++ b/packages/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
index bad42f936..d9cd8f0a4 100644
--- 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,