@oneuptime/common 10.0.71 → 10.0.73

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

@@ -1,4 +1,5 @@
 import { AreaChart } from "../ChartLibrary/AreaChart/AreaChart";
+import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -17,6 +18,19 @@ import ExemplarPoint from "../Types/ExemplarPoint";
 import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
+export const AreaChartPalette: Array<AvailableChartColorsKeys> = [
+  "blue",
+  "emerald",
+  "violet",
+  "amber",
+  "cyan",
+  "pink",
+  "lime",
+  "fuchsia",
+  "indigo",
+  "rose",
+];
+
 export interface ComponentProps {
   data: Array<SeriesPoint>;
   xAxis: XAxis;
@@ -27,6 +41,7 @@ export interface ComponentProps {
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  showLegend?: boolean | undefined;
 }
 
 export interface AreaInternalProps extends ComponentProps {
@@ -93,20 +108,10 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         tickGap={1}
         index={"Time"}
         categories={categories}
-        colors={[
-          "blue",
-          "emerald",
-          "violet",
-          "amber",
-          "cyan",
-          "pink",
-          "lime",
-          "fuchsia",
-          "indigo",
-          "rose",
-        ]}
+        colors={AreaChartPalette}
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
+        showLegend={props.showLegend !== false}
         connectNulls={true}
         curve={props.curve || ChartCurve.MONOTONE}
         syncid={props.sync ? props.syncid : undefined}

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

@@ -1,4 +1,5 @@
 import { BarChart } from "../ChartLibrary/BarChart/BarChart";
+import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
@@ -8,6 +9,18 @@ import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
+export const BarChartPalette: Array<AvailableChartColorsKeys> = [
+  "indigo",
+  "rose",
+  "emerald",
+  "amber",
+  "cyan",
+  "gray",
+  "pink",
+  "lime",
+  "fuchsia",
+];
+
 export interface ComponentProps {
   data: Array<SeriesPoint>;
   xAxis: XAxis;
@@ -15,6 +28,7 @@ export interface ComponentProps {
   sync: boolean;
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  showLegend?: boolean | undefined;
 }
 
 export interface BarInternalProps extends ComponentProps {
@@ -61,19 +75,10 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         tickGap={1}
         index={"Time"}
         categories={categories}
-        colors={[
-          "indigo",
-          "rose",
-          "emerald",
-          "amber",
-          "cyan",
-          "gray",
-          "pink",
-          "lime",
-          "fuchsia",
-        ]}
+        colors={BarChartPalette}
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
+        showLegend={props.showLegend !== false}
         yAxisWidth={60}
         syncid={props.sync ? props.syncid : undefined}
         onValueChange={() => {}}

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

@@ -36,6 +36,13 @@ export interface Chart {
   metricInfo?: ChartMetricInfo | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  /**
+   * Optional control panel rendered between the chart title and the
+   * chart body. Used by per-series-grouped metric charts to surface a
+   * search box, per-series toggles, and a "show all" escape hatch so
+   * the chart stays usable at thousands of unique label combinations.
+   */
+  seriesControls?: ReactElement | undefined;
 }
 
 export interface ComponentProps {
@@ -58,6 +65,13 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     chart: Chart,
     index: number,
   ): ReactElement => {
+    /*
+     * When the chart has its own seriesControls panel, that panel doubles
+     * as a colored, interactive legend — so we suppress the built-in
+     * Recharts legend to avoid showing two legends for the same series.
+     */
+    const showLegend: boolean = !chart.seriesControls;
+
     switch (chart.type) {
       case ChartType.LINE:
         return (
@@ -68,6 +82,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             heightInPx={props.heightInPx}
             exemplarPoints={chart.exemplarPoints}
             onExemplarClick={chart.onExemplarClick}
+            showLegend={showLegend}
           />
         );
       case ChartType.BAR:
@@ -77,6 +92,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             {...(chart.props as BarChartProps)}
             syncid={syncId}
             heightInPx={props.heightInPx}
+            showLegend={showLegend}
           />
         );
       case ChartType.AREA:
@@ -88,6 +104,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
             heightInPx={props.heightInPx}
             exemplarPoints={chart.exemplarPoints}
             onExemplarClick={chart.onExemplarClick}
+            showLegend={showLegend}
           />
         );
       default:
@@ -239,6 +256,9 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                       </p>
                     )}
                   </div>
+                  {chart.seriesControls ? (
+                    <div className="mb-3">{chart.seriesControls}</div>
+                  ) : null}
                   {getChartContent(chart, index)}
                 </div>
               </div>
@@ -283,6 +303,9 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                   {chart.description}
                 </p>
               )}
+              {chart.seriesControls ? (
+                <div className="mt-3">{chart.seriesControls}</div>
+              ) : null}
               {getChartContent(chart, index)}
             </div>
           );

package/UI/Components/Charts/Line/LineChart.tsx

@@ -1,4 +1,5 @@
 import { LineChart } from "../ChartLibrary/LineChart/LineChart";
+import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -17,6 +18,18 @@ import ExemplarPoint from "../Types/ExemplarPoint";
 import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
+export const LineChartPalette: Array<AvailableChartColorsKeys> = [
+  "indigo",
+  "rose",
+  "emerald",
+  "amber",
+  "cyan",
+  "gray",
+  "pink",
+  "lime",
+  "fuchsia",
+];
+
 export interface ComponentProps {
   data: Array<SeriesPoint>;
   xAxis: XAxis;
@@ -27,6 +40,7 @@ export interface ComponentProps {
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  showLegend?: boolean | undefined;
 }
 
 export interface LineInternalProps extends ComponentProps {
@@ -93,19 +107,10 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         tickGap={1}
         index={"Time"}
         categories={categories}
-        colors={[
-          "indigo",
-          "rose",
-          "emerald",
-          "amber",
-          "cyan",
-          "gray",
-          "pink",
-          "lime",
-          "fuchsia",
-        ]}
+        colors={LineChartPalette}
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
+        showLegend={props.showLegend !== false}
         connectNulls={true}
         curve={props.curve}
         syncid={props.sync ? props.syncid : undefined}

package/UI/Components/Filters/FiltersForm.tsx

@@ -28,6 +28,22 @@ export interface ComponentProps<T extends GenericObject> {
     | undefined
     | ((showAdvancedFilters: boolean) => void);
   showAdvancedFiltersByDefault?: boolean | undefined;
+  /**
+   * Suppress the built-in "Show/Hide Advanced Filters" toggle
+   * button. Useful when the parent renders its own toggle further
+   * down the page (e.g. below other non-filter controls) and needs
+   * full layout control. Parent must drive visibility through
+   * `showAdvancedFilters` instead.
+   */
+  hideAdvancedFilterToggle?: boolean | undefined;
+  /**
+   * Controlled replacement for the internal toggle state. When
+   * provided, the form renders advanced filters based on this flag
+   * and calls `onAdvancedFiltersToggle` for changes but does not
+   * manage its own state. Pair with `hideAdvancedFilterToggle` when
+   * the parent owns the UI toggle.
+   */
+  showAdvancedFilters?: boolean | undefined;
 }
 
 type FiltersFormFunction = <T extends GenericObject>(
@@ -51,16 +67,24 @@ const FiltersForm: FiltersFormFunction = <T extends GenericObject>(
     }
   };
 
-  const showAdvancedFilterButton: boolean = Boolean(
+  const hasAdvancedFilter: boolean = Boolean(
     props.filters.find((filter: Filter<T>) => {
       return filter.isAdvancedFilter;
     }),
   );
 
-  const [showMoreFilters, setShowMoreFilters] = React.useState<boolean>(
+  const showAdvancedFilterButton: boolean =
+    hasAdvancedFilter && !props.hideAdvancedFilterToggle;
+
+  const [internalShowMoreFilters, setShowMoreFilters] = React.useState<boolean>(
     props.showAdvancedFiltersByDefault ?? false,
   );
 
+  const showMoreFilters: boolean =
+    props.showAdvancedFilters !== undefined
+      ? props.showAdvancedFilters
+      : internalShowMoreFilters;
+
   type ClearFilterFunction = (key: keyof T) => void;
 
   const clearFilter: ClearFilterFunction = (key: keyof T): void => {