Merge pull request #495 from Codeinwp/development

Add support for ChartJS
Add alpha color picker for supported charts
Fix issue with some options of DataTable
Include DataTable charts in block editor
Fix issue with import from JSON not working with some sources
Add menu and onboarding page
Fix issue with frontend action checkboxes
Improve UX in advanced settings

Author: contactashish13

.travis.yml

@@ -1,21 +1,24 @@
 language: php
-php:
-- '7.1'
-- '7.0'
-- '5.6'
-- '5.5'
-- '5.4'
 sudo: false
+dist: trusty
 matrix:
   fast_finish: true
   include:
-  - php: '5.6'
-    install: true
-    before_script: chmod +x bin/wraith.sh
-    env: TEST_SUITE=Wraith_Visual_Regression_Testing WRAITH_FAIL=5
-    script: "./bin/wraith.sh"
-  - php: '5.3'
-    dist: precise
+    - php: 7.2
+    - php: 7.1
+    - php: 7.0
+    - php: '5.6'
+      install: true
+      before_script: chmod +x bin/wraith.sh
+      env: TEST_SUITE=Wraith_Visual_Regression_Testing WRAITH_FAIL=5
+      script: "./bin/wraith.sh"
+    - php: 5.5
+      env: WP_VERSION=5.1
+    - php: 5.4
+      env: WP_VERSION=5.1
+    - php: 5.3
+      env: WP_VERSION=5.1
+      dist: precise
   allow_failures:
     - env: TEST_SUITE=Wraith_Visual_Regression_Testing WRAITH_FAIL=5
 branches:

classes/Visualizer/Gutenberg/Block.php

@@ -79,11 +79,11 @@ public function enqueue_gutenberg_scripts() {
 
 		// Enqueue the bundled block JS file
 		wp_enqueue_script( 'handsontable', $handsontableJS );
-		wp_enqueue_script( 'visualizer-gutenberg-block', $blockPath, array( 'wp-api', 'handsontable' ), $version, true );
+		wp_enqueue_script( 'visualizer-gutenberg-block', $blockPath, array( 'wp-api', 'handsontable', 'visualizer-datatables', 'moment' ), $version, true );
 
 		$type = 'community';
 
-		if ( VISUALIZER_PRO ) {
+		if ( Visualizer_Module::is_pro() ) {
 			$type = 'pro';
 			if ( apply_filters( 'visualizer_is_business', false ) ) {
 				$type = 'developer';
@@ -94,12 +94,14 @@ public function enqueue_gutenberg_scripts() {
 			'isPro'     => $type,
 			'proTeaser' => Visualizer_Plugin::PRO_TEASER_URL,
 			'absurl'    => VISUALIZER_ABSURL,
+			'charts'    => Visualizer_Module_Admin::_getChartTypesLocalized(),
+			'adminPage' => menu_page_url( 'visualizer', false ),
 		);
 		wp_localize_script( 'visualizer-gutenberg-block', 'visualizerLocalize', $translation_array );
 
 		// Enqueue frontend and editor block styles
 		wp_enqueue_style( 'handsontable', $handsontableCSS );
-		wp_enqueue_style( 'visualizer-gutenberg-block', $stylePath, '', $version );
+		wp_enqueue_style( 'visualizer-gutenberg-block', $stylePath, array( 'visualizer-datatables' ), $version );
 	}
 	/**
 	 * Hook server side rendering into render callback
@@ -194,6 +196,8 @@ public function get_visualizer_data( $post ) {
 
 		$data['visualizer-chart-type'] = get_post_meta( $post_id, Visualizer_Plugin::CF_CHART_TYPE, true );
 
+		$data['visualizer-chart-library'] = get_post_meta( $post_id, Visualizer_Plugin::CF_CHART_LIBRARY, true );
+
 		$data['visualizer-source'] = get_post_meta( $post_id, Visualizer_Plugin::CF_SOURCE, true );
 
 		$data['visualizer-default-data'] = get_post_meta( $post_id, Visualizer_Plugin::CF_DEFAULT_DATA, true );
@@ -219,7 +223,7 @@ public function get_visualizer_data( $post ) {
 			$data['visualizer-chart-schedule'] = $schedule;
 		}
 
-		if ( VISUALIZER_PRO ) {
+		if ( Visualizer_Module::is_pro() ) {
 			$permissions = get_post_meta( $post_id, Visualizer_PRO::CF_PERMISSIONS, true );
 
 			if ( ! empty( $permissions ) ) {
@@ -250,7 +254,7 @@ public function update_chart_data( $data ) {
 				apply_filters( 'visualizer_pro_remove_schedule', $data['id'] );
 			}
 
-			if ( VISUALIZER_PRO ) {
+			if ( Visualizer_Module::is_pro() ) {
 				update_post_meta( $data['id'], Visualizer_PRO::CF_PERMISSIONS, $data['visualizer-permissions'] );
 			}
 

classes/Visualizer/Gutenberg/build/block.css

@@ -33,6 +33,7 @@
 		"eslint-config-wordpress": "^2.0.0",
 		"eslint-loader": "^2.1.1",
 		"eslint-plugin-react": "^7.11.1",
+		"file-loader": "^4.0.0",
 		"mini-css-extract-plugin": "^0.4.4",
 		"node-sass": "^4.10.0",
 		"postcss-loader": "^3.0.0",

classes/Visualizer/Gutenberg/build/block.js

@@ -3,6 +3,8 @@
  */
 import { Chart } from 'react-google-charts';
 
+import DataTable from './DataTable.js';
+
 import merge from 'merge';
 
 import { compact, formatDate, isValidJSON } from '../utils.js';
@@ -34,13 +36,16 @@ class ChartRender extends Component {
 	}
 
 	render() {
-
 		let chart;
 
 		let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
 
-		if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
-			chart = startCase( this.props.chart['visualizer-chart-type']);
+		if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
+			if ( 'dataTable' === data['visualizer-chart-type']) {
+				chart = data['visualizer-chart-type'];
+			} else {
+				chart = startCase( this.props.chart['visualizer-chart-type']);
+			}
 		} else {
 			chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
 		}
@@ -66,17 +71,26 @@ class ChartRender extends Component {
 							</Toolbar>
 						</BlockControls>
 
-						<Chart
-							chartType={ chart }
-							rows={ data['visualizer-data'] }
-							columns={ data['visualizer-series'] }
-							options={
-								isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
-									merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
-									compact( this.props.chart['visualizer-settings'])
-							}
-							height="500px"
-						/>
+						{ ( 'dataTable' === chart ) ? (
+							<DataTable
+								id={ this.props.id }
+								rows={ data['visualizer-data'] }
+								columns={ data['visualizer-series'] }
+								options={ data['visualizer-settings'] }
+							/>
+						) : (
+							<Chart
+								chartType={ chart }
+								rows={ data['visualizer-data'] }
+								columns={ data['visualizer-series'] }
+								options={
+									isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
+										merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
+										compact( this.props.chart['visualizer-settings'])
+								}
+								height="500px"
+							/>
+						) }
 
 					</Fragment>
 				}