Skip to content

Commit 7dc1ace

Browse files
HardeepAsraniHardeepAsrani
authored
Merge branch 'gutenberg-integration' into 3.3.0
2 parents 4eb6c66 + a0c1df7 commit 7dc1ace

File tree

13 files changed

+295
-79
lines changed

13 files changed

+295
-79
lines changed

‎classes/Visualizer/Gutenberg/Block.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ public function enqueue_gutenberg_scripts() {
7979

8080
// Enqueue the bundled block JS file
8181
wp_enqueue_script( 'handsontable', $handsontableJS );
82-
wp_enqueue_script( 'visualizer-gutenberg-block', $blockPath, array( 'wp-api', 'handsontable' ), $version, true );
82+
wp_enqueue_script( 'visualizer-gutenberg-block', $blockPath, array( 'wp-api', 'handsontable', 'visualizer-datatables', 'moment' ), $version, true );
8383

8484
$type = 'community';
8585

@@ -99,7 +99,7 @@ public function enqueue_gutenberg_scripts() {
9999

100100
// Enqueue frontend and editor block styles
101101
wp_enqueue_style( 'handsontable', $handsontableCSS );
102-
wp_enqueue_style( 'visualizer-gutenberg-block', $stylePath, '', $version );
102+
wp_enqueue_style( 'visualizer-gutenberg-block', $stylePath, array( 'visualizer-datatables' ), $version );
103103
}
104104
/**
105105
* Hook server side rendering into render callback

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

Lines changed: 1 addition & 2 deletions
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: 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: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
*/
44
import { Chart } from 'react-google-charts';
55

6+
import DataTable from './DataTable.js';
7+
68
import merge from 'merge';
79

810
import { compact, formatDate, isValidJSON } from '../utils.js';
@@ -34,13 +36,16 @@ class ChartRender extends Component {
3436
}
3537

3638
render() {
37-
3839
let chart;
3940

4041
let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
4142

42-
if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
43-
chart = startCase( this.props.chart['visualizer-chart-type']);
43+
if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
44+
if ( 'dataTable' === data['visualizer-chart-type']) {
45+
chart = data['visualizer-chart-type'];
46+
} else {
47+
chart = startCase( this.props.chart['visualizer-chart-type']);
48+
}
4449
} else {
4550
chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
4651
}
@@ -66,17 +71,26 @@ class ChartRender extends Component {
6671
</Toolbar>
6772
</BlockControls>
6873

69-
<Chart
70-
chartType={ chart }
71-
rows={ data['visualizer-data'] }
72-
columns={ data['visualizer-series'] }
73-
options={
74-
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
75-
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
76-
compact( this.props.chart['visualizer-settings'])
77-
}
78-
height="500px"
79-
/>
74+
{ ( 'dataTable' === chart ) ? (
75+
<DataTable
76+
id={ this.props.id }
77+
rows={ data['visualizer-data'] }
78+
columns={ data['visualizer-series'] }
79+
options={ data['visualizer-settings'] }
80+
/>
81+
) : (
82+
<Chart
83+
chartType={ chart }
84+
rows={ data['visualizer-data'] }
85+
columns={ data['visualizer-series'] }
86+
options={
87+
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
88+
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
89+
compact( this.props.chart['visualizer-settings'])
90+
}
91+
height="500px"
92+
/>
93+
) }
8094

8195
</Fragment>
8296
}

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

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
*/
44
import { Chart } from 'react-google-charts';
55

6+
import DataTable from './DataTable.js';
7+
68
import FileImport from './Import/FileImport.js';
79

810
import RemoteImport from './Import/RemoteImport.js';
@@ -57,8 +59,12 @@ class ChartSelect extends Component {
5759

5860
let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
5961

60-
if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
61-
chart = startCase( this.props.chart['visualizer-chart-type']);
62+
if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
63+
if ( 'dataTable' === data['visualizer-chart-type']) {
64+
chart = data['visualizer-chart-type'];
65+
} else {
66+
chart = startCase( this.props.chart['visualizer-chart-type']);
67+
}
6268
} else {
6369
chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
6470
}
@@ -120,17 +126,27 @@ class ChartSelect extends Component {
120126
<div className="visualizer-settings__chart">
121127

122128
{ ( null !== this.props.chart ) &&
123-
<Chart
124-
chartType={ chart }
125-
rows={ data['visualizer-data'] }
126-
columns={ data['visualizer-series'] }
127-
options={
128-
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
129-
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
130-
compact( this.props.chart['visualizer-settings'])
131-
}
132-
height="500px"
133-
/>
129+
130+
( 'dataTable' === chart ) ? (
131+
<DataTable
132+
id={ this.props.id }
133+
rows={ data['visualizer-data'] }
134+
columns={ data['visualizer-series'] }
135+
options={ data['visualizer-settings'] }
136+
/>
137+
) : (
138+
<Chart
139+
chartType={ chart }
140+
rows={ data['visualizer-data'] }
141+
columns={ data['visualizer-series'] }
142+
options={
143+
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
144+
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
145+
compact( this.props.chart['visualizer-settings'])
146+
}
147+
height="500px"
148+
/>
149+
)
134150
}
135151

136152
</div>

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
*/
44
import { Chart } from 'react-google-charts';
55

6+
import DataTable from './DataTable.js';
7+
68
import { formatDate, filterCharts } from '../utils.js';
79

810
/**
@@ -80,7 +82,6 @@ class Charts extends Component {
8082
<div className="visualizer-settings__charts-grid">
8183

8284
{ ( Object.keys( charts ) ).map( i => {
83-
8485
const data = formatDate( charts[i]['chart_data']);
8586

8687
let title, chart;
@@ -118,12 +119,22 @@ class Charts extends Component {
118119
{ title }
119120
</div>
120121

121-
<Chart
122-
chartType={ chart }
123-
rows={ data['visualizer-data'] }
124-
columns={ data['visualizer-series'] }
125-
options={ filterCharts( data['visualizer-settings']) }
126-
/>
122+
{ ( 'dataTable' === chart ) ? (
123+
<DataTable
124+
id={ charts[i].id }
125+
rows={ data['visualizer-data'] }
126+
columns={ data['visualizer-series'] }
127+
chartsScreen={ true }
128+
options={ filterCharts( data['visualizer-settings']) }
129+
/>
130+
) : (
131+
<Chart
132+
chartType={ chart }
133+
rows={ data['visualizer-data'] }
134+
columns={ data['visualizer-series'] }
135+
options={ filterCharts( data['visualizer-settings']) }
136+
/>
137+
) }
127138

128139
<div
129140
className="visualizer-settings__charts-controls"

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
const { Component } = wp.element;
5+
6+
class DataTables extends Component {
7+
constructor() {
8+
super( ...arguments );
9+
10+
this.initDataTable = this.initDataTable.bind( this );
11+
12+
this.table;
13+
}
14+
15+
componentDidMount() {
16+
this.initDataTable( this.props.columns, this.props.rows );
17+
};
18+
19+
componentWillUnmount() {
20+
this.table.destroy();
21+
}
22+
23+
componentDidUpdate( prevProps ) {
24+
if ( this.props !== prevProps ) {
25+
this.table.destroy();
26+
document.getElementById( `dataTable-instances-${ this.props.id }` ).innerHTML = '';
27+
this.initDataTable( this.props.columns, this.props.rows );
28+
}
29+
}
30+
31+
initDataTable( tableColumns, tableRow ) {
32+
const settings = this.props.options;
33+
34+
const columns = tableColumns.map( i => {
35+
let type = i.type;
36+
37+
switch ( i.type ) {
38+
case 'number':
39+
type = 'num';
40+
break;
41+
case 'date':
42+
case 'datetime':
43+
case 'timeofday':
44+
type = 'date';
45+
break;
46+
}
47+
48+
return {
49+
title: i.label,
50+
data: i.label,
51+
type: type,
52+
render: ( data ) => {
53+
if ( 'date' === type ) {
54+
return moment( data ).format( 'MM-DD-YYYY' );
55+
}
56+
57+
return data;
58+
}
59+
};
60+
});
61+
62+
const data = tableRow.map( i => {
63+
const row = {};
64+
65+
columns.forEach( ( j, n ) => {
66+
row[j.data] = i[n];
67+
});
68+
69+
return row;
70+
});
71+
72+
this.table = jQuery( `#dataTable-instances-${ this.props.id }` ).DataTable({
73+
destroy: true,
74+
data: data,
75+
columns: columns,
76+
paging: 'true' === settings.paging_bool ? true : false,
77+
pageLength: settings.pageLength_int || 10,
78+
pagingType: settings.pagingType,
79+
lengthChange: 'true' === settings.lengthChange_bool ? true : false,
80+
searching: false,
81+
ordering: true,
82+
select: false,
83+
responsive: this.props.chartsScreen ? true : false
84+
});
85+
}
86+
87+
render() {
88+
return (
89+
<table id={ `dataTable-instances-${ this.props.id }` }></table>
90+
);
91+
}
92+
}
93+
94+
export default DataTables;

0 commit comments

Comments
 (0)