From 732f19ed635474da3f401341d2a207a1a7f66633 Mon Sep 17 00:00:00 2001 From: Sofiya Tepikin Date: Tue, 23 Aug 2022 12:52:38 +0200 Subject: [PATCH] Prettify chart files --- components/chart/chart-legend.js | 8 +++---- components/chart/horizontal-grid.js | 19 ++++++++-------- components/chart/symptom-cell.js | 31 ++++++++++++-------------- components/chart/symptom-icon.js | 6 ++--- components/chart/tick-list.js | 34 ++++++++++++++--------------- components/chart/tick.js | 13 +++++------ components/chart/tutorial.js | 14 ++++++------ components/chart/y-axis.js | 15 ++++++------- 8 files changed, 67 insertions(+), 73 deletions(-) diff --git a/components/chart/chart-legend.js b/components/chart/chart-legend.js index 9d6e8cc..76d8014 100644 --- a/components/chart/chart-legend.js +++ b/components/chart/chart-legend.js @@ -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 diff --git a/components/chart/horizontal-grid.js b/components/chart/horizontal-grid.js index 9550248..e28af3b 100644 --- a/components/chart/horizontal-grid.js +++ b/components/chart/horizontal-grid.js @@ -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 ( - - ) + return getTickPositions(height).map((tick) => { + return }) } 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 diff --git a/components/chart/symptom-cell.js b/components/chart/symptom-cell.js index ef8caa1..0f828f1 100644 --- a/components/chart/symptom-cell.js +++ b/components/chart/symptom-cell.js @@ -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 diff --git a/components/chart/symptom-icon.js b/components/chart/symptom-icon.js index 1bd5c6c..fa36def 100644 --- a/components/chart/symptom-icon.js +++ b/components/chart/symptom-icon.js @@ -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 diff --git a/components/chart/tick-list.js b/components/chart/tick-list.js index 63af7da..a828ecb 100644 --- a/components/chart/tick-list.js +++ b/components/chart/tick-list.js @@ -7,24 +7,22 @@ import Tick from './tick' import { getTickList } from '../helpers/chart' const TickList = ({ height }) => { - return ( - { - getTickList(height) - .map(({ isBold, label, position, shouldShowLabel, tickHeight}) => { - return ( - - ) - }) - } + {getTickList(height).map( + ({ isBold, label, position, shouldShowLabel, tickHeight }) => { + return ( + + ) + } + )} ) } @@ -35,8 +33,8 @@ TickList.propTypes = { const styles = StyleSheet.create({ container: { - flex: 1 - } + flex: 1, + }, }) export default TickList diff --git a/components/chart/tick.js b/components/chart/tick.js index 7c0862b..92ca2b7 100644 --- a/components/chart/tick.js +++ b/components/chart/tick.js @@ -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 ( {shouldShowLabel && label} @@ -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 diff --git a/components/chart/tutorial.js b/components/chart/tutorial.js index fefe287..553a4ef 100644 --- a/components/chart/tutorial.js +++ b/components/chart/tutorial.js @@ -13,7 +13,7 @@ const image = require('../../assets/swipe.png') const Tutorial = ({ onClose }) => { return ( - + {chart.tutorial} @@ -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 \ No newline at end of file +export default Tutorial diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js index c9e13f2..c71f236 100644 --- a/components/chart/y-axis.js +++ b/components/chart/y-axis.js @@ -13,7 +13,7 @@ const YAxis = ({ symptomsToDisplay, symptomsSectionHeight, shouldShowTemperatureColumn, - xAxisHeight + xAxisHeight, }) => { const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length @@ -21,15 +21,14 @@ const YAxis = ({ {shouldShowTemperatureColumn && } - - {symptomsToDisplay.map(symptom => ( + + {symptomsToDisplay.map((symptom) => ( - ) - )} + ))} ) @@ -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