@porscheinformatik/clr-addons 19.18.3 → 19.18.4

package/charts/shared/d3-chart-axes.d.ts

@@ -12,6 +12,28 @@ export interface XYAxisOptions {
     /** Left margin already accounting for the Y-axis label offset. */
     effectiveLeft: number;
 }
+/**
+ * Computes sensible tick values for a linear Y scale.
+ *
+ * When the domain contains enough integer values (≥ 3) the ticks are filtered
+ * to integers only (avoids fractional labels for count data).  For small-range
+ * domains – e.g. 0–1 ratios / probabilities – the raw D3 ticks are returned
+ * unchanged so that decimal labels are still visible.
+ */
+export declare function computeYTickValues(y: ScaleLinear<number, number>, count?: number): number[];
+/**
+ * Returns a D3 tick-format function that matches the decision made in
+ * {@link computeYTickValues}:
+ *
+ * - **Integer / large-value domain** (≥ 3 integer ticks): SI prefix format
+ *   (`~s`), e.g. `1k`, `200`.
+ * - **Small / decimal domain** (< 3 integer ticks, e.g. 0–1 ratios): plain
+ *   fixed-point format (`.3~f`) – avoids the SI "milli" prefix (`m`) that
+ *   D3 would otherwise apply to values < 1.
+ */
+export declare function computeYTickFormat(y: ScaleLinear<number, number>, count?: number): (d: number | {
+    valueOf(): number;
+}) => string;
 /**
  * Draws the X and Y axes (with integer-only Y ticks and grid lines) plus
  * optional description labels onto the given D3 group.

package/fesm2022/porscheinformatik-clr-addons-charts.mjs

@@ -1083,6 +1083,36 @@ function renderDots(g, series, x, y, onClick) {
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
+/**
+ * Computes sensible tick values for a linear Y scale.
+ *
+ * When the domain contains enough integer values (≥ 3) the ticks are filtered
+ * to integers only (avoids fractional labels for count data).  For small-range
+ * domains – e.g. 0–1 ratios / probabilities – the raw D3 ticks are returned
+ * unchanged so that decimal labels are still visible.
+ */
+function computeYTickValues(y, count = 5) {
+    const raw = y.ticks(count);
+    const integers = raw.filter(Number.isInteger);
+    // Keep integer-only ticks only when there are at least 3 of them; otherwise
+    // the domain is too small (e.g. 0–1) and we need the decimal ticks.
+    return integers.length >= 3 ? integers : raw;
+}
+/**
+ * Returns a D3 tick-format function that matches the decision made in
+ * {@link computeYTickValues}:
+ *
+ * - **Integer / large-value domain** (≥ 3 integer ticks): SI prefix format
+ *   (`~s`), e.g. `1k`, `200`.
+ * - **Small / decimal domain** (< 3 integer ticks, e.g. 0–1 ratios): plain
+ *   fixed-point format (`.3~f`) – avoids the SI "milli" prefix (`m`) that
+ *   D3 would otherwise apply to values < 1.
+ */
+function computeYTickFormat(y, count = 5) {
+    const raw = y.ticks(count);
+    const integers = raw.filter(Number.isInteger);
+    return integers.length >= 3 ? format('~s') : format('.3~f');
+}
 /**
  * Draws the X and Y axes (with integer-only Y ticks and grid lines) plus
  * optional description labels onto the given D3 group.
@@ -1102,9 +1132,10 @@ function drawXYAxes(g, x, y, opts) {
         .style('font-size', '11px')
         .style('fill', 'var(--clr-color-neutral-600, #666)');
     // Y axis
-    const tickValues = y.ticks(5).filter((t) => Number.isInteger(t));
+    const tickValues = computeYTickValues(y);
+    const tickFormat = computeYTickFormat(y);
     g.append('g')
-        .call(axisLeft(y).tickValues(tickValues).tickSize(-width).tickFormat(format('~s')))
+        .call(axisLeft(y).tickValues(tickValues).tickSize(-width).tickFormat(tickFormat))
         .selectAll('text')
         .style('font-size', '11px')
         .style('fill', 'var(--clr-color-neutral-600, #666)');
@@ -1565,12 +1596,12 @@ class ComboChartComponent extends ChartBase {
         styleGridLines(g);
         // ── Right Y axis for line series ─────────────────────────────────────────
         if (hasLines) {
-            const lineTickValues = yLine.ticks(5).filter((t) => Number.isInteger(t));
+            const lineTickValues = computeYTickValues(yLine);
+            const lineTickFormat = computeYTickFormat(yLine);
             const rightAxisG = g
                 .append('g')
                 .attr('transform', `translate(${width},0)`)
-                .call(axisRight(yLine).tickValues(lineTickValues).tickFormat(format('~s')).tickSize(-width) // draw grid lines across the chart
-            );
+                .call(axisRight(yLine).tickValues(lineTickValues).tickFormat(lineTickFormat).tickSize(-width));
             rightAxisG.selectAll('text').style('font-size', '11px').style('fill', 'var(--clr-color-neutral-600, #666)');
             // Style the line-axis grid lines with a distinct dashed color
             rightAxisG