From 7faa25e10341a649aea8a673c127bbc76fad3524 Mon Sep 17 00:00:00 2001 From: Loewy Date: Fri, 12 Jan 2024 16:21:40 -0800 Subject: [PATCH] update types/naming to reflect intended usage for useGraphData hook --- component/charts/graph-types.ts | 12 +++++++----- component/charts/graph-utils.tsx | 6 +++--- component/charts/use-graph-data.ts | 20 ++++++++++---------- test/component/use-graph-data.test.tsx | 14 +++++++------- 4 files changed, 27 insertions(+), 25 deletions(-) diff --git a/component/charts/graph-types.ts b/component/charts/graph-types.ts index e7b6178..35aaa49 100644 --- a/component/charts/graph-types.ts +++ b/component/charts/graph-types.ts @@ -3,8 +3,8 @@ import { ScaleLinear } from 'd3-scale' export type ScaleFunction = ScaleLinear; export interface YAxisData { - key: string; // string value for ChartLabel component - values: number[]; + key: string; // string value for ChartLabel and useGraphData + values: Array; // including this code only for review -- // do we prefer the idea of passing label formatting from the data or in the component? // generic function type, specific usage of value varies @@ -12,9 +12,11 @@ export interface YAxisData { formatLabel?: (value: number) => string; } +export type XValue = string | number + export interface GraphData { - xValues: string[]; - yValues: YAxisData[]; + xValues: Array; + yValues: Array; } interface YAxisProps { @@ -29,7 +31,7 @@ interface YAxisProps { // eslint-disable-next-line no-unused-vars formatLeftYAxisLabel?: (value: string) => string; } -export interface Props { +export interface GraphProps { data: GraphData; height?: number; spacingInner?: number; diff --git a/component/charts/graph-utils.tsx b/component/charts/graph-utils.tsx index fafc21d..b114f03 100644 --- a/component/charts/graph-utils.tsx +++ b/component/charts/graph-utils.tsx @@ -1,7 +1,7 @@ import { GraphData } from "./graph-types"; -export const convertToBarData = ( +export const convertToGraphData = ( graphData: GraphData, options: { selectedLeftYAxisLabel?: string; @@ -19,7 +19,7 @@ export const convertToBarData = ( ); // scale data points according to max value - const barData = graphData.yValues.map((yAxis, index) => { + const yData = graphData.yValues.map((yAxis, index) => { const maxValue = index === rightAxisIndex ? options.maxRightYAxisValue : options.maxLeftYAxisValue; @@ -36,5 +36,5 @@ export const convertToBarData = ( const yAxisLeftLabels = leftAxisIndex !== -1 ? graphData.yValues[leftAxisIndex] : null; const yAxisRightLabels = rightAxisIndex !== -1 ? graphData.yValues[rightAxisIndex] : undefined; - return { barData, yAxisLeftLabels, yAxisRightLabels, xValues }; + return { yData, yAxisLeftLabels, yAxisRightLabels, xValues }; }; diff --git a/component/charts/use-graph-data.ts b/component/charts/use-graph-data.ts index f9586ce..892e93d 100644 --- a/component/charts/use-graph-data.ts +++ b/component/charts/use-graph-data.ts @@ -1,14 +1,14 @@ import { useMemo } from 'react'; -import { convertToBarData } from './graph-utils'; +import { convertToGraphData } from './graph-utils'; import { chartDefaults } from './graph-config'; -import { GraphData, Props, YAxisData } from './graph-types'; +import { GraphData, GraphProps, XValue, YAxisData } from './graph-types'; interface useGraphDataInterface { - xValues: Array; - barData: { + xValues: Array; + yData: { data: { value: number; }[]; @@ -18,13 +18,13 @@ interface useGraphDataInterface { }[]; yAxisLeftLabels: YAxisData; yAxisRightLabels: YAxisData; - defaultProps: Partial; + defaultProps: Partial; } // this version assumes string values for X, this isn't necessarily the case -// convertToBarData is specifically tailored to bar/group bar graphs +// convertToGraphData is specifically tailored to bar/group bar graphs // ultimately this component could be used by any x & y axis graph types (line/bar/scatter) -export const useGraphData = (graphData: GraphData, props: Partial): useGraphDataInterface => { +export const useGraphData = (graphData: GraphData, props: Partial): useGraphDataInterface => { const { yAxisProps = {}, ...otherProps } = props; const defaultProps = { ...chartDefaults, @@ -42,14 +42,14 @@ export const useGraphData = (graphData: GraphData, props: Partial): useGr } }; - const { barData, yAxisLeftLabels, yAxisRightLabels, xValues } = useMemo( - () => convertToBarData(graphData, defaultProps.yAxisProps), + const { yData, yAxisLeftLabels, yAxisRightLabels, xValues } = useMemo( + () => convertToGraphData(graphData, defaultProps.yAxisProps), [graphData, defaultProps.yAxisProps] ); return { xValues, - barData, + yData, yAxisLeftLabels, yAxisRightLabels, defaultProps diff --git a/test/component/use-graph-data.test.tsx b/test/component/use-graph-data.test.tsx index 6455db0..81f03a6 100644 --- a/test/component/use-graph-data.test.tsx +++ b/test/component/use-graph-data.test.tsx @@ -1,9 +1,9 @@ import { renderHook } from '@testing-library/react-native'; import { useGraphData } from '../../component/charts/use-graph-data'; -import { GraphData, Props } from '../../component/charts/graph-types'; +import { GraphData, GraphProps } from '../../component/charts/graph-types'; describe('useGraphData', () => { - it('should return correctly processed data from convertToBarData', () => { + it('should return correctly processed data from convertToGraphData', () => { // mock values const mockGraphData: GraphData = { xValues: ['full hit', '3/4 ball ball', '1/2 ball'], @@ -13,7 +13,7 @@ describe('useGraphData', () => { ] }; - const mockProps: Partial = { + const mockProps: Partial = { yAxisProps: { maxLeftYAxisValue: 30, maxRightYAxisValue: 60, @@ -27,7 +27,7 @@ describe('useGraphData', () => { const { result } = renderHook(() => useGraphData(mockGraphData, mockProps)); // values expected - const expectedBarData = [ + const expectedYData = [ { data: [{ value: 33.33 }, { value: 66.67 }, { value: 100 }], svg: { fill: 'transparent' }, @@ -43,9 +43,9 @@ describe('useGraphData', () => { expect(result.current).toBeDefined(); expect(result.current.xValues).toEqual(['full hit', '3/4 ball ball', '1/2 ball']); - result.current.barData.forEach((barDataItem, index) => { - barDataItem.data.forEach((dataItem, dataIndex) => { - expect(dataItem.value).toBeCloseTo(expectedBarData[index].data[dataIndex].value, 2); + result.current.yData.forEach((yDataItem, index) => { + yDataItem.data.forEach((dataItem, dataIndex) => { + expect(dataItem.value).toBeCloseTo(expectedYData[index].data[dataIndex].value, 2); }); }); expect(result.current.yAxisLeftLabels).toEqual(expectedLeftLabels);