@dream-encode/wp-js-plugin-utils 0.2.6 → 0.4.0

package/dist/components/Progress/styles/_progress.scss

@@ -0,0 +1,112 @@
+/*
+ * Generic styling for the wp-plugin-utils Progress component.
+ *
+ * Targets the `<progress>` element rendered by `<Progress>`. Apply to a
+ * selector that matches the `className` prop (defaults to `progress-bar`).
+ *
+ *     .progress-bar {
+ *         @include de-wp-plugin-utils-progress();
+ *     }
+ */
+
+$de-wp-plugin-utils-progress-waiting-color: #f1efef !default;
+$de-wp-plugin-utils-progress-processing-color: #006FE6 !default;
+$de-wp-plugin-utils-progress-complete-color: #65C728 !default;
+$de-wp-plugin-utils-progress-border-radius: 5px !default;
+$de-wp-plugin-utils-progress-shimmer-end-color: rgba(255, 255, 255, 0.3) !default;
+
+@mixin de-wp-plugin-utils-progress(
+	$waiting-color: $de-wp-plugin-utils-progress-waiting-color,
+	$processing-color: $de-wp-plugin-utils-progress-processing-color,
+	$complete-color: $de-wp-plugin-utils-progress-complete-color,
+	$border-radius: $de-wp-plugin-utils-progress-border-radius,
+	$shimmer-end-color: $de-wp-plugin-utils-progress-shimmer-end-color
+) {
+	height: 20px;
+	width: 100%;
+	border-radius: $border-radius;
+	position: relative;
+
+	&::-webkit-progress-bar {
+		background: $waiting-color;
+		border-radius: $border-radius;
+	}
+
+	&.processing {
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(
+				90deg,
+				transparent 0%,
+				$shimmer-end-color 50%,
+				transparent 100%
+			);
+			background-size: 200% 100%;
+			border-radius: $border-radius;
+			animation: de-wp-plugin-utils-progress-shimmer 2s infinite linear;
+			pointer-events: none;
+		}
+
+		&::-webkit-progress-value {
+			background: $processing-color;
+			animation: none;
+		}
+
+		&::-webkit-progress-bar {
+			animation: none;
+		}
+	}
+
+	&.pending,
+	&.queued {
+		&::-webkit-progress-value {
+			background: $waiting-color;
+			animation-name: de-wp-plugin-utils-progress-pulse-waiting;
+			animation-duration: 2s;
+			animation-iteration-count: infinite;
+		}
+
+		&::-webkit-progress-bar {
+			animation-name: de-wp-plugin-utils-progress-pulse-waiting;
+			animation-duration: 2s;
+			animation-iteration-count: infinite;
+		}
+	}
+
+	&.complete {
+		&::-webkit-progress-value {
+			background: $complete-color;
+		}
+	}
+
+	&::-webkit-progress-value,
+	&[value]::-webkit-progress-value {
+		border-radius: $border-radius;
+		transition: all 1s ease;
+	}
+}
+
+@keyframes de-wp-plugin-utils-progress-pulse-waiting {
+	0% {
+		background-color: hsl( 200, 20%, 70% );
+	}
+
+	100% {
+		background-color: hsl( 200, 20%, 95% );
+	}
+}
+
+@keyframes de-wp-plugin-utils-progress-shimmer {
+	0% {
+		background-position: -200% 0;
+	}
+
+	100% {
+		background-position: 200% 0;
+	}
+}

package/dist/components/index.js

@@ -3,11 +3,69 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DismissAllButton", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.DismissAllButton;
+  }
+});
 Object.defineProperty(exports, "Notices", {
   enumerable: true,
   get: function () {
     return _Notices.default;
   }
 });
+Object.defineProperty(exports, "NotificationItem", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.NotificationItem;
+  }
+});
+Object.defineProperty(exports, "NotificationsDrawer", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.default;
+  }
+});
+Object.defineProperty(exports, "NotificationsList", {
+  enumerable: true,
+  get: function () {
+    return _NotificationsDrawer.NotificationsList;
+  }
+});
+Object.defineProperty(exports, "ProcessInfo", {
+  enumerable: true,
+  get: function () {
+    return _Process.default;
+  }
+});
+Object.defineProperty(exports, "ProcessInfoRow", {
+  enumerable: true,
+  get: function () {
+    return _Process.ProcessInfoRow;
+  }
+});
+Object.defineProperty(exports, "ProcessStatusInfo", {
+  enumerable: true,
+  get: function () {
+    return _Process.ProcessStatusInfo;
+  }
+});
+Object.defineProperty(exports, "ProcessStatusSummary", {
+  enumerable: true,
+  get: function () {
+    return _Process.ProcessStatusSummary;
+  }
+});
+Object.defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function () {
+    return _Progress.default;
+  }
+});
 var _Notices = _interopRequireDefault(require("./Notices"));
+var _NotificationsDrawer = _interopRequireWildcard(require("./NotificationsDrawer"));
+var _Process = _interopRequireWildcard(require("./Process"));
+var _Progress = _interopRequireDefault(require("./Progress"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/utils/time.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.secondsToDhmsShortIso = exports.secondsToDhmsShort = exports.secondsToDhms = exports.addSecondsToCurrentTime = void 0;
+exports.secondsToDhmsShortIso = exports.secondsToDhmsShort = exports.secondsToDhms = exports.calculateEstimatedTimeRemainingUsingSMA = exports.calculateEstimatedTimeRemainingUsingEMA = exports.calculateEstimatedTimeRemainingSimple = exports.addSecondsToCurrentTime = void 0;
 var _strings = require("./strings");
 /**
  * Convert seconds to a human readable format.
@@ -80,4 +80,135 @@ const addSecondsToCurrentTime = seconds => {
   rawDate = new Date(rawDate.getTime() + Number(seconds * 1000));
   return rawDate.getTime() / 1000;
 };
-exports.addSecondsToCurrentTime = addSecondsToCurrentTime;
+
+/**
+ * Calculate an estimated time remaining based on elapsed time and percent complete.
+ *
+ * @param  {number}  startTime        Unix timestamp (seconds) when the process started.
+ * @param  {number}  percentComplete  Percent complete (0-100).
+ * @return {number}
+ */
+exports.addSecondsToCurrentTime = addSecondsToCurrentTime;
+const calculateEstimatedTimeRemainingSimple = (startTime, percentComplete) => {
+  if (!startTime || percentComplete <= 0 || percentComplete >= 100) {
+    return 0;
+  }
+  const secondsSinceStartTime = Date.now() / 1000 - Number(startTime);
+  const decimalComplete = percentComplete / 100;
+  const totalSeconds = secondsSinceStartTime / decimalComplete;
+  const remaining = totalSeconds - secondsSinceStartTime;
+  return Math.max(1, remaining);
+};
+
+/**
+ * Calculate an estimated time remaining, using Simple Moving Average (SMA).
+ *
+ * @param  {number[]}  times   Array of previous run times (seconds).
+ * @param  {number}    window  Subset of times to use.
+ * @param  {number}    n       Number of loops.
+ * @return {number[]}
+ */
+exports.calculateEstimatedTimeRemainingSimple = calculateEstimatedTimeRemainingSimple;
+const calculateEstimatedTimeRemainingUsingSMA = (times, window = 2, n = Infinity) => {
+  if (!times || times.length < window) {
+    return [];
+  }
+  let index = window - 1;
+  const length = times.length + 1;
+  const simpleMovingAverages = [];
+  let numberOfSMAsCalculated = 0;
+  while (++index < length && numberOfSMAsCalculated++ < n) {
+    const windowSlice = times.slice(index - window, index);
+    const sum = windowSlice.reduce((prev, curr) => prev + curr, 0);
+    simpleMovingAverages.push(sum / window);
+  }
+  return simpleMovingAverages;
+};
+
+/**
+ * Calculate an estimated time remaining, using Exponential Moving Average (EMA).
+ *
+ * Each run object should expose at least `start_time`. Optional fields
+ * `completed_time`, `last_attempt_time` and `total_time` are used when present.
+ *
+ * @param  {Object[]}  runs           Array of process run records.
+ * @param  {number}    window         Subset of times to use.
+ * @param  {boolean}   useCycleTime   Whether to use full cycle time instead of pure processing time.
+ * @return {{emaValues: number[], avgTime: number}}
+ */
+exports.calculateEstimatedTimeRemainingUsingSMA = calculateEstimatedTimeRemainingUsingSMA;
+const calculateEstimatedTimeRemainingUsingEMA = (runs, window = 2, useCycleTime = true) => {
+  if (!runs || runs.length < window + 1) {
+    return {
+      emaValues: [],
+      avgTime: 0
+    };
+  }
+  const sortedRuns = [...runs].sort((a, b) => Number(a.start_time) - Number(b.start_time));
+  let timesToUse = [];
+  if (useCycleTime) {
+    const runsWithCycleTimes = [];
+    for (let i = 1; i < sortedRuns.length; i++) {
+      const previousRun = sortedRuns[i - 1];
+      const currentRun = sortedRuns[i];
+      const processingTime = currentRun.completed_time ? Number(currentRun.completed_time) - Number(currentRun.start_time) : currentRun.last_attempt_time ? Number(currentRun.last_attempt_time) - Number(currentRun.start_time) : 0;
+      const previousEndTime = previousRun.completed_time ? Number(previousRun.completed_time) : previousRun.last_attempt_time ? Number(previousRun.last_attempt_time) : Number(previousRun.start_time);
+      const currentEndTime = currentRun.completed_time ? Number(currentRun.completed_time) : currentRun.last_attempt_time ? Number(currentRun.last_attempt_time) : Number(currentRun.start_time);
+      const cycleTime = currentEndTime - previousEndTime;
+      if (cycleTime > 0 && processingTime > 0) {
+        runsWithCycleTimes.push({
+          ...currentRun,
+          total_time: processingTime,
+          cycle_time: cycleTime
+        });
+      }
+    }
+    if (runsWithCycleTimes.length < window) {
+      return {
+        emaValues: [],
+        avgTime: 0
+      };
+    }
+    timesToUse = runsWithCycleTimes.map(run => run.cycle_time);
+  } else {
+    timesToUse = sortedRuns.map(run => {
+      if (typeof run.total_time === 'number' && run.total_time > 0) {
+        return run.total_time;
+      }
+      const startTime = run.start_time ? Number(run.start_time) : null;
+      const endTime = run.completed_time ? Number(run.completed_time) : run.last_attempt_time ? Number(run.last_attempt_time) : null;
+      return startTime && endTime ? endTime - startTime : 0;
+    }).filter(time => time > 0);
+    if (timesToUse.length < window) {
+      return {
+        emaValues: [],
+        avgTime: 0
+      };
+    }
+  }
+  let index = window - 1;
+  let previousEmaIndex = 0;
+  const length = timesToUse.length;
+  const smoothingFactor = 2 / (window + 1);
+  const exponentialMovingAverages = [];
+  const smaValues = calculateEstimatedTimeRemainingUsingSMA(timesToUse, window, 1);
+  const sma = smaValues.length > 0 ? smaValues[0] : 0;
+  if (sma <= 0) {
+    return {
+      emaValues: [],
+      avgTime: 0
+    };
+  }
+  exponentialMovingAverages.push(sma);
+  while (++index < length) {
+    const value = timesToUse[index];
+    const previousEma = exponentialMovingAverages[previousEmaIndex++];
+    const currentEma = (value - previousEma) * smoothingFactor + previousEma;
+    exponentialMovingAverages.push(currentEma);
+  }
+  return {
+    emaValues: exponentialMovingAverages,
+    avgTime: exponentialMovingAverages.length > 0 ? exponentialMovingAverages[exponentialMovingAverages.length - 1] : 0
+  };
+};
+exports.calculateEstimatedTimeRemainingUsingEMA = calculateEstimatedTimeRemainingUsingEMA;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dream-encode/wp-js-plugin-utils",
-  "version": "0.2.6",
+  "version": "0.4.0",
   "description": "Common JS functionality used by custom WP plugins.",
   "keywords": [
     "wordpress",
@@ -27,6 +27,9 @@
     "./settings/styles": "./dist/settings/styles/_settings-page.scss",
     "./data-migrations": "./dist/data-migrations/index.js",
     "./components": "./dist/components/index.js",
+    "./components/notifications-drawer/styles": "./dist/components/NotificationsDrawer/styles/_notifications-drawer.scss",
+    "./components/process/styles": "./dist/components/Process/styles/_process.scss",
+    "./components/progress/styles": "./dist/components/Progress/styles/_progress.scss",
     "./hooks": "./dist/hooks/index.js",
     "./api": "./dist/api/index.js",
     "./utils": "./dist/utils/index.js",