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

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

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

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

222 lines 5.1 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 { ColorPalette } = wp.blockEditor \|\| wp.editor;
12
13	const {
14	BaseControl,
15	ExternalLink,
16	PanelBody,
17	TextControl
18	} = wp.components;
19
20	class GaugeSettings extends Component {
21	constructor() {
22	super( ...arguments );
23	}
24
25	render() {
26
27	const settings = this.props.chart['visualizer-settings'];
28
29	return (
30	<PanelBody
31	title={ __( 'Gauge Settings' ) }
32	initialOpen={ false }
33	className="visualizer-advanced-panel"
34	>
35
36	<PanelBody
37	title={ __( 'Tick Settings' ) }
38	className="visualizer-inner-sections"
39	initialOpen={ false }
40	>
41
42	<TextControl
43	label={ __( 'Minimum Values' ) }
44	help={ __( 'Determines the minimum values of gauge.' ) }
45	value={ settings.min }
46	onChange={ e => {
47	settings.min = e;
48	this.props.edit( settings );
49	} }
50	/>
51
52	<TextControl
53	label={ __( 'Maximum Values' ) }
54	help={ __( 'Determines the maximum values of gauge.' ) }
55	value={ settings.max }
56	onChange={ e => {
57	settings.max = e;
58	this.props.edit( settings );
59	} }
60	/>
61
62	<TextControl
63	label={ __( 'Minor Ticks' ) }
64	help={ __( 'The number of minor tick section in each major tick section.' ) }
65	value={ settings.minorTicks }
66	onChange={ e => {
67	settings.minorTicks = e;
68	this.props.edit( settings );
69	} }
70	/>
71
72	<Fragment>
73
74	<TextControl
75	label={ __( 'Number Format' ) }
76	help={ __( 'Enter custom format pattern to apply to this series value.' ) }
77	value={ settings.series[0].format }
78	onChange={ e => {
79	settings.series[0].format = e;
80	this.props.edit( settings );
81	} }
82	/>
83
84	<p>
85	{ __( 'For number axis labels, this is a subset of the formatting ' ) }
86	<ExternalLink href="http://icu-project.org/apiref/icu4c/classDecimalFormat.html#_details">
87	{ __( 'ICU pattern set.' ) }
88	</ExternalLink>
89	{ __( ' For instance, $#,###.## will display values $1,234.56 for value 1234.56. Pay attention that if you use #%% percentage format then your values will be multiplied by 100.' ) }
90	</p>
91
92	</Fragment>
93
94	</PanelBody>
95
96	<PanelBody
97	title={ __( 'Green Color' ) }
98	className="visualizer-inner-sections"
99	initialOpen={ false }
100	>
101
102	<TextControl
103	label={ __( 'Minimum Range' ) }
104	help={ __( 'The lowest values for a range marked by a green color.' ) }
105	value={ settings.greenFrom }
106	onChange={ e => {
107	settings.greenFrom = e;
108	this.props.edit( settings );
109	} }
110	/>
111
112	<TextControl
113	label={ __( 'Maximum Range' ) }
114	help={ __( 'The highest values for a range marked by a green color.' ) }
115	value={ settings.greenTo }
116	onChange={ e => {
117	settings.greenTo = e;
118	this.props.edit( settings );
119	} }
120	/>
121
122	<BaseControl
123	label={ __( 'Green Color' ) }
124	>
125	<ColorPalette
126	value={ settings.greenColor }
127	onChange={ e => {
128	settings.greenColor = e;
129	this.props.edit( settings );
130	} }
131	/>
132	</BaseControl>
133
134	</PanelBody>
135
136	<PanelBody
137	title={ __( 'Yellow Color' ) }
138	className="visualizer-inner-sections"
139	initialOpen={ false }
140	>
141
142	<TextControl
143	label={ __( 'Minimum Range' ) }
144	help={ __( 'The lowest values for a range marked by a yellow color.' ) }
145	value={ settings.yellowFrom }
146	onChange={ e => {
147	settings.yellowFrom = e;
148	this.props.edit( settings );
149	} }
150	/>
151
152	<TextControl
153	label={ __( 'Maximum Range' ) }
154	help={ __( 'The highest values for a range marked by a yellow color.' ) }
155	value={ settings.yellowTo }
156	onChange={ e => {
157	settings.yellowTo = e;
158	this.props.edit( settings );
159	} }
160	/>
161
162	<BaseControl
163	label={ __( 'Yellow Color' ) }
164	>
165	<ColorPalette
166	value={ settings.yellowColor }
167	onChange={ e => {
168	settings.yellowColor = e;
169	this.props.edit( settings );
170	} }
171	/>
172	</BaseControl>
173
174	</PanelBody>
175
176	<PanelBody
177	title={ __( 'Red Color' ) }
178	className="visualizer-inner-sections"
179	initialOpen={ false }
180	>
181
182	<TextControl
183	label={ __( 'Minimum Range' ) }
184	help={ __( 'The lowest values for a range marked by a red color.' ) }
185	value={ settings.redFrom }
186	onChange={ e => {
187	settings.redFrom = e;
188	this.props.edit( settings );
189	} }
190	/>
191
192	<TextControl
193	label={ __( 'Maximum Range' ) }
194	help={ __( 'The highest values for a range marked by a red color.' ) }
195	value={ settings.redTo }
196	onChange={ e => {
197	settings.redTo = e;
198	this.props.edit( settings );
199	} }
200	/>
201
202	<BaseControl
203	label={ __( 'Red Color' ) }
204	>
205	<ColorPalette
206	value={ settings.redColor }
207	onChange={ e => {
208	settings.redColor = e;
209	this.props.edit( settings );
210	} }
211	/>
212	</BaseControl>
213
214	</PanelBody>
215
216	</PanelBody>
217	);
218	}
219	}
220
221	export default GaugeSettings;
222