@doegis/core/widgets/ElevationProfile/support/chartUtils.js

DOE GIS API

import"../../../intl.js";import{binaryFindClosest as i}from"../../../core/arrayUtils.js";import t from"../../../core/Error.js";import{handlesGroup as e,makeHandle as o}from"../../../core/handleUtils.js";import{isNone as n,applySome as a,isSome as s,unwrapOr as r}from"../../../core/maybe.js";import{throwIfAborted as l}from"../../../core/promiseUtils.js";import{formatDecimal as d,unitName as c}from"../../../core/unitFormatUtils.js";import{convertUnit as m}from"../../../core/unitUtils.js";import{CHART_CSS as x}from"../css.js";import{getConfig as u,NOT_AVAILABLE as p}from"./constants.js";import{getTranslatedLineTitle as f}from"./intlUtils.js";import{niceScale as g}from"./niceScale.js";import{loadChartsModule as h}from"../../support/chartUtils.js";import{isRTL as b}from"../../support/widgetUtils.js";import{isDarkTheme as v}from"../../../support/themeUtils.js";import{substitute as T}from"../../../intl/substitute.js";import{formatNumber as A}from"../../../intl/number.js";const C="#f8f8f8",y="#a9a9a9",L="#323232",z="line",k="fill",P=15,S=12,w=30,F=.001,M=.5,Y=.5,X=30,I=.02,W=.02,j={sideSpacing:P,paddingBottom:0,paddingLeft:0,paddingRight:0,paddingTop:0,axisFontSize:9,axisFontWeight:"400",axisGridStroke:"#f4f4f4",axisLabelsFontSize:9,axisLabelsFontWeight:"400",axisLabelsColor:y,axisTooltipFontSize:12,axisTooltipBackgroundColor:L,axisTooltipLabelColor:C,axisTooltipPaddingTop:Math.round(S/4),axisTooltipPaddingBottom:Math.round(S/4),axisTooltipPaddingHorizontal:Math.round(P/4),xAxisMinGridDistance:50,xAxisLabelsSpacing:Math.round(S/2),xAxisMinLabelPosition:.05,xAxisMaxLabelPosition:.9,yAxisMinGridDistance:30,yAxisLabelSpacing:Math.round(P/4),yAxisMinLabelPosition:0,yAxisMaxLabelPosition:.8,seriesTooltipFontSize:12,seriesTooltipBackgroundColor:C,seriesTooltipLabelColor:L,seriesFillLighten:.9,seriesTooltipSpacing:S/2,seriesTooltipPaddingVertical:Math.round(P/4),seriesTooltipPaddingHorizontal:Math.round(P/4),tooltipBorderRadius:0},H={...j,axisGridStroke:L,axisLabelsColor:y,axisTooltipBackgroundColor:L,axisTooltipLabelColor:C,seriesTooltipBackgroundColor:L,seriesTooltipLabelColor:C,seriesFillLighten:-.75},D={minX:void 0,maxX:void 0,minY:void 0,maxY:void 0};async function E(i){const o=await h();if(!o)throw new t("elevation-profile:load-failed","Could not load amCharts");const{am4core:a,am4charts:s}=o;l(i.abortOptions);const{options:r}=a;r.minPolylineStep=M,r.autoSetClassName=!0,r.animationsEnabled=!1;const d=v(),c=d?H:j;d&&a.useTheme(o.am4themes_dark);const m=a.create(i.container,s.XYChart);m.arrangeTooltips=!1,m.preloader.disabled=!0,m.zoomOutButton.disabled=!0;const x=b(i.container);m.rtl=x,m.padding(c.paddingTop,x?c.paddingLeft:c.paddingRight,c.paddingBottom,x?c.paddingRight:c.paddingLeft);const u=m.plotContainer.background;u.strokeWidth=0,u.strokeOpacity=0,u.stroke=null;const p=m.xAxes.push(new s.ValueAxis),f=m.yAxes.push(new s.ValueAxis),g={params:i,amCharts4Index:o,amChart:m,xAxis:p,yAxis:f,series:new Map,data:null,messages:null,theme:c,zooming:!1,pointerIsOver:!1};m.cursor=O(g),U(g),B(g),G(g);const T=[ii(g,i.onRangeChange),ei(g,i.onCursorPositionChange),ti(g)];let A=null,C=!1;const y=()=>{n(A)||("undefined"!=typeof window&&"cancelIdleCallback"in window?window.cancelIdleCallback(A):clearTimeout(A),A=null)};return{...g,destroy(){C=!0,y(),e(T).remove(),m.dispose()},update(i){if(i.data===g.data&&i.messages===g.messages)return;if(y(),C)return;const t=()=>{C||(A=null,R(g,i))};A="undefined"!=typeof window&&"requestIdleCallback"in window?window.requestIdleCallback(t,{timeout:X}):setTimeout(t,X)},zoomOut(){C||(g.yAxis.zoom({start:0,end:1},!1,!0),g.xAxis.zoom({start:0,end:1},!1,!0))}}}function O(i){const t=new i.amCharts4Index.am4charts.XYCursor;return t.trackable=!0,t.lineY.disabled=!0,t.behavior="zoomXY",t}function U(i){const t=i.theme,e=i.amChart.tooltip,{am4core:o}=i.amCharts4Index;e.id="series-tooltip",e.fitPointerToBounds=!0,e.pointerOrientation="vertical",e.zIndex=-1,e.getFillFromObject=!1,e.label.fontSize=t.seriesTooltipFontSize,e.label.fill=o.color(t.seriesTooltipLabelColor),e.label.padding(t.seriesTooltipPaddingVertical,t.seriesTooltipPaddingHorizontal,t.seriesTooltipPaddingVertical,t.seriesTooltipPaddingHorizontal),e.background.cornerRadius=t.tooltipBorderRadius,e.background.stroke=null,e.background.fill=o.color(t.seriesTooltipBackgroundColor),e.background.padding(0,0,0,0),e.adapter.add("dy",(()=>t.seriesTooltipSpacing*(e.background.pointerY<=0?1:-1))),b(i.params.container)&&(e.label.textAlign="middle")}function B(i){const{xAxis:t,theme:e}=i,{am4core:o}=i.amCharts4Index;t.numberFormatter=di(i,"distance"),t.strictMinMax=!0,t.cursorTooltipEnabled=!1,t.title.visible=!1;const n=t.renderer;n.line.visible=!1,n.minGridDistance=e.xAxisMinGridDistance,n.minLabelPosition=e.xAxisMinLabelPosition,n.maxLabelPosition=e.xAxisMaxLabelPosition,n.fontWeight=e.axisFontWeight,n.fontSize=e.axisFontSize,n.baseGrid.disabled=!0;const a=n.labels.template;a.fontSize=e.axisLabelsFontSize,a.fontWeight=e.axisLabelsFontWeight,a.fill=o.color(e.axisLabelsColor),a.paddingTop=e.xAxisLabelsSpacing,a.horizontalCenter="left",a.paddingLeft=0;const s=t.tooltip;s.id="axis-tooltip",s.background.fill=o.color(e.axisTooltipBackgroundColor),s.background.stroke=null,s.background.padding(0,0,0,0),s.label.fontSize=e.axisTooltipFontSize,s.label.fill=o.color(e.axisTooltipLabelColor),s.label.padding(e.axisTooltipPaddingTop,e.axisTooltipPaddingHorizontal,e.axisTooltipPaddingBottom,e.axisTooltipPaddingHorizontal);const r=n.grid.template;r.strokeOpacity=1,r.stroke=o.color(e.axisGridStroke)}function G(i){const{yAxis:t,theme:e}=i,{am4core:o}=i.amCharts4Index;t.numberFormatter=di(i,"elevation"),t.title.visible=!1,t.cursorTooltipEnabled=!1,t.strictMinMax=!0,t.baseValue=u().noDataValue;const n=t.renderer;n.inside=!0,n.line.opacity=0,n.line.visible=!1,n.minGridDistance=e.yAxisMinGridDistance,n.minLabelPosition=e.yAxisMinLabelPosition,n.maxLabelPosition=e.yAxisMaxLabelPosition,n.fontWeight=e.axisFontWeight,n.fontSize=e.axisFontSize,n.baseGrid.disabled=!0;const a=n.labels.template;a.fontSize=e.axisLabelsFontSize,a.fontWeight=e.axisLabelsFontWeight,a.fill=o.color(e.axisLabelsColor),a.verticalCenter="bottom",a.paddingLeft=e.yAxisLabelSpacing,a.paddingBottom=0;const s=n.grid.template;s.strokeOpacity=1,s.stroke=o.color(e.axisGridStroke),b(i.params.container)&&(n.opposite=!0,a.textAlign="middle",a.paddingLeft=0,a.paddingRight=e.yAxisLabelSpacing)}function R(i,{data:t,messages:e}){const{htmlContainer:o}=i.amChart;if(!o)return;const n=s(t)&&t.refined;i.amChart.cursor.disabled=!n,o.classList.toggle(x.cursorEnabled,n);const r=i.data!==t,l=a(i.data,(i=>i.effectiveUnits))!==a(t,(i=>i.effectiveUnits));i.data=t,i.messages=e,r&&(V(i),N(i)),l&&(i.yAxis.invalidateLabels(),i.xAxis.invalidateLabels()),ni(i)}function V(i){const{xAxis:t,yAxis:e}=i,{minX:o,maxX:n,minY:a,maxY:s}=Z({data:i.data,pixelWidth:t.pixelWidth,pixelHeight:e.pixelHeight});t.min=o,t.max=n,e.min=a,e.max=s}function Z({data:i,pixelWidth:t,pixelHeight:e}){if(n(i))return D;const o=i.statistics,s=0,r=a(o,(i=>i.maxDistance));let l=a(o,(i=>i.minElevation)),d=a(o,(i=>i.maxElevation));if(n(r)||n(l)||n(d))return D;const c=Math.max(r-s,F);let x=Math.max(d-l,F);const p=i.effectiveUnits;if(i.dynamicElevationRange){const i=m(c,p.distance,p.elevation);x=Math.max(x,i/u().maxChartRatio)}return l-=W*x,d=l+x+I*x,[l,d]=g(l,d,10),x=d-l,i.uniformScaling?$({data:i,bounds:{minX:s,maxX:r,minY:l,maxY:d},pixelWidth:t,pixelHeight:e,centered:!0}):{minX:s,maxX:s+c,minY:l,maxY:l+x}}function $({data:i,bounds:t,pixelWidth:e,pixelHeight:o,centered:a}){if(n(i))return t;let{minX:s,maxX:r,minY:l,maxY:d}=t;if(null==s||null==r||null==l||null==d)return D;const c=r-s,x=d-l,u=i.effectiveUnits,p=m(x,u.elevation,u.distance)/o/(c/e);return p>=1?[s,r]=q([s,r],p,a):[l,d]=q([l,d],1/p,a),{minX:s,maxX:r,minY:l,maxY:d}}function q([i,t],e,o){const n=(t-i)*e;if(o){const e=(i+t)/2-n/2;return[e,e+n]}return[i,i+n]}function N(i){const{amChart:t,data:e}=i;if(n(e)||0===e.lines.length)return void t.series.clear();const o=new Map,s=new Set(t.series.values),r=e.lines.length;for(let n=0;n<r;n++){const l=e.lines[n];let d=i.series.get(l.id);d?(a(d.fill,(i=>s.delete(i))),s.delete(d.line)):(d=K(i,l),a(d.fill,(i=>t.series.push(i))),t.series.push(d.line)),o.set(d.id,d);const c=r-n-1;a(d.fill,(i=>i.zIndex=c)),d.line.zIndex=r+c,_(i,d,l)}i.series=o;for(const n of s)t.series.removeValue(n)}function _(i,{line:t,fill:e},o){const{theme:n}=i,{am4core:l}=i.amCharts4Index,{r:d,g:c,b:m,a:x}=o.color,u=l.color({r:d,g:c,b:m,a:x}),p=r(o.samples,new Array),f=p.length>0;t.stroke=u,t.visible=f,a(e,(i=>{i.visible=f,i.fill=u.lighten(n.seriesFillLighten)}));const g=p.length,h=t.data;if(h.length===g){let i=!1;for(let t=0;t<g;++t){const e=h[t],o=p[t];i=i||s(e.elevation)!==s(o.elevation),J(e,o)}i?(t.invalidateData(),a(e,(i=>i.invalidateData()))):(t.invalidateRawData(),a(e,(i=>i.invalidateRawData())))}else t.data=p,a(e,(i=>i.data=p))}function J(i,t){i.x=t.x,i.y=t.y,i.z=t.z,i.distance=t.distance,i.elevation=t.elevation}function K(i,t){const{id:e}=t,o=Q(i,`${z}-${e}`);o.strokeWidth=t.chartStrokeWidth,o.dy=t.chartStrokeOffsetY;let n=null;return t.chartFillEnabled&&(n=Q(i,`${k}-${e}`),n.fillOpacity=1),{id:e,line:o,fill:n}}function Q(i,t){const e=new i.amCharts4Index.am4charts.LineSeries;e.id=t,e.showOnInit=!1,e.simplifiedProcessing=!0,e.minDistance=Y,e.excludeFromTotal=!0,e.clickable=!1,e.contextMenuDisabled=!0,e.cursorHoverEnabled=!1,e.cursorTooltipEnabled=!1,e.connect=!1,e.fill=null,e.stroke=null;const o="distance";e.dataFields.valueX=o;const n="elevation";return e.dataFields.valueY=n,e}function ii(i,t){const{amChart:e,xAxis:a,yAxis:s}=i;let r=!1;const l=()=>{const{data:t}=i;if(!r||n(t)||!t.uniformScaling)return;r=!1;const{minX:o,maxX:l,minY:d,maxY:c}=$({data:i.data,bounds:{minX:a.minZoomed,maxX:a.maxZoomed,minY:s.minZoomed,maxY:s.maxZoomed},pixelWidth:a.pixelWidth,pixelHeight:s.pixelHeight,centered:!0});null!=o&&null!=l&&a.zoomToValues(o,l,!0),null!=d&&null!=c&&s.zoomToValues(d,c,!0),e.validate(),ni(i)},d=()=>{t(i.xAxis.zoomFactor,i.yAxis.zoomFactor)},c=t=>{i.zooming=t,ni(i)},m=[e.events.on("down",(()=>c(!0))),e.events.on("up",(()=>c(!1))),e.cursor.events.on("zoomended",(()=>{r=!0})),a.events.on("startendchanged",l),s.events.on("startendchanged",l),a.events.on("rangechangeended",d),s.events.on("rangechangeended",d)];return o((()=>{m.forEach((i=>i.dispose()))}))}function ti({xAxis:i,yAxis:t}){const e=i=>()=>{i.renderer.grid.each((i=>{i.visible="none"!==i.dataItem.label.dom.getAttribute("display")}))},n=[i.events.on("rangechangeended",e(i)),i.events.on("validated",e(i)),t.events.on("rangechangeended",e(t)),t.events.on("validated",e(t))];return o((()=>{n.forEach((i=>i.dispose()))}))}function ei(i,t){const{amChart:e,xAxis:n,yAxis:a}=i,{cursor:r,events:l}=e,d=t=>{i.pointerIsOver=t,ni(i)},c=()=>{d(!1),t(null,null)},m=[r.events.on("cursorpositionchanged",(()=>{if(!i.pointerIsOver)return;ni(i);let e=n.toAxisPosition(r.xPosition),o=a.toAxisPosition(r.yPosition);const l=i.data;if(s(l)&&s(l.statistics)){const{maxDistance:i,minElevation:t,maxElevation:r}=l.statistics;s(i)&&(e=oi(e,n.minZoomed,n.maxZoomed,0,i)),s(t)&&s(r)&&(o=oi(o,a.minZoomed,a.maxZoomed,t,r))}t(e,o)})),l.on("over",(()=>d(!0))),l.on("out",c),l.on("blur",c)];return o((()=>{m.forEach((i=>i.dispose()))}))}function oi(i,t,e,o,n){return(t+i*(e-t)-o)/(n-o)}function ni(i){const{amChart:t,xAxis:e,data:o,theme:a,zooming:r,pointerIsOver:l}=i;if(i.amChart.tooltip.hide(),i.xAxis.hideTooltip(),!l)return;if(r)return;if(n(o)||!o.refined)return;const d=ai(i);if(s(d)){const{cursor:o}=t,n=t.tooltip;o.show(0),o.validate(),n.text=d.text,n.show(0),n.validate();const s=d.y-n.contentHeight-a.seriesTooltipSpacing;n.pointerOrientation=s<w?"up":"down",n.pointTo(d,!0),n.validate();const r=e.tooltip;r.text=li(i),r.show(0),r.validate()}}function ai(i){const{amChart:t,yAxis:e,data:o}=i;if(n(o))return null;const s=o.lines.map((t=>({line:t,y:a(ci(i,t),(i=>i.elevation))}))).sort(si),r=s.length?s[0].y:null;if(n(r))return null;const l=t.cursor,d=e.measuredHeight,c=d+t.pixelPaddingTop;return{text:s.map((({y:t,line:e})=>ri(i,e,t))).join("\n"),x:l.point.x+l.parent.pixelX+t.pixelPaddingLeft,y:c-e.valueToPosition(r)*d}}function si({y:i},{y:t}){return n(i)?1:n(t)?-1:t-i}function ri(i,t,e){const{data:o,messages:a}=i;if(n(o)||n(a))return"";const r=u().formatPrecision,l=T(a.chartTooltip,{name:f(t,a),elevation:s(e)?d(a,e,o.effectiveUnits.elevation,r):p});return`[${t.color.toHex()}]●[/] ${l}`}function li(i){const{data:t,messages:e}=i;if(n(t)||n(e))return"";const o=t.lines[0],a=o?ci(i,o):null,r=u().formatPrecision;return s(a)?d(e,a.distance,t.effectiveUnits.distance,r):"-"}function di(i,t){const e=i.xAxis.numberFormatter.clone();return e.format=(e,o,a)=>{const{messages:s,data:r}=i;if(n(s)||n(r)||"string"==typeof e)return"";return`${A(e,{maximumFractionDigits:a})} ${c(s,r.effectiveUnits[t],"abbr")}`},e}function ci({amChart:t,xAxis:e},o){const n=r(o.samples,[]);if(0===n.length)return null;const a=e.toAxisPosition(t.cursor.xPosition),s=e.positionToValue(a);return i(n,s,(i=>i.distance))}export{E as createChart,Z as getAdjustedBounds};