vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
2 lines (1 loc) • 14.7 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("./index-ZfICPrrM.cjs"),S=require("./useNestedProp-C14rfl0j.cjs"),R=require("./vue-ui-skeleton-Bvmpr51u.cjs"),P=require("./useResponsive-BJ7DTGpm.cjs"),H=require("./PackageVersion-D3dK8oA3.cjs"),U=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),X=["id"],Z=["xmlns","viewBox"],Y=["width","height"],J=["id"],K=["stop-color"],Q=["stop-color"],ee=["id"],te=["stop-color"],ne=["stop-color"],re=["id"],le=["stop-color"],ae=["stop-color"],oe={key:1},ue=["d","fill"],se=["d","fill"],ie=["d","stroke","stroke-width"],de=["x1","x2","y1","y2","stroke","stroke-width"],ce=["x","y","width","height","fill","rx"],fe=["x1","x2","y1","y2","stroke","stroke-width","stroke-dasharray"],he=["x1","x2","y1","y2","stroke","stroke-dasharray","stroke-width"],ye=["cx","cy","r","fill","stroke","stroke-width"],pe=["x","y","font-size","font-weight","fill"],ve=["x","y","height","width","onMouseenter","onClick"],me={__name:"vue-ui-sparkline",props:{config:{type:Object,default(){return{}}},dataset:{type:Array,default(){return[]}},showInfo:{type:Boolean,default:!0},selectedIndex:{type:Number,default:void 0},heightRatio:{type:Number,default:1},forcedPadding:{type:Number,default:30}},emits:["hoverIndex","selectDatapoint"],setup(v,{emit:z}){const{vue_ui_sparkline:D}=o.useConfig(),u=v,k=e.computed(()=>!!u.dataset&&u.dataset.length),f=e.ref(o.createUid()),_=e.ref(null),C=e.ref(null),L=e.ref(null),t=e.computed({get:()=>V(),set:n=>n});function V(){const n=S.useNestedProp({userConfig:u.config,defaultConfig:D});let l={};return n.theme?l={...S.useNestedProp({userConfig:o.themes.vue_ui_sparkline[n.theme]||u.config,defaultConfig:n})}:l=n,u.config&&o.hasDeepProperty(u.config,"style.scaleMin")?l.style.scaleMin=u.config.style.scaleMin:l.style.scaleMin=null,u.config&&o.hasDeepProperty(u.config,"style.scaleMax")?l.style.scaleMax=u.config.style.scaleMax:l.style.scaleMax=null,l}const b=e.computed(()=>o.largestTriangleThreeBucketsArrayObjects({data:u.dataset,threshold:t.value.downsample.threshold}));e.watch(()=>u.config,n=>{t.value=V(),$(),a.value.chartWidth=t.value.style.chartWidth},{deep:!0}),e.watch(()=>u.dataset,n=>{p.value=o.largestTriangleThreeBucketsArrayObjects({data:u.dataset.map(l=>({...l,value:[void 0].includes(l.value)?null:l.value})),threshold:t.value.downsample.threshold})},{deep:!0});const p=e.ref(A());function A(){return o.largestTriangleThreeBucketsArrayObjects({data:u.dataset.map(n=>t.value.style.animation.show?{...n,value:null}:{...n,value:[void 0].includes(n.value)?null:n.value}),threshold:t.value.downsample.threshold})}const E=e.ref(null);e.onMounted(()=>{if($(),t.value.style.animation.show&&u.dataset.length>1){let r=function(){l<b.value.length?(p.value.push(b.value[l]),setTimeout(()=>{requestAnimationFrame(r)},n)):p.value=b.value,l+=1};p.value=[];const n=t.value.style.animation.animationFrames/u.dataset.length;let l=0;r()}});function $(){if(o.objectIsEmpty(u.dataset)?o.error({componentName:"VueUiSparkline",type:"dataset"}):u.dataset.forEach((n,l)=>{o.getMissingDatasetAttributes({datasetObject:n,requiredAttributes:["period","value"]}).forEach(r=>{o.error({componentName:"VueUiSparkline",type:"datasetSerieAttribute",property:r,index:l})})}),t.value.responsive){const n=P.throttle(()=>{const{width:l,height:r}=P.useResponsive({chart:_.value,title:t.value.style.title.show&&u.showInfo?C.value:null,source:L.value});a.value.width=l,a.value.height=r,a.value.chartWidth=t.value.style.chartWidth/500*l,a.value.padding=u.forcedPadding/500*l});E.value=new ResizeObserver(n),E.value.observe(_.value.parentNode)}}const a=e.ref({height:80*u.heightRatio,width:500,chartWidth:t.value.style.chartWidth,padding:u.forcedPadding}),w=z,O=e.ref(6),s=e.computed(()=>({top:12,left:0,right:a.value.width,bottom:a.value.height-3,start:u.showInfo&&t.value.style.dataLabel.show&&t.value.style.dataLabel.position==="left"?a.value.width-a.value.chartWidth:a.value.padding,width:u.showInfo&&t.value.style.dataLabel.show?a.value.chartWidth:a.value.width-a.value.padding,height:a.value.height-12})),N=e.computed(()=>[null,void 0].includes(t.value.style.scaleMin)?Math.min(...p.value.map(n=>isNaN(n.value)||[void 0,null,"NaN",NaN,1/0,-1/0].includes(n.value)?0:n.value||0)):t.value.style.scaleMin),T=e.computed(()=>[null,void 0].includes(t.value.style.scaleMax)?Math.max(...p.value.map(n=>isNaN(n.value)||[void 0,null,"NaN",NaN,1/0,-1/0].includes(n.value)?0:n.value||0)):t.value.style.scaleMax),m=e.computed(()=>{const n=N.value>=0?0:N.value;return Math.abs(n)}),W=e.computed(()=>T.value+m.value+O.value),x=e.computed(()=>s.value.bottom-s.value.height*B(m.value));function B(n){return n/W.value}const h=e.computed(()=>b.value.length-1),i=e.computed(()=>p.value.map((n,l)=>{const r=isNaN(n.value)||[void 0,null,"NaN",NaN,1/0,-1/0].includes(n.value)?0:n.value||0;return{absoluteValue:r,period:n.period,plotValue:r+m.value,toMax:B(r+m.value),x:s.value.start+l*(s.value.width/(h.value+1)>a.padding?a.padding:s.value.width/(h.value+1)),y:s.value.bottom-s.value.height*B(r+m.value),id:`plot_${f.value}_${l}`,color:g.value?t.value.style.bar.color:t.value.style.area.useGradient?o.shiftHue(t.value.style.line.color,.05*(1-l/h.value)):t.value.style.line.color,width:s.value.width/(h.value+1)>a.padding?a.padding:s.value.width/(h.value+1)}})),j=e.computed(()=>{const n={x:i.value[0].x,y:a.value.height-6},l={x:i.value[i.value.length-1].x,y:a.value.height-6},r=[];return i.value.forEach(d=>{r.push(`${d.x},${d.y} `)}),[n.x,n.y,...r,l.x,l.y].toString()}),c=e.ref(void 0);function F(n,l){c.value=n,w("hoverIndex",{index:l})}function q(){c.value=void 0,w("hoverIndex",{index:void 0})}const y=e.computed(()=>{if(k.value){const n=i.value.map(r=>r.absoluteValue),l=n.reduce((r,d)=>r+d,0);return{latest:i.value[i.value.length-1].absoluteValue,sum:l,average:l/i.value.length,median:o.calcMedian(n),trend:o.calcLinearProgression(i.value.map(({x:r,y:d,absoluteValue:I})=>({x:r,y:d,value:I}))).trend}}else return{latest:null,sum:null,average:null,median:null,trend:null}}),M=e.computed(()=>k.value?t.value.style.dataLabel.valueType==="latest"?y.value.latest:t.value.style.dataLabel.valueType==="sum"?y.value.sum:t.value.style.dataLabel.valueType==="average"?y.value.average:0:0),g=e.computed(()=>t.value.type&&t.value.type==="bar");function G(n,l){w("selectDatapoint",{datapoint:n,index:l})}return(n,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"sparklineChart",ref:_,class:"vue-ui-sparkline",id:e.unref(f),style:e.normalizeStyle(`width:100%;font-family:${e.unref(t).style.fontFamily};`)},[e.renderSlot(n.$slots,"before",e.normalizeProps(e.guardReactiveProps({selected:e.unref(c),latest:e.unref(y).latest,sum:e.unref(y).sum,average:e.unref(y).average,median:e.unref(y).median,trend:e.unref(y).trend})),void 0,!0),e.unref(t).style.title.show&&v.showInfo?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"chartTitle",ref:C,class:"vue-ui-sparkline-title",style:e.normalizeStyle(`display:flex;align-items:center;width:100%;color:${e.unref(t).style.title.color};background:${e.unref(t).style.backgroundColor};justify-content:${e.unref(t).style.title.textAlign==="left"?"flex-start":e.unref(t).style.title.textAlign==="right"?"flex-end":"center"};height:${e.unref(t).style.title.fontSize*2}px;font-size:${e.unref(t).style.title.fontSize}px;font-weight:${e.unref(t).style.title.bold?"bold":"normal"};`)},[e.createElementVNode("span",{style:e.normalizeStyle(`padding:${e.unref(t).style.title.textAlign==="left"?"0 0 0 12px":e.unref(t).style.title.textAlign==="right"?"0 12px 0 0":"0"}`)},e.toDisplayString(e.unref(c)?e.unref(c).period:e.unref(t).style.title.text),5)],4)):e.createCommentVNode("",!0),e.unref(k)?(e.openBlock(),e.createElementBlock("svg",{key:1,xmlns:e.unref(o.XMLNS),viewBox:`0 0 ${e.unref(a).width} ${e.unref(a).height}`,style:e.normalizeStyle(`background:${e.unref(t).style.backgroundColor};overflow:hidden`)},[e.createVNode(H._sfc_main),n.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:e.unref(a).width<=0?10:e.unref(a).width,height:e.unref(a).height<=0?10:e.unref(a).height,style:{pointerEvents:"none"}},[e.renderSlot(n.$slots,"chart-background",{},void 0,!0)],8,Y)):e.createCommentVNode("",!0),e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{x1:"0%",y1:"0%",x2:"100%",y2:"0%",id:`sparkline_gradient_${e.unref(f)}`},[e.createElementVNode("stop",{offset:"0%","stop-color":e.unref(o.setOpacity)(e.unref(o.shiftHue)(e.unref(t).style.area.color,.05),e.unref(t).style.area.opacity)},null,8,K),e.createElementVNode("stop",{offset:"100%","stop-color":e.unref(o.setOpacity)(e.unref(t).style.area.color,e.unref(t).style.area.opacity)},null,8,Q)],8,J),e.createElementVNode("linearGradient",{x2:"0%",y2:"100%",id:`sparkline_bar_gradient_pos_${e.unref(f)}`},[e.createElementVNode("stop",{offset:"0%","stop-color":e.unref(t).style.bar.color},null,8,te),e.createElementVNode("stop",{offset:"100%","stop-color":e.unref(o.shiftHue)(e.unref(t).style.bar.color,.05)},null,8,ne)],8,ee),e.createElementVNode("linearGradient",{x2:"0%",y2:"100%",id:`sparkline_bar_gradient_neg_${e.unref(f)}`},[e.createElementVNode("stop",{offset:"0%","stop-color":e.unref(o.shiftHue)(e.unref(t).style.bar.color,.05)},null,8,le),e.createElementVNode("stop",{offset:"100%","stop-color":e.unref(t).style.bar.color},null,8,ae)],8,re)]),e.unref(t).style.area.show&&!e.unref(g)&&e.unref(i)[0]?(e.openBlock(),e.createElementBlock("g",oe,[e.unref(t).style.line.smooth?(e.openBlock(),e.createElementBlock("path",{key:0,d:`M ${e.unref(i)[0].x},${e.unref(s).bottom} ${e.unref(o.createSmoothPath)(e.unref(i))} L ${e.unref(i).at(-1).x},${e.unref(s).bottom} Z`,fill:e.unref(t).style.area.useGradient?`url(#sparkline_gradient_${e.unref(f)})`:e.unref(o.setOpacity)(e.unref(t).style.area.color,e.unref(t).style.area.opacity)},null,8,ue)):(e.openBlock(),e.createElementBlock("path",{key:1,d:`M${e.unref(j)}Z`,fill:e.unref(t).style.area.useGradient?`url(#sparkline_gradient_${e.unref(f)})`:e.unref(o.setOpacity)(e.unref(t).style.area.color,e.unref(t).style.area.opacity)},null,8,se))])):e.createCommentVNode("",!0),e.unref(t).style.line.smooth&&!e.unref(g)?(e.openBlock(),e.createElementBlock("path",{key:2,d:`M ${e.unref(o.createSmoothPath)(e.unref(i))}`,stroke:e.unref(t).style.line.color,fill:"none","stroke-width":e.unref(t).style.line.strokeWidth,"stroke-linecap":"round"},null,8,ie)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i),(r,d)=>(e.openBlock(),e.createElementBlock("g",null,[d<e.unref(i).length-1&&!e.unref(t).style.line.smooth&&!e.unref(g)?(e.openBlock(),e.createElementBlock("line",{key:0,x1:r.x,x2:e.unref(i)[d+1].x,y1:r.y,y2:e.unref(i)[d+1].y,stroke:r.color,"stroke-width":e.unref(t).style.line.strokeWidth,"stroke-linecap":"round","stroke-linejoin":"round","shape-rendering":"geometricPrecision"},null,8,de)):e.createCommentVNode("",!0),e.unref(g)?(e.openBlock(),e.createElementBlock("rect",{key:1,x:r.x-r.width/2,y:r.absoluteValue>0?r.y:e.unref(x),width:r.width,height:Math.abs(r.y-e.unref(x)),fill:r.absoluteValue>0?`url(#sparkline_bar_gradient_pos_${e.unref(f)})`:`url(#sparkline_bar_gradient_neg_${e.unref(f)})`,rx:e.unref(t).style.bar.borderRadius},null,8,ce)):e.createCommentVNode("",!0),e.unref(t).style.verticalIndicator.show&&(e.unref(c)&&r.id===e.unref(c).id||v.selectedIndex===d)?(e.openBlock(),e.createElementBlock("line",{key:2,x1:r.x,x2:r.x,y1:e.unref(s).top-6,y2:e.unref(s).bottom,stroke:e.unref(t).style.verticalIndicator.color||r.color,"stroke-width":e.unref(t).style.verticalIndicator.strokeWidth,"stroke-linecap":"round","stroke-dasharray":e.unref(t).style.verticalIndicator.strokeDasharray||0},null,8,fe)):e.createCommentVNode("",!0)]))),256)),e.unref(N)<0?(e.openBlock(),e.createElementBlock("line",{key:3,x1:e.unref(s).start,x2:e.unref(s).start+e.unref(s).width-16,y1:e.unref(x),y2:e.unref(x),stroke:e.unref(t).style.zeroLine.color,"stroke-dasharray":e.unref(t).style.zeroLine.strokeWidth*2,"stroke-width":e.unref(t).style.zeroLine.strokeWidth,"stroke-linecap":"round"},null,8,he)):e.createCommentVNode("",!0),e.unref(t).style.plot.show?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:4},e.renderList(e.unref(i),(r,d)=>(e.openBlock(),e.createElementBlock("g",null,[e.unref(c)&&r.id===e.unref(c).id||v.selectedIndex===d?(e.openBlock(),e.createElementBlock("circle",{key:0,cx:r.x,cy:r.y,r:e.unref(t).style.plot.radius,fill:r.color,stroke:e.unref(t).style.plot.stroke,"stroke-width":e.unref(t).style.plot.strokeWidth},null,8,ye)):e.createCommentVNode("",!0)]))),256)):e.createCommentVNode("",!0),v.showInfo&&e.unref(t).style.dataLabel.show?(e.openBlock(),e.createElementBlock("text",{key:5,x:e.unref(t).style.dataLabel.position==="left"?12+e.unref(t).style.dataLabel.offsetX:e.unref(s).width+12+e.unref(t).style.dataLabel.offsetX,y:e.unref(a).height/2+e.unref(t).style.dataLabel.fontSize/2.5+e.unref(t).style.dataLabel.offsetY,"font-size":e.unref(t).style.dataLabel.fontSize,"font-weight":e.unref(t).style.dataLabel.bold?"bold":"normal",fill:e.unref(t).style.dataLabel.color},e.toDisplayString(e.unref(c)?e.unref(o.applyDataLabel)(e.unref(t).style.dataLabel.formatter,e.unref(c).absoluteValue,e.unref(o.dataLabel)({p:e.unref(t).style.dataLabel.prefix,v:e.unref(c).absoluteValue,s:e.unref(t).style.dataLabel.suffix,r:e.unref(t).style.dataLabel.roundingValue}),{datapoint:e.unref(c)}):e.unref(o.applyDataLabel)(e.unref(t).style.dataLabel.formatter,e.unref(M),e.unref(o.dataLabel)({p:e.unref(t).style.dataLabel.prefix,v:e.unref(M),s:e.unref(t).style.dataLabel.suffix,r:e.unref(t).style.dataLabel.roundingValue}))),9,pe)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i),(r,d)=>(e.openBlock(),e.createElementBlock("rect",{x:r.x-(e.unref(s).width/(e.unref(h)+1)>e.unref(a).padding?e.unref(a).padding:e.unref(s).width/(e.unref(h)+1))/2,y:e.unref(s).top-6,height:e.unref(s).height+6,width:e.unref(s).width/(e.unref(h)+1)>e.unref(a).padding?e.unref(a).padding:e.unref(s).width/(e.unref(h)+1),fill:"transparent",onMouseenter:I=>F(r,d),onMouseleave:q,onClick:()=>G(r,d)},null,40,ve))),256)),e.renderSlot(n.$slots,"svg",{svg:e.unref(a)},void 0,!0)],12,Z)):e.createCommentVNode("",!0),n.$slots.source?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"source",ref:L,dir:"auto"},[e.renderSlot(n.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0),e.unref(k)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(R.default,{key:3,config:{type:"sparkline",style:{backgroundColor:e.unref(t).style.backgroundColor,sparkline:{color:"#CCCCCC"}}}},null,8,["config"]))],12,X))}},ge=U._export_sfc(me,[["__scopeId","data-v-ab853d2f"]]);exports.default=ge;