vizabi-bubblechart
Advanced tools
Comparing version 3.0.3 to 3.0.4
// https://github.com/kuguarpwnz/vizabi-tool-bundler#readme v1.0.0 Copyright 2021 undefined | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("VizabiSharedComponents"),require("mobx")):"function"==typeof define&&define.amd?define(["VizabiSharedComponents","mobx"],e):(t=t||self).BubbleChart=e(t.VizabiSharedComponents,t.mobx)}(this,(function(t,e){"use strict";class i{constructor(t){this.context=t,this.dragRectangle=d3.drag(),this.zoomer=d3.zoom(),this.dragRectangle.subject(this.dragSubject()).on("start",this.drag().start).on("drag",this.drag().go).on("end",this.drag().stop),this.zoomer.filter(this.zoomFilter()).scaleExtent([.0625,1/0]).on("start",this.zoom().start).on("zoom",this.zoom().go).on("end",this.zoom().stop),this.zoomer.ratioX=1,this.zoomer.ratioY=1,this.context._zoomedXYMinMax={x:{zoomedMin:null,zoomedMax:null},y:{zoomedMin:null,zoomedMax:null}}}dragSubject(){const t=this.context;return function(e){return!d3.event.sourceEvent.ctrlKey&&!d3.event.sourceEvent.metaKey&&"plus"!==t.ui.cursorMode||"minus"===t.ui.cursorMode||("touchmove"===d3.event.sourceEvent.type||"touchstart"===d3.event.sourceEvent.type)&&(d3.event.sourceEvent.touches.length>1||d3.event.sourceEvent.targetTouches.length>1)?null:{x:d3.mouse(this)[0],y:d3.mouse(this)[1]}}}drag(){const t=this.context,e=this;return{start(e,i){this.origin={x:d3.mouse(this)[0],y:d3.mouse(this)[1]},t.DOM.zoomRect.classed("vzb-invisible",!1)},go(e,i){const s=this.origin,a={x:d3.event.x,y:d3.event.y};t.DOM.zoomRect.attr("x",Math.min(a.x,s.x)).attr("y",Math.min(a.y,s.y)).attr("width",Math.abs(a.x-s.x)).attr("height",Math.abs(a.y-s.y))},stop(i){if(t.DOM.zoomRect.attr("width",0).attr("height",0).classed("vzb-invisible",!0),this.target={x:d3.mouse(this)[0],y:d3.mouse(this)[1]},Math.abs(this.origin.x-this.target.x)<10||Math.abs(this.origin.y-this.target.y)<10)return;const s=d3.event.sourceEvent.ctrlKey||d3.event.sourceEvent.metaKey||"plus"===t.ui.cursorMode;e._zoomOnRectangle(d3.select(this),this.origin.x,this.origin.y,this.target.x,this.target.y,s,500)}}}zoomFilter(){const t=this.context;return function(e){const i=d3.event;return!i.ctrlKey&&!i.metaKey&&(("touchmove"===i.type||"touchstart"===i.type)&&(i.touches.length>1||i.targetTouches.length>1)||(!("wheel"!==i.type&&"mousewheel"!==i.type||!t.ui.zoomOnScrolling)||!("mousedown"!==i.type&&"touchstart"!==i.type||"plus"===t.ui.cursorMode||"minus"===t.ui.cursorMode||!t.ui.panWithArrow&&"hand"!==t.ui.cursorMode)))}}zoom(){const e=this.context,i=this.zoomer,s=this;return{start(){"plus"!==e.ui.cursorMode&&"minus"!==e.ui.cursorMode&&e.DOM.chartSvg.classed("vzb-zooming",!0)},go(){const a=d3.event.sourceEvent;let o=d3.event.transform.k,l=[d3.event.transform.x,d3.event.transform.y],n=i.ratioY,r=i.ratioX;e.draggingNow=!0,(isNaN(o)||null==o)&&(o=i.scale),(isNaN(o)||null==o)&&(o=1),1===o&&null!==a&&(("wheel"===a.type||"mousewheel"===a.type)&&(a.deltaY||-a.wheelDelta)>0||"touchmove"===a.type&&a.touches.length>1)&&(i.ratioX=1,r=1,i.ratioY=1,n=1),(isNaN(l[0])||isNaN(l[1])||null==l[0]||null==l[1])&&(l=[0,0]);const c=i.scaleExtent()[0];o*n<c&&(n=c/o,i.ratioY=n),o*r<c&&(r=c/o,i.ratioX=r);const h=o*r<1,d=o*n<1;h?(l[0]<0&&(l[0]=0),l[0]>(1-o*r)*e.width&&(l[0]=(1-o*r)*e.width)):(l[0]>0&&(l[0]=0),l[0]<(1-o*r)*e.width&&(l[0]=(1-o*r)*e.width)),d?(l[1]<0&&(l[1]=0),l[1]>(1-o*n)*e.height&&(l[1]=(1-o*n)*e.height)):(l[1]>0&&(l[1]=0),l[1]<(1-o*n)*e.height&&(l[1]=(1-o*n)*e.height)),s.zoomSelection.property("__zoom",d3.zoomIdentity.translate(l[0],l[1]).scale(o));const b=e.width*o*r,g=e.height*o*n,u=[0*o*r+l[0],b+l[0]],m=[g+l[1],0*o*n+l[1]],x=e._rangeBump(u),p=e._rangeBump(m),y=(x[0]-u[0])*o*r,v=(x[1]-u[1])*o*r,z=(p[0]-m[0])*o*n,M=(p[1]-m[1])*o*n;u[0]+=y,u[1]+=v,m[0]+=z,m[1]+=M;const _=[0,e.width],f=[e.height,0],S=e._rangeBump(_),D=e._rangeBump(f);h?(u[0]<S[0]&&(l[0]=S[0]-y),u[1]>S[1]&&(l[0]=S[1]-v-b)):(u[0]>S[0]&&(l[0]=S[0]-y),u[1]<S[1]&&(l[0]=S[1]-v-b)),d?(m[0]>D[0]&&(l[1]=D[0]-z-g),m[1]<D[1]&&(l[1]=D[1]-M)):(m[0]<D[0]&&(l[1]=D[0]-z-g),m[1]>D[1]&&(l[1]=D[1]-M)),h?(u[0]<S[0]&&(u[1]+=Math.abs(u[0]-S[0]),u[0]=S[0]),u[1]>S[1]&&(u[0]-=Math.abs(u[1]-S[1]),u[1]=S[1])):(u[0]>S[0]&&(u[1]-=Math.abs(u[0]-S[0]),u[0]=S[0]),u[1]<S[1]&&(u[0]+=Math.abs(u[1]-S[1]),u[1]=S[1])),d?(m[0]>D[0]&&(m[1]-=Math.abs(m[0]-D[0]),m[0]=D[0]),m[1]<D[1]&&(m[0]+=Math.abs(m[1]-D[1]),m[1]=D[1])):(m[0]<D[0]&&(m[1]+=Math.abs(m[0]-D[0]),m[0]=D[0]),m[1]>D[1]&&(m[0]-=Math.abs(m[1]-D[1]),m[1]=D[1])),"ordinal"===e.MDL.x.scale.type?e.xScale.rangeBands(u):e.xScale.range(u),"ordinal"===e.MDL.y.scale.type?e.yScale.rangeBands(m):e.yScale.range(m);const w=function(e){return t.LegacyUtils.isDate(e)?e:+e.toFixed(2)},L=S,C=D;e._zoomedXYMinMax={x:{zoomedMin:w(e.xScale.invert(L[0])),zoomedMax:w(e.xScale.invert(L[1]))},y:{zoomedMin:w(e.yScale.invert(C[0])),zoomedMax:w(e.yScale.invert(C[1]))}},i.dontFeedToState||(e.MDL.x.scale.zoomed=[e._zoomedXYMinMax.x.zoomedMin,e._zoomedXYMinMax.x.zoomedMax],e.MDL.y.scale.zoomed=[e._zoomedXYMinMax.y.zoomedMin,e._zoomedXYMinMax.y.zoomedMax]);const E=e.yAxis.labelerOptions(),T=e.xAxis.labelerOptions();E.limitMaxTickNumber=o*n<1.5?8:o*n*8,T.limitMaxTickNumber=o*r<1.5?8:o*r*8,E.transitionDuration=i.duration,T.transitionDuration=i.duration,e.DOM.xAxisEl.call(e.xAxis.labelerOptions(T)),e.DOM.yAxisEl.call(e.yAxis.labelerOptions(E)),e.redrawData(i.duration),i.duration=0},stop(){e.DOM.chartSvg.classed("vzb-zooming",!1),i.dontFeedToState||(e.MDL.x.scale.zoomed=[e._zoomedXYMinMax.x.zoomedMin,e._zoomedXYMinMax.x.zoomedMax],e.MDL.y.scale.zoomed=[e._zoomedXYMinMax.y.zoomedMin,e._zoomedXYMinMax.y.zoomedMax]),i.dontFeedToState=null,e.draggingNow=!1}}}expandCanvas(e){const i=this.context;e||(e=i.duration);const s=d3.extent(t.LegacyUtils.values(i.frame.x)),a=d3.extent(t.LegacyUtils.values(i.frame.y));if(!s[0]&&0!==s[0]||!s[1]&&0!==s[1]||!a[0]&&0!==a[0]||!a[1]&&0!==a[1])return t.LegacyUtils.warn("panZoom.expandCanvas: X or Y min/max are broken. Aborting with no action");const o={x1:i.xScale(s[0]),y1:i.yScale(a[0]),x2:i.xScale(s[1]),y2:i.yScale(a[1])},l=[0,i.width],n=[i.height,0],r=l[0],c=l[1],h=n[0],d=n[1];if(!i.isCanvasPreviouslyExpanded||o.x1<1*r||o.x2>1*c||o.y2<1*d||o.y1>1*h){if(i.isCanvasPreviouslyExpanded){const t=i._rangeBump(l),e=i._rangeBump(n);o.x1>t[0]&&(o.x1=t[0]),o.x2<t[1]&&(o.x2=t[1]),o.y1<e[0]&&(o.y1=e[0]),o.y2>e[0]&&(o.y2=e[1])}i.isCanvasPreviouslyExpanded=!0,this._zoomOnRectangle(i.element,o.x1,o.y1,o.x2,o.y2,!1,e)}else i.redrawDataPoints(e)}zoomToMaxMin(t,e,i,s,a,o){const l=this.context;let n=t,r=e,c=i,h=s;const d=l.xScale.domain(),b=l.yScale.domain();n<d[0]&&r<d[1]&&(n=d[0]),n>d[0]&&r>d[1]&&(r=d[1]),c<b[0]&&h<b[1]&&(c=b[0]),c>b[0]&&h>b[1]&&(h=b[1]);const g=[l.xScale(n),l.xScale(r)],u=[l.yScale(c),l.yScale(h)];this._zoomOnRectangle(l.element,g[0],u[0],g[1],u[1],!1,a,o)}_zoomOnRectangle(e,i,s,a,o,l,n,r){const c=this.context,h=this.zoomer,d=d3.zoomTransform(this.zoomSelection.node()),b=i,g=s,u=a,m=o;l&&d.translate(b-u,g-m);const x=[0,c.width],p=[c.height,0],y=c._rangeBump(x),v=c._rangeBump(p),z=h.scaleExtent()[0],M=h.scaleExtent()[1];let _,f,S;if(b==u||g==m||y[0]==y[1]||v[0]==v[1])return t.LegacyUtils.warn("_zoomOnRectangle(): can not proceed because this may result in infinity zooms");Math.abs(b-u)>Math.abs(g-m)?(_=Math.abs(v[0]-v[1])/Math.abs(g-m)*d.k,_<z&&(h.ratioY*=_/d.k,_=z),_>M&&(_=M),f=Math.abs(y[0]-y[1])/Math.abs(b-u)*d.k/_*h.ratioX,S=h.ratioY):(_=Math.abs(y[0]-y[1])/Math.abs(b-u)*d.k,_<z&&(h.ratioX*=_/d.k,_=z),_>M&&(_=M),S=Math.abs(v[0]-v[1])/Math.abs(g-m)*d.k/_*h.ratioY,f=h.ratioX);const D=[(d.x-Math.min(b,u))/d.k/h.ratioX*_*f+(y[0]-x[0]),(d.y-Math.min(g,m))/d.k/h.ratioY*_*S+(v[1]-p[1])];h.dontFeedToState=r,h.ratioY=S||1,h.ratioX=f||1,h.duration=n||0,this.zoomSelection.call(h.transform,d3.zoomIdentity.translate(D[0],D[1]).scale(_))}zoomByIncrement(t,e){this.context;const i=d3.zoomTransform(this.zoomSelection.node());let s=i.k;const a=[i.x,i.y],o=d3.mouse(this.zoomSelection.node());let l=Math.log(s)/Math.LN2;"plus"!=t&&t||(l=Math.floor(l)+1),"minus"==t&&(l=Math.ceil(l)-1);let n=[(o[0]-a[0])/s,(o[1]-a[1])/s];const r=this.zoomer.scaleExtent();s==r[0]&&(this.zoomer.ratioY=1,this.zoomer.ratioX=1),s=Math.max(r[0],Math.min(r[1],Math.pow(2,l))),n=[n[0]*s+a[0],n[1]*s+a[1]],a[0]+=o[0]-n[0],a[1]+=o[1]-n[1],this.zoomer.duration=e||0,this.zoomSelection.call(this.zoomer.transform,d3.zoomIdentity.translate(a[0],a[1]).scale(s))}resetZoomState(t){this.zoomer.ratioY=1,this.zoomer.ratioX=1,(t||this.zoomSelection).property("__zoom",d3.zoomIdentity)}reset(t,e){this.context.isCanvasPreviouslyExpanded=!1,this.zoomer.ratioY=1,this.zoomer.ratioX=1,this.zoomer.duration=e||0,(t||this.zoomSelection).call(this.zoomer.transform,d3.zoomIdentity)}rerun(t){this.context;(t||this.zoomSelection).call(this.zoomer.scaleBy,1)}zoomSelection(t){this.zoomSelection=t}}const{ICON_WARN:s,ICON_QUESTION:a}=t.Icons,o="rgb(253, 253, 253)",l=(t,e=0)=>i=>t+i*e,n=(t,e=0)=>i=>t+i*e;class r extends t.BaseComponent{constructor(e){e.subcomponents=[{type:t.Labels,placeholder:".vzb-bc-labels",options:{CSS_PREFIX:"vzb-bc",LABELS_CONTAINER_CLASS:"vzb-bc-labels",LINES_CONTAINER_CLASS:"vzb-bc-lines",SUPPRESS_HIGHLIGHT_DURING_PLAY:!1},name:"labels"},{type:t.DynamicBackground,placeholder:".vzb-bc-year"}],e.template='\n <svg class="vzb-bubblechart-svg vzb-bubblechart-svg-back vzb-export">\n <g class="vzb-bc-graph">\n <g class="vzb-bc-year"></g>\n <svg class="vzb-bc-axis-x"><g></g></svg>\n <svg class="vzb-bc-axis-y"><g></g></svg>\n <line class="vzb-bc-projection-x"></line>\n <line class="vzb-bc-projection-y"></line>\n <svg class="vzb-bc-bubbles-crop">\n <g class="vzb-bc-decorations">\n <line class="vzb-bc-line-equal-xy vzb-invisible"></line>\n <g class="vzb-bc-x-axis-groups"></g>\n </g> \n </svg>\n </g>\n </svg>\n <svg class="vzb-bubblechart-svg vzb-bubblechart-svg-main vzb-export">\n <g class="vzb-bc-graph">\n <g class="vzb-bc-axis-x-title"></g>\n <g class="vzb-bc-axis-x-info vzb-noexport"></g>\n\n <g class="vzb-bc-axis-y-title"></g>\n <g class="vzb-bc-axis-y-info vzb-noexport"></g>\n <svg class="vzb-bc-bubbles-crop">\n <g class="vzb-zoom-selection"></g>\n <rect class="vzb-bc-eventarea"></rect>\n <g class="vzb-bc-trails"></g>\n <g class="vzb-bc-bubbles"></g>\n <rect class="vzb-bc-forecastoverlay vzb-hidden" x="0" y="0" width="100%" height="100%" fill="url(#vzb-bc-pattern-lines)" pointer-events=\'none\'></rect>\n </svg>\n\n <g class="vzb-bc-axis-y-subtitle"></g>\n <g class="vzb-bc-axis-x-subtitle"></g>\n <g class="vzb-bc-axis-s-title"></g>\n <g class="vzb-bc-axis-c-title"></g>\n\n <g class="vzb-data-warning vzb-noexport">\n <svg></svg>\n <text></text>\n </g>\n\n <rect class="vzb-bc-zoom-rect"></rect>\n </g>\n </svg>\n <svg class="vzb-bubblechart-svg vzb-bubblechart-svg-front vzb-export">\n <g class="vzb-bc-graph">\n <svg class="vzb-bc-bubbles-crop">\n <g class="vzb-bc-lines"></g>\n <g class="vzb-bc-bubble-crown vzb-hidden">\n <circle class="vzb-crown-glow"></circle>\n <circle class="vzb-crown"></circle>\n </g> \n </svg>\n <svg class="vzb-bc-labels-crop">\n <g class="vzb-bc-labels"></g>\n </svg>\n </g>\n </svg>\n <svg width="0" height="0">\n <defs>\n <filter id="vzb-glow-filter" x="-50%" y="-50%" width="200%" height="200%">\n <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>\n </filter>\n <pattern id="vzb-bc-pattern-lines" x="0" y="0" patternUnits="userSpaceOnUse" width="50" height="50" viewBox="0 0 10 10"> \n <path d=\'M-1,1 l2,-2M0,10 l10,-10M9,11 l2,-2\' stroke=\'black\' stroke-width=\'3\' opacity=\'0.08\'/>\n </pattern> \n </defs>\n </svg>\n \x3c!-- This could possibly be another component --\x3e\n <div class="vzb-tooltip vzb-hidden vzb-tooltip-mobile"></div>\n ',super(e)}setup(){this.DOM={element:this.element,chartSvg:this.element.select("svg.vzb-bubblechart-svg-main"),chartSvgFront:this.element.select("svg.vzb-bubblechart-svg-front"),chartSvgBack:this.element.select("svg.vzb-bubblechart-svg-back"),chartSvgAll:this.element.selectAll("svg.vzb-bubblechart-svg"),graphAll:this.element.selectAll(".vzb-bc-graph"),bubbleContainerCropAll:this.element.selectAll(".vzb-bc-bubbles-crop"),zoomRect:this.element.select(".vzb-bc-zoom-rect"),eventArea:this.element.select(".vzb-bc-eventarea"),forecastOverlay:this.element.select(".vzb-bc-forecastoverlay"),tooltipMobile:this.element.select(".vzb-tooltip-mobile")},this.DOM.chartSvg.select(".vzb-bc-graph").call(t=>Object.assign(this.DOM,{graph:t,ySubTitleEl:t.select(".vzb-bc-axis-y-subtitle"),xSubTitleEl:t.select(".vzb-bc-axis-x-subtitle"),yTitleEl:t.select(".vzb-bc-axis-y-title"),xTitleEl:t.select(".vzb-bc-axis-x-title"),sTitleEl:t.select(".vzb-bc-axis-s-title"),cTitleEl:t.select(".vzb-bc-axis-c-title"),yInfoEl:t.select(".vzb-bc-axis-y-info"),xInfoEl:t.select(".vzb-bc-axis-x-info"),dataWarningEl:t.select(".vzb-data-warning"),trailsContainer:t.select(".vzb-bc-trails"),bubbleContainer:t.select(".vzb-bc-bubbles"),bubbleContainerCrop:t.select(".vzb-bc-bubbles-crop"),zoomSelection:t.select(".vzb-zoom-selection")})),this.DOM.chartSvgFront.select(".vzb-bc-graph").call(t=>Object.assign(this.DOM,{graphFront:t,labelsContainer:t.select(".vzb-bc-labels"),labelsContainerCrop:t.select(".vzb-bc-labels-crop"),linesContainer:t.select(".vzb-bc-lines"),bubbleCrown:t.select(".vzb-bc-bubble-crown")})),this.DOM.chartSvgBack.select(".vzb-bc-graph").call(t=>{Object.assign(this.DOM,{yAxisElContainer:t.select(".vzb-bc-axis-y"),xAxisElContainer:t.select(".vzb-bc-axis-x"),yearEl:t.select(".vzb-bc-year"),projectionX:t.select(".vzb-bc-projection-x"),projectionY:t.select(".vzb-bc-projection-y"),decorationsEl:t.select(".vzb-bc-decorations")}),this.DOM.yAxisEl=this.DOM.yAxisElContainer.select("g"),this.DOM.xAxisEl=this.DOM.xAxisElContainer.select("g"),this.DOM.lineEqualXY=this.DOM.decorationsEl.select(".vzb-bc-line-equal-xy"),this.DOM.xAxisGroupsEl=this.DOM.decorationsEl.select(".vzb-bc-x-axis-groups")}),this.DOM.bubbleCrown.selectAll(".vzb-crown-glow").attr("filter","url("+location.pathname+"#vzb-glow-filter)"),this._year=this.findChild({type:"DynamicBackground"}),this._labels=this.findChild({type:"Labels"}),this._panZoom=new i(this),this.scrollableAncestor=t.LegacyUtils.findScrollableAncestor(this.element),this.xAxis=t.axisSmart("bottom"),this.yAxis=t.axisSmart("left"),this.isCanvasPreviouslyExpanded=!1,this.draggingNow=null,this.wScale=d3.scaleLinear().domain(this.ui.datawarning.doubtDomain).range(this.ui.datawarning.doubtRange),this.hoverBubble=!1;const e=this;d3.select("body").on("keydown",()=>{"arrow"!==e.ui.cursorMode&&"hand"!==e.ui.cursorMode||(d3.event.metaKey||d3.event.ctrlKey)&&e.DOM.chartSvgAll.classed("vzb-zoomin",!0)}).on("keyup",()=>{"arrow"!==e.ui.cursorMode&&"hand"!==e.ui.cursorMode||d3.event.metaKey||d3.event.ctrlKey||e.DOM.chartSvgAll.classed("vzb-zoomin",!1)}).on("mouseenter",()=>{"arrow"!==e.ui.cursorMode&&"hand"!==e.ui.cursorMode||d3.event.metaKey||d3.event.ctrlKey||e.DOM.chartSvgAll.classed("vzb-zoomin",!1)}),this.root.element.on("custom-resetZoom",()=>{e._panZoom.reset(null,500)}),this._panZoom.zoomSelection(this.DOM.bubbleContainerCrop),this.DOM.bubbleContainerCrop.call(this._panZoom.dragRectangle).call(this._panZoom.zoomer).on("dblclick.zoom",null).on("mouseup",()=>{e.draggingNow=!1}).on("click",()=>{const t=e.ui.cursorMode;d3.event.defaultPrevented||"arrow"===t||"hand"===t||e._panZoom.zoomByIncrement(t,500)})}get MDL(){return{frame:this.model.encoding.get("frame"),selected:this.model.encoding.get("selected"),highlighted:this.model.encoding.get("highlighted"),superHighlighted:this.model.encoding.get("superhighlighted"),y:this.model.encoding.get(this.state.alias.y||"y"),x:this.model.encoding.get(this.state.alias.x||"x"),size:this.model.encoding.get("size"),color:this.model.encoding.get("color"),label:this.model.encoding.get("label"),trail:this.model.encoding.get("trail")}}draw(){this.localise=this.services.locale.auto(),this.TIMEDIM=this.MDL.frame.data.concept,this.KEYS=this.model.data.space.filter(t=>t!==this.TIMEDIM),this._updateLayoutProfile()||(this.addReaction(this._updateTrailsOnSelect),this.addReaction(this._updateXYScales),this.addReaction(this._updateColorScale),this.addReaction(this._updateUIStrings),this.addReaction(this._updateSize),this.addReaction(this._updateMarkerSizeLimits),this.addReaction(this._updateOpacity),this.addReaction(this._updateShowYear),this.addReaction(this._updateYear),this.addReaction(this.drawData),this.addReaction(this._zoomToMarkerMaxMin),this.addReaction(this._selectDataPoints),this.addReaction(this._highlightDataPoints),this.addReaction(this._blinkSuperHighlighted),this.addReaction(this._updateDoubtOpacity))}drawData(){this.MDL.trail.show&&this.MDL.trail.updateTrailStart(this.MDL.frame.framesAround[1]),this.processFrameData(),this._createAndDeleteBubbles()}_updateTrailsOnSelect(){const t=this.MDL.selected.data.filter;e.runInAction(()=>{Object.keys(this.MDL.trail.config.starts).forEach(e=>{t.markers.has(e)||this.MDL.trail.deleteTrail({[Symbol.for("key")]:e})}),t.markers.has();for(const[e]of t.markers)this.MDL.trail.config.starts[e]||this.MDL.trail.setTrail({[Symbol.for("key")]:e,[this.MDL.trail.groupDim]:this.MDL.frame.value})})}_updateShowYear(){this.DOM.yearEl.classed("vzb-hidden",!this.ui.timeInBackground)}_updateYear(){const t=this._getDuration();this._year.setText(this.localise(this.MDL.frame.value),t)}_createAndDeleteBubbles(){const e=this,i=this._getDuration(),s=this._getTransition(i),a=this.__dataProcessed;this.bubbles=this.DOM.bubbleContainer.selectAll(".vzb-bc-entity").data(this.__dataProcessed,t=>t[Symbol.for("key")]).join(s=>s.append(t=>{if(t[Symbol.for("trailHeadKey")]){const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.appendChild(document.createElementNS("http://www.w3.org/2000/svg","circle")),t.appendChild(document.createElementNS("http://www.w3.org/2000/svg","line")),t}return document.createElementNS("http://www.w3.org/2000/svg","circle")}).attr("class","vzb-bc-entity").attr("id",t=>`vzb-bc-bubble-${t[Symbol.for("key")]}-${this.id}`).style("opacity",t=>t[Symbol.for("opacity")]=this._getBubbleOpacity(t)).call(e=>{t.LegacyUtils.isTouchDevice()?e.on("tap",this._bubblesInteract().tap):e.on("mouseover",this._bubblesInteract().mouseover).on("mouseout",this._bubblesInteract().mouseout).on("click",this._bubblesInteract().click)}).each((function(s,l){const n=a[l+1]||{},r=s[Symbol.for("trailHeadKey")],c=r&&!n[Symbol.for("trailHeadKey")],h=r?this.children[0]:this,d=s[e.__alias("x")],b=s[e.__alias("y")],g=s.size,u=s.color;s.r=t.LegacyUtils.areaToRadius(e.sScale(g||0));const m=e.xScale(d),x=e.yScale(b),p=null!=u?e.cScale(u):o,y=d3.select(h);if((!i||!c)&&(y.attr("r",s.r).attr("fill",p).attr("cy",x).attr("cx",m),r)){const t=d3.select(h.nextSibling),i=e.xScale(n[e.__alias("x")]),a=e.yScale(n[e.__alias("y")]);t.attr("x1",m).attr("y1",x).attr("x2",i).attr("y2",a).style("stroke",p).attr("stroke-dasharray",Math.abs(m-i)+Math.abs(x-a)).attr("stroke-dashoffset",-s.r)}i&&!r&&y.style("opacity",0).transition().duration(.9*i).style("opacity",s[Symbol.for("opacity")]),r||e._updateLabel(s,d,b,i,!0,!1)})),l=>l.each((function(l,n){const r=l[Symbol.for("trailHeadKey")],c=a[n+1]||{},h=a[n+2]||{},d=r&&!c[Symbol.for("trailHeadKey")],b=r&&!h[Symbol.for("trailHeadKey")],g=l.size;if(l.r=t.LegacyUtils.areaToRadius(e.sScale(g||0)),r&&!d&&!b)return;const u=l[e.__alias("x")],m=l[e.__alias("y")],x=l.color,p=e.xScale(u),y=e.yScale(m),v=null!=x?e.cScale(x):o;if(!i||!d){const t=r?this.children[0]:this;if((i&&!r?d3.select(t).transition(s):d3.select(t).interrupt()).attr("r",l.r).attr("fill",v).attr("cy",y).attr("cx",p),r){const o=d3.select(t.nextSibling),r=e.xScale(c[e.__alias("x")]),h=e.yScale(c[e.__alias("y")]);o.attr("x1",p).attr("y1",y),i&&!a[n+2][Symbol.for("trailHeadKey")]?o.attr("x2",p).attr("y2",y).transition(s).attr("x2",r).attr("y2",h):o.interrupt().attr("x2",r).attr("y2",h),o.style("stroke",v).attr("stroke-dasharray",Math.abs(p-r)+Math.abs(y-h)).attr("stroke-dashoffset",-l.r)}}r||e._updateLabel(l,u,m,i,!1,!1)})),t=>t.each((function(t){const a=t[Symbol.for("trailHeadKey")];(i&&!a?d3.select(this).transition(s).duration(.9*i).style("opacity",0):d3.select(this).interrupt()).remove(),a||e._updateLabel(t,t[e.__alias("x")],t[e.__alias("y")],i,!0,!0)}))).order()}redrawData(e){this.services.layout.size,this.MDL.x.scale.type,this.MDL.y.scale.type,this.MDL.color.scale.type,this.MDL.size.scale.type,this.MDL.size.scale.extent;const i=this,s=this.__dataProcessed;this.bubbles&&this.bubbles.each((function(a,l){const n=a[Symbol.for("trailHeadKey")],r=n?this.children[0]:this,c=a[i.__alias("x")],h=a[i.__alias("y")],d=a.size,b=a.color;a.r=t.LegacyUtils.areaToRadius(i.sScale(d||0));const g=i.xScale(c),u=i.yScale(h),m=null!=b?i.cScale(b):o;if((e?d3.select(r).transition().duration(e):d3.select(r).interrupt()).attr("r",a.r).attr("fill",m).attr("cy",u).attr("cx",g),n){const t=e?d3.select(r.nextSibling).transition().duration(e):d3.select(r.nextSibling).interrupt(),o=s[l+1],n=i.xScale(o[i.__alias("x")]),c=i.yScale(o[i.__alias("y")]);t.attr("x1",g).attr("y1",u).attr("x2",n).attr("y2",c).style("stroke",m).attr("stroke-dasharray",Math.abs(g-n)+Math.abs(u-c)).attr("stroke-dashoffset",-a.r)}})),i._updateLabels()}__getZoomed(t,e,i){return d3[t.toLowerCase()](null!==e?e:i)}__getZoomedMin(t,e){return this.__getZoomed("Min",t,e)}__getZoomedMax(t,e){return this.__getZoomed("Max",t,e)}_zoomToMarkerMaxMin(){this.services.layout.size,this.MDL.x.scale.type,this.MDL.y.scale.type;const t={x:this.MDL.x.scale.zoomed,y:this.MDL.y.scale.zoomed},i=this.MDL.x.data.domain,s=this.MDL.y.data.domain;if(this.draggingNow)return;this._panZoom.resetZoomState(),this.yScale.range(this._rangeBump([this.height,0])),this.xScale.range(this._rangeBump([0,this.width]));const a=this.__getZoomedMin(t.x,i),o=this.__getZoomedMax(t.x,i),l=this.__getZoomedMin(t.y,s),n=this.__getZoomedMax(t.y,s);e.runInAction(()=>{this._panZoom.zoomToMaxMin(a,o,l,n,0,"don't feed these zoom values back to state")})}_resetZoomMinMaxXReaction(){return{concept:this.MDL.x.data.concept}}_resetZoomMinMaxX(){this.ui.panzoom.x={zoomedMin:null,zoomedMax:null}}_resetZoomMinMaxYReaction(){return{concept:this.MDL.y.data.concept}}_resetZoomMinMaxY(){this.ui.panzoom.y={zoomedMin:null,zoomedMax:null}}_drawForecastOverlay(){this.DOM.forecastOverlay.classed("vzb-hidden",!this.MDL.frame.endBeforeForecast||!this.ui.showForecastOverlay||this.MDL.frame.value<=this.MDL.frame.endBeforeForecast)}_updateLayoutProfile(){var e,i,s;if(this.services.layout.size,this.elementHeight=this.element.node().clientHeight||0,this.elementWidth=this.element.node().clientWidth||0,this.profileConstants=this.services.layout.getProfileConstants((e=this.elementWidth,i=this.elementHeight,{SMALL:{margin:{top:30,bottom:35,left:30,right:10},leftMarginRatio:1,padding:2,minRadiusPx:.5,maxRadiusEm:(s={ui:this.ui}).ui.maxRadiusEm||.05,infoElHeight:16,yAxisTitleBottomMargin:6,xAxisTitleBottomMargin:4},MEDIUM:{margin:{top:15,bottom:40,left:40,right:15},leftMarginRatio:1.6,padding:2,minRadiusPx:1,maxRadiusEm:s.ui.maxRadiusEm||.05,infoElHeight:20,yAxisTitleBottomMargin:3,xAxisTitleBottomMargin:4},LARGE:{margin:{top:15,bottom:l(30,.03)(i),left:n(31,.015)(e),right:20},leftMarginRatio:1.8,padding:2,minRadiusPx:1,maxRadiusEm:s.ui.maxRadiusEm||.05,infoElHeight:22,yAxisTitleBottomMargin:3,xAxisTitleBottomMargin:l(0,.01)(i),hideSTitle:!0}}),((t,e,i)=>({MEDIUM:{margin:{top:20,bottom:55,left:50,right:20},yAxisTitleBottomMargin:3,xAxisTitleBottomMargin:4,infoElHeight:26},LARGE:{margin:{top:30,bottom:l(45,.03)(e),left:n(35,.025)(t),right:30},yAxisTitleBottomMargin:3,xAxisTitleBottomMargin:l(-10,.01)(e),infoElHeight:32,hideSTitle:!0}}))(this.elementWidth,this.elementHeight,this.ui)),!this.elementHeight||!this.elementWidth)return t.LegacyUtils.warn("Chart _updateProfile() abort: container is too little or has display:none")}_getDuration(){return this.MDL.frame.playing&&this.MDL.frame.speed||0}_updateXYScales(){this.yScale=this.MDL.y.scale.d3Scale.copy(),this.xScale=this.MDL.x.scale.d3Scale.copy(),this._labels.setScales(this.xScale,this.yScale)}_updateColorScale(){this.cScale=this.MDL.color.scale.d3Scale.copy()}_updateUIStrings(){const{y:e,x:i,size:o,color:l}=this.MDL,{xTitleEl:n,yTitleEl:r,sTitleEl:c,xSubTitleEl:h,ySubTitleEl:d,dataWarningEl:b,xInfoEl:g,yInfoEl:u}=this.DOM,m=this,x=t.Utils.getConceptProps(e,this.localise),p=t.Utils.getConceptProps(i,this.localise),y=t.Utils.getConceptProps(o,this.localise),v=t.Utils.getConceptProps(l,this.localise);this.strings={title:{Y:x.name,X:p.name,S:y.name,C:v.name},title_short:{Y:x.name_short||x.name,X:p.name_short||p.name,S:y.name_short||y.name,C:v.name_short||v.name},subtitle:{Y:this._getSubtitle(x.name,x.name_short||x.name),X:this._getSubtitle(p.name,p.name_short||p.name),S:y.name_short,C:v.name_short},unit:{Y:x.unit||"",X:p.unit||"",S:y.unit||"",C:v.unit||""}},d.selectAll("text").data([0]).join("text"),h.selectAll("text").data([0]).join("text"),r.selectAll("text").data([0]).join("text").on("click",()=>{this.root.findChild({type:"TreeMenu"}).encoding(this.__alias("y")).alignX(this.services.locale.isRTL()?"right":"left").alignY("top").updateView().toggle()}),n.selectAll("text").data([0]).join("text").on("click",()=>{this.root.findChild({type:"TreeMenu"}).encoding(this.__alias("x")).alignX(this.services.locale.isRTL()?"right":"left").alignY("bottom").updateView().toggle()}),c.selectAll("text").data([0]).join("text").attr("text-anchor","end"),t.LegacyUtils.setIcon(b,s).select("svg").attr("width","0px").attr("height","0px"),b.append("text").attr("text-anchor","end").text(this.localise("hints/dataWarning")),t.LegacyUtils.setIcon(u,a).select("svg").attr("width","0px").attr("height","0px"),t.LegacyUtils.setIcon(g,a).select("svg").attr("width","0px").attr("height","0px"),u.on("click",()=>{m.root.findChild({type:"DataNotes"}).pin()}),u.on("mouseover",(function(){const e=this.getBBox(),i=t.LegacyUtils.makeAbsoluteContext(this,this.farthestViewportElement)(e.x-10,e.y+e.height+10),s=m.root.element.node().getBoundingClientRect(),a=m.element.node().getBoundingClientRect();m.root.findChild({type:"DataNotes"}).setEncoding(m.MDL.y).show().setPos(i.x+a.left-s.left,i.y)})),u.on("mouseout",()=>{m.root.findChild({type:"DataNotes"}).hide()}),g.on("click",()=>{m.root.findChild({type:"DataNotes"}).pin()}),g.on("mouseover",(function(){const e=this.getBBox(),i=t.LegacyUtils.makeAbsoluteContext(this,this.farthestViewportElement)(e.x-10,e.y+e.height+10),s=m.root.element.node().getBoundingClientRect(),a=m.element.node().getBoundingClientRect();m.root.findChild({type:"DataNotes"}).setEncoding(m.MDL.x).show().setPos(i.x+a.left-s.left,i.y)})),g.on("mouseout",()=>{m.root.findChild({type:"DataNotes"}).hide()}),b.on("click",()=>{m.root.findChild({type:"DataWarning"}).toggle()}).on("mouseover",()=>{m._updateDoubtOpacity(1)}).on("mouseout",()=>{m._updateDoubtOpacity()})}_getSubtitle(t,e){let i=t.replace(e,"");","===i[0]&&(i=i.slice(1));const s=/^\((.*)\)$|.*/.exec(i.trim());return s[1]||s[0]||""}_updateSize(){this.services.layout.size;const{x:e,y:i}=this.MDL,{graphAll:s,eventArea:a,bubbleContainerCropAll:o,labelsContainerCrop:l,xAxisElContainer:n,xAxisEl:r,yAxisElContainer:c,yAxisEl:h,projectionX:d,projectionY:b,sTitleEl:g,xTitleEl:u,yTitleEl:m,xSubTitleEl:x,ySubTitleEl:p,xAxisGroupsEl:y,xInfoEl:v,yInfoEl:z}=this.DOM,M=this.services.layout.profile;this.profileConstants.maxRadiusPx=Math.max(this.profileConstants.minRadiusPx,this.profileConstants.maxRadiusEm*t.LegacyUtils.hypotenuse(this.elementWidth,this.elementHeight));const _=this.profileConstants.margin,f=this.profileConstants.infoElHeight;this._labels.setCloseCrossHeight(1.2*this.profileConstants.infoElHeight),this._labels.setTooltipFontSize(this.profileConstants.infoElHeight+"px");const S=this.height=this.elementHeight-_.top-_.bottom||0,D=this.width=this.elementWidth-_.left*this.profileConstants.leftMarginRatio-_.right||0;if(s.attr("transform","translate("+_.left*this.profileConstants.leftMarginRatio+","+_.top+")"),this._year.resizeText(D,S),a.attr("width",D).attr("height",Math.max(0,S)),this.yScale.range(this._rangeBump([S,0])),this.xScale.range(this._rangeBump([0,D])),this.yAxis.scale(this.yScale).tickSizeInner(-D).tickSizeOuter(0).tickPadding(6).tickSizeMinor(-D,0).labelerOptions({scaleType:i.scale.type,toolMargin:_,limitMaxTickNumber:6,bump:this.profileConstants.maxRadiusPx/2,viewportLength:S,formatter:this.localise}),this.xAxis.scale(this.xScale).tickSizeInner(-S).tickSizeOuter(0).tickPadding(6).tickSizeMinor(-S,0).labelerOptions({scaleType:e.scale.type,toolMargin:_,bump:this.profileConstants.maxRadiusPx/2,viewportLength:D,formatter:this.localise}),o.attr("width",D).attr("height",Math.max(0,S)),l.attr("width",D).attr("height",Math.max(0,S)),n.attr("width",D+1).attr("height",this.profileConstants.margin.bottom+S).attr("y",-1).attr("x",-1),r.attr("transform","translate(1,"+(1+S)+")"),c.attr("width",this.profileConstants.margin.left+D).attr("height",Math.max(0,S)).attr("x",-this.profileConstants.margin.left),h.attr("transform","translate("+(this.profileConstants.margin.left-1)+",0)"),h.call(this.yAxis),r.call(this.xAxis),d.attr("y1",this.yScale.range()[0]+this.profileConstants.maxRadiusPx/2),b.attr("x2",this.xScale.range()[0]-this.profileConstants.maxRadiusPx/2),this._updateSTitle(),g.attr("transform","translate("+D+",20) rotate(-90)"),"SMALL"!==M)p.select("text").attr("dy",.6*f).text(this.strings.subtitle.Y),x.select("text").attr("dy",.3*-f).text(this.strings.subtitle.X),m.select("text").text(this.strings.title_short.Y+" ").append("tspan").style("font-size",.7*f+"px").text("▼"),u.select("text").text(this.strings.title_short.X+" ").append("tspan").style("font-size",.7*f+"px").text("▼");else{p.select("text").text(""),x.select("text").text("");const t=m.select("text").text(this.strings.title.Y);t.node().getBBox().width>D&&t.text(this.strings.title_short.Y);const e=u.select("text").text(this.strings.title.X);e.node().getBBox().width>D-100&&e.text(this.strings.title_short.X)}const w=this.services.locale.isRTL();if(p.style("font-size",.8*f+"px").attr("transform","translate(0,0) rotate(-90)"),x.style("font-size",.8*f+"px").attr("transform","translate("+D+","+S+")"),m.style("font-size",f+"px").attr("transform","SMALL"!==M?"translate("+(-_.left-this.profileConstants.yAxisTitleBottomMargin)+","+.5*S+") rotate(-90)":"translate("+(w?D:10-this.profileConstants.margin.left)+", -"+this.profileConstants.yAxisTitleBottomMargin+")"),u.style("font-size",f+"px").attr("transform","SMALL"!==M?"translate("+.5*D+","+(S+_.bottom-this.profileConstants.xAxisTitleBottomMargin)+")":"translate("+(w?D:0)+","+(S+_.bottom-this.profileConstants.xAxisTitleBottomMargin)+")"),y.style("font-size",.8*f+"px"),z.select("svg").node()){const e=m.node().getBBox(),s=t.LegacyUtils.transform(m.node()),a=w?e.x+s.translateX-1.4*f:e.x+s.translateX+e.width+.4*f,o=w?s.translateY+1.4*f+.5*e.width:s.translateY-.4*f-.5*e.width,l=i.data.conceptProps;z.classed("vzb-hidden",!l.description&&!l.sourceLink||this.services.layout.projector).select("svg").attr("width",f+"px").attr("height",f+"px"),z.attr("transform","SMALL"!==M?"translate("+(s.translateX-.8*f)+","+o+") rotate(-90)":"translate("+a+","+(s.translateY-.8*f)+")")}if(v.select("svg").node()){const i=u.node().getBBox(),s=t.LegacyUtils.transform(u.node()),a=w?i.x+s.translateX-1.4*f:i.x+s.translateX+i.width+.4*f,o=e.data.conceptProps;v.classed("vzb-hidden",!o.description&&!o.sourceLink||this.services.layout.projector).select("svg").attr("width",f+"px").attr("height",f+"px"),v.attr("transform","translate("+a+","+(s.translateY-.8*f)+")")}this._resizeDataWarning()}_rangeBump(e,i){const s=this.profileConstants.maxRadiusPx/2;if(i=i?-1:1,t.LegacyUtils.isArray(e)&&e.length>1){let t=e[0],a=e[e.length-1];return t<a?(t+=s*i,a-=s*i,t>a&&(t=a=(t+a)/2)):t>a&&(t-=s*i,a+=s*i,t<a&&(t=a=(t+a)/2)),[t,a]}t.LegacyUtils.warn("rangeBump error: input is not an array or empty")}_updateSTitle(t,e){const{sTitleEl:i}=this.DOM,{size:s,color:a}=this.MDL;if(this.profileConstants.hideSTitle&&this.root.ui.dialogs.dialogs.sidebar.indexOf("colors")>-1&&this.root.ui.dialogs.dialogs.sidebar.indexOf("size")>-1)return void i.classed("vzb-invisible",!0);i.classed("vzb-invisible")&&i.classed("vzb-invisible",!1);const o=!s.data.constant,l=!a.data.constant,n=i.select("text").style("font-size",null).text((o?this.localise("buttons/size")+": "+(t||this.strings.title.S):"")+(o&&l?", ":"")+(l?this.localise("buttons/colors")+": "+(e||this.strings.title.C):"")),r=n.node().getBBox().width,c=this.height-30,h=parseInt(n.style("font-size"))*c/r;n.style("font-size",r>c?h+"px":null)}_resizeDataWarning(){const{dataWarningEl:t,xTitleEl:e}=this.DOM,i=t.select("text").style("font-size",null),s=i.node().getBBox().width+3*i.node().getBBox().height,a=this.elementWidth-e.node().getBBox().width-this.profileConstants.infoElHeight,o=parseInt(i.style("font-size"))*a/s;i.style("font-size",s>a?o+"px":null);const l=i.node().getBBox();t.select("svg").attr("width",.75*l.height).attr("height",.75*l.height).attr("x",-l.width-1.2*l.height).attr("y",.65*-l.height),t.classed("vzb-hidden",this.services.layout.projector).attr("transform","translate("+(this.services.locale.isRTL()?l.width+l.height:this.width)+","+(this.height+this.profileConstants.margin.bottom-this.profileConstants.xAxisTitleBottomMargin)+")")}processFrameData(){return this.__dataProcessed=this.model.dataArray}_getTransition(t){return t?d3.transition().duration(t).ease(d3.easeLinear):d3.transition()}_bubblesInteract(){const t=this;return{mouseover(e){t.hoverBubble=!0,t.MDL.highlighted.data.filter.set(e),t._labels.showCloseCross(e,!0)},mouseout(e){t.hoverBubble=!1,t.MDL.highlighted.data.filter.delete(e),t._labels.showCloseCross(e,!1)},click(e){t.draggingNow||e[Symbol.for("trailHeadKey")]||t.model.toggleSelection(e)}}}_updateMarkerSizeLimits(){this.services.layout.size,this.MDL.size.scale.domain,this.MDL.size.scale.extent,this.sScale=this.MDL.size.scale.d3Scale.copy();const{minRadiusPx:e,maxRadiusPx:i}=this.profileConstants,s=this.MDL.size.scale.extent||[0,1];let a=t.LegacyUtils.radiusToArea(Math.max(i*s[0],e)),o=t.LegacyUtils.radiusToArea(Math.max(i*s[1],e)),l=a===o?[a,o]:d3.range(a,o,(o-a)/this.sScale.domain().length).concat(o);this.sScale.range(l)}_setTooltip(t,e,i,s,a,o){if(t){const a={};o&&(a.valueY=o[this.__alias("y")],a.valueX=o[this.__alias("x")],a.valueS=o.size,a.valueC=o.color,a.valueLST=o.size_label||null,a.labelText=this.__labelWithoutFrame(o,this.localise));const l={};l.labelX0=this.xScale.invert(e),l.labelY0=this.yScale.invert(i),l.scaledS0=s,l.scaledC0=null,this._labels.setTooltip(o,t,l,a)}else this._labels.setTooltip()}_getLabelText(t){return this.KEYS.map(e=>t.label[e]).join(",")}_updateOpacity(t){const e=this.MDL.highlighted.data.filter,i=this.MDL.selected.data.filter;this.__highlightedMarkers=new Map(e.markers),this.__selectedMarkers=new Map(i.markers),this.__someSelected=0!=this.__selectedMarkers.size,this.__someHighlighted=0!=this.__highlightedMarkers.size;const s=t||this.bubbles;s&&s.style("opacity",t=>this._getBubbleOpacity(t,this.ui))}_getBubbleOpacity(t){const e=this.ui;return this.__highlightedMarkers.has(t[Symbol.for("key")])?e.opacityHighlight:t[Symbol.for("trailHeadKey")]?e.opacityRegular:this.__selectedMarkers.has(t[Symbol.for("key")])?e.opacitySelect:this.__someSelected?e.opacitySelectDim:this.__someHighlighted?e.opacityHighlightDim:e.opacityRegular}_updateDoubtOpacity(t){null==t&&(t=this.wScale(this.MDL.frame.value.getUTCFullYear())),this.MDL.selected.data.filter.any()&&(t=1),this.DOM.dataWarningEl.style("opacity",t)}_setBubbleCrown(t,e,i,s,a){const o=this.DOM.bubbleCrown;null!=t?(o.classed("vzb-hidden",!1),o.select(".vzb-crown").attr("cx",t).attr("cy",e).attr("r",i).attr("fill",a?"none":s),o.selectAll(".vzb-crown-glow").attr("cx",t).attr("cy",e).attr("r",i+10).attr("stroke",s)):o.classed("vzb-hidden",!0)}_axisProjections(t){const{projectionX:e,projectionY:i,xAxisEl:s,yAxisEl:a}=this.DOM;if(null!=t){const o=t[this.__alias("y")],l=t[this.__alias("x")],n=t.r;this.ui.whenHovering.showProjectionLineX&&this.xScale(l)>0&&this.xScale(l)<this.width&&this.yScale(o)+n<this.height&&e.style("opacity",1).attr("y2",this.yScale(o)+n).attr("x1",this.xScale(l)).attr("x2",this.xScale(l)),this.ui.whenHovering.showProjectionLineY&&this.yScale(o)>0&&this.yScale(o)<this.height&&this.xScale(l)-n>0&&i.style("opacity",1).attr("y1",this.yScale(o)).attr("y2",this.yScale(o)).attr("x1",this.xScale(l)-n),this.ui.whenHovering.higlightValueX&&s.call(this.xAxis.highlightValue(l)),this.ui.whenHovering.higlightValueY&&a.call(this.yAxis.highlightValue(o))}else e.style("opacity",0),i.style("opacity",0),s.call(this.xAxis.highlightValue("none")),a.call(this.yAxis.highlightValue("none"))}_highlightDataPoints(){const t=this,e=this.MDL.highlighted.data.filter,i=this.MDL.selected.data.filter;this.someHighlighted=e.any();const s=this.MDL.trail.show,a=this.MDL.trail.starts,l=this.MDL.trail.groupDim;if(1===e.markers.size){const n=e.markers.keys().next().value,r=Object.assign(this.model.dataMap.getByObjOrStr(null,n)),c=t.xScale(r[t.__alias("x")]),h=t.yScale(r[t.__alias("y")]),d=r.r,b=null!=r.color?this.cScale(r.color):o;let g=!1;(c+d<0||c-d>this.width||h+d<0||h-d>this.height)&&(g=!0);const u=r[Symbol.for("trailHeadKey")]||r[Symbol.for("key")],m=i.has(u),x=!(a[u]-r[l]),p=!r[Symbol.for("trailHeadKey")];let y="";if(y=m?!s||x||p&&!this.hoverBubble?"":this.localise(r.label[l]):this.__labelWithoutFrame(r),t._labels.highlight(null,!1),t._labels.highlight({[Symbol.for("key")]:u},!0),m){const e=p;t._setBubbleCrown(c,h,d,b,e)}g||t._axisProjections(r),y&&!g&&t._setTooltip(y,c,h,d+3,b,r)}else this._axisProjections(),this._setTooltip(),this._setBubbleCrown(),this._labels.highlight(null,!1)}_blinkSuperHighlighted(){if(!this.MDL.superHighlighted)return;const t=this.MDL.superHighlighted.data.filter;this.bubbles.classed("vzb-super-highlighted",e=>t.has(e))}_selectDataPoints(){const e=this,i=this.MDL.selected.data.filter;t.LegacyUtils.isTouchDevice()?(e.model.clearHighlighted(),e._labels.showCloseCross(null,!1)):e._setTooltip(),e.someSelected=i.any(),e.nonSelectedOpacityZero=!1}_updateLabel(e,i,s,a,l,n){const r=this.MDL.selected.data.filter.markers,c=e[Symbol.for("key")];if(r.has(c)){const r=this.MDL.trail,h={};let d="";if(n&&!r.show&&(l=!0),r.show){const e=r.starts[c];if(e>=this.MDL.frame.value||l){const i=this.model.getDataMapByFrameValue(e).getByObjOrStr(null,c);h.labelText=d=this.__labelAll(i),h.labelX0=i[this.__alias("x")],h.labelY0=i[this.__alias("y")],h.scaledC0=null!=i.color?this.cScale(i.color):o,h.scaledS0=i.size||0===i.size?t.LegacyUtils.areaToRadius(this.sScale(i.size)):null,h.valueS0=i.size,i.hidden=n,this._labels.updateLabel(i,h,h.labelX0,h.labelY0,i.size,i.color,d,i.size_label,a,l)}}else h.labelText=d=this.__labelWithoutFrame(e),h.labelX0=i,h.labelY0=s,h.scaledC0=null!=e.color?this.cScale(e.color):o,h.scaledS0=e.size||0===e.size?t.LegacyUtils.areaToRadius(this.sScale(e.size)):null,h.valueS0=e.size,e.hidden=n,this._labels.updateLabel(e,h,i,s,e.size,e.color,d,e.size_label,a,l)}}_updateLabels(){const e=this.MDL.selected.data.filter,i=this.MDL.trail;for(const s of e.markers.keys()){const e=this._labels.cached[s],a=(i.show?this.model.getDataMapByFrameValue(i.starts[s]):this.model.dataMap).getByObjOrStr(null,s);e.labelText=this[i.show&&this.ui.timeInTrails?"__labelAll":"__labelWithoutFrame"](a),e.labelX0=a[this.__alias("x")],e.labelY0=a[this.__alias("y")],e.scaledC0=null!=a.color?this.cScale(a.color):o,e.scaledS0=a.size||0===a.size?t.LegacyUtils.areaToRadius(this.sScale(a.size)):null,e.valueS0=a.size,e.initTextBBox=null,e.initFontSize=null,this._labels.updateLabel({[Symbol.for("key")]:s},null,null,null,null,null,null,a.size_label)}}__labelWithoutFrame(t){return this.KEYS.map(e=>this.localise(t.label[e])).join(" ")}__labelAll(t){return this.model.data.space.map(e=>this.localise(t.label[e])).join(" ")}__alias(t){return this.state.alias[t]}}r.DEFAULT_UI={showForecastOverlay:!0,opacityHighlight:1,opacitySelect:1,opacityHighlightDim:.1,opacitySelectDim:.3,opacityRegular:.5,timeInBackground:!0,timeInTrails:!0,decorations:{enabled:!0,xAxisGroups:null},superhighlightOnMinimapHover:!0,whenHovering:{showProjectionLineX:!0,showProjectionLineY:!0,higlightValueX:!0,higlightValueY:!0},labels:{removeLabelBox:!0},margin:{left:0,top:0},lockNonSelected:0,datawarning:{doubtDomain:[],doubtRange:[]},numberFormatSIPrefix:!0};const c=e.decorate(r,{MDL:e.computed});class h extends t.BaseComponent{constructor(i){const s=i.splash(i.model.stores.markers.get("bubble"));i.name="bubblechart",i.subcomponents=[{type:t.Repeater,placeholder:".vzb-repeater",model:s,options:{COMP_TYPE:c,COMP_CSSNAME:"vzb-bubblechart"},name:"chart"},{type:t.TimeSlider,placeholder:".vzb-timeslider",model:s,name:"time-slider"},{type:t.SteppedSlider,placeholder:".vzb-speedslider",model:s,name:"speed-slider"},{type:t.TreeMenu,placeholder:".vzb-treemenu",model:s,name:"tree-menu"},{type:t.DataWarning,placeholder:".vzb-datawarning",model:s},{type:t.DataNotes,placeholder:".vzb-datanotes",model:s},{type:t.Dialogs,placeholder:".vzb-dialogs",model:s,name:"dialogs"},{type:t.ButtonList,placeholder:".vzb-buttonlist",model:s,name:"buttons"}],i.template='\n <div class="vzb-repeater vzb-bubblechart">\n </div>\n <div class="vzb-animationcontrols">\n <div class="vzb-timeslider"></div>\n <div class="vzb-speedslider"></div>\n </div>\n <div class="vzb-sidebar">\n <div class="vzb-dialogs"></div>\n <div class="vzb-buttonlist"></div>\n </div>\n <div class="vzb-treemenu"></div>\n <div class="vzb-datawarning"></div>\n <div class="vzb-datanotes"></div>\n ',i.services={locale:new t.LocaleService(i.locale),layout:new t.LayoutService({placeholder:i.placeholder})},i.model.config.markers.bubble.data.locale=e.observable({get id(){return i.services.locale.id}}),super(i)}}return h.DEFAULT_UI={chart:{viewWH:{width:0,height:0},timeInBackground:!0,timeInTrails:!0,decorations:!0,superhighlightOnMinimapHover:!0,numberFormatSIPrefix:!0,showForecast:!1,pauseBeforeForecast:!0,showForecastOverlay:!1,show_ticks:!0,presentation:!1,panWithArrow:!1,adaptMinMaxZoom:!1,cursorMode:"arrow",zoomOnScrolling:!0,opacityHighlight:1,opacitySelect:1,opacityHighlightDim:.1,opacitySelectDim:.3,opacityRegular:.5,labels:{removeLabelBox:!1}}},h})); | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("VizabiSharedComponents"),require("mobx")):"function"==typeof define&&define.amd?define(["VizabiSharedComponents","mobx"],e):(t=t||self).BubbleChart=e(t.VizabiSharedComponents,t.mobx)}(this,(function(t,e){"use strict";class i{constructor(t){this.context=t,this.dragRectangle=d3.drag(),this.zoomer=d3.zoom(),this.dragRectangle.subject(this.dragSubject()).on("start",this.drag().start).on("drag",this.drag().go).on("end",this.drag().stop),this.zoomer.filter(this.zoomFilter()).scaleExtent([.0625,1/0]).on("start",this.zoom().start).on("zoom",this.zoom().go).on("end",this.zoom().stop),this.zoomer.ratioX=1,this.zoomer.ratioY=1,this.context._zoomedXYMinMax={x:{zoomedMin:null,zoomedMax:null},y:{zoomedMin:null,zoomedMax:null}}}dragSubject(){const t=this.context;return function(e){return!d3.event.sourceEvent.ctrlKey&&!d3.event.sourceEvent.metaKey&&"plus"!==t.ui.cursorMode||"minus"===t.ui.cursorMode||("touchmove"===d3.event.sourceEvent.type||"touchstart"===d3.event.sourceEvent.type)&&(d3.event.sourceEvent.touches.length>1||d3.event.sourceEvent.targetTouches.length>1)?null:{x:d3.mouse(this)[0],y:d3.mouse(this)[1]}}}drag(){const t=this.context,e=this;return{start(e,i){this.origin={x:d3.mouse(this)[0],y:d3.mouse(this)[1]},t.DOM.zoomRect.classed("vzb-invisible",!1)},go(e,i){const s=this.origin,a={x:d3.event.x,y:d3.event.y};t.DOM.zoomRect.attr("x",Math.min(a.x,s.x)).attr("y",Math.min(a.y,s.y)).attr("width",Math.abs(a.x-s.x)).attr("height",Math.abs(a.y-s.y))},stop(i){if(t.DOM.zoomRect.attr("width",0).attr("height",0).classed("vzb-invisible",!0),this.target={x:d3.mouse(this)[0],y:d3.mouse(this)[1]},Math.abs(this.origin.x-this.target.x)<10||Math.abs(this.origin.y-this.target.y)<10)return;const s=d3.event.sourceEvent.ctrlKey||d3.event.sourceEvent.metaKey||"plus"===t.ui.cursorMode;e._zoomOnRectangle(d3.select(this),this.origin.x,this.origin.y,this.target.x,this.target.y,s,500)}}}zoomFilter(){const t=this.context;return function(e){const i=d3.event;return!i.ctrlKey&&!i.metaKey&&(("touchmove"===i.type||"touchstart"===i.type)&&(i.touches.length>1||i.targetTouches.length>1)||(!("wheel"!==i.type&&"mousewheel"!==i.type||!t.ui.zoomOnScrolling)||!("mousedown"!==i.type&&"touchstart"!==i.type||"plus"===t.ui.cursorMode||"minus"===t.ui.cursorMode||!t.ui.panWithArrow&&"hand"!==t.ui.cursorMode)))}}zoom(){const e=this.context,i=this.zoomer,s=this;return{start(){"plus"!==e.ui.cursorMode&&"minus"!==e.ui.cursorMode&&e.DOM.chartSvg.classed("vzb-zooming",!0)},go(){const a=d3.event.sourceEvent;let o=d3.event.transform.k,l=[d3.event.transform.x,d3.event.transform.y],n=i.ratioY,r=i.ratioX;e.draggingNow=!0,(isNaN(o)||null==o)&&(o=i.scale),(isNaN(o)||null==o)&&(o=1),1===o&&null!==a&&(("wheel"===a.type||"mousewheel"===a.type)&&(a.deltaY||-a.wheelDelta)>0||"touchmove"===a.type&&a.touches.length>1)&&(i.ratioX=1,r=1,i.ratioY=1,n=1),(isNaN(l[0])||isNaN(l[1])||null==l[0]||null==l[1])&&(l=[0,0]);const c=i.scaleExtent()[0];o*n<c&&(n=c/o,i.ratioY=n),o*r<c&&(r=c/o,i.ratioX=r);const h=o*r<1,d=o*n<1;h?(l[0]<0&&(l[0]=0),l[0]>(1-o*r)*e.width&&(l[0]=(1-o*r)*e.width)):(l[0]>0&&(l[0]=0),l[0]<(1-o*r)*e.width&&(l[0]=(1-o*r)*e.width)),d?(l[1]<0&&(l[1]=0),l[1]>(1-o*n)*e.height&&(l[1]=(1-o*n)*e.height)):(l[1]>0&&(l[1]=0),l[1]<(1-o*n)*e.height&&(l[1]=(1-o*n)*e.height)),s.zoomSelection.property("__zoom",d3.zoomIdentity.translate(l[0],l[1]).scale(o));const b=e.width*o*r,g=e.height*o*n,u=[0*o*r+l[0],b+l[0]],m=[g+l[1],0*o*n+l[1]],x=e._rangeBump(u),p=e._rangeBump(m),y=(x[0]-u[0])*o*r,v=(x[1]-u[1])*o*r,z=(p[0]-m[0])*o*n,M=(p[1]-m[1])*o*n;u[0]+=y,u[1]+=v,m[0]+=z,m[1]+=M;const _=[0,e.width],f=[e.height,0],S=e._rangeBump(_),D=e._rangeBump(f);h?(u[0]<S[0]&&(l[0]=S[0]-y),u[1]>S[1]&&(l[0]=S[1]-v-b)):(u[0]>S[0]&&(l[0]=S[0]-y),u[1]<S[1]&&(l[0]=S[1]-v-b)),d?(m[0]>D[0]&&(l[1]=D[0]-z-g),m[1]<D[1]&&(l[1]=D[1]-M)):(m[0]<D[0]&&(l[1]=D[0]-z-g),m[1]>D[1]&&(l[1]=D[1]-M)),h?(u[0]<S[0]&&(u[1]+=Math.abs(u[0]-S[0]),u[0]=S[0]),u[1]>S[1]&&(u[0]-=Math.abs(u[1]-S[1]),u[1]=S[1])):(u[0]>S[0]&&(u[1]-=Math.abs(u[0]-S[0]),u[0]=S[0]),u[1]<S[1]&&(u[0]+=Math.abs(u[1]-S[1]),u[1]=S[1])),d?(m[0]>D[0]&&(m[1]-=Math.abs(m[0]-D[0]),m[0]=D[0]),m[1]<D[1]&&(m[0]+=Math.abs(m[1]-D[1]),m[1]=D[1])):(m[0]<D[0]&&(m[1]+=Math.abs(m[0]-D[0]),m[0]=D[0]),m[1]>D[1]&&(m[0]-=Math.abs(m[1]-D[1]),m[1]=D[1])),"ordinal"===e.MDL.x.scale.type?e.xScale.rangeBands(u):e.xScale.range(u),"ordinal"===e.MDL.y.scale.type?e.yScale.rangeBands(m):e.yScale.range(m);const w=function(e){return t.LegacyUtils.isDate(e)?e:+e.toFixed(2)},L=S,C=D;e._zoomedXYMinMax={x:{zoomedMin:w(e.xScale.invert(L[0])),zoomedMax:w(e.xScale.invert(L[1]))},y:{zoomedMin:w(e.yScale.invert(C[0])),zoomedMax:w(e.yScale.invert(C[1]))}},i.dontFeedToState||(e.MDL.x.scale.zoomed=[e._zoomedXYMinMax.x.zoomedMin,e._zoomedXYMinMax.x.zoomedMax],e.MDL.y.scale.zoomed=[e._zoomedXYMinMax.y.zoomedMin,e._zoomedXYMinMax.y.zoomedMax]);const E=e.yAxis.labelerOptions(),T=e.xAxis.labelerOptions();E.limitMaxTickNumber=o*n<1.5?8:o*n*8,T.limitMaxTickNumber=o*r<1.5?8:o*r*8,E.transitionDuration=i.duration,T.transitionDuration=i.duration,e.DOM.xAxisEl.call(e.xAxis.labelerOptions(T)),e.DOM.yAxisEl.call(e.yAxis.labelerOptions(E)),e.redrawData(i.duration),i.duration=0},stop(){e.DOM.chartSvg.classed("vzb-zooming",!1),i.dontFeedToState||(e.MDL.x.scale.zoomed=[e._zoomedXYMinMax.x.zoomedMin,e._zoomedXYMinMax.x.zoomedMax],e.MDL.y.scale.zoomed=[e._zoomedXYMinMax.y.zoomedMin,e._zoomedXYMinMax.y.zoomedMax]),i.dontFeedToState=null,e.draggingNow=!1}}}expandCanvas(e){const i=this.context;e||(e=i.duration);const s=d3.extent(t.LegacyUtils.values(i.frame.x)),a=d3.extent(t.LegacyUtils.values(i.frame.y));if(!s[0]&&0!==s[0]||!s[1]&&0!==s[1]||!a[0]&&0!==a[0]||!a[1]&&0!==a[1])return t.LegacyUtils.warn("panZoom.expandCanvas: X or Y min/max are broken. Aborting with no action");const o={x1:i.xScale(s[0]),y1:i.yScale(a[0]),x2:i.xScale(s[1]),y2:i.yScale(a[1])},l=[0,i.width],n=[i.height,0],r=l[0],c=l[1],h=n[0],d=n[1];if(!i.isCanvasPreviouslyExpanded||o.x1<1*r||o.x2>1*c||o.y2<1*d||o.y1>1*h){if(i.isCanvasPreviouslyExpanded){const t=i._rangeBump(l),e=i._rangeBump(n);o.x1>t[0]&&(o.x1=t[0]),o.x2<t[1]&&(o.x2=t[1]),o.y1<e[0]&&(o.y1=e[0]),o.y2>e[0]&&(o.y2=e[1])}i.isCanvasPreviouslyExpanded=!0,this._zoomOnRectangle(i.element,o.x1,o.y1,o.x2,o.y2,!1,e)}else i.redrawDataPoints(e)}zoomToMaxMin(t,e,i,s,a,o){const l=this.context;let n=t,r=e,c=i,h=s;const d=l.xScale.domain(),b=l.yScale.domain();n<d[0]&&r<d[1]&&(n=d[0]),n>d[0]&&r>d[1]&&(r=d[1]),c<b[0]&&h<b[1]&&(c=b[0]),c>b[0]&&h>b[1]&&(h=b[1]);const g=[l.xScale(n),l.xScale(r)],u=[l.yScale(c),l.yScale(h)];this._zoomOnRectangle(l.element,g[0],u[0],g[1],u[1],!1,a,o)}_zoomOnRectangle(e,i,s,a,o,l,n,r){const c=this.context,h=this.zoomer,d=d3.zoomTransform(this.zoomSelection.node()),b=i,g=s,u=a,m=o;l&&d.translate(b-u,g-m);const x=[0,c.width],p=[c.height,0],y=c._rangeBump(x),v=c._rangeBump(p),z=h.scaleExtent()[0],M=h.scaleExtent()[1];let _,f,S;if(b==u||g==m||y[0]==y[1]||v[0]==v[1])return t.LegacyUtils.warn("_zoomOnRectangle(): can not proceed because this may result in infinity zooms");Math.abs(b-u)>Math.abs(g-m)?(_=Math.abs(v[0]-v[1])/Math.abs(g-m)*d.k,_<z&&(h.ratioY*=_/d.k,_=z),_>M&&(_=M),f=Math.abs(y[0]-y[1])/Math.abs(b-u)*d.k/_*h.ratioX,S=h.ratioY):(_=Math.abs(y[0]-y[1])/Math.abs(b-u)*d.k,_<z&&(h.ratioX*=_/d.k,_=z),_>M&&(_=M),S=Math.abs(v[0]-v[1])/Math.abs(g-m)*d.k/_*h.ratioY,f=h.ratioX);const D=[(d.x-Math.min(b,u))/d.k/h.ratioX*_*f+(y[0]-x[0]),(d.y-Math.min(g,m))/d.k/h.ratioY*_*S+(v[1]-p[1])];h.dontFeedToState=r,h.ratioY=S||1,h.ratioX=f||1,h.duration=n||0,this.zoomSelection.call(h.transform,d3.zoomIdentity.translate(D[0],D[1]).scale(_))}zoomByIncrement(t,e){this.context;const i=d3.zoomTransform(this.zoomSelection.node());let s=i.k;const a=[i.x,i.y],o=d3.mouse(this.zoomSelection.node());let l=Math.log(s)/Math.LN2;"plus"!=t&&t||(l=Math.floor(l)+1),"minus"==t&&(l=Math.ceil(l)-1);let n=[(o[0]-a[0])/s,(o[1]-a[1])/s];const r=this.zoomer.scaleExtent();s==r[0]&&(this.zoomer.ratioY=1,this.zoomer.ratioX=1),s=Math.max(r[0],Math.min(r[1],Math.pow(2,l))),n=[n[0]*s+a[0],n[1]*s+a[1]],a[0]+=o[0]-n[0],a[1]+=o[1]-n[1],this.zoomer.duration=e||0,this.zoomSelection.call(this.zoomer.transform,d3.zoomIdentity.translate(a[0],a[1]).scale(s))}resetZoomState(t){this.zoomer.ratioY=1,this.zoomer.ratioX=1,(t||this.zoomSelection).property("__zoom",d3.zoomIdentity)}reset(t,e){this.context.isCanvasPreviouslyExpanded=!1,this.zoomer.ratioY=1,this.zoomer.ratioX=1,this.zoomer.duration=e||0,(t||this.zoomSelection).call(this.zoomer.transform,d3.zoomIdentity)}rerun(t){this.context;(t||this.zoomSelection).call(this.zoomer.scaleBy,1)}zoomSelection(t){this.zoomSelection=t}}const{ICON_WARN:s,ICON_QUESTION:a}=t.Icons,o="rgb(253, 253, 253)",l=(t,e=0)=>i=>t+i*e,n=(t,e=0)=>i=>t+i*e;class r extends t.BaseComponent{constructor(e){e.subcomponents=[{type:t.Labels,placeholder:".vzb-bc-labels",options:{CSS_PREFIX:"vzb-bc",LABELS_CONTAINER_CLASS:"vzb-bc-labels",LINES_CONTAINER_CLASS:"vzb-bc-lines",SUPPRESS_HIGHLIGHT_DURING_PLAY:!1},name:"labels"},{type:t.DynamicBackground,placeholder:".vzb-bc-year"}],e.template='\n <svg class="vzb-bubblechart-svg vzb-bubblechart-svg-back vzb-export">\n <g class="vzb-bc-graph">\n <g class="vzb-bc-year"></g>\n <svg class="vzb-bc-axis-x"><g></g></svg>\n <svg class="vzb-bc-axis-y"><g></g></svg>\n <line class="vzb-bc-projection-x"></line>\n <line class="vzb-bc-projection-y"></line>\n <svg class="vzb-bc-bubbles-crop">\n <g class="vzb-bc-decorations">\n <line class="vzb-bc-line-equal-xy vzb-invisible"></line>\n <g class="vzb-bc-x-axis-groups"></g>\n </g> \n </svg>\n </g>\n </svg>\n <svg class="vzb-bubblechart-svg vzb-bubblechart-svg-main vzb-export">\n <g class="vzb-bc-graph">\n <g class="vzb-bc-axis-x-title"></g>\n <g class="vzb-bc-axis-x-info vzb-noexport"></g>\n\n <g class="vzb-bc-axis-y-title"></g>\n <g class="vzb-bc-axis-y-info vzb-noexport"></g>\n <svg class="vzb-bc-bubbles-crop">\n <g class="vzb-zoom-selection"></g>\n <rect class="vzb-bc-eventarea"></rect>\n <g class="vzb-bc-trails"></g>\n <g class="vzb-bc-bubbles"></g>\n <rect class="vzb-bc-forecastoverlay vzb-hidden" x="0" y="0" width="100%" height="100%" fill="url(#vzb-bc-pattern-lines)" pointer-events=\'none\'></rect>\n </svg>\n\n <g class="vzb-bc-axis-y-subtitle"></g>\n <g class="vzb-bc-axis-x-subtitle"></g>\n <g class="vzb-bc-axis-s-title"></g>\n <g class="vzb-bc-axis-c-title"></g>\n\n <g class="vzb-data-warning vzb-noexport">\n <svg></svg>\n <text></text>\n </g>\n\n <rect class="vzb-bc-zoom-rect"></rect>\n </g>\n </svg>\n <svg class="vzb-bubblechart-svg vzb-bubblechart-svg-front vzb-export">\n <g class="vzb-bc-graph">\n <svg class="vzb-bc-bubbles-crop">\n <g class="vzb-bc-lines"></g>\n <g class="vzb-bc-bubble-crown vzb-hidden">\n <circle class="vzb-crown-glow"></circle>\n <circle class="vzb-crown"></circle>\n </g> \n </svg>\n <svg class="vzb-bc-labels-crop">\n <g class="vzb-bc-labels"></g>\n </svg>\n </g>\n </svg>\n <svg width="0" height="0">\n <defs>\n <filter id="vzb-glow-filter" x="-50%" y="-50%" width="200%" height="200%">\n <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>\n </filter>\n <pattern id="vzb-bc-pattern-lines" x="0" y="0" patternUnits="userSpaceOnUse" width="50" height="50" viewBox="0 0 10 10"> \n <path d=\'M-1,1 l2,-2M0,10 l10,-10M9,11 l2,-2\' stroke=\'black\' stroke-width=\'3\' opacity=\'0.08\'/>\n </pattern> \n </defs>\n </svg>\n \x3c!-- This could possibly be another component --\x3e\n <div class="vzb-tooltip vzb-hidden vzb-tooltip-mobile"></div>\n ',super(e)}setup(){this.DOM={element:this.element,chartSvg:this.element.select("svg.vzb-bubblechart-svg-main"),chartSvgFront:this.element.select("svg.vzb-bubblechart-svg-front"),chartSvgBack:this.element.select("svg.vzb-bubblechart-svg-back"),chartSvgAll:this.element.selectAll("svg.vzb-bubblechart-svg"),graphAll:this.element.selectAll(".vzb-bc-graph"),bubbleContainerCropAll:this.element.selectAll(".vzb-bc-bubbles-crop"),zoomRect:this.element.select(".vzb-bc-zoom-rect"),eventArea:this.element.select(".vzb-bc-eventarea"),forecastOverlay:this.element.select(".vzb-bc-forecastoverlay"),tooltipMobile:this.element.select(".vzb-tooltip-mobile")},this.DOM.chartSvg.select(".vzb-bc-graph").call(t=>Object.assign(this.DOM,{graph:t,ySubTitleEl:t.select(".vzb-bc-axis-y-subtitle"),xSubTitleEl:t.select(".vzb-bc-axis-x-subtitle"),yTitleEl:t.select(".vzb-bc-axis-y-title"),xTitleEl:t.select(".vzb-bc-axis-x-title"),sTitleEl:t.select(".vzb-bc-axis-s-title"),cTitleEl:t.select(".vzb-bc-axis-c-title"),yInfoEl:t.select(".vzb-bc-axis-y-info"),xInfoEl:t.select(".vzb-bc-axis-x-info"),dataWarningEl:t.select(".vzb-data-warning"),trailsContainer:t.select(".vzb-bc-trails"),bubbleContainer:t.select(".vzb-bc-bubbles"),bubbleContainerCrop:t.select(".vzb-bc-bubbles-crop"),zoomSelection:t.select(".vzb-zoom-selection")})),this.DOM.chartSvgFront.select(".vzb-bc-graph").call(t=>Object.assign(this.DOM,{graphFront:t,labelsContainer:t.select(".vzb-bc-labels"),labelsContainerCrop:t.select(".vzb-bc-labels-crop"),linesContainer:t.select(".vzb-bc-lines"),bubbleCrown:t.select(".vzb-bc-bubble-crown")})),this.DOM.chartSvgBack.select(".vzb-bc-graph").call(t=>{Object.assign(this.DOM,{yAxisElContainer:t.select(".vzb-bc-axis-y"),xAxisElContainer:t.select(".vzb-bc-axis-x"),yearEl:t.select(".vzb-bc-year"),projectionX:t.select(".vzb-bc-projection-x"),projectionY:t.select(".vzb-bc-projection-y"),decorationsEl:t.select(".vzb-bc-decorations")}),this.DOM.yAxisEl=this.DOM.yAxisElContainer.select("g"),this.DOM.xAxisEl=this.DOM.xAxisElContainer.select("g"),this.DOM.lineEqualXY=this.DOM.decorationsEl.select(".vzb-bc-line-equal-xy"),this.DOM.xAxisGroupsEl=this.DOM.decorationsEl.select(".vzb-bc-x-axis-groups")}),this.DOM.bubbleCrown.selectAll(".vzb-crown-glow").attr("filter","url("+location.pathname+"#vzb-glow-filter)"),this._year=this.findChild({type:"DynamicBackground"}),this._labels=this.findChild({type:"Labels"}),this._panZoom=new i(this),this.scrollableAncestor=t.LegacyUtils.findScrollableAncestor(this.element),this.xAxis=t.axisSmart("bottom"),this.yAxis=t.axisSmart("left"),this.isCanvasPreviouslyExpanded=!1,this.draggingNow=null,this.wScale=d3.scaleLinear().domain(this.ui.datawarning.doubtDomain).range(this.ui.datawarning.doubtRange),this.hoverBubble=!1;const e=this;d3.select("body").on("keydown",()=>{"arrow"!==e.ui.cursorMode&&"hand"!==e.ui.cursorMode||(d3.event.metaKey||d3.event.ctrlKey)&&e.DOM.chartSvgAll.classed("vzb-zoomin",!0)}).on("keyup",()=>{"arrow"!==e.ui.cursorMode&&"hand"!==e.ui.cursorMode||d3.event.metaKey||d3.event.ctrlKey||e.DOM.chartSvgAll.classed("vzb-zoomin",!1)}).on("mouseenter",()=>{"arrow"!==e.ui.cursorMode&&"hand"!==e.ui.cursorMode||d3.event.metaKey||d3.event.ctrlKey||e.DOM.chartSvgAll.classed("vzb-zoomin",!1)}),this.root.element.on("custom-resetZoom",()=>{e._panZoom.reset(null,500)}),this._panZoom.zoomSelection(this.DOM.bubbleContainerCrop),this.DOM.bubbleContainerCrop.call(this._panZoom.dragRectangle).call(this._panZoom.zoomer).on("dblclick.zoom",null).on("mouseup",()=>{e.draggingNow=!1}).on("click",()=>{const t=e.ui.cursorMode;d3.event.defaultPrevented||"arrow"===t||"hand"===t||e._panZoom.zoomByIncrement(t,500)})}get MDL(){return{frame:this.model.encoding.get("frame"),selected:this.model.encoding.get("selected"),highlighted:this.model.encoding.get("highlighted"),superHighlighted:this.model.encoding.get("superhighlighted"),y:this.model.encoding.get(this.state.alias.y||"y"),x:this.model.encoding.get(this.state.alias.x||"x"),size:this.model.encoding.get("size"),color:this.model.encoding.get("color"),label:this.model.encoding.get("label"),trail:this.model.encoding.get("trail")}}draw(){this.localise=this.services.locale.auto(),this.TIMEDIM=this.MDL.frame.data.concept,this.KEYS=this.model.data.space.filter(t=>t!==this.TIMEDIM),this._updateLayoutProfile()||(this.addReaction(this._updateTrailsOnSelect),this.addReaction(this._updateXYScales),this.addReaction(this._updateColorScale),this.addReaction(this._updateUIStrings),this.addReaction(this._updateSize),this.addReaction(this._updateMarkerSizeLimits),this.addReaction(this._updateOpacity),this.addReaction(this._updateShowYear),this.addReaction(this._updateYear),this.addReaction(this.drawData),this.addReaction(this._zoomToMarkerMaxMin),this.addReaction(this._selectDataPoints),this.addReaction(this._highlightDataPoints),this.addReaction(this._blinkSuperHighlighted),this.addReaction(this._updateDoubtOpacity))}drawData(){this.MDL.trail.show&&this.MDL.trail.updateTrailStart(this.MDL.frame.framesAround[1]),this.processFrameData(),this._createAndDeleteBubbles()}_updateTrailsOnSelect(){const t=this.MDL.selected.data.filter;e.runInAction(()=>{Object.keys(this.MDL.trail.config.starts).forEach(e=>{t.markers.has(e)||this.MDL.trail.deleteTrail({[Symbol.for("key")]:e})}),t.markers.has();for(const[e]of t.markers)this.MDL.trail.config.starts[e]||this.MDL.trail.setTrail({[Symbol.for("key")]:e,[this.MDL.trail.groupDim]:this.MDL.frame.value})})}_updateShowYear(){this.DOM.yearEl.classed("vzb-hidden",!this.ui.timeInBackground)}_updateYear(){const t=this._getDuration();this._year.setText(this.localise(this.MDL.frame.value),t)}_createAndDeleteBubbles(){const e=this,i=this._getDuration(),s=this._getTransition(i),a=this.__dataProcessed;this.bubbles=this.DOM.bubbleContainer.selectAll(".vzb-bc-entity").data(this.__dataProcessed,t=>t[Symbol.for("key")]).join(s=>s.append(t=>{if(t[Symbol.for("trailHeadKey")]){const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.appendChild(document.createElementNS("http://www.w3.org/2000/svg","circle")),t.appendChild(document.createElementNS("http://www.w3.org/2000/svg","line")),t}return document.createElementNS("http://www.w3.org/2000/svg","circle")}).attr("class","vzb-bc-entity").attr("id",t=>`vzb-bc-bubble-${t[Symbol.for("key")]}-${this.id}`).style("opacity",t=>t[Symbol.for("opacity")]=this._getBubbleOpacity(t)).call(e=>{t.LegacyUtils.isTouchDevice()?e.on("tap",this._bubblesInteract().tap):e.on("mouseover",this._bubblesInteract().mouseover).on("mouseout",this._bubblesInteract().mouseout).on("click",this._bubblesInteract().click)}).each((function(s,l){const n=a[l+1]||{},r=s[Symbol.for("trailHeadKey")],c=r&&!n[Symbol.for("trailHeadKey")],h=r?this.children[0]:this,d=s[e.__alias("x")],b=s[e.__alias("y")],g=s.size,u=s.color;s.r=t.LegacyUtils.areaToRadius(e.sScale(g||0));const m=e.xScale(d),x=e.yScale(b),p=null!=u?e.cScale(u):o,y=d3.select(h);if((!i||!c)&&(y.attr("r",s.r).attr("fill",p).attr("cy",x).attr("cx",m),r)){const t=d3.select(h.nextSibling),i=e.xScale(n[e.__alias("x")]),a=e.yScale(n[e.__alias("y")]);t.attr("x1",m).attr("y1",x).attr("x2",i).attr("y2",a).style("stroke",p).attr("stroke-dasharray",Math.abs(m-i)+Math.abs(x-a)).attr("stroke-dashoffset",-s.r)}i&&!r&&y.style("opacity",0).transition().duration(.9*i).style("opacity",s[Symbol.for("opacity")]),r||e._updateLabel(s,d,b,i,!0,!1)})),l=>l.each((function(l,n){const r=l[Symbol.for("trailHeadKey")],c=a[n+1]||{},h=a[n+2]||{},d=r&&!c[Symbol.for("trailHeadKey")],b=r&&!h[Symbol.for("trailHeadKey")],g=l.size;if(l.r=t.LegacyUtils.areaToRadius(e.sScale(g||0)),r&&!d&&!b)return;const u=l[e.__alias("x")],m=l[e.__alias("y")],x=l.color,p=e.xScale(u),y=e.yScale(m),v=null!=x?e.cScale(x):o;if(!i||!d){const t=r?this.children[0]:this;if((i&&!r?d3.select(t).transition(s):d3.select(t).interrupt()).attr("r",l.r).attr("fill",v).attr("cy",y).attr("cx",p),r){const o=d3.select(t.nextSibling),r=e.xScale(c[e.__alias("x")]),h=e.yScale(c[e.__alias("y")]);o.attr("x1",p).attr("y1",y),i&&!a[n+2][Symbol.for("trailHeadKey")]?o.attr("x2",p).attr("y2",y).transition(s).attr("x2",r).attr("y2",h):o.interrupt().attr("x2",r).attr("y2",h),o.style("stroke",v).attr("stroke-dasharray",Math.abs(p-r)+Math.abs(y-h)).attr("stroke-dashoffset",-l.r)}}r||e._updateLabel(l,u,m,i,!1,!1)})),t=>t.each((function(t){const a=t[Symbol.for("trailHeadKey")];(i&&!a?d3.select(this).transition(s).duration(.9*i).style("opacity",0):d3.select(this).interrupt()).remove(),a||e._updateLabel(t,t[e.__alias("x")],t[e.__alias("y")],i,!0,!0)}))).order()}redrawData(e){this.services.layout.size,this.MDL.x.scale.type,this.MDL.y.scale.type,this.MDL.color.scale.type,this.MDL.size.scale.type,this.MDL.size.scale.extent;const i=this,s=this.__dataProcessed;this.bubbles&&this.bubbles.each((function(a,l){const n=a[Symbol.for("trailHeadKey")],r=n?this.children[0]:this,c=a[i.__alias("x")],h=a[i.__alias("y")],d=a.size,b=a.color;a.r=t.LegacyUtils.areaToRadius(i.sScale(d||0));const g=i.xScale(c),u=i.yScale(h),m=null!=b?i.cScale(b):o;if((e?d3.select(r).transition().duration(e):d3.select(r).interrupt()).attr("r",a.r).attr("fill",m).attr("cy",u).attr("cx",g),n){const t=e?d3.select(r.nextSibling).transition().duration(e):d3.select(r.nextSibling).interrupt(),o=s[l+1],n=i.xScale(o[i.__alias("x")]),c=i.yScale(o[i.__alias("y")]);t.attr("x1",g).attr("y1",u).attr("x2",n).attr("y2",c).style("stroke",m).attr("stroke-dasharray",Math.abs(g-n)+Math.abs(u-c)).attr("stroke-dashoffset",-a.r)}})),i._updateLabels()}__getZoomed(t,e,i){return d3[t.toLowerCase()](null!==e?e:i)}__getZoomedMin(t,e){return this.__getZoomed("Min",t,e)}__getZoomedMax(t,e){return this.__getZoomed("Max",t,e)}_zoomToMarkerMaxMin(){this.services.layout.size,this.MDL.x.scale.type,this.MDL.y.scale.type;const t={x:this.MDL.x.scale.zoomed,y:this.MDL.y.scale.zoomed},i=this.MDL.x.data.domain,s=this.MDL.y.data.domain;if(this.draggingNow)return;this._panZoom.resetZoomState(),this.yScale.range(this._rangeBump([this.height,0])),this.xScale.range(this._rangeBump([0,this.width]));const a=this.__getZoomedMin(t.x,i),o=this.__getZoomedMax(t.x,i),l=this.__getZoomedMin(t.y,s),n=this.__getZoomedMax(t.y,s);e.runInAction(()=>{this._panZoom.zoomToMaxMin(a,o,l,n,0,"don't feed these zoom values back to state")})}_resetZoomMinMaxXReaction(){return{concept:this.MDL.x.data.concept}}_resetZoomMinMaxX(){this.ui.panzoom.x={zoomedMin:null,zoomedMax:null}}_resetZoomMinMaxYReaction(){return{concept:this.MDL.y.data.concept}}_resetZoomMinMaxY(){this.ui.panzoom.y={zoomedMin:null,zoomedMax:null}}_drawForecastOverlay(){this.DOM.forecastOverlay.classed("vzb-hidden",!this.MDL.frame.endBeforeForecast||!this.ui.showForecastOverlay||this.MDL.frame.value<=this.MDL.frame.endBeforeForecast)}_updateLayoutProfile(){var e,i,s;if(this.services.layout.size,this.elementHeight=this.element.node().clientHeight||0,this.elementWidth=this.element.node().clientWidth||0,this.profileConstants=this.services.layout.getProfileConstants((e=this.elementWidth,i=this.elementHeight,{SMALL:{margin:{top:30,bottom:35,left:30,right:10},leftMarginRatio:1,padding:2,minRadiusPx:.5,maxRadiusEm:(s={ui:this.ui}).ui.maxRadiusEm||.05,infoElHeight:16,yAxisTitleBottomMargin:6,xAxisTitleBottomMargin:4},MEDIUM:{margin:{top:15,bottom:40,left:40,right:15},leftMarginRatio:1.6,padding:2,minRadiusPx:1,maxRadiusEm:s.ui.maxRadiusEm||.05,infoElHeight:20,yAxisTitleBottomMargin:3,xAxisTitleBottomMargin:4},LARGE:{margin:{top:15,bottom:l(30,.03)(i),left:n(31,.015)(e),right:20},leftMarginRatio:1.8,padding:2,minRadiusPx:1,maxRadiusEm:s.ui.maxRadiusEm||.05,infoElHeight:22,yAxisTitleBottomMargin:3,xAxisTitleBottomMargin:l(0,.01)(i),hideSTitle:!0}}),((t,e,i)=>({MEDIUM:{margin:{top:20,bottom:55,left:50,right:20},yAxisTitleBottomMargin:3,xAxisTitleBottomMargin:4,infoElHeight:26},LARGE:{margin:{top:30,bottom:l(45,.03)(e),left:n(35,.025)(t),right:30},yAxisTitleBottomMargin:3,xAxisTitleBottomMargin:l(-10,.01)(e),infoElHeight:32,hideSTitle:!0}}))(this.elementWidth,this.elementHeight,this.ui)),!this.elementHeight||!this.elementWidth)return t.LegacyUtils.warn("Chart _updateProfile() abort: container is too little or has display:none")}_getDuration(){return this.MDL.frame.playing&&this.MDL.frame.speed||0}_updateXYScales(){this.yScale=this.MDL.y.scale.d3Scale.copy(),this.xScale=this.MDL.x.scale.d3Scale.copy(),this._labels.setScales(this.xScale,this.yScale)}_updateColorScale(){this.cScale=this.MDL.color.scale.d3Scale.copy()}_updateUIStrings(){const{y:e,x:i,size:o,color:l}=this.MDL,{xTitleEl:n,yTitleEl:r,sTitleEl:c,xSubTitleEl:h,ySubTitleEl:d,dataWarningEl:b,xInfoEl:g,yInfoEl:u}=this.DOM,m=this,x=t.Utils.getConceptProps(e,this.localise),p=t.Utils.getConceptProps(i,this.localise),y=t.Utils.getConceptProps(o,this.localise),v=t.Utils.getConceptProps(l,this.localise);this.strings={title:{Y:x.name,X:p.name,S:y.name,C:v.name},title_short:{Y:x.name_short||x.name,X:p.name_short||p.name,S:y.name_short||y.name,C:v.name_short||v.name},subtitle:{Y:this._getSubtitle(x.name,x.name_short||x.name),X:this._getSubtitle(p.name,p.name_short||p.name),S:y.name_short,C:v.name_short},unit:{Y:x.unit||"",X:p.unit||"",S:y.unit||"",C:v.unit||""}},d.selectAll("text").data([0]).join("text"),h.selectAll("text").data([0]).join("text"),r.selectAll("text").data([0]).join("text").on("click",()=>{this.root.findChild({type:"TreeMenu"}).encoding(this.__alias("y")).alignX(this.services.locale.isRTL()?"right":"left").alignY("top").updateView().toggle()}),n.selectAll("text").data([0]).join("text").on("click",()=>{this.root.findChild({type:"TreeMenu"}).encoding(this.__alias("x")).alignX(this.services.locale.isRTL()?"right":"left").alignY("bottom").updateView().toggle()}),c.selectAll("text").data([0]).join("text").attr("text-anchor","end"),t.LegacyUtils.setIcon(b,s).select("svg").attr("width","0px").attr("height","0px"),b.append("text").attr("text-anchor","end").text(this.localise("hints/dataWarning")),t.LegacyUtils.setIcon(u,a).select("svg").attr("width","0px").attr("height","0px"),t.LegacyUtils.setIcon(g,a).select("svg").attr("width","0px").attr("height","0px"),u.on("click",()=>{m.root.findChild({type:"DataNotes"}).pin()}),u.on("mouseover",(function(){const e=this.getBBox(),i=t.LegacyUtils.makeAbsoluteContext(this,this.farthestViewportElement)(e.x-10,e.y+e.height+10),s=m.root.element.node().getBoundingClientRect(),a=m.element.node().getBoundingClientRect();m.root.findChild({type:"DataNotes"}).setEncoding(m.MDL.y).show().setPos(i.x+a.left-s.left,i.y)})),u.on("mouseout",()=>{m.root.findChild({type:"DataNotes"}).hide()}),g.on("click",()=>{m.root.findChild({type:"DataNotes"}).pin()}),g.on("mouseover",(function(){const e=this.getBBox(),i=t.LegacyUtils.makeAbsoluteContext(this,this.farthestViewportElement)(e.x-10,e.y+e.height+10),s=m.root.element.node().getBoundingClientRect(),a=m.element.node().getBoundingClientRect();m.root.findChild({type:"DataNotes"}).setEncoding(m.MDL.x).show().setPos(i.x+a.left-s.left,i.y)})),g.on("mouseout",()=>{m.root.findChild({type:"DataNotes"}).hide()}),b.on("click",()=>{m.root.findChild({type:"DataWarning"}).toggle()}).on("mouseover",()=>{m._updateDoubtOpacity(1)}).on("mouseout",()=>{m._updateDoubtOpacity()})}_getSubtitle(t,e){let i=t.replace(e,"");","===i[0]&&(i=i.slice(1));const s=/^\((.*)\)$|.*/.exec(i.trim());return s[1]||s[0]||""}_updateSize(){this.services.layout.size;const{x:e,y:i}=this.MDL,{graphAll:s,eventArea:a,bubbleContainerCropAll:o,labelsContainerCrop:l,xAxisElContainer:n,xAxisEl:r,yAxisElContainer:c,yAxisEl:h,projectionX:d,projectionY:b,sTitleEl:g,xTitleEl:u,yTitleEl:m,xSubTitleEl:x,ySubTitleEl:p,xAxisGroupsEl:y,xInfoEl:v,yInfoEl:z}=this.DOM,M=this.services.layout.profile;this.profileConstants.maxRadiusPx=Math.max(this.profileConstants.minRadiusPx,this.profileConstants.maxRadiusEm*t.LegacyUtils.hypotenuse(this.elementWidth,this.elementHeight));const _=this.profileConstants.margin,f=this.profileConstants.infoElHeight;this._labels.setCloseCrossHeight(1.2*this.profileConstants.infoElHeight),this._labels.setTooltipFontSize(this.profileConstants.infoElHeight+"px");const S=this.height=this.elementHeight-_.top-_.bottom||0,D=this.width=this.elementWidth-_.left*this.profileConstants.leftMarginRatio-_.right||0;if(s.attr("transform","translate("+_.left*this.profileConstants.leftMarginRatio+","+_.top+")"),this._year.resizeText(D,S),a.attr("width",D).attr("height",Math.max(0,S)),this.yScale.range(this._rangeBump([S,0])),this.xScale.range(this._rangeBump([0,D])),this.yAxis.scale(this.yScale).tickSizeInner(-D).tickSizeOuter(0).tickPadding(6).tickSizeMinor(-D,0).labelerOptions({scaleType:i.scale.type,toolMargin:_,limitMaxTickNumber:6,bump:this.profileConstants.maxRadiusPx/2,viewportLength:S,formatter:this.localise}),this.xAxis.scale(this.xScale).tickSizeInner(-S).tickSizeOuter(0).tickPadding(6).tickSizeMinor(-S,0).labelerOptions({scaleType:e.scale.type,toolMargin:_,bump:this.profileConstants.maxRadiusPx/2,viewportLength:D,formatter:this.localise}),o.attr("width",D).attr("height",Math.max(0,S)),l.attr("width",D).attr("height",Math.max(0,S)),n.attr("width",D+1).attr("height",this.profileConstants.margin.bottom+S).attr("y",-1).attr("x",-1),r.attr("transform","translate(1,"+(1+S)+")"),c.attr("width",this.profileConstants.margin.left+D).attr("height",Math.max(0,S)).attr("x",-this.profileConstants.margin.left),h.attr("transform","translate("+(this.profileConstants.margin.left-1)+",0)"),h.call(this.yAxis),r.call(this.xAxis),d.attr("y1",this.yScale.range()[0]+this.profileConstants.maxRadiusPx/2),b.attr("x2",this.xScale.range()[0]-this.profileConstants.maxRadiusPx/2),this._updateSTitle(),g.attr("transform","translate("+D+",20) rotate(-90)"),"SMALL"!==M)p.select("text").attr("dy",.6*f).text(this.strings.subtitle.Y),x.select("text").attr("dy",.3*-f).text(this.strings.subtitle.X),m.select("text").text(this.strings.title_short.Y+" ").append("tspan").style("font-size",.7*f+"px").text("▼"),u.select("text").text(this.strings.title_short.X+" ").append("tspan").style("font-size",.7*f+"px").text("▼");else{p.select("text").text(""),x.select("text").text("");const t=m.select("text").text(this.strings.title.Y);t.node().getBBox().width>D&&t.text(this.strings.title_short.Y);const e=u.select("text").text(this.strings.title.X);e.node().getBBox().width>D-100&&e.text(this.strings.title_short.X)}const w=this.services.locale.isRTL();if(p.style("font-size",.8*f+"px").attr("transform","translate(0,0) rotate(-90)"),x.style("font-size",.8*f+"px").attr("transform","translate("+D+","+S+")"),m.style("font-size",f+"px").attr("transform","SMALL"!==M?"translate("+(-_.left-this.profileConstants.yAxisTitleBottomMargin)+","+.5*S+") rotate(-90)":"translate("+(w?D:10-this.profileConstants.margin.left)+", -"+this.profileConstants.yAxisTitleBottomMargin+")"),u.style("font-size",f+"px").attr("transform","SMALL"!==M?"translate("+.5*D+","+(S+_.bottom-this.profileConstants.xAxisTitleBottomMargin)+")":"translate("+(w?D:0)+","+(S+_.bottom-this.profileConstants.xAxisTitleBottomMargin)+")"),y.style("font-size",.8*f+"px"),z.select("svg").node()){const e=m.node().getBBox(),s=t.LegacyUtils.transform(m.node()),a=w?e.x+s.translateX-1.4*f:e.x+s.translateX+e.width+.4*f,o=w?s.translateY+1.4*f+.5*e.width:s.translateY-.4*f-.5*e.width,l=i.data.conceptProps;z.classed("vzb-hidden",!l.description&&!l.sourceLink||this.services.layout.projector).select("svg").attr("width",f+"px").attr("height",f+"px"),z.attr("transform","SMALL"!==M?"translate("+(s.translateX-.8*f)+","+o+") rotate(-90)":"translate("+a+","+(s.translateY-.8*f)+")")}if(v.select("svg").node()){const i=u.node().getBBox(),s=t.LegacyUtils.transform(u.node()),a=w?i.x+s.translateX-1.4*f:i.x+s.translateX+i.width+.4*f,o=e.data.conceptProps;v.classed("vzb-hidden",!o.description&&!o.sourceLink||this.services.layout.projector).select("svg").attr("width",f+"px").attr("height",f+"px"),v.attr("transform","translate("+a+","+(s.translateY-.8*f)+")")}this._resizeDataWarning()}_rangeBump(e,i){const s=this.profileConstants.maxRadiusPx/2;if(i=i?-1:1,t.LegacyUtils.isArray(e)&&e.length>1){let t=e[0],a=e[e.length-1];return t<a?(t+=s*i,a-=s*i,t>a&&(t=a=(t+a)/2)):t>a&&(t-=s*i,a+=s*i,t<a&&(t=a=(t+a)/2)),[t,a]}t.LegacyUtils.warn("rangeBump error: input is not an array or empty")}_updateSTitle(t,e){const{sTitleEl:i}=this.DOM,{size:s,color:a}=this.MDL;if(this.profileConstants.hideSTitle&&this.root.ui.dialogs.dialogs.sidebar.indexOf("colors")>-1&&this.root.ui.dialogs.dialogs.sidebar.indexOf("size")>-1)return void i.classed("vzb-invisible",!0);i.classed("vzb-invisible")&&i.classed("vzb-invisible",!1);const o=!s.data.constant,l=!a.data.constant,n=i.select("text").style("font-size",null).text((o?this.localise("buttons/size")+": "+(t||this.strings.title.S):"")+(o&&l?", ":"")+(l?this.localise("buttons/colors")+": "+(e||this.strings.title.C):"")),r=n.node().getBBox().width,c=this.height-30,h=parseInt(n.style("font-size"))*c/r;n.style("font-size",r>c?h+"px":null)}_resizeDataWarning(){const{dataWarningEl:t,xTitleEl:e}=this.DOM,i=t.select("text").style("font-size",null),s=i.node().getBBox().width+3*i.node().getBBox().height,a=this.elementWidth-e.node().getBBox().width-this.profileConstants.infoElHeight,o=parseInt(i.style("font-size"))*a/s;i.style("font-size",s>a?o+"px":null);const l=i.node().getBBox();t.select("svg").attr("width",.75*l.height).attr("height",.75*l.height).attr("x",-l.width-1.2*l.height).attr("y",.65*-l.height),t.classed("vzb-hidden",this.services.layout.projector).attr("transform","translate("+(this.services.locale.isRTL()?l.width+l.height:this.width)+","+(this.height+this.profileConstants.margin.bottom-this.profileConstants.xAxisTitleBottomMargin)+")")}processFrameData(){return this.__dataProcessed=this.model.dataArray}_getTransition(t){return t?d3.transition().duration(t).ease(d3.easeLinear):d3.transition()}_bubblesInteract(){const t=this;return{mouseover(e){t.hoverBubble=!0,t.MDL.highlighted.data.filter.set(e),t._labels.showCloseCross(e,!0)},mouseout(e){t.hoverBubble=!1,t.MDL.highlighted.data.filter.delete(e),t._labels.showCloseCross(e,!1)},click(e){t.draggingNow||e[Symbol.for("trailHeadKey")]||t.model.toggleSelection(e)}}}_updateMarkerSizeLimits(){this.services.layout.size,this.MDL.size.scale.domain,this.MDL.size.scale.extent,this.sScale=this.MDL.size.scale.d3Scale.copy();const{minRadiusPx:e,maxRadiusPx:i}=this.profileConstants,s=this.MDL.size.scale.extent||[0,1];let a=t.LegacyUtils.radiusToArea(Math.max(i*s[0],e)),o=t.LegacyUtils.radiusToArea(Math.max(i*s[1],e)),l=a===o?[a,o]:d3.range(a,o,(o-a)/(this.sScale.domain().length-1)).concat(o);this.sScale.range(l)}_setTooltip(t,e,i,s,a,o){if(t){const a={};o&&(a.valueY=o[this.__alias("y")],a.valueX=o[this.__alias("x")],a.valueS=o.size,a.valueC=o.color,a.valueLST=o.size_label||null,a.labelText=this.__labelWithoutFrame(o,this.localise));const l={};l.labelX0=this.xScale.invert(e),l.labelY0=this.yScale.invert(i),l.scaledS0=s,l.scaledC0=null,this._labels.setTooltip(o,t,l,a)}else this._labels.setTooltip()}_getLabelText(t){return this.KEYS.map(e=>t.label[e]).join(",")}_updateOpacity(t){const e=this.MDL.highlighted.data.filter,i=this.MDL.selected.data.filter;this.__highlightedMarkers=new Map(e.markers),this.__selectedMarkers=new Map(i.markers),this.__someSelected=0!=this.__selectedMarkers.size,this.__someHighlighted=0!=this.__highlightedMarkers.size;const s=t||this.bubbles;s&&s.style("opacity",t=>this._getBubbleOpacity(t,this.ui))}_getBubbleOpacity(t){const e=this.ui;return this.__highlightedMarkers.has(t[Symbol.for("key")])?e.opacityHighlight:t[Symbol.for("trailHeadKey")]?e.opacityRegular:this.__selectedMarkers.has(t[Symbol.for("key")])?e.opacitySelect:this.__someSelected?e.opacitySelectDim:this.__someHighlighted?e.opacityHighlightDim:e.opacityRegular}_updateDoubtOpacity(t){null==t&&(t=this.wScale(this.MDL.frame.value.getUTCFullYear())),this.MDL.selected.data.filter.any()&&(t=1),this.DOM.dataWarningEl.style("opacity",t)}_setBubbleCrown(t,e,i,s,a){const o=this.DOM.bubbleCrown;null!=t?(o.classed("vzb-hidden",!1),o.select(".vzb-crown").attr("cx",t).attr("cy",e).attr("r",i).attr("fill",a?"none":s),o.selectAll(".vzb-crown-glow").attr("cx",t).attr("cy",e).attr("r",i+10).attr("stroke",s)):o.classed("vzb-hidden",!0)}_axisProjections(t){const{projectionX:e,projectionY:i,xAxisEl:s,yAxisEl:a}=this.DOM;if(null!=t){const o=t[this.__alias("y")],l=t[this.__alias("x")],n=t.r;this.ui.whenHovering.showProjectionLineX&&this.xScale(l)>0&&this.xScale(l)<this.width&&this.yScale(o)+n<this.height&&e.style("opacity",1).attr("y2",this.yScale(o)+n).attr("x1",this.xScale(l)).attr("x2",this.xScale(l)),this.ui.whenHovering.showProjectionLineY&&this.yScale(o)>0&&this.yScale(o)<this.height&&this.xScale(l)-n>0&&i.style("opacity",1).attr("y1",this.yScale(o)).attr("y2",this.yScale(o)).attr("x1",this.xScale(l)-n),this.ui.whenHovering.higlightValueX&&s.call(this.xAxis.highlightValue(l)),this.ui.whenHovering.higlightValueY&&a.call(this.yAxis.highlightValue(o))}else e.style("opacity",0),i.style("opacity",0),s.call(this.xAxis.highlightValue("none")),a.call(this.yAxis.highlightValue("none"))}_highlightDataPoints(){const t=this,e=this.MDL.highlighted.data.filter,i=this.MDL.selected.data.filter;this.someHighlighted=e.any();const s=this.MDL.trail.show,a=this.MDL.trail.starts,l=this.MDL.trail.groupDim;if(1===e.markers.size){const n=e.markers.keys().next().value,r=Object.assign(this.model.dataMap.getByObjOrStr(null,n)),c=t.xScale(r[t.__alias("x")]),h=t.yScale(r[t.__alias("y")]),d=r.r,b=null!=r.color?this.cScale(r.color):o;let g=!1;(c+d<0||c-d>this.width||h+d<0||h-d>this.height)&&(g=!0);const u=r[Symbol.for("trailHeadKey")]||r[Symbol.for("key")],m=i.has(u),x=!(a[u]-r[l]),p=!r[Symbol.for("trailHeadKey")];let y="";if(y=m?!s||x||p&&!this.hoverBubble?"":this.localise(r.label[l]):this.__labelWithoutFrame(r),t._labels.highlight(null,!1),t._labels.highlight({[Symbol.for("key")]:u},!0),m){const e=p;t._setBubbleCrown(c,h,d,b,e)}g||t._axisProjections(r),y&&!g&&t._setTooltip(y,c,h,d+3,b,r)}else this._axisProjections(),this._setTooltip(),this._setBubbleCrown(),this._labels.highlight(null,!1)}_blinkSuperHighlighted(){if(!this.MDL.superHighlighted)return;const t=this.MDL.superHighlighted.data.filter;this.bubbles.classed("vzb-super-highlighted",e=>t.has(e))}_selectDataPoints(){const e=this,i=this.MDL.selected.data.filter;t.LegacyUtils.isTouchDevice()?(e.model.clearHighlighted(),e._labels.showCloseCross(null,!1)):e._setTooltip(),e.someSelected=i.any(),e.nonSelectedOpacityZero=!1}_updateLabel(e,i,s,a,l,n){const r=this.MDL.selected.data.filter.markers,c=e[Symbol.for("key")];if(r.has(c)){const r=this.MDL.trail,h={};let d="";if(n&&!r.show&&(l=!0),r.show){const e=r.starts[c];if(e>=this.MDL.frame.value||l){const i=this.model.getDataMapByFrameValue(e).getByObjOrStr(null,c);h.labelText=d=this.__labelAll(i),h.labelX0=i[this.__alias("x")],h.labelY0=i[this.__alias("y")],h.scaledC0=null!=i.color?this.cScale(i.color):o,h.scaledS0=i.size||0===i.size?t.LegacyUtils.areaToRadius(this.sScale(i.size)):null,h.valueS0=i.size,i.hidden=n,this._labels.updateLabel(i,h,h.labelX0,h.labelY0,i.size,i.color,d,i.size_label,a,l)}}else h.labelText=d=this.__labelWithoutFrame(e),h.labelX0=i,h.labelY0=s,h.scaledC0=null!=e.color?this.cScale(e.color):o,h.scaledS0=e.size||0===e.size?t.LegacyUtils.areaToRadius(this.sScale(e.size)):null,h.valueS0=e.size,e.hidden=n,this._labels.updateLabel(e,h,i,s,e.size,e.color,d,e.size_label,a,l)}}_updateLabels(){const e=this.MDL.selected.data.filter,i=this.MDL.trail;for(const s of e.markers.keys()){const e=this._labels.cached[s],a=(i.show?this.model.getDataMapByFrameValue(i.starts[s]):this.model.dataMap).getByObjOrStr(null,s);e.labelText=this[i.show&&this.ui.timeInTrails?"__labelAll":"__labelWithoutFrame"](a),e.labelX0=a[this.__alias("x")],e.labelY0=a[this.__alias("y")],e.scaledC0=null!=a.color?this.cScale(a.color):o,e.scaledS0=a.size||0===a.size?t.LegacyUtils.areaToRadius(this.sScale(a.size)):null,e.valueS0=a.size,e.initTextBBox=null,e.initFontSize=null,this._labels.updateLabel({[Symbol.for("key")]:s},null,null,null,null,null,null,a.size_label)}}__labelWithoutFrame(t){return this.KEYS.map(e=>this.localise(t.label[e])).join(" ")}__labelAll(t){return this.model.data.space.map(e=>this.localise(t.label[e])).join(" ")}__alias(t){return this.state.alias[t]}}r.DEFAULT_UI={showForecastOverlay:!0,opacityHighlight:1,opacitySelect:1,opacityHighlightDim:.1,opacitySelectDim:.3,opacityRegular:.5,timeInBackground:!0,timeInTrails:!0,decorations:{enabled:!0,xAxisGroups:null},superhighlightOnMinimapHover:!0,whenHovering:{showProjectionLineX:!0,showProjectionLineY:!0,higlightValueX:!0,higlightValueY:!0},labels:{removeLabelBox:!0},margin:{left:0,top:0},lockNonSelected:0,datawarning:{doubtDomain:[],doubtRange:[]},numberFormatSIPrefix:!0};const c=e.decorate(r,{MDL:e.computed});class h extends t.BaseComponent{constructor(i){const s=i.splash(i.model.stores.markers.get("bubble"));i.name="bubblechart",i.subcomponents=[{type:t.Repeater,placeholder:".vzb-repeater",model:s,options:{COMP_TYPE:c,COMP_CSSNAME:"vzb-bubblechart"},name:"chart"},{type:t.TimeSlider,placeholder:".vzb-timeslider",model:s,name:"time-slider"},{type:t.SteppedSlider,placeholder:".vzb-speedslider",model:s,name:"speed-slider"},{type:t.TreeMenu,placeholder:".vzb-treemenu",model:s,name:"tree-menu"},{type:t.DataWarning,placeholder:".vzb-datawarning",model:s},{type:t.DataNotes,placeholder:".vzb-datanotes",model:s},{type:t.Dialogs,placeholder:".vzb-dialogs",model:s,name:"dialogs"},{type:t.ButtonList,placeholder:".vzb-buttonlist",model:s,name:"buttons"}],i.template='\n <div class="vzb-repeater vzb-bubblechart">\n </div>\n <div class="vzb-animationcontrols">\n <div class="vzb-timeslider"></div>\n <div class="vzb-speedslider"></div>\n </div>\n <div class="vzb-sidebar">\n <div class="vzb-dialogs"></div>\n <div class="vzb-buttonlist"></div>\n </div>\n <div class="vzb-treemenu"></div>\n <div class="vzb-datawarning"></div>\n <div class="vzb-datanotes"></div>\n ',i.services={locale:new t.LocaleService(i.locale),layout:new t.LayoutService({placeholder:i.placeholder})},i.model.config.markers.bubble.data.locale=e.observable({get id(){return i.services.locale.id}}),super(i)}}return h.DEFAULT_UI={chart:{viewWH:{width:0,height:0},timeInBackground:!0,timeInTrails:!0,decorations:!0,superhighlightOnMinimapHover:!0,numberFormatSIPrefix:!0,showForecast:!1,pauseBeforeForecast:!0,showForecastOverlay:!1,show_ticks:!0,presentation:!1,panWithArrow:!1,adaptMinMaxZoom:!1,cursorMode:"arrow",zoomOnScrolling:!0,opacityHighlight:1,opacitySelect:1,opacityHighlightDim:.1,opacitySelectDim:.3,opacityRegular:.5,labels:{removeLabelBox:!1}}},h})); | ||
//# sourceMappingURL=bubblechart.js.map |
{ | ||
"name": "vizabi-bubblechart", | ||
"version": "3.0.3", | ||
"version": "3.0.4", | ||
"description": "Gapminder's bubble chart data visualisation tool. See it in action on gapminder.org/tools", | ||
@@ -5,0 +5,0 @@ "scripts": { |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
293351