@arcgis/core/widgets/HistogramRangeSlider.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 t from"../Color.js";import{watch as i}from"../core/reactiveUtils.js";import{property as r}from"../core/accessorSupport/decorators/property.js";import{Integer as s}from"../core/accessorSupport/ensureType.js";import"../core/has.js";import"../core/RandomLCG.js";import{subclass as a}from"../core/accessorSupport/decorators/subclass.js";import o from"./Histogram.js";import n from"./Slider.js";import l from"./Widget.js";import d from"./HistogramRangeSlider/HistogramRangeSliderViewModel.js";import{getDeviationValues as h}from"./smartMapping/support/utils.js";import{globalCss as u}from"./support/globalCss.js";import"./support/widgetUtils.js";import{messageBundle as m}from"./support/decorators/messageBundle.js";import{tsx as p}from"./support/jsxFactory.js";const g="esri-histogram-range-slider",c={base:g,sliderContainer:`${g}__slider-container`,histogramContainer:`${g}__histogram-container`,rangeTypePrefix:`${g}__range-type--`};let v=class extends l{constructor(e,i){super(e,i),this._barElements=[],this._histogram=null,this._slider=null,this.barCreatedFunction=null,this.dataLines=null,this.dataLineCreatedFunction=null,this.excludedBarColor=new t("#d7e5f0"),this.includedBarColor=new t("#599dd4"),this.messages=null,this.standardDeviationCount=1,this.viewModel=new d}initialize(){const{average:e,bins:t,hasTimeData:r,max:s,min:a,viewModel:l}=this;this._updateBarFill=this._updateBarFill.bind(this),this._histogram=new o({average:e,bins:t,barCreatedFunction:(e,t)=>{0===e&&(this._barElements=[]),this._barElements.push(t),this._updateBarFill(e,t),this.barCreatedFunction&&this.barCreatedFunction(e,t)},dataLines:this._getDataLines(),dataLineCreatedFunction:(e,t)=>{this.dataLineCreatedFunction&&this.dataLineCreatedFunction(e,t)},labelFormatFunction:this.labelFormatFunction,layout:"horizontal",max:s,min:a}),this._slider=new n({labelFormatFunction:this.labelFormatFunction,layout:"horizontal",visibleElements:{labels:!0,rangeLabels:!0},rangeLabelInputsEnabled:!r,viewModel:l}),this.addHandles([this._slider.on("max-change",(e=>this.emit("max-change",e))),this._slider.on("min-change",(e=>this.emit("min-change",e))),this._slider.on("segment-drag",(e=>{this._updateBarFills(),this.emit("segment-drag",e)})),this._slider.on("thumb-change",(e=>{this._updateBarFills(),this.emit("thumb-change",e)})),this._slider.on("thumb-drag",(e=>{this._updateBarFills(),this.emit("thumb-drag",e)})),i((()=>this.bins),(e=>{if(e&&this._histogram.bins){const t=this._histogram.bins.length-e.length;this._barElements.splice(-t,t)}else this._barElements=[];this._histogram.set({bins:e}),this._updateBarFills(),this.scheduleRender()})),i((()=>[this.max,this.min,this.rangeType,this.values]),(([e,t])=>{this._histogram.set({max:e,min:t}),this._updateBarFills(),this.scheduleRender()})),i((()=>[this.average,this.dataLines,this.standardDeviation,this.standardDeviationCount]),(([e])=>{this._histogram.set({average:e,dataLines:this._getDataLines()})})),i((()=>this.labelFormatFunction),(e=>{this._histogram.set({labelFormatFunction:e})})),i((()=>this.hasTimeData),(e=>{this._slider.set({rangeLabelInputsEnabled:!e})}))])}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 hasTimeData(){return this.viewModel.hasTimeData}set hasTimeData(e){this.viewModel.hasTimeData=e}get icon(){return"arrow-double-horizontal"}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}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 precision(){return this.viewModel.precision}set precision(e){this.viewModel.precision=e}get rangeType(){return this.viewModel.rangeType}set rangeType(e){this.viewModel.rangeType=e}get standardDeviation(){return this.viewModel.standardDeviation}set standardDeviation(e){this.viewModel.standardDeviation=e}get values(){return this.viewModel.values}set values(e){this.viewModel.values=e}generateWhereClause(e){return this.viewModel.generateWhereClause(e)}render(){const{rangeType:e,viewModel:t,label:i}=this,r=this.classes(c.base,u.widget,`${c.rangeTypePrefix}${e}`,"disabled"===t.state?u.disabled:null);return p("div",{"aria-label":i,class:r},"disabled"===t.state?null:this._renderContent())}_renderContent(){return[this._renderHistogram(),this._renderSlider()]}_renderSlider(){return p("div",{class:c.sliderContainer,key:`${this.id}-slider-container`},this._slider.render())}_renderHistogram(){return p("div",{class:c.histogramContainer},this._histogram.render())}_getDataLines(){return[...this._getStandardDeviationDataLines(),...this.dataLines||[]]}_getStandardDeviationDataLines(){const{average:e,standardDeviation:t,standardDeviationCount:i}=this;return h(t,e,i).map((e=>({value:e})))}_updateBarFills(){this._barElements.forEach(((e,t)=>this._updateBarFill(t,e)))}_updateBarFill(e,t){t.setAttribute("fill",this._getFillForBar(e)?.toHex()??"")}_getFillForBar(e){const{bins:t,rangeType:i,values:r}=this;if(-1===e||!t?.length||!i||!r?.length)return null;const s=t[e];if(!s)return null;const{maxValue:a,minValue:o}=s,n=a-o,l=r[0]>o&&r[0]<a;switch(i){case"equal":case"not-equal":return this.includedBarColor;case"less-than":case"at-most":return l?this._getBlendedColor((r[0]-o)/n):a<=r[0]?this.includedBarColor:this.excludedBarColor;case"greater-than":case"at-least":return l?this._getBlendedColor(1-(r[0]-o)/n):o>=r[0]?this.includedBarColor:this.excludedBarColor;case"between":if(2===r.length)return r[0]>o&&r[0]<a?this._getBlendedColor(1-(r[0]-o)/n):r[1]>o&&r[1]<a?this._getBlendedColor((r[1]-o)/n):o>=r[0]&&a<=r[1]?this.includedBarColor:this.excludedBarColor;break;case"not-between":if(2===r.length)return r[0]>o&&r[0]<a?this._getBlendedColor((r[0]-o)/n):r[1]>o&&r[1]<a?this._getBlendedColor(1-(r[1]-o)/n):o>r[0]&&a<r[1]?this.excludedBarColor:this.includedBarColor}return this.includedBarColor}_getBlendedColor(e){return t.blendColors(this.excludedBarColor,this.includedBarColor,e)}};e([r()],v.prototype,"average",null),e([r()],v.prototype,"barCreatedFunction",void 0),e([r()],v.prototype,"bins",null),e([r()],v.prototype,"dataLines",void 0),e([r()],v.prototype,"dataLineCreatedFunction",void 0),e([r({type:t,json:{type:[s],write:!0}})],v.prototype,"excludedBarColor",void 0),e([r()],v.prototype,"hasTimeData",null),e([r({type:t,json:{type:[s],write:!0}})],v.prototype,"includedBarColor",void 0),e([r()],v.prototype,"icon",null),e([r()],v.prototype,"label",null),e([r()],v.prototype,"labelFormatFunction",null),e([r()],v.prototype,"max",null),e([r(),m("esri/widgets/HistogramRangeSlider/t9n/HistogramRangeSlider")],v.prototype,"messages",void 0),e([r()],v.prototype,"min",null),e([r()],v.prototype,"precision",null),e([r()],v.prototype,"rangeType",null),e([r()],v.prototype,"standardDeviation",null),e([r()],v.prototype,"standardDeviationCount",void 0),e([r()],v.prototype,"values",null),e([r({type:d})],v.prototype,"viewModel",void 0),v=e([a("esri.widgets.HistogramRangeSlider")],v);const b=v;export{b as default};