Release

classes/Visualizer/Gutenberg/src/Components/Sidebar/HorizontalAxisSettings.js

@@ -18,6 +18,8 @@ const {
 	TextControl
 } = wp.components;
 
+import { getColorCode } from '../../utils.js';
+
 class HorizontalAxisSettings extends Component {
 	constructor() {
 		super( ...arguments );
@@ -85,9 +87,9 @@ class HorizontalAxisSettings extends Component {
 						label={ __( 'Base Line Color' ) }
 					>
 						<ColorPalette
-							value={ settings.hAxis.baselineColor }
+							value={ settings.vAxis.baselineColor }
 							onChange={ e => {
-								settings.hAxis.baselineColor = e;
+								settings.vAxis.baselineColor = getColorCode( e );
 								this.props.edit( settings );
 							} }
 						/>
@@ -100,7 +102,7 @@ class HorizontalAxisSettings extends Component {
 							value={ settings.hAxis.textStyle.color || settings.hAxis.textStyle }
 							onChange={ e => {
 								settings.hAxis.textStyle = {};
-								settings.hAxis.textStyle.color = e;
+								settings.hAxis.textStyle.color = getColorCode( e );
 								this.props.edit( settings );
 							} }
 						/>
@@ -128,7 +130,7 @@ class HorizontalAxisSettings extends Component {
 
 							<p>
 								{ __( 'For date axis labels, this is a subset of the date formatting ' ) }
-								<ExternalLink href="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax">
+								<ExternalLink href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax">
 									{ __( 'ICU date and time format.' ) }
 								</ExternalLink>
 							</p>

classes/Visualizer/Gutenberg/src/Components/Sidebar/PieSettings.js

@@ -56,7 +56,7 @@ class PieSettings extends Component {
 
 					<p>
 						{ __( 'For date axis labels, this is a subset of the date formatting ' ) }
-						<ExternalLink href="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax">
+						<ExternalLink href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax">
 							{ __( 'ICU date and time format.' ) }
 						</ExternalLink>
 					</p>

classes/Visualizer/Gutenberg/src/Components/Sidebar/SeriesSettings.js

@@ -175,7 +175,7 @@ class SeriesSettings extends Component {
 
 											<p>
 												{ __( 'This is a subset of the date formatting ' ) }
-												<ExternalLink href="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax">
+												<ExternalLink href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax">
 													{ __( 'ICU date and time format.' ) }
 												</ExternalLink>
 											</p>

classes/Visualizer/Gutenberg/src/Components/Sidebar/VerticalAxisSettings.js

@@ -18,6 +18,8 @@ const {
 	TextControl
 } = wp.components;
 
+import { getColorCode } from '../../utils.js';
+
 class VerticalAxisSettings extends Component {
 	constructor() {
 		super( ...arguments );
@@ -85,9 +87,9 @@ class VerticalAxisSettings extends Component {
 						label={ __( 'Base Line Color' ) }
 					>
 						<ColorPalette
-							value={ settings.vAxis.baselineColor }
+							value={ settings.hAxis.baselineColor }
 							onChange={ e => {
-								settings.vAxis.baselineColor = e;
+								settings.hAxis.baselineColor = getColorCode( e );
 								this.props.edit( settings );
 							} }
 						/>
@@ -100,7 +102,7 @@ class VerticalAxisSettings extends Component {
 							value={ settings.vAxis.textStyle.color || settings.vAxis.textStyle }
 							onChange={ e => {
 								settings.vAxis.textStyle = {};
-								settings.vAxis.textStyle.color = e;
+								settings.vAxis.textStyle.color = getColorCode( e );
 								this.props.edit( settings );
 							} }
 						/>
@@ -129,7 +131,7 @@ class VerticalAxisSettings extends Component {
 
 							<p>
 								{ __( 'For date axis labels, this is a subset of the date formatting ' ) }
-								<ExternalLink href="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax">
+								<ExternalLink href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax">
 									{ __( 'ICU date and time format.' ) }
 								</ExternalLink>
 							</p>

classes/Visualizer/Gutenberg/src/Editor.js

@@ -581,7 +581,7 @@ class Editor extends Component {
 									} else if ( 'chartSelect' === this.state.route ) {
 										route = 'showCharts';
 									}
-									this.setState({ route });
+									this.setState({ route, isLoading: false });
 									this.props.setAttributes({ route });
 								} }
 							>

classes/Visualizer/Gutenberg/src/utils.js

@@ -178,3 +178,14 @@ export const getFormatterForGoogle = ( dataType ) => {
     }
     return null;
 };
+
+export const getColorCode = ( color ) => {
+	if ( -1 === color.indexOf( '#' ) ) {
+		let getCssVar = color.match( /\((.*)\)/ ).pop();
+		if ( getCssVar ) {
+			let style = getComputedStyle( document.body );
+			return style.getPropertyValue( getCssVar );
+		}
+	}
+	return color;
+};

classes/Visualizer/Module.php

@@ -67,6 +67,7 @@ public function __construct( Visualizer_Plugin $plugin ) {
 		$this->_addFilter( Visualizer_Plugin::FILTER_UNDO_REVISIONS, 'undoRevisions', 10, 2 );
 		$this->_addFilter( Visualizer_Plugin::FILTER_HANDLE_REVISIONS, 'handleExistingRevisions', 10, 2 );
 		$this->_addFilter( Visualizer_Plugin::FILTER_GET_CHART_DATA_AS, 'getDataAs', 10, 3 );
+		$this->_addFilter( Visualizer_Plugin::FILTER_CHART_TITLE, 'filterChartTitle', 10, 2 );
 		register_shutdown_function( array($this, 'onShutdown') );
 
 	}
@@ -791,4 +792,21 @@ public function _getImage( $chart = null ) {
 			'csv'  => $image,
 		);
 	}
+
+	/**
+	 * Filter chart title.
+	 *
+	 * @access public
+	 * @param string $post_title Post title.
+	 * @param int    $post_id Post ID.
+	 * @return string
+	 */
+	public function filterChartTitle( $post_title, $post_id ) {
+		$post_type = get_post_type( $post_id );
+		$post_title     = trim( $post_title );
+		if ( 'visualizer' === $post_type && 'Visualization' === $post_title ) {
+			return sprintf( '%s #%d', $post_title, $post_id );
+		}
+		return $post_title;
+	}
 }

classes/Visualizer/Module/Chart.php

@@ -1245,15 +1245,16 @@ public function cloneChart() {
 							'vaction' => false,
 						),
 						admin_url( 'admin.php' )
-					)
+					),
+					null,
+					'db'
 				);
 			}
 		}
 
 		if ( defined( 'WP_TESTS_DOMAIN' ) ) {
 			wp_die();
 		}
-
 		wp_redirect( $redirect );
 		exit;
 	}

classes/Visualizer/Module/Frontend.php

@@ -341,6 +341,8 @@ public function renderChart( $atts ) {
 			$attributes['data-lazy-limit'] = $atts['lazy'];
 		}
 
+		$attributes = apply_filters( 'visualizer_container_attributes', $attributes, $chart->ID );
+
 		$chart = apply_filters( 'visualizer_schedule_refresh_chart', $chart, $chart->ID, false );
 
 		// Get and update settings.

classes/Visualizer/Plugin.php

@@ -90,6 +90,7 @@ class Visualizer_Plugin {
 	const FILTER_HANDLE_REVISIONS = 'visualizer-handle-revisions';
 	const FILTER_GET_CHART_DATA_AS = 'visualizer-get-chart-data-as';
 	const FILTER_HANDLE_CACHE_EXPIRATION_TIME = 'visualizer-handle-expiration-time';
+	const FILTER_CHART_TITLE = 'the_title';
 
 	const CF_DB_SCHEDULE = 'visualizer-db-schedule';
 	const CF_DB_QUERY = 'visualizer-db-query';

classes/Visualizer/Render/Sidebar.php

@@ -468,7 +468,7 @@ protected function _renderFormatField( $index = 0 ) {
 					esc_html__( 'Date Format', 'visualizer' ),
 					'series[' . $index . '][format]',
 					isset( $this->series[ $index ]['format'] ) ? $this->series[ $index ]['format'] : '',
-					sprintf( esc_html__( 'Enter custom format pattern to apply to this series value, similar to the %1$sICU date and time format%2$s.', 'visualizer' ), '<a href="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax" target="_blank">', '</a>' ),
+					sprintf( esc_html__( 'Enter custom format pattern to apply to this series value, similar to the %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>' ),
 					'eeee, dd LLLL yyyy'
 				);
 				break;

classes/Visualizer/Render/Sidebar/Graph.php

@@ -242,7 +242,7 @@ protected function _renderHorizontalAxisSettings() {
 				esc_html__( 'Specify 0 to disable the minor gridlines.', 'visualizer' ),
 				0,
 				'number',
-				array( 'min' => 0, 'max' => 1, 'step' => 1 )
+				array( 'min' => 0, 'step' => 1 )
 			);
 
 			self::_renderColorPickerItem(
@@ -358,7 +358,7 @@ protected function _renderVerticalAxisSettings() {
 				esc_html__( 'Specify 0 to disable the minor gridlines.', 'visualizer' ),
 				0,
 				'number',
-				array( 'min' => 0, 'max' => 1, 'step' => 1 )
+				array( 'min' => 0, 'step' => 1 )
 			);
 
 			self::_renderColorPickerItem(
@@ -481,7 +481,7 @@ protected function _renderHorizontalAxisFormatField() {
 				),
 				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="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax" target="_blank">',
+					'<a href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax" target="_blank">',
 					'</a>'
 				)
 			)
@@ -510,7 +510,7 @@ protected function _renderVerticalAxisFormatField() {
 				),
 				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="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax" target="_blank">',
+					'<a href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax" target="_blank">',
 					'</a>'
 				)
 			)

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

@@ -205,7 +205,7 @@ protected function _renderHorizontalAxisGeneralSettings() {
 					),
 					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="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax" target="_blank">',
+						'<a href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax" target="_blank">',
 						'</a>'
 					)
 				)
@@ -307,7 +307,7 @@ protected function _renderVerticalAxisGeneralSettings() {
 					),
 					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="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax" target="_blank">',
+						'<a href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax" target="_blank">',
 						'</a>'
 					)
 				)

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

@@ -72,7 +72,7 @@ protected function _renderPieSettings() {
 						),
 						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="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax" target="_blank">',
+							'<a href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax" target="_blank">',
 							'</a>'
 						)
 					)

js/render-chartjs.js

@@ -65,7 +65,7 @@
         for (i = 0; i < data.length; i++) {
 			row = [];
 			for (j = 0; j < series.length; j++) {
-				if (series[j].type === 'date' || series[j].type === 'datetime') {                  
+				if (series[j].type === 'date' || series[j].type === 'datetime') {
 					date = new Date(data[i][j]);
 					data[i][j] = null;
 					if (Object.prototype.toString.call(date) === "[object Date]") {
@@ -349,19 +349,22 @@
         // format the axes labels.
         if(typeof settings[axis + '_format'] !== 'undefined' && settings[axis + '_format'] !== ''){
             var format = settings[axis + '_format'];
-            switch(axis){
-                case 'xAxes':
-                    settings.scales.x.ticks.callback = function(value, index, values){
-                        return format_datum(value, format);
-                    };
-                    break;
-                case 'yAxes':
-                    settings.scales.y.ticks.callback = function(value, index, values){
-                        return format_datum(value, format);
-                    };
-                    break;
-            }
-            delete settings[axis + '_format'];
+            var isDateFormat = moment( moment().format( format ),format, true ).isValid();
+            if ( ! isDateFormat ) {
+	            switch(axis){
+	                case 'xAxes':
+	                    settings.scales.x.ticks.callback = function(value, index, values){
+	                        return format_datum(value, format);
+	                    };
+	                    break;
+	                case 'yAxes':
+	                    settings.scales.y.ticks.callback = function(value, index, values){
+	                        return format_datum(value, format);
+	                    };
+	                    break;
+	            }
+	            delete settings[axis + '_format'];
+	        }
         }
         delete settings[axis];
     }
@@ -445,6 +448,11 @@
     function format_data(datum, j, settings, series){
         j = j - 1;
         var format = typeof settings.series !== 'undefined' && typeof settings.series[j] !== 'undefined' ? settings.series[j].format : '';
+        if ( '' === format && typeof settings.yAxes_format !== 'undefined' ) {
+        	format = settings.yAxes_format;
+        } else if ( '' === format && typeof settings.xAxes_format !== 'undefined' ) {
+        	format = settings.xAxes_format;
+        }
         return format_datum(datum, format, series[j + 1].type);
     }