@corva/ui 0.34.0-rc.2 → 0.34.0-rc.3

package/components/WellSummary/ActivitySummaryChart.js

@@ -1 +1,294 @@
-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};
+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

package/components/WellSummary/ActivitySummaryChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivitySummaryChart.js","sources":["../../../src/components/WellSummary/ActivitySummaryChart.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useEffect, useMemo, useRef, createRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { makeStyles, Typography, Tooltip } from '@material-ui/core';\nimport { sumBy, upperFirst } from 'lodash';\nimport { Regular14 } from '~/components/Typography';\n\nimport { drawDonutSlice, drawRadicalGradient } from './utils';\n\nimport CircleGradientIcon from './assets/circle_gradient.svg';\nimport CircleGlowIcon from './assets/circle_glow.svg';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: '228px',\n    height: '228px',\n    borderRadius: '50%',\n    padding: '6px',\n    position: 'relative',\n    background: `url(${CircleGradientIcon})`,\n    backgroundRepeat: 'no-repeat',\n  },\n  backgroundRoot: {\n    width: '100%',\n    height: '100%',\n    borderRadius: '50%',\n    border: '2px solid #616161',\n    padding: '2px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    background: `url(${CircleGlowIcon})`,\n  },\n  emptyStateBackground: {\n    background:\n      '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%)',\n  },\n  dropShadowRoot: {\n    width: '100%',\n    height: '100%',\n    borderRadius: '50%',\n    filter: 'blur(36px)',\n    border: '2px solid #64B5F6',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  content: ({ activitiesLength }) => ({\n    position: 'absolute',\n    width: '100%',\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    flexDirection: 'column',\n    left: 0,\n    top: activitiesLength ? 40 : 57,\n  }),\n  lastActivityRoot: {\n    width: '90px',\n    height: '90px',\n    background: '#3B3B3B',\n    boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.1), inset 0px 1px 1px rgba(255, 255, 255, 0.05)',\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    margin: '8px 0',\n  },\n  activityDuration: {\n    marginTop: '9px',\n    color: theme.palette.primary.text1,\n    fontSize: '36px',\n    lineHeight: '24px',\n    fontWeight: 300,\n    letterSpacing: '0.4px',\n  },\n  durationUnit: {\n    fontSize: '12px',\n    lineHeight: '24px',\n    fontWeight: 500,\n    letterSpacing: '0.4px',\n  },\n  activityTimeRange: {\n    fontSize: '10px',\n    textTransform: 'uppercase',\n    color: '#9E9E9E',\n    lineHeight: '24px',\n    fontWeight: 500,\n    letterSpacing: '1px',\n  },\n  activityName: {\n    width: '106px',\n    textAlign: 'center',\n    fontSize: '12px',\n    lineHeight: '14px',\n    fontWeight: 500,\n    letterSpacing: '0.4px',\n    color: theme.palette.primary.text1,\n  },\n  noOperationsRoot: {\n    width: 90,\n    height: 90,\n  },\n  noOperationsText: {\n    marginTop: 24,\n    color: '#9E9E9E',\n  },\n  chart: {\n    position: 'absolute',\n    left: 2,\n    top: 2,\n    width: '100%',\n    height: '100%',\n    padding: '12px',\n  },\n  canvas: {\n    width: '100%',\n    height: '100%',\n  },\n  activities: {\n    position: 'absolute',\n    left: 12,\n    top: 12,\n  },\n}));\n\nconst CANVAS_WH = 200;\n\nfunction ActivitySummaryChart({ currentActivityName, activities, showTooltip }) {\n  const classes = useStyles({ activitiesLength: activities.length });\n  const canvasRef = useRef(null);\n  const activitiesRef = useRef([]);\n  const [tooltipId, setTooltipId] = useState(null);\n  const availableActivities = useMemo(() => {\n    return activities.filter(activity => activity.duration);\n  }, [activities]);\n\n  const totalTime = useMemo(() => sumBy(activities, 'duration'), [activities]);\n  const currentActivity = useMemo(() => {\n    return tooltipId === null\n      ? activities.find(item => item.name === currentActivityName)\n      : availableActivities[tooltipId];\n  }, [activities, currentActivityName, availableActivities, tooltipId]);\n\n  const handleMouseMove = e => {\n    let innerPoint = false;\n    activitiesRef.current.forEach((ref, index) => {\n      const activityRef = ref.current;\n      if (!activityRef) return;\n      if (innerPoint) return;\n      const activityContext = activityRef.getContext('2d');\n\n      innerPoint = activityContext.isPointInPath(e.offsetX, e.offsetY);\n      if (innerPoint) setTooltipId(index);\n    });\n    if (!innerPoint) setTooltipId(null);\n  };\n\n  const handleMouseLeave = () => {\n    setTooltipId(null);\n  };\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    const context = canvas.getContext('2d');\n\n    canvas.width = CANVAS_WH;\n    canvas.height = CANVAS_WH;\n    canvas.style.width = `${CANVAS_WH}px`;\n    canvas.style.height = `${CANVAS_WH}px`;\n\n    const radius = CANVAS_WH / 2;\n    const centerX = CANVAS_WH / 2;\n    const centerY = CANVAS_WH / 2;\n\n    const activitiesLength = availableActivities.length;\n    if (activitiesRef.current.length !== activitiesLength) {\n      // add or remove refs\n      activitiesRef.current = Array(activitiesLength)\n        .fill()\n        .map((_, i) => activitiesRef.current[i] || createRef());\n    }\n\n    let prevEndAngle = 0;\n    availableActivities.forEach((activity, index) => {\n      const startAngle = prevEndAngle;\n      const endAngle = startAngle + (activity.duration / totalTime) * Math.PI * 2;\n      if ((tooltipId === null && activity.name === currentActivityName) || index === tooltipId) {\n        drawRadicalGradient(context, centerX, centerY, radius, startAngle, endAngle);\n      }\n      const activityRef = activitiesRef.current[index].current;\n      if (activityRef) {\n        activityRef.width = CANVAS_WH;\n        activityRef.height = CANVAS_WH;\n        activityRef.style.width = `${CANVAS_WH}px`;\n        activityRef.style.height = `${CANVAS_WH}px`;\n        if (showTooltip) {\n          activityRef.onmousemove = handleMouseMove;\n          activityRef.onmouseleave = handleMouseLeave;\n        }\n        const activityContext = activityRef.getContext('2d');\n\n        drawDonutSlice(\n          activityContext,\n          centerX,\n          centerY,\n          radius,\n          startAngle,\n          endAngle,\n          activity.color || '#000000',\n          true\n        );\n      } else\n        drawDonutSlice(\n          context,\n          centerX,\n          centerY,\n          radius,\n          startAngle,\n          endAngle,\n          activity.color || '#000000',\n          true\n        );\n\n      prevEndAngle = endAngle;\n    });\n  });\n\n  return (\n    <div className={classes.root}>\n      <div\n        className={classNames(classes.backgroundRoot, {\n          [classes.emptyStateBackground]: !activities.length,\n        })}\n      >\n        <div className={classes.dropShadowRoot} />\n      </div>\n\n      <div className={classes.content}>\n        <Typography className={classes.activityTimeRange}>Last 24hrs</Typography>\n        {activities.length ? (\n          <>\n            <div className={classes.lastActivityRoot}>\n              {currentActivity && currentActivity.duration ? (\n                <Typography className={classes.activityDuration}>\n                  {(currentActivity.duration / 3600).toFixed(1)}\n                  <span className={classes.durationUnit}>{' h'}</span>\n                </Typography>\n              ) : null}\n            </div>\n            <Typography className={classes.activityName}>\n              {upperFirst(currentActivity?.name || '')}\n            </Typography>\n          </>\n        ) : (\n          <div className={classes.noOperationsRoot}>\n            <Regular14 className={classes.noOperationsText}>No operations</Regular14>\n          </div>\n        )}\n      </div>\n\n      <Tooltip\n        title={\n          tooltipId !== null\n            ? `${availableActivities[tooltipId].name}: ${(\n                availableActivities[tooltipId].duration / 3600\n              ).toFixed(3)}h`\n            : ''\n        }\n        placement=\"bottom\"\n      >\n        <div className={classes.chart}>\n          <canvas ref={canvasRef} className={classes.canvas} />\n          {availableActivities.map((activity, index) => (\n            <canvas ref={activitiesRef.current[index]} className={classes.activities} />\n          ))}\n        </div>\n      </Tooltip>\n    </div>\n  );\n}\n\nActivitySummaryChart.propTypes = {\n  activities: PropTypes.arrayOf(\n    PropTypes.shape({\n      name: PropTypes.string,\n      day: PropTypes.number,\n      night: PropTypes.number,\n    })\n  ).isRequired,\n  currentActivityName: PropTypes.string.isRequired,\n  showTooltip: PropTypes.bool,\n};\n\nActivitySummaryChart.defaultProps = {\n  showTooltip: false,\n};\n\nexport default ActivitySummaryChart;\n"],"names":["useStyles","makeStyles","theme","root","width","height","borderRadius","padding","position","background","CircleGradientIcon","backgroundRepeat","backgroundRoot","border","display","alignItems","justifyContent","overflow","CircleGlowIcon","emptyStateBackground","dropShadowRoot","filter","content","activitiesLength","flexDirection","left","top","lastActivityRoot","boxShadow","margin","activityDuration","marginTop","color","palette","primary","text1","fontSize","lineHeight","fontWeight","letterSpacing","durationUnit","activityTimeRange","textTransform","activityName","textAlign","noOperationsRoot","noOperationsText","chart","canvas","activities","CANVAS_WH","ActivitySummaryChart","currentActivityName","showTooltip","classes","length","canvasRef","useRef","activitiesRef","useState","tooltipId","setTooltipId","availableActivities","useMemo","activity","duration","totalTime","sumBy","currentActivity","find","item","name","handleMouseMove","e","innerPoint","current","forEach","ref","index","activityRef","activityContext","getContext","isPointInPath","offsetX","offsetY","handleMouseLeave","useEffect","context","style","radius","centerX","centerY","Array","fill","map","_","i","createRef","prevEndAngle","startAngle","endAngle","Math","PI","drawRadicalGradient","onmousemove","onmouseleave","drawDonutSlice","_jsxs","_jsx","classNames","toFixed","upperFirst","propTypes","PropTypes","arrayOf","shape","string","day","number","night","isRequired","bool","defaultProps"],"mappings":"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"}

package/components/WellSummary/FracWirelineTimeChart.js

@@ -1 +1,258 @@
-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};
+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

package/components/WellSummary/FracWirelineTimeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FracWirelineTimeChart.js","sources":["../../../src/components/WellSummary/FracWirelineTimeChart.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport { useEffect, useRef } from 'react';\nimport classnames from 'classnames';\nimport { makeStyles, Typography } from '@material-ui/core';\n\nimport CircleGradientIcon from './assets/circle_gradient.svg';\nimport CircleGlowIcon from './assets/circle_glow.svg';\n\nimport { drawDonutSlice } from './utils';\n\nconst WIRELINE_COLOR = '#FF9C00';\nconst FRACTURING_COLOR = '#8572FF';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    width: '228px',\n    height: '228px',\n    borderRadius: '50%',\n    padding: '6px',\n    position: 'relative',\n    background: `url(${CircleGradientIcon})`,\n    backgroundRepeat: 'no-repeat',\n  },\n  backgroundRoot: {\n    width: '100%',\n    height: '100%',\n    borderRadius: '50%',\n    border: '2px solid #616161',\n    padding: '2px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    background: `url(${CircleGlowIcon})`,\n  },\n  emptyStateBackground: {\n    background:\n      '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%)',\n  },\n  dropShadowRoot: {\n    width: '100%',\n    height: '100%',\n    borderRadius: '50%',\n    filter: 'blur(36px)',\n    border: '2px solid #64B5F6',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  content: {\n    position: 'absolute',\n    width: '100%',\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexDirection: 'column',\n    left: 0,\n    top: 0,\n  },\n  timeRange: {\n    fontSize: '10px',\n    textTransform: 'uppercase',\n    color: theme.palette.primary.text7,\n    lineHeight: '24px',\n    fontWeight: 500,\n    letterSpacing: '1px',\n    position: 'absolute',\n    top: 36,\n  },\n  time: { marginTop: 42 },\n  timing: {\n    fontFamily: 'Roboto',\n    fontSize: 36,\n    lineHeight: '24px',\n    letterSpacing: 0.4,\n    fontWeight: 300,\n    color: theme.palette.background.b9,\n  },\n  wirelineText: { color: WIRELINE_COLOR },\n  wirelineDot: { backgroundColor: WIRELINE_COLOR },\n  fracturingText: { color: FRACTURING_COLOR },\n  fracturingDot: { backgroundColor: FRACTURING_COLOR },\n  legend: { marginTop: 24 },\n  legendItem: {\n    fontFamily: 'Roboto',\n    fontSize: 12,\n    lineHeight: '14px',\n    letterSpacing: 0.4,\n    display: 'flex',\n    margin: '2px 0',\n    alignItems: 'center',\n  },\n  dot: {\n    width: 8,\n    height: 8,\n    borderRadius: '100%',\n    marginRight: 9,\n  },\n  chart: {\n    position: 'absolute',\n    left: 2,\n    top: 2,\n    width: '100%',\n    height: '100%',\n    padding: '12px',\n  },\n  noData: {\n    width: 90,\n    height: 90,\n  },\n  noDataText: {\n    marginTop: 24,\n    color: '#9E9E9E',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  canvas: {\n    width: '100%',\n    height: '100%',\n  },\n  activities: {\n    position: 'absolute',\n    left: 12,\n    top: 12,\n  },\n}));\n\nconst CANVAS_WH = 200;\n\nconst HOURS_24 = 24 * 60 * 60;\n\nfunction drawActivity(activityRef, centerX, centerY, radius, startPos, endPos, color, isRounded) {\n  const ref = activityRef.current;\n  if (ref) {\n    ref.width = CANVAS_WH;\n    ref.height = CANVAS_WH;\n    ref.style.width = `${CANVAS_WH}px`;\n    ref.style.height = `${CANVAS_WH}px`;\n\n    const activityContext = ref.getContext('2d');\n\n    drawDonutSlice(activityContext, centerX, centerY, radius, startPos, endPos, color, isRounded);\n  }\n}\n\nfunction FracWirelineTimeChart({ wirelineTime, fracturingTime }) {\n  const classes = useStyles();\n  const canvasRef = useRef(null);\n  const wirelineRef = useRef(null);\n  const fracingRef = useRef(null);\n\n  const totalTime = HOURS_24;\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n\n    canvas.width = CANVAS_WH;\n    canvas.height = CANVAS_WH;\n    canvas.style.width = `${CANVAS_WH}px`;\n    canvas.style.height = `${CANVAS_WH}px`;\n\n    const radius = CANVAS_WH / 2;\n    const centerX = CANVAS_WH / 2;\n    const centerY = CANVAS_WH / 2;\n\n    const wirelineStartPos = ((wirelineTime * 60) / totalTime) * Math.PI * 2;\n    const fracStartPos = wirelineStartPos + ((fracturingTime * 60) / totalTime) * Math.PI * 2;\n\n    drawActivity(wirelineRef, centerX, centerY, radius, 0, wirelineStartPos, WIRELINE_COLOR, true);\n\n    drawActivity(\n      fracingRef,\n      centerX,\n      centerY,\n      radius,\n      wirelineStartPos,\n      fracStartPos,\n      FRACTURING_COLOR,\n      true\n    );\n  });\n\n  return (\n    <div className={classes.root}>\n      <div\n        className={classnames(classes.backgroundRoot, {\n          [classes.emptyStateBackground]: !wirelineTime || !fracturingTime,\n        })}\n      >\n        <div className={classes.dropShadowRoot} />\n      </div>\n\n      <div className={classes.content}>\n        <Typography className={classes.timeRange}>Previous 24hrs</Typography>\n        {wirelineTime && fracturingTime ? (\n          <>\n            <div className={classes.time}>\n              <Typography\n                className={classnames(classes.timing, classes.wirelineText)}\n                display=\"inline\"\n              >\n                {(wirelineTime / 60).toFixed(1)}\n              </Typography>\n              <Typography className={classes.timing} display=\"inline\">\n                /\n              </Typography>\n              <Typography\n                className={classnames(classes.timing, classes.fracturingText)}\n                display=\"inline\"\n              >\n                {(fracturingTime / 60).toFixed(1)}\n              </Typography>\n              <Typography display=\"inline\"> h</Typography>\n            </div>\n            <div className={classes.legend}>\n              <Typography className={classes.legendItem} display=\"inline\">\n                <div className={classnames(classes.dot, classes.wirelineDot)} /> Wireline\n              </Typography>\n              <Typography className={classes.legendItem} display=\"inline\">\n                <div className={classnames(classes.dot, classes.fracturingDot)} />\n                Fracturing\n              </Typography>\n            </div>\n          </>\n        ) : (\n          <div className={classes.noData}>\n            <Typography className={classes.noDataText}>No Data</Typography>\n          </div>\n        )}\n      </div>\n\n      <div className={classes.chart}>\n        <canvas ref={canvasRef} className={classes.canvas} />\n        <canvas ref={wirelineRef} className={classes.activities} />\n        <canvas ref={fracingRef} className={classes.activities} />\n      </div>\n    </div>\n  );\n}\n\nFracWirelineTimeChart.propTypes = {\n  wirelineTime: PropTypes.number,\n  fracturingTime: PropTypes.number,\n};\n\nFracWirelineTimeChart.defaultProps = {\n  wirelineTime: undefined,\n  fracturingTime: undefined,\n};\n\nexport default FracWirelineTimeChart;\n"],"names":["WIRELINE_COLOR","FRACTURING_COLOR","useStyles","makeStyles","theme","root","width","height","borderRadius","padding","position","background","CircleGradientIcon","backgroundRepeat","backgroundRoot","border","display","alignItems","justifyContent","overflow","CircleGlowIcon","emptyStateBackground","dropShadowRoot","filter","content","flexDirection","left","top","timeRange","fontSize","textTransform","color","palette","primary","text7","lineHeight","fontWeight","letterSpacing","time","marginTop","timing","fontFamily","b9","wirelineText","wirelineDot","backgroundColor","fracturingText","fracturingDot","legend","legendItem","margin","dot","marginRight","chart","noData","noDataText","canvas","activities","CANVAS_WH","HOURS_24","drawActivity","activityRef","centerX","centerY","radius","startPos","endPos","isRounded","ref","current","style","activityContext","getContext","drawDonutSlice","FracWirelineTimeChart","wirelineTime","fracturingTime","classes","canvasRef","useRef","wirelineRef","fracingRef","totalTime","useEffect","wirelineStartPos","Math","PI","fracStartPos","_jsxs","_jsx","classnames","toFixed","propTypes","PropTypes","number","defaultProps","undefined"],"mappings":";;;;;;;;;;AAUA,IAAMA,cAAc,GAAG,SAAvB;AACA,IAAMC,gBAAgB,GAAG,SAAzB;AAEA,IAAMC,SAAS,GAAGC,UAAU,CAAC,UAAAC,KAAK;AAAA,SAAK;AACrCC,IAAAA,IAAI,EAAE;AACJC,MAAAA,KAAK,EAAE,OADH;AAEJC,MAAAA,MAAM,EAAE,OAFJ;AAGJC,MAAAA,YAAY,EAAE,KAHV;AAIJC,MAAAA,OAAO,EAAE,KAJL;AAKJC,MAAAA,QAAQ,EAAE,UALN;AAMJC,MAAAA,UAAU,gBAASC,kBAAT,MANN;AAOJC,MAAAA,gBAAgB,EAAE;AAPd,KAD+B;AAUrCC,IAAAA,cAAc,EAAE;AACdR,MAAAA,KAAK,EAAE,MADO;AAEdC,MAAAA,MAAM,EAAE,MAFM;AAGdC,MAAAA,YAAY,EAAE,KAHA;AAIdO,MAAAA,MAAM,EAAE,mBAJM;AAKdN,MAAAA,OAAO,EAAE,KALK;AAMdO,MAAAA,OAAO,EAAE,MANK;AAOdC,MAAAA,UAAU,EAAE,QAPE;AAQdC,MAAAA,cAAc,EAAE,QARF;AASdC,MAAAA,QAAQ,EAAE,QATI;AAUdR,MAAAA,UAAU,gBAASS,cAAT;AAVI,KAVqB;AAsBrCC,IAAAA,oBAAoB,EAAE;AACpBV,MAAAA,UAAU,EACR;AAFkB,KAtBe;AA0BrCW,IAAAA,cAAc,EAAE;AACdhB,MAAAA,KAAK,EAAE,MADO;AAEdC,MAAAA,MAAM,EAAE,MAFM;AAGdC,MAAAA,YAAY,EAAE,KAHA;AAIde,MAAAA,MAAM,EAAE,YAJM;AAKdR,MAAAA,MAAM,EAAE,mBALM;AAMdC,MAAAA,OAAO,EAAE,MANK;AAOdC,MAAAA,UAAU,EAAE,QAPE;AAQdC,MAAAA,cAAc,EAAE;AARF,KA1BqB;AAoCrCM,IAAAA,OAAO,EAAE;AACPd,MAAAA,QAAQ,EAAE,UADH;AAEPJ,MAAAA,KAAK,EAAE,MAFA;AAGPC,MAAAA,MAAM,EAAE,MAHD;AAIPS,MAAAA,OAAO,EAAE,MAJF;AAKPC,MAAAA,UAAU,EAAE,QALL;AAMPC,MAAAA,cAAc,EAAE,QANT;AAOPO,MAAAA,aAAa,EAAE,QAPR;AAQPC,MAAAA,IAAI,EAAE,CARC;AASPC,MAAAA,GAAG,EAAE;AATE,KApC4B;AA+CrCC,IAAAA,SAAS,EAAE;AACTC,MAAAA,QAAQ,EAAE,MADD;AAETC,MAAAA,aAAa,EAAE,WAFN;AAGTC,MAAAA,KAAK,EAAE3B,KAAK,CAAC4B,OAAN,CAAcC,OAAd,CAAsBC,KAHpB;AAITC,MAAAA,UAAU,EAAE,MAJH;AAKTC,MAAAA,UAAU,EAAE,GALH;AAMTC,MAAAA,aAAa,EAAE,KANN;AAOT3B,MAAAA,QAAQ,EAAE,UAPD;AAQTiB,MAAAA,GAAG,EAAE;AARI,KA/C0B;AAyDrCW,IAAAA,IAAI,EAAE;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAzD+B;AA0DrCC,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAE,QADN;AAENZ,MAAAA,QAAQ,EAAE,EAFJ;AAGNM,MAAAA,UAAU,EAAE,MAHN;AAINE,MAAAA,aAAa,EAAE,GAJT;AAKND,MAAAA,UAAU,EAAE,GALN;AAMNL,MAAAA,KAAK,EAAE3B,KAAK,CAAC4B,OAAN,CAAcrB,UAAd,CAAyB+B;AAN1B,KA1D6B;AAkErCC,IAAAA,YAAY,EAAE;AAAEZ,MAAAA,KAAK,EAAE/B;AAAT,KAlEuB;AAmErC4C,IAAAA,WAAW,EAAE;AAAEC,MAAAA,eAAe,EAAE7C;AAAnB,KAnEwB;AAoErC8C,IAAAA,cAAc,EAAE;AAAEf,MAAAA,KAAK,EAAE9B;AAAT,KApEqB;AAqErC8C,IAAAA,aAAa,EAAE;AAAEF,MAAAA,eAAe,EAAE5C;AAAnB,KArEsB;AAsErC+C,IAAAA,MAAM,EAAE;AAAET,MAAAA,SAAS,EAAE;AAAb,KAtE6B;AAuErCU,IAAAA,UAAU,EAAE;AACVR,MAAAA,UAAU,EAAE,QADF;AAEVZ,MAAAA,QAAQ,EAAE,EAFA;AAGVM,MAAAA,UAAU,EAAE,MAHF;AAIVE,MAAAA,aAAa,EAAE,GAJL;AAKVrB,MAAAA,OAAO,EAAE,MALC;AAMVkC,MAAAA,MAAM,EAAE,OANE;AAOVjC,MAAAA,UAAU,EAAE;AAPF,KAvEyB;AAgFrCkC,IAAAA,GAAG,EAAE;AACH7C,MAAAA,KAAK,EAAE,CADJ;AAEHC,MAAAA,MAAM,EAAE,CAFL;AAGHC,MAAAA,YAAY,EAAE,MAHX;AAIH4C,MAAAA,WAAW,EAAE;AAJV,KAhFgC;AAsFrCC,IAAAA,KAAK,EAAE;AACL3C,MAAAA,QAAQ,EAAE,UADL;AAELgB,MAAAA,IAAI,EAAE,CAFD;AAGLC,MAAAA,GAAG,EAAE,CAHA;AAILrB,MAAAA,KAAK,EAAE,MAJF;AAKLC,MAAAA,MAAM,EAAE,MALH;AAMLE,MAAAA,OAAO,EAAE;AANJ,KAtF8B;AA8FrC6C,IAAAA,MAAM,EAAE;AACNhD,MAAAA,KAAK,EAAE,EADD;AAENC,MAAAA,MAAM,EAAE;AAFF,KA9F6B;AAkGrCgD,IAAAA,UAAU,EAAE;AACVhB,MAAAA,SAAS,EAAE,EADD;AAEVR,MAAAA,KAAK,EAAE,SAFG;AAGVf,MAAAA,OAAO,EAAE,MAHC;AAIVE,MAAAA,cAAc,EAAE;AAJN,KAlGyB;AAwGrCsC,IAAAA,MAAM,EAAE;AACNlD,MAAAA,KAAK,EAAE,MADD;AAENC,MAAAA,MAAM,EAAE;AAFF,KAxG6B;AA4GrCkD,IAAAA,UAAU,EAAE;AACV/C,MAAAA,QAAQ,EAAE,UADA;AAEVgB,MAAAA,IAAI,EAAE,EAFI;AAGVC,MAAAA,GAAG,EAAE;AAHK;AA5GyB,GAAL;AAAA,CAAN,CAA5B;AAmHA,IAAM+B,SAAS,GAAG,GAAlB;AAEA,IAAMC,QAAQ,GAAG,KAAK,EAAL,GAAU,EAA3B;;AAEA,SAASC,YAAT,CAAsBC,WAAtB,EAAmCC,OAAnC,EAA4CC,OAA5C,EAAqDC,MAArD,EAA6DC,QAA7D,EAAuEC,MAAvE,EAA+EnC,KAA/E,EAAsFoC,SAAtF,EAAiG;AAC/F,MAAMC,GAAG,GAAGP,WAAW,CAACQ,OAAxB;;AACA,MAAID,GAAJ,EAAS;AACPA,IAAAA,GAAG,CAAC9D,KAAJ,GAAYoD,SAAZ;AACAU,IAAAA,GAAG,CAAC7D,MAAJ,GAAamD,SAAb;AACAU,IAAAA,GAAG,CAACE,KAAJ,CAAUhE,KAAV,aAAqBoD,SAArB;AACAU,IAAAA,GAAG,CAACE,KAAJ,CAAU/D,MAAV,aAAsBmD,SAAtB;AAEA,QAAMa,eAAe,GAAGH,GAAG,CAACI,UAAJ,CAAe,IAAf,CAAxB;AAEAC,IAAAA,cAAc,CAACF,eAAD,EAAkBT,OAAlB,EAA2BC,OAA3B,EAAoCC,MAApC,EAA4CC,QAA5C,EAAsDC,MAAtD,EAA8DnC,KAA9D,EAAqEoC,SAArE,CAAd;AACD;AACF;;AAED,SAASO,qBAAT,OAAiE;AAAA,MAAhCC,YAAgC,QAAhCA,YAAgC;AAAA,MAAlBC,cAAkB,QAAlBA,cAAkB;AAC/D,MAAMC,OAAO,GAAG3E,SAAS,EAAzB;AACA,MAAM4E,SAAS,GAAGC,MAAM,CAAC,IAAD,CAAxB;AACA,MAAMC,WAAW,GAAGD,MAAM,CAAC,IAAD,CAA1B;AACA,MAAME,UAAU,GAAGF,MAAM,CAAC,IAAD,CAAzB;AAEA,MAAMG,SAAS,GAAGvB,QAAlB;AAEAwB,EAAAA,SAAS,CAAC,YAAM;AACd,QAAM3B,MAAM,GAAGsB,SAAS,CAACT,OAAzB;AAEAb,IAAAA,MAAM,CAAClD,KAAP,GAAeoD,SAAf;AACAF,IAAAA,MAAM,CAACjD,MAAP,GAAgBmD,SAAhB;AACAF,IAAAA,MAAM,CAACc,KAAP,CAAahE,KAAb,aAAwBoD,SAAxB;AACAF,IAAAA,MAAM,CAACc,KAAP,CAAa/D,MAAb,aAAyBmD,SAAzB;AAEA,QAAMM,MAAM,GAAGN,SAAS,GAAG,CAA3B;AACA,QAAMI,OAAO,GAAGJ,SAAS,GAAG,CAA5B;AACA,QAAMK,OAAO,GAAGL,SAAS,GAAG,CAA5B;AAEA,QAAM0B,gBAAgB,GAAKT,YAAY,GAAG,EAAhB,GAAsBO,SAAvB,GAAoCG,IAAI,CAACC,EAAzC,GAA8C,CAAvE;AACA,QAAMC,YAAY,GAAGH,gBAAgB,GAAKR,cAAc,GAAG,EAAlB,GAAwBM,SAAzB,GAAsCG,IAAI,CAACC,EAA3C,GAAgD,CAAxF;AAEA1B,IAAAA,YAAY,CAACoB,WAAD,EAAclB,OAAd,EAAuBC,OAAvB,EAAgCC,MAAhC,EAAwC,CAAxC,EAA2CoB,gBAA3C,EAA6DpF,cAA7D,EAA6E,IAA7E,CAAZ;AAEA4D,IAAAA,YAAY,CACVqB,UADU,EAEVnB,OAFU,EAGVC,OAHU,EAIVC,MAJU,EAKVoB,gBALU,EAMVG,YANU,EAOVtF,gBAPU,EAQV,IARU,CAAZ;AAUD,GA3BQ,CAAT;AA6BA,sBACEuF;AAAK,IAAA,SAAS,EAAEX,OAAO,CAACxE,IAAxB;AAAA,4BACEoF;AACE,MAAA,SAAS,EAAEC,UAAU,CAACb,OAAO,CAAC/D,cAAT,sBAClB+D,OAAO,CAACxD,oBADU,EACa,CAACsD,YAAD,IAAiB,CAACC,cAD/B,EADvB;AAAA,6BAKEa;AAAK,QAAA,SAAS,EAAEZ,OAAO,CAACvD;AAAxB;AALF,MADF,eASEkE;AAAK,MAAA,SAAS,EAAEX,OAAO,CAACrD,OAAxB;AAAA,8BACEiE,IAAC,UAAD;AAAY,QAAA,SAAS,EAAEZ,OAAO,CAACjD,SAA/B;AAAA;AAAA,QADF,EAEG+C,YAAY,IAAIC,cAAhB,gBACCY;AAAA,gCACEA;AAAK,UAAA,SAAS,EAAEX,OAAO,CAACvC,IAAxB;AAAA,kCACEmD,IAAC,UAAD;AACE,YAAA,SAAS,EAAEC,UAAU,CAACb,OAAO,CAACrC,MAAT,EAAiBqC,OAAO,CAAClC,YAAzB,CADvB;AAEE,YAAA,OAAO,EAAC,QAFV;AAAA,sBAIG,CAACgC,YAAY,GAAG,EAAhB,EAAoBgB,OAApB,CAA4B,CAA5B;AAJH,YADF,eAOEF,IAAC,UAAD;AAAY,YAAA,SAAS,EAAEZ,OAAO,CAACrC,MAA/B;AAAuC,YAAA,OAAO,EAAC,QAA/C;AAAA;AAAA,YAPF,eAUEiD,IAAC,UAAD;AACE,YAAA,SAAS,EAAEC,UAAU,CAACb,OAAO,CAACrC,MAAT,EAAiBqC,OAAO,CAAC/B,cAAzB,CADvB;AAEE,YAAA,OAAO,EAAC,QAFV;AAAA,sBAIG,CAAC8B,cAAc,GAAG,EAAlB,EAAsBe,OAAtB,CAA8B,CAA9B;AAJH,YAVF,eAgBEF,IAAC,UAAD;AAAY,YAAA,OAAO,EAAC,QAApB;AAAA;AAAA,YAhBF;AAAA,UADF,eAmBED;AAAK,UAAA,SAAS,EAAEX,OAAO,CAAC7B,MAAxB;AAAA,kCACEwC,KAAC,UAAD;AAAY,YAAA,SAAS,EAAEX,OAAO,CAAC5B,UAA/B;AAA2C,YAAA,OAAO,EAAC,QAAnD;AAAA,oCACEwC;AAAK,cAAA,SAAS,EAAEC,UAAU,CAACb,OAAO,CAAC1B,GAAT,EAAc0B,OAAO,CAACjC,WAAtB;AAA1B,cADF;AAAA,YADF,eAIE4C,KAAC,UAAD;AAAY,YAAA,SAAS,EAAEX,OAAO,CAAC5B,UAA/B;AAA2C,YAAA,OAAO,EAAC,QAAnD;AAAA,oCACEwC;AAAK,cAAA,SAAS,EAAEC,UAAU,CAACb,OAAO,CAAC1B,GAAT,EAAc0B,OAAO,CAAC9B,aAAtB;AAA1B,cADF;AAAA,YAJF;AAAA,UAnBF;AAAA,QADD,gBA+BC0C;AAAK,QAAA,SAAS,EAAEZ,OAAO,CAACvB,MAAxB;AAAA,+BACEmC,IAAC,UAAD;AAAY,UAAA,SAAS,EAAEZ,OAAO,CAACtB,UAA/B;AAAA;AAAA;AADF,QAjCJ;AAAA,MATF,eAgDEiC;AAAK,MAAA,SAAS,EAAEX,OAAO,CAACxB,KAAxB;AAAA,8BACEoC;AAAQ,QAAA,GAAG,EAAEX,SAAb;AAAwB,QAAA,SAAS,EAAED,OAAO,CAACrB;AAA3C,QADF,eAEEiC;AAAQ,QAAA,GAAG,EAAET,WAAb;AAA0B,QAAA,SAAS,EAAEH,OAAO,CAACpB;AAA7C,QAFF,eAGEgC;AAAQ,QAAA,GAAG,EAAER,UAAb;AAAyB,QAAA,SAAS,EAAEJ,OAAO,CAACpB;AAA5C,QAHF;AAAA,MAhDF;AAAA,IADF;AAwDD;;AAEDiB,qBAAqB,CAACkB,SAAtB,GAAkC;AAChCjB,EAAAA,YAAY,EAAEkB,SAAS,CAACC,MADQ;AAEhClB,EAAAA,cAAc,EAAEiB,SAAS,CAACC;AAFM,CAAlC;AAKApB,qBAAqB,CAACqB,YAAtB,GAAqC;AACnCpB,EAAAA,YAAY,EAAEqB,SADqB;AAEnCpB,EAAAA,cAAc,EAAEoB;AAFmB,CAArC;;;;"}