wip: types updated, works with x axis wrapped in container

src/component/charts/container/chart-container.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { YAxis } from "react-native-svg-charts";
-
+import { XAxis, YAxis } from "react-native-svg-charts";
 import { graphStyles } from "../chart-styles";
 import ChartView from "../chart-view";
 import { ChartContainerProps } from "../graph-types";
@@ -69,6 +68,15 @@ const ChartContainer: React.FC<ChartContainerProps> = ({
 				/>
 				<View style={graphStyles.flex}>
 					<ChartComponent {...chartComponentProps} />
+					<XAxis
+						data={xValues.map((_, index: number) => index)} // TODO: update when useGraphHook returns explicit display values
+						formatLabel={(_, index) => xValues[index]}
+						style={[graphStyles.xAxisMarginTop]}
+						svg={graphStyles.xAxisFontStyle}
+						numberOfTicks={numberOfTicks} // need a dynamic way of setting number of ticks
+						contentInset={graphStyles.horizontalInset}
+						// scale={scale.scaleBand} // Need to know the type of ChartComponent
+					/>
 				</View>
 				<YAxis
 					data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}

src/component/charts/graph-types.ts

@@ -63,7 +63,6 @@ export interface GraphProps {
  * @property {string} [testID] - Optional. Identifier for testing purposes.
  */
 export interface CommonProps {
-	data: GraphData;
 	height?: number;
 	spacingInner?: number;
 	spacingOuter?: number;
@@ -75,13 +74,16 @@ export interface CommonProps {
 	useCommonScale?: boolean;
 	yAxisProps?: YAxisProps;
 	testID?: string;
+	yData?: { data: { value: number }[]; svg: { fill: string } }[];
+	xValues?: XValue[];
 }
 /**
  * Common properties for graph render components.
  *
  * @interface ChartContainerProps
- * @property {React.FC} ChartComponent - The graph component to render
+ * @property {React.ComponentType<CommonProps>} ChartComponent - The graph component to render
  */
 export interface ChartContainerProps extends CommonProps {
-	ChartComponent?: React.FC;
+	ChartComponent: React.ComponentType<CommonProps>;
+	data: GraphData;
 }

src/component/charts/line-graph/line-graph.tsx

@@ -1,6 +1,6 @@
 import * as shape from "d3-shape";
 import React from "react";
-import { LineChart, XAxis } from "react-native-svg-charts";
+import { LineChart } from "react-native-svg-charts";
 import { graphStyles } from "../chart-styles";
 import { CustomGrid } from "../custom-grid";
 import { CommonProps } from "../graph-types";
@@ -25,13 +25,6 @@ const LineGraph: React.FC<CommonProps> = ({ ...chartComponentProps }) => {
 			>
 				<CustomGrid />
 			</LineChart>
-			<XAxis
-				data={xValues.map((_, index: number) => index)} // TODO: update when useGraphHook returns explicit display values
-				style={[graphStyles.xAxisMarginTop]}
-				svg={graphStyles.xAxisFontStyle}
-				numberOfTicks={numberOfTicks}
-				contentInset={graphStyles.horizontalInset}
-			/>
 		</>
 	);
 };