Skip to content

Commit c7d8f7d

Browse files
Merge branch 'development' of https://github.com/codeinwp/visualizer into issue-700
2 parents e446d3d + 00621a5 commit c7d8f7d

File tree

25 files changed

+735
-313
lines changed

25 files changed

+735
-313
lines changed

bin/wp-init.sh

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,30 @@ echo "Sleeping for $sleep_time..."
1818
sleep $sleep_time
1919

2020
# install WP
21-
docker exec $args visualizer_wordpress wp --quiet core install --url="http://$wp_host:8888/" --admin_user="wordpress" --admin_password="wordpress" --admin_email="[email protected]" --title="test" --skip-email
21+
docker exec $args visualizer_wordpress wp --allow-root core install --url="http://$wp_host:8888/" --admin_user="wordpress" --admin_password="wordpress" --admin_email="[email protected]" --title="test" --skip-email
2222

23-
# install required external plugins
23+
# update core
2424
docker exec $args visualizer_wordpress chown -R www-data:www-data /var/www/html/
25-
docker exec $args visualizer_wordpress wp plugin install classic-editor --activate
26-
27-
# so that debug.log is created
2825
docker exec $args visualizer_wordpress chmod 0777 -R /var/www/html/wp-content
26+
docker exec $args visualizer_wordpress wp --allow-root core update
27+
docker exec $args visualizer_wordpress wp --allow-root core update-db
28+
29+
# install required external plugins
30+
docker exec $args visualizer_wordpress wp plugin install classic-editor --activate
2931

3032
# install visualizer free
3133
docker exec $args visualizer_wordpress git clone https://github.com/Codeinwp/visualizer /var/www/html/wp-content/plugins/visualizer
3234

3335
# activate
34-
docker exec $args visualizer_wordpress wp --quiet plugin activate visualizer
36+
docker exec $args visualizer_wordpress wp --allow-root plugin activate visualizer
3537

3638
# set this constant so that the license is not checked
37-
docker exec $args visualizer_wordpress wp --quiet config set TI_UNIT_TESTING true --raw
39+
docker exec $args visualizer_wordpress wp --allow-root config set TI_UNIT_TESTING true --raw
3840

3941
# set this constant so that the specific hooks are loaded
40-
docker exec $args visualizer_wordpress wp --quiet config set TI_CYPRESS_TESTING true --raw
42+
docker exec $args visualizer_wordpress wp --allow-root config set TI_CYPRESS_TESTING true --raw
4143

4244
# debugging
43-
docker exec $args visualizer_wordpress wp --quiet config set WP_DEBUG true --raw
44-
docker exec $args visualizer_wordpress wp --quiet config set WP_DEBUG_LOG true --raw
45-
docker exec $args visualizer_wordpress wp --quiet config set WP_DEBUG_DISPLAY false --raw
46-
45+
docker exec $args visualizer_wordpress wp --allow-root config set WP_DEBUG true --raw
46+
docker exec $args visualizer_wordpress wp --allow-root config set WP_DEBUG_LOG true --raw
47+
docker exec $args visualizer_wordpress wp --allow-root config set WP_DEBUG_DISPLAY false --raw

classes/Visualizer/Gutenberg/build/block.js

Lines changed: 6 additions & 6 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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ class ChartSelect extends Component {
112112

113113
<PanelButton
114114
label={ __( 'Advanced Options' ) }
115+
className="visualizer-advanced-options"
115116
icon="admin-tools"
116117
onClick={ () => this.setState({ route: 'showAdvanced' }) }
117118
/>

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import RowCellSettings from './Sidebar/RowCellSettings.js';
2020
import ComboSettings from './Sidebar/ComboSettings.js';
2121
import SeriesSettings from './Sidebar/SeriesSettings.js';
2222
import SlicesSettings from './Sidebar/SlicesSettings.js';
23+
import BubbleSettings from './Sidebar/BubbleSettings.js';
2324
import ColumnSettings from './Sidebar/ColumnSettings.js';
2425
import LayoutAndChartArea from './Sidebar/LayoutAndChartArea.js';
2526
import FrontendActions from './Sidebar/FrontendActions.js';
@@ -113,10 +114,15 @@ class Sidebar extends Component {
113114
<ComboSettings chart={ this.props.chart } edit={ this.props.edit } />
114115
) }
115116

116-
{ ( -1 >= [ 'timeline', 'gauge', 'geo', 'pie', 'dataTable' ].indexOf( type ) ) && (
117+
{ ( -1 >= [ 'timeline', 'bubble', 'gauge', 'geo', 'pie', 'dataTable' ].indexOf( type ) ) && (
117118
<SeriesSettings chart={ this.props.chart } edit={ this.props.edit } />
118119
) }
119120

121+
{ ( 0 <= [ 'bubble' ].indexOf( type ) ) && (
122+
<BubbleSettings chart={ this.props.chart } edit={ this.props.edit } />
123+
) }
124+
125+
120126
{ ( 0 <= [ 'pie' ].indexOf( type ) ) && (
121127
<SlicesSettings chart={ this.props.chart } edit={ this.props.edit } />
122128
) }
Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
const { __ } = wp.i18n;
5+
6+
const { Component } = wp.element;
7+
8+
const { ColorPalette } = wp.blockEditor || wp.editor;
9+
10+
import { isChecked } from '../../utils.js';
11+
12+
const {
13+
CheckboxControl,
14+
BaseControl,
15+
PanelBody,
16+
TextControl
17+
} = wp.components;
18+
19+
class BubbleSettings extends Component {
20+
constructor() {
21+
super( ...arguments );
22+
}
23+
24+
componentDidMount() {
25+
26+
}
27+
28+
render() {
29+
30+
const settings = this.props.chart['visualizer-settings'];
31+
32+
return (
33+
<PanelBody
34+
title={ __( 'Bubble Settings' ) }
35+
initialOpen={ false }
36+
className="visualizer-advanced-panel"
37+
>
38+
39+
<TextControl
40+
label={ __( 'Opacity' ) }
41+
help={ __( 'The default opacity of the bubbles, where 0.0 is fully transparent and 1.0 is fully opaque.' ) }
42+
type="number"
43+
min="0"
44+
max="1"
45+
step="0.1"
46+
value={ settings.bubble.opacity }
47+
onChange={ e => {
48+
if ( ! settings.bubble ) {
49+
settings.bubble = {};
50+
}
51+
settings.bubble.opacity = e;
52+
this.props.edit( settings );
53+
} }
54+
/>
55+
56+
<BaseControl
57+
label={ __( 'Stroke Color' ) }
58+
>
59+
<ColorPalette
60+
value={ settings.bubble.stroke }
61+
onChange={ e => {
62+
if ( ! settings.bubble ) {
63+
settings.bubble = {};
64+
}
65+
settings.bubble.stroke = e;
66+
this.props.edit( settings );
67+
} }
68+
/>
69+
</BaseControl>
70+
71+
<CheckboxControl
72+
label={ __( 'Sort Bubbles by Size' ) }
73+
help={ __( 'If checked, sorts the bubbles by size so the smaller bubbles appear above the larger bubbles. If unchecked, bubbles are sorted according to their order in the table.' ) }
74+
checked={ isChecked( settings, 'sortBubblesBySize' ) }
75+
onChange={ e => {
76+
settings.sortBubblesBySize = e;
77+
this.props.edit( settings );
78+
} }
79+
/>
80+
81+
<TextControl
82+
label={ __( 'Size (max)' ) }
83+
help={ __( 'The size value (as appears in the chart data) to be mapped to sizeAxis.maxSize. Larger values will be cropped to this value.' ) }
84+
type="number"
85+
step="1"
86+
value={ settings.sizeAxis.maxValue }
87+
onChange={ e => {
88+
if ( ! settings.sizeAxis ) {
89+
settings.sizeAxis = {};
90+
}
91+
settings.sizeAxis.maxValue = e;
92+
this.props.edit( settings );
93+
} }
94+
/>
95+
96+
<TextControl
97+
label={ __( 'Size (min)' ) }
98+
help={ __( 'The size value (as appears in the chart data) to be mapped to sizeAxis.minSize. Smaller values will be cropped to this value.' ) }
99+
type="number"
100+
step="1"
101+
value={ settings.sizeAxis.minValue }
102+
onChange={ e => {
103+
if ( ! settings.sizeAxis ) {
104+
settings.sizeAxis = {};
105+
}
106+
settings.sizeAxis.minValue = e;
107+
this.props.edit( settings );
108+
} }
109+
/>
110+
111+
</PanelBody>
112+
);
113+
}
114+
}
115+
116+
export default BubbleSettings;

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ class FrontendActions extends Component {
3131
render() {
3232

3333
const settings = this.props.chart['visualizer-settings'];
34+
const type = this.props.chart['visualizer-chart-type'];
3435

3536
return (
3637
<PanelBody
@@ -111,6 +112,25 @@ class FrontendActions extends Component {
111112
} }
112113
/>
113114

115+
{ ( -1 >= [ 'dataTable', 'tabular', 'gauge', 'table' ].indexOf( type ) ) && (
116+
<CheckboxControl
117+
label={ __( 'Download Image' ) }
118+
help={ __( 'To download the chart as an image.' ) }
119+
checked={ ( 0 <= settings.actions.indexOf( 'image' ) ) }
120+
onChange={ e => {
121+
if ( 0 <= settings.actions.indexOf( 'image' ) ) {
122+
const index = settings.actions.indexOf( 'image' );
123+
if ( -1 !== index ) {
124+
settings.actions.splice( index, 1 );
125+
}
126+
} else {
127+
settings.actions.push( 'image' );
128+
}
129+
this.props.edit( settings );
130+
} }
131+
/>
132+
) }
133+
114134
</Fragment>
115135

116136
) }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ class GeneralSettings extends Component {
230230
</PanelBody>
231231
) }
232232

233-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'dataTable' ].indexOf( type ) ) && (
233+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'dataTable', 'timeline' ].indexOf( type ) ) && (
234234
<PanelBody
235235
title={ __( 'Tooltip' ) }
236236
className="visualizer-inner-sections"

classes/Visualizer/Gutenberg/src/Editor.js

Lines changed: 63 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const {
2929
ButtonGroup,
3030
Dashicon,
3131
Placeholder,
32+
Notice,
3233
Spinner
3334
} = wp.components;
3435

@@ -78,11 +79,20 @@ class Editor extends Component {
7879

7980
// Fetch review again if block loaded after saving.
8081
if ( this.props.attributes.id ) {
81-
let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` });
82-
83-
this.setState({
84-
chart: result['chart_data']
85-
});
82+
let result = await apiFetch({ path: `wp/v2/visualizer/${this.props.attributes.id}` }).catch( function( error ) {
83+
});
84+
85+
if ( result ) {
86+
this.setState({
87+
chart: result['chart_data']
88+
});
89+
} else {
90+
91+
// if the chart is not found.
92+
this.setState({
93+
route: 'error'
94+
});
95+
}
8696
}
8797
}
8898

@@ -311,10 +321,11 @@ class Editor extends Component {
311321
});
312322
}
313323

314-
editChartData( chartData, type ) {
324+
editChartData( chartData, source ) {
315325
let chart = { ...this.state.chart };
316326
let series = [];
317327
let settings = { ...chart['visualizer-settings'] };
328+
let type = chart['visualizer-chart-type'];
318329
chartData[0].map( ( i, index ) => {
319330
series[index] = {
320331
label: i,
@@ -327,30 +338,41 @@ class Editor extends Component {
327338
let map = series;
328339
let fieldName = 'series';
329340

330-
if ( 'pie' === chart['visualizer-chart-type']) {
341+
if ( 'pie' === type ) {
331342
map = chartData;
332343
fieldName = 'slices';
333-
}
344+
345+
// pie charts are finicky about a number being a number
346+
// and editing a number makes it a string
347+
// so let's convert it back into a number.
348+
chartData.map( ( i, index ) => {
349+
switch ( series[1].type ) {
350+
case 'number':
351+
i[1] = parseFloat( i[1]);
352+
break;
353+
}
354+
});
355+
}
334356

335357
map.map( ( i, index ) => {
336-
if ( 'pie' !== chart['visualizer-chart-type'] && 0 === index ) {
337-
return;
358+
if ( 'pie' !== type && 0 === index ) {
359+
return;
338360
}
339361

340-
const seriesIndex = 'pie' !== chart['visualizer-chart-type'] ? index - 1 : index;
362+
const seriesIndex = 'pie' !== type ? index - 1 : index;
341363

342364
if ( settings[fieldName][seriesIndex] === undefined ) {
343-
settings[fieldName][seriesIndex] = {};
365+
settings[fieldName][seriesIndex] = {};
344366
settings[fieldName][seriesIndex].temp = 1;
345-
}
367+
}
346368
});
347369

348370
settings[fieldName] = settings[fieldName].filter( ( i, index ) => {
349-
const length = 'pie' !== chart['visualizer-chart-type'] ? map.length - 1 : map.length;
371+
const length = -1 >= [ 'pie', 'tabular', 'dataTable' ].indexOf( type ) ? map.length - 1 : map.length;
350372
return index < length;
351373
});
352374

353-
chart['visualizer-source'] = type;
375+
chart['visualizer-source'] = source;
354376
chart['visualizer-default-data'] = 0;
355377
chart['visualizer-data'] = chartData;
356378
chart['visualizer-series'] = series;
@@ -379,15 +401,18 @@ class Editor extends Component {
379401
fieldName = 'slices';
380402
}
381403

382-
Object.keys( data['visualizer-settings'][fieldName])
383-
.map( i => {
384-
if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
385-
if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
386-
delete data['visualizer-settings'][fieldName][i].temp;
387-
}
388-
}
389-
}
390-
);
404+
// no series for bubble and timeline charts.
405+
if ( -1 >= [ 'bubble', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
406+
Object.keys( data['visualizer-settings'][fieldName])
407+
.map( i => {
408+
if ( data['visualizer-settings'][fieldName][i] !== undefined ) {
409+
if ( data['visualizer-settings'][fieldName][i].temp !== undefined ) {
410+
delete data['visualizer-settings'][fieldName][i].temp;
411+
}
412+
}
413+
}
414+
);
415+
}
391416

392417
apiRequest({ path: `/visualizer/v1/update-chart?id=${ this.props.attributes.id }`, method: 'POST', data: data }).then(
393418
( data ) => {
@@ -406,6 +431,18 @@ class Editor extends Component {
406431
}
407432

408433
render() {
434+
if ( 'error' === this.state.route ) {
435+
return (
436+
<Notice
437+
status="error"
438+
isDismissible={ false }
439+
>
440+
<Dashicon icon="chart-pie" />
441+
{ __( 'This chart is not available; it might have been deleted. Please delete this block and resubmit your chart.' ) }
442+
</Notice>
443+
);
444+
}
445+
409446
if ( 'renderChart' === this.state.route && null !== this.state.chart ) {
410447
return (
411448
<ChartRender
@@ -534,6 +571,7 @@ class Editor extends Component {
534571
<Button
535572
isDefault
536573
isLarge
574+
className="visualizer-bttn-done"
537575
onClick={ () => {
538576
this.setState({ route: 'renderChart' });
539577
this.props.setAttributes({ route: 'renderChart' });
@@ -544,6 +582,7 @@ class Editor extends Component {
544582
<Button
545583
isPrimary
546584
isLarge
585+
className="visualizer-bttn-save"
547586
isBusy={ 'updateChart' === this.state.isLoading }
548587
disabled={ 'updateChart' === this.state.isLoading }
549588
onClick={ this.updateChart }

0 commit comments

Comments
 (0)