Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.5.1

Visualizer – Tables & Charts Manager with Built-in AI Generator v3.5.1

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

ColumnSettings.js in Visualizer – Tables & Charts Manager with Built-in AI Generator 3.5.1, at classes/Visualizer/Gutenberg/src/Components/Sidebar/ColumnSettings.js

229 lines 6.6 KB

Raw Download Zip

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	if ( ! settings.series ) {
32	return;
33	}
34
35	Object.keys( settings.series )
36	.map( i => {
37	if ( settings.series[i] !== undefined ) {
38	settings.series[i].temp = 1;
39	}
40	}
41	);
42
43	this.props.edit( settings );
44	}
45
46	render() {
47
48	const settings = this.props.chart['visualizer-settings'];
49
50	const series = this.props.chart['visualizer-series'];
51
52	const type = this.props.chart['visualizer-chart-type'];
53
54	if ( ! settings.series ) {
55	return null;
56	}
57
58	return (
59	<PanelBody
60	title={ __( 'Column Settings' ) }
61	initialOpen={ false }
62	className="visualizer-advanced-panel"
63	>
64
65	{ Object.keys( settings.series )
66	.map( ( i ) => {
67
68	// don't show string columns.
69	if ( 'string' === series[i].type ) {
70	return null;
71	}
72
73	return (
74	<PanelBody
75	title={ series[i].label }
76	className="visualizer-inner-sections"
77	initialOpen={ false }
78	>
79
80	{ 0 <= [ 'date', 'datetime', 'timeofday' ].indexOf( series[i].type ) && (
81	<Fragment>
82	<TextControl
83	label={ __( 'Display Date Format' ) }
84	help={ __( 'Enter custom format pattern to apply to this series value.' ) }
85	value={ settings.series[i].format ? settings.series[i].format.to : '' }
86	onChange={ e => {
87	if ( ! settings.series[i].format ) {
88	settings.series[i].format = {};
89	}
90	settings.series[i].format.to = e;
91	this.props.edit( settings );
92	} }
93	/>
94
95	<TextControl
96	label={ __( 'Source Date Format' ) }
97	help={ __( 'What format is the source date in?' ) }
98	value={ settings.series[i].format ? settings.series[i].format.from : '' }
99	onChange={ e => {
100	if ( ! settings.series[i].format ) {
101	settings.series[i].format = {};
102	}
103	settings.series[i].format.from = e;
104	this.props.edit( settings );
105	} }
106	/>
107
108	<p>
109	{ __( 'You can find more info on ' ) }
110	<ExternalLink href="https://momentjs.com/docs/#/displaying/">
111	{ __( 'date and time formats here.' ) }
112	</ExternalLink>
113	</p>
114	</Fragment>
115	) }
116
117	{ ( 'number' === series[i].type ) && (
118	<Fragment>
119	<TextControl
120	label={ __( 'Thousands Separator' ) }
121	value={ settings.series[i].format ? settings.series[i].format.thousands : '' }
122	onChange={ e => {
123	if ( ! settings.series[i].format ) {
124	settings.series[i].format = {};
125	}
126	settings.series[i].format.thousands = e;
127	this.props.edit( settings );
128	} }
129	/>
130
131	<TextControl
132	label={ __( 'Decimal Separator' ) }
133	value={ settings.series[i].format ? settings.series[i].format.decimal : '' }
134	onChange={ e => {
135	if ( ! settings.series[i].format ) {
136	settings.series[i].format = {};
137	}
138	settings.series[i].format.decimal = e;
139	this.props.edit( settings );
140	} }
141	/>
142
143	<TextControl
144	label={ __( 'Precision' ) }
145	help={ __( 'Round values to how many decimal places?' ) }
146	value={ settings.series[i].format ? settings.series[i].format.precision : '' }
147	type="number"
148	min="0"
149	onChange={ e => {
150	if ( 100 < e ) {
151	return;
152	}
153
154	if ( ! settings.series[i].format ) {
155	settings.series[i].format = {};
156	}
157	settings.series[i].format.precision = e;
158	this.props.edit( settings );
159	} }
160	/>
161
162	<TextControl
163	label={ __( 'Prefix' ) }
164	value={ settings.series[i].format ? settings.series[i].format.prefix : '' }
165	onChange={ e => {
166	if ( ! settings.series[i].format ) {
167	settings.series[i].format = {};
168	}
169	settings.series[i].format.prefix = e;
170	this.props.edit( settings );
171	} }
172	/>
173
174	<TextControl
175	label={ __( 'Suffix' ) }
176	value={ settings.series[i].format ? settings.series[i].format.suffix : '' }
177	onChange={ e => {
178	if ( ! settings.series[i].format ) {
179	settings.series[i].format = {};
180	}
181	settings.series[i].format.suffix = e;
182	this.props.edit( settings );
183	} }
184	/>
185	</Fragment>
186	) }
187
188	{ ( 'boolean' === series[i].type ) && (
189	<Fragment>
190	<TextControl
191	label={ __( 'Truthy value' ) }
192	help= { __( 'Provide the HTML entity code for the value the table should display when the value of the column is true. e.g. tick mark (Code: ✔) instead of true' ) }
193	value={ settings.series[i].format ? settings.series[i].format.truthy : '' }
194	onChange={ e => {
195	if ( ! settings.series[i].truthy ) {
196	settings.series[i].truthy = {};
197	}
198	settings.series[i].format.truthy = e;
199	this.props.edit( settings );
200	} }
201	/>
202	<TextControl
203	label={ __( 'Falsy value' ) }
204	help= { __( 'Provide the HTML entity code for the value the table should display when the value of the column is false. e.g. cross mark (Code: ✖) instead of false' ) }
205	value={ settings.series[i].format ? settings.series[i].format.falsy : '' }
206	onChange={ e => {
207	if ( ! settings.series[i].falsy ) {
208	settings.series[i].falsy = {};
209	}
210	settings.series[i].format.falsy = e;
211	this.props.edit( settings );
212	} }
213	/>
214
215	</Fragment>
216	) }
217
218	</PanelBody>
219	);
220	}
221	) }
222
223	</PanelBody>
224	);
225	}
226	}
227
228	export default ColumnSettings;
229