@meonode/canvas 2.0.2 → 2.0.4

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

@@ -3,29 +3,7 @@
 var layout_canvas = require('./layout.canvas.js');
 var common_const = require('../constant/common.const.js');
 var text_canvas = require('./text.canvas.js');
-var image_canvas = require('./image.canvas.js');
 
-/**
- * Local buildTree for pre-computed render function results.
- * Handles only node types that render functions would return (Box, Column, Row, Text, Image).
- * Avoids circular dependency with root.canvas.ts.
- */
-function buildDescriptorTree(descriptor) {
-    switch (descriptor.__type) {
-        case 'Box':
-            return new layout_canvas.BoxNode({ ...descriptor.props, children: descriptor.children?.map(buildDescriptorTree) });
-        case 'Column':
-            return new layout_canvas.ColumnNode({ ...descriptor.props, children: descriptor.children?.map(buildDescriptorTree) });
-        case 'Row':
-            return new layout_canvas.RowNode({ ...descriptor.props, children: descriptor.children?.map(buildDescriptorTree) });
-        case 'Image':
-            return new image_canvas.ImageNode(descriptor.props);
-        case 'Text':
-            return new text_canvas.TextNode(descriptor.text, descriptor.props);
-        default:
-            return new layout_canvas.BoxNode({});
-    }
-}
 class ChartNode extends layout_canvas.BoxNode {
     chartData;
     chartType;
@@ -70,9 +48,9 @@ class ChartNode extends layout_canvas.BoxNode {
             }
         }
     }
-    _renderContent(ctx, x, y, width, height) {
+    async _renderContent(ctx, x, y, width, height) {
         // First render background/borders from parent
-        super._renderContent(ctx, x, y, width, height);
+        await 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);
@@ -84,16 +62,16 @@ class ChartNode extends layout_canvas.BoxNode {
         const contentHeight = height - paddingTop - paddingBottom;
         switch (this.chartType) {
             case 'bar':
-                this.renderBarChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                await this.renderBarChart(ctx, contentX, contentY, contentWidth, contentHeight);
                 break;
             case 'line':
-                this.renderLineChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                await this.renderLineChart(ctx, contentX, contentY, contentWidth, contentHeight);
                 break;
             case 'pie':
-                this.renderPieChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                await this.renderPieChart(ctx, contentX, contentY, contentWidth, contentHeight);
                 break;
             case 'doughnut':
-                this.renderDoughnutChart(ctx, contentX, contentY, contentWidth, contentHeight);
+                await this.renderDoughnutChart(ctx, contentX, contentY, contentWidth, contentHeight);
                 break;
         }
     }
@@ -213,7 +191,7 @@ class ChartNode extends layout_canvas.BoxNode {
             chartY: chartAreaY,
         };
     }
-    renderBarChart(ctx, x, y, width, height) {
+    async renderBarChart(ctx, x, y, width, height) {
         if (this.chartType !== 'bar')
             return;
         const chartData = this.chartData;
@@ -228,8 +206,7 @@ class ChartNode extends layout_canvas.BoxNode {
         if (chartOptions?.showYAxis) {
             const fontSize = chartOptions.yAxisFontSize || 12;
             ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
-            const maxLabel = chartOptions._preComputedYAxisLabels?.[0] ??
-                (chartOptions.yAxisLabelFormatter ? chartOptions.yAxisLabelFormatter(maxValue) : this.getSmartYAxisFormatter(maxValue)(maxValue));
+            const maxLabel = chartOptions.yAxisLabelFormatter ? await chartOptions.yAxisLabelFormatter(maxValue) : this.getSmartYAxisFormatter(maxValue)(maxValue);
             const yAxisWidth = ctx.measureText(maxLabel).width + 10;
             chartX += yAxisWidth;
             chartWidth -= yAxisWidth;
@@ -263,8 +240,7 @@ class ChartNode extends layout_canvas.BoxNode {
                 ctx.stroke();
                 if (chartOptions?.showYAxis) {
                     const value = maxValue - (maxValue / 5) * i;
-                    const label = chartOptions._preComputedYAxisLabels?.[i] ??
-                        (chartOptions.yAxisLabelFormatter ? chartOptions.yAxisLabelFormatter(value) : this.getSmartYAxisFormatter(maxValue)(value));
+                    const label = chartOptions.yAxisLabelFormatter ? await chartOptions.yAxisLabelFormatter(value) : this.getSmartYAxisFormatter(maxValue)(value);
                     text_canvas.TextNode.renderSimpleText(ctx, label, chartX - 5, gridY, {
                         color: chartOptions.yAxisColor || chartOptions.axisColor || '#000',
                         fontSize: chartOptions.yAxisFontSize || 12,
@@ -277,9 +253,11 @@ class ChartNode extends layout_canvas.BoxNode {
             ctx.setLineDash([]);
         }
         // Render bars
-        labels.forEach((label, index) => {
+        for (let index = 0; index < labels.length; index++) {
+            const label = labels[index];
             const groupX = chartX + index * groupWidth + barSpacing / 2;
-            datasets.forEach((dataset, datasetIndex) => {
+            for (let datasetIndex = 0; datasetIndex < datasets.length; datasetIndex++) {
+                const dataset = datasets[datasetIndex];
                 const barHeight = (dataset.data[index] / maxValue) * finalChartHeight;
                 const barX = groupX + datasetIndex * barWidth;
                 const barY = chartY + finalChartHeight - barHeight;
@@ -290,21 +268,13 @@ class ChartNode extends layout_canvas.BoxNode {
                     const value = dataset.data[index];
                     const valueX = barX + barWidth / 2;
                     const valueY = barY - 5; // 5px padding above bar
-                    const preComputedValueDesc = chartOptions._preComputedValueItems?.[datasetIndex]?.[index];
-                    if (preComputedValueDesc) {
-                        const valueNode = buildDescriptorTree(preComputedValueDesc);
-                        valueNode.processInitialChildren();
-                        valueNode.node.calculateLayout(undefined, undefined, common_const.Style.Direction.LTR);
-                        const layout = valueNode.node.getComputedLayout();
-                        valueNode.render(ctx, valueX - layout.width / 2, valueY - layout.height);
-                    }
-                    else if (chartOptions.renderValueItem) {
-                        const valueNode = chartOptions.renderValueItem({ item: value, index, datasetIndex });
+                    if (chartOptions.renderValueItem) {
+                        const valueNode = await chartOptions.renderValueItem({ item: value, index, datasetIndex });
                         if (valueNode) {
                             valueNode.processInitialChildren();
                             valueNode.node.calculateLayout(undefined, undefined, common_const.Style.Direction.LTR);
                             const layout = valueNode.node.getComputedLayout();
-                            valueNode.render(ctx, valueX - layout.width / 2, valueY - layout.height);
+                            await valueNode.render(ctx, valueX - layout.width / 2, valueY - layout.height);
                         }
                     }
                     else {
@@ -317,25 +287,17 @@ class ChartNode extends layout_canvas.BoxNode {
                         });
                     }
                 }
-            });
+            }
             // Render labels
             if (chartOptions?.showLabels) {
-                const displayLabel = chartOptions._preComputedXAxisLabels?.[index] ?? (chartOptions.xAxisLabelFormatter ? chartOptions.xAxisLabelFormatter(label, index) : label);
-                const preComputedLabelDesc = chartOptions._preComputedLabelItems?.[index];
-                if (preComputedLabelDesc) {
-                    const labelNode = buildDescriptorTree(preComputedLabelDesc);
-                    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 if (chartOptions.renderLabelItem) {
-                    const labelNode = chartOptions.renderLabelItem({ item: label, index });
+                const displayLabel = chartOptions.xAxisLabelFormatter ? await chartOptions.xAxisLabelFormatter(label, index) : label;
+                if (chartOptions.renderLabelItem) {
+                    const labelNode = await chartOptions.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);
+                        await labelNode.render(ctx, groupX + (groupWidth - barSpacing) / 2 - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
                     }
                 }
                 else {
@@ -348,13 +310,13 @@ class ChartNode extends layout_canvas.BoxNode {
                     });
                 }
             }
-        });
+        }
         // Render legend
         if (chartOptions?.showLegend) {
-            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+            await this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
         }
     }
-    renderLineChart(ctx, x, y, width, height) {
+    async renderLineChart(ctx, x, y, width, height) {
         if (this.chartType !== 'line')
             return;
         const chartData = this.chartData;
@@ -369,8 +331,7 @@ class ChartNode extends layout_canvas.BoxNode {
         if (chartOptions?.showYAxis) {
             const fontSize = chartOptions.yAxisFontSize || 12;
             ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
-            const maxLabel = chartOptions._preComputedYAxisLabels?.[0] ??
-                (chartOptions.yAxisLabelFormatter ? chartOptions.yAxisLabelFormatter(maxValue) : this.getSmartYAxisFormatter(maxValue)(maxValue));
+            const maxLabel = chartOptions.yAxisLabelFormatter ? await chartOptions.yAxisLabelFormatter(maxValue) : this.getSmartYAxisFormatter(maxValue)(maxValue);
             const yAxisWidth = ctx.measureText(maxLabel).width + 10;
             chartX += yAxisWidth;
             chartWidth -= yAxisWidth;
@@ -402,8 +363,7 @@ class ChartNode extends layout_canvas.BoxNode {
                 ctx.stroke();
                 if (chartOptions?.showYAxis) {
                     const value = maxValue - (maxValue / 5) * i;
-                    const label = chartOptions._preComputedYAxisLabels?.[i] ??
-                        (chartOptions.yAxisLabelFormatter ? chartOptions.yAxisLabelFormatter(value) : this.getSmartYAxisFormatter(maxValue)(value));
+                    const label = chartOptions.yAxisLabelFormatter ? await chartOptions.yAxisLabelFormatter(value) : this.getSmartYAxisFormatter(maxValue)(value);
                     text_canvas.TextNode.renderSimpleText(ctx, label, chartX - 5, gridY, {
                         color: chartOptions.yAxisColor || chartOptions.axisColor || '#000',
                         fontSize: chartOptions.yAxisFontSize || 12,
@@ -416,11 +376,13 @@ class ChartNode extends layout_canvas.BoxNode {
             ctx.setLineDash([]);
         }
         // Render lines and points
-        datasets.forEach((dataset, datasetIndex) => {
+        for (let datasetIndex = 0; datasetIndex < datasets.length; datasetIndex++) {
+            const dataset = datasets[datasetIndex];
             ctx.strokeStyle = dataset.color || this.generateColor(datasetIndex);
             ctx.lineWidth = 2;
             ctx.beginPath();
-            dataset.data.forEach((value, index) => {
+            for (let index = 0; index < dataset.data.length; index++) {
+                const value = dataset.data[index];
                 const pointX = chartX + index * pointSpacing;
                 const pointY = chartY + finalChartHeight - (value / maxValue) * finalChartHeight;
                 if (index === 0) {
@@ -429,38 +391,31 @@ class ChartNode extends layout_canvas.BoxNode {
                 else {
                     ctx.lineTo(pointX, pointY);
                 }
-            });
+            }
             ctx.stroke();
             // Render points
-            dataset.data.forEach((value, index) => {
+            for (let index = 0; index < dataset.data.length; index++) {
                 const pointX = chartX + index * pointSpacing;
-                const pointY = chartY + finalChartHeight - (value / maxValue) * finalChartHeight;
+                const pointY = chartY + finalChartHeight - (dataset.data[index] / 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) {
-            labels.forEach((label, index) => {
+            for (let index = 0; index < labels.length; index++) {
+                const label = labels[index];
                 const pointX = chartX + index * pointSpacing;
-                const displayLabel = chartOptions._preComputedXAxisLabels?.[index] ?? (chartOptions.xAxisLabelFormatter ? chartOptions.xAxisLabelFormatter(label, index) : label);
-                const preComputedLabelDesc = chartOptions._preComputedLabelItems?.[index];
-                if (preComputedLabelDesc) {
-                    const labelNode = buildDescriptorTree(preComputedLabelDesc);
-                    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 if (chartOptions.renderLabelItem) {
-                    const labelNode = chartOptions.renderLabelItem({ item: label, index });
+                const displayLabel = chartOptions.xAxisLabelFormatter ? await chartOptions.xAxisLabelFormatter(label, index) : label;
+                if (chartOptions.renderLabelItem) {
+                    const labelNode = await chartOptions.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);
+                        await labelNode.render(ctx, pointX - layout.width / 2, chartY + finalChartHeight + labelHeight / 2 - layout.height / 2);
                     }
                 }
                 else {
@@ -472,13 +427,13 @@ class ChartNode extends layout_canvas.BoxNode {
                         textBaseline: 'middle',
                     });
                 }
-            });
+            }
         }
         if (chartOptions?.showLegend) {
-            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+            await this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
         }
     }
-    renderPieChart(ctx, x, y, width, height) {
+    async renderPieChart(ctx, x, y, width, height) {
         if (this.chartType !== 'pie')
             return;
         const data = this.chartData;
@@ -493,7 +448,8 @@ class ChartNode extends layout_canvas.BoxNode {
         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) => {
+        for (let index = 0; index < data.length; index++) {
+            const point = data[index];
             const sliceAngle = (point.value / total) * Math.PI * 2;
             const startAngle = currentAngle;
             const endAngle = currentAngle + sliceAngle;
@@ -513,21 +469,13 @@ class ChartNode extends layout_canvas.BoxNode {
                 const labelRadius = radius * 0.7;
                 const labelX = centerX + Math.cos(labelAngle) * labelRadius;
                 const labelY = centerY + Math.sin(labelAngle) * labelRadius;
-                const preComputedLabelDesc = chartOptions._preComputedLabelItems?.[index];
-                if (preComputedLabelDesc) {
-                    const labelNode = buildDescriptorTree(preComputedLabelDesc);
-                    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 if (chartOptions.renderLabelItem) {
-                    const labelNode = chartOptions.renderLabelItem({ item: point, index });
+                if (chartOptions.renderLabelItem) {
+                    const labelNode = await chartOptions.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);
+                        await labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
                     }
                 }
                 else {
@@ -541,12 +489,12 @@ class ChartNode extends layout_canvas.BoxNode {
                 }
             }
             currentAngle = endAngle;
-        });
+        }
         if (chartOptions?.showLegend) {
-            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+            await this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
         }
     }
-    renderDoughnutChart(ctx, x, y, width, height) {
+    async renderDoughnutChart(ctx, x, y, width, height) {
         if (this.chartType !== 'doughnut')
             return;
         const data = this.chartData;
@@ -562,7 +510,8 @@ class ChartNode extends layout_canvas.BoxNode {
         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) => {
+        for (let index = 0; index < data.length; index++) {
+            const point = data[index];
             const sliceAngle = (point.value / total) * Math.PI * 2;
             const startAngle = currentAngle;
             const endAngle = currentAngle + sliceAngle;
@@ -581,21 +530,13 @@ class ChartNode extends layout_canvas.BoxNode {
                 const labelRadius = innerRadius + (outerRadius - innerRadius) / 2;
                 const labelX = centerX + Math.cos(labelAngle) * labelRadius;
                 const labelY = centerY + Math.sin(labelAngle) * labelRadius;
-                const preComputedLabelDesc = chartOptions._preComputedLabelItems?.[index];
-                if (preComputedLabelDesc) {
-                    const labelNode = buildDescriptorTree(preComputedLabelDesc);
-                    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 if (chartOptions.renderLabelItem) {
-                    const labelNode = chartOptions.renderLabelItem({ item: point, index });
+                if (chartOptions.renderLabelItem) {
+                    const labelNode = await chartOptions.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);
+                        await labelNode.render(ctx, labelX - layout.width / 2, labelY - layout.height / 2);
                     }
                 }
                 else {
@@ -609,48 +550,31 @@ class ChartNode extends layout_canvas.BoxNode {
                 }
             }
             currentAngle = endAngle;
-        });
+        }
         if (chartOptions?.showLegend) {
-            this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
+            await this.renderLegend(ctx, x + legendLayout.x, y + legendLayout.y, legendLayout.width, legendLayout.height);
         }
     }
-    renderLegend(ctx, x, y, width, height) {
-        const { renderLegendItem, _preComputedLegendItems } = this.chartOptions;
-        if (_preComputedLegendItems) {
-            const finalNodes = _preComputedLegendItems.filter((desc) => !!desc).map(desc => buildDescriptorTree(desc));
-            if (finalNodes.length > 0) {
-                const legendContainer = new layout_canvas.RowNode({
-                    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;
-        }
+    async renderLegend(ctx, x, y, width, height) {
+        const chartOptions = this.chartOptions;
+        const renderLegendItem = chartOptions?.renderLegendItem;
         if (renderLegendItem) {
             let legendNodes;
             if (this.chartType === 'bar' || this.chartType === 'line') {
                 const items = this.chartData.datasets;
                 const render = renderLegendItem;
-                legendNodes = items.map((item, index) => {
+                legendNodes = await Promise.all(items.map(async (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) => {
+                legendNodes = await Promise.all(items.map(async (item, index) => {
                     const color = item.color || this.generateColor(index);
                     return render({ item, index, color });
-                });
+                }));
             }
             const finalNodes = legendNodes.filter((node) => !!node);
             if (finalNodes.length > 0) {
@@ -665,11 +589,13 @@ class ChartNode extends layout_canvas.BoxNode {
                 });
                 legendContainer.processInitialChildren();
                 legendContainer.node.calculateLayout(width, height, common_const.Style.Direction.LTR);
-                legendContainer.render(ctx, x, y);
+                await legendContainer.render(ctx, x, y);
             }
             return;
         }
         // Fallback to default rendering if renderLegendItem is not provided
+        if (!this.chartData)
+            return;
         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;
@@ -679,7 +605,7 @@ class ChartNode extends layout_canvas.BoxNode {
         const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
         const itemHeight = Math.ceil(textHeight + 8);
         const boxSize = Math.min(15, itemHeight - 2);
-        const position = this.chartOptions.legendPosition;
+        const position = this.chartOptions?.legendPosition;
         if (position === 'top' || position === 'bottom') {
             const itemPadding = 20; // horizontal padding between items
             const rows = [];