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