Merge branch 'development' of https://github.com/codeinwp/visualizer into issue-524

Author: contactashish13

.distignore

@@ -24,4 +24,5 @@ vendor/phpoffice/phpexcel/unitTests
 cypress
 docker-compose.travis.yml
 cypress.env.json.template
-cypress.json
+cypress.json
+.github

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -0,0 +1,25 @@
+---
+name: Bug report
+about: Report a bug so we can get to squashing it.
+
+---
+
+### Description:
+<!-- Describe the bug in a clear and concise way. -->
+
+### How to reproduce:
+<!-- Describe the steps needed to reproduce this. -->
+1.
+2.
+3.
+
+### Expected behaviour:
+
+### Current behaviour:
+
+### Reference:
+<!-- Screenshots and links that show the bug -->
+
+### Technical info
+* WordPress version: x.x.x
+* Plugin version: x.x.x

.github/ISSUE_TEMPLATE/Feature_request.md

@@ -0,0 +1,11 @@
+---
+name: Feature request
+about: Suggest a feature that we can implement.
+
+---
+
+### Description:
+<!-- Describe the requested feature in a clear and concise way. -->
+
+### Alternatives:
+<!-- If we don't implement this feature, what would be the best alternatives to achieve the same functionality? -->

CHANGELOG.md

@@ -1,4 +1,14 @@
 
+ ### v3.4.3 - 2020-05-04 
+ **Changes:** 
+ * [Feat] Improved chart creation UX
+* [Feat] New option to control the number of charts per page in the Charts Library
+* [Feat] New option for filtering/ordering charts in the Charts Library
+* [Feat] Support for custom codes for the boolean data type in Table charts
+* [Fix] Support for displaying apostrophes in charts
+* [Fix] Visualizer button layout in the Classic block
+* [Fix] Bulk activation of plugin aborts activation of subsequent plugins
+ 
  ### v3.4.2 - 2020-02-17 
  **Changes:** 
  * New Cypress tests for the Gutenberg block

classes/Visualizer/Gutenberg/build/block.js

@@ -18,6 +18,7 @@
 		"react": "16.4.1",
 		"react-google-charts": "^3.0.8",
 		"react-json-editor-ajrm": "^2.5.8",
+		"sprintf-js": "^1.1.2",
 		"uuid": "^3.3.3"
 	},
 	"devDependencies": {

classes/Visualizer/Gutenberg/package.json

@@ -46,19 +46,18 @@ class DataTables extends Component {
 
 	initDataTable( tableColumns, tableRow ) {
 		const settings = this.props.options;
-
 		const columns = tableColumns.map( ( i, index ) => {
 			let type = i.type;
 
 			switch ( i.type ) {
-			case 'number':
-				type = 'num';
-				break;
-			case 'date':
-			case 'datetime':
-			case 'timeofday':
-				type = 'date';
-				break;
+                case 'number':
+                    type = 'num';
+                    break;
+                case 'date':
+                case 'datetime':
+                case 'timeofday':
+                    type = 'date';
+                    break;
 			}
 
 			return {
@@ -125,7 +124,6 @@ class DataTables extends Component {
                 break;
             case 'num':
                 const parts = [ '', '', '', '', '' ];
-
                 if ( settings.series[index].format.thousands ) {
                     parts[0] = settings.series[index].format.thousands;
                 }
@@ -143,7 +141,19 @@ class DataTables extends Component {
                 }
                 renderer = jQuery.fn.dataTable.render.number( ...parts );
                 break;
-        }
+            case 'boolean':
+                jQuery.fn.dataTable.render.extra = function( data, type, row ) {
+                    if ( ( true === data || 'true' === data ) && '' !== settings.series[index].format.truthy ) {
+                        return settings.series[index].format.truthy.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );
+                    }
+                    if ( ( false === data || 'false' === data ) && '' !== settings.series[index].format.falsy ) {
+                        return settings.series[index].format.falsy.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );
+                    }
+                    return data;
+                };
+                renderer = jQuery.fn.dataTable.render.extra;
+                break;
+		}
 
 		return renderer;
 	}

classes/Visualizer/Gutenberg/src/Components/DataTable.js

@@ -45,6 +45,8 @@ class ColumnSettings extends Component {
 
 		const series = this.props.chart['visualizer-series'];
 
+		const type = this.props.chart['visualizer-chart-type'];
+
 		return (
 			<PanelBody
 				title={ __( 'Column Settings' ) }
@@ -169,6 +171,36 @@ class ColumnSettings extends Component {
 									</Fragment>
 								) }
 
+								{ ( 'boolean' === series[i].type ) && ( 'dataTable' === type ) && (
+									<Fragment>
+										<TextControl
+											label={ __( 'Truthy value' ) }
+                                            help= { __( 'Provide the HTML entity code for the value the table should display when the value of the column is true. e.g. tick mark (Code: &#10004;) instead of true' ) }
+											value={ settings.series[i].format ? settings.series[i].format.truthy : '' }
+											onChange={ e => {
+												if ( ! settings.series[i].truthy ) {
+													settings.series[i].truthy = {};
+												}
+												settings.series[i].format.truthy = e;
+												this.props.edit( settings );
+											} }
+										/>
+										<TextControl
+											label={ __( 'Falsy value' ) }
+                                            help= { __( 'Provide the HTML entity code for the value the table should display when the value of the column is false. e.g. cross mark (Code: &#10006;) instead of false' ) }
+											value={ settings.series[i].format ? settings.series[i].format.falsy : '' }
+											onChange={ e => {
+												if ( ! settings.series[i].falsy ) {
+													settings.series[i].falsy = {};
+												}
+												settings.series[i].format.falsy = e;
+												this.props.edit( settings );
+											} }
+										/>
+
+									</Fragment>
+								) }
+
 							</PanelBody>
 						);
 					}

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

@@ -31,6 +31,7 @@ class FrontendActions extends Component {
 	render() {
 
 		const settings = this.props.chart['visualizer-settings'];
+		const type = this.props.chart['visualizer-chart-type'];
 
 		return (
 			<PanelBody
@@ -111,6 +112,25 @@ class FrontendActions extends Component {
 							} }
 						/>
 
+                    { ( -1 >= [ 'dataTable', 'tabular', 'gauge', 'table' ].indexOf( type ) ) && (
+						<CheckboxControl
+							label={ __( 'Download Image' ) }
+							help={ __( 'To download the chart as an image.' ) }
+							checked={ ( 0 <= settings.actions.indexOf( 'image' ) ) }
+							onChange={ e => {
+								if ( 0 <= settings.actions.indexOf( 'image' ) ) {
+									const index = settings.actions.indexOf( 'image' );
+									if ( -1 !== index ) {
+										settings.actions.splice( index, 1 );
+									}
+								} else {
+									settings.actions.push( 'image' );
+								}
+								this.props.edit( settings );
+							} }
+						/>
+                        ) }
+
 					</Fragment>
 
 				) }

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

@@ -29,6 +29,7 @@ const {
 	ButtonGroup,
 	Dashicon,
 	Placeholder,
+	Notice,
 	Spinner
 } = wp.components;
 
@@ -78,11 +79,20 @@ class Editor extends Component {
 
 		// Fetch review again if block loaded after saving.
 		if ( this.props.attributes.id ) {
-			let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` });
-
-			this.setState({
-				chart: result['chart_data']
-			});
+			let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` }).catch( function( error ) {
+            });
+
+            if ( result ) {
+                this.setState({
+                    chart: result['chart_data']
+                });
+            } else {
+
+                // if the chart is not found.
+                this.setState({
+                    route: 'error'
+                });
+            }
 		}
 	}
 
@@ -92,6 +102,7 @@ class Editor extends Component {
 		});
 
 		let result = await apiFetch({ path: `wp/v2/visualizer/${id}` });
+        console.log( 'getChart', id, result );
 
 		this.setState({
 			route: 'chartSelect',
@@ -297,6 +308,7 @@ class Editor extends Component {
 		});
 
 		let result = await apiFetch({ path: `wp/v2/visualizer/${id}` });
+            console.log( 'getChartData', id, result );
 
 		let chart = { ...this.state.chart };
 
@@ -406,6 +418,18 @@ class Editor extends Component {
 	}
 
 	render() {
+		if ( 'error' === this.state.route ) {
+			return (
+				<Notice
+					status="error"
+					isDismissible={ false }
+				>
+                        <Dashicon icon="chart-pie" />
+                        { __( 'This chart is not available; it might have been deleted. Please delete this block and resubmit your chart.' ) }
+				</Notice>
+			);
+		}
+
 		if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
 			return (
 				<ChartRender