add code, bring over chart view and pr first

component/charts/bar-graph/bar-graph.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+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 { GraphData, YAxisProps } from '../graph-types';
+
+import { CustomBars } from '../custom-bars';
+import { CustomGrid } from '../custom-grid';
+import { graphStyles } from '../../../styles';
+
+interface Props {
+  data: GraphData;
+  height?: number;
+  spacingInner?: number;
+  spacingOuter?: number;
+  contentInset?: { top: number; bottom: number };
+  min?: number;
+  numberOfTicks?: number;
+  barColors?: Array<string>;
+  useCommonScale?: boolean;
+  yAxisProps?: YAxisProps;
+}
+
+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
+  const {
+    xValues,
+    yData,
+    yAxisRightLabels,
+    yAxisLeftLabels,
+    defaultProps: {
+      height,
+      spacingInner,
+      spacingOuter,
+      contentInset,
+      min,
+      numberOfTicks,
+      barColors,
+      yAxisProps: {
+        maxLeftYAxisValue,
+        maxRightYAxisValue,
+        formatRightYAxisLabel,
+        formatLeftYAxisLabel
+      }
+    }
+  } = useGraphData(data, props, useCommonScale);
+
+  return (
+    <ChartView>
+      <View style={[graphStyles.rowContainer, { height: height }]}>
+        <YAxis
+          data={yAxisLeftLabels.values}
+          contentInset={contentInset}
+          svg={graphStyles.yAxisFontStyle}
+          style={graphStyles.yAxisLeftPadding}
+          min={min}
+          max={maxLeftYAxisValue}
+          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
+            yAccessor={({ item }) => (item as unknown as { value: number }).value}
+            contentInset={contentInset}
+            spacingInner={spacingInner}
+            spacingOuter={spacingOuter}
+          >
+            <CustomGrid />
+            <CustomBars barData={yData} xValues={xValues} barColors={barColors} />
+          </BarChart>
+          <XAxis
+            data={xValues.map((_, index) => index)}
+            formatLabel={(_, index) => xValues[index]}
+            style={graphStyles.xAxisMarginTop}
+            svg={graphStyles.xAxisFontStyle}
+            scale={scale.scaleBand}
+          />
+        </View>
+        <YAxis
+          data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}
+          contentInset={contentInset}
+          svg={graphStyles.yAxisFontStyle}
+          style={graphStyles.yAxisRightPadding}
+          min={min}
+          max={maxRightYAxisValue}
+          numberOfTicks={numberOfTicks}
+          formatLabel={formatRightYAxisLabel} // formatRightYAxisLabel formatting could come from yAxisRightLabels object
+        />
+      </View>
+    </ChartView>
+  );
+};
+
+export default BarGraph;

component/charts/graph-types.ts

@@ -19,7 +19,7 @@ export interface GraphData {
   yValues: Array<YAxisData>;
 }
 
-interface YAxisProps {
+export interface YAxisProps {
   maxLeftYAxisValue?: number;
   maxRightYAxisValue?: number;
   selectedLeftYAxisLabel?: string;