@sentropic/design-system-angular 0.36.54

package/dist/BulletChart.js

@@ -0,0 +1,351 @@
+import { Component, Input as NgInput } from "@angular/core";
+import { classNames } from "./classNames.js";
+import { formatTick, niceTicks, scaleLinear } from "./chartScale.js";
+import * as i0 from "@angular/core";
+const MARGIN = { top: 12, right: 24, bottom: 36, left: 80 };
+const RANGE_OPACITIES = [0.18, 0.30, 0.44];
+export class BulletChart {
+    static stComponentName = "BulletChart";
+    componentName = "BulletChart";
+    MARGIN_LEFT = MARGIN.left;
+    MARGIN_RIGHT = MARGIN.right;
+    MARGIN_TOP = MARGIN.top;
+    MARGIN_BOTTOM = MARGIN.bottom;
+    hoveredIndex = null;
+    data = [];
+    label = "";
+    orientation;
+    width;
+    height;
+    classInput;
+    get hostClass() {
+        return classNames("st-bulletChart", this.classInput);
+    }
+    get orientationValue() {
+        return this.orientation ?? "horizontal";
+    }
+    get isHorizontal() {
+        return this.orientationValue === "horizontal";
+    }
+    get widthValue() {
+        return this.width ?? 480;
+    }
+    get heightValue() {
+        return this.height ?? 240;
+    }
+    get viewBox() {
+        return `0 0 ${this.widthValue} ${this.heightValue}`;
+    }
+    get plotWidth() {
+        return Math.max(this.widthValue - MARGIN.left - MARGIN.right, 1);
+    }
+    get plotHeight() {
+        return Math.max(this.heightValue - MARGIN.top - MARGIN.bottom, 1);
+    }
+    get validData() {
+        return this.data.filter((d) => Number.isFinite(d.value) && Number.isFinite(d.target));
+    }
+    get domainBounds() {
+        const allValues = [0];
+        for (const d of this.validData) {
+            allValues.push(d.value, d.target);
+            for (const r of d.ranges ?? []) {
+                if (Number.isFinite(r))
+                    allValues.push(r);
+            }
+        }
+        const rawMin = Math.min(...allValues);
+        const rawMax = Math.max(...allValues);
+        return { rawMin, rawMax: rawMax === rawMin ? rawMin + 1 : rawMax };
+    }
+    get ticks() {
+        return niceTicks(this.domainBounds.rawMin, this.domainBounds.rawMax, 5);
+    }
+    get tickDomainMin() {
+        return this.ticks[0] ?? this.domainBounds.rawMin;
+    }
+    get tickDomainMax() {
+        return this.ticks[this.ticks.length - 1] ?? this.domainBounds.rawMax;
+    }
+    get baselineX() {
+        return MARGIN.left + scaleLinear(0, this.tickDomainMin, this.tickDomainMax, 0, this.plotWidth);
+    }
+    get baselineY() {
+        return MARGIN.top + scaleLinear(0, this.tickDomainMin, this.tickDomainMax, this.plotHeight, 0);
+    }
+    tickX(tick) {
+        return MARGIN.left + scaleLinear(tick, this.tickDomainMin, this.tickDomainMax, 0, this.plotWidth);
+    }
+    tickY(tick) {
+        return MARGIN.top + scaleLinear(tick, this.tickDomainMin, this.tickDomainMax, this.plotHeight, 0);
+    }
+    formatTickLabel(v) {
+        return formatTick(v);
+    }
+    get bullets() {
+        const bandCount = this.validData.length;
+        if (bandCount === 0)
+            return [];
+        if (this.isHorizontal) {
+            const bandH = this.plotHeight / bandCount;
+            const barH = bandH * 0.35;
+            const rangeH = bandH * 0.65;
+            return this.validData.map((d, i) => {
+                const ranges = (d.ranges ?? [this.tickDomainMax]).filter(Number.isFinite).slice(0, 3);
+                const sortedRanges = [...ranges].sort((a, b) => a - b);
+                const bandY = MARGIN.top + i * bandH;
+                const cx = MARGIN.left + scaleLinear(d.value, this.tickDomainMin, this.tickDomainMax, 0, this.plotWidth);
+                const targetX = MARGIN.left + scaleLinear(d.target, this.tickDomainMin, this.tickDomainMax, 0, this.plotWidth);
+                const rangeBands = sortedRanges.map((r, ri) => {
+                    const prevR = ri === 0 ? this.tickDomainMin : sortedRanges[ri - 1];
+                    return {
+                        x: MARGIN.left + scaleLinear(prevR, this.tickDomainMin, this.tickDomainMax, 0, this.plotWidth),
+                        width: scaleLinear(r, this.tickDomainMin, this.tickDomainMax, 0, this.plotWidth) -
+                            scaleLinear(prevR, this.tickDomainMin, this.tickDomainMax, 0, this.plotWidth),
+                        opacity: RANGE_OPACITIES[ri] ?? 0.44,
+                        y: bandY + (bandH - rangeH) / 2,
+                        height: rangeH,
+                    };
+                });
+                const zeroX = this.baselineX;
+                const barLeft = Math.min(zeroX, cx);
+                const barRight = Math.max(zeroX, cx);
+                return {
+                    datum: d,
+                    index: i,
+                    barX: barLeft,
+                    barY: bandY + (bandH - barH) / 2,
+                    barW: Math.max(barRight - barLeft, 0.5),
+                    barH,
+                    targetX,
+                    targetY: bandY + (bandH - rangeH) / 2,
+                    targetH: rangeH,
+                    labelY: bandY + bandH / 2,
+                    labelX: 0,
+                    rangeBands,
+                    tooltipX: cx,
+                    tooltipY: bandY + bandH / 2,
+                };
+            });
+        }
+        // vertical
+        const bandW = this.plotWidth / bandCount;
+        const barW = bandW * 0.35;
+        const rangeW = bandW * 0.65;
+        return this.validData.map((d, i) => {
+            const ranges = (d.ranges ?? [this.tickDomainMax]).filter(Number.isFinite).slice(0, 3);
+            const sortedRanges = [...ranges].sort((a, b) => a - b);
+            const bandX = MARGIN.left + i * bandW;
+            const cy = MARGIN.top + scaleLinear(d.value, this.tickDomainMin, this.tickDomainMax, this.plotHeight, 0);
+            const targetY = MARGIN.top + scaleLinear(d.target, this.tickDomainMin, this.tickDomainMax, this.plotHeight, 0);
+            const rangeBands = sortedRanges.map((r, ri) => {
+                const prevR = ri === 0 ? this.tickDomainMin : sortedRanges[ri - 1];
+                return {
+                    y: MARGIN.top + scaleLinear(r, this.tickDomainMin, this.tickDomainMax, this.plotHeight, 0),
+                    height: Math.abs(scaleLinear(r, this.tickDomainMin, this.tickDomainMax, this.plotHeight, 0) -
+                        scaleLinear(prevR, this.tickDomainMin, this.tickDomainMax, this.plotHeight, 0)),
+                    opacity: RANGE_OPACITIES[ri] ?? 0.44,
+                    x: bandX + (bandW - rangeW) / 2,
+                    width: rangeW,
+                };
+            });
+            const zeroY = this.baselineY;
+            const barTop = Math.min(zeroY, cy);
+            const barBot = Math.max(zeroY, cy);
+            return {
+                datum: d,
+                index: i,
+                barX: bandX + (bandW - barW) / 2,
+                barY: barTop,
+                barW: barW,
+                barH: Math.max(barBot - barTop, 0.5),
+                targetY,
+                targetX: bandX + (bandW - rangeW) / 2,
+                targetH: rangeW,
+                labelY: MARGIN.top + this.plotHeight + 18,
+                labelX: bandX + bandW / 2,
+                rangeBands,
+                tooltipX: bandX + bandW / 2,
+                tooltipY: cy,
+            };
+        });
+    }
+    get dataValueItems() {
+        return this.validData.map((d) => `${d.label}: value ${d.value}, target ${d.target}`);
+    }
+    get hoveredBullet() {
+        return this.hoveredIndex !== null ? (this.bullets[this.hoveredIndex] ?? null) : null;
+    }
+    handleLeave() {
+        this.hoveredIndex = null;
+    }
+    handlePointerMove(event) {
+        const target = event.target;
+        const raw = Number(target?.getAttribute?.("data-chart-index"));
+        this.hoveredIndex = Number.isInteger(raw) && !isNaN(raw) ? raw : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BulletChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BulletChart, isStandalone: true, selector: "st-bullet-chart", inputs: { data: "data", label: "label", orientation: "orientation", width: "width", height: "height", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-bulletChart__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"
+        >
+          @if (isHorizontal) {
+            <line class="st-bulletChart__baseline" [attr.x1]="baselineX" [attr.x2]="baselineX" [attr.y1]="MARGIN_TOP" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+          } @else {
+            <line class="st-bulletChart__baseline" [attr.x1]="MARGIN_LEFT" [attr.x2]="widthValue - MARGIN_RIGHT" [attr.y1]="baselineY" [attr.y2]="baselineY"></line>
+          }
+
+          <line class="st-bulletChart__axis" [attr.x1]="MARGIN_LEFT" [attr.x2]="isHorizontal ? widthValue - MARGIN_RIGHT : MARGIN_LEFT" [attr.y1]="MARGIN_TOP" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+          <line class="st-bulletChart__axis" [attr.x1]="MARGIN_LEFT" [attr.x2]="isHorizontal ? MARGIN_LEFT : widthValue - MARGIN_RIGHT" [attr.y1]="heightValue - MARGIN_BOTTOM" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+
+          @for (tick of ticks; track tick) {
+            @if (isHorizontal) {
+              <line class="st-bulletChart__grid" [attr.x1]="tickX(tick)" [attr.x2]="tickX(tick)" [attr.y1]="MARGIN_TOP" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+              <text class="st-bulletChart__tickLabel" [attr.x]="tickX(tick)" [attr.y]="heightValue - MARGIN_BOTTOM + 14" text-anchor="middle">{{ formatTickLabel(tick) }}</text>
+            } @else {
+              <line class="st-bulletChart__grid" [attr.x1]="MARGIN_LEFT" [attr.x2]="widthValue - MARGIN_RIGHT" [attr.y1]="tickY(tick)" [attr.y2]="tickY(tick)"></line>
+              <text class="st-bulletChart__tickLabel" [attr.x]="MARGIN_LEFT - 6" [attr.y]="tickY(tick)" text-anchor="end" dominant-baseline="middle">{{ formatTickLabel(tick) }}</text>
+            }
+          }
+
+          @for (b of bullets; track b.index) {
+            @for (rb of b.rangeBands; track $index) {
+              <rect class="st-bulletChart__range" [attr.x]="rb.x" [attr.y]="rb.y" [attr.width]="rb.width" [attr.height]="rb.height" [style.opacity]="rb.opacity"></rect>
+            }
+            <rect class="st-bulletChart__bar" [attr.x]="b.barX" [attr.y]="b.barY" [attr.width]="b.barW" [attr.height]="b.barH" rx="1" [attr.data-chart-index]="b.index"></rect>
+            @if (isHorizontal) {
+              <line class="st-bulletChart__target" [attr.x1]="b.targetX" [attr.x2]="b.targetX" [attr.y1]="b.targetY" [attr.y2]="b.targetY + b.targetH"></line>
+              <text class="st-bulletChart__categoryLabel" [attr.x]="MARGIN_LEFT - 8" [attr.y]="b.labelY" text-anchor="end" dominant-baseline="middle">{{ b.datum.label }}</text>
+            } @else {
+              <line class="st-bulletChart__target" [attr.x1]="b.targetX" [attr.x2]="b.targetX + b.targetH" [attr.y1]="b.targetY" [attr.y2]="b.targetY"></line>
+              <text class="st-bulletChart__categoryLabel" [attr.x]="b.labelX" [attr.y]="b.labelY" text-anchor="middle">{{ b.datum.label }}</text>
+            }
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="label">
+        @for (item of dataValueItems; track $index) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredBullet; as b) {
+        <div
+          class="st-bulletChart__tooltip"
+          role="presentation"
+          [style.left]="(b.tooltipX / widthValue * 100) + '%'"
+          [style.top]="(b.tooltipY / heightValue * 100) + '%'"
+        >
+          <span class="st-bulletChart__tooltipLabel">{{ b.datum.label }}</span>
+          <span class="st-bulletChart__tooltipValue">value: {{ b.datum.value }} / target: {{ b.datum.target }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BulletChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-bullet-chart",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-bulletChart__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"
+        >
+          @if (isHorizontal) {
+            <line class="st-bulletChart__baseline" [attr.x1]="baselineX" [attr.x2]="baselineX" [attr.y1]="MARGIN_TOP" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+          } @else {
+            <line class="st-bulletChart__baseline" [attr.x1]="MARGIN_LEFT" [attr.x2]="widthValue - MARGIN_RIGHT" [attr.y1]="baselineY" [attr.y2]="baselineY"></line>
+          }
+
+          <line class="st-bulletChart__axis" [attr.x1]="MARGIN_LEFT" [attr.x2]="isHorizontal ? widthValue - MARGIN_RIGHT : MARGIN_LEFT" [attr.y1]="MARGIN_TOP" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+          <line class="st-bulletChart__axis" [attr.x1]="MARGIN_LEFT" [attr.x2]="isHorizontal ? MARGIN_LEFT : widthValue - MARGIN_RIGHT" [attr.y1]="heightValue - MARGIN_BOTTOM" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+
+          @for (tick of ticks; track tick) {
+            @if (isHorizontal) {
+              <line class="st-bulletChart__grid" [attr.x1]="tickX(tick)" [attr.x2]="tickX(tick)" [attr.y1]="MARGIN_TOP" [attr.y2]="heightValue - MARGIN_BOTTOM"></line>
+              <text class="st-bulletChart__tickLabel" [attr.x]="tickX(tick)" [attr.y]="heightValue - MARGIN_BOTTOM + 14" text-anchor="middle">{{ formatTickLabel(tick) }}</text>
+            } @else {
+              <line class="st-bulletChart__grid" [attr.x1]="MARGIN_LEFT" [attr.x2]="widthValue - MARGIN_RIGHT" [attr.y1]="tickY(tick)" [attr.y2]="tickY(tick)"></line>
+              <text class="st-bulletChart__tickLabel" [attr.x]="MARGIN_LEFT - 6" [attr.y]="tickY(tick)" text-anchor="end" dominant-baseline="middle">{{ formatTickLabel(tick) }}</text>
+            }
+          }
+
+          @for (b of bullets; track b.index) {
+            @for (rb of b.rangeBands; track $index) {
+              <rect class="st-bulletChart__range" [attr.x]="rb.x" [attr.y]="rb.y" [attr.width]="rb.width" [attr.height]="rb.height" [style.opacity]="rb.opacity"></rect>
+            }
+            <rect class="st-bulletChart__bar" [attr.x]="b.barX" [attr.y]="b.barY" [attr.width]="b.barW" [attr.height]="b.barH" rx="1" [attr.data-chart-index]="b.index"></rect>
+            @if (isHorizontal) {
+              <line class="st-bulletChart__target" [attr.x1]="b.targetX" [attr.x2]="b.targetX" [attr.y1]="b.targetY" [attr.y2]="b.targetY + b.targetH"></line>
+              <text class="st-bulletChart__categoryLabel" [attr.x]="MARGIN_LEFT - 8" [attr.y]="b.labelY" text-anchor="end" dominant-baseline="middle">{{ b.datum.label }}</text>
+            } @else {
+              <line class="st-bulletChart__target" [attr.x1]="b.targetX" [attr.x2]="b.targetX + b.targetH" [attr.y1]="b.targetY" [attr.y2]="b.targetY"></line>
+              <text class="st-bulletChart__categoryLabel" [attr.x]="b.labelX" [attr.y]="b.labelY" text-anchor="middle">{{ b.datum.label }}</text>
+            }
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="label">
+        @for (item of dataValueItems; track $index) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredBullet; as b) {
+        <div
+          class="st-bulletChart__tooltip"
+          role="presentation"
+          [style.left]="(b.tooltipX / widthValue * 100) + '%'"
+          [style.top]="(b.tooltipY / heightValue * 100) + '%'"
+        >
+          <span class="st-bulletChart__tooltipLabel">{{ b.datum.label }}</span>
+          <span class="st-bulletChart__tooltipValue">value: {{ b.datum.value }} / target: {{ b.datum.target }}</span>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], orientation: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=BulletChart.js.map

package/dist/BulletChart.js.map

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

package/dist/BumpChart.d.ts

@@ -0,0 +1,75 @@
+import * as i0 from "@angular/core";
+export type BumpChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type BumpChartSeries = {
+    label: string;
+    ranks: (number | null | undefined)[];
+    tone?: BumpChartTone;
+};
+export type BumpChartProps = {
+    data: BumpChartSeries[];
+    categories: string[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+type SeriesPoint = {
+    x: number;
+    y: number;
+} | null;
+type ComputedSeries = {
+    label: string;
+    ranks: (number | null | undefined)[];
+    tone: BumpChartTone;
+    points: SeriesPoint[];
+    index: number;
+    path: string;
+    alignedLength: number;
+};
+export declare class BumpChart {
+    static readonly stComponentName = "BumpChart";
+    readonly componentName = "BumpChart";
+    readonly MARGIN_LEFT: 80;
+    readonly MARGIN_RIGHT: 80;
+    readonly MARGIN_TOP: 16;
+    readonly MARGIN_BOTTOM: 32;
+    hoveredIndex: number | null;
+    data: BumpChartSeries[];
+    categories: string[];
+    label: string;
+    width?: number;
+    height?: number;
+    classInput?: string;
+    get hostClass(): string;
+    get widthValue(): number;
+    get heightValue(): number;
+    get viewBox(): string;
+    get plotWidth(): number;
+    get plotHeight(): number;
+    get catCount(): number;
+    get maxRank(): number;
+    isValidRank(r: unknown): r is number;
+    rankToY(rank: number): number;
+    catToX(ci: number): number;
+    buildBumpPath(points: SeriesPoint[]): string;
+    get series(): ComputedSeries[];
+    get rankTicks(): number[];
+    get dataValueItems(): string[];
+    lineClass(s: ComputedSeries): string;
+    dotClass(s: ComputedSeries): string;
+    lastValidPoint(s: ComputedSeries): {
+        x: number;
+        y: number;
+    } | null;
+    firstValidPoint(s: ComputedSeries): {
+        x: number;
+        y: number;
+    } | null;
+    validPointCount(s: ComputedSeries): number;
+    handleLeave(): void;
+    handlePointerMove(event: PointerEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BumpChart, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BumpChart, "st-bump-chart", never, { "data": { "alias": "data"; "required": false; }; "categories": { "alias": "categories"; "required": false; }; "label": { "alias": "label"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "classInput": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=BumpChart.d.ts.map

package/dist/BumpChart.d.ts.map

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