vue-data-ui 2.3.2 → 2.3.4

package/dist/vue-ui-skeleton-BM9rwmxY.js

@@ -0,0 +1,2064 @@
+import { ref as g, computed as x, openBlock as e, createElementBlock as o, normalizeClass as Z, normalizeStyle as n, unref as s, createElementVNode as t, createCommentVNode as a, Fragment as d, renderList as y, pushScopeId as N, popScopeId as F, createStaticVNode as A } from "vue";
+import { u as O, I as L, X as u, r as h, O as X } from "./index-uOtklCCx.js";
+import { u as V } from "./useNestedProp-BgWkUab_.js";
+import { _ as G } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const _ = (w) => (N("data-v-73139463"), w = w(), F(), w), R = ["id"], T = ["xmlns"], Y = ["stroke", "fill"], D = ["xmlns"], U = ["stroke", "fill"], J = ["xmlns"], K = ["stroke"], Q = ["fill"], ll = ["stroke", "fill"], tl = ["stroke", "fill"], el = ["fill"], ol = ["stroke", "fill"], sl = ["stroke", "fill"], rl = ["fill"], il = ["stroke", "fill"], nl = ["stroke", "fill"], al = ["fill"], ul = ["stroke", "fill"], cl = ["stroke", "fill"], dl = ["fill"], hl = ["stroke", "fill"], yl = ["stroke", "fill"], kl = ["xmlns"], vl = ["stroke"], _l = ["stroke"], xl = ["stroke", "fill"], pl = ["stroke", "fill"], gl = ["stroke", "fill"], wl = ["stroke", "fill"], fl = ["stroke", "fill"], ml = ["stroke", "fill"], bl = ["stroke", "fill"], Ml = ["stroke", "fill"], $l = ["stroke", "fill"], Cl = ["stroke", "fill"], Ll = ["stroke", "fill"], Al = ["stroke", "fill"], Bl = ["stroke", "fill"], Wl = ["stroke", "fill"], jl = ["stroke", "fill"], Pl = ["stroke", "fill"], zl = ["stroke", "fill"], ql = ["stroke", "fill"], Hl = ["stroke", "fill"], Sl = ["stroke", "fill"], El = ["stroke", "fill"], Il = ["stroke", "fill"], Zl = ["stroke", "fill"], Nl = ["xmlns"], Fl = ["stroke"], Ol = ["xmlns"], Xl = ["stroke"], Vl = ["xmlns"], Gl = ["stroke"], Rl = ["xmlns"], Tl = ["fill"], Yl = ["fill"], Dl = ["fill"], Ul = ["fill"], Jl = ["fill"], Kl = ["fill"], Ql = ["fill"], lt = ["fill"], tt = ["fill"], et = ["fill"], ot = ["fill"], st = ["fill"], rt = ["xmlns"], it = ["stroke"], nt = ["stroke"], at = ["stroke"], ut = ["stroke"], ct = ["stroke"], dt = ["stroke"], ht = ["xmlns"], yt = ["stroke"], kt = ["stroke"], vt = ["stroke"], _t = ["stroke"], xt = ["stroke"], pt = ["stroke"], gt = ["stroke"], wt = ["stroke"], ft = ["stroke"], mt = ["xmlns"], bt = ["stroke"], Mt = ["xmlns"], $t = ["stroke"], Ct = ["stroke"], Lt = ["stroke"], At = ["stroke"], Bt = ["stroke"], Wt = ["stroke"], jt = ["stroke"], Pt = ["stroke"], zt = ["stroke"], qt = ["xmlns"], Ht = ["x1", "x2", "stroke"], St = ["xmlns"], Et = ["x", "y", "width", "height", "fill"], It = ["y", "width", "height", "fill"], Zt = ["xmlns"], Nt = ["fill"], Ft = ["fill"], Ot = ["fill"], Xt = ["xmlns"], Vt = ["x1", "x2", "y1", "y2", "stroke"], Gt = ["stroke"], Rt = ["fill"], Tt = ["xmlns"], Yt = ["fill"], Dt = ["fill"], Ut = ["x1", "y1", "x2", "y2", "stroke-width", "stroke"], Jt = ["xmlns"], Kt = { key: 0 }, Qt = ["stroke", "stroke-width"], le = ["stroke", "stroke-width"], te = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ee = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], oe = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], se = ["x", "y", "height", "width", "fill"], re = ["xmlns", "viewBox"], ie = ["x", "y", "stroke", "fill"], ne = ["xmlns"], ae = ["d", "stroke"], ue = ["cx", "cy", "r", "fill", "stroke"], ce = ["cx", "cy", "r", "fill", "stroke"], de = ["x", "y", "width", "fill"], he = ["cx", "cy", "fill"], ye = ["cx", "cy", "fill"], ke = ["stroke"], ve = ["xmlns"], _e = ["stroke", "stroke-width"], xe = ["stroke", "stroke-width"], pe = ["stroke", "stroke-width"], ge = ["fill"], we = ["fill"], fe = ["fill"], me = ["fill"], be = ["fill"], Me = ["fill"], $e = ["xmlns"], Ce = { key: 0 }, Le = ["stroke", "stroke-width"], Ae = ["stroke", "stroke-width"], Be = ["stroke", "stroke-width"], We = { key: 1 }, je = ["r", "fill"], Pe = ["r", "fill"], ze = ["xmlns"], qe = { key: 0 }, He = ["stroke", "stroke-width"], Se = ["stroke", "stroke-width"], Ee = ["fill", "rx", "x", "y", "width", "height"], Ie = ["xmlns"], Ze = ["stroke-width", "stroke"], Ne = ["stroke-width", "stroke"], Fe = ["stroke-width", "stroke"], Oe = ["xmlns"], Xe = ["stroke"], Ve = ["stroke"], Ge = ["stroke"], Re = ["stroke"], Te = ["fill"], Ye = ["stroke"], De = ["xmlns"], Ue = ["stroke", "stroke-width"], Je = ["stroke", "stroke-width"], Ke = ["fill", "r"], Qe = ["fill", "r"], lo = ["fill", "r"], to = ["fill", "r"], eo = ["fill", "r"], oo = ["fill", "r"], so = ["fill", "r"], ro = ["fill", "r"], io = ["fill", "r"], no = ["xmlns"], ao = ["d", "stroke", "stroke-width"], uo = ["d", "stroke", "stroke-width"], co = ["d", "stroke", "stroke-width"], ho = ["d", "stroke", "stroke-width"], yo = ["stroke", "stroke-width"], ko = ["stroke", "stroke-width"], vo = ["stroke", "stroke-width"], _o = ["fill"], xo = ["fill"], po = ["xmlns"], go = ["x", "y", "fill"], wo = ["x", "y", "fill"], fo = ["x", "y", "fill"], mo = ["xmlns"], bo = ["fill"], Mo = ["fill"], $o = ["y1", "y2", "stroke", "stroke-width"], Co = ["x1", "x2", "stroke", "stroke-width"], Lo = ["xmlns", "stroke"], Ao = /* @__PURE__ */ _(() => /* @__PURE__ */ t("path", {
+  stroke: "none",
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}, null, -1)), Bo = ["fill"], Wo = ["xmlns", "stroke"], jo = /* @__PURE__ */ A('<path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-73139463></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" data-v-73139463></path><path d="M9 10l.01 0" data-v-73139463></path><path d="M15 10l.01 0" data-v-73139463></path><path d="M9.5 15.25a3.5 3.5 0 0 1 5 0" data-v-73139463></path>', 5), Po = [
+  jo
+], zo = ["xmlns", "stroke"], qo = /* @__PURE__ */ _(() => /* @__PURE__ */ t("path", {
+  stroke: "none",
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}, null, -1)), Ho = ["fill"], So = ["xmlns", "stroke"], Eo = /* @__PURE__ */ A('<path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-73139463></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" data-v-73139463></path><path d="M9 10l.01 0" data-v-73139463></path><path d="M15 10l.01 0" data-v-73139463></path><path d="M9 15l6 0" data-v-73139463></path>', 5), Io = [
+  Eo
+], Zo = ["xmlns", "stroke"], No = /* @__PURE__ */ _(() => /* @__PURE__ */ t("path", {
+  stroke: "none",
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}, null, -1)), Fo = ["fill"], Oo = ["xmlns", "stroke"], Xo = /* @__PURE__ */ _(() => /* @__PURE__ */ t("path", {
+  stroke: "none",
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}, null, -1)), Vo = /* @__PURE__ */ _(() => /* @__PURE__ */ t("path", { d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }, null, -1)), Go = /* @__PURE__ */ _(() => /* @__PURE__ */ t("path", { d: "M9 10l.01 0" }, null, -1)), Ro = /* @__PURE__ */ _(() => /* @__PURE__ */ t("path", { d: "M15 10l.01 0" }, null, -1)), To = [
+  Xo,
+  Vo,
+  Go,
+  Ro
+], Yo = ["xmlns", "stroke"], Do = /* @__PURE__ */ _(() => /* @__PURE__ */ t("path", {
+  stroke: "none",
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}, null, -1)), Uo = ["fill"], Jo = ["xmlns", "stroke"], Ko = /* @__PURE__ */ A('<path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-73139463></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" data-v-73139463></path><path d="M9 10l.01 0" data-v-73139463></path><path d="M15 10l.01 0" data-v-73139463></path><path d="M9.5 15a3.5 3.5 0 0 0 5 0" data-v-73139463></path>', 5), Qo = [
+  Ko
+], ls = ["xmlns", "stroke"], ts = /* @__PURE__ */ _(() => /* @__PURE__ */ t("path", {
+  stroke: "none",
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}, null, -1)), es = ["fill"], os = ["xmlns", "stroke"], ss = /* @__PURE__ */ A('<path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-73139463></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" data-v-73139463></path><path d="M9 9l.01 0" data-v-73139463></path><path d="M15 9l.01 0" data-v-73139463></path><path d="M8 13a4 4 0 1 0 8 0h-8" data-v-73139463></path>', 5), rs = [
+  ss
+], is = ["xmlns"], ns = ["points", "fill", "stroke", "stroke-width"], as = ["xmlns"], us = { key: 0 }, cs = ["stroke", "stroke-width"], ds = ["y", "width", "fill", "rx"], hs = {
+  __name: "vue-ui-skeleton",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(w) {
+    const B = w, { vue_ui_skeleton: W } = O(), j = g(`vue-ui-skeleton-${Math.random()}`), l = x(() => V({
+      userConfig: B.config,
+      defaultConfig: W
+    })), P = x(() => l.value.style.animated), c = x(() => l.value.type), z = g([60, 50, 55, 36, 40, 25, 26, 12]), q = x(() => L({
+      plot: { x: 50, y: 50 },
+      radius: 40,
+      sides: 6
+    }).path), H = x(() => L({
+      plot: { x: 50, y: 50 },
+      radius: 30,
+      sides: 6
+    }).path), S = x(() => L({
+      plot: { x: 50, y: 50 },
+      radius: 20,
+      sides: 6
+    }).path), E = x(() => L({
+      plot: { x: 50, y: 50 },
+      radius: 10,
+      sides: 6
+    }).path), m = g([
+      {
+        root: {
+          x: 70,
+          y: 77,
+          r: 44,
+          opacity: 100
+        },
+        bars: [
+          {
+            x: 200,
+            y: 37,
+            opacity: 100,
+            width: 240
+          },
+          {
+            x: 200,
+            y: 118,
+            opacity: 100,
+            width: 180
+          },
+          {
+            x: 200,
+            y: 253,
+            opacity: 100,
+            width: 80
+          }
+        ]
+      },
+      {
+        root: {
+          x: 70,
+          y: 177,
+          r: 32,
+          opacity: 70
+        },
+        bars: [
+          {
+            x: 200,
+            y: 145,
+            opacity: 70,
+            width: 160
+          },
+          {
+            x: 200,
+            y: 172,
+            opacity: 70,
+            width: 140
+          },
+          {
+            x: 200,
+            y: 199,
+            opacity: 70,
+            width: 120
+          }
+        ]
+      },
+      {
+        root: {
+          x: 70,
+          y: 257,
+          r: 24,
+          opacity: 40
+        },
+        bars: [
+          {
+            x: 200,
+            y: 64,
+            opacity: 40,
+            width: 220
+          },
+          {
+            x: 200,
+            y: 91,
+            opacity: 40,
+            width: 200
+          },
+          {
+            x: 200,
+            y: 226,
+            opacity: 40,
+            width: 100
+          }
+        ]
+      }
+    ]), k = g([
+      {
+        y: 200,
+        height: 100,
+        bar: 50
+      },
+      {
+        y: 180,
+        height: 100,
+        bar: 40
+      },
+      {
+        y: 150,
+        height: 100,
+        bar: 30
+      },
+      {
+        y: 120,
+        height: 80,
+        bar: 50
+      },
+      {
+        y: 110,
+        height: 60,
+        bar: 30
+      },
+      {
+        y: 80,
+        height: 80,
+        bar: 10
+      },
+      {
+        y: 50,
+        height: 80,
+        bar: 40
+      },
+      {
+        y: 24,
+        height: 40,
+        bar: 24
+      },
+      {
+        y: 44,
+        height: 20,
+        bar: 13
+      },
+      {
+        y: 32,
+        height: 45,
+        bar: 19
+      }
+    ]), f = g([
+      [3, 2.5],
+      [4, 3.1],
+      [8, 6],
+      [9.5, 6.5],
+      [12, 11],
+      [16, 15],
+      [18, 18.2],
+      [25, 24],
+      [24, 26],
+      [32, 32],
+      [33, 32],
+      [32, 31],
+      [38, 37],
+      [37, 38],
+      [42, 41],
+      [40, 41],
+      [44, 45],
+      [38, 35],
+      [31, 32]
+    ]), b = g(
+      [
+        { x: 40, y: 30 },
+        { x: 45, y: 28 },
+        { x: 50, y: 25 },
+        { x: 55, y: 20 },
+        { x: 60, y: 27 },
+        { x: 65, y: 14 },
+        { x: 70, y: 23 },
+        { x: 75, y: 16 },
+        { x: 80, y: 25 },
+        { x: 85, y: 10 },
+        { x: 90, y: 18 },
+        { x: 95, y: 7 },
+        { x: 100, y: 12 },
+        { x: 105, y: 10 },
+        { x: 110, y: 20 },
+        { x: 115, y: 7 },
+        { x: 120, y: 14 },
+        { x: 125, y: 10 },
+        { x: 130, y: 19 },
+        { x: 135, y: 3 },
+        { x: 140, y: 10 },
+        { x: 145, y: 2 },
+        { x: 150, y: 1 }
+      ]
+    );
+    function M(p, $ = 1) {
+      return {
+        x: 200 + 160 * Math.cos(29.85 + p * Math.PI / 180) * $,
+        y: 200 + 160 * Math.sin(29.85 + p * Math.PI / 180) * $
+      };
+    }
+    const I = x(() => {
+      const p = [];
+      for (let r = 0; r < 100; r += 1)
+        p.push({
+          x1: M(360 / 100 * r).x,
+          y1: M(360 / 100 * r).y,
+          x2: M(360 / 100 * r, 0.9).x,
+          y2: M(360 / 100 * r, 0.9).y,
+          color: l.value.style.wheel.color
+        });
+      return p;
+    });
+    return (p, $) => (e(), o("div", {
+      id: j.value,
+      class: Z({ "vue-ui-skeleton": !0, "vue-ui-skeleton-animated": P.value }),
+      style: n(`background:${l.value.style.backgroundColor};color:${l.value.style.color};display:flex;align-items:center;justify-content:center;`)
+    }, [
+      c.value === "flow" ? (e(), o("svg", {
+        key: 0,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 80 60",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          d: "M 5 5 L 5 55 M 75 5 L 75 55 M 28 5 L 28 55 M 52 5 L 52 55 M 5 8 L 28 12 L 52 9 L 75 8 L 75 12 L 52 12 L 28 21 L 5 29 Z M 5 34 L 28 35 L 52 24 L 75 21 L 75 27 L 52 30 L 28 44 L 52 39 L 75 41 L 75 47 L 52 45 L 28 52 L 5 52 Z",
+          stroke: l.value.style.flow.color,
+          "stroke-width": 0.8,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          fill: l.value.style.flow.color
+        }, null, 8, Y)
+      ], 12, T)) : a("", !0),
+      c.value === "parallelCoordinatePlot" ? (e(), o("svg", {
+        key: 1,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 80 60",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          d: "M 5 5 L 5 55 M 75 5 L 75 55 M 28 5 L 28 55 M 52 5 L 52 55 M 5 10 A 1 1 0 0 0 5 12 A 1 1 0 0 0 5 10 M 28 15 A 1 1 0 0 0 28 17 A 1 1 0 0 0 28 15 M 52 8 A 1 1 0 0 0 52 10 A 1 1 0 0 0 52 8 M 75 11 A 1 1 0 0 0 75 13 A 1 1 0 0 0 75 11 M 6 11 L 27 16 M 29 16 L 51 9 M 53 9 L 74 12 M 5 50 A 1 1 0 0 0 5 48 A 1 1 0 0 0 5 50 M 28 39 A 1 1 0 0 0 28 41 A 1 1 0 0 0 28 39 M 52 45 A 1 1 0 0 0 52 47 A 1 1 0 0 0 52 45 M 75 45 A 1 1 0 0 0 75 47 A 1 1 0 0 0 75 45 M 6 49 L 27 40 M 29 40 L 51 46 M 53 46 L 74 46 M 5 25 A 1 1 0 0 0 5 27 A 1 1 0 0 0 5 25 M 28 31 A 1 1 0 0 0 28 33 A 1 1 0 0 0 28 31 M 52 23 A 1 1 0 0 0 52 25 A 1 1 0 0 0 52 23 M 75 21 A 1 1 0 0 0 75 23 A 1 1 0 0 0 75 21 M 6 26 L 27 32 M 29 32 L 51 24 M 53 24 L 74 22",
+          stroke: l.value.style.parallelCoordinatePlot.color,
+          "stroke-width": 0.8,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          fill: l.value.style.parallelCoordinatePlot.color
+        }, null, 8, U)
+      ], 12, D)) : a("", !0),
+      c.value === "dumbbell" ? (e(), o("svg", {
+        key: 2,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 100 55",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("line", {
+          x1: "3",
+          x2: "3",
+          y1: "3",
+          y2: "67",
+          stroke: l.value.style.dumbbell.color,
+          "stroke-width": 0.5,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, K),
+        t("path", {
+          d: `
+                    M 30,11
+                    C 39,10 39,10
+                    45,11
+                    L 45,9
+                    C 39,10 39,10
+                    30,9 Z
+                `,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, Q),
+        t("circle", {
+          cx: "30",
+          cy: "10",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, ll),
+        t("circle", {
+          cx: "46",
+          cy: "10",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, tl),
+        t("path", {
+          d: `
+                    M 10,21
+                    C 23,20 23,20
+                    36,21
+                    L 36,19
+                    C 23,20 23,20
+                    10,19 Z
+                `,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, el),
+        t("circle", {
+          cx: "10",
+          cy: "20",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, ol),
+        t("circle", {
+          cx: "36",
+          cy: "20",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, sl),
+        t("path", {
+          d: `
+                    M 30,31
+                    C 45,30 45,30
+                    60,31
+                    L 60,29
+                    C 45,30 45,30
+                    30,29 Z
+                `,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, rl),
+        t("circle", {
+          cx: "30",
+          cy: "30",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, il),
+        t("circle", {
+          cx: "60",
+          cy: "30",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, nl),
+        t("path", {
+          d: `
+                    M 50,41
+                    C 65,40 65,40
+                    80,41
+                    L 80,39
+                    C 65,40 65,40
+                    50,39 Z
+                `,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, al),
+        t("circle", {
+          cx: "50",
+          cy: "40",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, ul),
+        t("circle", {
+          cx: "80",
+          cy: "40",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, cl),
+        t("path", {
+          d: `
+                    M 40,51
+                    C 65,50 65,50
+                    90,51
+                    L 90,49
+                    C 65,50 65,50
+                    40,49 Z
+                `,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, dl),
+        t("circle", {
+          cx: "40",
+          cy: "50",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, hl),
+        t("circle", {
+          cx: "90",
+          cy: "50",
+          r: "2",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.dumbbell.color
+        }, null, 8, yl)
+      ], 12, J)) : a("", !0),
+      c.value === "stripPlot" ? (e(), o("svg", {
+        key: 3,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 100 100",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("line", {
+          x1: "3",
+          x2: "3",
+          y1: "3",
+          y2: "97",
+          stroke: l.value.style.stripPlot.color,
+          "stroke-width": 0.5,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, vl),
+        t("line", {
+          x1: "3",
+          x2: "97",
+          y1: "97",
+          y2: "97",
+          stroke: l.value.style.stripPlot.color,
+          "stroke-width": 0.5,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, _l),
+        t("circle", {
+          cx: "12",
+          cy: "8",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, xl),
+        t("circle", {
+          cx: "12",
+          cy: "40",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, pl),
+        t("circle", {
+          cx: "12",
+          cy: "60",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, gl),
+        t("circle", {
+          cx: "12",
+          cy: "70",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, wl),
+        t("circle", {
+          cx: "32",
+          cy: "25",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, fl),
+        t("circle", {
+          cx: "32",
+          cy: "38",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, ml),
+        t("circle", {
+          cx: "32",
+          cy: "44",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, bl),
+        t("circle", {
+          cx: "32",
+          cy: "55",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Ml),
+        t("circle", {
+          cx: "52",
+          cy: "30",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, $l),
+        t("circle", {
+          cx: "52",
+          cy: "33",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Cl),
+        t("circle", {
+          cx: "52",
+          cy: "43",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Ll),
+        t("circle", {
+          cx: "52",
+          cy: "63",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Al),
+        t("circle", {
+          cx: "52",
+          cy: "78",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Bl),
+        t("circle", {
+          cx: "72",
+          cy: "58",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Wl),
+        t("circle", {
+          cx: "72",
+          cy: "70",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, jl),
+        t("circle", {
+          cx: "72",
+          cy: "78",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Pl),
+        t("circle", {
+          cx: "72",
+          cy: "88",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, zl),
+        t("circle", {
+          cx: "92",
+          cy: "66",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, ql),
+        t("circle", {
+          cx: "92",
+          cy: "77",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Hl),
+        t("circle", {
+          cx: "92",
+          cy: "85",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Sl),
+        t("circle", {
+          cx: "92",
+          cy: "88",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, El),
+        t("circle", {
+          cx: "92",
+          cy: "90",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Il),
+        t("circle", {
+          cx: "92",
+          cy: "92",
+          r: "4",
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 0.3,
+          fill: l.value.style.stripPlot.color,
+          style: { opacity: "0.5" }
+        }, null, 8, Zl)
+      ], 12, kl)) : a("", !0),
+      c.value === "treemap" ? (e(), o("svg", {
+        key: 4,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 30 21",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          fill: "none",
+          stroke: l.value.style.treemap.color,
+          "stroke-width": "0.3",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          d: "M 1 1 L 29 1 L 29 20 L 1 20 Z M 10 1 L 10 20 M 1 13 L 10 13 M 22 11 L 22 20 M 10 11 L 22 11 M 22 11 L 29 11 M 7 13 L 7 20 M 17 11 L 17 20 M 22 15 L 29 15 M 26 15 L 26 20 M 20 1 L 20 11"
+        }, null, 8, Fl)
+      ], 12, Nl)) : a("", !0),
+      c.value === "galaxy" ? (e(), o("svg", {
+        key: 5,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0.5 0 20 20",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          fill: "none",
+          stroke: l.value.style.galaxy.color,
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          d: "M 7 11 A 1 1 0 0 0 11 11 M 14 11 A 1 1 0 0 0 7 11 M 3 11 A 1 1 0 0 0 14 11 M 18 11 A 1 1 0 0 0 3 11 M 16.4 16 C 17 15 18 13 18 11"
+        }, null, 8, Xl)
+      ], 12, Ol)) : a("", !0),
+      c.value === "bar3d" ? (e(), o("svg", {
+        key: 6,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "2 0 16 20",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          fill: "none",
+          stroke: l.value.style.bar3d.color,
+          "stroke-width": "0.2",
+          d: "M10 1 6 3 6 17 10 19 14 17 14 3 10 1M6 3 10 5 14 3M10 5 10 19",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, Gl)
+      ], 12, Vl)) : a("", !0),
+      c.value === "sparkHistogram" ? (e(), o("svg", {
+        key: 7,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 100 20",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("rect", {
+          x: "3",
+          y: "8",
+          height: "4",
+          width: "6",
+          rx: "1.5",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, Tl),
+        t("rect", {
+          x: "11",
+          y: "6",
+          height: "8",
+          width: "6",
+          rx: "2",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, Yl),
+        t("rect", {
+          x: "19",
+          y: "7",
+          height: "6",
+          width: "6",
+          rx: "2",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, Dl),
+        t("rect", {
+          x: "27",
+          y: "6",
+          height: "8",
+          width: "6",
+          rx: "2",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, Ul),
+        t("rect", {
+          x: "35",
+          y: "8",
+          height: "4",
+          width: "6",
+          rx: "1.5",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, Jl),
+        t("rect", {
+          x: "43",
+          y: "7",
+          height: "6",
+          width: "6",
+          rx: "2",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, Kl),
+        t("rect", {
+          x: "51",
+          y: "8.5",
+          height: "3",
+          width: "6",
+          rx: "1.5",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, Ql),
+        t("rect", {
+          x: "59",
+          y: "7",
+          height: "6",
+          width: "6",
+          rx: "2",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, lt),
+        t("rect", {
+          x: "67",
+          y: "6",
+          height: "8",
+          width: "6",
+          rx: "2",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, tt),
+        t("rect", {
+          x: "75",
+          y: "7",
+          height: "6",
+          width: "6",
+          rx: "2",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, et),
+        t("rect", {
+          x: "83",
+          y: "7",
+          height: "6",
+          width: "6",
+          rx: "2",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, ot),
+        t("rect", {
+          x: "91",
+          y: "8",
+          height: "4",
+          width: "6",
+          rx: "1.5",
+          fill: l.value.style.sparkHistogram.color
+        }, null, 8, st)
+      ], 12, Rl)) : a("", !0),
+      c.value === "sparkbar" ? (e(), o("svg", {
+        key: 8,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 500 200",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("line", {
+          x1: "12",
+          x2: "488",
+          y1: "50",
+          y2: "50",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkbar.color,
+          opacity: "0.5"
+        }, null, 8, it),
+        t("line", {
+          x1: "12",
+          x2: "400",
+          y1: "50",
+          y2: "50",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkbar.color,
+          opacity: "1"
+        }, null, 8, nt),
+        t("line", {
+          x1: "12",
+          x2: "488",
+          y1: "100",
+          y2: "100",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkbar.color,
+          opacity: "0.5"
+        }, null, 8, at),
+        t("line", {
+          x1: "12",
+          x2: "350",
+          y1: "100",
+          y2: "100",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkbar.color,
+          opacity: "1"
+        }, null, 8, ut),
+        t("line", {
+          x1: "12",
+          x2: "488",
+          y1: "150",
+          y2: "150",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkbar.color,
+          opacity: "0.5"
+        }, null, 8, ct),
+        t("line", {
+          x1: "12",
+          x2: "235",
+          y1: "150",
+          y2: "150",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkbar.color,
+          opacity: "1"
+        }, null, 8, dt)
+      ], 12, rt)) : a("", !0),
+      c.value === "sparkStackbar" ? (e(), o("svg", {
+        key: 9,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 500 64",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("line", {
+          x1: "12",
+          x2: "488",
+          y1: "32",
+          y2: "32",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkStackbar.color,
+          opacity: "0.5"
+        }, null, 8, yt),
+        t("line", {
+          x1: "12",
+          x2: "380",
+          y1: "32",
+          y2: "32",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkStackbar.color,
+          opacity: "0.6"
+        }, null, 8, kt),
+        t("line", {
+          x1: "12",
+          x2: "200",
+          y1: "32",
+          y2: "32",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkStackbar.color,
+          opacity: "0.8"
+        }, null, 8, vt),
+        t("line", {
+          x1: "12",
+          x2: "120",
+          y1: "32",
+          y2: "32",
+          "stroke-width": "16",
+          "stroke-linecap": "round",
+          stroke: l.value.style.sparkStackbar.color,
+          opacity: "1"
+        }, null, 8, _t)
+      ], 12, ht)) : a("", !0),
+      c.value === "thermometer" ? (e(), o("svg", {
+        key: 10,
+        width: "100%",
+        viewBox: "0 0 20 20",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          fill: "none",
+          stroke: l.value.style.thermometer.color,
+          "stroke-width": "0.2",
+          "stroke-linecap": "round",
+          d: "M 13 4 A 1 1 0 0 0 7 4 L 7 16 A 1 1 0 0 0 13 16 L 13 4 M 7 15 L 8 15 M 7 12 L 8 12 M 7 9 L 8 9 M 7 6 L 8 6 M 12 15 L 13 15 M 12 12 L 13 12 M 12 9 L 13 9 M 12 6 L 13 6 "
+        }, null, 8, xt),
+        t("path", {
+          stroke: l.value.style.thermometer.color,
+          "stroke-width": "1",
+          style: { opacity: "0.6" },
+          d: "M 10 17 L 10 12 ",
+          "stroke-linecap": "round"
+        }, null, 8, pt),
+        t("path", {
+          "stroke-linecap": "round",
+          stroke: l.value.style.thermometer.color,
+          "stroke-width": "1",
+          opacity: "M 10 17 L 10 9"
+        }, null, 8, gt),
+        t("path", {
+          "stroke-linecap": "round",
+          stroke: l.value.style.thermometer.color,
+          "stroke-width": "1",
+          opacity: "0.3",
+          d: "M 10 17 L 10 6"
+        }, null, 8, wt),
+        t("path", {
+          "stroke-linecap": "round",
+          stroke: l.value.style.thermometer.color,
+          "stroke-width": "1",
+          style: { opacity: "0.1" },
+          d: "M 10 17 L 10 3"
+        }, null, 8, ft)
+      ], 4)) : a("", !0),
+      c.value === "relationCircle" ? (e(), o("svg", {
+        key: 11,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 20 20",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          fill: "none",
+          stroke: l.value.style.relationCircle.color,
+          "stroke-width": "0.2",
+          "stroke-linecap": "round",
+          d: "M1 10A1 1 0 0019 10 1 1 0 001 10M1 10C7 11 9 13 10 19M10 19C10 11 8 7 6 2M10 19C10 11 12 7 14 2M10 19C11 13 12 11 19 10"
+        }, null, 8, bt)
+      ], 12, mt)) : a("", !0),
+      c.value === "molecule" ? (e(), o("svg", {
+        key: 12,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 100 100",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("circle", {
+          cx: "50",
+          cy: "50",
+          r: "6",
+          "stroke-width": "2",
+          fill: "none",
+          stroke: l.value.style.molecule.color
+        }, null, 8, $t),
+        t("circle", {
+          cx: "20",
+          cy: "50",
+          r: "3",
+          "stroke-width": "1.6",
+          fill: "none",
+          stroke: l.value.style.molecule.color
+        }, null, 8, Ct),
+        t("circle", {
+          cx: "80",
+          cy: "50",
+          r: "3",
+          "stroke-width": "1.6",
+          fill: "none",
+          stroke: l.value.style.molecule.color
+        }, null, 8, Lt),
+        t("circle", {
+          cx: "50",
+          cy: "20",
+          r: "3",
+          "stroke-width": "1.6",
+          fill: "none",
+          stroke: l.value.style.molecule.color
+        }, null, 8, At),
+        t("circle", {
+          cx: "50",
+          cy: "80",
+          r: "3",
+          "stroke-width": "1.6",
+          fill: "none",
+          stroke: l.value.style.molecule.color
+        }, null, 8, Bt),
+        t("line", {
+          x1: "50",
+          x2: "50",
+          y1: "23",
+          y2: "45",
+          "stroke-width": "1",
+          stroke: l.value.style.molecule.color
+        }, null, 8, Wt),
+        t("line", {
+          x1: "50",
+          x2: "50",
+          y1: "77",
+          y2: "55",
+          "stroke-width": "1",
+          stroke: l.value.style.molecule.color
+        }, null, 8, jt),
+        t("line", {
+          x1: "23",
+          x2: "45",
+          y1: "50",
+          y2: "50",
+          "stroke-width": "1",
+          stroke: l.value.style.molecule.color
+        }, null, 8, Pt),
+        t("line", {
+          x1: "77",
+          x2: "55",
+          y1: "50",
+          y2: "50",
+          "stroke-width": "1",
+          stroke: l.value.style.molecule.color
+        }, null, 8, zt)
+      ], 12, Mt)) : a("", !0),
+      c.value === "tiremarks" ? (e(), o("svg", {
+        key: 13,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 312 56",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        (e(), o(d, null, y(100, (r) => t("g", null, [
+          t("line", {
+            x1: 10 + r * 2.9,
+            y1: 6,
+            x2: 10 + r * 2.9,
+            y2: 50,
+            stroke: l.value.style.tiremarks.color,
+            style: n(r > 80 ? "opacity: 0.5" : ""),
+            "stroke-linecap": "round"
+          }, null, 12, Ht)
+        ])), 64))
+      ], 12, qt)) : a("", !0),
+      c.value === "pyramid" ? (e(), o("svg", {
+        key: 14,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 105 80",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        (e(!0), o(d, null, y(f.value, (r, i) => (e(), o("g", null, [
+          t("rect", {
+            x: 50 - r[0],
+            y: i * (80 / f.value.length),
+            width: r[0],
+            height: 80 / f.value.length * 0.95,
+            fill: l.value.style.pyramid.color
+          }, null, 8, Et),
+          t("rect", {
+            x: 55,
+            y: i * (80 / f.value.length),
+            width: r[1],
+            height: 80 / f.value.length * 0.95,
+            fill: l.value.style.pyramid.color
+          }, null, 8, It)
+        ]))), 256))
+      ], 12, St)) : a("", !0),
+      c.value === "rings" ? (e(), o("svg", {
+        key: 15,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 400 400",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("circle", {
+          cx: 200,
+          cy: 200,
+          r: 180,
+          fill: `${l.value.style.rings.color}${s(h)[40]}`
+        }, null, 8, Nt),
+        t("circle", {
+          cx: 200,
+          cy: 250,
+          r: 130,
+          fill: `${l.value.style.rings.color}${s(h)[60]}`
+        }, null, 8, Ft),
+        t("circle", {
+          cx: 200,
+          cy: 290,
+          r: 90,
+          fill: `${l.value.style.rings.color}${s(h)[100]}`
+        }, null, 8, Ot)
+      ], 12, Zt)) : a("", !0),
+      c.value === "wheel" ? (e(), o("svg", {
+        key: 16,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 400 400",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        (e(!0), o(d, null, y(I.value, (r, i) => (e(), o("line", {
+          x1: r.x1,
+          x2: r.x2,
+          y1: r.y1,
+          y2: r.y2,
+          stroke: i < 66 ? r.color : `${r.color}${s(h)[50]}`,
+          "stroke-width": 5,
+          "stroke-linecap": "round"
+        }, null, 8, Vt))), 256)),
+        t("circle", {
+          cx: 200,
+          cy: 200,
+          r: 130,
+          "stroke-width": 3,
+          stroke: `${l.value.style.wheel.color}${s(h)[50]}`,
+          fill: "none"
+        }, null, 8, Gt),
+        t("rect", {
+          fill: `${l.value.style.wheel.color}${s(h)[50]}`,
+          rx: 12,
+          x: 160,
+          y: 170,
+          height: 60,
+          width: 80,
+          stroke: "none"
+        }, null, 8, Rt)
+      ], 12, Xt)) : a("", !0),
+      c.value === "sparkline" ? (e(), o("svg", {
+        key: 17,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 150 32",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("g", null, [
+          t("rect", {
+            x: "2",
+            y: "2",
+            height: "6",
+            width: "24",
+            fill: l.value.style.sparkline.color,
+            rx: "3"
+          }, null, 8, Yt),
+          t("rect", {
+            x: "2",
+            y: "12",
+            height: "16",
+            width: "16",
+            fill: l.value.style.sparkline.color,
+            rx: "3"
+          }, null, 8, Dt)
+        ]),
+        (e(!0), o(d, null, y(b.value, (r, i) => (e(), o("g", null, [
+          i < b.value.length - 1 ? (e(), o("line", {
+            key: 0,
+            x1: r.x,
+            y1: r.y,
+            x2: b.value[i + 1].x,
+            y2: b.value[i + 1].y,
+            "stroke-width": l.value.style.sparkline.strokeWidth,
+            stroke: l.value.style.sparkline.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, 8, Ut)) : a("", !0)
+        ]))), 256))
+      ], 12, Tt)) : a("", !0),
+      c.value === "candlesticks" ? (e(), o("svg", {
+        key: 18,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 512 316",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        l.value.style.candlesticks.axis.show ? (e(), o("g", Kt, [
+          t("line", {
+            x1: 2,
+            x2: 2,
+            y1: 2,
+            y2: 314,
+            stroke: l.value.style.candlesticks.axis.color,
+            "stroke-width": l.value.style.candlesticks.axis.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, Qt),
+          t("line", {
+            x1: 2,
+            x2: 510,
+            y1: 314,
+            y2: 314,
+            stroke: l.value.style.candlesticks.axis.color,
+            "stroke-width": l.value.style.candlesticks.axis.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, le)
+        ])) : a("", !0),
+        (e(!0), o(d, null, y(k.value, (r, i) => (e(), o("g", null, [
+          t("line", {
+            x1: 24 + 464 * i / (k.value.length - 1) - 464 / (k.value.length - 1) / 8,
+            x2: 24 + 464 * i / (k.value.length - 1) + 464 / (k.value.length - 1) / 8,
+            y1: r.y,
+            y2: r.y,
+            stroke: l.value.style.candlesticks.candle.color,
+            "stroke-width": l.value.style.candlesticks.candle.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, te),
+          t("line", {
+            x1: 24 + 464 * i / (k.value.length - 1) - 464 / (k.value.length - 1) / 8,
+            x2: 24 + 464 * i / (k.value.length - 1) + 464 / (k.value.length - 1) / 8,
+            y1: r.y + r.height,
+            y2: r.y + r.height,
+            stroke: l.value.style.candlesticks.candle.color,
+            "stroke-width": l.value.style.candlesticks.candle.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, ee),
+          t("line", {
+            x1: 24 + 464 * i / (k.value.length - 1),
+            x2: 24 + 464 * i / (k.value.length - 1),
+            y1: r.y,
+            y2: r.y + r.height,
+            stroke: l.value.style.candlesticks.candle.color,
+            "stroke-width": l.value.style.candlesticks.candle.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, oe),
+          t("rect", {
+            x: 24 + 464 * i / (k.value.length - 1) - 464 / (k.value.length - 1) / 8,
+            y: r.y + (r.height - r.bar * 1.5),
+            height: r.bar,
+            width: 464 / (k.value.length - 1) / 4,
+            fill: l.value.style.candlesticks.candle.color,
+            rx: "1"
+          }, null, 8, se)
+        ]))), 256))
+      ], 12, Jt)) : a("", !0),
+      c.value === "heatmap" ? (e(), o("svg", {
+        key: 19,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: `0 0 ${10 * l.value.style.heatmap.cellsX} ${10 * l.value.style.heatmap.cellsY}`,
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        (e(!0), o(d, null, y(l.value.style.heatmap.cellsY, (r, i) => (e(), o("g", null, [
+          (e(!0), o(d, null, y(l.value.style.heatmap.cellsX, (C, v) => (e(), o("g", null, [
+            t("rect", {
+              x: v * 10,
+              y: i * 10,
+              height: 10,
+              width: 10,
+              stroke: l.value.style.backgroundColor,
+              "stroke-width": 1,
+              fill: `${l.value.style.heatmap.color}${s(h)[Math.round(Math.random() * 100)]}`
+            }, null, 8, ie)
+          ]))), 256))
+        ]))), 256))
+      ], 12, re)) : a("", !0),
+      c.value === "chestnut" ? (e(), o("svg", {
+        key: 20,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 512 316",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        (e(!0), o(d, null, y(m.value, (r) => (e(), o("g", null, [
+          (e(!0), o(d, null, y(r.bars, (i) => (e(), o("g", null, [
+            (e(), o(d, null, y(22, (C, v) => t("path", {
+              d: `M
+                            ${i.x},${i.y + v}
+                            C${i.x - 20},${i.y + v} 
+                            ${i.x - 80},${i.y + v} 
+                            ${r.root.x + r.root.r / 2}, ${r.root.y}
+                        `,
+              stroke: `${l.value.style.chestnut.color}${s(h)[i.opacity * 0.2]}`,
+              fill: "none",
+              "stroke-width": "2",
+              "shape-rendering": "cirspEdges"
+            }, null, 8, ae)), 64))
+          ]))), 256))
+        ]))), 256)),
+        (e(!0), o(d, null, y(m.value, (r) => (e(), o("circle", {
+          cx: r.root.x,
+          cy: r.root.y,
+          r: r.root.r,
+          fill: `${l.value.style.backgroundColor}`,
+          stroke: l.value.backgroundColor,
+          "stroke-width": 3
+        }, null, 8, ue))), 256)),
+        (e(!0), o(d, null, y(m.value, (r) => (e(), o("circle", {
+          cx: r.root.x,
+          cy: r.root.y,
+          r: r.root.r,
+          fill: `${l.value.style.chestnut.color}${s(h)[r.root.opacity]}`,
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 3
+        }, null, 8, ce))), 256)),
+        (e(!0), o(d, null, y(m.value, (r) => (e(), o("g", null, [
+          (e(!0), o(d, null, y(r.bars, (i) => (e(), o("rect", {
+            rx: "2",
+            x: i.x,
+            y: i.y,
+            width: i.width,
+            height: 22,
+            fill: `${l.value.style.chestnut.color}${s(h)[i.opacity]}`
+          }, null, 8, de))), 256)),
+          (e(!0), o(d, null, y(r.bars, (i) => (e(), o("circle", {
+            cx: i.x + i.width + 32,
+            cy: i.y + 11,
+            r: 11,
+            fill: `${l.value.style.chestnut.color}${s(h)[i.opacity]}`
+          }, null, 8, he))), 256)),
+          (e(!0), o(d, null, y(r.bars, (i) => (e(), o("circle", {
+            cx: i.x + i.width + 32,
+            cy: i.y + 11,
+            r: 5,
+            fill: `${l.value.style.backgroundColor}`
+          }, null, 8, ye))), 256))
+        ]))), 256)),
+        t("line", {
+          x1: 200,
+          x2: 200,
+          y1: 10,
+          y2: 300,
+          stroke: l.value.style.backgroundColor,
+          "stroke-width": 3
+        }, null, 8, ke)
+      ], 12, ne)) : a("", !0),
+      c.value === "donutEvolution" ? (e(), o("svg", {
+        key: 21,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 108 70",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        l.value.style.line.axis.show ? (e(), o("path", {
+          key: 0,
+          d: "M3 3 3 67 105 67",
+          stroke: l.value.style.donutEvolution.axis.color,
+          "stroke-width": l.value.style.donutEvolution.axis.strokeWidth,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          fill: "none"
+        }, null, 8, _e)) : a("", !0),
+        t("path", {
+          fill: "none",
+          d: "M10 55A1 1 0 0020 55 1 1 0 0010 55M12 55A1 1 0 0018 55 1 1 0 0012 55M10 55 12 55M15 52 15 50M27 45A1 1 0 0037 45 1 1 0 0027 45M29 45A1 1 0 0035 45 1 1 0 0029 45M32 48 32 50M35 45 37 45M44 50A1 1 0 0054 50 1 1 0 0044 50M46 50A1 1 0 0052 50 1 1 0 0046 50M49 45 49 47M49 53 49 55M61 35A1 1 0 0071 35 1 1 0 0061 35M63 35A1 1 0 0069 35 1 1 0 0063 35M66 30 66 32M61 35 63 35M78 41A1 1 0 0088 41 1 1 0 0078 41M80 41A1 1 0 0086 41 1 1 0 0080 41M78 41 80 41M86 41 88 41M95 14A1 1 0 00105 14 1 1 0 0095 14M97 14A1 1 0 00103 14 1 1 0 0097 14M95 14 97 14M100 17 100 19",
+          stroke: l.value.style.donutEvolution.donuts.color,
+          "stroke-width": l.value.style.donutEvolution.donuts.strokeWidth
+        }, null, 8, xe),
+        t("path", {
+          fill: "none",
+          d: "M19 52 27 45M37 45 44 49M52 46 62 38M71 36 78 40M86 37 97 18",
+          stroke: l.value.style.donutEvolution.axis.color,
+          "stroke-width": l.value.style.donutEvolution.axis.strokeWidth,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, pe),
+        t("path", {
+          d: "M10 55 12 55C12 53 14 52 15 52L15 50C13 50 10 52 10 55",
+          fill: l.value.style.donutEvolution.donuts.color,
+          stroke: "none",
+          style: { opacity: "0.3" }
+        }, null, 8, ge),
+        t("path", {
+          d: "M32 48 32 50C35 50 37 47 37 45L35 45C35 47 33 48 32 48",
+          fill: l.value.style.donutEvolution.donuts.color,
+          stroke: "none",
+          style: { opacity: "0.3" }
+        }, null, 8, we),
+        t("path", {
+          d: "M49 53 49 55A1 1 0 0049 45L49 47C53 47 53 53 49 53",
+          fill: l.value.style.donutEvolution.donuts.color,
+          stroke: "none",
+          style: { opacity: "0.3" }
+        }, null, 8, fe),
+        t("path", {
+          d: "M63 35C63 33 65 32 66 32L66 30C63 30 61 33 61 35L63 35",
+          fill: l.value.style.donutEvolution.donuts.color,
+          stroke: "none",
+          style: { opacity: "0.3" }
+        }, null, 8, me),
+        t("path", {
+          d: "M78 41A1 1 0 0088 41L86 41C86 45 80 45 80 41L78 41",
+          fill: l.value.style.donutEvolution.donuts.color,
+          stroke: "none",
+          style: { opacity: "0.3" }
+        }, null, 8, be),
+        t("path", {
+          d: "M95 14C95 17 98 19 100 19L100 17C99 17 97 16 97 14L95 14",
+          fill: l.value.style.donutEvolution.donuts.color,
+          stroke: "none",
+          style: { opacity: "0.3" }
+        }, null, 8, Me)
+      ], 12, ve)) : a("", !0),
+      c.value === "line" ? (e(), o("svg", {
+        key: 22,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 100 70",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        l.value.style.line.axis.show ? (e(), o("g", Ce, [
+          t("line", {
+            x1: "3",
+            x2: "3",
+            y1: "3",
+            y2: "67",
+            stroke: l.value.style.line.axis.color,
+            "stroke-width": l.value.style.line.axis.strokeWidth,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, 8, Le),
+          t("line", {
+            x1: "3",
+            x2: "97",
+            y1: "67",
+            y2: "67",
+            stroke: l.value.style.line.axis.color,
+            "stroke-width": l.value.style.line.axis.strokeWidth,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, 8, Ae)
+        ])) : a("", !0),
+        t("path", {
+          d: "M 9,60 22,50 35,55 48,36 61,40 74,25 87,26 90,12",
+          fill: "none",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          stroke: l.value.style.line.path.color,
+          "stroke-width": l.value.style.line.path.strokeWidth
+        }, null, 8, Be),
+        l.value.style.line.path.showPlots ? (e(), o("g", We, [
+          t("circle", {
+            cx: "9",
+            cy: "60",
+            r: l.value.style.line.path.strokeWidth,
+            fill: l.value.style.line.path.color
+          }, null, 8, je),
+          t("circle", {
+            cx: "90",
+            cy: "12",
+            r: l.value.style.line.path.strokeWidth,
+            fill: l.value.style.line.path.color
+          }, null, 8, Pe)
+        ])) : a("", !0)
+      ], 12, $e)) : a("", !0),
+      c.value === "bar" ? (e(), o("svg", {
+        key: 23,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 100 70",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        l.value.style.bar.axis.show ? (e(), o("g", qe, [
+          t("line", {
+            x1: "3",
+            x2: "3",
+            y1: "3",
+            y2: "67",
+            stroke: l.value.style.bar.axis.color,
+            "stroke-width": l.value.style.bar.axis.strokeWidth,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, 8, He),
+          t("line", {
+            x1: "3",
+            x2: "97",
+            y1: "67",
+            y2: "67",
+            stroke: l.value.style.bar.axis.color,
+            "stroke-width": l.value.style.bar.axis.strokeWidth,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, 8, Se)
+        ])) : a("", !0),
+        (e(!0), o(d, null, y(z.value, (r, i) => (e(), o("rect", {
+          fill: l.value.style.bar.color,
+          rx: l.value.style.bar.borderRadius,
+          x: 6 + 11.2 * i,
+          y: r,
+          width: l.value.style.bar.barWidth,
+          height: 67 - r
+        }, null, 8, Ee))), 256))
+      ], 12, ze)) : a("", !0),
+      c.value === "donut" ? (e(), o("svg", {
+        key: 24,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 400 400",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          d: " M 300 200 A 100 100 0 0 1 113 250",
+          fill: "none",
+          "stroke-width": l.value.style.donut.strokeWidth,
+          stroke: l.value.style.donut.color
+        }, null, 8, Ze),
+        t("path", {
+          d: " M 113 250 A 100 100 0 0 1 250 113",
+          fill: "none",
+          "stroke-width": l.value.style.donut.strokeWidth,
+          stroke: `${l.value.style.donut.color}${s(h)[60]}`
+        }, null, 8, Ne),
+        t("path", {
+          d: " M 250 113 A 100 100 0 0 1 300 200",
+          fill: "none",
+          "stroke-width": l.value.style.donut.strokeWidth,
+          stroke: `${l.value.style.donut.color}${s(h)[30]}`
+        }, null, 8, Fe)
+      ], 12, Ie)) : a("", !0),
+      c.value === "onion" ? (e(), o("svg", {
+        key: 25,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 400 400",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          d: " M 200 60 A 140 140 0 1 1 60 200",
+          stroke: l.value.style.onion.color,
+          "stroke-linecap": "round",
+          "stroke-width": "20",
+          fill: "none"
+        }, null, 8, Xe),
+        t("path", {
+          d: " M 200 100 A 100 100 0 1 1 100 200",
+          stroke: `${l.value.style.onion.color}${s(h)[60]}`,
+          "stroke-linecap": "round",
+          "stroke-width": "20",
+          fill: "none"
+        }, null, 8, Ve),
+        t("path", {
+          d: " M 200 140 A 60 60 0 1 1 140 200",
+          fill: "none",
+          stroke: `${l.value.style.onion.color}${s(h)[40]}`,
+          "stroke-linecap": "round",
+          "stroke-width": "20"
+        }, null, 8, Ge)
+      ], 12, Oe)) : a("", !0),
+      c.value === "gauge" ? (e(), o("svg", {
+        key: 26,
+        width: "100%",
+        viewBox: "0 0 400 400",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          d: " M 82 255 A 120 120 0 1 1 318 255",
+          fill: "none",
+          stroke: l.value.style.gauge.color,
+          "stroke-linecap": "round",
+          "stroke-width": "20"
+        }, null, 8, Re),
+        t("circle", {
+          cx: "200",
+          cy: "256",
+          r: "12",
+          fill: l.value.style.gauge.color
+        }, null, 8, Te),
+        t("line", {
+          x1: "200",
+          y1: "256",
+          x2: "250",
+          y2: "160",
+          "stroke-width": "8",
+          stroke: l.value.style.gauge.color,
+          "stroke-linecap": "round"
+        }, null, 8, Ye)
+      ], 4)) : a("", !0),
+      c.value === "quadrant" ? (e(), o("svg", {
+        key: 27,
+        xmlns: s(u),
+        viewBox: "0 0 100 100",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("line", {
+          x1: "50",
+          x2: "50",
+          y1: "3",
+          y2: "97",
+          stroke: l.value.style.quadrant.grid.color,
+          "stroke-width": l.value.style.quadrant.grid.strokeWidth
+        }, null, 8, Ue),
+        t("line", {
+          x1: "3",
+          x2: "97",
+          y1: "50",
+          y2: "50",
+          stroke: l.value.style.quadrant.grid.color,
+          "stroke-width": l.value.style.quadrant.grid.strokeWidth
+        }, null, 8, Je),
+        t("circle", {
+          fill: l.value.style.quadrant.plots.color,
+          r: l.value.style.quadrant.plots.radius,
+          cx: "20",
+          cy: "20"
+        }, null, 8, Ke),
+        t("circle", {
+          fill: l.value.style.quadrant.plots.color,
+          r: l.value.style.quadrant.plots.radius,
+          cx: "80",
+          cy: "60"
+        }, null, 8, Qe),
+        t("circle", {
+          fill: l.value.style.quadrant.plots.color,
+          r: l.value.style.quadrant.plots.radius,
+          cx: "65",
+          cy: "55"
+        }, null, 8, lo),
+        t("circle", {
+          fill: l.value.style.quadrant.plots.color,
+          r: l.value.style.quadrant.plots.radius,
+          cx: "36",
+          cy: "67"
+        }, null, 8, to),
+        t("circle", {
+          fill: l.value.style.quadrant.plots.color,
+          r: l.value.style.quadrant.plots.radius,
+          cx: "15",
+          cy: "75"
+        }, null, 8, eo),
+        t("circle", {
+          fill: l.value.style.quadrant.plots.color,
+          r: l.value.style.quadrant.plots.radius,
+          cx: "40",
+          cy: "55"
+        }, null, 8, oo),
+        t("circle", {
+          fill: l.value.style.quadrant.plots.color,
+          r: l.value.style.quadrant.plots.radius,
+          cx: "76",
+          cy: "32"
+        }, null, 8, so),
+        t("circle", {
+          fill: l.value.style.quadrant.plots.color,
+          r: l.value.style.quadrant.plots.radius,
+          cx: "85",
+          cy: "26"
+        }, null, 8, ro),
+        t("circle", {
+          fill: l.value.style.quadrant.plots.color,
+          r: l.value.style.quadrant.plots.radius,
+          cx: "55",
+          cy: "46"
+        }, null, 8, io)
+      ], 12, De)) : a("", !0),
+      c.value === "radar" ? (e(), o("svg", {
+        key: 28,
+        xmlns: s(u),
+        viewBox: "0 0 100 100",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("path", {
+          d: q.value,
+          fill: "none",
+          stroke: l.value.style.radar.grid.color,
+          "stroke-width": l.value.style.radar.grid.strokeWidth,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, ao),
+        t("path", {
+          d: H.value,
+          fill: "none",
+          stroke: `${l.value.style.radar.grid.color}${s(h)[70]}`,
+          "stroke-width": l.value.style.radar.grid.strokeWidth / 2,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, uo),
+        t("path", {
+          d: S.value,
+          fill: "none",
+          stroke: `${l.value.style.radar.grid.color}${s(h)[70]}`,
+          "stroke-width": l.value.style.radar.grid.strokeWidth / 2,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, co),
+        t("path", {
+          d: E.value,
+          fill: "none",
+          stroke: `${l.value.style.radar.grid.color}${s(h)[70]}`,
+          "stroke-width": l.value.style.radar.grid.strokeWidth / 2.5,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, null, 8, ho),
+        t("path", {
+          d: "M 9,50 91,50",
+          stroke: `${l.value.style.radar.grid.color}${s(h)[50]}`,
+          "stroke-width": l.value.style.radar.grid.strokeWidth / 2
+        }, null, 8, yo),
+        t("path", {
+          d: "M 29.5,14.5 70.5 85.5",
+          stroke: `${l.value.style.radar.grid.color}${s(h)[50]}`,
+          "stroke-width": l.value.style.radar.grid.strokeWidth / 2
+        }, null, 8, ko),
+        t("path", {
+          d: "M 29.5,85.5 70.5 14.5",
+          stroke: `${l.value.style.radar.grid.color}${s(h)[50]}`,
+          "stroke-width": l.value.style.radar.grid.strokeWidth / 2
+        }, null, 8, vo),
+        t("path", {
+          d: "M 34,23 68.5,18, 70,50 61.5,70 35,75.5 10,50  Z",
+          stroke: "none",
+          "stroke-linejoin": "round",
+          fill: `${l.value.style.radar.shapes.color}${s(h)[30]}`
+        }, null, 8, _o),
+        t("path", {
+          d: "M 43.5,40 64.5,25, 84,50 55.5,60 29.5,85.5 25,50  Z",
+          stroke: "none",
+          "stroke-linejoin": "round",
+          fill: `${l.value.style.radar.shapes.color}${s(h)[50]}`
+        }, null, 8, xo)
+      ], 12, no)) : a("", !0),
+      c.value === "waffle" ? (e(), o("svg", {
+        key: 29,
+        xmlns: s(u),
+        viewBox: "0 0 100 100",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        (e(), o(d, null, y(10, (r, i) => t("g", null, [
+          (e(), o(d, null, y(10, (C, v) => t("g", null, [
+            t("rect", {
+              x: 3 + v * 9.5,
+              y: 3 + i * 9.5,
+              height: 9,
+              width: 9,
+              fill: `${l.value.style.waffle.color}${s(h)[20]}`,
+              rx: "1"
+            }, null, 8, go)
+          ])), 64))
+        ])), 64)),
+        (e(), o(d, null, y(10, (r, i) => t("g", null, [
+          (e(), o(d, null, y(10, (C, v) => t("g", null, [
+            i > 2 ? (e(), o("rect", {
+              key: 0,
+              x: 3 + v * 9.5,
+              y: 3 + i * 9.5,
+              height: 9,
+              width: 9,
+              fill: `${l.value.style.waffle.color}${s(h)[30]}`,
+              rx: "1"
+            }, null, 8, wo)) : a("", !0)
+          ])), 64))
+        ])), 64)),
+        (e(), o(d, null, y(10, (r, i) => t("g", null, [
+          (e(), o(d, null, y(10, (C, v) => t("g", null, [
+            i > 6 ? (e(), o("rect", {
+              key: 0,
+              x: 3 + v * 9.5,
+              y: 3 + i * 9.5,
+              height: 9,
+              width: 9,
+              fill: `${l.value.style.waffle.color}${s(h)[50]}`,
+              rx: "1"
+            }, null, 8, fo)) : a("", !0)
+          ])), 64))
+        ])), 64))
+      ], 12, po)) : a("", !0),
+      c.value === "table" ? (e(), o("svg", {
+        key: 30,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 100 70",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        t("rect", {
+          fill: `${l.value.style.table.th.color}${s(h)[50]}`,
+          x: 3.5,
+          y: 5,
+          height: "10",
+          width: "93"
+        }, null, 8, bo),
+        t("rect", {
+          fill: `${l.value.style.table.th.color}${s(h)[50]}`,
+          x: 3.5,
+          y: 15,
+          height: "50",
+          width: "23.25"
+        }, null, 8, Mo),
+        (e(), o(d, null, y(7, (r, i) => t("line", {
+          x1: "3.7",
+          x2: "96.3",
+          y1: 5 + i * 10,
+          y2: 5 + i * 10,
+          stroke: l.value.style.table.td.color,
+          "stroke-width": l.value.style.table.td.strokeWidth,
+          "stroke-linecap": "round"
+        }, null, 8, $o)), 64)),
+        (e(), o(d, null, y(5, (r, i) => t("line", {
+          x1: 3.5 + i * 23.25,
+          x2: 3.5 + i * 23.25,
+          y1: "5",
+          y2: "65",
+          stroke: l.value.style.table.td.color,
+          "stroke-width": l.value.style.table.td.strokeWidth,
+          "stroke-linecap": "round"
+        }, null, 8, Co)), 64))
+      ], 12, mo)) : a("", !0),
+      c.value === "rating" ? (e(), o(d, { key: 31 }, [
+        l.value.style.rating.useSmiley ? (e(), o("div", {
+          key: 0,
+          style: n(`display:flex;flex-direction:row;align-items:center;justify-content:center;width:${l.value.style.rating.maxWidth}px`)
+        }, [
+          l.value.style.rating.filled ? (e(), o("svg", {
+            key: 0,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, [
+            Ao,
+            t("path", {
+              d: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-5 9.86a4.5 4.5 0 0 0 -3.214 1.35a1 1 0 1 0 1.428 1.4a2.5 2.5 0 0 1 3.572 0a1 1 0 0 0 1.428 -1.4a4.5 4.5 0 0 0 -3.214 -1.35zm-2.99 -4.2l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm6 0l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z",
+              "stroke-width": "0",
+              fill: l.value.style.rating.color
+            }, null, 8, Bo)
+          ], 12, Lo)) : (e(), o("svg", {
+            key: 1,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, Po, 12, Wo)),
+          l.value.style.rating.filled ? (e(), o("svg", {
+            key: 2,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, [
+            qo,
+            t("path", {
+              d: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-2 10.66h-6l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h6l.117 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-5.99 -5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm6 0l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z",
+              "stroke-width": "0",
+              fill: l.value.style.rating.color
+            }, null, 8, Ho)
+          ], 12, zo)) : (e(), o("svg", {
+            key: 3,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, Io, 12, So)),
+          l.value.style.rating.filled ? (e(), o("svg", {
+            key: 4,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, [
+            No,
+            t("path", {
+              d: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-7.99 5.66l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm6 0l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z",
+              "stroke-width": "0",
+              fill: l.value.style.rating.color
+            }, null, 8, Fo)
+          ], 12, Zo)) : (e(), o("svg", {
+            key: 5,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, To, 12, Oo)),
+          l.value.style.rating.filled ? (e(), o("svg", {
+            key: 6,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, [
+            Do,
+            t("path", {
+              d: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.8 10.946a1 1 0 0 0 -1.414 .014a2.5 2.5 0 0 1 -3.572 0a1 1 0 0 0 -1.428 1.4a4.5 4.5 0 0 0 6.428 0a1 1 0 0 0 -.014 -1.414zm-6.19 -5.286l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993zm6 0l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993z",
+              "stroke-width": "0",
+              fill: l.value.style.rating.color
+            }, null, 8, Uo)
+          ], 12, Yo)) : (e(), o("svg", {
+            key: 7,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, Qo, 12, Jo)),
+          l.value.style.rating.filled ? (e(), o("svg", {
+            key: 8,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, [
+            ts,
+            t("path", {
+              d: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-2 9.66h-6a1 1 0 0 0 -1 1v.05a3.975 3.975 0 0 0 3.777 3.97l.227 .005a4.026 4.026 0 0 0 3.99 -3.79l.006 -.206a1 1 0 0 0 -1 -1.029zm-5.99 -5l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993zm6 0l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993z",
+              "stroke-width": "0",
+              fill: l.value.style.rating.color
+            }, null, 8, es)
+          ], 12, ls)) : (e(), o("svg", {
+            key: 9,
+            xmlns: s(u),
+            style: n(`width:${l.value.style.rating.maxWidth / 5}px;aspect-ratio: 1 / 1`),
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: l.value.style.rating.color,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            fill: "none"
+          }, rs, 12, os))
+        ], 4)) : (e(), o("svg", {
+          key: 1,
+          xmlns: s(u),
+          width: "100%",
+          viewBox: "0 0 100 30",
+          style: n(`background:${l.value.style.backgroundColor};max-width:${l.value.style.rating.maxWidth}px`)
+        }, [
+          (e(), o(d, null, y(5, (r, i) => t("polygon", {
+            points: s(X)({
+              plot: { x: 10 + i * 20, y: 15 },
+              radius: 6
+            }),
+            fill: l.value.style.rating.filled ? l.value.style.rating.color : "none",
+            stroke: l.value.style.rating.color,
+            "stroke-width": l.value.style.rating.strokeWidth,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, 8, ns)), 64))
+        ], 12, is))
+      ], 64)) : a("", !0),
+      c.value === "verticalBar" ? (e(), o("svg", {
+        key: 32,
+        xmlns: s(u),
+        width: "100%",
+        viewBox: "0 0 100 100",
+        style: n(`background:${l.value.style.backgroundColor}`)
+      }, [
+        l.value.style.verticalBar.axis.show ? (e(), o("g", us, [
+          t("line", {
+            x1: 3,
+            x2: 3,
+            y1: 3,
+            y2: 97,
+            stroke: l.value.style.verticalBar.axis.color,
+            "stroke-width": l.value.style.verticalBar.axis.strokeWidth
+          }, null, 8, cs)
+        ])) : a("", !0),
+        (e(), o(d, null, y(6, (r, i) => t("rect", {
+          x: 3,
+          y: 5 + i * 15.6,
+          height: "12",
+          width: 94 - 94 * i / 6,
+          fill: l.value.style.verticalBar.color,
+          rx: l.value.style.verticalBar.borderRadius
+        }, null, 8, ds)), 64))
+      ], 12, as)) : a("", !0)
+    ], 14, R));
+  }
+}, xs = /* @__PURE__ */ G(hs, [["__scopeId", "data-v-73139463"]]);
+export {
+  xs as default
+};