@ebrains/components 0.9.2-beta → 1.0.0

package/dist/collection/components/eds-charts/eds-gauge/eds-gauge.css

@@ -0,0 +1,58 @@
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.inline-block {
+  display: inline-block;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.bg-inverse {
+  background-color: var(--white);
+}
+.bg-current {
+  background-color: currentColor;
+}
+.bg-dark {
+  background-color: var(--grey-300);
+}
+.bg-darker {
+  background-color: var(--grey-400);
+}
+.bg-default {
+  background-color: var(--grey-200);
+}
+.bg-strong {
+  background-color: var(--grey-700);
+}
+.bg-strongest {
+  background-color: var(--black);
+}
+.inset-0 {
+  inset: 0rem;
+}
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.f-body-01 {
+  font-family: var(--f-body-01-fontFamily);
+  font-weight: var(--f-body-01-fontWeight);
+  font-size: var(--f-body-01-fontSize);
+  line-height: var(--f-body-01-lineHeight);
+  letter-spacing: var(--f-body-01-letterSpacing);
+}
+.text-default {
+  color: var(--black);
+}

package/dist/collection/components/eds-charts/eds-gauge/eds-gauge.js

@@ -0,0 +1,172 @@
+import { h } from "@stencil/core";
+const BACKGROUND_VARIANTS = {
+    default: '#f2f2f2',
+    dark: '#d8d8d8',
+    strong: '#666666',
+    black: '#000000'
+};
+export class EdsGauge {
+    constructor() {
+        this.size = 100;
+        this.valueMin = 0;
+        this.valueMax = 100;
+        this.value = 60;
+        this.thickness = 0.1;
+        this.variant = 'default';
+    }
+    render() {
+        // Clamp thickness to [0,1]
+        const thicknessClamped = Math.min(Math.max(this.thickness, 0.1), 0.2);
+        // Normalize value within [valueMin, valueMax]
+        const clamped = Math.min(Math.max(this.value, this.valueMin), this.valueMax);
+        const range = this.valueMax - this.valueMin || 1;
+        const ratio = (clamped - this.valueMin) / range;
+        // Use the smaller of width/height as diameter
+        const diameter = this.size;
+        const angle = ratio * 360;
+        const ringThickness = thicknessClamped * diameter;
+        const innerDiameter = diameter - ringThickness * 2;
+        const fontSize = diameter * 0.2;
+        // Determine background color for empty portion
+        const emptyColor = BACKGROUND_VARIANTS[this.variant] || BACKGROUND_VARIANTS.default;
+        const containerStyle = {
+            width: `${diameter}px`,
+            height: `${diameter}px`,
+            background: `conic-gradient(#00e766 0deg ${angle}deg, ${emptyColor} ${angle}deg 360deg)`
+        };
+        const maskStyle = {
+            width: `${innerDiameter}px`,
+            height: `${innerDiameter}px`,
+            top: `${ringThickness}px`,
+            left: `${ringThickness}px`
+        };
+        const textStyle = {
+            fontSize: `${fontSize}px`
+        };
+        return (h("div", { key: 'a549808bcd0fc64583f90f284a7b139386e71be7', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, h("div", { key: 'c3efb2d512f96e4c3a9371416c6d9bb938cab43e', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '7a6254e22240301b6716a2d6fed785196a39cdd8', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '78d8d1b7c442f75947b2813bbb569c566357c121', class: "f-body-01 text-default", style: textStyle }, clamped))));
+    }
+    static get is() { return "eds-gauge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-gauge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-gauge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Diameter of the pie chart (pixels)"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "valueMin": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value (gauge start)"
+                },
+                "attribute": "value-min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "valueMax": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value (gauge end)"
+                },
+                "attribute": "value-max",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value"
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "60"
+            },
+            "thickness": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Thickness of inner mask as fraction of radius (0.1\u20130.2). Values outside this range will be clamped."
+                },
+                "attribute": "thickness",
+                "reflect": false,
+                "defaultValue": "0.1"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'dark' | 'strong' | 'black'",
+                    "resolved": "\"black\" | \"dark\" | \"default\" | \"strong\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-charts/eds-gauge/eds-gauge.stories.js

@@ -0,0 +1,57 @@
+export default {
+    title: 'Charts/Gauge',
+    component: 'eds-gauge',
+    argTypes: {
+        size: {
+            control: 'number',
+            description: 'Diameter of the pie chart (in pixels)'
+        },
+        valueMin: {
+            control: 'number',
+            description: 'Minimum value at the start of the gauge'
+        },
+        valueMax: {
+            control: 'number',
+            description: 'Maximum value at the end of the gauge'
+        },
+        value: {
+            control: {
+                type: 'range',
+                min: 0,
+                max: 100
+            },
+            description: 'Current value displayed by the gauge (clamped to [valueMin, valueMax])'
+        },
+        thickness: {
+            control: { type: 'range', min: 0.1, max: 0.2, step: 0.01 },
+            description: 'Thickness of the ring as a fraction of the diameter (0–0.5)'
+        },
+        variant: {
+            control: 'select',
+            options: ['default', 'dark', 'strong', 'black'],
+            description: 'Color variant for the empty portion of the ring'
+        }
+    },
+    args: {
+        size: 300,
+        valueMin: 0,
+        valueMax: 100,
+        value: 60,
+        thickness: 0.15,
+        variant: 'default'
+    }
+};
+export const Default = {
+    render: (args) => `
+    <div class="flex items-center justify-center">
+      <eds-gauge
+        size="${args.size}"
+        value-min="${args.valueMin}"
+        value-max="${args.valueMax}"
+        value="${args.value}"
+        thickness="${args.thickness}"
+        variant="${args.variant}"
+      ></eds-gauge>
+    </div>
+  `
+};

package/dist/collection/components/eds-charts/eds-pie/eds-pie.css

@@ -0,0 +1,135 @@
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.inline-block {
+  display: inline-block;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.bg-inverse {
+  background-color: var(--white);
+}
+.bg-current {
+  background-color: currentColor;
+}
+.bg-dark {
+  background-color: var(--grey-300);
+}
+.bg-darker {
+  background-color: var(--grey-400);
+}
+.bg-default {
+  background-color: var(--grey-200);
+}
+.bg-strong {
+  background-color: var(--grey-700);
+}
+.bg-strongest {
+  background-color: var(--black);
+}
+.inset-0 {
+  inset: 0rem;
+}
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.f-body-01 {
+  font-family: var(--f-body-01-fontFamily);
+  font-weight: var(--f-body-01-fontWeight);
+  font-size: var(--f-body-01-fontSize);
+  line-height: var(--f-body-01-lineHeight);
+  letter-spacing: var(--f-body-01-letterSpacing);
+}
+.f-ui-01 {
+  font-family: var(--f-ui-01-fontFamily);
+  font-weight: var(--f-ui-01-fontWeight);
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+  letter-spacing: var(--f-ui-01-letterSpacing);
+}
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+.text-default {
+  color: var(--black);
+}
+.w-8 {
+  width: 0.5rem;
+}
+.h-8 {
+  height: 0.5rem;
+}
+.mr-4 {
+  margin-right: 0.25rem;
+}
+
+
+/* src/components/eds-pie/eds-pie.css */
+
+:host {
+  display: block;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.pie-chart {
+  overflow: visible;
+}
+
+.slice-label {
+  font-size: var(--font-size-chart-label);
+  font-weight: var(--font-weight-chart-label);
+  fill: var(--color-text);
+  pointer-events: none;
+}
+
+.legend {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 1rem;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  outline: none;
+}
+
+.legend-item:focus {
+  outline: 2px dashed var(--color-primary);
+}
+
+.legend-swatch {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+}
+
+.legend-label {
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+}

package/dist/collection/components/eds-charts/eds-pie/eds-pie.js

@@ -0,0 +1,229 @@
+// src/components/eds-pie/eds-pie.tsx
+import { h, Host } from "@stencil/core";
+export class EdsPie {
+    constructor() {
+        this.size = 200;
+        this.slices = [];
+        this.thickness = 1;
+        this.display = 'value';
+        this.legend = true;
+        this.colorScheme = 'semantic';
+    }
+    parseSlices() {
+        if (typeof this.slices === 'string') {
+            try {
+                return JSON.parse(this.slices);
+            }
+            catch (_a) {
+                // eslint-disable-next-line
+                console.warn('eds-pie: invalid slices JSON');
+            }
+        }
+        return Array.isArray(this.slices) ? this.slices : [];
+    }
+    polarToCartesian(cx, cy, r, angle) {
+        const rad = (angle - 90) * (Math.PI / 180);
+        return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+    }
+    describeArc(x, y, r, startAngle, endAngle) {
+        const start = this.polarToCartesian(x, y, r, endAngle);
+        const end = this.polarToCartesian(x, y, r, startAngle);
+        const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+        return [`M ${start.x} ${start.y}`, `A ${r} ${r} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`, `L ${x} ${y}`, 'Z'].join(' ');
+    }
+    render() {
+        const raw = this.parseSlices();
+        if (raw.length > EdsPie.MAX_SLICES) {
+            // eslint-disable-next-line
+            console.warn(`eds-pie: too many slices (${raw.length}), results may overlap.`);
+        }
+        const total = raw.reduce((sum, s) => sum + s.value, 0) || 1;
+        const palette = [...EdsPie.PALETTES[this.colorScheme]];
+        const sorted = [...raw].sort((a, b) => b.value - a.value);
+        let cumulative = 0;
+        const processed = sorted.map((s) => {
+            const angle = (s.value / total) * 360;
+            const start = cumulative, end = cumulative + angle;
+            cumulative = end;
+            const color = s.color || palette.shift() || 'var(--color-chart-neutral-1)';
+            return Object.assign(Object.assign({}, s), { start, end, color });
+        });
+        const diameter = this.size;
+        const radius = diameter / 2;
+        // clamp into [0.5, 1]
+        const tClamped = Math.min(Math.max(this.thickness, 0.5), 1);
+        const innerRadius = radius * (1 - tClamped);
+        const outerRadius = radius;
+        // **replace** the previous labelRadius line with this:
+        const labelRadius = (radius + innerRadius) / 2;
+        // Build ARIA description
+        const ariaLabel = processed
+            .map((s) => `${s.label}: ${this.display === 'percent' ? `${Math.round((s.value / total) * 100)}%` : s.value}`)
+            .join(', ');
+        return (h(Host, null, h("div", { class: "wrapper" }, h("svg", { width: diameter, height: diameter, role: "img", "aria-label": `Pie chart: ${ariaLabel}`, class: "pie-chart" }, h("title", null, "Pie chart"), h("g", null, processed.map((s) => (h("path", { key: s.id, d: this.describeArc(radius, radius, outerRadius, s.start, s.end), fill: s.color }))), innerRadius > 0 && h("circle", { cx: radius, cy: radius, r: innerRadius, fill: "var(--white)" }), processed.map((s) => {
+            const midAngle = s.start + (s.end - s.start) / 2;
+            const { x, y } = this.polarToCartesian(radius, radius, labelRadius, midAngle);
+            const text = this.display === 'percent' ? `${Math.round((s.value / total) * 100)}%` : String(s.value);
+            return (h("text", { key: s.id, x: x, y: y, class: "f-ui-02", "text-anchor": "middle", "alignment-baseline": "middle" }, text));
+        }))), this.legend && (h("ul", { class: "legend", role: "list" }, processed.map((s) => (h("li", { key: s.id, role: "listitem", tabindex: "0", class: "legend-item" }, h("span", { class: "legend-swatch", style: { backgroundColor: s.color } }), h("span", { class: "legend-label" }, s.label)))))))));
+    }
+    static get is() { return "eds-pie"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-pie.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-pie.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Diameter in pixels"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "200"
+            },
+            "slices": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PieSlice[] | string",
+                    "resolved": "PieSlice[] | string",
+                    "references": {
+                        "PieSlice": {
+                            "location": "global",
+                            "id": "global::PieSlice"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array or JSON string of slices"
+                },
+                "attribute": "slices",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "thickness": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Inner-radius fraction (always 0.5-1)"
+                },
+                "attribute": "thickness",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "display": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisplayMode",
+                    "resolved": "\"percent\" | \"value\"",
+                    "references": {
+                        "DisplayMode": {
+                            "location": "global",
+                            "id": "global::DisplayMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show raw value or percentage"
+                },
+                "attribute": "display",
+                "reflect": false,
+                "defaultValue": "'value'"
+            },
+            "legend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show legend"
+                },
+                "attribute": "legend",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "colorScheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'semantic' | 'mono'",
+                    "resolved": "\"mono\" | \"semantic\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color scheme: semantic, brand, or mono"
+                },
+                "attribute": "color-scheme",
+                "reflect": false,
+                "defaultValue": "'semantic'"
+            }
+        };
+    }
+}
+EdsPie.MAX_SLICES = 9;
+EdsPie.PALETTES = {
+    semantic: [
+        'var(--color-chart-accent)',
+        'var(--color-chart-strong)',
+        'var(--color-chart-accent-dark)',
+        'var(--color-chart-lighter)',
+        'var(--color-chart-accent-light)',
+        'var(--color-chart-lightest)',
+        'var(--color-chart-accent-lighter)',
+        'var(--color-chart-darker)',
+        'var(--color-chart-accent-lightest)'
+    ],
+    mono: [
+        'var(--grey-700)',
+        'var(--grey-500)',
+        'var(--grey-300)',
+        'var(--grey-100)',
+        'var(--grey-800)',
+        'var(--grey-600)',
+        'var(--grey-400)',
+        'var(--grey-200)',
+        'var(--grey-900)'
+    ]
+};