@aquassay/d3-horizon/dist/d3-horizon.min.js

Horizon chart for D3

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-array"),require("d3-axis"),require("d3-shape"),require("d3-scale-chromatic"),require("d3-selection"),require("d3-scale"),require("uuid"),require("d3-brush")):"function"==typeof define&&define.amd?define(["exports","d3-array","d3-axis","d3-shape","d3-scale-chromatic","d3-selection","d3-scale","uuid","d3-brush"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).d3={},t.d3Array,t.d3Axis,t.d3Shape,t.d3ScaleChromatic,t.d3Selection,t.d3Scale,t.uuid,t.d3Brush)}(this,function(t,N,h,j,u,m,B,E,C){"use strict";t.getURL=t=>{const e=t.cloneNode(!0),a=new XMLSerializer,r=e.querySelectorAll(".rule");r.forEach(t=>t.remove());t=a.serializeToString(e);return"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(t)},t.horizon=(t,{x:f=([t])=>t,y:x=([,t])=>t,defined:g,curve:v=j.curveLinear,marginTop:y=20,marginRight:e=0,marginBottom:a=0,marginLeft:b=0,width:k=640,size:w=25,bands:S=3,padding:$=1,xType:r=B.scaleTime,xDomain:i,xRange:n=[b,k-e],yType:q=B.scaleLinear,yDomain:M,yRange:A=[w,w-S*(w-$)],scheme:s=[u.schemeGreens,u.schemeBlues],colors:T=[s[0][Math.max(3,S)],s[1][Math.max(3,S)]],onHover:l,onSelectEndRange:o,onSelectStartRange:d}={})=>{a=t.length*w+y+a;const z=m.create("svg").attr("width",k).attr("height",a).attr("viewBox",[0,0,k,a]).attr("style","max-width: 100%; height: auto; height: intrinsic;").attr("font-family","sans-serif").attr("font-size",10),R=r(i,n);r=h.axisTop(R).ticks(k/80).tickSizeOuter(0);const L=[],c=(t.forEach((e,a)=>{if(e.data){const n=N.map(e.data,f),s=N.map(e.data,x),l=(void 0===g&&(g=(t,e)=>!isNaN(n[e])&&!isNaN(s[e])),N.map(e.data,g));var r=e.data.map((t,e)=>e),i=Math.max(Math.abs(N.min(s)),N.max(s));let t=M;void 0===t&&(t=[0,i]);const o=s.map(t=>0<=t?t:0),d=s.map(t=>t<0?Math.abs(t):0),c=q(t,A);i=a+"-"+E.v4();const p=j.area().defined(t=>l[t]).curve(v).x(t=>R(n[t])).y0(c(0)).y1(t=>c(d[t])),h=j.area().defined(t=>l[t]).curve(v).x(t=>R(n[t])).y0(c(0)).y1(t=>c(o[t])),u=z.append("g").attr("transform",`translate(0,${a*w+y})`),m=u.append("defs");m.append("clipPath").attr("id",i+"-clip-"+a).append("rect").attr("y",$).attr("width",k).attr("height",w-$),m.append("path").attr("id",i+"-path-positive-"+a).attr("d",h(r)),m.append("path").attr("id",i+"-path-negative-"+a).attr("d",p(r)),u.attr("clip-path",`url(#${i}-clip-${a})`).append("g").selectAll("use").data((t,e)=>new Array(S).fill(e)).join("use").attr("fill",(t,e)=>T[0][e+Math.max(0,3-S)]).attr("transform",(t,e)=>`translate(0,${e*w})`).attr("xlink:href",`#${i}-path-positive-`+a),u.attr("clip-path",`url(#${i}-clip-${a})`).append("g").selectAll("use").data((t,e)=>new Array(S).fill(e)).join("use").attr("fill",(t,e)=>T[1][e+Math.max(0,3-S)]).attr("transform",(t,e)=>`translate(0,${e*w})`).attr("xlink:href",`#${i}-path-negative-`+a),u.append("text").attr("x",b+5).attr("y",(w+$)/2).attr("dy","0.35em").attr("fill","black").attr("font-size","12px").attr("font-weight","bold").attr("stroke-width",3).attr("stroke","white").attr("paint-order","stroke").text(e.name);L.push(t=>{t=N.bisector(f).left(e.data,R.invert(t),0,e.data.length-1);return{name:e.name,value:s[t]}})}}),z.append("g").attr("transform",`translate(0,${y})`).call(r).call(t=>t.selectAll(".tick").filter(t=>R(t)<10||R(t)>k-10).remove()).call(t=>t.select(".domain").remove()),z.append("line").attr("class","rule").attr("stroke","black").attr("stroke-dasharray","1,1").attr("y1",0).attr("y2",a).attr("x1",.5).attr("x2",.5));if(z.on("mousemove touchmove",t=>{const[e]=m.pointer(t,z.node());var a;c.attr("x1",e).attr("x2",e),l&&(a=L.map(t=>t(e)),l({time:R.invert(e),event:t,values:a}))}),o){const p=C.brushX();z.append("g").attr("class","brush").call(p.on("start",t=>{d&&d(t)})).call(p.on("end",t=>{var[t,e]=t.selection,t=R.invert(t),e=R.invert(e);o([t,e])}))}return z.node()},Object.defineProperty(t,"__esModule",{value:!0})});