update types/naming to reflect intended usage for useGraphData hook

component/charts/graph-types.ts

@@ -3,8 +3,8 @@ import { ScaleLinear } from 'd3-scale'
 export type ScaleFunction = ScaleLinear<number, number>;
 
 export interface YAxisData {
-  key: string; // string value for ChartLabel component
+  key: string; // string value for ChartLabel and useGraphData
-  values: number[];
+  values: Array<number>;
   // 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[];
+  xValues: Array<XValue>;
-  yValues: YAxisData[];
+  yValues: Array<YAxisData>;
 }
 
 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;

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 };
 };

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<string>;
+  xValues: Array<XValue>;
-  barData: {
+  yData: {
       data: {
           value: number;
       }[];
@@ -18,13 +18,13 @@ interface useGraphDataInterface {
   }[];
   yAxisLeftLabels: YAxisData;
   yAxisRightLabels: YAxisData;
-  defaultProps: Partial<Props>;
+  defaultProps: Partial<GraphProps>;
 }
 
 // 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<Props>): useGraphDataInterface => {
+export const useGraphData = (graphData: GraphData, props: Partial<GraphProps>): useGraphDataInterface => {
   const { yAxisProps = {}, ...otherProps } = props;
   const defaultProps = {
     ...chartDefaults,
@@ -42,14 +42,14 @@ export const useGraphData = (graphData: GraphData, props: Partial<Props>): useGr
     }
   };
 
-  const { barData, yAxisLeftLabels, yAxisRightLabels, xValues } = useMemo(
+  const { yData, yAxisLeftLabels, yAxisRightLabels, xValues } = useMemo(
-    () => convertToBarData(graphData, defaultProps.yAxisProps),
+    () => convertToGraphData(graphData, defaultProps.yAxisProps),
     [graphData, defaultProps.yAxisProps]
   );
 
   return {
     xValues,
-    barData,
+    yData,
     yAxisLeftLabels,
     yAxisRightLabels,
     defaultProps

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<Props> = {
+    const mockProps: Partial<GraphProps> = {
       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) => {
+    result.current.yData.forEach((yDataItem, index) => {
-      barDataItem.data.forEach((dataItem, dataIndex) => {
+      yDataItem.data.forEach((dataItem, dataIndex) => {
-        expect(dataItem.value).toBeCloseTo(expectedBarData[index].data[dataIndex].value, 2);
+        expect(dataItem.value).toBeCloseTo(expectedYData[index].data[dataIndex].value, 2);
       });
     });
     expect(result.current.yAxisLeftLabels).toEqual(expectedLeftLabels);