91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import * as shape from 'd3-shape';
|
||
|
|
import { View } from 'react-native';
|
||
|
|
import { LineChart, XAxis, YAxis } from 'react-native-svg-charts';
|
||
|
|
|
||
|
|
import { useGraphData } from '../use-graph-data';
|
||
|
|
import { CustomGrid } from '../custom-grid';
|
||
|
|
import { graphStyles } from '../chart-styles';
|
||
|
|
import ChartView from '../chart-view';
|
||
|
|
import { CommonProps } from '../graph-types';
|
||
|
|
|
||
|
|
// 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);
|
||
|
|
|
||
|
|
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}>
|
||
|
|
<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>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default LineGraph;
|