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;

package.json

@@ -38,6 +38,7 @@
         "react-native": "0.72.6",
         "react-native-dotenv": "^3.4.9",
         "react-native-svg": "^14.1.0",
+        "react-native-svg-charts": "^5.4.0",
         "typescript": "^5.3.3"
     },
     "devDependencies": {

styles.ts

@@ -1,3 +1,7 @@
+import { StyleSheet } from 'react-native';
+// GLOBAL STYLES
+// COLORS:
+// can be made more granular to specify utility (ex: fontColors vs backgroundColors)
 export const colors = {
   bgBlack: '#121212',
   lightGrey: '#BFC2C8',
@@ -8,3 +12,37 @@ export const colors = {
   buttonBlue: '#1987ff',
   textWhite: '#ffffff'
 };
+
+export const shadows = {
+  standard: {
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 3
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4.65,
+    elevation: 3
+  },
+};
+
+export const graphStyles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.panelWhite,
+    borderColor: 'black',
+    borderRadius: 5,
+    marginVertical: 10,
+    marginHorizontal: 15,
+    paddingTop: 15,
+    paddingHorizontal: 15,
+    ...shadows.standard
+  },
+  rowContainer: { flexDirection: 'row', padding: 10 },
+  flex: { flex: 1 },
+  yAxisLeftPadding: { paddingRight: 3 },
+  yAxisRightPadding: { paddingLeft: 3 },
+  yAxisFontStyle: { fontSize: 10, fill: 'grey' },
+  xAxisFontStyle: { fontSize: 12, fill: 'black' },
+  xAxisMarginTop: { marginTop: -15 }
+});
+

yarn.lock

@@ -3681,13 +3681,25 @@ d3-format@1:
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
   integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
 
-d3-interpolate@1:
+d3-interpolate-path@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/d3-interpolate-path/-/d3-interpolate-path-2.0.0.tgz#cb0327314fedb14e6ea1789ab7e095a16c2f8ab2"
+  integrity sha512-q7Wqn0CoWpMfrvTqoLvD099MMqeKRE0jKY3MzruePkZoD5hYzJ8xbGadGDRkq0xjiX0hxpr0Jtt92iOYFt600A==
+  dependencies:
+    d3-interpolate "^1.1.1"
+
+d3-interpolate@1, d3-interpolate@^1.1.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987"
   integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==
   dependencies:
     d3-color "1"
 
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
 d3-path@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
@@ -3706,6 +3718,26 @@ d3-scale@1.0.6:
     d3-time "1"
     d3-time-format "2"
 
+d3-scale@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d"
+  integrity sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "1"
+    d3-color "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
+d3-shape@^1.0.6:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
 d3-time-format@2:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.3.0.tgz#107bdc028667788a8924ba040faf1fbccd5a7850"
@@ -7483,7 +7515,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@*, prop-types@^15.6.0, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7599,6 +7631,17 @@ react-native-dotenv@^3.4.9:
   dependencies:
     dotenv "^16.3.1"
 
+react-native-svg-charts@^5.4.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg-charts/-/react-native-svg-charts-5.4.0.tgz#3817a4714c276b7024e60ae5c9f13191614aecc8"
+  integrity sha512-5TaIGSihJaHCGFj32Tc07hZrqqTpvdyAx89PIrW2nLf2tijd61+3UE3jtsiHOvfeAyDgSTWjv6s9qG9d2di7Pw==
+  dependencies:
+    d3-array "^1.2.0"
+    d3-interpolate-path "2.0.0"
+    d3-scale "^1.0.6"
+    d3-shape "^1.0.6"
+    prop-types "^15.6.0"
+
 react-native-svg@^14.1.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.1.0.tgz#7903bddd3c71bf3a8a503918253c839e6edaa724"