← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/VerticalAxisSettings.js +36 -14 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 VerticalAxisSettings 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.vAxis.baselineColor }
	90	+ value={ settings.hAxis.baselineColor }
89	91	onChange={ e => {
90		- settings.vAxis.baselineColor = e;
	92	+ settings.hAxis.baselineColor = getColorCode( e );
91	93	this.props.edit( settings );
92	94	} }
93	95	/>
94	96	</BaseControl>
		@@ -99,15 +101,15 @@
99	101	<ColorPalette
100	102	value={ settings.vAxis.textStyle.color || settings.vAxis.textStyle }
101	103	onChange={ e => {
102	104	settings.vAxis.textStyle = {};
103		- settings.vAxis.textStyle.color = e;
	105	+ settings.vAxis.textStyle.color = getColorCode( e );
104	106	this.props.edit( settings );
105	107	} }
106	108	/>
107	109	</BaseControl>
108	110
109		- { ( -1 >= [ 'column' ].indexOf( type ) ) && (
	111	+ { ( -1 >= [ 'bar' ].indexOf( type ) ) && (
110	112	<Fragment>
111	113
112	114	<TextControl
113	115	label={ __( 'Number Format' ) }
		@@ -128,9 +130,9 @@
128	130	</p>
129	131
130	132	<p>
131	133	{ __( 'For date axis labels, this is a subset of the date formatting ' ) }
132		- <ExternalLink href="http://userguide.icu-project.org/formatparse/datetime#TOC-Date-Time-Format-Syntax">
	134	+ <ExternalLink href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax">
133	135	{ __( 'ICU date and time format.' ) }
134	136	</ExternalLink>
135	137	</p>
136	138
		@@ -150,11 +152,15 @@
150	152	>
151	153
152	154	<TextControl
153	155	label={ __( 'Count' ) }
154		- help={ __( 'The number of Vertical gridlines inside the chart area. Minimum value is 2. Specify -1 to automatically compute the number of gridlines.' ) }
155		- value={ settings.vAxis.gridlines.count }
	156	+ help={ __( 'The approximate number of vertical 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.' ) }
	157	+ value={ settings.vAxis.gridlines ? settings.vAxis.gridlines.count : '' }
156	158	onChange={ e => {
	159	+ if ( ! settings.vAxis.gridlines ) {
	160	+ settings.vAxis.gridlines = {};
	161	+ }
	162	+
157	163	settings.vAxis.gridlines.count = e;
158	164	this.props.edit( settings );
159	165	} }
160	166	/>
		@@ -162,10 +168,14 @@
162	168	<BaseControl
163	169	label={ __( 'Color' ) }
164	170	>
165	171	<ColorPalette
166		- value={ settings.vAxis.gridlines.color }
	172	+ value={ settings.vAxis.gridlines ? settings.vAxis.gridlines.color : '' }
167	173	onChange={ e => {
	174	+ if ( ! settings.vAxis.gridlines ) {
	175	+ settings.vAxis.gridlines = {};
	176	+ }
	177	+
168	178	settings.vAxis.gridlines.color = e;
169	179	this.props.edit( settings );
170	180	} }
171	181	/>
		@@ -180,11 +190,14 @@
180	190	>
181	191
182	192	<TextControl
183	193	label={ __( 'Count' ) }
184		- help={ __( 'The number of Vertical minor gridlines between two regular gridlines.' ) }
185		- value={ settings.vAxis.minorGridlines.count }
	194	+ help={ __( 'Specify 0 to disable the minor gridlines.' ) }
	195	+ value={ settings.vAxis.minorGridlines ? settings.vAxis.minorGridlines.count : '' }
186	196	onChange={ e => {
	197	+ if ( ! settings.vAxis.minorGridlines ) {
	198	+ settings.vAxis.minorGridlines = {};
	199	+ }
187	200	settings.vAxis.minorGridlines.count = e;
188	201	this.props.edit( settings );
189	202	} }
190	203	/>
		@@ -192,10 +205,13 @@
192	205	<BaseControl
193	206	label={ __( 'Color' ) }
194	207	>
195	208	<ColorPalette
196		- value={ settings.vAxis.minorGridlines.color }
	209	+ value={ settings.vAxis.minorGridlines ? settings.vAxis.minorGridlines.color : '' }
197	210	onChange={ e => {
	211	+ if ( ! settings.vAxis.minorGridlines ) {
	212	+ settings.vAxis.minorGridlines = {};
	213	+ }
198	214	settings.vAxis.minorGridlines.color = e;
199	215	this.props.edit( settings );
200	216	} }
201	217	/>
		@@ -211,10 +227,13 @@
211	227
212	228	<TextControl
213	229	label={ __( 'Maximun Value' ) }
214	230	help={ __( 'The maximum vertical data value to render.' ) }
215		- value={ settings.vAxis.viewWindow.max }
	231	+ value={ settings.vAxis.viewWindow ? settings.vAxis.viewWindow.max : '' }
216	232	onChange={ e => {
	233	+ if ( ! settings.vAxis.viewWindow ) {
	234	+ settings.vAxis.viewWindow = {};
	235	+ }
217	236	settings.vAxis.viewWindow.max = e;
218	237	this.props.edit( settings );
219	238	} }
220	239	/>
		@@ -221,10 +240,13 @@
221	240
222	241	<TextControl
223	242	label={ __( 'Minimum Value' ) }
224	243	help={ __( 'The minimum vertical data value to render.' ) }
225		- value={ settings.vAxis.viewWindow.min }
	244	+ value={ settings.vAxis.viewWindow ? settings.vAxis.viewWindow.min : '' }
226	245	onChange={ e => {
	246	+ if ( ! settings.vAxis.viewWindow ) {
	247	+ settings.vAxis.viewWindow = {};
	248	+ }
227	249	settings.vAxis.viewWindow.min = e;
228	250	this.props.edit( settings );
229	251	} }
230	252	/>