UNPKG

vue-data-ui-hq

Version:

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

35 lines (31 loc) 15.7 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=require("./index-ZfICPrrM.cjs"),A=require("./useNestedProp-C14rfl0j.cjs"),Y=require("./Title-FbHK83tB.cjs"),J=require("./Legend-HgHPyA_4.cjs"),F=require("./usePrinter-B-gh2f22.cjs"),K=require("./PackageVersion-D3dK8oA3.cjs"),Q=require("./PenAndPaper-PL3bp4ud.cjs"),Z=require("./vue-ui-skeleton-Bvmpr51u.cjs"),ee=require("./useUserOptionState-BgepsfED.cjs"),te=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),re=["id"],ne={key:1,ref:"noTitle",class:"vue-data-ui-no-title-space",style:"height:36px; width: 100%;background:transparent"},ae=["xmlns","viewBox"],oe=["width","height"],le={key:1},se=["x","y","height","width","fill","stroke"],ue=["x","y","height","width","rx","fill","stroke","stroke-width"],ie=["x","y","height","width","fill","stroke","stroke-width"],ce=["x","y","font-size","font-weight","fill"],fe=["x","y","height","width","rx","fill","stroke","stroke-width"],de={key:3},he=["x","y","fill","font-size","font-weight"],me={key:4},ge=["x1","x2","y1","y2","stroke"],ye={key:5,class:"vue-data-ui-watermark"},pe={class:"vue-ui-bullet-legend-item",dir:"auto"},ve={style:{"margin-right":"2px"}},ke={key:7,ref:"source",dir:"auto"},be={__name:"vue-ui-bullet",props:{config:{type:Object,default(){return{}}},dataset:{type:Object,default(){return{}}}},setup(z,{expose:I}){const{vue_ui_bullet:H}=l.useConfig(),s=z,p=e.ref(null),T=e.ref(null),B=e.ref(0),M=e.ref(null),U=e.ref(0),f=e.computed({get:()=>s.dataset.hasOwnProperty("value"),set:r=>r}),h=e.computed(()=>s.dataset.segments?Array.isArray(s.dataset.segments)?s.dataset.segments.length?!0:(console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure: segments: [ { name: string; from: number; to: number; color?: string; }, {...} ] `),f.value=!1,!1):(console.warn(`VueUiBullet: dataset segments must be an array of objects with this datastructure: segments: [ { name: string; from: number; to: number; color?: string; }, {...} ] `),f.value=!1,!1):(console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure: segments: [ { name: string; from: number; to: number; color?: string; }, {...} ] `),f.value=!1,!1));e.onMounted(x);function x(){l.objectIsEmpty(s.dataset)?l.error({componentName:"VueUiBullet",type:"dataset"}):h.value?s.dataset.segments.forEach((r,o)=>{l.getMissingDatasetAttributes({datasetObject:r,requiredAttributes:["name","from","to"]}).forEach(a=>{f.value=!1,l.error({componentName:"VueUiBullet segment",type:"datasetSerieAttribute",property:a,index:o})})}):f.value=!1,t.value.style.chart.animation.show&&N(s.dataset.value||0)}const v=e.ref(l.createUid());function C(){const r=A.useNestedProp({userConfig:s.config,defaultConfig:H});return r.theme?{...A.useNestedProp({userConfig:l.themes.vue_ui_bullet[r.theme]||s.config,defaultConfig:r})}:r}const t=e.computed({get:()=>C(),set:r=>r}),{userOptionsVisible:k,setUserOptionsVisibility:_,keepUserOptionState:L}=ee.useUserOptionState({config:t.value});e.watch(()=>s.config,r=>{t.value=C(),k.value=!t.value.showOnChartHover,x(),B.value+=1},{deep:!0});const n=e.computed(()=>{const r=t.value.style.chart.height,o=t.value.style.chart.width,a=t.value.style.chart.padding.left,d=o-t.value.style.chart.padding.right,y=t.value.style.chart.padding.top,c=r-t.value.style.chart.padding.bottom;return{height:r,width:o,left:a,right:d,top:y,bottom:c,chartWidth:d-a,chartHeight:c-y}}),q=e.computed(()=>{if(!h.value)return[];const r=[];for(let o=0;o<s.dataset.segments.length;o+=1)r.push(l.lightenHexColor(t.value.style.chart.segments.baseColor,o/s.dataset.segments.length));return r}),b=e.computed(()=>h.value?{min:Math.min(...s.dataset.segments.map(r=>r.from)),max:Math.max(...s.dataset.segments.map(r=>r.to))}:{min:0,max:1}),u=e.ref(D());e.watch(()=>s.dataset,r=>{t.value.style.chart.animation.show?N(r.value||0):u.value=r.value||0},{deep:!0});function D(){return t.value.style.chart.animation.show?b.value.min:s.dataset.value||0}const S=e.ref(null);function N(r){const o=Math.abs(r-u.value)/t.value.style.chart.animation.animationFrames;function a(){u.value<r?u.value=Math.min(u.value+o,r):u.value>r&&(u.value=Math.max(u.value-o,r)),u.value!==r&&(S.value=requestAnimationFrame(a))}a()}e.onBeforeUnmount(()=>{cancelAnimationFrame(S.value)});const i=e.computed(()=>{if(!h.value)return[];const r=l.calculateNiceScale(b.value.min,b.value.max,t.value.style.chart.segments.ticks.divisions),o=r.min>=0?0:Math.abs(r.min),a={x:n.value.left+(s.dataset.target+o)/(r.max+o)*n.value.chartWidth-t.value.style.chart.target.width/2},d={width:(u.value+o)/(r.max+o)*n.value.chartWidth},y=r.ticks.map(c=>({value:c,y:n.value.bottom+t.value.style.chart.segments.dataLabels.fontSize+3+t.value.style.chart.segments.dataLabels.offsetY,x:n.value.left+(c+o)/(r.max+o)*n.value.chartWidth}));return{scale:r,target:a,value:d,ticks:y,chunks:s.dataset.segments.map((c,X)=>({...c,color:c.color?l.convertColorToHex(c.color):q.value[X],x:n.value.left+n.value.chartWidth*((c.from+o)/(r.max+o)),y:n.value.top,height:n.value.chartHeight,width:n.value.chartWidth*(Math.abs(c.to-c.from)/(r.max+o))}))}}),P=e.computed(()=>!i.value||!i.value.chunks||!i.value.chunks.length?[]:i.value.chunks.map(r=>{const o=l.applyDataLabel(t.value.style.chart.segments.dataLabels.formatter,r.from,l.dataLabel({p:t.value.style.chart.segments.dataLabels.prefix,v:r.from,s:t.value.style.chart.segments.dataLabels.suffix,r:t.value.style.chart.segments.dataLabels.rounding})),a=l.applyDataLabel(t.value.style.chart.segments.dataLabels.formatter,r.to,l.dataLabel({p:t.value.style.chart.segments.dataLabels.prefix,v:r.to,s:t.value.style.chart.segments.dataLabels.suffix,r:t.value.style.chart.segments.dataLabels.rounding}));return{...r,shape:"square",value:`${o} - ${a}`}})),W=e.computed(()=>({cy:"bullet-div-legend",backgroundColor:"transparent",color:t.value.style.chart.legend.color,fontSize:t.value.style.chart.legend.fontSize,paddingBottom:6,fontWeight:t.value.style.chart.legend.bold?"bold":""})),{isPrinting:E,isImaging:V,generatePdf:$,generateImage:O}=F.usePrinter({elementId:`bullet_${v.value}`,fileName:t.value.style.chart.title.text||"vue-ui-bullet"}),R=e.computed(()=>t.value.userOptions.show&&!t.value.style.chart.title.text),m=e.ref(!1);function j(r){m.value=r,U.value+=1}function G(){return i.value}const g=e.ref(!1);function w(){g.value=!g.value}return I({getData:G,generatePdf:$,generateImage:O,toggleAnnotator:w}),(r,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"bulletChart",ref:p,class:e.normalizeClass(`vue-ui-bullet ${e.unref(m)?"vue-data-ui-wrapper-fullscreen":""}`),style:e.normalizeStyle(`font-family:${e.unref(t).style.fontFamily};width:100%;background:${e.unref(t).style.chart.backgroundColor}`),id:`bullet_${e.unref(v)}`,onMouseenter:o[0]||(o[0]=()=>e.unref(_)(!0)),onMouseleave:o[1]||(o[1]=()=>e.unref(_)(!1))},[e.unref(t).userOptions.buttons.annotator?(e.openBlock(),e.createBlock(Q.PenAndPaper,{key:0,parent:e.unref(p),backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color,active:e.unref(g),onClose:w},null,8,["parent","backgroundColor","color","active"])):e.createCommentVNode("",!0),e.unref(R)?(e.openBlock(),e.createElementBlock("div",ne,null,512)):e.createCommentVNode("",!0),e.unref(t).style.chart.title.text?(e.openBlock(),e.createElementBlock("div",{key:2,ref_key:"chartTitle",ref:T,style:"width:100%;background:transparent;"},[(e.openBlock(),e.createBlock(Y._sfc_main,{lineHeight:"1.3rem",key:`title_${e.unref(B)}`,config:{title:{cy:"bullet-div-title",...e.unref(t).style.chart.title},subtitle:{cy:"bullet-div-subtitle",...e.unref(t).style.chart.title.subtitle}}},null,8,["config"]))],512)):e.createCommentVNode("",!0),e.unref(t).userOptions.show&&e.unref(f)&&(e.unref(L)||e.unref(k))?(e.openBlock(),e.createBlock(F.UserOptions,{key:3,ref:"details",backgroundColor:e.unref(t).style.chart.backgroundColor,color:e.unref(t).style.chart.color,isPrinting:e.unref(E),isImaging:e.unref(V),uid:e.unref(v),hasTooltip:!1,hasPdf:e.unref(t).userOptions.buttons.pdf,hasImg:e.unref(t).userOptions.buttons.img,hasXls:!1,hasTable:!1,hasLabel:!1,hasFullscreen:e.unref(t).userOptions.buttons.fullscreen,isFullscreen:e.unref(m),chartElement:e.unref(p),position:e.unref(t).userOptions.position,titles:{...e.unref(t).userOptions.buttonTitles},hasAnnotator:e.unref(t).userOptions.buttons.annotator,isAnnotation:e.unref(g),onToggleFullscreen:j,onGeneratePdf:e.unref($),onGenerateImage:e.unref(O),onToggleAnnotator:w,style:e.normalizeStyle({visibility:e.unref(L)?e.unref(k)?"visible":"hidden":"visible"})},e.createSlots({_:2},[r.$slots.optionPdf?{name:"optionPdf",fn:e.withCtx(()=>[e.renderSlot(r.$slots,"optionPdf",{},void 0,!0)]),key:"0"}:void 0,r.$slots.optionImg?{name:"optionImg",fn:e.withCtx(()=>[e.renderSlot(r.$slots,"optionImg",{},void 0,!0)]),key:"1"}:void 0,r.$slots.optionFullscreen?{name:"optionFullscreen",fn:e.withCtx(({toggleFullscreen:a,isFullscreen:d})=>[e.renderSlot(r.$slots,"optionFullscreen",e.normalizeProps(e.guardReactiveProps({toggleFullscreen:a,isFullscreen:d})),void 0,!0)]),key:"2"}:void 0,r.$slots.optionAnnotator?{name:"optionAnnotator",fn:e.withCtx(({toggleAnnotator:a,isAnnotator:d})=>[e.renderSlot(r.$slots,"optionAnnotator",e.normalizeProps(e.guardReactiveProps({toggleAnnotator:a,isAnnotator:d})),void 0,!0)]),key:"3"}:void 0]),1032,["backgroundColor","color","isPrinting","isImaging","uid","hasPdf","hasImg","hasFullscreen","isFullscreen","chartElement","position","titles","hasAnnotator","isAnnotation","onGeneratePdf","onGenerateImage","style"])):e.createCommentVNode("",!0),e.unref(f)?(e.openBlock(),e.createElementBlock("svg",{key:4,xmlns:e.unref(l.XMLNS),class:e.normalizeClass({"vue-data-ui-fullscreen--on":e.unref(m),"vue-data-ui-fulscreen--off":!e.unref(m),"vue-ui-bullet-svg":!0}),viewBox:`0 0 ${e.unref(n).width} ${e.unref(n).height}`,style:e.normalizeStyle(`width: 100%; overflow: visible; background:transparent;color:${e.unref(t).style.chart.color}`)},[e.createVNode(K._sfc_main),r.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:e.unref(n).width,height:e.unref(n).height,style:{pointerEvents:"none"}},[e.renderSlot(r.$slots,"chart-background",{},void 0,!0)],8,oe)):e.createCommentVNode("",!0),e.unref(h)?(e.openBlock(),e.createElementBlock("g",le,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i).chunks,a=>(e.openBlock(),e.createElementBlock("rect",{x:a.x,y:a.y,height:a.height,width:a.width,fill:a.color,"stroke-width":1,stroke:e.unref(t).style.chart.backgroundColor},null,8,se))),256)),e.unref(t).style.chart.target.onTop?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("rect",{key:0,x:e.unref(i).target.x,y:e.unref(n).top+(e.unref(n).chartHeight-e.unref(n).chartHeight*e.unref(t).style.chart.target.heightRatio)/2,height:e.unref(n).chartHeight*e.unref(t).style.chart.target.heightRatio,width:e.unref(t).style.chart.target.width,rx:e.unref(t).style.chart.target.rounded?e.unref(t).style.chart.target.width/2:0,fill:e.unref(t).style.chart.target.color,stroke:e.unref(t).style.chart.target.stroke,"stroke-width":e.unref(t).style.chart.target.strokeWidth},null,8,ue)),e.createElementVNode("rect",{x:e.unref(n).left,y:e.unref(n).top+(e.unref(n).chartHeight-e.unref(n).chartHeight*e.unref(t).style.chart.valueBar.heightRatio)/2,height:e.unref(n).chartHeight*e.unref(t).style.chart.valueBar.heightRatio,width:e.unref(i).value.width,fill:e.unref(t).style.chart.valueBar.color,stroke:e.unref(t).style.chart.valueBar.stroke,"stroke-width":e.unref(t).style.chart.valueBar.strokeWidth},null,8,ie),e.unref(t).style.chart.valueBar.label.show?(e.openBlock(),e.createElementBlock("text",{key:1,x:e.unref(n).left+e.unref(i).value.width,y:e.unref(n).top-6+e.unref(t).style.chart.valueBar.label.offsetY,"font-size":e.unref(t).style.chart.valueBar.label.fontSize,"font-weight":e.unref(t).style.chart.valueBar.label.bold?"bold":"normal",fill:e.unref(t).style.chart.valueBar.label.color,"text-anchor":"middle"},e.toDisplayString(e.unref(l.applyDataLabel)(e.unref(t).style.chart.segments.dataLabels.formatter,e.unref(u),e.unref(l.dataLabel)({p:e.unref(t).style.chart.segments.dataLabels.prefix,v:e.unref(u),s:e.unref(t).style.chart.segments.dataLabels.suffix,r:e.unref(t).style.chart.segments.dataLabels.rounding}))),9,ce)):e.createCommentVNode("",!0),e.unref(t).style.chart.target.onTop?(e.openBlock(),e.createElementBlock("rect",{key:2,x:e.unref(i).target.x,y:e.unref(n).top+(e.unref(n).chartHeight-e.unref(n).chartHeight*e.unref(t).style.chart.target.heightRatio)/2,height:e.unref(n).chartHeight*e.unref(t).style.chart.target.heightRatio,width:e.unref(t).style.chart.target.width,rx:e.unref(t).style.chart.target.rounded?e.unref(t).style.chart.target.width/2:0,fill:e.unref(t).style.chart.target.color,stroke:e.unref(t).style.chart.target.stroke,"stroke-width":e.unref(t).style.chart.target.strokeWidth},null,8,fe)):e.createCommentVNode("",!0),e.unref(t).style.chart.segments.dataLabels.show?(e.openBlock(),e.createElementBlock("g",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i).ticks,a=>(e.openBlock(),e.createElementBlock("text",{x:a.x,y:a.y,"text-anchor":"middle",fill:e.unref(t).style.chart.segments.dataLabels.color,"font-size":e.unref(t).style.chart.segments.dataLabels.fontSize+"px","font-weight":e.unref(t).style.chart.segments.dataLabels.bold?"bold":"normal"},e.toDisplayString(e.unref(l.applyDataLabel)(e.unref(t).style.chart.segments.dataLabels.formatter,a.value,e.unref(l.dataLabel)({p:e.unref(t).style.chart.segments.dataLabels.prefix,v:a.value,s:e.unref(t).style.chart.segments.dataLabels.suffix,r:e.unref(t).style.chart.segments.dataLabels.rounding}))),9,he))),256))])):e.createCommentVNode("",!0),e.unref(t).style.chart.segments.dataLabels.show&&e.unref(t).style.chart.segments.ticks.show?(e.openBlock(),e.createElementBlock("g",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(i).ticks,a=>(e.openBlock(),e.createElementBlock("line",{x1:a.x,x2:a.x,y1:e.unref(n).bottom,y2:e.unref(n).bottom+3,stroke:e.unref(t).style.chart.segments.ticks.stroke,"stroke-width":1,"stroke-linecap":"round"},null,8,ge))),256))])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"svg",{svg:e.unref(n)},void 0,!0)],14,ae)):e.createCommentVNode("",!0),r.$slots.watermark?(e.openBlock(),e.createElementBlock("div",ye,[e.renderSlot(r.$slots,"watermark",e.normalizeProps(e.guardReactiveProps({isPrinting:e.unref(E)||e.unref(V)})),void 0,!0)])):e.createCommentVNode("",!0),e.unref(f)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(Z.default,{key:6,config:{type:"bullet",style:{backgroundColor:e.unref(t).style.chart.backgroundColor,bullet:{color:"#CCCCCC"}}}},null,8,["config"])),e.createElementVNode("div",{ref_key:"chartLegend",ref:M},[e.unref(t).style.chart.legend.show?(e.openBlock(),e.createBlock(J.Legend,{key:0,clickable:!1,legendSet:e.unref(P),config:e.unref(W)},{item:e.withCtx(({legend:a})=>[e.createElementVNode("div",pe,[e.createElementVNode("span",ve,e.toDisplayString(a.name)+":",1),e.createElementVNode("span",null,e.toDisplayString(a.value),1)])]),_:1},8,["legendSet","config"])):e.createCommentVNode("",!0),e.renderSlot(r.$slots,"legend",{legend:e.unref(P)},void 0,!0)],512),r.$slots.source?(e.openBlock(),e.createElementBlock("div",ke,[e.renderSlot(r.$slots,"source",{},void 0,!0)],512)):e.createCommentVNode("",!0)],46,re))}},we=te._export_sfc(be,[["__scopeId","data-v-e8a6d42d"]]);exports.default=we;