Merge pull request 'Bar Graph Render Component' (#28) from loewy/bar-graph-render into master

Reviewed-on: billnerds/rn-playground#28
Reviewed-by: Kat Huang <kkathuang@gmail.com>

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

@@ -0,0 +1,113 @@
+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 '../use-graph-data';
+import { GraphData, YAxisProps } from '../graph-types';
+
+import { CustomBars } from '../custom-bars';
+import { CustomGrid } from '../custom-grid';
+import { graphStyles } from '../chart-styles';
+import ChartView from '../chart-view';
+
+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;
+  testID?: string;
+}
+
+// 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,
+    yAxisRightLabels,
+    yAxisLeftLabels,
+    defaultProps: {
+      height,
+      spacingInner,
+      spacingOuter,
+      contentInset,
+      min,
+      numberOfTicks,
+      barColors,
+      yAxisProps: {
+        maxLeftYAxisValue,
+        maxRightYAxisValue,
+        formatRightYAxisLabel,
+        formatLeftYAxisLabel
+      }
+    }
+  // 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}`}>
+        <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 - 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}
+            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}
+        />
+      </View>
+    </ChartView>
+  );
+};
+
+export default BarGraph;

component/charts/bar.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Path } from 'react-native-svg';
 
 import { calculateBarOrigin, drawBarPath } from './custom-bar-utils';
-import { ScaleFunction } from './graph-types';
+import { ScaleBandType, ScaleLinearType, } from './graph-types';
 
 interface BarProps {
-  scaleX: ScaleFunction;
+  scaleX: ScaleBandType;
-  scaleY: ScaleFunction;
+  scaleY: ScaleLinearType;
   data: { value: number };
   barNumber: number;
   index: number;

component/charts/chart-styles.ts

@@ -13,4 +13,11 @@ export const graphStyles = StyleSheet.create({
     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 }
 });

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
@@ -19,7 +20,7 @@ export interface GraphData {
   yValues: Array<YAxisData>;
 }
 
-interface YAxisProps {
+export interface YAxisProps {
   maxLeftYAxisValue?: number;
   maxRightYAxisValue?: number;
   selectedLeftYAxisLabel?: string;
@@ -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,8 @@
         "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"
     },
     "devDependencies": {
@@ -46,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

styles.ts

@@ -1,3 +1,6 @@
+// GLOBAL STYLES
+// COLORS:
+// can be made more granular to specify utility (ex: fontColors vs backgroundColors)
 export const colors = {
   bgBlack: '#121212',
   lightGrey: '#BFC2C8',
@@ -20,4 +23,4 @@ export const shadows = {
     shadowRadius: 4.65,
     elevation: 3
   },
-};
+};

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/chart-view.test.tsx

@@ -26,7 +26,6 @@ describe('ChartView Component Tests', () => {
     );
 
     const childText = getByText('Child Component');
-    console.log(childText)
     expect(childText).toBeTruthy();
   });
 });

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}