+
+
+
+
Users with platform_admin can access admin features on every tenant.
+
{error &&
{error}
}
+
+
Auto-claim event registrations
+
+ When enabled, anonymous event registrations are automatically linked to user accounts when they sign up
+ with a matching email. Applies tenant-wide to events that use registration forms.
+
+
+ Auto-claim registrations when user signs up with matching email
+ {savingAutoClaim ?
+
}>
@@ -454,7 +473,8 @@ function ClubDash(){
userPermissions,
adminBypass,
isAdminView,
- isSiteAdmin
+ isSiteAdmin,
+ tasksComingSoon
]);
menuItemsRef.current = menuItems;
@@ -512,10 +532,14 @@ function ClubDash(){
const isPending = org?.approvalStatus === 'pending';
const allowedActions = configData?.orgApproval?.pendingOrgLimits?.allowedActions ?? ['view_page', 'edit_profile', 'manage_members'];
+ const hasOrgTasksBeta =
+ adminBypass ||
+ orgHasBetaFeature(org, ORG_BETA_FEATURE_ORG_TASKS);
+
const pageToAction = [
'view_page', // 0: Dashboard
'create_events', // 1: Events
- 'create_events', // 2: Tasks (org/event ops; same gate as Events management)
+ hasOrgTasksBeta ? 'create_events' : 'view_page', // 2: Tasks hub beta
'post_messages', // 3: Announcements
'manage_members', // 4: Members
'edit_profile', // 5: Settings
diff --git a/frontend/src/pages/ClubDash/EventsManagement/components/EventDashboard/EventDashboard.scss b/frontend/src/pages/ClubDash/EventsManagement/components/EventDashboard/EventDashboard.scss
index ce0614f0..467f9aef 100644
--- a/frontend/src/pages/ClubDash/EventsManagement/components/EventDashboard/EventDashboard.scss
+++ b/frontend/src/pages/ClubDash/EventsManagement/components/EventDashboard/EventDashboard.scss
@@ -1427,6 +1427,25 @@
pointer-events: none;
}
+/* Visx renders vertical crosshair in a portal (sibling to chart), not inside .chart-container-visx */
+.visx-crosshair.visx-crosshair-vertical {
+ z-index: 10001 !important;
+ pointer-events: none;
+}
+
+.visx-crosshair.visx-crosshair-vertical line {
+ stroke: #94a3b8 !important;
+ stroke-width: 1px !important;
+ stroke-opacity: 1 !important;
+ stroke-dasharray: 1 4 !important;
+ stroke-linecap: round !important;
+}
+
+.visx-tooltip-glyph {
+ z-index: 10003 !important;
+ pointer-events: none;
+}
+
.rsvp-chart-tooltip {
padding: 0.5rem 0.75rem;
background: var(--background);
diff --git a/frontend/src/pages/ClubDash/EventsManagement/components/EventDashboard/components/EventDashboardChart/EventDashboardChart.jsx b/frontend/src/pages/ClubDash/EventsManagement/components/EventDashboard/components/EventDashboardChart/EventDashboardChart.jsx
index aee0e898..16dae97d 100644
--- a/frontend/src/pages/ClubDash/EventsManagement/components/EventDashboard/components/EventDashboardChart/EventDashboardChart.jsx
+++ b/frontend/src/pages/ClubDash/EventsManagement/components/EventDashboard/components/EventDashboardChart/EventDashboardChart.jsx
@@ -8,6 +8,8 @@ import {
GlyphSeries,
buildChartTheme,
Tooltip,
+ DataContext,
+ TooltipContext
} from '@visx/xychart';
import { curveMonotoneX } from '@visx/curve';
import '../../EventDashboard.scss';
@@ -25,8 +27,385 @@ const chartTheme = buildChartTheme({
tickLength: 0,
});
-const MAX_X_TICKS = 8;
-const MAX_X_TICKS_DENSE = 6;
+function bandCenterX(xScale, bandwidth, xCat) {
+ return Number(xScale(xCat)) + bandwidth / 2;
+}
+
+const CHART_BAND_PADDING_INNER = 0.12;
+const CHART_BAND_PADDING_OUTER = 0;
+
+function centerRatioForBandIndex(index, total, paddingInner = CHART_BAND_PADDING_INNER, paddingOuter = CHART_BAND_PADDING_OUTER) {
+ if (!Number.isFinite(index) || total <= 0) return null;
+ const denominator = total - paddingInner + 2 * paddingOuter;
+ if (denominator <= 0) return null;
+ return (index + paddingOuter + (1 - paddingInner) / 2) / denominator;
+}
+
+function nearestBandIndexForLocalX(localX, width, total, paddingInner = CHART_BAND_PADDING_INNER, paddingOuter = CHART_BAND_PADDING_OUTER) {
+ if (!Number.isFinite(localX) || !Number.isFinite(width) || width <= 0 || total <= 0) return null;
+ const denominator = total - paddingInner + 2 * paddingOuter;
+ if (denominator <= 0) return null;
+ const stepPx = width / denominator;
+ const raw = localX / stepPx - paddingOuter - (1 - paddingInner) / 2;
+ return Math.max(0, Math.min(total - 1, Math.round(raw)));
+}
+
+/** Pixel y along straight segments between band centers (smooth x vs snapped tooltip values). */
+function interpolateLineYAtPixelX(pxX, sortedPoints, xScale, yScale, xAcc, yAcc, bandwidth) {
+ if (!sortedPoints?.length || !xScale || !yScale) return null;
+ const centers = sortedPoints.map((d) => bandCenterX(xScale, bandwidth, xAcc(d)));
+ const ys = sortedPoints.map((d) => Number(yScale(yAcc(d))));
+ if (!Number.isFinite(centers[0]) || !Number.isFinite(ys[0])) return null;
+
+ if (pxX <= centers[0]) {
+ return { cx: pxX, cy: ys[0] };
+ }
+ const last = centers.length - 1;
+ if (pxX >= centers[last]) {
+ return { cx: pxX, cy: ys[last] };
+ }
+ for (let i = 0; i < last; i += 1) {
+ const p0 = centers[i];
+ const p1 = centers[i + 1];
+ if (pxX >= p0 && pxX <= p1) {
+ const t = p1 === p0 ? 0 : (pxX - p0) / (p1 - p0);
+ return { cx: pxX, cy: ys[i] + t * (ys[i + 1] - ys[i]) };
+ }
+ }
+ return null;
+}
+
+function SmoothHoverDots({ isMultiSeries, series, data, xAccessor, yAccessor, color }) {
+ const { xScale, yScale } = React.useContext(DataContext) || {};
+ const tooltipCtx = React.useContext(TooltipContext);
+
+ if (!tooltipCtx?.tooltipOpen || xScale == null || yScale == null) return null;
+ const pxX = tooltipCtx.tooltipLeft;
+ if (pxX == null || Number.isNaN(Number(pxX))) return null;
+
+ const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 0;
+
+ const renderDot = (sorted, lineColor, fillOpacity = 1) => {
+ const pos = interpolateLineYAtPixelX(pxX, sorted, xScale, yScale, xAccessor, yAccessor, bw);
+ if (!pos || !Number.isFinite(pos.cx) || !Number.isFinite(pos.cy)) return null;
+ return (
+
+ );
+ };
+
+ if (isMultiSeries && series?.length) {
+ return (
+
+ {series.map((s, i) => {
+ if (!s.data?.length) return null;
+ const sorted = [...s.data].sort((a, b) => {
+ const xa = xAccessor(a);
+ const xb = xAccessor(b);
+ return xa < xb ? -1 : xa > xb ? 1 : 0;
+ });
+ const fillOpacity = typeof s.strokeOpacity === 'number' ? s.strokeOpacity : 1;
+ const dot = renderDot(sorted, s.color, fillOpacity);
+ return dot ? {dot} : null;
+ })}
+
+ );
+ }
+
+ if (data?.length) {
+ const sorted = [...data].sort((a, b) => {
+ const xa = xAccessor(a);
+ const xb = xAccessor(b);
+ return xa < xb ? -1 : xa > xb ? 1 : 0;
+ });
+ const dot = renderDot(sorted, color, 1);
+ return dot ?
{dot} : null;
+ }
+
+ return null;
+}
+
+function SyncedHoverOverlay({
+ syncId,
+ hoverSyncSignal,
+ xValues,
+ xAccessor,
+ yAccessor,
+ xTickFormat,
+ isMultiSeries,
+ series,
+ data,
+ color,
+}) {
+ const { xScale, yScale } = React.useContext(DataContext) || {};
+ if (!xScale || !yScale || !hoverSyncSignal || hoverSyncSignal.sourceId === syncId || hoverSyncSignal.type !== 'move') {
+ return null;
+ }
+ if (!xValues?.length) return null;
+
+ const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 0;
+ const xRange = xScale.range?.() || [];
+ if (xRange.length < 2) return null;
+ const xLeft = Math.min(...xRange);
+ const xRight = Math.max(...xRange);
+ const ratio = Math.max(0, Math.min(1, Number(hoverSyncSignal.ratio) || 0));
+ // Keep mirrored line smooth by following the shared normalized x-position.
+ const pxX = xLeft + ratio * (xRight - xLeft);
+ if (!Number.isFinite(pxX)) return null;
+
+ // Keep mirrored values notched to the nearest bucket for consistent numbers.
+ let idx = xValues.indexOf(hoverSyncSignal.xValue);
+ if (idx < 0) {
+ let nearestIdx = 0;
+ let nearestDist = Number.POSITIVE_INFINITY;
+ for (let i = 0; i < xValues.length; i += 1) {
+ const center = bandCenterX(xScale, bw, xValues[i]);
+ const dist = Math.abs(center - pxX);
+ if (dist < nearestDist) {
+ nearestDist = dist;
+ nearestIdx = i;
+ }
+ }
+ idx = nearestIdx;
+ }
+ const xVal = xValues[idx];
+ if (xVal == null) return null;
+
+ const yRange = yScale.range?.() || [];
+ if (!yRange.length) return null;
+ const yTop = Math.min(...yRange);
+ const yBottom = Math.max(...yRange);
+
+ const rows = isMultiSeries
+ ? (series || []).map((s) => {
+ const datum = s?.data?.find((d) => xAccessor(d) === xVal);
+ return datum
+ ? {
+ label: s?.label || 'Series',
+ value: Math.round(datum.y),
+ color: s?.color || '#94a3b8',
+ }
+ : null;
+ }).filter(Boolean)
+ : (() => {
+ const datum = (data || []).find((d) => xAccessor(d) === xVal);
+ return datum ? [{ label: 'Value', value: Math.round(datum.y), color }] : [];
+ })();
+ const syncedDots = isMultiSeries
+ ? (series || []).map((s, i) => {
+ if (!s?.data?.length) return null;
+ const sorted = [...s.data].sort((a, b) => {
+ const xa = xAccessor(a);
+ const xb = xAccessor(b);
+ return xa < xb ? -1 : xa > xb ? 1 : 0;
+ });
+ const pos = interpolateLineYAtPixelX(pxX, sorted, xScale, yScale, xAccessor, yAccessor, bw);
+ if (!pos || !Number.isFinite(pos.cy)) return null;
+ const fillOpacity = typeof s?.strokeOpacity === 'number' ? s.strokeOpacity : 1;
+ return (
+
+ );
+ })
+ : (() => {
+ if (!data?.length) return [];
+ const sorted = [...data].sort((a, b) => {
+ const xa = xAccessor(a);
+ const xb = xAccessor(b);
+ return xa < xb ? -1 : xa > xb ? 1 : 0;
+ });
+ const pos = interpolateLineYAtPixelX(pxX, sorted, xScale, yScale, xAccessor, yAccessor, bw);
+ if (!pos || !Number.isFinite(pos.cy)) return [];
+ return [
+
+ ];
+ })();
+
+ const dateLabel = xTickFormat ? xTickFormat(xVal) : String(xVal);
+ const tooltipWidth = 180;
+ const tooltipHeight = 30 + rows.length * 22;
+ const tooltipX = Math.max(xLeft + 6, Math.min(pxX + 12, xRight - tooltipWidth - 6));
+ const tooltipY = yTop + 8;
+
+ return (
+
+
+
+
{dateLabel}
+ {rows.map((r, i) => (
+
+
+ ))}
+
+
+ );
+}
+
+function HoverSyncReporter({ syncId, onHoverSyncChange, xAccessor, isPointerInsideRef }) {
+ const { xScale } = React.useContext(DataContext) || {};
+ const tooltipCtx = React.useContext(TooltipContext);
+ const lastEmittedRef = React.useRef({ xValue: null, ratio: null, tooltipOpen: false });
+
+ React.useEffect(() => {
+ if (!syncId || !onHoverSyncChange || !xScale || !tooltipCtx?.tooltipOpen || !isPointerInsideRef?.current) {
+ lastEmittedRef.current = { xValue: null, ratio: null, tooltipOpen: false };
+ return;
+ }
+ const tooltipLeft = Number(tooltipCtx.tooltipLeft);
+ if (!Number.isFinite(tooltipLeft)) return;
+ const range = xScale.range?.() || [];
+ if (range.length < 2) return;
+ const xLeft = Math.min(...range);
+ const xRight = Math.max(...range);
+ const width = xRight - xLeft;
+ if (width <= 0) return;
+
+ const nearestDatum = tooltipCtx.tooltipData?.nearestDatum?.datum;
+ const datumByKey = tooltipCtx.tooltipData?.datumByKey;
+ const fallbackDatum = datumByKey ? Object.values(datumByKey)[0]?.datum : null;
+ const xValue = nearestDatum ? xAccessor(nearestDatum) : fallbackDatum ? xAccessor(fallbackDatum) : null;
+ if (xValue == null) return;
+
+ const ratio = Math.max(0, Math.min(1, (tooltipLeft - xLeft) / width));
+ const roundedRatio = Math.round(ratio * 1000) / 1000;
+ const last = lastEmittedRef.current;
+ if (last.tooltipOpen && last.xValue === xValue && last.ratio === roundedRatio) {
+ return;
+ }
+
+ lastEmittedRef.current = { xValue, ratio: roundedRatio, tooltipOpen: true };
+ onHoverSyncChange({
+ sourceId: syncId,
+ type: 'move',
+ xValue,
+ ratio: roundedRatio,
+ ts: Date.now()
+ });
+ }, [syncId, onHoverSyncChange, xAccessor, xScale, tooltipCtx, isPointerInsideRef]);
+
+ return null;
+}
+
+function XScaleRangeReporter({ xScaleRangeRef }) {
+ const { xScale } = React.useContext(DataContext) || {};
+
+ React.useEffect(() => {
+ const range = xScale?.range?.();
+ if (!range || range.length < 2) return;
+ const xLeft = Math.min(...range);
+ const xRight = Math.max(...range);
+ if (!Number.isFinite(xLeft) || !Number.isFinite(xRight) || xRight <= xLeft) return;
+ xScaleRangeRef.current = { xLeft, xRight };
+ }, [xScale, xScaleRangeRef]);
+
+ return null;
+}
+
+function RangeSelectionOverlay({ xValues, selection }) {
+ const { xScale, yScale } = React.useContext(DataContext) || {};
+ if (!xScale || !yScale || !selection || !xValues?.length) return null;
+
+ const xRange = xScale.range?.() || [];
+ const yRange = yScale.range?.() || [];
+ if (xRange.length < 2 || yRange.length < 2) return null;
+
+ const xLeft = Math.min(...xRange);
+ const xRight = Math.max(...xRange);
+ const yTop = Math.min(...yRange);
+ const yBottom = Math.max(...yRange);
+ const bandWidth = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 0;
+
+ const start = Math.max(0, Math.min(selection.startIdx, xValues.length - 1));
+ const end = Math.max(0, Math.min(selection.endIdx, xValues.length - 1));
+ const from = Math.min(start, end);
+ const to = Math.max(start, end);
+
+ const fromX = Number(xScale(xValues[from]));
+ const toX = Number(xScale(xValues[to]));
+ if (!Number.isFinite(fromX) || !Number.isFinite(toX)) return null;
+
+ const left = Math.max(xLeft, Math.min(fromX, toX));
+ const right = Math.min(xRight, Math.max(fromX, toX) + bandWidth);
+ if (!Number.isFinite(left) || !Number.isFinite(right) || right <= left) return null;
+
+ return (
+
+
+ );
+}
+
+/** Max labeled notches on the x-axis (bands / hover stay full width; only tick labels are thinned). */
+const MAX_X_TICKS = 6;
+const MAX_X_TICKS_LONG_RANGE = 5;
function getSparseTickValues(values, maxTicks = MAX_X_TICKS) {
if (!values?.length) return undefined;
@@ -70,7 +449,8 @@ function formatSemanticDate(dateStr) {
* @param {boolean} [props.showGlyph=true] - End point dot
* @param {string} [props.emptyMessage='No data']
* @param {string[]} [props.xDomain] - Optional x-axis domain (e.g. full date range when data stops earlier)
- * @param {Array<{ data: Array<{x,y}>, color: string, label: string }>} [props.series] - Multiple series (overrides data when provided)
+ * @param {Array<{ data: Array<{x,y}>, color: string, label: string, strokeDasharray?: string, strokeOpacity?: number, fillOpacity?: number }>} [props.series] - Multiple series (overrides data when provided). Optional strokeDasharray for dashed comparison lines; strokeOpacity for dashed stroke only; fillOpacity overrides default area opacity per series.
+ * @param {string} [props.dashedLineBackdropStroke] - Solid stroke drawn under dashed lines so gaps match the chart surface (not stacked area fills). Defaults to CSS var --background with white fallback.
*/
const SERIES_COLORS = ['#4DAA57', '#2563eb', '#f59e0b', '#8b5cf6', '#ec4899', '#06b6d4'];
@@ -85,37 +465,79 @@ function EventDashboardChart({
showArea = true,
showLine = true,
showGlyph = true,
+ /** When true with multi-series, only the first series gets an end-point glyph (e.g. “today” marker). */
+ showGlyphPrimaryOnly = false,
showPointMarkers = false,
emptyMessage = 'No data',
xDomain,
series,
+ dashedLineBackdropStroke = 'var(--background, #ffffff)',
debugInteractions = false,
debugPrefix = 'EventDashboardChart',
+ syncId,
+ hoverSyncSignal,
+ onHoverSyncChange,
+ enableRangeSelection = false,
+ onRangeSelect,
}) {
+ const containerRef = React.useRef(null);
const lastMoveLogAtRef = React.useRef(0);
const lastTooltipLogAtRef = React.useRef(0);
+ const pointerInsideRef = React.useRef(false);
+ const xScaleRangeRef = React.useRef(null);
+ const [isPointerInside, setIsPointerInside] = React.useState(false);
+ const [dragSelection, setDragSelection] = React.useState(null);
const accessors = { xAccessor, yAccessor };
const isMultiSeries = series && series.length > 0;
const displayData = isMultiSeries ? series.flatMap((s) => s.data) : data;
const allValues = isMultiSeries ? series.flatMap((s) => s.data.map((d) => d.y)) : data.map((d) => d.y);
- const xValues = isMultiSeries
+ const baseXValues = isMultiSeries
? [...new Set(series.flatMap((s) => s.data.map((d) => xAccessor(d))))].sort()
: data.map((d) => xAccessor(d));
+ const xValues =
+ xDomain && Array.isArray(xDomain) && xDomain.length ? [...xDomain] : baseXValues;
const xTickValues = getSparseTickValues(
xValues,
- xValues.length > 30 ? MAX_X_TICKS_DENSE : MAX_X_TICKS
+ xValues.length > 40 ? MAX_X_TICKS_LONG_RANGE : MAX_X_TICKS
);
- if ((!isMultiSeries && (!data || data.length === 0)) || (isMultiSeries && series.every((s) => !s.data?.length))) {
- return (
-
- );
- }
-
const yMax = Math.max(...allValues, 0) * 1.1 || 10;
const gradientId = (c) => `chart-gradient-${c.replace('#', '')}`;
+ const getBandIndexFromMouseEvent = React.useCallback(
+ (e) => {
+ if (!containerRef.current || !xScaleRangeRef.current || !xValues?.length) return null;
+ const { xLeft, xRight } = xScaleRangeRef.current;
+ const width = xRight - xLeft;
+ if (!Number.isFinite(width) || width <= 0) return null;
+ const rect = containerRef.current.getBoundingClientRect();
+ const localX = e.clientX - rect.left - xLeft;
+ return nearestBandIndexForLocalX(localX, width, xValues.length);
+ },
+ [xValues]
+ );
+ const finishRangeSelection = React.useCallback(() => {
+ if (!enableRangeSelection || !onRangeSelect || !dragSelection || !xValues?.length) {
+ setDragSelection(null);
+ return;
+ }
+ const from = Math.max(0, Math.min(Math.min(dragSelection.startIdx, dragSelection.endIdx), xValues.length - 1));
+ const to = Math.max(0, Math.min(Math.max(dragSelection.startIdx, dragSelection.endIdx), xValues.length - 1));
+ if (to <= from) {
+ setDragSelection(null);
+ return;
+ }
+ onRangeSelect({
+ startXValue: xValues[from],
+ endXValue: xValues[to]
+ });
+ setDragSelection(null);
+ }, [enableRangeSelection, onRangeSelect, dragSelection, xValues]);
+ React.useEffect(() => {
+ if (!dragSelection) return;
+ const handleMouseUp = () => finishRangeSelection();
+ window.addEventListener('mouseup', handleMouseUp);
+ return () => window.removeEventListener('mouseup', handleMouseUp);
+ }, [dragSelection, finishRangeSelection]);
const maybeLog = (ref, message, payload, everyMs = 350) => {
if (!debugInteractions) return;
const now = Date.now();
@@ -124,10 +546,27 @@ function EventDashboardChart({
console.log(`[${debugPrefix}] ${message}`, payload);
};
+ if ((!isMultiSeries && (!data || data.length === 0)) || (isMultiSeries && series.every((s) => !s.data?.length))) {
+ return (
+
+ );
+ }
+
return (
+ onMouseMove={(e) => {
+ pointerInsideRef.current = true;
+ setIsPointerInside((prev) => (prev ? prev : true));
+ if (enableRangeSelection && dragSelection) {
+ const idx = getBandIndexFromMouseEvent(e);
+ if (idx != null) {
+ setDragSelection((prev) => (prev ? { ...prev, endIdx: idx } : prev));
+ }
+ }
maybeLog(
lastMoveLogAtRef,
'mousemove',
@@ -138,16 +577,43 @@ function EventDashboardChart({
isMultiSeries
},
450
- )
- }
+ );
+ }}
onMouseLeave={() => {
- if (!debugInteractions) return;
- console.log(`[${debugPrefix}] mouseleave`);
+ pointerInsideRef.current = false;
+ setIsPointerInside(false);
+ if (enableRangeSelection && dragSelection) {
+ finishRangeSelection();
+ }
+ if (debugInteractions) {
+ console.log(`[${debugPrefix}] mouseleave`);
+ }
+ if (!syncId || !onHoverSyncChange) return;
+ onHoverSyncChange({
+ sourceId: syncId,
+ type: 'leave',
+ ts: Date.now()
+ });
+ }}
+ onMouseDown={(e) => {
+ if (!enableRangeSelection || !onRangeSelect || e.button !== 0) return;
+ const idx = getBandIndexFromMouseEvent(e);
+ if (idx == null) return;
+ setDragSelection({ startIdx: idx, endIdx: idx });
+ }}
+ onMouseUp={() => {
+ if (!dragSelection) return;
+ finishRangeSelection();
}}
>
(
-
))
) : (
-
)}
({
@@ -182,10 +650,16 @@ function EventDashboardChart({
fontSize: 10,
textAnchor: 'middle',
})}
- numTicks={xTickValues ? xTickValues.length : Math.min(xDomain?.length ?? displayData.length, 12)}
+ numTicks={
+ xTickValues != null
+ ? xTickValues.length
+ : Math.min(xDomain?.length ?? xValues.length, 8)
+ }
/>
({
fill: 'var(--light-text)',
fontSize: 10,
@@ -197,7 +671,7 @@ function EventDashboardChart({
{isMultiSeries ? (
<>
{series.map((s, i) => (
-
+
{showArea && s.data?.length > 0 && (
(
-
+ ))}
+ {series.map((s, i) =>
+ showLine && s.data?.length > 0 && s.strokeDasharray ? (
+
+
+ ) : null
+ )}
+ {series.map((s, i) =>
+ showLine && s.data?.length > 0 && !s.strokeDasharray ? (
+
+ {showLine &&
+ showGlyph &&
+ s.data?.length > 0 &&
+ (!showGlyphPrimaryOnly || i === 0) && (
+ (
+ (
- (
+
))}
@@ -277,7 +792,7 @@ function EventDashboardChart({
xAccessor={accessors.xAccessor}
yAccessor={accessors.yAccessor}
curve={curveMonotoneX}
- fillOpacity={0.2}
+ fillOpacity={0.3}
fill={`url(#${gradientId(color)})`}
/>
)}
@@ -339,60 +854,111 @@ function EventDashboardChart({
)}
)}
- {
- maybeLog(
- lastTooltipLogAtRef,
- 'tooltip render',
- {
- hasNearest: !!tooltipData?.nearestDatum,
- keys: tooltipData?.datumByKey ? Object.keys(tooltipData.datumByKey) : [],
- },
- 200
- );
- if (!tooltipData?.datumByKey) return null;
- const entries = Object.entries(tooltipData.datumByKey).filter(
- ([k, v]) => v?.datum && (k.startsWith('series-') && !k.includes('series-end'))
- );
- if (entries.length === 0) return null;
- const first = entries[0][1];
- const dateStr = first?.datum?.x;
- if (!dateStr) return null;
- return (
-
-
{xTickFormat(dateStr)}
- {isMultiSeries
- ? entries.map(([key, v], i) => {
- const idx = parseInt(key.replace('series-', ''), 10);
- const s = series[idx];
- return (
-
-
- );
- })
- : (
-
-
- )}
-
{
+ maybeLog(
+ lastTooltipLogAtRef,
+ 'tooltip render',
+ {
+ hasNearest: !!tooltipData?.nearestDatum,
+ keys: tooltipData?.datumByKey ? Object.keys(tooltipData.datumByKey) : [],
+ },
+ 200
+ );
+ if (!tooltipData?.datumByKey) return null;
+ const entries = Object.entries(tooltipData.datumByKey).filter(
+ ([k, v]) =>
+ v?.datum &&
+ k.startsWith('series-') &&
+ !k.includes('series-end') &&
+ !k.includes('dash-backdrop')
+ );
+ if (entries.length === 0) return null;
+ const first = entries[0][1];
+ const dateStr = first?.datum?.x;
+ if (!dateStr) return null;
+ return (
+
+
{xTickFormat(dateStr)}
+ {isMultiSeries
+ ? entries.map(([key, v], i) => {
+ const idx = parseInt(key.replace('series-', ''), 10);
+ const s = series[idx];
+ return (
+
+
+ );
+ })
+ : (
+
+
+ )}
+
);
diff --git a/frontend/src/pages/FeatureAdmin/AnalyticsDashboard/AnalyticsDashboard.jsx b/frontend/src/pages/FeatureAdmin/AnalyticsDashboard/AnalyticsDashboard.jsx
index cbbb0efd..7ba949d1 100644
--- a/frontend/src/pages/FeatureAdmin/AnalyticsDashboard/AnalyticsDashboard.jsx
+++ b/frontend/src/pages/FeatureAdmin/AnalyticsDashboard/AnalyticsDashboard.jsx
@@ -1,38 +1,20 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
import { useFetch } from '../../../hooks/useFetch';
import { Icon } from '@iconify-icon/react';
import ProportionalBarList from '../../../components/ProportionalBarList/ProportionalBarList';
+import { formatAnalyticsDuration, formatAnalyticsNumber } from '../../../utils/analyticsDashboardUtils';
import './AnalyticsDashboard.scss';
function AnalyticsDashboard() {
const [timeRange, setTimeRange] = useState('30d');
- const { data: dashboardData, loading, error, refetch } = useFetch(`/dashboard/all?timeRange=${timeRange}&platform=web`);
-
- const formatNumber = (num) => {
- if (num === null || num === undefined) return '0';
- return new Intl.NumberFormat().format(num);
- };
+ const dashboardParams = useMemo(() => ({ timeRange, platform: 'web' }), [timeRange]);
+ const { data: dashboardData, loading, error, refetch } = useFetch('/dashboard/all', {
+ method: 'GET',
+ params: dashboardParams
+ });
- const formatDuration = (seconds) => {
- if (!seconds) return '0s';
- const mins = Math.floor(seconds / 60);
- const secs = seconds % 60;
- if (mins > 0) {
- return `${mins}m ${secs}s`;
- }
- return `${secs}s`;
- };
-
- const getTimeRangeLabel = (range) => {
- const labels = {
- '1h': 'Last Hour',
- '24h': 'Last 24 Hours',
- '7d': 'Last 7 Days',
- '30d': 'Last 30 Days',
- '90d': 'Last 90 Days'
- };
- return labels[range] || range;
- };
+ const formatNumber = formatAnalyticsNumber;
+ const formatDuration = formatAnalyticsDuration;
if (loading) {
return (
diff --git a/frontend/src/pages/FeatureAdmin/OrgManagement/OrgBetaFeatures/OrgBetaFeatures.jsx b/frontend/src/pages/FeatureAdmin/OrgManagement/OrgBetaFeatures/OrgBetaFeatures.jsx
new file mode 100644
index 00000000..4852587f
--- /dev/null
+++ b/frontend/src/pages/FeatureAdmin/OrgManagement/OrgBetaFeatures/OrgBetaFeatures.jsx
@@ -0,0 +1,294 @@
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import { useFetch } from '../../../../hooks/useFetch';
+import { useGradient } from '../../../../hooks/useGradient';
+import { useNotification } from '../../../../NotificationContext';
+import apiRequest from '../../../../utils/postRequest';
+import { Icon } from '@iconify-icon/react';
+import {
+ ORG_BETA_FEATURE_KEYS,
+ ORG_BETA_FEATURE_CATALOG
+} from '../../../../constants/orgBetaFeatures';
+import './OrgBetaFeatures.scss';
+
+const PAGE_SIZE = 20;
+
+function buildOrgListQuery(filters) {
+ const p = new URLSearchParams();
+ if (filters.search) p.set('search', filters.search);
+ if (filters.verified === 'true' || filters.verified === 'false') {
+ p.set('verified', filters.verified);
+ }
+ p.set('page', String(filters.page));
+ p.set('limit', String(PAGE_SIZE));
+ return p.toString();
+}
+
+function OrgBetaFeatures() {
+ const { addNotification } = useNotification();
+ const { AtlasMain, AdminGrad } = useGradient();
+ const [searchDraft, setSearchDraft] = useState('');
+ const [filters, setFilters] = useState({
+ search: '',
+ verified: '',
+ page: 1
+ });
+ const [savingByOrgId, setSavingByOrgId] = useState({});
+
+ useEffect(() => {
+ const id = window.setTimeout(() => {
+ setFilters((prev) =>
+ prev.search === searchDraft ? prev : { ...prev, search: searchDraft, page: 1 }
+ );
+ }, 280);
+ return () => window.clearTimeout(id);
+ }, [searchDraft]);
+
+ const listQuery = useMemo(() => buildOrgListQuery(filters), [filters]);
+ const { data: catalogRes } = useFetch('/org-management/beta-feature-catalog');
+ const features = useMemo(() => {
+ const fromApi = catalogRes?.data?.features;
+ if (Array.isArray(fromApi) && fromApi.length) return fromApi;
+ return ORG_BETA_FEATURE_KEYS.map((key) => ({
+ key,
+ label: ORG_BETA_FEATURE_CATALOG[key]?.label || key,
+ description: ORG_BETA_FEATURE_CATALOG[key]?.description || ''
+ }));
+ }, [catalogRes]);
+
+ const { data: orgs, loading, error, refetch } = useFetch(
+ `/org-management/organizations?${listQuery}`
+ );
+
+ const pagination = orgs?.pagination;
+ const totalItems = pagination?.total ?? 0;
+ const pageSize = pagination?.limit ?? PAGE_SIZE;
+ const totalPages =
+ pagination?.totalPages ?? Math.max(1, Math.ceil(totalItems / pageSize));
+ const currentPage = Math.min(Math.max(1, filters.page), totalPages);
+ const rangeStart = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+ const rangeEnd = totalItems === 0 ? 0 : Math.min(currentPage * pageSize, totalItems);
+
+ useEffect(() => {
+ if (pagination?.totalPages == null) return;
+ const tp = pagination.totalPages;
+ setFilters((f) => (f.page > tp ? { ...f, page: tp } : f));
+ }, [pagination?.totalPages]);
+
+ const patchOrgBetaFeatures = useCallback(
+ async (orgId, enabledKeys) => {
+ setSavingByOrgId((m) => ({ ...m, [orgId]: true }));
+ try {
+ const res = await apiRequest(
+ `/org-management/organizations/${orgId}/beta-features`,
+ { enabledKeys },
+ { method: 'PATCH' }
+ );
+ if (res.success) {
+ addNotification({
+ title: 'Saved',
+ message: 'Beta features updated for this organization.',
+ type: 'success'
+ });
+ refetch();
+ } else {
+ addNotification({
+ title: 'Error',
+ message: res.message || 'Could not update beta features.',
+ type: 'error'
+ });
+ }
+ } catch (e) {
+ addNotification({
+ title: 'Error',
+ message: e.message || 'Could not update beta features.',
+ type: 'error'
+ });
+ } finally {
+ setSavingByOrgId((m) => {
+ const next = { ...m };
+ delete next[orgId];
+ return next;
+ });
+ }
+ },
+ [addNotification, refetch]
+ );
+
+ const handleToggle = useCallback(
+ (org, featureKey, nextEnabled) => {
+ const current = Array.isArray(org.betaFeatureKeys) ? [...org.betaFeatureKeys] : [];
+ let nextKeys;
+ if (nextEnabled) {
+ nextKeys = [...new Set([...current, featureKey])];
+ } else {
+ nextKeys = current.filter((k) => k !== featureKey);
+ }
+ nextKeys = nextKeys.filter((k) => ORG_BETA_FEATURE_KEYS.includes(k));
+ patchOrgBetaFeatures(org._id, nextKeys);
+ },
+ [patchOrgBetaFeatures]
+ );
+
+ const isInitialLoad = loading && orgs == null;
+
+ if (isInitialLoad) {
+ return (
+
+ );
+ }
+
+ if (error && orgs == null) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+ setFilters((f) => ({ ...f, verified: e.target.value, page: 1 }))
+ }
+ >
+ All organizations
+ Verified only
+ Unverified only
+
+
+
+
+ {error && orgs != null && (
+
+ Could not refresh: {error}
+
+ )}
+
+ {pagination && totalItems > 0 && (
+
+ {totalItems} organization{totalItems === 1 ? '' : 's'}
+ {filters.search ? ` matching “${filters.search}”` : ''}
+
+ )}
+
+
+
+
+
+ Organization
+ {features.map((f) => (
+
+ {f.label}
+ Beta
+
+ ))}
+
+
+
+ {!orgs?.data?.length ? (
+
+
+ No organizations match your filters.
+
+
+ ) : (
+ orgs.data.map((org) => (
+
+
+
+
+
+
+ {features.map((f) => {
+ const enabled =
+ Array.isArray(org.betaFeatureKeys) &&
+ org.betaFeatureKeys.includes(f.key);
+ const busy = savingByOrgId[org._id];
+ const inputId = `beta-${org._id}-${f.key}`;
+ return (
+
+
+ );
+ })}
+
+ ))
+ )}
+
+
+
+
+ {pagination && totalItems > 0 && (
+
+
+ Showing {rangeStart}–{rangeEnd} of {totalItems}
+
+
+ setFilters((f) => ({ ...f, page: f.page - 1 }))}
+ >
+ Previous
+
+ = totalPages || loading}
+ onClick={() => setFilters((f) => ({ ...f, page: f.page + 1 }))}
+ >
+ Next
+
+
+
+ )}
+
+
+
+ );
+}
+
+export default OrgBetaFeatures;
diff --git a/frontend/src/pages/FeatureAdmin/OrgManagement/OrgBetaFeatures/OrgBetaFeatures.scss b/frontend/src/pages/FeatureAdmin/OrgManagement/OrgBetaFeatures/OrgBetaFeatures.scss
new file mode 100644
index 00000000..9101754c
--- /dev/null
+++ b/frontend/src/pages/FeatureAdmin/OrgManagement/OrgBetaFeatures/OrgBetaFeatures.scss
@@ -0,0 +1,204 @@
+.org-beta-features {
+
+ &__header {
+ // h1 {
+ // margin: 0 0 0.35rem;
+ // font-size: 1.75rem;
+ // }
+
+ // p {
+ // margin: 0;
+ // color: var(--text-muted, #5c6570);
+ // max-width: 40rem;
+ // }
+
+ // img {
+ // position: absolute;
+ // right: 0;
+ // top: 0;
+ // width: 120px;
+ // height: auto;
+ // opacity: 0.35;
+ // pointer-events: none;
+ // }
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding: 0 40px 20px 40px;
+ }
+
+ &__toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ align-items: center;
+ margin-bottom: 1rem;
+ }
+
+ &__search {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ flex: 1;
+ min-width: 200px;
+ max-width: 420px;
+ padding: 0.35rem 0.75rem;
+ border: 1px solid var(--border-color, #d0d7de);
+ border-radius: 8px;
+ background: var(--surface, #fff);
+
+ input {
+ border: none;
+ flex: 1;
+ min-width: 0;
+ font: inherit;
+ background: transparent;
+ outline: none;
+ }
+ }
+
+ &__filter select {
+ padding: 0.45rem 0.75rem;
+ border-radius: 8px;
+ border: 1px solid var(--border-color, #d0d7de);
+ font: inherit;
+ }
+
+ &__meta {
+ font-size: 0.9rem;
+ color: var(--text-muted, #5c6570);
+ margin: 0 0 0.75rem;
+ }
+
+ &__table-wrap {
+ overflow-x: auto;
+ border: 1px solid var(--border-color, #d0d7de);
+ border-radius: 10px;
+ background: var(--surface, #fff);
+
+ &--dim {
+ opacity: 0.65;
+ }
+ }
+
+ &__table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.95rem;
+
+ th,
+ td {
+ padding: 0.65rem 0.85rem;
+ text-align: left;
+ border-bottom: 1px solid var(--border-color, #e8eaed);
+ vertical-align: middle;
+ }
+
+ thead th {
+ background: var(--table-header-bg, #f6f8f6);
+ font-weight: 600;
+ }
+ }
+
+ &__th-feature {
+ white-space: nowrap;
+ }
+
+ &__th-title {
+ margin-right: 0.35rem;
+ }
+
+ &__th-badge {
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ padding: 0.15rem 0.4rem;
+ border-radius: 4px;
+ background: #e8f5e9;
+ color: #2e7d32;
+ }
+
+ &__org-cell {
+ display: flex;
+ align-items: center;
+ gap: 0.65rem;
+ }
+
+ &__org-avatar {
+ width: 36px;
+ height: 36px;
+ border-radius: 8px;
+ object-fit: cover;
+ }
+
+ &__org-name {
+ font-weight: 600;
+ }
+
+ &__td-toggle {
+ text-align: center;
+ }
+
+ &__checkbox {
+ width: 1.1rem;
+ height: 1.1rem;
+ cursor: pointer;
+ accent-color: #4daa57;
+
+ &:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+ }
+
+ &__empty {
+ text-align: center;
+ color: var(--text-muted, #5c6570);
+ padding: 2rem 1rem !important;
+ }
+
+ &__pagination {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+ margin-top: 1rem;
+ font-size: 0.9rem;
+ }
+
+ &__pagination-btns {
+ display: flex;
+ gap: 0.5rem;
+
+ button {
+ padding: 0.4rem 0.85rem;
+ border-radius: 8px;
+ border: 1px solid var(--border-color, #d0d7de);
+ background: var(--surface, #fff);
+ font: inherit;
+ cursor: pointer;
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+ }
+ }
+
+ &__loading,
+ &__error {
+ padding: 2rem;
+ text-align: center;
+ }
+
+ &__inline-error {
+ color: #b71c1c;
+ margin-bottom: 0.75rem;
+ font-size: 0.9rem;
+ }
+}
diff --git a/frontend/src/utils/analyticsDashboardUtils.js b/frontend/src/utils/analyticsDashboardUtils.js
new file mode 100644
index 00000000..06b6792a
--- /dev/null
+++ b/frontend/src/utils/analyticsDashboardUtils.js
@@ -0,0 +1,244 @@
+import {
+ eachDayOfInterval,
+ endOfMonth,
+ format,
+ isSameMonth,
+ parseISO,
+ startOfMonth,
+ subMonths
+} from 'date-fns';
+
+/**
+ * Shared formatters and helpers for platform analytics dashboards
+ * (Admin General + Feature Admin Analytics).
+ */
+
+export function formatAnalyticsNumber(num) {
+ if (num === null || num === undefined) return '0';
+ return new Intl.NumberFormat().format(num);
+}
+
+export function formatAnalyticsDuration(seconds) {
+ if (!seconds && seconds !== 0) return '0s';
+ const s = Math.round(Number(seconds));
+ const mins = Math.floor(s / 60);
+ const secs = s % 60;
+ if (mins > 0) return `${mins}m ${secs}s`;
+ return `${secs}s`;
+}
+
+export function formatDeltaPercent(delta) {
+ if (delta === null || delta === undefined || Number.isNaN(delta)) return '—';
+ const pct = Math.round(delta * 100);
+ const sign = pct > 0 ? '+' : '';
+ return `${sign}${pct}%`;
+}
+
+/**
+ * Merge timeseries series objects into Chart.js-friendly labels + datasets.
+ * @param {Record
>} series
+ */
+export function buildTimeseriesChartData(series, colors) {
+ const palette = colors || ['#45A1FC', '#8052FB', '#2BB673', '#FA756D', '#f59e0b'];
+ if (!series || typeof series !== 'object') {
+ return { labels: [], datasets: [] };
+ }
+ const allBuckets = new Set();
+ Object.values(series).forEach((rows) => {
+ if (Array.isArray(rows)) rows.forEach((r) => r?.bucket && allBuckets.add(r.bucket));
+ });
+ const labels = [...allBuckets].sort();
+ const keys = Object.keys(series).filter((k) => Array.isArray(series[k]) && series[k].length);
+ const datasets = keys.map((key, i) => ({
+ label: key.replace(/_/g, ' '),
+ data: labels.map((lb) => {
+ const row = series[key].find((r) => r.bucket === lb);
+ return row ? row.value : 0;
+ }),
+ borderColor: palette[i % palette.length],
+ backgroundColor: 'transparent',
+ tension: 0.2,
+ fill: false,
+ pointRadius: 0,
+ borderWidth: 2
+ }));
+ return { labels, datasets };
+}
+
+/**
+ * Axis / tick label for a timeseries bucket string from the API.
+ * @param {'hour'|'day'|'week'} granularity
+ */
+export function formatBucketAxisLabel(bucket, granularity) {
+ if (bucket == null || bucket === '') return '';
+ if (granularity === 'hour') {
+ const d = new Date(bucket);
+ if (Number.isNaN(d.getTime())) return String(bucket).slice(11, 16);
+ return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+ }
+ if (granularity === 'week') {
+ return String(bucket).replace(/^(\d{4})-W(\d+)$/, (_, y, w) => `${y} W${w}`);
+ }
+ const d = new Date(bucket);
+ if (!Number.isNaN(d.getTime())) {
+ return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+ }
+ return String(bucket).slice(0, 10);
+}
+
+/**
+ * Build series config for @visx/xychart (e.g. EventDashboardChart) with optional comparison line.
+ * Uses the same x (bucket key) for both lines so the band scale aligns.
+ * Comparison uses the same stroke color as the primary series with a dashed stroke; both get area fills.
+ */
+export function buildComparisonVisxSeries(
+ currentRows,
+ previousRows,
+ color,
+ labels = {},
+ options = {}
+) {
+ const labelThis = labels.thisPeriod || 'This period';
+ const labelCompare = labels.compare || 'Comparison';
+ const compareStrokeDasharray = options.compareStrokeDasharray ?? '5 5';
+ const compareStrokeOpacity =
+ typeof options.compareStrokeOpacity === 'number' ? options.compareStrokeOpacity : 0.6;
+ const primaryFillOpacity = options.primaryFillOpacity ?? 0.36;
+ const compareFillOpacity = options.compareFillOpacity ?? 0.24;
+ const excludePreviousPeriodEnd = options.excludePreviousPeriodEnd ?? true;
+
+ if (!currentRows?.length) {
+ return { series: [] };
+ }
+
+ if (!previousRows?.length) {
+ const data = currentRows.map((r) => ({ x: r.bucket, y: r.value }));
+ return {
+ series: [{ data, color, label: labelThis, fillOpacity: primaryFillOpacity }]
+ };
+ }
+
+ const len = Math.min(currentRows.length, previousRows.length);
+ const cur = [];
+ const prev = [];
+ for (let i = 0; i < len; i++) {
+ const x = currentRows[i].bucket;
+ cur.push({ x, y: currentRows[i].value });
+ if (excludePreviousPeriodEnd && i === len - 1) continue;
+ prev.push({ x, y: previousRows[i]?.value ?? 0 });
+ }
+
+ return {
+ series: [
+ { data: cur, color, label: labelThis, fillOpacity: primaryFillOpacity },
+ {
+ data: prev,
+ color,
+ label: labelCompare,
+ strokeDasharray: compareStrokeDasharray,
+ strokeOpacity: compareStrokeOpacity,
+ fillOpacity: compareFillOpacity
+ }
+ ]
+ };
+}
+
+/**
+ * Ordered `yyyy-MM-dd` keys for every calendar day in the month containing `anchorDate`.
+ */
+export function fullDayDomainForCalendarMonth(anchorDate) {
+ return eachDayOfInterval({
+ start: startOfMonth(anchorDate),
+ end: endOfMonth(anchorDate)
+ }).map((d) => format(d, 'yyyy-MM-dd'));
+}
+
+/**
+ * Month view (day buckets): full month on the x-axis. Primary “this period” only includes days
+ * through today when viewing the current month. Comparison uses one point per calendar day for
+ * the whole month (same x labels as the domain), with y from `compareSubMonths` earlier
+ * (1 = adjacent month, 12 = year-ago same calendar day).
+ */
+export function buildComparisonVisxSeriesForCalendarMonthView(
+ anchorDate,
+ currentRows,
+ previousRows,
+ color,
+ labels = {},
+ options = {}
+) {
+ const labelThis = labels.thisPeriod || 'This period';
+ const labelCompare = labels.compare || 'Comparison';
+ const compareStrokeDasharray = options.compareStrokeDasharray ?? '5 5';
+ const compareStrokeOpacity =
+ typeof options.compareStrokeOpacity === 'number' ? options.compareStrokeOpacity : 0.6;
+ const primaryFillOpacity = options.primaryFillOpacity ?? 0.36;
+ const compareFillOpacity = options.compareFillOpacity ?? 0.24;
+ const compareSubMonths = typeof options.compareSubMonths === 'number' ? options.compareSubMonths : 1;
+ const excludePreviousPeriodEnd = options.excludePreviousPeriodEnd ?? true;
+
+ const fullDomain = fullDayDomainForCalendarMonth(anchorDate);
+ const monthStart = fullDomain[0];
+ const monthEnd = fullDomain[fullDomain.length - 1];
+ const now = new Date();
+ const viewingCurrentMonth = isSameMonth(anchorDate, now);
+ const todayIso = format(now, 'yyyy-MM-dd');
+ const cutoffIso = viewingCurrentMonth && todayIso < monthEnd ? todayIso : monthEnd;
+
+ const curInRange = (currentRows || [])
+ .filter((r) => r?.bucket && r.bucket >= monthStart && r.bucket <= cutoffIso)
+ .sort((a, b) => (a.bucket < b.bucket ? -1 : a.bucket > b.bucket ? 1 : 0));
+
+ if (!curInRange.length) {
+ return { series: [], xDomain: undefined, showEndGlyph: false };
+ }
+
+ const prevBy = new Map((previousRows || []).map((r) => [r.bucket, r.value]));
+ const prevEnd = (previousRows || []).length
+ ? (previousRows || [])
+ .map((r) => r?.bucket)
+ .filter(Boolean)
+ .sort()
+ .slice(-1)[0]
+ : null;
+
+ const cur = curInRange.map((r) => ({ x: r.bucket, y: r.value }));
+
+ const buildPrevAcrossFullMonth = () =>
+ fullDomain
+ .map((x) => {
+ const prevKey = format(subMonths(parseISO(`${x}T12:00:00`), compareSubMonths), 'yyyy-MM-dd');
+ if (excludePreviousPeriodEnd && prevEnd && prevKey === prevEnd) {
+ return null;
+ }
+ if (!prevBy.has(prevKey)) {
+ return null;
+ }
+ return { x, y: prevBy.get(prevKey) };
+ })
+ .filter(Boolean);
+
+ if (!previousRows?.length) {
+ return {
+ series: [{ data: cur, color, label: labelThis, fillOpacity: primaryFillOpacity }],
+ xDomain: fullDomain,
+ showEndGlyph: viewingCurrentMonth && cur.length > 0
+ };
+ }
+
+ return {
+ series: [
+ { data: cur, color, label: labelThis, fillOpacity: primaryFillOpacity },
+ {
+ data: buildPrevAcrossFullMonth(),
+ color,
+ label: labelCompare,
+ strokeDasharray: compareStrokeDasharray,
+ strokeOpacity: compareStrokeOpacity,
+ fillOpacity: compareFillOpacity
+ }
+ ],
+ xDomain: fullDomain,
+ showEndGlyph: viewingCurrentMonth && cur.length > 0
+ };
+}
diff --git a/private-deps.lock b/private-deps.lock
index 3d573c2b..edc7255b 100644
--- a/private-deps.lock
+++ b/private-deps.lock
@@ -1,7 +1,7 @@
{
"events": {
"repo": "git@github.com:Study-Compass/Events-Backend.git",
- "ref": "5dbc9cb33e49828b46a0056c5bd8ddef6b6e2a25",
+ "ref": "4af5cda46b48fcd78f6be03a1e124868c8a36a15",
"dest": "backend/events"
}
}