@progress/kendo-angular-chart-wizard 16.9.0-develop.11 → 16.9.0-develop.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/chart-wizard-state.d.ts +23 -110
- package/chart-wizard.component.d.ts +5 -0
- package/common/get-wizard-data-from-data-rows.d.ts +2 -43
- package/esm2020/chart-wizard-state.mjs +23 -484
- package/esm2020/chart-wizard.component.mjs +20 -83
- package/esm2020/common/get-wizard-data-from-data-rows.mjs +2 -23
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/property-pane/data-tab.component.mjs +40 -23
- package/esm2020/property-pane/form-field.component.mjs +14 -5
- package/esm2020/property-pane/format-tab.component.mjs +37 -41
- package/esm2020/series-type-button.component.mjs +7 -4
- package/esm2020/state.service.mjs +3 -1
- package/fesm2015/progress-kendo-angular-chart-wizard.mjs +1780 -2292
- package/fesm2020/progress-kendo-angular-chart-wizard.mjs +1772 -2290
- package/package.json +17 -17
- package/property-pane/data-tab.component.d.ts +14 -10
- package/property-pane/form-field.component.d.ts +2 -2
- package/property-pane/format-tab.component.d.ts +39 -49
- package/series-type-button.component.d.ts +2 -2
- package/state.service.d.ts +3 -3
@@ -2,517 +2,56 @@
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
|
+
import { ChartWizardCommon } from '@progress/kendo-charts';
|
5
6
|
/**
|
6
7
|
* @hidden
|
7
8
|
*/
|
8
|
-
export const fontSizes =
|
9
|
-
{ text: '16', value: '16px' },
|
10
|
-
{ text: '20', value: '20px' },
|
11
|
-
{ text: '24', value: '24px' },
|
12
|
-
{ text: '48', value: '48px' },
|
13
|
-
{ text: '60', value: '60px' },
|
14
|
-
{ text: '96', value: '96px' },
|
15
|
-
];
|
9
|
+
export const fontSizes = ChartWizardCommon.fontSizes;
|
16
10
|
/**
|
17
11
|
* @hidden
|
18
12
|
*/
|
19
|
-
export const fontNames =
|
20
|
-
{ text: 'Arial', value: 'Arial, Helvetica, sans-serif',
|
21
|
-
style: { fontFamily: 'Arial, Helvetica, sans-serif' } },
|
22
|
-
{ text: 'Courier New', value: '\'Courier New\', Courier, monospace',
|
23
|
-
style: { fontFamily: '\'Courier New\', Courier, monospace' } },
|
24
|
-
{ text: 'Georgia', value: 'Georgia, serif',
|
25
|
-
style: { fontFamily: 'Georgia, serif' } },
|
26
|
-
{ text: 'Impact', value: 'Impact, Charcoal, sans-serif',
|
27
|
-
style: { fontFamily: 'Impact, Charcoal, sans-serif' } },
|
28
|
-
{ text: 'Lucida Console', value: '\'Lucida Console\', Monaco, monospace',
|
29
|
-
style: { fontFamily: '\'Lucida Console\', Monaco, monospace' } },
|
30
|
-
{ text: 'Tahoma', value: 'Tahoma, Geneva, sans-serif',
|
31
|
-
style: { fontFamily: 'Tahoma, Geneva, sans-serif' } },
|
32
|
-
{ text: 'Times New Roman', value: '\'Times New Roman\', Times,serif',
|
33
|
-
style: { fontFamily: '\'Times New Roman\', Times,serif' } },
|
34
|
-
{ text: 'Trebuchet MS', value: '\'Trebuchet MS\', Helvetica, sans-serif',
|
35
|
-
style: { fontFamily: '\'Trebuchet MS\', Helvetica, sans-serif' } },
|
36
|
-
{ text: 'Verdana', value: 'Verdana, Geneva, sans-serif',
|
37
|
-
style: { fontFamily: 'Verdana, Geneva, sans-serif' } }
|
38
|
-
];
|
13
|
+
export const fontNames = ChartWizardCommon.fontNames;
|
39
14
|
/**
|
40
15
|
* @hidden
|
41
16
|
*/
|
42
|
-
export const
|
43
|
-
{ text: 'Auto', value: 'auto' },
|
44
|
-
{ text: '0°', value: 0 },
|
45
|
-
{ text: '45°', value: 45 },
|
46
|
-
{ text: '90°', value: 90 },
|
47
|
-
{ text: '135°', value: 135 },
|
48
|
-
{ text: '180°', value: 180 }
|
49
|
-
];
|
17
|
+
export const createState = ChartWizardCommon.createState;
|
50
18
|
/**
|
51
19
|
* @hidden
|
52
20
|
*/
|
53
|
-
export const
|
54
|
-
{ text: 'Top', value: 'top' },
|
55
|
-
{ text: 'Bottom', value: 'bottom' },
|
56
|
-
{ text: 'Left', value: 'left' },
|
57
|
-
{ text: 'Right', value: 'right' }
|
58
|
-
];
|
59
|
-
const columnType = 'column';
|
60
|
-
const barType = 'bar';
|
61
|
-
const lineType = 'line';
|
62
|
-
const pieType = 'pie';
|
63
|
-
const scatterType = 'scatter';
|
64
|
-
const categoricalTypes = [columnType, barType, lineType, scatterType];
|
65
|
-
const scatterSeries = {
|
66
|
-
type: lineType,
|
67
|
-
width: 0
|
68
|
-
};
|
21
|
+
export const updateState = ChartWizardCommon.updateState;
|
69
22
|
/**
|
70
23
|
* @hidden
|
71
24
|
*/
|
72
|
-
export const
|
73
|
-
const categoryTypes = ['string', 'date', 'number'];
|
74
|
-
const valueTypes = ['number'];
|
75
|
-
const axesDefinitions = {
|
76
|
-
bar: [
|
77
|
-
{ axisType: 'category', types: categoryTypes },
|
78
|
-
{ axisType: 'value', types: valueTypes },
|
79
|
-
],
|
80
|
-
column: [
|
81
|
-
{ axisType: 'category', types: categoryTypes },
|
82
|
-
{ axisType: 'value', types: valueTypes },
|
83
|
-
],
|
84
|
-
line: [
|
85
|
-
{ axisType: 'category', types: categoryTypes },
|
86
|
-
{ axisType: 'value', types: valueTypes },
|
87
|
-
],
|
88
|
-
pie: [
|
89
|
-
{ axisType: 'category', types: categoryTypes },
|
90
|
-
{ axisType: 'value', types: valueTypes, count: 1 },
|
91
|
-
],
|
92
|
-
scatter: [
|
93
|
-
{ axisType: 'category', types: categoryTypes },
|
94
|
-
{ axisType: 'value', types: valueTypes }
|
95
|
-
]
|
96
|
-
};
|
97
|
-
const getFont = (font, size) => `${size || ''} ${font || ''}`.trim();
|
25
|
+
export const mergeStates = ChartWizardCommon.mergeStates;
|
98
26
|
/**
|
99
27
|
* @hidden
|
100
28
|
*/
|
101
|
-
export const
|
102
|
-
const spaceIndex = (font || '').indexOf(' ');
|
103
|
-
const size = font?.substring(0, spaceIndex);
|
104
|
-
const name = font?.substring(spaceIndex + 1);
|
105
|
-
return { size, name };
|
106
|
-
};
|
107
|
-
const updateFontName = (fontName, defaultSize, currentFont) => {
|
108
|
-
const { size } = parseFont(currentFont);
|
109
|
-
return fontName ? getFont(fontName, size || defaultSize) : '';
|
110
|
-
};
|
111
|
-
const updateFontSize = (fontSize, defaultFontName, currentFont) => {
|
112
|
-
const { name } = parseFont(currentFont);
|
113
|
-
return fontSize ? getFont(name || defaultFontName, fontSize) : '';
|
114
|
-
};
|
115
|
-
const getCategoryColumnIndex = (data, categoryDef) => {
|
116
|
-
const candidates = [];
|
117
|
-
const firstRecord = data[0].slice();
|
118
|
-
categoryDef.types.forEach((type) => {
|
119
|
-
firstRecord.forEach((item, i) => {
|
120
|
-
if (typeof item.value === type) {
|
121
|
-
candidates.push(i);
|
122
|
-
}
|
123
|
-
});
|
124
|
-
});
|
125
|
-
const result = candidates.findIndex((index) => {
|
126
|
-
const values = data.map((record) => record[index].value);
|
127
|
-
return new Set(values).size === values.length;
|
128
|
-
});
|
129
|
-
return Math.max(result, 0);
|
130
|
-
};
|
131
|
-
const getValueColumnIndexes = (data, valuesDef) => {
|
132
|
-
const candidates = [];
|
133
|
-
const firstRecord = data[0].slice();
|
134
|
-
valuesDef.forEach((def) => {
|
135
|
-
def.types.forEach((type) => {
|
136
|
-
firstRecord.forEach((item, i) => {
|
137
|
-
if (typeof item.value === type) {
|
138
|
-
candidates.push(i);
|
139
|
-
}
|
140
|
-
});
|
141
|
-
});
|
142
|
-
});
|
143
|
-
return candidates;
|
144
|
-
};
|
145
|
-
const emptyState = () => structuredClone({
|
146
|
-
columns: [],
|
147
|
-
data: [],
|
148
|
-
series: [],
|
149
|
-
initialSeries: [],
|
150
|
-
categoryAxis: [],
|
151
|
-
valueAxis: [{ labels: { visible: true, rotation: 'auto' } }],
|
152
|
-
area: {
|
153
|
-
margin: { left: undefined, right: undefined, top: undefined, bottom: undefined }
|
154
|
-
},
|
155
|
-
stack: false
|
156
|
-
});
|
157
|
-
const categoryValueChartState = (data, seriesType, options) => {
|
158
|
-
const state = emptyState();
|
159
|
-
state.seriesType = seriesType;
|
160
|
-
state.data = data;
|
161
|
-
const chartDef = axesDefinitions[seriesType];
|
162
|
-
if (!chartDef) {
|
163
|
-
return state;
|
164
|
-
}
|
165
|
-
const firstRecord = data[0].slice();
|
166
|
-
state.columns = data[0].map(i => String(i.field));
|
167
|
-
const categoryDef = chartDef.find(def => def.axisType === 'category');
|
168
|
-
let catIndex = -1;
|
169
|
-
if (categoryDef) {
|
170
|
-
catIndex = options?.categoryAxis ? state.columns.indexOf(options?.categoryAxis) : getCategoryColumnIndex(data, categoryDef);
|
171
|
-
}
|
172
|
-
const valuesDef = chartDef.filter(def => def.axisType === 'value');
|
173
|
-
let valuesIndexes = getValueColumnIndexes(data, valuesDef);
|
174
|
-
if (valuesIndexes.includes(catIndex)) {
|
175
|
-
valuesIndexes = valuesIndexes.filter(index => index !== catIndex);
|
176
|
-
}
|
177
|
-
const series = [];
|
178
|
-
valuesIndexes.forEach(index => {
|
179
|
-
const valuesColumn = firstRecord[index];
|
180
|
-
const valuesResult = [];
|
181
|
-
data.forEach(record => {
|
182
|
-
valuesResult.push(record[index].value);
|
183
|
-
});
|
184
|
-
series.push({
|
185
|
-
name: valuesColumn.field,
|
186
|
-
type: seriesType,
|
187
|
-
data: valuesResult,
|
188
|
-
stack: false,
|
189
|
-
labels: { visible: false },
|
190
|
-
...(seriesType === scatterType ? scatterSeries : {})
|
191
|
-
});
|
192
|
-
});
|
193
|
-
const categories = catIndex > -1 ? data.map(item => String(item[catIndex].value)) : [];
|
194
|
-
if (series.length) {
|
195
|
-
state.series = series.map((s, i) => ({ ...s, id: i }));
|
196
|
-
state.initialSeries = structuredClone(state.series);
|
197
|
-
}
|
198
|
-
if (categories.length) {
|
199
|
-
state.categoryAxis = [{ categories, labels: { visible: true, rotation: 'auto' } }];
|
200
|
-
state.categoryField = state.columns[catIndex];
|
201
|
-
}
|
202
|
-
state.legend = { visible: true, position: 'bottom' };
|
203
|
-
state.title = { text: null };
|
204
|
-
state.subtitle = { text: null };
|
205
|
-
return state;
|
206
|
-
};
|
207
|
-
const pieChartState = (data, seriesType, options) => {
|
208
|
-
const state = emptyState();
|
209
|
-
state.seriesType = seriesType;
|
210
|
-
state.data = data;
|
211
|
-
const chartDef = axesDefinitions[seriesType];
|
212
|
-
if (!chartDef) {
|
213
|
-
return state;
|
214
|
-
}
|
215
|
-
const categoriesAxis = data[0].map(i => i.field);
|
216
|
-
const categoryDef = chartDef.find(def => def.axisType === 'category');
|
217
|
-
let catIndex = -1;
|
218
|
-
if (categoryDef) {
|
219
|
-
catIndex = options?.categoryAxis ? categoriesAxis.indexOf(options?.categoryAxis) : getCategoryColumnIndex(data, categoryDef);
|
220
|
-
}
|
221
|
-
const valuesDef = chartDef.filter(def => def.axisType === 'value');
|
222
|
-
let valuesIndexes = [];
|
223
|
-
if (options?.valueAxis) {
|
224
|
-
valuesIndexes = [categoriesAxis.indexOf(options.valueAxis)];
|
225
|
-
}
|
226
|
-
else {
|
227
|
-
valuesIndexes = getValueColumnIndexes(data, valuesDef);
|
228
|
-
}
|
229
|
-
if (valuesIndexes.includes(catIndex) && valuesIndexes.length > 1) {
|
230
|
-
valuesIndexes = valuesIndexes.filter(index => index !== catIndex);
|
231
|
-
}
|
232
|
-
if (typeof valuesDef[0].count === 'number') {
|
233
|
-
valuesIndexes = valuesIndexes.slice(0, valuesDef[0].count);
|
234
|
-
}
|
235
|
-
const categories = catIndex > -1 ? data.map(item => String(item[catIndex].value)) : [];
|
236
|
-
const flatData = [];
|
237
|
-
data.forEach(item => {
|
238
|
-
const record = {};
|
239
|
-
valuesIndexes.forEach((index) => {
|
240
|
-
const col = item[index];
|
241
|
-
record[col.field] = col.value;
|
242
|
-
record[item[catIndex].field] = item[catIndex].value;
|
243
|
-
});
|
244
|
-
flatData.push(record);
|
245
|
-
});
|
246
|
-
state.columns = categoriesAxis;
|
247
|
-
state.categoryAxis = [{ categories, title: { text: '' } }];
|
248
|
-
state.series = [{
|
249
|
-
id: 0,
|
250
|
-
data: flatData,
|
251
|
-
type: seriesType,
|
252
|
-
name: categoriesAxis[catIndex],
|
253
|
-
labels: { visible: true },
|
254
|
-
categoryField: categoriesAxis[catIndex],
|
255
|
-
field: categoriesAxis[valuesIndexes[0]]
|
256
|
-
}];
|
257
|
-
state.categoryField = categoriesAxis[catIndex];
|
258
|
-
state.valueField = categoriesAxis[valuesIndexes[0]];
|
259
|
-
state.initialSeries = structuredClone(state.series);
|
260
|
-
return state;
|
261
|
-
};
|
262
|
-
const hasValue = (value) => value !== undefined && value !== null;
|
29
|
+
export const isCategorical = ChartWizardCommon.isCategorical;
|
263
30
|
/**
|
264
31
|
* @hidden
|
265
32
|
*/
|
266
|
-
export const
|
267
|
-
const state = createState(data, defaultState?.seriesType || seriesType);
|
268
|
-
return typeof defaultState?.stack !== 'undefined' ?
|
269
|
-
updateState(state, ActionTypes.stacked, defaultState.stack) : state;
|
270
|
-
};
|
33
|
+
export const parseFont = ChartWizardCommon.parseFont;
|
271
34
|
/**
|
272
35
|
* @hidden
|
273
36
|
*/
|
274
|
-
export const
|
275
|
-
return (isCategorical(seriesType) ? categoryValueChartState : pieChartState)(data, seriesType);
|
276
|
-
};
|
37
|
+
export const ActionTypes = ChartWizardCommon.ActionTypes;
|
277
38
|
/**
|
278
39
|
* @hidden
|
279
40
|
*/
|
280
|
-
export
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
ActionTypes[ActionTypes["areaMarginRight"] = 6] = "areaMarginRight";
|
289
|
-
ActionTypes[ActionTypes["areaMarginTop"] = 7] = "areaMarginTop";
|
290
|
-
ActionTypes[ActionTypes["areaMarginBottom"] = 8] = "areaMarginBottom";
|
291
|
-
ActionTypes[ActionTypes["areaBackground"] = 9] = "areaBackground";
|
292
|
-
ActionTypes[ActionTypes["titleText"] = 10] = "titleText";
|
293
|
-
ActionTypes[ActionTypes["titleFontName"] = 11] = "titleFontName";
|
294
|
-
ActionTypes[ActionTypes["titleFontSize"] = 12] = "titleFontSize";
|
295
|
-
ActionTypes[ActionTypes["titleColor"] = 13] = "titleColor";
|
296
|
-
ActionTypes[ActionTypes["subtitleText"] = 14] = "subtitleText";
|
297
|
-
ActionTypes[ActionTypes["subtitleFontName"] = 15] = "subtitleFontName";
|
298
|
-
ActionTypes[ActionTypes["subtitleFontSize"] = 16] = "subtitleFontSize";
|
299
|
-
ActionTypes[ActionTypes["subtitleColor"] = 17] = "subtitleColor";
|
300
|
-
ActionTypes[ActionTypes["seriesColor"] = 18] = "seriesColor";
|
301
|
-
ActionTypes[ActionTypes["seriesLabel"] = 19] = "seriesLabel";
|
302
|
-
ActionTypes[ActionTypes["legendVisible"] = 20] = "legendVisible";
|
303
|
-
ActionTypes[ActionTypes["legendFontName"] = 21] = "legendFontName";
|
304
|
-
ActionTypes[ActionTypes["legendFontSize"] = 22] = "legendFontSize";
|
305
|
-
ActionTypes[ActionTypes["legendColor"] = 23] = "legendColor";
|
306
|
-
ActionTypes[ActionTypes["legendPosition"] = 24] = "legendPosition";
|
307
|
-
ActionTypes[ActionTypes["categoryAxisTitleText"] = 25] = "categoryAxisTitleText";
|
308
|
-
ActionTypes[ActionTypes["categoryAxisTitleFontName"] = 26] = "categoryAxisTitleFontName";
|
309
|
-
ActionTypes[ActionTypes["categoryAxisTitleFontSize"] = 27] = "categoryAxisTitleFontSize";
|
310
|
-
ActionTypes[ActionTypes["categoryAxisTitleColor"] = 28] = "categoryAxisTitleColor";
|
311
|
-
ActionTypes[ActionTypes["categoryAxisLabelsFontName"] = 29] = "categoryAxisLabelsFontName";
|
312
|
-
ActionTypes[ActionTypes["categoryAxisLabelsFontSize"] = 30] = "categoryAxisLabelsFontSize";
|
313
|
-
ActionTypes[ActionTypes["categoryAxisLabelsColor"] = 31] = "categoryAxisLabelsColor";
|
314
|
-
ActionTypes[ActionTypes["categoryAxisLabelsRotation"] = 32] = "categoryAxisLabelsRotation";
|
315
|
-
ActionTypes[ActionTypes["categoryAxisReverseOrder"] = 33] = "categoryAxisReverseOrder";
|
316
|
-
ActionTypes[ActionTypes["valueAxisTitleText"] = 34] = "valueAxisTitleText";
|
317
|
-
ActionTypes[ActionTypes["valueAxisTitleFontName"] = 35] = "valueAxisTitleFontName";
|
318
|
-
ActionTypes[ActionTypes["valueAxisTitleFontSize"] = 36] = "valueAxisTitleFontSize";
|
319
|
-
ActionTypes[ActionTypes["valueAxisTitleColor"] = 37] = "valueAxisTitleColor";
|
320
|
-
ActionTypes[ActionTypes["valueAxisLabelsFormat"] = 38] = "valueAxisLabelsFormat";
|
321
|
-
ActionTypes[ActionTypes["valueAxisLabelsFontName"] = 39] = "valueAxisLabelsFontName";
|
322
|
-
ActionTypes[ActionTypes["valueAxisLabelsFontSize"] = 40] = "valueAxisLabelsFontSize";
|
323
|
-
ActionTypes[ActionTypes["valueAxisLabelsColor"] = 41] = "valueAxisLabelsColor";
|
324
|
-
ActionTypes[ActionTypes["valueAxisLabelsRotation"] = 42] = "valueAxisLabelsRotation";
|
325
|
-
})(ActionTypes || (ActionTypes = {}));
|
326
|
-
/**
|
327
|
-
* @hidden
|
328
|
-
*/
|
329
|
-
export const mergeStates = (state, newState) => {
|
330
|
-
newState.legend = state.legend;
|
331
|
-
newState.area = state.area;
|
332
|
-
newState.title = state.title;
|
333
|
-
newState.subtitle = state.subtitle;
|
334
|
-
if (newState.series.length === state.series.length) {
|
335
|
-
for (let i = 0; i < newState.series.length; i++) {
|
336
|
-
newState.series[i].color = state.series[i].color;
|
337
|
-
newState.series[i].labels = state.series[i].labels;
|
338
|
-
}
|
339
|
-
}
|
340
|
-
if (state.series.every(s => s.labels?.visible) && isCategorical(newState.seriesType) && isCategorical(state.seriesType)) {
|
341
|
-
newState.series.forEach(s => {
|
342
|
-
s.labels = s.labels || {};
|
343
|
-
s.labels.visible = true;
|
344
|
-
});
|
345
|
-
}
|
346
|
-
return newState;
|
347
|
-
};
|
41
|
+
export const rotations = [
|
42
|
+
{ text: 'Auto', value: 'auto' },
|
43
|
+
{ text: '0°', value: 0 },
|
44
|
+
{ text: '45°', value: 45 },
|
45
|
+
{ text: '90°', value: 90 },
|
46
|
+
{ text: '135°', value: 135 },
|
47
|
+
{ text: '180°', value: 180 }
|
48
|
+
];
|
348
49
|
/**
|
349
50
|
* @hidden
|
350
51
|
*/
|
351
|
-
export const
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
state.series = state.series.map(s => ({ ...s, stack: value }));
|
358
|
-
return state;
|
359
|
-
case ActionTypes.categoryAxisX: {
|
360
|
-
if (state.seriesType && isCategorical(state.seriesType)) {
|
361
|
-
const newState = categoryValueChartState(state.data, state.seriesType, { categoryAxis: value });
|
362
|
-
return mergeStates(state, newState);
|
363
|
-
}
|
364
|
-
else if (state.seriesType === pieType) {
|
365
|
-
const newState = pieChartState(state.data, state.seriesType, { categoryAxis: value });
|
366
|
-
return mergeStates(state, newState);
|
367
|
-
}
|
368
|
-
return state;
|
369
|
-
}
|
370
|
-
case ActionTypes.valueAxisY: {
|
371
|
-
if (state.seriesType === pieType) {
|
372
|
-
const newState = pieChartState(state.data, state.seriesType, { categoryAxis: state.categoryField, valueAxis: value });
|
373
|
-
return mergeStates(state, newState);
|
374
|
-
}
|
375
|
-
return state;
|
376
|
-
}
|
377
|
-
case ActionTypes.seriesChange:
|
378
|
-
state.series = value;
|
379
|
-
return state;
|
380
|
-
case ActionTypes.areaMarginLeft:
|
381
|
-
state.area = { ...state.area, margin: { ...(state.area?.margin || {}), left: value } };
|
382
|
-
return state;
|
383
|
-
case ActionTypes.areaMarginRight:
|
384
|
-
state.area = { ...state.area, margin: { ...(state.area?.margin || {}), right: value } };
|
385
|
-
return state;
|
386
|
-
case ActionTypes.areaMarginTop:
|
387
|
-
state.area = { ...state.area, margin: { ...(state.area?.margin || {}), top: value } };
|
388
|
-
return state;
|
389
|
-
case ActionTypes.areaMarginBottom:
|
390
|
-
state.area = { ...state.area, margin: { ...(state.area?.margin || {}), bottom: value } };
|
391
|
-
return state;
|
392
|
-
case ActionTypes.areaBackground:
|
393
|
-
state.area = { ...state.area, background: value };
|
394
|
-
return state;
|
395
|
-
case ActionTypes.titleText:
|
396
|
-
state.title = { ...state.title, text: value };
|
397
|
-
return state;
|
398
|
-
case ActionTypes.titleFontName: {
|
399
|
-
state.title = { ...state.title, font: updateFontName(value, fontSizes[0].value, state.title?.font) };
|
400
|
-
return state;
|
401
|
-
}
|
402
|
-
case ActionTypes.titleFontSize:
|
403
|
-
state.title = { ...state.title, font: updateFontSize(value, fontNames[0].value, state.title?.font) };
|
404
|
-
return state;
|
405
|
-
case ActionTypes.titleColor:
|
406
|
-
state.title = { ...state.title, color: value };
|
407
|
-
return state;
|
408
|
-
case ActionTypes.subtitleText:
|
409
|
-
state.subtitle = { ...state.subtitle, text: value };
|
410
|
-
return state;
|
411
|
-
case ActionTypes.subtitleFontName:
|
412
|
-
state.subtitle = { ...state.subtitle, font: updateFontName(value, fontSizes[0].value, state.subtitle?.font) };
|
413
|
-
return state;
|
414
|
-
case ActionTypes.subtitleFontSize:
|
415
|
-
state.subtitle = { ...state.subtitle, font: updateFontSize(value, fontNames[0].value, state.subtitle?.font) };
|
416
|
-
return state;
|
417
|
-
case ActionTypes.subtitleColor:
|
418
|
-
state.subtitle = { ...state.subtitle, color: value };
|
419
|
-
return state;
|
420
|
-
case ActionTypes.seriesColor:
|
421
|
-
state.series = state.series.map(s => ({ ...s, color: value.seriesName === s.name ? value.color : s.color }));
|
422
|
-
return state;
|
423
|
-
case ActionTypes.seriesLabel:
|
424
|
-
state.series = state.series.map(s => {
|
425
|
-
if (value.all || value.seriesName === s.name) {
|
426
|
-
return { ...s, labels: { visible: value.visible } };
|
427
|
-
}
|
428
|
-
return s;
|
429
|
-
});
|
430
|
-
return state;
|
431
|
-
case ActionTypes.legendVisible:
|
432
|
-
state.legend = { ...state.legend, visible: value };
|
433
|
-
return state;
|
434
|
-
case ActionTypes.legendFontName: {
|
435
|
-
state.legend = { ...state.legend, labels: { ...state.legend?.labels, font: updateFontName(value, fontSizes[0].value, state.legend?.labels?.font) } };
|
436
|
-
return state;
|
437
|
-
}
|
438
|
-
case ActionTypes.legendFontSize:
|
439
|
-
state.legend = { ...state.legend, labels: { ...state.legend?.labels, font: updateFontSize(value, fontNames[0].value, state.legend?.labels?.font) } };
|
440
|
-
return state;
|
441
|
-
case ActionTypes.legendColor:
|
442
|
-
state.legend = { ...state.legend, labels: { ...state.legend?.labels, color: value } };
|
443
|
-
return state;
|
444
|
-
case ActionTypes.legendPosition:
|
445
|
-
state.legend = { ...state.legend, position: value };
|
446
|
-
return state;
|
447
|
-
case ActionTypes.categoryAxisTitleText:
|
448
|
-
state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, text: value } }));
|
449
|
-
return state;
|
450
|
-
case ActionTypes.categoryAxisTitleFontName: {
|
451
|
-
state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontName(value, fontSizes[0].value, axis.title?.font) } }));
|
452
|
-
return state;
|
453
|
-
}
|
454
|
-
case ActionTypes.categoryAxisTitleFontSize:
|
455
|
-
state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontSize(value, fontNames[0].value, axis.title?.font) } }));
|
456
|
-
return state;
|
457
|
-
case ActionTypes.categoryAxisTitleColor:
|
458
|
-
state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, color: value } }));
|
459
|
-
return state;
|
460
|
-
case ActionTypes.categoryAxisLabelsFontName: {
|
461
|
-
state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontName(value, fontSizes[0].value, axis.labels?.font) } }));
|
462
|
-
return state;
|
463
|
-
}
|
464
|
-
case ActionTypes.categoryAxisLabelsFontSize:
|
465
|
-
state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontSize(value, fontNames[0].value, axis.labels?.font) } }));
|
466
|
-
return state;
|
467
|
-
case ActionTypes.categoryAxisLabelsColor:
|
468
|
-
state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
|
469
|
-
return state;
|
470
|
-
case ActionTypes.categoryAxisLabelsRotation: {
|
471
|
-
const rotation = hasValue(value) ? value : 'auto';
|
472
|
-
state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation } }));
|
473
|
-
return state;
|
474
|
-
}
|
475
|
-
case ActionTypes.categoryAxisReverseOrder:
|
476
|
-
state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, reverse: value }));
|
477
|
-
return state;
|
478
|
-
case ActionTypes.valueAxisTitleText: {
|
479
|
-
if (!state.valueAxis || state.valueAxis.length === 0) {
|
480
|
-
state.valueAxis = [{ title: { text: value } }];
|
481
|
-
}
|
482
|
-
else {
|
483
|
-
state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, text: value } }));
|
484
|
-
}
|
485
|
-
return state;
|
486
|
-
}
|
487
|
-
case ActionTypes.valueAxisTitleFontName: {
|
488
|
-
state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontName(value, fontSizes[0].value, axis.title?.font) } }));
|
489
|
-
return state;
|
490
|
-
}
|
491
|
-
case ActionTypes.valueAxisTitleFontSize:
|
492
|
-
state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontSize(value, fontNames[0].value, axis.title?.font) } }));
|
493
|
-
return state;
|
494
|
-
case ActionTypes.valueAxisTitleColor:
|
495
|
-
state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, color: value } }));
|
496
|
-
return state;
|
497
|
-
case ActionTypes.valueAxisLabelsFormat:
|
498
|
-
state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, format: value } }));
|
499
|
-
return state;
|
500
|
-
case ActionTypes.valueAxisLabelsFontName: {
|
501
|
-
state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontName(value, fontSizes[0].value, axis.labels?.font) } }));
|
502
|
-
return state;
|
503
|
-
}
|
504
|
-
case ActionTypes.valueAxisLabelsFontSize:
|
505
|
-
state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontSize(value, fontNames[0].value, axis.labels?.font) } }));
|
506
|
-
return state;
|
507
|
-
case ActionTypes.valueAxisLabelsColor:
|
508
|
-
state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
|
509
|
-
return state;
|
510
|
-
case ActionTypes.valueAxisLabelsRotation: {
|
511
|
-
const rotation = hasValue(value) ? value : 'auto';
|
512
|
-
state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation } }));
|
513
|
-
return state;
|
514
|
-
}
|
515
|
-
default:
|
516
|
-
return state;
|
517
|
-
}
|
518
|
-
};
|
52
|
+
export const positions = [
|
53
|
+
{ text: 'Top', value: 'top' },
|
54
|
+
{ text: 'Bottom', value: 'bottom' },
|
55
|
+
{ text: 'Left', value: 'left' },
|
56
|
+
{ text: 'Right', value: 'right' }
|
57
|
+
];
|