taucharts/dist/plugins/floating-axes.js

Data-focused charting library based on D3

/*!
 * /*
 * taucharts@2.8.0 (2020-02-26)
 * Copyright 2020 Targetprocess, Inc.
 * Licensed under Apache License 2.0
 * * /
 * 
 */
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("taucharts"),require("d3-selection"));else if("function"==typeof define&&define.amd)define(["taucharts","d3-selection"],e);else{var r="object"==typeof exports?e(require("taucharts"),require("d3-selection")):e(t.Taucharts,t.d3);for(var a in r)("object"==typeof exports?exports:t)[a]=r[a]}}(window,(function(t,e){return function(t){var e={};function r(a){if(e[a])return e[a].exports;var n=e[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=t,r.c=e,r.d=function(t,e,a){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:a})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)r.d(a,n,function(e){return t[e]}.bind(null,n));return a},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=24)}({0:function(e,r){e.exports=t},1:function(t,r){t.exports=e},24:function(t,e,r){"use strict";r.r(e);var a=r(0),n=r.n(a),i=r(1),o=function(){return(o=Object.assign||function(t){for(var e,r=1,a=arguments.length;r<a;r++)for(var n in e=arguments[r])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)},s=o({},i),l=n.a.api.domUtils,c=n.a.api.utils,f="#FFFFFF",u="__transitionAttrs__",h="__floatingAxesSrcParent__",d="__floatingAxesSrcTransform__",x=0;function p(t){var e=c.defaults(t||{},{detectBackground:!0,bgcolor:"#fff"});return{init:function(t){this.instanceId=++x,this.chart=t,this.rootNode=t.getLayout().contentContainer,this.beforeExportHandler=t.on("beforeExportSVGNode",(function(){this.removeFloatingLayout()}),this),this.afterExportHandler=t.on("afterExportSVGNode",(function(){this.createFloatingLayout()}),this)},onBeforeRender:function(){this.removeFloatingLayout()},onRender:function(){if(e.detectBackground){var t=this.detectChartBackgroundColor();t&&(e.bgcolor=t)}f=e.bgcolor;var r=!0;this.chart.traverseSpec(this.chart.getSpec(),(function(t){t&&0===t.type.indexOf("COORDS.")&&("COORDS.RECT"!==t.type?r=!1:"extract-axes"!==(t.guide||{}).autoLayout&&(r=!1))})),r&&this.createFloatingLayout()},destroy:function(){this.removeFloatingLayout(),this.chart.removeHandler(this.beforeExportHandler,this),this.chart.removeHandler(this.afterExportHandler,this)},createFloatingLayout:function(){var t,r,a=this.instanceId,o=this.rootNode,c=this.chart.getSVG(),u=s.select(c),x=this.chart.configGPL.settings.animationSpeed,p=this.scrollManager=new m(o),b=(t=function(t){var e="> ."+t+".axis.tau-active";return[".frame-root.tau-active "+e,".frame-root.tau-active .cell.tau-active "+e].join(", ")},{x:Array.from(c.querySelectorAll(t("x"))),y:Array.from(c.querySelectorAll(t("y")))}),A=function(){function t(t){return{axis:t,parentTransform:function(t){var e,r={translate0:{x:0,y:0},translate:{x:0,y:0}},a=t;for(;a&&"SVG"!==a.nodeName.toUpperCase();)e=v(a),r.translate0.x+=e.translate0.x,r.translate0.y+=e.translate0.y,r.translate.x+=e.translate.x,r.translate.y+=e.translate.y,a=a.parentNode;return r}(t.parentNode),axisTransform:v(t)}}return{x:b.x.map(t),y:b.y.map(t)}}(),S=(r=A.y.map((function(t){return t.axisTransform.translate.x+t.parentTransform.translate.x})),Math.max.apply(null,r)+1),_=function(t){return Math.min.apply(null,t)}(A.x.map((function(t){return t.axisTransform.translate.y+t.parentTransform.translate.y})))-1,H=n.a.api.globalSettings.getScrollbarSize(o);var F={scrollLeft:o.scrollLeft,scrollTop:o.scrollTop,visibleWidth:o.clientWidth,visibleHeight:o.clientHeight,scrollbarWidth:H.width,scrollbarHeight:H.height,svgWidth:Number(u.attr("width")),svgHeight:Number(u.attr("height")),minXAxesY:_,maxYAxesX:S},T=function(){var t=u.append("defs").attr("class","floating-axes floating-axes__defs"),e={ns:{x1:0,y1:0,x2:0,y2:1},ew:{x1:1,y1:0,x2:0,y2:0},sn:{x1:0,y1:1,x2:0,y2:0},we:{x1:0,y1:0,x2:1,y2:0}};return Object.keys(e).forEach((function(r){var n=e[r],i=t.append("linearGradient").attr("id","shadow-gradient-"+r+"-"+a).attr("x1",n.x1).attr("y1",n.y1).attr("x2",n.x2).attr("y2",n.y2);i.append("stop").attr("class","floating-axes__shadow-start").attr("offset","0%").attr("stop-color","#E5E7EB").attr("stop-opacity",1),i.append("stop").attr("class","floating-axes__shadow-end").attr("offset","100%").attr("stop-color",f).attr("stop-opacity",0)})),t}();function w(t,e){e.forEach((function(e){e.axis[h]=e.axis.parentNode;var r=t.append("g");x?r.attr("transform",g(e.parentTransform.translate0.x,e.parentTransform.translate0.y)).transition().duration(x).attr("transform",g(e.parentTransform.translate.x,e.parentTransform.translate.y)):r.attr("transform",g(e.parentTransform.translate.x,e.parentTransform.translate.y)),r.node().appendChild(e.axis),Array.prototype.forEach.call(e.axis.querySelectorAll(".label"),(function(t){t[d]=t.getAttribute("transform")}))}))}var L,O,E=function(){var t=F.svgHeight-F.minXAxesY+1+F.scrollbarHeight,e=u.append("g").attr("class","floating-axes floating-axes__x").call(j,F.svgWidth,t,0,F.minXAxesY);w(e,A.x);var r=e.selectAll(".label");return p.handleVisibilityFor(e,"y").handleVisibilityFor(r,"x").onScroll((function(t,a){var n=Math.min(F.visibleHeight+a-F.svgHeight-F.scrollbarHeight,0);e.attr("transform",g(0,n)),r.each((function(){var e=y(this[d]),r=-F.svgWidth+F.visibleWidth+t-10;this.setAttribute("transform","translate("+(e.x+r)+","+e.y+") rotate("+e.r+")")}))})),e}(),M=function(){var t=u.append("g").attr("class","floating-axes floating-axes__y").call(j,F.maxYAxesX,F.svgHeight);w(t,A.y);var e=t.selectAll(".label");return p.handleVisibilityFor(t,"x").handleVisibilityFor(e,"y").onScroll((function(r,a){var n=Math.max(r,0);t.attr("transform",g(n,0)),e.each((function(){var t=y(this[d]),e=a+10;this.setAttribute("transform","translate("+t.x+","+(t.y+e)+") rotate("+t.r+")")}))})),t}(),V=(L=F.svgHeight-F.minXAxesY+F.scrollbarHeight,O=u.append("g").attr("class","floating-axes floating-axes__corner").call(j,F.maxYAxesX,L),p.handleVisibilityFor(O,"xy").onScroll((function(t,e){var r=Math.max(t,0),a=F.minXAxesY,n=Math.min(e+F.visibleHeight-L,a);O.attr("transform",g(r,n))})),O);function j(t,r,a,n,i){n=n||0,i=i||0,t.append("rect").attr("class","i-role-bg").attr("x",n-1).attr("y",i-1).attr("width",Math.max(0,r+2)).attr("height",Math.max(0,a+2)).attr("fill",e.bgcolor)}var C=function(){var t=F.maxYAxesX,e=F.svgHeight-F.minXAxesY+F.scrollbarHeight,r=u.append("g").attr("class","floating-axes floating-axes__shadows").attr("pointer-events","none"),n=function(t,e,n,i,o){return r.append("rect").attr("fill","url(#shadow-gradient-"+t+"-"+a+")").attr("x",e).attr("y",n).attr("width",Math.max(0,i)).attr("height",Math.max(0,o))},i=n("ns",0,0,t,16),o=n("ew",F.visibleWidth-16,F.visibleHeight-e,16,e),s=n("sn",0,F.visibleHeight-e-16,t,16),l=n("we",t,F.visibleHeight-e,16,e);p.handleVisibilityFor(i,"xy").handleVisibilityFor(o,"xy").handleVisibilityFor(s,"xy").handleVisibilityFor(l,"xy").onScroll((function(t,e){var a=t,n=e;r.attr("transform",g(a,n));var c=function(t,e){t.style("visibility",e?"":"hidden")};c(i,e>0&&F.svgHeight>F.visibleHeight),c(o,t+F.visibleWidth<F.svgWidth&&F.svgWidth>F.visibleWidth),c(s,e+F.visibleHeight<F.svgHeight&&F.svgHeight>F.visibleHeight),c(l,t>0&&F.svgWidth>F.visibleWidth)}))}(),W=E.node(),k=M.node(),N=V.node();p.onScroll((function(t){c.insertBefore(W,0===t?N.nextElementSibling:k)})),p.fireScroll(),this.floatingLayout={defs:T,xAxes:E,yAxes:M,shadows:C},u.selectAll(".floating-axes").on("mouseenter",(function(){l.dispatchMouseEvent(c,"mouseleave")})).on("mousemove",(function(){i.event.stopPropagation()})).on("click",(function(){i.event.stopPropagation()}))},removeFloatingLayout:function(){function t(t){t.selectAll(".axis").each((function(){this[h].appendChild(this),delete this[h],Array.prototype.forEach.call(this.querySelectorAll(".label"),(function(t){t.setAttribute("transform",t[d]),delete t[d]}))}))}this.floatingLayout&&(this.floatingLayout.xAxes.call(t),this.floatingLayout.yAxes.call(t),this.scrollManager.destroy(),this.floatingLayout=null),s.select(this.chart.getSVG()).selectAll(".floating-axes").remove()},detectChartBackgroundColor:function(){var t,e=this.chart.getLayout().layout;do{if("none"!==(t=window.getComputedStyle(e)).backgroundImage)return null;if("transparent"!==t.backgroundColor&&"rgba(0, 0, 0, 0)"!==t.backgroundColor)return t.backgroundColor}while(e=e.parentElement);return null}}}function g(t,e){return"translate("+t+","+e+")"}function y(t){var e={x:0,y:0,r:0};if(!t)return e;var r=t.indexOf("translate(");if(r>=0){var a=t.indexOf(")",r+10),n=t.substring(r+10,a).trim().replace(","," ").replace(/\s+/," ").split(" ");e.x=parseFloat(n[0]),n.length>1&&(e.y=parseFloat(n[1]))}var i=t.indexOf("rotate(");if(i>=0){var o=t.indexOf(")",i+7),s=t.substring(i+7,o);e.r=parseFloat(s.trim())}return e}function v(t){var e=t[u]&&t[u].transform,r=y(t.getAttribute("transform"));return{translate0:r,translate:e?y(t[u].transform):r}}function m(t){var e={x:[],y:[]},r={x:0,y:0},a={x:null,y:null},n=t,i=[];this.onScroll=function(t){return i.push(t),this},this.handleVisibilityFor=function(t,r){return r.indexOf("x")>=0&&e.x.push(t),r.indexOf("y")>=0&&e.y.push(t),this};var o=function(){var t=n.scrollLeft,o=n.scrollTop;i.forEach((function(e){e.call(null,t,o)}));var l=function(n){var i="x"===n?t:o;i!==r[n]&&(clearTimeout(a[n]),s(e[n],(function(t){t.transition("floatingAxes_scrollVisibility"),t.attr("opacity",1e-6)})),a[n]=setTimeout((function(){s(e[n],(function(t){a[n]=null,t.transition("floatingAxes_scrollVisibility").duration(256).attr("opacity",1)}))}),128)),r[n]=i};l("x"),l("y")};function s(t,e,r){t.forEach((function(t){e.call(r,t)}))}n.addEventListener("scroll",o),this.fireScroll=function(){o.call(null,n.scrollLeft,n.scrollTop)},this.destroy=function(){n.removeEventListener("scroll",o)}}n.a.api.plugins.add("floating-axes",p),e.default=p}})}));