@corva/ui 0.24.0-5 → 0.24.0-6
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.
package/README.md
CHANGED
|
@@ -4,10 +4,12 @@ This repo contains components/utils which are shared for Corva ui apps.
|
|
|
4
4
|
|
|
5
5
|
#### Things to know:
|
|
6
6
|
|
|
7
|
-
1.
|
|
7
|
+
1. How to bump the version? What should be the branch name? And other more advanced cases, like release/hotfixes. The guideline for all of these cases can be found [here (Corva access required)](https://www.notion.so/corva/corva-web-repo-d510f545ffb74c9bafd6b1bfbc0b99bf#2283b08cd4c8477981dabc8974cc13c0)
|
|
8
|
+
|
|
9
|
+
2. `yarn start` will open ExampleApp.js in your browser.
|
|
8
10
|
That's a playground for building components.
|
|
9
11
|
|
|
10
|
-
|
|
12
|
+
3. To link this repo with your app, you should:
|
|
11
13
|
|
|
12
14
|
### Mac
|
|
13
15
|
1. Run `yarn build` or `yarn build-watch` in @corva/ui repo (only first time)
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<svg width="217" height="217" viewBox="0 0 217 217" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<mask id="mask0_3151_161440" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="217" height="217">
|
|
3
|
+
<circle cx="108.237" cy="108.236" r="108" fill="#C4C4C4"/>
|
|
4
|
+
</mask>
|
|
5
|
+
<g mask="url(#mask0_3151_161440)">
|
|
6
|
+
<g filter="url(#filter0_f_3151_161440)">
|
|
7
|
+
<circle cx="108.237" cy="108.236" r="107" stroke="#64B5F6" stroke-width="2"/>
|
|
8
|
+
</g>
|
|
9
|
+
<g filter="url(#filter1_f_3151_161440)">
|
|
10
|
+
<circle cx="108.237" cy="108.236" r="107" stroke="#64B5F6" stroke-width="2"/>
|
|
11
|
+
</g>
|
|
12
|
+
</g>
|
|
13
|
+
<defs>
|
|
14
|
+
<filter id="filter0_f_3151_161440" x="-31.7632" y="-31.7637" width="280" height="280" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
15
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
16
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
17
|
+
<feGaussianBlur stdDeviation="16" result="effect1_foregroundBlur_3151_161440"/>
|
|
18
|
+
</filter>
|
|
19
|
+
<filter id="filter1_f_3151_161440" x="-31.7632" y="-31.7637" width="280" height="280" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
20
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
21
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
22
|
+
<feGaussianBlur stdDeviation="16" result="effect1_foregroundBlur_3151_161440"/>
|
|
23
|
+
</filter>
|
|
24
|
+
<filter id="filter2_di_3151_161440" x="61.2368" y="63.2363" width="94" height="94" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
25
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
26
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
27
|
+
<feOffset dy="2"/>
|
|
28
|
+
<feGaussianBlur stdDeviation="1"/>
|
|
29
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
|
30
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3151_161440"/>
|
|
31
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3151_161440" result="shape"/>
|
|
32
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
33
|
+
<feOffset dy="1"/>
|
|
34
|
+
<feGaussianBlur stdDeviation="0.5"/>
|
|
35
|
+
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
|
36
|
+
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0"/>
|
|
37
|
+
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_3151_161440"/>
|
|
38
|
+
</filter>
|
|
39
|
+
</defs>
|
|
40
|
+
</svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg width="229" height="229" viewBox="0 0 229 229" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<circle cx="114.237" cy="114.236" r="113" stroke="url(#paint0_linear_3151_161439)" stroke-width="2"/>
|
|
3
|
+
<defs>
|
|
4
|
+
<linearGradient id="paint0_linear_3151_161439" x1="114.237" y1="103.736" x2="114.237" y2="228.236" gradientUnits="userSpaceOnUse">
|
|
5
|
+
<stop stop-color="#414141"/>
|
|
6
|
+
<stop offset="1" stop-color="#333333" stop-opacity="0"/>
|
|
7
|
+
</linearGradient>
|
|
8
|
+
</defs>
|
|
9
|
+
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t from"@babel/runtime/helpers/defineProperty";import{sumBy as e,upperFirst as
|
|
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,y=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 y.filter((function(t){return t.duration}))}),[y]),j=h((function(){return e(y,"duration")}),[y]),B=h((function(){return y.find((function(t){return t.name===m}))}),[y,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=R.current[o].current;if(a){a.width=200,a.height=200,a.style.width="".concat(200,"px"),a.style.height="".concat(200,"px"),S&&(a.onmouseenter=O,a.onmouseleave=z,a.onmousemove=H);var n=a.getContext("2d"),r=i,c=r+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,r,c),function(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()}(n,100,100,100,r,c,t.color||"#000000",!0),i=c}}))})),a("div",{className:w.root,children:[n("div",{className:g(w.backgroundRoot,t({},w.emptyStateBackground,!y.length)),children:n("div",{className:w.dropShadowRoot})}),a("div",{className:w.content,children:[n(l,{className:w.activityTimeRange,children:"Last 24hrs"}),y.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})}))]})})]})}y.propTypes={activities:m.arrayOf(m.shape({name:m.string,day:m.number,night:m.number})).isRequired,currentActivityName:m.string.isRequired,showTooltip:m.bool},y.defaultProps={showTooltip:!1};export default y;
|