PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.9.6
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.9.6
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
visualizer / classes / Visualizer / Gutenberg / src / Components / Sidebar / SeriesSettings.js

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

269 lines 7.6 KB
No matching file
Up and down to move Enter to open Esc to close
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 SelectControl,
18 TextControl
19 } = wp.components;
20
21 class SeriesSettings extends Component {
22 constructor() {
23 super( ...arguments );
24 }
25
26 componentDidMount() {
27
28 /**
29 * We use deep-clean to remove all empty properties which causes a major issue with Series Settings.
30 * So add a dummy property to make sure `series` object isn't empty.
31 * Should be removed before saving the data.
32 */
33 const settings = this.props.chart['visualizer-settings'];
34
35 Object.keys( settings.series )
36 .map( i => {
37 if ( settings.series[i] !== undefined ) {
38 settings.series[i].temp = 1;
39 }
40 }
41 );
42
43 this.props.edit( settings );
44 }
45
46 render() {
47
48 const type = this.props.chart['visualizer-chart-type'];
49
50 const settings = this.props.chart['visualizer-settings'];
51
52 const series = this.props.chart['visualizer-series'];
53
54 return (
55 <PanelBody
56 title={ __( 'Series Settings' ) }
57 initialOpen={ false }
58 className="visualizer-advanced-panel"
59 >
60
61 { Object.keys( settings.series )
62 .map( ( i, index ) => {
63 let indexToFormat = parseInt( i );
64 let label = series[i].label || '';
65 let type = series[i].type || '';
66 let timer = 0;
67 if ( 'tabular' !== type ) {
68 indexToFormat = index;
69 }
70
71 i++;
72
73 return (
74 <PanelBody
75 title={ label }
76 className="visualizer-inner-sections"
77 initialOpen={ false }
78 >
79
80 { ( -1 >= [ 'tabular', 'pie' ].indexOf( type ) ) && (
81 <SelectControl
82 label={ __( 'Visible In Legend' ) }
83 help={ __( 'Determines whether the series has to be presented in the legend or not.' ) }
84 value={ settings.series[index].visibleInLegend ? settings.series[index].visibleInLegend : '1' }
85 options={ [
86 { label: __( 'Yes' ), value: '1' },
87 { label: __( 'No' ), value: '0' }
88 ] }
89 onChange={ e => {
90 settings.series[index].visibleInLegend = e;
91 this.props.edit( settings );
92 } }
93 />
94 ) }
95
96 { ( -1 >= [ 'tabular', 'candlestick', 'combo', 'column', 'bar' ].indexOf( type ) ) && (
97
98 <Fragment>
99
100 <TextControl
101 label={ __( 'Line Width' ) }
102 help={ __( 'Overrides the global line width value for this series.' ) }
103 value={ settings.series[index].lineWidth }
104 onChange={ e => {
105 settings.series[index].lineWidth = e;
106 this.props.edit( settings );
107 } }
108 onKeyUp={ e => {
109 clearTimeout( timer );
110 timer = setTimeout( () => {
111 if ( '' != settings.series[index].lineWidth && 0 >= settings.series[index].lineWidth ) {
112 settings.series[index].lineWidth = '0.1';
113 this.props.edit( settings );
114 }
115 }, 700 );
116 } }
117 />
118
119 <TextControl
120 label={ __( 'Point Size' ) }
121 help={ __( 'Overrides the global point size value for this series.' ) }
122 value={ settings.series[index].pointSize }
123 onChange={ e => {
124 settings.series[index].pointSize = e;
125 this.props.edit( settings );
126 } }
127 />
128
129 </Fragment>
130
131 ) }
132
133 { ( -1 >= [ 'candlestick' ].indexOf( type ) ) &&
134
135 ( type && 'number' === type ) ? (
136
137 <Fragment>
138
139 <TextControl
140 label={ __( 'Format' ) }
141 help={ __( 'Enter custom format pattern to apply to this series value.' ) }
142 value={ settings.series[indexToFormat].format }
143 onChange={ e => {
144 settings.series[indexToFormat].format = e;
145 this.props.edit( settings );
146 } }
147 />
148
149 <p>
150 { __( 'For number axis labels, this is a subset of the formatting ' ) }
151 <ExternalLink href="http://icu-project.org/apiref/icu4c/classDecimalFormat.html#_details">
152 { __( 'ICU pattern set.' ) }
153 </ExternalLink>
154 { __( ' 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.' ) }
155 </p>
156
157 </Fragment>
158
159 ) :
160
161 ( 0 <= [ 'date', 'datetime', 'timeofday' ].indexOf( type ) ) && (
162
163 <Fragment>
164
165 <TextControl
166 label={ __( 'Date Format' ) }
167 help={ __( 'Enter custom format pattern to apply to this series value.' ) }
168 placeholder="dd LLLL yyyy"
169 value={ settings.series[indexToFormat].format }
170 onChange={ e => {
171 settings.series[indexToFormat].format = e;
172 this.props.edit( settings );
173 } }
174 />
175
176 <p>
177 { __( 'This is a subset of the date formatting ' ) }
178 <ExternalLink href="https://unicode-org.github.io/icu/userguide/format_parse/datetime/#datetime-format-syntax">
179 { __( 'ICU date and time format.' ) }
180 </ExternalLink>
181 </p>
182
183 </Fragment>
184
185 )
186
187 }
188
189 { ( 0 <= [ 'scatter', 'line' ].indexOf( type ) ) && (
190
191 <SelectControl
192 label={ __( 'Curve Type' ) }
193 help={ __( 'Determines whether the series has to be presented in the legend or not.' ) }
194 value={ settings.series[index].curveType ? settings.series[index].curveType : 'none' }
195 options={ [
196 { label: __( 'Straight line without curve' ), value: 'none' },
197 { label: __( 'The angles of the line will be smoothed' ), value: 'function' }
198 ] }
199 onChange={ e => {
200 settings.series[index].curveType = e;
201 this.props.edit( settings );
202 } }
203 />
204
205 ) }
206
207 { ( 0 <= [ 'area' ].indexOf( type ) ) && (
208
209 <TextControl
210 label={ __( 'Area Opacity' ) }
211 help={ __( 'The opacity of the colored area, where 0.0 is fully transparent and 1.0 is fully opaque.' ) }
212 value={ settings.series[index].areaOpacity }
213 onChange={ e => {
214 settings.series[index].areaOpacity = e;
215 this.props.edit( settings );
216 } }
217 />
218
219 ) }
220
221 { ( 0 <= [ 'combo' ].indexOf( type ) ) && (
222
223 <SelectControl
224 label={ __( 'Chart Type' ) }
225 help={ __( 'Select the type of chart to show for this series.' ) }
226 value={ settings.series[index].type ? settings.series[index].type : 'area' }
227 options={ [
228 { label: __( 'Area' ), value: 'area' },
229 { label: __( 'Bar' ), value: 'bars' },
230 { label: __( 'Candlesticks' ), value: 'candlesticks' },
231 { label: __( 'Line' ), value: 'line' },
232 { label: __( 'Stepped Area' ), value: 'steppedArea' }
233 ] }
234 onChange={ e => {
235 settings.series[index].type = e;
236 this.props.edit( settings );
237 } }
238 />
239
240 ) }
241
242 { ( -1 >= [ 'tabular' ].indexOf( type ) ) && (
243
244 <BaseControl
245 label={ __( 'Color' ) }
246 >
247 <ColorPalette
248 value={ settings.series[index].color }
249 onChange={ e => {
250 settings.series[index].color = e;
251 this.props.edit( settings );
252 } }
253 />
254 </BaseControl>
255
256 ) }
257
258 </PanelBody>
259 );
260 }
261 ) }
262
263 </PanelBody>
264 );
265 }
266 }
267
268 export default SeriesSettings;
269