import { jsx as _jsx } from "@stencil/core/jsx-runtime";
import { Host } from "@stencil/core";
export class Sparkline {
    host;
    data = [5, 15, 10, 50, 35, 45, 50, 100, 10, 100, 80, 15, 40, 45, 20, 10, 5, 15, 25, 35];
    // MARK: Props
    // @Prop({ mutable: true }) data: number[] = [];
    color;
    type = "line";
    // MARK: Render
    render() {
        const { data, type, color } = this;
        let parsed = data;
        if (typeof data === "string") {
            try {
                parsed = JSON.parse(data);
            }
            catch {
                parsed = [Number(data)];
            }
        }
        const values = Array.isArray(parsed) ? parsed.slice(0, 20) : [parsed];
        let content;
        if (type === "bar") {
            content = `{b:${values.join(",")}}`;
        }
        else if (type === "pie") {
            content = `{p:${values[0]}}`;
        }
        else {
            content = `{l:${values.join(",")}}`;
        }
        return (_jsx(Host, { part: "root", style: color ? { color } : undefined, children: _jsx("span", { class: "dds-sparkline", part: "chart", children: content }, '47d7a6beebd381dedd517d2927150b8553ba33fc') }, '6c469b59e3be51734d133d10aabf6697fae07876'));
    }
    static get is() { return "dds-sparkline"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../reset.css", "sparkline.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../reset.css", "sparkline.css"]
        };
    }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color"
            },
            "type": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "SparklineType",
                    "resolved": "\"bar\" | \"line\" | \"pie\"",
                    "references": {
                        "SparklineType": {
                            "location": "local",
                            "path": "/home/runner/work/dentsu-design-system/dentsu-design-system/packages/components/src/sparkline/sparkline.tsx",
                            "id": "src/sparkline/sparkline.tsx::SparklineType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "\"line\""
            }
        };
    }
    static get elementRef() { return "host"; }
}
