stickyflow 0.7.0 → 0.8.0

package/dist/{chunk-SDMQRSRW.js → chunk-MAPNY7MJ.js}

@@ -1,4 +1,4 @@
-import { componentRegistryVersion, isDimensionObject, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, cleanFootprint, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, shadeFill, extrudeFootprint, isometricFaces, roundedPolygonPath, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, isometricTopFaceCenter, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-JQK4IGXJ.js';
+import { componentRegistryVersion, isDimensionObject, isIsometricObject, sflToCanvasState, registerComponentDescriptor, isBuiltInComponentType, getComponentDescriptor, tag, EMPTY_BOUNDS, DOM_CONTRACT_VERSION, edgePointToward, elementCenter, VISIBLE_ISOMETRIC_FACES, isometricFaceCenter, finite, freeformPathData, rotatedBounds, DEFAULT_FONT, isGenericComponent, cleanFootprint, pointAtNormalizedPort, boxBounds, cornersRoundedRectPath, calculateLinkRoute, labelGapDash, getLineMidpoint, personLabelArea, wrapText, heuristicRichMeasure, shadeFill, extrudeFootprint, isometricFaces, roundedPolygonPath, stackSequence, stackRank, topRoundedRectPath, rightRoundedRectPath, leftRoundedRectPath, bottomRoundedRectPath, isHorizontalBar, paint, CHART_TITLE_PROP, chartText, chartTicks, mapChartValue, roundedOrthogonalPathData, localShapePath, pillCornerRadius, isometricBounds, AXIS_SIN, deriveFaceFills, labelTilt, tiltedLabelRoom, resolveChartShadow, CHART_COLORS, angleForAxisValue, horizontalRows, rowTop, categoryProp, isometricTopFaceCenter, ISOMETRIC_SIZE_ATTR, CORNER_RADIUS_ATTR, ISOMETRIC_LABEL_OFFSET_ATTR, PATH_POINTS_ATTR, PATH_TENSION_ATTR, PATH_CLOSED_ATTR, SYMBOL_BOUNDS_ATTR, SYMBOL_POINTS_ATTR, SYMBOL_TENSION_ATTR, SQUARE_CORNER_ATTR, resolvePieRadii, radarCategoryCount, radarRadius, createPieGeometry, DEFAULT_HEX_RADIUS, DEFAULT_HEATMAP_ZONES, axisBands, DEFAULT_ZONE_FILL, representativeColor, computeBoxplotStats, barCategoryCount, ruleAtProp, ruleTextProp, labelBelowFrame, seriesLabelProp, axisLabelProp, seriesColorProp, seriesValueProp, radarSeriesPath, radarRadiusForValue, createPieSlicePath, clipSegmentToRect, formatFieldValue, renderPieLabels, interpolateHexColorStops, contrastTextColor, sameHueTint, isLightColor, barShapePath, linePathData, colorWithAlpha, estimateTextWidth, segmentedBarPath, roundedBarPath, radarPointAt, gapInsetAngle, pieUsesInnerArc, maxPieCornerRadius, pieApexRadius, maxApexCornerRadius, pieArcPoint, sameHueContrastColor, zoneColorAtValue, ellipsizeToWidth, barPath, labelAboveFrame, seriesValueColorProp, stackedSegment, errorBarRange, createVerticalErrorWhiskerNode, formatBarLabel, barLabelSize, CATEGORY_LABEL_ROW, BAR_LABEL, pillPath, resolveRollingNumberStyle, formatRollingNumber } from './chunk-GLZVHUSW.js';
 
 // src/renderInput/styleDecoding/colorToken.ts
 var COLOR_TOKEN_PATTERN = String.raw`rgba?\([^)]*\)|#[0-9a-fA-F]+|[a-zA-Z][\w-]*`;
@@ -240,6 +240,14 @@ function axesOf(p) {
     axisLineStyle: p.axisLineStyle === "dashed" || p.axisLineStyle === "dotted" ? p.axisLineStyle : void 0,
     tickLength: numOf(p.tickLength),
     axisFontSize: numOf(p.axisFontSize),
+    axisLabelAngle: numOf(p.axisLabelAngle),
+    axisLabelSpace: numOf(p.axisLabelSpace),
+    rowLabelSide: p.rowLabelSide === "left" || p.rowLabelSide === "right" ? p.rowLabelSide : void 0,
+    columnLabelSide: p.columnLabelSide === "top" || p.columnLabelSide === "bottom" ? p.columnLabelSide : void 0,
+    legendSide: p.legendSide === "top" || p.legendSide === "bottom" || p.legendSide === "left" || p.legendSide === "right" ? p.legendSide : void 0,
+    xLabelGap: numOf(p.xLabelGap),
+    yLabelGap: numOf(p.yLabelGap),
+    axisLabelAlign: p.axisLabelAlign === "left" || p.axisLabelAlign === "center" || p.axisLabelAlign === "right" ? p.axisLabelAlign : void 0,
     axisFontFamily: p.axisFontFamily,
     showValueAxis: p.showValueAxis !== "false",
     categoryAlign: p.categoryAlign === "left" || p.categoryAlign === "inside" ? p.categoryAlign : void 0,
@@ -250,6 +258,7 @@ function textOf(p) {
   return {
     textColor: p.textColor ?? "#0f172a",
     titleSize: numOf(p.titleSize),
+    titleAlign: p.titleAlign === "left" || p.titleAlign === "center" || p.titleAlign === "right" ? p.titleAlign : void 0,
     titleWeight: p.titleWeight === "normal" ? "normal" : void 0,
     titleColor: p.titleColor,
     fontSize: numOf(p.fontSize) ?? 12,
@@ -259,6 +268,7 @@ function textOf(p) {
 function legendOf(p) {
   return {
     legendColor: p.legendColor,
+    legendGap: numOf(p.legendGap),
     showLegend: p.showLegend === "true",
     legendPosition: legendPositionOf(p.legendPosition)
   };
@@ -3538,7 +3548,13 @@ function renderShapeGeometry(context) {
 }
 
 // src/renderScene/artifacts/shape/shaderSurface.ts
-var RECT_PROGRAMS = /* @__PURE__ */ new Set(["reactivePanel", "ledMatrix", "lightBand", "silkFolds"]);
+var RECT_PROGRAMS = /* @__PURE__ */ new Set([
+  "reactivePanel",
+  "ledMatrix",
+  "lightBand",
+  "silkFolds",
+  "glowCard"
+]);
 function shaderMask(context) {
   if (context.shape.shapeType === "circle" || context.shape.shapeType === "oval") {
     return "ellipse";
@@ -4057,6 +4073,12 @@ function hasCartesianDecorations(chart) {
 function tickOffset(chart) {
   return hasCartesianDecorations(chart) ? Math.max(0, finite(chart.tickLength, 0)) : 0;
 }
+function xLabelOffset(chart) {
+  return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0, finite(chart.xLabelGap, 0)) : 0);
+}
+function yLabelOffset(chart) {
+  return tickOffset(chart) + (hasCartesianDecorations(chart) ? Math.max(0, finite(chart.yLabelGap, 0)) : 0);
+}
 function isHorizontalBoxplot(chart) {
   return chart.chartType === "boxplot" && chart.config?.orientation === "horizontal";
 }
@@ -4078,6 +4100,9 @@ function barCategoryLabelWidth(chart) {
   return Math.max(0, ...categories.map((category) => category.length)) * fontSize * 0.58 + 16;
 }
 function leftLabelWidth(chart) {
+  if (chart.axisLabelSpace && chart.axisLabelSpace > 0 && (isHorizontalBoxplot(chart) || isHorizontalBar(chart))) {
+    return chart.axisLabelSpace;
+  }
   if (isHorizontalBoxplot(chart)) {
     return boxplotCategoryLabelWidth(chart);
   }
@@ -4089,6 +4114,14 @@ function leftLabelWidth(chart) {
   }
   return chart.axisY.label ? 60 : 46;
 }
+function tiltedBottomRoom(chart) {
+  const tilt = labelTilt(chart);
+  if (tilt <= 0) {
+    return 0;
+  }
+  const labels = chart.chartType === "bar" && !isHorizontalBar(chart) ? chart.config?.categories ?? [] : chart.chartType === "boxplot" && !isHorizontalBoxplot(chart) ? chart.series.map((series) => series.label || series.id) : [];
+  return labels.length > 0 ? Math.max(0, tiltedLabelRoom(chart, labels, tilt) - 18) : 0;
+}
 function decorations(chart) {
   const showLabels = chart.showAxisLabels !== false;
   const showLegend = chart.showLegend !== false;
@@ -4098,15 +4131,16 @@ function decorations(chart) {
   const legendStacked = hasLegendItems && isStackedLegendPosition(legendPosition);
   const sideColumnWidth = legendStacked ? stackedLegendColumnWidth(chart) + LEGEND_COLUMN_GAP : 0;
   const treemapSide = treemapSideLegendSide(chart, showLegend);
-  const tick = tickOffset(chart);
-  const padLeft = tick + (showLabels ? leftLabelWidth(chart) : 12) + (legendPosition === "bottomLeft" ? sideColumnWidth : 0) + (treemapSide === "left" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
+  const tickX = xLabelOffset(chart);
+  const tickY = yLabelOffset(chart);
+  const padLeft = tickY + (showLabels ? leftLabelWidth(chart) : 12) + (legendPosition === "bottomLeft" ? sideColumnWidth : 0) + (treemapSide === "left" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
   const padRight = 24 + (legendPosition === "bottomRight" ? sideColumnWidth : 0) + (treemapSide === "right" ? TREEMAP_SIDE_LEGEND_WIDTH : 0);
   const valueRow = chart.chartType === "bar" && chart.config?.showBarLabels === true && chart.config.barLabelPosition === "axis";
   const horizontalValueAxis = isHorizontalBar(chart) && chart.showValueAxis !== false;
   const basePadBottom = showLabels ? isHorizontalBar(chart) ? horizontalValueAxis ? 34 : 12 : (chart.axisX.label ? 52 : 34) + (valueRow ? 18 : 0) : 12;
   const hasColorBar = chart.chartType === "field" && showLegend && Boolean(chart.config?.scale?.stops.length);
   const legendAtBottomRow = hasLegendItems && !legendAtTop && !legendStacked;
-  const padBottom = tick + basePadBottom + (hasColorBar ? 44 : 0) + (legendAtBottomRow ? 16 + LEGEND_ROW_HEIGHT : 0);
+  const padBottom = tickX + basePadBottom + (showLabels ? tiltedBottomRoom(chart) : 0) + (hasColorBar ? 44 : 0) + (legendAtBottomRow ? 16 + LEGEND_ROW_HEIGHT : 0);
   const titleHeight = chart.title ? Math.max(44, 20 + finite(chart.titleSize, 14) * 1.6) : 0;
   const padTop = titleHeight || (legendAtTop && hasLegendItems ? 44 : 24);
   return {
@@ -4138,6 +4172,7 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
   const slotWidth = layout.plot.width / count;
   const labels = categoryLabels(chart, count);
   const editable = Boolean(chart.config?.categories?.length);
+  const tilt = labelTilt(chart);
   const left = chart.categoryAlign === "left";
   const groupGap = left ? Math.min(
     Math.max(0, finite(chart.config?.barGroupGap, 8)),
@@ -4145,6 +4180,27 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
   ) : 0;
   return Array.from({ length: count }, (_value, index) => {
     const centerX = layout.plot.x + (index + 0.5) * slotWidth;
+    if (tilt > 0) {
+      const text = labels[index] ?? String(index + 1);
+      const { frame, rotation } = labelBelowFrame(chart, text, tilt, {
+        x: centerX,
+        y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart)
+      });
+      return {
+        ...chartText({
+          role: "axis",
+          id: `chart-x-tick-${chart.id}-${index}`,
+          order: order + index,
+          bounds: layout.bounds,
+          frame,
+          text,
+          chart,
+          align: "right",
+          rotation
+        }),
+        prop: editable ? categoryProp(index) : void 0
+      };
+    }
     return {
       ...chartText({
         role: "axis",
@@ -4153,7 +4209,7 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
         bounds: layout.bounds,
         frame: {
           x: left ? layout.plot.x + index * slotWidth + groupGap / 2 : centerX - slotWidth / 2,
-          y: layout.plot.y + layout.plot.height + 4 + tickOffset(chart),
+          y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart),
           width: left ? slotWidth - groupGap : slotWidth,
           height: 18
         },
@@ -4168,8 +4224,30 @@ function buildCategoricalXAxisTicks(chart, layout, order) {
 function buildSeriesXAxisTicks(chart, layout, order) {
   const count = Math.max(1, chart.series.length);
   const slotWidth = layout.plot.width / count;
+  const tilt = labelTilt(chart);
   return chart.series.map((series, index) => {
     const centerX = layout.plot.x + (index + 0.5) * slotWidth;
+    if (tilt > 0) {
+      const text = series.label || series.id;
+      const { frame, rotation } = labelBelowFrame(chart, text, tilt, {
+        x: centerX,
+        y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart)
+      });
+      return {
+        ...chartText({
+          role: "axis",
+          id: `chart-x-tick-${chart.id}-${index}`,
+          order: order + index,
+          bounds: layout.bounds,
+          frame,
+          text,
+          chart,
+          align: "right",
+          rotation
+        }),
+        prop: seriesLabelProp(series.id)
+      };
+    }
     return {
       ...chartText({
         role: "axis",
@@ -4178,7 +4256,7 @@ function buildSeriesXAxisTicks(chart, layout, order) {
         bounds: layout.bounds,
         frame: {
           x: centerX - slotWidth / 2,
-          y: layout.plot.y + layout.plot.height + 4 + tickOffset(chart),
+          y: layout.plot.y + layout.plot.height + 4 + xLabelOffset(chart),
           width: slotWidth,
           height: 18
         },
@@ -4200,7 +4278,7 @@ function buildNumericXAxisTicks(chart, layout, order) {
       id: `chart-x-tick-${chart.id}-${tick}`,
       order: order + index,
       bounds: layout.bounds,
-      frame: { x: x - 20, y: layout.plot.y + layout.plot.height + 10 + tickOffset(chart), width: 40, height: 18 },
+      frame: { x: x - 20, y: layout.plot.y + layout.plot.height + 10 + xLabelOffset(chart), width: 40, height: 18 },
       text: String(tick),
       chart,
       align: "center"
@@ -4217,7 +4295,7 @@ function buildNumericYAxisTicks(chart, layout, order) {
       id: `chart-y-tick-${chart.id}-${tick}`,
       order: order + index,
       bounds: layout.bounds,
-      frame: { x: chart.x, y: y - 6, width: layout.padLeft - 14 - tickOffset(chart), height: 18 },
+      frame: { x: chart.x, y: y - 6, width: layout.padLeft - 14 - yLabelOffset(chart), height: 18 },
       text: String(tick),
       chart,
       align: "right"
@@ -6291,92 +6369,74 @@ function createCellValueLabel(context, layout, cell) {
   };
 }
 
-// src/renderScene/charts/renderers/heatmap/headers.ts
-function renderHeatmapHeaders(context, layout) {
-  return [...renderRowHeaders(context, layout), ...renderColumnHeaders(context, layout)];
-}
-function renderRowHeaders(context, layout) {
-  if (layout.reservedSpace.rowHeaders <= 0) {
-    return [];
-  }
-  return layout.rows.map((series, rowIndex) => createRowHeader(context, layout, series, rowIndex));
-}
-function createRowHeader(context, layout, series, rowIndex) {
-  const { chart, plot, bounds, nextOrder } = context;
-  return chartText({
-    id: `chart-heatmap-row-${chart.id}-${series.id}`,
-    order: nextOrder(),
-    bounds,
-    frame: {
-      x: plot.x,
-      y: layout.grid.y + rowIndex * layout.grid.cellHeight + layout.grid.cellHeight / 2 - layout.fontSize / 2,
-      width: layout.reservedSpace.rowHeaders - 8,
-      height: layout.fontSize + 2
-    },
-    text: series.label,
-    chart
-  });
-}
-function renderColumnHeaders(context, layout) {
-  if (layout.reservedSpace.columnHeaders <= 0) {
-    return [];
-  }
-  return layout.columns.map((label, columnIndex) => createColumnHeader(context, layout, label, columnIndex));
-}
-function createColumnHeader(context, layout, label, columnIndex) {
-  const { chart, plot, bounds, nextOrder } = context;
-  return chartText({
-    id: `chart-heatmap-col-${chart.id}-${columnIndex}`,
-    order: nextOrder(),
-    bounds,
-    frame: {
-      x: layout.grid.x + columnIndex * layout.grid.cellWidth,
-      y: plot.y,
-      width: layout.grid.cellWidth,
-      height: layout.fontSize + 2
-    },
-    text: label,
-    chart,
-    align: "center"
-  });
-}
-
 // src/renderScene/charts/renderers/heatmap/layout.ts
 function createHeatmapLayout(context) {
   const { chart } = context;
   const columns = heatmapColumns(context);
-  const reservedSpace = heatmapReservedSpace(context);
+  const sides = heatmapSides(context);
+  const reservedSpace = heatmapReservedSpace(context, sides);
   return {
     rows: chart.series,
     columns,
     bands: axisBands(chart.axisY),
     zones: chart.config?.zones?.length ? chart.config.zones : DEFAULT_HEATMAP_ZONES,
     fontSize: Math.max(9, finite(chart.fontSize, 12)),
+    headerFontSize: headerFontSize(chart),
+    legendGap: legendGap(chart),
+    sides,
     reservedSpace,
-    grid: createHeatmapGrid(context, reservedSpace, columns.length)
+    grid: createHeatmapGrid(context, reservedSpace, sides, columns.length)
+  };
+}
+var headerFontSize = (chart) => Math.max(9, finite(chart.axisFontSize ?? chart.fontSize, 12));
+var rowGap = (chart) => Math.min(120, Math.max(0, finite(chart.yLabelGap, 6)));
+var columnGap = (chart) => Math.min(120, Math.max(0, finite(chart.xLabelGap, 4)));
+var legendGap = (chart) => Math.min(80, Math.max(0, finite(chart.legendGap, 6)));
+function heatmapSides(context) {
+  const { chart } = context;
+  return {
+    rows: chart.rowLabelSide === "right" ? "right" : "left",
+    columns: chart.columnLabelSide === "bottom" ? "bottom" : "top",
+    legend: chart.legendSide ?? "bottom"
   };
 }
 function heatmapColumns(context) {
   const { chart } = context;
   return chart.config?.categories?.length ? chart.config.categories : chart.series[0]?.values?.map((_, index) => String(index + 1)) ?? [];
 }
-function heatmapReservedSpace(context) {
+var LEGEND_ACROSS = 32;
+var LEGEND_BESIDE = 56;
+function heatmapReservedSpace(context, sides) {
   const { chart } = context;
-  const fontSize = Math.max(9, finite(chart.fontSize, 12));
+  const fontSize = headerFontSize(chart);
   const longestLabel = chart.series.reduce(
     (max, series) => Math.max(max, estimateTextWidth(series.label ?? "", fontSize, false)),
     0
   );
+  const vertical = sides.legend === "left" || sides.legend === "right";
   return {
-    rowHeaders: context.showLabels ? Math.min(96, longestLabel + 12) : 0,
-    columnHeaders: context.showLabels ? 24 : 0,
-    legend: context.showLegend ? 38 : 0
+    // The names get the room they ask for, or as much as the longest needs. They never take more than most of the plot.
+    rowHeaders: context.showLabels ? Math.min(
+      context.plot.width * 0.7,
+      chart.axisLabelSpace && chart.axisLabelSpace > 0 ? chart.axisLabelSpace : longestLabel + 6 + rowGap(chart)
+    ) : 0,
+    columnHeaders: context.showLabels ? columnHeaderRoom(context) : 0,
+    legend: context.showLegend ? (vertical ? LEGEND_BESIDE : LEGEND_ACROSS) + legendGap(chart) : 0
   };
 }
-function createHeatmapGrid(context, reservedSpace, columnCount) {
+function columnHeaderRoom(context) {
   const { chart } = context;
-  const width = Math.max(1, context.plot.width - reservedSpace.rowHeaders);
-  const height = Math.max(1, context.plot.height - reservedSpace.columnHeaders - reservedSpace.legend);
+  const tilt = labelTilt(chart);
+  return tilt > 0 ? Math.min(context.plot.height * 0.4, tiltedLabelRoom(chart, heatmapColumns(context), tilt) + columnGap(chart) + 4) : headerFontSize(chart) + 2 + columnGap(chart) + 6;
+}
+function createHeatmapGrid(context, reservedSpace, sides, columnCount) {
+  const { chart } = context;
+  const left = (sides.rows === "left" ? reservedSpace.rowHeaders : 0) + (sides.legend === "left" ? reservedSpace.legend : 0);
+  const right = (sides.rows === "right" ? reservedSpace.rowHeaders : 0) + (sides.legend === "right" ? reservedSpace.legend : 0);
+  const top = (sides.columns === "top" ? reservedSpace.columnHeaders : 0) + (sides.legend === "top" ? reservedSpace.legend : 0);
+  const bottom = (sides.columns === "bottom" ? reservedSpace.columnHeaders : 0) + (sides.legend === "bottom" ? reservedSpace.legend : 0);
+  const width = Math.max(1, context.plot.width - left - right);
+  const height = Math.max(1, context.plot.height - top - bottom);
   const rowCount = chart.series.length;
   const cellGap = Math.max(0, finite(chart.config?.cellGap, 0));
   let cellWidth = columnCount ? width / columnCount : width;
@@ -6391,8 +6451,8 @@ function createHeatmapGrid(context, reservedSpace, columnCount) {
     gridHeight = cellSize * rowCount;
   }
   return {
-    x: context.plot.x + reservedSpace.rowHeaders,
-    y: context.plot.y + reservedSpace.columnHeaders,
+    x: context.plot.x + left,
+    y: context.plot.y + top,
     width: gridWidth,
     height: gridHeight,
     cellWidth,
@@ -6402,30 +6462,151 @@ function createHeatmapGrid(context, reservedSpace, columnCount) {
   };
 }
 
+// src/renderScene/charts/renderers/heatmap/headers.ts
+function renderHeatmapHeaders(context, layout) {
+  return [...renderRowHeaders(context, layout), ...renderColumnHeaders(context, layout)];
+}
+function renderRowHeaders(context, layout) {
+  if (layout.reservedSpace.rowHeaders <= 0) {
+    return [];
+  }
+  return layout.rows.map((series, rowIndex) => createRowHeader(context, layout, series, rowIndex));
+}
+function createRowHeader(context, layout, series, rowIndex) {
+  const { chart, bounds, nextOrder } = context;
+  const room = layout.reservedSpace.rowHeaders;
+  const gap = rowGap(chart);
+  const x = layout.sides.rows === "left" ? layout.grid.x - room : layout.grid.x + layout.grid.width + gap;
+  return chartText({
+    id: `chart-heatmap-row-${chart.id}-${series.id}`,
+    order: nextOrder(),
+    bounds,
+    frame: {
+      x,
+      y: layout.grid.y + rowIndex * layout.grid.cellHeight + layout.grid.cellHeight / 2 - layout.headerFontSize / 2,
+      width: Math.max(1, room - gap),
+      height: layout.headerFontSize + 2
+    },
+    text: series.label,
+    chart,
+    align: chart.axisLabelAlign ?? "left",
+    role: "axis"
+  });
+}
+function renderColumnHeaders(context, layout) {
+  if (layout.reservedSpace.columnHeaders <= 0) {
+    return [];
+  }
+  return layout.columns.map((label, columnIndex) => createColumnHeader(context, layout, label, columnIndex));
+}
+function createColumnHeader(context, layout, label, columnIndex) {
+  const { chart, bounds, nextOrder } = context;
+  const above = layout.sides.columns === "top";
+  const centerX = layout.grid.x + (columnIndex + 0.5) * layout.grid.cellWidth;
+  const tilt = labelTilt(chart);
+  const gap = columnGap(chart);
+  const id = `chart-heatmap-col-${chart.id}-${columnIndex}`;
+  if (tilt > 0) {
+    const { frame, rotation } = above ? labelAboveFrame(chart, label, tilt, { x: centerX, y: layout.grid.y - gap }) : labelBelowFrame(chart, label, tilt, { x: centerX, y: layout.grid.y + layout.grid.height + gap });
+    return chartText({
+      id,
+      order: nextOrder(),
+      bounds,
+      frame,
+      text: label,
+      chart,
+      align: above ? "left" : "right",
+      rotation,
+      role: "axis"
+    });
+  }
+  return chartText({
+    id,
+    order: nextOrder(),
+    bounds,
+    frame: {
+      x: layout.grid.x + columnIndex * layout.grid.cellWidth,
+      y: above ? layout.grid.y - gap - (layout.headerFontSize + 2) : layout.grid.y + layout.grid.height + gap,
+      width: layout.grid.cellWidth,
+      height: layout.headerFontSize + 2
+    },
+    text: label,
+    chart,
+    align: "center",
+    role: "axis"
+  });
+}
+
 // src/renderScene/charts/renderers/heatmap/legend.ts
-var BAR_HEIGHT = 10;
-var TICK_HEIGHT = 4;
+var BAR_THICKNESS = 10;
+var TICK_LENGTH2 = 4;
 var ROW_GAP = 2;
+var LABEL_WIDTH = 48;
+function barPlace(layout) {
+  const { grid, sides, reservedSpace, legendGap: legendGap2 } = layout;
+  const rowRoom = reservedSpace.rowHeaders;
+  const columnRoom = reservedSpace.columnHeaders;
+  switch (sides.legend) {
+    case "top": {
+      const edge = grid.y - (sides.columns === "top" ? columnRoom : 0);
+      return {
+        x: grid.x,
+        y: edge - legendGap2 - BAR_THICKNESS,
+        width: grid.width,
+        height: BAR_THICKNESS,
+        vertical: false,
+        numbers: "top"
+      };
+    }
+    case "left": {
+      const edge = grid.x - (sides.rows === "left" ? rowRoom : 0);
+      return {
+        x: edge - legendGap2 - BAR_THICKNESS,
+        y: grid.y,
+        width: BAR_THICKNESS,
+        height: grid.height,
+        vertical: true,
+        numbers: "left"
+      };
+    }
+    case "right": {
+      const edge = grid.x + grid.width + (sides.rows === "right" ? rowRoom : 0);
+      return {
+        x: edge + legendGap2,
+        y: grid.y,
+        width: BAR_THICKNESS,
+        height: grid.height,
+        vertical: true,
+        numbers: "right"
+      };
+    }
+    default: {
+      const edge = grid.y + grid.height + (sides.columns === "bottom" ? columnRoom : 0);
+      return {
+        x: grid.x,
+        y: edge + legendGap2,
+        width: grid.width,
+        height: BAR_THICKNESS,
+        vertical: false,
+        numbers: "bottom"
+      };
+    }
+  }
+}
 function renderHeatmapLegend(context, layout) {
   if (layout.reservedSpace.legend <= 0 || layout.zones.length === 0) {
     return [];
   }
-  const barX = layout.grid.x;
-  const barWidth = layout.grid.width;
-  const labelHeight = layout.fontSize + 2;
-  const barY = layout.grid.y + layout.grid.height + 6;
-  const barBounds = boxBounds({ x: barX, y: barY, width: barWidth, height: BAR_HEIGHT });
-  return [
-    createGradientBar(context, layout, barX, barY, barWidth, barBounds),
-    ...createBoundaryTicks(context, layout, barX, barY, barWidth, labelHeight)
-  ];
+  const place = barPlace(layout);
+  const barBounds = boxBounds({ x: place.x, y: place.y, width: place.width, height: place.height });
+  return [createGradientBar(context, layout, place, barBounds), ...createBoundaryTicks(context, layout, place)];
 }
 function bandRatio(layout, value) {
   const first = layout.bands[0];
   const last = layout.bands[layout.bands.length - 1];
   return last === first ? 0 : (value - first) / (last - first);
 }
-function createGradientBar(context, layout, barX, barY, barWidth, barBounds) {
+function createGradientBar(context, layout, place, barBounds) {
   const { chart, nextOrder } = context;
   const bandCount = Math.max(0, layout.bands.length - 1);
   const zones = layout.zones.slice(0, bandCount);
@@ -6438,53 +6619,77 @@ function createGradientBar(context, layout, barX, barY, barWidth, barBounds) {
     id: `chart-heatmap-legend-bar-${chart.id}`,
     order: nextOrder(),
     bounds: barBounds,
-    x: barX,
-    y: barY,
-    width: barWidth,
-    height: BAR_HEIGHT,
+    x: place.x,
+    y: place.y,
+    width: place.width,
+    height: place.height,
     rx: 3,
     zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
     style: {
-      fill: stops.length ? { kind: "linear-gradient", angle: 0, stops } : { kind: "solid", color: DEFAULT_ZONE_FILL },
+      // Across the grid it runs from the lowest value on the left; beside it from the lowest at the bottom.
+      fill: stops.length ? { kind: "linear-gradient", angle: place.vertical ? 270 : 0, stops } : { kind: "solid", color: DEFAULT_ZONE_FILL },
       stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
       strokeWidth: 1
     }
   };
 }
-function createBoundaryTicks(context, layout, barX, barY, barWidth, labelHeight) {
+function createBoundaryTicks(context, layout, place) {
   const { chart, bounds, nextOrder } = context;
-  const labelY = barY + BAR_HEIGHT + TICK_HEIGHT + ROW_GAP;
-  const labelWidth = 48;
+  const labelHeight = layout.fontSize + 2;
+  const lastIndex = layout.bands.length - 1;
   return layout.bands.flatMap((value, index) => {
-    const x = barX + bandRatio(layout, value) * barWidth;
+    const ratio = bandRatio(layout, value);
+    const at = place.vertical ? place.y + place.height - ratio * place.height : place.x + ratio * place.width;
+    const tickPath = tickPathAt(place, at);
     const tick = {
       type: "path",
       id: `chart-heatmap-legend-tick-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      d: `M ${x} ${barY + BAR_HEIGHT} L ${x} ${barY + BAR_HEIGHT + TICK_HEIGHT}`,
+      d: tickPath,
       style: {
         fill: { kind: "none" },
         stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
         strokeWidth: 1
       }
     };
-    const isFirst = index === 0;
-    const isLast = index === layout.bands.length - 1;
-    const align = isFirst ? "left" : isLast ? "right" : "center";
-    const frameX = isFirst ? x : isLast ? x - labelWidth : x - labelWidth / 2;
     const label = chartText({
       id: `chart-heatmap-legend-tick-label-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      frame: { x: frameX, y: labelY, width: labelWidth, height: labelHeight },
+      ...labelAt(place, at, index === 0, index === lastIndex, labelHeight),
       text: formatFieldValue(value),
-      chart,
-      align
+      chart
     });
     return [tick, label];
   });
 }
+function tickPathAt(place, at) {
+  if (place.vertical) {
+    const from2 = place.numbers === "right" ? place.x + place.width : place.x;
+    const to2 = place.numbers === "right" ? from2 + TICK_LENGTH2 : from2 - TICK_LENGTH2;
+    return `M ${from2} ${at} L ${to2} ${at}`;
+  }
+  const from = place.numbers === "bottom" ? place.y + place.height : place.y;
+  const to = place.numbers === "bottom" ? from + TICK_LENGTH2 : from - TICK_LENGTH2;
+  return `M ${at} ${from} L ${at} ${to}`;
+}
+function labelAt(place, at, first, last, labelHeight) {
+  if (place.vertical) {
+    const onRight = place.numbers === "right";
+    const x2 = onRight ? place.x + place.width + TICK_LENGTH2 + ROW_GAP : place.x - TICK_LENGTH2 - ROW_GAP - LABEL_WIDTH;
+    return {
+      frame: { x: x2, y: at - labelHeight / 2, width: LABEL_WIDTH, height: labelHeight },
+      align: onRight ? "left" : "right"
+    };
+  }
+  const y = place.numbers === "bottom" ? place.y + place.height + TICK_LENGTH2 + ROW_GAP : place.y - TICK_LENGTH2 - ROW_GAP - labelHeight;
+  const x = first ? at : last ? at - LABEL_WIDTH : at - LABEL_WIDTH / 2;
+  return {
+    frame: { x, y, width: LABEL_WIDTH, height: labelHeight },
+    align: first ? "left" : last ? "right" : "center"
+  };
+}
 
 // src/renderScene/charts/renderers/heatmap.ts
 function renderHeatmap(context) {
@@ -7259,14 +7464,14 @@ function createMekkoLayout(context) {
   const labelGutterWidth = context.showLabels ? 30 : 0;
   const grid = createMekkoGrid(context, labelGutterWidth);
   const fontSize = Math.max(9, finite(context.chart.fontSize, 12));
-  const columnGap = Math.max(0, finite(context.chart.config?.mekkoColumnGap, 4));
+  const columnGap2 = Math.max(0, finite(context.chart.config?.mekkoColumnGap, 4));
   const smallFontSize = Math.max(8, fontSize - 1);
   return {
-    columns: createMekkoColumns(context, grid, labels, columnGap),
+    columns: createMekkoColumns(context, grid, labels, columnGap2),
     fontSize,
     smallFontSize,
     labelGutterWidth,
-    columnGap,
+    columnGap: columnGap2,
     labelSize: Math.max(6, finite(context.chart.config?.mekkoLabelSize, smallFontSize)),
     valueSize: Math.max(6, finite(context.chart.config?.mekkoValueSize, smallFontSize)),
     grid
@@ -7286,20 +7491,20 @@ function createMekkoGrid(context, labelGutterWidth) {
     height: Math.max(1, context.plot.height - topGutter - bottomGutter)
   };
 }
-function createMekkoColumns(context, grid, labels, columnGap) {
+function createMekkoColumns(context, grid, labels, columnGap2) {
   const totals = labels.map(
     (_, columnIndex) => context.chart.series.reduce((sum, series) => sum + (series.values[columnIndex] ?? 0), 0)
   );
   const grandTotal = totals.reduce((sum, total) => sum + total, 0);
   const maximumTotal = Math.max(1, ...totals);
-  const availableWidth = Math.max(1, grid.width - columnGap * Math.max(0, labels.length - 1));
+  const availableWidth = Math.max(1, grid.width - columnGap2 * Math.max(0, labels.length - 1));
   let nextX = grid.x;
   return labels.map((label, index) => {
     const total = totals[index];
     const width = grandTotal > 0 ? total / grandTotal * availableWidth : availableWidth / labels.length;
     const height = context.chart.config?.mekkoVaryHeight ? grid.height * (total / maximumTotal) : grid.height;
     const column = { label, total, x: nextX, y: grid.y + grid.height - height, width, height };
-    nextX += width + columnGap;
+    nextX += width + columnGap2;
     return column;
   });
 }
@@ -7666,7 +7871,7 @@ function renderPie(context) {
 var TOP2 = -Math.PI / 2;
 var TRACK_COLOR_FALLBACK = "#e2e8f0";
 var MIN_LABEL_SWEEP = 14 * Math.PI / 180;
-var LABEL_WIDTH = 80;
+var LABEL_WIDTH2 = 80;
 var LABEL_RADIUS_FRACTION = 0.62;
 var OUTSIDE_GAP = 14;
 var LEADER_INSET = 3;
@@ -7841,7 +8046,7 @@ function labelPlacement2(context, geometry, angles, series, fillColor) {
   const hasManualOffset = labelOffsetX !== 0 || labelOffsetY !== 0;
   const tooThin = ringThickness < lineHeight * 2 + 6;
   const chordWidth = 2 * geometry.outerRadius * Math.sin(Math.abs(angles.end - angles.start) / 2);
-  const fitsInline = !tooThin && chordWidth >= LABEL_WIDTH;
+  const fitsInline = !tooThin && chordWidth >= LABEL_WIDTH2;
   const outsideLabels = context.chart.config?.polarOutsideLabels ?? false;
   if (!fitsInline && !hasManualOffset && !outsideLabels) {
     return void 0;
@@ -7864,7 +8069,7 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
   const { point, color, outside, mid, tickStart } = placement;
   const { nameSize, valueSize } = labelSizes(chart);
   const lineHeight = Math.max(nameSize, valueSize) * 1.2;
-  const tickEnd = outside ? clipSegmentToRect(tickStart, point, LABEL_WIDTH / 2, lineHeight) : tickStart;
+  const tickEnd = outside ? clipSegmentToRect(tickStart, point, LABEL_WIDTH2 / 2, lineHeight) : tickStart;
   const tick = {
     type: "path",
     id: `chart-polar-area-label-tick-${chart.id}-${series.id}`,
@@ -7884,8 +8089,8 @@ function createWedgeLabel(context, geometry, angles, series, value, fillColor) {
   };
   const base = {
     bounds,
-    x: point.x - LABEL_WIDTH / 2,
-    width: LABEL_WIDTH,
+    x: point.x - LABEL_WIDTH2 / 2,
+    width: LABEL_WIDTH2,
     fontFamily: chart.fontFamily ?? DEFAULT_FONT,
     align: "center",
     verticalAlign: "middle",
@@ -8675,8 +8880,8 @@ function treemapLeafColor(leaf, layout) {
 }
 
 // src/renderScene/charts/renderers/treemap/legend.ts
-var BAR_THICKNESS = 10;
-var TICK_LENGTH2 = 4;
+var BAR_THICKNESS2 = 10;
+var TICK_LENGTH3 = 4;
 var ROW_GAP2 = 2;
 var CHART_GAP = 16;
 var LABEL_SIZE = 34;
@@ -8705,7 +8910,7 @@ function renderBottomLegend(context, layout) {
   const barWidth = layout.gridWidth;
   const labelHeight = layout.fontSize + 2;
   const barY = plot.y + layout.gridHeight + CHART_GAP;
-  const barBounds = boxBounds({ x: barX, y: barY, width: barWidth, height: BAR_THICKNESS });
+  const barBounds = boxBounds({ x: barX, y: barY, width: barWidth, height: BAR_THICKNESS2 });
   const stops = bandStops(layout);
   const bar = {
     type: "rect",
@@ -8715,7 +8920,7 @@ function renderBottomLegend(context, layout) {
     x: barX,
     y: barY,
     width: barWidth,
-    height: BAR_THICKNESS,
+    height: BAR_THICKNESS2,
     rx: 3,
     zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
     style: {
@@ -8731,7 +8936,7 @@ function renderBottomLegend(context, layout) {
       id: `chart-treemap-legend-tick-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      d: `M ${x} ${barY + BAR_THICKNESS} L ${x} ${barY + BAR_THICKNESS + TICK_LENGTH2}`,
+      d: `M ${x} ${barY + BAR_THICKNESS2} L ${x} ${barY + BAR_THICKNESS2 + TICK_LENGTH3}`,
       style: {
         fill: { kind: "none" },
         stroke: { kind: "solid", color: chart.gridColor ?? "#e2e8f0" },
@@ -8746,7 +8951,7 @@ function renderBottomLegend(context, layout) {
       id: `chart-treemap-legend-tick-label-${chart.id}-${index}`,
       order: nextOrder(),
       bounds,
-      frame: { x: frameX, y: barY + BAR_THICKNESS + TICK_LENGTH2 + ROW_GAP2, width: LABEL_SIZE, height: labelHeight },
+      frame: { x: frameX, y: barY + BAR_THICKNESS2 + TICK_LENGTH3 + ROW_GAP2, width: LABEL_SIZE, height: labelHeight },
       text: formatFieldValue(value),
       chart,
       align
@@ -8760,8 +8965,8 @@ function renderSideLegend(context, layout) {
   const side = layout.legendPosition;
   const barTop = plot.y;
   const barHeight = layout.gridHeight;
-  const barX = side === "left" ? plot.x - CHART_GAP - BAR_THICKNESS : plot.x + layout.gridWidth + CHART_GAP;
-  const barBounds = boxBounds({ x: barX, y: barTop, width: BAR_THICKNESS, height: barHeight });
+  const barX = side === "left" ? plot.x - CHART_GAP - BAR_THICKNESS2 : plot.x + layout.gridWidth + CHART_GAP;
+  const barBounds = boxBounds({ x: barX, y: barTop, width: BAR_THICKNESS2, height: barHeight });
   const stops = bandStops(layout);
   const bar = {
     type: "rect",
@@ -8770,7 +8975,7 @@ function renderSideLegend(context, layout) {
     bounds: barBounds,
     x: barX,
     y: barTop,
-    width: BAR_THICKNESS,
+    width: BAR_THICKNESS2,
     height: barHeight,
     rx: 3,
     zoneGradient: { axis: "y", min: chart.axisY.min, max: chart.axisY.max },
@@ -8780,8 +8985,8 @@ function renderSideLegend(context, layout) {
       strokeWidth: 1
     }
   };
-  const tickX = side === "left" ? barX : barX + BAR_THICKNESS;
-  const tickEndX = side === "left" ? tickX - TICK_LENGTH2 : tickX + TICK_LENGTH2;
+  const tickX = side === "left" ? barX : barX + BAR_THICKNESS2;
+  const tickEndX = side === "left" ? tickX - TICK_LENGTH3 : tickX + TICK_LENGTH3;
   const labelX2 = side === "left" ? tickEndX - ROW_GAP2 - LABEL_SIZE : tickEndX + ROW_GAP2;
   const ticks2 = layout.bands.flatMap((value, index) => {
     const y = barTop + (1 - bandRatio2(layout, value)) * barHeight;
@@ -9205,7 +9410,8 @@ function buildChartTitle(chart, bounds, plot, renderOrder) {
         bounds,
         frame: { x: plot.x, y: chart.y + 12, width: plot.width, height: 20 },
         text: chart.title,
-        chart
+        chart,
+        align: chart.titleAlign ?? "left"
       }),
       ...chart.titleColor ? { color: chart.titleColor } : {},
       fontWeight: chart.titleWeight ?? "bold",
@@ -10006,5 +10212,5 @@ function defineComponent(definition) {
 }
 
 export { collectCanvasObjects, decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput, sliderReach };
-//# sourceMappingURL=chunk-SDMQRSRW.js.map
-//# sourceMappingURL=chunk-SDMQRSRW.js.map
+//# sourceMappingURL=chunk-MAPNY7MJ.js.map
+//# sourceMappingURL=chunk-MAPNY7MJ.js.map