taucharts/dist/plugins/diff-tooltip.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 i="object"==typeof exports?e(require("taucharts"),require("d3-selection")):e(t.Taucharts,t.d3);for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(window,(function(t,e){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=35)}({0:function(e,i){e.exports=t},1:function(t,i){t.exports=e},2:function(t,e,i){"use strict";i.d(e,"a",(function(){return n})),i.d(e,"b",(function(){return r}));var n="tau-chart__tooltip";function r(t,e){return{render:function(t){return this.args=t,t=Object.assign({},t,{fields:this.filterFields(t.fields)}),this.rootTemplate(t)},rootTemplate:function(t){return['<div class="'+n+"__buttons "+n+'__clickable">',this.buttonsTemplate(),"</div>",'<div class="i-role-content '+n+'__content">',this.contentTemplate(t),"</div>"].join("\n")},contentTemplate:function(t){return this.fieldsTemplate(t)},filterFields:function(t){return t},getLabel:function(e){return t.getFieldLabel(e)},getFormatter:function(e){return t.getFieldFormat(e)},fieldsTemplate:function(t){var e=this,i=t.data;return t.fields.map((function(t){return e.itemTemplate({data:i,field:t})})).join("\n")},itemTemplate:function(t){var e=t.data,i=t.field,r=this.getLabel(i),o=this.getFormatter(i)(e[i]);return['<div class="'+n+'__list__item">','  <div class="'+n+'__list__elem">'+r+"</div>",'  <div class="'+n+'__list__elem">'+o+"</div>","</div>"].join("\n")},buttonsTemplate:function(){return[this.buttonTemplate({cls:"i-role-exclude",text:"Exclude",icon:function(){return'<span class="tau-icon-close-gray"></span>'}})].join("\n")},buttonTemplate:function(t){var e=t.icon,i=t.text,r=t.cls;return['<div class="'+n+"__button "+r+'">','  <div class="'+n+'__button__wrap">',"    "+(e?e()+" ":"")+i,"  </div>","</div>"].join("\n")},didMount:function(){var e=t.getDomNode().querySelector(".i-role-exclude");e&&e.addEventListener("click",(function(){t.excludeHighlightedElement(),t.setState({highlight:null,isStuck:!1})}))}}}},3:function(t,e,i){"use strict";var n=i(0),r=i.n(n),o=i(1),a=i(2),l=r.a.api.utils,s=r.a.api.domUtils,c=r.a.api.pluginsSDK,u=function(){function t(t){this.settings=l.defaults(t||{},{align:"bottom-right",clickable:!0,clsClickable:"tau-chart__tooltip__clickable",clsStuck:"stuck",clsTarget:"tau-chart__tooltip-target",escapeHtml:!0,fields:null,formatters:{},getTemplate:null,spacing:24,winBound:12,onExclude:function(){}}),this.onRender=this._getRenderHandler()}return t.prototype.init=function(t){this._chart=t,this._tooltip=this._chart.addBalloon({spacing:this.settings.spacing,winBound:this.settings.winBound,auto:!0,effectClass:"fade"}),this._initDomEvents(),this.state={highlight:null,isStuck:!1},this.setState(this.state),this._template=this._getTemplate()},t.prototype._getTemplate=function(){var t=Object(a.b)(this,this.settings);return"function"==typeof this.settings.getTemplate?this.settings.getTemplate(t,this,this.settings):t},t.prototype._renderTemplate=function(t,e){return this._template.render({data:t,fields:e})},t.prototype._initDomEvents=function(){var t=this;this._scrollHandler=function(){t.setState({highlight:null,isStuck:!1})},window.addEventListener("scroll",this._scrollHandler,!0),this.settings.clickable&&(this._outerClickHandler=function(e){var i=Array.from(document.querySelectorAll("."+t.settings.clsClickable)).concat(t.getDomNode()).map((function(t){return t.getBoundingClientRect()})),n=Math.min.apply(Math,i.map((function(t){return t.top}))),r=Math.min.apply(Math,i.map((function(t){return t.left}))),o=Math.max.apply(Math,i.map((function(t){return t.right}))),a=Math.max.apply(Math,i.map((function(t){return t.bottom})));(e.clientX<r||e.clientX>o||e.clientY<n||e.clientY>a)&&t.setState({highlight:null,isStuck:!1})})},t.prototype.getDomNode=function(){return this._tooltip.getElement()},t.prototype.setState=function(t){var e=this,i=this.settings,n=this.state,r=this.state=Object.assign({},n,t);n.highlight=n.highlight||{data:null,cursor:null,unit:null},r.highlight=r.highlight||{data:null,cursor:null,unit:null},r.isStuck&&n.highlight.data&&(r.highlight=n.highlight),r.highlight.data!==n.highlight.data&&(r.highlight.data?(this._hideTooltip(),this._showTooltip(r.highlight.data,r.highlight.cursor),this._setTargetSvgClass(!0),requestAnimationFrame((function(){e._setTargetSvgClass(!0)}))):r.isStuck||!n.highlight.data||r.highlight.data||(this._removeFocus(),this._hideTooltip(),this._setTargetSvgClass(!1))),!r.highlight.data||n.highlight.cursor&&r.highlight.cursor.x===n.highlight.cursor.x&&r.highlight.cursor.y===n.highlight.cursor.y||(this._tooltip.position(r.highlight.cursor.x,r.highlight.cursor.y),this._tooltip.updateSize());var o=this.getDomNode();this.settings.clickable&&r.isStuck!==n.isStuck&&(r.isStuck?(window.addEventListener("click",this._outerClickHandler,!0),o.classList.add(i.clsStuck),this._setTargetEventsEnabled(!1),this._accentFocus(r.highlight.data),this._tooltip.updateSize()):(window.removeEventListener("click",this._outerClickHandler,!0),o.classList.remove(i.clsStuck),requestAnimationFrame((function(){e._setTargetEventsEnabled(!0);var t=e._chart.getSVG();t&&s.dispatchMouseEvent(t,"mouseleave")}))))},t.prototype._showTooltip=function(t,e){var i=this.settings,n=i.fields||"function"==typeof i.getFields&&i.getFields(this._chart)||Object.keys(t),r=this._renderTemplate(t,n);this._tooltip.content(r).position(e.x,e.y).place(i.align).show().updateSize(),this._template.didMount&&this._template.didMount()},t.prototype._hideTooltip=function(){window.removeEventListener("click",this._outerClickHandler,!0),this._template.willUnmount&&this._template.willUnmount(),this._tooltip.hide()},t.prototype.destroy=function(){window.removeEventListener("scroll",this._scrollHandler,!0),this._setTargetSvgClass(!1),this.setState({highlight:null,isStuck:!1}),this._tooltip.destroy()},t.prototype._subscribeToHover=function(){var t=this,e=["ELEMENT.LINE","ELEMENT.AREA","ELEMENT.PATH","ELEMENT.INTERVAL","ELEMENT.INTERVAL.STACKED","ELEMENT.POINT"];this._chart.select((function(t){return e.indexOf(t.config.type)>=0})).forEach((function(e){e.on("data-hover",(function(e,i){var n=document.body.getBoundingClientRect();t.setState({highlight:i.data?{data:i.data,cursor:{x:i.event.clientX-n.left,y:i.event.clientY-n.top},unit:i.unit}:null})})),t.settings.clickable&&e.on("data-click",(function(e,i){var n=document.body.getBoundingClientRect();t.setState(i.data?{highlight:{data:i.data,cursor:{x:i.event.clientX-n.left,y:i.event.clientY-n.top},unit:i.unit},isStuck:!0}:{highlight:null,isStuck:null})}))}))},t.prototype.getFieldFormat=function(t){var e=this._formatters[t]?this._formatters[t].format:function(t){return String(t)};return this.settings.escapeHtml?function(t){return l.escapeHtml(e(t))}:e},t.prototype.getFieldLabel=function(t){var e=this._formatters[t]?this._formatters[t].label:t;return this.settings.escapeHtml?l.escapeHtml(e):e},t.prototype._accentFocus=function(t){var e=function(e){return e===t};this._chart.select((function(){return!0})).forEach((function(t){t.fire("highlight",e)}))},t.prototype._removeFocus=function(){var t=function(){return null};this._chart.select((function(){return!0})).forEach((function(e){e.fire("highlight",t),e.fire("highlight-data-points",t)}))},t.prototype.excludeHighlightedElement=function(){var t=this.state.highlight.data;this._chart.addFilter({tag:"exclude",predicate:function(e){return e!==t}}),this.settings.onExclude(t),this._chart.refresh()},t.prototype._getRenderHandler=function(){return function(){this._formatters=c.getFieldFormatters(this._chart.getSpec(),this.settings.formatters),this._subscribeToHover(),this.setState({highlight:null,isStuck:!1})}},t.prototype._setTargetSvgClass=function(t){o.select(this._chart.getSVG()).classed(this.settings.clsTarget,t)},t.prototype._setTargetEventsEnabled=function(t){t?this._chart.enablePointerEvents():this._chart.disablePointerEvents()},t}();e.a=u},35:function(t,e,i){"use strict";i.r(e);var n=i(0),r=i.n(n),o=i(3),a=i(2),l="diff-tooltip__item",s="diff-tooltip__header";var c,u=i(1),h=r.a.api.utils,d={draw:function(){var t=this.node().config;this._container=t.options.slot(t.uid)},addInteraction:function(){var t=this;this.node().on("interval-highlight",(function(e,i){t._drawRange(i)}))},_drawRange:function(t){var e=this.node(),i=e.config,n=e.screenModel.flip,r=this._container,o="interval-highlight",a=t?t[0]:null,l=t?t[1]:null,s=n?i.options.width:i.options.height;h.take(function(){var e=r.selectAll("."+o).data(t?[1]:[]);e.exit().remove();var i=e.enter().append("g").attr("class",o).attr("pointer-events","none");return{g:e,gEnter:i}}()).then((function(e){var c,h,d,p,f,g,_,m,v,y;!function(){for(var e=r.node();"svg"!==(e=e.parentNode).tagName;);var o="interval-highlight__defs__"+i.uid,a=u.select(e).selectAll("#"+o).data(t?[1]:[]);a.exit().remove();var l=a.enter().append("defs").attr("class","interval-highlight__defs").attr("id",o).append("linearGradient").attr("id","interval-highlight__gradient").attr("x1","0%").attr("y1",n?"100%":"0%").attr("x2",n?"0%":"100%").attr("y2","0%");l.append("stop").attr("class","interval-highlight__gradient-start").attr("offset","0%"),l.append("stop").attr("class","interval-highlight__gradient-end").attr("offset","100%")}(),h=(c=e).g,d=c.gEnter,p=h.select(".interval-highlight__range"),f=d.append("rect").attr("class","interval-highlight__range").attr("fill","url(#interval-highlight__gradient)"),_=(g=n?{x:0,y:l,width:s,height:a-l}:{x:a,y:0,width:l-a,height:s}).x,m=g.y,v=g.width,y=g.height,f.merge(p).attr("x",_).attr("y",m).attr("width",Math.abs(v)).attr("height",Math.abs(y)),function(t){var e=t.g,i=t.gEnter,r=o+"__range-start",l=e.select("."+r),c=i.append("line").attr("class",r),u=n?{x1:0,y1:a,x2:s,y2:a}:{x1:a,y1:0,x2:a,y2:s},h=u.x1,d=u.y1,p=u.x2,f=u.y2;c.merge(l).attr("x1",h).attr("y1",d).attr("x2",p).attr("y2",f)}(e),function(t){var e=t.g,i=t.gEnter,r=o+"__range-end",a=e.select("."+r),c=i.append("line").attr("class",r),u=n?{x1:0,y1:l,x2:s,y2:l}:{x1:l,y1:0,x2:l,y2:s},h=u.x1,d=u.y1,p=u.x2,f=u.y2;c.merge(a).attr("x1",h).attr("y1",d).attr("x2",p).attr("y2",f)}(e)}))}},p=(c=function(t,e){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)},function(t,e){function i(){this.constructor=t}c(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),f=r.a.api.utils,g=function(t){function e(e){var i=t.call(this,e)||this;return i.onSpecReady=i._getSpecReadyHandler(),i}return p(e,t),e.prototype.init=function(e){t.prototype.init.call(this,e),this._unitsGroupedData=new Map},e.prototype._getTemplate=function(){var t,e,i,n=(t=this,e=this.settings,i=Object(a.b)(t,e),Object.assign({},i,{hasColor:function(){return null!=this.args.colorField},contentTemplate:function(t){return[this.fieldsTemplate(t),this.tableTemplate(t)].join("\n")},filterFields:function(e){var n=t.state.highlight.unit.screenModel.model,r=n.scaleColor,o=n.scaleX,a=n.scaleY,l=e.filter((function(t){return t!==r.dim&&t!==o.dim&&t!==a.dim})),s=function(){return l.push(o.dim)};return this.shouldShowColorTable()?s():(s(),r.dim&&l.push(r.dim),l.push(a.dim)),i.filterFields.call(this,l)},itemTemplate:function(t){var e=t.data,i=t.field,n=this.getLabel(i),r=this.getFormatter(i)(e[i]),o=this.args.prev,s=(this.args.valueField,this.shouldShowDiff(i)),c=['<span class="'+l+'__value">',""+r,s?" "+this.fieldUpdownTemplate(this.getDiff({data:e,prev:o,field:i})):"","</span>"].join("");return['<div class="'+a.a+'__list__item">','  <div class="'+a.a+'__list__elem">'+n+"</div>","  "+c,"</div>"].join("\n")},shouldShowDiff:function(t){return t===this.args.valueField},getDiff:function(t){var e=t.data,i=t.prev,n=t.field,r=this.getFormatter(n),o=(e?e[n]:0)-(i?i[n]:0);return{diff:r(o),sign:Math.sign(o)}},fieldUpdownTemplate:function(t){var e=t.diff,i=t.sign;return['<span class="diff-tooltip__field__updown diff-tooltip__field__updown_'+(i>0?"positive":"negative")+'">',(i>0?"&#x25B2;":i<0?"&#x25BC;":"")+(0===i?"":e),"</span>"].join("")},shouldShowColorTable:function(){var t=this.args.groups;return this.hasColor()&&t.length>1},tableTemplate:function(t){return this.shouldShowColorTable()?['<div class="diff-tooltip__table">',this.tableHeaderTemplate(t),this.tableBodyTemplate(t),"</div>"].join("\n"):""},tableHeaderTemplate:function(t){var e=t.colorField,i=t.valueField,n=this.getLabel(e),r=this.getLabel(i);return['<div class="'+s+'">','  <span class="'+s+'__text">'+n+"</span>",'  <span class="'+s+'__value">'+r+"</span>",'  <span class="'+s+'__updown">&#x25BC;&#x25B2;</span>',"</div>"].join("\n")},tableBodyTemplate:function(t){var e=this,i=t.data,n=t.groups,r=t.valueField,o=t.colorField,a=i,l=n.map((function(t){var e=t.data;return e?e[r]:0})),s=Math.min.apply(Math,l),c=Math.max.apply(Math,l);return['<div class="diff-tooltip__body">','<div class="diff-tooltip__body__content">',n.map((function(t){var i=t.data,n=t.prev;return e.tableRowTemplate({data:i,prev:n,highlighted:a,valueField:r,colorField:o,min:s,max:c})})).join("\n"),"</div>","</div>"].join("\n")},tableRowTemplate:function(t){var e=t.data,i=t.prev,n=t.highlighted,r=t.valueField,o=t.colorField,a=t.min,s=t.max,c=e?e[r]:0,u=this.getFormatter(o)((e||i)[o]),h=this.getFormatter(r)(c),d=e===n,p=this.getDiff({data:e,prev:i,field:r}),f=p.diff,g=p.sign,_=this.getColor(e||i),m=_.color,v=_.colorCls;return['<div class="'+l+(d?" "+l+"_highlighted":"")+'">',"  "+this.valueBarTemplate({min:a,max:s,v:c,color:m,colorCls:v}),'  <span class="'+l+'__text">'+u+"</span>",'  <span class="'+l+'__value">'+h+"</span>","  "+this.updownTemplate({diff:f,sign:g}),"</div>"].join("\n")},valueBarTemplate:function(t){var e=t.min,i=t.max,n=t.v,r=t.color,o=t.colorCls;e=Math.min(e,0);var a=(i=Math.max(0,i))-e;return["<span",'    class="'+l+"__bg"+(o?" "+o:"")+'"','    style="left: '+100*(0===a?0:(n<0?n-e:-e)/a)+"%; width: "+100*(0===a?0:(n<0?-n:n)/a)+"%; background-color: "+r+';"',"    ></span>"].join("\n")},getColor:function(e){var i=t.state.highlight.unit.screenModel;return{color:i.color(e),colorCls:i.class(e)}},updownTemplate:function(t){var e=t.diff,i=t.sign;return['<span class="diff-tooltip__item__updown diff-tooltip__item__updown_'+(i>0?"positive":"negative")+'">',(i>0?"&#x25B2;":i<0?"&#x25BC;":"")+(0===i?"":e),"</span>"].join("")},didMount:function(){i.didMount.call(this),this._scrollToHighlighted(),this._reserveSpaceForUpdown()},_scrollToHighlighted:function(){var e=t.getDomNode(),i=e.querySelector(".diff-tooltip__body"),n=e.querySelector(".diff-tooltip__body__content"),r=e.querySelector("."+l+"_highlighted");if(i&&n&&r){var o=i.getBoundingClientRect(),a=n.getBoundingClientRect(),s=r.getBoundingClientRect(),c=0;if(s.bottom>o.bottom){var u=s.bottom-o.bottom+s.height,h=a.bottom-o.bottom;c=-Math.min(u,h),n.style.transform="translateY("+c+"px)"}a.top+c<o.top&&i.classList.add("diff-tooltip__body_overflow-top"),a.bottom+c>o.bottom&&i.classList.add("diff-tooltip__body_overflow-bottom")}},_reserveSpaceForUpdown:function(){var e=t.getDomNode(),i=e.querySelector(".diff-tooltip__body"),n=e.querySelector("."+s);if(i&&n){var r=Array.from(e.querySelectorAll(".diff-tooltip__item__updown:not(:empty)")).map((function(t){return t.scrollWidth})),o=Math.max.apply(Math,r),a=Math.max(0,Math.ceil(o-15));i.style.paddingRight=a+"px",n.style.paddingRight=a+"px"}}}));return"function"==typeof this.settings.getTemplate?this.settings.getTemplate(n,this,this.settings):n},e.prototype._renderTemplate=function(t,e){var i,n=this.state.highlight.unit,r=n.screenModel,o=r.model,a=o.scaleColor,l=(o.scaleX,o.scaleY),s=this._unitsGroupedData.get(n),c=this._getHighlightRange(t,n),u=c[0],h=c[1],d=function(t){var e=r.model.color(t);return isFinite(u)&&s[u][e]?s[u][e][0]:null},p=d(t),f=n.config.stack,g=!(!n.config.flip&&n.config.guide.obsoleteVerticalStackOrder&&n.config.stack),_=(i=a.domain().slice().reduce((function(t,e,i){return t[e]=i,t}),{}),g?function(t,e){return i[t[a.dim]]-i[e[a.dim]]}:function(t,e){return i[e[a.dim]]-i[t[a.dim]]}),m=g?function(t,e){return l(t[l.dim])-l(e[l.dim])}:function(t,e){return l(e[l.dim])-l(t[l.dim])},v=function(t){return Object.keys(s[t]).reduce((function(e,i){return e.concat(s[t][i])}),[]).sort(f?_:m)},y=v(h).map((function(t){r.model.color(t);return{data:t,prev:d(t)}}));if(isFinite(u)){var b=v(u),T=y.reduce((function(t,e){return t[r.model.color(e.data)]=!0,t}),{});b.forEach((function(t){var e=r.model.color(t);T[e]||y.push({data:null,prev:t})})),f&&y.sort((function(t,e){return _(t.data||t.prev,e.data||e.prev)}))}return this._template.render({data:t,prev:p,fields:e,groups:y,valueField:l.dim,colorField:a.dim})},e.prototype._getRenderHandler=function(){var e=t.prototype._getRenderHandler.call(this);return function(){var t=this;e.call(this);var i=this._chart,n=i.select((function(t){return"chart"===t.config.namespace&&0===t.config.type.indexOf("ELEMENT.")&&"ELEMENT.INTERVAL_HIGHLIGHT"!==t.config.type})),r=i.select((function(t){return"ELEMENT.INTERVAL_HIGHLIGHT"===t.config.type})).reduce((function(t,e,i){return t[i]=e,t}),{});n.forEach((function(e,i){var n=e.data();t._unitsGroupedData.set(e,t._getGroupedData(n,e)),e.on("data-hover",(function(n,o){var a=r[i],l=o.unit&&o.unit===e?t._getHighlightRange(o.data,o.unit):null;a.fire("interval-highlight",l)}))}))}},e.prototype._getSpecReadyHandler=function(){return function(t,e){t.traverseSpec(e,(function(t,e){if(0===t.type.indexOf("ELEMENT.")){var i=JSON.parse(JSON.stringify(t));i.type="ELEMENT.INTERVAL_HIGHLIGHT",i.namespace="highlight";var n=e.units.indexOf(t);e.units.splice(n,0,i)}}))}},e.prototype._getGroupedData=function(t,e){var i=e.screenModel.model.scaleX,n=f.groupBy(t,(function(t){return i(t[i.dim]).toString()})),o=e.config.guide.x.tickPeriod||e.config.guide.x.timeInterval;if(o){var a=i.domain(),l=e.config.guide.utcTime;r.a.api.tickPeriod.generate(a[0],a[1],o,{utc:l}).filter((function(t){return t>=a[0]&&t<=a[1]})).forEach((function(t){var e=i(t);n[e]||(n[e]=[])}))}return Object.keys(n).reduce((function(t,i){return t[i]=f.groupBy(n[i],(function(t){return e.screenModel.model.color(t)})),t}),{})},e.prototype._getHighlightRange=function(t,e){var i=e.screenModel.flip,n=e.screenModel.model.scaleX,r=n(t[n.dim]),o=this._unitsGroupedData.get(e),a=Object.keys(o).map(Number).sort(i?function(t,e){return e-t}:function(t,e){return t-e}),l=a.indexOf(r);return 0===l?[r,r]:[a[l-1],r]},e}(o.a);function _(t){return new g(t)}r.a.api.unitsRegistry.reg("ELEMENT.INTERVAL_HIGHLIGHT",d,"ELEMENT.GENERIC.CARTESIAN"),r.a.api.plugins.add("diff-tooltip",_);e.default=_}})}));