diff --git a/assets/svg/drugs.svg b/assets/svg/drugs.svg index 6b7cef5c..a4fa61fd 100644 --- a/assets/svg/drugs.svg +++ b/assets/svg/drugs.svg @@ -1,3 +1,3 @@ - + diff --git a/src/scenes/suivi/chartFrise.js b/src/scenes/suivi/chartFrise.js index 84d46c85..1b5576c6 100644 --- a/src/scenes/suivi/chartFrise.js +++ b/src/scenes/suivi/chartFrise.js @@ -13,7 +13,7 @@ import localStorage from "../../utils/localStorage"; import logEvents from "../../services/logEvents"; import Button from "../../components/Button"; -const ChartFrise = ({ navigation, fromDate, toDate, focusedScores }) => { +const ChartFrise = ({ navigation, fromDate, toDate, focusedScores, showTraitement }) => { const [diaryData] = React.useContext(DiaryDataContext); const [activeCategories, setActiveCategories] = React.useState(); const [isEmpty, setIsEmpty] = React.useState(); @@ -87,7 +87,7 @@ const ChartFrise = ({ navigation, fromDate, toDate, focusedScores }) => { if (!categoryState) { return {}; } - if (categoryState?.value) return categoryState; + if (categoryState?.value !== null || categoryState?.value !== undefined) return categoryState; // ------- // the following code is for the retrocompatibility @@ -128,13 +128,23 @@ const ChartFrise = ({ navigation, fromDate, toDate, focusedScores }) => { title={getTitle(categoryId)} key={categoryId} data={computeChartData(categoryId)} + showTraitement={showTraitement} + priseDeTraitement={computeChartData("PRISE_DE_TRAITEMENT")} + priseDeTraitementSiBesoin={computeChartData("PRISE_DE_TRAITEMENT_SI_BESOIN")} /> ))} ); }; -const Frise = ({ title, data, focusedScores }) => { +const Frise = ({ + title, + data, + focusedScores, + showTraitement, + priseDeTraitement, + priseDeTraitementSiBesoin, +}) => { return ( {title} @@ -148,7 +158,11 @@ const Frise = ({ title, data, focusedScores }) => { opacity = e?.value ? 0.1 : 0.5; // on reduit moins l'opacité si c'est une frise vide } - const isFocused = e?.value && focusedScores.length && focusedScores.includes(e?.value); + const isFocused = + e?.value && + focusedScores.length > 0 && + focusedScores.length < 5 && + focusedScores.includes(e?.value); const shadow = isFocused ? { @@ -199,6 +213,56 @@ const Frise = ({ title, data, focusedScores }) => { ); })} + {showTraitement ? ( + + {priseDeTraitement?.map((e, i) => { + let color = "#D7D3D3"; + if (e?.value === true) color = "#5956E8"; + if (e?.value === false) color = "#E575F8"; + + const firstSquare = i === 0; + const lastSquare = i === data.length - 1; + return ( + + + + ); + })} + + ) : null} + {showTraitement ? ( + + {priseDeTraitementSiBesoin?.map((e, i) => { + let color = "#5956E8"; + if (e?.value !== true) color = "transparent"; + return ( + + + + ); + })} + + ) : null} ); }; @@ -219,9 +283,14 @@ const styles = StyleSheet.create({ fontSize: 19, color: colors.BLUE, fontWeight: "600", + marginBottom: 5, }, squareContainer: { - marginVertical: 5, + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + }, + squareContainerTraitement: { display: "flex", flexDirection: "row", justifyContent: "space-between", @@ -231,10 +300,30 @@ const styles = StyleSheet.create({ flex: 1, height: 10, }, + squareItemContainerTraitement: { + marginTop: 5, + display: "flex", + flex: 1, + height: 4, + }, + squareItemContainerTraitementSiBesoin: { + marginTop: 5, + display: "flex", + justifyContent: "center", + alignItems: "center", + flex: 1, + height: 4, + }, square: { flex: 1, height: 10, }, + dot: { + flex: 1, + height: 4, + width: 4, + borderRadius: 2, + }, legend: { display: "flex", flexDirection: "row", diff --git a/src/scenes/suivi/index.js b/src/scenes/suivi/index.js index 025eb447..e84cd82b 100644 --- a/src/scenes/suivi/index.js +++ b/src/scenes/suivi/index.js @@ -1,5 +1,5 @@ import React from "react"; -import { SafeAreaView, ScrollView, StyleSheet, View, Dimensions } from "react-native"; +import { SafeAreaView, ScrollView, StyleSheet, View, Dimensions, TouchableOpacity } from "react-native"; import { useFocusEffect } from "@react-navigation/native"; import { beforeToday } from "../../utils/date/helpers"; @@ -12,6 +12,8 @@ import ChartPie from "./chartPie"; import Evenements from "./events"; import Courbes from "../calendar/calendar"; import logEvents from "../../services/logEvents"; +import { colors } from "../../utils/colors"; +import Icon from "../../components/Icon"; const screenHeight = Dimensions.get("window").height; const CHART_TYPES = ["Frises", "Statistiques", "Courbes", "Analyse des notes"]; @@ -32,6 +34,7 @@ const Suivi = ({ navigation, setPlusVisible }) => { const [fromDate, setFromDate] = React.useState(beforeToday(30)); const [toDate, setToDate] = React.useState(beforeToday(0)); const [focusedScores, setFocusedScores] = React.useState([1, 2, 3, 4, 5]); + const [showTraitement, setShowTraitement] = React.useState(true); useFocusEffect( React.useCallback(() => { @@ -58,6 +61,7 @@ const Suivi = ({ navigation, setPlusVisible }) => { fromDate={fromDate} toDate={toDate} focusedScores={focusedScores} + showTraitement={showTraitement} /> ); } @@ -81,18 +85,32 @@ const Suivi = ({ navigation, setPlusVisible }) => { /> ) : null} {chartType === "Frises" ? ( - { - if (focusedScores.includes(i)) { - setFocusedScores((e) => e.filter((x) => x !== i)); - } else { - setFocusedScores((e) => [...e, i]); - } - //events - logEvents.logSuiviEditScoreFrise(i); - }} - /> + + { + if (focusedScores.includes(i)) { + setFocusedScores((e) => e.filter((x) => x !== i)); + } else { + setFocusedScores((e) => [...e, i]); + } + //events + logEvents.logSuiviEditScoreFrise(i); + }} + /> + + setShowTraitement((e) => !e)}> + + + + + ) : null} {renderChart(chartType)} @@ -101,6 +119,26 @@ const Suivi = ({ navigation, setPlusVisible }) => { }; const styles = StyleSheet.create({ + icon: { + width: 30, + height: 30, + }, + selectionContainer: { + padding: 4, + borderColor: "#DEF4F5", + borderWidth: 1, + borderRadius: 10, + marginHorizontal: 10, + }, + activeSelectionContainer: { + backgroundColor: colors.LIGHT_BLUE, + }, + containerScorePickerFrise: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + }, headerContainer: { padding: 5, paddingBottom: 15, @@ -135,6 +173,12 @@ const styles = StyleSheet.create({ fontWeight: "700", fontSize: 22, }, + verticalDivider: { + height: "50%", + backgroundColor: "#E0E0E0", + width: 1, + alignSelf: "center", + }, }); export default Suivi;