Merge pull request #982 from Codeinwp/bugfix/981

Fixed custom format issue in chartjs

Author: vytisbulkevicius

classes/Visualizer/Render/Sidebar/Type/ChartJS/Pie.php

@@ -109,6 +109,26 @@ protected function _renderChartTypeSettings() {
 					esc_html__( 'If checked, the chart will be rendered as a donut chart.', 'visualizer' )
 				);
 
+				self::_renderTextItem(
+					esc_html__( 'Number Format', 'visualizer' ),
+					'format',
+					isset( $this->format ) ? $this->format : '',
+					sprintf(
+						'%s<br><br>%s<br><br>%s',
+						esc_html__( 'Enter custom format pattern to apply to horizontal axis labels.', 'visualizer' ),
+						sprintf(
+							esc_html__( 'For number axis labels, this is a subset of the decimal formatting %1$sICU pattern set%2$s. For instance, $#,###.## will display values $1,234.56 for value 1234.56. Pay attention that if you use #&#37;&#37; percentage format then your values will be multiplied by 100.', 'visualizer' ),
+							'<a href="http://icu-project.org/apiref/icu4c/classDecimalFormat.html#_details" target="_blank">',
+							'</a>'
+						),
+						sprintf(
+							esc_html__( 'For date axis labels, this is a subset of the date formatting %1$sICU date and time format%2$s.', 'visualizer' ),
+							'<a href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax" target="_blank">',
+							'</a>'
+						)
+					)
+				);
+
 			self::_renderSectionEnd();
 
 		self::_renderGroupEnd();

js/render-chartjs.js

@@ -118,6 +118,35 @@
             return;
         }
 
+        // Format series label.
+        settings.plugins.tooltip = {
+            callbacks: {
+                label: function(context) {
+                    var label = '';
+                    if ( 'object' === typeof context.dataset.label ) {
+                        label = context.label || '';
+                    } else {
+                        label = context.dataset.label || '';
+                    }
+                    if ( label ) {
+                        label += ': ';
+                    }
+                    var format = context.dataset.format || '';
+                    if ( format ) {
+                        label += format_datum( context.formattedValue, format );
+                    } else {
+                        format = 'undefined' !== typeof context.chart.config._config.options.format ? context.chart.config._config.options.format : '';
+                        if ( format ) {
+                            label += format_datum( context.formattedValue, format );
+                        } else {
+                            label += context.formattedValue;
+                        }
+                    }
+                    return label;
+                }
+            }
+        };
+
         var chartjs = new Chart(context, {
             type: type,
             data: {
@@ -131,7 +160,7 @@
                     if ( $( '#chart-img' ).length ) {
                         $( '#chart-img' ).val( canvas.toDataURL() );
                     }
-                },
+                }
             }],
         });