@quillsql/admin 1.6.1 → 1.6.3

package/dist/esm/components/InternalDashboard/DateRangePicker/dateRangePickerUtils.js

@@ -0,0 +1,520 @@
+import { addDays, differenceInDays, endOfToday, format, isEqual, isToday, max, min, startOfDay, startOfMonth, startOfToday, startOfWeek, startOfYear, sub, } from 'date-fns';
+export const getWeekdays = (locale) => {
+    const firstDayOfWeek = startOfWeek(new Date());
+    return Array.from(Array(7)).map((e, i) => format(addDays(firstDayOfWeek, i), 'EEEEEE', { locale }));
+};
+export const capitalize = (s, locale) => {
+    return s.charAt(0).toLocaleUpperCase(locale.code) + s.substring(1);
+};
+export const getStartDateByDropdownValue = (dropdownValue, dropdownOptions) => {
+    if (!dropdownOptions) {
+        return null;
+    }
+    const startDate = dropdownOptions.find((option) => option.value === dropdownValue)?.startDate ?? null;
+    return startDate ? startOfDay(startDate) : null;
+};
+export const getEndDateByDropdownValue = (dropdownValue, dropdownOptions) => {
+    if (!dropdownOptions) {
+        return startOfToday();
+    }
+    return startOfDay(dropdownOptions.find((option) => option.value === dropdownValue)?.endDate ?? startOfToday());
+};
+export const parseStartDate = (startDate, minDate, selectedDropdownValue, dropdownOptions) => {
+    if (selectedDropdownValue) {
+        startDate = getStartDateByDropdownValue(selectedDropdownValue, dropdownOptions);
+    }
+    if (!startDate)
+        return null;
+    if (startDate && !minDate)
+        return startOfDay(startDate);
+    return startOfDay(max([startDate, minDate]));
+};
+export const parseEndDate = (endDate, maxDate, selectedDropdownValue, dropdownOptions) => {
+    if (selectedDropdownValue) {
+        endDate = getEndDateByDropdownValue(selectedDropdownValue, dropdownOptions);
+    }
+    if (!endDate)
+        return null;
+    if (endDate && !maxDate)
+        return startOfDay(endDate);
+    return startOfDay(min([endDate, maxDate]));
+};
+/**
+ * A simple map between the primary range key and the QuillDateRange for that
+ * key ending on today.
+ */
+export const PRIMARY_RANGE = {
+    THIS_WEEK: { startDate: startOfWeek(startOfToday()), endDate: endOfToday() },
+    THIS_MONTH: {
+        startDate: startOfMonth(startOfToday()),
+        endDate: endOfToday(),
+    },
+    THIS_YEAR: { startDate: startOfYear(startOfToday()), endDate: endOfToday() },
+    LAST_7_DAYS: {
+        startDate: sub(startOfToday(), { days: 7 }),
+        endDate: endOfToday(),
+    },
+    LAST_30_DAYS: {
+        startDate: sub(startOfToday(), { days: 30 }),
+        endDate: endOfToday(),
+    },
+    LAST_90_DAYS: {
+        startDate: sub(startOfToday(), { days: 90 }),
+        endDate: endOfToday(),
+    },
+    LAST_6_MONTHS: {
+        startDate: sub(startOfToday(), { months: 6 }),
+        endDate: endOfToday(),
+    },
+    ALL_TIME: { startDate: undefined, endDate: undefined },
+};
+/**
+ * Maps between the keys of primary range and the short code.
+ */
+export const PRIMARY_CODES = {
+    THIS_WEEK: 'wk',
+    THIS_MONTH: 'm',
+    THIS_YEAR: 'y',
+    LAST_7_DAYS: 'w',
+    LAST_30_DAYS: 't',
+    LAST_90_DAYS: '90d',
+    LAST_6_MONTHS: '6m',
+    ALL_TIME: 'at',
+};
+export const COMPARISON_OPTIONS = [
+    {
+        value: 'PREV_PERIOD',
+        text: 'Previous Period',
+    },
+    {
+        value: 'PREV_7_DAYS',
+        text: 'Previous 7 days',
+    },
+    {
+        value: 'PREV_30_DAYS',
+        text: 'Previous 30 days',
+    },
+    {
+        value: 'PREV_90_DAYS',
+        text: 'Previous 90 days',
+    },
+    {
+        value: 'NO_COMPARISON',
+        text: 'No comparison',
+    },
+];
+/**
+ * A helpful map between comparison range keys and a function that takes the
+ * start date of the primary range (which is also the end date for our
+ * comparison range) and returns a QuillDateRange based on that key and date.
+ */
+export const COMPARISON_RANGE = {
+    PREV_PERIOD: ({ startDate, endDate }) => ({
+        startDate: sub(startDate, { days: differenceInDays(endDate, startDate) }),
+        endDate: startDate,
+    }),
+    PREV_7_DAYS: ({ startDate }) => ({
+        startDate: sub(startDate, { days: 7 }),
+        endDate: startDate,
+    }),
+    PREV_30_DAYS: ({ startDate }) => ({
+        startDate: sub(startDate, { days: 30 }),
+        endDate: startDate,
+    }),
+    PREV_90_DAYS: ({ startDate }) => ({
+        startDate: sub(startDate, { days: 90 }),
+        endDate: startDate,
+    }),
+    NO_COMPARISON: () => null,
+};
+export const defaultOptionsV2 = [
+    {
+        value: 'THIS_WEEK',
+        label: 'This week',
+        startDate: PRIMARY_RANGE['THIS_WEEK']?.startDate,
+        endDate: PRIMARY_RANGE['THIS_WEEK']?.endDate,
+    },
+    {
+        value: 'THIS_MONTH',
+        label: 'This month',
+        startDate: PRIMARY_RANGE['THIS_MONTH']?.startDate,
+        endDate: PRIMARY_RANGE['THIS_MONTH']?.endDate,
+    },
+    {
+        value: 'THIS_YEAR',
+        label: 'This year',
+        startDate: PRIMARY_RANGE['THIS_YEAR']?.startDate,
+        endDate: PRIMARY_RANGE['THIS_YEAR']?.endDate,
+    },
+    {
+        value: 'LAST_7_DAYS',
+        label: 'Last 7 days',
+        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_7_DAYS']?.endDate,
+    },
+    {
+        value: 'LAST_30_DAYS',
+        label: 'Last 30 days',
+        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_30_DAYS']?.endDate,
+    },
+    {
+        value: 'LAST_90_DAYS',
+        label: 'Last 90 days',
+        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_90_DAYS']?.endDate,
+    },
+    {
+        value: 'LAST_6_MONTHS',
+        label: 'Last 6 months',
+        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.startDate,
+        endDate: PRIMARY_RANGE['LAST_6_MONTHS']?.endDate,
+    },
+    {
+        value: 'ALL_TIME',
+        label: 'All time',
+        startDate: PRIMARY_RANGE['ALL_TIME']?.startDate,
+        endDate: PRIMARY_RANGE['ALL_TIME']?.endDate,
+    },
+];
+export const defaultOptions = [
+    {
+        value: 'wk',
+        text: 'This week',
+        startDate: PRIMARY_RANGE['THIS_WEEK']?.startDate,
+    },
+    {
+        value: 'm',
+        text: 'This month',
+        startDate: PRIMARY_RANGE['THIS_MONTH']?.startDate,
+    },
+    {
+        value: 'y',
+        text: 'This year',
+        startDate: PRIMARY_RANGE['THIS_YEAR']?.startDate,
+    },
+    {
+        value: 'w',
+        text: 'Last 7 days',
+        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.startDate,
+    },
+    {
+        value: 't',
+        text: 'Last 30 days',
+        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.startDate,
+    },
+    {
+        value: '90d',
+        text: 'Last 90 days',
+        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.startDate,
+    },
+    {
+        value: '6m',
+        text: 'Last 6 months',
+        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.startDate,
+    },
+    {
+        value: 'at',
+        text: 'All time',
+        startDate: PRIMARY_RANGE['ALL_TIME']?.startDate,
+    },
+];
+export const reportBuilderOptions = [
+    {
+        value: 'w',
+        text: 'Last 7 days',
+        startDate: PRIMARY_RANGE['LAST_7_DAYS']?.startDate,
+        dayInterval: 7,
+    },
+    {
+        value: 't',
+        text: 'Last 30 days',
+        startDate: PRIMARY_RANGE['LAST_30_DAYS']?.startDate,
+        dayInterval: 30,
+    },
+    {
+        value: '90d',
+        text: 'Last 90 days',
+        startDate: PRIMARY_RANGE['LAST_90_DAYS']?.startDate,
+        dayInterval: 90,
+    },
+    {
+        value: '6m',
+        text: 'Last 6 months',
+        startDate: PRIMARY_RANGE['LAST_6_MONTHS']?.startDate,
+        dayInterval: 180,
+    },
+    {
+        value: 'at',
+        text: 'All time',
+        startDate: PRIMARY_RANGE['ALL_TIME']?.startDate,
+        dayInterval: 36500,
+    },
+];
+export const getRangeFromPreset = (preset) => {
+    const foundPreset = defaultOptions.find((elem) => elem.value === preset);
+    return [
+        foundPreset?.startDate || null,
+        endOfToday(),
+        foundPreset?.value || '',
+    ];
+};
+export const getRangeFromPresetOptions = (preset, presetOptions) => {
+    const foundPreset = presetOptions.find((elem) => elem.value === preset);
+    if (foundPreset) {
+        return { startDate: foundPreset?.startDate, endDate: foundPreset?.endDate };
+    }
+    else {
+        return { startDate: null, endDate: null };
+    }
+};
+export const getDateStyles = (theme, date, finalStartDate, finalEndDate, hoveredDate, isDateDisabled) => {
+    return {
+        ...getDayTextClassNames(theme, date, finalStartDate, finalEndDate, hoveredDate, isDateDisabled),
+        // ...getDayHoverBgColorClassName(
+        //   date,
+        //   finalStartDate,
+        //   finalEndDate,
+        //   isDateDisabled
+        // ),
+        ...getDayRoundedClassName(date, finalStartDate, finalEndDate, hoveredDate),
+        ...getDayBgColorClassName(theme, date, finalStartDate, finalEndDate, hoveredDate, isDateDisabled),
+    };
+};
+const getDayRoundedClassName = (day, selectedStartDay, selectedEndDay, hoveredDay) => {
+    if (!selectedStartDay && !selectedEndDay) {
+        return { borderRadius: '0.375rem' };
+    }
+    if (selectedStartDay &&
+        selectedEndDay &&
+        isEqual(day, selectedStartDay) &&
+        isEqual(day, selectedEndDay)) {
+        return { borderRadius: '0.375rem' };
+    }
+    if (selectedStartDay && selectedEndDay && isEqual(day, selectedStartDay)) {
+        return {
+            borderBottomLeftRadius: '0.375rem',
+            borderTopLeftRadius: '0.375rem',
+        };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        !hoveredDay &&
+        isEqual(day, selectedStartDay)) {
+        return { borderRadius: '0.375rem' };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        hoveredDay &&
+        day < selectedStartDay) {
+        return { borderRadius: '0.375rem' };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        hoveredDay &&
+        isEqual(day, selectedStartDay) &&
+        hoveredDay > selectedStartDay) {
+        return {
+            borderBottomLeftRadius: '0.375rem',
+            borderTopLeftRadius: '0.375rem',
+        };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        hoveredDay &&
+        day > selectedStartDay &&
+        day < hoveredDay) {
+        return { borderRadius: 0 };
+    }
+    if (selectedStartDay &&
+        selectedEndDay &&
+        day > selectedStartDay &&
+        day < selectedEndDay) {
+        return { borderRadius: 0 };
+    }
+    if (selectedStartDay &&
+        !selectedEndDay &&
+        hoveredDay &&
+        isEqual(day, hoveredDay) &&
+        !isEqual(day, selectedStartDay)) {
+        return {
+            borderBottomRightRadius: '0.375rem',
+            borderTopRightRadius: '0.375rem',
+        };
+    }
+    if (selectedStartDay && selectedEndDay && isEqual(day, selectedEndDay)) {
+        return {
+            borderBottomRightRadius: '0.375rem',
+            borderTopRightRadius: '0.375rem',
+        };
+    }
+    if (selectedStartDay &&
+        selectedEndDay &&
+        (day < selectedStartDay || day > selectedEndDay)) {
+        return { borderRadius: '0.375rem' };
+    }
+    return { borderRadius: '0.375rem' };
+};
+export const displaySelected = (selectedStartDay, selectedEndDay) => {
+    if (!selectedStartDay && !selectedEndDay) {
+        return '';
+    }
+    else if (selectedStartDay && !selectedEndDay) {
+        const options = {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        };
+        return selectedStartDay.toLocaleDateString('en-US', options);
+    }
+    else if (selectedStartDay && selectedEndDay) {
+        if (isEqual(selectedStartDay, selectedEndDay)) {
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            };
+            return selectedStartDay.toLocaleDateString('en-US', options);
+        }
+        else if (selectedStartDay.getMonth() === selectedEndDay.getMonth() &&
+            selectedStartDay.getFullYear() === selectedEndDay.getFullYear()) {
+            const optionsStartDate = {
+                month: 'short',
+                day: 'numeric',
+            };
+            return `${selectedStartDay.toLocaleDateString('en-US', optionsStartDate)} - 
+                    ${selectedEndDay.getDate()}, ${selectedEndDay.getFullYear()}`;
+        }
+        else {
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            };
+            return `${selectedStartDay.toLocaleDateString('en-US', options)} - 
+                    ${selectedEndDay.toLocaleDateString('en-US', options)}`;
+        }
+    }
+};
+const getDayBgColorClassName = (theme, day, selectedStartDay, selectedEndDay, hoveredDay, isDayDisabled = false) => {
+    const styles = {
+        background: 'transparent',
+    };
+    if (!isDayDisabled) {
+        if (selectedStartDay && isEqual(day, selectedStartDay)) {
+            styles.background = theme?.primaryTextColor || '#6269E9';
+        }
+        if (selectedStartDay &&
+            !selectedEndDay &&
+            hoveredDay &&
+            day > selectedStartDay &&
+            day < hoveredDay) {
+            styles.background =
+                hexToRgbaWith10PercentAlpha(theme?.primaryTextColor) ||
+                    hexToRgbaWith10PercentAlpha('#6269E9');
+        }
+        if (selectedEndDay && isEqual(day, selectedEndDay)) {
+            styles.background = theme?.primaryTextColor || '#6269E9';
+        }
+        if (selectedStartDay &&
+            selectedEndDay &&
+            day > selectedStartDay &&
+            day < selectedEndDay) {
+            styles.background =
+                hexToRgbaWith10PercentAlpha(theme?.primaryTextColor) ||
+                    hexToRgbaWith10PercentAlpha('#6269E9');
+        }
+    }
+    return styles;
+};
+const getDayTextClassNames = (theme, day, selectedStartDay, selectedEndDay, hoveredDay, isDayDisabled = false) => {
+    const styles = {
+        color: theme?.primaryTextColor || '#364153',
+    };
+    if (!isDayDisabled) {
+        if (isToday(day)) {
+            if ((selectedStartDay && isEqual(day, selectedStartDay)) ||
+                (selectedEndDay && isEqual(day, selectedEndDay))) {
+                styles.color = 'white';
+            }
+            else {
+                styles.color = theme?.primaryTextColor || '#364153';
+            }
+        }
+        else {
+            if (selectedStartDay && isEqual(day, selectedStartDay)) {
+                styles.color = 'white';
+            }
+            if (selectedStartDay &&
+                !selectedEndDay &&
+                hoveredDay &&
+                day > selectedStartDay &&
+                day < hoveredDay) {
+                styles.color = theme?.primaryTextColor || '#364153';
+            }
+            if (selectedEndDay && isEqual(day, selectedEndDay)) {
+                styles.color = 'white';
+            }
+            if (selectedStartDay &&
+                selectedEndDay &&
+                day > selectedStartDay &&
+                day < selectedEndDay) {
+                styles.color = theme?.primaryTextColor || '#364153';
+            }
+        }
+    }
+    return styles;
+};
+export const formatSelectedDates = (startDate, endDate, locale) => {
+    const localeCode = locale?.code || 'en-US';
+    if (!startDate && !endDate) {
+        return '';
+    }
+    else if (startDate && !endDate) {
+        const options = {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        };
+        return startDate.toLocaleDateString(localeCode, options);
+    }
+    else if (startDate && endDate) {
+        if (isEqual(startDate, endDate)) {
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            };
+            return startDate.toLocaleDateString(localeCode, options);
+        }
+        else if (startDate.getMonth() === endDate.getMonth() &&
+            startDate.getFullYear() === endDate.getFullYear()) {
+            const optionsStartDate = {
+                month: 'short',
+                day: 'numeric',
+            };
+            return `${startDate.toLocaleDateString(localeCode, optionsStartDate)} - 
+                    ${endDate.getDate()}, ${endDate.getFullYear()}`;
+        }
+        else {
+            const options = {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            };
+            return `${startDate.toLocaleDateString(localeCode, options)} - 
+                    ${endDate.toLocaleDateString(localeCode, options)}`;
+        }
+    }
+    return '';
+};
+function hexToRgbaWith10PercentAlpha(hex) {
+    // Convert the hex color to RGB
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    // Set the alpha value to 10%
+    const alpha = 0.1;
+    // Return the color as an rgba string
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}

package/dist/esm/components/InternalDashboard/InternalDashboard.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { InternalFilter, QuillReport } from '@quillsql/react';
+export declare const InternalDashboard: ({ name, hidden, onClickReport, onChangeLoading, filters, containerStyle, parentLoading, onManageDashboard, }: {
+    name: string;
+    hidden?: boolean;
+    onClickReport?: (report: QuillReport) => void;
+    hoverActions?: (report: QuillReport) => JSX.Element;
+    onChangeLoading?: (loading: boolean) => void;
+    filters?: any[];
+    onUserFiltersUpdated?: (filters: InternalFilter[]) => void;
+    onClickChartElement?: (data: any) => void;
+    dateBucket?: string;
+    containerStyle?: CSSProperties;
+    parentLoading: boolean;
+    onManageDashboard: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InternalDashboard.d.ts.map

package/dist/esm/components/InternalDashboard/InternalDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalDashboard.d.ts","sourceRoot":"","sources":["../../../../src/components/InternalDashboard/InternalDashboard.tsx"],"names":[],"mappings":"AA4BA,OAAO,EACL,aAAa,EAOd,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,cAAc,EACd,WAAW,EAIZ,MAAM,iBAAiB,CAAC;AA+EzB,eAAO,MAAM,iBAAiB,iHAa3B;IACD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC3D,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,4CAghEA,CAAC"}