HistogramRangeSlider.js 6.6 KB

12345
  1. /*
  2. All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. See https://js.arcgis.com/4.24/esri/copyright.txt for details.
  4. */
  5. import{_ as e}from"../chunks/tslib.es6.js";import t from"../Color.js";import{watch as i}from"../core/reactiveUtils.js";import{aliasOf as r}from"../core/accessorSupport/decorators/aliasOf.js";import"../core/arrayUtils.js";import"../core/has.js";import{Integer as s}from"../core/accessorSupport/ensureType.js";import{property as a}from"../core/accessorSupport/decorators/property.js";import{subclass as o}from"../core/accessorSupport/decorators/subclass.js";import n from"./Histogram.js";import l from"./Slider.js";import d from"./Widget.js";import h from"./HistogramRangeSlider/HistogramRangeSliderViewModel.js";import{getDeviationValues as u}from"./smartMapping/support/utils.js";import"./support/widgetUtils.js";import{messageBundle as p}from"./support/decorators/messageBundle.js";import{tsx as m}from"./support/jsxFactory.js";const c={base:"esri-histogram-range-slider",sliderContainer:"esri-histogram-range-slider__slider-container",histogramContainer:"esri-histogram-range-slider__histogram-container",rangeTypePrefix:"esri-histogram-range-slider__range-type--",esriWidget:"esri-widget",widgetIcon:"esri-icon-edit",disabled:"esri-disabled"};let g=class extends d{constructor(e,i){super(e,i),this._barElements=[],this._histogram=null,this._slider=null,this.average=null,this.barCreatedFunction=null,this.bins=null,this.dataLines=null,this.dataLineCreatedFunction=null,this.excludedBarColor=new t("#d7e5f0"),this.hasTimeData=null,this.includedBarColor=new t("#599dd4"),this.label=void 0,this.labelFormatFunction=null,this.max=null,this.messages=null,this.min=null,this.precision=4,this.rangeType=null,this.standardDeviation=null,this.standardDeviationCount=1,this.values=null,this.viewModel=new h}initialize(){const{average:e,bins:t,hasTimeData:r,max:s,min:a,viewModel:o}=this;this._updateBarFill=this._updateBarFill.bind(this),this._histogram=new n({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 l({labelFormatFunction:this.labelFormatFunction,layout:"horizontal",visibleElements:{labels:!0,rangeLabels:!0},rangeLabelInputsEnabled:!r,viewModel:o}),this.own([this._slider.on(["max-change","min-change"],(e=>this.emit(e.type,e))),this._slider.on(["segment-drag","thumb-change","thumb-drag"],(e=>{this._updateBarFills(),this.emit(e.type,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})}))])}generateWhereClause(e){return this.viewModel.generateWhereClause(e)}render(){const{rangeType:e,viewModel:t,label:i}=this,r=this.classes(c.base,c.esriWidget,`${c.rangeTypePrefix}${e}`,"disabled"===t.state?c.disabled:null);return m("div",{"aria-label":i,class:r},"disabled"===t.state?null:this.renderContent())}renderContent(){return[this.renderHistogram(),this.renderSlider()]}renderSlider(){return m("div",{key:`${this.id}-slider-container`,class:c.sliderContainer},this._slider.render())}renderHistogram(){return m("div",{class:c.histogramContainer},this._histogram.render())}_getDataLines(){return[...this._getStandardDeviationDataLines(),...this.dataLines||[]]}_getStandardDeviationDataLines(){const{average:e,standardDeviation:t,standardDeviationCount:i}=this;return u(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(!(t&&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;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;default:return this.includedBarColor}}_getBlendedColor(e){return t.blendColors(this.excludedBarColor,this.includedBarColor,e)}};e([r("viewModel.average")],g.prototype,"average",void 0),e([a()],g.prototype,"barCreatedFunction",void 0),e([r("viewModel.bins")],g.prototype,"bins",void 0),e([a()],g.prototype,"dataLines",void 0),e([a()],g.prototype,"dataLineCreatedFunction",void 0),e([a({type:t,json:{type:[s],write:!0}})],g.prototype,"excludedBarColor",void 0),e([r("viewModel.hasTimeData")],g.prototype,"hasTimeData",void 0),e([a({type:t,json:{type:[s],write:!0}})],g.prototype,"includedBarColor",void 0),e([a({aliasOf:{source:"messages.widgetLabel",overridable:!0}})],g.prototype,"label",void 0),e([r("viewModel.labelFormatFunction")],g.prototype,"labelFormatFunction",void 0),e([r("viewModel.max")],g.prototype,"max",void 0),e([a(),p("esri/widgets/HistogramRangeSlider/t9n/HistogramRangeSlider")],g.prototype,"messages",void 0),e([r("viewModel.min")],g.prototype,"min",void 0),e([r("viewModel.precision")],g.prototype,"precision",void 0),e([r("viewModel.rangeType")],g.prototype,"rangeType",void 0),e([r("viewModel.standardDeviation")],g.prototype,"standardDeviation",void 0),e([a()],g.prototype,"standardDeviationCount",void 0),e([r("viewModel.values")],g.prototype,"values",void 0),e([a()],g.prototype,"viewModel",void 0),g=e([o("esri.widgets.HistogramRangeSlider")],g);const v=g;export{v as default};