fluency-v8-components 1.3.4 → 1.3.6

package/src/utils/download.js

@@ -0,0 +1,220 @@
+import JSZip from "jszip";
+import FileSaver from "file-saver";
+import html2canvas from "html2canvas";
+import { jsPDF as JSpdf } from "jspdf";
+
+const saveFile = (data, filename) => {
+  const blob = new Blob([data], { type: "text/plain" });
+  const event = document.createEvent("MouseEvents");
+  const link = document.createElement("a");
+  link.download = filename;
+  link.href = window.URL.createObjectURL(blob);
+  link.dataset.downloadurl = ["text/csv", link.download, link.href].join(":");
+  event.initEvent(
+    "click",
+    true,
+    false,
+    window,
+    0,
+    0,
+    0,
+    0,
+    0,
+    false,
+    false,
+    false,
+    false,
+    0,
+    null
+  );
+  link.dispatchEvent(event);
+};
+
+const exportPanelAsCsv = (columns, rows) => {
+  let csv = columns.map((col) => col.header).join(",") + "\n";
+  const order = {};
+  columns.forEach((col, index) => {
+    order[col.field] = index;
+  });
+  rows.forEach((row) => {
+    let r = "";
+    Object.keys(order).forEach((key) => {
+      let val = row[key];
+      if (typeof val === "undefined") {
+        val = "";
+      }
+      if (typeof val === "string") {
+        val = val.replace(", ", " ").replace(",", " ");
+      }
+      // add double quotes to csv export
+      r += '"' + val + '"' + ",";
+    });
+    csv += r.slice(0, -1) + "\n";
+  });
+  return csv;
+};
+
+const panelCSVDownload = (title, columns, rows) => {
+  const csv = exportPanelAsCsv(columns, rows);
+  const name = title || "data";
+  saveFile(csv, `${name}.csv`);
+};
+
+// needs to be in the format of columns and rows
+const exportAsCsv = (table) => {
+  let csv =
+    table.columns
+      .map((col) => col.replaceAll(", ", " ").replaceAll(",", " "))
+      .join(",") + "\n";
+
+  const order = {};
+  table.columns.forEach((col, index) => {
+    order[col] = index;
+  });
+  table.rows.forEach((row) => {
+    let r = "";
+    Object.keys(order).forEach((key) => {
+      let val = row[key];
+      if (typeof val === "undefined") {
+        val = "";
+      }
+      if (typeof val === "string") {
+        val = val.replaceAll(", ", " ").replaceAll(",", " ");
+      }
+      // add double quotes to csv export
+      r += '"' + val + '"' + ",";
+    });
+    csv += r.slice(0, -1) + "\n";
+  });
+  return csv;
+};
+
+// accepts a table object with name, columns, and rows
+const csvDownload = (table) => {
+  const csv = exportAsCsv(table);
+  const name = table.name || "data";
+  saveFile(csv, `${name}.csv`);
+};
+
+const csvDownloadZip = (tables, filename = "data") => {
+  if (tables.length === 0) {
+    return;
+  }
+
+  const zip = new JSZip();
+  tables.forEach((table, index) => {
+    const csv = exportAsCsv(table);
+    const name = table.name || `${filename}-${index}`;
+    zip.file(`${name}.csv`, csv);
+  });
+  zip.generateAsync({ type: "blob" }).then((content) => {
+    return FileSaver.saveAs(content, `${filename}.zip`);
+  });
+};
+
+const reportToPdf = async (name, layouts) => {
+  const pdf = new JSpdf("p", "px", "a4", true);
+  const pageHeight = pdf.internal.pageSize.getHeight();
+  const pageWidth = pdf.internal.pageSize.getWidth();
+  const fontSize = 10;
+  const layoutColumns = 18;
+  const xMargin = 20;
+  const yMargin = 35;
+  const xGap = 3;
+  const yGap = 3;
+
+  const logoWidth = 80;
+  const logoHeight = 20;
+  const logoXOffset = 20;
+  const logoYOffset = 10;
+  const logo = await getLogo();
+
+  let pageIndexOffset = 0;
+  let pageNumber = 1;
+
+  const widthUnit = Math.floor((pageWidth - xMargin) / layoutColumns);
+  const heightUnit = widthUnit * 0.9;
+  pdf.setFontSize(fontSize);
+  pdf.setFont(undefined, "normal");
+  pdf.addImage(logo, "png", logoXOffset, logoYOffset, logoWidth, logoHeight);
+  pdf.text(pageWidth - 2 * xMargin, pageHeight - 10, `Page ${pageNumber}`);
+
+  for (const layout of layouts.layout) {
+    const widget = document.getElementById(`grid-item-${layout.i}`);
+    const canvasOptions = {};
+    const canvas = await html2canvas(widget, canvasOptions);
+    const img = canvas.toDataURL("image/png");
+    const x = layout.x * widthUnit;
+    const y = layout.y * heightUnit;
+    const endOfImg = y + yMargin + layout.h * heightUnit;
+    // if panel is too large for page, add new page
+    if (endOfImg > pageHeight + pageIndexOffset) {
+      pdf.addPage();
+      pageNumber += 1;
+      pdf.addImage(
+        logo,
+        "png",
+        logoXOffset,
+        logoYOffset,
+        logoWidth,
+        logoHeight
+      );
+      pdf.text(pageWidth - 2 * xMargin, pageHeight - 10, `Page ${pageNumber}`);
+      pageIndexOffset = y;
+    }
+    // check if panel is oversized for page
+    if (layout.h * heightUnit > pageHeight) {
+      pdf.addImage(
+        img,
+        "png",
+        x + xMargin,
+        y + yMargin - pageIndexOffset,
+        layout.w * widthUnit - xGap,
+        pageHeight - yMargin
+      );
+    } else {
+      pdf.addImage(
+        img,
+        "png",
+        x + xMargin,
+        y + yMargin - pageIndexOffset,
+        layout.w * widthUnit - xGap,
+        layout.h * heightUnit - yGap
+      );
+    }
+  }
+
+  pdf.save(`${name}.pdf`);
+};
+
+const getLogo = () => {
+  return document.getElementById("logo");
+};
+
+const base64toImage = async (logo) => {
+  let data = {};
+  const img = new Image();
+  const logoHeight = 20;
+  img.src = logo;
+  await img.decode().then((res) => {
+    const aspectRatio = img.width / img.height;
+    const type = logo.split("data:image/")[1].split(";")[0];
+    data = {
+      logo: logo,
+      type: type,
+      height: logoHeight,
+      width: logoHeight * aspectRatio,
+    };
+  });
+  return data;
+};
+
+export {
+  saveFile,
+  panelCSVDownload,
+  csvDownload,
+  csvDownloadZip,
+  exportAsCsv,
+  reportToPdf,
+  base64toImage,
+};

package/src/utils/formatOutput.js

@@ -0,0 +1,156 @@
+const costCount = (total) => {
+  return `$${total.toFixed(2)}`;
+};
+
+const humanCount = (total) => {
+  const units = ["", "K", "M", "G", "T", "P"];
+  let u = 0;
+  const sign = total >= 0;
+  let count = Math.abs(total);
+  if (count < 1000) {
+    return count;
+  }
+  while (count >= 1000 && u < units.length - 1) {
+    count /= 1000;
+    ++u;
+  }
+  return sign
+    ? `${count.toFixed(1)} ${units[u]}`
+    : `-${count.toFixed(1)} ${units[u]}`;
+};
+
+const dataCount = (total) => {
+  const units = ["", "Ki", "Mi", "Gi", "Ti", "Pi"];
+  let u = 0;
+  const sign = total >= 0;
+  let count = Math.abs(total);
+  if (count < 1024) {
+    if (count === 1000) return 1000;
+    return count.toPrecision(3);
+  }
+  while (count >= 1024 && u < units.length - 1) {
+    count /= 1024;
+    ++u;
+  }
+  return sign
+    ? `${count.toFixed(1)} ${units[u]}`
+    : `-${count.toFixed(1)} ${units[u]}`;
+};
+
+const readableNumber = (x) => {
+  if (Number.isNaN(x)) return x;
+
+  if (x < 9999) {
+    return x.toFixed(2);
+  }
+
+  if (x < 1000000) {
+    return Math.round(x / 1000) + "K";
+  }
+
+  if (x < 1000000000) {
+    return Math.round(x / 1000000) + "M";
+  }
+
+  if (x < 1000000000000) {
+    return Math.round(x / 1000000000) + "G";
+  }
+
+  if (x < 1000000000000000) {
+    return Math.round(x / 1000000000000) + "T";
+  }
+
+  return Math.round(x / 1000000000000000) + "P";
+};
+
+const formatReadableTime = (delay) => {
+  if (delay > 60000) {
+    if (delay > 3600000) {
+      if (delay > 86400000) {
+        return Math.floor(delay / 86400000) + " days";
+      }
+      return Math.floor(delay / 3600000) + " hrs";
+    }
+    return Math.floor(delay / 60000) + " mins";
+  }
+  return delay + " ms";
+};
+
+const durationCount = (duration) => {
+  const units = ["s", "mins", "hrs", "days"];
+  let count = duration;
+  let str = "";
+  if (count >= 86400) {
+    const days = Math.floor(count / 86400);
+    count %= 86400;
+    str += `${days} ${units[3]} `;
+  }
+  if (count >= 3600) {
+    const hours = Math.floor(count / 3600);
+    count %= 3600;
+    str += `${hours} ${units[2]} `;
+  }
+  if (count >= 60) {
+    const minutes = Math.floor(count / 60);
+    count %= 60;
+    str += `${minutes} ${units[1]} `;
+  }
+
+  return `${str}${count} ${units[0]}`;
+};
+
+const formatMS = (duration) => {
+  if (duration < 1000) {
+    return `${duration} ms`;
+  }
+  const units = ["s", "mins", "hrs", "days"];
+  let count = Math.floor(duration / 1000);
+  let str = "";
+  if (count >= 86400) {
+    const days = Math.floor(count / 86400);
+    count %= 86400;
+    str += `${days} ${units[3]} `;
+  }
+  if (count >= 3600) {
+    const hours = Math.floor(count / 3600);
+    count %= 3600;
+    str += `${hours} ${units[2]} `;
+  }
+  if (count >= 60) {
+    const minutes = Math.floor(count / 60);
+    count %= 60;
+    str += `${minutes} ${units[1]} `;
+  }
+
+  return `${str}${count} ${units[0]}`;
+};
+
+// hide . as 3 spaces
+const encodeURLQuery = (query) => {
+  return query.replaceAll(".", "   ");
+};
+const decodeURLQuery = (query) => {
+  return query.replaceAll("%020%020%020", ".").replaceAll("   ", ".");
+};
+
+const encodeJSONKey = (key) => {
+  let keyStr = `[\\\"` + key.join(`\\\",\\\"`) + `\\\"]`;
+  return keyStr;
+};
+const encodeJSONID = (key) => {
+  return key.replaceAll('"', `\\\"`);
+};
+
+export {
+  readableNumber,
+  humanCount,
+  dataCount,
+  costCount,
+  formatReadableTime,
+  durationCount,
+  formatMS,
+  encodeURLQuery,
+  decodeURLQuery,
+  encodeJSONKey,
+  encodeJSONID,
+};

package/src/utils/random.js

@@ -0,0 +1,32 @@
+const randomId = (length) => {
+  let result = "";
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};
+
+const randomRoleId = (length = 10) => {
+  let result = "";
+  const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return "ext_" + result;
+};
+
+const randomNumber = (length = 10) => {
+  let result = "";
+  const characters = "0123456789";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};
+
+export { randomId, randomRoleId, randomNumber };

package/src/utils/timeUtils.js

@@ -0,0 +1,138 @@
+import moment from "moment";
+
+const dateLocalTime = (timestamp) => {
+  const d = new Date(timestamp);
+  const options = {
+    weekday: "long",
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  };
+  return d.toLocaleTimeString("en-us", options);
+};
+
+// DATE in year month day format (local time zone)
+const dateString = (timestamp) => {
+  return date.formatDate(timestamp, "YYYY MMM DD");
+};
+
+// DATE in year month day format, in UTC timezone
+const dateStringUTC = (timestamp) => {
+  return (
+    moment
+      .unix(timestamp / 1000)
+      .utc()
+      .format("YYYY MMM DD") + " UTC"
+  );
+};
+// DATE in US month day year format (local time zone)
+const dateStringUS = (timestamp) => {
+  return date.formatDate(timestamp, "MMM DD, YYYY");
+};
+// DATE in EU/World day month year format (local time zone)
+const dateStringWorld = (timestamp) => {
+  return date.formatDate(timestamp, "DD MMM YYYY");
+};
+// DATE with TIME in year month day format with TZ offset
+const dateStringTime = (timestamp) => {
+  const date = new Date(timestamp);
+  return date.formatDate(timestamp, "YYYY MMM DD h:mm A Z");
+};
+
+// DATE in DoW month day format (local time zone)
+const dateWeek = (timestamp) => {
+  return moment.unix(timestamp / 1000).format("ddd, MMM DD");
+};
+
+// Version without Moment
+function presentDate(rawDate) {
+  const local = new Date(rawDate);
+  const options = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour12: false,
+  };
+  return (
+    local.toLocaleDateString("en-US", options) +
+    " " +
+    local.toLocaleTimeString("en-US")
+  );
+}
+
+function shortTimeDate(rawDate) {
+  const local = new Date(rawDate);
+  const options = {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour12: false,
+  };
+  return (
+    local.toLocaleDateString("en-US", options) +
+    " " +
+    local.toLocaleTimeString("en-US")
+  );
+}
+
+function hoursTimestampFromNow(ts) {
+  return ts ? moment(moment.now()).diff(ts, "hours") : NaN;
+}
+
+function dayTime(ts) {
+  return moment(ts).utc().format("MMM D Y, HH:mmz");
+}
+
+function formatTime(time) {
+  return moment(time).format("MMM Do Y, h:mm a");
+}
+
+function parseTime(time) {
+  if (!time) {
+    return new Date();
+  }
+  // get the format of the time
+  if (time.toString().indexOf("/") !== -1) {
+    return new Date(time);
+  } else if (time.toString().indexOf("-") !== -1) {
+    return new Date(time);
+  } else if (time.toString().startsWith("2")) {
+    const year = time.substring(0, 4);
+    const month = time.substring(4, 6);
+    const day = time.substring(6, 8);
+    return new Date(year, month - 1, day);
+  }
+  const date = new Date(time);
+  if (date.valueOf() !== time) {
+    return new Date(time * 1000);
+  }
+  return new Date(time);
+}
+
+function timeFromNow(time) {
+  return moment(time).fromNow();
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export {
+  dateWeek,
+  dateStringUS,
+  dateStringWorld,
+  dateStringTime,
+  dateString,
+  dateStringUTC,
+  presentDate,
+  shortTimeDate,
+  dateLocalTime,
+  hoursTimestampFromNow,
+  dayTime,
+  parseTime,
+  formatTime,
+  timeFromNow,
+  sleep,
+};