@joanroucoux/cairn-ui 0.6.4 → 0.6.5

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -2318,6 +2318,33 @@ const isCoreTick = (index, count) => {
     const middle = Math.floor((count - 1) / 2);
     return index === 0 || index === count - 1 || index === middle;
 };
+const firstOfEachRun = (labels, included) => {
+    let previous = null;
+    return labels.map((text, index) => {
+        if (!included(index)) {
+            return false;
+        }
+        const distinct = text !== previous;
+        previous = text;
+        return distinct;
+    });
+};
+const tickLabels = (ticks, format, mode) => {
+    const labels = ticks.map((tick) => format(tick.t));
+    const count = labels.length;
+    const core = (index) => isCoreTick(index, count);
+    const everyTick = firstOfEachRun(labels, () => true);
+    const coreTicks = firstOfEachRun(labels, core);
+    return labels.map((text, index) => {
+        const wide = mode === 3 ? coreTicks[index] : everyTick[index];
+        const narrow = coreTicks[index];
+        if (!wide && !narrow) {
+            return null;
+        }
+        const classes = mode === 'auto' ? `${narrow ? '' : 'max-sm:hidden'} ${wide ? '' : 'sm:hidden'}`.trim() : wide ? '' : 'hidden';
+        return { text, classes };
+    });
+};
 
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const nearestPointIndex = (points, x) => {
@@ -2544,6 +2571,11 @@ const wideViewport = () => {
 /**
  * Value over time: a monotone curve with a dashed line at the starting value and a tooltip.
  *
+ * Axis labels are never repeated: a tick whose `axisFormat` text equals the previous drawn label is
+ * not rendered. The first tick always is, so only the last edge label can drop. With `axisTicks="3"`
+ * only the first, middle and last ticks count; with `auto` every tick counts from `sm` up and the
+ * three core ticks below it. Tick positions are unchanged.
+ *
  * @example
  * <ui-line-chart [points]="points" label="Net worth over one month" startLabel="Since" [valueFormat]="formatEur" />
  */
@@ -2580,7 +2612,6 @@ class UiLineChart {
     #frame = null;
     #hasRenderedOnce = false;
     #previousGeometry = null;
-    isCoreTick = isCoreTick;
     svgRef = viewChild.required('svgRef', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "svgRef" }] : /* istanbul ignore next */ []));
     activeIndex = signal(null, /* @ts-ignore */
@@ -2608,6 +2639,8 @@ class UiLineChart {
     ...(ngDevMode ? [{ debugName: "displayLine" }] : /* istanbul ignore next */ []));
     ticks = computed(() => axisTicks(this.geometry().points), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    tickTexts = computed(() => tickLabels(this.ticks(), this.axisFormat(), this.axisTicks()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tickTexts" }] : /* istanbul ignore next */ []));
     active = computed(() => {
         const geometry = this.geometry();
         const index = this.activeIndex();
@@ -2777,25 +2810,19 @@ class UiLineChart {
               [attr.cy]="geometry.end.y"
             />
 
-            @for (
-              tick of ticks();
-              track tick.t;
-              let index = $index;
-              let count = $count;
-              let first = $first;
-              let last = $last
-            ) {
-              <text
-                class="text-caption fill-(--subtle-foreground) tabular-nums"
-                data-chart-axis-tick
-                [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
-                [attr.x]="tick.x"
-                [attr.y]="effectiveHeight() - 4"
-                [class.hidden]="axisTicks() === 3 && !isCoreTick(index, count)"
-                [class.max-sm:hidden]="axisTicks() === 'auto' && !isCoreTick(index, count)"
-              >
-                {{ axisFormat()(tick.t) }}
-              </text>
+            @for (tick of ticks(); track tick.t; let index = $index; let first = $first; let last = $last) {
+              @if (tickTexts()[index]; as label) {
+                <text
+                  class="text-caption fill-(--subtle-foreground) tabular-nums"
+                  data-chart-axis-tick
+                  [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
+                  [attr.x]="tick.x"
+                  [attr.y]="effectiveHeight() - 4"
+                  [class]="label.classes"
+                >
+                  {{ label.text }}
+                </text>
+              }
             }
 
             @if (active(); as point) {
@@ -2925,25 +2952,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
               [attr.cy]="geometry.end.y"
             />
 
-            @for (
-              tick of ticks();
-              track tick.t;
-              let index = $index;
-              let count = $count;
-              let first = $first;
-              let last = $last
-            ) {
-              <text
-                class="text-caption fill-(--subtle-foreground) tabular-nums"
-                data-chart-axis-tick
-                [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
-                [attr.x]="tick.x"
-                [attr.y]="effectiveHeight() - 4"
-                [class.hidden]="axisTicks() === 3 && !isCoreTick(index, count)"
-                [class.max-sm:hidden]="axisTicks() === 'auto' && !isCoreTick(index, count)"
-              >
-                {{ axisFormat()(tick.t) }}
-              </text>
+            @for (tick of ticks(); track tick.t; let index = $index; let first = $first; let last = $last) {
+              @if (tickTexts()[index]; as label) {
+                <text
+                  class="text-caption fill-(--subtle-foreground) tabular-nums"
+                  data-chart-axis-tick
+                  [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
+                  [attr.x]="tick.x"
+                  [attr.y]="effectiveHeight() - 4"
+                  [class]="label.classes"
+                >
+                  {{ label.text }}
+                </text>
+              }
             }
 
             @if (active(); as point) {