Update XAxisOptions interface to include a formatter function

Author: simlarsen

Common/Types/Date.ts

@@ -1138,6 +1138,8 @@ export default class OneUptimeDate {
     );
   }
 
+  
+
   public static getDateWithCustomTime(data: {
     hours: number;
     minutes: number;

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

@@ -1,9 +1,10 @@
 import { LineChart } from "../ChartLibrary/LineChart/LineChart";
-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
 import YAxis from "../Types/YAxis/YAxis";
 import ChartCurve from "../Types/ChartCurve";
+import XAxisPrecision from "../Types/XAxis/XAxisPrecision";
 
 const chartdata = [
   {
@@ -81,16 +82,47 @@ export interface ComponentProps {
 }
 
 const LineChartElement: FunctionComponent<ComponentProps> = (
-  _props: ComponentProps,
+  props: ComponentProps,
 ): ReactElement => {
+
+  const [records, setRecords] = React.useState<Record<string, any>[]>([]);
+
+  const categories: Array<string> = props.data.map((item: SeriesPoint) => {
+    return item.seriesName;
+  });
+
+  useEffect(() => {
+
+    if (!props.data || props.data.length === 0) {
+      setRecords([]);
+    }
+
+    const maxXValue: number | Date = props.xAxis.options.max; 
+    const minXValue: number | Date = props.xAxis.options.min;
+    const precision: XAxisPrecision = props.xAxis.options.precision;
+
+    for (const seriesData of props.data) {
+      const yAxisLegend: string = seriesData.seriesName;
+      for (const data of seriesData.data) {
+
+        const xAxisValue: string = props.xAxis.options.formatter(data.x);
+        const yValue: number = data.y;
+      }
+    }
+
+  }, [props.data]);
+
+
+
   return (
     <LineChart
       className="h-80"
-      data={chartdata}
-      index="date"
-      categories={["SolarPanels", "Inverters"]}
-      colors={["indigo", "rose"]}
+      data={records}
+      index={props.xAxis.legend}
+      categories={categories}
+      colors={["indigo", "rose", "amber"]}
       valueFormatter={dataFormatter}
+      
       showTooltip={true}
       yAxisWidth={60}
       onValueChange={(v) => {

Common/UI/Components/Charts/Types/XAxis/XAxis.ts

@@ -1,3 +1,4 @@
+import XValue from "../XValue";
 import XAxisMaxMin from "./XAxisMaxMin";
 import XAxisPrecision from "./XAxisPrecision";
 import XAxisType from "./XAxisType";
@@ -7,6 +8,7 @@ export interface XAxisOptions {
   min: XAxisMaxMin;
   max: XAxisMaxMin;
   precision: XAxisPrecision;
+  formatter: (value: XValue) => string;
 }
 
 export interface XAxis {

Common/UI/Components/Charts/Types/XAxis/XAxisMaxMin.ts

@@ -1,3 +1,3 @@
-type XAxisMaxMin = "auto" | number | Date;
+type XAxisMaxMin = number | Date;
 
 export default XAxisMaxMin;

Dashboard/src/Components/Monitor/MonitorCharts/MonitorChart.tsx

@@ -258,18 +258,18 @@ export class MonitorCharts {
   public static getXAxisFor(data: {
     monitorMetricsByMinute: Array<MonitorMetricsByMinute>;
   }): XAxis {
-    const startTime: Date | undefined =
-      data.monitorMetricsByMinute[0]?.createdAt || undefined;
-    const endTime: Date | undefined =
+    const startTime: Date  =
+      data.monitorMetricsByMinute[0]?.createdAt! || undefined;
+    const endTime: Date =
       data.monitorMetricsByMinute[data.monitorMetricsByMinute.length - 1]
-        ?.createdAt || undefined;
+        ?.createdAt! || undefined;
 
     return {
       legend: "Time",
       options: {
         type: XAxisType.Time,
-        min: startTime || "auto",
-        max: endTime || "auto",
+        min: startTime,
+        max: endTime,
         precision: XAxisPrecision.MINUTE,
       },
     };