wip: minor changes
This commit is contained in:
Loewy
parent
db9475cf3b
commit
8c3b745d4d
91
src/component/charts/container/chart-container.tsx
Normal file
91
src/component/charts/container/chart-container.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
import { YAxis } from "react-native-svg-charts";
|
||||
|
||||
import { graphStyles } from "../chart-styles";
|
||||
import ChartView from "../chart-view";
|
||||
import { ChartContainerProps } from "../graph-types";
|
||||
import { useGraphData } from "../use-graph-data";
|
||||
|
||||
// TODO: separate PR will update useGraphData to take into account useCommonScale
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
const ChartContainer: React.FC<ChartContainerProps> = ({
|
||||
ChartComponent,
|
||||
data,
|
||||
useCommonScale = false,
|
||||
testID,
|
||||
...props
|
||||
}) => {
|
||||
if (!data || typeof data !== "object") {
|
||||
return null;
|
||||
} // TODO:#38
|
||||
const {
|
||||
xValues,
|
||||
yData,
|
||||
yAxisLeftLabels,
|
||||
yAxisRightLabels,
|
||||
defaultProps: {
|
||||
height,
|
||||
contentInset,
|
||||
min,
|
||||
numberOfTicks,
|
||||
lineStrokeWidth,
|
||||
yAxisProps: {
|
||||
maxLeftYAxisValue,
|
||||
maxRightYAxisValue,
|
||||
formatLeftYAxisLabel,
|
||||
formatRightYAxisLabel,
|
||||
},
|
||||
},
|
||||
// Proper error/loading handling from useQueryHandler can work with this rule #38
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
} = useGraphData(data, props);
|
||||
|
||||
// TODO: This could be done by the hook since it already handles spreading props.
|
||||
// Depending on if we want a context provider for Charts, that could be another way to handle it
|
||||
const chartComponentProps = {
|
||||
yData,
|
||||
xValues,
|
||||
lineStrokeWidth,
|
||||
min,
|
||||
contentInset,
|
||||
numberOfTicks,
|
||||
};
|
||||
return (
|
||||
<ChartView>
|
||||
<View
|
||||
style={[graphStyles.rowContainer, { height: height }]}
|
||||
testID={`line-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}>
|
||||
<ChartComponent {...chartComponentProps} />
|
||||
</View>
|
||||
<YAxis
|
||||
data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}
|
||||
contentInset={contentInset}
|
||||
svg={graphStyles.yAxisFontStyle}
|
||||
style={[
|
||||
graphStyles.yAxisRightPadding,
|
||||
{ height: useCommonScale ? 0 : "auto" },
|
||||
]}
|
||||
min={min}
|
||||
max={maxRightYAxisValue}
|
||||
numberOfTicks={numberOfTicks}
|
||||
formatLabel={formatRightYAxisLabel}
|
||||
/>
|
||||
</View>
|
||||
</ChartView>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChartContainer;
|
||||
@ -76,3 +76,12 @@ export interface CommonProps {
|
||||
yAxisProps?: YAxisProps;
|
||||
testID?: string;
|
||||
}
|
||||
/**
|
||||
* Common properties for graph render components.
|
||||
*
|
||||
* @interface ChartContainerProps
|
||||
* @property {React.FC} ChartComponent - The graph component to render
|
||||
*/
|
||||
export interface ChartContainerProps extends CommonProps {
|
||||
ChartComponent?: React.FC;
|
||||
}
|
||||
|
||||
@ -1,102 +1,38 @@
|
||||
import * as shape from "d3-shape";
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
import { LineChart, XAxis, YAxis } from "react-native-svg-charts";
|
||||
|
||||
import { LineChart, XAxis } from "react-native-svg-charts";
|
||||
import { graphStyles } from "../chart-styles";
|
||||
import ChartView from "../chart-view";
|
||||
import { CustomGrid } from "../custom-grid";
|
||||
import { CommonProps } from "../graph-types";
|
||||
import { useGraphData } from "../use-graph-data";
|
||||
|
||||
// TODO: separate PR will update useGraphData to take into account useCommonScale
|
||||
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
|
||||
const LineGraph: React.FC<CommonProps> = ({
|
||||
data,
|
||||
useCommonScale = false,
|
||||
testID,
|
||||
...props
|
||||
}) => {
|
||||
if (!data || typeof data !== "object") {
|
||||
return null;
|
||||
} // TODO:#38
|
||||
const {
|
||||
xValues,
|
||||
yData,
|
||||
yAxisLeftLabels,
|
||||
yAxisRightLabels,
|
||||
defaultProps: {
|
||||
height,
|
||||
contentInset,
|
||||
min,
|
||||
numberOfTicks,
|
||||
lineStrokeWidth,
|
||||
yAxisProps: {
|
||||
maxLeftYAxisValue,
|
||||
maxRightYAxisValue,
|
||||
formatLeftYAxisLabel,
|
||||
formatRightYAxisLabel,
|
||||
},
|
||||
},
|
||||
// Proper error/loading handling from useQueryHandler can work with this rule #38
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
} = useGraphData(data, props);
|
||||
|
||||
const LineGraph: React.FC<CommonProps> = ({ ...chartComponentProps }) => {
|
||||
const { yData, xValues, lineStrokeWidth, min, contentInset, numberOfTicks } =
|
||||
chartComponentProps;
|
||||
return (
|
||||
<ChartView>
|
||||
<View
|
||||
style={[graphStyles.rowContainer, { height: height }]}
|
||||
testID={`line-graph-${testID}`}
|
||||
<>
|
||||
<LineChart
|
||||
style={graphStyles.flex}
|
||||
data={yData}
|
||||
curve={shape.curveNatural}
|
||||
svg={{ strokeWidth: lineStrokeWidth }}
|
||||
yAccessor={({ item }) => (item as unknown as { value: number }).value}
|
||||
xAccessor={({ index }) => xValues[index] as number}
|
||||
gridMin={min}
|
||||
contentInset={contentInset}
|
||||
numberOfTicks={numberOfTicks}
|
||||
>
|
||||
<YAxis
|
||||
data={yAxisLeftLabels.values}
|
||||
contentInset={contentInset}
|
||||
svg={graphStyles.yAxisFontStyle}
|
||||
style={graphStyles.yAxisLeftPadding}
|
||||
min={min}
|
||||
max={maxLeftYAxisValue}
|
||||
numberOfTicks={numberOfTicks}
|
||||
formatLabel={formatLeftYAxisLabel}
|
||||
/>
|
||||
<View style={graphStyles.flex}>
|
||||
<LineChart
|
||||
style={graphStyles.flex}
|
||||
data={yData}
|
||||
curve={shape.curveNatural}
|
||||
svg={{ strokeWidth: lineStrokeWidth }}
|
||||
yAccessor={({ item }) =>
|
||||
(item as unknown as { value: number }).value
|
||||
}
|
||||
xAccessor={({ index }) => xValues[index] as number}
|
||||
gridMin={min}
|
||||
contentInset={contentInset}
|
||||
numberOfTicks={numberOfTicks}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
</View>
|
||||
<YAxis
|
||||
data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}
|
||||
contentInset={contentInset}
|
||||
svg={graphStyles.yAxisFontStyle}
|
||||
style={[
|
||||
graphStyles.yAxisRightPadding,
|
||||
{ height: useCommonScale ? 0 : "auto" },
|
||||
]}
|
||||
min={min}
|
||||
max={maxRightYAxisValue}
|
||||
numberOfTicks={numberOfTicks}
|
||||
formatLabel={formatRightYAxisLabel} // formatRightYAxisLabel formatting could come from yAxisRightLabels object
|
||||
/>
|
||||
</View>
|
||||
</ChartView>
|
||||
<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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, View } from "react-native";
|
||||
import { graph_data_two_measures } from "../../test/mock/charts/mock-data";
|
||||
import BarGraph from "../component/charts/bar-graph/bar-graph";
|
||||
import { line_chart_two_y_data } from "../../test/mock/charts/mock-data";
|
||||
import ChartContainer from "../component/charts/container/chart-container";
|
||||
import LineGraph from "../component/charts/line-graph/line-graph";
|
||||
|
||||
// Session Mock - can be used for session summary screen using a query handler component
|
||||
// BarGraph component using mocked data currently
|
||||
export default function SessionScreen() {
|
||||
return (
|
||||
<View style={StyleSheet.absoluteFill}>
|
||||
<BarGraph data={graph_data_two_measures} />
|
||||
<ChartContainer data={line_chart_two_y_data} ChartComponent={LineGraph} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user