@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 4.86 kB
JavaScript
import{r as registerInstance,h,g as getElement}from"./index-8fd57462.js";import{g as guid}from"./guid-09142681.js";function sign(a){return a<0?-1:1}function slope(a,t,r){var e=t[0]-a[0];var n=r[0]-t[0];var i=t[1]-a[1];var s=r[1]-t[1];var h=i/(e||n<0&&0);var o=s/(n||e<0&&0);var l=(h*n+o*e)/(e+n);return(sign(h)+sign(o))*Math.min(Math.abs(h),Math.abs(o),.5*Math.abs(l))||0}function slopeSingle(a,t,r){var e=t[0]-a[0];var n=t[1]-a[1];return e?(3*n/e-r)/2:r}function bezier(a,t,r,e,n){var i=a[0],s=a[1];var h=t[0],o=t[1];var l=(h-i)/3;var p=n([i+l,s+l*r]).join(",");var c=n([h-l,o-l*e]).join(",");var m=n([h,o]).join(",");return"C "+p+" "+c+" "+m}function translate(a){var t=a.width,r=a.height,e=a.min,n=a.max;var i=n[0]-e[0];var s=n[1]-e[1];return function(a){var e=a[0]/i*t;var n=r-a[1]/s*r;return[e,n]}}function range(a){var t=a[0],r=t[0],e=t[1];var n=[r,e];var i=[r,e];return a.reduce((function(a,t){var r=a.min,e=a.max;var n=t[0],i=t[1];return{min:[Math.min(r[0],n),Math.min(r[1],i)],max:[Math.max(e[0],n),Math.max(e[1],i)]}}),{min:n,max:i})}function area(a){var t=a.data,r=a.min,e=a.max,n=a.t;if(t.length===0){return""}var i=n(t[0]),s=i[0],h=i[1];var o=n(r),l=o[0],p=o[1];var c=n(e)[0];var m;var f;var v;var g=t.reduce((function(a,r,e){f=t[e-2];v=t[e-1];if(e>1){var i=slope(f,v,r);var s=m===undefined?slopeSingle(f,v,i):m;var h=bezier(f,v,s,i,n);m=i;return a+" "+h}return a}),"M "+l+","+p+" L "+l+","+h+" L "+s+","+h);var d=t[t.length-1];var u=bezier(v,d,m,slopeSingle(v,d,m),n);return g+" "+u+" L "+c+","+p+" Z"}var calciteGraphCss="@-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}";var CalciteGraph=function(){function a(a){registerInstance(this,a);this.data=[];this.width=300;this.height=100;this.maskId="calcite-graph-mask-"+guid()}a.prototype.render=function(){var a=this,t=a.data,r=a.width,e=a.height,n=a.highlightMax,i=a.highlightMin;var s=this.maskId;if(!t||t.length===0){return h("svg",{class:"svg",height:e,preserveAspectRatio:"none",viewBox:"0 0 "+r+" "+e,width:r})}var o=range(t),l=o.min,p=o.max;var c=translate({min:l,max:p,width:r,height:e});var m=c([i,p[1]])[0];var f=c([n,p[1]])[0];var v=area({data:t,min:l,max:p,t:c});return h("svg",{class:"svg",height:e,preserveAspectRatio:"none",viewBox:"0 0 "+r+" "+e,width:r},i!==undefined?h("svg",{class:"svg",height:e,preserveAspectRatio:"none",viewBox:"0 0 "+r+" "+e,width:r},h("mask",{height:"100%",id:s+"1",width:"100%",x:"0%",y:"0%"},h("path",{d:"\n M 0,0\n L "+(m-1)+",0\n L "+(m-1)+","+e+"\n L 0,"+e+"\n Z\n ",fill:"white"})),h("mask",{height:"100%",id:s+"2",width:"100%",x:"0%",y:"0%"},h("path",{d:"\n M "+(m+1)+",0\n L "+(f-1)+",0\n L "+(f-1)+","+e+"\n L "+(m+1)+", "+e+"\n Z\n ",fill:"white"})),h("mask",{height:"100%",id:s+"3",width:"100%",x:"0%",y:"0%"},h("path",{d:"\n M "+(f+1)+",0\n L "+r+",0\n L "+r+","+e+"\n L "+(f+1)+", "+e+"\n Z\n ",fill:"white"})),h("path",{class:"graph-path",d:v,mask:"url(#"+s+"1)"}),h("path",{class:"graph-path--highlight",d:v,mask:"url(#"+s+"2)"}),h("path",{class:"graph-path",d:v,mask:"url(#"+s+"3)"})):h("path",{class:"graph-path",d:v}))};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return a}();CalciteGraph.style=calciteGraphCss;export{CalciteGraph as calcite_graph};