refactor: Add syncId prop to LineChart component for syncing multiple…

… charts
OneUptime · Aug 21, 2024 · b202b07 · b202b07
1 parent 9db1c59
commit b202b07
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/Common/UI/Components/Charts/ChartGroup/ChartGroup.tsx b/Common/UI/Components/Charts/ChartGroup/ChartGroup.tsx
@@ -1,3 +1,4 @@
+import Text from "../../../../Types/Text";
 import LineChart, { ComponentProps as LineChartProps } from "../Line/LineChart";
 import React, { FunctionComponent, ReactElement } from "react";
 
@@ -22,6 +23,8 @@ export interface ComponentProps {
 const ChartGroup: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const syncId: string = Text.generateRandomText(10);
+
   return (
     <div className="lg:grid grid-cols-1 gap-5">
       {props.charts.map((chart: Chart, index: number) => {
@@ -44,7 +47,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                     {chart.description}
                   </p>
                 )}
-                <LineChart key={index} {...chart.props} />
+                <LineChart key={index} {...chart.props} syncId={syncId} />
               </div>
             );
           default:

diff --git a/Common/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx b/Common/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx
@@ -571,6 +571,7 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   legendPosition?: "left" | "center" | "right";
   tooltipCallback?: (tooltipCallbackContent: TooltipProps) => void;
   customTooltip?: React.ComponentType<TooltipProps>;
+  syncId?: string | undefined;
 }
 
 const LineChart: React.ForwardRefExoticComponent<
@@ -691,6 +692,7 @@ const LineChart: React.ForwardRefExoticComponent<
         <ResponsiveContainer>
           <RechartsLineChart
             data={data}
+            syncId={props.syncId}
             onClick={
               hasOnValueChange && (activeLegend || activeDot)
                 ? () => {

diff --git a/Common/UI/Components/Charts/Line/LineChart.tsx b/Common/UI/Components/Charts/Line/LineChart.tsx
@@ -15,13 +15,13 @@ export interface ComponentProps {
   sync: boolean;
 }
 
-const LineChartElement: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  if (!props.sync) {
-    return <></>;
-  }
+export interface LineInternalProps extends ComponentProps {
+  syncId: string;
+}
 
+const LineChartElement: FunctionComponent<LineInternalProps> = (
+  props: LineInternalProps,
+): ReactElement => {
   const [records, setRecords] = React.useState<Array<ChartDataPoint>>([]);
 
   const categories: Array<string> = props.data.map((item: SeriesPoint) => {
@@ -64,6 +64,7 @@ const LineChartElement: FunctionComponent<ComponentProps> = (
       showTooltip={true}
       connectNulls={true}
       curve={props.curve}
+      syncId={props.sync ? props.syncId : undefined}
       yAxisWidth={60}
     />
   );

diff --git a/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx b/Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx
@@ -267,8 +267,9 @@ export class MonitorCharts {
   }): XAxis {
     let startTime: Date | undefined =
       data.monitorMetricsByMinute[0]?.createdAt || undefined;
-    let endTime : Date | undefined =
-      data.monitorMetricsByMinute[data.monitorMetricsByMinute.length - 1]?.createdAt || undefined;
+    let endTime: Date | undefined =
+      data.monitorMetricsByMinute[data.monitorMetricsByMinute.length - 1]
+        ?.createdAt || undefined;
 
     let xAxisAggregationType: XAxisAggregateType = XAxisAggregateType.Average;
 
@@ -292,9 +293,11 @@ export class MonitorCharts {
       xAxisAggregationType = XAxisAggregateType.Average;
     }
 
-
-    if(!startTime || !endTime) {
-      startTime = OneUptimeDate.addRemoveHours(OneUptimeDate.getCurrentDate(), -1);  
+    if (!startTime || !endTime) {
+      startTime = OneUptimeDate.addRemoveHours(
+        OneUptimeDate.getCurrentDate(),
+        -1,
+      );
       endTime = OneUptimeDate.getCurrentDate();
     }