Added DataTable

Added proper integration for DataTable.

Author: HardeepAsrani

classes/Visualizer/Gutenberg/Block.php

@@ -94,6 +94,7 @@ public function enqueue_gutenberg_scripts() {
 			'isPro'     => $type,
 			'proTeaser' => Visualizer_Plugin::PRO_TEASER_URL,
 			'absurl'    => VISUALIZER_ABSURL,
+			'charts'	=> Visualizer_Module_Admin::_getChartTypesLocalized()
 		);
 		wp_localize_script( 'visualizer-gutenberg-block', 'visualizerLocalize', $translation_array );
 

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

@@ -145,7 +145,7 @@ class Charts extends Component {
 									}) }
 								</div>
 
-								{ ! chartsLoaded && (
+								{ ! chartsLoaded && 5 < charts.length && (
 									<Button
 										isPrimary
 										isLarge

classes/Visualizer/Gutenberg/build/chart_types_june2019_g.png

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+const { startCase } = lodash;
+
+const { __ } = wp.i18n;
+
+const { apiFetch } = wp;
+
+const {
+	Component,
+	Fragment
+} = wp.element;
+
+const {
+	Button,
+	Dashicon,
+	Placeholder,
+	Spinner
+} = wp.components;
+
+class CreateCharts extends Component {
+	constructor() {
+		super( ...arguments );
+	}
+
+	render() {
+
+		return (
+			<div className="visualizer-settings__charts">
+				<div className="visualizer-settings__charts-grid">
+
+					{ Object.keys( visualizerLocalize.charts ).map( i => {
+						return (
+							<div className="visualizer-settings__charts-single">
+								<div className="visualizer-settings__charts-title">
+									{ visualizerLocalize.charts[i].name }
+								</div>
+
+								<div
+									className={ classnames(
+										'visualizer-settings__create-charts',
+										`type-box-${ i }`
+									) }
+								>
+								</div>
+
+								<div
+									className="visualizer-settings__charts-controls"
+									title={ __( 'Insert Chart' ) }
+
+								>
+									<Dashicon icon="upload"></Dashicon>
+								</div>
+							</div>
+						);
+					}) }
+
+				</div>
+			</div>
+		);
+	}
+}
+
+export default CreateCharts;

classes/Visualizer/Gutenberg/build/handsontable.js

@@ -96,6 +96,10 @@ class DataTables extends Component {
 	dataRenderer( data, type, index ) {
 		const settings = this.props.options;
 
+		if ( undefined === settings.series[index]) {
+			return data;
+		}
+
 		if ( 'date' === type || 'datetime' === type || 'timeofday' === type ) {
 			if ( settings.series[index].format && settings.series[index].format.from && settings.series[index].format.to ) {
 				return $.fn.dataTable.render.moment( settings.series[index].format.from, settings.series[index].format.to );
@@ -107,23 +111,23 @@ class DataTables extends Component {
 		if ( 'num' === type ) {
 			const parts = [ '', '', '', '', '' ];
 
-			if ( '' !== typeof settings.series[index].format.thousands ) {
+			if ( settings.series[index].format.thousands ) {
 				parts[0] = settings.series[index].format.thousands;
 			}
 
-			if ( '' !== typeof settings.series[index].format.decimal ) {
+			if ( settings.series[index].format.decimal ) {
 				parts[1] = settings.series[index].format.decimal;
 			}
 
-			if ( '' !== typeof settings.series[index].format.precision ) {
+			if ( settings.series[index].format.precision ) {
 				parts[2] = settings.series[index].format.precision;
 			}
 
-			if ( '' !== typeof settings.series[index].format.prefix ) {
+			if ( settings.series[index].format.prefix ) {
 				parts[3] = settings.series[index].format.prefix;
 			}
 
-			if ( '' !== typeof settings.series[index].format.suffix ) {
+			if ( settings.series[index].format.suffix ) {
 				parts[4] = settings.series[index].format.suffix;
 			}