@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 4.18 kB
JavaScript
import{r as t,h as a,g as n}from"./p-ff68592a.js";import{g as r}from"./p-a4e6e35b.js";function s(t){return t<0?-1:1}function i(t,a,n){const r=a[0]-t[0];return r?(3*(a[1]-t[1])/r-n)/2:n}function e(t,a,n,r,s){const[i,e]=t,[o,h]=a,c=(o-i)/3;return`C ${s([i+c,e+c*n]).join(",")} ${s([o-c,h-c*r]).join(",")} ${s([o,h]).join(",")}`}const o=class{constructor(a){t(this,a),this.data=[],this.width=300,this.height=100,this.maskId="calcite-graph-mask-"+r()}render(){const{data:t,width:n,height:r,highlightMax:o,highlightMin:h}=this,c=this.maskId;if(!t||0===t.length)return a("svg",{class:"svg",height:r,preserveAspectRatio:"none",viewBox:`0 0 ${n} ${r}`,width:n});const{min:m,max:p}=function(t){const[a,n]=t[0];return t.reduce((({min:t,max:a},[n,r])=>({min:[Math.min(t[0],n),Math.min(t[1],r)],max:[Math.max(a[0],n),Math.max(a[1],r)]})),{min:[a,n],max:[a,n]})}(t),l=function({width:t,height:a,min:n,max:r}){const s=r[0]-n[0],i=r[1]-n[1];return n=>[n[0]/s*t,a-n[1]/i*a]}({min:m,max:p,width:n,height:r}),[f]=l([h,p[1]]),[$]=l([o,p[1]]),d=function({data:t,min:a,max:n,t:r}){if(0===t.length)return"";const[o,h]=r(t[0]),[c,m]=r(a),[p]=r(n);let l,f,$;const d=t.reduce(((a,n,o)=>{if(f=t[o-2],$=t[o-1],o>1){const t=function(t,a,n){const r=a[0]-t[0],i=n[0]-a[0],e=(a[1]-t[1])/(r||i<0&&0),o=(n[1]-a[1])/(i||r<0&&0),h=(e*i+o*r)/(r+i);return(s(e)+s(o))*Math.min(Math.abs(e),Math.abs(o),.5*Math.abs(h))||0}(f,$,n),o=void 0===l?i(f,$,t):l,h=e(f,$,o,t,r);return l=t,`${a} ${h}`}return a}),`M ${c},${m} L ${c},${h} L ${o},${h}`),g=t[t.length-1];return`${d} ${e($,g,l,i($,g,l),r)} L ${p},${m} Z`}({data:t,min:m,max:p,t:l});return a("svg",{class:"svg",height:r,preserveAspectRatio:"none",viewBox:`0 0 ${n} ${r}`,width:n},void 0!==h?a("svg",{class:"svg",height:r,preserveAspectRatio:"none",viewBox:`0 0 ${n} ${r}`,width:n},a("mask",{height:"100%",id:c+"1",width:"100%",x:"0%",y:"0%"},a("path",{d:`\n M 0,0\n L ${f-1},0\n L ${f-1},${r}\n L 0,${r}\n Z\n `,fill:"white"})),a("mask",{height:"100%",id:c+"2",width:"100%",x:"0%",y:"0%"},a("path",{d:`\n M ${f+1},0\n L ${$-1},0\n L ${$-1},${r}\n L ${f+1}, ${r}\n Z\n `,fill:"white"})),a("mask",{height:"100%",id:c+"3",width:"100%",x:"0%",y:"0%"},a("path",{d:`\n M ${$+1},0\n L ${n},0\n L ${n},${r}\n L ${$+1}, ${r}\n Z\n `,fill:"white"})),a("path",{class:"graph-path",d,mask:`url(#${c}1)`}),a("path",{class:"graph-path--highlight",d,mask:`url(#${c}2)`}),a("path",{class:"graph-path",d,mask:`url(#${c}3)`})):a("path",{class:"graph-path",d}))}get el(){return n(this)}};o.style="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}.svg{fill:currentColor;stroke:transparent;margin:0;padding:0;display:block}";export{o as calcite_graph}