@arcgis/core/views/analysis/ElevationProfile/ElevationProfileChart.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 t}from"tslib";import*as e from"@amcharts/amcharts5/index.js";import{XYChart as i,ValueAxis as s,AxisRendererX as o,AxisRendererY as n,XYCursor as r,LineSeries as a}from"@amcharts/amcharts5/xy.js";import l from"@amcharts/amcharts5/themes/Dark.js";import p from"@amcharts/amcharts5/themes/Responsive.js";import{fetchMessageBundle as c,substitute as d,formatNumber as h}from"../../../intl.js";import u from"../../../core/Accessor.js";import{createTask as m}from"../../../core/asyncUtils.js";import{makeHandle as f,handlesGroup as g}from"../../../core/handleUtils.js";import"../../../core/has.js";import{throwIfAborted as x}from"../../../core/promiseUtils.js";import{watch as _,initial as y}from"../../../core/reactiveUtils.js";import{throttle as v}from"../../../core/throttle.js";import{formatDecimal as A,unitName as T}from"../../../core/unitFormatUtils.js";import{property as b,subclass as M}from"../../../core/accessorSupport/decorators.js";import{getEpsilon as S}from"../../../core/libs/gl-matrix-2/math/common.js";import{isDarkMode as P}from"../../../support/modeUtils.js";import{getConfig as w,notAvailable as F}from"./constants.js";import{getAdjustedBounds as C}from"./elevationProfileChartBoundsUtils.js";import{themeLight as L,themeDark as z}from"./elevationProfileChartTheme.js";import{binaryFindClosest as I}from"./elevationProfileGenerationUtils.js";import{createRoot as k}from"../../../widgets/support/chartUtilsAm5.js";let j=class extends u{get chartVisible(){const t=this._chartData;if(null==t)return!1;let e=0;for(const{samples:i}of t.lines)e+=i?.length??0;return t.refined||e<=w().largeChartSamples}get spinnerVisible(){return null!=this._chartData&&(this.analysisView?.progress??0)<1}get _updateParameters(){const{messages:t,_unitsMessages:e}=this;if(t&&e)return{data:this._chartData,messages:t,unitsMessages:e}}get _chartData(){const{analysisView:t,uniformScaling:e}=this;if(!this._hasGeometry||!t)return;const{analysis:i,effectiveDisplayUnits:s,progress:o,statistics:n}=t;return{lines:this._lineData,statistics:n,effectiveUnits:s,refined:1===o,uniformScaling:e,dynamicElevationRange:i.profiles.some(t=>"scene"===t.type)}}get _hasGeometry(){return null!=this.analysisView?.analysis.geometry}get _lineData(){const{analysisView:t}=this;if(!t)return[];const{analysis:e,results:i}=t,{profiles:s}=e;if(i.length!==s.length)return[];const o=[];for(let n=0;n<s.length;n++){const t=s.at(n),e=i.at(n);if(!e.available||!e.rawResult?.hasZ||!t.chartOptions.lineVisible)continue;const r="input"!==t.type;o.push({id:t.id,type:t.type,title:t.title,color:t.color,samples:e.samples,fillEnabled:r,strokeOffsetY:r?-1:0,strokeWidth:1.5})}return o}constructor(t){super(t),this.view=null,this.analysisView=null,this.messages=null,this.uniformScaling=!1,this._theme=L,this._data=null,this._seriesInfos=new Map,this._pointerIsOver=!1,this._rtl=!1,this._chartInfo=null,this._unitsMessages=null,this._throttledUpdate=v(t=>{this._update(t)},w().updateThrottleMillis),this._onCursorMove=()=>{const t=this._chartInfo;if(!t||!this._pointerIsOver)return;const{chart:e,xAxis:i,yAxis:s}=t;this._updateTooltips();const o=e.get("cursor");let n=o?.getPrivate("positionX")??0,r=o?.getPrivate("positionY")??0;const a=this._data;if(null!=a?.statistics){const{maxDistance:t,minElevation:e,maxElevation:o}=a.statistics;let l,p;if(null!=t){1===Y(i)?(l=0,p=t):(l=O(i),p=R(i)),n=V(n,l,p,0,t)}if(null!=e&&null!=o){1===Y(s)?(l=e,p=o):(l=O(s),p=R(s)),r=V(r,l,p,e,o)}}this.onCursorPositionChange?.(n,r)}}initialize(){this.addHandles(m(t=>this._initializeChart(t)))}destroy(){this._chartInfo=null,this._seriesInfos.clear(),this._data=null}zoomOut(){this._chartInfo?.xAxis.zoom(0,1),this._chartInfo?.yAxis.zoom(0,1)}async _initializeChart(t){const[e,s]=await Promise.all([k(this.container),c("esri/core/t9n/Units")]);x(t);const o=E(this.container),n=P(this.container),r=n?z:L;e.setThemes(n?[p.new(e),l.new(e)]:[p.new(e)]),this._rtl=o,this._theme=r,this._unitsMessages=s;const a=e.container.children.push(i.new(e,{panX:!0,panY:!0,paddingTop:r.paddingTop,paddingBottom:r.paddingBottom,paddingLeft:o?r.paddingRight:r.paddingLeft,paddingRight:o?r.paddingLeft:r.paddingRight,maxTooltipDistance:-1}));a.zoomOutButton.set("forceHidden",!0);const d=a.xAxes.push(this._createXAxis(e)),h=a.yAxes.push(this._createYAxis(e));this._chartInfo={chart:a,xAxis:d,yAxis:h},this._initializeTest(a),this.addHandles([this._setupZoomHandling(),this._setupCursorHandling(),W(e),_(()=>this._updateParameters,t=>this._throttledUpdate(t),y),this._throttledUpdate])}_initializeTest(t){}_update(t){if(!t||this.destroyed)return;const e=this._data,i=t.data;if(i===e&&t.messages===this.messages&&t.unitsMessages===this._unitsMessages)return;const s=e!==i,o=e?.effectiveUnits!==i?.effectiveUnits,n=e?.uniformScaling!==i?.uniformScaling;this._data=i,(s||o)&&(this._updateAxes(),this._updateSeries()),n&&this.zoomOut(),this._updateTooltips()}_createXAxis(t){const i=this._theme,n=s.new(t,{renderer:o.new(t,{})});n.setAll({extraMax:0,extraMin:0,maxDeviation:0,numberFormatter:this._makeFormatter(t,"distance"),strictMinMax:!0,strictMinMaxSelection:!0}),n.axisHeader.set("forceHidden",!0);const r=n.get("renderer");r.setAll({inside:!1,minGridDistance:i.xAxisMinGridDistance}),r.labels.template.setAll({centerX:e.p0,centerY:e.p0,fill:e.color(i.axisLabelsColor),fontFamily:i.fontFamily,fontSize:i.axisLabelsFontSize,fontWeight:i.axisLabelsFontWeight,maxPosition:i.xAxisMaxLabelPosition,minPosition:i.xAxisMinLabelPosition,paddingLeft:0,paddingRight:0,paddingTop:i.xAxisLabelsSpacing});const a=n.set("tooltip",e.Tooltip.new(t,{paddingBottom:0,paddingLeft:0,paddingRight:0,paddingTop:0}));return a.get("background")?.setAll({fill:e.color(i.axisTooltipBackgroundColor),stroke:void 0}),a.label.setAll({fill:e.color(i.axisTooltipLabelColor),fontFamily:i.fontFamily,fontSize:i.axisTooltipFontSize,paddingBottom:i.axisTooltipPaddingBottom,paddingLeft:i.axisTooltipPaddingHorizontal,paddingRight:i.axisTooltipPaddingHorizontal,paddingTop:i.axisTooltipPaddingTop,direction:this._rtl?"rtl":"ltr"}),r.grid.template.setAll({strokeOpacity:1,stroke:e.color(i.axisGridStroke)}),n}_createYAxis(t){const i=this._theme,o=this._rtl,r=s.new(t,{renderer:n.new(t,{})});r.setAll({baseValue:w().noDataValue,extraMax:0,extraMin:0,maxDeviation:0,numberFormatter:this._makeFormatter(t,"elevation"),strictMinMax:!0,strictMinMaxSelection:!0,tooltip:void 0}),r.axisHeader.set("visible",!1);const a=r.get("renderer");return a.setAll({minGridDistance:i.yAxisMinGridDistance,opposite:o,inside:!0}),a.labels.template.setAll({centerX:e.p0,centerY:e.p100,fill:e.color(i.axisLabelsColor),fontFamily:i.fontFamily,fontSize:i.axisLabelsFontSize,fontWeight:i.axisLabelsFontWeight,maxPosition:i.yAxisMaxLabelPosition,minPosition:i.yAxisMinLabelPosition,paddingBottom:0,paddingLeft:o?0:i.yAxisLabelSpacing,paddingRight:o?i.yAxisLabelSpacing:0,paddingTop:0,textAlign:"start"}),a.grid.template.setAll({strokeOpacity:1,stroke:e.color(i.axisGridStroke)}),r}_setupZoomHandling(){const t=this._chartInfo;if(!t)return f();const{xAxis:e,yAxis:i}=t,s=()=>{this.onRangeChange?.(Y(e),Y(i))},o=t=>[t.on("start",s),t.on("end",s)];return G([...o(e),...o(i)])}_setupCursorHandling(){const t=this._chartInfo?.chart;if(!t)return f();const e=t.plotContainer.events,i=t=>{this._pointerIsOver=t,this._updateTooltips()},s=()=>{i(!1),this.onCursorPositionChange?.(null,null)};return G([e.on("pointerover",()=>i(!0)),e.on("pointerout",s),e.on("blur",s)])}_updateAxes(){const t=this._chartInfo;if(!t)return;const{chart:e,xAxis:i,yAxis:s}=t,o=this._data,{minX:n,maxX:r,minY:a,maxY:l}=C({data:o,pixelWidth:i.width(),pixelHeight:s.height()}),p=!!o?.uniformScaling,c=!!o?.refined;e.setAll({panX:!0,panY:p,pinchZoomX:c,pinchZoomY:c&&p,wheelX:"panX",wheelY:c?p?"zoomXY":"zoomX":"none"}),i.setAll({max:r,min:n,panX:!0,panY:!1,zoomX:!0,zoomY:p}),s.setAll({max:l,min:a,panX:!1,panY:p,zoomX:p,zoomY:p})}_updateSeries(){const t=this._seriesInfos,e=this._chartInfo;if(!e)return;const{chart:i,xAxis:s,yAxis:o}=e,n=this._data;if(!n||0===n.lines.length)return this._seriesInfos.clear(),void i.series.clear();const r=new Map,a=new Set(i.series.values),l=n.lines.length;for(let p=0;p<l;p++){const s=n.lines[p];let o=t.get(s.id);o?(o.fill&&a.delete(o.fill),a.delete(o.line)):(o=D(e,s),o.fill&&i.series.push(o.fill),i.series.push(o.line)),r.set(o.id,o);const c=l-p-1;o.fill?.set("layer",c),o.line.set("layer",l+c),this._updateLineSeries(o,s)}this._seriesInfos=r;for(const p of a)i.series.removeValue(p);s.set("layer",l+1),o.set("layer",l+2)}_updateLineSeries(t,i){const s=e.color(i.color.toCss()),o=i.samples??[],n=o.length>0,{line:r,fill:a}=t;r.set("visible",n),r.set("stroke",s),a?.set("visible",n),a?.set("fill",e.Color.lighten(s,this._theme.seriesFillLighten)),r.data.setAll(o),a?.data.setAll(o)}_updateTooltips(){const t=this._chartInfo;if(!t)return;const{chart:e,xAxis:i,yAxis:s}=t,o=e.get("cursor");if(!this._data?.refined)return o?.events.removeType("cursormoved"),o?.dispose(),void e.set("cursor",void 0);if(!o){const t=r.new(e.root,{behavior:"none",xAxis:i,yAxis:s,snapToSeriesBy:"y"});t.lineY.set("visible",!1),t.events.on("cursormoved",this._onCursorMove),e.set("cursor",t)}const n=this._getSeriesTooltipText();n?this._seriesInfos.forEach(e=>{const i=e.line.get("tooltip")??X(t,this._theme,this._rtl);i.label.set("text",n),e.line.set("tooltip",i)}):this._seriesInfos.forEach(t=>{t.line.get("tooltip")?.dispose(),t.line.set("tooltip",void 0)}),this._chartInfo?.xAxis.getTooltip()?.setAll({tooltipText:this._getAxisTooltipText()})}_getSeriesTooltipText(){const t=this._data?.lines.map(t=>({line:t,y:this._getPointNearestToCursor(t)?.elevation})).sort(H);return t&&0!==t.length&&null!=t[0].y?t.map(({y:t,line:e})=>this._getTooltipTextForLine(e,t)).join("\n"):null}_getPointNearestToCursor(t){const e=t.samples??[];if(0===e.length)return null;const i=this._chartInfo;if(!i)return null;const{chart:s,xAxis:o}=i,n=s.get("cursor"),r=n?.getPrivate("positionX")??0,a=o.toAxisPosition(r),l=o.positionToValue(a);return I(e,l,t=>t.distance)}_getTooltipTextForLine(t,e){const i=this._data,s=this.messages,o=this._unitsMessages;if(!i||!s||!o)return"";const n=`[${t.color.toHex()}]●[/]`,r="  ",a=w().formatPrecision,l=d(s.chartTooltip,{name:B(t,s),elevation:null!=e?A(o,e,i.effectiveUnits.elevation,a):F});return this._rtl?l+r+n:n+r+l}_getAxisTooltipText(){const t=this._data,e=this._unitsMessages;if(!t||!e)return"";const i=t.lines[0],s=i?this._getPointNearestToCursor(i):null,o=w().formatPrecision;return null!=s?A(e,s.distance,t.effectiveUnits.distance,o):"-"}_makeFormatter(t,i){const s=e.NumberFormatter.new(t,{}),o=1e6,n="distance"===i?new Intl.NumberFormat(void 0,{notation:"compact",compactDisplay:"short",maximumSignificantDigits:3}):null;return s.format=(t,e,s)=>{const r=this._data,a=this._unitsMessages;if(!r||!a||"string"==typeof t)return"";let l;return l=n&&Math.abs(t)>=o?n.format(t):h(t,{maximumFractionDigits:s}),`${l} ${T(a,r.effectiveUnits[i],"abbr")}`},s}};function D(t,e){const{id:i}=e,s=U(t,`line-${i}`);s.setAll({dy:e.strokeOffsetY,tooltip:void 0}),s.strokes.template.setAll({strokeWidth:e.strokeWidth});let o=null;return e.fillEnabled&&(o=U(t,`fill-${i}`),o.fills.template.setAll({fillOpacity:1,visible:!0})),{id:i,line:s,fill:o}}function U({chart:t,xAxis:e,yAxis:i},s){return a.new(t.root,{connect:!1,excludeFromTotal:!0,fill:void 0,id:s,stroke:void 0,valueXField:"distance",valueYField:"elevation",xAxis:e,yAxis:i})}function X({chart:t},i,s){const o=e.Tooltip.new(t.root,{autoTextColor:!1,getFillFromSprite:!1,getLabelFillFromSprite:!1,pointerOrientation:"vertical",visible:!1}),n=i.seriesTooltipPaddingHorizontal,r=i.seriesTooltipPaddingVertical;return o.label.setAll({fill:e.color(i.seriesTooltipLabelColor),fontFamily:i.fontFamily,fontSize:i.seriesTooltipFontSize,paddingBottom:r,paddingLeft:n,paddingRight:n,paddingTop:r,textAlign:s?"end":"start",direction:"ltr"}),o.get("background")?.setAll({stroke:void 0,fill:e.color(i.seriesTooltipBackgroundColor)}),o.adapters.add("dy",t=>{const e=i.seriesTooltipSpacing,s=o.get("pointTo")?.y??0;return(t??0)+(o.y()>s?e:-e)}),o}function Y(t){const e=Math.abs((t.get("end")??0)-(t.get("start")??0)),i=0!==e?1/e:1;return Math.abs(1-i)<S()?1:i}function V(t,e,i,s,o){return(e+t*(i-e)-s)/(o-s)}function H({y:t},{y:e}){return null==t?1:null==e?-1:e-t}function O(t){return t.positionToValue(t.get("start")??0)}function R(t){return t.positionToValue(t.get("end")??1)}function B(t,e){const i=t.title;if(null!=i)return i;switch(t.type){case"ground":return e.profiles.ground;case"input":return e.profiles.input;case"query":return e.profiles.query;case"scene":return e.profiles.scene;default:return""}}function E(t){const e=t?.closest("[dir]");return null!==e&&e instanceof HTMLElement&&"rtl"===e.dir||"rtl"===document.dir}function G(t){return g(t.map(W))}function W(t){return f(()=>t?.dispose())}t([b()],j.prototype,"view",void 0),t([b()],j.prototype,"analysisView",void 0),t([b()],j.prototype,"container",void 0),t([b()],j.prototype,"messages",void 0),t([b()],j.prototype,"onRangeChange",void 0),t([b()],j.prototype,"onCursorPositionChange",void 0),t([b()],j.prototype,"uniformScaling",void 0),t([b()],j.prototype,"chartVisible",null),t([b()],j.prototype,"spinnerVisible",null),t([b()],j.prototype,"test",void 0),t([b()],j.prototype,"_theme",void 0),t([b()],j.prototype,"_data",void 0),t([b()],j.prototype,"_seriesInfos",void 0),t([b()],j.prototype,"_pointerIsOver",void 0),t([b()],j.prototype,"_rtl",void 0),t([b()],j.prototype,"_chartInfo",void 0),t([b()],j.prototype,"_unitsMessages",void 0),t([b()],j.prototype,"_updateParameters",null),t([b()],j.prototype,"_chartData",null),t([b()],j.prototype,"_hasGeometry",null),t([b()],j.prototype,"_lineData",null),j=t([M("esri.views.analysis.ElevationProfile.ElevationProfileChart")],j);export{j as ElevationProfileChart};