@deenruv/dashboard-widgets-plugin 1.0.0

package/dist/plugin-ui/utils.d.ts

@@ -0,0 +1,70 @@
+import { MetricRangeType, ChartMetricType, GraphQLTypes, ModelTypes, MetricIntervalType } from "./zeus";
+import { AdditionalEntryData, GroupByPeriodArgs } from "./types.js";
+export declare const getQuartersForYear: (previous?: boolean) => {
+    start: Date;
+    end: Date;
+}[];
+export declare const getCustomIntervalDates: (rangeType?: MetricRangeType) => {
+    range: {
+        start: Date;
+        end: Date;
+    };
+    prevRange: {
+        start: Date;
+        end: Date;
+    };
+};
+interface ConvertBackendDataToChartDataProps {
+    type: GraphQLTypes["ChartMetricType"];
+    entries: ModelTypes["ChartEntry"][];
+    prevEntries: ModelTypes["ChartEntry"][];
+    interval: MetricIntervalType;
+    language: string;
+    start: Date;
+    end?: Date;
+}
+export declare const convertBackedDataToChartData: (args: ConvertBackendDataToChartDataProps) => {
+    name: string;
+    value: number;
+    prevValue: number;
+    additionalData: {
+        id: string;
+        name: string;
+        quantity: number;
+    }[] | undefined;
+    type: ChartMetricType;
+}[];
+export declare const generateBrightRandomColor: () => string;
+export declare const sortBySelected: (selectedIds: string[]) => (a: {
+    id: string;
+}, b: {
+    id: string;
+}) => number;
+export declare const getRandomColor: (colorsArray: string[]) => string;
+export declare const calculatePercentage: (part: number, total: number) => number;
+export declare const giveSummaryMetricsRatio: (metric: ModelTypes["OrderSummaryDataMetric"], prevMetric: ModelTypes["OrderSummaryDataMetric"]) => {
+    currencyCode: import("./zeus").CurrencyCode;
+    total: number;
+    totalWithTax: number;
+    orderCount: number;
+    averageOrderValue: number;
+    averageOrderValueWithTax: number;
+    productCount: number;
+};
+export declare const groupByPeriods: (args: GroupByPeriodArgs) => {
+    [key: string]: any;
+    name: string;
+    value?: number | undefined;
+    type: ChartMetricType;
+    additionalData?: AdditionalEntryData[] | undefined;
+}[] | {
+    [key: string]: {
+        name: string;
+        value: number;
+        prevValue: number;
+        type: ChartMetricType;
+        additionalData?: AdditionalEntryData[] | undefined;
+    };
+};
+export declare const parseNameToCurrentLanguage: (name: string, language: string) => string;
+export {};

package/dist/plugin-ui/utils.js

@@ -0,0 +1,366 @@
+import { addDays, addQuarters, eachDayOfInterval, eachHourOfInterval, endOfMonth, endOfQuarter, endOfToday, endOfWeek, endOfYear, endOfYesterday, format, startOfMonth, startOfQuarter, startOfToday, startOfWeek, startOfYear, startOfYesterday, subDays, subMonths, subWeeks, subYears, parse, isValid, getQuarter, getISOWeek, } from "date-fns";
+import { pl, enGB } from "date-fns/locale";
+import { MetricRangeType, ChartMetricType, MetricIntervalType, } from "./zeus";
+import { fromZonedTime } from "date-fns-tz";
+export const getQuartersForYear = (previous) => {
+    const quarters = [];
+    // Start of the first quarter
+    let currentQuarterStart = previous
+        ? subYears(startOfYear(new Date()), 1)
+        : startOfYear(new Date());
+    for (let i = 0; i < 4; i++) {
+        const quarterStart = startOfQuarter(currentQuarterStart);
+        const quarterEnd = endOfQuarter(currentQuarterStart);
+        quarters.push({
+            start: quarterStart,
+            end: quarterEnd,
+        });
+        // Move to the next quarter
+        currentQuarterStart = addQuarters(currentQuarterStart, 1);
+    }
+    return quarters;
+};
+export const getCustomIntervalDates = (rangeType) => {
+    const quarters = getQuartersForYear();
+    const previousQuarters = getQuartersForYear(true);
+    switch (rangeType) {
+        case MetricRangeType.Today: {
+            return {
+                range: { start: startOfToday(), end: endOfToday() },
+                prevRange: { start: startOfYesterday(), end: endOfYesterday() },
+            };
+        }
+        case MetricRangeType.Yesterday: {
+            return {
+                range: { start: startOfYesterday(), end: endOfYesterday() },
+                prevRange: {
+                    start: subDays(startOfYesterday(), 1),
+                    end: subDays(endOfYesterday(), 1),
+                },
+            };
+        }
+        case MetricRangeType.ThisWeek: {
+            return {
+                range: {
+                    start: startOfWeek(new Date(), { weekStartsOn: 1 }),
+                    end: endOfWeek(new Date(), { weekStartsOn: 1 }),
+                },
+                prevRange: {
+                    start: startOfWeek(subWeeks(new Date(), 1), { weekStartsOn: 1 }),
+                    end: endOfWeek(subWeeks(new Date(), 1), { weekStartsOn: 1 }),
+                },
+            };
+        }
+        case MetricRangeType.LastWeek:
+            return {
+                range: {
+                    start: startOfWeek(subWeeks(new Date(), 1), { weekStartsOn: 1 }),
+                    end: endOfWeek(subWeeks(new Date(), 1), { weekStartsOn: 1 }),
+                },
+                prevRange: {
+                    start: startOfWeek(subWeeks(new Date(), 2), { weekStartsOn: 1 }),
+                    end: endOfWeek(subWeeks(new Date(), 2), { weekStartsOn: 1 }),
+                },
+            };
+        case MetricRangeType.ThisMonth: {
+            return {
+                range: { start: startOfMonth(new Date()), end: endOfMonth(new Date()) },
+                prevRange: {
+                    start: startOfMonth(subMonths(new Date(), 1)),
+                    end: endOfMonth(subMonths(new Date(), 1)),
+                },
+            };
+        }
+        case MetricRangeType.LastMonth:
+            return {
+                range: {
+                    start: startOfMonth(subMonths(new Date(), 1)),
+                    end: endOfMonth(subMonths(new Date(), 1)),
+                },
+                prevRange: {
+                    start: startOfMonth(subMonths(new Date(), 2)),
+                    end: endOfMonth(subMonths(new Date(), 2)),
+                },
+            };
+        case MetricRangeType.ThisYear: {
+            return {
+                range: { start: startOfYear(new Date()), end: endOfYear(new Date()) },
+                prevRange: {
+                    start: startOfYear(subYears(new Date(), 1)),
+                    end: endOfYear(subYears(new Date(), 1)),
+                },
+            };
+        }
+        case MetricRangeType.LastYear: {
+            return {
+                range: {
+                    start: startOfYear(subYears(new Date(), 1)),
+                    end: endOfYear(subYears(new Date(), 1)),
+                },
+                prevRange: {
+                    start: startOfYear(subYears(new Date(), 2)),
+                    end: endOfYear(subYears(new Date(), 2)),
+                },
+            };
+        }
+        case MetricRangeType.FirstQuarter:
+            return { range: quarters[0], prevRange: previousQuarters[0] };
+        case MetricRangeType.SecondQuarter:
+            return { range: quarters[1], prevRange: previousQuarters[1] };
+        case MetricRangeType.ThirdQuarter:
+            return { range: quarters[2], prevRange: previousQuarters[2] };
+        case MetricRangeType.FourthQuarter:
+            return { range: quarters[3], prevRange: previousQuarters[3] };
+        default:
+            return {
+                range: {
+                    start: startOfWeek(new Date(), { weekStartsOn: 1 }),
+                    end: endOfWeek(new Date(), { weekStartsOn: 1 }),
+                },
+                prevRange: {
+                    start: startOfWeek(subWeeks(new Date(), 1), { weekStartsOn: 1 }),
+                    end: endOfWeek(subWeeks(new Date(), 1), { weekStartsOn: 1 }),
+                },
+            };
+    }
+};
+export const convertBackedDataToChartData = (args) => {
+    const { entries, prevEntries, interval, language, start, type, end } = args;
+    const isDayInteval = interval === MetricIntervalType.Day;
+    const lastDay = entries.reduce((acc, curr) => (curr.intervalTick > acc ? curr.intervalTick : acc), 0);
+    const prevLastDay = prevEntries.reduce((acc, curr) => (curr.intervalTick > acc ? curr.intervalTick : acc), 0);
+    const rangeDays = eachDayOfInterval({
+        start,
+        end: end ?? addDays(start, Math.max(lastDay, prevLastDay)),
+    });
+    const entriesMap = new Map(entries.map((entry) => [entry.intervalTick, entry]));
+    const prevEntriesMap = new Map(prevEntries.map((entry) => [entry.intervalTick, entry]));
+    const rangeHours = eachHourOfInterval({
+        start: fromZonedTime(start, "UTC"),
+        end: end
+            ? fromZonedTime(end, "UTC")
+            : addDays(fromZonedTime(start, "UTC"), Math.max(lastDay, prevLastDay)),
+    });
+    const convertedData = (isDayInteval ? rangeDays : rangeHours).map((intervalTick, i) => {
+        const entryFromMap = entriesMap.get(isDayInteval ? i + 1 : i);
+        const prevEntryFromMap = prevEntriesMap.get(isDayInteval ? i + 1 : i);
+        if (entryFromMap)
+            return {
+                name: format(intervalTick, isDayInteval ? "PPP" : "HH:mm", {
+                    locale: language === "pl" ? pl : enGB,
+                }),
+                value: type === ChartMetricType.AverageOrderValue ||
+                    type === ChartMetricType.OrderTotal
+                    ? entryFromMap.value / 100
+                    : entryFromMap.value,
+                prevValue: prevEntryFromMap
+                    ? type === ChartMetricType.AverageOrderValue ||
+                        type === ChartMetricType.OrderTotal
+                        ? prevEntryFromMap.value / 100
+                        : prevEntryFromMap.value
+                    : 0,
+                additionalData: entryFromMap.additionalData ?? undefined,
+                type,
+            };
+        else
+            return {
+                name: format(intervalTick, isDayInteval ? "PPP" : "HH:mm", {
+                    locale: language === "pl" ? pl : enGB,
+                }),
+                value: 0,
+                prevValue: prevEntryFromMap
+                    ? type === ChartMetricType.AverageOrderValue ||
+                        type === ChartMetricType.OrderTotal
+                        ? prevEntryFromMap.value / 100
+                        : prevEntryFromMap.value
+                    : 0,
+                additionalData: undefined,
+                type,
+            };
+    });
+    return convertedData;
+};
+export const generateBrightRandomColor = () => {
+    const r = Math.floor(Math.random() * 106) + 150;
+    const g = Math.floor(Math.random() * 106) + 150;
+    const b = Math.floor(Math.random() * 106) + 150;
+    const hexColor = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+    return hexColor;
+};
+export const sortBySelected = (selectedIds) => (a, b) => {
+    const indexA = selectedIds.indexOf(a.id);
+    const indexB = selectedIds.indexOf(b.id);
+    if (indexA === -1 && indexB === -1)
+        return 0;
+    if (indexA === -1)
+        return 1;
+    if (indexB === -1)
+        return -1;
+    return indexA - indexB;
+};
+export const getRandomColor = (colorsArray) => {
+    const randomIndex = Math.floor(Math.random() * colorsArray.length);
+    return colorsArray[randomIndex];
+};
+export const calculatePercentage = (part, total) => {
+    if (total === 0 && part === 0)
+        return 0;
+    if (total === 0)
+        return 100;
+    const percentage = (part / total) * 100;
+    return percentage - 100;
+};
+export const giveSummaryMetricsRatio = (metric, prevMetric) => {
+    const prevRatio = {
+        ...prevMetric,
+        averageOrderValue: +calculatePercentage(metric.averageOrderValue, prevMetric.averageOrderValue).toFixed(2),
+        averageOrderValueWithTax: +calculatePercentage(metric.averageOrderValueWithTax, prevMetric.averageOrderValueWithTax).toFixed(2),
+        orderCount: +calculatePercentage(metric.orderCount, prevMetric.orderCount).toFixed(2),
+        productCount: +calculatePercentage(metric.productCount, prevMetric.productCount).toFixed(2),
+        total: +calculatePercentage(metric.total, prevMetric.total).toFixed(2),
+        totalWithTax: +calculatePercentage(metric.totalWithTax, prevMetric.totalWithTax).toFixed(2),
+    };
+    return prevRatio;
+};
+const groupByPeriodsInitialValue = (name, type) => ({
+    name,
+    value: 0,
+    prevValue: 0,
+    type,
+    additionalData: [],
+});
+const quarterMap = { 1: "I", 2: "II", 3: "III", 4: "IV" };
+const monthsMap = {
+    stycznia: "Styczeń",
+    lutego: "Luty",
+    marca: "Marzec",
+    kwietnia: "Kwiecień",
+    maja: "Maj",
+    czerwca: "Czerwiec",
+    lipca: "Lipiec",
+    sierpnia: "Sierpień",
+    września: "Wrzesień",
+    października: "Październik",
+    listopada: "Listopad",
+    grudnia: "Grudzień",
+};
+export const groupByPeriods = (args) => {
+    const { data, language, groupBy } = args;
+    if (groupBy === "day")
+        return data;
+    return data.reduce((acc, item) => {
+        const safeName = parseNameToCurrentLanguage(item.name, language);
+        const date = parse(safeName, "d MMMM yyyy", new Date(), {
+            locale: language === "pl" ? pl : enGB,
+        });
+        switch (groupBy) {
+            case "week": {
+                const week = `W${getISOWeek(date)}`;
+                if (!acc[week])
+                    acc[week] = groupByPeriodsInitialValue(week, item.type);
+                acc[week].value += item?.value ?? 0;
+                acc[week].prevValue += item?.prevValue ?? 0;
+                item.additionalData?.forEach((data) => {
+                    const existingRecord = acc[week].additionalData?.find((item) => item.id === data.id);
+                    if (existingRecord) {
+                        const withoutExistingRecord = acc[week].additionalData?.filter((item) => item.id !== data.id);
+                        acc[week].additionalData = [
+                            ...(withoutExistingRecord ?? []),
+                            {
+                                ...existingRecord,
+                                quantity: existingRecord.quantity + data.quantity,
+                            },
+                        ];
+                    }
+                    else {
+                        acc[week].additionalData?.push(data);
+                    }
+                });
+                return acc;
+            }
+            case "month": {
+                const monthDate = `${format(date, "MMMM", {
+                    locale: language === "pl" ? pl : enGB,
+                })}`;
+                const month = language === "pl"
+                    ? monthsMap[monthDate]
+                    : monthDate;
+                if (!acc[month])
+                    acc[month] = groupByPeriodsInitialValue(month, item.type);
+                acc[month].value += item?.value ?? 0;
+                acc[month].prevValue += item?.prevValue ?? 0;
+                item.additionalData?.forEach((data) => {
+                    const existingRecord = acc[month].additionalData?.find((item) => item.id === data.id);
+                    if (existingRecord) {
+                        const withoutExistingRecord = acc[month].additionalData?.filter((item) => item.id !== data.id);
+                        acc[month].additionalData = [
+                            ...(withoutExistingRecord ?? []),
+                            {
+                                ...existingRecord,
+                                quantity: existingRecord.quantity + data.quantity,
+                            },
+                        ];
+                    }
+                    else {
+                        acc[month].additionalData?.push(data);
+                    }
+                });
+                return acc;
+            }
+            case "quarter": {
+                const quarterDesc = language === "pl" ? "kwartał" : "quarter";
+                const quarter = `${quarterMap[getQuarter(date)]} ${quarterDesc} ${format(date, "yyyy")}`;
+                if (!acc[quarter])
+                    acc[quarter] = groupByPeriodsInitialValue(quarter, item.type);
+                acc[quarter].value += item?.value ?? 0;
+                acc[quarter].prevValue += item?.prevValue ?? 0;
+                item.additionalData?.forEach((data) => {
+                    const existingRecord = acc[quarter].additionalData?.find((item) => item.id === data.id);
+                    if (existingRecord) {
+                        const withoutExistingRecord = acc[quarter].additionalData?.filter((item) => item.id !== data.id);
+                        acc[quarter].additionalData = [
+                            ...(withoutExistingRecord ?? []),
+                            {
+                                ...existingRecord,
+                                quantity: existingRecord.quantity + data.quantity,
+                            },
+                        ];
+                    }
+                    else {
+                        acc[quarter].additionalData?.push(data);
+                    }
+                });
+                return acc;
+            }
+        }
+    }, {});
+};
+export const parseNameToCurrentLanguage = (name, language) => {
+    const namePL = parse(name, "d MMMM yyyy", new Date(), {
+        locale: pl,
+    });
+    const nameEN = parse(name, "d MMMM yyyy", new Date(), {
+        locale: enGB,
+    });
+    if (isValid(namePL)) {
+        if (language === "en") {
+            const parsedToEn = format(namePL, "d MMMM yyyy", {
+                locale: enGB,
+            });
+            return parsedToEn;
+        }
+        else
+            return name;
+    }
+    if (isValid(nameEN)) {
+        if (language === "pl") {
+            const parsedToEn = format(nameEN, "d MMMM yyyy", {
+                locale: pl,
+            });
+            return parsedToEn;
+        }
+        else
+            return name;
+    }
+    return name;
+};

package/dist/plugin-ui/widgets.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export declare const widgets: {
+    id: string;
+    name: string;
+    component: React.JSX.Element;
+    visible: boolean;
+    size: {
+        width: number;
+        height: number;
+    };
+    sizes: {
+        width: number;
+        height: number;
+    }[];
+}[];

package/dist/plugin-ui/widgets.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { OrdersWidget, ProductsChartWidget, CategoriesChartWidget, LatestOrdersWidget, } from "./components";
+export const widgets = [
+    {
+        id: "2",
+        name: "Orders Widget",
+        component: React.createElement(OrdersWidget, null),
+        visible: true,
+        size: { width: 12, height: 8 },
+        sizes: [{ width: 12, height: 8 }],
+    },
+    {
+        id: "3",
+        name: "Products Widget",
+        component: React.createElement(ProductsChartWidget, null),
+        visible: true,
+        size: { width: 6, height: 10 },
+        sizes: [{ width: 6, height: 10 }],
+    },
+    {
+        id: "4",
+        name: "Categories Widget",
+        component: React.createElement(CategoriesChartWidget, null),
+        visible: true,
+        size: { width: 6, height: 10 },
+        sizes: [{ width: 6, height: 10 }],
+    },
+    {
+        id: "5",
+        name: "Latest Orders Widget",
+        component: React.createElement(LatestOrdersWidget, null),
+        visible: true,
+        size: { width: 6, height: 10 },
+        sizes: [{ width: 6, height: 10 }],
+    },
+];

package/dist/plugin-ui/zeus/const.d.ts

@@ -0,0 +1,6 @@
+export declare const AllTypesProps: Record<string, any>;
+export declare const ReturnTypes: Record<string, any>;
+export declare const Ops: {
+    query: "Query";
+    mutation: "Mutation";
+};