From 2d91574f6286ab88ac9f75a68ead5f8d90783af9 Mon Sep 17 00:00:00 2001
From: Dave Welsh <dave@qccareerschool.com>
Date: Mon, 18 Jan 2021 16:42:15 -0500
Subject: [PATCH] fix: switch to using a dataView to hide columns

PR: #391
---
 src/components/GoogleChartDataTable.tsx | 33 ++++++++++++++-----------
 stories/LegendToggle.stories.tsx        | 27 ++++++++++++++++++++
 2 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 stories/LegendToggle.stories.tsx

diff --git a/src/components/GoogleChartDataTable.tsx b/src/components/GoogleChartDataTable.tsx
index 5331312a..16862351 100644
--- a/src/components/GoogleChartDataTable.tsx
+++ b/src/components/GoogleChartDataTable.tsx
@@ -169,27 +169,30 @@ export class GoogleChartDataTableInner extends React.Component<
       dataTable = google.visualization.arrayToDataTable([]);
     }
     const columnCount = dataTable.getNumberOfColumns();
-    for (let i = 0; i < columnCount; i += 1) {
-      const columnID = this.getColumnID(dataTable, i);
-      if (this.state.hiddenColumns.includes(columnID)) {
-        const previousColumnLabel = dataTable.getColumnLabel(i);
-        const previousColumnID = dataTable.getColumnId(i);
-        const previousColumnType = dataTable.getColumnType(i);
-        dataTable.removeColumn(i);
-        dataTable.addColumn({
-          label: previousColumnLabel,
-          id: previousColumnID,
-          type: previousColumnType,
-        });
-      }
-    }
+
+    const viewColumns = Array(columnCount)
+      .fill(0)
+      .map((c, i) => {
+        const columnID = this.getColumnID(dataTable, i);
+        if (this.state.hiddenColumns.includes(columnID)) {
+          return {
+            label: dataTable.getColumnLabel(i),
+            type: dataTable.getColumnType(i),
+            calc: () => null,
+          };
+        } else {
+          return i;
+        }
+      });
     const chart = googleChartWrapper.getChart();
     if (googleChartWrapper.getChartType() === "Timeline") {
       chart && chart.clearChart();
     }
     googleChartWrapper.setChartType(chartType);
     googleChartWrapper.setOptions(options || {});
-    googleChartWrapper.setDataTable(dataTable);
+    const viewTable = new google.visualization.DataView(dataTable);
+    viewTable.setColumns(viewColumns);
+    googleChartWrapper.setDataTable(viewTable);
     googleChartWrapper.draw();
     if (this.props.googleChartDashboard !== null) {
       this.props.googleChartDashboard.draw(dataTable);
diff --git a/stories/LegendToggle.stories.tsx b/stories/LegendToggle.stories.tsx
new file mode 100644
index 00000000..007042c5
--- /dev/null
+++ b/stories/LegendToggle.stories.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Chart } from "../src";
+import * as lineChartData from "../sandboxes/line-chart/default/App";
+
+export default {
+  title: "Legend Toggle",
+  component: Chart,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    chartType: "LineChart",
+    width: 800,
+    height: 600,
+    data: lineChartData.data,
+    legend_toggle: true,
+  },
+};
+
+export function Default(args) {
+  return <Chart {...args} />;
+}
+
+Default.args = {
+  data: lineChartData.data,
+  options: lineChartData.options,
+};