@oneuptime/common 12.0.19 → 12.0.21

package/Types/Marketing/MarketingEvent.ts

@@ -3,7 +3,7 @@ import { JSONObject } from "../JSON";
 /*
  * The outbound marketing event contract.
  *
- * OneUptime does not keep a conversion ledger. The four moments worth
+ * OneUptime does not keep a conversion ledger. The moments worth
  * measuring are emitted as signed webhooks at the instant they happen and are
  * not stored here afterwards, so this interface — not a database table — is
  * the whole record of what a conversion looks like.
@@ -13,7 +13,7 @@ import { JSONObject } from "../JSON";
  *
  *   - DEDUPLICATION. `eventId` is stable for a given real-world occurrence, so
  *     a redelivery carries the id the first attempt did. Retries are expected
- *     (the queue retries, and Cal retries into us), so a receiver that keys on
+ *     (the delivery queue retries), so a receiver that keys on
  *     anything else will double-count.
  *   - ORDERING. Events are delivered per-occurrence with no sequence number.
  *     A signup and a plan change seconds apart may arrive either way round;
@@ -26,7 +26,15 @@ import { JSONObject } from "../JSON";
  */
 export enum MarketingEventType {
   SignUp = "sign_up",
-  MeetingBooked = "meeting_booked",
+  /*
+   * A project's first paid subscription, created together with the project.
+   *
+   * Deliberately not a subscription_upgraded. An upgrade is a movement between
+   * two tiers and reports expansion; this has no previous tier at all and is
+   * new business. Reporting one as the other mixes net-new with expansion
+   * revenue, and nothing downstream could separate them again.
+   */
+  SubscriptionStarted = "subscription_started",
   SubscriptionUpgraded = "subscription_upgraded",
   SubscriptionDowngraded = "subscription_downgraded",
   /*
@@ -36,7 +44,7 @@ export enum MarketingEventType {
    * whose email is typed in by a human rather than captured from a session —
    * which is exactly what makes it joinable: set EnterpriseLicense.email to
    * the address the customer booked with and this event shares an identity
-   * with the meeting_booked that preceded it, months earlier.
+   * with whatever else that address has done, months earlier.
    */
   EnterpriseLicenseIssued = "enterprise_license_issued",
 }
@@ -46,10 +54,9 @@ export const MARKETING_EVENT_SCHEMA_VERSION: number = 1;
 /*
  * The campaign the converting visitor carried.
  *
- * Copied from the User or Project row for a signup or a plan change, and read
- * out of Cal booking metadata for a booked meeting. Every field is optional:
- * a conversion with no attribution at all is still a conversion, and is still
- * emitted.
+ * Copied from the User or Project row the conversion happened on. Every field
+ * is optional: a conversion with no attribution at all is still a conversion,
+ * and is still emitted.
  */
 export interface MarketingEventAttribution extends JSONObject {
   utmSource?: string | undefined;
@@ -68,14 +75,14 @@ export interface MarketingEvent extends JSONObject {
    * Stable per real-world occurrence, and the receiver's deduplication key:
    *
    *   sign_up:{userId}
-   *   meeting_booked:{calBookingUid}
+   *   subscription_started:{projectId}
    *   subscription_upgraded:{projectId}:{occurredAt}
    *   subscription_downgraded:{projectId}:{occurredAt}
    *   enterprise_license_issued:{enterpriseLicenseId}
    *
-   * Three of these are naturally unique — a user signs up once, a booking has
-   * one uid, a licence row is issued once — so Cal retrying a delivery or the
-   * queue retrying a job cannot produce a second conversion. A plan change can
+   * Three of these are naturally unique — a user signs up once, a project has
+   * one first subscription, a licence row is issued once — so the queue
+   * retrying a job cannot produce a second conversion. A plan change can
    * legitimately recur for one project, so its id carries the instant it
    * happened.
    */

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -63,6 +63,19 @@ export interface ComponentProps {
    * buckets calls back with the [start, end) of the selected time range.
    */
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  // Plain click on a bucket — see ChartLibrary onBucketClick.
+  onBucketClick?:
+    | ((
+        bucketStart: Date,
+        bucketEnd: Date,
+        valuesAtBucket: Record<string, number | string>,
+      ) => void)
+    | undefined;
+  /*
+   * Series rendered as compare-to-previous-period ghosts (dashed, faded,
+   * dotless). Names must exist in `data`.
+   */
+  ghostSeriesNames?: Array<string> | undefined;
   showLegend?: boolean | undefined;
   /**
    * Render a shaded "expected range" band underneath the plotted lines.
@@ -181,7 +194,14 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
 
   return (
     <div
-      className="relative flex flex-1"
+      /*
+       * `isolate` opens a stacking context so the recharts tooltip's
+       * z-index competes only inside this chart — without it the tooltip
+       * (zIndex 10, pinned to the chart's top edge) ties with the app
+       * header's sticky z-10 in the root context and paints over the
+       * navbar on half-scrolled charts.
+       */
+      className="relative isolate flex flex-1"
       style={props.heightInPx ? { height: `${props.heightInPx}px` } : undefined}
     >
       <AreaChart
@@ -221,6 +241,8 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         }
         onExemplarClick={props.onExemplarClick}
         onTimeRangeSelect={props.onTimeRangeSelect}
+        onBucketClick={props.onBucketClick}
+        ghostCategories={props.ghostSeriesNames}
         anomalyBandLowerKey={bandLower}
         anomalyBandUpperKey={bandUpper}
       />

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -115,7 +115,14 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
 
   return (
     <div
-      className="relative flex flex-1"
+      /*
+       * `isolate` opens a stacking context so the recharts tooltip's
+       * z-index competes only inside this chart — without it the tooltip
+       * (zIndex 10, pinned to the chart's top edge) ties with the app
+       * header's sticky z-10 in the root context and paints over the
+       * navbar on half-scrolled charts.
+       */
+      className="relative isolate flex flex-1"
       style={props.heightInPx ? { height: `${props.heightInPx}px` } : undefined}
     >
       <BarChart

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -57,12 +57,27 @@ export interface ComponentProps {
   charts: Array<Chart>;
   hideCard?: boolean | undefined;
   chartCssClass?: string | undefined;
+  /**
+   * Share one crosshair-sync channel across SEVERAL ChartGroup instances
+   * (e.g. every metric widget on one dashboard passes the dashboard id,
+   * so hovering an instant on one widget highlights it on all of them).
+   * Absent → this group syncs only within itself.
+   */
+  syncId?: string | undefined;
 }
 
 const ChartGroup: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const syncId: string = Text.generateRandomText(10);
+  /*
+   * Stable per-mount fallback: a plain const regenerated the id on every
+   * render, which forced recharts to tear down and re-subscribe its sync
+   * listeners on each parent re-render (auto-refresh ticks included).
+   */
+  const [fallbackSyncId] = useState<string>(() => {
+    return Text.generateRandomText(10);
+  });
+  const syncId: string = props.syncId || fallbackSyncId;
   const [metricInfoModalChart, setMetricInfoModalChart] =
     useState<ChartMetricInfo | null>(null);
 

package/UI/Components/Charts/ChartLibrary/AreaChart/AreaChart.tsx

@@ -39,6 +39,10 @@ import {
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
+import {
+  PreparedTooltipEntries,
+  prepareTooltipEntries,
+} from "../Utils/TooltipEntries";
 import ChartCurve from "../../Types/ChartCurve";
 
 /*
@@ -50,6 +54,24 @@ import ChartCurve from "../../Types/ChartCurve";
  */
 const MAX_LABELED_TIME_REFERENCE_LINES: number = 6;
 
+/*
+ * recharts invokes child event handlers with varying shapes ((event) for
+ * plain SVG passthrough, (data, event) for adapted children) — find the
+ * DOM event wherever it is so propagation can be stopped reliably.
+ */
+function stopChartEventPropagation(...args: Array<unknown>): void {
+  for (const candidate of args) {
+    if (
+      candidate &&
+      typeof (candidate as { stopPropagation?: unknown }).stopPropagation ===
+        "function"
+    ) {
+      (candidate as { stopPropagation: () => void }).stopPropagation();
+      return;
+    }
+  }
+}
+
 //#region Legend
 
 interface LegendItemProps {
@@ -475,9 +497,15 @@ const ChartTooltip: ({
   valueFormatter,
 }: ChartTooltipProps): React.JSX.Element | null => {
   if (active && payload && payload.length) {
-    const legendPayload: PayloadItem[] = payload.filter((item: PayloadItem) => {
-      return item.type !== "none";
-    });
+    /*
+     * Highest value at the hovered timestamp first, capped — on a grouped
+     * chart (one series per host/pod), the spiking series must be the
+     * first line of the tooltip, not buried at its alphabetical position.
+     */
+    const {
+      entries: legendPayload,
+      overflowCount,
+    }: PreparedTooltipEntries<PayloadItem> = prepareTooltipEntries(payload);
     return (
       <div
         className={cx(
@@ -531,6 +559,11 @@ const ChartTooltip: ({
               );
             },
           )}
+          {overflowCount > 0 ? (
+            <p className={cx("pt-1 text-xs", "text-gray-400")}>
+              +{overflowCount} more series — highest values shown
+            </p>
+          ) : null}
         </div>
       </div>
     );
@@ -598,6 +631,26 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Plain click on a time bucket (the plot background — dot/legend clicks
+   * and drag-selections never reach this). [bucketStart, bucketEnd) uses
+   * the same adjacent-row width derivation as drag-to-select. Fires only
+   * when no toggle-selection is active: a click that clears an active
+   * legend/dot selection keeps its existing meaning.
+   */
+  onBucketClick?:
+    | ((
+        bucketStart: Date,
+        bucketEnd: Date,
+        // The clicked row: one numeric entry per series + the axis keys.
+        valuesAtBucket: Record<string, number | string>,
+      ) => void)
+    | undefined;
+  /**
+   * Categories rendered as compare-to-previous-period ghosts: dashed,
+   * faded, no fill, no dots — context, not data.
+   */
+  ghostCategories?: Array<string> | undefined;
   /**
    * Render a shaded "expected range" band underneath the data lines.
    * Both keys must already be present on every entry of `data` (the
@@ -646,6 +699,8 @@ const AreaChart: React.ForwardRefExoticComponent<
       formattedTimeReferenceLines,
       formattedReferenceRegions,
       onTimeRangeSelect,
+      onBucketClick,
+      ghostCategories,
       ...other
     } = props;
     const CustomTooltip: React.ComponentType<TooltipProps> | undefined =
@@ -913,7 +968,12 @@ const AreaChart: React.ForwardRefExoticComponent<
         <ResponsiveContainer>
           <RechartsAreaChart
             data={data}
-            syncId={props.syncid?.toString() || ""}
+            /*
+             * Omitted, not "": recharts treats "" as a real sync
+             * channel, so every unsynced chart page-wide would
+             * accidentally sync with every other one.
+             */
+            {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
             {...(hasOnTimeRangeSelect
               ? {
                   onMouseDown: handleRangeSelectMouseDown,
@@ -921,19 +981,51 @@ const AreaChart: React.ForwardRefExoticComponent<
                   onMouseUp: handleRangeSelectMouseUp,
                 }
               : {})}
-            onClick={
-              hasOnValueChange && (activeLegend || activeDot)
-                ? () => {
-                    // Ignore the click that follows a drag-to-select.
-                    if (suppressNextClickRef.current) {
-                      return;
-                    }
-                    setActiveDot(undefined);
-                    setActiveLegend(undefined);
-                    onValueChange?.(null);
-                  }
-                : () => {}
-            }
+            onClick={(chartState: RangeSelectionChartState) => {
+              // Ignore the click that follows a drag-to-select.
+              if (suppressNextClickRef.current) {
+                return;
+              }
+              /*
+               * A click while a legend/dot selection is active keeps its
+               * long-standing meaning — clear the selection — and never
+               * also pins a bucket.
+               */
+              if (hasOnValueChange && (activeLegend || activeDot)) {
+                setActiveDot(undefined);
+                setActiveLegend(undefined);
+                onValueChange?.(null);
+                return;
+              }
+              if (!onBucketClick) {
+                return;
+              }
+              const rowIndex: number | null =
+                getRowIndexFromChartState(chartState);
+              if (rowIndex === null) {
+                return;
+              }
+              const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
+              if (!bucketStart) {
+                return;
+              }
+              /*
+               * Cover the full bucket: width from adjacent row dates, the
+               * same derivation drag-to-select uses.
+               */
+              const adjacentDate: Date | null =
+                rowIndex > 0
+                  ? getBucketDateAtIndex(rowIndex - 1)
+                  : getBucketDateAtIndex(rowIndex + 1);
+              const bucketWidthInMs: number = adjacentDate
+                ? Math.abs(bucketStart.getTime() - adjacentDate.getTime())
+                : 0;
+              onBucketClick(
+                bucketStart,
+                new Date(bucketStart.getTime() + bucketWidthInMs),
+                (data[rowIndex] || {}) as Record<string, number | string>,
+              );
+            }}
             margin={{
               bottom: (xAxisLabel
                 ? 40
@@ -1158,6 +1250,8 @@ const AreaChart: React.ForwardRefExoticComponent<
               ) as ChartColorValue;
               const hex: string = getColorHex(colorKey);
               const isCustomColor: boolean = isHexColorValue(colorKey);
+              const isGhost: boolean =
+                ghostCategories?.includes(category) || false;
 
               return (
                 <Area
@@ -1166,92 +1260,103 @@ const AreaChart: React.ForwardRefExoticComponent<
                   type={props.curve || ChartCurve.MONOTONE}
                   dataKey={category}
                   stroke={hex}
-                  strokeWidth={2}
+                  strokeWidth={isGhost ? 1.5 : 2}
                   strokeLinejoin="round"
                   strokeLinecap="round"
                   fill={`url(#${gradientId})`}
-                  fillOpacity={1}
+                  fillOpacity={isGhost ? 0 : 1}
                   strokeOpacity={
-                    activeDot || (activeLegend && activeLegend !== category)
+                    (activeDot || (activeLegend && activeLegend !== category)
                       ? 0.3
-                      : 1
+                      : 1) * (isGhost ? 0.45 : 1)
                   }
                   isAnimationActive={false}
                   connectNulls={connectNulls}
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  activeDot={(dotProps: any) => {
-                    const {
-                      cx: cxCoord,
-                      cy: cyCoord,
-                      stroke,
-                      strokeLinecap: slc,
-                      strokeLinejoin: slj,
-                      strokeWidth,
-                    } = dotProps;
-                    return (
-                      <Dot
-                        className={cx(
-                          "stroke-white",
-                          onValueChange ? "cursor-pointer" : "",
-                          getColorClassName(colorKey, "fill"),
-                        )}
-                        cx={cxCoord}
-                        cy={cyCoord}
-                        r={5}
-                        fill={isCustomColor ? hex : ""}
-                        stroke={stroke}
-                        strokeLinecap={slc}
-                        strokeLinejoin={slj}
-                        strokeWidth={strokeWidth}
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        onClick={(_: any, event: any) => {
-                          return onDotClick(dotProps, event);
-                        }}
-                      />
-                    );
-                  }}
+                  activeDot={
+                    isGhost
+                      ? false
+                      : (dotProps: any) => {
+                          const {
+                            cx: cxCoord,
+                            cy: cyCoord,
+                            stroke,
+                            strokeLinecap: slc,
+                            strokeLinejoin: slj,
+                            strokeWidth,
+                          } = dotProps;
+                          return (
+                            <Dot
+                              className={cx(
+                                "stroke-white",
+                                onValueChange ? "cursor-pointer" : "",
+                                getColorClassName(colorKey, "fill"),
+                              )}
+                              cx={cxCoord}
+                              cy={cyCoord}
+                              r={5}
+                              fill={isCustomColor ? hex : ""}
+                              stroke={stroke}
+                              strokeLinecap={slc}
+                              strokeLinejoin={slj}
+                              strokeWidth={strokeWidth}
+                              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                              onClick={(_: any, event: any) => {
+                                return onDotClick(dotProps, event);
+                              }}
+                            />
+                          );
+                        }
+                  }
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  dot={(dotProps: any) => {
-                    const {
-                      stroke,
-                      strokeLinecap: slc,
-                      strokeLinejoin: slj,
-                      strokeWidth,
-                      cx: cxCoord,
-                      cy: cyCoord,
-                      index: dotIndex,
-                    } = dotProps;
-
-                    if (
-                      (hasOnlyOneValueForKey(data, category) &&
-                        !(
-                          activeDot ||
-                          (activeLegend && activeLegend !== category)
-                        )) ||
-                      (activeDot?.index === dotIndex &&
-                        activeDot?.dataKey === category)
-                    ) {
-                      return (
-                        <Dot
-                          key={dotIndex}
-                          cx={cxCoord}
-                          cy={cyCoord}
-                          r={5}
-                          stroke={stroke}
-                          fill={isCustomColor ? hex : ""}
-                          strokeLinecap={slc}
-                          strokeLinejoin={slj}
-                          strokeWidth={strokeWidth}
-                          className={cx(
-                            "stroke-white",
-                            onValueChange ? "cursor-pointer" : "",
-                            getColorClassName(colorKey, "fill"),
-                          )}
-                        />
-                      );
-                    }
-                    return <React.Fragment key={dotIndex}></React.Fragment>;
-                  }}
+                  dot={
+                    isGhost
+                      ? false
+                      : (dotProps: any) => {
+                          const {
+                            stroke,
+                            strokeLinecap: slc,
+                            strokeLinejoin: slj,
+                            strokeWidth,
+                            cx: cxCoord,
+                            cy: cyCoord,
+                            index: dotIndex,
+                          } = dotProps;
+
+                          if (
+                            (hasOnlyOneValueForKey(data, category) &&
+                              !(
+                                activeDot ||
+                                (activeLegend && activeLegend !== category)
+                              )) ||
+                            (activeDot?.index === dotIndex &&
+                              activeDot?.dataKey === category)
+                          ) {
+                            return (
+                              <Dot
+                                key={dotIndex}
+                                cx={cxCoord}
+                                cy={cyCoord}
+                                r={5}
+                                stroke={stroke}
+                                fill={isCustomColor ? hex : ""}
+                                strokeLinecap={slc}
+                                strokeLinejoin={slj}
+                                strokeWidth={strokeWidth}
+                                className={cx(
+                                  "stroke-white",
+                                  onValueChange ? "cursor-pointer" : "",
+                                  getColorClassName(colorKey, "fill"),
+                                )}
+                              />
+                            );
+                          }
+                          return (
+                            <React.Fragment key={dotIndex}></React.Fragment>
+                          );
+                        }
+                  }
+                  {...(isGhost ? { strokeDasharray: "6 4" } : {})}
                 />
               );
             })}
@@ -1295,7 +1400,9 @@ const AreaChart: React.ForwardRefExoticComponent<
                     {...(region.original.onClick
                       ? {
                           style: { cursor: "pointer" as const },
-                          onClick: (): void => {
+                          onClick: (...args: Array<unknown>): void => {
+                            // Never let an annotation click also pin a bucket.
+                            stopChartEventPropagation(...args);
                             if (suppressNextClickRef.current) {
                               return;
                             }
@@ -1337,7 +1444,9 @@ const AreaChart: React.ForwardRefExoticComponent<
                     {...(timeRefLine.original.onClick
                       ? {
                           style: { cursor: "pointer" as const },
-                          onClick: (): void => {
+                          onClick: (...args: Array<unknown>): void => {
+                            // Never let an annotation click also pin a bucket.
+                            stopChartEventPropagation(...args);
                             if (suppressNextClickRef.current) {
                               return;
                             }
@@ -1383,7 +1492,9 @@ const AreaChart: React.ForwardRefExoticComponent<
                     stroke="var(--ou-chart-marker-ring, #ffffff)"
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
-                    onClick={() => {
+                    onClick={(...args: Array<unknown>) => {
+                      // Never let an exemplar click also pin a bucket.
+                      stopChartEventPropagation(...args);
                       // Ignore the click that follows a drag-to-select.
                       if (suppressNextClickRef.current) {
                         return;
@@ -1426,4 +1537,4 @@ const AreaChart: React.ForwardRefExoticComponent<
 
 AreaChart.displayName = "AreaChart";
 
-export { AreaChart, type AreaChartEventProps, type TooltipProps };
+export { AreaChart, ChartTooltip, type AreaChartEventProps, type TooltipProps };

package/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx

@@ -33,6 +33,10 @@ import {
 } from "../Utils/ChartColors";
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
+import {
+  PreparedTooltipEntries,
+  prepareTooltipEntries,
+} from "../Utils/TooltipEntries";
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
 
 /*
@@ -562,6 +566,15 @@ const ChartTooltip: React.FunctionComponent<ChartTooltipProps> = ({
   valueFormatter,
 }: ChartTooltipProps): React.ReactElement | null => {
   if (active && payload && payload.length) {
+    /*
+     * Highest value at the hovered bucket first, capped — on a grouped
+     * chart (one series per host/pod), the spiking series must be the
+     * first line of the tooltip, not buried at its alphabetical position.
+     */
+    const {
+      entries: sortedPayload,
+      overflowCount,
+    }: PreparedTooltipEntries<PayloadItem> = prepareTooltipEntries(payload);
     return (
       <div
         className={cx(
@@ -586,7 +599,7 @@ const ChartTooltip: React.FunctionComponent<ChartTooltipProps> = ({
           </p>
         </div>
         <div className={cx("space-y-1 px-4 py-2")}>
-          {payload.map(
+          {sortedPayload.map(
             ({ value, category, color }: PayloadItem, index: number) => {
               return (
                 <div
@@ -631,6 +644,11 @@ const ChartTooltip: React.FunctionComponent<ChartTooltipProps> = ({
               );
             },
           )}
+          {overflowCount > 0 ? (
+            <p className={cx("pt-1 text-xs", "text-gray-400")}>
+              +{overflowCount} more series — highest values shown
+            </p>
+          ) : null}
         </div>
       </div>
     );
@@ -825,7 +843,12 @@ const BarChart: React.ForwardRefExoticComponent<
         <ResponsiveContainer>
           <RechartsBarChart
             data={data}
-            syncId={props.syncid?.toString() || ""}
+            /*
+             * Omitted, not "": recharts treats "" as a real sync
+             * channel, so every unsynced chart page-wide would
+             * accidentally sync with every other one.
+             */
+            {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
             {...(hasOnValueChange && (activeLegend || activeBar)
               ? {
                   onClick: handleChartClick,
@@ -1194,4 +1217,4 @@ const BarChart: React.ForwardRefExoticComponent<
 
 BarChart.displayName = "BarChart";
 
-export { BarChart, type BarChartEventProps, type TooltipProps };
+export { BarChart, ChartTooltip, type BarChartEventProps, type TooltipProps };