@arcgis/core/widgets/Histogram.js

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

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.32/esri/copyright.txt for details.
*/
import{_ as e}from"../chunks/tslib.es6.js";import"../intl.js";import{property as t}from"../core/accessorSupport/decorators/property.js";import"../core/has.js";import"../core/Logger.js";import"../core/RandomLCG.js";import{subclass as i}from"../core/accessorSupport/decorators/subclass.js";import r from"./Widget.js";import s from"./Histogram/HistogramViewModel.js";import{globalCss as a}from"./support/globalCss.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 u;const h="esri-histogram",c={base:h,horizontalLayout:`${h}--horizontal`,verticalLayout:`${h}--vertical`,content:`${h}__content`,svg:`${h}__svg`,bar:`${h}__bar`,bars:`${h}__bars`,label:`${h}__label`,dataLines:`${h}__data-lines`,dataLinesSubgroup:`${h}__data-lines-subgroup`,dataLine:`${h}__data-line`,averageLabel:`${h}__average-label`,averageDataLine:`${h}__average-data-line`,averageSymbol:`${h}__average-symbol`};let p=u=class extends r{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 s}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 u({bins:t,max:i,min:r})}render(){const{label:e,layout:t,state:i}=this,r=this.classes(c.base,a.widget,"horizontal"===t?c.horizontalLayout:c.verticalLayout,"disabled"===i?a.disabled:null);return l("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 l("div",{class:c.content},l("svg",{class:c.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(c.bars)},this._renderBars())}_renderBars(){const{layout:e,viewModel:{binRange:t,range:i}}=this;if(!t||!i)return;const r=t/i,{width:s,height:a}=this._containerDimensions;if(0===a&&0===s)return;if(0===a&&0!==s)return void this.scheduleRender();const[n,o]="vertical"===e?[a*r,s]:[a,s*r];return this._getBarDimensions(n,o).map((([e,t],i)=>this._renderBar(i,e,t)))}_renderBar(e,t,i){const{bins:r,layout:s,max:a,messages:n,viewModel:{range:o}}=this;if(!r||null==a)return;const{width:u,height:h}=this._containerDimensions,p=r.slice()[e],{count:g,maxValue:m,minValue:_}=p,b=a-m,[v,L]="vertical"===s?[0,b*(h/o)]:[u-i-b*(u/o),h-t],f=d(n.barLabel,{count:g,maxValue:m,minValue:_});return l("rect",{afterCreate:this._afterBarCreate,"aria-label":f,bind:this,class:c.bar,"data-index":e,fill:this._defaultBarColor,height:t,role:"img","shape-rendering":"crispEdges","stroke-width":"0",width:i,x:v,y:L})}_renderLinesGroup(){return l("g",{class:this.classes(c.dataLines)},this._renderAverageLine(),this._renderCustomLines())}_renderAverageLine(){const{average:e}=this;if(null==e)return;const t=[l("tspan",{class:this.classes(c.averageSymbol)},"x̄ "),l("tspan",{class:this.classes(c.averageLabel)},this.labelFormatFunction?this.labelFormatFunction(e,"average"):e)];return l("g",{afterCreate:this._afterLinesSubgroupCreate,afterUpdate:this._afterLinesSubgroupUpdate,bind:this,class:this.classes(c.dataLinesSubgroup)},l("title",{key:"title"},e),this._renderLine(e,this.classes(c.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 l("g",{afterCreate:this._afterLinesSubgroupCreate,afterUpdate:this._afterLinesSubgroupUpdate,bind:this,class:this.classes(c.dataLinesSubgroup),"data-index":t},l("title",{key:"title"},i),this._renderLine(i),this._renderLabel(e))}_renderLine(e,t){const[i,r,s,a]=this._getLinePosition(e);return l("line",{class:this.classes(c.dataLine,t),"shape-rendering":"crispEdges",x1:i,x2:r,y1:s,y2:a})}_renderLabel(e,t){const{label:i,value:r}=e,[s,a]=this._getLabelPosition(r),n=2;return l("text",{class:this.classes(c.label,t),"text-anchor":"end",transform:"horizontal"===this.layout?"rotate(270)":null,x:s,y:a-n},i??"")}_renderFillDefinition(e){const{width:t,height:i}=this._containerDimensions;return l("clipPath",{id:e},l("rect",{height:i,width:t,x:"0",y:"0"}))}_afterContainerNodeCreate(e){this._containerNode=e,this.addHandles(n(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,s=i?i.map((e=>e.count)):[],a=Math.max.apply(Math,s);return s.map((i=>"vertical"===r?[e/s.length,0!==a?i/a*t:0]:[0!==a?i/a*e:0,t/s.length]))}_getLinePosition(e){const{layout:t,min:i,viewModel:{range:r}}=this;if(null==i)return[0,0,0,0];const s=Math.round((e-i)/r*100)/100,{width:a,height:n}=this._containerDimensions,[o,l]=[s*a||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:r}}=this;if(null==i)return[0,0];const s=Math.round((e-i)/r*100)/100,{width:a,height:n}=this._containerDimensions;return"vertical"===t?[a,n-s*n]:[0,s*a]}};e([t()],p.prototype,"_bgFillId",void 0),e([t()],p.prototype,"_containerNode",void 0),e([t()],p.prototype,"_containerDimensions",void 0),e([t()],p.prototype,"_defaultBarColor",void 0),e([t()],p.prototype,"average",null),e([t()],p.prototype,"barCreatedFunction",void 0),e([t()],p.prototype,"dataLines",void 0),e([t()],p.prototype,"dataLineCreatedFunction",void 0),e([t()],p.prototype,"dataLineUpdatedFunction",void 0),e([t()],p.prototype,"icon",null),e([t()],p.prototype,"label",null),e([t()],p.prototype,"labelFormatFunction",null),e([t({value:"horizontal"})],p.prototype,"layout",null),e([t()],p.prototype,"max",null),e([t(),o("esri/widgets/Histogram/t9n/Histogram")],p.prototype,"messages",void 0),e([t()],p.prototype,"min",null),e([t({readOnly:!0})],p.prototype,"state",null),e([t({type:s})],p.prototype,"viewModel",void 0),p=u=e([i("esri.widgets.Histogram")],p);const g=p;export{g as default};