refactor: Update XAxisOptions interface to include a formatter function

Author: simlarsen

Common/UI/Components/Charts/ChartLibrary/Types/ChartDataPoint.ts

@@ -0,0 +1,3 @@
+export default interface ChartDataPoint { 
+    [x: string]: number | string; 
+}

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

@@ -4,74 +4,8 @@ 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 = [
-  {
-    date: "Jan 22",
-    SolarPanels: 2890,
-    Inverters: 2338,
-  },
-  {
-    date: "Feb 22",
-    SolarPanels: 2756,
-    Inverters: 2103,
-  },
-  {
-    date: "Mar 22",
-    SolarPanels: 3322,
-    Inverters: 2194,
-  },
-  {
-    date: "Apr 22",
-    SolarPanels: 3470,
-    Inverters: 2108,
-  },
-  {
-    date: "May 22",
-    SolarPanels: 3475,
-    Inverters: 1812,
-  },
-  {
-    date: "Jun 22",
-    SolarPanels: 3129,
-    Inverters: 1726,
-  },
-  {
-    date: "Jul 22",
-    SolarPanels: 3490,
-    Inverters: 1982,
-  },
-  {
-    date: "Aug 22",
-    SolarPanels: 2903,
-    Inverters: 2012,
-  },
-  {
-    date: "Sep 22",
-    SolarPanels: 2643,
-    Inverters: 2342,
-  },
-  {
-    date: "Oct 22",
-    SolarPanels: 2837,
-    Inverters: 2473,
-  },
-  {
-    date: "Nov 22",
-    SolarPanels: 2954,
-    Inverters: 3848,
-  },
-  {
-    date: "Dec 22",
-    SolarPanels: 3239,
-    Inverters: 3736,
-  },
-];
-
-const dataFormatter = (number: number) => {
-  return `$${Intl.NumberFormat("us").format(number).toString()}`;
-};
+import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import DataPointUtil from "../Utils/DataPoint";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -85,7 +19,7 @@ const LineChartElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
 
-  const [records, setRecords] = React.useState<Record<string, any>[]>([]);
+  const [records, setRecords] = React.useState<Array<ChartDataPoint>>([]);
 
   const categories: Array<string> = props.data.map((item: SeriesPoint) => {
     return item.seriesName;
@@ -97,18 +31,12 @@ const LineChartElement: FunctionComponent<ComponentProps> = (
       setRecords([]);
     }
 
-    const maxXValue: number | Date = props.xAxis.options.max; 
-    const minXValue: number | Date = props.xAxis.options.min;
-    const precision: XAxisPrecision = props.xAxis.options.precision;
+    const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
+      seriesPoints: props.data,
+      xAxis: props.xAxis,
+    });
 
-    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;
-      }
-    }
+    setRecords(records);
 
   }, [props.data]);
 
@@ -118,11 +46,11 @@ const LineChartElement: FunctionComponent<ComponentProps> = (
     <LineChart
       className="h-80"
       data={records}
+      tickGap={1}
       index={props.xAxis.legend}
       categories={categories}
       colors={["indigo", "rose", "amber"]}
-      valueFormatter={dataFormatter}
-      
+      valueFormatter={props.yAxis.options.formatter || undefined}
       showTooltip={true}
       yAxisWidth={60}
       onValueChange={(v) => {

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

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

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

@@ -1,10 +1,26 @@
 enum XAxisPrecision {
-  SECOND = "second",
-  MINUTE = "minute",
-  HOUR = "hour",
-  DAY = "day",
-  MONTH = "month",
-  YEAR = "year",
+  EVERY_SECOND = "second",
+  EVERY_FIVE_SECONDS = "fiveSeconds",
+  EVERY_TEN_SECONDS = "tenSeconds",
+  EVERY_THIRTY_SECONDS = "thirtySeconds",
+  EVERY_MINUTE = "minute",
+  EVERY_FIVE_MINUTES = "fiveMinutes",
+  EVERY_TEN_MINUTES = "tenMinutes",
+  EVERY_THIRTY_MINUTES = "thirtyMinutes",
+  EVERY_HOUR = "hour",
+  EVERY_TWO_HOURS = "twoHours",
+  EVERY_THREE_HOURS = "threeHours",
+  EVERY_SIX_HOURS = "sixHours",
+  EVERY_TWELVE_HOURS = "twelveHours",
+  EVERY_DAY = "day",
+  EVERY_TWO_DAYS = "twoDays",
+  EVERY_WEEK = "week",
+  EVERY_TWO_WEEKS = "twoWeeks",
+  EVERY_MONTH = "month",
+  EVERY_TWO_MONTHS = "twoMonths",
+  EVERY_THREE_MONTHS = "threeMonths",
+  EVERY_SIX_MONTHS = "sixMonths",
+  EVERY_YEAR = "year",
 }
 
 export default XAxisPrecision;

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

@@ -1,3 +1,3 @@
-type XValue = string | number | Date;
+type XValue = Date;
 
 export default XValue;

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

@@ -5,6 +5,7 @@ export interface YAxisOptions {
   type: YAxisType;
   min: YAxisMaxMin;
   max: YAxisMaxMin;
+  formatter: (value: number) => string;
 }
 
 export default interface YAxis {

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

@@ -0,0 +1,72 @@
+
+
+/// ChartDataPoint is in the format of: 
+// {
+//     date: "Feb 22",
+//     SolarPanels: 2756,
+//     Inverters: 2103,
+// }
+
+import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import SeriesPoints from "../Types/SeriesPoints";
+import { XAxis } from "../Types/XAxis/XAxis";
+import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
+import XAxisUtil from "./XAxis";
+
+
+
+export default class DataPointUtil { 
+    public static getChartDataPoints(data: {
+        seriesPoints: Array<SeriesPoints>;
+        xAxis: XAxis
+    }): Array<ChartDataPoint> {
+
+        const xAxisMax:XAxisMaxMin = data.xAxis.options.max;
+        const xAxisMin: XAxisMaxMin = data.xAxis.options.min;
+
+        const xAxisLegend: string = data.xAxis.legend;
+
+        const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals({
+            xAxisMax: xAxisMax,
+            xAxisMin: xAxisMin
+        });
+
+        const formatter: (value: Date) => string = XAxisUtil.getFormatter({
+            xAxisMax: xAxisMax,
+            xAxisMin: xAxisMin
+        });
+
+        const arrayOfData: Array<ChartDataPoint> = [];
+
+        // format all the intervals. 
+        for (const interval of intervals) {
+            const dataPoint: ChartDataPoint = {};
+            dataPoint[xAxisLegend] = formatter(interval);
+            arrayOfData.push(dataPoint);
+        }
+
+        // now we need to add the data points.
+        for(const series of data.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 the series exists, sum the value.
+
+                        if(chartDataPoint[series.seriesName]) {
+                            (chartDataPoint[series.seriesName] as number) += value;
+                        }
+
+                        chartDataPoint[series.seriesName] = value;
+                    }
+                }
+            }
+        }
+
+        return arrayOfData;
+
+    }
+}