lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettify chart files

Browse Source
This commit is contained in:
Sofiya Tepikin
2022-08-23 12:52:38 +02:00
parent f72994082c
commit 732f19ed63
8 changed files with 67 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/chart/chart-legend.js
+4 -4
View File
@@ -18,21 +18,21 @@ const ChartLegend = ({ height }) => {
}
ChartLegend.propTypes = {
height: PropTypes.number.isRequired
height: PropTypes.number.isRequired,
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'flex-end',
width: CHART_YAXIS_WIDTH
width: CHART_YAXIS_WIDTH,
},
text: {
...Typography.label,
},
textBold: {
...Typography.labelBold
}
...Typography.labelBold,
},
})
export default ChartLegend
components/chart/horizontal-grid.js
+10 -9
View File
@@ -5,18 +5,19 @@ import { StyleSheet, View } from 'react-native'
import { getTickPositions } from '../helpers/chart'
import { Colors } from '../../styles'
import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_YAXIS_WIDTH } from '../../config'
import {
CHART_GRID_LINE_HORIZONTAL_WIDTH,
CHART_YAXIS_WIDTH,
} from '../../config'
const HorizontalGrid = ({ height }) => {
return getTickPositions(height).map(tick => {
return (
<View key={tick} top={tick} {...styles.line}/>
)
return getTickPositions(height).map((tick) => {
return <View key={tick} top={tick} {...styles.line} />
})
}
HorizontalGrid.propTypes = {
height: PropTypes.number
height: PropTypes.number,
}
const styles = StyleSheet.create({
@@ -25,9 +26,9 @@ const styles = StyleSheet.create({
borderBottomColor: Colors.grey,
borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
left: CHART_YAXIS_WIDTH,
position:'absolute',
right: 0
}
position: 'absolute',
right: 0,
},
})
export default HorizontalGrid
components/chart/symptom-cell.js
+14 -17
View File
@@ -6,7 +6,7 @@ import { Colors, Containers } from '../../styles'
import {
CHART_COLUMN_WIDTH,
CHART_DOT_RADIUS,
CHART_GRID_LINE_HORIZONTAL_WIDTH
CHART_GRID_LINE_HORIZONTAL_WIDTH,
} from '../../config'
const SymptomCell = ({
@@ -14,22 +14,22 @@ const SymptomCell = ({
index,
symptom,
symptomValue,
isSymptomDataComplete
isSymptomDataComplete,
}) => {
const shouldDrawDot = symptomValue !== false
const styleCell = index !== 0
? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
: [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
const styleCell =
index !== 0
? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
: [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
let styleDot
if (shouldDrawDot) {
const styleSymptom = Colors.iconColors[symptom]
const symptomColor = styleSymptom.shades[symptomValue]
const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
'white' : symptomColor
const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
const isMucusOrCervix = symptom === 'mucus' || symptom === 'cervix'
const backgroundColor =
isMucusOrCervix && !isSymptomDataComplete ? 'white' : symptomColor
const borderWidth = isMucusOrCervix && !isSymptomDataComplete ? 2 : 0
const borderColor = symptomColor
styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
}
@@ -45,10 +45,7 @@ SymptomCell.propTypes = {
height: PropTypes.number,
index: PropTypes.number.isRequired,
symptom: PropTypes.string,
symptomValue: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
]),
symptomValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
isSymptomDataComplete: PropTypes.bool,
}
@@ -59,7 +56,7 @@ const styles = StyleSheet.create({
borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
borderLeftColor: Colors.grey,
borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
...Containers.centerItems
...Containers.centerItems,
},
topBorder: {
borderTopColor: Colors.grey,
@@ -68,7 +65,7 @@ const styles = StyleSheet.create({
dot: {
width: CHART_DOT_RADIUS * 2,
height: CHART_DOT_RADIUS * 2,
borderRadius: 50
}
borderRadius: 50,
},
})
export default SymptomCell
components/chart/symptom-icon.js
+3 -3
View File
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { StyleSheet , View } from 'react-native'
import { StyleSheet, View } from 'react-native'
import DripIcon from '../../assets/drip-icons'
@@ -26,8 +26,8 @@ SymptomIcon.propTypes = {
const styles = StyleSheet.create({
container: {
...Containers.centerItems
}
...Containers.centerItems,
},
})
export default SymptomIcon
components/chart/tick-list.js
+16 -18
View File
@@ -7,24 +7,22 @@ import Tick from './tick'
import { getTickList } from '../helpers/chart'
const TickList = ({ height }) => {
return (
<View style={[styles.container, height]}>
{
getTickList(height)
.map(({ isBold, label, position, shouldShowLabel, tickHeight}) => {
return (
<Tick
height={tickHeight}
isBold={isBold}
key={label}
label={label}
shouldShowLabel={shouldShowLabel}
yPosition={position}
/>
)
})
}
{getTickList(height).map(
({ isBold, label, position, shouldShowLabel, tickHeight }) => {
return (
<Tick
height={tickHeight}
isBold={isBold}
key={label}
label={label}
shouldShowLabel={shouldShowLabel}
yPosition={position}
/>
)
}
)}
</View>
)
}
@@ -35,8 +33,8 @@ TickList.propTypes = {
const styles = StyleSheet.create({
container: {
flex: 1
}
flex: 1,
},
})
export default TickList
components/chart/tick.js
+6 -7
View File
@@ -9,10 +9,10 @@ import { CHART_TICK_WIDTH } from '../../config'
const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
const top = yPosition - height / 2
const containerStyle = [ styles.container, { flexBasis: height, height, top }]
const containerStyle = [styles.container, { flexBasis: height, height, top }]
const textStyle = isBold ? styles.textBold : styles.textNormal
return(
return (
<View style={containerStyle}>
<AppText style={textStyle}>{shouldShowLabel && label}</AppText>
</View>
@@ -27,7 +27,6 @@ Tick.propTypes = {
label: PropTypes.string,
}
const text = {
textAlign: 'right',
}
@@ -36,17 +35,17 @@ const styles = StyleSheet.create({
justifyContent: 'center',
position: 'absolute',
right: 0,
width: CHART_TICK_WIDTH
width: CHART_TICK_WIDTH,
},
textBold: {
fontSize: Sizes.base,
fontWeight: 'bold',
...text
...text,
},
textNormal: {
fontSize: Sizes.small,
...text
}
...text,
},
})
export default Tick
components/chart/tutorial.js
+6 -6
View File
@@ -13,7 +13,7 @@ const image = require('../../assets/swipe.png')
const Tutorial = ({ onClose }) => {
return (
<View style={styles.container}>
<Image resizeMode='contain' source={image} style={styles.image} />
<Image resizeMode="contain" source={image} style={styles.image} />
<View style={styles.textContainer}>
<AppText>{chart.tutorial}</AppText>
</View>
@@ -23,20 +23,20 @@ const Tutorial = ({ onClose }) => {
}
Tutorial.propTypes = {
onClose: PropTypes.func.isRequired
onClose: PropTypes.func.isRequired,
}
const styles = StyleSheet.create({
container: {
...Containers.rowContainer,
padding: Spacing.large
padding: Spacing.large,
},
image: {
height: 40
height: 40,
},
textContainer: {
width: '70%'
}
width: '70%',
},
})
export default Tutorial
components/chart/y-axis.js
+7 -8
View File
@@ -13,7 +13,7 @@ const YAxis = ({
symptomsToDisplay,
symptomsSectionHeight,
shouldShowTemperatureColumn,
xAxisHeight
xAxisHeight,
}) => {
const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
@@ -21,15 +21,14 @@ const YAxis = ({
<View>
{shouldShowTemperatureColumn && <TickList height={height} />}
<ChartLegend height={xAxisHeight} />
<View style={[styles.yAxis, {height: symptomsSectionHeight}]}>
{symptomsToDisplay.map(symptom => (
<View style={[styles.yAxis, { height: symptomsSectionHeight }]}>
{symptomsToDisplay.map((symptom) => (
<SymptomIcon
key={symptom}
symptom={symptom}
height={symptomIconHeight}
/>
)
)}
))}
</View>
</View>
)
@@ -40,13 +39,13 @@ YAxis.propTypes = {
symptomsToDisplay: PropTypes.array,
symptomsSectionHeight: PropTypes.number,
shouldShowTemperatureColumn: PropTypes.bool,
xAxisHeight: PropTypes.number.isRequired
xAxisHeight: PropTypes.number.isRequired,
}
const styles = StyleSheet.create({
yAxis: {
width: CHART_YAXIS_WIDTH
}
width: CHART_YAXIS_WIDTH,
},
})
export default YAxis