@sentropic/design-system-angular 0.36.54

package/dist/RibbonChart.d.ts

@@ -0,0 +1,84 @@
+import * as i0 from "@angular/core";
+export type RibbonChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type RibbonChartDatum = {
+    category: string;
+    period: string | number;
+    value: number;
+    tone?: RibbonChartTone;
+};
+export type RibbonChartProps = {
+    data: RibbonChartDatum[];
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    class?: string;
+};
+type Segment = {
+    key: string;
+    category: string;
+    value: number;
+    tone: RibbonChartTone;
+    x: number;
+    segWidth: number;
+    yTop: number;
+    yBottom: number;
+    cx: number;
+    cy: number;
+};
+type Column = {
+    period: string | number;
+    index: number;
+    cx: number;
+    segments: Segment[];
+};
+type Ribbon = {
+    key: string;
+    category: string;
+    tone: RibbonChartTone;
+    d: string;
+};
+type LegendItem = {
+    category: string;
+    tone: RibbonChartTone;
+};
+export declare class RibbonChart {
+    static readonly stComponentName = "RibbonChart";
+    readonly componentName = "RibbonChart";
+    hoveredKey: string | null;
+    data: RibbonChartDatum[];
+    label?: string;
+    width?: number;
+    height?: number;
+    size?: number;
+    classInput?: string;
+    get hostClass(): string;
+    get resolvedWidth(): number;
+    get heightValue(): number;
+    get periodLabelY(): number;
+    get viewBox(): string;
+    get plotWidth(): number;
+    get plotHeight(): number;
+    get validData(): RibbonChartDatum[];
+    get periodOrder(): (string | number)[];
+    get categoryOrder(): string[];
+    get explicitToneByCategory(): Map<string, RibbonChartTone>;
+    toneOf(category: string): RibbonChartTone;
+    get columns(): Column[];
+    get ribbons(): Ribbon[];
+    get legendItems(): LegendItem[];
+    get hasLegend(): boolean;
+    get dataValueItems(): string[];
+    get hoveredSegment(): Segment | null;
+    get tooltipLeft(): number;
+    get tooltipTop(): number;
+    ribbonClass(ribbon: Ribbon): string;
+    segClass(seg: Segment): string;
+    segHeight(seg: Segment): number;
+    handlePointerMove(event: PointerEvent): void;
+    handleLeave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RibbonChart, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RibbonChart, "st-ribbon-chart", never, { "data": { "alias": "data"; "required": false; }; "label": { "alias": "label"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "size": { "alias": "size"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=RibbonChart.d.ts.map

package/dist/RibbonChart.d.ts.map

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

package/dist/RibbonChart.js

@@ -0,0 +1,335 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import * as i0 from "@angular/core";
+const TONES = [
+    "category1", "category2", "category3", "category4",
+    "category5", "category6", "category7", "category8",
+];
+const MARGIN = { top: 16, right: 16, bottom: 32, left: 16 };
+const RIBBON_SMOOTH = 0.4;
+export class RibbonChart {
+    static stComponentName = "RibbonChart";
+    componentName = "RibbonChart";
+    hoveredKey = null;
+    data = [];
+    label;
+    width;
+    height;
+    size;
+    classInput;
+    get hostClass() {
+        return classNames("st-ribbonChart", this.classInput);
+    }
+    get resolvedWidth() { return this.width ?? this.size ?? 520; }
+    get heightValue() { return this.height ?? 300; }
+    get periodLabelY() { return this.heightValue - MARGIN.bottom + 16; }
+    get viewBox() {
+        return `0 0 ${this.resolvedWidth} ${this.heightValue}`;
+    }
+    get plotWidth() { return Math.max(this.resolvedWidth - MARGIN.left - MARGIN.right, 1); }
+    get plotHeight() { return Math.max(this.heightValue - MARGIN.top - MARGIN.bottom, 1); }
+    get validData() {
+        return this.data.filter((d) => typeof d.category === "string" &&
+            d.category.length > 0 &&
+            Number.isFinite(d.value) &&
+            d.value >= 0);
+    }
+    get periodOrder() {
+        const seen = [];
+        for (const d of this.validData) {
+            if (!seen.includes(d.period))
+                seen.push(d.period);
+        }
+        return seen;
+    }
+    get categoryOrder() {
+        const seen = [];
+        for (const d of this.validData) {
+            if (!seen.includes(d.category))
+                seen.push(d.category);
+        }
+        return seen;
+    }
+    get explicitToneByCategory() {
+        const map = new Map();
+        for (const d of this.validData) {
+            if (d.tone)
+                map.set(d.category, d.tone);
+        }
+        return map;
+    }
+    toneOf(category) {
+        const explicit = this.explicitToneByCategory.get(category);
+        if (explicit)
+            return explicit;
+        const idx = this.categoryOrder.indexOf(category);
+        return `category${((idx < 0 ? 0 : idx) % 8) + 1}`;
+    }
+    get columns() {
+        if (this.validData.length === 0 || this.periodOrder.length === 0)
+            return [];
+        const band = this.plotWidth / this.periodOrder.length;
+        const barWidth = Math.min(band * 0.5, 72);
+        const totals = this.periodOrder.map((p) => this.validData.filter((d) => d.period === p).reduce((s, d) => s + Math.max(d.value, 0), 0));
+        const domainMax = Math.max(1, ...totals);
+        return this.periodOrder.map((period, pi) => {
+            const x = MARGIN.left + band * pi + (band - barWidth) / 2;
+            const rows = this.validData
+                .filter((d) => d.period === period)
+                .map((d) => ({ category: d.category, value: Math.max(d.value, 0) }))
+                .sort((a, b) => b.value - a.value);
+            let acc = 0;
+            const segments = rows.map((row, ri) => {
+                const h = (row.value / domainMax) * this.plotHeight;
+                const yBottom = MARGIN.top + this.plotHeight - acc;
+                const yTop = yBottom - h;
+                acc += h;
+                return {
+                    key: `${pi}-${ri}-${row.category}`,
+                    category: row.category,
+                    value: row.value,
+                    tone: this.toneOf(row.category),
+                    x,
+                    segWidth: barWidth,
+                    yTop,
+                    yBottom,
+                    cx: x + barWidth / 2,
+                    cy: yTop + (yBottom - yTop) / 2,
+                };
+            });
+            return { period, index: pi, cx: MARGIN.left + band * (pi + 0.5), segments };
+        });
+    }
+    get ribbons() {
+        const out = [];
+        for (let ci = 0; ci < this.columns.length - 1; ci++) {
+            const left = this.columns[ci];
+            const right = this.columns[ci + 1];
+            for (const ls of left.segments) {
+                const rs = right.segments.find((s) => s.category === ls.category);
+                if (!rs)
+                    continue;
+                const x0 = ls.x + ls.segWidth;
+                const x1 = rs.x;
+                const mid = x0 + (x1 - x0) * RIBBON_SMOOTH;
+                const mid2 = x1 - (x1 - x0) * RIBBON_SMOOTH;
+                const d = `M${x0.toFixed(2)},${ls.yTop.toFixed(2)} ` +
+                    `C${mid.toFixed(2)},${ls.yTop.toFixed(2)} ${mid2.toFixed(2)},${rs.yTop.toFixed(2)} ${x1.toFixed(2)},${rs.yTop.toFixed(2)} ` +
+                    `L${x1.toFixed(2)},${rs.yBottom.toFixed(2)} ` +
+                    `C${mid2.toFixed(2)},${rs.yBottom.toFixed(2)} ${mid.toFixed(2)},${ls.yBottom.toFixed(2)} ${x0.toFixed(2)},${ls.yBottom.toFixed(2)} Z`;
+                out.push({ key: `${ci}-${ls.category}`, category: ls.category, tone: ls.tone, d });
+            }
+        }
+        return out;
+    }
+    get legendItems() {
+        return this.categoryOrder.map((category) => ({ category, tone: this.toneOf(category) }));
+    }
+    get hasLegend() {
+        return this.categoryOrder.length > 0;
+    }
+    get dataValueItems() {
+        return this.categoryOrder.map((category) => `${category}: ${this.periodOrder
+            .map((p) => {
+            const found = this.validData.find((d) => d.category === category && d.period === p);
+            return `${p} = ${found ? found.value : 0}`;
+        })
+            .join(", ")}`);
+    }
+    get hoveredSegment() {
+        if (this.hoveredKey === null)
+            return null;
+        for (const col of this.columns) {
+            for (const seg of col.segments) {
+                if (seg.key === this.hoveredKey)
+                    return seg;
+            }
+        }
+        return null;
+    }
+    get tooltipLeft() {
+        const seg = this.hoveredSegment;
+        return seg ? (seg.cx / this.resolvedWidth) * 100 : 0;
+    }
+    get tooltipTop() {
+        const seg = this.hoveredSegment;
+        return seg ? (seg.cy / this.heightValue) * 100 : 0;
+    }
+    ribbonClass(ribbon) {
+        return classNames("st-ribbonChart__ribbon", `st-ribbonChart__ribbon--${ribbon.tone}`, this.hoveredSegment !== null && this.hoveredSegment.category !== ribbon.category && "st-ribbonChart__ribbon--dim");
+    }
+    segClass(seg) {
+        return classNames("st-ribbonChart__seg", `st-ribbonChart__seg--${seg.tone}`, this.hoveredSegment !== null && this.hoveredSegment.category !== seg.category && "st-ribbonChart__seg--dim");
+    }
+    segHeight(seg) {
+        return Math.max(seg.yBottom - seg.yTop, 0);
+    }
+    handlePointerMove(event) {
+        const target = event.target;
+        const key = target?.getAttribute?.("data-chart-key") ?? null;
+        this.hoveredKey = key;
+    }
+    handleLeave() {
+        this.hoveredKey = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RibbonChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: RibbonChart, isStandalone: true, selector: "st-ribbon-chart", inputs: { data: "data", 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-ribbonChart__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 (ribbon of ribbons; track ribbon.key) {
+            <path
+              [class]="ribbonClass(ribbon)"
+              [attr.d]="ribbon.d"
+            ></path>
+          }
+
+          @for (col of columns; track col.index) {
+            <text class="st-ribbonChart__periodLabel" [attr.x]="col.cx" [attr.y]="periodLabelY" text-anchor="middle">{{ col.period }}</text>
+            @for (seg of col.segments; track seg.key) {
+              <rect
+                [class]="segClass(seg)"
+                [attr.x]="seg.x"
+                [attr.y]="seg.yTop"
+                [attr.width]="seg.segWidth"
+                [attr.height]="segHeight(seg)"
+                rx="2"
+                [attr.data-chart-key]="seg.key"
+              ></rect>
+            }
+          }
+        </svg>
+      </div>
+
+      @if (hasLegend) {
+        <ul class="st-ribbonChart__legend" [attr.aria-label]="\'Catégories de \' + (label ?? \'ribbon\')">
+          @for (item of legendItems; track item.category) {
+            <li class="st-ribbonChart__legendItem">
+              <span [class]="\'st-ribbonChart__legendSwatch st-ribbonChart__legendSwatch--\' + item.tone" aria-hidden="true"></span>
+              {{ item.category }}
+            </li>
+          }
+        </ul>
+      }
+
+      <ul class="st-chartDataList" [attr.aria-label]="\'Data values for \' + (label ?? \'ribbon\')">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredSegment) {
+        <div
+          class="st-ribbonChart__tooltip"
+          role="presentation"
+          [style.left]="tooltipLeft + \'%\'"
+          [style.top]="tooltipTop + \'%\'"
+        >
+          <span class="st-ribbonChart__tooltipLabel">{{ hoveredSegment.category }}</span>
+          <span class="st-ribbonChart__tooltipValue">{{ hoveredSegment.value }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host { display: contents; }"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RibbonChart, decorators: [{
+            type: Component,
+            args: [{ selector: "st-ribbon-chart", standalone: true, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-ribbonChart__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 (ribbon of ribbons; track ribbon.key) {
+            <path
+              [class]="ribbonClass(ribbon)"
+              [attr.d]="ribbon.d"
+            ></path>
+          }
+
+          @for (col of columns; track col.index) {
+            <text class="st-ribbonChart__periodLabel" [attr.x]="col.cx" [attr.y]="periodLabelY" text-anchor="middle">{{ col.period }}</text>
+            @for (seg of col.segments; track seg.key) {
+              <rect
+                [class]="segClass(seg)"
+                [attr.x]="seg.x"
+                [attr.y]="seg.yTop"
+                [attr.width]="seg.segWidth"
+                [attr.height]="segHeight(seg)"
+                rx="2"
+                [attr.data-chart-key]="seg.key"
+              ></rect>
+            }
+          }
+        </svg>
+      </div>
+
+      @if (hasLegend) {
+        <ul class="st-ribbonChart__legend" [attr.aria-label]="\'Catégories de \' + (label ?? \'ribbon\')">
+          @for (item of legendItems; track item.category) {
+            <li class="st-ribbonChart__legendItem">
+              <span [class]="\'st-ribbonChart__legendSwatch st-ribbonChart__legendSwatch--\' + item.tone" aria-hidden="true"></span>
+              {{ item.category }}
+            </li>
+          }
+        </ul>
+      }
+
+      <ul class="st-chartDataList" [attr.aria-label]="\'Data values for \' + (label ?? \'ribbon\')">
+        @for (item of dataValueItems; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredSegment) {
+        <div
+          class="st-ribbonChart__tooltip"
+          role="presentation"
+          [style.left]="tooltipLeft + \'%\'"
+          [style.top]="tooltipTop + \'%\'"
+        >
+          <span class="st-ribbonChart__tooltipLabel">{{ hoveredSegment.category }}</span>
+          <span class="st-ribbonChart__tooltipValue">{{ hoveredSegment.value }}</span>
+        </div>
+      }
+    </div>
+  `, styles: [":host { display: contents; }"] }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], size: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=RibbonChart.js.map

package/dist/RibbonChart.js.map

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

package/dist/RoseChart.d.ts

@@ -0,0 +1,54 @@
+import * as i0 from "@angular/core";
+export type RoseChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type RoseChartDatum = {
+    label: string;
+    value: number;
+    tone?: RoseChartTone;
+};
+export type RoseChartProps = {
+    data: RoseChartDatum[];
+    width?: number;
+    height?: number;
+    label: string;
+    class?: string;
+};
+type Sector = {
+    datum: RoseChartDatum;
+    value: number;
+    tone: RoseChartTone;
+    radius: number;
+    path: string;
+    labelX: number;
+    labelY: number;
+    showLabel: boolean;
+};
+export declare class RoseChart {
+    static readonly stComponentName = "RoseChart";
+    readonly componentName = "RoseChart";
+    hoveredIndex: number | null;
+    data: RoseChartDatum[];
+    width?: number;
+    height?: number;
+    label: string;
+    classInput?: string;
+    get hostClass(): string;
+    get widthValue(): number;
+    get heightValue(): number;
+    get viewBox(): string;
+    private safeValue;
+    formatNumber(value: number): string;
+    private point;
+    private sectorPath;
+    get sectors(): Sector[];
+    get dataValueItems(): string[];
+    get tooltipLeft(): number;
+    get tooltipTop(): number;
+    sectorClass(sector: Sector, i: number): string;
+    contrastText(tone: RoseChartTone): string;
+    handleVisualPointerMove(event: PointerEvent): void;
+    handleLeave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RoseChart, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RoseChart, "st-rose-chart", never, { "data": { "alias": "data"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "label": { "alias": "label"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=RoseChart.d.ts.map

package/dist/RoseChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoseChart.d.ts","sourceRoot":"","sources":["../src/RoseChart.ts"],"names":[],"mappings":";AAKA,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,qBAiEa,SAAS;IACpB,MAAM,CAAC,QAAQ,CAAC,eAAe,eAAe;IAC9C,QAAQ,CAAC,aAAa,eAAe;IAErC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExB,IAAI,EAAE,cAAc,EAAE,CAAM;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,SAAM;IACJ,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,UAAU,IAAI,MAAM,CAA8B;IACtD,IAAI,WAAW,IAAI,MAAM,CAA+B;IAExD,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,OAAO,CAAC,SAAS;IAIjB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAMnC,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,UAAU;IAQlB,IAAI,OAAO,IAAI,MAAM,EAAE,CA6BtB;IAED,IAAI,cAAc,IAAI,MAAM,EAAE,CAE7B;IAED,IAAI,WAAW,IAAI,MAAM,CAGxB;IAED,IAAI,UAAU,IAAI,MAAM,CAGvB;IAED,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM;IAQ9C,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,MAAM;IAIzC,uBAAuB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI;IAMlD,WAAW,IAAI,IAAI;yCA5GR,SAAS;2CAAT,SAAS;CA+GrB"}