railbird/railbird-gql
8
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 React from "react";
import { View } from "react-native"; 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 { graphStyles } from "../chart-styles";
import ChartView from "../chart-view"; import ChartView from "../chart-view";
import { ChartContainerProps } from "../graph-types"; import { ChartContainerProps } from "../graph-types";
@ -69,6 +68,15 @@ const ChartContainer: React.FC<ChartContainerProps> = ({
/> />
<View style={graphStyles.flex}> <View style={graphStyles.flex}>
<ChartComponent {...chartComponentProps} /> <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> </View>
<YAxis <YAxis
data={yAxisRightLabels?.values ?? yAxisLeftLabels.values} 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. * @property {string} [testID] - Optional. Identifier for testing purposes.
*/ */
export interface CommonProps { export interface CommonProps {
data: GraphData;
height?: number; height?: number;
spacingInner?: number; spacingInner?: number;
spacingOuter?: number; spacingOuter?: number;
@ -75,13 +74,16 @@ export interface CommonProps {
useCommonScale?: boolean; useCommonScale?: boolean;
yAxisProps?: YAxisProps; yAxisProps?: YAxisProps;
testID?: string; testID?: string;
yData?: { data: { value: number }[]; svg: { fill: string } }[];
xValues?: XValue[];
} }
/** /**
* Common properties for graph render components. * Common properties for graph render components.
* *
* @interface ChartContainerProps * @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 { 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 * as shape from "d3-shape";
import React from "react"; 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 { graphStyles } from "../chart-styles";
import { CustomGrid } from "../custom-grid"; import { CustomGrid } from "../custom-grid";
import { CommonProps } from "../graph-types"; import { CommonProps } from "../graph-types";
@ -25,13 +25,6 @@ const LineGraph: React.FC<CommonProps> = ({ ...chartComponentProps }) => {
> >
<CustomGrid /> <CustomGrid />
</LineChart> </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}
/>
</> </>
); );
}; };