vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
2 lines (1 loc) • 13.4 kB
JavaScript
;const e=require("vue"),ge=require("./BaseIcon-Dhgv4Qgl.cjs"),K=require("./useResponsive-N8jl0-aC.cjs"),h=require("./index-CtzlfT2i.cjs"),pe=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),ye={class:"vue-data-ui-slicer-labels",style:{position:"relative","z-index":"1","pointer-events":"none"}},xe={key:0,style:{width:"100%",position:"relative"}},be={key:0,class:"minimap",style:{width:"100%"}},ke=["xmlns","viewBox"],we=["id"],Se=["stop-color"],Ne=["d","stroke"],Ce=["x","width","height","fill","rx"],Ee=["d","fill"],Be=["x","width","height","rx","fill"],Me=["x","width","height","fill","rx"],Re=["d","fill"],$e=["d","stroke"],Ve=["cx","cy","stroke","fill"],Le=["cx","cy","stroke","fill"],ze=["x1","x2","y2","stroke"],De=["x","height","width","onMouseenter"],Te=["min","max"],Pe=["min","max"],Fe={__name:"Slicer",props:{background:{type:String,default:"#FFFFFF"},borderColor:{type:String,default:"#FFFFFF"},fontSize:{type:Number,default:14},labelLeft:{type:String,default:""},labelRight:{type:String,default:""},textColor:{type:String,default:"#1A1A1A"},inputColor:{type:String,default:"#1A1A1A"},max:{type:Number,default:0},min:{type:Number,default:0},selectColor:{type:String,default:"#4A4A4A"},useResetSlot:{type:Boolean,default:!1},valueStart:{type:[Number,String],default:0},valueEnd:{type:[Number,String],default:0},minimap:{type:Array,default:[]},smoothMinimap:{type:Boolean,default:!1},minimapSelectedColor:{type:String,default:"#1f77b4"},minimapSelectionRadius:{type:Number,default:12},minimapLineColor:{type:String,default:"#2D353C"},minimapSelectedColorOpacity:{type:Number,default:.2},minimapSelectedIndex:{type:Number,default:null},minimapIndicatorColor:{type:String,default:"#2D353C"},refreshStartPoint:{type:Number,default:0},refreshEndPoint:{type:Number,default:null},enableRangeHandles:{type:Boolean,default:!1},enableSelectionDrag:{type:Boolean,default:!0},verticalHandles:{type:Boolean,default:!1}},emits:["update:start","update:end","reset","trapMouse"],setup(n,{expose:Q,emit:Y}){e.useCssVars(l=>({"5f3498b1":ee.value,"11abbdb6":p.value,57330254:le.value,"51413b56":n.selectColor,"70c09a63":te.value}));const t=n,c=e.ref(null),u=e.ref(t.min),r=e.ref(t.max),k=e.computed(()=>!!t.minimap.length),C=e.ref(h.createUid()),_=e.computed(()=>t.refreshEndPoint===null?t.max:t.refreshEndPoint),f=Y,g=e.computed(()=>{const l=t.max-t.min,a=(u.value-t.min)/l*100,o=(r.value-t.min)/l*100;return{left:`${a}%`,width:`${o-a}%`,background:t.selectColor,tooltipLeft:`calc(${a}% - ${A.value?0:P.value/2}px)`,tooltipRight:`calc(${o}% - ${H.value?N.value:N.value/2}px)`,arrowLeft:!A.value,arrowRight:!H.value}}),A=e.computed(()=>c.value?c.value.getBoundingClientRect().width*((u.value-t.min)/(t.max-t.min))-P.value/2<0:!1),H=e.computed(()=>c.value?c.value.getBoundingClientRect().width*((r.value-t.min)/(t.max-t.min))+N.value/2>c.value.getBoundingClientRect().width:!1),ee=e.computed(()=>t.inputColor),te=e.computed(()=>t.background),le=e.computed(()=>`${t.selectColor}33`),p=e.computed(()=>t.borderColor),I=e.computed(()=>{let l=[];for(let a=0;a<t.minimap.length;a+=1)l.push(a);return l});function W(){f("reset")}function ae(){Number(u.value)>Number(r.value)-1&&(u.value=Number(r.value)-1),f("update:start",Number(u.value))}function ne(){Number(r.value)<Number(u.value)+1&&(r.value=Number(u.value)+1),f("update:end",Number(r.value))}e.watch(()=>t.min,l=>{Number(u.value)<Number(l)&&(u.value=Number(l)),Number(r.value)<Number(l)&&(r.value=Number(l))}),e.watch(()=>t.max,l=>{Number(u.value)>Number(l)&&(u.value=Number(l)),Number(r.value)>Number(l)&&(r.value=Number(l))});const E=e.ref(null),i=e.ref({width:1,height:1}),S=e.ref(null);e.onMounted(()=>{if(k.value){const l=K.throttle(()=>{const{width:a,height:o}=K.useResponsive({chart:E.value});i.value.width=a,i.value.height=o-47});S.value=new ResizeObserver(l),S.value.observe(E.value)}}),e.onBeforeUnmount(()=>{S.value&&S.value.disconnect()});const s=e.computed(()=>t.minimap.length?i.value.width/t.minimap.length:0),m=e.computed(()=>{if(!t.minimap.length)return[];const l=Math.max(...t.minimap),a=Math.min(...t.minimap)-10,o=l-(a>0?0:a),d=t.minimap.map((ve,he)=>{const fe=ve-a;return{x:i.value.width/t.minimap.length*he+s.value/2,y:i.value.height-fe/o*(i.value.height*.9)}}),y=t.smoothMinimap?h.createSmoothPath(d):h.createStraightPath(d),F=[...d].slice(t.valueStart,t.valueEnd),me=t.smoothMinimap?h.createSmoothPath(F):h.createStraightPath(F);return{fullSet:y,selectionSet:me,sliced:F,firstPlot:d[t.valueStart],lastPlot:d[t.valueEnd-1]}}),v=e.computed(()=>({x:s.value*u.value+s.value/2,width:i.value.width*((r.value-u.value)/t.max)-s.value})),w=e.ref(t.minimapSelectedIndex);e.watch(()=>t.minimapSelectedIndex,l=>{w.value=l+t.valueStart},{immediate:!0});function oe(l){w.value=l,l>=t.valueStart&&l<t.valueEnd&&f("trapMouse",l-t.valueStart)}const ie=e.ref(0),B=e.ref(null),M=e.ref(null);function R(l){u.value=l,B.value&&(B.value.value=l),f("update:start",Number(u.value))}function $(l){r.value=l,M.value&&(M.value.value=l),f("update:end",Number(r.value))}const V=e.computed(()=>t.valueEnd-t.valueStart),L=e.ref(!1);let z=e.ref(null);const ue=e.computed(()=>c.value?(c.value.getBoundingClientRect().width-48)/(t.max-t.min):20),re=e.computed(()=>(c.value.getBoundingClientRect().width-48)/(t.max-t.min)*V.value),se=e.ref(2.5),X=e.computed(()=>{const l=c.value.getBoundingClientRect().width-48;return Math.ceil((t.max-t.min)/((l-re.value)/se.value))}),q=l=>{if(b.value=!0,!t.enableSelectionDrag)return;const a=l.type==="touchstart";if((a?l.targetTouches[0].target:l.target).classList.contains("range-handle"))return;L.value=!0,z.value=a?l.targetTouches[0].clientX:l.clientX;const d=a?de:U,y=a?ce:j;window.addEventListener(a?"touchmove":"mousemove",d,{passive:!1}),window.addEventListener(a?"touchend":"mouseup",y)};function U(l){O(l.clientX)}function de(l){c.value.contains(l.target)&&(l.target.classList.contains("range-handle")||(l.preventDefault(),O(l.targetTouches[0].clientX)))}function O(l){if(!L.value)return;const a=l-z.value;if(Math.abs(a)>ue.value){if(a>0){if(Number(r.value)+1<=t.max){const o=Math.min(t.max,Number(r.value)+X.value);$(o),R(o-V.value)}}else if(Number(u.value)-1>=t.min){const o=Math.max(0,Number(u.value)-X.value);R(o),$(o+V.value)}z.value=l}}function j(){G("mousemove","mouseup")}function ce(){G("touchmove","touchend")}function G(l,a){L.value=!1,window.removeEventListener(l,U),window.removeEventListener(a,j)}const x=e.ref(!1),D=e.ref(null),T=e.ref(null),P=e.ref(1),N=e.ref(1),b=e.ref(!1);function Z(){D.value&&(P.value=D.value.getBoundingClientRect().width)}function J(){T.value&&(N.value=T.value.getBoundingClientRect().width)}return e.onUpdated(()=>{Z(),J()}),e.watch(()=>t.labelLeft,()=>{e.nextTick(Z)},{deep:!0}),e.watch(()=>t.labelRight,()=>{e.nextTick(J)},{deep:!0}),Q({setStartValue:R,setEndValue:$}),(l,a)=>(e.openBlock(),e.createElementBlock("div",{"data-html2canvas-ignore":"",style:{padding:"0 24px"},class:"vue-data-ui-zoom",ref_key:"zoomWrapper",ref:c,onMousedown:q,onTouchstart:q,onTouchend:a[9]||(a[9]=o=>b.value=!1)},[e.createElementVNode("div",ye,[n.valueStart!==n.refreshStartPoint||n.valueEnd!==_.value?(e.openBlock(),e.createElementBlock("div",xe,[n.useResetSlot?e.renderSlot(l.$slots,"reset-action",{key:1,reset:W},void 0,!0):(e.openBlock(),e.createElementBlock("button",{key:0,tabindex:"0",role:"button",class:"vue-data-ui-refresh-button",style:e.normalizeStyle({top:k.value?"36px":"-16px",pointerEvents:"all !important"}),onClick:W},[e.createVNode(ge.default,{name:"refresh",stroke:n.textColor},null,8,["stroke"])],4))])):e.createCommentVNode("",!0)]),e.createElementVNode("div",{class:"double-range-slider",ref_key:"minimapWrapper",ref:E,style:{"z-index":"0"},onMouseenter:a[7]||(a[7]=o=>b.value=!0),onMouseleave:a[8]||(a[8]=o=>b.value=!1)},[k.value?(e.openBlock(),e.createElementBlock("div",be,[(e.openBlock(),e.createElementBlock("svg",{xmlns:e.unref(h.XMLNS),viewBox:`0 0 ${i.value.width<0?0:i.value.width} ${i.value.height<0?0:i.value.height}`},[e.createElementVNode("defs",null,[e.createElementVNode("linearGradient",{id:C.value,x1:"0%",y1:"0%",x2:"0%",y2:"100%"},[e.createElementVNode("stop",{offset:"0%","stop-color":`${n.minimapLineColor}50`},null,8,Se),a[10]||(a[10]=e.createElementVNode("stop",{offset:"100%","stop-color":"transparent"},null,-1))],8,we)]),e.createElementVNode("path",{d:`M${m.value.fullSet}`,stroke:`${n.minimapLineColor}`,fill:"none","stroke-width":"1","stroke-linecap":"round","stroke-linejoin":"round",style:{opacity:"1"}},null,8,Ne),e.createElementVNode("rect",{x:v.value.x,width:v.value.width<0?0:v.value.width,height:Math.max(i.value.height,0),y:0,fill:p.value,rx:n.minimapSelectionRadius,stroke:"none"},null,8,Ce),e.createElementVNode("path",{d:`M${s.value/2},${Math.max(i.value.height,0)} ${m.value.fullSet} L${i.value.width-s.value/2},${Math.max(i.value.height,0)}Z`,fill:`url(#${C.value})`,stroke:"none",style:{opacity:"1"}},null,8,Ee),e.createElementVNode("rect",{x:v.value.x,width:v.value.width<0?0:v.value.width,height:Math.max(i.value.height,0),y:0,rx:n.minimapSelectionRadius,fill:p.value},null,8,Be),e.createElementVNode("rect",{x:v.value.x,width:v.value.width<0?0:v.value.width,height:Math.max(i.value.height,0),y:0,fill:n.minimapSelectedColor,rx:n.minimapSelectionRadius,style:e.normalizeStyle({opacity:n.minimapSelectedColorOpacity})},null,12,Me),e.createElementVNode("path",{d:`M${m.value.sliced[0].x},${Math.max(i.value.height,0)} ${m.value.selectionSet} L${m.value.sliced.at(-1).x},${Math.max(i.value.height,0)}Z`,fill:`url(#${C.value})`,stroke:"none",style:{opacity:"1"}},null,8,Re),e.createElementVNode("path",{d:`M ${m.value.selectionSet}`,stroke:`${n.minimapLineColor}`,fill:"transparent","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,8,$e),e.createElementVNode("circle",{cx:m.value.firstPlot.x,cy:m.value.firstPlot.y,"stroke-width":"0.5",stroke:p.value,r:"3",fill:n.minimapLineColor},null,8,Ve),e.createElementVNode("circle",{cx:m.value.lastPlot.x,cy:m.value.lastPlot.y,"stroke-width":"0.5",stroke:p.value,r:"3",fill:n.minimapLineColor},null,8,Le),w.value!==null?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(I.value,(o,d)=>(e.openBlock(),e.createElementBlock("g",null,[w.value===o&&o>=n.valueStart&&o<n.valueEnd?(e.openBlock(),e.createElementBlock("line",{key:0,x1:s.value*d+s.value/2,x2:s.value*d+s.value/2,y1:0,y2:Math.max(i.value.height,0),stroke:n.minimapIndicatorColor,"stroke-linecap":"round","stroke-dasharray":"2","stroke-width":"1"},null,8,ze)):e.createCommentVNode("",!0)]))),256)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(I.value,(o,d)=>(e.openBlock(),e.createElementBlock("rect",{x:s.value*d,y:0,height:Math.max(i.value.height,0),width:s.value<0?0:s.value,fill:"transparent",style:e.normalizeStyle([{"pointer-events":"all !important"},{cursor:o>=n.valueStart&&o<n.valueEnd&&n.enableSelectionDrag?x.value?"grabbing":"grab":"default"}]),onMousedown:a[0]||(a[0]=y=>x.value=!0),onMouseup:a[1]||(a[1]=y=>x.value=!1),onMouseenter:y=>oe(o),onMouseleave:a[2]||(a[2]=y=>{w.value=null,f("trapMouse",null)})},null,44,De))),256))],8,ke))])):e.createCommentVNode("",!0),a[11]||(a[11]=e.createElementVNode("div",{class:"slider-track"},null,-1)),e.createElementVNode("div",{class:e.normalizeClass({"range-highlight":!0,move:n.enableSelectionDrag}),onMousedown:a[3]||(a[3]=o=>x.value=!0),onMouseup:a[4]||(a[4]=o=>x.value=!1),style:e.normalizeStyle({...g.value,cursor:x.value?"grabbing":"grab"})},null,38),n.enableRangeHandles?e.withDirectives((e.openBlock(),e.createElementBlock("input",{ref_key:"rangeStart",ref:B,key:`range-min${ie.value}`,type:"range",class:e.normalizeClass({"range-left":!0,"range-handle":!0,"range-minimap":k.value&&n.verticalHandles}),min:n.min,max:n.max,"onUpdate:modelValue":a[5]||(a[5]=o=>u.value=o),onInput:ae},null,42,Te)),[[e.vModelText,u.value]]):e.createCommentVNode("",!0),n.enableRangeHandles?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:2,ref_key:"rangeEnd",ref:M,type:"range",class:e.normalizeClass({"range-right":!0,"range-handle":!0,"range-minimap":k.value&&n.verticalHandles}),min:n.min,max:n.max,"onUpdate:modelValue":a[6]||(a[6]=o=>r.value=o),onInput:ne},null,42,Pe)),[[e.vModelText,r.value]]):e.createCommentVNode("",!0),n.labelLeft?(e.openBlock(),e.createElementBlock("div",{key:3,ref_key:"tooltipLeft",ref:D,class:e.normalizeClass({"range-tooltip":!0,"range-tooltip-visible":b.value,"range-tooltip-arrow":g.value.arrowLeft&&!n.verticalHandles,"range-tooltip-arrow-left":!g.value.arrowLeft&&!n.verticalHandles}),style:e.normalizeStyle({left:g.value.tooltipLeft,color:e.unref(h.adaptColorToBackground)(n.selectColor),backgroundColor:n.selectColor,border:`1px solid ${p.value}`})},e.toDisplayString(n.labelLeft),7)):e.createCommentVNode("",!0),n.labelRight?(e.openBlock(),e.createElementBlock("div",{key:4,ref_key:"tooltipRight",ref:T,class:e.normalizeClass({"range-tooltip":!0,"range-tooltip-visible":b.value,"range-tooltip-arrow":g.value.arrowRight&&!n.verticalHandles,"range-tooltip-arrow-right":!g.value.arrowRight&&!n.verticalHandles}),style:e.normalizeStyle({left:g.value.tooltipRight,color:e.unref(h.adaptColorToBackground)(n.selectColor),backgroundColor:n.selectColor,border:`1px solid ${p.value}`})},e.toDisplayString(n.labelRight),7)):e.createCommentVNode("",!0)],544)],544))}},Ae=pe._export_sfc(Fe,[["__scopeId","data-v-a64f4070"]]);exports.Slicer=Ae;