feat: allow initialization from a DataTable (#766)

Author: Grsmto

packages/react-google-charts/src/utils/GoogleChartInternal.ts

@@ -127,7 +127,9 @@ export class GoogleChartInternal {
       );
     }
     if (data) {
-      if (Array.isArray(data)) {
+      if (data instanceof google.visualization.DataTable) {
+        dataTable = data;
+      } else if (Array.isArray(data)) {
         dataTable = google.visualization.arrayToDataTable(data);
       } else {
         dataTable = new google.visualization.DataTable(data);

packages/react-google-charts/stories/DataTable.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Chart, GoogleDataTable, GoogleViz } from "../src";
+import * as barChartData from "../../../sandboxes/bar-chart/default/App";
+
+export default {
+  title: "DataTable",
+  component: Chart,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    chartType: "BarChart",
+    width: 800,
+    height: 600,
+  },
+};
+
+export function Default({ data, chartType, ...rest }) {
+  const [dataTable, setDataTable] = React.useState<GoogleDataTable | null>(null);
+
+  const handleGoogleChartLoaded = (google: GoogleViz) => {
+    const dataTable = google.visualization.arrayToDataTable(data);
+
+    setDataTable(dataTable);
+  };
+
+  return <Chart onLoad={handleGoogleChartLoaded} data={dataTable ?? []} chartType={chartType} {...rest} />;
+}
+
+Default.args = {
+  data: barChartData.data,
+  options: barChartData.options,
+};