@oneuptime/common 7.0.2989 → 7.0.2994

package/UI/Components/Charts/Utils/DataPoint.ts

@@ -0,0 +1,188 @@
+/// ChartDataPoint is in the format of:
+// {
+//     date: "Feb 22",
+//     SolarPanels: 2756,
+//     Inverters: 2103,
+// }
+
+import BadDataException from "../../../../Types/Exception/BadDataException";
+import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import SeriesPoints from "../Types/SeriesPoints";
+import { XAxis, XAxisAggregateType } from "../Types/XAxis/XAxis";
+import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
+import YAxis, { YAxisPrecision } from "../Types/YAxis/YAxis";
+import XAxisUtil from "./XAxis";
+
+interface SeriesData {
+  sum: number;
+  count: number;
+  max: number;
+  min: number;
+}
+
+export default class DataPointUtil {
+  public static getChartDataPoints(data: {
+    seriesPoints: Array<SeriesPoints>;
+    xAxis: XAxis;
+    yAxis: YAxis;
+  }): Array<ChartDataPoint> {
+    const { xAxisLegend, intervals, formatter } = this.initializeXAxisData(
+      data.xAxis,
+    );
+    const arrayOfData: ChartDataPoint[] = this.initializeArrayOfData(
+      intervals,
+      xAxisLegend,
+      formatter,
+    );
+    const seriesDataMap: {
+      [key: string]: SeriesData;
+    } = this.processSeriesData(
+      data.seriesPoints,
+      arrayOfData,
+      xAxisLegend,
+      formatter,
+      data.xAxis.options.aggregateType,
+    );
+    this.formatSeriesData(
+      arrayOfData,
+      seriesDataMap,
+      data.yAxis.options.precision,
+    );
+    return arrayOfData;
+  }
+
+  private static initializeXAxisData(xAxis: XAxis): {
+    xAxisMax: XAxisMaxMin;
+    xAxisMin: XAxisMaxMin;
+    xAxisLegend: string;
+    intervals: Array<Date>;
+    formatter: (value: Date) => string;
+  } {
+    const xAxisMax: XAxisMaxMin = xAxis.options.max;
+    const xAxisMin: XAxisMaxMin = xAxis.options.min;
+    const xAxisLegend: string = xAxis.legend;
+    const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals({
+      xAxisMax,
+      xAxisMin,
+    });
+    const formatter: (value: Date) => string = XAxisUtil.getFormatter({
+      xAxisMax,
+      xAxisMin,
+    });
+    return { xAxisMax, xAxisMin, xAxisLegend, intervals, formatter };
+  }
+
+  private static initializeArrayOfData(
+    intervals: Array<Date>,
+    xAxisLegend: string,
+    formatter: (value: Date) => string,
+  ): Array<ChartDataPoint> {
+    const arrayOfData: Array<ChartDataPoint> = [];
+    for (const interval of intervals) {
+      const dataPoint: ChartDataPoint = {};
+      dataPoint[xAxisLegend] = formatter(interval);
+      arrayOfData.push(dataPoint);
+    }
+    return arrayOfData;
+  }
+
+  private static processSeriesData(
+    seriesPoints: Array<SeriesPoints>,
+    arrayOfData: Array<ChartDataPoint>,
+    xAxisLegend: string,
+    formatter: (value: Date) => string,
+    aggregateType: XAxisAggregateType,
+  ): { [key: string]: SeriesData } {
+    const seriesDataMap: { [key: string]: SeriesData } = {};
+    for (const series of seriesPoints) {
+      for (const dataPoint of series.data) {
+        const date: Date = dataPoint.x;
+        const value: number = dataPoint.y;
+        const formattedDate: string = formatter(date);
+        for (const chartDataPoint of arrayOfData) {
+          if (chartDataPoint[xAxisLegend] === formattedDate) {
+            if (!seriesDataMap[series.seriesName]) {
+              seriesDataMap[series.seriesName] = {
+                sum: 0,
+                count: 0,
+                max: Number.NEGATIVE_INFINITY,
+                min: Number.POSITIVE_INFINITY,
+              };
+            }
+            seriesDataMap[series.seriesName]!.sum += value;
+            seriesDataMap[series.seriesName]!.count += 1;
+            seriesDataMap[series.seriesName]!.max = Math.max(
+              seriesDataMap[series.seriesName]!.max,
+              value,
+            );
+            seriesDataMap[series.seriesName]!.min = Math.min(
+              seriesDataMap[series.seriesName]!.min,
+              value,
+            );
+            chartDataPoint[series.seriesName] = this.calculateAggregate(
+              seriesDataMap[series.seriesName]!,
+              aggregateType,
+            );
+          }
+        }
+      }
+    }
+    return seriesDataMap;
+  }
+
+  private static calculateAggregate(
+    seriesData: SeriesData,
+    aggregateType: XAxisAggregateType,
+  ): number {
+    switch (aggregateType) {
+      case XAxisAggregateType.Average:
+        return seriesData.sum / seriesData.count;
+      case XAxisAggregateType.Sum:
+        return seriesData.sum;
+      case XAxisAggregateType.Max:
+        return seriesData.max;
+      case XAxisAggregateType.Min:
+        return seriesData.min;
+      default:
+        throw new BadDataException("Aggregate type not supported.");
+    }
+  }
+
+  private static formatSeriesData(
+    arrayOfData: Array<ChartDataPoint>,
+    seriesDataMap: { [key: string]: SeriesData },
+    yAxisPrecision: YAxisPrecision,
+  ): void {
+    for (const chartDataPoint of arrayOfData) {
+      for (const seriesName in seriesDataMap) {
+        if (
+          chartDataPoint[seriesName] &&
+          typeof chartDataPoint[seriesName] === "number"
+        ) {
+          chartDataPoint[seriesName] = this.formatValue(
+            chartDataPoint[seriesName] as number,
+            yAxisPrecision,
+          );
+        }
+      }
+    }
+  }
+
+  private static formatValue(
+    value: number,
+    yAxisPrecision: YAxisPrecision,
+  ): number {
+    switch (yAxisPrecision) {
+      case YAxisPrecision.NoDecimals:
+        return parseFloat(value.toFixed(0));
+      case YAxisPrecision.OneDecimal:
+        return parseFloat(value.toFixed(1));
+      case YAxisPrecision.TwoDecimals:
+        return parseFloat(value.toFixed(2));
+      case YAxisPrecision.ThreeDecimals:
+        return parseFloat(value.toFixed(3));
+      default:
+        throw new BadDataException("YAxis precision not supported.");
+    }
+  }
+}

package/UI/Components/Charts/Utils/XAxis.ts

@@ -0,0 +1,267 @@
+import NotImplementedException from "../../../../Types/Exception/NotImplementedException";
+import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
+import XAxisPrecision from "../Types/XAxis/XAxisPrecision";
+
+export default class XAxisUtil {
+  public static getPrecision(data: {
+    xAxisMin: XAxisMaxMin;
+    xAxisMax: XAxisMaxMin;
+  }): XAxisPrecision {
+    if (
+      typeof data.xAxisMax === "number" ||
+      typeof data.xAxisMin === "number"
+    ) {
+      // number not yet supported.
+      throw new NotImplementedException();
+    }
+
+    const startDate: Date = data.xAxisMin as Date;
+    const endDate: Date = data.xAxisMax as Date;
+
+    const totalMilliseconds: number = endDate.getTime() - startDate.getTime();
+    const totalSeconds: number = totalMilliseconds / 1000;
+    const totalMinutes: number = totalSeconds / 60;
+    const totalHours: number = totalMinutes / 60;
+    const totalDays: number = totalHours / 24;
+    const totalWeeks: number = totalDays / 7;
+    const totalMonths: number = totalDays / 30;
+
+    if (totalSeconds <= 100) {
+      return XAxisPrecision.EVERY_SECOND;
+    }
+    if (totalSeconds <= 500) {
+      return XAxisPrecision.EVERY_FIVE_SECONDS;
+    }
+    if (totalSeconds <= 1000) {
+      return XAxisPrecision.EVERY_TEN_SECONDS;
+    }
+    if (totalSeconds <= 3000) {
+      return XAxisPrecision.EVERY_THIRTY_SECONDS;
+    }
+    if (totalMinutes <= 100) {
+      return XAxisPrecision.EVERY_MINUTE;
+    }
+    if (totalMinutes <= 500) {
+      return XAxisPrecision.EVERY_FIVE_MINUTES;
+    }
+    if (totalMinutes <= 1000) {
+      return XAxisPrecision.EVERY_TEN_MINUTES;
+    }
+    if (totalMinutes <= 3000) {
+      return XAxisPrecision.EVERY_THIRTY_MINUTES;
+    }
+    if (totalHours <= 100) {
+      return XAxisPrecision.EVERY_HOUR;
+    }
+    if (totalHours <= 200) {
+      return XAxisPrecision.EVERY_TWO_HOURS;
+    }
+    if (totalHours <= 300) {
+      return XAxisPrecision.EVERY_THREE_HOURS;
+    }
+    if (totalHours <= 600) {
+      return XAxisPrecision.EVERY_SIX_HOURS;
+    }
+    if (totalHours <= 1200) {
+      return XAxisPrecision.EVERY_TWELVE_HOURS;
+    }
+    if (totalDays <= 100) {
+      return XAxisPrecision.EVERY_DAY;
+    }
+    if (totalDays <= 200) {
+      return XAxisPrecision.EVERY_TWO_DAYS;
+    }
+    if (totalWeeks <= 100) {
+      return XAxisPrecision.EVERY_WEEK;
+    }
+    if (totalWeeks <= 200) {
+      return XAxisPrecision.EVERY_TWO_WEEKS;
+    }
+    if (totalMonths <= 100) {
+      return XAxisPrecision.EVERY_MONTH;
+    }
+    if (totalMonths <= 200) {
+      return XAxisPrecision.EVERY_TWO_MONTHS;
+    }
+    if (totalMonths <= 300) {
+      return XAxisPrecision.EVERY_THREE_MONTHS;
+    }
+    if (totalMonths <= 600) {
+      return XAxisPrecision.EVERY_SIX_MONTHS;
+    }
+    return XAxisPrecision.EVERY_YEAR;
+  }
+
+  public static getPrecisionIntervals(data: {
+    xAxisMin: XAxisMaxMin;
+    xAxisMax: XAxisMaxMin;
+  }): Array<Date> {
+    const precision: XAxisPrecision = XAxisUtil.getPrecision(data);
+
+    if (
+      typeof data.xAxisMax === "number" ||
+      typeof data.xAxisMin === "number"
+    ) {
+      // number not yet supported.
+      throw new NotImplementedException();
+    }
+
+    const startDate: Date = new Date(data.xAxisMin as Date);
+    const endDate: Date = new Date(data.xAxisMax as Date);
+    const intervals: Array<Date> = [];
+
+    const currentDate: Date = new Date(startDate);
+
+    while (currentDate <= endDate) {
+      intervals.push(new Date(currentDate));
+
+      switch (precision) {
+        case XAxisPrecision.EVERY_SECOND:
+          currentDate.setSeconds(currentDate.getSeconds() + 1);
+          break;
+        case XAxisPrecision.EVERY_FIVE_SECONDS:
+          currentDate.setSeconds(currentDate.getSeconds() + 5);
+          break;
+        case XAxisPrecision.EVERY_TEN_SECONDS:
+          currentDate.setSeconds(currentDate.getSeconds() + 10);
+          break;
+        case XAxisPrecision.EVERY_THIRTY_SECONDS:
+          currentDate.setSeconds(currentDate.getSeconds() + 30);
+          break;
+        case XAxisPrecision.EVERY_MINUTE:
+          currentDate.setMinutes(currentDate.getMinutes() + 1);
+          break;
+        case XAxisPrecision.EVERY_FIVE_MINUTES:
+          currentDate.setMinutes(currentDate.getMinutes() + 5);
+          break;
+        case XAxisPrecision.EVERY_TEN_MINUTES:
+          currentDate.setMinutes(currentDate.getMinutes() + 10);
+          break;
+        case XAxisPrecision.EVERY_THIRTY_MINUTES:
+          currentDate.setMinutes(currentDate.getMinutes() + 30);
+          break;
+        case XAxisPrecision.EVERY_HOUR:
+          currentDate.setHours(currentDate.getHours() + 1);
+          break;
+        case XAxisPrecision.EVERY_TWO_HOURS:
+          currentDate.setHours(currentDate.getHours() + 2);
+          break;
+        case XAxisPrecision.EVERY_THREE_HOURS:
+          currentDate.setHours(currentDate.getHours() + 3);
+          break;
+        case XAxisPrecision.EVERY_SIX_HOURS:
+          currentDate.setHours(currentDate.getHours() + 6);
+          break;
+        case XAxisPrecision.EVERY_TWELVE_HOURS:
+          currentDate.setHours(currentDate.getHours() + 12);
+          break;
+        case XAxisPrecision.EVERY_DAY:
+          currentDate.setDate(currentDate.getDate() + 1);
+          break;
+        case XAxisPrecision.EVERY_TWO_DAYS:
+          currentDate.setDate(currentDate.getDate() + 2);
+          break;
+        case XAxisPrecision.EVERY_WEEK:
+          currentDate.setDate(currentDate.getDate() + 7);
+          break;
+        case XAxisPrecision.EVERY_TWO_WEEKS:
+          currentDate.setDate(currentDate.getDate() + 14);
+          break;
+        case XAxisPrecision.EVERY_MONTH:
+          currentDate.setMonth(currentDate.getMonth() + 1);
+          break;
+        case XAxisPrecision.EVERY_TWO_MONTHS:
+          currentDate.setMonth(currentDate.getMonth() + 2);
+          break;
+        case XAxisPrecision.EVERY_THREE_MONTHS:
+          currentDate.setMonth(currentDate.getMonth() + 3);
+          break;
+        case XAxisPrecision.EVERY_SIX_MONTHS:
+          currentDate.setMonth(currentDate.getMonth() + 6);
+          break;
+        case XAxisPrecision.EVERY_YEAR:
+          currentDate.setFullYear(currentDate.getFullYear() + 1);
+          break;
+      }
+    }
+
+    return intervals;
+  }
+
+  public static getFormatter(data: {
+    xAxisMin: XAxisMaxMin;
+    xAxisMax: XAxisMaxMin;
+  }): (value: Date) => string {
+    const precision: XAxisPrecision = XAxisUtil.getPrecision(data);
+
+    switch (precision) {
+      case XAxisPrecision.EVERY_SECOND:
+      case XAxisPrecision.EVERY_FIVE_SECONDS:
+      case XAxisPrecision.EVERY_TEN_SECONDS:
+      case XAxisPrecision.EVERY_THIRTY_SECONDS:
+        return (value: Date) => {
+          return value.toISOString().substring(11, 19);
+        }; // HH:mm:ss
+      case XAxisPrecision.EVERY_MINUTE:
+      case XAxisPrecision.EVERY_FIVE_MINUTES:
+      case XAxisPrecision.EVERY_TEN_MINUTES:
+      case XAxisPrecision.EVERY_THIRTY_MINUTES:
+        return (value: Date) => {
+          return value.toISOString().substring(11, 16);
+        }; // HH:mm
+      case XAxisPrecision.EVERY_HOUR:
+      case XAxisPrecision.EVERY_TWO_HOURS:
+      case XAxisPrecision.EVERY_THREE_HOURS:
+      case XAxisPrecision.EVERY_SIX_HOURS:
+      case XAxisPrecision.EVERY_TWELVE_HOURS:
+        return (value: Date) => {
+          const dateString: string = value.toISOString();
+          const day: string = dateString.substring(8, 10);
+          const month: string = value.toLocaleString("default", {
+            month: "short",
+          });
+          const hour: string = dateString.substring(11, 13);
+          return `${day} ${month}, ${hour}:00`;
+        }; // DD MMM, HH:00
+      case XAxisPrecision.EVERY_DAY:
+      case XAxisPrecision.EVERY_TWO_DAYS:
+        return (value: Date) => {
+          const dateString: string = value.toISOString();
+          const day: string = dateString.substring(8, 10);
+          const month: string = value.toLocaleString("default", {
+            month: "short",
+          });
+          return `${day} ${month}`;
+        }; // DD MMM
+      case XAxisPrecision.EVERY_WEEK:
+      case XAxisPrecision.EVERY_TWO_WEEKS:
+        return (value: Date) => {
+          const dateString: string = value.toISOString();
+          const day: string = dateString.substring(8, 10);
+          const month: string = value.toLocaleString("default", {
+            month: "short",
+          });
+          return `${day} ${month}`;
+        }; // DD MMM
+      case XAxisPrecision.EVERY_MONTH:
+      case XAxisPrecision.EVERY_TWO_MONTHS:
+      case XAxisPrecision.EVERY_THREE_MONTHS:
+      case XAxisPrecision.EVERY_SIX_MONTHS:
+        return (value: Date) => {
+          const dateString: string = value.toISOString();
+          const day: string = dateString.substring(8, 10);
+          const year: string = dateString.substring(0, 4);
+          const month: string = value.toLocaleString("default", {
+            month: "short",
+          });
+          return `${day} ${month} ${year}`;
+        }; // DD MMM
+      case XAxisPrecision.EVERY_YEAR:
+        return (value: Date) => {
+          return value.toISOString().substring(0, 4);
+        }; // YYYY
+      default:
+        throw new Error("Unsupported precision");
+    }
+  }
+}

package/build/dist/Server/Infrastructure/Queue.js

@@ -1,5 +1,8 @@
-import { RedisHostname, RedisPassword, RedisPort } from "../EnvironmentConfig";
+import { ClusterKey, RedisHostname, RedisPassword, RedisPort, } from "../EnvironmentConfig";
 import { Queue as BullQueue } from "bullmq";
+import { ExpressAdapter } from "@bull-board/express";
+import { createBullBoard } from "@bull-board/api";
+import { BullMQAdapter } from "@bull-board/api/bullMQAdapter";
 export var QueueName;
 (function (QueueName) {
     QueueName["Workflow"] = "Workflow";
@@ -33,6 +36,22 @@ class Queue {
         // remove existing repeatable job
         await this.getQueue(queueName).removeRepeatableByKey(jobId);
     }
+    static getInspectorRoute() {
+        return "/api/inspect/queue/:clusterKey";
+    }
+    static getQueueInspectorRouter() {
+        const serverAdapter = new ExpressAdapter();
+        createBullBoard({
+            queues: [
+                ...Object.values(QueueName).map((queueName) => {
+                    return new BullMQAdapter(this.getQueue(queueName));
+                }),
+            ],
+            serverAdapter: serverAdapter,
+        });
+        serverAdapter.setBasePath(this.getInspectorRoute().replace("/:clusterKey", "/" + ClusterKey.toString()));
+        return serverAdapter.getRouter();
+    }
     static async addJob(queueName, jobId, jobName, data, options) {
         const optionsObject = {
             jobId: jobId.toString(),

package/build/dist/Server/Infrastructure/Queue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Queue.js","sourceRoot":"","sources":["../../../../Server/Infrastructure/Queue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAG/E,OAAO,EAAE,KAAK,IAAI,SAAS,EAAoB,MAAM,QAAQ,CAAC;AAE9D,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,kCAAqB,CAAA;IACrB,8BAAiB,CAAA;AACnB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAID,MAAqB,KAAK;IAGjB,MAAM,CAAC,QAAQ,CAAC,SAAoB;QACzC,wCAAwC;QACxC,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS,CAAc,CAAC;QAChD,CAAC;QAED,MAAM,KAAK,GAAc,IAAI,SAAS,CAAC,SAAS,EAAE;YAChD,UAAU,EAAE;gBACV,IAAI,EAAE,aAAa,CAAC,QAAQ,EAAE;gBAC9B,IAAI,EAAE,SAAS,CAAC,QAAQ,EAAE;gBAC1B,QAAQ,EAAE,aAAa;aACxB;SACF,CAAC,CAAC;QAEH,4BAA4B;QAC5B,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;QAElC,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,MAAM,CAAC,KAAK,CAAC,SAAS,CAC3B,SAAoB,EACpB,KAAa;QAEb,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QAED,MAAM,GAAG,GAAoB,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE1E,IAAI,GAAG,EAAE,CAAC;YACR,MAAM,GAAG,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC;QAED,iCAAiC;QACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;IAEM,MAAM,CAAC,KAAK,CAAC,MAAM,CACxB,SAAoB,EACpB,KAAa,EACb,OAAe,EACf,IAAgB,EAChB,OAGC;QAED,MAAM,aAAa,GAAgB;YACjC,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE;SACxB,CAAC;QAEF,IAAI,OAAO,IAAI,OAAO,CAAC,UAAU,EAAE,CAAC;YAClC,aAAa,CAAC,MAAM,GAAG;gBACrB,OAAO,EAAE,OAAO,CAAC,UAAU;aAC5B,CAAC;QACJ,CAAC;QAED,MAAM,GAAG,GAAoB,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAE1E,IAAI,GAAG,EAAE,CAAC;YACR,MAAM,GAAG,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC;QAED,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,EAAE,CAAC;YAC3B,iCAAiC;YACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,qBAAqB,CAClD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CACvB,CAAC;QACJ,CAAC;QAED,MAAM,QAAQ,GAAQ,MAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,CACtD,OAAO,EACP,IAAI,EACJ,aAAa,CACd,CAAC;QAEF,OAAO,QAAQ,CAAC;IAClB,CAAC;;AAhFc,eAAS,GAA0B,EAAE,CAAC;eADlC,KAAK"}
+{"version":3,"file":"Queue.js","sourceRoot":"","sources":["../../../../Server/Infrastructure/Queue.ts"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/Charts/ChartGroup/ChartGroup.js

@@ -1,5 +1,6 @@
+import Text from "../../../../Types/Text";
 import LineChart from "../Line/LineChart";
-import React, { useState } from "react";
+import React from "react";
 export var ChartType;
 (function (ChartType) {
     ChartType["LINE"] = "line";
@@ -7,20 +8,14 @@ export var ChartType;
     ChartType["AREA"] = "area";
 })(ChartType || (ChartType = {}));
 const ChartGroup = (props) => {
-    const [syncValue, setSyncValue] = useState(undefined);
+    const syncId = Text.generateRandomText(10);
     return (React.createElement("div", { className: "lg:grid grid-cols-1 gap-5" }, props.charts.map((chart, index) => {
         switch (chart.type) {
             case ChartType.LINE:
                 return (React.createElement("div", { key: index, className: "p-6 rounded-md bg-white shadow" },
                     React.createElement("h2", { "data-testid": "card-details-heading", id: "card-details-heading", className: "text-lg font-medium leading-6 text-gray-900" }, chart.title),
                     chart.description && (React.createElement("p", { "data-testid": "card-description", className: "mt-1 text-sm text-gray-500 w-full" }, chart.description)),
-                    React.createElement(LineChart, Object.assign({ key: index }, chart.props, { xAxisMarker: {
-                            value: chart.sync ? syncValue : undefined,
-                        }, onHoverXAxis: (value) => {
-                            if (chart.sync) {
-                                setSyncValue(value);
-                            }
-                        } }))));
+                    React.createElement(LineChart, Object.assign({ key: index }, chart.props, { syncId: syncId }))));
             default:
                 return React.createElement(React.Fragment, null);
         }

package/build/dist/UI/Components/Charts/ChartGroup/ChartGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartGroup.js","sourceRoot":"","sources":["../../../../../../UI/Components/Charts/ChartGroup/ChartGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,SAA+C,MAAM,mBAAmB,CAAC;AAChF,OAAO,KAAK,EAAE,EAAmC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzE,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,wBAAW,CAAA;IACX,0BAAa,CAAA;AACf,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAeD,MAAM,UAAU,GAAsC,CACpD,KAAqB,EACP,EAAE;IAChB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAExC,SAAS,CAAC,CAAC;IAEb,OAAO,CACL,6BAAK,SAAS,EAAC,2BAA2B,IACvC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,KAAa,EAAE,EAAE;QAChD,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,SAAS,CAAC,IAAI;gBACjB,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,gCAAgC;oBACzD,2CACc,sBAAsB,EAClC,EAAE,EAAC,sBAAsB,EACzB,SAAS,EAAC,6CAA6C,IAEtD,KAAK,CAAC,KAAK,CACT;oBACJ,KAAK,CAAC,WAAW,IAAI,CACpB,0CACc,kBAAkB,EAC9B,SAAS,EAAC,mCAAmC,IAE5C,KAAK,CAAC,WAAW,CAChB,CACL;oBACD,oBAAC,SAAS,kBACR,GAAG,EAAE,KAAK,IACN,KAAK,CAAC,KAAK,IACf,WAAW,EAAE;4BACX,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;yBAC1C,EACD,YAAY,EAAE,CAAC,KAA6B,EAAE,EAAE;4BAC9C,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;gCACf,YAAY,CAAC,KAAK,CAAC,CAAC;4BACtB,CAAC;wBACH,CAAC,IACD,CACE,CACP,CAAC;YACJ;gBACE,OAAO,yCAAK,CAAC;QACjB,CAAC;IACH,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ChartGroup.js","sourceRoot":"","sources":["../../../../../../UI/Components/Charts/ChartGroup/ChartGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,SAA+C,MAAM,mBAAmB,CAAC;AAChF,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,wBAAW,CAAA;IACX,0BAAa,CAAA;AACf,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAcD,MAAM,UAAU,GAAsC,CACpD,KAAqB,EACP,EAAE;IAChB,MAAM,MAAM,GAAW,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,6BAAK,SAAS,EAAC,2BAA2B,IACvC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAY,EAAE,KAAa,EAAE,EAAE;QAChD,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,SAAS,CAAC,IAAI;gBACjB,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,gCAAgC;oBACzD,2CACc,sBAAsB,EAClC,EAAE,EAAC,sBAAsB,EACzB,SAAS,EAAC,6CAA6C,IAEtD,KAAK,CAAC,KAAK,CACT;oBACJ,KAAK,CAAC,WAAW,IAAI,CACpB,0CACc,kBAAkB,EAC9B,SAAS,EAAC,mCAAmC,IAE5C,KAAK,CAAC,WAAW,CAChB,CACL;oBACD,oBAAC,SAAS,kBAAC,GAAG,EAAE,KAAK,IAAM,KAAK,CAAC,KAAK,IAAE,MAAM,EAAE,MAAM,IAAI,CACtD,CACP,CAAC;YACJ;gBACE,OAAO,yCAAK,CAAC;QACjB,CAAC;IACH,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}