@operato/scene-chartjs 9.1.1 → 10.0.0-beta.2

package/dist/config-converter.js

@@ -1,150 +1,169 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import { format as formatText } from '@operato/utils/format.js';
+/**
+ * v2 형식의 scene-chart config를 Chart.js v4 형식으로 변환한다.
+ * 기존 보드 설정(v2 형식)을 입력받아 v4 호환 config를 새 객체로 반환.
+ */
 export function convertConfigure(chart) {
     if (!chart)
-        return;
-    var data = chart.data || {};
-    var datasets = data.datasets || [];
-    var options = chart.options || {};
-    var scales = options.scales || {};
-    var xAxes;
-    var yAxes;
-    var scale;
-    var legend = options.legend || {};
-    var tooltips = options.tooltip === false ? undefined : (options.tooltips = options.tooltips || {});
-    var multiAxis = options.multiAxis;
-    var stacked = false;
-    var yStacked = [false, false];
-    var fontSize = Number(options.defaultFontSize);
-    var fontFamily = options.defaultFontFamily;
-    var fontColor = options.defaultFontColor;
-    var theme = options.theme;
-    // backward compatible
-    _configureBackwardsCompatible(chart.type, options);
-    // setup series configure
-    for (let i in datasets) {
-        let series = datasets[i];
-        if (options.stacked && !series.stack) {
-            series.stack = 'A';
-        }
-        /*
-         * TODO from chartjs 2.9, categoryPercentage, barPercentage properties move to dataset.
-         * so need to move related properties - categorySpacing, barSpacing should be moved to series.
-         */
-        if (chart.type == 'bar') {
-            let categorySpacing = (scales.xAxes && scales.xAxes[0].categorySpacing) || 0;
-            let barSpacing = (scales.xAxes && scales.xAxes[0].barSpacing) || 0;
-            series.categoryPercentage = 1 - categorySpacing || 1;
-            series.barPercentage = 1 - barSpacing || 0.8;
-        }
-        else if (chart.type == 'horizontalBar') {
-            let categorySpacing = (scales.yAxes && scales.yAxes[0].categorySpacing) || 0;
-            let barSpacing = (scales.yAxes && scales.yAxes[0].barSpacing) || 0;
-            series.categoryPercentage = 1 - categorySpacing || 1;
-            series.barPercentage = 1 - barSpacing || 0.8;
+        return chart;
+    const { type: chartType, data: fromData, options: fromOptions } = chart;
+    const options = fromOptions || {};
+    const datasets = fromData?.datasets || [];
+    const fontSize = Number(options.defaultFontSize) || undefined;
+    const fontFamily = options.defaultFontFamily;
+    const fontColor = options.defaultFontColor;
+    const theme = options.theme;
+    const multiAxis = options.multiAxis;
+    const stacked = options.stacked;
+    const xGridLine = options.xGridLine;
+    const yGridLine = options.yGridLine;
+    const y2ndGridLine = options.y2ndGridLine;
+    const showTooltip = options.tooltip !== false;
+    // backward compatible: ensure scales/scale exist
+    _ensureBackwardsCompatible(chartType, options);
+    const scales = options.scales || {};
+    const { xAxes = [], yAxes = [] } = scales;
+    // --- Build v4 scales object ---
+    const toScales = {};
+    const isCartesian = ['line', 'bar', 'horizontalBar'].includes(chartType);
+    if (isCartesian) {
+        // Determine actual xAxes/yAxes depending on horizontalBar swap
+        const actualXAxes = chartType === 'horizontalBar' ? yAxes : xAxes;
+        const actualYAxes = chartType === 'horizontalBar' ? xAxes : yAxes;
+        actualXAxes.forEach((xAxis, index) => {
+            const id = actualXAxes.length > 1 ? `x${index + 1}` : 'x';
+            toScales[id] = _buildScale({
+                axis: 'x',
+                id,
+                position: 'bottom',
+                display: xAxis.display !== false,
+                title: {
+                    display: !!xAxis.axisTitle,
+                    text: xAxis.axisTitle
+                },
+                grid: {
+                    display: chartType === 'horizontalBar' ? yGridLine : xGridLine
+                },
+                ticks: xAxis.ticks,
+                stacked: stacked || false
+            }, { fontSize, fontFamily, fontColor, theme });
+        });
+        actualYAxes.forEach((yAxis, index) => {
+            const id = yAxis.id || (index === 0 ? 'left' : 'right');
+            const isSecondary = index > 0 || id === 'right';
+            const display = isSecondary ? (multiAxis || false) : (yAxis.display !== false);
+            toScales[id] = _buildScale({
+                axis: 'y',
+                id,
+                position: yAxis.position || id,
+                display,
+                title: {
+                    display: !!yAxis.axisTitle,
+                    text: yAxis.axisTitle
+                },
+                grid: {
+                    display: isSecondary ? y2ndGridLine : yGridLine
+                },
+                ticks: yAxis.ticks,
+                stacked: stacked || false
+            }, { fontSize, fontFamily, fontColor, theme });
+        });
+    }
+    // radar/polarArea: handle scale (radial)
+    if (chartType === 'radar' || chartType === 'polarArea') {
+        const scale = options.scale || {};
+        toScales['r'] = {
+            type: 'radialLinear',
+            ticks: {
+                ...(scale.ticks || {}),
+                backdropColor: options.fillStyle || '#00ff0000'
+            },
+            pointLabels: {
+                font: { size: fontSize, family: fontFamily },
+                ...(fontColor ? { color: fontColor } : {})
+            }
+        };
+        if (fontColor) {
+            toScales['r'].ticks.color = fontColor;
         }
-        _setSeriesConfigures(series, chart);
-        if (!multiAxis) {
-            if (series.yAxisID == 'right')
-                series.yAxisID = 'left';
+    }
+    // --- Build v4 datasets ---
+    // axis → dataset 속성 마이그레이션 (bar thickness 등)
+    let barCategoryPercentage;
+    let barPercentage;
+    let barThickness;
+    if (chartType === 'bar' || chartType === 'horizontalBar') {
+        const barAxis = chartType === 'bar' ? xAxes[0] : yAxes[0];
+        if (barAxis) {
+            barCategoryPercentage = barAxis.categorySpacing != null ? 1 - barAxis.categorySpacing : undefined;
+            barPercentage = barAxis.barSpacing != null ? 1 - barAxis.barSpacing : undefined;
+            barThickness = barAxis.barThickness;
         }
     }
-    delete options.stacked;
-    var leftSeries = datasets.filter(d => d.yAxisID == 'left');
-    var rightSeries = datasets.filter(d => d.yAxisID == 'right');
-    leftSeries.forEach(s => {
-        var filtered = leftSeries.filter(ss => s.stack == ss.stack);
-        if (filtered.length > 1) {
-            yStacked[0] = true;
-            return;
+    const toDatasets = datasets.map((dataset, index) => {
+        const series = { ...dataset };
+        // horizontalBar series type → bar
+        if (series.type === 'horizontalBar') {
+            series.type = 'bar';
         }
-    });
-    rightSeries.forEach(s => {
-        var filtered = rightSeries.filter(ss => s.stack == ss.stack);
-        if (filtered.length > 1) {
-            yStacked[1] = true;
-            return;
+        // multiAxis off: all series to left axis
+        if (!multiAxis && series.yAxisID === 'right') {
+            series.yAxisID = 'left';
         }
-    });
-    stacked = yStacked[0] || yStacked[1];
-    // setup options
-    // 1. setup scales
-    switch (chart.type) {
-        case 'line':
-        case 'bar':
-        case 'horizontalBar':
-            xAxes = scales.xAxes || [];
-            yAxes = scales.yAxes || [];
-            if (chart.type == 'horizontalBar') {
-                xAxes = scales.yAxes || [];
-                yAxes = scales.xAxes || [];
-            }
-            // 1-1. setup xAxes
-            for (let i in xAxes) {
-                let axis = xAxes[i];
-                _setStacked(axis, stacked);
-                _setScalesFont(axis, {
-                    fontSize,
-                    fontFamily
-                });
-                _setScalesAutoMinMax(axis);
-                _setScalesTickRotation(axis);
-                _setAxisTitle(axis);
-                _setScalesTheme(axis, theme, fontColor);
-                _appendTickCallback(axis.ticks);
-                axis.gridLines.display = options.xGridLine;
+        // bar spacing properties (moved from axis to dataset in v4)
+        if (chartType === 'bar' || chartType === 'horizontalBar') {
+            if (barCategoryPercentage != null)
+                series.categoryPercentage = barCategoryPercentage;
+            if (barPercentage != null)
+                series.barPercentage = barPercentage;
+            if (barThickness != null)
+                series.barThickness = barThickness;
+        }
+        // stack: v4 format
+        const isPieType = chartType === 'pie' || chartType === 'doughnut';
+        if (!isPieType) {
+            if (stacked && !dataset.stack) {
+                series.stack = '__all__';
             }
-            // 1-2. setup yAxes
-            for (let i in yAxes) {
-                let axis = yAxes[i];
-                //@ts-ignore
-                if (i == 1) {
-                    _setMultiAxis(axis, multiAxis);
-                }
-                _setStacked(axis, yStacked[i]);
-                _setScalesFont(axis, {
-                    fontSize,
-                    fontFamily
-                });
-                _setScalesAutoMinMax(axis);
-                _setAxisTitle(axis);
-                _setScalesTheme(axis, theme, fontColor);
-                _appendTickCallback(axis.ticks);
-                //@ts-ignore
-                if (i == 0)
-                    axis.gridLines.display = options.yGridLine;
-                //@ts-ignore
-                if (i == 1)
-                    axis.gridLines.display = options.y2ndGridLine;
+            else {
+                const type = series.type || chartType;
+                series.stack = `__${type}_${series.yAxisID || 'left'}_${index}__`;
             }
-            break;
-        case 'pie':
-        case 'doughnut':
-            break;
-        default:
-            scale = options.scale || {};
-            _setScalesFont(scale, {
-                fontSize,
-                fontFamily
-            });
-            break;
-    }
-    // 2. setup legend
-    _setLegendFont(legend, {
-        fontSize,
-        fontFamily
+        }
+        // series visual setup
+        _setupSeriesVisuals(series, chartType);
+        return series;
     });
-    legend.labels && (legend.labels.boxWidth = 15);
-    _setLegendTheme(legend, theme, fontColor);
-    // 3. setup tooltips
-    options.tooltip &&
-        _setTooltipFont(tooltips, {
-            fontSize,
-            fontFamily
-        });
-    options.tooltip && _setTooltipCallback(tooltips);
+    // --- Build converted config ---
+    const converted = {
+        type: chartType === 'horizontalBar' ? 'bar' : chartType,
+        data: {
+            labels: fromData?.labels || [],
+            datasets: toDatasets,
+            labelDataKey: fromData?.labelDataKey
+        },
+        options: {
+            maintainAspectRatio: false,
+            animation: options.animation,
+            indexAxis: chartType === 'horizontalBar' ? 'y' : undefined,
+            scales: isCartesian || chartType === 'radar' || chartType === 'polarArea' ? toScales : undefined,
+            plugins: {
+                legend: _buildLegend(options.legend || {}, { fontSize, fontFamily, fontColor, theme }),
+                tooltip: showTooltip
+                    ? _buildTooltip({ fontSize, fontFamily })
+                    : { enabled: false },
+            },
+            // preserve custom properties for datalabels font callback
+            defaultFontFamily: fontFamily,
+            defaultFontSize: fontSize,
+            defaultFontColor: fontColor
+        }
+    };
+    return converted;
 }
-function _configureBackwardsCompatible(type, options) {
+// --- Helper functions ---
+function _ensureBackwardsCompatible(type, options) {
     switch (type) {
         case 'horizontalBar':
             if (!options.scales)
@@ -152,16 +171,10 @@ function _configureBackwardsCompatible(type, options) {
             break;
         case 'radar':
         case 'polarArea':
-            if (options.defaultFontColor) {
-                options.scale.ticks.fontColor = options.defaultFontColor;
-                if (options.scale.pointLabels) {
-                    options.scale.pointLabels.fontColor = options.defaultFontColor;
-                }
-                else {
-                    options.scale.pointLabels = { fontColor: options.defaultFontColor };
-                }
-            }
-            options.scale.ticks.backdropColor = options.fillStyle ? options.fillStyle : '#00ff0000';
+            if (!options.scale)
+                options.scale = {};
+            if (!options.scale.ticks)
+                options.scale.ticks = {};
             break;
         case 'line':
         case 'bar':
@@ -170,23 +183,15 @@ function _configureBackwardsCompatible(type, options) {
             if (!options.scales.yAxes)
                 options.scales.yAxes = [];
             if (options.scales.yAxes.length === 1) {
-                let yAxes = options.scales.yAxes;
-                yAxes.push({
+                options.scales.yAxes.push({
                     position: 'right',
                     id: 'right',
                     display: options.multiAxis || false,
                     gridLines: {
-                        display: (yAxes[0] && yAxes[0].gridLines && yAxes[0].gridLines.display) || false
+                        display: (options.scales.yAxes[0]?.gridLines?.display) || false
                     },
                     ticks: {
-                        beginAtZero: false,
-                        callback: function (value, index, values) {
-                            var returnValue = value;
-                            if (typeof returnValue == 'number') {
-                                returnValue = returnValue.toLocaleString();
-                            }
-                            return returnValue;
-                        }
+                        beginAtZero: false
                     }
                 });
             }
@@ -200,89 +205,91 @@ function _configureBackwardsCompatible(type, options) {
             break;
     }
 }
-function _setStacked(axis, stacked) {
-    axis.stacked = stacked;
-}
-function _setMultiAxis(axis, multiAxis) {
-    axis.display = multiAxis;
-}
-function _setAxisTitle(axis) {
-    if (!axis.scaleLabel)
-        axis.scaleLabel = {};
-    axis.scaleLabel.labelString = axis.axisTitle;
-    axis.scaleLabel.display = axis.axisTitle ? true : false;
-}
-function _setScalesFont(axis, { fontSize, fontFamily }) {
-    axis.ticks = axis.ticks ? axis.ticks : {};
-    axis.ticks.fontSize = fontSize;
-    if (fontFamily) {
-        axis.ticks.fontFamily = fontFamily;
-    }
-    ;
-    axis.pointLabels = {
-        fontSize,
-        fontFamily
+function _buildScale(axis, { fontSize, fontFamily, fontColor, theme }) {
+    const ticks = axis.ticks ? { ...axis.ticks } : {};
+    const baseColor = _getBaseColorFromTheme(theme);
+    // v4: min/max moved from ticks to scale level
+    const result = {
+        axis: axis.axis,
+        position: axis.position,
+        display: axis.display,
+        stacked: axis.stacked,
+        title: axis.title || {},
+        grid: {
+            display: axis.grid?.display,
+            tickColor: baseColor.clone().setAlpha(0.5).toString(),
+            color: baseColor.clone().setAlpha(0.1).toString()
+        },
+        ticks: {
+            display: ticks.display !== false,
+            color: fontColor || baseColor.clone().setAlpha(0.5).toString(),
+            font: { size: fontSize, family: fontFamily },
+            callback: function (value) {
+                if (!Number.isNaN(Number(value))) {
+                    return Number(value).toLocaleString();
+                }
+                return value;
+            }
+        }
     };
-}
-function _setScalesAutoMinMax(axis) {
-    axis.ticks = axis.ticks ? axis.ticks : {};
-    let autoMin = axis.ticks.autoMin;
-    let autoMax = axis.ticks.autoMax;
-    if (autoMin === true) {
-        delete axis.ticks.min;
+    // autoMin/autoMax handling
+    if (ticks.autoMin !== true && ticks.min != null) {
+        result.min = ticks.min;
     }
-    if (autoMax === true) {
-        delete axis.ticks.max;
+    if (ticks.autoMax !== true && ticks.max != null) {
+        result.max = ticks.max;
     }
-}
-function _setScalesTickRotation(axis) {
-    axis.ticks = axis.ticks ? axis.ticks : {};
-    // axis.ticks.maxRotation = 0
-}
-function _setScalesTheme(axis, theme, fontColor) {
-    var baseColor = _getBaseColorFromTheme(theme);
-    axis.gridLines = axis.gridLines ? axis.gridLines : {};
-    if (axis.gridLines) {
-        axis.gridLines.zeroLineColor = baseColor.clone().setAlpha(0.5).toString();
-        axis.gridLines.color = baseColor.clone().setAlpha(0.1).toString();
+    if (ticks.beginAtZero) {
+        result.beginAtZero = true;
     }
-    axis.ticks = axis.ticks ? axis.ticks : {};
-    axis.ticks.fontColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString();
-}
-function _setLegendFont(legend, { fontFamily, fontSize }) {
-    legend.labels = legend.labels ? legend.labels : {};
-    legend.labels.fontSize = fontSize;
-    if (fontFamily)
-        legend.labels.fontFamily = fontFamily;
+    return result;
 }
-function _setLegendTheme(legend, theme, fontColor) {
-    var baseColor = _getBaseColorFromTheme(theme);
-    legend.labels = legend.labels ? legend.labels : {};
-    legend.labels.fontColor = fontColor ? fontColor : baseColor.clone().setAlpha(0.5).toString();
+function _buildLegend(legend, { fontSize, fontFamily, fontColor, theme }) {
+    const baseColor = _getBaseColorFromTheme(theme);
+    const color = fontColor || baseColor.clone().setAlpha(0.5).toString();
+    return {
+        display: legend.display,
+        position: legend.position,
+        labels: {
+            boxWidth: 15,
+            color,
+            font: { size: fontSize, family: fontFamily }
+        }
+    };
 }
-function _getBaseColorFromTheme(theme) {
-    let darkColor = '#000';
-    let lightColor = '#fff';
-    var baseColor;
-    switch (theme) {
-        case 'light':
-            baseColor = lightColor;
-            break;
-        case 'dark':
-        default:
-            baseColor = darkColor;
-            break;
-    }
-    baseColor = new TinyColor(baseColor);
-    return baseColor;
+function _buildTooltip({ fontSize, fontFamily }) {
+    return {
+        enabled: true,
+        mode: 'index',
+        intersect: false,
+        titleFont: { size: fontSize, family: fontFamily },
+        bodyFont: { size: fontSize, family: fontFamily },
+        footerFont: { size: fontSize, family: fontFamily },
+        callbacks: {
+            label: function (context) {
+                const dataset = context.dataset;
+                const value = context.parsed?.y ?? context.parsed ?? context.raw;
+                const label = dataset.label || context.label || '';
+                const format = dataset.valueFormat || '';
+                const prefix = dataset.valuePrefix || '';
+                const suffix = dataset.valueSuffix || '';
+                const stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString();
+                return `${label}: ${prefix + stringValue + suffix}`;
+            }
+        }
+    };
 }
-function _setSeriesConfigures(series, chart) {
-    var type = series.type || chart.type;
-    var stackGroup = `${type} ${series.yAxisID} ${series.stack || series.dataKey}`;
-    var color = series.color ? series.color : series.backgroundColor;
-    var dataLabelAnchor = series.dataLabelAnchor || 'center';
-    var dataLabelOffset = series.dataLabelOffset || 0;
-    var dataLabelRotation = series.dataLabelRotation || 0;
+function _setupSeriesVisuals(series, chartType) {
+    const type = series.type || chartType;
+    const color = (() => {
+        switch (type) {
+            case 'line':
+            case 'radar':
+                return series.color || series.borderColor;
+            default:
+                return series.color || series.backgroundColor;
+        }
+    })();
     switch (type) {
         case 'bar':
         case 'horizontalBar':
@@ -290,57 +297,25 @@ function _setSeriesConfigures(series, chart) {
             break;
         case 'line':
         case 'radar':
-            color = series.color ? series.color : series.borderColor;
             series.pointBackgroundColor = series.pointBorderColor = series.borderColor = series.backgroundColor = color;
-            series.pointBorderWidth = series.borderWidth * 0.5;
+            series.pointBorderWidth = (series.borderWidth || 0) * 0.5;
             series.pointHoverRadius = series.pointRadius;
             if (series.fill == undefined)
                 series.fill = false;
+            // v2 lineTension → v4 tension
+            if (series.lineTension != null && series.tension == null) {
+                series.tension = series.lineTension;
+            }
             break;
         default:
             series.borderColor = series.backgroundColor = color;
             break;
     }
-    series.stack = stackGroup;
-    series.dataLabelAnchor = dataLabelAnchor;
-    series.dataLabelOffset = dataLabelOffset;
-    series.dataLabelRotation = dataLabelRotation;
+    series.dataLabelAnchor = series.dataLabelAnchor || 'center';
+    series.dataLabelOffset = series.dataLabelOffset || 0;
+    series.dataLabelRotation = series.dataLabelRotation || 0;
 }
-function _appendTickCallback(ticks) {
-    if (!ticks) {
-        return;
-    }
-    ticks.callback = function (value, index, values) {
-        var returnValue;
-        if (!Number.isNaN(Number(value))) {
-            returnValue = Number(value).toLocaleString();
-        }
-        else {
-            returnValue = value;
-        }
-        if (returnValue)
-            return returnValue;
-    };
-}
-function _setTooltipFont(tooltips, { fontSize, fontFamily }) {
-    tooltips.titleFontSize = tooltips.bodyFontSize = tooltips.footerFontSize = fontSize;
-    if (fontFamily)
-        tooltips.titleFontFamily = tooltips.bodyFontFamily = tooltips.footerFontFamily = fontFamily;
-}
-function _setTooltipCallback(tooltips) {
-    tooltips.callbacks = tooltips.callbacks || {};
-    tooltips.intersect = false;
-    tooltips.mode = 'index';
-    tooltips.callbacks.label = function (tooltipItem, data) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var value = (_b = (_a = data.datasets) === null || _a === void 0 ? void 0 : _a[tooltipItem.datasetIndex || 0].data) === null || _b === void 0 ? void 0 : _b[tooltipItem.index || 0];
-        var datasetLabel = (_c = data.datasets) === null || _c === void 0 ? void 0 : _c[tooltipItem.datasetIndex || 0].label;
-        var label = datasetLabel || ((_d = data.labels) === null || _d === void 0 ? void 0 : _d[tooltipItem.index || 0]);
-        var format = ((_e = data.datasets) === null || _e === void 0 ? void 0 : _e[tooltipItem.datasetIndex || 0].valueFormat) || '';
-        var prefix = ((_f = data.datasets) === null || _f === void 0 ? void 0 : _f[tooltipItem.datasetIndex || 0].valuePrefix) || '';
-        var suffix = ((_g = data.datasets) === null || _g === void 0 ? void 0 : _g[tooltipItem.datasetIndex || 0].valueSuffix) || '';
-        var stringValue = format ? formatText(format, Number(value)) : Number(value).toLocaleString();
-        return `${label}: ${prefix + stringValue + suffix}`;
-    };
+function _getBaseColorFromTheme(theme) {
+    return new TinyColor(theme === 'light' ? '#fff' : '#000');
 }
 //# sourceMappingURL=config-converter.js.map