UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

23 lines (22 loc) 4.3 kB
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details. v3.2.1 */ import{a as S}from"./M7EAHGE3.js";import{a as N}from"./NNVH7JUI.js";import{E as P,F as f,H as l,R as X,c as C,d as w,e as d}from"./BJZTU5BQ.js";function H(n,e,r){let s=e[0]-n[0],o=r[0]-e[0],c=e[1]-n[1],h=r[1]-e[1],a=c/(s||o<0&&0),i=h/(o||s<0&&0),t=(a*o+i*s)/(s+o);return(Math.sign(a)+Math.sign(i))*Math.min(Math.abs(a),Math.abs(i),.5*Math.abs(t))||0}function O(n,e,r){let s=e[0]-n[0],o=e[1]-n[1];return s?(3*o/s-r)/2:r}function Y(n,e,r,s,o){let[c,h]=n,[a,i]=e,t=(a-c)/3,$=o([c+t,h+t*r]).join(","),g=o([a-t,i-t*s]).join(","),m=o([a,i]).join(",");return`C ${$} ${g} ${m}`}function A({width:n,height:e,min:r,max:s}){let o=s[0]-r[0],c=s[1]-r[1];return h=>{let a=(h[0]-r[0])/o*n,i=e-(h[1]-r[1])/c*e;return[a,i]}}function B(n){let[e,r]=n[0],s=[e,r],o=[e,r];return n.reduce(({min:c,max:h},[a,i])=>({min:[Math.min(c[0],a),Math.min(c[1],i)],max:[Math.max(h[0],a),Math.max(h[1],i)]}),{min:s,max:o})}function E({data:n,min:e,max:r,t:s}){if(n.length===0)return"";let[o,c]=s(n[0]),[h,a]=s(e),[i]=s(r),t,$,g,m=n.reduce((v,M,p)=>{if($=n[p-2],g=n[p-1],p>1){let u=H($,g,M),b=t===void 0?O($,g,u):t,L=Y($,g,b,u,s);return t=u,`${v} ${L}`}return v},`M ${h},${a} L ${h},${c} L ${o},${c}`),k=n[n.length-1],x=Y(g,k,t,O(g,k,t),s);return`${m} ${x} L ${i},${a} Z`}var I=C`:host{display:block;block-size:100%}.svg{fill:currentColor;stroke:transparent;margin:0;display:block;block-size:100%;inline-size:100%;padding:0}.svg .graph-path--highlight{fill:var(--calcite-graph-highlight-fill-color, var(--calcite-color-brand));opacity:.5}:host([hidden]){display:none}[hidden]{display:none}`,y={svg:"svg",graphPath:"graph-path",graphPathHighlight:"graph-path--highlight"},z=class extends P{constructor(){super(...arguments),this.graphId=`calcite-graph-${N()}`,this.resizeObserver=S("resize",()=>this.requestUpdate()),this.data=[]}static{this.properties={colorStops:[0,{},{attribute:!1}],data:[0,{},{attribute:!1}],highlightMax:[9,{},{type:Number}],highlightMin:[9,{},{type:Number}],max:[11,{},{reflect:!0,type:Number}],min:[11,{},{reflect:!0,type:Number}]}}static{this.styles=I}connectedCallback(){super.connectedCallback(),this.resizeObserver?.observe(this.el)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}render(){let{data:e,colorStops:r,el:s,highlightMax:o,highlightMin:c,min:h,max:a}=this,i=this.graphId,{clientHeight:t,clientWidth:$}=s;if(!e||e.length===0)return w`<svg aria-hidden=true class=${f(y.svg)} height=${t??l} preserveAspectRatio=none viewBox=${`0 0 ${$} ${t}`} width=${$??l}></svg>`;let{min:g,max:m}=B(e),k=g,x=m;(h<g[0]||h>g[0])&&(k=[h,0]),(a>m[0]||a<m[0])&&(x=[a,m[1]]);let v=A({min:k,max:x,width:$,height:t}),[M]=v([c,x[1]]),[p]=v([o,x[1]]),u=E({data:e,min:g,max:m,t:v}),b=r?`url(#linear-gradient-${i})`:void 0;return w`<svg aria-hidden=true class=${f(y.svg)} height=${t??l} preserveAspectRatio=none viewBox=${`0 0 ${$} ${t}`} width=${$??l}>${r?d`<defs><linearGradient .id=${`linear-gradient-${i}`} x1=0 x2=1 y1=0 y2=0>${r.map(({offset:L,color:Z,opacity:j})=>d`<stop offset=${`${L*100}%`} stop-color=${Z??l} stop-opacity=${j??l} />`)}</linearGradient></defs>`:null}${c!==void 0?[d`<mask height=100% .id=${`${i}1`} width=100% x=0% y=0%><path d=${` M 0,0 L ${M-1},0 L ${M-1},${t} L 0,${t} Z `} fill=white /></mask>`,d`<mask height=100% .id=${`${i}2`} width=100% x=0% y=0%><path d=${` M ${M+1},0 L ${p-1},0 L ${p-1},${t} L ${M+1}, ${t} Z `} fill=white /></mask>`,d`<mask height=100% .id=${`${i}3`} width=100% x=0% y=0%><path d=${` M ${p+1},0 L ${$},0 L ${$},${t} L ${p+1}, ${t} Z `} fill=white /></mask>`,d`<path class=${f(y.graphPath)} d=${u??l} fill=${b??l} mask=${`url(#${i}1)`} />`,d`<path class=${f(y.graphPathHighlight)} d=${u??l} fill=${b??l} mask=${`url(#${i}2)`} />`,d`<path class=${f(y.graphPath)} d=${u??l} fill=${b??l} mask=${`url(#${i}3)`} />`]:d`<path class=${f(y.graphPath)} d=${u??l} fill=${b??l} />`}</svg>`}};X("calcite-graph",z);export{z as Graph};