← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/HorizontalAxisSettings.js +35 -13 3.1.1 → 3.9.2 View file →

		@@ -7,9 +7,9 @@
7	7	Component,
8	8	Fragment
9	9	} = wp.element;
10	10
11		-const { ColorPalette } = wp.editor;
	11	+const { ColorPalette } = wp.blockEditor || wp.editor;
12	12
13	13	const {
14	14	BaseControl,
15	15	ExternalLink,
		@@ -17,8 +17,10 @@
17	17	SelectControl,
18	18	TextControl
19	19	} = wp.components;
20	20
	21	+import { getColorCode } from '../../utils.js';
	22	+
21	23	class HorizontalAxisSettings extends Component {
22	24	constructor() {
23	25	super( ...arguments );
24	26	}
		@@ -84,11 +86,11 @@
84	86	<BaseControl
85	87	label={ __( 'Base Line Color' ) }
86	88	>
87	89	<ColorPalette
88		- value={ settings.hAxis.baselineColor }
	90	+ value={ settings.vAxis.baselineColor }
89	91	onChange={ e => {
90		- settings.hAxis.baselineColor = e;
	92	+ settings.vAxis.baselineColor = getColorCode( e );
91	93	this.props.edit( settings );
92	94	} }
93	95	/>
94	96	</BaseControl>
		@@ -99,9 +101,9 @@
99	101	<ColorPalette
100	102	value={ settings.hAxis.textStyle.color || settings.hAxis.textStyle }
101	103	onChange={ e => {
102	104	settings.hAxis.textStyle = {};
103		- settings.hAxis.textStyle.color = e;
	105	+ settings.hAxis.textStyle.color = getColorCode( e );
104	106	this.props.edit( settings );
105	107	} }
106	108	/>
107	109	</BaseControl>
		@@ -127,9 +129,9 @@
127	129	</p>
128	130
129	131	<p>
130	132	{ __( 'For date axis labels, this is a subset of the date formatting ' ) }
131		- <ExternalLink href="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax">
	133	+ <ExternalLink href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax">
132	134	{ __( 'ICU date and time format.' ) }
133	135	</ExternalLink>
134	136	</p>
135	137	</Fragment>
		@@ -148,11 +150,15 @@
148	150	>
149	151
150	152	<TextControl
151	153	label={ __( 'Count' ) }
152		- 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 }
	154	+ help={ __( 'The approximate number of horizontal gridlines inside the chart area. You can specify a value of -1 to automatically compute the number of gridlines, 0 or 1 to draw no gridlines, or 2 or more to only draw gridline. Any number greater than 2 will be used to compute the minSpacing between gridlines.' ) }
	155	+ value={ settings.hAxis.gridlines ? settings.hAxis.gridlines.count : '' }
154	156	onChange={ e => {
	157	+ if ( ! settings.hAxis.gridlines ) {
	158	+ settings.hAxis.gridlines = {};
	159	+ }
	160	+
155	161	settings.hAxis.gridlines.count = e;
156	162	this.props.edit( settings );
157	163	} }
158	164	/>
		@@ -160,10 +166,14 @@
160	166	<BaseControl
161	167	label={ __( 'Color' ) }
162	168	>
163	169	<ColorPalette
164		- value={ settings.hAxis.gridlines.color }
	170	+ value={ settings.hAxis.gridlines ? settings.hAxis.gridlines.color : '' }
165	171	onChange={ e => {
	172	+ if ( ! settings.hAxis.gridlines ) {
	173	+ settings.hAxis.gridlines = {};
	174	+ }
	175	+
166	176	settings.hAxis.gridlines.color = e;
167	177	this.props.edit( settings );
168	178	} }
169	179	/>
		@@ -178,11 +188,14 @@
178	188	>
179	189
180	190	<TextControl
181	191	label={ __( 'Count' ) }
182		- help={ __( 'The number of horizontal minor gridlines between two regular gridlines.' ) }
183		- value={ settings.hAxis.minorGridlines.count }
	192	+ help={ __( 'Specify 0 to disable the minor gridlines.' ) }
	193	+ value={ settings.hAxis.minorGridlines ? settings.hAxis.minorGridlines.count : '' }
184	194	onChange={ e => {
	195	+ if ( ! settings.hAxis.minorGridlines ) {
	196	+ settings.hAxis.minorGridlines = {};
	197	+ }
185	198	settings.hAxis.minorGridlines.count = e;
186	199	this.props.edit( settings );
187	200	} }
188	201	/>
		@@ -190,10 +203,13 @@
190	203	<BaseControl
191	204	label={ __( 'Color' ) }
192	205	>
193	206	<ColorPalette
194		- value={ settings.hAxis.minorGridlines.color }
	207	+ value={ settings.hAxis.minorGridlines ? settings.hAxis.minorGridlines.color : '' }
195	208	onChange={ e => {
	209	+ if ( ! settings.hAxis.minorGridlines ) {
	210	+ settings.hAxis.minorGridlines = {};
	211	+ }
196	212	settings.hAxis.minorGridlines.color = e;
197	213	this.props.edit( settings );
198	214	} }
199	215	/>
		@@ -209,10 +225,13 @@
209	225
210	226	<TextControl
211	227	label={ __( 'Maximun Value' ) }
212	228	help={ __( 'The maximum vertical data value to render.' ) }
213		- value={ settings.hAxis.viewWindow.max }
	229	+ value={ settings.hAxis.viewWindow ? settings.hAxis.viewWindow.max : '' }
214	230	onChange={ e => {
	231	+ if ( ! settings.hAxis.viewWindow ) {
	232	+ settings.hAxis.viewWindow = {};
	233	+ }
215	234	settings.hAxis.viewWindow.max = e;
216	235	this.props.edit( settings );
217	236	} }
218	237	/>
		@@ -219,10 +238,13 @@
219	238
220	239	<TextControl
221	240	label={ __( 'Minimum Value' ) }
222	241	help={ __( 'The minimum vertical data value to render.' ) }
223		- value={ settings.hAxis.viewWindow.min }
	242	+ value={ settings.hAxis.viewWindow ? settings.hAxis.viewWindow.min : '' }
224	243	onChange={ e => {
	244	+ if ( ! settings.hAxis.viewWindow ) {
	245	+ settings.hAxis.viewWindow = {};
	246	+ }
225	247	settings.hAxis.viewWindow.min = e;
226	248	this.props.edit( settings );
227	249	} }
228	250	/>