diff --git a/packages/google-analytics-embed-react/package.json b/packages/google-analytics-embed-react/package.json index c3d85a5..6e27dc5 100644 --- a/packages/google-analytics-embed-react/package.json +++ b/packages/google-analytics-embed-react/package.json @@ -1,7 +1,7 @@ { "name": "google-analytics-embed-react", "description": "Bringing the Google Analytics Embed Components for your ReactJS application", - "version": "0.0.2", + "version": "0.0.3", "type": "module", "main": "dist/index.js", "module": "dist/index.esm.js", @@ -10,6 +10,7 @@ "type": "git", "url": "git+https://github.com/arimacdev/google-analytics-embed-react.git" }, + "license": "MIT", "author": { "name": "WhizSid", "url": "https://github.com/whizsid", @@ -49,5 +50,8 @@ "peerDependencies": { "react": "*", "react-dom": "*" + }, + "dependencies": { + "react-fast-compare": "^3.2" } } diff --git a/packages/google-analytics-embed-react/rollup.config.js b/packages/google-analytics-embed-react/rollup.config.js index 9f7266c..2ca6c97 100644 --- a/packages/google-analytics-embed-react/rollup.config.js +++ b/packages/google-analytics-embed-react/rollup.config.js @@ -22,17 +22,17 @@ export default { ], plugins: [ typescript(), - babel({ - babelHelpers: 'bundled', - exclude: 'node_modules/**', - extensions: [".js", ".jsx", ".ts", ".tsx"], - plugins: [], - presets: ["@babel/preset-react", "@babel/preset-env"] - }), peerDepsExternal(), resolve({ browser: true }), - commonjs() + commonjs(), + babel({ + babelHelpers: 'bundled', + exclude: 'node_modules/**', + extensions: ['.js', '.jsx', '.ts', '.tsx'], + plugins: [], + presets: ['@babel/preset-react', '@babel/preset-env'] + }), ] }; diff --git a/packages/google-analytics-embed-react/src/DataChart.tsx b/packages/google-analytics-embed-react/src/DataChart.tsx index 4c10dd0..2c5bfc1 100644 --- a/packages/google-analytics-embed-react/src/DataChart.tsx +++ b/packages/google-analytics-embed-react/src/DataChart.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import GoogleAnalyticsContext, { GoogleAnalyticsState } from './GoogleAnalyticsContext'; +import equal from 'react-fast-compare'; export type DataChartProps = { /** Query */ @@ -33,25 +34,40 @@ class DataChart extends React.Component> { } componentDidMount(): void { - this.componentDidUpdate(); + this.componentDidUpdate({ query: null } as any); } - componentDidUpdate(): void { + componentDidUpdate(prevProps: DataChartProps): void { const gaState = this.context as GoogleAnalyticsState; const { query, children, style, className, onSuccess, onError, ...chartOptions } = this.props; // Rendering the component only if a user authenticated if (gaState === 'AUTH_SUCCESS') { // Updating the existing chart with new options if already rendered if (this.googleDataChart != null) { - this.googleDataChart.set({ - query, - chart: { - container: this.elementRef.current as HTMLElement, - type: this.chartType as any, - options: chartOptions as any - } - }); - this.googleDataChart.execute(); + const { + query: prevQuery, + children: _children, + style: _style, + className: _className, + onSuccess: _onSuccess, + onError: _onError, + ...prevChartOptions + } = prevProps; + + if ( + prevQuery != null && + (!equal(prevQuery, query) || !equal(prevChartOptions, chartOptions)) + ) { + this.googleDataChart.set({ + query, + chart: { + container: this.elementRef.current as HTMLElement, + type: this.chartType as any, + options: chartOptions as any + } + }); + this.googleDataChart.execute(); + } } else { // Creating a chart if a chart instance not created this.googleDataChart = new gapi.analytics.googleCharts.DataChart({ diff --git a/sites/react-backend-auth/package.json b/sites/react-backend-auth/package.json index 8e4cc2f..a48c0cd 100644 --- a/sites/react-backend-auth/package.json +++ b/sites/react-backend-auth/package.json @@ -5,7 +5,7 @@ "dependencies": { "@types/react": "*", "@types/react-dom": "*", - "google-analytics-embed-react": "0.0.2", + "google-analytics-embed-react": "0.0.3", "react": "*", "react-dom": "*", "axios": "*" diff --git a/sites/react-frontend-auth/package.json b/sites/react-frontend-auth/package.json index c619824..0ec3fdd 100644 --- a/sites/react-frontend-auth/package.json +++ b/sites/react-frontend-auth/package.json @@ -5,7 +5,7 @@ "dependencies": { "@types/react": "*", "@types/react-dom": "*", - "google-analytics-embed-react": "0.0.2", + "google-analytics-embed-react": "0.0.3", "react": "*", "react-dom": "*" },