Skip to content

Commit 31ac376

Browse files
austimwaustimw
authored
Merge pull request #10 from KeyValueSoftwareSystems/custon-hooks
Updated the code with custom hooks
2 parents fd57582 + 2c00b9a commit 31ac376

File tree

3 files changed

+100
-47
lines changed

3 files changed

+100
-47
lines changed

‎src/scatter-graph/ScatterGraph.tsx

Lines changed: 19 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import React, { FC, useRef, useState, ReactElement } from 'react';
1+
import React, { FC, ReactElement } from 'react';
22

3-
import { GraphPoint, FormattedGraphPoint, ScatterGraphPropTypes, DefaultValueBoxPropTypes } from '../types/types';
4-
import { getAxisRanges } from './utils';
5-
import { useGraphWidthResize } from './hooks';
3+
import { FormattedGraphPoint, ScatterGraphPropTypes, DefaultValueBoxPropTypes } from '../types/types';
4+
import { useGraphDetails } from './hooks';
65

76
import './styles.css';
87

@@ -24,45 +23,23 @@ const ScatterGraph: FC<ScatterGraphPropTypes> = ({
2423
renderValueBox,
2524
scatterPointColor
2625
}) => {
27-
// states
28-
const [pos, setPos] = useState({ x: 0, y: 0, yPlot: 0, xPlot: 0 });
29-
const [showVerticalLine, setShowVerticalLine] = useState(false);
3026

31-
// refs
32-
const parentNode = useRef<HTMLDivElement | null>(null);
33-
const yPointsRef = useRef<HTMLDivElement | null>(null);
34-
35-
const axisValues = getAxisRanges(data);
36-
37-
// hooks
38-
const graphWidth = useGraphWidthResize(parentNode);
39-
40-
// consts
41-
const textHeight = 16;
42-
43-
const graphHeightDiff = axisValues.yMax - axisValues.yMin;
44-
const graphWidthDiff = axisValues.xMax - axisValues.xMin;
45-
46-
const yPoints = Array.from(
47-
{ length: graphHeightDiff / axisValues.yInterval + 1 },
48-
(_, index) => Math.round(index * axisValues.yInterval * 1000)/1000 + axisValues.yMin);
49-
const xPoints = Array.from(
50-
{ length: graphWidthDiff / axisValues.xInterval + 1 },
51-
(_, index) => Math.round(index * axisValues.xInterval * 1000)/1000 + axisValues.xMin);
52-
53-
const yRangeDiff = (yPoints[yPoints.length - 1] - yPoints[0]);
54-
const xRangeDiff = (xPoints[xPoints.length - 1] - xPoints[0]);
55-
56-
const yRatio = graphHeight / yRangeDiff;
57-
const xRatio = graphWidth / xRangeDiff;
58-
59-
const getGraphCoordinate = (point: number, ratio: number): number => point * ratio;
60-
61-
const formattedGraphPoints = data.map((point: GraphPoint) => ({
62-
...point,
63-
yPlot: graphHeight - getGraphCoordinate(point.y, yRatio) + getGraphCoordinate(axisValues.yMin, yRatio),
64-
xPlot: getGraphCoordinate(point.x, xRatio) - getGraphCoordinate(axisValues.xMin, xRatio)
65-
}));
27+
const {
28+
pos,
29+
setPos,
30+
showVerticalLine,
31+
setShowVerticalLine,
32+
yPointsRef,
33+
textHeight,
34+
formattedGraphPoints,
35+
getGraphCoordinate,
36+
graphWidth,
37+
yPoints,
38+
xPoints,
39+
axisValues,
40+
yRatio,
41+
parentNode
42+
} = useGraphDetails(data, graphHeight);
6643

6744
return (
6845
<div style={{ position: 'relative', display: 'flex' }}>

‎src/scatter-graph/hooks.ts

Lines changed: 62 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
1-
import { useEffect, useState } from 'react';
1+
import { useEffect, useState, useRef } from 'react';
2+
import { getAxisRanges } from './utils';
3+
import { GraphPoint, GraphDetailsHookProps } from '../types/types';
24

3-
const useGraphWidthResize = (parentNode: React.MutableRefObject<HTMLDivElement | null>): number => {
5+
const useGraphDetails = (
6+
data: Array<GraphPoint>,
7+
graphHeight: number
8+
): GraphDetailsHookProps => {
9+
// states
10+
const [pos, setPos] = useState({ x: 0, y: 0, yPlot: 0, xPlot: 0 });
11+
const [showVerticalLine, setShowVerticalLine] = useState(false);
412
const [graphWidth, setGraphWidth] = useState(0);
13+
14+
// refs
15+
const parentNode = useRef<HTMLDivElement | null>(null);
16+
const yPointsRef = useRef<HTMLDivElement | null>(null);
17+
18+
const axisValues = getAxisRanges(data);
19+
520
const gutterSpacing = 30;
621

722
const getGraphParentWidth = (elem: React.MutableRefObject<HTMLDivElement | null>): number =>
@@ -15,7 +30,49 @@ const useGraphWidthResize = (parentNode: React.MutableRefObject<HTMLDivElement |
1530
window.onresize = (): void => setGraphWidth(getGraphParentWidth(parentNode));
1631
}, [parentNode]);
1732

18-
return graphWidth;
19-
};
33+
// consts
34+
const textHeight = 16;
35+
36+
const graphHeightDiff = axisValues.yMax - axisValues.yMin;
37+
const graphWidthDiff = axisValues.xMax - axisValues.xMin;
38+
39+
const yPoints = Array.from(
40+
{ length: graphHeightDiff / axisValues.yInterval + 1 },
41+
(_, index) => Math.round(index * axisValues.yInterval * 1000)/1000 + axisValues.yMin);
42+
const xPoints = Array.from(
43+
{ length: graphWidthDiff / axisValues.xInterval + 1 },
44+
(_, index) => Math.round(index * axisValues.xInterval * 1000)/1000 + axisValues.xMin);
45+
46+
const yRangeDiff = (yPoints[yPoints.length - 1] - yPoints[0]);
47+
const xRangeDiff = (xPoints[xPoints.length - 1] - xPoints[0]);
48+
49+
const yRatio = graphHeight / yRangeDiff;
50+
const xRatio = graphWidth / xRangeDiff;
51+
52+
const getGraphCoordinate = (point: number, ratio: number): number => point * ratio;
53+
54+
const formattedGraphPoints = data.map((point: GraphPoint) => ({
55+
...point,
56+
yPlot: graphHeight - getGraphCoordinate(point.y, yRatio) + getGraphCoordinate(axisValues.yMin, yRatio),
57+
xPlot: getGraphCoordinate(point.x, xRatio) - getGraphCoordinate(axisValues.xMin, xRatio)
58+
}));
59+
60+
return {
61+
pos,
62+
setPos,
63+
showVerticalLine,
64+
setShowVerticalLine,
65+
yPointsRef,
66+
textHeight,
67+
formattedGraphPoints,
68+
getGraphCoordinate,
69+
graphWidth,
70+
axisValues,
71+
yPoints,
72+
xPoints,
73+
yRatio,
74+
parentNode
75+
}
76+
}
2077

21-
export { useGraphWidthResize };
78+
export { useGraphDetails };

‎src/types/types.d.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Dispatch, SetStateAction } from 'react'
2+
13
export type GraphPoint = {
24
x: number;
35
y: number;
@@ -37,6 +39,23 @@ export type DefaultValueBoxPropTypes = {
3739
y: number
3840
}
3941

42+
export type GraphDetailsHookProps = {
43+
pos: { x: number; y: number; yPlot: number; xPlot: number };
44+
setPos: Dispatch<SetStateAction<{ x: number; y: number; yPlot: number; xPlot: number }>>;
45+
showVerticalLine: boolean;
46+
setShowVerticalLine: Dispatch<SetStateAction<boolean>>;
47+
yPointsRef: React.MutableRefObject<HTMLDivElement | null>;
48+
textHeight: number;
49+
formattedGraphPoints: FormattedGraphPoint[];
50+
getGraphCoordinate: (point: number, ratio: number) => number;
51+
graphWidth: number;
52+
yRatio: number;
53+
yPoints: number[];
54+
xPoints: number[];
55+
axisValues: AxisRanges;
56+
parentNode: React.MutableRefObject<HTMLDivElement | null>;
57+
}
58+
4059
import { FC } from 'react';
4160

4261
declare const ReactScatterGraph: FC<ScatterGraphPropTypes>;

0 commit comments

Comments
 (0)