UNPKG

@arcgis/core

Version:

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

js.arcgis.com

3 lines (2 loc) • 12.1 kB
1
2
3
/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */ import*as t from"@amcharts/amcharts5/index.js";import{XYChart as i,ValueAxis as e,AxisRendererX as o,AxisRendererY as n,XYCursor as s,LineSeries as a}from"@amcharts/amcharts5/xy.js";import l from"@amcharts/amcharts5/themes/Dark.js";import r from"@amcharts/amcharts5/themes/Responsive.js";import{formatNumber as d,substitute as c}from"../../../intl.js";import{handlesGroup as p,makeHandle as m}from"../../../core/handleUtils.js";import"../../../core/has.js";import{throwIfAborted as u}from"../../../core/promiseUtils.js";import{signal as x}from"../../../core/signal.js";import{unitName as f,formatDecimal as g}from"../../../core/unitFormatUtils.js";import{convertUnit as h}from"../../../core/units.js";import{getEpsilon as v}from"../../../core/libs/gl-matrix-2/math/common.js";import{isDarkMode as A}from"../../../support/modeUtils.js";import{getConfig as y,notAvailable as b}from"./constants.js";import{getTranslatedLineTitle as T}from"./intlUtils.js";import{niceScale as L}from"./niceScale.js";import{binaryFindClosest as M}from"./profileUtils.js";import{createRoot as S}from"../../support/chartUtilsAm5.js";import{isRTL as F}from"../../support/widget.js";const P="#f8f8f8",C="#a9a9a9",X="#323232",Y="line",z="fill",k=15,w=12,j=.001,B=.1,R=.02,D={fontFamily:"Avenir Next",paddingBottom:w/2,paddingLeft:0,paddingRight:0,paddingTop:0,axisGridStroke:"#f4f4f4",axisLabelsFontSize:9,axisLabelsFontWeight:"400",axisLabelsColor:C,axisTooltipFontSize:12,axisTooltipBackgroundColor:X,axisTooltipLabelColor:P,axisTooltipPaddingTop:Math.round(w/4),axisTooltipPaddingBottom:Math.round(w/4),axisTooltipPaddingHorizontal:Math.round(k/4),xAxisMinGridDistance:50,xAxisLabelsSpacing:Math.round(w/2),xAxisMinLabelPosition:.05,xAxisMaxLabelPosition:.9,yAxisMinGridDistance:30,yAxisLabelSpacing:Math.round(k/4),yAxisMinLabelPosition:0,yAxisMaxLabelPosition:.8,seriesTooltipFontSize:12,seriesTooltipBackgroundColor:P,seriesTooltipLabelColor:X,seriesFillLighten:.9,seriesTooltipSpacing:w/2,seriesTooltipPaddingVertical:Math.round(k/4),seriesTooltipPaddingHorizontal:Math.round(k/4)},H={...D,axisGridStroke:X,axisLabelsColor:C,axisTooltipBackgroundColor:X,axisTooltipLabelColor:P,seriesTooltipBackgroundColor:X,seriesTooltipLabelColor:P,seriesFillLighten:-.75},U={minX:void 0,maxX:void 0,minY:void 0,maxY:void 0};async function O(t){const s=await S(t.container);u(t.abortOptions);const a=A(t.container),d=a?H:D;s.setThemes(a?[r.new(s),l.new(s)]:[r.new(s)]);const c=F(t.container),m=s.container.children.push(i.new(s,{panX:!0,panY:!0,paddingTop:d.paddingTop,paddingBottom:d.paddingBottom,paddingLeft:c?d.paddingRight:d.paddingLeft,paddingRight:c?d.paddingLeft:d.paddingRight,maxTooltipDistance:-1}));m.zoomOutButton.set("forceHidden",!0);const f=m.xAxes.push(e.new(s,{renderer:o.new(s,{})})),g=m.yAxes.push(e.new(s,{renderer:n.new(s,{})})),h=x(null),v=x("loading"),y={params:t,chart:m,xAxis:f,yAxis:g,seriesInfos:new Map,messages:null,theme:d,pointerIsOver:!1,rtl:c,onCursorPositionChange:t.onCursorPositionChange,onRangeChange:t.onRangeChange,get state(){return v.value},get data(){return h.value},set data(t){h.value=t}};E(y),I(y),G(y);const b=p([et(y),nt(y),ht(s.events.once("frameended",()=>{v.value="ready"})),ht(s)]);let T;return{destroy:()=>{b.remove(),v.value="destroyed"},update:t=>{t.data===y.data&&t.messages===y.messages||W(y)||V(y,t)},zoomOut:()=>$(y),test:T}}function W(t){return"destroyed"===t.state}function G({chart:t,xAxis:i,yAxis:e}){const o=s.new(t.root,{behavior:"none",xAxis:i,yAxis:e,snapToSeriesBy:"y"});o.lineY.set("visible",!1),t.set("cursor",o)}function E(i){const{chart:e,xAxis:o,theme:n}=i;o.setAll({extraMax:0,extraMin:0,maxDeviation:0,numberFormatter:mt(i,"distance"),strictMinMax:!0,strictMinMaxSelection:!0}),o.axisHeader.set("forceHidden",!0);const s=o.get("renderer");s.setAll({inside:!1,minGridDistance:n.xAxisMinGridDistance}),s.labels.template.setAll({centerX:t.p0,centerY:t.p0,fill:t.color(n.axisLabelsColor),fontFamily:n.fontFamily,fontSize:n.axisLabelsFontSize,fontWeight:n.axisLabelsFontWeight,maxPosition:n.xAxisMaxLabelPosition,minPosition:n.xAxisMinLabelPosition,paddingLeft:0,paddingRight:0,paddingTop:n.xAxisLabelsSpacing});const a=o.set("tooltip",t.Tooltip.new(e.root,{paddingBottom:0,paddingLeft:0,paddingRight:0,paddingTop:0}));a.get("background")?.setAll({fill:t.color(n.axisTooltipBackgroundColor),stroke:void 0}),a.label.setAll({fill:t.color(n.axisTooltipLabelColor),fontFamily:n.fontFamily,fontSize:n.axisTooltipFontSize,paddingBottom:n.axisTooltipPaddingBottom,paddingLeft:n.axisTooltipPaddingHorizontal,paddingRight:n.axisTooltipPaddingHorizontal,paddingTop:n.axisTooltipPaddingTop,direction:i.rtl?"rtl":"ltr"}),s.grid.template.setAll({strokeOpacity:1,stroke:t.color(n.axisGridStroke)})}function I(i){const{yAxis:e,theme:o,rtl:n}=i;e.setAll({baseValue:y().noDataValue,extraMax:0,extraMin:0,maxDeviation:0,numberFormatter:mt(i,"elevation"),strictMinMax:!0,strictMinMaxSelection:!0,tooltip:void 0}),e.axisHeader.set("visible",!1);const s=e.get("renderer");s.setAll({minGridDistance:o.yAxisMinGridDistance,opposite:n,inside:!0}),s.labels.template.setAll({centerX:t.p0,centerY:t.p100,fill:t.color(o.axisLabelsColor),fontFamily:o.fontFamily,fontSize:o.axisLabelsFontSize,fontWeight:o.axisLabelsFontWeight,maxPosition:o.yAxisMaxLabelPosition,minPosition:o.yAxisMinLabelPosition,paddingBottom:0,paddingLeft:n?0:o.yAxisLabelSpacing,paddingRight:n?o.yAxisLabelSpacing:0,paddingTop:0,textAlign:"start"}),s.grid.template.setAll({strokeOpacity:1,stroke:t.color(o.axisGridStroke)})}function V(t,i){if(W(t))return;const e=t.data??void 0,o=i.data??void 0,n=e!==o,s=e?.effectiveUnits!==o?.effectiveUnits,a=e?.uniformScaling!==o?.uniformScaling;t.data=o,t.messages=i.messages,(n||s)&&(N(t),K(t)),a&&$(t),st(t)}function $(t){W(t)||(t.xAxis.zoom(0,1),t.yAxis.zoom(0,1))}function N(t){const{chart:i,data:e,xAxis:o,yAxis:n}=t,{minX:s,maxX:a,minY:l,maxY:r}=Z({data:e,pixelWidth:o.width(),pixelHeight:n.height()}),d=!!e?.uniformScaling,c=!!e?.refined;i.setAll({panX:!0,panY:d,pinchZoomX:c,pinchZoomY:c&&d,wheelX:"panX",wheelY:c?d?"zoomXY":"zoomX":"none"}),o.setAll({max:a,min:s,panX:!0,panY:!1,zoomX:!0,zoomY:d}),n.setAll({max:r,min:l,panX:!1,panY:d,zoomX:d,zoomY:d})}function Z({data:t,pixelWidth:i,pixelHeight:e}){if(null==t)return U;const o=t.statistics,n=0,s=o?.maxDistance;let a=o?.minElevation,l=o?.maxElevation;if(null==s||null==a||null==l)return U;const r=Math.max(s-n,j);let d=Math.max(l-a,j);const c=t.effectiveUnits;if(t.dynamicElevationRange){const t=h(r,c.distance,c.elevation);d=Math.max(d,t/y().maxChartRatio)}return a-=R*d,l=a+d+B*d,[a,l]=L(a,l,10),d=l-a,t.uniformScaling?q({data:t,bounds:{minX:n,maxX:s,minY:a,maxY:l},pixelWidth:i,pixelHeight:e,centered:!0}):{minX:n,maxX:n+r,minY:a,maxY:a+d}}function q({data:t,bounds:i,pixelWidth:e,pixelHeight:o,centered:n}){if(null==t)return i;let{minX:s,maxX:a,minY:l,maxY:r}=i;if(null==s||null==a||null==l||null==r)return U;const d=a-s,c=r-l,p=t.effectiveUnits,m=h(c,p.elevation,p.distance)/o/(d/e);return m>=1?[s,a]=J([s,a],m):[l,r]=J([l,r],1/m),{minX:s,maxX:a,minY:l,maxY:r}}function J([t,i],e,o){const n=(i-t)*e;{const e=(t+i)/2-n/2;return[e,e+n]}}function K(t){const{chart:i,data:e,seriesInfos:o,xAxis:n,yAxis:s}=t;if(null==e||0===e.lines.length)return void i.series.clear();const a=new Map,l=new Set(i.series.values),r=e.lines.length;for(let d=0;d<r;d++){const n=e.lines[d];let s=o.get(n.id);s?(s.fill&&l.delete(s.fill),l.delete(s.line)):(s=_(t,n),s.fill&&i.series.push(s.fill),i.series.push(s.line)),a.set(s.id,s);const c=r-d-1;s.fill?.set("layer",c),s.line.set("layer",r+c),Q(t,s,n)}t.seriesInfos=a;for(const d of l)i.series.removeValue(d);n.set("layer",r+1),s.set("layer",r+2)}function Q({theme:i},e,o){const n=t.color(o.color.toCss()),s=o.samples??[],a=s.length>0,{line:l,fill:r}=e;l.set("visible",a),l.set("stroke",n),r?.set("visible",a),r?.set("fill",t.Color.lighten(n,i.seriesFillLighten)),l.data.setAll(s),r?.data.setAll(s)}function _(t,i){const{id:e}=i,o=tt(t,`${Y}-${e}`);o.setAll({dy:i.chartStrokeOffsetY,tooltip:void 0}),o.strokes.template.setAll({strokeWidth:i.chartStrokeWidth});let n=null;return i.chartFillEnabled&&(n=tt(t,`${z}-${e}`),n.fills.template.setAll({fillOpacity:1,visible:!0})),{id:e,line:o,fill:n}}function tt(t,i){return a.new(t.chart.root,{connect:!1,excludeFromTotal:!0,fill:void 0,id:i,stroke:void 0,valueXField:"distance",valueYField:"elevation",xAxis:t.xAxis,yAxis:t.yAxis})}function it({theme:i,chart:e,rtl:o}){const n=t.Tooltip.new(e.root,{autoTextColor:!1,getFillFromSprite:!1,getLabelFillFromSprite:!1,pointerOrientation:"vertical",visible:!1}),s=i.seriesTooltipPaddingHorizontal,a=i.seriesTooltipPaddingVertical;return n.label.setAll({fill:t.color(i.seriesTooltipLabelColor),fontFamily:i.fontFamily,fontSize:i.seriesTooltipFontSize,paddingBottom:a,paddingLeft:s,paddingRight:s,paddingTop:a,textAlign:o?"end":"start",direction:"ltr"}),n.get("background")?.setAll({stroke:void 0,fill:t.color(i.seriesTooltipBackgroundColor)}),n.adapters.add("dy",t=>{const e=i.seriesTooltipSpacing,o=n.get("pointTo")?.y??0;return(t??0)+(n.y()>o?e:-e)}),n}function et(t){const{xAxis:i,yAxis:e}=t,o=()=>{t.onRangeChange(ot(i),ot(e))},n=t=>[t.on("start",o),t.on("end",o)];return gt([...n(i),...n(e)])}function ot(t){const i=Math.abs((t.get("end")??0)-(t.get("start")??0)),e=0!==i?1/i:1;return Math.abs(1-e)<v()?1:e}function nt(t){const{chart:i}=t,e=i.plotContainer.events,o=i=>{t.pointerIsOver=i,st(t)},n=()=>{o(!1),t.onCursorPositionChange(null,null)};return gt([e.on("pointerover",()=>o(!0)),e.on("pointerout",n),e.on("blur",n)])}function st(t){const{chart:i,data:e,xAxis:o,yAxis:n}=t,a=i.get("cursor");if(!e?.refined)return a?.events.removeType("cursormoved"),a?.dispose(),void i.set("cursor",void 0);if(!a){const e=s.new(i.root,{behavior:"none",xAxis:o,yAxis:n,snapToSeriesBy:"y"});e.lineY.set("visible",!1),e.events.on("cursormoved",at(t)),i.set("cursor",e)}const l=rt(t);l?t.seriesInfos.forEach(i=>{const e=i.line.get("tooltip")??it(t);e.label.set("text",l),i.line.set("tooltip",e)}):t.seriesInfos.forEach(t=>{t.line.get("tooltip")?.dispose(),t.line.set("tooltip",void 0)});t.xAxis.getTooltip().setAll({tooltipText:pt(t)})}function at(t){return()=>{if(!t.pointerIsOver)return;st(t);const{chart:i,xAxis:e,yAxis:o}=t,n=i.get("cursor");let s=n?.getPrivate("positionX")??0,a=n?.getPrivate("positionY")??0;const l=t.data;if(null!=l?.statistics){const{maxDistance:t,minElevation:i,maxElevation:n}=l.statistics;let r,d;if(null!=t){1===ot(e)?(r=0,d=t):(r=xt(e),d=ft(e)),s=lt(s,r,d,0,t)}if(null!=i&&null!=n){1===ot(o)?(r=i,d=n):(r=xt(o),d=ft(o)),a=lt(a,r,d,i,n)}}t.onCursorPositionChange(s,a)}}function lt(t,i,e,o,n){return(i+t*(e-i)-o)/(n-o)}function rt(t){const{data:i}=t,e=i?.lines.map(i=>({line:i,y:ut(t,i)?.elevation})).sort(dt);return e&&0!==e.length&&null!=e[0].y?e.map(({y:i,line:e})=>ct(t,e,i)).join("\n"):null}function dt({y:t},{y:i}){return null==t?1:null==i?-1:i-t}function ct(t,i,e){const{data:o,messages:n}=t;if(null==o||null==n)return"";const s=`[${i.color.toHex()}]●[/]`,a=" ",l=y().formatPrecision,r=c(n.chartTooltip,{name:T(i,n),elevation:null!=e?g(n,e,o.effectiveUnits.elevation,l):b});return t.rtl?r+a+s:s+a+r}function pt(t){const{data:i,messages:e}=t;if(null==i||null==e)return"";const o=i.lines[0],n=o?ut(t,o):null,s=y().formatPrecision;return null!=n?g(e,n.distance,i.effectiveUnits.distance,s):"-"}function mt(i,e){const o=t.NumberFormatter.new(i.chart.root,{});return o.format=(t,o,n)=>{const{data:s,messages:a}=i;if(null==a||null==s||"string"==typeof t)return"";return`${d(t,{maximumFractionDigits:n})} ${f(a,s.effectiveUnits[e],"abbr")}`},o}function ut({chart:t,xAxis:i},e){const o=e.samples??[];if(0===o.length)return null;const n=t.get("cursor"),s=n?.getPrivate("positionX")??0,a=i.toAxisPosition(s),l=i.positionToValue(a);return M(o,l,t=>t.distance)}function xt(t){return t.positionToValue(t.get("start")??0)}function ft(t){return t.positionToValue(t.get("end")??1)}function gt(t){return p(t.map(ht))}function ht(t){return m(()=>{t?.dispose()})}export{O as createChart,Z as getAdjustedBounds};