add bar graph, make changes to customgrid and custombars to match new structure

component/charts/bar-graph/bar-graph.tsx

@@ -3,8 +3,7 @@ import * as scale from 'd3-scale';
 import { View } from 'react-native';
 import { BarChart, XAxis, YAxis } from 'react-native-svg-charts';
 
-import { useGraphData } from '../../../hooks/charts/useGraphData';
+import { useGraphData } from '../use-graph-data';
-import ChartView from '../ChartView';
 import { GraphData, YAxisProps } from '../graph-types';
 
 import { CustomBars } from '../custom-bars';
@@ -22,10 +21,15 @@ interface Props {
   barColors?: Array<string>;
   useCommonScale?: boolean;
   yAxisProps?: YAxisProps;
+  testID?: string;
 }
 
-export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, ...props }) => {
+// TODO: separate PR will update useGraphData to take into account useCommonScale
-  if (!data || typeof data !== 'object') return null; // TODO: replace when we have error/loading context from useQueryHandler
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID, ...props }) => {
+  if (!data) {
+    return null
+  }
   const {
     xValues,
     yData,
@@ -46,11 +50,14 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, ...pro
         formatLeftYAxisLabel
       }
     }
-  } = useGraphData(data, props, useCommonScale);
+  // Proper error/loading handling from useQueryHandler can work with this rule
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  } = useGraphData(data, props);
+
+  
 
   return (
-    <ChartView>
+      <View style={[graphStyles.rowContainer, { height: height }]} testID={`bar-graph-${testID}`}>
-      <View style={[graphStyles.rowContainer, { height: height }]}>
         <YAxis
           data={yAxisLeftLabels.values}
           contentInset={contentInset}
@@ -61,13 +68,14 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, ...pro
           numberOfTicks={numberOfTicks}
           formatLabel={formatLeftYAxisLabel}
         />
+
         <View style={graphStyles.flex}>
           <BarChart
             style={graphStyles.flex}
             data={yData}
             gridMin={min}
-            svg={{ stroke: 'transparent' }} // might want to do the transparent from here?
+            svg={{ stroke: 'transparent' }} // might want to do the transparent from here - if so may be best built as coming from defaultConfig
-            numberOfTicks={numberOfTicks} // rethink numberOfTicks, it should be determined automatically if we do our y axis scaling proper
+            numberOfTicks={numberOfTicks} // rethink numberOfTicks, it should be determined automatically if we do our y axis scaling properly
             yAccessor={({ item }) => (item as unknown as { value: number }).value}
             contentInset={contentInset}
             spacingInner={spacingInner}
@@ -84,6 +92,7 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, ...pro
             scale={scale.scaleBand}
           />
         </View>
+
         <YAxis
           data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}
           contentInset={contentInset}
@@ -92,10 +101,9 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, ...pro
           min={min}
           max={maxRightYAxisValue}
           numberOfTicks={numberOfTicks}
-          formatLabel={formatRightYAxisLabel} // formatRightYAxisLabel formatting could come from yAxisRightLabels object
+          formatLabel={formatRightYAxisLabel}
         />
       </View>
-    </ChartView>
   );
 };
 

component/charts/custom-bar-utils.ts

@@ -1,10 +1,10 @@
 import { path as d3 } from 'd3-path';
 
-import { ScaleFunction } from './graph-types';
+import { ScaleLinearType, ScaleBandType } from './graph-types';
 
 type BarCalculationProps = {
-  scaleX: ScaleFunction;
+  scaleX: ScaleBandType;
-  scaleY: ScaleFunction;
+  scaleY: ScaleLinearType;
   data: { value: number };
   barNumber: number;
   index: number;

component/charts/custom-bars.tsx

@@ -2,7 +2,7 @@
 import { Svg } from 'react-native-svg';
 
 import { Bar } from './bar';
-import { ScaleFunction } from './graph-types';
+import { ScaleBandType, ScaleLinearType } from './graph-types';
 import { calculateBarWidth } from './custom-bar-utils';
 
 export interface CombinedData {
@@ -11,38 +11,38 @@ export interface CombinedData {
 }
 
 interface CustomBarsProps {
-  x: ScaleFunction;
+  x: ScaleBandType;
-  y: ScaleFunction;
+  y: ScaleLinearType;
   bandwidth: number;
   barColors: string[];
-  rawData: unknown[]; // TODO: update this value when this data type is defined
+  xValues: unknown[]; // TODO: update this value when this data type is defined
-  combinedData: CombinedData[];
+  barData: CombinedData[];
   gap: number;
   roundedRadius: number;
 }
 
-export const CustomBars: React.FC<CustomBarsProps> = ({
+export const CustomBars: React.FC<Partial<CustomBarsProps>> = ({
   x: scaleX,
   y: scaleY,
   bandwidth,
-  combinedData,
+  barData,
-  rawData,
+  xValues,
   barColors,
   gap = 2,
   roundedRadius = 4
 }) => {
-  const barWidth = calculateBarWidth(bandwidth, combinedData.length, gap);
+  const barWidth = calculateBarWidth(bandwidth, barData.length, gap);
 
-  return rawData.map((_, index) => (
+  return xValues.map((_, index) => (
     <Svg key={`group-${index}`} testID={`svg-${index}`}>
-      {combinedData.map((item, i) => (
+      {barData.map((item, i) => (
         <Bar
           key={`bar-${i}-${index}`}
           scaleX={scaleX}
           scaleY={scaleY}
           data={item.data[index]}
-          barNumber={i} // index of bar
+          barNumber={i}
-          index={index} // index of group
+          index={index}
           fill={barColors[i]}
           barWidth={barWidth}
           gap={gap}

component/charts/custom-grid.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { G, Line } from 'react-native-svg';
 import { colors } from '../../styles';
-import { ScaleFunction } from './graph-types';
+import { ScaleLinearType } from './graph-types';
 
 interface CustomGridProps {
-  y: ScaleFunction;
+  y: ScaleLinearType;
   ticks: Array<number>;
 }
 
-export const CustomGrid: React.FC<CustomGridProps> = ({ y, ticks }) => {
+export const CustomGrid: React.FC<Partial<CustomGridProps>> = ({ y, ticks }) => {
   const [firstTick, ...remainingTicks] = ticks;
   const dashArray = [1, 3];
   const strokeSolidWidth = 0.2;

component/charts/graph-types.ts

@@ -1,6 +1,7 @@
-import { ScaleLinear } from 'd3-scale'
+import { ScaleBand, ScaleLinear } from 'd3-scale'
 
-export type ScaleFunction = ScaleLinear<number, number>;
+export type ScaleLinearType = ScaleLinear<number, number>;
+export type ScaleBandType = ScaleBand<number | string>;
 
 export interface YAxisData {
   key: string; // string value for ChartLabel and useGraphData
@@ -40,5 +41,6 @@ export interface GraphProps {
   min?: number;
   numberOfTicks?: number;
   barColors?: Array<string>;
+  useCommonScale?: boolean;
   yAxisProps?: YAxisProps;
 }

mock/charts/mock-data.ts

@@ -0,0 +1,41 @@
+export const graph_data_one_measures = {
+  xValues: ['x_1', 'x_2', 'x_3', 'x_4', 'x_5'],
+  yValues: [
+    {
+      key: 'measure_1',
+      values: [100, 140, 90, 80, 40]
+    }
+  ]
+};
+export const graph_data_two_measures = {
+  xValues: ['x_1', 'x_2', 'x_3', 'x_4', 'x_5'],
+  yValues: [
+    {
+      key: 'measure_1',
+      values: [100, 140, 90, 80, 40]
+    },
+    {
+      key: 'measure_2',
+      values: [78, 82, 73, 56, 61],
+      formatLabel: (value: number) => `${value}%`
+    }
+  ]
+};
+export const graph_data_three_measures = {
+  xValues: ['x_1', 'x_2', 'x_3', 'x_4', 'x_5'],
+  yValues: [
+    {
+      key: 'measure_1',
+      values: [100, 140, 90, 80, 40]
+    },
+    {
+      key: 'measure_2',
+      values: [78, 82, 73, 56, 61],
+      formatLabel: (value: number) => `${value}%`
+    },
+    {
+      key: 'measure_3',
+      values: [77, 32, 45, 65, 50]
+    }
+  ]
+};

package.json

@@ -14,7 +14,7 @@
     "jest": {
         "preset": "jest-expo",
         "transformIgnorePatterns": [
-            "node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|d3-path)/)"
+            "node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|react-native-svg-charts|d3-path)/)"
         ]
     },
     "dependencies": {
@@ -24,7 +24,7 @@
         "@typescript-eslint/parser": "^6.17.0",
         "babel-plugin-inline-dotenv": "^1.7.0",
         "d3-path": "^3.1.0",
-        "d3-scale": "1.0.6",
+        "d3-scale": "^1.0.6",
         "eslint": "^8.56.0",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -37,7 +37,7 @@
         "react": "18.2.0",
         "react-native": "0.72.6",
         "react-native-dotenv": "^3.4.9",
-        "react-native-svg": "^14.1.0",
+        "react-native-svg": "13.9.0",
         "react-native-svg-charts": "^5.4.0",
         "typescript": "^5.3.3"
     },
@@ -47,6 +47,7 @@
         "@testing-library/react-native": "^12.4.3",
         "@types/d3-path": "^3.0.2",
         "@types/jest": "^29.5.11",
+        "@types/react-native-svg-charts": "^5.0.16",
         "eslint-config-prettier": "^9.1.0"
     },
     "private": true

test/component/bar-graph.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import BarGraph from '../../component/charts/bar-graph/bar-graph';
+import { graph_data_two_measures } from '../../mock/charts/mock-data';
+
+describe('BarGraph Component Tests', () => {
+
+  it('renders correctly with data', () => {
+    const { getByTestId } = render(<BarGraph data={graph_data_two_measures} testID='1'/>);
+    expect(getByTestId(`bar-graph-1`)).toBeTruthy();
+  });
+
+  it('does not render without data', () => {
+    // Have to ts-ignore to test null data conditions
+    // @ts-ignore
+    const { queryByTestId } = render(<BarGraph testID='2'/>);
+    expect(queryByTestId(`bar-graph-2`)).toBeNull();
+  });
+
+});

test/component/custom-bars.test.tsx

@@ -29,8 +29,8 @@ describe('CustomBars Component Tests', () => {
         x={mockXScaleFunction}
         y={mockYScaleFunction}
         bandwidth={mockBandwidth}
-        combinedData={mockCombinedData}
+        barData={mockCombinedData}
-        rawData={mockRawData}
+        xValues={mockRawData}
         barColors={mockBarColors}
         gap={mockGap}
         roundedRadius={mockRoundedRadius}