merge chart-view from master, implement in component
This commit is contained in:
commit
7383c85b58
@ -8,7 +8,8 @@ import { GraphData, YAxisProps } from '../graph-types';
|
|||||||
|
|
||||||
import { CustomBars } from '../custom-bars';
|
import { CustomBars } from '../custom-bars';
|
||||||
import { CustomGrid } from '../custom-grid';
|
import { CustomGrid } from '../custom-grid';
|
||||||
import { graphStyles } from '../../../styles';
|
import { graphStyles } from '../chart-styles';
|
||||||
|
import ChartView from '../chart-view';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
data: GraphData;
|
data: GraphData;
|
||||||
@ -57,6 +58,7 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
|
|||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<ChartView>
|
||||||
<View style={[graphStyles.rowContainer, { height: height }]} testID={`bar-graph-${testID}`}>
|
<View style={[graphStyles.rowContainer, { height: height }]} testID={`bar-graph-${testID}`}>
|
||||||
<YAxis
|
<YAxis
|
||||||
data={yAxisLeftLabels.values}
|
data={yAxisLeftLabels.values}
|
||||||
@ -104,6 +106,7 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
|
|||||||
formatLabel={formatRightYAxisLabel}
|
formatLabel={formatRightYAxisLabel}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
|
</ChartView>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
23
component/charts/chart-styles.ts
Normal file
23
component/charts/chart-styles.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { StyleSheet } from 'react-native';
|
||||||
|
|
||||||
|
import { colors, shadows } from '../../styles';
|
||||||
|
|
||||||
|
export const graphStyles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
backgroundColor: colors.panelWhite,
|
||||||
|
borderColor: 'black',
|
||||||
|
borderRadius: 5,
|
||||||
|
marginVertical: 10,
|
||||||
|
marginHorizontal: 15,
|
||||||
|
paddingTop: 15,
|
||||||
|
paddingHorizontal: 15,
|
||||||
|
...shadows.standard
|
||||||
|
},
|
||||||
|
rowContainer: { flexDirection: 'row', padding: 10 },
|
||||||
|
flex: { flex: 1 },
|
||||||
|
yAxisLeftPadding: { paddingRight: 3 },
|
||||||
|
yAxisRightPadding: { paddingLeft: 3 },
|
||||||
|
yAxisFontStyle: { fontSize: 10, fill: 'grey' },
|
||||||
|
xAxisFontStyle: { fontSize: 12, fill: 'black' },
|
||||||
|
xAxisMarginTop: { marginTop: -15 }
|
||||||
|
});
|
16
component/charts/chart-view.tsx
Normal file
16
component/charts/chart-view.tsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StyleProp, View, ViewStyle } from 'react-native';
|
||||||
|
|
||||||
|
import { graphStyles } from './chart-styles';
|
||||||
|
|
||||||
|
interface ChartViewProps {
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
children: React.ReactNode;
|
||||||
|
testID?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChartView: React.FC<ChartViewProps> = ({ children, style, testID }) => {
|
||||||
|
return <View style={[graphStyles.container, style]} testID={testID} >{children}</View>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChartView;
|
22
styles.ts
22
styles.ts
@ -1,4 +1,3 @@
|
|||||||
import { StyleSheet } from 'react-native';
|
|
||||||
// GLOBAL STYLES
|
// GLOBAL STYLES
|
||||||
// COLORS:
|
// COLORS:
|
||||||
// can be made more granular to specify utility (ex: fontColors vs backgroundColors)
|
// can be made more granular to specify utility (ex: fontColors vs backgroundColors)
|
||||||
@ -25,24 +24,3 @@ export const shadows = {
|
|||||||
elevation: 3
|
elevation: 3
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const graphStyles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
backgroundColor: colors.panelWhite,
|
|
||||||
borderColor: 'black',
|
|
||||||
borderRadius: 5,
|
|
||||||
marginVertical: 10,
|
|
||||||
marginHorizontal: 15,
|
|
||||||
paddingTop: 15,
|
|
||||||
paddingHorizontal: 15,
|
|
||||||
...shadows.standard
|
|
||||||
},
|
|
||||||
rowContainer: { flexDirection: 'row', padding: 10 },
|
|
||||||
flex: { flex: 1 },
|
|
||||||
yAxisLeftPadding: { paddingRight: 3 },
|
|
||||||
yAxisRightPadding: { paddingLeft: 3 },
|
|
||||||
yAxisFontStyle: { fontSize: 10, fill: 'grey' },
|
|
||||||
xAxisFontStyle: { fontSize: 12, fill: 'black' },
|
|
||||||
xAxisMarginTop: { marginTop: -15 }
|
|
||||||
});
|
|
||||||
|
|
||||||
|
31
test/component/chart-view.test.tsx
Normal file
31
test/component/chart-view.test.tsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Text } from 'react-native'
|
||||||
|
import { render } from '@testing-library/react-native';
|
||||||
|
import "@testing-library/jest-native/extend-expect";
|
||||||
|
|
||||||
|
import ChartView from '../../component/charts/chart-view';
|
||||||
|
|
||||||
|
describe('ChartView Component Tests', () => {
|
||||||
|
it('applies the passed style prop correctly', () => {
|
||||||
|
const testStyle = { backgroundColor: 'blue', padding: 10 };
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<ChartView style={testStyle} testID="chart-view">
|
||||||
|
<Text>Test Child</Text>
|
||||||
|
</ChartView>
|
||||||
|
);
|
||||||
|
|
||||||
|
const chartView = getByTestId('chart-view');
|
||||||
|
expect(chartView.props.style).toEqual(expect.arrayContaining([testStyle]));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders children correctly', () => {
|
||||||
|
const { getByText } = render(
|
||||||
|
<ChartView>
|
||||||
|
<Text testID="child-text">Child Component</Text>
|
||||||
|
</ChartView>
|
||||||
|
);
|
||||||
|
|
||||||
|
const childText = getByText('Child Component');
|
||||||
|
expect(childText).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user