@opendata-ai/openchart-engine 2.3.5 → 2.4.0

package/dist/index.js

@@ -2801,6 +2801,22 @@ var TICK_COUNTS = {
   reduced: 5,
   minimal: 3
 };
+var HEIGHT_MINIMAL_THRESHOLD = 120;
+var HEIGHT_REDUCED_THRESHOLD = 200;
+var WIDTH_MINIMAL_THRESHOLD = 150;
+var WIDTH_REDUCED_THRESHOLD = 300;
+var DENSITY_ORDER = ["full", "reduced", "minimal"];
+function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThreshold) {
+  let density = baseDensity;
+  if (axisLength < minimalThreshold) {
+    density = "minimal";
+  } else if (axisLength < reducedThreshold) {
+    const baseIdx = DENSITY_ORDER.indexOf(baseDensity);
+    const reducedIdx = DENSITY_ORDER.indexOf("reduced");
+    density = DENSITY_ORDER[Math.max(baseIdx, reducedIdx)];
+  }
+  return density;
+}
 function continuousTicks(resolvedScale, density) {
   const scale = resolvedScale.scale;
   const count = resolvedScale.channel.axis?.tickCount ?? TICK_COUNTS[density];
@@ -2847,7 +2863,19 @@ function formatTickLabel(value, resolvedScale) {
 }
 function computeAxes(scales, chartArea, strategy, theme) {
   const result = {};
-  const density = strategy.axisLabelDensity;
+  const baseDensity = strategy.axisLabelDensity;
+  const yDensity = effectiveDensity(
+    baseDensity,
+    chartArea.height,
+    HEIGHT_MINIMAL_THRESHOLD,
+    HEIGHT_REDUCED_THRESHOLD
+  );
+  const xDensity = effectiveDensity(
+    baseDensity,
+    chartArea.width,
+    WIDTH_MINIMAL_THRESHOLD,
+    WIDTH_REDUCED_THRESHOLD
+  );
   const tickLabelStyle = {
     fontFamily: theme.fonts.family,
     fontSize: theme.fonts.sizes.axisTick,
@@ -2864,7 +2892,7 @@ function computeAxes(scales, chartArea, strategy, theme) {
     lineHeight: 1.3
   };
   if (scales.x) {
-    const ticks = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, density) : continuousTicks(scales.x, density);
+    const ticks = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, xDensity) : continuousTicks(scales.x, xDensity);
     const gridlines = ticks.map((t) => ({
       position: t.position,
       major: true
@@ -2875,12 +2903,13 @@ function computeAxes(scales, chartArea, strategy, theme) {
       label: scales.x.channel.axis?.label,
       labelStyle: axisLabelStyle,
       tickLabelStyle,
+      tickAngle: scales.x.channel.axis?.tickAngle,
       start: { x: chartArea.x, y: chartArea.y + chartArea.height },
       end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height }
     };
   }
   if (scales.y) {
-    const ticks = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, density) : continuousTicks(scales.y, density);
+    const ticks = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, yDensity) : continuousTicks(scales.y, yDensity);
     const gridlines = ticks.map((t) => ({
       position: t.position,
       major: true
@@ -2892,6 +2921,7 @@ function computeAxes(scales, chartArea, strategy, theme) {
       label: scales.y.channel.axis?.label,
       labelStyle: axisLabelStyle,
       tickLabelStyle,
+      tickAngle: scales.y.channel.axis?.tickAngle,
       start: { x: chartArea.x, y: chartArea.y },
       end: { x: chartArea.x, y: chartArea.y + chartArea.height }
     };
@@ -2918,8 +2948,29 @@ function computeDimensions(spec, options, legendLayout, theme) {
   const total = { x: 0, y: 0, width, height };
   const isRadial = spec.type === "pie" || spec.type === "donut";
   const encoding = spec.encoding;
-  const hasXAxisLabel = !!encoding.x?.axis?.label;
-  const xAxisHeight = isRadial ? 0 : hasXAxisLabel ? 48 : 26;
+  const xAxis = encoding.x?.axis;
+  const hasXAxisLabel = !!xAxis?.label;
+  const xTickAngle = xAxis?.tickAngle;
+  let xAxisHeight;
+  if (isRadial) {
+    xAxisHeight = 0;
+  } else if (xTickAngle && Math.abs(xTickAngle) > 10) {
+    const angleRad = Math.abs(xTickAngle) * (Math.PI / 180);
+    const xField = encoding.x?.field;
+    let maxLabelWidth = 40;
+    if (xField) {
+      for (const row of spec.data) {
+        const label = String(row[xField] ?? "");
+        const w = estimateTextWidth7(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        if (w > maxLabelWidth) maxLabelWidth = w;
+      }
+    }
+    const rotatedHeight = maxLabelWidth * Math.sin(angleRad) + 6;
+    const labelHeight = Math.min(rotatedHeight, 120);
+    xAxisHeight = hasXAxisLabel ? labelHeight + 20 : labelHeight;
+  } else {
+    xAxisHeight = hasXAxisLabel ? 48 : 26;
+  }
   const margins = {
     top: padding + chrome.topHeight + axisMargin,
     right: padding + (isRadial ? padding : axisMargin),