Histogram.js 7.7 KB

12345
  1. /*
  2. All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. See https://js.arcgis.com/4.25/esri/copyright.txt for details.
  4. */
  5. import{_ as e}from"../chunks/tslib.es6.js";import"../intl.js";import{isNone as t}from"../core/maybe.js";import{property as i}from"../core/accessorSupport/decorators/property.js";import"../core/arrayUtils.js";import"../core/accessorSupport/ensureType.js";import{subclass as a}from"../core/accessorSupport/decorators/subclass.js";import s from"./Widget.js";import r from"./Histogram/HistogramViewModel.js";import{onResize as n}from"./support/widgetUtils.js";import{messageBundle as o}from"./support/decorators/messageBundle.js";import{tsx as l}from"./support/jsxFactory.js";import{substitute as d}from"../intl/substitute.js";var h;const u={base:"esri-histogram",horizontalLayout:"esri-histogram--horizontal",verticalLayout:"esri-histogram--vertical",content:"esri-histogram__content",svg:"esri-histogram__svg",bar:"esri-histogram__bar",bars:"esri-histogram__bars",label:"esri-histogram__label",dataLines:"esri-histogram__data-lines",dataLinesSubgroup:"esri-histogram__data-lines-subgroup",dataLine:"esri-histogram__data-line",averageLabel:"esri-histogram__average-label",averageDataLine:"esri-histogram__average-data-line",averageSymbol:"esri-histogram__average-symbol",esriWidget:"esri-widget",widgetIcon:"esri-icon-edit",disabled:"esri-disabled"};let c=h=class extends s{constructor(e,t){super(e,t),this._bgFillId=`${this.id}-bg-fill`,this._containerNode=null,this._containerDimensions={width:0,height:0},this._defaultBarColor="#d8d8d8",this.barCreatedFunction=null,this.dataLines=null,this.dataLineCreatedFunction=null,this.dataLineUpdatedFunction=null,this.messages=null,this.viewModel=new r}get average(){return this.viewModel.average}set average(e){this.viewModel.average=e}get bins(){return this.viewModel.bins}set bins(e){this.viewModel.bins=e}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get labelFormatFunction(){return this.viewModel.labelFormatFunction}set labelFormatFunction(e){this.viewModel.labelFormatFunction=e}set layout(e){"vertical"!==e&&(e="horizontal"),this._set("layout",e)}get max(){return this.viewModel.max}set max(e){this.viewModel.max=e}get min(){return this.viewModel.min}set min(e){this.viewModel.min=e}get state(){return this.viewModel.state}static fromHistogramResult(e){const{bins:t,maxValue:i,minValue:a}=e;return new h({bins:t,max:i,min:a})}render(){const{label:e,layout:t,state:i}=this,a=this.classes(u.base,u.esriWidget,"horizontal"===t?u.horizontalLayout:u.verticalLayout,"disabled"===i?u.disabled:null);return l("div",{"aria-label":e,class:a,bind:this,afterCreate:this._afterContainerNodeCreate},"ready"===i?this.renderContent():null)}renderContent(){if(!this._containerNode)return;const e=this._bgFillId,t=`clip-path: url(#${e})`;return l("div",{class:u.content},l("svg",{class:u.svg,xmlns:"http://www.w3.org/2000/svg"},l("defs",null,this.renderFillDefinition(e)),l("g",{style:t},this.renderBarsGroup()),this.renderLinesGroup()))}renderBarsGroup(){return l("g",{class:this.classes(u.bars)},this.renderBars())}renderBars(){const{layout:e,viewModel:{binRange:t,range:i}}=this;if(!t||!i)return;const a=t/i,{width:s,height:r}=this._containerDimensions;if(0===r&&0===s)return;if(0===r&&0!==s)return void this.scheduleRender();const[n,o]="vertical"===e?[r*a,s]:[r,s*a];return this._getBarDimensions(n,o).map((([e,t],i)=>this.renderBar(i,e,t)))}renderBar(e,t,i){const{bins:a,layout:s,max:r,messages:n,viewModel:{range:o}}=this,{width:h,height:c}=this._containerDimensions,g=a.slice()[e],{count:p,maxValue:m,minValue:b}=g,v=r-m,[_,L]="vertical"===s?[0,v*(c/o)]:[h-i-v*(h/o),c-t],y=d(n.barLabel,{count:p,maxValue:m,minValue:b});return l("rect",{"aria-label":y,afterCreate:this._afterBarCreate,bind:this,class:u.bar,"data-index":e,fill:this._defaultBarColor,height:t,role:"img","shape-rendering":"crispEdges","stroke-width":"0",width:i,x:_,y:L})}renderLinesGroup(){return l("g",{class:this.classes(u.dataLines)},this.renderAverageLine(),this.renderCustomLines())}renderAverageLine(){const{average:e}=this;if(t(e))return;const i=[l("tspan",{class:this.classes(u.averageSymbol)},"x̄ "),l("tspan",{class:this.classes(u.averageLabel)},this.labelFormatFunction?this.labelFormatFunction(e,"average"):e)];return l("g",{afterCreate:this._afterLinesSubgroupCreate,afterUpdate:this._afterLinesSubgroupUpdate,bind:this,class:this.classes(u.dataLinesSubgroup)},l("title",{key:"title"},e),this.renderLine(e,this.classes(u.averageDataLine)),this.renderLabel(e,i))}renderCustomLines(){if(this.dataLines&&this.dataLines.length)return this.dataLines.map((({value:e,label:t},i)=>this.renderLineSubgroup(i,e,String(t))))}renderLineSubgroup(e,t,i){return l("g",{afterCreate:this._afterLinesSubgroupCreate,afterUpdate:this._afterLinesSubgroupUpdate,bind:this,class:this.classes(u.dataLinesSubgroup),"data-index":e},l("title",{key:"title"},t),this.renderLine(t),this.renderLabel(t,i))}renderLine(e,t){const[i,a,s,r]=this._getLinePosition(e);return l("line",{class:this.classes(u.dataLine,t),x1:i,x2:a,y1:s,y2:r,"shape-rendering":"crispEdges"})}renderLabel(e,t,i){const[a,s]=this._getLabelPosition(e),r=2;return l("text",{class:this.classes(u.label,i),"text-anchor":"end",transform:"horizontal"===this.layout?"rotate(270)":null,x:a,y:s-r},t)}renderFillDefinition(e){const{width:t,height:i}=this._containerDimensions;return l("clipPath",{id:e},l("rect",{x:"0",y:"0",width:t,height:i}))}_afterContainerNodeCreate(e){this._containerNode=e,this.addHandles(n(e,(e=>{const{width:t,height:i}=e.contentRect;this._containerDimensions={width:t,height:i}})))}_afterBarCreate(e){if(this.barCreatedFunction){const t=e.dataset?parseInt(e.dataset.index,10):e.getAttribute("data-index")?parseInt(e.getAttribute("data-index"),10):null;this.barCreatedFunction(isNaN(t)?null:t,e)}}_afterLinesSubgroupCreate(e){if(this.dataLineCreatedFunction){const t=e.dataset?parseInt(e.dataset.index,10):e.getAttribute("data-index")?parseInt(e.getAttribute("data-index"),10):null,i=e.childNodes[0],a=e.childNodes[1]?e.childNodes[1]:null;this.dataLineCreatedFunction(i,a,isNaN(t)?null:t)}}_afterLinesSubgroupUpdate(e){if(this.dataLineUpdatedFunction){const t=e.dataset?parseInt(e.dataset.index,10):e.getAttribute("data-index")?parseInt(e.getAttribute("data-index"),10):null,i=e.childNodes[0],a=e.childNodes[1]?e.childNodes[1]:null;this.dataLineUpdatedFunction(i,a,isNaN(t)?null:t)}}_getBarDimensions(e,t){const{bins:i,layout:a}=this,s=i?i.map((e=>e.count)):[],r=Math.max.apply(Math,s);return s.map((i=>"vertical"===a?[e/s.length,0!==r?i/r*t:0]:[0!==r?i/r*e:0,t/s.length]))}_getLinePosition(e){const{layout:t,min:i,viewModel:{range:a}}=this,s=Math.round((e-i)/a*100)/100,{width:r,height:n}=this._containerDimensions,[o,l]=[s*r||1,n-s*n||1];return"vertical"===t?[0,"100%",l,l]:[o,o,"100%",0]}_getLabelPosition(e){const{layout:t,min:i,viewModel:{range:a}}=this,s=Math.round((e-i)/a*100)/100,{width:r,height:n}=this._containerDimensions;return"vertical"===t?[r,n-s*n]:[0,s*r]}};e([i()],c.prototype,"_bgFillId",void 0),e([i()],c.prototype,"_containerNode",void 0),e([i()],c.prototype,"_containerDimensions",void 0),e([i()],c.prototype,"_defaultBarColor",void 0),e([i()],c.prototype,"average",null),e([i()],c.prototype,"barCreatedFunction",void 0),e([i()],c.prototype,"dataLines",void 0),e([i()],c.prototype,"dataLineCreatedFunction",void 0),e([i()],c.prototype,"dataLineUpdatedFunction",void 0),e([i()],c.prototype,"label",null),e([i()],c.prototype,"labelFormatFunction",null),e([i({value:"horizontal"})],c.prototype,"layout",null),e([i()],c.prototype,"max",null),e([i(),o("esri/widgets/Histogram/t9n/Histogram")],c.prototype,"messages",void 0),e([i()],c.prototype,"min",null),e([i({readOnly:!0})],c.prototype,"state",null),e([i()],c.prototype,"viewModel",void 0),c=h=e([a("esri.widgets.Histogram")],c);const g=c;export{g as default};