@corva/ui 0.65.0-0 → 0.65.0-1-test

package/components/VirtualizedTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/VirtualizedTable/index.js"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { AutoSizer } from 'react-virtualized';\nimport { IconButton, makeStyles } from '@material-ui/core';\nimport SettingsIcon from '@material-ui/icons/Settings';\n\nimport CustomizeColumnsDialog from './CustomizeColumnsDialog';\nimport StyledVirtualizedTable from './VirtualizedTable';\n\nconst useStyles = makeStyles({\n  vtTopSetting: {\n    position: 'relative',\n    height: '25px',\n  },\n  vtTopSettingIcon: {\n    position: 'fixed',\n    right: '20px',\n    padding: '3px',\n    fontSize: '20px',\n  },\n});\n\nfunction VTableComponent({\n  columns,\n  useColumnSetting,\n  savedColumns,\n  onChangeColumns,\n  customMuiStyles,\n  ...otherProps\n}) {\n  const classes = useStyles();\n  const [open, setOpen] = useState(false);\n  const [showSetting, setShowSetting] = useState(false);\n\n  // NOTE: Validate and adjust the stored columns\n  const adjustedColumns = useMemo(() => {\n    const result = [];\n\n    // NOTE: Check if stored columns are still valid\n    savedColumns.forEach(savedColumn => {\n      const foundColumn = columns.find(column => column.key === savedColumn.key);\n      if (foundColumn) {\n        result.push({\n          ...foundColumn,\n          show: savedColumn.show,\n        });\n      }\n    });\n\n    // NOTE: Add modified or new columns\n    columns.forEach(column => {\n      const existingColumn = result.find(item => item.key === column.key);\n      if (!existingColumn) {\n        result.push(column);\n      }\n    });\n\n    return result;\n  }, [columns, savedColumns]);\n\n  const settingRowHeight = useColumnSetting && showSetting ? 25 : 0;\n\n  return (\n    <>\n      {useColumnSetting && showSetting && (\n        <div className={classes.vtTopSetting}>\n          <IconButton\n            size=\"small\"\n            className={classes.vtTopSettingIcon}\n            onClick={() => setOpen(true)}\n          >\n            <SettingsIcon fontSize=\"inherit\" />\n          </IconButton>\n        </div>\n      )}\n      <AutoSizer>\n        {({ width, height }) => (\n          <StyledVirtualizedTable\n            width={width}\n            height={height - settingRowHeight}\n            columns={adjustedColumns}\n            useColumnSetting={useColumnSetting}\n            onOpenSettingDlg={() => setOpen(true)}\n            showTopSettingIcon={bShow => setShowSetting(bShow)}\n            customMuiStyles={customMuiStyles}\n            {...otherProps}\n          />\n        )}\n      </AutoSizer>\n\n      <CustomizeColumnsDialog\n        open={open}\n        columns={adjustedColumns}\n        handleCloseWithCancel={() => setOpen(false)}\n        handleCloseWithOK={newColumns => {\n          if (onChangeColumns) {\n            onChangeColumns(newColumns);\n          }\n          setOpen(false);\n        }}\n      />\n    </>\n  );\n}\n\nVTableComponent.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.shape({})),\n  data: PropTypes.arrayOf(PropTypes.shape({})),\n  useColumnSetting: PropTypes.bool,\n  useFixedColumnWidth: PropTypes.bool,\n  headerHeight: PropTypes.number,\n  rowHeight: PropTypes.number,\n  // NOTE: Someone may need to modify some columns or add/delte some columns\n  // So we should keep another array for the order and visibility of columns. 'savedColumns' is for it.\n  savedColumns: PropTypes.arrayOf(PropTypes.shape({})),\n  onChangeColumns: PropTypes.func,\n  customMuiStyles: PropTypes.shape({}),\n  isTopSettingIconShownAlways: PropTypes.bool,\n  CustomCellRenderer: PropTypes.func,\n  customRowStyle: PropTypes.func,\n\n  // NOTE: Sortable feature\n  sort: PropTypes.func,\n  sortBy: PropTypes.string,\n  sortDirection: PropTypes.string,\n};\n\nVTableComponent.defaultProps = {\n  columns: [],\n  data: [],\n  useColumnSetting: false,\n  useFixedColumnWidth: false,\n  headerHeight: 50,\n  rowHeight: 35,\n  savedColumns: [],\n  onChangeColumns: null,\n  customMuiStyles: {},\n  isTopSettingIconShownAlways: false,\n  CustomCellRenderer: null,\n  customRowStyle: null,\n  sort: null,\n  sortBy: null,\n  sortDirection: null,\n};\nexport default VTableComponent;\n"],"names":["useStyles","makeStyles","vtTopSetting","position","height","vtTopSettingIcon","right","padding","fontSize","VTableComponent","columns","useColumnSetting","savedColumns","onChangeColumns","customMuiStyles","otherProps","classes","useState","open","setOpen","showSetting","setShowSetting","adjustedColumns","useMemo","result","forEach","savedColumn","foundColumn","find","column","key","push","show","existingColumn","item","settingRowHeight","_jsxs","_Fragment","_jsx","width","bShow","newColumns","propTypes","PropTypes","arrayOf","shape","data","bool","useFixedColumnWidth","headerHeight","number","rowHeight","func","isTopSettingIconShownAlways","CustomCellRenderer","customRowStyle","sort","sortBy","string","sortDirection","defaultProps"],"mappings":"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"}

package/components/WellSummary/ActivitySummaryChart.js

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

package/components/WellSummary/FracWirelineTimeChart.js

@@ -1 +1,254 @@
-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 PropTypes from 'prop-types';
+import { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { makeStyles, Typography } from '@material-ui/core';
+import { drawDonutSlice } from './utils.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+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 { FracWirelineTimeChart as default };
+//# sourceMappingURL=FracWirelineTimeChart.js.map