Fix: dynamic series visibility toggle

FlockOfBirds · Apr 16, 2018 · f1ccf6d · f1ccf6d
1 parent 3d9354c
commit f1ccf6d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/src/LineChart/components/LineChart.ts b/src/LineChart/components/LineChart.ts
@@ -134,22 +134,22 @@ export class LineChart extends Component<LineChartProps, LineChartState> {
     }
 
     private getData(props: LineChartProps): ScatterData[] {
-        if (props.scatterData) {
-            const lineData: ScatterData[] = props.scatterData.map((data, index) => {
+        if (this.state.scatterData) {
+            const lineData: ScatterData[] = this.state.scatterData.map((data, index) => {
                 const parsedOptions = props.devMode !== "basic" && this.state.seriesOptions
                     ? JSON.parse(this.state.seriesOptions[index])
                     : {};
 
                 // deepmerge doesn't go into the prototype chain, so it can't be used for copying mxObjects
                 return {
                     ...deepMerge.all<ScatterData>([ data, parsedOptions ]),
-                    visible: this.state.hiddenTraces.indexOf(index) === -1 ? true : "legendonly",
+                    visible: data.visible || true,
                     customdata: data.customdata
                 };
             });
 
             return props.area === "stacked"
-                ? LineChart.getStackedArea(lineData, this.state.hiddenTraces)
+                ? LineChart.getStackedArea(lineData)
                 : lineData;
         }
 
@@ -181,18 +181,26 @@ export class LineChart extends Component<LineChartProps, LineChartState> {
         }
     }
 
-    private onRestyle = (data: any) => {
-        if (data[0].visible[0] === "legendonly") {
-            this.setState({ hiddenTraces: this.state.hiddenTraces.concat([ data[1][0] ]) });
-        } else if (data[0].visible[0] === true) {
-            const hiddenTraces = [ ...this.state.hiddenTraces ];
-            hiddenTraces.splice(hiddenTraces.indexOf(data[1][0]), 1);
-            this.setState({ hiddenTraces });
+    private onRestyle = (data: any[]) => {
+        if (this.state.scatterData) {
+            (this.state.scatterData as any)[data[1][0]].visible = data[0].visible[0];
+            this.setState({ scatterData: this.state.scatterData });
         }
     }
 
     private onRuntimeUpdate = (layoutOptions: string, seriesOptions: string[]) => {
-        this.setState({ layoutOptions, seriesOptions });
+        const updatedScatterData = seriesOptions.map((option, index) => {
+            const rawOptions = option ? JSON.parse(option) : {};
+            if (rawOptions.visible) {
+                const { scatterData } = this.state;
+                (scatterData as any)[index].visible = rawOptions.visible;
+
+                return (scatterData as any)[index];
+            }
+
+            return (this.state.scatterData as any)[index];
+        });
+        this.setState({ layoutOptions, seriesOptions, scatterData: updatedScatterData });
     }
 
     public static defaultLayoutConfigs(props: LineChartProps): Partial<Layout> {
@@ -264,8 +272,8 @@ export class LineChart extends Component<LineChartProps, LineChartState> {
         };
     }
 
-    public static getStackedArea(traces: ScatterData[], hiddenTraces: number[]) {
-        const visibleTraces = traces.filter((data, index) => hiddenTraces.indexOf(index) === -1);
+    public static getStackedArea(traces: ScatterData[]) {
+        const visibleTraces = traces.filter((data, index) => data.visible === true);
         for (let i = 1; i < visibleTraces.length; i++) {
             for (let j = 0; j < (Math.min(visibleTraces[i].y.length, visibleTraces[i - 1].y.length)); j++) {
                 (visibleTraces[i].y[j] as any) += visibleTraces[i - 1].y[j];

diff --git a/typings/plotly.extend.d.ts b/typings/plotly.extend.d.ts
@@ -69,6 +69,7 @@ declare module "plotly.js" {
         series: any; // custom property, not part of the official plotly.js api
         orientation?: "h" | "v";
         customdata: any[];
+        visible?: boolean | "legendonly"; // default = true
     }
 
     export interface PieData {

diff --git a/webpack.config.js b/webpack.config.js
@@ -34,7 +34,7 @@ const widgetConfig = {
             "tests": path.resolve(__dirname, "./tests")
         }
     },
-    devtool: "source-map",
+    devtool: "eval",
     module: {
         rules: [
             {
@@ -89,7 +89,7 @@ const anyChartConfig = {
             "plotly.js/dist/plotly": "plotly.js/dist/plotly.min.js"
         }
     },
-    devtool: "source-map",
+    devtool: "eval",
     module: {
         rules: [
             {
@@ -144,7 +144,7 @@ const previewConfig = {
     resolve: {
         extensions: [ ".ts", ".js" ]
     },
-    devtool: "inline-source-map",
+    devtool: "eval",
     module: {
         rules: [
             { test: /\.ts$/, loader: "ts-loader", options: {
@@ -178,7 +178,7 @@ const anyChartPreviewConfig = {
             "plotly.js/dist/plotly": "plotly.js/dist/plotly.min.js"
         }
     },
-    devtool: "inline-source-map",
+    devtool: "eval",
     module: {
         rules: [
             { test: /\.ts$/, loader: "ts-loader", options: {