@oneuptime/common 11.5.0 → 11.5.2

package/Types/BaseDatabase/AggregateBy.ts

@@ -1,5 +1,6 @@
 import GroupBy from "../../Server/Types/Database/GroupBy";
 import GenericObject from "../GenericObject";
+import AggregationInterval from "./AggregationInterval";
 import AggregationType from "./AggregationType";
 import Query from "./Query";
 import Sort from "./Sort";
@@ -7,7 +8,16 @@ import Sort from "./Sort";
 export default interface AggregateBy<TBaseModel extends GenericObject> {
   aggregateColumnName: keyof TBaseModel;
   aggregationType: AggregationType;
-  // aggregationInterval?: AggregationInterval;
+  /**
+   * Optional explicit time-bucket size. When omitted (the default), the
+   * bucket size is derived from the query window (≤3h → minute, ≤7d →
+   * hour, ≤6w → day, …) — see AggregationIntervalUtil. Set this to pin a
+   * granularity independent of the window (e.g. `Day` buckets over a
+   * one-week window), or to `Total` to aggregate the whole window into a
+   * single value per group (no time bucketing). Invalid values are
+   * rejected with a 400 in AnalyticsDatabaseService.aggregateBy.
+   */
+  aggregationInterval?: AggregationInterval | undefined;
   aggregationTimestampColumnName: keyof TBaseModel;
   startTimestamp: Date;
   endTimestamp: Date;

package/Types/BaseDatabase/AggregationInterval.ts

@@ -5,6 +5,16 @@ export enum AggregationInterval {
   Week = "Week",
   Month = "Month",
   Year = "Year",
+  /**
+   * No time bucketing: collapse the entire [startTimestamp, endTimestamp]
+   * window into a single aggregate per group (one total value over the
+   * whole range). Only meaningful as an explicit
+   * `AggregateBy.aggregationInterval` override — the window-derived
+   * interval picker never returns it. Builders emit one row per group with
+   * the earliest sample timestamp in the window as the bucket label (see
+   * AggregateUtil.buildBucketTimestampSelect).
+   */
+  Total = "Total",
 }
 
 export default AggregationInterval;

package/Types/BaseDatabase/AggregationIntervalUtil.ts

@@ -16,7 +16,21 @@ export class AggregationIntervalUtil {
   public static getAggregationIntervalForWindow(data: {
     startDate: Date;
     endDate: Date;
+    /**
+     * Explicit override. When set to a valid AggregationInterval it is
+     * returned verbatim (including `Total`), so callers can pin a bucket
+     * size independent of the window. Unknown/undefined falls through to
+     * the window-derived interval below.
+     */
+    aggregationInterval?: AggregationInterval | undefined;
   }): AggregationInterval {
+    if (
+      data.aggregationInterval &&
+      Object.values(AggregationInterval).includes(data.aggregationInterval)
+    ) {
+      return data.aggregationInterval;
+    }
+
     const startDate: Date = OneUptimeDate.fromString(data.startDate);
     const endDate: Date = OneUptimeDate.fromString(data.endDate);
 
@@ -65,6 +79,15 @@ export class AggregationIntervalUtil {
         return 1000 * 60 * 60 * 24 * 30;
       case AggregationInterval.Year:
         return 1000 * 60 * 60 * 24 * 365;
+      case AggregationInterval.Total:
+        /*
+         * `Total` is a single whole-window bucket with no fixed width. The
+         * window-derived picker never returns it, so grid-reconstruction
+         * callers (heartbeat charts, XAxis) never see it. Return a very
+         * large finite width (~1000 years) so any defensive fixed-step
+         * grid walk emits a single slot instead of looping forever.
+         */
+        return 1000 * 60 * 60 * 24 * 365 * 1000;
       default:
         return 1000 * 60;
     }

package/Types/Metrics/MetricFormulaConfigData.ts

@@ -8,4 +8,9 @@ export default interface MetricFormulaConfigData {
   chartType?: MetricChartType | undefined;
   warningThreshold?: number | undefined;
   criticalThreshold?: number | undefined;
+  /*
+   * Optional user-chosen color for the formula's series, stored as a hex
+   * string (e.g. "#6366f1"). Unset = auto-assigned from the chart palette.
+   */
+  color?: string | undefined;
 }

package/Types/Metrics/MetricQueryConfigData.ts

@@ -31,6 +31,25 @@ export default interface MetricQueryConfigData {
     | undefined;
   warningThreshold?: number | undefined;
   criticalThreshold?: number | undefined;
+  /*
+   * Optional user-chosen color for this query's series. Stored as a hex
+   * string (e.g. "#6366f1") — the preset swatches write their palette hex
+   * and the custom picker writes an arbitrary hex. When set, it becomes the
+   * lead color for this query's chart (single-series → the series color;
+   * grouped multi-series → the first series, with the default palette filling
+   * the rest). Unset = auto-assigned from the chart-type palette.
+   */
+  color?: string | undefined;
+  /*
+   * Per-group color pins for GROUP-BY queries. Keyed by the individual
+   * "key=value" segment that MetricCharts' series renderer emits for a
+   * grouped series — e.g. { "service.name=api": "#f59e0b" }. Use "(unset)"
+   * as the value for null/empty groups to match the series name. A series
+   * whose composed name contains a pinned segment renders in that color
+   * (first matching segment wins for multi-key group-bys); unpinned series
+   * fall back to `color` (lead) then the chart-type palette. Stored as hex.
+   */
+  colorsByGroup?: Record<string, string> | undefined;
   /*
    * When true, the post-aggregation series points are transformed into
    * a per-second rate of change: `(value - previousValue) / Δt`. This is

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

@@ -1,5 +1,8 @@
 import { AreaChart } from "../ChartLibrary/AreaChart/AreaChart";
-import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
+import {
+  AvailableChartColorsKeys,
+  ChartColorValue,
+} from "../ChartLibrary/Utils/ChartColors";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -51,6 +54,12 @@ export interface ComponentProps {
    */
   anomalyBandLowerSeriesName?: string | undefined;
   anomalyBandUpperSeriesName?: string | undefined;
+  /*
+   * Optional per-series color override (named palette keys or hex strings).
+   * When provided, replaces the default AreaChartPalette. Indexed by series
+   * position (index % length).
+   */
+  colors?: Array<ChartColorValue> | undefined;
 }
 
 export interface AreaInternalProps extends ComponentProps {
@@ -138,7 +147,11 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         tickGap={30}
         index={"Time"}
         categories={categories}
-        colors={AreaChartPalette}
+        colors={
+          props.colors && props.colors.length > 0
+            ? props.colors
+            : AreaChartPalette
+        }
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
         showLegend={props.showLegend !== false}

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

@@ -1,5 +1,8 @@
 import { BarChart } from "../ChartLibrary/BarChart/BarChart";
-import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
+import {
+  AvailableChartColorsKeys,
+  ChartColorValue,
+} from "../ChartLibrary/Utils/ChartColors";
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
@@ -29,6 +32,13 @@ export interface ComponentProps {
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
   showLegend?: boolean | undefined;
+  /*
+   * Optional per-series color override. Each entry may be a named palette key
+   * or a raw hex string. When provided (and non-empty), it replaces the
+   * default BarChartPalette so callers can assign custom colors; the array is
+   * indexed by series position (index % length), matching the default palette.
+   */
+  colors?: Array<ChartColorValue> | undefined;
 }
 
 export interface BarInternalProps extends ComponentProps {
@@ -71,7 +81,11 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         tickGap={30}
         index={"Time"}
         categories={categories}
-        colors={BarChartPalette}
+        colors={
+          props.colors && props.colors.length > 0
+            ? props.colors
+            : BarChartPalette
+        }
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
         showLegend={props.showLegend !== false}

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

@@ -26,10 +26,11 @@ import { AxisDomain } from "recharts/types/util/types";
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
 import {
   AvailableChartColors,
-  AvailableChartColorsKeys,
+  ChartColorValue,
   constructCategoryColors,
   getColorClassName,
   getColorHex,
+  isHexColorValue,
 } from "../Utils/ChartColors";
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
@@ -40,8 +41,8 @@ import ChartCurve from "../../Types/ChartCurve";
 
 interface LegendItemProps {
   name: string;
-  color: AvailableChartColorsKeys;
-  onClick?: (name: string, color: AvailableChartColorsKeys) => void;
+  color: ChartColorValue;
+  onClick?: (name: string, color: ChartColorValue) => void;
   activeLegend?: string;
 }
 
@@ -76,6 +77,11 @@ const LegendItem: ({
           getColorClassName(color, "bg"),
           activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
         )}
+        style={
+          isHexColorValue(color)
+            ? { backgroundColor: getColorHex(color) }
+            : undefined
+        }
         aria-hidden={true}
       />
       <p
@@ -163,7 +169,7 @@ const ScrollButton: ({
 
 interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   onClickLegendItem?: (category: string, color: string) => void;
   activeLegend?: string;
   enableLegendSlider?: boolean;
@@ -307,7 +313,7 @@ const Legend: React.ForwardRefExoticComponent<
               <LegendItem
                 key={`item-${index}`}
                 name={category}
-                color={colors[index] as AvailableChartColorsKeys}
+                color={colors[index] as ChartColorValue}
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 onClick={onClickLegendItem as any}
                 activeLegend={activeLegend!}
@@ -356,7 +362,7 @@ type PayloadItem = {
   category: string;
   value: number;
   index: string;
-  color: AvailableChartColorsKeys;
+  color: ChartColorValue;
   type?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload: any;
@@ -366,7 +372,7 @@ type PayloadItem = {
 const ChartLegend: (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -376,7 +382,7 @@ const ChartLegend: (
 ) => React.JSX.Element = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -485,6 +491,11 @@ const ChartTooltip: ({
                         "h-[3px] w-3.5 shrink-0 rounded-full",
                         getColorClassName(color, "bg"),
                       )}
+                      style={
+                        isHexColorValue(color)
+                          ? { backgroundColor: getColorHex(color) }
+                          : undefined
+                      }
                     />
                     <p
                       className={cx(
@@ -534,7 +545,7 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>[];
   index: string;
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   valueFormatter?: (value: number) => string;
   startEndOnly?: boolean;
   showXAxis?: boolean;
@@ -620,7 +631,7 @@ const AreaChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
-    const categoryColors: Map<string, string | number> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
     const yAxisDomain: (number | "auto")[] = getYAxisDomain(
@@ -716,9 +727,8 @@ const AreaChart: React.ForwardRefExoticComponent<
           >
             <defs>
               {categories.map((category: string, i: number) => {
-                const colorKey: AvailableChartColorsKeys =
-                  (colors[i % colors.length] as AvailableChartColorsKeys) ||
-                  "blue";
+                const colorKey: ChartColorValue =
+                  (colors[i % colors.length] as ChartColorValue) || "blue";
                 const hex: string = getColorHex(colorKey);
                 return (
                   <linearGradient
@@ -833,7 +843,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                         index: item.payload[index],
                         color: categoryColors.get(
                           item.dataKey,
-                        ) as AvailableChartColorsKeys,
+                        ) as ChartColorValue,
                         type: item.type,
                         payload: item.payload,
                       };
@@ -921,10 +931,11 @@ const AreaChart: React.ForwardRefExoticComponent<
             ) : null}
             {categories.map((category: string) => {
               const gradientId: string = `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`;
-              const colorKey: AvailableChartColorsKeys = categoryColors.get(
+              const colorKey: ChartColorValue = categoryColors.get(
                 category,
-              ) as AvailableChartColorsKeys;
+              ) as ChartColorValue;
               const hex: string = getColorHex(colorKey);
+              const isCustomColor: boolean = isHexColorValue(colorKey);
 
               return (
                 <Area
@@ -954,24 +965,18 @@ const AreaChart: React.ForwardRefExoticComponent<
                       strokeLinecap: slc,
                       strokeLinejoin: slj,
                       strokeWidth,
-                      dataKey,
                     } = dotProps;
                     return (
                       <Dot
                         className={cx(
                           "stroke-white",
                           onValueChange ? "cursor-pointer" : "",
-                          getColorClassName(
-                            categoryColors.get(
-                              dataKey,
-                            ) as AvailableChartColorsKeys,
-                            "fill",
-                          ),
+                          getColorClassName(colorKey, "fill"),
                         )}
                         cx={cxCoord}
                         cy={cyCoord}
                         r={5}
-                        fill=""
+                        fill={isCustomColor ? hex : ""}
                         stroke={stroke}
                         strokeLinecap={slc}
                         strokeLinejoin={slj}
@@ -992,7 +997,6 @@ const AreaChart: React.ForwardRefExoticComponent<
                       strokeWidth,
                       cx: cxCoord,
                       cy: cyCoord,
-                      dataKey,
                       index: dotIndex,
                     } = dotProps;
 
@@ -1012,19 +1016,14 @@ const AreaChart: React.ForwardRefExoticComponent<
                           cy={cyCoord}
                           r={5}
                           stroke={stroke}
-                          fill=""
+                          fill={isCustomColor ? hex : ""}
                           strokeLinecap={slc}
                           strokeLinejoin={slj}
                           strokeWidth={strokeWidth}
                           className={cx(
                             "stroke-white",
                             onValueChange ? "cursor-pointer" : "",
-                            getColorClassName(
-                              categoryColors.get(
-                                dataKey,
-                              ) as AvailableChartColorsKeys,
-                              "fill",
-                            ),
+                            getColorClassName(colorKey, "fill"),
                           )}
                         />
                       );

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

@@ -22,9 +22,11 @@ import type { AxisDomain } from "recharts/types/util/types";
 
 import {
   AvailableChartColors,
-  type AvailableChartColorsKeys,
+  type ChartColorValue,
   constructCategoryColors,
   getColorClassName,
+  getColorHex,
+  isHexColorValue,
 } from "../Utils/ChartColors";
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
@@ -73,7 +75,7 @@ const renderShape: (
   activeLegend: string | undefined,
   layout: string,
 ): React.ReactElement => {
-  const { fillOpacity, name, payload, value } = props;
+  const { fillOpacity, name, payload, value, fill } = props;
   let { x, width, y, height } = props;
 
   if (layout === "horizontal" && height < 0) {
@@ -120,6 +122,12 @@ const renderShape: (
   return (
     <path
       d={path}
+      /*
+       * A custom hex color is passed through as the Bar's `fill` prop; apply
+       * it directly on the path. For named palette colors `fill` is "" and the
+       * path inherits the Tailwind `fill-*` class set on the parent Bar.
+       */
+      {...(fill ? { fill } : {})}
       opacity={
         activeBar || (activeLegend && activeLegend !== name)
           ? deepEqual(activeBar, { ...payload, value })
@@ -135,7 +143,7 @@ const renderShape: (
 
 interface LegendItemProps {
   name: string;
-  color: AvailableChartColorsKeys;
+  color: ChartColorValue;
   onClick?: (name: string, color: string) => void;
   activeLegend?: string;
 }
@@ -167,6 +175,11 @@ const LegendItem: React.FunctionComponent<LegendItemProps> = ({
           getColorClassName(color, "bg"),
           activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
         )}
+        style={
+          isHexColorValue(color)
+            ? { backgroundColor: getColorHex(color) }
+            : undefined
+        }
         aria-hidden={true}
       />
       <p
@@ -252,7 +265,7 @@ const ScrollButton: React.FunctionComponent<ScrollButtonProps> = ({
 
 interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   onClickLegendItem?: (category: string, color: string) => void;
   activeLegend?: string;
   enableLegendSlider?: boolean;
@@ -398,7 +411,7 @@ const Legend: React.ForwardRefExoticComponent<
               <LegendItem
                 key={`item-${index}`}
                 name={category}
-                color={colors[index] as AvailableChartColorsKeys}
+                color={colors[index] as ChartColorValue}
                 {...(onClickLegendItem ? { onClick: onClickLegendItem } : {})}
                 {...(activeLegend ? { activeLegend: activeLegend } : {})}
               />
@@ -443,7 +456,7 @@ Legend.displayName = "Legend";
 
 const ChartLegend: (
   payload: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -452,7 +465,7 @@ const ChartLegend: (
   yAxisWidth?: number,
 ) => React.ReactElement = (
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -497,7 +510,7 @@ const ChartLegend: (
           return entry.value;
         })}
         colors={filteredPayload.map((entry: any) => {
-          return categoryColors.get(entry.value) as AvailableChartColorsKeys;
+          return categoryColors.get(entry.value) as ChartColorValue;
         })}
         {...(onClick ? { onClickLegendItem: onClick } : {})}
         {...(activeLegend ? { activeLegend: activeLegend } : {})}
@@ -518,7 +531,7 @@ type PayloadItem = {
   category: string; // eslint-disable-line react/no-unused-prop-types
   value: number; // eslint-disable-line react/no-unused-prop-types
   index: string; // eslint-disable-line react/no-unused-prop-types
-  color: AvailableChartColorsKeys; // eslint-disable-line react/no-unused-prop-types
+  color: ChartColorValue; // eslint-disable-line react/no-unused-prop-types
   type?: string; // eslint-disable-line react/no-unused-prop-types
   payload: any;
 };
@@ -575,6 +588,11 @@ const ChartTooltip: React.FunctionComponent<ChartTooltipProps> = ({
                         "size-2 shrink-0 rounded-xs",
                         getColorClassName(color, "bg"),
                       )}
+                      style={
+                        isHexColorValue(color)
+                          ? { backgroundColor: getColorHex(color) }
+                          : undefined
+                      }
                     />
                     <p
                       className={cx(
@@ -622,7 +640,7 @@ interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>[];
   index: string;
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   valueFormatter?: (value: number) => string;
   startEndOnly?: boolean;
   showXAxis?: boolean;
@@ -699,7 +717,7 @@ const BarChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
     const [activeBar, setActiveBar] = React.useState<any | undefined>(
       undefined,
@@ -942,7 +960,7 @@ const BarChart: React.ForwardRefExoticComponent<
                         index: item.payload[index],
                         color: categoryColors.get(
                           item.dataKey,
-                        ) as AvailableChartColorsKeys,
+                        ) as ChartColorValue,
                         type: item.type,
                         payload: item.payload,
                       };
@@ -1000,13 +1018,14 @@ const BarChart: React.ForwardRefExoticComponent<
               />
             ) : null}
             {categories.map((category: string) => {
+              const barColor: ChartColorValue = categoryColors.get(
+                category,
+              ) as ChartColorValue;
+              const isCustomColor: boolean = isHexColorValue(barColor);
               return (
                 <Bar
                   className={cx(
-                    getColorClassName(
-                      categoryColors.get(category) as AvailableChartColorsKeys,
-                      "fill",
-                    ),
+                    getColorClassName(barColor, "fill"),
                     onValueChange ? "cursor-pointer" : "",
                   )}
                   key={category}
@@ -1015,7 +1034,12 @@ const BarChart: React.ForwardRefExoticComponent<
                   dataKey={category}
                   {...(stacked ? { stackId: "stack" } : {})}
                   isAnimationActive={false}
-                  fill=""
+                  /*
+                   * Custom hex → apply the color inline (Tailwind has no class
+                   * for arbitrary user hex); named palette → keep "" so the
+                   * `fill-*` class on the Bar cascades to the shape path.
+                   */
+                  fill={isCustomColor ? getColorHex(barColor) : ""}
                   shape={shapeRenderer}
                   onClick={onBarClick}
                 />