@corva/ui 0.26.0-2 → 0.26.0-3

package/components/WellSummary/ActivitySummaryChart.js

@@ -1 +1 @@
-import t from"@babel/runtime/helpers/defineProperty";import{sumBy as e,upperFirst as i}from"lodash";import r from"@babel/runtime/helpers/slicedToArray";import{jsxs as n,jsx as o,Fragment as a}from"react/jsx-runtime";import{makeStyles as c,Typography as l,Tooltip as s}from"@material-ui/core";import{useRef as d,useState as p,useMemo as u,useEffect as h,createRef as m}from"react";import f from"prop-types";import g from"classnames";import{Regular14 as x}from"../Typography.js";import{drawRadicalGradient as v,drawDonutSlice as b}from"./utils.js";var y=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 w(c){var f=c.currentActivityName,w=c.activities,N=c.showTooltip,R=y(),S=d(null),T=d([]),k=p(null),E=r(k,2),j=E[0],C=E[1],A=u((function(){return w.filter((function(t){return t.duration}))}),[w]),B=u((function(){return e(w,"duration")}),[w]),I=u((function(){return null===j?w.find((function(t){return t.name===f})):A[j]}),[w,f,A,j]),O=function(t){var e=!1;T.current.forEach((function(i,r){var n=i.current;if(n&&!e){var o=n.getContext("2d");(e=o.isPointInPath(t.offsetX,t.offsetY))&&C(r)}})),e||C(null)};return h((function(){var t=S.current,e=t.getContext("2d");t.width=200,t.height=200,t.style.width="".concat(200,"px"),t.style.height="".concat(200,"px");var i=A.length;T.current.length!==i&&(T.current=Array(i).fill().map((function(t,e){return T.current[e]||m()})));var r=0;A.forEach((function(t,i){var n=r,o=n+t.duration/B*Math.PI*2;(null===j&&t.name===f||i===j)&&v(e,100,100,100,n,o);var a=T.current[i].current;if(a){a.width=200,a.height=200,a.style.width="".concat(200,"px"),a.style.height="".concat(200,"px"),N&&(a.onmousemove=O);var c=a.getContext("2d");b(c,100,100,100,n,o,t.color||"#000000",!0)}else b(e,100,100,100,n,o,t.color||"#000000",!0);r=o}))})),n("div",{className:R.root,children:[o("div",{className:g(R.backgroundRoot,t({},R.emptyStateBackground,!w.length)),children:o("div",{className:R.dropShadowRoot})}),n("div",{className:R.content,children:[o(l,{className:R.activityTimeRange,children:"Last 24hrs"}),w.length?n(a,{children:[o("div",{className:R.lastActivityRoot,children:I&&I.duration?n(l,{className:R.activityDuration,children:[(I.duration/3600).toFixed(1),o("span",{className:R.durationUnit,children:"h"})]}):null}),o(l,{className:R.activityName,children:i((null==I?void 0:I.name)||"")})]}):o("div",{className:R.noOperationsRoot,children:o(x,{className:R.noOperationsText,children:"No operations"})})]}),o(s,{title:null!==j?"".concat(A[j].name,": ").concat((A[j].duration/3600).toFixed(3),"h"):"",placement:"bottom",children:n("div",{className:R.chart,children:[o("canvas",{ref:S,className:R.canvas}),A.map((function(t,e){return o("canvas",{ref:T.current[e],className:R.activities})}))]})})]})}w.propTypes={activities:f.arrayOf(f.shape({name:f.string,day:f.number,night:f.number})).isRequired,currentActivityName:f.string.isRequired,showTooltip:f.bool},w.defaultProps={showTooltip:!1};export default w;
+import t from"@babel/runtime/helpers/defineProperty";import{sumBy as e,upperFirst as i}from"lodash";import n from"@babel/runtime/helpers/slicedToArray";import{jsxs as r,jsx as o,Fragment as a}from"react/jsx-runtime";import{makeStyles as c,Typography as l,Tooltip as s}from"@material-ui/core";import{useRef as d,useState as p,useMemo as u,useEffect as h,createRef as m}from"react";import f from"prop-types";import g from"classnames";import{Regular14 as x}from"../Typography.js";import{drawRadicalGradient as v,drawDonutSlice as b}from"./utils.js";var y=c((function(t){return{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:function(t){return{position:"absolute",width:"100%",height:"100%",display:"flex",alignItems:"center",flexDirection:"column",left:0,top:t.activitiesLength?40:57}},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:{marginTop:"9px",color:t.palette.primary.text1,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:{width:"106px",textAlign:"center",fontSize:"12px",lineHeight:"14px",fontWeight:500,letterSpacing:"0.4px",color:t.palette.primary.text1},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 w(c){var f=c.currentActivityName,w=c.activities,N=c.showTooltip,R=y({activitiesLength:w.length}),S=d(null),T=d([]),k=p(null),E=n(k,2),A=E[0],j=E[1],B=u((function(){return w.filter((function(t){return t.duration}))}),[w]),C=u((function(){return e(w,"duration")}),[w]),I=u((function(){return null===A?w.find((function(t){return t.name===f})):B[A]}),[w,f,B,A]),O=function(t){var e=!1;T.current.forEach((function(i,n){var r=i.current;if(r&&!e){var o=r.getContext("2d");(e=o.isPointInPath(t.offsetX,t.offsetY))&&j(n)}})),e||j(null)},P=function(){j(null)};return h((function(){var t=S.current,e=t.getContext("2d");t.width=200,t.height=200,t.style.width="".concat(200,"px"),t.style.height="".concat(200,"px");var i=B.length;T.current.length!==i&&(T.current=Array(i).fill().map((function(t,e){return T.current[e]||m()})));var n=0;B.forEach((function(t,i){var r=n,o=r+t.duration/C*Math.PI*2;(null===A&&t.name===f||i===A)&&v(e,100,100,100,r,o);var a=T.current[i].current;if(a){a.width=200,a.height=200,a.style.width="".concat(200,"px"),a.style.height="".concat(200,"px"),N&&(a.onmousemove=O,a.onmouseleave=P);var c=a.getContext("2d");b(c,100,100,100,r,o,t.color||"#000000",!0)}else b(e,100,100,100,r,o,t.color||"#000000",!0);n=o}))})),r("div",{className:R.root,children:[o("div",{className:g(R.backgroundRoot,t({},R.emptyStateBackground,!w.length)),children:o("div",{className:R.dropShadowRoot})}),r("div",{className:R.content,children:[o(l,{className:R.activityTimeRange,children:"Last 24hrs"}),w.length?r(a,{children:[o("div",{className:R.lastActivityRoot,children:I&&I.duration?r(l,{className:R.activityDuration,children:[(I.duration/3600).toFixed(1),o("span",{className:R.durationUnit,children:" h"})]}):null}),o(l,{className:R.activityName,children:i((null==I?void 0:I.name)||"")})]}):o("div",{className:R.noOperationsRoot,children:o(x,{className:R.noOperationsText,children:"No operations"})})]}),o(s,{title:null!==A?"".concat(B[A].name,": ").concat((B[A].duration/3600).toFixed(3),"h"):"",placement:"bottom",children:r("div",{className:R.chart,children:[o("canvas",{ref:S,className:R.canvas}),B.map((function(t,e){return o("canvas",{ref:T.current[e],className:R.activities})}))]})})]})}w.propTypes={activities:f.arrayOf(f.shape({name:f.string,day:f.number,night:f.number})).isRequired,currentActivityName:f.string.isRequired,showTooltip:f.bool},w.defaultProps={showTooltip:!1};export default w;

package/components/WellSummary/utils.js

@@ -1 +1 @@
-function o(o,a,t,l,d,r){o.beginPath(),o.moveTo(a,t),o.arc(a,t,l-8,d,r),o.closePath();var e=o.createRadialGradient(a,t,5,a,t,l);e.addColorStop(0,"#3E4D5A00"),e.addColorStop(.3,"#3E4D5A00"),e.addColorStop(.6,"#3E4D5A4d"),e.addColorStop(.9,"#3E4D5Ab3"),o.fillStyle=e,o.fill()}function a(o,a,t,l,d,r){o.moveTo(a,t),o.arc(a,t,l,d,r)}function t(o,t,l,d,r,e,c,i){var n=e-r>.0833393628,h=n?.0416696814:0,S=n?4:0,p=100-S;(o.beginPath(),o.moveTo(t,l),o.arc(t,l,d,r+h,e-h),i&&n)&&(a(o,100+p*Math.cos(r+h),100+p*Math.sin(r+h),S,0,2*Math.PI),a(o,100+p*Math.cos(e-h),100+p*Math.sin(e-h),S,0,2*Math.PI));o.closePath();var C=o.createRadialGradient(t,l,8,t,l,d);C.addColorStop(0,"".concat(c,"00")),C.addColorStop(.9,"".concat(c,"00")),C.addColorStop(.93,c),C.addColorStop(1,c),o.fillStyle=C,o.fill(),o.beginPath(),o.moveTo(t,l),o.arc(t,l,d,r,e),o.closePath()}export{t as drawDonutSlice,o as drawRadicalGradient};
+function o(o,a,t,l,e,c){o.beginPath(),o.moveTo(a,t),o.arc(a,t,l-8,e,c),o.closePath();var r=o.createRadialGradient(a,t,5,a,t,l);r.addColorStop(0,"#08345A00"),r.addColorStop(.9,"#9FD2FF14"),o.fillStyle=r,o.fill()}function a(o,a,t,l,e,c){o.moveTo(a,t),o.arc(a,t,l,e,c)}function t(o,t,l,e,c,r,d,i){var n=r-c>.0833393628,h=n?.0416696814:0,P=n?4:0,S=100-P;(o.beginPath(),o.moveTo(t,l),o.arc(t,l,e,c+h,r-h),i&&n)&&(a(o,100+S*Math.cos(c+h),100+S*Math.sin(c+h),P,0,2*Math.PI),a(o,100+S*Math.cos(r-h),100+S*Math.sin(r-h),P,0,2*Math.PI));o.closePath();var f=o.createRadialGradient(t,l,8,t,l,e);f.addColorStop(0,"".concat(d,"00")),f.addColorStop(.9,"".concat(d,"00")),f.addColorStop(.93,d),f.addColorStop(1,d),o.fillStyle=f,o.fill(),o.beginPath(),o.moveTo(t,l),o.arc(t,l,e,c,r),o.closePath()}export{t as drawDonutSlice,o as drawRadicalGradient};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corva/ui",
-  "version": "0.26.0-2",
+  "version": "0.26.0-3",
   "description": "Shared components/utils for Corva ui projects",
   "keywords": [
     "corva-ui"