Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add logs to debug performance #28

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add logs to debug performance #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 54 additions & 39 deletions src/app/charts/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { useState, useEffect, useMemo } from 'react';
import { useState, useEffect, useMemo, Profiler } from 'react';
import {
Chart as ChartJS,
CategoryScale,
Expand Down Expand Up @@ -65,6 +65,17 @@ ChartJS.register(
Legend,
);

export function onRender(
id: string,
phase: 'mount' | 'update' | 'nested-update',
actualDuration: number,
baseDuration: number,
startTime: number,
commitTime: number,
): void {
// console.log(`Profiler [${id}] - ${phase} - ${actualDuration} ms`);
}

export default function Charts() {
const [chartData, setChartData] = useState<ChartData[]>([]);
const [monthList, setMonthList] = useState([]);
Expand Down Expand Up @@ -242,48 +253,52 @@ export default function Charts() {
},
};

console.log('render chart page');

return (
<>
<div>
<DateRangeSelector
startDate={startDate}
setStartDate={setStartDate}
endDate={endDate}
setEndDate={setEndDate}
dayOfWeek={dayOfWeek}
setDayOfWeek={setDayOfWeek}
></DateRangeSelector>

<div id="window" className="h-screen mx-auto">
<LineSelector
<Profiler id="MetroChart" onRender={onRender}>
<div>
<DateRangeSelector
startDate={startDate}
setStartDate={setStartDate}
endDate={endDate}
setEndDate={setEndDate}
dayOfWeek={dayOfWeek}
lineMetricDataset={lineMetricDataset}
lines={linesWithValidMetricData}
onToggleSelectLine={onToggleSelectLine}
expanded={expandedLineSelector}
setExpanded={setExpandedLineSelector}
/>

{!expandedLineSelector && (
<div id="chart_container">
{chartData.length > 0 ? (
<LineChart
options={options}
id="chart"
data={{
labels: monthList,
datasets: chartData,
}}
/>
) : (
<div id="invalidData">
<p>Please select data</p>
</div>
)}
</div>
)}
setDayOfWeek={setDayOfWeek}
></DateRangeSelector>

<div id="window" className="h-screen mx-auto">
<LineSelector
dayOfWeek={dayOfWeek}
lineMetricDataset={lineMetricDataset}
lines={linesWithValidMetricData}
onToggleSelectLine={onToggleSelectLine}
expanded={expandedLineSelector}
setExpanded={setExpandedLineSelector}
/>

{!expandedLineSelector && (
<div id="chart_container">
{chartData.length > 0 ? (
<LineChart
options={options}
id="chart"
data={{
labels: monthList,
datasets: chartData,
}}
/>
) : (
<div id="invalidData">
<p>Please select data</p>
</div>
)}
</div>
)}
</div>
</div>
</div>
</Profiler>
</>
);
}
82 changes: 65 additions & 17 deletions src/app/inputComponents/metroLineTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import * as Checkbox from '@radix-ui/react-checkbox';
import { useState, useEffect } from 'react';
import { useState, useEffect, useMemo } from 'react';
import { type Line } from '../common/types';
import { getLineColor } from '../common/lines';
import { Metric } from '../charts/page';
Expand Down Expand Up @@ -38,7 +38,11 @@ export default function MetroLineTableRow({
},

events: [],
animation: false,
animation: {
onComplete: function () {
setIsMounted(true);
},
},
spanGaps: true,
normalized: true,
scales: {
Expand All @@ -65,35 +69,76 @@ export default function MetroLineTableRow({
},
};

let chartDataset: ChartData[] = [];
// let chartDataset: ChartData[] = [];

const chartData: ChartData[] = useMemo(
() =>
lineMetrics
? [
{
borderColor: getLineColor(Number(line.id)),
data: lineMetrics.map((metric) => ({
time: metric.year + ' ' + metric.month,
stat: metric[dayOfWeek],
})),
id: Number(line),
},
]
: [],
// eslint-disable-next-line react-hooks/exhaustive-deps
[JSON.stringify(lineMetrics)],
);

useEffect(() => {
if (!expanded) {
return;
}

setIsMounted(false);

lineMetrics
? chartDataset.push({
borderColor: getLineColor(Number(line.id)),
data: lineMetrics.map((metric) => ({
time: metric.year + ' ' + metric.month,
stat: metric[dayOfWeek],
})),
id: Number(line),
})
: '';
const chartDataset: ChartData[] = lineMetrics
? [
{
borderColor: getLineColor(Number(line.id)),
data: lineMetrics.map((metric) => ({
time: metric.year + ' ' + metric.month,
stat: metric[dayOfWeek],
})),
id: Number(line),
},
]
: [];

setData(chartDataset);

setIsMounted(true);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
line,
dayOfWeek,
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(lineMetrics),
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(chartDataset),
]);

const hashCode = function (s) {
var h = 0,
l = s.length,
i = 0;
if (l > 0) while (i < l) h = ((h << 5) - h + s.charCodeAt(i++)) | 0;
return h;
};

if (line.name === 'Line 2') {
console.log('Render Row -----------------------');
console.log('Render Row - Line ' + line.name);
console.log('Render Row - Metrics Length ' + lineMetrics?.length);
console.log('Render Row - Mounted ' + isMounted);
console.log('Render Row - Expanded ' + expanded);
console.log('Render Row - Line ' + JSON.stringify(line));
console.log('Render Row - Day of Week ' + dayOfWeek);
console.log(
'Render Row - Chart Data Hash' + hashCode(JSON.stringify(data)),
);
}

return (
<>
<tr
Expand Down Expand Up @@ -142,6 +187,9 @@ export default function MetroLineTableRow({

{expanded && (
<td id="table_chart_container" key={line.id}>
{/* It seems the rendering takes time. We can't use loading because the data itself is already loaded.
Either make more efficient (ex: don't draw points/lines) or use another chart library.
Possible options include web worker, less data points */}
{isMounted ? (
<LineChart
options={options}
Expand Down
Loading