Skip to content

Commit 3b141d7

Browse files
committed
refactor: Update XAxisOptions interface to include a formatter function
1 parent 61541ac commit 3b141d7

File tree

10 files changed

+317
-123
lines changed

10 files changed

+317
-123
lines changed
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default interface ChartDataPoint {
2+
[x: string]: number | string;
3+
}

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

Lines changed: 10 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,8 @@ import SeriesPoint from "../Types/SeriesPoints";
44
import { XAxis } from "../Types/XAxis/XAxis";
55
import YAxis from "../Types/YAxis/YAxis";
66
import ChartCurve from "../Types/ChartCurve";
7-
import XAxisPrecision from "../Types/XAxis/XAxisPrecision";
8-
9-
const chartdata = [
10-
{
11-
date: "Jan 22",
12-
SolarPanels: 2890,
13-
Inverters: 2338,
14-
},
15-
{
16-
date: "Feb 22",
17-
SolarPanels: 2756,
18-
Inverters: 2103,
19-
},
20-
{
21-
date: "Mar 22",
22-
SolarPanels: 3322,
23-
Inverters: 2194,
24-
},
25-
{
26-
date: "Apr 22",
27-
SolarPanels: 3470,
28-
Inverters: 2108,
29-
},
30-
{
31-
date: "May 22",
32-
SolarPanels: 3475,
33-
Inverters: 1812,
34-
},
35-
{
36-
date: "Jun 22",
37-
SolarPanels: 3129,
38-
Inverters: 1726,
39-
},
40-
{
41-
date: "Jul 22",
42-
SolarPanels: 3490,
43-
Inverters: 1982,
44-
},
45-
{
46-
date: "Aug 22",
47-
SolarPanels: 2903,
48-
Inverters: 2012,
49-
},
50-
{
51-
date: "Sep 22",
52-
SolarPanels: 2643,
53-
Inverters: 2342,
54-
},
55-
{
56-
date: "Oct 22",
57-
SolarPanels: 2837,
58-
Inverters: 2473,
59-
},
60-
{
61-
date: "Nov 22",
62-
SolarPanels: 2954,
63-
Inverters: 3848,
64-
},
65-
{
66-
date: "Dec 22",
67-
SolarPanels: 3239,
68-
Inverters: 3736,
69-
},
70-
];
71-
72-
const dataFormatter = (number: number) => {
73-
return `$${Intl.NumberFormat("us").format(number).toString()}`;
74-
};
7+
import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
8+
import DataPointUtil from "../Utils/DataPoint";
759

7610
export interface ComponentProps {
7711
data: Array<SeriesPoint>;
@@ -85,7 +19,7 @@ const LineChartElement: FunctionComponent<ComponentProps> = (
8519
props: ComponentProps,
8620
): ReactElement => {
8721

88-
const [records, setRecords] = React.useState<Record<string, any>[]>([]);
22+
const [records, setRecords] = React.useState<Array<ChartDataPoint>>([]);
8923

9024
const categories: Array<string> = props.data.map((item: SeriesPoint) => {
9125
return item.seriesName;
@@ -97,18 +31,12 @@ const LineChartElement: FunctionComponent<ComponentProps> = (
9731
setRecords([]);
9832
}
9933

100-
const maxXValue: number | Date = props.xAxis.options.max;
101-
const minXValue: number | Date = props.xAxis.options.min;
102-
const precision: XAxisPrecision = props.xAxis.options.precision;
34+
const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
35+
seriesPoints: props.data,
36+
xAxis: props.xAxis,
37+
});
10338

104-
for (const seriesData of props.data) {
105-
const yAxisLegend: string = seriesData.seriesName;
106-
for (const data of seriesData.data) {
107-
108-
const xAxisValue: string = props.xAxis.options.formatter(data.x);
109-
const yValue: number = data.y;
110-
}
111-
}
39+
setRecords(records);
11240

11341
}, [props.data]);
11442

@@ -118,11 +46,11 @@ const LineChartElement: FunctionComponent<ComponentProps> = (
11846
<LineChart
11947
className="h-80"
12048
data={records}
49+
tickGap={1}
12150
index={props.xAxis.legend}
12251
categories={categories}
12352
colors={["indigo", "rose", "amber"]}
124-
valueFormatter={dataFormatter}
125-
53+
valueFormatter={props.yAxis.options.formatter || undefined}
12654
showTooltip={true}
12755
yAxisWidth={60}
12856
onValueChange={(v) => {

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
import XValue from "../XValue";
21
import XAxisMaxMin from "./XAxisMaxMin";
3-
import XAxisPrecision from "./XAxisPrecision";
42
import XAxisType from "./XAxisType";
53

64
export interface XAxisOptions {
75
type: XAxisType;
86
min: XAxisMaxMin;
97
max: XAxisMaxMin;
10-
precision: XAxisPrecision;
11-
formatter: (value: XValue) => string;
128
}
139

1410
export interface XAxis {
Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,26 @@
11
enum XAxisPrecision {
2-
SECOND = "second",
3-
MINUTE = "minute",
4-
HOUR = "hour",
5-
DAY = "day",
6-
MONTH = "month",
7-
YEAR = "year",
2+
EVERY_SECOND = "second",
3+
EVERY_FIVE_SECONDS = "fiveSeconds",
4+
EVERY_TEN_SECONDS = "tenSeconds",
5+
EVERY_THIRTY_SECONDS = "thirtySeconds",
6+
EVERY_MINUTE = "minute",
7+
EVERY_FIVE_MINUTES = "fiveMinutes",
8+
EVERY_TEN_MINUTES = "tenMinutes",
9+
EVERY_THIRTY_MINUTES = "thirtyMinutes",
10+
EVERY_HOUR = "hour",
11+
EVERY_TWO_HOURS = "twoHours",
12+
EVERY_THREE_HOURS = "threeHours",
13+
EVERY_SIX_HOURS = "sixHours",
14+
EVERY_TWELVE_HOURS = "twelveHours",
15+
EVERY_DAY = "day",
16+
EVERY_TWO_DAYS = "twoDays",
17+
EVERY_WEEK = "week",
18+
EVERY_TWO_WEEKS = "twoWeeks",
19+
EVERY_MONTH = "month",
20+
EVERY_TWO_MONTHS = "twoMonths",
21+
EVERY_THREE_MONTHS = "threeMonths",
22+
EVERY_SIX_MONTHS = "sixMonths",
23+
EVERY_YEAR = "year",
824
}
925

1026
export default XAxisPrecision;
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
type XValue = string | number | Date;
1+
type XValue = Date;
22

33
export default XValue;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export interface YAxisOptions {
55
type: YAxisType;
66
min: YAxisMaxMin;
77
max: YAxisMaxMin;
8+
formatter: (value: number) => string;
89
}
910

1011
export default interface YAxis {
Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
2+
3+
/// ChartDataPoint is in the format of:
4+
// {
5+
// date: "Feb 22",
6+
// SolarPanels: 2756,
7+
// Inverters: 2103,
8+
// }
9+
10+
import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
11+
import SeriesPoints from "../Types/SeriesPoints";
12+
import { XAxis } from "../Types/XAxis/XAxis";
13+
import XAxisMaxMin from "../Types/XAxis/XAxisMaxMin";
14+
import XAxisUtil from "./XAxis";
15+
16+
17+
18+
export default class DataPointUtil {
19+
public static getChartDataPoints(data: {
20+
seriesPoints: Array<SeriesPoints>;
21+
xAxis: XAxis
22+
}): Array<ChartDataPoint> {
23+
24+
const xAxisMax:XAxisMaxMin = data.xAxis.options.max;
25+
const xAxisMin: XAxisMaxMin = data.xAxis.options.min;
26+
27+
const xAxisLegend: string = data.xAxis.legend;
28+
29+
const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals({
30+
xAxisMax: xAxisMax,
31+
xAxisMin: xAxisMin
32+
});
33+
34+
const formatter: (value: Date) => string = XAxisUtil.getFormatter({
35+
xAxisMax: xAxisMax,
36+
xAxisMin: xAxisMin
37+
});
38+
39+
const arrayOfData: Array<ChartDataPoint> = [];
40+
41+
// format all the intervals.
42+
for (const interval of intervals) {
43+
const dataPoint: ChartDataPoint = {};
44+
dataPoint[xAxisLegend] = formatter(interval);
45+
arrayOfData.push(dataPoint);
46+
}
47+
48+
// now we need to add the data points.
49+
for(const series of data.seriesPoints) {
50+
for(const dataPoint of series.data) {
51+
const date: Date = dataPoint.x;
52+
const value: number = dataPoint.y;
53+
const formattedDate: string = formatter(date);
54+
55+
for(const chartDataPoint of arrayOfData) {
56+
if(chartDataPoint[xAxisLegend] === formattedDate) {
57+
// if the series exists, sum the value.
58+
59+
if(chartDataPoint[series.seriesName]) {
60+
(chartDataPoint[series.seriesName] as number) += value;
61+
}
62+
63+
chartDataPoint[series.seriesName] = value;
64+
}
65+
}
66+
}
67+
}
68+
69+
return arrayOfData;
70+
71+
}
72+
}

0 commit comments

Comments
 (0)