vue-data-ui
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
2 lines (1 loc) • 13.6 kB
JavaScript
;const e=require("vue"),xe=require("./BaseIcon-Db1HIrAt.cjs"),Y=require("./useResponsive-N8jl0-aC.cjs"),f=require("./index-CBRI5uwl.cjs"),ye=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),be={class:"vue-data-ui-slicer-labels",style:{position:"relative","z-index":"1","pointer-events":"none"}},ke={key:0,style:{width:"100%",position:"relative"}},we={key:0,class:"minimap",style:{width:"100%"}},Se=["xmlns","viewBox"],Ne=["id"],Ce=["stop-color"],Ee=["d","stroke"],Be=["x","width","height","fill","rx"],Me=["d","fill"],$e=["x","width","height","rx","fill"],Re=["x","width","height","fill","rx"],Le=["d","fill"],Ve=["d","stroke"],ze=["cx","cy","stroke","fill"],De=["cx","cy","stroke","fill"],Te=["x1","x2","y2","stroke"],Pe=["x","height","width","onMouseenter"],Ie=["min","max"],Fe=["min","max"],Ae={__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:_,emit:ee}){e.useCssVars(t=>({a9eaaa56:le.value,43003349:p.value,"084765fa":ne.value,23357479:n.selectColor,"3d8e0af2":ae.value}));const l=n,c=e.ref(null),u=e.ref(l.min),r=e.ref(l.max),k=e.computed(()=>!!l.minimap.length),C=e.ref(f.createUid()),te=e.computed(()=>l.refreshEndPoint===null?l.max:l.refreshEndPoint),h=ee,g=e.computed(()=>{const t=l.max-l.min,a=(u.value-l.min)/t*100,o=(r.value-l.min)/t*100;return{left:`${a}%`,width:`${o-a}%`,background:l.selectColor,tooltipLeft:`calc(${a}% - ${F.value?0:P.value/2}px)`,tooltipRight:`calc(${o}% - ${A.value?N.value:N.value/2}px)`,arrowLeft:!F.value,arrowRight:!A.value}}),F=e.computed(()=>c.value?c.value.getBoundingClientRect().width*((u.value-l.min)/(l.max-l.min))-P.value/2<0:!1),A=e.computed(()=>c.value?c.value.getBoundingClientRect().width*((r.value-l.min)/(l.max-l.min))+N.value/2>c.value.getBoundingClientRect().width:!1),le=e.computed(()=>l.inputColor),ae=e.computed(()=>l.background),ne=e.computed(()=>`${l.selectColor}33`),p=e.computed(()=>l.borderColor),H=e.computed(()=>{let t=[];for(let a=0;a<l.minimap.length;a+=1)t.push(a);return t});function W(){h("reset")}function oe(){Number(u.value)>Number(r.value)-1&&(u.value=Number(r.value)-1),h("update:start",Number(u.value))}function ie(){Number(r.value)<Number(u.value)+1&&(r.value=Number(u.value)+1),h("update:end",Number(r.value))}e.watch(()=>l.min,t=>{Number(u.value)<Number(t)&&(u.value=Number(t)),Number(r.value)<Number(t)&&(r.value=Number(t))}),e.watch(()=>l.max,t=>{Number(u.value)>Number(t)&&(u.value=Number(t)),Number(r.value)>Number(t)&&(r.value=Number(t))});const E=e.ref(null),i=e.ref({width:1,height:1}),S=e.ref(null);e.onMounted(()=>{if(k.value){const t=Y.throttle(()=>{const{width:a,height:o}=Y.useResponsive({chart:E.value});i.value.width=a,i.value.height=o-47});S.value=new ResizeObserver(t),S.value.observe(E.value)}}),e.onBeforeUnmount(()=>{S.value&&S.value.disconnect()});const s=e.computed(()=>l.minimap.length?i.value.width/l.minimap.length:0),m=e.computed(()=>{if(!l.minimap.length)return[];const t=Math.max(...l.minimap),a=Math.min(...l.minimap)-10,o=t-(a>0?0:a),d=l.minimap.map((he,ge)=>{const pe=he-a;return{x:i.value.width/l.minimap.length*ge+s.value/2,y:i.value.height-pe/o*(i.value.height*.9)}}),x=l.smoothMinimap?f.createSmoothPath(d):f.createStraightPath(d),I=[...d].slice(l.valueStart,l.valueEnd),fe=l.smoothMinimap?f.createSmoothPath(I):f.createStraightPath(I);return{fullSet:x,selectionSet:fe,sliced:I,firstPlot:d[l.valueStart],lastPlot:d[l.valueEnd-1]}}),v=e.computed(()=>({x:s.value*u.value+s.value/2,width:i.value.width*((r.value-u.value)/l.max)-s.value})),w=e.ref(l.minimapSelectedIndex);e.watch(()=>l.minimapSelectedIndex,t=>{w.value=t+l.valueStart},{immediate:!0});function ue(t){w.value=t,t>=l.valueStart&&t<l.valueEnd&&h("trapMouse",t-l.valueStart)}const re=e.ref(0),B=e.ref(null),M=e.ref(null);function $(t){u.value=t,B.value&&(B.value.value=t),h("update:start",Number(u.value))}function R(t){r.value=t,M.value&&(M.value.value=t),h("update:end",Number(r.value))}const L=e.computed(()=>l.valueEnd-l.valueStart),V=e.ref(!1);let z=e.ref(null);const se=e.computed(()=>c.value?(c.value.getBoundingClientRect().width-48)/(l.max-l.min):20),de=e.computed(()=>(c.value.getBoundingClientRect().width-48)/(l.max-l.min)*L.value),ce=e.ref(2.5),X=e.computed(()=>{const t=c.value.getBoundingClientRect().width-48;return Math.ceil((l.max-l.min)/((t-de.value)/ce.value))}),q=t=>{if(b.value=!0,!l.enableSelectionDrag)return;const a=t.type==="touchstart";if((a?t.targetTouches[0].target:t.target).classList.contains("range-handle"))return;V.value=!0,z.value=a?t.targetTouches[0].clientX:t.clientX;const d=a?me:U,x=a?ve:Z;window.addEventListener(a?"touchmove":"mousemove",d,{passive:!1}),window.addEventListener(a?"touchend":"mouseup",x)};function U(t){O(t.clientX)}function me(t){c.value.contains(t.target)&&(t.target.classList.contains("range-handle")||(t.preventDefault(),O(t.targetTouches[0].clientX)))}function O(t){if(!V.value)return;const a=t-z.value;if(Math.abs(a)>se.value){if(a>0){if(Number(r.value)+1<=l.max){const o=Math.min(l.max,Number(r.value)+X.value);R(o),$(o-L.value)}}else if(Number(u.value)-1>=l.min){const o=Math.max(0,Number(u.value)-X.value);$(o),R(o+L.value)}z.value=t}}function Z(){j("mousemove","mouseup")}function ve(){j("touchmove","touchend")}function j(t,a){V.value=!1,window.removeEventListener(t,U),window.removeEventListener(a,Z)}const y=e.ref(!1),D=e.ref(null),T=e.ref(null),P=e.ref(1),N=e.ref(1),b=e.ref(!1);function G(){D.value&&(P.value=D.value.getBoundingClientRect().width)}function J(){T.value&&(N.value=T.value.getBoundingClientRect().width)}const K=e.ref(0);function Q(t){K.value=t==="start"?1:0}return e.onUpdated(()=>{G(),J()}),e.watch(()=>l.labelLeft,()=>{e.nextTick(G)},{deep:!0}),e.watch(()=>l.labelRight,()=>{e.nextTick(J)},{deep:!0}),_({setStartValue:$,setEndValue:R}),(t,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[11]||(a[11]=o=>b.value=!1)},[e.createElementVNode("div",be,[n.valueStart!==n.refreshStartPoint||n.valueEnd!==te.value?(e.openBlock(),e.createElementBlock("div",ke,[n.useResetSlot?e.renderSlot(t.$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(xe.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[9]||(a[9]=o=>b.value=!0),onMouseleave:a[10]||(a[10]=o=>b.value=!1)},[k.value?(e.openBlock(),e.createElementBlock("div",we,[(e.openBlock(),e.createElementBlock("svg",{xmlns:e.unref(f.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,Ce),a[12]||(a[12]=e.createElementVNode("stop",{offset:"100%","stop-color":"transparent"},null,-1))],8,Ne)]),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,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,fill:p.value,rx:n.minimapSelectionRadius,stroke:"none"},null,8,Be),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,Me),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,$e),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,Re),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,Le),e.createElementVNode("path",{d:`M ${m.value.selectionSet}`,stroke:`${n.minimapLineColor}`,fill:"transparent","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,8,Ve),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,ze),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,De),w.value!==null?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(H.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,Te)):e.createCommentVNode("",!0)]))),256)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(H.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?y.value?"grabbing":"grab":"default"}]),onMousedown:a[0]||(a[0]=x=>y.value=!0),onMouseup:a[1]||(a[1]=x=>y.value=!1),onMouseenter:x=>ue(o),onMouseleave:a[2]||(a[2]=x=>{w.value=null,h("trapMouse",null)})},null,44,Pe))),256))],8,Se))])):e.createCommentVNode("",!0),a[13]||(a[13]=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=>y.value=!0),onMouseup:a[4]||(a[4]=o=>y.value=!1),style:e.normalizeStyle({...g.value,cursor:y.value?"grabbing":"grab"})},null,38),n.enableRangeHandles?e.withDirectives((e.openBlock(),e.createElementBlock("input",{ref_key:"rangeStart",ref:B,key:`range-min${re.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:oe,onMouseenter:a[6]||(a[6]=o=>Q("start"))},null,42,Ie)),[[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[7]||(a[7]=o=>r.value=o),onInput:ie,onMouseenter:a[8]||(a[8]=o=>Q("end"))},null,42,Fe)),[[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(f.adaptColorToBackground)(n.selectColor),backgroundColor:n.selectColor,border:`1px solid ${p.value}`,zIndex:`${K.value+4}`})},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(f.adaptColorToBackground)(n.selectColor),backgroundColor:n.selectColor,border:`1px solid ${p.value}`,zIndex:"4"})},e.toDisplayString(n.labelRight),7)):e.createCommentVNode("",!0)],544)],544))}},He=ye._export_sfc(Ae,[["__scopeId","data-v-04e0735b"]]);exports.Slicer=He;