@hakit/components
Version:
A series of components to work with @hakit/core
61 lines (60 loc) • 2.67 kB
JavaScript
import { j as o, a as d, F as h } from "../../../emotion-react-jsx-runtime.browser.esm-BErL7L7Y.js";
import { c as p } from "../../../emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import { useState as u, useEffect as m, useRef as g } from "react";
import { css as v } from "@emotion/react";
import { SVG_WIDTH as $, SVG_HEIGHT as S } from "./constants.js";
function y() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const E = (s, t, n, e) => {
const i = (s - n) / 2 + n, r = (t - e) / 2 + e;
return [i, r];
}, N = (s) => {
if (!s.length)
return "";
let t, n;
const e = 0, i = 1;
let r = "", a = s.filter(Boolean)[0];
r += `M ${a[e]},${a[i]}`;
for (const c of s)
t = c, n = E(a[e], a[i], t[e], t[i]), r += ` ${n[e]},${n[i]}`, r += ` Q${t[e]},${t[i]}`, a = t;
return r += ` ${t[e]},${t[i]}`, r;
}, _ = /* @__PURE__ */ p("svg", process.env.NODE_ENV === "production" ? {
target: "esztfdy0"
} : {
target: "esztfdy0",
label: "SVGWrapper"
})(process.env.NODE_ENV === "production" ? {
name: "lth4tv",
styles: "display:flex;width:100%;.fill{opacity:0.1;}"
} : {
name: "lth4tv",
styles: "display:flex;width:100%;.fill{opacity:0.1;}",
toString: y
});
function R({
coordinates: s,
strokeWidth: t = 5,
cssStyles: n,
className: e,
...i
}) {
const [r, a] = u(void 0);
m(() => {
if (s) {
const f = N(s);
a(f);
}
}, [s]);
const l = g(`svg-${Math.random().toString(36).substr(2, 9)}`).current;
return /* @__PURE__ */ o(_, { className: `${e ?? ""} svg-graph`, width: "100%", height: "100%", viewBox: `0 0 ${$} ${S}`, css: /* @__PURE__ */ v(n ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:SvgGraph;")), ...i, children: /* @__PURE__ */ o("g", { children: r && s ? /* @__PURE__ */ d(h, { children: [
/* @__PURE__ */ o("mask", { id: `${l}-fill`, children: /* @__PURE__ */ o("path", { className: "fill", fill: "white", d: `${r} L 500, 100 L 0, 100 z` }) }),
/* @__PURE__ */ o("rect", { height: "100%", width: "100%", fill: "var(--ha-A400)", mask: `url(#${l}-fill)` }),
/* @__PURE__ */ o("mask", { id: `${l}-line`, children: /* @__PURE__ */ o("path", { fill: "none", stroke: "var(--ha-A100)", strokeWidth: t, strokeLinecap: "round", strokeLinejoin: "round", d: r }) }),
/* @__PURE__ */ o("rect", { height: "100%", width: "100%", fill: "var(--ha-A400)", mask: `url(#${l}-line)` })
] }) : /* @__PURE__ */ o(h, {}) }) });
}
export {
R as SvgGraph
};
//# sourceMappingURL=index.js.map