@sentropic/design-system-angular 0.36.54

package/dist/AnomalySwimLaneChart.js

@@ -0,0 +1,399 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+const MARGIN = { top: 28, right: 18, bottom: 44, left: 132 };
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+function normalizedScale(value) {
+    return value === "categorical" ? "categorical" : "sequential";
+}
+function toneForScore(score, scoreMax) {
+    if (!Number.isFinite(score) || scoreMax <= 0)
+        return "category1";
+    const ratio = Math.max(0, Math.min(1, score / scoreMax));
+    const index = Math.max(0, Math.min(TONES.length - 1, Math.floor(ratio * TONES.length)));
+    return TONES[index];
+}
+function ellipsizeLabel(text, maxChars) {
+    if (text.length <= maxChars)
+        return text;
+    if (maxChars <= 1)
+        return "…";
+    return `${text.slice(0, maxChars - 1)}…`;
+}
+function formatTickLabel(value) {
+    if (Math.abs(value) >= 1000)
+        return `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}k`;
+    if (Number.isInteger(value))
+        return String(value);
+    return value.toFixed(1);
+}
+export class AnomalySwimLaneChart {
+    static stComponentName = "AnomalySwimLaneChart";
+    componentName = "AnomalySwimLaneChart";
+    margin = MARGIN;
+    tones = TONES;
+    data = [];
+    max;
+    scale;
+    label;
+    width;
+    height;
+    size;
+    classInput;
+    hoveredKey = null;
+    get resolvedScale() {
+        return normalizedScale(this.scale);
+    }
+    get resolvedWidth() {
+        return this.width ?? this.size ?? 520;
+    }
+    get resolvedHeight() {
+        return this.height ?? 300;
+    }
+    get viewBox() {
+        return `0 0 ${this.resolvedWidth} ${this.resolvedHeight}`;
+    }
+    get hostClass() {
+        return classNames("st-anomalySwimLaneChart", `st-anomalySwimLaneChart--${this.resolvedScale}`, this.classInput);
+    }
+    get plotWidth() {
+        return Math.max(this.resolvedWidth - MARGIN.left - MARGIN.right, 1);
+    }
+    get plotHeight() {
+        return Math.max(this.resolvedHeight - MARGIN.top - MARGIN.bottom, 1);
+    }
+    get validData() {
+        return (this.data ?? [])
+            .filter((datum) => typeof datum.job === "string" && datum.job.length > 0)
+            .map((datum) => ({
+            job: datum.job,
+            buckets: (datum.buckets ?? [])
+                .filter((bucket) => Number.isFinite(bucket.at))
+                .map((bucket) => ({ at: bucket.at, score: bucket.score })),
+        }));
+    }
+    get columnOrder() {
+        const order = [];
+        for (const datum of this.validData) {
+            for (const bucket of datum.buckets) {
+                if (!order.includes(bucket.at))
+                    order.push(bucket.at);
+            }
+        }
+        order.sort((a, b) => a - b);
+        return order;
+    }
+    get scoreMax() {
+        if (typeof this.max === "number" && Number.isFinite(this.max) && this.max > 0)
+            return this.max;
+        const scores = this.validData.flatMap((datum) => datum.buckets.map((bucket) => bucket.score)).filter(Number.isFinite);
+        return scores.length > 0 ? Math.max(...scores) : 1;
+    }
+    get rows() {
+        const validData = this.validData;
+        const columnOrder = this.columnOrder;
+        if (validData.length === 0 || columnOrder.length === 0)
+            return [];
+        const band = this.plotHeight / validData.length;
+        const rowHeight = Math.min(band * 0.78, 34);
+        const colWidth = this.plotWidth / columnOrder.length;
+        return validData.map((datum, rowIndex) => {
+            const y = MARGIN.top + band * rowIndex + (band - rowHeight) / 2;
+            const cells = datum.buckets.map((bucket, cellIndex) => {
+                const columnIndex = Math.max(0, columnOrder.indexOf(bucket.at));
+                const x = MARGIN.left + columnIndex * colWidth;
+                const width = Math.max(colWidth - 2, 1);
+                return {
+                    key: `${rowIndex}-${cellIndex}`,
+                    datum: bucket,
+                    x,
+                    width,
+                    cx: x + width / 2,
+                    tone: toneForScore(bucket.score, this.scoreMax),
+                };
+            });
+            return {
+                datum,
+                index: rowIndex,
+                y,
+                height: rowHeight,
+                rowCenterY: MARGIN.top + band * (rowIndex + 0.5),
+                cells,
+            };
+        });
+    }
+    get columns() {
+        const columnOrder = this.columnOrder;
+        if (columnOrder.length === 0)
+            return [];
+        const colWidth = this.plotWidth / columnOrder.length;
+        return columnOrder.map((at, index) => ({
+            at,
+            cx: MARGIN.left + (index + 0.5) * colWidth,
+        }));
+    }
+    get dataValueItems() {
+        return this.validData.map((datum) => `${datum.job}: ${datum.buckets.map((bucket) => `${bucket.at} = ${bucket.score}`).join(", ")}`);
+    }
+    get hasLegend() {
+        return this.validData.length > 0 && this.columnOrder.length > 0;
+    }
+    get hoveredCell() {
+        if (this.hoveredKey === null)
+            return null;
+        for (const row of this.rows) {
+            for (const cell of row.cells) {
+                if (cell.key === this.hoveredKey)
+                    return { row, cell };
+            }
+        }
+        return null;
+    }
+    ellipsize(text, maxChars) {
+        return ellipsizeLabel(text, maxChars);
+    }
+    formatTick(value) {
+        return formatTickLabel(value);
+    }
+    cellClass(key, tone) {
+        return classNames("st-anomalySwimLaneChart__cell", `st-anomalySwimLaneChart__cell--${tone}`, this.hoveredKey !== null && this.hoveredKey !== key ? "st-anomalySwimLaneChart__cell--dim" : undefined);
+    }
+    handlePointerMove(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            this.hoveredKey = null;
+            return;
+        }
+        this.hoveredKey = target.getAttribute("data-chart-key");
+    }
+    handleLeave() {
+        this.hoveredKey = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AnomalySwimLaneChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AnomalySwimLaneChart, isStandalone: true, selector: "st-anomaly-swim-lane-chart", inputs: { data: "data", max: "max", scale: "scale", label: "label", width: "width", height: "height", size: "size", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-anomalySwimLaneChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handlePointerMove($event)"
+        (pointerleave)="handleLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @for (column of columns; track column.at) {
+            <text
+              class="st-anomalySwimLaneChart__tickLabel"
+              [attr.x]="column.cx"
+              [attr.y]="resolvedHeight - margin.bottom + 16"
+              text-anchor="middle"
+            >{{ formatTick(column.at) }}</text>
+          }
+
+          <line
+            class="st-anomalySwimLaneChart__axis"
+            [attr.x1]="margin.left"
+            [attr.x2]="margin.left"
+            [attr.y1]="margin.top"
+            [attr.y2]="resolvedHeight - margin.bottom"
+          ></line>
+          <line
+            class="st-anomalySwimLaneChart__axis"
+            [attr.x1]="margin.left"
+            [attr.x2]="resolvedWidth - margin.right"
+            [attr.y1]="resolvedHeight - margin.bottom"
+            [attr.y2]="resolvedHeight - margin.bottom"
+          ></line>
+
+          @for (row of rows; track row.index) {
+            <text
+              class="st-anomalySwimLaneChart__jobLabel"
+              [attr.x]="margin.left - 8"
+              [attr.y]="row.rowCenterY"
+              text-anchor="end"
+              dominant-baseline="middle"
+            >{{ ellipsize(row.datum.job, 18) }}</text>
+
+            @for (cell of row.cells; track cell.key) {
+              <rect
+                [attr.class]="cellClass(cell.key, cell.tone)"
+                [attr.x]="cell.x"
+                [attr.y]="row.y"
+                [attr.width]="cell.width"
+                [attr.height]="row.height"
+                rx="2"
+                [attr.data-chart-key]="cell.key"
+              ></rect>
+            }
+          }
+        </svg>
+      </div>
+
+      @if (hasLegend) {
+        <div class="st-anomalySwimLaneChart__legend" aria-hidden="true">
+          <span class="st-anomalySwimLaneChart__legendText">Low</span>
+          <span class="st-anomalySwimLaneChart__legendRamp">
+            @for (tone of tones; track tone) {
+              <span [attr.class]="'st-anomalySwimLaneChart__legendSwatch st-anomalySwimLaneChart__legendSwatch--' + tone"></span>
+            }
+          </span>
+          <span class="st-anomalySwimLaneChart__legendText">High</span>
+        </div>
+      }
+
+      @if (dataValueItems.length > 0) {
+        <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + (label ?? 'anomaly swim lane')">
+          @for (item of dataValueItems; track $index) {
+            <li>{{ item }}</li>
+          }
+        </ul>
+      }
+
+      @if (hoveredCell; as hovered) {
+        <div
+          class="st-anomalySwimLaneChart__tooltip"
+          role="presentation"
+          [style.left.%]="(hovered.cell.cx / resolvedWidth) * 100"
+          [style.top.%]="(hovered.row.rowCenterY / resolvedHeight) * 100"
+        >
+          <span class="st-anomalySwimLaneChart__tooltipLabel">{{ hovered.row.datum.job }} · {{ hovered.cell.datum.at }}</span>
+          <span class="st-anomalySwimLaneChart__tooltipValue">{{ hovered.cell.datum.score }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host { display: block; width: 100%; }"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AnomalySwimLaneChart, decorators: [{
+            type: Component,
+            args: [{ selector: "st-anomaly-swim-lane-chart", standalone: true, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-anomalySwimLaneChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handlePointerMove($event)"
+        (pointerleave)="handleLeave()"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @for (column of columns; track column.at) {
+            <text
+              class="st-anomalySwimLaneChart__tickLabel"
+              [attr.x]="column.cx"
+              [attr.y]="resolvedHeight - margin.bottom + 16"
+              text-anchor="middle"
+            >{{ formatTick(column.at) }}</text>
+          }
+
+          <line
+            class="st-anomalySwimLaneChart__axis"
+            [attr.x1]="margin.left"
+            [attr.x2]="margin.left"
+            [attr.y1]="margin.top"
+            [attr.y2]="resolvedHeight - margin.bottom"
+          ></line>
+          <line
+            class="st-anomalySwimLaneChart__axis"
+            [attr.x1]="margin.left"
+            [attr.x2]="resolvedWidth - margin.right"
+            [attr.y1]="resolvedHeight - margin.bottom"
+            [attr.y2]="resolvedHeight - margin.bottom"
+          ></line>
+
+          @for (row of rows; track row.index) {
+            <text
+              class="st-anomalySwimLaneChart__jobLabel"
+              [attr.x]="margin.left - 8"
+              [attr.y]="row.rowCenterY"
+              text-anchor="end"
+              dominant-baseline="middle"
+            >{{ ellipsize(row.datum.job, 18) }}</text>
+
+            @for (cell of row.cells; track cell.key) {
+              <rect
+                [attr.class]="cellClass(cell.key, cell.tone)"
+                [attr.x]="cell.x"
+                [attr.y]="row.y"
+                [attr.width]="cell.width"
+                [attr.height]="row.height"
+                rx="2"
+                [attr.data-chart-key]="cell.key"
+              ></rect>
+            }
+          }
+        </svg>
+      </div>
+
+      @if (hasLegend) {
+        <div class="st-anomalySwimLaneChart__legend" aria-hidden="true">
+          <span class="st-anomalySwimLaneChart__legendText">Low</span>
+          <span class="st-anomalySwimLaneChart__legendRamp">
+            @for (tone of tones; track tone) {
+              <span [attr.class]="'st-anomalySwimLaneChart__legendSwatch st-anomalySwimLaneChart__legendSwatch--' + tone"></span>
+            }
+          </span>
+          <span class="st-anomalySwimLaneChart__legendText">High</span>
+        </div>
+      }
+
+      @if (dataValueItems.length > 0) {
+        <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + (label ?? 'anomaly swim lane')">
+          @for (item of dataValueItems; track $index) {
+            <li>{{ item }}</li>
+          }
+        </ul>
+      }
+
+      @if (hoveredCell; as hovered) {
+        <div
+          class="st-anomalySwimLaneChart__tooltip"
+          role="presentation"
+          [style.left.%]="(hovered.cell.cx / resolvedWidth) * 100"
+          [style.top.%]="(hovered.row.rowCenterY / resolvedHeight) * 100"
+        >
+          <span class="st-anomalySwimLaneChart__tooltipLabel">{{ hovered.row.datum.job }} · {{ hovered.cell.datum.at }}</span>
+          <span class="st-anomalySwimLaneChart__tooltipValue">{{ hovered.cell.datum.score }}</span>
+        </div>
+      }
+    </div>
+  `, styles: [":host { display: block; width: 100%; }"] }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], max: [{
+                type: NgInput
+            }], scale: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], size: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=AnomalySwimLaneChart.js.map

package/dist/AnomalySwimLaneChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnomalySwimLaneChart.js","sourceRoot":"","sources":["../src/AnomalySwimLaneChart.ts"],"names":[],"mappings":"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"}

package/dist/AppChrome.d.ts

@@ -0,0 +1,104 @@
+import * as i0 from "@angular/core";
+export interface AppChromeNavItem {
+    label: string;
+    href: string;
+    /** Marqué actif (souligné, aria-current=page). */
+    active?: boolean;
+}
+export interface AppChromeThemeOption {
+    id: string;
+    label: string;
+}
+export type AppChromeColorMode = "light" | "dark" | "auto";
+export type AppChromeLocale = "fr" | "en";
+export type AppChromeProps = {
+    brandName?: string;
+    productName?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    brandHref?: string;
+    brandLabel?: string;
+    nav?: AppChromeNavItem[];
+    navLabel?: string;
+    themes?: AppChromeThemeOption[];
+    theme?: string;
+    onThemeChange?: (id: string) => void;
+    themeLabel?: string;
+    colorMode?: AppChromeColorMode;
+    onColorModeChange?: (mode: AppChromeColorMode) => void;
+    colorModeLabels?: {
+        light: string;
+        dark: string;
+        auto: string;
+    };
+    locale?: AppChromeLocale;
+    onLocaleChange?: (locale: AppChromeLocale) => void;
+    localeLabel?: string;
+    githubHref?: string;
+    githubLabel?: string;
+    mobileMenuOpen?: boolean;
+    onMobileMenuToggle?: () => void;
+    menuLabel?: string;
+    class?: string;
+};
+export declare class AppChrome {
+    static readonly stComponentName = "AppChrome";
+    readonly componentName = "AppChrome";
+    brandName?: string;
+    productName?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    brandHref?: string;
+    brandLabel?: string;
+    nav: AppChromeNavItem[];
+    navLabel?: string;
+    themes: AppChromeThemeOption[];
+    theme?: string;
+    onThemeChange?: (id: string) => void;
+    themeLabel?: string;
+    colorMode?: AppChromeColorMode;
+    onColorModeChange?: (mode: AppChromeColorMode) => void;
+    colorModeLabels: {
+        light: string;
+        dark: string;
+        auto: string;
+    };
+    locale?: AppChromeLocale;
+    onLocaleChange?: (locale: AppChromeLocale) => void;
+    localeLabel?: string;
+    githubHref?: string;
+    githubLabel?: string;
+    mobileMenuOpen: boolean;
+    onMobileMenuToggle?: () => void;
+    menuLabel?: string;
+    classInput?: string;
+    /** Id du tiroir, stable et partagé entre `aria-controls` (burger) et `id` (drawer). */
+    readonly drawerId: string;
+    readonly localeOptions: AppChromeLocale[];
+    readonly colorModeOptions: AppChromeColorMode[];
+    isThemeOpen: boolean;
+    isLocaleOpen: boolean;
+    get hostClass(): string;
+    get resolvedBrandLabel(): string | null;
+    get activeTheme(): AppChromeThemeOption | undefined;
+    get showThemeSelector(): boolean;
+    get showColorMode(): boolean;
+    get showLocaleSelector(): boolean;
+    get showGithub(): boolean;
+    get colorModeAriaLabel(): string;
+    chevronClass(open: boolean): string;
+    toggleTheme(): void;
+    toggleLocale(): void;
+    pickTheme(id: string): void;
+    pickLocale(value: AppChromeLocale): void;
+    cycleColorMode(): void;
+    toggleMobileMenu(): void;
+    pickThemeFromDrawer(id: string): void;
+    pickLocaleFromDrawer(value: AppChromeLocale): void;
+    selectColorMode(mode: AppChromeColorMode): void;
+    onDocumentClick(e: MouseEvent): void;
+    onDocumentKeydown(e: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppChrome, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppChrome, "st-app-chrome", never, { "brandName": { "alias": "brandName"; "required": false; }; "productName": { "alias": "productName"; "required": false; }; "logoSrc": { "alias": "logoSrc"; "required": false; }; "logoAlt": { "alias": "logoAlt"; "required": false; }; "brandHref": { "alias": "brandHref"; "required": false; }; "brandLabel": { "alias": "brandLabel"; "required": false; }; "nav": { "alias": "nav"; "required": false; }; "navLabel": { "alias": "navLabel"; "required": false; }; "themes": { "alias": "themes"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "onThemeChange": { "alias": "onThemeChange"; "required": false; }; "themeLabel": { "alias": "themeLabel"; "required": false; }; "colorMode": { "alias": "colorMode"; "required": false; }; "onColorModeChange": { "alias": "onColorModeChange"; "required": false; }; "colorModeLabels": { "alias": "colorModeLabels"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "onLocaleChange": { "alias": "onLocaleChange"; "required": false; }; "localeLabel": { "alias": "localeLabel"; "required": false; }; "githubHref": { "alias": "githubHref"; "required": false; }; "githubLabel": { "alias": "githubLabel"; "required": false; }; "mobileMenuOpen": { "alias": "mobileMenuOpen"; "required": false; }; "onMobileMenuToggle": { "alias": "onMobileMenuToggle"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=AppChrome.d.ts.map

package/dist/AppChrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppChrome.d.ts","sourceRoot":"","sources":["../src/AppChrome.ts"],"names":[],"mappings":"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"}