fix: catch invalid Google Charts format patterns and show i18n error (#1272)

Wrap gv.NumberFormat/DateFormat construction in a try/catch to prevent
uncaught 'Too many percent/permill' errors from invalid ICU patterns.
Show a localised error message inline below the format input field and
clear it automatically when the pattern becomes valid.

Author: HardeepAsrani

classes/Visualizer/Module/Chart.php

@@ -876,12 +876,13 @@ private function _handleDataAndSettingsPage() {
 			'visualizer',
 			array(
 				'l10n'   => array(
-					'invalid_source' => esc_html__( 'You have entered an invalid URL. Please provide a valid URL.', 'visualizer' ),
-					'loading'        => esc_html__( 'Loading...', 'visualizer' ),
-					'json_error'     => esc_html__( 'An error occured in fetching data.', 'visualizer' ),
-					'select_columns' => esc_html__( 'Please select a few columns to include in the chart.', 'visualizer' ),
-					'save_settings'  => __( 'You have modified the chart\'s settings. To modify the source/data again, you must save this chart and reopen it for editing. If you continue without saving the chart, you may lose your changes.', 'visualizer' ),
-					'copied'         => __( 'The data has been copied to your clipboard. Hit Ctrl-V/Cmd-V in your spreadsheet editor to paste the data.', 'visualizer' ),
+					'invalid_source'  => esc_html__( 'You have entered an invalid URL. Please provide a valid URL.', 'visualizer' ),
+					'loading'         => esc_html__( 'Loading...', 'visualizer' ),
+					'json_error'      => esc_html__( 'An error occured in fetching data.', 'visualizer' ),
+					'select_columns'  => esc_html__( 'Please select a few columns to include in the chart.', 'visualizer' ),
+					'save_settings'   => __( 'You have modified the chart\'s settings. To modify the source/data again, you must save this chart and reopen it for editing. If you continue without saving the chart, you may lose your changes.', 'visualizer' ),
+					'copied'          => __( 'The data has been copied to your clipboard. Hit Ctrl-V/Cmd-V in your spreadsheet editor to paste the data.', 'visualizer' ),
+					'invalid_format'  => esc_html__( 'This format pattern is not supported in the series settings field. Use the Manual Configuration option instead.', 'visualizer' ),
 				),
 				'charts' => array(
 					'canvas' => $data,
@@ -1405,7 +1406,8 @@ private function _handleDataPage() {
 			array(
 				'l10n'   => array(
 					'invalid_source' => esc_html__( 'You have entered an invalid URL. Please provide a valid URL.', 'visualizer' ),
-					'loading'       => esc_html__( 'Loading...', 'visualizer' ),
+					'loading'        => esc_html__( 'Loading...', 'visualizer' ),
+					'invalid_format' => esc_html__( 'This format pattern is not supported in the series settings field. To display percentages, use the Manual Configuration option instead.', 'visualizer' ),
 				),
 				'charts' => array(
 					'canvas' => $data,

js/render-google.js

@@ -449,19 +449,30 @@ var isResizeRequest = false;
         }
 
         var formatter = null;
-        switch (type) {
-            case 'number':
-                formatter = new gv.NumberFormat({pattern: format});
-                break;
-            case 'date':
-            case 'datetime':
-            case 'timeofday':
-                formatter = new gv.DateFormat({pattern: format});
-                break;
-        }
+        var $formatInput = $('input.control-text[name*="[format]"]').filter(function() {
+            return $(this).val() === format;
+        });
+        try {
+            switch (type) {
+                case 'number':
+                    formatter = new gv.NumberFormat({pattern: format});
+                    break;
+                case 'date':
+                case 'datetime':
+                case 'timeofday':
+                    formatter = new gv.DateFormat({pattern: format});
+                    break;
+            }
 
-        if (formatter) {
-            formatter.format(table, index);
+            if (formatter) {
+                formatter.format(table, index);
+                $formatInput.nextAll('.visualizer-format-error').remove();
+            }
+        } catch (e) {
+            if ($formatInput.length) {
+                $formatInput.nextAll('.visualizer-format-error').remove();
+                $('<p class="visualizer-format-error" style="color:#cc0000;margin:4px 0 0"></p>').text(visualizer.l10n.invalid_format).insertAfter($formatInput);
+            }
         }
 
         var arr = id.split('-');