Skip to content

Commit a0c1df7

Browse files
HardeepAsraniHardeepAsrani
committed
[WIP] add sidebar options
1 parent aba9b3f commit a0c1df7

File tree

8 files changed

+120
-43
lines changed

8 files changed

+120
-43
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/ChartRender.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ class ChartRender extends Component {
7676
id={ this.props.id }
7777
rows={ data['visualizer-data'] }
7878
columns={ data['visualizer-series'] }
79+
options={ data['visualizer-settings'] }
7980
/>
8081
) : (
8182
<Chart

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ class ChartSelect extends Component {
132132
id={ this.props.id }
133133
rows={ data['visualizer-data'] }
134134
columns={ data['visualizer-series'] }
135+
options={ data['visualizer-settings'] }
135136
/>
136137
) : (
137138
<Chart

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ class Charts extends Component {
115115
rows={ data['visualizer-data'] }
116116
columns={ data['visualizer-series'] }
117117
chartsScreen={ true }
118+
options={ filterCharts( data['visualizer-settings']) }
118119
/>
119120
) : (
120121
<Chart

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ class DataTables extends Component {
2929
}
3030

3131
initDataTable( tableColumns, tableRow ) {
32+
const settings = this.props.options;
33+
3234
const columns = tableColumns.map( i => {
3335
let type = i.type;
3436

@@ -68,14 +70,16 @@ class DataTables extends Component {
6870
});
6971

7072
this.table = jQuery( `#dataTable-instances-${ this.props.id }` ).DataTable({
73+
destroy: true,
7174
data: data,
7275
columns: columns,
73-
destroy: true,
74-
paging: false,
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,
7580
searching: false,
7681
ordering: true,
7782
select: false,
78-
lengthChange: false,
7983
responsive: this.props.chartsScreen ? true : false
8084
});
8185
}

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,11 @@ class Sidebar extends Component {
4646

4747
<GeneralSettings chart={ this.props.chart } edit={ this.props.edit } />
4848

49-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
49+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline', 'dataTable' ].indexOf( type ) ) && (
5050
<HorizontalAxisSettings chart={ this.props.chart } edit={ this.props.edit } />
5151
) }
5252

53-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
53+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline', 'dataTable' ].indexOf( type ) ) && (
5454
<VerticalAxisSettings chart={ this.props.chart } edit={ this.props.edit } />
5555
) }
5656

@@ -98,12 +98,14 @@ class Sidebar extends Component {
9898
<TimelineSettings chart={ this.props.chart } edit={ this.props.edit } />
9999
) }
100100

101-
{ ( 0 <= [ 'table' ].indexOf( type ) ) && (
101+
{ ( 0 <= [ 'table', 'dataTable' ].indexOf( type ) ) && (
102102
<Fragment>
103103

104104
<TableSettings chart={ this.props.chart } edit={ this.props.edit } />
105105

106-
<RowCellSettings chart={ this.props.chart } edit={ this.props.edit } />
106+
{ ( -1 >= [ 'dataTable' ].indexOf( type ) ) && (
107+
<RowCellSettings chart={ this.props.chart } edit={ this.props.edit } />
108+
) }
107109

108110
</Fragment>
109111
) }
@@ -112,20 +114,23 @@ class Sidebar extends Component {
112114
<ComboSettings chart={ this.props.chart } edit={ this.props.edit } />
113115
) }
114116

115-
{ ( -1 >= [ 'timeline', 'gauge', 'geo', 'pie' ].indexOf( type ) ) && (
117+
{ ( -1 >= [ 'timeline', 'gauge', 'geo', 'pie', 'dataTable' ].indexOf( type ) ) && (
116118
<SeriesSettings chart={ this.props.chart } edit={ this.props.edit } />
117119
) }
118120

119121
{ ( 0 <= [ 'pie' ].indexOf( type ) ) && (
120122
<SlicesSettings chart={ this.props.chart } edit={ this.props.edit } />
121123
) }
122124

123-
<LayoutAndChartArea chart={ this.props.chart } edit={ this.props.edit } />
125+
{ ( -1 >= [ 'dataTable' ].indexOf( type ) ) && (
126+
<LayoutAndChartArea chart={ this.props.chart } edit={ this.props.edit } />
127+
) }
124128

125129
<FrontendActions chart={ this.props.chart } edit={ this.props.edit } />
126130

127-
<ManualConfiguration chart={ this.props.chart } edit={ this.props.edit } />
128-
131+
{ ( -1 >= [ 'dataTable' ].indexOf( type ) ) && (
132+
<ManualConfiguration chart={ this.props.chart } edit={ this.props.edit } />
133+
) }
129134
</Fragment>
130135
);
131136
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ class GeneralSettings extends Component {
5757
} }
5858
/>
5959

60-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
60+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline', 'dataTable' ].indexOf( type ) ) && (
6161
<SelectControl
6262
label={ __( 'Chart Title Position' ) }
6363
help={ __( 'Where to place the chart title, compared to the chart area.' ) }
@@ -74,7 +74,7 @@ class GeneralSettings extends Component {
7474
/>
7575
) }
7676

77-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'timeline' ].indexOf( type ) ) && (
77+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'timeline', 'dataTable' ].indexOf( type ) ) && (
7878
<BaseControl
7979
label={ __( 'Chart Title Color' ) }
8080
>
@@ -88,7 +88,7 @@ class GeneralSettings extends Component {
8888
</BaseControl>
8989
) }
9090

91-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
91+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline', 'dataTable' ].indexOf( type ) ) && (
9292
<SelectControl
9393
label={ __( 'Axes Titles Position' ) }
9494
help={ __( 'Determines where to place the axis titles, compared to the chart area.' ) }
@@ -107,7 +107,7 @@ class GeneralSettings extends Component {
107107

108108
</PanelBody>
109109

110-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
110+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline', 'dataTable' ].indexOf( type ) ) && (
111111
<PanelBody
112112
title={ __( 'Font Styles' ) }
113113
className="visualizer-inner-sections"
@@ -167,7 +167,7 @@ class GeneralSettings extends Component {
167167
</PanelBody>
168168
) }
169169

170-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'timeline' ].indexOf( type ) ) && (
170+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'timeline', 'dataTable' ].indexOf( type ) ) && (
171171
<PanelBody
172172
title={ __( 'Legend' ) }
173173
className="visualizer-inner-sections"
@@ -230,7 +230,7 @@ class GeneralSettings extends Component {
230230
</PanelBody>
231231
) }
232232

233-
{ ( -1 >= [ 'table', 'gauge', 'geo' ].indexOf( type ) ) && (
233+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'dataTable' ].indexOf( type ) ) && (
234234
<PanelBody
235235
title={ __( 'Tooltip' ) }
236236
className="visualizer-inner-sections"
@@ -282,7 +282,7 @@ class GeneralSettings extends Component {
282282
</PanelBody>
283283
) }
284284

285-
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
285+
{ ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline', 'dataTable' ].indexOf( type ) ) && (
286286
<PanelBody
287287
title={ __( 'Animation' ) }
288288
className="visualizer-inner-sections"

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

Lines changed: 88 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,37 +21,102 @@ class TableSettings extends Component {
2121

2222
const settings = this.props.chart['visualizer-settings'];
2323

24+
const type = this.props.chart['visualizer-chart-type'];
25+
2426
return (
2527
<PanelBody
2628
title={ __( 'Table Settings' ) }
2729
initialOpen={ false }
2830
className="visualizer-advanced-panel"
2931
>
3032

31-
<SelectControl
32-
label={ __( 'Enable Pagination' ) }
33-
help={ __( 'To enable paging through the data.' ) }
34-
value={ settings.page ? settings.page : 'disable' }
35-
options={ [
36-
{ label: __( 'Enable' ), value: 'enable' },
37-
{ label: __( 'Disable' ), value: 'disable' }
38-
] }
39-
onChange={ e => {
40-
settings.page = e;
41-
this.props.edit( settings );
42-
} }
43-
/>
33+
{ ( 'dataTable' === type ) ? (
34+
<CheckboxControl
35+
label={ __( 'Enable Pagination' ) }
36+
help={ __( 'To enable paging through the data.' ) }
37+
checked={ 'true' === settings.paging_bool ? true : false }
38+
onChange={ e => {
39+
settings.paging_bool = 'true'; // eslint-disable-line camelcase
40+
if ( ! e ) {
41+
settings.paging_bool = 'false'; // eslint-disable-line camelcase
42+
}
43+
this.props.edit( settings );
44+
} }
45+
/>
46+
) : (
47+
<SelectControl
48+
label={ __( 'Enable Pagination' ) }
49+
help={ __( 'To enable paging through the data.' ) }
50+
value={ settings.page ? settings.page : 'disable' }
51+
options={ [
52+
{ label: __( 'Enable' ), value: 'enable' },
53+
{ label: __( 'Disable' ), value: 'disable' }
54+
] }
55+
onChange={ e => {
56+
settings.page = e;
57+
this.props.edit( settings );
58+
} }
59+
/>
60+
) }
4461

45-
<TextControl
46-
label={ __( 'Number of rows per page' ) }
47-
help={ __( 'The number of rows in each page, when paging is enabled.' ) }
48-
type="number"
49-
value={ settings.pageSize }
50-
onChange={ e => {
51-
settings.pageSize = e;
52-
this.props.edit( settings );
53-
} }
54-
/>
62+
{ ( 'dataTable' === type ) ? (
63+
<TextControl
64+
label={ __( 'Number of rows per page' ) }
65+
help={ __( 'The number of rows in each page, when paging is enabled.' ) }
66+
type="number"
67+
value={ settings.pageLength_int }
68+
onChange={ e => {
69+
settings.pageLength_int = e; // eslint-disable-line camelcase
70+
this.props.edit( settings );
71+
} }
72+
/>
73+
) : (
74+
<TextControl
75+
label={ __( 'Number of rows per page' ) }
76+
help={ __( 'The number of rows in each page, when paging is enabled.' ) }
77+
type="number"
78+
value={ settings.pageSize }
79+
onChange={ e => {
80+
settings.pageSize = e;
81+
this.props.edit( settings );
82+
} }
83+
/>
84+
) }
85+
86+
{ ( 'dataTable' === type ) && (
87+
<SelectControl
88+
label={ __( 'Pagination type' ) }
89+
help={ __( 'TDetermines what type of pagination options to show.' ) }
90+
value={ settings.pagingType }
91+
options={ [
92+
{ label: __( 'Page number buttons only' ), value: 'numbers' },
93+
{ label: __( '\'Previous\' and \'Next\' buttons only' ), value: 'simple' },
94+
{ label: __( '\'Previous\' and \'Next\' buttons, plus page numbers' ), value: 'simple_numbers' },
95+
{ label: __( '\'First\', \'Previous\', \'Next\' and \'Last\' buttons' ), value: 'full' },
96+
{ label: __( '\'First\', \'Previous\', \'Next\' and \'Last\' buttons, plus page numbers' ), value: 'full_numbers' },
97+
{ label: __( '\'First\' and \'Last\' buttons, plus page numbers' ), value: 'first_last_numbers' }
98+
] }
99+
onChange={ e => {
100+
settings.pagingType = e;
101+
this.props.edit( settings );
102+
} }
103+
/>
104+
) }
105+
106+
{ ( 'dataTable' === type ) && (
107+
<CheckboxControl
108+
label={ __( 'Enable paging display length' ) }
109+
help={ __( 'Allow user to change the paging display length of the table.' ) }
110+
checked={ 'true' === settings.lengthChange_bool ? true : false }
111+
onChange={ e => {
112+
settings.lengthChange_bool = 'true'; // eslint-disable-line camelcase
113+
if ( ! e ) {
114+
settings.lengthChange_bool = 'false'; // eslint-disable-line camelcase
115+
}
116+
this.props.edit( settings );
117+
} }
118+
/>
119+
) }
55120

56121
<SelectControl
57122
label={ __( 'Disable Sort' ) }

0 commit comments

Comments
 (0)