@corva/ui 0.24.0-7 → 0.24.0-8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import t from"@babel/runtime/helpers/defineProperty";import{sumBy as e,upperFirst as o}from"lodash";import i from"@babel/runtime/helpers/slicedToArray";import{jsxs as a,jsx as n,Fragment as r}from"react/jsx-runtime";import{makeStyles as c,Typography as l,Tooltip as d}from"@material-ui/core";import{useRef as s,useState as p,useMemo as h,useEffect as u,createRef as f}from"react";import m from"prop-types";import g from"classnames";import{Regular14 as x}from"../Typography.js";var v=c({root:{width:"228px",height:"228px",borderRadius:"50%",padding:"6px",position:"relative",background:"url(".concat("/static/media/9bda514bfc837939d0b6f7d8dbe94d03.svg",")"),backgroundRepeat:"no-repeat"},backgroundRoot:{width:"100%",height:"100%",borderRadius:"50%",border:"2px solid #616161",padding:"2px",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",background:"url(".concat("/static/media/49092309a3fda5ecf77311bd794ac103.svg",")")},emptyStateBackground:{background:"radial-gradient(50% 50% at 50% 50%, rgba(100, 181, 246, 0) 54.4%, rgba(100, 181, 246, 0.01) 76.49%, rgba(100, 181, 246, 0.06) 100%)"},dropShadowRoot:{width:"100%",height:"100%",borderRadius:"50%",filter:"blur(36px)",border:"2px solid #64B5F6",display:"flex",alignItems:"center",justifyContent:"center"},content:{position:"absolute",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",left:0,top:0},lastActivityRoot:{width:"90px",height:"90px",background:"#3B3B3B",boxShadow:"0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px 1px 1px rgba(255, 255, 255, 0.05)",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",margin:"8px 0"},activityDuration:{fontSize:"36px",lineHeight:"24px",fontWeight:300,letterSpacing:"0.4px"},durationUnit:{fontSize:"12px",lineHeight:"24px",fontWeight:500,letterSpacing:"0.4px"},activityTimeRange:{fontSize:"10px",textTransform:"uppercase",color:"#9E9E9E",lineHeight:"24px",fontWeight:500,letterSpacing:"1px"},activityName:{fontSize:"12px",lineHeight:"14px",fontWeight:500},noOperationsRoot:{width:90,height:90},noOperationsText:{marginTop:24,color:"#9E9E9E"},chart:{position:"absolute",left:2,top:2,width:"100%",height:"100%",padding:"12px"},canvas:{width:"100%",height:"100%"},activities:{position:"absolute",left:12,top:12}});function b(t,e,o,i,a,n){t.moveTo(e,o),t.arc(e,o,i,a,n)}function y(c){var m=c.currentActivityName,
|
|
1
|
+
import t from"@babel/runtime/helpers/defineProperty";import{sumBy as e,upperFirst as o}from"lodash";import i from"@babel/runtime/helpers/slicedToArray";import{jsxs as a,jsx as n,Fragment as r}from"react/jsx-runtime";import{makeStyles as c,Typography as l,Tooltip as d}from"@material-ui/core";import{useRef as s,useState as p,useMemo as h,useEffect as u,createRef as f}from"react";import m from"prop-types";import g from"classnames";import{Regular14 as x}from"../Typography.js";var v=c({root:{width:"228px",height:"228px",borderRadius:"50%",padding:"6px",position:"relative",background:"url(".concat("/static/media/9bda514bfc837939d0b6f7d8dbe94d03.svg",")"),backgroundRepeat:"no-repeat"},backgroundRoot:{width:"100%",height:"100%",borderRadius:"50%",border:"2px solid #616161",padding:"2px",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",background:"url(".concat("/static/media/49092309a3fda5ecf77311bd794ac103.svg",")")},emptyStateBackground:{background:"radial-gradient(50% 50% at 50% 50%, rgba(100, 181, 246, 0) 54.4%, rgba(100, 181, 246, 0.01) 76.49%, rgba(100, 181, 246, 0.06) 100%)"},dropShadowRoot:{width:"100%",height:"100%",borderRadius:"50%",filter:"blur(36px)",border:"2px solid #64B5F6",display:"flex",alignItems:"center",justifyContent:"center"},content:{position:"absolute",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",left:0,top:0},lastActivityRoot:{width:"90px",height:"90px",background:"#3B3B3B",boxShadow:"0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px 1px 1px rgba(255, 255, 255, 0.05)",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",margin:"8px 0"},activityDuration:{fontSize:"36px",lineHeight:"24px",fontWeight:300,letterSpacing:"0.4px"},durationUnit:{fontSize:"12px",lineHeight:"24px",fontWeight:500,letterSpacing:"0.4px"},activityTimeRange:{fontSize:"10px",textTransform:"uppercase",color:"#9E9E9E",lineHeight:"24px",fontWeight:500,letterSpacing:"1px"},activityName:{fontSize:"12px",lineHeight:"14px",fontWeight:500},noOperationsRoot:{width:90,height:90},noOperationsText:{marginTop:24,color:"#9E9E9E"},chart:{position:"absolute",left:2,top:2,width:"100%",height:"100%",padding:"12px"},canvas:{width:"100%",height:"100%"},activities:{position:"absolute",left:12,top:12}});function b(t,e,o,i,a,n){t.moveTo(e,o),t.arc(e,o,i,a,n)}function y(t,e,o,i,a,n,r,c){var l=n-a>.0833393628,d=l?.0416696814:0,s=l?4:0,p=100-s;(t.beginPath(),t.moveTo(e,o),t.arc(e,o,i,a+d,n-d),c&&l)&&(b(t,100+p*Math.cos(a+d),100+p*Math.sin(a+d),s,0,2*Math.PI),b(t,100+p*Math.cos(n-d),100+p*Math.sin(n-d),s,0,2*Math.PI));t.closePath();var h=t.createRadialGradient(e,o,8,e,o,i);h.addColorStop(0,"".concat(r,"00")),h.addColorStop(.9,"".concat(r,"00")),h.addColorStop(.93,r),h.addColorStop(1,r),t.fillStyle=h,t.fill()}function S(c){var m=c.currentActivityName,b=c.activities,S=c.showTooltip,w=v(),N=s(null),R=s([]),C=p(!1),T=i(C,2),E=T[0],P=T[1],A=p(null),k=i(A,2),I=k[0],D=k[1],M=h((function(){return b.filter((function(t){return t.duration}))}),[b]),j=h((function(){return e(b,"duration")}),[b]),B=h((function(){return b.find((function(t){return t.name===m}))}),[b,m]),O=function(){P(!0)},z=function(){P(!1),D(null)},H=function(t){var e=!1;E&&R.current.forEach((function(o,i){var a=o.current;if(a&&!e){var n=a.getContext("2d");(e=n.isPointInPath(t.offsetX,t.offsetY))&&D(i)}})),e||D(null)};return u((function(){var t=N.current,e=t.getContext("2d");t.width=200,t.height=200,t.style.width="".concat(200,"px"),t.style.height="".concat(200,"px");var o=M.length;R.current.length!==o&&(R.current=Array(o).fill().map((function(t,e){return R.current[e]||f()})));var i=0;M.forEach((function(t,o){var a=i,n=a+t.duration/j*Math.PI*2;t.name===m&&function(t,e,o,i,a,n){t.beginPath(),t.moveTo(e,o),t.arc(e,o,i-8,a,n),t.closePath();var r=t.createRadialGradient(e,o,5,e,o,i);r.addColorStop(0,"#3E4D5A00"),r.addColorStop(.3,"#3E4D5A00"),r.addColorStop(.6,"#3E4D5A4d"),r.addColorStop(.9,"#3E4D5Ab3"),t.fillStyle=r,t.fill()}(e,100,100,100,a,n);var r=R.current[o].current;r?(r.width=200,r.height=200,r.style.width="".concat(200,"px"),r.style.height="".concat(200,"px"),S&&(r.onmouseenter=O,r.onmouseleave=z,r.onmousemove=H),y(r.getContext("2d"),100,100,100,a,n,t.color||"#000000",!0)):y(e,100,100,100,a,n,t.color||"#000000",!0);i=n}))})),a("div",{className:w.root,children:[n("div",{className:g(w.backgroundRoot,t({},w.emptyStateBackground,!b.length)),children:n("div",{className:w.dropShadowRoot})}),a("div",{className:w.content,children:[n(l,{className:w.activityTimeRange,children:"Last 24hrs"}),b.length?a(r,{children:[n("div",{className:w.lastActivityRoot,children:B&&B.duration?a(l,{className:w.activityDuration,children:[(B.duration/3600).toFixed(1),n("span",{className:w.durationUnit,children:"h"})]}):null}),n(l,{className:w.activityName,children:o(m)})]}):n("div",{className:w.noOperationsRoot,children:n(x,{className:w.noOperationsText,children:"No operations"})})]}),n(d,{title:null!==I?"".concat(M[I].name,": ").concat((M[I].duration/3600).toFixed(3),"h"):"",placement:"bottom",children:a("div",{className:w.chart,children:[n("canvas",{ref:N,className:w.canvas}),M.map((function(t,e){return n("canvas",{ref:R.current[e],className:w.activities})}))]})})]})}S.propTypes={activities:m.arrayOf(m.shape({name:m.string,day:m.number,night:m.number})).isRequired,currentActivityName:m.string.isRequired,showTooltip:m.bool},S.defaultProps={showTooltip:!1};export default S;
|