display the total daily gaps percantage (#57)

Co-authored-by: NoamGaash <[email protected]>

package.json

@@ -30,7 +30,7 @@
     "sass": "^1.58.3",
     "styled-components": "^5.3.5",
     "stylis-plugin-rtl": "^2.1.1",
-    "typescript": "^4.7.4",
+    "typescript": "^5.2.2",
     "underscore.string": "^3.3.6",
     "usehooks-ts": "^2.9.1",
     "vite": "^4.4.9",

src/pages/GapsPage.tsx

@@ -19,6 +19,7 @@ import { DateSelector } from './components/DateSelector'
 import { FormControlLabel, Switch } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 import { INPUT_SIZE } from 'src/resources/sizes'
+import DisplayGapsPercentage from './components/DisplayGapsPercentage'
 
 function formatTime(time: Moment) {
   return time.format(TEXTS.time_format)
@@ -38,6 +39,14 @@ function formatStatus(all: GapsList, gap: Gap) {
   return TEXTS.ride_extra
 }
 
+function getGapsPercentage(gaps: GapsList | undefined): number | undefined {
+  const ridesInTime = gaps?.filter((gap) => formatStatus([], gap) === TEXTS.ride_as_planned)
+  if (!gaps || !ridesInTime) return undefined
+  const ridesInTimePercentage = (ridesInTime?.length / gaps?.length) * 100
+  const allRidesPercentage = 100
+  return allRidesPercentage - ridesInTimePercentage
+}
+
 const Cell = styled.div`
   width: 120px;
 `
@@ -81,6 +90,8 @@ const GapsPage = () => {
       .finally(() => setRoutesIsLoading(false))
   }, [operatorId, lineNumber, timestamp, setSearch])
 
+  const gapsPercentage = getGapsPercentage(gaps)
+
   return (
     <PageContainer>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
@@ -153,6 +164,11 @@ const GapsPage = () => {
             }
             label={TEXTS.checkbox_only_gaps}
           />
+          <DisplayGapsPercentage
+            gapsPercentage={gapsPercentage}
+            decentPercentage={5}
+            terriblePercentage={20}
+          />
           <Row>
             <TitleCell>{TEXTS.planned_time}</TitleCell>
             <TitleCell>{TEXTS.planned_status}</TitleCell>

src/pages/components/DisplayGapsPercentage.scss

@@ -0,0 +1,15 @@
+@import '../../resources/variables';
+
+.gaps-percentage-displayed {
+  font-weight: bold;
+  width: 200px;
+  &-great-result {
+    color: $great-result;
+  }
+  &-decent-result {
+    color: $decent-result;
+  }
+  &-terrible-result {
+    color: $terrible-result;
+  }
+}

src/pages/components/DisplayGapsPercentage.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { TEXTS } from '../../resources/texts'
+import './DisplayGapsPercentage.scss'
+import { Row } from './Row'
+
+function getStatus(percentage: number, decentPercentage: number, terriblePercentage: number) {
+  const moreThanOneHundredPercent = 101
+  const statuses = [
+    {
+      min: -Infinity,
+      status: 'invalid',
+    },
+    {
+      min: 0,
+      status: 'great',
+    },
+    {
+      min: decentPercentage,
+      status: 'decent',
+    },
+    {
+      min: terriblePercentage,
+      status: 'terrible',
+    },
+    {
+      min: moreThanOneHundredPercent,
+      status: 'invalid',
+    },
+  ]
+  return statuses.findLast((status: { min: number; status: string }) => status.min <= percentage)
+    ?.status
+}
+
+function DisplayGapsPercentage({
+  gapsPercentage,
+  decentPercentage,
+  terriblePercentage,
+}: {
+  gapsPercentage: number | undefined
+  decentPercentage: number
+  terriblePercentage: number
+}) {
+  if (!gapsPercentage && gapsPercentage != 0) return <></>
+  const status = getStatus(gapsPercentage, decentPercentage, terriblePercentage)
+  const stylesClass = `gaps-percentage-displayed-${status}-result`
+  const text =
+    status === 'great'
+      ? TEXTS.all_rides_completed
+      : `${Math.floor(gapsPercentage)}% ${TEXTS.missing_rides}`
+
+  return (
+    <Row>
+      <div className={stylesClass}>{text}</div>
+    </Row>
+  )
+}
+export default DisplayGapsPercentage

src/resources/texts.tsx

@@ -85,6 +85,8 @@ export const TEXTS = {
   innovation_authority: 'רשות החדשנות',
   migdal_company: '“מגדל בקהילה“',
   and_smaller_donors: 'ותרומות קטנות נוספות של ידידי ואוהדי הסדנא.',
+  all_rides_completed: 'כמעט / כל הנסיעות בוצעו',
+  missing_rides: 'מהנסיעות חסרות',
 }
 
 export const formatted = (text: string, value: string) => text.replace(PLACEHOLDER, value)

src/resources/variables.scss

@@ -4,3 +4,6 @@ $color-active: rgba(95, 91, 255);
 
 $mobile-max-width: 768px;
 
+$great-result: green;
+$decent-result: orange;
+$terrible-result: red;