@ebrains/components 0.9.3-beta → 1.0.0

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)'
+    ]
+};

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

@@ -0,0 +1,76 @@
+export default {
+    title: 'Charts/Pie',
+    component: 'eds-pie',
+    argTypes: {
+        size: {
+            control: 'number',
+            description: 'Diameter of the pie chart (in pixels)'
+        },
+        slices: {
+            control: 'object',
+            description: 'Array of slice objects or JSON string representation'
+        },
+        thickness: {
+            control: { type: 'range', min: 0.5, max: 1, step: 0.01 },
+            description: 'Inner mask thickness as fraction of radius (0.5–1)'
+        },
+        display: {
+            control: 'select',
+            options: ['value', 'percent'],
+            description: 'Show raw values or percentages in slice labels'
+        },
+        legend: {
+            control: 'boolean',
+            description: 'Toggle the legend display'
+        },
+        colorScheme: {
+            control: 'select',
+            options: ['semantic', 'mono'],
+            description: 'Color scheme: semantic or mono'
+        }
+    },
+    args: {
+        size: 300,
+        slices: [
+            { id: 'a', value: 10, label: 'Series A' },
+            { id: 'b', value: 20, label: 'Series B' },
+            { id: 'c', value: 30, label: 'Series C' }
+        ],
+        thickness: 1,
+        display: 'value',
+        legend: true,
+        colorScheme: 'semantic'
+    }
+};
+export const Default = {
+    render: (args) => `
+    <div class="flex items-center justify-center">
+      <eds-pie
+        size="${args.size}"
+        thickness="${args.thickness}"
+        display="${args.display}"
+        legend="${args.legend}"
+        color-scheme="${args.colorScheme}"
+        slices='${JSON.stringify(args.slices)}'
+      ></eds-pie>
+    </div>
+  `
+};
+export const Thickness = {
+    render: (args) => `
+    <div class="flex items-center justify-center">
+      <eds-pie
+        size="${args.size}"
+        thickness="${args.thickness}"
+        display="${args.display}"
+        legend="${args.legend}"
+        color-scheme="${args.colorScheme}"
+        slices='${JSON.stringify(args.slices)}'
+      ></eds-pie>
+    </div>
+  `,
+    args: {
+        size: 200,
+        thickness: 0.5
+    }
+};

package/dist/collection/components/eds-input-elements/eds-input-select/eds-input-select.js

@@ -1,37 +1,16 @@
 import { h } from "@stencil/core";
-import { toast } from "../../../utils/toastManager";
 /**
- * A custom select input component that supports both static and dynamic options.
- *
- * Options can be provided in two formats:
- * 1. Dynamic fetch configuration:
- *    [
- *      { endpoint: "http://localhost/api/applications", value: "_id", label: "title" }
- *    ]
- * 2. Static options:
- *    [
- *      { value: "react", label: "React" },
- *      { value: "angular", label: "Angular" },
- *      { value: "vue", label: "Vue.js" },
- *      // etc.
- *    ]
- *
- * The component will automatically fetch data if a dynamic configuration is provided.
+ * `eds-input-select` is a lightweight, presentational select component.
+ * It accepts a static list of { value, label } options and emits a changeEvent when selection changes.
  */
 /**
  * @internal
  */
 export class EdsInputSelect {
     constructor() {
-        /**
-         * Event handler for the select input's change event.
-         * Emits the selected value.
-         *
-         * @param event The change event from the select input.
-         */
         this.handleChange = (event) => {
             const target = event.target;
-            this.changeEvent.emit(target.value);
+            this.edsselect.emit(target.value);
         };
         this.inputId = undefined;
         this.name = undefined;
@@ -41,71 +20,18 @@ export class EdsInputSelect {
         this.error = false;
         this.required = false;
         this.options = [];
-        this.labelKey = 'label';
-        this.valueKey = 'value';
         this.value = undefined;
-        this.dynamicOptions = [];
-        this.loading = false;
-        this.dynamicValueKey = 'value';
-        this.dynamicLabelKey = 'label';
-        this.hasFetched = false;
-    }
-    componentWillLoad() {
-        this.loadOptions();
-    }
-    /**
-     * Watches for changes in the `options` prop and loads the options accordingly.
-     *
-     * If the first object in the options array contains an "endpoint" key,
-     * the component will fetch options from the specified endpoint using the configured keys.
-     * Otherwise, it will treat the options as static.
-     *
-     * @async
-     */
-    async loadOptions() {
-        // If the first option contains an "endpoint" key, assume dynamic fetch mode.
-        if (this.options && this.options.length > 0 && this.options[0].endpoint) {
-            if (this.hasFetched) {
-                return;
-            }
-            const config = this.options[0];
-            const endpoint = config.endpoint;
-            this.dynamicValueKey = config.value || 'value';
-            this.dynamicLabelKey = config.label || 'label';
-            this.loading = true;
-            try {
-                const response = await fetch(endpoint);
-                if (!response.ok) {
-                    toast.show(`<eds-input-select> HTTP error! Status: ${response.status}`, 'error');
-                }
-                const data = await response.json();
-                // Assume the API returns an array of objects.
-                this.dynamicOptions = data;
-                this.hasFetched = true;
-            }
-            catch (error) {
-                //console.error('Error fetching dynamic options:', error);
-                toast.show(`<eds-input-select> Error fetching dynamic options ${error}`, 'error');
-            }
-            finally {
-                this.loading = false;
-            }
-        }
-        else {
-            // No dynamic configuration found, assume static options.
-            this.dynamicOptions = this.options;
-            this.dynamicValueKey = this.valueKey;
-            this.dynamicLabelKey = this.labelKey;
-        }
-    }
-    getValueByPath(obj, path) {
-        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
     }
     render() {
-        return (h("div", { key: '1fa3ad5de7ad829f49c9a12b0ac3f42e91aef37e', class: "relative", "aria-busy": this.loading ? 'true' : 'false' }, h("select", { key: '988d82773e794b131c4b1283949db0767e9d38a8', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: '62377a7228da11569a3e0d2af1e72e61fb90ef50', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => {
-            const optionValue = this.getValueByPath(option, this.dynamicValueKey);
-            return (h("option", { key: index, value: optionValue, selected: optionValue === this.value }, this.getValueByPath(option, this.dynamicLabelKey)));
-        })), h("span", { key: 'f16a73e1fd3be27c221456b359088e8daf3f2e9b', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '5654f534af4c9ae58e7e4157535a932c3d062a9c', class: "w-20 h-20", icon: "chevron-right" }))));
+        const selectId = this.inputId || this.name;
+        const placeholderText = this.placeholder || `Please select ${this.name}`;
+        const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
+        return (h("div", { key: '0e1bf5f1ebf30d675e0b4927e7812a305f58d2b9', class: "relative" }, h("select", { key: 'b92542caca12d77e3160baa84760b37bbbe172c7', id: selectId, name: this.name, class: {
+                input: true,
+                'input-error': this.error,
+                'px-4': true,
+                'py-2': true
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: 'fa911a07fd0053f6c7e5044aac3e6d0846344899', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: 'afa3c7ad3c583dec2ffc2fd5087d7695509a2a25', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '1bb2a24fc9798a7359b9b45019b1432ff2e50e70', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {
@@ -122,7 +48,7 @@ export class EdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional id for the input. If not provided, the component uses the `name` property."
+                    "text": "Optional id for the select element; defaults to name"
                 },
                 "attribute": "input-id",
                 "reflect": false
@@ -139,7 +65,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The name attribute of the select input. Also used as the fallback id."
+                    "text": "Name attribute of the select"
                 },
                 "attribute": "name",
                 "reflect": false
@@ -156,7 +82,7 @@ export class EdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Placeholder text (not used in the native select, but can be used for custom implementations)."
+                    "text": "Placeholder shown as a disabled hidden option"
                 },
                 "attribute": "placeholder",
                 "reflect": false
@@ -173,7 +99,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, the select input will be disabled."
+                    "text": "Disable the select"
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -191,7 +117,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, indicates that there is an associated message (help or error)."
+                    "text": "Show associated message (help or error)"
                 },
                 "attribute": "has-message",
                 "reflect": false,
@@ -209,7 +135,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, the select input is in an error state."
+                    "text": "Mark field as invalid"
                 },
                 "attribute": "error",
                 "reflect": false,
@@ -227,7 +153,7 @@ export class EdsInputSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, the select input is marked as required."
+                    "text": "Mark field as required"
                 },
                 "attribute": "required",
                 "reflect": false,
@@ -237,54 +163,23 @@ export class EdsInputSelect {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "{ [key: string]: any }[]",
-                    "resolved": "{ [key: string]: any; }[]",
-                    "references": {}
+                    "original": "Array<{ value: string | number; label: string }>",
+                    "resolved": "{ value: string | number; label: string; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Options can be provided in two formats:\n\n1. Dynamic fetch configuration:\n   [\n     { endpoint: \"http://localhost/api/applications\", value: \"_id\", label: \"title\" }\n   ]\n\n2. Static options:\n   [\n     { value: \"react\", label: \"React\" },\n     { value: \"angular\", label: \"Angular\" },\n     { value: \"vue\", label: \"Vue.js\" },\n     // etc.\n   ]"
+                    "text": "List of static options: { value, label }"
                 },
                 "defaultValue": "[]"
             },
-            "labelKey": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "For static options, this property defines the key used to retrieve the display label."
-                },
-                "attribute": "label-key",
-                "reflect": false,
-                "defaultValue": "'label'"
-            },
-            "valueKey": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "For static options, this property defines the key used to retrieve the option value."
-                },
-                "attribute": "value-key",
-                "reflect": false,
-                "defaultValue": "'value'"
-            },
             "value": {
                 "type": "any",
                 "mutable": false,
@@ -297,35 +192,23 @@ export class EdsInputSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The currently selected value."
+                    "text": "Currently selected value"
                 },
                 "attribute": "value",
                 "reflect": false
             }
         };
     }
-    static get states() {
-        return {
-            "dynamicOptions": {},
-            "loading": {},
-            "dynamicValueKey": {},
-            "dynamicLabelKey": {},
-            "hasFetched": {}
-        };
-    }
     static get events() {
         return [{
-                "method": "changeEvent",
-                "name": "changeEvent",
+                "method": "edsselect",
+                "name": "edsselect",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "event",
-                            "text": "changeEvent"
-                        }],
-                    "text": "Emitted when the value of the select input changes."
+                    "tags": [],
+                    "text": "Emitted when selection changes"
                 },
                 "complexType": {
                     "original": "string | number",
@@ -334,10 +217,4 @@ export class EdsInputSelect {
                 }
             }];
     }
-    static get watchers() {
-        return [{
-                "propName": "options",
-                "methodName": "loadOptions"
-            }];
-    }
 }