Skip to content

Commit ac99b97

Browse files
HardeepAsraniHardeepAsrani
committed
Complete DataTable integration
Completed DataTable integration for Gutenberg block.
1 parent db89231 commit ac99b97

File tree

6 files changed

+251
-14
lines changed

6 files changed

+251
-14
lines changed

‎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/DataTable.js

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ class DataTables extends Component {
1111
super( ...arguments );
1212

1313
this.initDataTable = this.initDataTable.bind( this );
14+
this.dataRenderer = this.dataRenderer.bind( this );
1415

1516
this.table;
1617
}
@@ -40,7 +41,7 @@ class DataTables extends Component {
4041
initDataTable( tableColumns, tableRow ) {
4142
const settings = this.props.options;
4243

43-
const columns = tableColumns.map( i => {
44+
const columns = tableColumns.map( ( i, index ) => {
4445
let type = i.type;
4546

4647
switch ( i.type ) {
@@ -58,13 +59,7 @@ class DataTables extends Component {
5859
title: i.label,
5960
data: i.label,
6061
type: type,
61-
render: ( data ) => {
62-
if ( 'date' === type ) {
63-
return moment( data ).format( 'MM-DD-YYYY' );
64-
}
65-
66-
return data;
67-
}
62+
render: this.dataRenderer( data, type, index )
6863
};
6964
});
7065

@@ -98,6 +93,46 @@ class DataTables extends Component {
9893
});
9994
}
10095

96+
dataRenderer( data, type, index ) {
97+
const settings = this.props.options;
98+
99+
if ( 'date' === type || 'datetime' === type || 'timeofday' === type ) {
100+
if ( settings.series[index].format && settings.series[index].format.from && settings.series[index].format.to ) {
101+
return $.fn.dataTable.render.moment( settings.series[index].format.from, settings.series[index].format.to );
102+
}
103+
104+
return $.fn.dataTable.render.moment( 'MM-DD-YYYY' );
105+
}
106+
107+
if ( 'num' === type ) {
108+
const parts = [ '', '', '', '', '' ];
109+
110+
if ( '' !== typeof settings.series[index].format.thousands ) {
111+
parts[0] = settings.series[index].format.thousands;
112+
}
113+
114+
if ( '' !== typeof settings.series[index].format.decimal ) {
115+
parts[1] = settings.series[index].format.decimal;
116+
}
117+
118+
if ( '' !== typeof settings.series[index].format.precision ) {
119+
parts[2] = settings.series[index].format.precision;
120+
}
121+
122+
if ( '' !== typeof settings.series[index].format.prefix ) {
123+
parts[3] = settings.series[index].format.prefix;
124+
}
125+
126+
if ( '' !== typeof settings.series[index].format.suffix ) {
127+
parts[4] = settings.series[index].format.suffix;
128+
}
129+
130+
return $.fn.dataTable.render.number( ...parts );
131+
}
132+
133+
return data;
134+
}
135+
101136
render() {
102137
const settings = this.props.options;
103138

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

Lines changed: 5 additions & 0 deletions
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 ColumnSettings from './Sidebar/ColumnSettings.js';
2324
import LayoutAndChartArea from './Sidebar/LayoutAndChartArea.js';
2425
import FrontendActions from './Sidebar/FrontendActions.js';
2526
import ManualConfiguration from './Sidebar/ManualConfiguration.js';
@@ -120,6 +121,10 @@ class Sidebar extends Component {
120121
<SlicesSettings chart={ this.props.chart } edit={ this.props.edit } />
121122
) }
122123

124+
{ ( 0 <= [ 'dataTable' ].indexOf( type ) ) && (
125+
<ColumnSettings chart={ this.props.chart } edit={ this.props.edit } />
126+
) }
127+
123128
{ ( -1 >= [ 'dataTable' ].indexOf( type ) ) && (
124129
<LayoutAndChartArea chart={ this.props.chart } edit={ this.props.edit } />
125130
) }

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

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
const { __ } = wp.i18n;
5+
6+
const {
7+
Component,
8+
Fragment
9+
} = wp.element;
10+
11+
const {
12+
ExternalLink,
13+
PanelBody,
14+
TextControl
15+
} = wp.components;
16+
17+
class ColumnSettings extends Component {
18+
constructor() {
19+
super( ...arguments );
20+
}
21+
22+
componentDidMount() {
23+
24+
/**
25+
* We use deep-clean to remove all empty properties which causes a major issue with Series Settings.
26+
* So add a dummy property to make sure `series` object isn't empty.
27+
* Should be removed before saving the data.
28+
*/
29+
const settings = this.props.chart['visualizer-settings'];
30+
31+
Object.keys( settings.series )
32+
.map( i => {
33+
if ( settings.series[i] !== undefined ) {
34+
settings.series[i].temp = 1;
35+
}
36+
}
37+
);
38+
39+
this.props.edit( settings );
40+
}
41+
42+
render() {
43+
44+
const settings = this.props.chart['visualizer-settings'];
45+
46+
const series = this.props.chart['visualizer-series'];
47+
48+
return (
49+
<PanelBody
50+
title={ __( 'Column Settings' ) }
51+
initialOpen={ false }
52+
className="visualizer-advanced-panel"
53+
>
54+
55+
{ Object.keys( settings.series )
56+
.map( ( i ) => {
57+
return (
58+
<PanelBody
59+
title={ series[i].label }
60+
className="visualizer-inner-sections"
61+
initialOpen={ false }
62+
>
63+
64+
{ ( 'date' === series[i].type || 'datetime' === series[i].type || 'timeofday' === series[i].type ) && (
65+
<Fragment>
66+
<TextControl
67+
label={ __( 'Display Date Format' ) }
68+
help={ __( 'Enter custom format pattern to apply to this series value.' ) }
69+
value={ settings.series[i].format ? settings.series[i].format.to : '' }
70+
onChange={ e => {
71+
if ( ! settings.series[i].format ) {
72+
settings.series[i].format = {};
73+
}
74+
settings.series[i].format.to = e;
75+
this.props.edit( settings );
76+
} }
77+
/>
78+
79+
<TextControl
80+
label={ __( 'Source Date Format' ) }
81+
help={ __( 'What format is the source date in?' ) }
82+
value={ settings.series[i].format ? settings.series[i].format.from : '' }
83+
onChange={ e => {
84+
if ( ! settings.series[i].format ) {
85+
settings.series[i].format = {};
86+
}
87+
settings.series[i].format.from = e;
88+
this.props.edit( settings );
89+
} }
90+
/>
91+
92+
<p>
93+
{ __( 'You can find more info on ' ) }
94+
<ExternalLink href="https://momentjs.com/docs/#/displaying/">
95+
{ __( 'date and time formats here.' ) }
96+
</ExternalLink>
97+
</p>
98+
</Fragment>
99+
) }
100+
101+
{ ( 'number' === series[i].type ) && (
102+
<Fragment>
103+
<TextControl
104+
label={ __( 'Thousands Separator' ) }
105+
value={ settings.series[i].format ? settings.series[i].format.thousands : '' }
106+
onChange={ e => {
107+
if ( ! settings.series[i].format ) {
108+
settings.series[i].format = {};
109+
}
110+
settings.series[i].format.thousands = e;
111+
this.props.edit( settings );
112+
} }
113+
/>
114+
115+
<TextControl
116+
label={ __( 'Decimal Separator' ) }
117+
value={ settings.series[i].format ? settings.series[i].format.decimal : '' }
118+
onChange={ e => {
119+
if ( ! settings.series[i].format ) {
120+
settings.series[i].format = {};
121+
}
122+
settings.series[i].format.decimal = e;
123+
this.props.edit( settings );
124+
} }
125+
/>
126+
127+
<TextControl
128+
label={ __( 'Precision' ) }
129+
help={ __( 'Round values to how many decimal places?' ) }
130+
value={ settings.series[i].format ? settings.series[i].format.precision : '' }
131+
type="number"
132+
onChange={ e => {
133+
if ( 100 < e ) {
134+
return;
135+
}
136+
137+
if ( ! settings.series[i].format ) {
138+
settings.series[i].format = {};
139+
}
140+
settings.series[i].format.precision = e;
141+
this.props.edit( settings );
142+
} }
143+
/>
144+
145+
<TextControl
146+
label={ __( 'Prefix' ) }
147+
value={ settings.series[i].format ? settings.series[i].format.prefix : '' }
148+
onChange={ e => {
149+
if ( ! settings.series[i].format ) {
150+
settings.series[i].format = {};
151+
}
152+
settings.series[i].format.prefix = e;
153+
this.props.edit( settings );
154+
} }
155+
/>
156+
157+
<TextControl
158+
label={ __( 'Suffix' ) }
159+
value={ settings.series[i].format ? settings.series[i].format.suffix : '' }
160+
onChange={ e => {
161+
if ( ! settings.series[i].format ) {
162+
settings.series[i].format = {};
163+
}
164+
settings.series[i].format.suffix = e;
165+
this.props.edit( settings );
166+
} }
167+
/>
168+
</Fragment>
169+
) }
170+
171+
</PanelBody>
172+
);
173+
}
174+
) }
175+
176+
</PanelBody>
177+
);
178+
}
179+
}
180+
181+
export default ColumnSettings;

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,12 @@ class HorizontalAxisSettings extends Component {
150150
<TextControl
151151
label={ __( 'Count' ) }
152152
help={ __( 'The number of horizontal gridlines inside the chart area. Minimum value is 2. Specify -1 to automatically compute the number of gridlines.' ) }
153-
value={ settings.hAxis.gridlines.count }
153+
value={ settings.hAxis.gridlines ? settings.hAxis.gridlines.count : '' }
154154
onChange={ e => {
155+
if ( ! settings.hAxis.gridlines ) {
156+
settings.hAxis.gridlines = {};
157+
}
158+
155159
settings.hAxis.gridlines.count = e;
156160
this.props.edit( settings );
157161
} }
@@ -161,8 +165,12 @@ class HorizontalAxisSettings extends Component {
161165
label={ __( 'Color' ) }
162166
>
163167
<ColorPalette
164-
value={ settings.hAxis.gridlines.color }
168+
value={ settings.hAxis.gridlines ? settings.hAxis.gridlines.color : '' }
165169
onChange={ e => {
170+
if ( ! settings.hAxis.gridlines ) {
171+
settings.hAxis.gridlines = {};
172+
}
173+
166174
settings.hAxis.gridlines.color = e;
167175
this.props.edit( settings );
168176
} }

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,12 @@ class VerticalAxisSettings extends Component {
152152
<TextControl
153153
label={ __( 'Count' ) }
154154
help={ __( 'The number of Vertical gridlines inside the chart area. Minimum value is 2. Specify -1 to automatically compute the number of gridlines.' ) }
155-
value={ settings.vAxis.gridlines.count }
155+
value={ settings.vAxis.gridlines ? settings.vAxis.gridlines.count : '' }
156156
onChange={ e => {
157+
if ( ! settings.vAxis.gridlines ) {
158+
settings.vAxis.gridlines = {};
159+
}
160+
157161
settings.vAxis.gridlines.count = e;
158162
this.props.edit( settings );
159163
} }
@@ -163,8 +167,12 @@ class VerticalAxisSettings extends Component {
163167
label={ __( 'Color' ) }
164168
>
165169
<ColorPalette
166-
value={ settings.vAxis.gridlines.color }
170+
value={ settings.vAxis.gridlines ? settings.vAxis.gridlines.color : '' }
167171
onChange={ e => {
172+
if ( ! settings.vAxis.gridlines ) {
173+
settings.vAxis.gridlines = {};
174+
}
175+
168176
settings.vAxis.gridlines.color = e;
169177
this.props.edit( settings );
170178
} }

0 commit comments

Comments
 (0)