@meonode/canvas 1.0.0 → 1.1.0

package/dist/cjs/canvas/chart.canvas.util.js

@@ -0,0 +1,582 @@
+'use strict';
+
+var layout_canvas_util = require('./layout.canvas.util.js');
+var common_const = require('../constant/common.const.js');
+var text_canvas_util = require('./text.canvas.util.js');
+
+class ChartNode extends layout_canvas_util.BoxNode {
+    chartData;
+    chartType;
+    chartOptions;
+    constructor(props) {
+        // Set default intrinsic size if not provided
+        const defaultWidth = props.width ?? 400;
+        const defaultHeight = props.height ?? 300;
+        super({
+            ...props,
+            width: defaultWidth,
+            height: defaultHeight,
+            name: 'Chart',
+        });
+        this.chartData = props.data;
+        this.chartType = props.type;
+        this.chartOptions = {
+            showLabels: true,
+            showLegend: true,
+            labelFontSize: 12,
+            legendPosition: 'bottom',
+            ...props.options,
+        };
+        this.validateProps();
+    }
+    validateProps() {
+        if (this.chartType === 'bar' || this.chartType === 'line') {
+            const data = this.chartData;
+            if (!data.labels || !data.datasets) {
+                console.warn(`[ChartNode] Warning: Cartesian chart (${this.chartType}) is missing 'labels' or 'datasets' in its data prop.`);
+            }
+            data.datasets?.forEach((dataset, i) => {
+                if (dataset.data.length !== data.labels.length) {
+                    console.warn(`[ChartNode] Warning: In dataset ${i} ("${dataset.label}"), the number of data points (${dataset.data.length}) does not match the number of labels (${data.labels.length}).`);
+                }
+            });
+        }
+        else if (this.chartType === 'pie' || this.chartType === 'doughnut') {
+            const data = this.chartData;
+            if (!Array.isArray(data)) {
+                console.warn(`[ChartNode] Warning: ${this.chartType} chart expects an array of PieChartDataPoint, but received a different type.`);
+            }
+        }
+    }
+    _renderContent(ctx, x, y, width, height) {
+        // First render background/borders from parent
+        super._renderContent(ctx, x, y, width, height);
+        // Then render chart-specific content
+        const paddingLeft = this.node.getComputedPadding(common_const.Style.Edge.Left);
+        const paddingRight = this.node.getComputedPadding(common_const.Style.Edge.Right);
+        const paddingTop = this.node.getComputedPadding(common_const.Style.Edge.Top);
+        const paddingBottom = this.node.getComputedPadding(common_const.Style.Edge.Bottom);
+        const contentX = x + paddingLeft;
+        const contentY = y + paddingTop;
+        const contentWidth = width - paddingLeft - paddingRight;
+        const contentHeight = height - paddingTop - paddingBottom;
+        switch (this.chartType) {
+            case 'bar':
+                this.renderBarChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                break;
+            case 'line':
+                this.renderLineChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                break;
+            case 'pie':
+                this.renderPieChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                break;
+            case 'doughnut':
+                this.renderDoughnutChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                break;
+        }
+    }
+    getLegendLayout(ctx, totalWidth, totalHeight) {
+        if (!this.chartOptions?.showLegend) {
+            return { x: 0, y: 0, width: 0, height: 0, chartWidth: totalWidth, chartHeight: totalHeight, chartX: 0, chartY: 0 };
+        }
+        const legendItems = 'datasets' in this.chartData ? this.chartData.datasets : this.chartData;
+        if (legendItems.length === 0) {
+            return { x: 0, y: 0, width: 0, height: 0, chartWidth: totalWidth, chartHeight: totalHeight, chartX: 0, chartY: 0 };
+        }
+        const fontSize = this.chartOptions?.labelFontSize || 12;
+        ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
+        const metrics = ctx.measureText('Mg');
+        const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+        const itemHeight = Math.ceil(textHeight + 8);
+        const position = this.chartOptions.legendPosition;
+        const boxSize = Math.min(15, itemHeight - 2);
+        const legendItemLabels = 'datasets' in this.chartData ? this.chartData.datasets.map(d => d.label) : this.chartData.map(p => `${p.label} (${p.value})`);
+        let calculatedLegendHeight;
+        let calculatedLegendWidth;
+        if (position === 'top' || position === 'bottom') {
+            let currentX = 0;
+            let numRows = 1;
+            const itemPadding = 20;
+            legendItemLabels.forEach(label => {
+                const labelWidth = ctx.measureText(label).width;
+                const itemWidth = boxSize + 5 + labelWidth + itemPadding;
+                if (currentX > 0 && currentX + itemWidth > totalWidth) {
+                    numRows++;
+                    currentX = 0;
+                }
+                currentX += itemWidth;
+            });
+            calculatedLegendHeight = numRows * itemHeight + 10;
+            calculatedLegendWidth = totalWidth;
+        }
+        else {
+            // 'left' or 'right'
+            const maxLabelWidth = Math.max(...legendItemLabels.map(label => ctx.measureText(label).width));
+            calculatedLegendWidth = maxLabelWidth + boxSize + 25; // padding + box + padding + text
+            calculatedLegendHeight = totalHeight;
+        }
+        let effectiveChartWidth = totalWidth;
+        let effectiveChartHeight = totalHeight;
+        let legendAreaX;
+        let legendAreaY;
+        let chartAreaX;
+        let chartAreaY;
+        let legendAreaWidth;
+        let legendAreaHeight;
+        if (position === 'top' || position === 'bottom') {
+            effectiveChartHeight -= calculatedLegendHeight;
+            legendAreaHeight = calculatedLegendHeight;
+            legendAreaWidth = totalWidth;
+            legendAreaX = 0;
+            chartAreaX = 0;
+            if (position === 'top') {
+                chartAreaY = calculatedLegendHeight;
+                legendAreaY = 0;
+            }
+            else {
+                // bottom
+                legendAreaY = effectiveChartHeight;
+                chartAreaY = 0;
+            }
+        }
+        else {
+            // 'left' or 'right'
+            effectiveChartWidth -= calculatedLegendWidth;
+            legendAreaWidth = calculatedLegendWidth;
+            legendAreaHeight = totalHeight;
+            legendAreaY = 0;
+            chartAreaY = 0;
+            if (position === 'left') {
+                chartAreaX = calculatedLegendWidth;
+                legendAreaX = 0;
+            }
+            else {
+                // right
+                legendAreaX = effectiveChartWidth;
+                chartAreaX = 0;
+            }
+        }
+        return {
+            x: legendAreaX,
+            y: legendAreaY,
+            width: legendAreaWidth,
+            height: legendAreaHeight,
+            chartWidth: effectiveChartWidth,
+            chartHeight: effectiveChartHeight,
+            chartX: chartAreaX,
+            chartY: chartAreaY,
+        };
+    }
+    renderBarChart(ctx, x, y, width, height) {
+        if (this.chartType !== 'bar')
+            return;
+        const chartData = this.chartData;
+        const chartOptions = this.chartOptions;
+        const legendLayout = this.getLegendLayout(ctx, width, height);
+        const chartX = x + legendLayout.chartX;
+        const chartY = y + legendLayout.chartY;
+        const chartWidth = legendLayout.chartWidth;
+        const chartHeight = legendLayout.chartHeight;
+        const { labels, datasets } = chartData;
+        const maxValue = Math.max(...datasets.flatMap(d => d.data));
+        let labelHeight = 0;
+        if (chartOptions?.showLabels) {
+            const fontSize = chartOptions.labelFontSize || 12;
+            ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
+            const metrics = ctx.measureText('Mg');
+            labelHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + 10; // with padding
+        }
+        const finalChartHeight = chartHeight - labelHeight;
+        const groupWidth = chartWidth / labels.length;
+        const barSpacing = groupWidth * 0.2;
+        const barWidth = (groupWidth - barSpacing) / datasets.length;
+        // Render grid
+        if (chartOptions?.grid?.show) {
+            ctx.strokeStyle = chartOptions.grid.color || '#e0e0e0';
+            ctx.lineWidth = 1;
+            if (chartOptions.grid.style === 'dashed') {
+                ctx.setLineDash([5, 5]);
+            }
+            else if (chartOptions.grid.style === 'dotted') {
+                ctx.setLineDash([2, 2]);
+            }
+            for (let i = 0; i <= 5; i++) {
+                const gridY = chartY + (finalChartHeight / 5) * i;
+                ctx.beginPath();
+                ctx.moveTo(chartX, gridY);
+                ctx.lineTo(chartX + chartWidth, gridY);
+                ctx.stroke();
+            }
+            ctx.setLineDash([]);
+        }
+        // Render bars
+        labels.forEach((label, index) => {
+            const groupX = chartX + index * groupWidth + barSpacing / 2;
+            datasets.forEach((dataset, datasetIndex) => {
+                const barHeight = (dataset.data[index] / maxValue) * finalChartHeight;
+                const barX = groupX + datasetIndex * barWidth;
+                const barY = chartY + finalChartHeight - barHeight;
+                ctx.fillStyle = dataset.color || this.generateColor(datasetIndex);
+                ctx.fillRect(barX, barY, barWidth, barHeight);
+            });
+            // Render labels
+            if (chartOptions?.showLabels) {
+                const { renderLabelItem } = chartOptions;
+                if (renderLabelItem) {
+                    const labelNode = renderLabelItem({ item: label, index });
+                    if (labelNode) {
+                        labelNode.processInitialChildren();
+                        labelNode.node.calculateLayout(undefined, undefined, common_const.Style.Direction.LTR);
+                        const layout = labelNode.node.getComputedLayout();
+                        labelNode.render(ctx, groupX + (groupWidth - barSpacing) / 2 - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
+                    }
+                }
+                else {
+                    text_canvas_util.TextNode.renderSimpleText(ctx, label, groupX + (groupWidth - barSpacing) / 2, chartY + finalChartHeight + labelHeight / 2, {
+                        color: chartOptions.labelColor || chartOptions.axisColor,
+                        fontSize: chartOptions.labelFontSize,
+                        fontFamily: this.props.fontFamily,
+                        textAlign: 'center',
+                        textBaseline: 'middle',
+                    });
+                }
+            }
+        });
+        // Render legend
+        if (chartOptions?.showLegend) {
+            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+        }
+    }
+    renderLineChart(ctx, x, y, width, height) {
+        if (this.chartType !== 'line')
+            return;
+        const chartData = this.chartData;
+        const chartOptions = this.chartOptions;
+        const legendLayout = this.getLegendLayout(ctx, width, height);
+        const chartX = x + legendLayout.chartX;
+        const chartY = y + legendLayout.chartY;
+        const chartWidth = legendLayout.chartWidth;
+        const chartHeight = legendLayout.chartHeight;
+        const { labels, datasets } = chartData;
+        const maxValue = Math.max(...datasets.flatMap(d => d.data));
+        let labelHeight = 0;
+        if (chartOptions?.showLabels) {
+            const fontSize = chartOptions.labelFontSize || 12;
+            ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
+            const metrics = ctx.measureText('Mg');
+            labelHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + 10; // with padding
+        }
+        const finalChartHeight = chartHeight - labelHeight;
+        const pointSpacing = chartWidth / (labels.length > 1 ? labels.length - 1 : 1);
+        // Render grid
+        if (chartOptions?.grid?.show) {
+            ctx.strokeStyle = chartOptions.grid.color || '#e0e0e0';
+            ctx.lineWidth = 1;
+            if (chartOptions.grid.style === 'dashed') {
+                ctx.setLineDash([5, 5]);
+            }
+            else if (chartOptions.grid.style === 'dotted') {
+                ctx.setLineDash([2, 2]);
+            }
+            for (let i = 0; i <= 5; i++) {
+                const gridY = chartY + (finalChartHeight / 5) * i;
+                ctx.beginPath();
+                ctx.moveTo(chartX, gridY);
+                ctx.lineTo(chartX + chartWidth, gridY);
+                ctx.stroke();
+            }
+            ctx.setLineDash([]);
+        }
+        // Render lines and points
+        datasets.forEach((dataset, datasetIndex) => {
+            ctx.strokeStyle = dataset.color || this.generateColor(datasetIndex);
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            dataset.data.forEach((value, index) => {
+                const pointX = chartX + index * pointSpacing;
+                const pointY = chartY + finalChartHeight - (value / maxValue) * finalChartHeight;
+                if (index === 0) {
+                    ctx.moveTo(pointX, pointY);
+                }
+                else {
+                    ctx.lineTo(pointX, pointY);
+                }
+            });
+            ctx.stroke();
+            // Render points
+            dataset.data.forEach((value, index) => {
+                const pointX = chartX + index * pointSpacing;
+                const pointY = chartY + finalChartHeight - (value / maxValue) * finalChartHeight;
+                ctx.fillStyle = dataset.color || this.generateColor(datasetIndex);
+                ctx.beginPath();
+                ctx.arc(pointX, pointY, 4, 0, Math.PI * 2);
+                ctx.fill();
+            });
+        });
+        // Render labels
+        if (chartOptions?.showLabels) {
+            const { renderLabelItem } = chartOptions;
+            labels.forEach((label, index) => {
+                const pointX = chartX + index * pointSpacing;
+                if (renderLabelItem) {
+                    const labelNode = renderLabelItem({ item: label, index });
+                    if (labelNode) {
+                        labelNode.processInitialChildren();
+                        labelNode.node.calculateLayout(undefined, undefined, common_const.Style.Direction.LTR);
+                        const layout = labelNode.node.getComputedLayout();
+                        labelNode.render(ctx, pointX - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
+                    }
+                }
+                else {
+                    text_canvas_util.TextNode.renderSimpleText(ctx, label, pointX, chartY + finalChartHeight + labelHeight / 2, {
+                        color: chartOptions.labelColor || chartOptions.axisColor,
+                        fontSize: chartOptions.labelFontSize,
+                        fontFamily: this.props.fontFamily,
+                        textAlign: 'center',
+                        textBaseline: 'middle',
+                    });
+                }
+            });
+        }
+        if (chartOptions?.showLegend) {
+            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+        }
+    }
+    renderPieChart(ctx, x, y, width, height) {
+        if (this.chartType !== 'pie')
+            return;
+        const data = this.chartData;
+        const chartOptions = this.chartOptions;
+        const legendLayout = this.getLegendLayout(ctx, width, height);
+        const chartX = x + legendLayout.chartX;
+        const chartY = y + legendLayout.chartY;
+        const chartWidth = legendLayout.chartWidth;
+        const chartHeight = legendLayout.chartHeight;
+        const centerX = chartX + chartWidth / 2;
+        const centerY = chartY + chartHeight / 2;
+        const radius = Math.min(chartWidth, chartHeight) / 2 - 10;
+        const total = data.reduce((sum, point) => sum + point.value, 0);
+        let currentAngle = -Math.PI / 2; // Start at top
+        data.forEach((point, index) => {
+            const sliceAngle = (point.value / total) * Math.PI * 2;
+            const startAngle = currentAngle;
+            const endAngle = currentAngle + sliceAngle;
+            ctx.fillStyle = point.color || this.generateColor(index);
+            ctx.beginPath();
+            ctx.moveTo(centerX, centerY);
+            ctx.arc(centerX, centerY, radius, startAngle, endAngle);
+            ctx.closePath();
+            ctx.fill();
+            // Draw slice border
+            ctx.strokeStyle = '#fff';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            // Render labels
+            if (chartOptions?.showLabels) {
+                const { renderLabelItem } = chartOptions;
+                const labelAngle = startAngle + sliceAngle / 2;
+                const labelRadius = radius * 0.7;
+                const labelX = centerX + Math.cos(labelAngle) * labelRadius;
+                const labelY = centerY + Math.sin(labelAngle) * labelRadius;
+                if (renderLabelItem) {
+                    const labelNode = renderLabelItem({ item: point, index });
+                    if (labelNode) {
+                        labelNode.processInitialChildren();
+                        labelNode.node.calculateLayout(undefined, undefined, common_const.Style.Direction.LTR);
+                        const layout = labelNode.node.getComputedLayout();
+                        labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
+                    }
+                }
+                else {
+                    text_canvas_util.TextNode.renderSimpleText(ctx, point.label, labelX, labelY, {
+                        color: chartOptions.labelColor,
+                        fontSize: chartOptions.labelFontSize,
+                        fontFamily: this.props.fontFamily,
+                        textAlign: 'center',
+                        textBaseline: 'middle',
+                    });
+                }
+            }
+            currentAngle = endAngle;
+        });
+        if (chartOptions?.showLegend) {
+            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+        }
+    }
+    renderDoughnutChart(ctx, x, y, width, height) {
+        if (this.chartType !== 'doughnut')
+            return;
+        const data = this.chartData;
+        const chartOptions = this.chartOptions;
+        const legendLayout = this.getLegendLayout(ctx, width, height);
+        const chartX = x + legendLayout.chartX;
+        const chartY = y + legendLayout.chartY;
+        const chartWidth = legendLayout.chartWidth;
+        const chartHeight = legendLayout.chartHeight;
+        const centerX = chartX + chartWidth / 2;
+        const centerY = chartY + chartHeight / 2;
+        const outerRadius = Math.min(chartWidth, chartHeight) / 2 - 10;
+        const innerRadius = outerRadius * (chartOptions?.innerRadius ?? 0.6);
+        const total = data.reduce((sum, point) => sum + point.value, 0);
+        let currentAngle = -Math.PI / 2;
+        data.forEach((point, index) => {
+            const sliceAngle = (point.value / total) * Math.PI * 2;
+            const startAngle = currentAngle;
+            const endAngle = currentAngle + sliceAngle;
+            ctx.fillStyle = point.color || this.generateColor(index);
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, outerRadius, startAngle, endAngle);
+            ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
+            ctx.closePath();
+            ctx.fill();
+            ctx.strokeStyle = '#fff';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            // Render labels
+            if (chartOptions?.showLabels) {
+                const { renderLabelItem } = chartOptions;
+                const labelAngle = startAngle + sliceAngle / 2;
+                const labelRadius = innerRadius + (outerRadius - innerRadius) / 2;
+                const labelX = centerX + Math.cos(labelAngle) * labelRadius;
+                const labelY = centerY + Math.sin(labelAngle) * labelRadius;
+                if (renderLabelItem) {
+                    const labelNode = renderLabelItem({ item: point, index });
+                    if (labelNode) {
+                        labelNode.processInitialChildren();
+                        labelNode.node.calculateLayout(undefined, undefined, common_const.Style.Direction.LTR);
+                        const layout = labelNode.node.getComputedLayout();
+                        labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
+                    }
+                }
+                else {
+                    text_canvas_util.TextNode.renderSimpleText(ctx, point.label, labelX, labelY, {
+                        color: chartOptions.labelColor,
+                        fontSize: chartOptions.labelFontSize,
+                        fontFamily: this.props.fontFamily,
+                        textAlign: 'center',
+                        textBaseline: 'middle',
+                    });
+                }
+            }
+            currentAngle = endAngle;
+        });
+        if (chartOptions?.showLegend) {
+            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+        }
+    }
+    renderLegend(ctx, x, y, width, height) {
+        const { renderLegendItem } = this.chartOptions;
+        if (renderLegendItem) {
+            let legendNodes;
+            if (this.chartType === 'bar' || this.chartType === 'line') {
+                const items = this.chartData.datasets;
+                const render = renderLegendItem;
+                legendNodes = items.map((item, index) => {
+                    const color = item.color || this.generateColor(index);
+                    return render({ item, index, color });
+                });
+            }
+            else {
+                const items = this.chartData;
+                const render = renderLegendItem;
+                legendNodes = items.map((item, index) => {
+                    const color = item.color || this.generateColor(index);
+                    return render({ item, index, color });
+                });
+            }
+            const finalNodes = legendNodes.filter((node) => !!node);
+            if (finalNodes.length > 0) {
+                const legendContainer = layout_canvas_util.Row({
+                    children: finalNodes,
+                    width,
+                    height,
+                    justifyContent: common_const.Style.Justify.Center,
+                    alignItems: common_const.Style.Align.Center,
+                    flexWrap: common_const.Style.Wrap.Wrap,
+                    gap: 10,
+                });
+                legendContainer.processInitialChildren();
+                legendContainer.node.calculateLayout(width, height, common_const.Style.Direction.LTR);
+                legendContainer.render(ctx, x, y);
+            }
+            return;
+        }
+        // Fallback to default rendering if renderLegendItem is not provided
+        const legendItems = 'datasets' in this.chartData
+            ? this.chartData.datasets.map(d => ({ label: d.label, value: d.data.reduce((a, b) => a + b, 0) }))
+            : this.chartData;
+        const fontSize = this.chartOptions?.labelFontSize || 12;
+        ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
+        const metrics = ctx.measureText('Mg');
+        const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+        const itemHeight = Math.ceil(textHeight + 8);
+        const boxSize = Math.min(15, itemHeight - 2);
+        const position = this.chartOptions.legendPosition;
+        if (position === 'top' || position === 'bottom') {
+            const itemPadding = 20; // horizontal padding between items
+            const rows = [];
+            let currentRow = { items: [], width: 0 };
+            legendItems.forEach((point, index) => {
+                const color = ('datasets' in this.chartData ? this.chartData.datasets[index].color : point.color) || this.generateColor(index);
+                const label = 'datasets' in this.chartData ? point.label : `${point.label} (${point.value})`;
+                const labelWidth = ctx.measureText(label).width;
+                const itemWidth = boxSize + 5 + labelWidth;
+                if (currentRow.items.length > 0 && currentRow.width + itemPadding + itemWidth > width) {
+                    rows.push(currentRow);
+                    currentRow = { items: [], width: 0 };
+                }
+                currentRow.items.push({ label, color, width: itemWidth });
+                currentRow.width += itemWidth + (currentRow.items.length > 1 ? itemPadding : 0);
+            });
+            rows.push(currentRow);
+            let currentY = y + 5;
+            rows.forEach(row => {
+                let currentX = x + (width - row.width) / 2;
+                row.items.forEach(item => {
+                    const boxY = currentY + (itemHeight - boxSize) / 2;
+                    ctx.fillStyle = item.color;
+                    ctx.fillRect(currentX, boxY, boxSize, boxSize);
+                    text_canvas_util.TextNode.renderSimpleText(ctx, item.label, currentX + boxSize + 5, currentY + itemHeight / 2, {
+                        color: this.chartOptions?.labelColor,
+                        fontSize,
+                        fontFamily: this.props.fontFamily,
+                        textAlign: 'left',
+                        textBaseline: 'middle',
+                    });
+                    currentX += item.width + itemPadding;
+                });
+                currentY += itemHeight;
+            });
+        }
+        else {
+            // 'left' or 'right'
+            const totalHeight = legendItems.length * itemHeight;
+            const startY = y + (height - totalHeight) / 2;
+            legendItems.forEach((point, index) => {
+                const itemX = x + 10;
+                const itemY = startY + index * itemHeight;
+                const boxY = itemY + (itemHeight - boxSize) / 2;
+                ctx.fillStyle =
+                    ('datasets' in this.chartData ? this.chartData.datasets[index].color : point.color) || this.generateColor(index);
+                ctx.fillRect(itemX, boxY, boxSize, boxSize);
+                const label = 'datasets' in this.chartData ? point.label : `${point.label} (${point.value})`;
+                text_canvas_util.TextNode.renderSimpleText(ctx, label, itemX + boxSize + 5, itemY + itemHeight / 2, {
+                    color: this.chartOptions?.labelColor,
+                    fontSize,
+                    fontFamily: this.props.fontFamily,
+                    textAlign: 'left',
+                    textBaseline: 'middle',
+                });
+            });
+        }
+    }
+    generateColor(index) {
+        const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#C9CBCF'];
+        return colors[index % colors.length];
+    }
+}
+const Chart = (props) => new ChartNode(props);
+
+exports.Chart = Chart;
+exports.ChartNode = ChartNode;
+//# sourceMappingURL=chart.canvas.util.js.map