Skip to content

Commit

Permalink
Add MetricsPageService component to display service metrics
Browse files Browse the repository at this point in the history
  • Loading branch information
joao-vasconcelos committed Dec 12, 2024
1 parent 63157e6 commit f227dce
Showing 3 changed files with 216 additions and 0 deletions.
2 changes: 2 additions & 0 deletions frontend/components/metrics/MetricsPage/index.tsx
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { MetricsPageIntro } from '@/components/metrics/MetricsPageIntro';
import { MetricsPageLines } from '@/components/metrics/MetricsPageLines';
import { MetricsPagePassengers } from '@/components/metrics/MetricsPagePassengers';
import { MetricsPageRecords } from '@/components/metrics/MetricsPageRecords';
import { MetricsPageService } from '@/components/metrics/MetricsPageService';

/* * */

@@ -14,6 +15,7 @@ export function MetricsPage() {
<MetricsPagePassengers />
<MetricsPageRecords />
<MetricsPageLines />
<MetricsPageService />
</>
);
}
161 changes: 161 additions & 0 deletions frontend/components/metrics/MetricsPageService/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
'use client';

/* * */

import { LiveIcon } from '@/components/common/LiveIcon';
import { Section } from '@/components/layout/Section';
import { Surface } from '@/components/layout/Surface';
import { Routes } from '@/utils/routes';
import { ServiceMetrics } from '@carrismetropolitana/api-types/metrics';
import { useTranslations } from 'next-intl';
import { useMemo } from 'react';
import useSWR from 'swr';

import styles from './styles.module.css';

/* * */

export function MetricsPageService() {
//

//
// A. Define Variables

const t = useTranslations('lines.LinesDetailMetricsService');
const { data: serviceMetricsData, isLoading: serviceMetricsLoading } = useSWR<ServiceMetrics[], Error>(`${Routes.API}/metrics/service/all`);

//
// B. Transform data

const totalForAllLines = useMemo(() => {
if (!serviceMetricsData) return;
let totalScheduledTrips = 0;
let totalPassedTrips = 0;
serviceMetricsData.forEach((item) => {
totalScheduledTrips += item.total_trip_count;
totalPassedTrips += item.pass_trip_count;
});
return {
pass: totalPassedTrips,
percentage: totalPassedTrips / totalScheduledTrips * 100,
total: totalScheduledTrips,
};
}, [serviceMetricsData]);

// const passTripCount = useMemo(() => {
// if (!linesDetailContext.data.service_metrics) return null;
// return linesDetailContext.data.service_metrics.reduce((acc, curr) => acc + Number(curr.pass_trip_count), 0);
// }, [linesDetailContext.data.service_metrics]);

// const last15DaysService = useMemo(() => {
// if (!linesDetailContext.data.service_metrics) return [];
// linesDetailContext.data.service_metrics.sort((a, b) => Number(b.operational_date) - Number(a.operational_date));
// return linesDetailContext.data.service_metrics.slice(0, 15);
// }, [linesDetailContext.data.service_metrics]);

// const service15dayAverage = useMemo(() => {
// if (!last15DaysService) return 0;
// const { passTripCount, totalTripCount } = last15DaysService.reduce((acc, curr) => ({
// passTripCount: acc.passTripCount + Number(curr.pass_trip_count),
// totalTripCount: acc.totalTripCount + Number(curr.total_trip_count),
// }), { passTripCount: 0, totalTripCount: 0 });
// return ((passTripCount / totalTripCount) * 100).toFixed(2);
// }, [last15DaysService]);

// const service15DayDistribution = useMemo(() => {
// if (!last15DaysService) return null;
// return last15DaysService
// .sort((a, b) => {
// return a.operational_date?.localeCompare(b.operational_date);
// })
// .map(service => ({
// ...service,
// fail_trip_count: service.total_trip_count - service.pass_trip_count,
// operational_date: DateTime.fromFormat(service.operational_date, 'yyyyMMdd').toFormat('ccc, dd LLL yyyy', { locale: 'pt-PT' }),
// pass_trip_percentage: (service.pass_trip_percentage * 100).toFixed(2),
// }));
// }, [last15DaysService]);

//
// C. Render components

// if (!linesDetailContext.data.line || !totalTripCount || !passTripCount || !service15DayDistribution) {
// return null;
// }

if (serviceMetricsLoading || !totalForAllLines) {
return <></>;
}

return (
<Surface>
<Section withGap withPadding>

<div className={styles.infoWrapper}>
<div className={styles.bigNumberWrapper}>
<h1 className={styles.bigNumber} style={{ color: 'var(--color-brand)' }}>{t('big_number', { value: totalForAllLines?.percentage })}</h1>
<LiveIcon className={styles.liveIcon} color="var(--color-brand)" />
</div>
<h3 className={styles.title}>{t('title', { pass_trip_count: totalForAllLines?.pass, total_trip_count: totalForAllLines?.total })}</h3>
<p className={styles.description}>{t('description')}</p>
</div>

{/* <div className={styles.chartWrapper}>
<LineChart
color="yellow"
connectNulls={false}
curveType="monotone"
data={service15DayDistribution}
dataKey="operational_date"
gridAxis="none"
h={120}
strokeWidth={5}
styles={{ referenceLine: { strokeDasharray: '5 5' } }}
withDots={false}
withLegend={false}
withTooltip={true}
withXAxis={false}
withYAxis={false}
referenceLines={[
{ color: 'var(--color-system-text-300)', label: '75%', labelPosition: 'insideBottomRight', y: 75 },
{ color: 'var(--color-system-text-300)', label: '100%', labelPosition: 'insideBottomRight', y: 100 },
{ color: 'var(--color-system-text-300)', label: '0%', labelPosition: 'insideBottomRight', y: 0 },
]}
series={[
{
color: 'blue',
label: t('chart.series.pass_trip_percentage.label'),
name: 'pass_trip_percentage',
},
{
color: 'transparent',
label: t('chart.series.total_trip_count.label'),
name: 'total_trip_count',
yAxisId: 'right',
},
{
color: 'transparent',
label: t('chart.series.pass_trip_count.label'),
name: 'pass_trip_count',
yAxisId: 'right',
},
{
color: 'transparent',
label: t('chart.series.fail_trip_count.label'),
name: 'fail_trip_count',
yAxisId: 'right',
},
]}
/>
</div> */}

<div className={styles.infoWrapper}>
<p className={styles.footnote}>{t('footnote')}</p>
</div>

</Section>
</Surface>
);

//
};
53 changes: 53 additions & 0 deletions frontend/components/metrics/MetricsPageService/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/* * */
/* WRAPPERS */

.infoWrapper {
display: flex;
flex-direction: column;
gap: var(--size-spacing-5);
}

.chartWrapper {
width: 100%;
padding-top: var(--size-spacing-15);
}

/* * */
/* CONTENT */

.bigNumberWrapper {
display: flex;
flex-direction: row;
gap: var(--size-spacing-10);
align-items: flex-start;
}

.bigNumber {
font-size: 60px;
font-weight: var(--font-weight-bold);
line-height: 1;
}

.liveIcon {
margin-top: var(--size-spacing-5);
}

.title {
font-size: 18px;
font-weight: var(--font-weight-bold);
color: var(--color-system-text-100)
}

.description {
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 1.6;
color: var(--color-system-text-200);
}

.footnote {
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 1.6;
color: var(--color-system-text-300);
}

0 comments on commit f227dce

Please sign in to comment.