@corva/ui 0.34.0-rc.3 → 0.34.0

package/components/WellSummary/ActivitySummaryChart.js

@@ -1,294 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { sumBy, upperFirst } from 'lodash';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { makeStyles, Typography, Tooltip } from '@material-ui/core';
-import { useRef, useState, useMemo, useEffect, createRef } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Regular14 } from '../Typography.js';
-import { drawRadicalGradient, drawDonutSlice } from './utils.js';
-
-var CircleGradientIcon = "/static/media/9bda514bfc837939d0b6f7d8dbe94d03.svg";
-var CircleGlowIcon = "/static/media/49092309a3fda5ecf77311bd794ac103.svg";
-var useStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      width: '228px',
-      height: '228px',
-      borderRadius: '50%',
-      padding: '6px',
-      position: 'relative',
-      background: "url(".concat(CircleGradientIcon, ")"),
-      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(CircleGlowIcon, ")")
-    },
-    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 content(_ref) {
-      var activitiesLength = _ref.activitiesLength;
-      return {
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-        left: 0,
-        top: 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: theme.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: theme.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
-    }
-  };
-});
-var CANVAS_WH = 200;
-
-function ActivitySummaryChart(_ref2) {
-  var currentActivityName = _ref2.currentActivityName,
-      activities = _ref2.activities,
-      showTooltip = _ref2.showTooltip;
-  var classes = useStyles({
-    activitiesLength: activities.length
-  });
-  var canvasRef = useRef(null);
-  var activitiesRef = useRef([]);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      tooltipId = _useState2[0],
-      setTooltipId = _useState2[1];
-
-  var availableActivities = useMemo(function () {
-    return activities.filter(function (activity) {
-      return activity.duration;
-    });
-  }, [activities]);
-  var totalTime = useMemo(function () {
-    return sumBy(activities, 'duration');
-  }, [activities]);
-  var currentActivity = useMemo(function () {
-    return tooltipId === null ? activities.find(function (item) {
-      return item.name === currentActivityName;
-    }) : availableActivities[tooltipId];
-  }, [activities, currentActivityName, availableActivities, tooltipId]);
-
-  var handleMouseMove = function handleMouseMove(e) {
-    var innerPoint = false;
-    activitiesRef.current.forEach(function (ref, index) {
-      var activityRef = ref.current;
-      if (!activityRef) return;
-      if (innerPoint) return;
-      var activityContext = activityRef.getContext('2d');
-      innerPoint = activityContext.isPointInPath(e.offsetX, e.offsetY);
-      if (innerPoint) setTooltipId(index);
-    });
-    if (!innerPoint) setTooltipId(null);
-  };
-
-  var handleMouseLeave = function handleMouseLeave() {
-    setTooltipId(null);
-  };
-
-  useEffect(function () {
-    var canvas = canvasRef.current;
-    var context = canvas.getContext('2d');
-    canvas.width = CANVAS_WH;
-    canvas.height = CANVAS_WH;
-    canvas.style.width = "".concat(CANVAS_WH, "px");
-    canvas.style.height = "".concat(CANVAS_WH, "px");
-    var radius = CANVAS_WH / 2;
-    var centerX = CANVAS_WH / 2;
-    var centerY = CANVAS_WH / 2;
-    var activitiesLength = availableActivities.length;
-
-    if (activitiesRef.current.length !== activitiesLength) {
-      // add or remove refs
-      activitiesRef.current = Array(activitiesLength).fill().map(function (_, i) {
-        return activitiesRef.current[i] || createRef();
-      });
-    }
-
-    var prevEndAngle = 0;
-    availableActivities.forEach(function (activity, index) {
-      var startAngle = prevEndAngle;
-      var endAngle = startAngle + activity.duration / totalTime * Math.PI * 2;
-
-      if (tooltipId === null && activity.name === currentActivityName || index === tooltipId) {
-        drawRadicalGradient(context, centerX, centerY, radius, startAngle, endAngle);
-      }
-
-      var activityRef = activitiesRef.current[index].current;
-
-      if (activityRef) {
-        activityRef.width = CANVAS_WH;
-        activityRef.height = CANVAS_WH;
-        activityRef.style.width = "".concat(CANVAS_WH, "px");
-        activityRef.style.height = "".concat(CANVAS_WH, "px");
-
-        if (showTooltip) {
-          activityRef.onmousemove = handleMouseMove;
-          activityRef.onmouseleave = handleMouseLeave;
-        }
-
-        var activityContext = activityRef.getContext('2d');
-        drawDonutSlice(activityContext, centerX, centerY, radius, startAngle, endAngle, activity.color || '#000000', true);
-      } else drawDonutSlice(context, centerX, centerY, radius, startAngle, endAngle, activity.color || '#000000', true);
-
-      prevEndAngle = endAngle;
-    });
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.root,
-    children: [/*#__PURE__*/jsx("div", {
-      className: classNames(classes.backgroundRoot, _defineProperty({}, classes.emptyStateBackground, !activities.length)),
-      children: /*#__PURE__*/jsx("div", {
-        className: classes.dropShadowRoot
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: classes.content,
-      children: [/*#__PURE__*/jsx(Typography, {
-        className: classes.activityTimeRange,
-        children: "Last 24hrs"
-      }), activities.length ? /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx("div", {
-          className: classes.lastActivityRoot,
-          children: currentActivity && currentActivity.duration ? /*#__PURE__*/jsxs(Typography, {
-            className: classes.activityDuration,
-            children: [(currentActivity.duration / 3600).toFixed(1), /*#__PURE__*/jsx("span", {
-              className: classes.durationUnit,
-              children: ' h'
-            })]
-          }) : null
-        }), /*#__PURE__*/jsx(Typography, {
-          className: classes.activityName,
-          children: upperFirst((currentActivity === null || currentActivity === void 0 ? void 0 : currentActivity.name) || '')
-        })]
-      }) : /*#__PURE__*/jsx("div", {
-        className: classes.noOperationsRoot,
-        children: /*#__PURE__*/jsx(Regular14, {
-          className: classes.noOperationsText,
-          children: "No operations"
-        })
-      })]
-    }), /*#__PURE__*/jsx(Tooltip, {
-      title: tooltipId !== null ? "".concat(availableActivities[tooltipId].name, ": ").concat((availableActivities[tooltipId].duration / 3600).toFixed(3), "h") : '',
-      placement: "bottom",
-      children: /*#__PURE__*/jsxs("div", {
-        className: classes.chart,
-        children: [/*#__PURE__*/jsx("canvas", {
-          ref: canvasRef,
-          className: classes.canvas
-        }), availableActivities.map(function (activity, index) {
-          return /*#__PURE__*/jsx("canvas", {
-            ref: activitiesRef.current[index],
-            className: classes.activities
-          });
-        })]
-      })
-    })]
-  });
-}
-
-ActivitySummaryChart.propTypes = {
-  activities: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    day: PropTypes.number,
-    night: PropTypes.number
-  })).isRequired,
-  currentActivityName: PropTypes.string.isRequired,
-  showTooltip: PropTypes.bool
-};
-ActivitySummaryChart.defaultProps = {
-  showTooltip: false
-};
-
-export default ActivitySummaryChart;
-//# sourceMappingURL=ActivitySummaryChart.js.map
+import t from"@babel/runtime/helpers/defineProperty";import e from"@babel/runtime/helpers/slicedToArray";import i from"prop-types";import{useRef as n,useState as r,useMemo as o,useEffect as a,createRef as c}from"react";import l from"classnames";import{makeStyles as s,Typography as d,Tooltip as p}from"@material-ui/core";import{sumBy as u,upperFirst as h}from"lodash";import{Regular14 as m}from"../Typography.js";import{drawRadicalGradient as f,drawDonutSlice as g}from"./utils.js";import{jsxs as x,jsx as v,Fragment as b}from"react/jsx-runtime";var y=s((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(i){var s=i.currentActivityName,w=i.activities,N=i.showTooltip,R=y({activitiesLength:w.length}),S=n(null),T=n([]),k=r(null),E=e(k,2),A=E[0],j=E[1],B=o((function(){return w.filter((function(t){return t.duration}))}),[w]),C=o((function(){return u(w,"duration")}),[w]),I=o((function(){return null===A?w.find((function(t){return t.name===s})):B[A]}),[w,s,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 a((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]||c()})));var n=0;B.forEach((function(t,i){var r=n,o=r+t.duration/C*Math.PI*2;(null===A&&t.name===s||i===A)&&f(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");g(c,100,100,100,r,o,t.color||"#000000",!0)}else g(e,100,100,100,r,o,t.color||"#000000",!0);n=o}))})),x("div",{className:R.root,children:[v("div",{className:l(R.backgroundRoot,t({},R.emptyStateBackground,!w.length)),children:v("div",{className:R.dropShadowRoot})}),x("div",{className:R.content,children:[v(d,{className:R.activityTimeRange,children:"Last 24hrs"}),w.length?x(b,{children:[v("div",{className:R.lastActivityRoot,children:I&&I.duration?x(d,{className:R.activityDuration,children:[(I.duration/3600).toFixed(1),v("span",{className:R.durationUnit,children:" h"})]}):null}),v(d,{className:R.activityName,children:h((null==I?void 0:I.name)||"")})]}):v("div",{className:R.noOperationsRoot,children:v(m,{className:R.noOperationsText,children:"No operations"})})]}),v(p,{title:null!==A?"".concat(B[A].name,": ").concat((B[A].duration/3600).toFixed(3),"h"):"",placement:"bottom",children:x("div",{className:R.chart,children:[v("canvas",{ref:S,className:R.canvas}),B.map((function(t,e){return v("canvas",{ref:T.current[e],className:R.activities})}))]})})]})}w.propTypes={activities:i.arrayOf(i.shape({name:i.string,day:i.number,night:i.number})).isRequired,currentActivityName:i.string.isRequired,showTooltip:i.bool},w.defaultProps={showTooltip:!1};export{w as default};

package/components/WellSummary/FracWirelineTimeChart.js

@@ -1,258 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { makeStyles, Typography } from '@material-ui/core';
-import { useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { drawDonutSlice } from './utils.js';
-
-var CircleGradientIcon = "/static/media/9bda514bfc837939d0b6f7d8dbe94d03.svg";
-var CircleGlowIcon = "/static/media/49092309a3fda5ecf77311bd794ac103.svg";
-var WIRELINE_COLOR = '#FF9C00';
-var FRACTURING_COLOR = '#8572FF';
-var useStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      width: '228px',
-      height: '228px',
-      borderRadius: '50%',
-      padding: '6px',
-      position: 'relative',
-      background: "url(".concat(CircleGradientIcon, ")"),
-      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(CircleGlowIcon, ")")
-    },
-    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
-    },
-    timeRange: {
-      fontSize: '10px',
-      textTransform: 'uppercase',
-      color: theme.palette.primary.text7,
-      lineHeight: '24px',
-      fontWeight: 500,
-      letterSpacing: '1px',
-      position: 'absolute',
-      top: 36
-    },
-    time: {
-      marginTop: 42
-    },
-    timing: {
-      fontFamily: 'Roboto',
-      fontSize: 36,
-      lineHeight: '24px',
-      letterSpacing: 0.4,
-      fontWeight: 300,
-      color: theme.palette.background.b9
-    },
-    wirelineText: {
-      color: WIRELINE_COLOR
-    },
-    wirelineDot: {
-      backgroundColor: WIRELINE_COLOR
-    },
-    fracturingText: {
-      color: FRACTURING_COLOR
-    },
-    fracturingDot: {
-      backgroundColor: FRACTURING_COLOR
-    },
-    legend: {
-      marginTop: 24
-    },
-    legendItem: {
-      fontFamily: 'Roboto',
-      fontSize: 12,
-      lineHeight: '14px',
-      letterSpacing: 0.4,
-      display: 'flex',
-      margin: '2px 0',
-      alignItems: 'center'
-    },
-    dot: {
-      width: 8,
-      height: 8,
-      borderRadius: '100%',
-      marginRight: 9
-    },
-    chart: {
-      position: 'absolute',
-      left: 2,
-      top: 2,
-      width: '100%',
-      height: '100%',
-      padding: '12px'
-    },
-    noData: {
-      width: 90,
-      height: 90
-    },
-    noDataText: {
-      marginTop: 24,
-      color: '#9E9E9E',
-      display: 'flex',
-      justifyContent: 'center'
-    },
-    canvas: {
-      width: '100%',
-      height: '100%'
-    },
-    activities: {
-      position: 'absolute',
-      left: 12,
-      top: 12
-    }
-  };
-});
-var CANVAS_WH = 200;
-var HOURS_24 = 24 * 60 * 60;
-
-function drawActivity(activityRef, centerX, centerY, radius, startPos, endPos, color, isRounded) {
-  var ref = activityRef.current;
-
-  if (ref) {
-    ref.width = CANVAS_WH;
-    ref.height = CANVAS_WH;
-    ref.style.width = "".concat(CANVAS_WH, "px");
-    ref.style.height = "".concat(CANVAS_WH, "px");
-    var activityContext = ref.getContext('2d');
-    drawDonutSlice(activityContext, centerX, centerY, radius, startPos, endPos, color, isRounded);
-  }
-}
-
-function FracWirelineTimeChart(_ref) {
-  var wirelineTime = _ref.wirelineTime,
-      fracturingTime = _ref.fracturingTime;
-  var classes = useStyles();
-  var canvasRef = useRef(null);
-  var wirelineRef = useRef(null);
-  var fracingRef = useRef(null);
-  var totalTime = HOURS_24;
-  useEffect(function () {
-    var canvas = canvasRef.current;
-    canvas.width = CANVAS_WH;
-    canvas.height = CANVAS_WH;
-    canvas.style.width = "".concat(CANVAS_WH, "px");
-    canvas.style.height = "".concat(CANVAS_WH, "px");
-    var radius = CANVAS_WH / 2;
-    var centerX = CANVAS_WH / 2;
-    var centerY = CANVAS_WH / 2;
-    var wirelineStartPos = wirelineTime * 60 / totalTime * Math.PI * 2;
-    var fracStartPos = wirelineStartPos + fracturingTime * 60 / totalTime * Math.PI * 2;
-    drawActivity(wirelineRef, centerX, centerY, radius, 0, wirelineStartPos, WIRELINE_COLOR, true);
-    drawActivity(fracingRef, centerX, centerY, radius, wirelineStartPos, fracStartPos, FRACTURING_COLOR, true);
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.root,
-    children: [/*#__PURE__*/jsx("div", {
-      className: classNames(classes.backgroundRoot, _defineProperty({}, classes.emptyStateBackground, !wirelineTime || !fracturingTime)),
-      children: /*#__PURE__*/jsx("div", {
-        className: classes.dropShadowRoot
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: classes.content,
-      children: [/*#__PURE__*/jsx(Typography, {
-        className: classes.timeRange,
-        children: "Previous 24hrs"
-      }), wirelineTime && fracturingTime ? /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsxs("div", {
-          className: classes.time,
-          children: [/*#__PURE__*/jsx(Typography, {
-            className: classNames(classes.timing, classes.wirelineText),
-            display: "inline",
-            children: (wirelineTime / 60).toFixed(1)
-          }), /*#__PURE__*/jsx(Typography, {
-            className: classes.timing,
-            display: "inline",
-            children: "/"
-          }), /*#__PURE__*/jsx(Typography, {
-            className: classNames(classes.timing, classes.fracturingText),
-            display: "inline",
-            children: (fracturingTime / 60).toFixed(1)
-          }), /*#__PURE__*/jsx(Typography, {
-            display: "inline",
-            children: " h"
-          })]
-        }), /*#__PURE__*/jsxs("div", {
-          className: classes.legend,
-          children: [/*#__PURE__*/jsxs(Typography, {
-            className: classes.legendItem,
-            display: "inline",
-            children: [/*#__PURE__*/jsx("div", {
-              className: classNames(classes.dot, classes.wirelineDot)
-            }), " Wireline"]
-          }), /*#__PURE__*/jsxs(Typography, {
-            className: classes.legendItem,
-            display: "inline",
-            children: [/*#__PURE__*/jsx("div", {
-              className: classNames(classes.dot, classes.fracturingDot)
-            }), "Fracturing"]
-          })]
-        })]
-      }) : /*#__PURE__*/jsx("div", {
-        className: classes.noData,
-        children: /*#__PURE__*/jsx(Typography, {
-          className: classes.noDataText,
-          children: "No Data"
-        })
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: classes.chart,
-      children: [/*#__PURE__*/jsx("canvas", {
-        ref: canvasRef,
-        className: classes.canvas
-      }), /*#__PURE__*/jsx("canvas", {
-        ref: wirelineRef,
-        className: classes.activities
-      }), /*#__PURE__*/jsx("canvas", {
-        ref: fracingRef,
-        className: classes.activities
-      })]
-    })]
-  });
-}
-
-FracWirelineTimeChart.propTypes = {
-  wirelineTime: PropTypes.number,
-  fracturingTime: PropTypes.number
-};
-FracWirelineTimeChart.defaultProps = {
-  wirelineTime: undefined,
-  fracturingTime: undefined
-};
-
-export default FracWirelineTimeChart;
-//# sourceMappingURL=FracWirelineTimeChart.js.map
+import e from"@babel/runtime/helpers/defineProperty";import i from"prop-types";import{useRef as t,useEffect as a}from"react";import n from"classnames";import{makeStyles as r,Typography as o}from"@material-ui/core";import{drawDonutSlice as l}from"./utils.js";import{jsxs as c,jsx as d,Fragment as s}from"react/jsx-runtime";var m=r((function(e){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:{position:"absolute",width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",left:0,top:0},timeRange:{fontSize:"10px",textTransform:"uppercase",color:e.palette.primary.text7,lineHeight:"24px",fontWeight:500,letterSpacing:"1px",position:"absolute",top:36},time:{marginTop:42},timing:{fontFamily:"Roboto",fontSize:36,lineHeight:"24px",letterSpacing:.4,fontWeight:300,color:e.palette.background.b9},wirelineText:{color:"#FF9C00"},wirelineDot:{backgroundColor:"#FF9C00"},fracturingText:{color:"#8572FF"},fracturingDot:{backgroundColor:"#8572FF"},legend:{marginTop:24},legendItem:{fontFamily:"Roboto",fontSize:12,lineHeight:"14px",letterSpacing:.4,display:"flex",margin:"2px 0",alignItems:"center"},dot:{width:8,height:8,borderRadius:"100%",marginRight:9},chart:{position:"absolute",left:2,top:2,width:"100%",height:"100%",padding:"12px"},noData:{width:90,height:90},noDataText:{marginTop:24,color:"#9E9E9E",display:"flex",justifyContent:"center"},canvas:{width:"100%",height:"100%"},activities:{position:"absolute",left:12,top:12}}}));function p(e,i,t,a,n,r,o,c){var d=e.current;if(d){d.width=200,d.height=200,d.style.width="".concat(200,"px"),d.style.height="".concat(200,"px");var s=d.getContext("2d");l(s,i,t,a,n,r,o,c)}}function g(i){var r=i.wirelineTime,l=i.fracturingTime,g=m(),h=t(null),u=t(null),f=t(null);return a((function(){var e=h.current;e.width=200,e.height=200,e.style.width="".concat(200,"px"),e.style.height="".concat(200,"px");var i=60*r/86400*Math.PI*2,t=i+60*l/86400*Math.PI*2;p(u,100,100,100,0,i,"#FF9C00",!0),p(f,100,100,100,i,t,"#8572FF",!0)})),c("div",{className:g.root,children:[d("div",{className:n(g.backgroundRoot,e({},g.emptyStateBackground,!r||!l)),children:d("div",{className:g.dropShadowRoot})}),c("div",{className:g.content,children:[d(o,{className:g.timeRange,children:"Previous 24hrs"}),r&&l?c(s,{children:[c("div",{className:g.time,children:[d(o,{className:n(g.timing,g.wirelineText),display:"inline",children:(r/60).toFixed(1)}),d(o,{className:g.timing,display:"inline",children:"/"}),d(o,{className:n(g.timing,g.fracturingText),display:"inline",children:(l/60).toFixed(1)}),d(o,{display:"inline",children:" h"})]}),c("div",{className:g.legend,children:[c(o,{className:g.legendItem,display:"inline",children:[d("div",{className:n(g.dot,g.wirelineDot)})," Wireline"]}),c(o,{className:g.legendItem,display:"inline",children:[d("div",{className:n(g.dot,g.fracturingDot)}),"Fracturing"]})]})]}):d("div",{className:g.noData,children:d(o,{className:g.noDataText,children:"No Data"})})]}),c("div",{className:g.chart,children:[d("canvas",{ref:h,className:g.canvas}),d("canvas",{ref:u,className:g.activities}),d("canvas",{ref:f,className:g.activities})]})]})}g.propTypes={wirelineTime:i.number,fracturingTime:i.number},g.defaultProps={wirelineTime:void 0,fracturingTime:void 0};export{g as default};

package/components/WellSummary/WellSummaryItemLabel.js

@@ -1,76 +1 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { isMobileDetected } from '../../utils/mobileDetect.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyles, Typography } from '@material-ui/core';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-var ICON_HEIGHT = 16;
-var useStyles = makeStyles({
-  labelRoot: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    height: function height(_ref) {
-      var isMobile = _ref.isMobile;
-      return !isMobile && ICON_HEIGHT;
-    }
-  },
-  croppedRoot: {
-    overflow: 'hidden',
-    marginRight: '10px',
-    '& $label': {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
-  },
-  labelIcon: {
-    width: ICON_HEIGHT,
-    height: ICON_HEIGHT,
-    minWidth: ICON_HEIGHT,
-    minHeight: ICON_HEIGHT,
-    marginRight: '8px',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center'
-  },
-  label: {
-    color: '#9E9E9E',
-    fontSize: '14px',
-    lineHeight: '16px'
-  }
-});
-
-function WellSummaryItemLabel(_ref2) {
-  var item = _ref2.item,
-      textShrinked = _ref2.textShrinked;
-  var classes = useStyles({
-    isMobile: isMobileDetected
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.labelRoot, _defineProperty({}, classes.croppedRoot, textShrinked)),
-    children: [item.icon && /*#__PURE__*/jsx("div", {
-      className: classes.labelIcon,
-      style: {
-        backgroundImage: "url(".concat(item.icon, ")")
-      }
-    }), /*#__PURE__*/jsxs(Typography, {
-      className: classes.label,
-      children: [item.label, ":"]
-    })]
-  });
-}
-
-WellSummaryItemLabel.propTypes = {
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    label: PropTypes.string,
-    icon: PropTypes.node
-  }).isRequired,
-  textShrinked: PropTypes.bool
-};
-WellSummaryItemLabel.defaultProps = {
-  textShrinked: false
-};
-
-export default WellSummaryItemLabel;
-//# sourceMappingURL=WellSummaryItemLabel.js.map
+import e from"@babel/runtime/helpers/defineProperty";import i from"prop-types";import{makeStyles as o,Typography as t}from"@material-ui/core";import r from"classnames";import{isMobileDetected as l}from"../../utils/mobileDetect.js";import{jsxs as a,jsx as n}from"react/jsx-runtime";var p=o({labelRoot:{display:"flex",alignItems:"flex-start",height:function(e){return!e.isMobile&&16}},croppedRoot:{overflow:"hidden",marginRight:"10px","& $label":{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}},labelIcon:{width:16,height:16,minWidth:16,minHeight:16,marginRight:"8px",backgroundRepeat:"no-repeat",backgroundPosition:"center"},label:{color:"#9E9E9E",fontSize:"14px",lineHeight:"16px"}});function s(i){var o=i.item,s=i.textShrinked,m=p({isMobile:l});return a("div",{className:r(m.labelRoot,e({},m.croppedRoot,s)),children:[o.icon&&n("div",{className:m.labelIcon,style:{backgroundImage:"url(".concat(o.icon,")")}}),a(t,{className:m.label,children:[o.label,":"]})]})}s.propTypes={item:i.shape({key:i.string,label:i.string,icon:i.node}).isRequired,textShrinked:i.bool},s.defaultProps={textShrinked:!1};export{s as default};