Add Toolbar and example.

rakannimer · Aug 12, 2018 · 02ed592 · 02ed592
1 parent a59b274
commit 02ed592
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-google-charts",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "type": "react-component",
   "description": "react-google-charts React component",
   "main": "dist/index.cjs.js",

diff --git a/src/components/GoogleChart.tsx b/src/components/GoogleChart.tsx
@@ -35,6 +35,7 @@ export interface State {
 }
 
 let controlCounter = 0;
+let toolbarCounter = 0;
 export class GoogleChart extends React.Component<Props, State> {
   state = {
     googleChartWrapper: null,
@@ -44,7 +45,7 @@ export class GoogleChart extends React.Component<Props, State> {
   } as State;
   graphID: null | string = null;
   private dashboard_ref: React.RefObject<HTMLDivElement> = React.createRef();
-
+  private toolbar_ref: React.RefObject<HTMLDivElement> = React.createRef();
   private getGraphID = () => {
     const { graphID, graph_id } = this.props;
     let instanceGraphID: string;
@@ -75,14 +76,22 @@ export class GoogleChart extends React.Component<Props, State> {
     return controlID;
   };
 
-  componentDidMount() {
-    const {
-      options,
-      google,
-      chartType,
-      chartWrapperParams,
-      controls
-    } = this.props;
+  private getToolbarID = (id: null | undefined | string) => {
+    toolbarCounter += 1;
+    let toolbarID: string;
+    if (typeof id === "undefined" || id === null) {
+      toolbarID = `googlechart-toolbar-${toolbarCounter}`;
+    } else {
+      toolbarID = id;
+    }
+    return toolbarID;
+  };
+
+  addControls = (
+    googleChartWrapper: GoogleChartWrapper,
+    googleChartDashboard: GoogleChartDashboard
+  ) => {
+    const { google, controls } = this.props;
 
     const googleChartControls =
       controls === null
@@ -105,6 +114,49 @@ export class GoogleChart extends React.Component<Props, State> {
               })
             };
           });
+    if (googleChartControls === null) {
+      return null;
+    }
+    googleChartDashboard.bind(
+      googleChartControls.map(({ control }) => control),
+      googleChartWrapper
+    );
+    for (let chartControl of googleChartControls) {
+      const { control, controlProp } = chartControl;
+      const { controlEvents = [] } = controlProp;
+      for (let event of controlEvents) {
+        const { callback, eventName } = event;
+        google.visualization.events.removeListener(
+          control,
+          eventName,
+          callback
+        );
+        google.visualization.events.addListener(
+          control,
+          eventName,
+          (...args: any[]) => {
+            callback({
+              chartWrapper: googleChartWrapper,
+              controlWrapper: control,
+              props: this.props as any,
+              google: google,
+              eventArgs: args
+            });
+          }
+        );
+      }
+    }
+    return googleChartControls;
+  };
+  componentDidMount() {
+    const {
+      options,
+      google,
+      chartType,
+      chartWrapperParams,
+      toolbarItems
+    } = this.props;
+
     const chartConfig = {
       chartType,
       options,
@@ -118,32 +170,16 @@ export class GoogleChart extends React.Component<Props, State> {
     const googleChartDashboard = new google.visualization.Dashboard(
       this.dashboard_ref
     );
-    if (googleChartControls !== null) {
-      googleChartDashboard.bind(
-        googleChartControls.map(({ control }) => control),
-        googleChartWrapper
+    const googleChartControls = this.addControls(
+      googleChartWrapper,
+      googleChartDashboard
+    );
+    if (toolbarItems !== null) {
+      // console.log(document.getElementById("toolbar"));
+      google.visualization.drawToolbar(
+        this.toolbar_ref.current as HTMLDivElement,
+        toolbarItems
       );
-      for (let chartControl of googleChartControls) {
-        const { control, controlProp } = chartControl;
-        const { controlEvents = [] } = controlProp;
-        google.visualization.events.removeAllListeners(control);
-        for (let event of controlEvents) {
-          const { callback, eventName } = event;
-          google.visualization.events.addListener(
-            control,
-            eventName,
-            (...args: any[]) => {
-              callback({
-                chartWrapper: googleChartWrapper,
-                controlWrapper: control,
-                props: this.props as any,
-                google: google,
-                eventArgs: args
-              });
-            }
-          );
-        }
-      }
     }
     this.setState({
       googleChartControls: googleChartControls,
@@ -221,19 +257,19 @@ export class GoogleChart extends React.Component<Props, State> {
       </React.Fragment>
     ) : null;
   };
+  renderToolBar = () => {
+    if (this.props.toolbarItems === null) return null;
+    return <div ref={this.toolbar_ref} />;
+  };
   render() {
-    const { width, height, options, style } = this.props;
-    const divStyle = {
-      height: height || (options && options.height),
-      width: width || (options && options.width),
-      ...style
-    };
     if (this.props.render !== null) {
       return (
         <div ref={this.dashboard_ref}>
+          <div ref={this.toolbar_ref} id="toolbar" />
           {this.props.render({
             renderChart: this.renderChart,
-            renderControl: this.renderControl
+            renderControl: this.renderControl,
+            renderToolbar: this.renderToolBar
           })}
         </div>
       );
@@ -247,6 +283,7 @@ export class GoogleChart extends React.Component<Props, State> {
           {this.renderControl(({ controlProp }) => {
             return controlProp.controlPosition === "bottom";
           })}
+          {this.renderToolBar()}
         </div>
       );
     }

diff --git a/src/default-props.ts b/src/default-props.ts
@@ -38,5 +38,7 @@ export const chartDefaultProps = {
   rootProps: {},
   chartWrapperParams: {},
   controls: null as GoogleChartControlProp[] | null,
-  render: null as ReactGoogleChartDashboardRender | null
+  render: null as ReactGoogleChartDashboardRender | null,
+  toolbarItems: null,
+  toolbarID: null
 };
diff --git a/src/docs/Toolbar.mdx b/src/docs/Toolbar.mdx
@@ -0,0 +1,26 @@
+---
+route: /google-charts-toolbar
+name: Toolbar
+menu: Toolbar
+---
+
+import { Playground, PropsTable } from 'docz'
+import Chart from '../index'
+
+## Usage 
+
+<Playground>
+  <Chart 
+    chartType="ColumnChart"
+    spreadSheetUrl="https://docs.google.com/spreadsheets/d/1jN0iw0usssnsG1_oi-NXtuKfsUsGme09GsFidbqxFYA"
+    toolbarItems={[
+      {
+        type: 'csv',
+        datasource: 'https://spreadsheets.google.com/tq?key=1jN0iw0usssnsG1_oi-NXtuKfsUsGme09GsFidbqxFYA'
+      },
+    ]}
+    rootProps={{'data-testid': '1'}}
+  />
+</Playground>
+
+## [Reference](https://developers.google.com/chart/interactive/docs/gallery/toolbar)
diff --git a/src/types.ts b/src/types.ts
@@ -4,13 +4,19 @@ import { chartDefaultProps } from "./default-props";
 export type ReactGoogleChartPropsWithDefaults = typeof chartDefaultProps &
   ReactGoogleChartProps;
 
+export type GoogleVizDrawToolbar = (
+  toolbarContainer: HTMLDivElement,
+  components: GoogleChartToolbarItem[]
+) => any;
+
 export type GoogleViz = {
   charts: GoogleChartLoader;
   visualization: {
     ChartWrapper: GoogleChartWrapper;
     DataTable: GoogleDataTable;
     events: GoogleVizEvents;
     arrayToDataTable: GoogleArrayToDataTable;
+    drawToolbar: GoogleVizDrawToolbar;
     [otherKeys: string]: any;
   };
 };
@@ -206,6 +212,11 @@ export type GoogleVizEvents = {
     name: GoogleVizEventName,
     onEvent: (chartWrapper: GoogleChartWrapper) => any
   ) => any;
+  removeListener: (
+    chartWrapper: GoogleChartWrapper,
+    name: GoogleVizEventName,
+    callback: Function
+  ) => any;
   removeAllListeners: (chartWrapper: GoogleChartWrapper) => any;
 };
 
@@ -476,6 +487,16 @@ export type ReactGoogleChartEvent = {
   ) => void;
 };
 
+export type GoogleChartToolbarItem = {
+  type: "igoogle" | "html" | "csv" | "htmlcode";
+  datasource: string;
+  gadget?: string;
+  userPrefs?: {
+    "3d": number;
+    [otherKeyMaybe: string]: any;
+  };
+};
+
 export type ReactGoogleChartProps = {
   height?: string | number;
   width?: string | number;
@@ -526,16 +547,24 @@ export type ReactGoogleChartProps = {
   rootProps?: any;
   controls?: GoogleChartControlProp[];
   render?: ReactGoogleChartDashboardRender;
+  //https://developers.google.com/chart/interactive/docs/gallery/toolbar#example_1
+  toolbarItems?: GoogleChartToolbarItem[];
+  toolbarID?: string;
 };
 
 export type GoogleChartDashboard = {
   draw: (data: GoogleDataTable) => void;
+  bind: (
+    controlWrapperOrWrappers: GoogleChartControl | GoogleChartControl[],
+    chartWrapper: GoogleChartWrapper
+  ) => void;
 };
 
 export type ReactGoogleChartDashboardRender = (
   {
     renderControl,
-    renderChart
+    renderChart,
+    renderToolbar
   }: {
     renderControl: (
       filter: (
@@ -546,6 +575,7 @@ export type ReactGoogleChartDashboardRender = (
       ) => boolean
     ) => any;
     renderChart: () => any;
+    renderToolbar: () => any;
   }
 ) => any;
 export type GoogleChartControl = {