Skip to content

Commit aba9b3f

Browse files
HardeepAsraniHardeepAsrani
committed
[WIP]: Made DataTable work
1 parent f0df73b commit aba9b3f

File tree

12 files changed

+190
-54
lines changed

12 files changed

+190
-54
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 & 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: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎classes/Visualizer/Gutenberg/build/handsontable.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/handsontable.js

Lines changed: 4 additions & 4 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: 27 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,25 @@ 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+
/>
80+
) : (
81+
<Chart
82+
chartType={ chart }
83+
rows={ data['visualizer-data'] }
84+
columns={ data['visualizer-series'] }
85+
options={
86+
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
87+
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
88+
compact( this.props.chart['visualizer-settings'])
89+
}
90+
height="500px"
91+
/>
92+
) }
8093

8194
</Fragment>
8295
}

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

Lines changed: 28 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,26 @@ 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+
/>
136+
) : (
137+
<Chart
138+
chartType={ chart }
139+
rows={ data['visualizer-data'] }
140+
columns={ data['visualizer-series'] }
141+
options={
142+
isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
143+
merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
144+
compact( this.props.chart['visualizer-settings'])
145+
}
146+
height="500px"
147+
/>
148+
)
134149
}
135150

136151
</div>

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

Lines changed: 17 additions & 11 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;
@@ -101,23 +102,28 @@ class Charts extends Component {
101102
chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
102103
}
103104

104-
if ( 'dataTable' === chart ) {
105-
return;
106-
}
107-
108105
return (
109106
<div className="visualizer-settings__charts-single">
110107

111108
<div className="visualizer-settings__charts-title">
112109
{ title }
113110
</div>
114111

115-
<Chart
116-
chartType={ chart }
117-
rows={ data['visualizer-data'] }
118-
columns={ data['visualizer-series'] }
119-
options={ filterCharts( data['visualizer-settings']) }
120-
/>
112+
{ ( 'dataTable' === chart ) ? (
113+
<DataTable
114+
id={ charts[i].id }
115+
rows={ data['visualizer-data'] }
116+
columns={ data['visualizer-series'] }
117+
chartsScreen={ true }
118+
/>
119+
) : (
120+
<Chart
121+
chartType={ chart }
122+
rows={ data['visualizer-data'] }
123+
columns={ data['visualizer-series'] }
124+
options={ filterCharts( data['visualizer-settings']) }
125+
/>
126+
) }
121127

122128
<div
123129
className="visualizer-settings__charts-controls"

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
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 columns = tableColumns.map( i => {
33+
let type = i.type;
34+
35+
switch ( i.type ) {
36+
case 'number':
37+
type = 'num';
38+
break;
39+
case 'date':
40+
case 'datetime':
41+
case 'timeofday':
42+
type = 'date';
43+
break;
44+
}
45+
46+
return {
47+
title: i.label,
48+
data: i.label,
49+
type: type,
50+
render: ( data ) => {
51+
if ( 'date' === type ) {
52+
return moment( data ).format( 'MM-DD-YYYY' );
53+
}
54+
55+
return data;
56+
}
57+
};
58+
});
59+
60+
const data = tableRow.map( i => {
61+
const row = {};
62+
63+
columns.forEach( ( j, n ) => {
64+
row[j.data] = i[n];
65+
});
66+
67+
return row;
68+
});
69+
70+
this.table = jQuery( `#dataTable-instances-${ this.props.id }` ).DataTable({
71+
data: data,
72+
columns: columns,
73+
destroy: true,
74+
paging: false,
75+
searching: false,
76+
ordering: true,
77+
select: false,
78+
lengthChange: false,
79+
responsive: this.props.chartsScreen ? true : false
80+
});
81+
}
82+
83+
render() {
84+
return (
85+
<table id={ `dataTable-instances-${ this.props.id }` }></table>
86+
);
87+
}
88+
}
89+
90+
export default DataTables;

0 commit comments

Comments
 (0)