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 ChartView from '../ChartView';
+import { useGraphData } from '../use-graph-data';
 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 }) => {
-  if (!data || typeof data !== 'object') return null; // TODO: replace when we have error/loading context from useQueryHandler
+// TODO: separate PR will update useGraphData to take into account useCommonScale
+// 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 }]}>
+      <View style={[graphStyles.rowContainer, { height: height }]} testID={`bar-graph-${testID}`}>
         <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?
-            numberOfTicks={numberOfTicks} // rethink numberOfTicks, it should be determined automatically if we do our y axis scaling proper
+            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 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>
   );
 };