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

Prettify rest of the components files except stats

Browse Source
This commit is contained in:
Sofiya Tepikin
2022-09-08 12:19:36 +02:00
parent 23549ee72d
commit 840fca5b9e
14 changed files with 208 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/chart/chart.js
+64 -63
View File
@@ -6,7 +6,7 @@ import {
FlatList,
PixelRatio,
StyleSheet,
View
View,
} from 'react-native'
import AppLoadingView from '../common/app-loading'
@@ -24,7 +24,11 @@ import { navigate } from '../../slices/navigation'
import { getCycleDaysSortedByDate } from '../../db'
import nothingChanged from '../../db/db-unchanged'
import { getChartFlag, scaleObservable, setChartFlag } from '../../local-storage'
import {
getChartFlag,
scaleObservable,
setChartFlag,
} from '../../local-storage'
import { makeColumnInfo, nfpLines } from '../helpers/chart'
import {
@@ -32,7 +36,7 @@ import {
CHART_GRID_LINE_HORIZONTAL_WIDTH,
CHART_SYMPTOM_HEIGHT_RATIO,
CHART_XAXIS_HEIGHT_RATIO,
SYMPTOMS
SYMPTOMS,
} from '../../config'
import { shared } from '../../i18n/en/labels'
import { Colors, Spacing } from '../../styles'
@@ -40,7 +44,7 @@ import { Colors, Spacing } from '../../styles'
class CycleChart extends Component {
static propTypes = {
navigate: PropTypes.func,
end: PropTypes.bool
end: PropTypes.bool,
}
constructor(props) {
@@ -80,12 +84,12 @@ class CycleChart extends Component {
prepareSymptomData = () => {
this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
return this.cycleDaysSortedByDate.some(cycleDay => {
return (symptomName !== 'temperature') && cycleDay[symptomName]
return this.cycleDaysSortedByDate.some((cycleDay) => {
return symptomName !== 'temperature' && cycleDay[symptomName]
})
})
this.chartSymptoms = [...this.symptomRowSymptoms]
if (this.cycleDaysSortedByDate.some(day => day.temperature)) {
if (this.cycleDaysSortedByDate.some((day) => day.temperature)) {
this.chartSymptoms.push('temperature')
this.shouldShowTemperatureColumn = true
}
@@ -114,15 +118,16 @@ class CycleChart extends Component {
this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
const remainingHeight = height * 0.7 - this.xAxisHeight
this.symptomHeight = PixelRatio.roundToNearestPixel(
remainingHeight
* CHART_SYMPTOM_HEIGHT_RATIO
remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
)
this.symptomRowHeight = PixelRatio.roundToNearestPixel(
this.symptomRowSymptoms.length * this.symptomHeight
) + CHART_GRID_LINE_HORIZONTAL_WIDTH
this.symptomRowHeight =
PixelRatio.roundToNearestPixel(
this.symptomRowSymptoms.length * this.symptomHeight
) + CHART_GRID_LINE_HORIZONTAL_WIDTH
this.columnHeight = remainingHeight - this.symptomRowHeight
const chartHeight = this.shouldShowTemperatureColumn ?
height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)
const chartHeight = this.shouldShowTemperatureColumn
? height * 0.7
: this.symptomRowHeight + this.xAxisHeight
const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
const columns = makeColumnInfo()
@@ -131,7 +136,7 @@ class CycleChart extends Component {
updateListeners(dataUpdateHandler) {
// remove existing listeners
if(this.handleDbChange) {
if (this.handleDbChange) {
this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
}
if (this.removeObvListener) this.removeObvListener()
@@ -150,7 +155,7 @@ class CycleChart extends Component {
chartHeight,
chartLoaded,
shouldShowHint,
numberOfColumnsToRender
numberOfColumnsToRender,
} = this.state
const hasDataToDisplay = this.chartSymptoms.length > 0
@@ -163,53 +168,52 @@ class CycleChart extends Component {
{!hasDataToDisplay && <NoData />}
{hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
<View style={styles.chartContainer}>
{shouldShowHint && chartLoaded &&
{shouldShowHint && chartLoaded && (
<Tutorial onClose={this.setShouldShowHint} />
}
{hasDataToDisplay && chartLoaded &&
!this.shouldShowTemperatureColumn &&
<View style={styles.centerItem}>
<AppText style={styles.warning}>
{shared.noTemperatureWarning}
</AppText>
</View>
}
)}
{hasDataToDisplay &&
chartLoaded &&
!this.shouldShowTemperatureColumn && (
<View style={styles.centerItem}>
<AppText style={styles.warning}>
{shared.noTemperatureWarning}
</AppText>
</View>
)}
{hasDataToDisplay && (
<View style={styles.chartArea}>
{chartHeight && chartLoaded && (
<YAxis
height={this.columnHeight}
symptomsToDisplay={this.symptomRowSymptoms}
symptomsSectionHeight={this.symptomRowHeight}
shouldShowTemperatureColumn=
{this.shouldShowTemperatureColumn}
shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
xAxisHeight={this.xAxisHeight}
/>
)}
{chartHeight &&
<FlatList
horizontal={true}
inverted={true}
showsHorizontalScrollIndicator={false}
data={this.state.columns}
renderItem={this.renderColumn}
keyExtractor={item => item}
initialNumToRender={numberOfColumnsToRender}
windowSize={30}
onLayout={() => this.setState({chartLoaded: true})}
onEndReached={() => this.setState({end: true})}
ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
updateCellsBatchingPeriod={800}
contentContainerStyle={{ height: chartHeight }}
/>
}
{chartHeight && (
<FlatList
horizontal={true}
inverted={true}
showsHorizontalScrollIndicator={false}
data={this.state.columns}
renderItem={this.renderColumn}
keyExtractor={(item) => item}
initialNumToRender={numberOfColumnsToRender}
windowSize={30}
onLayout={() => this.setState({ chartLoaded: true })}
onEndReached={() => this.setState({ end: true })}
ListFooterComponent={<LoadingMoreView end={this.state.end} />}
updateCellsBatchingPeriod={800}
contentContainerStyle={{ height: chartHeight }}
/>
)}
{chartHeight && chartLoaded && (
<React.Fragment>
{this.shouldShowTemperatureColumn &&
{this.shouldShowTemperatureColumn && (
<HorizontalGrid height={this.columnHeight} />
}
)}
</React.Fragment>
)}
</View>
@@ -223,45 +227,42 @@ class CycleChart extends Component {
function LoadingMoreView({ end }) {
return (
<View style={styles.loadingContainer}>
{!end && <ActivityIndicator size={'large'} color={Colors.orange}/>}
{!end && <ActivityIndicator size={'large'} color={Colors.orange} />}
</View>
)
}
LoadingMoreView.propTypes = {
end: PropTypes.bool
end: PropTypes.bool,
}
const styles = StyleSheet.create({
chartArea: {
flexDirection: 'row'
flexDirection: 'row',
},
chartContainer: {
flexDirection: 'column'
flexDirection: 'column',
},
loadingContainer: {
height: '100%',
backgroundColor: Colors.turquoiseLight,
justifyContent: 'center'
justifyContent: 'center',
},
page: {
marginVertical: Spacing.small
marginVertical: Spacing.small,
},
pageContainer: {
paddingHorizontal: Spacing.base
paddingHorizontal: Spacing.base,
},
warning: {
padding: Spacing.large
}
padding: Spacing.large,
},
})
const mapDispatchToProps = (dispatch) => {
return({
return {
navigate: (page) => dispatch(navigate(page)),
})
}
}
export default connect(
null,
mapDispatchToProps,
)(CycleChart)
export default connect(null, mapDispatchToProps)(CycleChart)
components/chart/day-column.js
+31 -31
View File
@@ -15,7 +15,7 @@ import CycleDayLabel from './cycle-day-label'
import {
symptomColorMethods,
getTemperatureProps,
isSymptomDataComplete
isSymptomDataComplete,
} from '../helpers/chart'
class DayColumn extends Component {
@@ -40,14 +40,17 @@ class DayColumn extends Component {
this.data = {}
if (cycleDayData) {
this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom, ) => {
this.data = chartSymptoms.reduce((symptomDataToDisplay, symptom) => {
const symptomData = cycleDayData[symptom]
if (symptomData && symptom === 'temperature') {
symptomDataToDisplay[symptom] =
getTemperatureProps(symptomData, columnHeight, dateString)
symptomDataToDisplay[symptom] = getTemperatureProps(
symptomData,
columnHeight,
dateString
)
} else {
if (symptomData && ! symptomData.exclude) {
if (symptomData && !symptomData.exclude) {
// if symptomColorMethods entry doesn't exist for given symptom,
// use 'default'
const getSymptomColorIndex =
@@ -78,12 +81,13 @@ class DayColumn extends Component {
}
render() {
const { columnHeight,
const {
columnHeight,
dateString,
shouldShowTemperatureColumn,
symptomHeight,
symptomRowSymptoms,
xAxisHeight
xAxisHeight,
} = this.props
return (
@@ -91,22 +95,22 @@ class DayColumn extends Component {
onPress={() => this.onDaySelect(dateString)}
activeOpacity={1}
>
{shouldShowTemperatureColumn && (
<TemperatureColumn
horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
isVerticalLine={this.fhmAndLtl.drawFhmLine}
data={this.data && this.data.temperature}
columnHeight={columnHeight}
/>
)}
{shouldShowTemperatureColumn && <TemperatureColumn
horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
isVerticalLine={this.fhmAndLtl.drawFhmLine}
data={this.data && this.data.temperature}
columnHeight={columnHeight}
/>}
<CycleDayLabel height={xAxisHeight} date={dateString} />
<CycleDayLabel
height={xAxisHeight}
date={dateString}
/>
{ symptomRowSymptoms.map((symptom, i) => {
const hasSymptomData =
Object.prototype.hasOwnProperty.call(this.data, symptom)
{symptomRowSymptoms.map((symptom, i) => {
const hasSymptomData = Object.prototype.hasOwnProperty.call(
this.data,
symptom
)
return (
<SymptomCell
index={i}
@@ -117,23 +121,19 @@ class DayColumn extends Component {
hasSymptomData && isSymptomDataComplete(symptom, dateString)
}
height={symptomHeight}
/>)
}
)}
/>
)
})}
</TouchableOpacity>
)
}
}
const mapDispatchToProps = (dispatch) => {
return({
return {
setDate: (date) => dispatch(setDate(date)),
navigate: (page) => dispatch(navigate(page)),
})
}
}
export default connect(
null,
mapDispatchToProps,
)(DayColumn)
export default connect(null, mapDispatchToProps)(DayColumn)
components/chart/no-data.js
+11 -9
View File
@@ -15,7 +15,12 @@ const NoData = ({ navigate }) => {
return (
<View style={styles.container}>
<AppText>{shared.noDataWarning}</AppText>
<Button isCTA onPress={() => {navigate('CycleDay')}}>
<Button
isCTA
onPress={() => {
navigate('CycleDay')
}}
>
{shared.noDataButtonText}
</Button>
</View>
@@ -28,17 +33,14 @@ NoData.propTypes = {
const styles = StyleSheet.create({
container: {
...Containers.centerItems
}
...Containers.centerItems,
},
})
const mapDispatchToProps = (dispatch) => {
return({
return {
navigate: (page) => dispatch(navigate(page)),
})
}
}
export default connect(
null,
mapDispatchToProps,
)(NoData)
export default connect(null, mapDispatchToProps)(NoData)