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 { CustomGrid } from '../custom-grid';
|
||||
import { graphStyles } from '../../../styles';
|
||||
import { graphStyles } from '../chart-styles';
|
||||
import ChartView from '../chart-view';
|
||||
|
||||
interface Props {
|
||||
data: GraphData;
|
||||
@ -57,6 +58,7 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
|
||||
|
||||
|
||||
return (
|
||||
<ChartView>
|
||||
<View style={[graphStyles.rowContainer, { height: height }]} testID={`bar-graph-${testID}`}>
|
||||
<YAxis
|
||||
data={yAxisLeftLabels.values}
|
||||
@ -104,6 +106,7 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
|
||||
formatLabel={formatRightYAxisLabel}
|
||||
/>
|
||||
</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
|
||||
// COLORS:
|
||||
// can be made more granular to specify utility (ex: fontColors vs backgroundColors)
|
||||
@ -25,24 +24,3 @@ export const shadows = {
|
||||
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