← All changes | classes/Visualizer/Gutenberg/src/Components/Sidebar/GeneralSettings.js +38 -20 3.1.1 → 3.7.1 View file →

		@@ -4,9 +4,9 @@
4	4	const { __ } = wp.i18n;
5	5
6	6	const { Component } = wp.element;
7	7
8		-const { ColorPalette } = wp.editor;
	8	+const { ColorPalette } = wp.blockEditor || wp.editor;
9	9
10	10	const {
11	11	BaseControl,
12	12	CheckboxControl,
		@@ -33,8 +33,31 @@
33	33	}
34	34
35	35	tooltipTriggers[2] = { label: __( 'The tooltip will not be displayed' ), value: 'none' };
36	36
	37	+ let positions = [
	38	+ { label: __( 'Left of the chart' ), value: 'left' },
	39	+ { label: __( 'Right of the chart' ), value: 'right' },
	40	+ { label: __( 'Above the chart' ), value: 'top' },
	41	+ { label: __( 'Below the chart' ), value: 'bottom' },
	42	+ { label: __( 'Omit the legend' ), value: 'none' }
	43	+ ];
	44	+
	45	+ if ( 'pie' !== type ) {
	46	+ positions.push({ label: __( 'Inside the chart' ), value: 'in' });
	47	+ }
	48	+
	49	+ if ( 'bubble' === type ) {
	50	+ positions = positions.filter( function( obj ) {
	51	+ return 'left' !== obj.value;
	52	+ });
	53	+ }
	54	+
	55	+ let titleHelp = __( 'Text to display above the chart.' );
	56	+ if ( 0 <= [ 'tabular', 'dataTable', 'gauge', 'geo', 'timeline' ].indexOf( type ) ) {
	57	+ titleHelp = __( 'Text to display in the back-end admin area' );
	58	+ }
	59	+
37	60	return (
38	61	<PanelBody
39	62	title={ __( 'General Settings' ) }
40	63	initialOpen={ false }
		@@ -48,9 +71,9 @@
48	71	>
49	72
50	73	<TextControl
51	74	label={ __( 'Chart Title' ) }
52		- help={ __( 'Text to display above the chart.' ) }
	75	+ help={ titleHelp }
53	76	value={ settings.title }
54	77	onChange={ e => {
55	78	settings.title = e;
56	79	this.props.edit( settings );
		@@ -56,9 +79,9 @@
56	79	this.props.edit( settings );
57	80	} }
58	81	/>
59	82
60		- { ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
	83	+ { ( -1 >= [ 'tabular', 'dataTable', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
61	84	<SelectControl
62	85	label={ __( 'Chart Title Position' ) }
63	86	help={ __( 'Where to place the chart title, compared to the chart area.' ) }
64	87	value={ settings.titlePosition ? settings.titlePosition : 'out' }
		@@ -73,9 +96,9 @@
73	96	} }
74	97	/>
75	98	) }
76	99
77		- { ( -1 >= [ 'table', 'gauge', 'geo', 'timeline' ].indexOf( type ) ) && (
	100	+ { ( -1 >= [ 'tabular', 'dataTable', 'gauge', 'geo', 'timeline' ].indexOf( type ) ) && (
78	101	<BaseControl
79	102	label={ __( 'Chart Title Color' ) }
80	103	>
81	104	<ColorPalette
		@@ -87,9 +110,9 @@
87	110	/>
88	111	</BaseControl>
89	112	) }
90	113
91		- { ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
	114	+ { ( -1 >= [ 'tabular', 'dataTable', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
92	115	<SelectControl
93	116	label={ __( 'Axes Titles Position' ) }
94	117	help={ __( 'Determines where to place the axis titles, compared to the chart area.' ) }
95	118	value={ settings.axisTitlesPosition ? settings.axisTitlesPosition : 'out' }
		@@ -106,9 +129,9 @@
106	129	) }
107	130
108	131	</PanelBody>
109	132
110		- { ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
	133	+ { ( -1 >= [ 'tabular', 'dataTable', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
111	134	<PanelBody
112	135	title={ __( 'Font Styles' ) }
113	136	className="visualizer-inner-sections"
114	137	initialOpen={ false }
		@@ -166,9 +189,9 @@
166	189
167	190	</PanelBody>
168	191	) }
169	192
170		- { ( -1 >= [ 'table', 'gauge', 'geo', 'timeline' ].indexOf( type ) ) && (
	193	+ { ( -1 >= [ 'tabular', 'dataTable', 'gauge', 'geo', 'timeline' ].indexOf( type ) ) && (
171	194	<PanelBody
172	195	title={ __( 'Legend' ) }
173	196	className="visualizer-inner-sections"
174	197	initialOpen={ false }
		@@ -177,23 +200,18 @@
177	200	<SelectControl
178	201	label={ __( 'Position' ) }
179	202	help={ __( 'Determines where to place the legend, compared to the chart area.' ) }
180	203	value={ settings.legend.position ? settings.legend.position : 'right' }
181		- options={ [
182		- { label: __( 'Left of the chart' ), value: 'left' },
183		- { label: __( 'Right of the chart' ), value: 'right' },
184		- { label: __( 'Above the chart' ), value: 'top' },
185		- { label: __( 'Below the chart' ), value: 'bottom' },
186		- { label: __( 'Inside the chart' ), value: 'in' },
187		- { label: __( 'Omit the legend' ), value: 'none' }
188		- ] }
	204	+ options={ positions }
189	205	onChange={ e => {
190	206	if ( 'pie' !== type ) {
191	207	let axis = 'left' === e ? 1 : 0;
192	208
193		- Object.keys( settings.series ).map( i => {
194		- settings.series[i].targetAxisIndex = axis;
195		- });
	209	+ if ( settings.series ) {
	210	+ Object.keys( settings.series ).map( i => {
	211	+ settings.series[i].targetAxisIndex = axis;
	212	+ });
	213	+ }
196	214	}
197	215
198	216	settings.legend.position = e;
199	217	this.props.edit( settings );
		@@ -229,9 +247,9 @@
229	247
230	248	</PanelBody>
231	249	) }
232	250
233		- { ( -1 >= [ 'table', 'gauge', 'geo' ].indexOf( type ) ) && (
	251	+ { ( -1 >= [ 'tabular', 'gauge', 'geo', 'dataTable', 'timeline' ].indexOf( type ) ) && (
234	252	<PanelBody
235	253	title={ __( 'Tooltip' ) }
236	254	className="visualizer-inner-sections"
237	255	initialOpen={ false }
		@@ -281,9 +299,9 @@
281	299
282	300	</PanelBody>
283	301	) }
284	302
285		- { ( -1 >= [ 'table', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
	303	+ { ( -1 >= [ 'tabular', 'dataTable', 'gauge', 'geo', 'pie', 'timeline' ].indexOf( type ) ) && (
286	304	<PanelBody
287	305	title={ __( 'Animation' ) }
288	306	className="visualizer-inner-sections"
289	307	initialOpen={ false }