railbird/railbird-gql
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Loewy 2024-02-13 13:38:47 -08:00
parent 8c3b745d4d
commit 3eab510f5a
3 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/component/charts/container/chart-container.tsx
View File

@ -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}

8
src/component/charts/graph-types.ts
View File

@ -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;
}

9
src/component/charts/line-graph/line-graph.tsx
View File

@ -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}
/>
</>
);
};