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

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

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

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

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