@meonode/canvas 1.1.0 → 1.3.0

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

@@ -170,13 +170,22 @@ class ChartNode extends BoxNode {
             return;
         const chartData = this.chartData;
         const chartOptions = this.chartOptions;
+        const { labels, datasets } = chartData;
+        const maxValue = Math.max(...datasets.flatMap(d => d.data));
         const legendLayout = this.getLegendLayout(ctx, width, height);
-        const chartX = x + legendLayout.chartX;
+        let chartX = x + legendLayout.chartX;
         const chartY = y + legendLayout.chartY;
-        const chartWidth = legendLayout.chartWidth;
+        let chartWidth = legendLayout.chartWidth;
         const chartHeight = legendLayout.chartHeight;
-        const { labels, datasets } = chartData;
-        const maxValue = Math.max(...datasets.flatMap(d => d.data));
+        if (chartOptions?.showYAxis) {
+            const fontSize = chartOptions.yAxisFontSize || 12;
+            ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
+            const formatter = chartOptions.yAxisLabelFormatter || ((v) => v.toString());
+            const maxLabel = formatter(maxValue);
+            const yAxisWidth = ctx.measureText(maxLabel).width + 10;
+            chartX += yAxisWidth;
+            chartWidth -= yAxisWidth;
+        }
         let labelHeight = 0;
         if (chartOptions?.showLabels) {
             const fontSize = chartOptions.labelFontSize || 12;
@@ -204,6 +213,18 @@ class ChartNode extends BoxNode {
                 ctx.moveTo(chartX, gridY);
                 ctx.lineTo(chartX + chartWidth, gridY);
                 ctx.stroke();
+                if (chartOptions?.showYAxis) {
+                    const value = maxValue - (maxValue / 5) * i;
+                    const formatter = chartOptions.yAxisLabelFormatter || ((v) => (Math.round(v * 100) / 100).toString());
+                    const label = formatter(value);
+                    TextNode.renderSimpleText(ctx, label, chartX - 5, gridY, {
+                        color: chartOptions.yAxisColor || chartOptions.axisColor || '#000',
+                        fontSize: chartOptions.yAxisFontSize || 12,
+                        fontFamily: this.props.fontFamily,
+                        textAlign: 'right',
+                        textBaseline: 'middle',
+                    });
+                }
             }
             ctx.setLineDash([]);
         }
@@ -216,6 +237,31 @@ class ChartNode extends BoxNode {
                 const barY = chartY + finalChartHeight - barHeight;
                 ctx.fillStyle = dataset.color || this.generateColor(datasetIndex);
                 ctx.fillRect(barX, barY, barWidth, barHeight);
+                // Render values
+                if (chartOptions?.showValues) {
+                    const value = dataset.data[index];
+                    const { renderValueItem } = chartOptions;
+                    const valueX = barX + barWidth / 2;
+                    const valueY = barY - 5; // 5px padding above bar
+                    if (renderValueItem) {
+                        const valueNode = renderValueItem({ item: value, index, datasetIndex });
+                        if (valueNode) {
+                            valueNode.processInitialChildren();
+                            valueNode.node.calculateLayout(undefined, undefined, Style.Direction.LTR);
+                            const layout = valueNode.node.getComputedLayout();
+                            valueNode.render(ctx, valueX - layout.width / 2, valueY - layout.height);
+                        }
+                    }
+                    else {
+                        TextNode.renderSimpleText(ctx, value.toString(), valueX, valueY, {
+                            color: chartOptions.valueColor || '#000',
+                            fontSize: chartOptions.valueFontSize || 12,
+                            fontFamily: this.props.fontFamily,
+                            textAlign: 'center',
+                            textBaseline: 'bottom',
+                        });
+                    }
+                }
             });
             // Render labels
             if (chartOptions?.showLabels) {
@@ -250,13 +296,22 @@ class ChartNode extends BoxNode {
             return;
         const chartData = this.chartData;
         const chartOptions = this.chartOptions;
+        const { labels, datasets } = chartData;
+        const maxValue = Math.max(...datasets.flatMap(d => d.data));
         const legendLayout = this.getLegendLayout(ctx, width, height);
-        const chartX = x + legendLayout.chartX;
+        let chartX = x + legendLayout.chartX;
         const chartY = y + legendLayout.chartY;
-        const chartWidth = legendLayout.chartWidth;
+        let chartWidth = legendLayout.chartWidth;
         const chartHeight = legendLayout.chartHeight;
-        const { labels, datasets } = chartData;
-        const maxValue = Math.max(...datasets.flatMap(d => d.data));
+        if (chartOptions?.showYAxis) {
+            const fontSize = chartOptions.yAxisFontSize || 12;
+            ctx.font = `${fontSize}px ${this.props.fontFamily || 'sans-serif'}`;
+            const formatter = chartOptions.yAxisLabelFormatter || ((v) => v.toString());
+            const maxLabel = formatter(maxValue);
+            const yAxisWidth = ctx.measureText(maxLabel).width + 10;
+            chartX += yAxisWidth;
+            chartWidth -= yAxisWidth;
+        }
         let labelHeight = 0;
         if (chartOptions?.showLabels) {
             const fontSize = chartOptions.labelFontSize || 12;
@@ -282,6 +337,18 @@ class ChartNode extends BoxNode {
                 ctx.moveTo(chartX, gridY);
                 ctx.lineTo(chartX + chartWidth, gridY);
                 ctx.stroke();
+                if (chartOptions?.showYAxis) {
+                    const value = maxValue - (maxValue / 5) * i;
+                    const formatter = chartOptions.yAxisLabelFormatter || ((v) => (Math.round(v * 100) / 100).toString());
+                    const label = formatter(value);
+                    TextNode.renderSimpleText(ctx, label, chartX - 5, gridY, {
+                        color: chartOptions.yAxisColor || chartOptions.axisColor || '#000',
+                        fontSize: chartOptions.yAxisFontSize || 12,
+                        fontFamily: this.props.fontFamily,
+                        textAlign: 'right',
+                        textBaseline: 'middle',
+                    });
+                }
             }
             ctx.setLineDash([]);
         }

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

@@ -1,39 +1,46 @@
-import type { GridProps } from '../canvas/canvas.type.js';
+import type { GridProps, GridItemProps } from '../canvas/canvas.type.js';
 import { BoxNode, RowNode } from '../canvas/layout.canvas.util.js';
 /**
- * Grid layout node that arranges children in a configurable number of columns or rows.
- * Uses Yoga's flexbox capabilities with wrapping and gap properties to simulate a grid.
- * @extends RowNode
+ * GridItem Node. Theoretically just a BoxNode but typed differently in factory.
+ * In runtime, it behaves almost like a BoxNode, but we can detect it if needed,
+ * or simply rely on the props being present in the instance.
+ */
+export declare class GridItemNode extends BoxNode {
+    constructor(props: GridItemProps);
+}
+/**
+ * Factory for GridItem.
+ */
+export declare const GridItem: (props: GridItemProps) => GridItemNode;
+/**
+ * Grid layout node that arranges children in a 2D grid.
+ * Implements a simplified version of the CSS Grid Layout algorithm.
  */
 export declare class GridNode extends RowNode {
-    private readonly columns;
-    private readonly columnGapValue;
-    private readonly rowGapValue;
-    private readonly isVertical;
     /**
      * Creates a new grid layout node
      * @param props Grid configuration properties
      */
     constructor(props: GridProps);
     /**
-     * Appends a child node to this grid.
-     * Overridden primarily for documentation/clarity, functionality is inherited.
-     * @param child Child node to append
-     * @param index Index at which to insert the child
+     * Helper to parse a track size definition.
      */
-    protected appendChild(child: BoxNode, index: number): void;
+    private parseTrack;
+    /**
+     * Parses the gap property into pixels.
+     */
+    private getGapPixels;
     /**
      * Update layout calculations after the initial layout is computed.
-     * This method calculates the appropriate flex-basis for children based on the
-     * number of columns and gaps, respecting the container's padding,
-     * and applies the gaps using Yoga's built-in properties.
      */
     protected updateLayoutBasedOnComputedSize(): void;
+    /**
+     * Resolves track sizes to pixels.
+     */
+    private resolveTracks;
 }
 /**
  * Factory function to create a new GridNode instance.
- * @param props Grid configuration properties.
- * @returns A new GridNode instance.
  */
 export declare const Grid: (props: GridProps) => GridNode;
 //# sourceMappingURL=grid.canvas.util.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/grid.canvas.util.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGjE;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAQ;IAChC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAuB;IACtD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAuB;IACnD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAS;IAEpC;;;OAGG;gBACS,KAAK,EAAE,SAAS;IAqE5B;;;;;OAKG;cACgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM;IAI5D;;;;;OAKG;cACgB,+BAA+B;CAwLnD;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,aAAwB,CAAA"}
+{"version":3,"file":"grid.canvas.util.d.ts","sourceRoot":"","sources":["../../../src/canvas/grid.canvas.util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAiB,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACtF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAIjE;;;;GAIG;AACH,qBAAa,YAAa,SAAQ,OAAO;gBAC3B,KAAK,EAAE,aAAa;CAMjC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,iBAA4B,CAAA;AAEzE;;;GAGG;AACH,qBAAa,QAAS,SAAQ,OAAO;IACnC;;;OAGG;gBACS,KAAK,EAAE,SAAS;IAQ5B;;OAEG;IACH,OAAO,CAAC,UAAU;IAqBlB;;OAEG;IACH,OAAO,CAAC,YAAY;IAmBpB;;OAEG;cACgB,+BAA+B;IA4RlD;;OAEG;IACH,OAAO,CAAC,aAAa;CAkCtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,aAAwB,CAAA"}