Skip to content

Commit 1aa3aed

Browse files
vytisbulkeviciusvytisbulkevicius
authored
release(minor): fixes
#### Enhancements - Added a manual data edit feature to the free version of the plugin - Improved the flow of chart creation - Added a chart information panel: backend chart title & quick shortcode access - Line and Pie charts from the ChartJS library are now available for free users, along with library selection and relative images - Improved wording in onboarding - Improved workflow for creating charts via the Visualizer Gutenberg block - Moved chart library selection to the top of the page and showing charts from the available library only - Unified chart edition (removed duplicated chart settings in block editor) - Added optional feature usage data - Enhanced security - Improved the UI of the database query option (visible database prefix, sample query, autocompleting table names) [PRO]
2 parents 0c98dc7 + 769cda9 commit 1aa3aed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2357
-917
lines changed

‎classes/Visualizer/Gutenberg/Block.php‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,15 @@ public function enqueue_gutenberg_scripts() {
109109
'absurl' => VISUALIZER_ABSURL,
110110
'charts' => Visualizer_Module_Admin::_getChartTypesLocalized(),
111111
'adminPage' => menu_page_url( 'visualizer', false ),
112+
'createChart' => add_query_arg( array( 'action' => 'visualizer-create-chart', 'library' => 'yes', 'type' => '', 'chart-library' => '', 'tab' => 'visualizer' ), admin_url( 'admin-ajax.php' ) ),
112113
'sqlTable' => $table_col_mapping,
113114
'chartsPerPage' => defined( 'TI_CYPRESS_TESTING' ) ? 20 : 6,
114115
'proFeaturesLocked' => Visualizer_Module_Admin::proFeaturesLocked(),
115116
'isFullSiteEditor' => 'site-editor.php' === $pagenow,
117+
'legacyBlockEdit' => apply_filters( 'visualizer_legacy_block_edit', false ),
118+
/* translators: %1$s: opening tag, %2$s: closing tag */
119+
'blockEditDoc' => sprintf( __( 'The editor for managing chart settings has been removed from the block editor. You can find more information in this %1$sdocumentation%2$s', 'visualizer' ), '<a href="https://docs.themeisle.com/article/1705-how-can-i-display-a-chart#using-visualizer-block" target="_blank">', '</a>' ),
120+
'chartEditUrl' => admin_url( 'admin-ajax.php' ),
116121
);
117122
wp_localize_script( 'visualizer-gutenberg-block', 'visualizerLocalize', $translation_array );
118123

@@ -131,7 +136,7 @@ public function enqueue_gutenberg_scripts() {
131136
'dragDrop' => false,
132137
'matchBrackets' => true,
133138
'autoCloseBrackets' => true,
134-
'extraKeys' => array( 'Ctrl-Space' => 'autocomplete' ),
139+
'extraKeys' => array( 'Shift-Space' => 'autocomplete' ),
135140
'hintOptions' => array( 'tables' => $table_col_mapping ),
136141
),
137142
)

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

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

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

Lines changed: 132 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,72 @@ const { startCase } = lodash;
3232

3333
const { __ } = wp.i18n;
3434

35+
const { apiFetch } = wp;
36+
37+
const {
38+
Button
39+
} = wp.components;
40+
3541
const {
3642
Component,
3743
Fragment
3844
} = wp.element;
3945

4046
const { InspectorControls } = wp.blockEditor || wp.editor;
4147

48+
let visualizerMedia, visualizerMediaView;
49+
visualizerMedia = visualizer.media = {};
50+
visualizerMediaView = visualizerMedia.view = {};
51+
52+
visualizerMediaView.Chart = wp.media.view.MediaFrame.extend(
53+
{
54+
initialize: function() {
55+
const self = this;
56+
57+
_.defaults(
58+
self.options, {
59+
action: '',
60+
id: 'visualizer',
61+
state: 'iframe:visualizer',
62+
title: 'Visualizer'
63+
}
64+
);
65+
66+
wp.media.view.MediaFrame.prototype.initialize.apply( self, arguments );
67+
68+
wp.media.view.settings.tab = 'Visualizer';
69+
wp.media.view.settings.tabUrl = self.options.action;
70+
self.createIframeStates();
71+
},
72+
73+
createIframeStates: function( passedOptions ) {
74+
const self = this;
75+
wp.media.view.MediaFrame.prototype.createIframeStates.apply( self, arguments );
76+
77+
self.state( self.options.state ).set(
78+
_.defaults(
79+
{
80+
tab: self.options.id,
81+
src: self.options.action + '&tab=' + self.options.id,
82+
title: self.options.title,
83+
content: 'iframe',
84+
menu: 'default'
85+
}, passedOptions
86+
)
87+
);
88+
89+
},
90+
91+
open: function() {
92+
try {
93+
wp.media.view.MediaFrame.prototype.open.apply( this, arguments );
94+
} catch ( error ) {
95+
console.error( error );
96+
}
97+
}
98+
}
99+
);
100+
42101
class ChartSelect extends Component {
43102
constructor() {
44103
super( ...arguments );
@@ -56,6 +115,7 @@ class ChartSelect extends Component {
56115
}
57116

58117
render() {
118+
const { legacyBlockEdit, blockEditDoc } = window.visualizerLocalize;
59119
let chartVersion = 'undefined' !== typeof google.visualization ? google.visualization.Version : 'current';
60120

61121
let chart, footer;
@@ -80,40 +140,81 @@ class ChartSelect extends Component {
80140
footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
81141
}
82142

143+
const openEditChart = ( chartId ) => {
144+
const baseURL = ( window.visualizerLocalize.chartEditUrl ) ? window.visualizerLocalize.chartEditUrl : '';
145+
let view = new visualizerMediaView.Chart(
146+
{
147+
action: `${baseURL}?action=visualizer-edit-chart&library=yes&chart=` + chartId
148+
}
149+
);
150+
const updateChartState = async() => {
151+
await this.setState({
152+
isLoading: 'getChart'
153+
});
154+
155+
let result = await apiFetch({ path: `wp/v2/visualizer/${chartId}` });
156+
await this.props.editSettings( result['chart_data']['visualizer-settings']);
157+
await this.props.getChartData( chartId );
158+
159+
await this.setState({ route: 'home', chart: result['chart_data'], isModified: true, isLoading: true });
160+
};
161+
// eslint-disable-next-line camelcase
162+
window.send_to_editor = function() {
163+
updateChartState().then( () => {
164+
view.close();
165+
});
166+
};
167+
168+
view.open();
169+
};
170+
83171
return (
84172
<Fragment>
85173
{ 'home' === this.state.route &&
86174
<InspectorControls>
175+
{ ! legacyBlockEdit && (
176+
<div className="viz-edit-chart-new">
177+
<Button
178+
isPrimary={true}
179+
onClick={ () => {
180+
openEditChart( this.props.id );
181+
} }> Edit Chart </ Button>
182+
<p dangerouslySetInnerHTML={{__html: blockEditDoc}}></p>
183+
</div>
184+
) }
185+
186+
{ legacyBlockEdit && (
187+
<>
188+
189+
<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
87190

88191
<FileImport
89192
chart={ this.props.chart }
90193
readUploadedFile={ this.props.readUploadedFile }
91194
/>
92195

93-
<RemoteImport
94-
id={ this.props.id }
95-
chart={ this.props.chart }
96-
editURL={ this.props.editURL }
97-
isLoading={ this.props.isLoading }
98-
uploadData={ this.props.uploadData }
99-
editSchedule={ this.props.editSchedule }
100-
editJSONSchedule={ this.props.editJSONSchedule }
101-
editJSONURL={ this.props.editJSONURL }
102-
editJSONHeaders={ this.props.editJSONHeaders }
103-
editJSONRoot={ this.props.editJSONRoot }
104-
editJSONPaging={ this.props.editJSONPaging }
105-
JSONImportData={ this.props.JSONImportData }
106-
/>
107-
108-
<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
109-
110-
<DataImport
111-
chart={ this.props.chart }
112-
editSchedule={ this.props.editDatabaseSchedule }
113-
databaseImportData={ this.props.databaseImportData }
114-
/>
115-
116-
<ManualData chart={ this.props.chart } editChartData={ this.props.editChartData } />
196+
<RemoteImport
197+
id={ this.props.id }
198+
chart={ this.props.chart }
199+
editURL={ this.props.editURL }
200+
isLoading={ this.props.isLoading }
201+
uploadData={ this.props.uploadData }
202+
editSchedule={ this.props.editSchedule }
203+
editJSONSchedule={ this.props.editJSONSchedule }
204+
editJSONURL={ this.props.editJSONURL }
205+
editJSONHeaders={ this.props.editJSONHeaders }
206+
editJSONRoot={ this.props.editJSONRoot }
207+
editJSONPaging={ this.props.editJSONPaging }
208+
JSONImportData={ this.props.JSONImportData }
209+
/>
210+
211+
<ChartImport getChartData={ this.props.getChartData } isLoading={ this.props.isLoading } />
212+
213+
<DataImport
214+
chart={ this.props.chart }
215+
editSchedule={ this.props.editDatabaseSchedule }
216+
databaseImportData={ this.props.databaseImportData }
217+
/>
117218

118219
<PanelButton
119220
label={ __( 'Advanced Options' ) }
@@ -122,11 +223,13 @@ class ChartSelect extends Component {
122223
onClick={ () => this.setState({ route: 'showAdvanced' }) }
123224
/>
124225

125-
<PanelButton
126-
label={ __( 'Chart Permissions' ) }
127-
icon="admin-users"
128-
onClick={ () => this.setState({ route: 'showPermissions' }) }
129-
/>
226+
<PanelButton
227+
label={ __( 'Chart Permissions' ) }
228+
icon="admin-users"
229+
onClick={ () => this.setState({ route: 'showPermissions' }) }
230+
/>
231+
</>
232+
) }
130233
</InspectorControls>
131234
}
132235

‎classes/Visualizer/Gutenberg/src/Components/Import/DataImport.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ class DataImport extends Component {
6969
label={ __( 'How often do you want to check the url?' ) }
7070
value={ this.props.chart['visualizer-db-schedule'] ? this.props.chart['visualizer-db-schedule'] : 0 }
7171
options={ [
72-
{ label: __( 'Live' ), value: '0' },
72+
{ label: __( '10 minutes' ), value: '0.16' },
7373
{ label: __( 'Each hour' ), value: '1' },
7474
{ label: __( 'Each 12 hours' ), value: '12' },
7575
{ label: __( 'Each day' ), value: '24' },

‎classes/Visualizer/Gutenberg/src/Components/Import/FileImport.js‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -37,34 +37,53 @@ class FileImport extends Component {
3737

3838
render() {
3939
return (
40-
<PanelBody
41-
title={ __( 'Import data from file' ) }
42-
initialOpen={ false }
43-
>
40+
( 'community' !== visualizerLocalize.isPro ) ? (
41+
<PanelBody
42+
title={ __( 'Import data from file' ) }
43+
initialOpen={ false }
44+
>
45+
46+
<p>{ __( 'Select and upload your data CSV file here. The first row of the CSV file should contain the column headings. The second one should contain series type (string, number, boolean, date, datetime, timeofday).' ) }</p>
47+
<p>
48+
{ __( 'If you are unsure about how to format your data CSV then please take a look at this sample: ' ) }
49+
<ExternalLink href={ `${visualizerLocalize.absurl}samples/${this.props.chart['visualizer-chart-type']}.csv` }>
50+
{ `${this.props.chart['visualizer-chart-type']}.csv` }
51+
</ExternalLink>
52+
</p>
4453

45-
<p>{ __( 'Select and upload your data CSV file here. The first row of the CSV file should contain the column headings. The second one should contain series type (string, number, boolean, date, datetime, timeofday).' ) }</p>
46-
<p>
47-
{ __( 'If you are unsure about how to format your data CSV then please take a look at this sample: ' ) }
48-
<ExternalLink href={ `${visualizerLocalize.absurl}samples/${this.props.chart['visualizer-chart-type']}.csv` }>
49-
{ `${this.props.chart['visualizer-chart-type']}.csv` }
50-
</ExternalLink>
51-
</p>
54+
<input
55+
type="file"
56+
accept="text/csv"
57+
ref={ this.uploadInput }
58+
onChange={ this.fileUploaded }
59+
/>
5260

53-
<input
54-
type="file"
55-
accept="text/csv"
56-
ref={ this.uploadInput }
57-
onChange={ this.fileUploaded }
58-
/>
61+
<Button
62+
isPrimary
63+
onClick={ this.uploadImport }
64+
>
65+
{ this.state.uploadLabel }
66+
</Button>
5967

60-
<Button
61-
isPrimary
62-
onClick={ this.uploadImport }
68+
</PanelBody>
69+
) : (
70+
<PanelBody
71+
title={ __( 'Import data from file' ) }
72+
icon="lock"
73+
initialOpen={ false }
6374
>
64-
{ this.state.uploadLabel }
65-
</Button>
75+
<p>{ __( 'Enable this feature in PRO version!' ) }</p>
76+
77+
<Button
78+
isPrimary
79+
href={ visualizerLocalize.proTeaser }
80+
target="_blank"
81+
>
82+
{ __( 'Upgrade Now' ) }
83+
</Button>
6684

67-
</PanelBody>
85+
</PanelBody>
86+
)
6887
);
6988
}
7089
}

0 commit comments

Comments
 (0)