release: fixes

### Bug Fixes
- Fix Google chart rendering condition for Classic Plugin
- Changes the speed and position of the loading bar

### Improvements
- Add a Live Preview button for the plugin page on wordpress.org
- Added NPS survey

CONTRIBUTING.md

@@ -7,10 +7,118 @@ How to release a new version:
 - Clone the master branch
 - Do your changes
 - Send a PR to master and merge it using the following subject message
-    - `release: <release short description>` - for patch release
-    - `release(minor): <release short description>` - for minor release
-    - `release(major): <release short description>` - for major release
-      The release notes will inherit the body of the commit message which triggered the release. For more details check the [simple-preset](https://github.com/Codeinwp/conventional-changelog-simple-preset) that we use.
+  - `release: <release short description>` - for patch release
+  - `release(minor): <release short description>` - for minor release
+  - `release(major): <release short description>` - for major release
+    The release notes will inherit the body of the commit message which triggered the release. For more details check the [simple-preset](https://github.com/Codeinwp/conventional-changelog-simple-preset) that we use.
+
+## Architecture
+
+### Introduction
+
+The two main features are:
+
+- data importing
+- chart rendering
+
+Those two options are present in the plugin dashboard and as Gutenberg blocks.
+
+All the charts are saved as custom post type (`post_type=visualizer`), and the data is saved as post meta (with the prefix `visualizer-`). (Check plugin settings in `classes/Visualizer/Plugin.php`)
+
+The charts can be embedded in page via shortcode or Gutenberg blocks.
+
+### Data Importing
+
+For data importing, the most basic usage is using a CSV or JSON file. The source can be an uploaded file or a URL. The data is then parsed and stored in a format that can be used by the chart rendering feature.
+
+For parsing the CSV and JSON files, we use built-in PHP functions.
+
+> [!NOTE]
+> The `samples` folder contains some sample data files that can be used for testing.
+
+Advanced data importing features include data from:
+
+- a database using a query;
+- post meta values withing a desired `post_type`;
+- WooCommerce Report API;
+- from other charts;
+- manually inputted data with the build-in editor.
+
+Related code is in `classes/Visualizer/Source`. Pro Features like database import are in `visualizer-pro` plugin on `inc/addon.php`.
+The rendering for Import dashboard is done in `classes/Visualizer/Render/Layout.php`; for Gutenberg Blocks check `classes/Visualizer/Gutenberg/src/Components/Import`.
+
+### Chart Rendering
+
+The chart rendering is done with the help of the [Chart.js](https://www.chartjs.org/) library. The plugin uses the `chartjs` library to render the charts.
+
+The workflow for rendering a chart is:
+
+- We add markup for the chart in the page; ( `[visualizer id="5295" lazy="no" class=""]` can be rendered via shortcode or Gutenberg block with function `gutenberg_block_callback` in `Block.php`);
+- We load the data into the global object `window.visualizer`. (Beside the object, and endpoint is also created for fetching the data, available with `rest_url` property);
+- Using js (with `render-facade.js`), we search the markup in the page, and using the stored ID, we pull the data from the global object and initiate the chart rendering.
+
+Check the class `Visualizer_Module_Frontend` to see all the hooks and filters that are used to render the charts.
+
+### Data handling
+
+While the data importing and rendering are the main selling points, the most of work is done in the data handling which includes interface rendering, storing, and fetching the data.
+
+The Charts menu settings are available in `Chart Library` page in the admin dashboard, but also in the block `Inspector` as part of the Gutenberg block. The first is done via PHP and jQuery, and the second is done via React. Any design changes should be done in both places.
+
+Same thing for chart library visualization, it can be either from admin dashboard or from Gutenberg block.
+
+> [!NOTE]
+> The plugin tries to offer seamless experience for both classic and Gutenberg editor. But the bugs resulted might be different, especially in the Gutenberg editor where changes are happening frequently.
+
+> [!NOTE]
+> Unlike the jQeury, the Gutenberg block require a build step, you will need to install all the NPM dependencies and run `npm run dev` or `npm run build` to see the changes.
+
+### Setup Wizard
+
+The `Setup Wizard` is an onboarding process that helps the user to set up its first chart. When the plugin is installed for the first time, the user is redirected to the wizard.
+
+The steps includes:
+
+1. Choosing the chart type;
+2. Importing the sample data;
+3. Asking the user if he wants a draft page to show the chart;
+4. Promotion (optional);
+5. Email subscription;
+6. Redirect to draft page if the user marked the option at step 3. Otherwise, redirect to the plugin dashboard.
+
+The page rendering is done using the `setup-wizard.php` file, and the server logic is in the `Visualizer_Module_Wizard` class. A jQuery script (`setup-wizard`) is used to handle the interactions.
+
+> [!NOTE]
+> The usual process include showing the promotion and email collection form. Those are hidden when the `preview` query parameter is present in the URL. The Preview is used as demo presentation for the `Live Preview` feature of the WordPress store.
+
+### Quirks
+
+#### Number Formatting
+
+The workflow for adding a chart with number formatting is:
+
+1. Select the chart;
+2. Add the data without any other specific sign (`$`, `%`, `.`, etc.) -- `2.5` will be added as `25`;
+3. Generate the chart;
+4. Add number formatting (`#.#` for `2.5`).
+
+For displaying data mentioning a percentage (%), amount, or any other specific signs ($, €, etc.); you need to specify the correct number formatting.
+
+Percentage:
+
+1. When manually inputting the data, if you want to display 80%, you need to add it as `0.8`.
+2. Then you go trough the number formatting box and input `#%`.
+
+Amounts:
+
+1. For inputting amounts like `2,345`, you need to input it as `2345`.
+2. Then you go to number formatting and input `#,###`.
+3. Same thing for `2.5`, you need add the format as `#.#`.
+
+For specific signs:
+
+1. For displaying a sign like `$` (like `$2.345`), you need to follow the same steps as for the amount.
+2. Except the number formatting will be `$#,###`.
 
 # CONTRIBUTING GUIDELINES
 + [Setup Guide](#setup-guide)

assets/blueprints/blueprint.json

@@ -0,0 +1,33 @@
+{
+    "$schema": "https://playground.wordpress.net/blueprint-schema.json",
+	"_comment1": "Set the Wizard Setup page as landing page with preview environment (which disable distractions)",
+    "landingPage": "/wp-admin/admin.php?page=visualizer-setup-wizard&env=preview",
+    "_comment2": "Preferred WordPress instance specifications",
+    "preferredVersions": {
+        "php": "8.0",
+        "wp": "latest"
+    },
+    "features": {
+        "_comment3.1": "Allow networking for internet access",
+        "networking": true
+    },
+    "steps": [
+        {
+            "_comment4.1": "Login to the WordPress instance",
+            "step": "login",
+            "username": "admin",
+            "password": "password"
+        },
+        {
+            "_comment4.2": "Install the Visualizer plugin",
+            "step": "installPlugin",
+            "pluginZipFile": {
+                "resource": "wordpress.org/plugins",
+                "slug": "visualizer"
+            },
+            "options": {
+                "activate": true
+            }
+        }
+    ]
+}

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

@@ -7,7 +7,7 @@ import DataTable from './DataTable.js';
 
 import merge from 'merge';
 
-import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
+import { compact, formatDate, isValidJSON, formatData, googleChartPackages } from '../utils.js';
 
 /**
  * WordPress dependencies
@@ -108,6 +108,7 @@ class ChartRender extends Component {
 								}
 								height="500px"
                                 formatters={ formatData( data ) }
+								chartPackages={ googleChartPackages }
 							/>
                         ) : (
 							<Chart
@@ -122,6 +123,7 @@ class ChartRender extends Component {
 								}
 								height="500px"
                                 formatters={ formatData( data ) }
+								chartPackages={ googleChartPackages }
 							/>
 						) ) }
 

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

@@ -23,7 +23,7 @@ import PanelButton from './PanelButton.js';
 
 import merge from 'merge';
 
-import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
+import { compact, formatDate, isValidJSON, formatData, googleChartPackages } from '../utils.js';
 
 /**
  * WordPress dependencies
@@ -172,6 +172,7 @@ class ChartSelect extends Component {
 								}
 								height="500px"
                                 formatters={ formatData( data ) }
+								chartPackages={ googleChartPackages }
 							/>
                         ) : (
 							<Chart
@@ -186,6 +187,7 @@ class ChartSelect extends Component {
 								}
 								height="500px"
                                 formatters={ formatData( data ) }
+								chartPackages={ googleChartPackages }
 							/>
 						)
 					) }

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

@@ -5,7 +5,7 @@ import { Chart } from 'react-google-charts';
 
 import DataTable from './DataTable.js';
 
-import { formatDate, filterCharts, formatData } from '../utils.js';
+import { formatDate, filterCharts, formatData, googleChartPackages } from '../utils.js';
 
 /**
  * WordPress dependencies
@@ -156,6 +156,7 @@ class Charts extends Component {
 														columns={ data['visualizer-series'] }
 														options={ filterCharts( data['visualizer-settings']) }
                                                         formatters={ formatData( data ) }
+														chartPackages={ googleChartPackages }
 													/>
 												) : (
 													<Chart
@@ -165,6 +166,7 @@ class Charts extends Component {
 														columns={ data['visualizer-series'] }
 														options={ filterCharts( data['visualizer-settings']) }
                                                         formatters={ formatData( data ) }
+														chartPackages={ googleChartPackages }
 													/>
 												) ) }
 

classes/Visualizer/Gutenberg/src/utils.js

@@ -189,3 +189,6 @@ export const getColorCode = ( color ) => {
 	}
 	return color;
 };
+
+// Google Chart Packages
+export const googleChartPackages = [ 'corechart', 'geochart', 'gauge', 'table', 'timeline', 'controls' ];

classes/Visualizer/Module/Admin.php

@@ -671,14 +671,14 @@ public function registerAdminMenu() {
 			__( 'Chart Library', 'visualizer' ),
 			__( 'Chart Library', 'visualizer' ),
 			'edit_posts',
-			admin_url( 'admin.php?page=' . Visualizer_Plugin::NAME )
+			'admin.php?page=' . Visualizer_Plugin::NAME
 		);
 		add_submenu_page(
 			Visualizer_Plugin::NAME,
 			__( 'Add New Chart', 'visualizer' ),
 			__( 'Add New Chart', 'visualizer' ),
 			'edit_posts',
-			admin_url( 'admin.php?page=' . Visualizer_Plugin::NAME . '&vaction=addnew' )
+			'admin.php?page=' . Visualizer_Plugin::NAME . '&vaction=addnew'
 		);
 		add_submenu_page(
 			Visualizer_Plugin::NAME,
@@ -900,6 +900,7 @@ private function getQuery() {
 	 */
 	public function renderSupportPage() {
 		wp_enqueue_style( 'visualizer-upsell', VISUALIZER_ABSURL . 'css/upsell.css', array(), Visualizer_Plugin::VERSION );
+		$this->load_survey();
 		include_once VISUALIZER_ABSPATH . '/templates/support.php';
 	}
 
@@ -1053,6 +1054,9 @@ public function renderLibraryPage() {
 				'type'    => 'array',
 			)
 		);
+
+		$this->load_survey();
+
 		$render->render();
 	}
 
@@ -1182,4 +1186,75 @@ public static function checkChartStatus( $type ) {
 		}
 		return false;
 	}
+
+	/**
+	 * Get the survey metadata.
+	 *
+	 * @return array The survey metadata.
+	 */
+	private function get_survey_metadata() {
+		$install_date     = get_option( 'visualizer_install', false );
+		$install_category = 0;
+
+		if ( false !== $install_date ) {
+			$days_since_install = round( ( time() - $install_date ) / DAY_IN_SECONDS );
+
+			if ( 0 === $days_since_install || 1 === $days_since_install ) {
+				$install_category = 0;
+			} elseif ( 1 < $days_since_install && 8 > $days_since_install ) {
+				$install_category = 7;
+			} elseif ( 8 <= $days_since_install && 31 > $days_since_install ) {
+				$install_category = 30;
+			} elseif ( 30 < $days_since_install && 90 > $days_since_install ) {
+				$install_category = 90;
+			} elseif ( 90 <= $days_since_install ) {
+				$install_category = 91;
+			}
+		}
+
+		$plugin_data    = get_plugin_data( VISUALIZER_BASEFILE, false, false );
+		$plugin_version = '';
+		if ( ! empty( $plugin_data['Version'] ) ) {
+			$plugin_version = $plugin_data['Version'];
+		}
+
+		$user_id = 'visualizer_' . preg_replace( '/[^\w\d]*/', '', get_site_url() ); // Use a normalized version of the site URL as a user ID.
+
+		$license_data = get_option( 'visualizer_pro_license_data', false );
+		if ( false !== $license_data ) {
+			$user_id = 'visualizer_' . $license_data->key;
+		}
+
+		return array(
+			'userId' => $user_id,
+			'attributes' => array(
+				'days_since_install' => $install_category,
+				'free_version'       => $plugin_version,
+				'pro_version'        => defined( 'VISUALIZER_PRO_VERSION' ) ? VISUALIZER_PRO_VERSION : '',
+				'license_status'     => apply_filters( 'product_visualizer_license_status', 'invalid' ),
+			),
+		);
+	}
+
+	/**
+	 * Load the survey.
+	 */
+	private function load_survey() {
+
+		if ( defined( 'TI_CYPRESS_TESTING' ) ) {
+			return;
+		}
+
+		$survey_handler = apply_filters( 'themeisle_sdk_dependency_script_handler', 'survey' );
+
+		if ( empty( $survey_handler ) ) {
+			return;
+		}
+
+		$metadata = $this->get_survey_metadata();
+
+		do_action( 'themeisle_sdk_dependency_enqueue_script', 'survey' );
+		wp_enqueue_script( 'visualizer_chart_survey', VISUALIZER_ABSURL . 'js/survey.js', array( $survey_handler ), $metadata['attributes']['free_version'], true );
+		wp_localize_script( 'visualizer_chart_survey', 'visualizerSurveyData', $metadata );
+	}
 }

classes/Visualizer/Module/Wizard.php

@@ -341,6 +341,43 @@ private function setup_wizard_import_chart() {
 							'min' => '',
 						),
 					),
+					'customcss' => array(
+						'headerRow' => array(
+							'background-color' => '',
+							'color' => '',
+							'transform' => '',
+						),
+						'tableRow' => array(
+							'background-color' => '',
+							'color' => '',
+							'transform' => '',
+						),
+						'oddTableRow' => array(
+							'background-color' => '',
+							'color' => '',
+							'transform' => '',
+						),
+						'selectedTableRow' => array(
+							'background-color' => '',
+							'color' => '',
+							'transform' => '',
+						),
+						'hoverTableRow' => array(
+							'background-color' => '',
+							'color' => '',
+							'transform' => '',
+						),
+						'headerCell' => array(
+							'background-color' => '',
+							'color' => '',
+							'transform' => '',
+						),
+						'tableCell' => array(
+							'background-color' => '',
+							'color' => '',
+							'transform' => '',
+						),
+					),
 				)
 			);
 			$wizard_data = array(