Skip to content

Commit 9ed32ce

Browse files
rodica-andronacherodica-andronache
authored
Merge pull request #686 from contactashish13/issue-524
Add back Google Table charts
2 parents a04b6e5 + df99391 commit 9ed32ce

31 files changed

+1203
-120
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/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: 8 additions & 4 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`;
@@ -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: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,18 @@ class Sidebar extends Component {
4242
render() {
4343

4444
const type = this.props.chart['visualizer-chart-type'];
45+
const library = this.props.chart['visualizer-chart-library'];
4546

4647
return (
4748
<Fragment>
4849

4950
<GeneralSettings chart={ this.props.chart } edit={ this.props.edit } />
5051

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

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

@@ -100,7 +101,7 @@ class Sidebar extends Component {
100101
<TimelineSettings chart={ this.props.chart } edit={ this.props.edit } />
101102
) }
102103

103-
{ ( 0 <= [ 'table', 'dataTable' ].indexOf( type ) ) && (
104+
{ ( 0 <= [ 'tabular', 'dataTable' ].indexOf( type ) ) && (
104105
<Fragment>
105106

106107
<TableSettings chart={ this.props.chart } edit={ this.props.edit } />
@@ -114,7 +115,11 @@ class Sidebar extends Component {
114115
<ComboSettings chart={ this.props.chart } edit={ this.props.edit } />
115116
) }
116117

117-
{ ( -1 >= [ 'timeline', 'bubble', 'gauge', 'geo', 'pie', 'dataTable' ].indexOf( type ) ) && (
118+
{ ( -1 >= [ 'timeline', 'bubble', 'gauge', 'geo', 'pie', 'tabular', 'dataTable' ].indexOf( type ) ) && (
119+
<SeriesSettings chart={ this.props.chart } edit={ this.props.edit } />
120+
) }
121+
122+
{ ( 'tabular' === type && 'GoogleCharts' === library ) && (
118123
<SeriesSettings chart={ this.props.chart } edit={ this.props.edit } />
119124
) }
120125

@@ -127,17 +132,17 @@ class Sidebar extends Component {
127132
<SlicesSettings chart={ this.props.chart } edit={ this.props.edit } />
128133
) }
129134

130-
{ ( 0 <= [ 'dataTable' ].indexOf( type ) ) && (
135+
{ ( 'DataTable' === library ) && (
131136
<ColumnSettings chart={ this.props.chart } edit={ this.props.edit } />
132137
) }
133138

134-
{ ( -1 >= [ 'dataTable' ].indexOf( type ) ) && (
139+
{ ( 'DataTable' !== library ) && (
135140
<LayoutAndChartArea chart={ this.props.chart } edit={ this.props.edit } />
136141
) }
137142

138143
<FrontendActions chart={ this.props.chart } edit={ this.props.edit } />
139144

140-
{ ( -1 >= [ 'dataTable' ].indexOf( type ) ) && (
145+
{ ( 'DataTable' !== library ) && (
141146
<ManualConfiguration chart={ this.props.chart } edit={ this.props.edit } />
142147
) }
143148
</Fragment>

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ class ColumnSettings extends Component {
2828
*/
2929
const settings = this.props.chart['visualizer-settings'];
3030

31+
if ( ! settings.series ) {
32+
return;
33+
}
34+
3135
Object.keys( settings.series )
3236
.map( i => {
3337
if ( settings.series[i] !== undefined ) {
@@ -47,6 +51,10 @@ class ColumnSettings extends Component {
4751

4852
const type = this.props.chart['visualizer-chart-type'];
4953

54+
if ( ! settings.series ) {
55+
return null;
56+
}
57+
5058
return (
5159
<PanelBody
5260
title={ __( 'Column Settings' ) }
@@ -56,14 +64,20 @@ class ColumnSettings extends Component {
5664

5765
{ Object.keys( settings.series )
5866
.map( ( i ) => {
67+
68+
// don't show string columns.
69+
if ( 'string' === series[i].type ) {
70+
return null;
71+
}
72+
5973
return (
6074
<PanelBody
6175
title={ series[i].label }
6276
className="visualizer-inner-sections"
6377
initialOpen={ false }
6478
>
6579

66-
{ ( 'date' === series[i].type || 'datetime' === series[i].type || 'timeofday' === series[i].type ) && (
80+
{ 0 <= [ 'date', 'datetime', 'timeofday' ].indexOf( series[i].type ) && (
6781
<Fragment>
6882
<TextControl
6983
label={ __( 'Display Date Format' ) }
@@ -131,6 +145,7 @@ class ColumnSettings extends Component {
131145
help={ __( 'Round values to how many decimal places?' ) }
132146
value={ settings.series[i].format ? settings.series[i].format.precision : '' }
133147
type="number"
148+
min="0"
134149
onChange={ e => {
135150
if ( 100 < e ) {
136151
return;
@@ -170,7 +185,7 @@ class ColumnSettings extends Component {
170185
</Fragment>
171186
) }
172187

173-
{ ( 'boolean' === series[i].type ) && ( 'dataTable' === type ) && (
188+
{ ( 'boolean' === series[i].type ) && (
174189
<Fragment>
175190
<TextControl
176191
label={ __( 'Truthy value' ) }

0 commit comments

Comments
 (0)