@arcgis/core/widgets/Histogram.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import{__decorate as e}from"tslib";import{substitute as t}from"../intl.js";import{deprecateWidget as i}from"../core/deprecate.js";import r from"../core/Logger.js";import{property as a,subclass as n}from"../core/accessorSupport/decorators.js";import s from"./Widget.js";import o from"./Histogram/HistogramViewModel.js";import{globalCss as l}from"./support/globalCss.js";import{messageBundle as d,tsx as h}from"./support/widget.js";import{onResize as u}from"./support/widgetUtils.js";var c;const g="esri-histogram",p={base:g,horizontalLayout:`${g}--horizontal`,verticalLayout:`${g}--vertical`,content:`${g}__content`,svg:`${g}__svg`,bar:`${g}__bar`,bars:`${g}__bars`,label:`${g}__label`,dataLines:`${g}__data-lines`,dataLinesSubgroup:`${g}__data-lines-subgroup`,dataLine:`${g}__data-line`,averageLabel:`${g}__average-label`,averageDataLine:`${g}__average-data-line`,averageSymbol:`${g}__average-symbol`};let m=c=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 o,e?.suppressDeprecationWarning||i(r.getLogger(this),"Histogram","arcgis-histogram",{version:"5.0"})}normalizeCtorArgs(e={}){const{suppressDeprecationWarning:t,...i}=e;return i}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 icon(){return"graph-histogram"}set icon(e){this._overrideIfSome("icon",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:r}=e;return new c({bins:t,max:i,min:r})}render(){const{label:e,layout:t,state:i}=this,r=this.classes(p.base,l.widget,"horizontal"===t?p.horizontalLayout:p.verticalLayout,"disabled"===i?l.disabled:null);return h("div",{afterCreate:this._afterContainerNodeCreate,"aria-label":e,bind:this,class:r},"ready"===i?this._renderContent():null)}_renderContent(){if(!this._containerNode)return;const e=this._bgFillId,t=`clip-path: url(#${e})`;return h("div",{class:p.content},h("svg",{class:p.svg,xmlns:"http://www.w3.org/2000/svg"},h("defs",null,this._renderFillDefinition(e)),h("g",{style:t},this._renderBarsGroup()),this._renderLinesGroup()))}_renderBarsGroup(){return h("g",{class:this.classes(p.bars)},this._renderBars())}_renderBars(){const{layout:e,viewModel:{binRange:t,range:i}}=this;if(!t||!i)return;const r=t/i,{width:a,height:n}=this._containerDimensions;if(0===n&&0===a)return;if(0===n&&0!==a)return void this.scheduleRender();const[s,o]="vertical"===e?[n*r,a]:[n,a*r];return this._getBarDimensions(s,o).map(([e,t],i)=>this._renderBar(i,e,t))}_renderBar(e,i,r){const{bins:a,layout:n,max:s,messages:o,viewModel:{range:l}}=this;if(!a||null==s)return;const{width:d,height:u}=this._containerDimensions,c=a.slice()[e],{count:g,maxValue:m,minValue:_}=c,b=s-m,[v,L]="vertical"===n?[0,b*(u/l)]:[d-r-b*(d/l),u-i],f=t(o.barLabel,{count:g,maxValue:m,minValue:_});return h("rect",{afterCreate:this._afterBarCreate,"aria-label":f,bind:this,class:p.bar,"data-index":e,fill:this._defaultBarColor,height:i,role:"img","shape-rendering":"crispEdges","stroke-width":"0",width:r,x:v,y:L})}_renderLinesGroup(){return h("g",{class:this.classes(p.dataLines)},this._renderAverageLine(),this._renderCustomLines())}_renderAverageLine(){const{average:e}=this;if(null==e)return;const t=[h("tspan",{class:this.classes(p.averageSymbol)},"x̄ "),h("tspan",{class:this.classes(p.averageLabel)},this.labelFormatFunction?this.labelFormatFunction(e,"average"):e)];return h("g",{afterCreate:this._afterLinesSubgroupCreate,afterUpdate:this._afterLinesSubgroupUpdate,bind:this,class:this.classes(p.dataLinesSubgroup)},h("title",{key:"title"},e),this._renderLine(e,this.classes(p.averageDataLine)),this._renderLabel({label:t,value:e}))}_renderCustomLines(){if(this.dataLines?.length)return this.dataLines.map((e,t)=>this._renderLineSubgroup(e,t))}_renderLineSubgroup(e,t){const{value:i}=e;return h("g",{afterCreate:this._afterLinesSubgroupCreate,afterUpdate:this._afterLinesSubgroupUpdate,bind:this,class:this.classes(p.dataLinesSubgroup),"data-index":t},h("title",{key:"title"},i),this._renderLine(i),this._renderLabel(e))}_renderLine(e,t){const[i,r,a,n]=this._getLinePosition(e);return h("line",{class:this.classes(p.dataLine,t),"shape-rendering":"crispEdges",x1:i,x2:r,y1:a,y2:n})}_renderLabel(e,t){const{label:i,value:r}=e,[a,n]=this._getLabelPosition(r),s=2;return h("text",{class:this.classes(p.label,t),"text-anchor":"end",transform:"horizontal"===this.layout?"rotate(270)":null,x:a,y:n-s},i??"")}_renderFillDefinition(e){const{width:t,height:i}=this._containerDimensions;return h("clipPath",{id:e},h("rect",{height:i,width:t,x:"0",y:"0"}))}_afterContainerNodeCreate(e){this._containerNode=e,this.addHandles(u(e,e=>{const{width:t,height:i}=e.contentRect;this._containerDimensions={width:t,height:i}}))}_getIndexFromElement(e){const t=e.dataset?.index,i=e.getAttribute("data-index");return null!=t?parseInt(t,10):null!=i?parseInt(i,10):null}_afterBarCreate(e){if(this.barCreatedFunction){const t=this._getIndexFromElement(e)??-1;this.barCreatedFunction(t,e)}}_afterLinesSubgroupCreate(e){if(this.dataLineCreatedFunction){const t=this._getIndexFromElement(e),i=e.childNodes[1],r=e.childNodes[2]?e.childNodes[2]:null;this.dataLineCreatedFunction(i,r,t)}}_afterLinesSubgroupUpdate(e){if(this.dataLineUpdatedFunction){const t=this._getIndexFromElement(e),i=e.childNodes[1],r=e.childNodes[2]?e.childNodes[2]:null;this.dataLineUpdatedFunction(i,r,t)}}_getBarDimensions(e,t){const{bins:i,layout:r}=this,a=i?i.map(e=>e.count):[],n=Math.max.apply(Math,a);return a.map(i=>"vertical"===r?[e/a.length,0!==n?i/n*t:0]:[0!==n?i/n*e:0,t/a.length])}_getLinePosition(e){const{layout:t,min:i,viewModel:{range:r}}=this;if(null==i)return[0,0,0,0];const a=Math.round((e-i)/r*100)/100,{width:n,height:s}=this._containerDimensions,[o,l]=[a*n||1,s-a*s||1];return"vertical"===t?[0,"100%",l,l]:[o,o,"100%",0]}_getLabelPosition(e){const{layout:t,min:i,viewModel:{range:r}}=this;if(null==i)return[0,0];const a=Math.round((e-i)/r*100)/100,{width:n,height:s}=this._containerDimensions;return"vertical"===t?[n,s-a*s]:[0,a*n]}};e([a()],m.prototype,"_bgFillId",void 0),e([a()],m.prototype,"_containerNode",void 0),e([a()],m.prototype,"_containerDimensions",void 0),e([a()],m.prototype,"_defaultBarColor",void 0),e([a()],m.prototype,"average",null),e([a()],m.prototype,"barCreatedFunction",void 0),e([a()],m.prototype,"dataLines",void 0),e([a()],m.prototype,"dataLineCreatedFunction",void 0),e([a()],m.prototype,"dataLineUpdatedFunction",void 0),e([a()],m.prototype,"icon",null),e([a()],m.prototype,"label",null),e([a()],m.prototype,"labelFormatFunction",null),e([a({value:"horizontal"})],m.prototype,"layout",null),e([a()],m.prototype,"max",null),e([a(),d("esri/widgets/Histogram/t9n/Histogram")],m.prototype,"messages",void 0),e([a()],m.prototype,"min",null),e([a({readOnly:!0})],m.prototype,"state",null),e([a({type:o})],m.prototype,"viewModel",void 0),m=c=e([n("esri.widgets.Histogram")],m);const _=m;export{_ as default};