@mptw/skylens-ui 1.5.0 → 1.5.2

package/app/utils/index.ts

@@ -14,32 +14,35 @@ import {
   getYear,
   format as formatDate,
   getDaysInMonth,
-} from 'date-fns';
+} from "date-fns";
 import { sortBy, isEqual } from "lodash-es";
-import { HanRegex } from '#imports';
-import type IDateRange from '~ui/interface/IDateRange';
-import { ScreenSize } from '~ui/interface/commons';
-import ExcelJS from 'exceljs';
-import { useGtm } from '@gtm-support/vue-gtm';
+import { HanRegex } from "#imports";
+import type IDateRange from "~ui/app/interface/IDateRange";
+import { ScreenSize } from "~ui/app/interface/commons";
+import ExcelJS from "exceljs";
+import { useGtm } from "@gtm-support/vue-gtm";
 import * as htmlToImage from "html-to-image";
 
 export const getUID = () => {
   return `uid-${Math.random().toString(36).substring(2)}`;
 };
 
-export const dateRangeToStatus = (dateRange: IDateRange | null, baseDate = new Date()) => {
-  if (!dateRange || !dateRange.start || !dateRange.end) return 'custom';
+export const dateRangeToStatus = (
+  dateRange: IDateRange | null,
+  baseDate = new Date(),
+) => {
+  if (!dateRange || !dateRange.start || !dateRange.end) return "custom";
 
   const { start, end } = dateRange;
   const diff = differenceInCalendarDays(end, start);
   const isEndDateEqualBaseDate = differenceInCalendarDays(baseDate, end) === 0;
 
   if (diff === 6 && isEndDateEqualBaseDate) {
-    return 'last7Days';
+    return "last7Days";
   } else if (diff === 29 && isEndDateEqualBaseDate) {
-    return 'last30Days';
+    return "last30Days";
   } else if (diff === 89 && isEndDateEqualBaseDate) {
-    return 'last90Days';
+    return "last90Days";
   } else if (
     getYear(start) === getYear(end) &&
     getMonth(start) === getMonth(end) &&
@@ -47,39 +50,45 @@ export const dateRangeToStatus = (dateRange: IDateRange | null, baseDate = new D
     isLastDayOfMonth(end) &&
     differenceInCalendarMonths(end, baseDate) === -1
   ) {
-    return 'lastMonth';
+    return "lastMonth";
   }
 
-  return 'custom';
+  return "custom";
 };
 
-export const statusToDateRange = (status: string | null, baseDate = new Date()) => {
+export const statusToDateRange = (
+  status: string | null,
+  baseDate = new Date(),
+) => {
   const lastMonth = subMonths(baseDate, 1);
 
   switch (status) {
-    case 'last30Days':
+    case "last30Days":
       return { start: subDays(baseDate, 29), end: baseDate };
-    case 'last90Days':
+    case "last90Days":
       return { start: subDays(baseDate, 89), end: baseDate };
-    case 'lastMonth':
+    case "lastMonth":
       return { start: startOfMonth(lastMonth), end: endOfMonth(lastMonth) };
-    case 'last7Days':
+    case "last7Days":
       return { start: subDays(baseDate, 6), end: baseDate };
     default:
       return null;
   }
 };
 
-export const isPreviousDateRange = (leftDateRange: IDateRange | null, rightDateRange: IDateRange | null) => {
+export const isPreviousDateRange = (
+  leftDateRange: IDateRange | null,
+  rightDateRange: IDateRange | null,
+) => {
   if (!leftDateRange || !rightDateRange) {
-    return 'custom';
+    return "custom";
   }
 
   const { start: leftStart, end: leftEnd } = leftDateRange;
   const { start: rightStart, end: rightEnd } = rightDateRange;
 
   if (!leftStart || !leftEnd || !rightStart || !rightEnd) {
-    return 'custom';
+    return "custom";
   }
 
   const leftDiff = differenceInCalendarDays(leftEnd, leftStart);
@@ -95,8 +104,8 @@ export const isPreviousDateRange = (leftDateRange: IDateRange | null, rightDateR
         isFirstDayOfMonth(rightStart) &&
         isLastDayOfMonth(rightEnd) &&
         differenceInCalendarMonths(leftStart, rightStart) === 1))
-    ? 'previous'
-    : 'custom';
+    ? "previous"
+    : "custom";
 };
 
 export const previousDateRange = (dateRange: IDateRange | null) => {
@@ -109,15 +118,15 @@ export const previousDateRange = (dateRange: IDateRange | null) => {
 
   switch (status) {
     // case 'yesterday':
-    case 'last7Days':
-    case 'last30Days':
-    case 'last90Days':
-    case 'custom':
+    case "last7Days":
+    case "last30Days":
+    case "last90Days":
+    case "custom":
       return {
         start: subDays(start, diff + 1),
         end: subDays(end, diff + 1),
       };
-    case 'lastMonth':
+    case "lastMonth":
       return {
         start: startOfMonth(lastMonth),
         end: endOfMonth(lastMonth),
@@ -127,24 +136,27 @@ export const previousDateRange = (dateRange: IDateRange | null) => {
   }
 };
 
-export const emailValidator = (value: string) => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value);
+export const emailValidator = (value: string) =>
+  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+    value,
+  );
 
 export const hexToRgba = (hex: string, opacity: number) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
-      result[3],
-      16
-    )}, ${opacity})`
+        result[3],
+        16,
+      )}, ${opacity})`
     : `rgba(255, 255, 255, 0)`;
 };
 
 export const formatDateRange = (dateRange: IDateRange | null) => {
-  if (!dateRange) return '';
+  if (!dateRange) return "";
 
-  return `${formatDate(dateRange.start, 'yyyy/MM/dd')} - ${formatDate(
+  return `${formatDate(dateRange.start, "yyyy/MM/dd")} - ${formatDate(
     dateRange.end,
-    'yyyy/MM/dd'
+    "yyyy/MM/dd",
   )}`;
 };
 
@@ -158,7 +170,7 @@ export const passwordValidator = (value: string) =>
 
 export const windowSize = () => {
   const windowWidth = window.innerWidth;
-  let windowSize: ScreenSize = ScreenSize['2xl'];
+  let windowSize: ScreenSize = ScreenSize["2xl"];
 
   if (windowWidth < 1024) {
     windowSize = ScreenSize.md;
@@ -167,13 +179,13 @@ export const windowSize = () => {
   } else if (windowWidth < 1366) {
     windowSize = ScreenSize.xl;
   } else if (windowWidth < 1536) {
-    windowSize = ScreenSize['1.5xl'];
+    windowSize = ScreenSize["1.5xl"];
   }
 
   return windowSize;
 };
 
-const getCharLength = (char = '') => {
+const getCharLength = (char = "") => {
   const matched = HanRegex.test(char);
   return matched ? 2 : 1;
 };
@@ -228,8 +240,8 @@ export const getBarChartGridTop = (maxValue: number, showLabel = true) => {
     30 +
     (showLabel
       ? Number(maxValue).toLocaleString().length *
-      8 *
-      Math.sin((30 / 180) * Math.PI)
+        8 *
+        Math.sin((30 / 180) * Math.PI)
       : 0)
   );
 };
@@ -240,13 +252,16 @@ export const getBarChartGridLeft = (value: number, min: number) => {
   return left;
 };
 
-export const getBarChartBarLabelHeight = (maxValue: string | number, showLabel = true) => {
+export const getBarChartBarLabelHeight = (
+  maxValue: string | number,
+  showLabel = true,
+) => {
   return (
     16 +
     (showLabel
       ? Number(maxValue).toLocaleString().length *
-      8 *
-      Math.sin((30 / 180) * Math.PI)
+        8 *
+        Math.sin((30 / 180) * Math.PI)
       : 0)
   );
 };
@@ -255,11 +270,14 @@ export const getChartLabelWidth = (maxValue: string | number) => {
   return Number(maxValue).toLocaleString().length * 8;
 };
 
-export const getDayDatesMatchWeekDay = (dateRange1: IDateRange, dateRange2: IDateRange | null) => {
+export const getDayDatesMatchWeekDay = (
+  dateRange1: IDateRange,
+  dateRange2: IDateRange | null,
+) => {
   const dayDates: {
-    date: string,
-    day: number,
-    weekDay: string,
+    date: string;
+    day: number;
+    weekDay: string;
   }[] = [];
 
   if (!dateRange2) {
@@ -268,7 +286,7 @@ export const getDayDatesMatchWeekDay = (dateRange1: IDateRange, dateRange2: IDat
       const day = addDays(dateRange1.start, i);
 
       dayDates.push({
-        date: formatDate(day, 'yyyy/MM/dd'),
+        date: formatDate(day, "yyyy/MM/dd"),
         day: getDay(day),
         weekDay: translateDayToLocale(getDay(day)),
       });
@@ -280,93 +298,102 @@ export const getDayDatesMatchWeekDay = (dateRange1: IDateRange, dateRange2: IDat
   const weekDayOfRange2Start = getDay(dateRange2.start);
   const weekDayDiff = weekDayOfRange1Start - weekDayOfRange2Start;
 
-  if (
-    (weekDayDiff > 0 && weekDayDiff <= 3)
-    || (weekDayDiff < -3)
-  ) {
-    const iteratorTimes = weekDayDiff > 0 ? weekDayDiff : (weekDayDiff + 7);
+  if ((weekDayDiff > 0 && weekDayDiff <= 3) || weekDayDiff < -3) {
+    const iteratorTimes = weekDayDiff > 0 ? weekDayDiff : weekDayDiff + 7;
     for (let i = 0; i < iteratorTimes; i += 1) {
       const day = addDays(dateRange2.start, i);
       dayDates.push({
-        date: formatDate(day, 'yyyy/MM/dd'),
+        date: formatDate(day, "yyyy/MM/dd"),
         day: getDay(day),
         weekDay: translateDayToLocale(getDay(day)),
       });
     }
   }
 
-  const daysOfLastMonth = differenceInCalendarDays(dateRange1.end, dateRange1.start) + 1;
+  const daysOfLastMonth =
+    differenceInCalendarDays(dateRange1.end, dateRange1.start) + 1;
   for (let i = 0; i < daysOfLastMonth; i += 1) {
     const day = addDays(dateRange1.start, i);
     dayDates.push({
-      date: formatDate(day, 'yyyy/MM/dd'),
+      date: formatDate(day, "yyyy/MM/dd"),
       day: getDay(day),
       weekDay: translateDayToLocale(getDay(day)),
     });
   }
 
-  const overMonth1Days = getDate(dateRange2.end) - getDate(dateRange1.end) - (7 - Math.abs(weekDayDiff));
+  const overMonth1Days =
+    getDate(dateRange2.end) -
+    getDate(dateRange1.end) -
+    (7 - Math.abs(weekDayDiff));
   if (overMonth1Days > 0) {
     for (let j = overMonth1Days; j > 0; j -= 1) {
       const day = subDays(dateRange2.end, j);
       dayDates.push({
-        date: formatDate(day, 'yyyy/MM/dd'),
+        date: formatDate(day, "yyyy/MM/dd"),
         day: getDay(day),
         weekDay: translateDayToLocale(getDay(day)),
       });
     }
   }
 
-
   return dayDates;
-}
+};
 
 export const translateDayToLocale = (day: number) => {
   switch (day) {
     case 0:
-      return '日';
+      return "日";
     case 1:
-      return '一';
+      return "一";
     case 2:
-      return '二';
+      return "二";
     case 3:
-      return '三';
+      return "三";
     case 4:
-      return '四';
+      return "四";
     case 5:
-      return '五';
+      return "五";
     default:
-      return '六';
+      return "六";
   }
-}
+};
 
-export const numberToLocaleString = (value: number | null, { NaNString = '' } = {}, toNumber = false) => {
+export const numberToLocaleString = (
+  value: number | null,
+  { NaNString = "" } = {},
+  toNumber = false,
+) => {
   if (value === null || isNaN(value)) {
-    return NaNString || '';
+    return NaNString || "";
   } else if (!toNumber) {
     return Number(value).toLocaleString();
   }
 
   return value;
-}
+};
 
-export const toFixed = (value: number | null, fixedTo: number = 0, { NaNString = '', unsign = false, unit = '' } = {}, toNumber = false) => {
+export const toFixed = (
+  value: number | null,
+  fixedTo: number = 0,
+  { NaNString = "", unsign = false, unit = "" } = {},
+  toNumber = false,
+) => {
   if (value === null || isNaN(value)) {
-    return NaNString || '';
+    return NaNString || "";
   } else if (toNumber) {
     if (unsign) {
       return Number(Number(Math.abs(value)).toFixed(fixedTo));
     }
     return Number(Number(value).toFixed(fixedTo));
   } else {
-    let formatedValue = '';
+    let formatedValue = "";
     if (unsign) {
       formatedValue = Number(Math.abs(value)).toFixed(fixedTo);
     } else {
       formatedValue = Number(value).toFixed(fixedTo);
     }
 
-    const valueParts = formatedValue.split('.');
+    const valueParts = formatedValue.split(".");
 
     if (valueParts[1]) {
       return `${Number(valueParts[0]).toLocaleString()}.${valueParts[1]}${unit}`;
@@ -374,17 +401,21 @@ export const toFixed = (value: number | null, fixedTo: number = 0, { NaNString =
 
     return `${Number(valueParts[0]).toLocaleString()}${unit}`;
   }
-}
+};
 
 export const downloadURL = (data: string, fileName: string) => {
-  const downloadLink = document.createElement('a');
+  const downloadLink = document.createElement("a");
   downloadLink.href = data;
   downloadLink.download = fileName;
   downloadLink.click();
   downloadLink.remove();
 };
 
-export const downloadBlob = (data: ExcelJS.Buffer, fileName: string, mimeType: string) => {
+export const downloadBlob = (
+  data: ExcelJS.Buffer,
+  fileName: string,
+  mimeType: string,
+) => {
   const blob = new Blob([data], {
     type: mimeType,
   });
@@ -395,41 +426,52 @@ export const downloadBlob = (data: ExcelJS.Buffer, fileName: string, mimeType: s
   }, 1000);
 };
 
-export const isDateRangesEqual = (dateRange1: IDateRange, dateRange2: IDateRange) => {
-  return getYear(dateRange1.start) === getYear(dateRange2.start) &&
+export const isDateRangesEqual = (
+  dateRange1: IDateRange,
+  dateRange2: IDateRange,
+) => {
+  return (
+    getYear(dateRange1.start) === getYear(dateRange2.start) &&
     getMonth(dateRange1.start) === getMonth(dateRange2.start) &&
     getDate(dateRange1.start) === getDate(dateRange2.start) &&
     getYear(dateRange1.end) === getYear(dateRange2.end) &&
     getMonth(dateRange1.end) === getMonth(dateRange2.end) &&
-    getDate(dateRange1.end) === getDate(dateRange2.end);
-}
+    getDate(dateRange1.end) === getDate(dateRange2.end)
+  );
+};
 
-export const gaev = ({ category, action, label, value, cb }: {
-  category?: string,
-  action?: string,
-  label?: string,
-  value?: number,
-  cb?: () => void,
+export const gaev = ({
+  category,
+  action,
+  label,
+  value,
+  cb,
+}: {
+  category?: string;
+  action?: string;
+  label?: string;
+  value?: number;
+  cb?: () => void;
 } = {}) => {
   const gtm = useGtm();
 
   if (gtm?.enabled() && !!event) {
     const data: {
-      event: 'GAEV'
-      EventCategory?: string,
-      EventAction?: string,
-      EventLabel?: string,
-      EventValue?: number,
-      eventCallback?: () => void,
+      event: "GAEV";
+      EventCategory?: string;
+      EventAction?: string;
+      EventLabel?: string;
+      EventValue?: number;
+      eventCallback?: () => void;
     } = {
-      event: 'GAEV',
+      event: "GAEV",
       EventCategory: category,
       EventAction: action,
       EventLabel: label,
       EventValue: value,
     };
 
-    if (typeof cb === 'function') {
+    if (typeof cb === "function") {
       data.eventCallback = cb;
     }
 
@@ -437,32 +479,38 @@ export const gaev = ({ category, action, label, value, cb }: {
   }
 };
 
-export const ga4ev = ({ category, action, label, value, cb }: {
-  category?: string,
-  action?: string,
-  label?: string,
-  value?: number,
-  cb?: () => void,
+export const ga4ev = ({
+  category,
+  action,
+  label,
+  value,
+  cb,
+}: {
+  category?: string;
+  action?: string;
+  label?: string;
+  value?: number;
+  cb?: () => void;
 } = {}) => {
   const gtm = useGtm();
 
   if (gtm?.enabled() && !!event) {
     const data: {
-      event: 'GA4EV',
-      EventCategory?: string,
-      EventAction?: string,
-      EventLabel?: string,
-      EventValue?: number,
-      eventCallback?: () => void,
+      event: "GA4EV";
+      EventCategory?: string;
+      EventAction?: string;
+      EventLabel?: string;
+      EventValue?: number;
+      eventCallback?: () => void;
     } = {
-      event: 'GA4EV',
+      event: "GA4EV",
       EventCategory: category,
       EventAction: action,
       EventLabel: label,
       EventValue: value,
     };
 
-    if (typeof cb === 'function') {
+    if (typeof cb === "function") {
       data.eventCallback = cb;
     }
 
@@ -475,42 +523,47 @@ export const ga4ev = ({ category, action, label, value, cb }: {
       eventParams.event_callback = cb;
     }
 
-    window.dataLayer?.push('event', label, eventParams);
+    window.dataLayer?.push("event", label, eventParams);
   }
 };
 
-export const getWebsiteFavico = (domain: string): Promise<{ domain: string; icoUrl: string; }> => {
+export const getWebsiteFavico = (
+  domain: string,
+): Promise<{ domain: string; icoUrl: string }> => {
   const runtimeConfig = useRuntimeConfig();
 
   return new Promise((resolve) => {
     const icoUrl = `${runtimeConfig.public.icoUrl}/api/4.0/domain_ico?domain=${domain}`;
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
     canvas.width = 26;
     canvas.height = 26;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
 
     if (ctx) {
-      ctx.fillStyle = '#FFFFFF';
+      ctx.fillStyle = "#FFFFFF";
       ctx.fill();
 
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#BDBDBD';
+      ctx.strokeStyle = "#BDBDBD";
       ctx.roundRect(1, 1, 24, 24, 6);
       ctx.stroke();
     }
 
     const image = new Image();
-    image.setAttribute('crossOrigin', 'Anonymous');
+    image.setAttribute("crossOrigin", "Anonymous");
     image.onload = () => {
       ctx?.drawImage(image, 0, 0, image.width, image.height, 6, 6, 14, 14);
 
-      resolve({ domain, icoUrl: canvas.toDataURL('image/png', 1.0) });
+      resolve({ domain, icoUrl: canvas.toDataURL("image/png", 1.0) });
     };
     image.src = icoUrl;
   });
 };
 
-export const httpUrlValidate = (url: string) => /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$/.test(url);
+export const httpUrlValidate = (url: string) =>
+  /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$/.test(
+    url,
+  );
 export const httpUrlToHost = (url: string) => {
   if (httpUrlValidate(url)) {
     try {
@@ -522,19 +575,20 @@ export const httpUrlToHost = (url: string) => {
   }
 
   return url;
-}
+};
 export const hostToHttpUrl = (host: string) => {
   if (/^https?:\/\//.test(host)) {
     return host;
   }
 
   return `https://${host}`;
-}
+};
 
 export const isValidDate = (d: any) => {
   if (Object.prototype.toString.call(d) === "[object Date]") {
     // it is a date
-    if (isNaN(d)) { // d.getTime() or d.valueOf() will also work
+    if (isNaN(d)) {
+      // d.getTime() or d.valueOf() will also work
       return false;
     } else {
       return true;
@@ -542,22 +596,29 @@ export const isValidDate = (d: any) => {
   } else {
     return false;
   }
-}
+};
 
 export const waitForTime = (ms: number) => {
-  return new Promise(r => setTimeout(r, ms));
-}
+  return new Promise((r) => setTimeout(r, ms));
+};
 
 export const waitForever = () => {
-  return new Promise(r => { });
-}
+  return new Promise((r) => {});
+};
 
-export const waitFor = async (condition: () => boolean, pollInterval = 50, timeoutAfter: number) => {
+export const waitFor = async (
+  condition: () => boolean,
+  pollInterval = 50,
+  timeoutAfter: number,
+) => {
   const startTime = Date.now();
 
   while (true) {
-    if (typeof (timeoutAfter) === 'number' && Date.now() > startTime + timeoutAfter) {
-      throw 'Condition not met before timeout';
+    if (
+      typeof timeoutAfter === "number" &&
+      Date.now() > startTime + timeoutAfter
+    ) {
+      throw "Condition not met before timeout";
     }
 
     const result = await condition();
@@ -566,9 +627,9 @@ export const waitFor = async (condition: () => boolean, pollInterval = 50, timeo
       return result;
     }
 
-    await new Promise(r => setTimeout(r, pollInterval));
+    await new Promise((r) => setTimeout(r, pollInterval));
   }
-}
+};
 
 function loadImage(url: string) {
   return new Promise<HTMLImageElement>((resolve) => {
@@ -598,7 +659,7 @@ async function addPadding(dataURL: string, padding: number) {
 
 async function addDateRanges(
   dataURL: string,
-  dateRanges: (IDateRange | null)[]
+  dateRanges: (IDateRange | null)[],
 ) {
   const fontSize = 16;
   const canvas = document.createElement("canvas");
@@ -649,7 +710,11 @@ async function addWatermark(dataURL: string, watermarkImg: string) {
   // ctx.fillStyle = pattern;
   // ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-  ctx.drawImage(watermark, canvas.width - watermark.width - 12, canvas.height - watermark.height - 12);
+  ctx.drawImage(
+    watermark,
+    canvas.width - watermark.width - 12,
+    canvas.height - watermark.height - 12,
+  );
 
   return canvas.toDataURL();
 }
@@ -661,7 +726,7 @@ export const domToPngDataUrl = async (
   padding: number = 0,
   dateRanges: (IDateRange | null)[] = [],
   watermark: boolean = true,
-  watermarkImg: string = '/assets/images/commons/watermark-2.svg',
+  watermarkImg: string = "/assets/images/commons/watermark-2.svg",
 ) => {
   if (!imageTarget) {
     console.log("Can not find target of htmlToImage!");
@@ -670,18 +735,20 @@ export const domToPngDataUrl = async (
 
   const filterOption = (node: HTMLElement) => {
     return (
-      !(
-        node?.getAttribute && node.getAttribute("data-skip-download") === ""
-      ) &&
+      !(node?.getAttribute && node.getAttribute("data-skip-download") === "") &&
       (typeof customFilter !== "function" ||
         (customFilter && customFilter(node)))
     );
   };
-  const styleOption = Object.assign({}, {
-    marginTop: 0,
-    marginBottom: 9,
-    border: 0,
-  }, customStyle || {});
+  const styleOption = Object.assign(
+    {},
+    {
+      marginTop: 0,
+      marginBottom: 9,
+      border: 0,
+    },
+    customStyle || {},
+  );
 
   const options = {
     pixelRatio: 1,
@@ -695,10 +762,10 @@ export const domToPngDataUrl = async (
     dataURL = await addDateRanges(dataURL, [...dateRanges].reverse());
   if (watermark) dataURL = await addWatermark(dataURL, watermarkImg);
   return dataURL;
-}
+};
 
 export const dataURLtoBlob = (dataurl: string) => {
-  const arr = dataurl.split(',');
+  const arr = dataurl.split(",");
   const mime = arr[0].match(/:(.*?);/)[1];
   const bstr = atob(arr[1]);
   let n = bstr.length;
@@ -707,4 +774,4 @@ export const dataURLtoBlob = (dataurl: string) => {
     u8arr[n] = bstr.charCodeAt(n);
   }
   return new Blob([u8arr], { type: mime });
-}
+};