Skip to content

Commit 96e7780

Browse files
vytisbulkeviciusvytisbulkevicius
authored
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
2 parents 5f05f4c + 9f1cd83 commit 96e7780

File tree

15 files changed

+477
-152
lines changed

15 files changed

+477
-152
lines changed

‎CONTRIBUTING.md

Lines changed: 112 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,118 @@ How to release a new version:
77
- Clone the master branch
88
- Do your changes
99
- Send a PR to master and merge it using the following subject message
10-
- `release: <release short description>` - for patch release
11-
- `release(minor): <release short description>` - for minor release
12-
- `release(major): <release short description>` - for major release
13-
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.
10+
- `release: <release short description>` - for patch release
11+
- `release(minor): <release short description>` - for minor release
12+
- `release(major): <release short description>` - for major release
13+
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.
14+
15+
## Architecture
16+
17+
### Introduction
18+
19+
The two main features are:
20+
21+
- data importing
22+
- chart rendering
23+
24+
Those two options are present in the plugin dashboard and as Gutenberg blocks.
25+
26+
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`)
27+
28+
The charts can be embedded in page via shortcode or Gutenberg blocks.
29+
30+
### Data Importing
31+
32+
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.
33+
34+
For parsing the CSV and JSON files, we use built-in PHP functions.
35+
36+
> [!NOTE]
37+
> The `samples` folder contains some sample data files that can be used for testing.
38+
39+
Advanced data importing features include data from:
40+
41+
- a database using a query;
42+
- post meta values withing a desired `post_type`;
43+
- WooCommerce Report API;
44+
- from other charts;
45+
- manually inputted data with the build-in editor.
46+
47+
Related code is in `classes/Visualizer/Source`. Pro Features like database import are in `visualizer-pro` plugin on `inc/addon.php`.
48+
The rendering for Import dashboard is done in `classes/Visualizer/Render/Layout.php`; for Gutenberg Blocks check `classes/Visualizer/Gutenberg/src/Components/Import`.
49+
50+
### Chart Rendering
51+
52+
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.
53+
54+
The workflow for rendering a chart is:
55+
56+
- 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`);
57+
- 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);
58+
- 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.
59+
60+
Check the class `Visualizer_Module_Frontend` to see all the hooks and filters that are used to render the charts.
61+
62+
### Data handling
63+
64+
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.
65+
66+
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.
67+
68+
Same thing for chart library visualization, it can be either from admin dashboard or from Gutenberg block.
69+
70+
> [!NOTE]
71+
> 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.
72+
73+
> [!NOTE]
74+
> 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.
75+
76+
### Setup Wizard
77+
78+
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.
79+
80+
The steps includes:
81+
82+
1. Choosing the chart type;
83+
2. Importing the sample data;
84+
3. Asking the user if he wants a draft page to show the chart;
85+
4. Promotion (optional);
86+
5. Email subscription;
87+
6. Redirect to draft page if the user marked the option at step 3. Otherwise, redirect to the plugin dashboard.
88+
89+
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.
90+
91+
> [!NOTE]
92+
> 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.
93+
94+
### Quirks
95+
96+
#### Number Formatting
97+
98+
The workflow for adding a chart with number formatting is:
99+
100+
1. Select the chart;
101+
2. Add the data without any other specific sign (`$`, `%`, `.`, etc.) -- `2.5` will be added as `25`;
102+
3. Generate the chart;
103+
4. Add number formatting (`#.#` for `2.5`).
104+
105+
For displaying data mentioning a percentage (%), amount, or any other specific signs ($, €, etc.); you need to specify the correct number formatting.
106+
107+
Percentage:
108+
109+
1. When manually inputting the data, if you want to display 80%, you need to add it as `0.8`.
110+
2. Then you go trough the number formatting box and input `#%`.
111+
112+
Amounts:
113+
114+
1. For inputting amounts like `2,345`, you need to input it as `2345`.
115+
2. Then you go to number formatting and input `#,###`.
116+
3. Same thing for `2.5`, you need add the format as `#.#`.
117+
118+
For specific signs:
119+
120+
1. For displaying a sign like `$` (like `$2.345`), you need to follow the same steps as for the amount.
121+
2. Except the number formatting will be `$#,###`.
14122

15123
# CONTRIBUTING GUIDELINES
16124
+ [Setup Guide](#setup-guide)

‎assets/blueprints/blueprint.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"$schema": "https://playground.wordpress.net/blueprint-schema.json",
3+
"_comment1": "Set the Wizard Setup page as landing page with preview environment (which disable distractions)",
4+
"landingPage": "/wp-admin/admin.php?page=visualizer-setup-wizard&env=preview",
5+
"_comment2": "Preferred WordPress instance specifications",
6+
"preferredVersions": {
7+
"php": "8.0",
8+
"wp": "latest"
9+
},
10+
"features": {
11+
"_comment3.1": "Allow networking for internet access",
12+
"networking": true
13+
},
14+
"steps": [
15+
{
16+
"_comment4.1": "Login to the WordPress instance",
17+
"step": "login",
18+
"username": "admin",
19+
"password": "password"
20+
},
21+
{
22+
"_comment4.2": "Install the Visualizer plugin",
23+
"step": "installPlugin",
24+
"pluginZipFile": {
25+
"resource": "wordpress.org/plugins",
26+
"slug": "visualizer"
27+
},
28+
"options": {
29+
"activate": true
30+
}
31+
}
32+
]
33+
}

‎classes/Visualizer/Gutenberg/build/block.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import DataTable from './DataTable.js';
77

88
import merge from 'merge';
99

10-
import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
10+
import { compact, formatDate, isValidJSON, formatData, googleChartPackages } from '../utils.js';
1111

1212
/**
1313
* WordPress dependencies
@@ -108,6 +108,7 @@ class ChartRender extends Component {
108108
}
109109
height="500px"
110110
formatters={ formatData( data ) }
111+
chartPackages={ googleChartPackages }
111112
/>
112113
) : (
113114
<Chart
@@ -122,6 +123,7 @@ class ChartRender extends Component {
122123
}
123124
height="500px"
124125
formatters={ formatData( data ) }
126+
chartPackages={ googleChartPackages }
125127
/>
126128
) ) }
127129

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import PanelButton from './PanelButton.js';
2323

2424
import merge from 'merge';
2525

26-
import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
26+
import { compact, formatDate, isValidJSON, formatData, googleChartPackages } from '../utils.js';
2727

2828
/**
2929
* WordPress dependencies
@@ -172,6 +172,7 @@ class ChartSelect extends Component {
172172
}
173173
height="500px"
174174
formatters={ formatData( data ) }
175+
chartPackages={ googleChartPackages }
175176
/>
176177
) : (
177178
<Chart
@@ -186,6 +187,7 @@ class ChartSelect extends Component {
186187
}
187188
height="500px"
188189
formatters={ formatData( data ) }
190+
chartPackages={ googleChartPackages }
189191
/>
190192
)
191193
) }

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Chart } from 'react-google-charts';
55

66
import DataTable from './DataTable.js';
77

8-
import { formatDate, filterCharts, formatData } from '../utils.js';
8+
import { formatDate, filterCharts, formatData, googleChartPackages } from '../utils.js';
99

1010
/**
1111
* WordPress dependencies
@@ -156,6 +156,7 @@ class Charts extends Component {
156156
columns={ data['visualizer-series'] }
157157
options={ filterCharts( data['visualizer-settings']) }
158158
formatters={ formatData( data ) }
159+
chartPackages={ googleChartPackages }
159160
/>
160161
) : (
161162
<Chart
@@ -165,6 +166,7 @@ class Charts extends Component {
165166
columns={ data['visualizer-series'] }
166167
options={ filterCharts( data['visualizer-settings']) }
167168
formatters={ formatData( data ) }
169+
chartPackages={ googleChartPackages }
168170
/>
169171
) ) }
170172

‎classes/Visualizer/Gutenberg/src/utils.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,3 +189,6 @@ export const getColorCode = ( color ) => {
189189
}
190190
return color;
191191
};
192+
193+
// Google Chart Packages
194+
export const googleChartPackages = [ 'corechart', 'geochart', 'gauge', 'table', 'timeline', 'controls' ];

‎classes/Visualizer/Module/Admin.php

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -671,14 +671,14 @@ public function registerAdminMenu() {
671671
__( 'Chart Library', 'visualizer' ),
672672
__( 'Chart Library', 'visualizer' ),
673673
'edit_posts',
674-
admin_url( 'admin.php?page=' . Visualizer_Plugin::NAME )
674+
'admin.php?page=' . Visualizer_Plugin::NAME
675675
);
676676
add_submenu_page(
677677
Visualizer_Plugin::NAME,
678678
__( 'Add New Chart', 'visualizer' ),
679679
__( 'Add New Chart', 'visualizer' ),
680680
'edit_posts',
681-
admin_url( 'admin.php?page=' . Visualizer_Plugin::NAME . '&vaction=addnew' )
681+
'admin.php?page=' . Visualizer_Plugin::NAME . '&vaction=addnew'
682682
);
683683
add_submenu_page(
684684
Visualizer_Plugin::NAME,
@@ -900,6 +900,7 @@ private function getQuery() {
900900
*/
901901
public function renderSupportPage() {
902902
wp_enqueue_style( 'visualizer-upsell', VISUALIZER_ABSURL . 'css/upsell.css', array(), Visualizer_Plugin::VERSION );
903+
$this->load_survey();
903904
include_once VISUALIZER_ABSPATH . '/templates/support.php';
904905
}
905906

@@ -1053,6 +1054,9 @@ public function renderLibraryPage() {
10531054
'type' => 'array',
10541055
)
10551056
);
1057+
1058+
$this->load_survey();
1059+
10561060
$render->render();
10571061
}
10581062

@@ -1182,4 +1186,75 @@ public static function checkChartStatus( $type ) {
11821186
}
11831187
return false;
11841188
}
1189+
1190+
/**
1191+
* Get the survey metadata.
1192+
*
1193+
* @return array The survey metadata.
1194+
*/
1195+
private function get_survey_metadata() {
1196+
$install_date = get_option( 'visualizer_install', false );
1197+
$install_category = 0;
1198+
1199+
if ( false !== $install_date ) {
1200+
$days_since_install = round( ( time() - $install_date ) / DAY_IN_SECONDS );
1201+
1202+
if ( 0 === $days_since_install || 1 === $days_since_install ) {
1203+
$install_category = 0;
1204+
} elseif ( 1 < $days_since_install && 8 > $days_since_install ) {
1205+
$install_category = 7;
1206+
} elseif ( 8 <= $days_since_install && 31 > $days_since_install ) {
1207+
$install_category = 30;
1208+
} elseif ( 30 < $days_since_install && 90 > $days_since_install ) {
1209+
$install_category = 90;
1210+
} elseif ( 90 <= $days_since_install ) {
1211+
$install_category = 91;
1212+
}
1213+
}
1214+
1215+
$plugin_data = get_plugin_data( VISUALIZER_BASEFILE, false, false );
1216+
$plugin_version = '';
1217+
if ( ! empty( $plugin_data['Version'] ) ) {
1218+
$plugin_version = $plugin_data['Version'];
1219+
}
1220+
1221+
$user_id = 'visualizer_' . preg_replace( '/[^\w\d]*/', '', get_site_url() ); // Use a normalized version of the site URL as a user ID.
1222+
1223+
$license_data = get_option( 'visualizer_pro_license_data', false );
1224+
if ( false !== $license_data ) {
1225+
$user_id = 'visualizer_' . $license_data->key;
1226+
}
1227+
1228+
return array(
1229+
'userId' => $user_id,
1230+
'attributes' => array(
1231+
'days_since_install' => $install_category,
1232+
'free_version' => $plugin_version,
1233+
'pro_version' => defined( 'VISUALIZER_PRO_VERSION' ) ? VISUALIZER_PRO_VERSION : '',
1234+
'license_status' => apply_filters( 'product_visualizer_license_status', 'invalid' ),
1235+
),
1236+
);
1237+
}
1238+
1239+
/**
1240+
* Load the survey.
1241+
*/
1242+
private function load_survey() {
1243+
1244+
if ( defined( 'TI_CYPRESS_TESTING' ) ) {
1245+
return;
1246+
}
1247+
1248+
$survey_handler = apply_filters( 'themeisle_sdk_dependency_script_handler', 'survey' );
1249+
1250+
if ( empty( $survey_handler ) ) {
1251+
return;
1252+
}
1253+
1254+
$metadata = $this->get_survey_metadata();
1255+
1256+
do_action( 'themeisle_sdk_dependency_enqueue_script', 'survey' );
1257+
wp_enqueue_script( 'visualizer_chart_survey', VISUALIZER_ABSURL . 'js/survey.js', array( $survey_handler ), $metadata['attributes']['free_version'], true );
1258+
wp_localize_script( 'visualizer_chart_survey', 'visualizerSurveyData', $metadata );
1259+
}
11851260
}

‎classes/Visualizer/Module/Wizard.php

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -341,6 +341,43 @@ private function setup_wizard_import_chart() {
341341
'min' => '',
342342
),
343343
),
344+
'customcss' => array(
345+
'headerRow' => array(
346+
'background-color' => '',
347+
'color' => '',
348+
'transform' => '',
349+
),
350+
'tableRow' => array(
351+
'background-color' => '',
352+
'color' => '',
353+
'transform' => '',
354+
),
355+
'oddTableRow' => array(
356+
'background-color' => '',
357+
'color' => '',
358+
'transform' => '',
359+
),
360+
'selectedTableRow' => array(
361+
'background-color' => '',
362+
'color' => '',
363+
'transform' => '',
364+
),
365+
'hoverTableRow' => array(
366+
'background-color' => '',
367+
'color' => '',
368+
'transform' => '',
369+
),
370+
'headerCell' => array(
371+
'background-color' => '',
372+
'color' => '',
373+
'transform' => '',
374+
),
375+
'tableCell' => array(
376+
'background-color' => '',
377+
'color' => '',
378+
'transform' => '',
379+
),
380+
),
344381
)
345382
);
346383
$wizard_data = array(

0 commit comments

Comments
 (0)