@sentropic/design-system-angular 0.36.54

package/dist/VectorFieldChart.js

@@ -0,0 +1,311 @@
+import { NgFor } from "@angular/common";
+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: 16, right: 18, bottom: 36, left: 48 };
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
+];
+export class VectorFieldChart {
+    static stComponentName = "VectorFieldChart";
+    componentName = "VectorFieldChart";
+    margin = MARGIN;
+    data = [];
+    label;
+    width;
+    height;
+    size;
+    classInput;
+    hoveredKey = null;
+    get hostClass() {
+        return ["st-vectorFieldChart", this.classInput].filter(Boolean).join(" ");
+    }
+    get resolvedWidth() {
+        return this.finitePositive(this.width, 640);
+    }
+    get resolvedHeight() {
+        return this.finitePositive(this.height, 320);
+    }
+    get resolvedSize() {
+        return this.finitePositive(this.size, 26);
+    }
+    get viewBox() {
+        return `0 0 ${this.resolvedWidth} ${this.resolvedHeight}`;
+    }
+    get validData() {
+        return (this.data ?? []).filter((datum) => Boolean(datum) &&
+            Number.isFinite(datum.x) &&
+            Number.isFinite(datum.y) &&
+            Number.isFinite(datum.length) &&
+            datum.length >= 0 &&
+            Number.isFinite(datum.direction));
+    }
+    get xTicks() {
+        const xs = this.validData.map((datum) => datum.x);
+        return niceTicks(xs.length ? Math.min(...xs) : 0, xs.length ? Math.max(...xs) : 1);
+    }
+    get yTicks() {
+        const ys = this.validData.map((datum) => datum.y);
+        return niceTicks(ys.length ? Math.min(...ys) : 0, ys.length ? Math.max(...ys) : 1);
+    }
+    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 xMin() {
+        return this.xTicks[0] ?? 0;
+    }
+    get xMax() {
+        return this.xTicks[this.xTicks.length - 1] ?? 1;
+    }
+    get yMin() {
+        return this.yTicks[0] ?? 0;
+    }
+    get yMax() {
+        return this.yTicks[this.yTicks.length - 1] ?? 1;
+    }
+    get xAxisTicks() {
+        return this.xTicks.map((value) => ({
+            value,
+            x: MARGIN.left + scaleLinear(value, this.xMin, this.xMax, 0, this.plotWidth),
+        }));
+    }
+    get yAxisTicks() {
+        return this.yTicks.map((value) => ({
+            value,
+            y: MARGIN.top + scaleLinear(value, this.yMin, this.yMax, this.plotHeight, 0),
+        }));
+    }
+    get arrows() {
+        const maxLength = this.validData.reduce((max, datum) => (datum.length > max ? datum.length : max), 0);
+        const max = maxLength > 0 ? maxLength : 1;
+        return this.validData.map((datum, index) => {
+            const cx = MARGIN.left + scaleLinear(datum.x, this.xMin, this.xMax, 0, this.plotWidth);
+            const cy = MARGIN.top + scaleLinear(datum.y, this.yMin, this.yMax, this.plotHeight, 0);
+            const len = (datum.length / max) * this.resolvedSize;
+            const rad = (datum.direction * Math.PI) / 180;
+            const dx = Math.cos(rad) * len;
+            const dy = -Math.sin(rad) * len;
+            const x1 = cx - dx / 2;
+            const y1 = cy - dy / 2;
+            const x2 = cx + dx / 2;
+            const y2 = cy + dy / 2;
+            const head = Math.min(Math.max(len * 0.28, 3), 8);
+            const headAngle = (28 * Math.PI) / 180;
+            const baseAngle = Math.atan2(y2 - y1, x2 - x1);
+            const bin = Math.min(Math.floor((datum.length / max) * TONES.length), TONES.length - 1);
+            return {
+                key: `${index}`,
+                datum,
+                cx,
+                cy,
+                x1,
+                y1,
+                x2,
+                y2,
+                hx1: x2 - head * Math.cos(baseAngle - headAngle),
+                hy1: y2 - head * Math.sin(baseAngle - headAngle),
+                hx2: x2 - head * Math.cos(baseAngle + headAngle),
+                hy2: y2 - head * Math.sin(baseAngle + headAngle),
+                tone: TONES[Math.max(0, bin)],
+            };
+        });
+    }
+    get dataValueItems() {
+        return this.validData.map((datum) => `x ${datum.x}, y ${datum.y} - |v| ${formatTick(datum.length)} @ ${formatTick(datum.direction)}deg`);
+    }
+    get hoveredArrow() {
+        return this.hoveredKey === null ? null : this.arrows.find((arrow) => arrow.key === this.hoveredKey) ?? null;
+    }
+    get tooltipLeft() {
+        const arrow = this.hoveredArrow;
+        return arrow ? `${(arrow.cx / this.resolvedWidth) * 100}%` : "0";
+    }
+    get tooltipTop() {
+        const arrow = this.hoveredArrow;
+        return arrow ? `${(arrow.cy / this.resolvedHeight) * 100}%` : "0";
+    }
+    get tooltipLabel() {
+        const arrow = this.hoveredArrow;
+        return arrow ? `x ${arrow.datum.x} - y ${arrow.datum.y}` : "";
+    }
+    get tooltipValue() {
+        const arrow = this.hoveredArrow;
+        return arrow ? `|v| ${formatTick(arrow.datum.length)} @ ${formatTick(arrow.datum.direction)}deg` : "";
+    }
+    handlePointerMove(event) {
+        const target = event.target;
+        this.hoveredKey = target instanceof Element ? target.getAttribute("data-chart-key") : null;
+    }
+    handleLeave() {
+        this.hoveredKey = null;
+    }
+    arrowClass(arrow) {
+        return classNames("st-vectorFieldChart__arrow", `st-vectorFieldChart__arrow--${arrow.tone}`, this.hoveredKey !== null && this.hoveredKey !== arrow.key ? "st-vectorFieldChart__arrow--dim" : undefined);
+    }
+    format(value) {
+        return formatTick(value);
+    }
+    finitePositive(value, fallback) {
+        return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VectorFieldChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: VectorFieldChart, isStandalone: true, selector: "st-vector-field-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-vectorFieldChart__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"
+        >
+          <ng-container *ngFor="let tick of yAxisTicks">
+            <line
+              class="st-vectorFieldChart__grid"
+              [attr.x1]="margin.left"
+              [attr.x2]="resolvedWidth - margin.right"
+              [attr.y1]="tick.y"
+              [attr.y2]="tick.y"
+            ></line>
+            <text
+              class="st-vectorFieldChart__tick"
+              [attr.x]="margin.left - 6"
+              [attr.y]="tick.y"
+              text-anchor="end"
+              dominant-baseline="middle"
+            >{{ format(tick.value) }}</text>
+          </ng-container>
+
+          <text
+            *ngFor="let tick of xAxisTicks"
+            class="st-vectorFieldChart__tick"
+            [attr.x]="tick.x"
+            [attr.y]="resolvedHeight - margin.bottom + 16"
+            text-anchor="middle"
+          >{{ format(tick.value) }}</text>
+
+          <line class="st-vectorFieldChart__axis" [attr.x1]="margin.left" [attr.x2]="margin.left" [attr.y1]="margin.top" [attr.y2]="resolvedHeight - margin.bottom"></line>
+          <line class="st-vectorFieldChart__axis" [attr.x1]="margin.left" [attr.x2]="resolvedWidth - margin.right" [attr.y1]="resolvedHeight - margin.bottom" [attr.y2]="resolvedHeight - margin.bottom"></line>
+
+          <g *ngFor="let arrow of arrows" [attr.class]="arrowClass(arrow)" [attr.data-chart-key]="arrow.key">
+            <line class="st-vectorFieldChart__shaft" [attr.x1]="arrow.x1" [attr.y1]="arrow.y1" [attr.x2]="arrow.x2" [attr.y2]="arrow.y2" [attr.data-chart-key]="arrow.key"></line>
+            <line class="st-vectorFieldChart__head" [attr.x1]="arrow.x2" [attr.y1]="arrow.y2" [attr.x2]="arrow.hx1" [attr.y2]="arrow.hy1"></line>
+            <line class="st-vectorFieldChart__head" [attr.x1]="arrow.x2" [attr.y1]="arrow.y2" [attr.x2]="arrow.hx2" [attr.y2]="arrow.hy2"></line>
+          </g>
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="(label ?? 'vector field') + ' data'">
+        <li *ngFor="let item of dataValueItems">{{ item }}</li>
+      </ul>
+
+      <div class="st-vectorFieldChart__tooltip" role="presentation" [style.display]="hoveredArrow ? 'inline-flex' : 'none'" [style.left]="tooltipLeft" [style.top]="tooltipTop">
+        <span class="st-vectorFieldChart__tooltipLabel">{{ tooltipLabel }}</span>
+        <span class="st-vectorFieldChart__tooltipValue">{{ tooltipValue }}</span>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VectorFieldChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-vector-field-chart",
+                    standalone: true,
+                    imports: [NgFor],
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-vectorFieldChart__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"
+        >
+          <ng-container *ngFor="let tick of yAxisTicks">
+            <line
+              class="st-vectorFieldChart__grid"
+              [attr.x1]="margin.left"
+              [attr.x2]="resolvedWidth - margin.right"
+              [attr.y1]="tick.y"
+              [attr.y2]="tick.y"
+            ></line>
+            <text
+              class="st-vectorFieldChart__tick"
+              [attr.x]="margin.left - 6"
+              [attr.y]="tick.y"
+              text-anchor="end"
+              dominant-baseline="middle"
+            >{{ format(tick.value) }}</text>
+          </ng-container>
+
+          <text
+            *ngFor="let tick of xAxisTicks"
+            class="st-vectorFieldChart__tick"
+            [attr.x]="tick.x"
+            [attr.y]="resolvedHeight - margin.bottom + 16"
+            text-anchor="middle"
+          >{{ format(tick.value) }}</text>
+
+          <line class="st-vectorFieldChart__axis" [attr.x1]="margin.left" [attr.x2]="margin.left" [attr.y1]="margin.top" [attr.y2]="resolvedHeight - margin.bottom"></line>
+          <line class="st-vectorFieldChart__axis" [attr.x1]="margin.left" [attr.x2]="resolvedWidth - margin.right" [attr.y1]="resolvedHeight - margin.bottom" [attr.y2]="resolvedHeight - margin.bottom"></line>
+
+          <g *ngFor="let arrow of arrows" [attr.class]="arrowClass(arrow)" [attr.data-chart-key]="arrow.key">
+            <line class="st-vectorFieldChart__shaft" [attr.x1]="arrow.x1" [attr.y1]="arrow.y1" [attr.x2]="arrow.x2" [attr.y2]="arrow.y2" [attr.data-chart-key]="arrow.key"></line>
+            <line class="st-vectorFieldChart__head" [attr.x1]="arrow.x2" [attr.y1]="arrow.y2" [attr.x2]="arrow.hx1" [attr.y2]="arrow.hy1"></line>
+            <line class="st-vectorFieldChart__head" [attr.x1]="arrow.x2" [attr.y1]="arrow.y2" [attr.x2]="arrow.hx2" [attr.y2]="arrow.hy2"></line>
+          </g>
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="(label ?? 'vector field') + ' data'">
+        <li *ngFor="let item of dataValueItems">{{ item }}</li>
+      </ul>
+
+      <div class="st-vectorFieldChart__tooltip" role="presentation" [style.display]="hoveredArrow ? 'inline-flex' : 'none'" [style.left]="tooltipLeft" [style.top]="tooltipTop">
+        <span class="st-vectorFieldChart__tooltipLabel">{{ tooltipLabel }}</span>
+        <span class="st-vectorFieldChart__tooltipValue">{{ tooltipValue }}</span>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], size: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=VectorFieldChart.js.map

package/dist/VectorFieldChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorFieldChart.js","sourceRoot":"","sources":["../src/VectorFieldChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;;AA4CrE,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAW,CAAC;AACrE,MAAM,KAAK,GAA2B;IACpC,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;CACZ,CAAC;AAsEF,MAAM,OAAO,gBAAgB;IAC3B,MAAM,CAAU,eAAe,GAAG,kBAAkB,CAAC;IAC5C,aAAa,GAAG,kBAAkB,CAAC;IACnC,MAAM,GAAG,MAAM,CAAC;IAEd,IAAI,GAA4B,EAAE,CAAC;IACnC,KAAK,CAAU;IACf,KAAK,CAAU;IACf,MAAM,CAAU;IAChB,IAAI,CAAU;IACP,UAAU,CAAU;IAEtC,UAAU,GAAkB,IAAI,CAAC;IAEjC,IAAI,SAAS;QACX,OAAO,CAAC,qBAAqB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/C,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,OAAO;QACT,OAAO,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5D,CAAC;IAED,IAAI,SAAS;QACX,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,MAAM,CAC7B,CAAC,KAAK,EAAE,EAAE,CACR,OAAO,CAAC,KAAK,CAAC;YACd,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YACxB,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YACxB,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;YAC7B,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CACnC,CAAC;IACJ,CAAC;IAED,IAAI,MAAM;QACR,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAClD,OAAO,SAAS,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,CAAC;IAED,IAAI,MAAM;QACR,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAClD,OAAO,SAAS,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACtE,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACvE,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACjC,KAAK;YACL,CAAC,EAAE,MAAM,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;SAC7E,CAAC,CAAC,CAAC;IACN,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACjC,KAAK;YACL,CAAC,EAAE,MAAM,CAAC,GAAG,GAAG,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;SAC7E,CAAC,CAAC,CAAC;IACN,CAAC;IAED,IAAI,MAAM;QACR,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACtG,MAAM,GAAG,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACzC,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YACvF,MAAM,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;YACvF,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC;YACrD,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;YAC9C,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;YAC/B,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;YAChC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACvB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACvB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACvB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACvB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAClD,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;YACvC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;YAC/C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACxF,OAAO;gBACL,GAAG,EAAE,GAAG,KAAK,EAAE;gBACf,KAAK;gBACL,EAAE;gBACF,EAAE;gBACF,EAAE;gBACF,EAAE;gBACF,EAAE;gBACF,EAAE;gBACF,GAAG,EAAE,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;gBAChD,GAAG,EAAE,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;gBAChD,GAAG,EAAE,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;gBAChD,GAAG,EAAE,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;gBAChD,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;aAC9B,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,UAAU,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC3I,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC;IAC9G,CAAC;IAED,IAAI,WAAW;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,OAAO,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACnE,CAAC;IAED,IAAI,UAAU;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,OAAO,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IACpE,CAAC;IAED,IAAI,YAAY;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,CAAC;IAED,IAAI,YAAY;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,OAAO,KAAK,CAAC,CAAC,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACxG,CAAC;IAED,iBAAiB,CAAC,KAAmB;QACnC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,UAAU,GAAG,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC7F,CAAC;IAED,WAAW;QACT,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC;IAED,UAAU,CAAC,KAAkB;QAC3B,OAAO,UAAU,CACf,4BAA4B,EAC5B,+BAA+B,KAAK,CAAC,IAAI,EAAE,EAC3C,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,SAAS,CAC1G,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,KAAa;QAClB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAEO,cAAc,CAAC,KAAyB,EAAE,QAAgB;QAChE,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC7F,CAAC;wGArLU,gBAAgB;4FAAhB,gBAAgB,gNAhEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DT,4DA/DS,KAAK;;4FAiEJ,gBAAgB;kBApE5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,KAAK,CAAC;oBAChB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DT;iBACF;;sBAME,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;;sBACP,OAAO;uBAAC,OAAO"}

package/dist/VennChart.d.ts

@@ -0,0 +1,58 @@
+import * as i0 from "@angular/core";
+export type VennChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
+export type VennChartArea = {
+    sets: string[];
+    value: number;
+};
+export type VennChartProps = {
+    data: VennChartArea[];
+    label: string;
+    width?: number;
+    height?: number;
+    class?: string;
+};
+type VennCircle = {
+    name: string;
+    tone: VennChartTone;
+    cx: number;
+    cy: number;
+    r: number;
+    total: number;
+    labelX: number;
+    labelY: number;
+    anchor: "start" | "middle" | "end";
+};
+type VennRegion = {
+    sets: string[];
+    value: number;
+    x: number;
+    y: number;
+};
+type VennLayout = {
+    circles: VennCircle[];
+    regions: VennRegion[];
+    items: string[];
+};
+export declare class VennChart {
+    static readonly stComponentName = "VennChart";
+    readonly componentName = "VennChart";
+    hoveredIndex: number | null;
+    data: VennChartArea[];
+    label: string;
+    width?: number;
+    height?: number;
+    classInput?: string;
+    get hostClass(): string;
+    get widthValue(): number;
+    get heightValue(): number;
+    get viewBox(): string;
+    get layout(): VennLayout;
+    circleClass(i: number): string;
+    get tooltipLeft(): number;
+    get tooltipTop(): number;
+    handleVisualPointerMove(event: PointerEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VennChart, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VennChart, "st-venn-chart", never, { "data": { "alias": "data"; "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=VennChart.d.ts.map

package/dist/VennChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VennChart.d.ts","sourceRoot":"","sources":["../src/VennChart.ts"],"names":[],"mappings":";AAIA,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,aAAa,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAgGF,qBAwEa,SAAS;IACpB,MAAM,CAAC,QAAQ,CAAC,eAAe,eAAe;IAC9C,QAAQ,CAAC,aAAa,eAAe;IAErC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExB,IAAI,EAAE,aAAa,EAAE,CAAM;IAC3B,KAAK,SAAM;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IACT,UAAU,CAAC,EAAE,MAAM,CAAC;IAEtC,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,UAAU,IAAI,MAAM,CAA8B;IACtD,IAAI,WAAW,IAAI,MAAM,CAA+B;IACxD,IAAI,OAAO,IAAI,MAAM,CAAyD;IAE9E,IAAI,MAAM,IAAI,UAAU,CAEvB;IAED,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM;IAS9B,IAAI,WAAW,IAAI,MAAM,CAGxB;IAED,IAAI,UAAU,IAAI,MAAM,CAGvB;IAED,uBAAuB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI;yCA3CvC,SAAS;2CAAT,SAAS;CAgDrB"}

package/dist/VennChart.js

@@ -0,0 +1,288 @@
+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",
+];
+function safeValue(value) {
+    return Number.isFinite(value) && value > 0 ? value : 0;
+}
+function computeVennLayout(data, width, height) {
+    const areas = data
+        .map((d) => ({ sets: Array.isArray(d.sets) ? d.sets.filter((s) => typeof s === "string") : [], value: safeValue(d.value) }))
+        .filter((d) => d.sets.length > 0 && d.value > 0);
+    const order = [];
+    for (const a of areas) {
+        for (const s of a.sets)
+            if (!order.includes(s))
+                order.push(s);
+    }
+    const names = order.slice(0, 3);
+    if (names.length === 0) {
+        return { circles: [], regions: [], items: [] };
+    }
+    const totals = new Map();
+    for (const name of names) {
+        let sum = 0;
+        for (const a of areas)
+            if (a.sets.includes(name))
+                sum += a.value;
+        totals.set(name, sum);
+    }
+    const cx = width / 2;
+    const cy = height / 2;
+    const span = Math.min(width, height);
+    const rMax = span * 0.3;
+    const rMin = span * 0.2;
+    const roots = names.map((n) => Math.sqrt(totals.get(n) ?? 0));
+    const rootMin = Math.min(...roots);
+    const rootMax = Math.max(...roots);
+    const rootSpan = rootMax - rootMin;
+    const radiusFor = (root) => (rootSpan > 0 ? rMin + ((root - rootMin) / rootSpan) * (rMax - rMin) : rMax);
+    let centers;
+    if (names.length === 1) {
+        centers = [{ cx, cy }];
+    }
+    else if (names.length === 2) {
+        const off = span * 0.16;
+        centers = [
+            { cx: cx - off, cy },
+            { cx: cx + off, cy },
+        ];
+    }
+    else {
+        const off = span * 0.17;
+        centers = [
+            { cx: cx - off, cy: cy - off * 0.6 },
+            { cx: cx + off, cy: cy - off * 0.6 },
+            { cx, cy: cy + off * 0.85 },
+        ];
+    }
+    const circles = names.map((name, i) => {
+        const r = radiusFor(roots[i]);
+        const c = centers[i];
+        const dx = c.cx - cx;
+        const dy = c.cy - cy;
+        const len = Math.hypot(dx, dy) || 1;
+        const ux = names.length === 1 ? 0 : dx / len;
+        const uy = names.length === 1 ? -1 : dy / len;
+        const labelX = c.cx + ux * (r + 6);
+        const labelY = c.cy + uy * (r + 6);
+        const anchor = ux > 0.3 ? "start" : ux < -0.3 ? "end" : "middle";
+        return {
+            name,
+            tone: TONES[i % TONES.length],
+            cx: c.cx,
+            cy: c.cy,
+            r,
+            total: totals.get(name) ?? 0,
+            labelX,
+            labelY,
+            anchor,
+        };
+    });
+    const centerByName = new Map(circles.map((c) => [c.name, c]));
+    const regions = areas
+        .filter((a) => a.sets.length >= 2)
+        .map((a) => {
+        const pts = a.sets.map((s) => centerByName.get(s)).filter((c) => c !== undefined);
+        const px = pts.length > 0 ? pts.reduce((s, c) => s + c.cx, 0) / pts.length : cx;
+        const py = pts.length > 0 ? pts.reduce((s, c) => s + c.cy, 0) / pts.length : cy;
+        return { sets: a.sets, value: a.value, x: px, y: py };
+    });
+    const items = areas.map((a) => `${a.sets.join(" ∩ ")}: ${a.value}`);
+    return { circles, regions, items };
+}
+export class VennChart {
+    static stComponentName = "VennChart";
+    componentName = "VennChart";
+    hoveredIndex = null;
+    data = [];
+    label = "";
+    width;
+    height;
+    classInput;
+    get hostClass() {
+        return classNames("st-vennChart", this.classInput);
+    }
+    get widthValue() { return this.width ?? 420; }
+    get heightValue() { return this.height ?? 360; }
+    get viewBox() { return `0 0 ${this.widthValue} ${this.heightValue}`; }
+    get layout() {
+        return computeVennLayout(this.data, this.widthValue, this.heightValue);
+    }
+    circleClass(i) {
+        const circle = this.layout.circles[i];
+        return classNames("st-vennChart__circle", circle ? `st-vennChart__circle--${circle.tone}` : "", this.hoveredIndex !== null && this.hoveredIndex !== i && "st-vennChart__circle--dim");
+    }
+    get tooltipLeft() {
+        const c = this.hoveredIndex !== null ? this.layout.circles[this.hoveredIndex] : undefined;
+        return c ? (c.cx / this.widthValue) * 100 : 0;
+    }
+    get tooltipTop() {
+        const c = this.hoveredIndex !== null ? this.layout.circles[this.hoveredIndex] : undefined;
+        return c ? (c.cy / this.heightValue) * 100 : 0;
+    }
+    handleVisualPointerMove(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: VennChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: VennChart, isStandalone: true, selector: "st-venn-chart", inputs: { data: "data", label: "label", width: "width", height: "height", classInput: ["class", "classInput"] }, ngImport: i0, template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-vennChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handleVisualPointerMove($event)"
+        (pointerleave)="hoveredIndex = null"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @for (circle of layout.circles; track circle.name; let i = $index) {
+            <circle
+              [class]="circleClass(i)"
+              [attr.cx]="circle.cx"
+              [attr.cy]="circle.cy"
+              [attr.r]="circle.r"
+              [attr.data-chart-index]="i"
+            ></circle>
+          }
+
+          @for (region of layout.regions; track region.sets.join('|')) {
+            <text
+              class="st-vennChart__value"
+              [attr.x]="region.x"
+              [attr.y]="region.y"
+              text-anchor="middle"
+              dominant-baseline="middle"
+            >{{ region.value }}</text>
+          }
+
+          @for (circle of layout.circles; track circle.name) {
+            <text
+              class="st-vennChart__label"
+              [attr.x]="circle.labelX"
+              [attr.y]="circle.labelY"
+              [attr.text-anchor]="circle.anchor"
+              dominant-baseline="middle"
+            >{{ circle.name }}</text>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of layout.items; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredIndex !== null && layout.circles[hoveredIndex]) {
+        <div
+          class="st-vennChart__tooltip"
+          role="presentation"
+          [style.left]="tooltipLeft + '%'"
+          [style.top]="tooltipTop + '%'"
+        >
+          <span class="st-vennChart__tooltipLabel">{{ layout.circles[hoveredIndex].name }}</span>
+          <span class="st-vennChart__tooltipValue">{{ layout.circles[hoveredIndex].total }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: VennChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "st-venn-chart",
+                    standalone: true,
+                    template: `
+    <div [attr.data-st-component]="componentName" [class]="hostClass">
+      <div
+        class="st-vennChart__visual"
+        role="img"
+        [attr.aria-label]="label"
+        (pointermove)="handleVisualPointerMove($event)"
+        (pointerleave)="hoveredIndex = null"
+      >
+        <svg
+          [attr.viewBox]="viewBox"
+          preserveAspectRatio="xMidYMid meet"
+          width="100%"
+          height="100%"
+          focusable="false"
+          aria-hidden="true"
+        >
+          @for (circle of layout.circles; track circle.name; let i = $index) {
+            <circle
+              [class]="circleClass(i)"
+              [attr.cx]="circle.cx"
+              [attr.cy]="circle.cy"
+              [attr.r]="circle.r"
+              [attr.data-chart-index]="i"
+            ></circle>
+          }
+
+          @for (region of layout.regions; track region.sets.join('|')) {
+            <text
+              class="st-vennChart__value"
+              [attr.x]="region.x"
+              [attr.y]="region.y"
+              text-anchor="middle"
+              dominant-baseline="middle"
+            >{{ region.value }}</text>
+          }
+
+          @for (circle of layout.circles; track circle.name) {
+            <text
+              class="st-vennChart__label"
+              [attr.x]="circle.labelX"
+              [attr.y]="circle.labelY"
+              [attr.text-anchor]="circle.anchor"
+              dominant-baseline="middle"
+            >{{ circle.name }}</text>
+          }
+        </svg>
+      </div>
+
+      <ul class="st-chartDataList" [attr.aria-label]="'Data values for ' + label">
+        @for (item of layout.items; track item) {
+          <li>{{ item }}</li>
+        }
+      </ul>
+
+      @if (hoveredIndex !== null && layout.circles[hoveredIndex]) {
+        <div
+          class="st-vennChart__tooltip"
+          role="presentation"
+          [style.left]="tooltipLeft + '%'"
+          [style.top]="tooltipTop + '%'"
+        >
+          <span class="st-vennChart__tooltipLabel">{{ layout.circles[hoveredIndex].name }}</span>
+          <span class="st-vennChart__tooltipValue">{{ layout.circles[hoveredIndex].total }}</span>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: NgInput
+            }], label: [{
+                type: NgInput
+            }], width: [{
+                type: NgInput
+            }], height: [{
+                type: NgInput
+            }], classInput: [{
+                type: NgInput,
+                args: ["class"]
+            }] } });
+//# sourceMappingURL=VennChart.js.map