102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import * as scale from 'd3-scale';
|
|
import { View } from 'react-native';
|
|
import { BarChart, XAxis, YAxis } from 'react-native-svg-charts';
|
|
|
|
import { useGraphData } from '../../../hooks/charts/useGraphData';
|
|
import ChartView from '../ChartView';
|
|
import { GraphData, YAxisProps } from '../graph-types';
|
|
|
|
import { CustomBars } from '../custom-bars';
|
|
import { CustomGrid } from '../custom-grid';
|
|
import { graphStyles } from '../../../styles';
|
|
|
|
interface Props {
|
|
data: GraphData;
|
|
height?: number;
|
|
spacingInner?: number;
|
|
spacingOuter?: number;
|
|
contentInset?: { top: number; bottom: number };
|
|
min?: number;
|
|
numberOfTicks?: number;
|
|
barColors?: Array<string>;
|
|
useCommonScale?: boolean;
|
|
yAxisProps?: YAxisProps;
|
|
}
|
|
|
|
export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, ...props }) => {
|
|
if (!data || typeof data !== 'object') return null; // TODO: replace when we have error/loading context from useQueryHandler
|
|
const {
|
|
xValues,
|
|
yData,
|
|
yAxisRightLabels,
|
|
yAxisLeftLabels,
|
|
defaultProps: {
|
|
height,
|
|
spacingInner,
|
|
spacingOuter,
|
|
contentInset,
|
|
min,
|
|
numberOfTicks,
|
|
barColors,
|
|
yAxisProps: {
|
|
maxLeftYAxisValue,
|
|
maxRightYAxisValue,
|
|
formatRightYAxisLabel,
|
|
formatLeftYAxisLabel
|
|
}
|
|
}
|
|
} = useGraphData(data, props, useCommonScale);
|
|
|
|
return (
|
|
<ChartView>
|
|
<View style={[graphStyles.rowContainer, { height: height }]}>
|
|
<YAxis
|
|
data={yAxisLeftLabels.values}
|
|
contentInset={contentInset}
|
|
svg={graphStyles.yAxisFontStyle}
|
|
style={graphStyles.yAxisLeftPadding}
|
|
min={min}
|
|
max={maxLeftYAxisValue}
|
|
numberOfTicks={numberOfTicks}
|
|
formatLabel={formatLeftYAxisLabel}
|
|
/>
|
|
<View style={graphStyles.flex}>
|
|
<BarChart
|
|
style={graphStyles.flex}
|
|
data={yData}
|
|
gridMin={min}
|
|
svg={{ stroke: 'transparent' }} // might want to do the transparent from here?
|
|
numberOfTicks={numberOfTicks} // rethink numberOfTicks, it should be determined automatically if we do our y axis scaling proper
|
|
yAccessor={({ item }) => (item as unknown as { value: number }).value}
|
|
contentInset={contentInset}
|
|
spacingInner={spacingInner}
|
|
spacingOuter={spacingOuter}
|
|
>
|
|
<CustomGrid />
|
|
<CustomBars barData={yData} xValues={xValues} barColors={barColors} />
|
|
</BarChart>
|
|
<XAxis
|
|
data={xValues.map((_, index) => index)}
|
|
formatLabel={(_, index) => xValues[index]}
|
|
style={graphStyles.xAxisMarginTop}
|
|
svg={graphStyles.xAxisFontStyle}
|
|
scale={scale.scaleBand}
|
|
/>
|
|
</View>
|
|
<YAxis
|
|
data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}
|
|
contentInset={contentInset}
|
|
svg={graphStyles.yAxisFontStyle}
|
|
style={graphStyles.yAxisRightPadding}
|
|
min={min}
|
|
max={maxRightYAxisValue}
|
|
numberOfTicks={numberOfTicks}
|
|
formatLabel={formatRightYAxisLabel} // formatRightYAxisLabel formatting could come from yAxisRightLabels object
|
|
/>
|
|
</View>
|
|
</ChartView>
|
|
);
|
|
};
|
|
|
|
export default BarGraph; |