@porscheinformatik/clr-addons 19.18.2 → 19.18.4

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)');
@@ -1478,6 +1509,7 @@ class ComboChartComponent extends ChartBase {
             const lineItems = this.lineSeries().map(s => ({ label: s.label, color: s.color }));
             return [...barItems, ...lineItems];
         });
+        this._clipIdCounter = 0;
     }
     // ── Lifecycle ────────────────────────────────────────────────────────────────
     ngOnChanges(_changes) {
@@ -1535,6 +1567,19 @@ class ComboChartComponent extends ChartBase {
             .domain([0, maxLine || 1])
             .nice(this.yLineMax() === undefined ? undefined : 0)
             .range([height, 0]);
+        // ── SVG ClipPath ─────────────────────────────────────────────────────────
+        // Ensures bars/lines that exceed the Y-axis maximum (yBarMax/yLineMax) are
+        // visually clipped at the chart boundary without modifying the data values.
+        const clipId = `combo-clip-${this._clipIdCounter++}`;
+        this.svg
+            .append('defs')
+            .append('clipPath')
+            .attr('id', clipId)
+            .append('rect')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('width', width)
+            .attr('height', height);
         const g = this.svg
             .attr('width', width)
             .attr('height', height)
@@ -1551,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
@@ -1577,8 +1622,11 @@ class ComboChartComponent extends ChartBase {
                     .text(this.yLineAxisLabel());
             }
         }
-        this.drawBars(g, x, yBar);
-        this.drawLines(g, x, yLine);
+        // Wrap chart content in a clipped group so elements exceeding the Y max
+        // are not visible beyond the chart boundary.
+        const contentGroup = g.append('g').attr('clip-path', `url(#${clipId})`);
+        this.drawBars(contentGroup, x, yBar);
+        this.drawLines(contentGroup, x, yLine);
     }
     drawBars(g, x, y) {
         // Running stack base (cumulative sum) per X key across all bar series