Merge pull request #734 from contactashish13/issue-724

Google charts: Series number format not applying in the Gutenberg editor

Author: rodica-andronache

classes/Visualizer/Gutenberg/build/block.js

@@ -7,7 +7,7 @@ import DataTable from './DataTable.js';
 
 import merge from 'merge';
 
-import { compact, formatDate, isValidJSON } from '../utils.js';
+import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
 
 /**
  * WordPress dependencies
@@ -97,6 +97,7 @@ class ChartRender extends Component {
 										compact( this.props.chart['visualizer-settings'])
 								}
 								height="500px"
+                                formatters={ formatData( data ) }
 							/>
                         ) : (
 							<Chart
@@ -109,6 +110,7 @@ class ChartRender extends Component {
 										compact( this.props.chart['visualizer-settings'])
 								}
 								height="500px"
+                                formatters={ formatData( data ) }
 							/>
 						) ) }
 

classes/Visualizer/Gutenberg/src/Components/ChartRender.js

@@ -23,7 +23,7 @@ import PanelButton from './PanelButton.js';
 
 import merge from 'merge';
 
-import { compact, formatDate, isValidJSON } from '../utils.js';
+import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
 
 /**
  * WordPress dependencies
@@ -169,6 +169,7 @@ class ChartSelect extends Component {
 										compact( this.props.chart['visualizer-settings'])
 								}
 								height="500px"
+                                formatters={ formatData( data ) }
 							/>
                         ) : (
 							<Chart
@@ -181,6 +182,7 @@ class ChartSelect extends Component {
 										compact( this.props.chart['visualizer-settings'])
 								}
 								height="500px"
+                                formatters={ formatData( data ) }
 							/>
 						)
 					) }

classes/Visualizer/Gutenberg/src/Components/ChartSelect.js

@@ -5,7 +5,7 @@ import { Chart } from 'react-google-charts';
 
 import DataTable from './DataTable.js';
 
-import { formatDate, filterCharts } from '../utils.js';
+import { formatDate, filterCharts, formatData } from '../utils.js';
 
 /**
  * WordPress dependencies
@@ -152,13 +152,15 @@ class Charts extends Component {
 														rows={ data['visualizer-data'] }
 														columns={ data['visualizer-series'] }
 														options={ filterCharts( data['visualizer-settings']) }
+                                                        formatters={ formatData( data ) }
 													/>
 												) : (
 													<Chart
 														chartType={ chart }
 														rows={ data['visualizer-data'] }
 														columns={ data['visualizer-series'] }
 														options={ filterCharts( data['visualizer-settings']) }
+                                                        formatters={ formatData( data ) }
 													/>
 												) ) }
 

classes/Visualizer/Gutenberg/src/Components/Charts.js

@@ -103,3 +103,78 @@ export const CSVToArray = ( strData, strDelimiter ) => {
 export const isChecked = ( settings, param ) => {
     return true === settings[param] || 'true' === settings[param] || '1' === settings[param] || 1 === settings[param];
 };
+
+
+export const formatData = ( chart ) => {
+    let library = chart['visualizer-chart-library'];
+
+    switch ( library ) {
+        case 'GoogleCharts':
+            return formatDataForGoogleCharts( chart );
+    }
+};
+
+export const formatDataForGoogleCharts = ( chart ) => {
+    let settings = chart['visualizer-settings'];
+    let type = chart['visualizer-chart-type'];
+    let series = chart['visualizer-series'];
+
+    let formatters = [];
+
+    if ( settings.series ) {
+        switch ( type ) {
+            case 'tabular':
+                for  ( let i in settings.series ) {
+                    i = parseInt( i );
+                    if ( ! series[i + 1]) {
+                        continue;
+                    }
+                    if ( settings.series[i].format && '' !== settings.series[i].format ) {
+                        let col = i + 1;
+                        let formatter = getFormatterForGoogle( series[i + 1].type );
+                        if ( formatter ) {
+                            formatters.push({ type: formatter, options: { pattern: settings.series[i].format }, column: col });
+                        }
+                    }
+                }
+                break;
+            default:
+                for ( let i = 0; i < settings.series.length; i++ ) {
+                    if ( ! series[i + 1] || 'undefined' === typeof settings.series[i]) {
+                        continue;
+                    }
+                    if ( settings.series[i].format && '' !== settings.series[i].format ) {
+                        let col = i + 1;
+                        let formatter = getFormatterForGoogle( series[i + 1].type );
+                        if ( formatter ) {
+                            formatters.push({ type: formatter, options: { pattern: settings.series[i].format }, column: col });
+                        }
+                    }
+                }
+                break;
+        }
+    } else if ( 'pie' === type && settings.format && '' !== settings.format ) {
+        formatters.push({ type: getFormatterForGoogle( 'number' ), options: { pattern: settings.format }, column: 1 });
+    }
+
+    if ( settings.hAxis && series[0]) {
+        let formatter = getFormatterForGoogle( series[0].type );
+        if ( formatter ) {
+            formatters.push({ type: formatter, options: { pattern: settings.hAxis.format }, column: 0 });
+        }
+    }
+
+    return formatters;
+};
+
+export const getFormatterForGoogle = ( dataType ) => {
+    switch ( dataType ) {
+        case 'number':
+            return 'NumberFormat';
+        case 'date':
+        case 'datetime':
+        case 'timeofday':
+            return 'DateFormat';
+    }
+    return null;
+};