@meonode/canvas 1.0.0 → 1.1.0

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

@@ -0,0 +1,578 @@
+import { BoxNode, Row } from './layout.canvas.util.js';
+import { Style } from '../constant/common.const.js';
+import { TextNode } from './text.canvas.util.js';
+
+class ChartNode extends 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(Style.Edge.Left);
+        const paddingRight = this.node.getComputedPadding(Style.Edge.Right);
+        const paddingTop = this.node.getComputedPadding(Style.Edge.Top);
+        const paddingBottom = this.node.getComputedPadding(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, 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 {
+                    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, Style.Direction.LTR);
+                        const layout = labelNode.node.getComputedLayout();
+                        labelNode.render(ctx, pointX - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
+                    }
+                }
+                else {
+                    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, Style.Direction.LTR);
+                        const layout = labelNode.node.getComputedLayout();
+                        labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
+                    }
+                }
+                else {
+                    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, Style.Direction.LTR);
+                        const layout = labelNode.node.getComputedLayout();
+                        labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
+                    }
+                }
+                else {
+                    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 = Row({
+                    children: finalNodes,
+                    width,
+                    height,
+                    justifyContent: Style.Justify.Center,
+                    alignItems: Style.Align.Center,
+                    flexWrap: Style.Wrap.Wrap,
+                    gap: 10,
+                });
+                legendContainer.processInitialChildren();
+                legendContainer.node.calculateLayout(width, height, 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);
+                    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})`;
+                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);
+
+export { Chart, ChartNode };

package/dist/esm/canvas/text.canvas.util.d.ts

@@ -17,6 +17,24 @@ export declare class TextNode extends BoxNode {
         lineGap: number;
     };
     constructor(text?: number | string, props?: TextProps);
+    /**
+     * Renders a simple, single-line text string without complex layout calculations.
+     * A lightweight, static utility for drawing text where layout is handled externally.
+     * @param ctx The canvas rendering context.
+     * @param text The string to render.
+     * @param x The x-coordinate for rendering.
+     * @param y The y-coordinate for rendering.
+     * @param props Basic text styling properties.
+     */
+    static renderSimpleText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, props?: {
+        fontFamily?: string;
+        fontSize?: number;
+        fontWeight?: TextProps['fontWeight'];
+        fontStyle?: TextProps['fontStyle'];
+        color?: string;
+        textAlign?: CanvasRenderingContext2D['textAlign'];
+        textBaseline?: CanvasRenderingContext2D['textBaseline'];
+    }): void;
     protected applyDefaults(): void;
     /**
      * Processes Unix-like escape sequences in text strings.

package/dist/esm/canvas/text.canvas.util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/text.canvas.util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAU,KAAK,wBAAwB,EAA2B,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEjC,KAAK,EAAE,SAAS,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;gBAElC,IAAI,GAAE,MAAM,GAAG,MAAW,EAAE,KAAK,GAAE,SAAc;cAuB1C,aAAa,IAAI,IAAI;IAoDxC;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,aAAa;IA+ErB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAyBxB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,aAAa;IAiCrB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,WAAW;IA8NnB;;;;;;;;;OASG;IACH,OAAO,CAAC,YAAY;IAuKpB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAmErB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;;;;;;;;;;;;;;;OAgBG;cACgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CA8UrH;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,SAAS,aAA8B,CAAA"}
+{"version":3,"file":"text.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/text.canvas.util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAe,MAAM,yBAAyB,CAAA;AACrE,OAAO,EAAU,KAAK,wBAAwB,EAA2B,MAAM,aAAa,CAAA;AAC5F,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAwC;IACzE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAU;IACxC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAe;IAEjC,KAAK,EAAE,SAAS,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;gBAElC,IAAI,GAAE,MAAM,GAAG,MAAW,EAAE,KAAK,GAAE,SAAc;IAuB7D;;;;;;;;OAQG;WACW,gBAAgB,CAC5B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,GAAE;QACL,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAA;QACpC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAA;QAClC,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,wBAAwB,CAAC,WAAW,CAAC,CAAA;QACjD,YAAY,CAAC,EAAE,wBAAwB,CAAC,cAAc,CAAC,CAAA;KACnD;cAwBW,aAAa,IAAI,IAAI;IAoDxC;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,sBAAsB;IA8B9B;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,aAAa;IA+ErB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IAyBxB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,aAAa;IAiCrB;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAQjC;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,WAAW;IA8NnB;;;;;;;;;OASG;IACH,OAAO,CAAC,YAAY;IAuKpB;;;;;;;OAOG;IACH,OAAO,CAAC,aAAa;IAmErB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAQzB;;;;;;;;;;;;;;;;OAgBG;cACgB,cAAc,CAAC,GAAG,EAAE,wBAAwB,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CA8UrH;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,SAAS,aAA8B,CAAA"}

package/dist/esm/canvas/text.canvas.util.js

@@ -37,6 +37,25 @@ class TextNode extends BoxNode {
         this.node.setMeasureFunc(this.measureText.bind(this));
         this.applyDefaults();
     }
+    /**
+     * Renders a simple, single-line text string without complex layout calculations.
+     * A lightweight, static utility for drawing text where layout is handled externally.
+     * @param ctx The canvas rendering context.
+     * @param text The string to render.
+     * @param x The x-coordinate for rendering.
+     * @param y The y-coordinate for rendering.
+     * @param props Basic text styling properties.
+     */
+    static renderSimpleText(ctx, text, x, y, props = {}) {
+        ctx.save();
+        const { fontFamily = 'sans-serif', fontSize = 12, fontWeight = 'normal', fontStyle = 'normal', color = '#333', textAlign = 'left', textBaseline = 'alphabetic', } = props;
+        ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+        ctx.fillStyle = color;
+        ctx.textAlign = textAlign;
+        ctx.textBaseline = textBaseline;
+        ctx.fillText(text, x, y);
+        ctx.restore();
+    }
     applyDefaults() {
         const textDefaults = {
             fontSize: 16,

package/dist/esm/index.d.ts

@@ -5,4 +5,5 @@ export { Image } from './canvas/image.canvas.util.js';
 export { Text } from './canvas/text.canvas.util.js';
 export { Root } from './canvas/root.canvas.util.js';
 export { Grid } from './canvas/grid.canvas.util.js';
+export { Chart } from './canvas/chart.canvas.util.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAC/E,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAC/E,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/esm/index.js

@@ -4,4 +4,5 @@ export { Image } from './canvas/image.canvas.util.js';
 export { Text } from './canvas/text.canvas.util.js';
 export { Root } from './canvas/root.canvas.util.js';
 export { Grid } from './canvas/grid.canvas.util.js';
+export { Chart } from './canvas/chart.canvas.util.js';
 export * from 'yoga-layout';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meonode/canvas",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A declarative, component-based library for generating high-quality images on a canvas, inspired by the MeoNode UI library for React. It leverages skia-canvas for rendering and yoga-layout for flexible, CSS-like layouts.",
   "keywords": [
     "canvas",