@schukai/monster 4.10.4 → 4.11.1

package/source/components/content/stylesheet/camera-capture.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {CameraCaptureStyleSheet}
+export { CameraCaptureStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {CameraCaptureStyleSheet}
 const CameraCaptureStyleSheet = new CSSStyleSheet();
 
 try {
-  CameraCaptureStyleSheet.insertRule(`
+	CameraCaptureStyleSheet.insertRule(
+		`
 @layer cameracapture { 
 [data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-primary-4);display:flex;flex-direction:column;justify-content:flex-end;margin:0;padding:0;position:relative}[data-monster-role=full-screen]{position:absolute;right:1rem;top:1rem;z-index:var(--monster-z-index-dropdown)}.camera-not-supported-text{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:1.2rem;font-weight:600;margin:0;padding:1rem;text-align:center}canvas,video{display:block;max-height:100%;max-width:100%}monster-button::part(button){border:none} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

package/source/components/data/metric-graph.mjs

@@ -0,0 +1,473 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {
+	CustomElement,
+	updaterTransformerMethodsSymbol,
+} from "../../dom/customelement.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { isFunction, isString } from "../../types/is.mjs";
+import { MetricGraphStyleSheet } from "./stylesheet/metric-graph.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+
+export { MetricGraph };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+export const metricGraphControlElementSymbol = Symbol(
+	"metricGraphControlElement",
+);
+
+/**
+ * A MetricGraph
+ *
+ * @fragments /fragments/data/metric-graph/
+ *
+ * @example /examples/data/metric-graph-simple
+ *
+ * @since 4.11.0
+ * @copyright schukai GmbH
+ * @summary A beautiful MetricGraph that can make your life easier and also looks good.
+ */
+class MetricGraph extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/data/metric-graph@@instance");
+	}
+
+	/**
+	 * @return {Components.Data.Metric
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		return this;
+	}
+
+	/**
+	 * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {string} curve The curve of the graph (step, smooth, bubble, bar, area, dot, lollipop, line)
+	 * @property {Object} values Value definitions
+	 * @property {number} values.value The value of the metric
+	 * @property {number} values.change The change of the metric
+	 * @property {number} values.secondary The secondary value of the metric
+	 * @property {Array} values.points The points of the metric
+	 * @property {Object} labels Label definitions
+	 * @property {string} labels.title Title of the metric
+	 * @property {string} labels.subtext Subtext of the metric
+	 * @property {Object} classes CSS classes
+	 * @property {string} classes.dot CSS class for the dot
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			graphType: "linear",
+
+			values: {
+				main: null,
+				change: null,
+				secondary: null,
+				points: [2, 2, 2, -30, 30, 5, 4, 4, 3, 3, 2, 2, 1, 1, 1, 1],
+			},
+			labels: {
+				title: null,
+				subtext: null,
+			},
+			classes: {
+				dot: "monster-theme-primary-1",
+			},
+
+			aria: {
+				description: null,
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @returns {{tosparkline: ((function(*): (string|string))|*)}}
+	 */
+	[updaterTransformerMethodsSymbol]() {
+		return {
+			toGraph: (value) => {
+				if (isString(value)) {
+					value = value.split(",").map((v) => {
+						return parseFloat(v);
+					});
+				}
+
+				const graphType = this.getOption("graphType");
+
+				if (!Array.isArray(value) || value.length === 0) return "";
+				switch (graphType.toLowerCase()) {
+					case "step":
+						return renderStepGraph.call(this, value);
+					case "smooth":
+						return renderSmoothGraph.call(this, value);
+					case "bubble":
+						return renderBubbleGraph.call(this, value);
+					case "bar":
+						return renderBarGraph.call(this, value);
+					case "area":
+						return renderAreaGraph.call(this, value);
+					case "dot":
+						return renderDotGraph.call(this, value);
+					case "lollipop":
+						return renderLollipopGraph.call(this, value);
+					case "line":
+					default:
+						return renderLineGraph.call(this, value);
+				}
+			},
+		};
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-metric-graph";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [MetricGraphStyleSheet];
+	}
+}
+
+function renderAreaGraph(values, options = {}) {
+	const {
+		width = 100,
+		height = 30,
+		stroke = "currentColor",
+		strokeWidth = 2,
+		fill = "rgba(0, 0, 0, 0.1)",
+	} = options;
+
+	if (!Array.isArray(values) || values.length === 0) return "";
+
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const range = max - min || 1;
+
+	const step = width / (values.length - 1);
+	const points = values.map((v, i) => {
+		const x = i * step;
+		const y = height - ((v - min) / range) * height;
+		return { x, y };
+	});
+
+	let d = `M ${points[0].x},${height} L ${points[0].x},${points[0].y}`;
+	for (let i = 1; i < points.length; i++) {
+		d += ` L ${points[i].x},${points[i].y}`;
+	}
+	d += ` L ${points[points.length - 1].x},${height} Z`;
+
+	return `<path d="${d}" stroke="${stroke}" stroke-width="${strokeWidth}" fill="${fill}" stroke-linejoin="round" />`;
+}
+
+function renderBubbleGraph(values, options = {}) {
+	const {
+		width = 100,
+		height = 30,
+		minRadius = 2,
+		maxRadius = 8,
+		lightRange = [0.3, 1.0], // fill-opacity von 0.3 bis 1.0
+		align = "middle",
+	} = options;
+
+	if (!Array.isArray(values) || values.length === 0) return "";
+
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const range = max - min || 1;
+
+	const stepX = width / values.length;
+
+	let centerY;
+	switch (align) {
+		case "top":
+			centerY = maxRadius;
+			break;
+		case "bottom":
+			centerY = height - maxRadius;
+			break;
+		case "middle":
+		default:
+			centerY = height / 2;
+	}
+
+	return values
+		.map((v, i) => {
+			const x = i * stepX + stepX / 2;
+			const norm = (v - min) / range;
+			const r = minRadius + norm * (maxRadius - minRadius);
+			const opacity = lightRange[0] + norm * (lightRange[1] - lightRange[0]);
+
+			return `<circle cx="${x.toFixed(2)}" cy="${centerY.toFixed(2)}" r="${r.toFixed(2)}" fill="currentColor" fill-opacity="${opacity.toFixed(2)}" />`;
+		})
+		.join("");
+}
+
+function renderLollipopGraph(values, options = {}) {
+	const {
+		width = 100,
+		height = 30,
+		color = "currentColor",
+		radius = 2,
+		strokeWidth = 1,
+	} = options;
+
+	if (!Array.isArray(values) || values.length === 0) return "";
+
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const range = max - min || 1;
+
+	const step = width / (values.length - 1);
+
+	return values
+		.map((v, i) => {
+			const x = i * step;
+			const y = height - ((v - min) / range) * height;
+			const line = `<line x1="${x}" y1="${height}" x2="${x}" y2="${y}" stroke="${color}" stroke-width="${strokeWidth}" />`;
+			const circle = `<circle cx="${x}" cy="${y}" r="${radius}" fill="${color}" />`;
+			return line + circle;
+		})
+		.join("");
+}
+
+function renderDotGraph(values, options = {}) {
+	const {
+		width = 100,
+		height = 30,
+		radius = 2,
+		color = "currentColor",
+	} = options;
+
+	if (!Array.isArray(values) || values.length === 0) return "";
+
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const range = max - min || 1;
+
+	const step = width / (values.length - 1);
+
+	return values
+		.map((v, i) => {
+			const x = i * step;
+			const y = height - ((v - min) / range) * height;
+			return `<circle cx="${x.toFixed(2)}" cy="${y.toFixed(2)}" r="${radius}" fill="${color}" />`;
+		})
+		.join("");
+}
+
+function renderBarGraph(values, options = {}) {
+	const {
+		width = 100,
+		height = 30,
+		barColor = "currentColor",
+		barSpacing = 1,
+	} = options;
+
+	if (!Array.isArray(values) || values.length === 0) return "";
+
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const range = max - min || 1;
+
+	const barWidth = width / values.length - barSpacing;
+
+	return values
+		.map((v, i) => {
+			const x = i * (barWidth + barSpacing);
+			const barHeight = ((v - min) / range) * height;
+			const y = height - barHeight;
+			return `<rect x="${x.toFixed(2)}" y="${y.toFixed(2)}" width="${barWidth.toFixed(2)}" height="${barHeight.toFixed(2)}" fill="${barColor}" />`;
+		})
+		.join("");
+}
+
+function renderLineGraph(values) {
+	if (!Array.isArray(values) || values.length === 0) return "";
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const range = max - min || 1;
+
+	const step = 100 / (values.length - 1);
+	const points = values.map((v, i) => {
+		const x = i * step;
+		const y = 30 - ((v - min) / range) * 30;
+		return `${x},${y}`;
+	});
+
+	return `<polyline points="${points.join(" ")}" stroke="currentColor" stroke-width="2" fill="none" />`;
+}
+
+function renderSmoothGraph(values, options = {}) {
+	const {
+		width = 100,
+		height = 30,
+		stroke = "currentColor",
+		strokeWidth = 2,
+		fill = "none",
+	} = options;
+
+	if (!Array.isArray(values) || values.length === 0) return "";
+
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const range = max - min || 1;
+
+	const stepX = width / (values.length - 1);
+
+	const points = values.map((v, i) => {
+		const x = i * stepX;
+		const y = height - ((v - min) / range) * height;
+		return { x, y };
+	});
+
+	// Bézier-Path erzeugen
+	let d = `M ${points[0].x},${points[0].y}`;
+	for (let i = 1; i < points.length; i++) {
+		const prev = points[i - 1];
+		const curr = points[i];
+		const cx = (prev.x + curr.x) / 2;
+		d += ` Q ${prev.x},${prev.y} ${cx},${(prev.y + curr.y) / 2}`;
+	}
+	d += ` T ${points[points.length - 1].x},${points[points.length - 1].y}`;
+
+	return `<path d="${d}" stroke="${stroke}" stroke-width="${strokeWidth}" fill="${fill}" stroke-linecap="round" stroke-linejoin="round" />`;
+}
+
+function renderStepGraph(values, options = {}) {
+	const {
+		width = 100,
+		height = 30,
+		stroke = "currentColor",
+		strokeWidth = 2,
+		fill = "none",
+	} = options;
+
+	if (!Array.isArray(values) || values.length === 0) return "";
+
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const range = max - min || 1;
+
+	const stepX = width / (values.length - 1);
+
+	const points = values.map((v, i) => {
+		const x = i * stepX;
+		const y = height - ((v - min) / range) * height;
+		return { x, y };
+	});
+
+	let d = `M ${points[0].x},${points[0].y}`;
+	for (let i = 1; i < points.length; i++) {
+		const prev = points[i - 1];
+		const curr = points[i];
+		d += ` H ${curr.x} V ${curr.y}`;
+	}
+
+	return `<path d="${d}" stroke="${stroke}" stroke-width="${strokeWidth}" fill="${fill}" stroke-linecap="round" stroke-linejoin="round" />`;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+	this[metricGraphControlElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control"
+             part="control"
+             role="group"
+             aria-labelledby="metric-title"
+             aria-describedby="metric-value metric-subtext metric-graph-desc">
+
+            <div class="metric-card" part="card">
+                <div class="metric-header" part="header">
+                    <span data-monster-attributes="class path:classes.dot | prefix:metric-icon\\ :"></span>
+                    <span id="metric-title" class="metric-title"
+                          data-monster-replace="path:labels.title | ??:—"></span>
+                </div>
+
+                <div id="metric-value" class="metric-value"
+                     data-monster-replace="path:values.main"
+                     part="metric-value"
+                     aria-live="polite">—</div>
+
+                <div id="metric-subtext" class="metric-subtext" part="metric-subtext">
+                    <span data-monster-replace="path:labels.subtext | ??:— ">—</span><br>
+                    <span class="metric-subtext-value">
+						<strong data-monster-replace="path:values.secondary | ??:—">—</strong>
+					</span>
+                </div>
+
+                <div part="metric-graph" class="metric-graph">
+                    <svg viewBox="0 0 100 30"
+                         preserveAspectRatio="none"
+                         role="img"
+                         aria-labelledby="metric-graph-desc"
+                         focusable="false"
+                         xmlns="http://www.w3.org/2000/svg"
+                         data-monster-replace="path:values.points | call:toGraph">
+                    </svg>
+                    <span id="metric-graph-desc" class="visually-hidden"
+                          data-monster-replace="path:aria.graph | ??:Graphische Darstellung der Kennzahl">
+						Graphische Darstellung
+					</span>
+                </div>
+            </div>
+
+            <span class="visually-hidden" data-monster-replace="path:aria.description"></span>
+        </div>`;
+}
+
+registerCustomElement(MetricGraph);