@progress/kendo-angular-chart-wizard 16.6.0-develop.10

package/esm2020/chart-wizard-state.mjs

@@ -0,0 +1,502 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const fontSizes = [
+    { text: '16', value: '16px' },
+    { text: '20', value: '20px' },
+    { text: '24', value: '24px' },
+    { text: '48', value: '48px' },
+    { text: '60', value: '60px' },
+    { text: '96', value: '96px' },
+];
+/**
+ * @hidden
+ */
+export const fontNames = [
+    { text: 'Arial', value: 'Arial, Helvetica, sans-serif',
+        style: { fontFamily: 'Arial, Helvetica, sans-serif' } },
+    { text: 'Courier New', value: '\'Courier New\', Courier, monospace',
+        style: { fontFamily: '\'Courier New\', Courier, monospace' } },
+    { text: 'Georgia', value: 'Georgia, serif',
+        style: { fontFamily: 'Georgia, serif' } },
+    { text: 'Impact', value: 'Impact, Charcoal, sans-serif',
+        style: { fontFamily: 'Impact, Charcoal, sans-serif' } },
+    { text: 'Lucida Console', value: '\'Lucida Console\', Monaco, monospace',
+        style: { fontFamily: '\'Lucida Console\', Monaco, monospace' } },
+    { text: 'Tahoma', value: 'Tahoma, Geneva, sans-serif',
+        style: { fontFamily: 'Tahoma, Geneva, sans-serif' } },
+    { text: 'Times New Roman', value: '\'Times New Roman\', Times,serif',
+        style: { fontFamily: '\'Times New Roman\', Times,serif' } },
+    { text: 'Trebuchet MS', value: '\'Trebuchet MS\', Helvetica, sans-serif',
+        style: { fontFamily: '\'Trebuchet MS\', Helvetica, sans-serif' } },
+    { text: 'Verdana', value: 'Verdana, Geneva, sans-serif',
+        style: { fontFamily: 'Verdana, Geneva, sans-serif' } }
+];
+/**
+ * @hidden
+ */
+export const rotations = [
+    { text: '0°', value: 0 },
+    { text: '45°', value: 45 },
+    { text: '90°', value: 90 },
+    { text: '135°', value: 135 },
+    { text: '180°', value: 180 }
+];
+/**
+ * @hidden
+ */
+export const positions = [
+    { text: 'Top', value: 'top' },
+    { text: 'Bottom', value: 'bottom' },
+    { text: 'Left', value: 'left' },
+    { text: 'Right', value: 'right' }
+];
+const columnType = 'column';
+const barType = 'bar';
+const lineType = 'line';
+const pieType = 'pie';
+const scatterType = 'scatter';
+const categoricalTypes = [columnType, barType, lineType, scatterType];
+const scatterSeries = {
+    type: lineType,
+    width: 0
+};
+/**
+ * @hidden
+ */
+export const isCategorical = (type) => type && categoricalTypes.includes(type);
+const categoryTypes = ['string', 'date', 'number'];
+const valueTypes = ['number'];
+const axesDefinitions = {
+    bar: [
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes },
+    ],
+    column: [
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes },
+    ],
+    line: [
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes },
+    ],
+    pie: [
+        { axisType: 'category', types: categoryTypes },
+        { axisType: 'value', types: valueTypes },
+    ],
+    scatter: [
+        { axisType: 'value', types: valueTypes, count: 2 }
+    ]
+};
+const getFont = (font, size) => `${size || ''} ${font || ''}`.trim();
+/**
+ * @hidden
+ */
+export const parseFont = (font) => {
+    const spaceIndex = (font || '').indexOf(' ');
+    const size = font?.substring(0, spaceIndex);
+    const name = font?.substring(spaceIndex + 1);
+    return { size, name };
+};
+const updateFontName = (fontName, defaultSize, currentFont) => {
+    const { size } = parseFont(currentFont);
+    return fontName ? getFont(fontName, size || defaultSize) : '';
+};
+const updateFontSize = (fontSize, defaultFontName, currentFont) => {
+    const { name } = parseFont(currentFont);
+    return fontSize ? getFont(name || defaultFontName, fontSize) : '';
+};
+const getCategoryColumnIndex = (data, categoryDef) => {
+    const candidates = [];
+    const firstRecord = data[0].slice();
+    categoryDef.types.forEach((type) => {
+        firstRecord.forEach((item, i) => {
+            if (typeof item.value === type) {
+                candidates.push(i);
+            }
+        });
+    });
+    const result = candidates.findIndex((index) => {
+        const values = data.map((record) => record[index].value);
+        return new Set(values).size === values.length;
+    });
+    return Math.max(result, 0);
+};
+const getValueColumnIndexes = (data, valuesDef) => {
+    const candidates = [];
+    const firstRecord = data[0].slice();
+    valuesDef.forEach((def) => {
+        def.types.forEach((type) => {
+            firstRecord.forEach((item, i) => {
+                if (typeof item.value === type) {
+                    candidates.push(i);
+                }
+            });
+        });
+    });
+    return candidates;
+};
+const emptyState = () => structuredClone({
+    columns: [],
+    data: [],
+    series: [],
+    initialSeries: [],
+    categoryAxis: [],
+    valueAxis: [{ labels: { visible: true } }],
+    area: {
+        margin: { left: undefined, right: undefined, top: undefined, bottom: undefined }
+    },
+});
+const categoryValueChartState = (data, seriesType, options) => {
+    const state = emptyState();
+    state.seriesType = seriesType;
+    state.data = data;
+    const chartDef = axesDefinitions[seriesType];
+    if (!chartDef) {
+        return state;
+    }
+    const firstRecord = data[0].slice();
+    state.columns = data[0].map(i => String(i.field));
+    const categoryDef = chartDef.find(def => def.axisType === 'category');
+    let catIndex = -1;
+    if (categoryDef) {
+        catIndex = options?.categoryAxis ? state.columns.indexOf(options?.categoryAxis) : getCategoryColumnIndex(data, categoryDef);
+    }
+    const valuesDef = chartDef.filter(def => def.axisType === 'value');
+    let valuesIndexes = getValueColumnIndexes(data, valuesDef);
+    if (valuesIndexes.includes(catIndex)) {
+        valuesIndexes = valuesIndexes.filter(index => index !== catIndex);
+    }
+    const series = [];
+    valuesIndexes.forEach(index => {
+        const valuesColumn = firstRecord[index];
+        const valuesResult = [];
+        data.forEach(record => {
+            valuesResult.push(record[index].value);
+        });
+        series.push({
+            name: valuesColumn.field,
+            type: seriesType,
+            data: valuesResult,
+            stack: false,
+            labels: { visible: true },
+            ...(seriesType === scatterType ? scatterSeries : {})
+        });
+    });
+    const categories = catIndex > -1 ? data.map(item => String(item[catIndex].value)) : [];
+    if (series.length) {
+        state.series = series.map((s, i) => ({ ...s, id: i }));
+        state.initialSeries = structuredClone(state.series);
+    }
+    if (categories.length) {
+        state.categoryAxis = [{ categories, labels: { visible: true } }];
+        state.categoryField = state.columns[catIndex];
+    }
+    state.legend = { visible: true };
+    state.title = { text: null };
+    state.subtitle = { text: null };
+    return state;
+};
+const pieChartState = (data, seriesType, options) => {
+    const state = emptyState();
+    state.seriesType = seriesType;
+    state.data = data;
+    const chartDef = axesDefinitions[seriesType];
+    if (!chartDef) {
+        return state;
+    }
+    const categoriesAxis = data[0].map(i => i.field);
+    const categoryDef = chartDef.find(def => def.axisType === 'category');
+    let catIndex = -1;
+    if (categoryDef) {
+        catIndex = options?.categoryAxis ? categoriesAxis.indexOf(options?.categoryAxis) : getCategoryColumnIndex(data, categoryDef);
+    }
+    const valuesDef = chartDef.filter(def => def.axisType === 'value');
+    let valuesIndexes = [];
+    if (options?.valueAxis) {
+        valuesIndexes = [categoriesAxis.indexOf(options.valueAxis)];
+    }
+    else {
+        valuesIndexes = getValueColumnIndexes(data, valuesDef);
+    }
+    if (valuesIndexes.includes(catIndex) && valuesIndexes.length > 1) {
+        valuesIndexes = valuesIndexes.filter(index => index !== catIndex);
+    }
+    if (typeof valuesDef[0].count === 'number') {
+        valuesIndexes = valuesIndexes.slice(0, valuesDef[0].count);
+    }
+    const categories = catIndex > -1 ? data.map(item => String(item[catIndex].value)) : [];
+    const flatData = [];
+    data.forEach(item => {
+        const record = {};
+        valuesIndexes.forEach((index) => {
+            const col = item[index];
+            record[col.field] = col.value;
+            record[item[catIndex].field] = item[catIndex].value;
+        });
+        flatData.push(record);
+    });
+    state.columns = categoriesAxis;
+    state.categoryAxis = [{ categories, title: { text: '' } }];
+    state.series = [{
+            id: 0,
+            data: flatData,
+            type: seriesType,
+            name: categoriesAxis[catIndex],
+            labels: { visible: true },
+            categoryField: categoriesAxis[catIndex],
+            field: categoriesAxis[valuesIndexes[0]]
+        }];
+    state.categoryField = categoriesAxis[catIndex];
+    state.valueField = categoriesAxis[valuesIndexes[0]];
+    state.initialSeries = structuredClone(state.series);
+    return state;
+};
+/**
+ * @hidden
+ */
+export const createState = (data, seriesType) => {
+    return (isCategorical(seriesType) ? categoryValueChartState : pieChartState)(data, seriesType);
+};
+/**
+ * @hidden
+ */
+export var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes[ActionTypes["seriesType"] = 0] = "seriesType";
+    ActionTypes[ActionTypes["stacked"] = 1] = "stacked";
+    ActionTypes[ActionTypes["categoryAxisX"] = 2] = "categoryAxisX";
+    ActionTypes[ActionTypes["valueAxisY"] = 3] = "valueAxisY";
+    ActionTypes[ActionTypes["seriesChange"] = 4] = "seriesChange";
+    ActionTypes[ActionTypes["areaMarginLeft"] = 5] = "areaMarginLeft";
+    ActionTypes[ActionTypes["areaMarginRight"] = 6] = "areaMarginRight";
+    ActionTypes[ActionTypes["areaMarginTop"] = 7] = "areaMarginTop";
+    ActionTypes[ActionTypes["areaMarginBottom"] = 8] = "areaMarginBottom";
+    ActionTypes[ActionTypes["areaBackground"] = 9] = "areaBackground";
+    ActionTypes[ActionTypes["titleText"] = 10] = "titleText";
+    ActionTypes[ActionTypes["titleFontName"] = 11] = "titleFontName";
+    ActionTypes[ActionTypes["titleFontSize"] = 12] = "titleFontSize";
+    ActionTypes[ActionTypes["titleColor"] = 13] = "titleColor";
+    ActionTypes[ActionTypes["subtitleText"] = 14] = "subtitleText";
+    ActionTypes[ActionTypes["subtitleFontName"] = 15] = "subtitleFontName";
+    ActionTypes[ActionTypes["subtitleFontSize"] = 16] = "subtitleFontSize";
+    ActionTypes[ActionTypes["subtitleColor"] = 17] = "subtitleColor";
+    ActionTypes[ActionTypes["seriesColor"] = 18] = "seriesColor";
+    ActionTypes[ActionTypes["seriesLabel"] = 19] = "seriesLabel";
+    ActionTypes[ActionTypes["legendVisible"] = 20] = "legendVisible";
+    ActionTypes[ActionTypes["legendFontName"] = 21] = "legendFontName";
+    ActionTypes[ActionTypes["legendFontSize"] = 22] = "legendFontSize";
+    ActionTypes[ActionTypes["legendColor"] = 23] = "legendColor";
+    ActionTypes[ActionTypes["legendPosition"] = 24] = "legendPosition";
+    ActionTypes[ActionTypes["categoryAxisTitleText"] = 25] = "categoryAxisTitleText";
+    ActionTypes[ActionTypes["categoryAxisTitleFontName"] = 26] = "categoryAxisTitleFontName";
+    ActionTypes[ActionTypes["categoryAxisTitleFontSize"] = 27] = "categoryAxisTitleFontSize";
+    ActionTypes[ActionTypes["categoryAxisTitleColor"] = 28] = "categoryAxisTitleColor";
+    ActionTypes[ActionTypes["categoryAxisLabelsFontName"] = 29] = "categoryAxisLabelsFontName";
+    ActionTypes[ActionTypes["categoryAxisLabelsFontSize"] = 30] = "categoryAxisLabelsFontSize";
+    ActionTypes[ActionTypes["categoryAxisLabelsColor"] = 31] = "categoryAxisLabelsColor";
+    ActionTypes[ActionTypes["categoryAxisLabelsRotation"] = 32] = "categoryAxisLabelsRotation";
+    ActionTypes[ActionTypes["categoryAxisReverseOrder"] = 33] = "categoryAxisReverseOrder";
+    ActionTypes[ActionTypes["valueAxisTitleText"] = 34] = "valueAxisTitleText";
+    ActionTypes[ActionTypes["valueAxisTitleFontName"] = 35] = "valueAxisTitleFontName";
+    ActionTypes[ActionTypes["valueAxisTitleFontSize"] = 36] = "valueAxisTitleFontSize";
+    ActionTypes[ActionTypes["valueAxisTitleColor"] = 37] = "valueAxisTitleColor";
+    ActionTypes[ActionTypes["valueAxisLabelsFormat"] = 38] = "valueAxisLabelsFormat";
+    ActionTypes[ActionTypes["valueAxisLabelsFontName"] = 39] = "valueAxisLabelsFontName";
+    ActionTypes[ActionTypes["valueAxisLabelsFontSize"] = 40] = "valueAxisLabelsFontSize";
+    ActionTypes[ActionTypes["valueAxisLabelsColor"] = 41] = "valueAxisLabelsColor";
+    ActionTypes[ActionTypes["valueAxisLabelsRotation"] = 42] = "valueAxisLabelsRotation";
+})(ActionTypes || (ActionTypes = {}));
+/**
+ * @hidden
+ */
+export const mergeStates = (state, newState) => {
+    newState.legend = state.legend;
+    newState.area = state.area;
+    newState.title = state.title;
+    newState.subtitle = state.subtitle;
+    if (newState.series.length === state.series.length) {
+        for (let i = 0; i < newState.series.length; i++) {
+            newState.series[i].color = state.series[i].color;
+            newState.series[i].labels = state.series[i].labels;
+        }
+    }
+    if (state.series.every(s => s.labels?.visible)) {
+        newState.series.forEach(s => {
+            s.labels = s.labels || {};
+            s.labels.visible = true;
+        });
+    }
+    return newState;
+};
+/**
+ * @hidden
+ */
+export const updateState = (currentState, action, value) => {
+    const state = { ...currentState };
+    switch (action) {
+        case ActionTypes.seriesType:
+            return createState(state.data, value);
+        case ActionTypes.stacked:
+            state.series = state.series.map(s => ({ ...s, stack: value }));
+            return state;
+        case ActionTypes.categoryAxisX: {
+            if (state.seriesType && isCategorical(state.seriesType)) {
+                const newState = categoryValueChartState(state.data, state.seriesType, { categoryAxis: value });
+                return mergeStates(state, newState);
+            }
+            else if (state.seriesType === pieType) {
+                const newState = pieChartState(state.data, state.seriesType, { categoryAxis: value });
+                return mergeStates(state, newState);
+            }
+            return state;
+        }
+        case ActionTypes.valueAxisY: {
+            if (state.seriesType === pieType) {
+                const newState = pieChartState(state.data, state.seriesType, { categoryAxis: state.categoryField, valueAxis: value });
+                return mergeStates(state, newState);
+            }
+            return state;
+        }
+        case ActionTypes.seriesChange:
+            state.series = value;
+            return state;
+        case ActionTypes.areaMarginLeft:
+            state.area = { ...state.area, margin: { ...(state.area?.margin || {}), left: value } };
+            return state;
+        case ActionTypes.areaMarginRight:
+            state.area = { ...state.area, margin: { ...(state.area?.margin || {}), right: value } };
+            return state;
+        case ActionTypes.areaMarginTop:
+            state.area = { ...state.area, margin: { ...(state.area?.margin || {}), top: value } };
+            return state;
+        case ActionTypes.areaMarginBottom:
+            state.area = { ...state.area, margin: { ...(state.area?.margin || {}), bottom: value } };
+            return state;
+        case ActionTypes.areaBackground:
+            state.area = { ...state.area, background: value };
+            return state;
+        case ActionTypes.titleText:
+            state.title = { ...state.title, text: value };
+            return state;
+        case ActionTypes.titleFontName: {
+            state.title = { ...state.title, font: updateFontName(value, fontSizes[0].value, state.title?.font) };
+            return state;
+        }
+        case ActionTypes.titleFontSize:
+            state.title = { ...state.title, font: updateFontSize(value, fontNames[0].value, state.title?.font) };
+            return state;
+        case ActionTypes.titleColor:
+            state.title = { ...state.title, color: value };
+            return state;
+        case ActionTypes.subtitleText:
+            state.subtitle = { ...state.subtitle, text: value };
+            return state;
+        case ActionTypes.subtitleFontName:
+            state.subtitle = { ...state.subtitle, font: updateFontName(value, fontSizes[0].value, state.subtitle?.font) };
+            return state;
+        case ActionTypes.subtitleFontSize:
+            state.subtitle = { ...state.subtitle, font: updateFontSize(value, fontNames[0].value, state.subtitle?.font) };
+            return state;
+        case ActionTypes.subtitleColor:
+            state.subtitle = { ...state.subtitle, color: value };
+            return state;
+        case ActionTypes.seriesColor:
+            state.series = state.series.map(s => ({ ...s, color: value.seriesName === s.name ? value.color : s.color }));
+            return state;
+        case ActionTypes.seriesLabel:
+            state.series = state.series.map(s => {
+                if (value.all || value.seriesName === s.name) {
+                    return { ...s, labels: { visible: value.visible } };
+                }
+                return s;
+            });
+            return state;
+        case ActionTypes.legendVisible:
+            state.legend = { ...state.legend, visible: value };
+            return state;
+        case ActionTypes.legendFontName: {
+            state.legend = { ...state.legend, labels: { ...state.legend?.labels, font: updateFontName(value, fontSizes[0].value, state.legend?.labels?.font) } };
+            return state;
+        }
+        case ActionTypes.legendFontSize:
+            state.legend = { ...state.legend, labels: { ...state.legend?.labels, font: updateFontSize(value, fontNames[0].value, state.legend?.labels?.font) } };
+            return state;
+        case ActionTypes.legendColor:
+            state.legend = { ...state.legend, labels: { ...state.legend?.labels, color: value } };
+            return state;
+        case ActionTypes.legendPosition:
+            state.legend = { ...state.legend, position: value };
+            return state;
+        case ActionTypes.categoryAxisTitleText:
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, text: value } }));
+            return state;
+        case ActionTypes.categoryAxisTitleFontName: {
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontName(value, fontSizes[0].value, axis.title?.font) } }));
+            return state;
+        }
+        case ActionTypes.categoryAxisTitleFontSize:
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontSize(value, fontNames[0].value, axis.title?.font) } }));
+            return state;
+        case ActionTypes.categoryAxisTitleColor:
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, title: { ...axis.title, color: value } }));
+            return state;
+        case ActionTypes.categoryAxisLabelsFontName: {
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontName(value, fontSizes[0].value, axis.labels?.font) } }));
+            return state;
+        }
+        case ActionTypes.categoryAxisLabelsFontSize:
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontSize(value, fontNames[0].value, axis.labels?.font) } }));
+            return state;
+        case ActionTypes.categoryAxisLabelsColor:
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
+            return state;
+        case ActionTypes.categoryAxisLabelsRotation:
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation: value } }));
+            return state;
+        case ActionTypes.categoryAxisReverseOrder:
+            state.categoryAxis = state.categoryAxis?.map(axis => ({ ...axis, reverse: value }));
+            return state;
+        case ActionTypes.valueAxisTitleText: {
+            if (!state.valueAxis || state.valueAxis.length === 0) {
+                state.valueAxis = [{ title: { text: value } }];
+            }
+            else {
+                state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, text: value } }));
+            }
+            return state;
+        }
+        case ActionTypes.valueAxisTitleFontName: {
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontName(value, fontSizes[0].value, axis.title?.font) } }));
+            return state;
+        }
+        case ActionTypes.valueAxisTitleFontSize:
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, font: updateFontSize(value, fontNames[0].value, axis.title?.font) } }));
+            return state;
+        case ActionTypes.valueAxisTitleColor:
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, title: { ...axis.title, color: value } }));
+            return state;
+        case ActionTypes.valueAxisLabelsFormat:
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, format: value } }));
+            return state;
+        case ActionTypes.valueAxisLabelsFontName: {
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontName(value, fontSizes[0].value, axis.labels?.font) } }));
+            return state;
+        }
+        case ActionTypes.valueAxisLabelsFontSize:
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, font: updateFontSize(value, fontNames[0].value, axis.labels?.font) } }));
+            return state;
+        case ActionTypes.valueAxisLabelsColor:
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, color: value } }));
+            return state;
+        case ActionTypes.valueAxisLabelsRotation:
+            state.valueAxis = state.valueAxis?.map(axis => ({ ...axis, labels: { ...axis.labels, rotation: value } }));
+            return state;
+        default:
+            return state;
+    }
+};