vue-data-ui 2.3.27 → 2.3.29

package/dist/vue-ui-sparkbar-DUx1qVzQ.js

@@ -0,0 +1,280 @@
+import { computed as g, ref as x, onMounted as G, watch as W, nextTick as q, openBlock as r, createElementBlock as v, normalizeStyle as y, unref as s, renderSlot as I, normalizeProps as P, mergeProps as H, createCommentVNode as d, createElementVNode as c, toDisplayString as p, Fragment as z, renderList as X, guardReactiveProps as R, createBlock as J } from "vue";
+import { u as K, c as Q, t as Y, a as Z, p as k, b as ee, o as te, e as L, g as le, d as ae, v as _, i as w, f as b, X as oe, s as se } from "./index-BlXzlBwZ.js";
+import { u as T } from "./useNestedProp-BoNl5H_z.js";
+import ue from "./vue-ui-skeleton-CJ2R5R6u.js";
+const ie = ["onClick"], ne = { key: 1 }, re = ["xmlns", "viewBox"], ve = ["id"], ce = ["stop-color"], de = ["stop-color"], ye = ["height", "width", "fill", "rx"], pe = ["height", "width", "fill", "rx"], fe = ["height", "width", "fill", "rx"], ke = {
+  __name: "vue-ui-sparkbar",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * Used in VueUiRadar's tooltip exclusively
+     */
+    backgroundOpacity: {
+      type: Number,
+      default: 100
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(C, { emit: E }) {
+    const a = C, { vue_ui_sparkbar: O } = K(), $ = g(() => !!a.dataset && a.dataset.length), S = x(Q()), e = g(() => {
+      const t = T({
+        userConfig: a.config,
+        defaultConfig: O
+      });
+      return t.theme ? {
+        ...T({
+          userConfig: Y.vue_ui_sparkbar[t.theme] || a.config,
+          defaultConfig: t
+        }),
+        customPalette: Z[t.theme] || k
+      } : t;
+    }), V = g(() => ee(e.value.customPalette)), f = x(a.dataset.map((t) => ({
+      ...t,
+      value: e.value.style.animation.show ? 0 : t.value || 0,
+      formatter: t.formatter || null
+    }))), A = x(null);
+    G(async () => {
+      te(a.dataset) && L({
+        componentName: "VueUiSparkbar",
+        type: "dataset"
+      }), D();
+    });
+    function D() {
+      if (e.value.style.animation.show) {
+        let N = function() {
+          n += l / t, n < l ? (f.value = f.value.map((u, h) => ({
+            ...u,
+            value: u.value += o[h]
+          })), A.value = requestAnimationFrame(N)) : f.value = a.dataset.map((u) => ({
+            ...u,
+            value: u.value || 0,
+            formatter: u.formatter || null
+          }));
+        };
+        const t = e.value.style.animation.animationFrames, o = a.dataset.map((u, h) => u.value / t), l = a.dataset.map((u) => u.value || 0).reduce((u, h) => u + h, 0);
+        let n = 0;
+        N();
+      }
+    }
+    W(() => a.dataset, async (t) => {
+      cancelAnimationFrame(A.value), f.value = a.dataset.map((o) => ({
+        ...o,
+        value: e.value.style.animation.show ? 0 : o.value || 0,
+        formatter: o.formatter || null
+      })), q(D);
+    }, { deep: !0 });
+    const i = x({
+      width: 500,
+      height: 16
+    }), B = g(() => Math.max(...a.dataset.map((t) => t.value))), M = g(() => (a.dataset.forEach((t, o) => {
+      le({
+        datasetObject: t,
+        requiredAttributes: ["name", "value"]
+      }).forEach((l) => {
+        L({
+          componentName: "VueUiSparkbar",
+          type: "datasetSerieAttribute",
+          property: l,
+          index: o
+        });
+      });
+    }), f.value.map((t, o) => ({
+      ...t,
+      value: t.value || 0,
+      color: ae(t.color) || V.value[o] || k[o] || k[o % k.length]
+    }))));
+    function U(t) {
+      return t / B.value;
+    }
+    function F(t) {
+      return e.value.style.layout.independant ? t.target ? t.value / t.target : e.value.style.layout.percentage ? t.value > 100 ? 1 : t.value / 100 : e.value.style.layout.target === 0 ? 1 : t.value / e.value.style.layout.target : U(t.value);
+    }
+    function m(t) {
+      return e.value.style.layout.independant && t.target || e.value.style.layout.target;
+    }
+    function j(t, o) {
+      E("selectDatapoint", { datapoint: t, index: o });
+    }
+    return (t, o) => (r(), v("div", {
+      style: y({
+        width: "100%",
+        fontFamily: e.value.style.fontFamily,
+        background: e.value.style.backgroundColor + s(_)[a.backgroundOpacity]
+      })
+    }, [
+      t.$slots.title ? I(t.$slots, "title", P(H({ key: 0 }, { title: { ...t.title, title: e.value.style.title.text, subtitle: e.value.style.title.subtitle.text } }))) : d("", !0),
+      !t.$slots.title && e.value.style.title.text ? (r(), v("div", {
+        key: 1,
+        class: "vue-ui-sparkbar-title-container",
+        style: y({
+          background: e.value.style.title.backgroundColor,
+          margin: e.value.style.title.margin,
+          textAlign: e.value.style.title.textAlign
+        })
+      }, [
+        c("div", {
+          class: "vue-ui-sparkbar-title",
+          style: y({
+            fontSize: e.value.style.title.fontSize + "px",
+            color: e.value.style.title.color,
+            fontWeight: e.value.style.title.bold ? "bold" : "normal"
+          })
+        }, p(e.value.style.title.text), 5),
+        e.value.style.title.subtitle.text ? (r(), v("div", {
+          key: 0,
+          class: "vue-ui-sparkbar-subtitle",
+          style: y({
+            fontSize: e.value.style.title.subtitle.fontSize + "px",
+            color: e.value.style.title.subtitle.color,
+            fontWeight: e.value.style.title.subtitle.bold ? "bold" : "normal"
+          })
+        }, p(e.value.style.title.subtitle.text), 5)) : d("", !0)
+      ], 4)) : d("", !0),
+      (r(!0), v(z, null, X(M.value, (l, n) => (r(), v(z, null, [
+        $.value ? (r(), v("div", {
+          key: 0,
+          style: y(`display:flex !important;${["left", "right"].includes(e.value.style.labels.name.position) ? `flex-direction: ${e.value.style.labels.name.position === "right" ? "row-reverse" : "row"} !important` : "flex-direction:column !important"};gap:${e.value.style.gap}px !important;align-items:center;${C.dataset.length > 0 && n !== C.dataset.length - 1 ? "margin-bottom:6px" : ""}`),
+          onClick: () => j(l, n)
+        }, [
+          I(t.$slots, "data-label", P(R({ bar: {
+            ...l,
+            target: m(l),
+            valueLabel: s(w)(
+              l.formatter,
+              l.value,
+              s(b)({
+                p: l.prefix || "",
+                v: l.value,
+                s: l.suffix || "",
+                r: l.rounding || 0
+              }),
+              { datapoint: l, seriesIndex: n }
+            ),
+            targetLabel: s(w)(
+              l.formatter,
+              m(l),
+              s(b)({
+                p: l.prefix || "",
+                v: m(l),
+                s: l.suffix || "",
+                r: l.rounding || 0
+              }),
+              { datapoint: l, seriesIndex: n }
+            )
+          } }))),
+          t.$slots["data-label"] ? d("", !0) : (r(), v("div", {
+            key: 0,
+            style: y({
+              width: e.value.style.labels.name.width,
+              color: e.value.style.labels.name.color,
+              fontSize: e.value.style.labels.fontSize + "px",
+              fontWeight: e.value.style.labels.name.bold ? "bold" : "normal",
+              textAlign: ["left", "right"].includes(e.value.style.labels.name.position) || ["top", "top-left"].includes(e.value.style.labels.name.position) ? "left" : e.value.style.labels.name.position === "top-center" ? "center" : "right"
+            })
+          }, [
+            c("span", null, p(l.name), 1),
+            e.value.style.labels.value.show ? (r(), v("span", {
+              key: 0,
+              style: y(`font-weight:${e.value.style.labels.value.bold ? "bold" : "normal"}`)
+            }, ": " + p(s(w)(
+              l.formatter,
+              l.value,
+              s(b)({
+                p: l.prefix || "",
+                v: l.value,
+                s: l.suffix || "",
+                r: l.rounding || 0
+              }),
+              { datapoint: l, seriesIndex: n }
+            )), 5)) : d("", !0),
+            e.value.style.layout.showTargetValue ? (r(), v("span", ne, p(" " + e.value.style.layout.targetValueText) + " " + p(s(w)(
+              l.formatter,
+              m(l),
+              s(b)({
+                p: l.prefix || "",
+                v: m(l),
+                s: l.suffix || "",
+                r: l.rounding || 0
+              }),
+              { datapoint: l, seriesIndex: n }
+            )), 1)) : d("", !0)
+          ], 4)),
+          (r(), v("svg", {
+            xmlns: s(oe),
+            viewBox: `0 0 ${i.value.width} ${i.value.height}`,
+            width: "100%"
+          }, [
+            c("defs", null, [
+              c("linearGradient", {
+                x1: "0%",
+                y1: "0%",
+                x2: "100%",
+                y2: "0%",
+                id: `sparkbar_gradient_${n}_${S.value}`
+              }, [
+                c("stop", {
+                  offset: "0%",
+                  "stop-color": `${s(se)(l.color, 0.03)}${s(_)[100 - e.value.style.bar.gradient.intensity]}`
+                }, null, 8, ce),
+                c("stop", {
+                  offset: "100%",
+                  "stop-color": l.color
+                }, null, 8, de)
+              ], 8, ve)
+            ]),
+            c("rect", {
+              height: i.value.height,
+              width: i.value.width,
+              x: 0,
+              y: 0,
+              fill: `${e.value.style.gutter.backgroundColor}${s(_)[e.value.style.gutter.opacity]}`,
+              rx: i.value.height / 2
+            }, null, 8, ye),
+            c("rect", {
+              height: i.value.height,
+              width: i.value.width * F(l),
+              x: 0,
+              y: 0,
+              fill: e.value.style.bar.gradient.underlayerColor,
+              rx: i.value.height / 2
+            }, null, 8, pe),
+            c("rect", {
+              height: i.value.height,
+              width: i.value.width * F(l),
+              x: 0,
+              y: 0,
+              fill: e.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${n}_${S.value})` : l.color,
+              rx: i.value.height / 2
+            }, null, 8, fe)
+          ], 8, re))
+        ], 12, ie)) : d("", !0)
+      ], 64))), 256)),
+      $.value ? d("", !0) : (r(), J(ue, {
+        key: 2,
+        config: {
+          type: "sparkbar",
+          style: {
+            backgroundColor: e.value.style.backgroundColor,
+            sparkbar: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"]))
+    ], 4));
+  }
+};
+export {
+  ke as default
+};

package/dist/{vue-ui-sparkgauge-B5g5nxUh.cjs → vue-ui-sparkgauge-DPusPoRv.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("./index-BQOxn6SH.cjs"),p=require("./useNestedProp-BtqgWTf9.cjs"),C=require("./vue-ui-skeleton-CcrGR_Vh.cjs"),$=["xmlns","viewBox"],w=["id"],N=["stop-color"],S=["stop-color"],L=["d","stroke","stroke-linecap"],B=["d","stroke","stroke-linecap","stroke-dashoffset"],E=["x","y","font-size","fill","font-weight"],z={__name:"vue-ui-sparkgauge",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(g){const a=g,{vue_ui_sparkgauge:k}=u.useConfig(),c=e.computed(()=>!!a.dataset&&Object.keys(a.dataset).length);e.onMounted(()=>{u.objectIsEmpty(a.dataset)?u.error({componentName:"VueUiSparkgauge",type:"dataset"}):u.getMissingDatasetAttributes({datasetObject:a.dataset,requiredAttributes:["value","min","max"]}).forEach(o=>{u.error({componentName:"VueUiSparkgauge",type:"datasetAttribute",property:o})})});const d=e.ref(u.createUid()),t=e.computed(()=>{const o=p.useNestedProp({userConfig:a.config,defaultConfig:k});return o.theme?{...p.useNestedProp({userConfig:u.themes.vue_ui_sparkgauge[o.theme]||a.config,defaultConfig:o})}:o}),n=e.computed(()=>({height:t.value.style.height,width:128,base:t.value.style.basePosition})),l=e.computed(()=>{const o=a.dataset.min??0,i=a.dataset.max??0,_=i-o;return{min:o,max:i,diff:_}}),s=e.ref(t.value.style.animation.show?l.value.min:a.dataset.value);e.watch(()=>a.dataset.value,()=>{s.value=e.ref(t.value.style.animation.show?l.value.min:a.dataset.value),m()});const v=e.computed(()=>s.value>l.value.max?l.value.max:s.value<l.value.min?l.value.min:s.value),b=e.computed(()=>l.value.diff/t.value.style.animation.speedMs);e.onMounted(()=>{m()});function m(){function o(){s.value+=b.value,s.value<a.dataset.value?requestAnimationFrame(o):s.value=a.dataset.value}t.value.style.animation.show&&(s.value=l.value.min,o())}const r=e.computed(()=>a.dataset.title??""),y=e.computed(()=>s.value>=0?(v.value-l.value.min)/l.value.diff:(Math.abs(l.value.min)-Math.abs(v.value))/l.value.diff),f=e.computed(()=>u.interpolateColorHex(t.value.style.colors.min,t.value.style.colors.max,l.value.min,l.value.max,s.value)),h=e.computed(()=>t.value.style.dataLabel.autoColor?f.value:t.value.style.dataLabel.color),x=e.computed(()=>t.value.style.track.autoColor?f.value:t.value.style.track.color);return(o,i)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width: 100%; background:${t.value.style.background}`)},[t.value.style.title.show&&r.value&&t.value.style.title.position==="top"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vue-data-ui-sparkgauge-label",style:e.normalizeStyle(`font-size:${t.value.style.title.fontSize}px;text-align:${t.value.style.title.textAlign};font-weight:${t.value.style.title.bold?"bold":"normal"};color:${t.value.style.title.color}`)},e.toDisplayString(r.value),5)):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createElementBlock("svg",{key:1,xmlns:e.unref(u.XMLNS),viewBox:`0 0 ${n.value.width} ${n.value.height}`,style:e.normalizeStyle(`overflow: visible; background:${t.value.style.background}; width:100%;`)},[e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:`gradient_${d.value}`,x1:"-10%",y1:"100%",x2:"110%",y2:"100%"},[e.createElementVNode("stop",{offset:"0%","stop-color":t.value.style.colors.min},null,8,N),e.createElementVNode("stop",{offset:"100%","stop-color":t.value.style.colors.max},null,8,S)],8,w)]),e.createElementVNode("path",{d:`M10 ${n.value.base} A 1 1 0 1 1 118 ${n.value.base}`,stroke:t.value.style.gutter.color,"stroke-width":8,"stroke-linecap":t.value.style.gutter.strokeLinecap,fill:"none"},null,8,L),y.value!==0?(e.openBlock(),e.createElementBlock("path",{key:0,d:`M10 ${n.value.base} A 1 1 0 1 1 118 ${n.value.base}`,stroke:t.value.style.colors.showGradient?`url(#gradient_${d.value})`:x.value,"stroke-width":8,"stroke-linecap":t.value.style.track.strokeLinecap,fill:"none","stroke-dasharray":169.5,"stroke-dashoffset":169.5-169.5*y.value,class:e.normalizeClass({"vue-ui-sparkgauge-track":t.value.style.animation.show}),style:e.normalizeStyle(t.value.style.animation.show?`animation: vue-ui-sparkgauge-animation ${t.value.style.animation.speedMs}ms ease-in;`:"")},null,14,B)):e.createCommentVNode("",!0),e.createElementVNode("text",{"text-anchor":"middle",x:n.value.width/2,y:n.value.base+6+t.value.style.dataLabel.offsetY,"font-size":t.value.style.dataLabel.fontSize,fill:h.value,"font-weight":t.value.style.dataLabel.bold?"bold":"normal"},e.toDisplayString(e.unref(u.dataLabel)({p:t.value.style.dataLabel.prefix,v:s.value,s:t.value.style.dataLabel.suffix,r:t.value.style.dataLabel.rounding})),9,E)],12,$)):e.createCommentVNode("",!0),c.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(C.default,{key:2,config:{type:"gauge",style:{backgroundColor:t.value.style.background,gauge:{color:"#CCCCCC"}}}},null,8,["config"])),t.value.style.title.show&&r.value&&t.value.style.title.position==="bottom"?(e.openBlock(),e.createElementBlock("div",{key:3,class:"vue-data-ui-sparkgauge-label",style:e.normalizeStyle(`font-size:${t.value.style.title.fontSize}px;text-align:${t.value.style.title.textAlign};font-weight:${t.value.style.title.bold?"bold":"normal"};font-weight:${t.value.style.title.bold?"bold":"normal"};color:${t.value.style.title.color}`)},e.toDisplayString(r.value),5)):e.createCommentVNode("",!0)],4))}};exports.default=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("./index-hKWfT7Wa.cjs"),g=require("./useNestedProp-Cggpoz7e.cjs"),C=require("./vue-ui-skeleton-j-IOiy5w.cjs"),$=["xmlns","viewBox"],w=["id"],N=["stop-color"],S=["stop-color"],L=["d","stroke","stroke-linecap"],B=["d","stroke","stroke-linecap","stroke-dashoffset"],E=["x","y","font-size","fill","font-weight"],z={__name:"vue-ui-sparkgauge",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(k){const a=k,{vue_ui_sparkgauge:b}=u.useConfig(),c=e.computed(()=>!!a.dataset&&Object.keys(a.dataset).length);e.onMounted(()=>{u.objectIsEmpty(a.dataset)?u.error({componentName:"VueUiSparkgauge",type:"dataset"}):u.getMissingDatasetAttributes({datasetObject:a.dataset,requiredAttributes:["value","min","max"]}).forEach(s=>{u.error({componentName:"VueUiSparkgauge",type:"datasetAttribute",property:s})})});const v=e.ref(u.createUid()),t=e.computed(()=>{const s=g.useNestedProp({userConfig:a.config,defaultConfig:b});return s.theme?{...g.useNestedProp({userConfig:u.themes.vue_ui_sparkgauge[s.theme]||a.config,defaultConfig:s})}:s}),n=e.computed(()=>({height:t.value.style.height,width:128,base:t.value.style.basePosition})),l=e.computed(()=>{const s=a.dataset.min??0,i=a.dataset.max??0,_=i-s;return{min:s,max:i,diff:_}}),o=e.ref(t.value.style.animation.show?l.value.min:a.dataset.value);e.watch(()=>a.dataset.value,()=>{o.value=e.ref(t.value.style.animation.show?l.value.min:a.dataset.value),m()});const d=e.computed(()=>o.value>l.value.max?l.value.max:o.value<l.value.min?l.value.min:o.value),h=e.computed(()=>l.value.diff/t.value.style.animation.speedMs);e.onMounted(()=>{m()});function m(){function s(){o.value+=h.value,o.value<a.dataset.value?requestAnimationFrame(s):o.value=a.dataset.value}t.value.style.animation.show&&(o.value=l.value.min,s())}const r=e.computed(()=>a.dataset.title??""),y=e.computed(()=>o.value>=0?(d.value-l.value.min)/l.value.diff:(Math.abs(l.value.min)-Math.abs(d.value))/l.value.diff),f=e.computed(()=>u.interpolateColorHex(t.value.style.colors.min,t.value.style.colors.max,l.value.min,l.value.max,o.value)),p=e.computed(()=>t.value.style.dataLabel.autoColor?f.value:t.value.style.dataLabel.color),x=e.computed(()=>t.value.style.track.autoColor?f.value:t.value.style.track.color);return(s,i)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(`font-family:${t.value.style.fontFamily};width: 100%; background:${t.value.style.background}`)},[t.value.style.title.show&&r.value&&t.value.style.title.position==="top"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vue-data-ui-sparkgauge-label",style:e.normalizeStyle(`font-size:${t.value.style.title.fontSize}px;text-align:${t.value.style.title.textAlign};font-weight:${t.value.style.title.bold?"bold":"normal"};color:${t.value.style.title.color}`)},e.toDisplayString(r.value),5)):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createElementBlock("svg",{key:1,xmlns:e.unref(u.XMLNS),viewBox:`0 0 ${n.value.width} ${n.value.height}`,style:e.normalizeStyle(`overflow: visible; background:${t.value.style.background}; width:100%;`)},[e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:`gradient_${v.value}`,x1:"-10%",y1:"100%",x2:"110%",y2:"100%"},[e.createElementVNode("stop",{offset:"0%","stop-color":t.value.style.colors.min},null,8,N),e.createElementVNode("stop",{offset:"100%","stop-color":t.value.style.colors.max},null,8,S)],8,w)]),e.createElementVNode("path",{d:`M10 ${n.value.base} A 1 1 0 1 1 118 ${n.value.base}`,stroke:t.value.style.gutter.color,"stroke-width":8,"stroke-linecap":t.value.style.gutter.strokeLinecap,fill:"none"},null,8,L),y.value!==0?(e.openBlock(),e.createElementBlock("path",{key:0,d:`M10 ${n.value.base} A 1 1 0 1 1 118 ${n.value.base}`,stroke:t.value.style.colors.showGradient?`url(#gradient_${v.value})`:x.value,"stroke-width":8,"stroke-linecap":t.value.style.track.strokeLinecap,fill:"none","stroke-dasharray":169.5,"stroke-dashoffset":169.5-169.5*y.value,class:e.normalizeClass({"vue-ui-sparkgauge-track":t.value.style.animation.show}),style:e.normalizeStyle(t.value.style.animation.show?`animation: vue-ui-sparkgauge-animation ${t.value.style.animation.speedMs}ms ease-in;`:"")},null,14,B)):e.createCommentVNode("",!0),e.createElementVNode("text",{"text-anchor":"middle",x:n.value.width/2,y:n.value.base+6+t.value.style.dataLabel.offsetY,"font-size":t.value.style.dataLabel.fontSize,fill:p.value,"font-weight":t.value.style.dataLabel.bold?"bold":"normal"},e.toDisplayString(e.unref(u.applyDataLabel)(t.value.style.dataLabel.formatter,o.value,e.unref(u.dataLabel)({p:t.value.style.dataLabel.prefix,v:o.value,s:t.value.style.dataLabel.suffix,r:t.value.style.dataLabel.rounding}),{datapoint:o.value,color:p.value})),9,E)],12,$)):e.createCommentVNode("",!0),c.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(C.default,{key:2,config:{type:"gauge",style:{backgroundColor:t.value.style.background,gauge:{color:"#CCCCCC"}}}},null,8,["config"])),t.value.style.title.show&&r.value&&t.value.style.title.position==="bottom"?(e.openBlock(),e.createElementBlock("div",{key:3,class:"vue-data-ui-sparkgauge-label",style:e.normalizeStyle(`font-size:${t.value.style.title.fontSize}px;text-align:${t.value.style.title.textAlign};font-weight:${t.value.style.title.bold?"bold":"normal"};font-weight:${t.value.style.title.bold?"bold":"normal"};color:${t.value.style.title.color}`)},e.toDisplayString(r.value),5)):e.createCommentVNode("",!0)],4))}};exports.default=z;

package/dist/{vue-ui-sparkgauge-DJPt0cLe.js → vue-ui-sparkgauge-xrvp9g87.js}

@@ -1,8 +1,8 @@
-import { computed as s, onMounted as _, ref as m, watch as F, openBlock as n, createElementBlock as r, normalizeStyle as v, toDisplayString as y, createCommentVNode as c, unref as $, createElementVNode as i, normalizeClass as O, createBlock as j } from "vue";
-import { u as B, o as E, e as w, g as D, c as G, t as I, H as U, X as V, f as q } from "./index-DiWO-_ca.js";
-import { u as C } from "./useNestedProp-DNX5EefQ.js";
-import H from "./vue-ui-skeleton-CeNL0kH-.js";
-const P = ["xmlns", "viewBox"], T = ["id"], X = ["stop-color"], R = ["stop-color"], Y = ["d", "stroke", "stroke-linecap"], J = ["d", "stroke", "stroke-linecap", "stroke-dashoffset"], K = ["x", "y", "font-size", "fill", "font-weight"], te = {
+import { computed as s, onMounted as w, ref as m, watch as F, openBlock as n, createElementBlock as r, normalizeStyle as v, toDisplayString as y, createCommentVNode as c, unref as g, createElementVNode as i, normalizeClass as O, createBlock as j } from "vue";
+import { u as B, o as D, e as C, g as E, c as I, t as G, I as U, X as V, i as q, f as P } from "./index-BlXzlBwZ.js";
+import { u as L } from "./useNestedProp-BoNl5H_z.js";
+import T from "./vue-ui-skeleton-CJ2R5R6u.js";
+const X = ["xmlns", "viewBox"], H = ["id"], R = ["stop-color"], Y = ["stop-color"], J = ["d", "stroke", "stroke-linecap"], K = ["d", "stroke", "stroke-linecap", "stroke-dashoffset"], Q = ["x", "y", "font-size", "fill", "font-weight"], ae = {
   __name: "vue-ui-sparkgauge",
   props: {
     config: {
@@ -18,61 +18,61 @@ const P = ["xmlns", "viewBox"], T = ["id"], X = ["stop-color"], R = ["stop-color
       }
     }
   },
-  setup(L) {
-    const t = L, { vue_ui_sparkgauge: A } = B(), g = s(() => !!t.dataset && Object.keys(t.dataset).length);
-    _(() => {
-      E(t.dataset) ? w({
+  setup(A) {
+    const t = A, { vue_ui_sparkgauge: S } = B(), p = s(() => !!t.dataset && Object.keys(t.dataset).length);
+    w(() => {
+      D(t.dataset) ? C({
         componentName: "VueUiSparkgauge",
         type: "dataset"
-      }) : D({
+      }) : E({
         datasetObject: t.dataset,
         requiredAttributes: ["value", "min", "max"]
-      }).forEach((l) => {
-        w({
+      }).forEach((o) => {
+        C({
           componentName: "VueUiSparkgauge",
           type: "datasetAttribute",
-          property: l
+          property: o
         });
       });
     });
-    const p = m(G()), e = s(() => {
-      const l = C({
+    const b = m(I()), e = s(() => {
+      const o = L({
         userConfig: t.config,
-        defaultConfig: A
+        defaultConfig: S
       });
-      return l.theme ? {
-        ...C({
-          userConfig: I.vue_ui_sparkgauge[l.theme] || t.config,
-          defaultConfig: l
+      return o.theme ? {
+        ...L({
+          userConfig: G.vue_ui_sparkgauge[o.theme] || t.config,
+          defaultConfig: o
         })
-      } : l;
+      } : o;
     }), u = s(() => ({
       height: e.value.style.height,
       width: 128,
       base: e.value.style.basePosition
     })), a = s(() => {
-      const l = t.dataset.min ?? 0, f = t.dataset.max ?? 0, N = f - l;
+      const o = t.dataset.min ?? 0, f = t.dataset.max ?? 0, N = f - o;
       return {
-        min: l,
+        min: o,
         max: f,
         diff: N
       };
-    }), o = m(e.value.style.animation.show ? a.value.min : t.dataset.value);
+    }), l = m(e.value.style.animation.show ? a.value.min : t.dataset.value);
     F(() => t.dataset.value, () => {
-      o.value = m(e.value.style.animation.show ? a.value.min : t.dataset.value), b();
+      l.value = m(e.value.style.animation.show ? a.value.min : t.dataset.value), k();
     });
-    const h = s(() => o.value > a.value.max ? a.value.max : o.value < a.value.min ? a.value.min : o.value), S = s(() => a.value.diff / e.value.style.animation.speedMs);
-    _(() => {
-      b();
+    const h = s(() => l.value > a.value.max ? a.value.max : l.value < a.value.min ? a.value.min : l.value), z = s(() => a.value.diff / e.value.style.animation.speedMs);
+    w(() => {
+      k();
     });
-    function b() {
-      function l() {
-        o.value += S.value, o.value < t.dataset.value ? requestAnimationFrame(l) : o.value = t.dataset.value;
+    function k() {
+      function o() {
+        l.value += z.value, l.value < t.dataset.value ? requestAnimationFrame(o) : l.value = t.dataset.value;
       }
-      e.value.style.animation.show && (o.value = a.value.min, l());
+      e.value.style.animation.show && (l.value = a.value.min, o());
     }
-    const d = s(() => t.dataset.title ?? ""), k = s(() => o.value >= 0 ? (h.value - a.value.min) / a.value.diff : (Math.abs(a.value.min) - Math.abs(h.value)) / a.value.diff), x = s(() => U(e.value.style.colors.min, e.value.style.colors.max, a.value.min, a.value.max, o.value)), z = s(() => e.value.style.dataLabel.autoColor ? x.value : e.value.style.dataLabel.color), M = s(() => e.value.style.track.autoColor ? x.value : e.value.style.track.color);
-    return (l, f) => (n(), r("div", {
+    const d = s(() => t.dataset.title ?? ""), x = s(() => l.value >= 0 ? (h.value - a.value.min) / a.value.diff : (Math.abs(a.value.min) - Math.abs(h.value)) / a.value.diff), _ = s(() => U(e.value.style.colors.min, e.value.style.colors.max, a.value.min, a.value.max, l.value)), $ = s(() => e.value.style.dataLabel.autoColor ? _.value : e.value.style.dataLabel.color), M = s(() => e.value.style.track.autoColor ? _.value : e.value.style.track.color);
+    return (o, f) => (n(), r("div", {
       style: v(`font-family:${e.value.style.fontFamily};width: 100%; background:${e.value.style.background}`)
     }, [
       e.value.style.title.show && d.value && e.value.style.title.position === "top" ? (n(), r("div", {
@@ -80,15 +80,15 @@ const P = ["xmlns", "viewBox"], T = ["id"], X = ["stop-color"], R = ["stop-color
         class: "vue-data-ui-sparkgauge-label",
         style: v(`font-size:${e.value.style.title.fontSize}px;text-align:${e.value.style.title.textAlign};font-weight:${e.value.style.title.bold ? "bold" : "normal"};color:${e.value.style.title.color}`)
       }, y(d.value), 5)) : c("", !0),
-      g.value ? (n(), r("svg", {
+      p.value ? (n(), r("svg", {
         key: 1,
-        xmlns: $(V),
+        xmlns: g(V),
         viewBox: `0 0 ${u.value.width} ${u.value.height}`,
         style: v(`overflow: visible; background:${e.value.style.background}; width:100%;`)
       }, [
         i("defs", null, [
           i("linearGradient", {
-            id: `gradient_${p.value}`,
+            id: `gradient_${b.value}`,
             x1: "-10%",
             y1: "100%",
             x2: "110%",
@@ -97,12 +97,12 @@ const P = ["xmlns", "viewBox"], T = ["id"], X = ["stop-color"], R = ["stop-color
             i("stop", {
               offset: "0%",
               "stop-color": e.value.style.colors.min
-            }, null, 8, X),
+            }, null, 8, R),
             i("stop", {
               offset: "100%",
               "stop-color": e.value.style.colors.max
-            }, null, 8, R)
-          ], 8, T)
+            }, null, 8, Y)
+          ], 8, H)
         ]),
         i("path", {
           d: `M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,
@@ -110,29 +110,39 @@ const P = ["xmlns", "viewBox"], T = ["id"], X = ["stop-color"], R = ["stop-color
           "stroke-width": 8,
           "stroke-linecap": e.value.style.gutter.strokeLinecap,
           fill: "none"
-        }, null, 8, Y),
-        k.value !== 0 ? (n(), r("path", {
+        }, null, 8, J),
+        x.value !== 0 ? (n(), r("path", {
           key: 0,
           d: `M10 ${u.value.base} A 1 1 0 1 1 118 ${u.value.base}`,
-          stroke: e.value.style.colors.showGradient ? `url(#gradient_${p.value})` : M.value,
+          stroke: e.value.style.colors.showGradient ? `url(#gradient_${b.value})` : M.value,
           "stroke-width": 8,
           "stroke-linecap": e.value.style.track.strokeLinecap,
           fill: "none",
           "stroke-dasharray": 169.5,
-          "stroke-dashoffset": 169.5 - 169.5 * k.value,
+          "stroke-dashoffset": 169.5 - 169.5 * x.value,
           class: O({ "vue-ui-sparkgauge-track": e.value.style.animation.show }),
           style: v(e.value.style.animation.show ? `animation: vue-ui-sparkgauge-animation ${e.value.style.animation.speedMs}ms ease-in;` : "")
-        }, null, 14, J)) : c("", !0),
+        }, null, 14, K)) : c("", !0),
         i("text", {
           "text-anchor": "middle",
           x: u.value.width / 2,
           y: u.value.base + 6 + e.value.style.dataLabel.offsetY,
           "font-size": e.value.style.dataLabel.fontSize,
-          fill: z.value,
+          fill: $.value,
           "font-weight": e.value.style.dataLabel.bold ? "bold" : "normal"
-        }, y($(q)({ p: e.value.style.dataLabel.prefix, v: o.value, s: e.value.style.dataLabel.suffix, r: e.value.style.dataLabel.rounding })), 9, K)
-      ], 12, P)) : c("", !0),
-      g.value ? c("", !0) : (n(), j(H, {
+        }, y(g(q)(
+          e.value.style.dataLabel.formatter,
+          l.value,
+          g(P)({
+            p: e.value.style.dataLabel.prefix,
+            v: l.value,
+            s: e.value.style.dataLabel.suffix,
+            r: e.value.style.dataLabel.rounding
+          }),
+          { datapoint: l.value, color: $.value }
+        )), 9, Q)
+      ], 12, X)) : c("", !0),
+      p.value ? c("", !0) : (n(), j(T, {
         key: 2,
         config: {
           type: "gauge",
@@ -153,5 +163,5 @@ const P = ["xmlns", "viewBox"], T = ["id"], X = ["stop-color"], R = ["stop-color
   }
 };
 export {
-  te as default
+  ae as default
 };

package/dist/vue-ui-sparkhistogram---JRg2R1.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),a=require("./index-hKWfT7Wa.cjs"),k=require("./useNestedProp-Cggpoz7e.cjs"),z=require("./Shape-B8O8_E6l.cjs"),D=require("./vue-ui-skeleton-j-IOiy5w.cjs"),F=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),M={key:0},A={key:1},H=["xmlns","viewBox"],q=["id"],I=["stop-color"],U=["stop-color"],W=["id"],O=["stop-color"],j=["stop-color"],P=["id"],G=["stop-color"],T=["stop-color"],X={key:0},Y=["x","y","height","width","fill","stroke","stroke-width","rx"],R={key:1},J=["x","y","font-size","font-weight","fill"],K=["x","y","font-size","fill"],Q=["x","y","font-size","fill"],Z=["height","width","x","onMouseover","stroke","stroke-width","rx","stroke-dasharray","onClick"],ee={__name:"vue-ui-sparkhistogram",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}}},emits:["selectDatapoint"],setup(b,{emit:_}){const u=b;e.useCssVars(o=>({"07c89730":w.value}));const{vue_ui_sparkhistogram:x}=a.useConfig(),f=e.computed(()=>!!u.dataset&&u.dataset.length);e.onMounted(()=>{a.objectIsEmpty(u.dataset)?a.error({componentName:"VueUiSparkHistogram",type:"dataset"}):u.dataset.forEach((o,n)=>{a.getMissingDatasetAttributes({datasetObject:o,requiredAttributes:["value"]}).forEach(l=>{a.error({componentName:"VueUiSparkHistogram",type:"datasetSerieAttribute",property:l,index:n})})})});const v=e.ref(a.createUid()),t=e.computed(()=>{const o=k.useNestedProp({userConfig:u.config,defaultConfig:x});return o.theme?{...k.useNestedProp({userConfig:a.themes.vue_ui_sparkhistogram[o.theme]||u.config,defaultConfig:o})}:o}),c=e.computed(()=>{const o=t.value.style.layout.height,n=t.value.style.layout.width,l=t.value.style.layout.padding.top,s=o-t.value.style.layout.padding.bottom,d=t.value.style.layout.padding.left,y=n-t.value.style.layout.padding.right,p=l+(o-l-t.value.style.layout.padding.bottom)/2,g=o-t.value.style.layout.padding.top-t.value.style.layout.padding.bottom,m=n-t.value.style.layout.padding.left-t.value.style.layout.padding.right;return{bottom:s,centerY:p,drawingHeight:g,drawingWidth:m,height:o,left:d,right:y,top:l,width:n}}),B=e.computed(()=>Math.max(...u.dataset.map(o=>Math.abs(o.value||0))));function $(o){return Math.abs(o)/B.value}const i=e.computed(()=>u.dataset.map((o,n)=>{const l=$(o.value||0),s=c.value.drawingHeight*l,d=c.value.drawingWidth/u.dataset.length,y=d*(t.value.style.bars.gap/100),p=d-y,g=c.value.centerY-s/2,m=c.value.left+(y/2+n*d),S=c.value.left+n*d,h=typeof o.intensity>"u"?100:Math.round(o.intensity*100),C=o.color?o.color:o.value>=0?`${t.value.style.bars.colors.positive}${a.opacity[h]}`:`${t.value.style.bars.colors.negative}${a.opacity[h]}`,N=o.color?o.color:o.value>=0?t.value.style.bars.colors.positive:t.value.style.bars.colors.negative,L=o.color?`url(#gradient_datapoint_${n}_${v.value})`:o.value>=0?`url(#gradient_positive_${n}_${v.value})`:`url(#gradient_negative_${n}_${v.value})`,V=m+p/2;return{...o,color:C,gradient:L,height:s,intensity:h,proportion:l,stroke:N,textAnchor:V,trapX:S,unitWidth:d,width:p,x:m,y:g}})),r=e.ref(null);function E(o,n){_("selectDatapoint",{datapoint:o,index:n})}const w=e.computed(()=>`${t.value.style.animation.speedMs}ms`);return(o,n)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(`width:100%;background:${t.value.style.backgroundColor};font-family:${t.value.style.fontFamily}`),onMouseleave:n[1]||(n[1]=l=>r.value=null)},[t.value.style.title.text?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(`width:calc(100% - 12px);background:${t.value.style.backgroundColor};margin:0 auto;margin:${t.value.style.title.margin};padding: 0 6px;text-align:${t.value.style.title.textAlign}`)},[e.createElementVNode("div",{style:e.normalizeStyle(`font-size:${t.value.style.title.fontSize}px;color:${t.value.style.title.color};font-weight:${t.value.style.title.bold?"bold":"normal"}`)},[e.createTextVNode(e.toDisplayString(t.value.style.title.text)+" ",1),r.value!==null?(e.openBlock(),e.createElementBlock("span",M,"- "+e.toDisplayString(i.value[r.value].timeLabel||"")+" "+e.toDisplayString(e.unref(a.applyDataLabel)(t.value.style.labels.value.formatter,i.value[r.value].value,e.unref(a.dataLabel)({p:t.value.style.labels.value.prefix,v:i.value[r.value].value,s:t.value.style.labels.value.suffix,r:t.value.style.labels.value.rounding}),{datapoint:i.value[r.value],seriesIndex:r.value})),1)):e.createCommentVNode("",!0),![void 0,null].includes(r.value)&&![null,void 0].includes(i.value[r.value].valueLabel)?(e.openBlock(),e.createElementBlock("span",A,"("+e.toDisplayString(i.value[r.value].valueLabel||0)+")",1)):e.createCommentVNode("",!0)],4),t.value.style.title.subtitle.text?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(`font-size:${t.value.style.title.subtitle.fontSize}px;color:${t.value.style.title.subtitle.color};font-weight:${t.value.style.title.subtitle.bold?"bold":"normal"}`)},e.toDisplayString(t.value.style.title.subtitle.text),5)):e.createCommentVNode("",!0)],4)):e.createCommentVNode("",!0),f.value?(e.openBlock(),e.createElementBlock("svg",{key:1,xmlns:e.unref(a.XMLNS),viewBox:`0 0 ${c.value.width} ${c.value.height}`,style:{overflow:"visible"}},[e.createElementVNode("defs",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(l,s)=>(e.openBlock(),e.createElementBlock("radialGradient",{id:`gradient_positive_${s}_${v.value}`,cy:"50%",cx:"50%",r:"50%",fx:"50%",fy:"50%"},[e.createElementVNode("stop",{offset:"0%","stop-color":`${e.unref(a.shiftHue)(t.value.style.bars.colors.positive,.05)}${e.unref(a.opacity)[l.intensity]}`},null,8,I),e.createElementVNode("stop",{offset:"100%","stop-color":`${t.value.style.bars.colors.positive}${e.unref(a.opacity)[l.intensity]}`},null,8,U)],8,q))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(l,s)=>(e.openBlock(),e.createElementBlock("radialGradient",{id:`gradient_negative_${s}_${v.value}`,cy:"50%",cx:"50%",r:"50%",fx:"50%",fy:"50%"},[e.createElementVNode("stop",{offset:"0%","stop-color":`${e.unref(a.shiftHue)(t.value.style.bars.colors.negative,.05)}${e.unref(a.opacity)[l.intensity]}`},null,8,O),e.createElementVNode("stop",{offset:"100%","stop-color":`${t.value.style.bars.colors.negative}${e.unref(a.opacity)[l.intensity]}`},null,8,j)],8,W))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(l,s)=>(e.openBlock(),e.createElementBlock("radialGradient",{id:`gradient_datapoint_${s}_${v.value}`,cy:"50%",cx:"50%",r:"50%",fx:"50%",fy:"50%"},[e.createElementVNode("stop",{offset:"0%","stop-color":`${e.unref(a.shiftHue)(l.color,.05)}${e.unref(a.opacity)[l.intensity]}`},null,8,G),e.createElementVNode("stop",{offset:"100%","stop-color":`${l.color}${e.unref(a.opacity)[l.intensity]}`},null,8,T)],8,P))),256))]),!t.value.style.bars.shape||t.value.style.bars.shape==="square"?(e.openBlock(),e.createElementBlock("g",X,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(l,s)=>(e.openBlock(),e.createElementBlock("rect",{x:l.x,y:l.y,height:l.height,width:l.width,fill:t.value.style.bars.colors.gradient.show?l.gradient:l.color,stroke:l.stroke,"stroke-width":t.value.style.bars.strokeWidth,rx:`${t.value.style.bars.borderRadius*l.proportion/12}%`,class:e.normalizeClass({"vue-ui-sparkhistogram-shape":t.value.style.animation.show})},null,10,Y))),256))])):(e.openBlock(),e.createElementBlock("g",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(l,s)=>(e.openBlock(),e.createBlock(z._sfc_main,{plot:{x:l.x+l.width/2,y:l.y+l.height/2},color:t.value.style.bars.colors.gradient.show?l.gradient:l.color,shape:t.value.style.bars.shape,radius:l.height*.4,class:e.normalizeClass({"vue-ui-sparkhistogram-shape":t.value.style.animation.show})},null,8,["plot","color","shape","radius","class"]))),256))])),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(l,s)=>(e.openBlock(),e.createElementBlock("text",{"text-anchor":"middle",x:l.textAnchor,y:l.y-t.value.style.labels.value.fontSize/3+t.value.style.labels.value.offsetY,"font-size":t.value.style.labels.value.fontSize,"font-weight":t.value.style.labels.value.bold?"bold":"normal",fill:t.value.style.labels.value.color},e.toDisplayString(t.value.style.labels.value.prefix)+e.toDisplayString(isNaN(l.value)?"":Number(l.value.toFixed(t.value.style.labels.value.rounding)).toLocaleString())+e.toDisplayString(t.value.style.labels.value.suffix),9,J))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(l,s)=>(e.openBlock(),e.createElementBlock("g",null,[l.valueLabel?(e.openBlock(),e.createElementBlock("text",{key:0,x:l.textAnchor,y:l.y+l.height+t.value.style.labels.valueLabel.fontSize,"font-size":t.value.style.labels.valueLabel.fontSize,"text-anchor":"middle",fill:t.value.style.labels.valueLabel.color},e.toDisplayString(l.valueLabel),9,K)):e.createCommentVNode("",!0)]))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(l,s)=>(e.openBlock(),e.createElementBlock("g",null,[l.timeLabel?(e.openBlock(),e.createElementBlock("text",{key:0,x:l.textAnchor,y:c.value.height-t.value.style.labels.timeLabel.fontSize/2,"font-size":t.value.style.labels.timeLabel.fontSize,fill:t.value.style.labels.timeLabel.color,"text-anchor":"middle"},e.toDisplayString(l.timeLabel),9,Q)):e.createCommentVNode("",!0)]))),256)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,(l,s)=>(e.openBlock(),e.createElementBlock("g",null,[e.createElementVNode("rect",{height:c.value.height,width:l.unitWidth,fill:"transparent",x:l.trapX,y:0,onMouseover:d=>r.value=s,onMouseleave:n[0]||(n[0]=d=>r.value=null),stroke:r.value!==null&&r.value===s?t.value.style.selector.stroke:"","stroke-width":r.value!==null&&r.value===s?t.value.style.selector.strokeWidth:0,rx:t.value.style.selector.borderRadius,"stroke-dasharray":t.value.style.selector.strokeDasharray,onClick:()=>E(l,s)},null,40,Z)]))),256))],8,H)):e.createCommentVNode("",!0),f.value?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(D.default,{key:2,config:{type:"sparkHistogram",style:{backgroundColor:t.value.style.backgroundColor,sparkHistogram:{color:"#CCCCCC"}}}},null,8,["config"]))],36))}},te=F._export_sfc(ee,[["__scopeId","data-v-27ede5f8"]]);exports.default=te;