Skip to content

Commit 3edb010

Browse files
rodica-andronacherodica-andronache
authored
Release
[Feat] New Google Table Charts [Feat] Option for lazy loading Google Charts [Feat] Option to easily copy chart shortcode code [Fix] Remove Inside the Chart option for the legend position for Google Pie charts
2 parents 933435c + 2958b29 commit 3edb010

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

+1475
-173
lines changed

‎bin/clean.sh

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# delete all charts
2+
wp post delete $(wp post list --post_type='visualizer' --format=ids) --force

‎bin/run-e2e-tests-gutenberg.sh

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,11 @@ set -e
1919
export CYPRESS_HOST=$wp_host
2020

2121
docker exec $args visualizer_wordpress wp --quiet plugin deactivate classic-editor
22+
2223
export CYPRESS_SPEC_TO_RUN="free-gutenberg.js"
2324
npm run cypress:run
25+
26+
docker exec $args visualizer_wordpress bash /var/www/html/ti-bin/clean.sh
27+
28+
export CYPRESS_SPEC_TO_RUN="free-gutenberg-datatable.js"
29+
npm run cypress:run

‎classes/Visualizer/Gutenberg/Block.php

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,9 @@ public function register_block_type() {
139139
'id' => array(
140140
'type' => 'number',
141141
),
142+
'lazy' => array(
143+
'type' => 'string',
144+
),
142145
),
143146
)
144147
);
@@ -147,14 +150,44 @@ public function register_block_type() {
147150
/**
148151
* Gutenberg Block Callback Function
149152
*/
150-
public function gutenberg_block_callback( $attr ) {
151-
if ( isset( $attr['id'] ) ) {
152-
$id = $attr['id'];
153-
if ( empty( $id ) || $id === 'none' ) {
154-
return ''; // no id = no fun
155-
}
156-
return '[visualizer id="' . $id . '"]';
153+
public function gutenberg_block_callback( $atts ) {
154+
// no id, no fun.
155+
if ( ! isset( $atts['id'] ) ) {
156+
return '';
157+
}
158+
159+
$atts = shortcode_atts(
160+
array(
161+
'id' => false,
162+
'lazy' => apply_filters( 'visualizer_lazy_by_default', false, $atts['id'] ),
163+
// we are deliberating excluding the class attribute from here
164+
// as this will be handled by the custom class in Gutenberg
165+
),
166+
$atts
167+
);
168+
169+
// no id, no fun.
170+
if ( ! $atts['id'] ) {
171+
return '';
157172
}
173+
174+
// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
175+
if ( $atts['lazy'] == -1 || $atts['lazy'] == false ) {
176+
$atts['lazy'] = 'no';
177+
}
178+
179+
// we don't want the chart in the editor lazy-loading.
180+
if ( is_admin() ) {
181+
unset( $atts['lazy'] );
182+
}
183+
184+
$shortcode = '[visualizer';
185+
foreach ( $atts as $name => $value ) {
186+
$shortcode .= sprintf( ' %s="%s"', $name, $value );
187+
}
188+
$shortcode .= ']';
189+
190+
return $shortcode;
158191
}
159192

160193
/**

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

Lines changed: 5 additions & 5 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: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,15 @@ class ChartRender extends Component {
4040

4141
let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
4242

43-
if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
44-
if ( 'dataTable' === data['visualizer-chart-type']) {
43+
if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
44+
if ( 'DataTable' === data['visualizer-chart-library']) {
4545
chart = data['visualizer-chart-type'];
4646
} else {
47-
chart = startCase( this.props.chart['visualizer-chart-type']);
47+
chart = this.props.chart['visualizer-chart-type'];
48+
if ( 'tabular' === chart ) {
49+
chart = 'table';
50+
}
51+
chart = startCase( chart );
4852
}
4953
} else {
5054
chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
@@ -75,7 +79,7 @@ class ChartRender extends Component {
7579
</Toolbar>
7680
</BlockControls>
7781

78-
{ ( 'dataTable' === chart ) ? (
82+
{ ( 'DataTable' === data['visualizer-chart-library']) ? (
7983
<DataTable
8084
id={ this.props.id }
8185
rows={ data['visualizer-data'] }

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,15 @@ class ChartSelect extends Component {
6161

6262
let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
6363

64-
if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
65-
if ( 'dataTable' === data['visualizer-chart-type']) {
64+
if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
65+
if ( 'DataTable' === data['visualizer-chart-library']) {
6666
chart = data['visualizer-chart-type'];
6767
} else {
68-
chart = startCase( this.props.chart['visualizer-chart-type']);
68+
chart = this.props.chart['visualizer-chart-type'];
69+
if ( 'tabular' === chart ) {
70+
chart = 'table';
71+
}
72+
chart = startCase( chart );
6973
}
7074
} else {
7175
chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
@@ -134,7 +138,7 @@ class ChartSelect extends Component {
134138
/>
135139

136140
{ 'showAdvanced' === this.state.route &&
137-
<Sidebar chart={ this.props.chart } edit={ this.props.editSettings } />
141+
<Sidebar chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.editSettings } />
138142
}
139143

140144
{ 'showPermissions' === this.state.route &&
@@ -147,7 +151,7 @@ class ChartSelect extends Component {
147151

148152
{ ( null !== this.props.chart ) &&
149153

150-
( 'dataTable' === chart ) ? (
154+
( 'DataTable' === data['visualizer-chart-library']) ? (
151155
<DataTable
152156
id={ this.props.id }
153157
rows={ data['visualizer-data'] }

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,15 @@ class Charts extends Component {
107107
title = `#${charts[i].id}`;
108108
}
109109

110-
if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( data['visualizer-chart-type']) ) {
111-
if ( 'dataTable' === data['visualizer-chart-type']) {
110+
if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
111+
if ( 'DataTable' === data['visualizer-chart-library']) {
112112
chart = data['visualizer-chart-type'];
113113
} else {
114-
chart = startCase( data['visualizer-chart-type']);
114+
chart = data['visualizer-chart-type'];
115+
if ( 'tabular' === chart ) {
116+
chart = 'table';
117+
}
118+
chart = startCase( chart );
115119
}
116120
} else {
117121
chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
@@ -134,13 +138,13 @@ class Charts extends Component {
134138
{ title }
135139
</div>
136140

137-
{ ( 'dataTable' === chart ) ? (
141+
{ ( 'DataTable' === data['visualizer-chart-library']) ? (
138142
<DataTable
139143
id={ charts[i].id }
140144
rows={ data['visualizer-data'] }
141145
columns={ data['visualizer-series'] }
142146
chartsScreen={ true }
143-
options={ filterCharts( data['visualizer-settings']) }
147+
options={ data['visualizer-settings'] }
144148
/>
145149
) : ( '' !== data['visualizer-data-exploded'] ? (
146150
<Chart

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

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -46,26 +46,25 @@ class DataTables extends Component {
4646

4747
initDataTable( tableColumns, tableRow ) {
4848
const settings = this.props.options;
49-
5049
const columns = tableColumns.map( ( i, index ) => {
5150
let type = i.type;
5251

5352
switch ( i.type ) {
54-
case 'number':
55-
type = 'num';
56-
break;
57-
case 'date':
58-
case 'datetime':
59-
case 'timeofday':
60-
type = 'date';
61-
break;
53+
case 'number':
54+
type = 'num';
55+
break;
56+
case 'date':
57+
case 'datetime':
58+
case 'timeofday':
59+
type = 'date';
60+
break;
6261
}
6362

6463
return {
6564
title: i.label,
6665
data: i.label,
6766
type: type,
68-
render: this.dataRenderer( data, type, index )
67+
render: this.dataRenderer( type, index )
6968
};
7069
});
7170

@@ -94,9 +93,9 @@ class DataTables extends Component {
9493
pagingType: settings.pagingType,
9594
ordering: 'false' === settings.ordering_bool ? false : true,
9695
fixedHeader: 'true' === settings.fixedHeader_bool ? true : false,
97-
scrollCollapse: this.props.chartsScreen && true || 'true' === settings.scrollCollapse_bool ? true : false,
96+
scrollCollapse: !! this.props.chartsScreen || 'true' === settings.scrollCollapse_bool ? true : false,
9897
scrollY: this.props.chartsScreen && 180 || ( 'true' === settings.scrollCollapse_bool && Number( settings.scrollY_int ) || false ),
99-
responsive: this.props.chartsScreen && true || 'true' === settings.responsive_bool ? true : false,
98+
responsive: !! this.props.chartsScreen || 'true' === settings.responsive_bool ? true : false,
10099
searching: false,
101100
select: false,
102101
lengthChange: false,
@@ -105,61 +104,58 @@ class DataTables extends Component {
105104
});
106105
}
107106

108-
dataRenderer( data, type, index ) {
107+
dataRenderer( type, index ) {
109108
const settings = this.props.options;
110109

111-
if ( undefined === settings.series[index]) {
112-
return data;
113-
}
110+
let renderer = null;
111+
if ( 'undefined' === typeof settings.series || 'undefined' === typeof settings.series[index] || 'undefined' === typeof settings.series[index].format ) {
112+
return renderer;
113+
}
114114

115115
switch ( type ) {
116116
case 'date':
117117
case 'datetime':
118118
case 'timeofday':
119119
if ( settings.series[index].format && settings.series[index].format.from && settings.series[index].format.to ) {
120-
return jQuery.fn.dataTable.render.moment( settings.series[index].format.from, settings.series[index].format.to );
120+
renderer = jQuery.fn.dataTable.render.moment( settings.series[index].format.from, settings.series[index].format.to );
121+
} else {
122+
renderer = jQuery.fn.dataTable.render.moment( 'MM-DD-YYYY' );
121123
}
122-
return jQuery.fn.dataTable.render.moment( 'MM-DD-YYYY' );
123124
break;
124125
case 'num':
125126
const parts = [ '', '', '', '', '' ];
126-
127127
if ( settings.series[index].format.thousands ) {
128128
parts[0] = settings.series[index].format.thousands;
129129
}
130-
131130
if ( settings.series[index].format.decimal ) {
132131
parts[1] = settings.series[index].format.decimal;
133132
}
134-
135-
if ( settings.series[index].format.precision ) {
133+
if ( settings.series[index].format.precision && 0 < parseInt( settings.series[index].format.precision ) ) {
136134
parts[2] = settings.series[index].format.precision;
137135
}
138-
139136
if ( settings.series[index].format.prefix ) {
140137
parts[3] = settings.series[index].format.prefix;
141138
}
142-
143139
if ( settings.series[index].format.suffix ) {
144140
parts[4] = settings.series[index].format.suffix;
145141
}
146-
return jQuery.fn.dataTable.render.number( ...parts );
142+
renderer = jQuery.fn.dataTable.render.number( ...parts );
147143
break;
148144
case 'boolean':
149145
jQuery.fn.dataTable.render.extra = function( data, type, row ) {
150-
if ( ( true === data || 'true' === data ) && 'undefined' !== typeof settings.series[index].format && '' !== settings.series[index].format.truthy ) {
146+
if ( ( true === data || 'true' === data ) && '' !== settings.series[index].format.truthy ) {
151147
return settings.series[index].format.truthy.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );
152148
}
153-
if ( ( false === data || 'false' === data ) && 'undefined' !== typeof settings.series[index].format && '' !== settings.series[index].format.falsy ) {
149+
if ( ( false === data || 'false' === data ) && '' !== settings.series[index].format.falsy ) {
154150
return settings.series[index].format.falsy.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );
155151
}
156152
return data;
157153
};
158-
return jQuery.fn.dataTable.render.extra;
154+
renderer = jQuery.fn.dataTable.render.extra;
159155
break;
160156
}
161157

162-
return data;
158+
return renderer;
163159
}
164160

165161
render() {

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* External dependencies
33
*/
44
import GeneralSettings from './Sidebar/GeneralSettings.js';
5+
import InstanceSettings from './Sidebar/InstanceSettings.js';
56
import HorizontalAxisSettings from './Sidebar/HorizontalAxisSettings.js';
67
import VerticalAxisSettings from './Sidebar/VerticalAxisSettings.js';
78
import PieSettings from './Sidebar/PieSettings.js';
@@ -42,17 +43,20 @@ class Sidebar extends Component {
4243
render() {
4344

4445
const type = this.props.chart['visualizer-chart-type'];
46+
const library = this.props.chart['visualizer-chart-library'];
4547

4648
return (
4749
<Fragment>
4850

51+
<InstanceSettings chart={ this.props.chart } attributes={ this.props.attributes } edit={ this.props.edit } />
52+
4953
<GeneralSettings chart={ this.props.chart } edit={ this.props.edit } />
5054

51-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline', 'dataTable' ].indexOf( type ) ) && (
55+
{ ( -1 >= [ 'tabular', 'dataTable', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
5256
<HorizontalAxisSettings chart={ this.props.chart } edit={ this.props.edit } />
5357
) }
5458

55-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline', 'dataTable' ].indexOf( type ) ) && (
59+
{ ( -1 >= [ 'tabular', 'dataTable', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
5660
<VerticalAxisSettings chart={ this.props.chart } edit={ this.props.edit } />
5761
) }
5862

@@ -100,7 +104,7 @@ class Sidebar extends Component {
100104
<TimelineSettings chart={ this.props.chart } edit={ this.props.edit } />
101105
) }
102106

103-
{ ( 0 <= [ 'table', 'dataTable' ].indexOf( type ) ) && (
107+
{ ( 0 <= [ 'tabular', 'dataTable' ].indexOf( type ) ) && (
104108
<Fragment>
105109

106110
<TableSettings chart={ this.props.chart } edit={ this.props.edit } />
@@ -114,7 +118,11 @@ class Sidebar extends Component {
114118
<ComboSettings chart={ this.props.chart } edit={ this.props.edit } />
115119
) }
116120

117-
{ ( -1 >= [ 'timeline', 'bubble', 'gauge', 'geo', 'pie', 'dataTable' ].indexOf( type ) ) && (
121+
{ ( -1 >= [ 'timeline', 'bubble', 'gauge', 'geo', 'pie', 'tabular', 'dataTable' ].indexOf( type ) ) && (
122+
<SeriesSettings chart={ this.props.chart } edit={ this.props.edit } />
123+
) }
124+
125+
{ ( 'tabular' === type && 'GoogleCharts' === library ) && (
118126
<SeriesSettings chart={ this.props.chart } edit={ this.props.edit } />
119127
) }
120128

@@ -127,17 +135,17 @@ class Sidebar extends Component {
127135
<SlicesSettings chart={ this.props.chart } edit={ this.props.edit } />
128136
) }
129137

130-
{ ( 0 <= [ 'dataTable' ].indexOf( type ) ) && (
138+
{ ( 'DataTable' === library ) && (
131139
<ColumnSettings chart={ this.props.chart } edit={ this.props.edit } />
132140
) }
133141

134-
{ ( -1 >= [ 'dataTable' ].indexOf( type ) ) && (
142+
{ ( 'DataTable' !== library ) && (
135143
<LayoutAndChartArea chart={ this.props.chart } edit={ this.props.edit } />
136144
) }
137145

138146
<FrontendActions chart={ this.props.chart } edit={ this.props.edit } />
139147

140-
{ ( -1 >= [ 'dataTable' ].indexOf( type ) ) && (
148+
{ ( 'DataTable' !== library ) && (
141149
<ManualConfiguration chart={ this.props.chart } edit={ this.props.edit } />
142150
) }
143151
</Fragment>

0 commit comments

Comments
 (0)