vizabi-barrankchart - npm Package Compare versions

Comparing version 3.0.3 to 3.0.4

build/barrankchart.js

@@ -1,3 +0,3 @@
-// https://github.com/kuguarpwnz/vizabi-tool-bundler#readme v1.0.0 Copyright 2020 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).BarRankChart=e(t.VizabiSharedComponents,t.mobx)}(this,(function(t,e){"use strict";const{ICON_WARN:a,ICON_QUESTION:i}=t.Icons,s="rgb(51, 51, 51)",r="rgb(253, 253, 253)",n={SMALL:{margin:{top:60,right:20,left:5,bottom:20},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:16,infoElMargin:5,barHeight:18,barMargin:3,barLabelMargin:5,barValueMargin:5,barRankMargin:6,scrollMargin:25,longestLabelLength:12},MEDIUM:{margin:{top:60,right:25,left:5,bottom:20},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:16,infoElMargin:5,barHeight:21,barMargin:3,barLabelMargin:5,barValueMargin:5,barRankMargin:10,scrollMargin:30,longestLabelLength:12},LARGE:{margin:{top:60,right:30,left:5,bottom:20},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:16,infoElMargin:5,barHeight:28,barMargin:4,barLabelMargin:5,barValueMargin:5,barRankMargin:10,scrollMargin:30,longestLabelLength:12}},o={MEDIUM:{margin:{top:60,right:30,left:10,bottom:40},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:25,infoElMargin:10,barHeight:25,barMargin:6},LARGE:{margin:{top:60,right:35,left:10,bottom:40},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:16,infoElMargin:10,barHeight:30,barMargin:6}};class l extends t.BaseComponent{constructor(t){t.template='\n      <svg class="vzb-br-header">\n        <g class="vzb-br-title">\n          <text></text>\n        </g>\n        <g class="vzb-br-total">\n          <text></text>\n        </g>\n        <g class="vzb-br-axis-info vzb-noexport"></g>\n      </svg>\n\n      <div class="vzb-br-barsviewport vzb-dialog-scrollable">\n        <svg class="vzb-br-bars-svg vzb-export">\n          <g class="vzb-br-bars"></g>\n          <rect class="vzb-br-forecastoverlay vzb-hidden" x="0" y="0" width="100%" height="100%" fill="url(#vzb-br-pattern-lines)" pointer-events=\'none\'></rect>\n        </svg>\n      </div>\n\n      <svg class="vzb-data-warning-svg">\n        <g class="vzb-data-warning vzb-noexport">\n          <svg></svg>\n          <text></text>\n        </g>\n        <g class="vzb-data-warning vzb-data-warning-missed-positions">\n          <text></text>\n        </g>\n      </svg>\n\n      <svg class="vzb-br-tooltip-svg vzb-hidden">\n        <g class="vzb-br-tooltip vzb-hidden">\n          <rect class="vzb-tooltip-border"></rect>\n          <text class="vzb-tooltip-text"></text>\n        </g>\n      </svg>\n      \n      <svg>\n        <defs>\n            <pattern id="vzb-br-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    ',super(t)}setup(){this.state={showForecastOverlay:!1,opacityHighlightDim:.1,opacitySelectDim:.3,opacityRegular:1,datawarning:{doubtDomain:[],doubtRange:[]}},this.DOM={header:this.element.select(".vzb-br-header"),title:this.element.select(".vzb-br-title"),total:this.element.select(".vzb-br-total"),info:this.element.select(".vzb-br-axis-info"),barViewport:this.element.select(".vzb-br-barsviewport"),barSvg:this.element.select(".vzb-br-bars-svg"),barContainer:this.element.select(".vzb-br-bars"),forecastOverlay:this.element.select(".vzb-br-forecastoverlay"),footer:this.element.select(".vzb-data-warning-svg"),dataWarning:this.element.select(".vzb-data-warning"),missedPositionsWarning:this.element.select(".vzb-data-warning-missed-positions"),tooltipSvg:this.element.select(".vzb-br-tooltip-svg"),tooltip:this.element.select(".vzb-br-tooltip")},this.wScale=d3.scaleLinear().domain(this.state.datawarning.doubtDomain).range(this.state.datawarning.doubtRange),this._cache={}}draw(){this.MDL={frame:this.model.encoding.get("frame"),selected:this.model.encoding.get("selected").data.filter,highlighted:this.model.encoding.get("highlighted").data.filter,x:this.model.encoding.get("x"),color:this.model.encoding.get("color"),label:this.model.encoding.get("label")},this.localise=this.services.locale.auto(),this.xScale=this.MDL.x.scale.d3Scale.copy(),this.cScale=this.MDL.color.scale.d3Scale,this.addReaction(this._drawForecastOverlay),this._updateLayoutProfile()||(this.addReaction(this._getDuration),this.addReaction(this._drawHeader),this.addReaction(this._drawInfoEl),this.addReaction(this._drawFooter),this.addReaction(this._getWidestLabelWidth),this.addReaction(this._drawData),this.addReaction(this._updateOpacity),this.addReaction(this._resizeSvg),this.addReaction(this._scroll),this.addReaction(this._drawColors),this.addReaction(this._updateDataWarning),this.addReaction(this._updateMissedPositionWarning))}_getDuration(){return this.MDL.frame?(this.frameValue_1=this.frameValue,this.frameValue=this.MDL.frame.value,this.__duration=this.MDL.frame.playing&&this.frameValue-this.frameValue_1>0?this.MDL.frame.speed:0):0}_drawForecastOverlay(){this.DOM.forecastOverlay.classed("vzb-hidden",!this.MDL.frame.endBeforeForecast||!this.state.showForecastOverlay||this.MDL.frame.value<=this.MDL.frame.endBeforeForecast)}_updateLayoutProfile(){if(this.services.layout.width,this.services.layout.height,this.profileConstants=this.services.layout.getProfileConstants(n,o),this.height=this.element.node().clientHeight||0,this.width=this.element.node().clientWidth||0,!this.height||!this.width)return t.LegacyUtils.warn("Chart _updateProfile() abort: container is too little or has display:none")}_drawHeader(){const{margin:t,headerMargin:e,infoElHeight:a,infoElMargin:i}=this.profileConstants;this.services.layout.width,this.services.layout.height,this.DOM.header.attr("height",t.top);const s=this.DOM.title,{name:r,unit:n}=this.MDL.x.data.conceptProps,o=s.select("text");if(n){o.text(`${r}, ${n}`),e.left+s.node().getBBox().width+i+a>this.width-e.right&&o.text(r)}else o.text(r);const l=s.node().getBBox(),h=e.left,d=e.top+l.height;s.attr("transform",`translate(${h}, ${d})`);const c=this.DOM.info;c.select("svg").attr("width",`${a}px`).attr("height",`${a}px`);const g=h+s.node().getBBox().width+i,b=e.top+a/4;c.attr("transform",`translate(${g}, ${b})`);const m=this.DOM.total;this.__duration?m.select("text").transition("text").delay(this.__duration).text(this.localise(this.MDL.frame.value)):m.select("text").interrupt().text(this.localise(this.MDL.frame.value)),m.classed("vzb-hidden","LARGE"!==this.services.layout.profile);const p=m.node().getBBox(),v=this.width-e.right-p.width,u=e.top+p.height;m.attr("transform",`translate(${v}, ${u})`).classed("vzb-transparent",l.width+p.width+10>this.width),this.DOM.title.on("click",()=>this.root.findChild({type:"TreeMenu"}).encoding("x").alignX("left").alignY("top").updateView().toggle())}_drawInfoEl(){const e=this.root.findChild({type:"DataNotes"}),a=this.MDL.x.data.conceptProps,s=this.profileConstants.infoElHeight,r=this;this.DOM.info.on("click",()=>{e.pin()}).on("mouseover",(function(){const a=this.getBBox(),i=t.LegacyUtils.makeAbsoluteContext(this,this.farthestViewportElement)(a.x-10,a.y+a.height+10);e.setEncoding(r.MDL.x).show().setPos(i.x,i.y)})).on("mouseout",()=>{e.hide()}).html(i).select("svg").attr("width",s+"px").attr("height",s+"px").classed("vzb-hidden",!a.description&&!a.sourceLink)}_drawFooter(){const{margin:t}=this.profileConstants;this.DOM.footer.style("height",`${t.bottom}px`);const e=this.DOM.dataWarning.select("text").node().getBBox();this.DOM.dataWarning.attr("transform",`translate(${this.width-t.right-e.width}, ${e.height})`),this.DOM.dataWarning.select("svg").attr("width",e.height).attr("height",e.height).attr("x",-e.height-5).attr("y",1-e.height),this.DOM.dataWarning.html(a).select("svg").attr("width",0).attr("height",0),this.DOM.dataWarning.append("text").text(this.localise("hints/dataWarning")),this.DOM.dataWarning.on("click",()=>this.root.findChildByName("gapminder-datawarning").toggle()).on("mouseover",()=>this._updateDataWarning(1)).on("mouseout",()=>this._updateDataWarning()),this.DOM.missedPositionsWarning.attr("transform",`translate(${this.width-t.right-e.width-3*e.height}, ${e.height})`),this.DOM.missedPositionsWarning.select("text").attr("data-text",this.localise("hints/barrank/missedPositionsTooltip")).text(this.localise("hints/barrank/missedPositionsWarning"))}_updateMissedPositionWarning(){this.DOM.missedPositionsWarning.classed("vzb-hidden",0)}_updateDataWarning(t){this.DOM.dataWarning.style("opacity",1)}_getLabelText(t){const e=this.profileConstants.longestLabelLength;let a="";return a=t.label?"string"==typeof t.label?t.label:Object.values(t.label).join(", "):t[Symbol.for("key")],a.length>=e&&(a=a.substring(0,e-1)+"…"),a}_processFrameData(){return this.nullValuesCount=0,this.__dataProcessed=this.model.dataArray.concat().sort((t,e)=>d3.descending(t.x,e.x)).reduce((t,e,a)=>{const i=e[Symbol.for("key")],s=this._cache[i],r=e.x,n=r||0===r;n||this.nullValuesCount++;const o=n?this.localise(r):this.localise("hints/nodata"),l=this._getLabelText(e),h=a&&t[a-1].formattedValue===o?t[a-1].rank:a+1;return s?t.push(Object.assign(s,{value:r,formattedValue:o,formattedLabel:l,index:a,rank:h,changedFormattedValue:o!==s.formattedValue,changedFormattedLabel:l!==s.formattedLabel,changedValue:r!==s.value,changedIndex:a!==s.index,isNew:!1})):t.push(this._cache[i]=Object.assign({},e,{value:r,formattedValue:o,formattedLabel:l,index:a,rank:h,changedFormattedValue:!0,changedFormattedLabel:!0,changedValue:!0,changedIndex:!0,isNew:!0})),t},[])}_drawData(){this.sizes=this.services.layout.width+this.services.layout.height;const t=this.sizes!==this.sizes_1;this.sizes_1=this.services.layout.width+this.services.layout.height,this._processFrameData(),this._createAndDeleteBars();const{barLabelMargin:e,barValueMargin:a,barRankMargin:i,scrollMargin:s,margin:r}=this.profileConstants;let n=this.MDL.x.scale.domain;n={min:d3.min(n),max:d3.max(n)};const o=Math.abs(n.max)>=Math.abs(n.min),l=o?n.min<0:n.max>0,h=(this.width-r.right-r.left-e-s-(l?0:this.__widestLabelWidth))/(l?2:1);this.xScale.range([0,h]),"log"!==this.MDL.x.scale.type&&this.xScale.domain([0,Math.max(...this.xScale.domain())]);const d=l?h:this.__widestLabelWidth,c=t=>o?t>=0:t>0,g=t=>this.__duration?t.transition().duration(this.__duration).ease(d3.easeLinear):t.interrupt(),b=t=>c(t)?"start":"end";this.DOM.barContainer.attr("transform",`translate(${d+(o?r.left:r.right)+e}, 0)`),this.__dataProcessed.forEach(s=>{const{value:r}=s,{barHeight:n}=this.profileConstants,o=Math.max(0,r&&this.xScale(Math.abs(r)))||0;(s.changedValue||t)&&s.DOM.label.attr("x",(t=>c(t)?-e:e)(r)).attr("y",n/2).attr("text-anchor",(t=>c(t)?"end":"start")(r)),s.changedFormattedLabel&&s.DOM.label.text(s.formattedLabel),t&&s.DOM.rect.attr("rx",n/4).attr("ry",n/4).attr("height",n),(s.changedValue||t)&&s.DOM.value.attr("x",(t=>c(t)?a:-a)(r)).attr("y",n/2).attr("text-anchor",b(r)),s.changedFormattedValue&&(s.DOM.value.text(s.formattedValue),s.valueWidth=a+s.DOM.value.node().getBBox().width),(s.changedIndex||s.changedValue||t)&&s.DOM.rank.text(r||0===r?"#"+s.rank:"").attr("y",n/2).attr("text-anchor",b(r)),(s.changedIndex||t)&&g(s.DOM.group).attr("transform",`translate(0, ${this._getBarPosition(s.index)})`),(s.changedValue||t)&&g(s.DOM.rect).attr("width",o).attr("x",r<0?-o:0),(s.changedValue||t)&&g(s.DOM.rank).attr("x",(Math.max(o,s.valueWidth||0)+i)*(c(r)?1:-1))})}_createAndDeleteBars(){const t=this,e=this.DOM.barContainer.selectAll(".vzb-br-bar").data(this.__dataProcessed,t=>t[Symbol.for("key")]);e.exit().remove(),e.enter().append("g").each((function(e){const a=e[Symbol.for("key")],i=d3.select(this).attr("class","vzb-br-bar").attr("id",`vzb-br-bar-${a}-${t.id}`).classed("vzb-selected",()=>t.MDL.selected.has(e)).on("mousemove",()=>t.MDL.highlighted.set(e)).on("mouseout",()=>t.MDL.highlighted.delete(e)).on("click",()=>t.MDL.selected.toggle(e)),s=i.append("text").attr("class","vzb-br-label").attr("dy",".325em"),r=i.append("rect").attr("stroke","transparent"),n=i.append("text").attr("class","vzb-br-value").attr("dy",".325em"),o=i.append("text").attr("class","vzb-br-rank").attr("dy",".325em");Object.assign(e,{DOM:{group:i,label:s,rect:r,value:n,rank:o}})}))}_getWidestLabelWidth(){this.services.layout.width,this.services.layout.height;const t="N".repeat(this.profileConstants.longestLabelLength),e=this.DOM.barContainer.append("g").attr("class","vzb-br-bar vzb-br-probe vzb-hidden"),a=e.append("text").attr("class","vzb-br-label").text(t).node().getBBox().width;return e.remove(),this.__widestLabelWidth=a}_getBarPosition(t){return(this.profileConstants.barHeight+this.profileConstants.barMargin)*t}_resizeSvg(){const{margin:t,barHeight:e,barMargin:a}=this.profileConstants;this.DOM.barSvg.attr("height",`${(e+a)*this.__dataProcessed.length}px`)}_scroll(){const t=this.DOM.barContainer.select(".vzb-selected");if(!t.empty()){const e=t.datum(),a=this._getBarPosition(e.index),{margin:i}=this.profileConstants,s=a-(this.height-i.top-i.bottom+this.profileConstants.barHeight)/2;this.DOM.barViewport.transition().duration(this.__duration).tween("scrollfor"+e.entity,this._scrollTopTween(s))}}_scrollTopTween(t){return function(){const e=this,a=d3.interpolateNumber(this.scrollTop,t);return function(t){e.scrollTop=a(t)}}}_drawColors(){const t=this;this.__dataProcessed.forEach(e=>{const a=e.color,i=a||0===a,n=i?t._getColor(a):r,o=i?"transparent":s,l=i?this._getDarkerColor(e.color):s;e.DOM.rect.style("fill",n).style("stroke",o),e.DOM.value.style("fill",l),e.DOM.label.style("fill",l),e.DOM.rank.style("fill",l)})}_getColor(t){return d3.rgb(this.cScale(t))}_getDarkerColor(t){return this._getColor(t).darker(2)}_updateOpacity(){const t=this,{opacityHighlightDim:e,opacitySelectDim:a,opacityRegular:i}=this.state,s=this.MDL.highlighted.markers.size>0,r=this.MDL.selected.markers.size>0;this.DOM.barContainer.selectAll(".vzb-br-bar").style("opacity",n=>t.MDL.highlighted.has(n)?i:t.MDL.selected.has(n)?i:r?a:s?e:i)}}class h extends t.BaseComponent{constructor(a){const i=a.model.stores.markers.get("bar");a.name="barrankchart",a.subcomponents=[{type:l,placeholder:".vzb-barrankchart",model:i,name:"chart"},{type:t.TimeSlider,placeholder:".vzb-timeslider",name:"time-slider",model:i},{type:t.SteppedSlider,placeholder:".vzb-speedslider",name:"speed-slider",model:i},{type:t.TreeMenu,placeholder:".vzb-treemenu",name:"tree-menu",model:i},{type:t.DataNotes,placeholder:".vzb-datanotes",model:i},{type:t.Dialogs,placeholder:".vzb-dialogs",model:i,name:"dialogs"},{type:t.ButtonList,placeholder:".vzb-buttonlist",name:"buttons",model:i}],a.template='\n      <div class="vzb-barrankchart"></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-datanotes"></div>\n    ',a.services={locale:new t.LocaleService(a.locale),layout:new t.LayoutService({placeholder:a.placeholder})},a.model.config.markers.bar.data.locale=e.observable({get id(){return a.services.locale.id}}),super(a)}}return h.DEFAULT_UI={chart:{opacitySelectDim:.3,opacityRegular:.5}},h}));
+// 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).BarRankChart=e(t.VizabiSharedComponents,t.mobx)}(this,(function(t,e){"use strict";const{ICON_WARN:a,ICON_QUESTION:i}=t.Icons,s="rgb(51, 51, 51)",r="rgb(253, 253, 253)",n={SMALL:{margin:{top:60,right:20,left:5,bottom:20},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:16,infoElMargin:5,barHeight:18,barMargin:3,barLabelMargin:5,barValueMargin:5,barRankMargin:6,scrollMargin:25,longestLabelLength:12},MEDIUM:{margin:{top:60,right:25,left:5,bottom:20},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:16,infoElMargin:5,barHeight:21,barMargin:3,barLabelMargin:5,barValueMargin:5,barRankMargin:10,scrollMargin:30,longestLabelLength:12},LARGE:{margin:{top:60,right:30,left:5,bottom:20},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:16,infoElMargin:5,barHeight:28,barMargin:4,barLabelMargin:5,barValueMargin:5,barRankMargin:10,scrollMargin:30,longestLabelLength:12}},o={MEDIUM:{margin:{top:60,right:30,left:10,bottom:40},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:25,infoElMargin:10,barHeight:25,barMargin:6},LARGE:{margin:{top:60,right:35,left:10,bottom:40},headerMargin:{top:10,right:20,bottom:20,left:20},infoElHeight:16,infoElMargin:10,barHeight:30,barMargin:6}};class l extends t.BaseComponent{constructor(t){t.template='\n      <svg class="vzb-br-header">\n        <g class="vzb-br-title">\n          <text></text>\n        </g>\n        <g class="vzb-br-total">\n          <text></text>\n        </g>\n        <g class="vzb-br-axis-info vzb-noexport"></g>\n      </svg>\n\n      <div class="vzb-br-barsviewport vzb-dialog-scrollable">\n        <svg class="vzb-br-bars-svg vzb-export">\n          <g class="vzb-br-bars"></g>\n          <rect class="vzb-br-forecastoverlay vzb-hidden" x="0" y="0" width="100%" height="100%" fill="url(#vzb-br-pattern-lines)" pointer-events=\'none\'></rect>\n        </svg>\n      </div>\n\n      <svg class="vzb-data-warning-svg">\n        <g class="vzb-data-warning vzb-noexport">\n          <svg></svg>\n          <text></text>\n        </g>\n        <g class="vzb-data-warning vzb-data-warning-missed-positions">\n          <text></text>\n        </g>\n      </svg>\n\n      <svg class="vzb-br-tooltip-svg vzb-hidden">\n        <g class="vzb-br-tooltip vzb-hidden">\n          <rect class="vzb-tooltip-border"></rect>\n          <text class="vzb-tooltip-text"></text>\n        </g>\n      </svg>\n      \n      <svg>\n        <defs>\n            <pattern id="vzb-br-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    ',super(t)}setup(){this.state={showForecastOverlay:!1,opacityHighlightDim:.1,opacitySelectDim:.3,opacityRegular:1,datawarning:{doubtDomain:[],doubtRange:[]}},this.DOM={header:this.element.select(".vzb-br-header"),title:this.element.select(".vzb-br-title"),total:this.element.select(".vzb-br-total"),info:this.element.select(".vzb-br-axis-info"),barViewport:this.element.select(".vzb-br-barsviewport"),barSvg:this.element.select(".vzb-br-bars-svg"),barContainer:this.element.select(".vzb-br-bars"),forecastOverlay:this.element.select(".vzb-br-forecastoverlay"),footer:this.element.select(".vzb-data-warning-svg"),dataWarning:this.element.select(".vzb-data-warning"),missedPositionsWarning:this.element.select(".vzb-data-warning-missed-positions"),tooltipSvg:this.element.select(".vzb-br-tooltip-svg"),tooltip:this.element.select(".vzb-br-tooltip")},this.wScale=d3.scaleLinear().domain(this.state.datawarning.doubtDomain).range(this.state.datawarning.doubtRange),this._cache={}}draw(){this.MDL={frame:this.model.encoding.get("frame"),selected:this.model.encoding.get("selected").data.filter,highlighted:this.model.encoding.get("highlighted").data.filter,x:this.model.encoding.get("x"),color:this.model.encoding.get("color"),label:this.model.encoding.get("label")},this.localise=this.services.locale.auto(),this.xScale=this.MDL.x.scale.d3Scale.copy(),this.cScale=this.MDL.color.scale.d3Scale,this.addReaction(this._drawForecastOverlay),this._updateLayoutProfile()||(this.addReaction(this._getDuration),this.addReaction(this._drawHeader),this.addReaction(this._drawInfoEl),this.addReaction(this._drawFooter),this.addReaction(this._estimateLabelAndValueWidth),this.addReaction(this._drawData),this.addReaction(this._updateOpacity),this.addReaction(this._resizeSvg),this.addReaction(this._scroll),this.addReaction(this._drawColors),this.addReaction(this._updateDataWarning),this.addReaction(this._updateMissedPositionWarning))}_getDuration(){return this.MDL.frame?(this.frameValue_1=this.frameValue,this.frameValue=this.MDL.frame.value,this.__duration=this.MDL.frame.playing&&this.frameValue-this.frameValue_1>0?this.MDL.frame.speed:0):0}_drawForecastOverlay(){this.DOM.forecastOverlay.classed("vzb-hidden",!this.MDL.frame.endBeforeForecast||!this.state.showForecastOverlay||this.MDL.frame.value<=this.MDL.frame.endBeforeForecast)}_updateLayoutProfile(){if(this.services.layout.width,this.services.layout.height,this.profileConstants=this.services.layout.getProfileConstants(n,o),this.height=this.element.node().clientHeight||0,this.width=this.element.node().clientWidth||0,!this.height||!this.width)return t.LegacyUtils.warn("Chart _updateProfile() abort: container is too little or has display:none")}_drawHeader(){const{margin:t,headerMargin:e,infoElHeight:a,infoElMargin:i}=this.profileConstants;this.services.layout.width,this.services.layout.height,this.DOM.header.attr("height",t.top);const s=this.DOM.title,{name:r,unit:n}=this.MDL.x.data.conceptProps,o=s.select("text");if(n){o.text(`${r}, ${n}`),e.left+s.node().getBBox().width+i+a>this.width-e.right&&o.text(r)}else o.text(r);const l=s.node().getBBox(),h=e.left,d=e.top+l.height;s.attr("transform",`translate(${h}, ${d})`);const c=this.DOM.info;c.select("svg").attr("width",`${a}px`).attr("height",`${a}px`);const g=h+s.node().getBBox().width+i,b=e.top+a/4;c.attr("transform",`translate(${g}, ${b})`);const m=this.DOM.total;this.__duration?m.select("text").transition("text").delay(this.__duration).text(this.localise(this.MDL.frame.value)):m.select("text").interrupt().text(this.localise(this.MDL.frame.value)),m.classed("vzb-hidden","LARGE"!==this.services.layout.profile);const p=m.node().getBBox(),v=this.width-e.right-p.width,u=e.top+p.height;m.attr("transform",`translate(${v}, ${u})`).classed("vzb-transparent",l.width+p.width+10>this.width),this.DOM.title.on("click",()=>this.root.findChild({type:"TreeMenu"}).encoding("x").alignX("left").alignY("top").updateView().toggle())}_drawInfoEl(){const e=this.root.findChild({type:"DataNotes"}),a=this.MDL.x.data.conceptProps,s=this.profileConstants.infoElHeight,r=this;this.DOM.info.on("click",()=>{e.pin()}).on("mouseover",(function(){const a=this.getBBox(),i=t.LegacyUtils.makeAbsoluteContext(this,this.farthestViewportElement)(a.x-10,a.y+a.height+10);e.setEncoding(r.MDL.x).show().setPos(i.x,i.y)})).on("mouseout",()=>{e.hide()}).html(i).select("svg").attr("width",s+"px").attr("height",s+"px").classed("vzb-hidden",!a.description&&!a.sourceLink)}_drawFooter(){const{margin:t}=this.profileConstants;this.DOM.footer.style("height",`${t.bottom}px`);const e=this.DOM.dataWarning.select("text").node().getBBox();this.DOM.dataWarning.attr("transform",`translate(${this.width-t.right-e.width}, ${e.height})`),this.DOM.dataWarning.select("svg").attr("width",e.height).attr("height",e.height).attr("x",-e.height-5).attr("y",1-e.height),this.DOM.dataWarning.html(a).select("svg").attr("width",0).attr("height",0),this.DOM.dataWarning.append("text").text(this.localise("hints/dataWarning")),this.DOM.dataWarning.on("click",()=>this.root.findChildByName("gapminder-datawarning").toggle()).on("mouseover",()=>this._updateDataWarning(1)).on("mouseout",()=>this._updateDataWarning()),this.DOM.missedPositionsWarning.attr("transform",`translate(${this.width-t.right-e.width-3*e.height}, ${e.height})`),this.DOM.missedPositionsWarning.select("text").attr("data-text",this.localise("hints/barrank/missedPositionsTooltip")).text(this.localise("hints/barrank/missedPositionsWarning"))}_updateMissedPositionWarning(){this.DOM.missedPositionsWarning.classed("vzb-hidden",0)}_updateDataWarning(t){this.DOM.dataWarning.style("opacity",1)}_getLabelText(t){const e=this.profileConstants.longestLabelLength;let a="";return a=t.label?"string"==typeof t.label?t.label:Object.values(t.label).join(", "):t[Symbol.for("key")],a.length>=e&&(a=a.substring(0,e-1)+"…"),a}_processFrameData(){return this.nullValuesCount=0,this.__dataProcessed=this.model.dataArray.concat().sort((t,e)=>d3.descending(t.x,e.x)).reduce((t,e,a)=>{const i=e[Symbol.for("key")],s=this._cache[i],r=e.x,n=r||0===r;n||this.nullValuesCount++;const o=n?this.localise(r):this.localise("hints/nodata"),l=this._getLabelText(e),h=a&&t[a-1].formattedValue===o?t[a-1].rank:a+1;return s?t.push(Object.assign(s,{value:r,formattedValue:o,formattedLabel:l,index:a,rank:h,changedFormattedValue:o!==s.formattedValue,changedFormattedLabel:l!==s.formattedLabel,changedValue:r!==s.value,changedIndex:a!==s.index,isNew:!1})):t.push(this._cache[i]=Object.assign({},e,{value:r,formattedValue:o,formattedLabel:l,index:a,rank:h,changedFormattedValue:!0,changedFormattedLabel:!0,changedValue:!0,changedIndex:!0,isNew:!0})),t},[])}_drawData(){this.sizes=this.services.layout.width+this.services.layout.height;const t=this.sizes!==this.sizes_1;this.sizes_1=this.services.layout.width+this.services.layout.height,this._processFrameData(),this._createAndDeleteBars();const{barLabelMargin:e,barValueMargin:a,barRankMargin:i,scrollMargin:s,margin:r,longestLabelLength:n}=this.profileConstants;let o=this.MDL.x.scale.domain;o={min:d3.min(o),max:d3.max(o)};const l=Math.abs(o.max)>=Math.abs(o.min),h=l?o.min<0:o.max>0,d=this.__labelCharWidth*n,c=(this.width-r.right-r.left-e-s-(h?0:d))/(h?2:1);this.xScale.range([0,c]),"log"!==this.MDL.x.scale.type&&this.xScale.domain([0,Math.max(...this.xScale.domain())]);const g=h?c:d,b=t=>l?t>=0:t>0,m=t=>this.__duration?t.transition().duration(this.__duration).ease(d3.easeLinear):t.interrupt(),p=t=>b(t)?"start":"end";this.DOM.barContainer.attr("transform",`translate(${g+(l?r.left:r.right)+e}, 0)`),this.__dataProcessed.forEach(s=>{const{value:r}=s,{barHeight:n}=this.profileConstants,o=Math.max(0,r&&this.xScale(Math.abs(r)))||0;(s.changedValue||t)&&s.DOM.label.attr("x",(t=>b(t)?-e:e)(r)).attr("y",n/2).attr("text-anchor",(t=>b(t)?"end":"start")(r)),s.changedFormattedLabel&&s.DOM.label.text(s.formattedLabel),t&&s.DOM.rect.attr("rx",n/4).attr("ry",n/4).attr("height",n),(s.changedValue||t)&&s.DOM.value.attr("x",(t=>b(t)?a:-a)(r)).attr("y",n/2).attr("text-anchor",p(r)),s.changedFormattedValue&&(s.DOM.value.text(s.formattedValue),s.valueWidth=a+s.formattedValue.length*this.__valueCharWidth),(s.changedIndex||s.changedValue||t)&&s.DOM.rank.text(r||0===r?"#"+s.rank:"").attr("y",n/2).attr("text-anchor",p(r)),(s.changedIndex||t)&&m(s.DOM.group).attr("transform",`translate(0, ${this._getBarPosition(s.index)})`),(s.changedValue||t)&&m(s.DOM.rect).attr("width",o).attr("x",r<0?-o:0),(s.changedValue||t)&&m(s.DOM.rank).attr("x",(Math.max(o,s.valueWidth||0)+i)*(b(r)?1:-1))})}_createAndDeleteBars(){const t=this,e=this.DOM.barContainer.selectAll(".vzb-br-bar").data(this.__dataProcessed,t=>t[Symbol.for("key")]);e.exit().remove(),e.enter().append("g").each((function(e){const a=e[Symbol.for("key")],i=d3.select(this).attr("class","vzb-br-bar").attr("id",`vzb-br-bar-${a}-${t.id}`).classed("vzb-selected",()=>t.MDL.selected.has(e)).on("mousemove",()=>t.MDL.highlighted.set(e)).on("mouseout",()=>t.MDL.highlighted.delete(e)).on("click",()=>t.MDL.selected.toggle(e)),s=i.append("text").attr("class","vzb-br-label").attr("dy",".325em"),r=i.append("rect").attr("stroke","transparent"),n=i.append("text").attr("class","vzb-br-value").attr("dy",".325em"),o=i.append("text").attr("class","vzb-br-rank").attr("dy",".325em");Object.assign(e,{DOM:{group:i,label:s,rect:r,value:n,rank:o}})}))}_estimateLabelAndValueWidth(){this.services.layout.size;const t=this.DOM.barContainer.append("g").attr("class","vzb-br-bar vzb-br-probe vzb-hidden");this.__labelCharWidth=t.append("text").attr("class","vzb-br-label").text("0").node().getBBox().width,this.__valueCharWidth=t.append("text").attr("class","vzb-br-value").text("~").node().getBBox().width,t.remove()}_getBarPosition(t){return(this.profileConstants.barHeight+this.profileConstants.barMargin)*t}_resizeSvg(){const{margin:t,barHeight:e,barMargin:a}=this.profileConstants;this.DOM.barSvg.attr("height",`${(e+a)*this.__dataProcessed.length}px`)}_scroll(){const t=this.DOM.barContainer.select(".vzb-selected");if(!t.empty()){const e=t.datum(),a=this._getBarPosition(e.index),{margin:i}=this.profileConstants,s=a-(this.height-i.top-i.bottom+this.profileConstants.barHeight)/2;this.DOM.barViewport.transition().duration(this.__duration).tween("scrollfor"+e.entity,this._scrollTopTween(s))}}_scrollTopTween(t){return function(){const e=this,a=d3.interpolateNumber(this.scrollTop,t);return function(t){e.scrollTop=a(t)}}}_drawColors(){const t=this;this.__dataProcessed.forEach(e=>{const a=e.color,i=a||0===a,n=i?t._getColor(a):r,o=i?"transparent":s,l=i?this._getDarkerColor(e.color):s;e.DOM.rect.style("fill",n).style("stroke",o),e.DOM.value.style("fill",l),e.DOM.label.style("fill",l),e.DOM.rank.style("fill",l)})}_getColor(t){return d3.rgb(this.cScale(t))}_getDarkerColor(t){return this._getColor(t).darker(2)}_updateOpacity(){const t=this,{opacityHighlightDim:e,opacitySelectDim:a,opacityRegular:i}=this.state,s=this.MDL.highlighted.markers.size>0,r=this.MDL.selected.markers.size>0;this.DOM.barContainer.selectAll(".vzb-br-bar").style("opacity",n=>t.MDL.highlighted.has(n)?i:t.MDL.selected.has(n)?i:r?a:s?e:i)}}class h extends t.BaseComponent{constructor(a){const i=a.splash(a.model.stores.markers.get("bar"));a.name="barrankchart",a.subcomponents=[{type:l,placeholder:".vzb-barrankchart",model:i,name:"chart"},{type:t.TimeSlider,placeholder:".vzb-timeslider",name:"time-slider",model:i},{type:t.SteppedSlider,placeholder:".vzb-speedslider",name:"speed-slider",model:i},{type:t.TreeMenu,placeholder:".vzb-treemenu",name:"tree-menu",model:i},{type:t.DataNotes,placeholder:".vzb-datanotes",model:i},{type:t.Dialogs,placeholder:".vzb-dialogs",model:i,name:"dialogs"},{type:t.ButtonList,placeholder:".vzb-buttonlist",name:"buttons",model:i}],a.template='\n      <div class="vzb-barrankchart"></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-datanotes"></div>\n    ',a.services={locale:new t.LocaleService(a.locale),layout:new t.LayoutService({placeholder:a.placeholder})},a.model.config.markers.bar.data.locale=e.observable({get id(){return a.services.locale.id}}),super(a)}}return h.DEFAULT_UI={chart:{opacitySelectDim:.3,opacityRegular:.5}},h}));
 //# sourceMappingURL=barrankchart.js.map

package.json

 {
   "name": "vizabi-barrankchart",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Bar rank chart tool for Vizabi 📊",
@@ -5,0 +5,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66370

increased by0.3%

Lines of code

273

increased by0.37%

No dependency changes