vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
2 lines (1 loc) • 4.61 kB
JavaScript
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n=require("./index-ZfICPrrM.cjs"),k=require("./useNestedProp-C14rfl0j.cjs"),p=require("./PackageVersion-D3dK8oA3.cjs"),g=["viewBox","width"],_={key:0},y=["id"],N=["stop-color"],C=["stop-color"],V=["stroke"],w=["stroke"],x=["width","fill"],B=["fill"],E={key:0},b=["id"],v=["stroke"],L=["stroke","stroke-dasharray","stroke-dashoffset"],z=["filter"],G=["stroke","stroke-dasharray","stroke-dashoffset"],F=["fill"],P={__name:"vue-ui-gizmo",props:{config:{type:Object,default(){return{}}},dataset:{type:Number,default:0}},setup(c){const{vue_ui_gizmo:f}=n.useConfig(),o=c,a=e.ref(n.createUid()),h=e.useSlots();e.onMounted(()=>{l()}),e.onMounted(()=>{h["chart-background"]&&console.warn("VueUiGizmo does not support the #chart-background slot.")});function l(){!o.dataset&&o.dataset!==0&&n.error({componentName:"VueUiGizmo",type:"dataset"}),o.dataset<0&&console.warn("VueUiGizmo: dataset cannot be negative.")}const t=e.computed({get:()=>d(),set:s=>s});function d(){return k.useNestedProp({userConfig:o.config,defaultConfig:f})}e.watch(()=>o.config,s=>{t.value=d(),l()},{deep:!0});const u=e.computed(()=>({battery:{width:t.value.showPercentage?140:80,height:50},gauge:{width:80,height:80}})[t.value.type]),i=e.computed(()=>{const r=2*Math.PI*35,m=r-o.dataset/100*r;return{dasharray:`${r} ${r}`,dashoffset:m}});return(s,r)=>(e.openBlock(),e.createElementBlock("svg",{class:"vue-ui-gizmo",viewBox:`0 0 ${e.unref(u).width} ${e.unref(u).height}`,width:e.unref(t).size,style:e.normalizeStyle({background:"transparent",fontFamily:e.unref(t).fontFamily})},[e.createVNode(p._sfc_main),e.unref(t).useGradient?(e.openBlock(),e.createElementBlock("defs",_,[e.createElementVNode("linearGradient",{id:`gizmo_gradient_${e.unref(a)}`,x1:"0%",x2:"100%",y1:"0%",y2:"0%"},[e.createElementVNode("stop",{offset:"0%","stop-color":e.unref(t).gradientColor},null,8,N),e.createElementVNode("stop",{offset:"100%","stop-color":e.unref(t).color},null,8,C)],8,y)])):e.createCommentVNode("",!0),e.unref(t).type==="battery"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("path",{d:"M 5 10 L 5 40 C 5 43 7 45 9 45 L 65 45 C 68 45 70 43 70 40 L 70 38 C 73 38 75 38 75 33 L 75 17 C 75 12 73 12 70 12 L 70 10 C 70 7 68 5 65 5 L 10 5 C 7 5 5 7 5 10",stroke:e.unref(t).stroke,"stroke-width":2,fill:"none"},null,8,V),e.createElementVNode("path",{d:"M 70 16 L 70 34",stroke:e.unref(t).stroke,"stroke-width":2,fill:"none",style:{opacity:"0.5"}},null,8,w),e.createElementVNode("rect",{x:10,y:10,height:30,width:55*(c.dataset/100),fill:e.unref(t).useGradient?`url(#gizmo_gradient_${e.unref(a)})`:e.unref(t).color,rx:2},null,8,x),e.unref(t).showPercentage?(e.openBlock(),e.createElementBlock("text",{key:0,x:85,y:32,"text-anchor":"start","font-size":"20",fill:e.unref(t).textColor},e.toDisplayString(e.unref(n.applyDataLabel)(e.unref(t).formatter,o.dataset,e.unref(n.dataLabel)({v:o.dataset,s:"%"}))),9,B)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0),e.unref(t).type==="gauge"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.unref(t).useGradient?(e.openBlock(),e.createElementBlock("defs",E,[e.createElementVNode("filter",{id:`blur_${e.unref(a)}`,x:"-50%",y:"-50%",width:"200%",height:"200%"},r[0]||(r[0]=[e.createElementVNode("feGaussianBlur",{in:"SourceGraphic",stdDeviation:1},null,-1)]),8,b)])):e.createCommentVNode("",!0),e.createElementVNode("circle",{cx:40,cy:40,r:35,stroke:e.unref(t).stroke,"stroke-width":2*4,fill:"none"},null,8,v),e.createElementVNode("circle",{cx:40,cy:40,r:35,stroke:e.unref(t).color,"stroke-width":2*4,"stroke-dasharray":e.unref(i).dasharray,"stroke-dashoffset":e.unref(i).dashoffset,"stroke-linecap":"round",fill:"none",style:{transform:"rotate(-90deg)","transform-origin":"50% 50%"}},null,8,L),e.unref(t).useGradient?(e.openBlock(),e.createElementBlock("g",{key:1,filter:`url(#blur_${e.unref(a)})`},[e.createElementVNode("circle",{cx:40,cy:40,r:35,stroke:e.unref(t).gradientColor,"stroke-width":1,fill:"none","stroke-dasharray":e.unref(i).dasharray,"stroke-dashoffset":e.unref(i).dashoffset,style:{transform:"rotate(-90deg)","transform-origin":"50% 50%"}},null,8,G)],8,z)):e.createCommentVNode("",!0),e.unref(t).showPercentage?(e.openBlock(),e.createElementBlock("text",{key:2,x:40,y:47,"text-anchor":"middle","font-size":"20",fill:e.unref(t).textColor},e.toDisplayString(e.unref(n.applyDataLabel)(e.unref(t).formatter,o.dataset,e.unref(n.dataLabel)({v:o.dataset,s:"%"}))),9,F)):e.createCommentVNode("",!0)],64)):e.createCommentVNode("",!0)],12,g))}};exports.default=P;