mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-31 11:59:10 +00:00
refactor(report): improve report summary
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { OntimeReport } from 'ontime-types';
|
import type { LastRunReport } from 'ontime-types';
|
||||||
|
|
||||||
import { ontimeQueryClient } from '../../common/queryClient';
|
import { ontimeQueryClient } from '../../common/queryClient';
|
||||||
import { REPORT, apiEntryUrl } from './constants';
|
import { REPORT, apiEntryUrl } from './constants';
|
||||||
@@ -8,18 +8,13 @@ import type { RequestOptions } from './requestOptions';
|
|||||||
export const reportUrl = `${apiEntryUrl}/report`;
|
export const reportUrl = `${apiEntryUrl}/report`;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* HTTP request to fetch all reports
|
* HTTP request to fetch the one report retained from the latest run.
|
||||||
*/
|
*/
|
||||||
export async function fetchReport(options?: RequestOptions): Promise<OntimeReport> {
|
export async function fetchLastRunReport(options?: RequestOptions): Promise<LastRunReport> {
|
||||||
const res = await axios.get(reportUrl, { signal: options?.signal });
|
const res = await axios.get(`${reportUrl}/last-run`, { signal: options?.signal });
|
||||||
return res.data;
|
return res.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function deleteReport(id: string) {
|
|
||||||
await axios.delete(`${reportUrl}/${id}`);
|
|
||||||
await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function deleteAllReport() {
|
export async function deleteAllReport() {
|
||||||
await axios.delete(`${reportUrl}/all`);
|
await axios.delete(`${reportUrl}/all`);
|
||||||
await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
|
await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
|
||||||
|
|||||||
@@ -1,17 +1,30 @@
|
|||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { OntimeReport } from 'ontime-types';
|
import type { LastRunReport } from 'ontime-types';
|
||||||
import { MILLIS_PER_HOUR } from 'ontime-utils';
|
import { MILLIS_PER_HOUR } from 'ontime-utils';
|
||||||
|
|
||||||
import { REPORT } from '../api/constants';
|
import { REPORT } from '../api/constants';
|
||||||
import { fetchReport } from '../api/report';
|
import { fetchLastRunReport } from '../api/report';
|
||||||
|
|
||||||
|
const emptyLastRunReport: LastRunReport = {
|
||||||
|
eventReports: {},
|
||||||
|
rundown: null,
|
||||||
|
show: {
|
||||||
|
plannedStart: null,
|
||||||
|
plannedEnd: null,
|
||||||
|
plannedDuration: null,
|
||||||
|
actualStart: null,
|
||||||
|
actualEnd: null,
|
||||||
|
actualDuration: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default function useReport() {
|
export default function useReport() {
|
||||||
const { data, refetch } = useQuery<OntimeReport>({
|
const { data } = useQuery<LastRunReport>({
|
||||||
queryKey: REPORT,
|
queryKey: REPORT,
|
||||||
queryFn: ({ signal }) => fetchReport({ signal }),
|
queryFn: ({ signal }) => fetchLastRunReport({ signal }),
|
||||||
placeholderData: (previousData, _previousQuery) => previousData,
|
placeholderData: (previousData) => previousData,
|
||||||
staleTime: MILLIS_PER_HOUR,
|
staleTime: MILLIS_PER_HOUR,
|
||||||
});
|
});
|
||||||
|
|
||||||
return { data: data ?? {}, refetch };
|
return { data: data ?? emptyLastRunReport };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import type { OntimeEventReport } from 'ontime-types';
|
||||||
|
import { dayInMs, MILLIS_PER_MINUTE } from 'ontime-utils';
|
||||||
|
|
||||||
|
import { getEventVariance } from '../report';
|
||||||
|
|
||||||
|
it('uses captured days when measuring an event across midnight', () => {
|
||||||
|
const report: OntimeEventReport = {
|
||||||
|
startedAt: dayInMs - 5 * MILLIS_PER_MINUTE,
|
||||||
|
startedAtDay: 0,
|
||||||
|
endedAt: 5 * MILLIS_PER_MINUTE,
|
||||||
|
endedAtDay: 1,
|
||||||
|
scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
|
||||||
|
scheduledDay: 0,
|
||||||
|
scheduledDuration: 10 * MILLIS_PER_MINUTE,
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(getEventVariance(report)).toMatchObject({
|
||||||
|
actualDuration: 10 * MILLIS_PER_MINUTE,
|
||||||
|
delta: 0,
|
||||||
|
status: 'ontime',
|
||||||
|
});
|
||||||
|
expect(getEventVariance({ ...report, endedAt: null })).toMatchObject({ status: 'not-run' });
|
||||||
|
});
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import type { MaybeNumber, OntimeEventReport } from 'ontime-types';
|
||||||
|
import { dayInMs, MILLIS_PER_SECOND } from 'ontime-utils';
|
||||||
|
|
||||||
|
type EventVariance = {
|
||||||
|
actualDuration: MaybeNumber;
|
||||||
|
delta: number;
|
||||||
|
status: 'ontime' | 'over' | 'under' | 'not-run';
|
||||||
|
};
|
||||||
|
|
||||||
|
const notRun: EventVariance = { actualDuration: null, delta: 0, status: 'not-run' };
|
||||||
|
|
||||||
|
export function getReportTimePosition(time: number, day: number): number;
|
||||||
|
export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber;
|
||||||
|
export function getReportTimePosition(time: MaybeNumber, day: number | null): MaybeNumber {
|
||||||
|
return time === null || day === null ? null : day * dayInMs + time;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getEventVariance(entry: OntimeEventReport | undefined): EventVariance {
|
||||||
|
if (!entry) return notRun;
|
||||||
|
|
||||||
|
const start = getReportTimePosition(entry.startedAt, entry.startedAtDay);
|
||||||
|
const end = getReportTimePosition(entry.endedAt, entry.endedAtDay);
|
||||||
|
if (start === null || end === null) return notRun;
|
||||||
|
|
||||||
|
const actualDuration = end - start;
|
||||||
|
const delta = actualDuration - entry.scheduledDuration;
|
||||||
|
if (Math.abs(delta) < MILLIS_PER_SECOND) return { actualDuration, delta, status: 'ontime' };
|
||||||
|
return { actualDuration, delta, status: delta > 0 ? 'over' : 'under' };
|
||||||
|
}
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
th.over {
|
|
||||||
color: $playback-over;
|
|
||||||
}
|
|
||||||
|
|
||||||
th.under {
|
|
||||||
color: $playback-under;
|
|
||||||
}
|
|
||||||
@@ -1,103 +1,92 @@
|
|||||||
|
import { isOntimeEvent } from 'ontime-types';
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { IoTrashBin } from 'react-icons/io5';
|
import { IoDownloadOutline, IoTrashBin } from 'react-icons/io5';
|
||||||
|
|
||||||
import { deleteAllReport } from '../../../../common/api/report';
|
import { deleteAllReport } from '../../../../common/api/report';
|
||||||
import { createBlob, downloadBlob } from '../../../../common/api/utils';
|
import { createBlob, downloadBlob } from '../../../../common/api/utils';
|
||||||
import Button from '../../../../common/components/buttons/Button';
|
import Button from '../../../../common/components/buttons/Button';
|
||||||
import useReport from '../../../../common/hooks-query/useReport';
|
import useReport from '../../../../common/hooks-query/useReport';
|
||||||
import useRundown from '../../../../common/hooks-query/useRundown';
|
|
||||||
import { cx } from '../../../../common/utils/styleUtils';
|
|
||||||
import { formatTime } from '../../../../common/utils/time';
|
|
||||||
import * as Panel from '../../panel-utils/PanelUtils';
|
import * as Panel from '../../panel-utils/PanelUtils';
|
||||||
import { CombinedReport, getCombinedReport, makeReportCSV } from './reportSettings.utils';
|
import ReportShowSummary from './composite/ReportShowSummary';
|
||||||
|
import ReportTable from './composite/ReportTable';
|
||||||
import style from './ReportSettings.module.scss';
|
import { getCombinedReport, getGroupReports, getRunSummary, makeReportCSV } from './reportSettings.utils';
|
||||||
|
|
||||||
export default function ReportSettings() {
|
export default function ReportSettings() {
|
||||||
const { data: reportData } = useReport();
|
const { data: lastRun } = useReport();
|
||||||
const { data } = useRundown();
|
const { eventReports, rundown, show } = lastRun;
|
||||||
|
|
||||||
const clearReport = async () => await deleteAllReport();
|
const combinedReport = useMemo(
|
||||||
const downloadCSV = (combinedReport: CombinedReport[]) => {
|
() => (rundown ? getCombinedReport(eventReports, rundown.entries, rundown.flatOrder) : []),
|
||||||
if (!combinedReport) {
|
[eventReports, rundown],
|
||||||
return;
|
);
|
||||||
|
|
||||||
|
const summary = useMemo(
|
||||||
|
() => getRunSummary(eventReports, rundown?.entries ?? {}, rundown?.flatOrder ?? []),
|
||||||
|
[eventReports, rundown],
|
||||||
|
);
|
||||||
|
|
||||||
|
const groups = useMemo(
|
||||||
|
() => (rundown ? getGroupReports(eventReports, rundown.entries, rundown.order) : []),
|
||||||
|
[eventReports, rundown],
|
||||||
|
);
|
||||||
|
|
||||||
|
let worstOverrunTitle: string | null = null;
|
||||||
|
if (summary.worstOverrun !== null) {
|
||||||
|
const entry = rundown?.entries[summary.worstOverrun.id];
|
||||||
|
if (entry && isOntimeEvent(entry)) {
|
||||||
|
worstOverrunTitle = entry.title;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasReport = rundown !== null && Object.keys(eventReports).length > 0;
|
||||||
|
const downloadCSV = () => {
|
||||||
|
if (!hasReport) return;
|
||||||
|
|
||||||
const csv = makeReportCSV(combinedReport);
|
const csv = makeReportCSV(combinedReport);
|
||||||
const blob = createBlob(csv, 'text/csv;charset=utf-8;');
|
const blob = createBlob(csv, 'text/csv;charset=utf-8;');
|
||||||
downloadBlob(blob, 'ontime-report.csv');
|
downloadBlob(blob, 'ontime-report.csv');
|
||||||
};
|
};
|
||||||
|
|
||||||
const combinedReport = useMemo(() => {
|
|
||||||
return getCombinedReport(reportData, data.entries, data.flatOrder);
|
|
||||||
}, [reportData, data.entries, data.flatOrder]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Panel.Section>
|
<Panel.Section>
|
||||||
<Panel.Card>
|
<Panel.Card>
|
||||||
<Panel.SubHeader>Report</Panel.SubHeader>
|
<Panel.SubHeader>
|
||||||
|
Report
|
||||||
|
<Panel.InlineElements>
|
||||||
|
<Button onClick={downloadCSV} disabled={!hasReport}>
|
||||||
|
<IoDownloadOutline />
|
||||||
|
Export CSV
|
||||||
|
</Button>
|
||||||
|
<Button variant='subtle-destructive' onClick={deleteAllReport} disabled={!hasReport}>
|
||||||
|
<IoTrashBin />
|
||||||
|
Clear All
|
||||||
|
</Button>
|
||||||
|
</Panel.InlineElements>
|
||||||
|
</Panel.SubHeader>
|
||||||
<Panel.Divider />
|
<Panel.Divider />
|
||||||
<Panel.Section>
|
|
||||||
<Panel.Title>
|
|
||||||
Manage report
|
|
||||||
<Panel.InlineElements>
|
|
||||||
<Button onClick={() => downloadCSV(combinedReport)} disabled={combinedReport.length === 0}>
|
|
||||||
<IoTrashBin />
|
|
||||||
Export CSV
|
|
||||||
</Button>
|
|
||||||
<Button variant='subtle-destructive' onClick={clearReport} disabled={combinedReport.length === 0}>
|
|
||||||
<IoTrashBin />
|
|
||||||
Clear All
|
|
||||||
</Button>
|
|
||||||
</Panel.InlineElements>
|
|
||||||
</Panel.Title>
|
|
||||||
</Panel.Section>
|
|
||||||
<Panel.Section>
|
|
||||||
<Panel.Table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>#</th>
|
|
||||||
<th>Cue</th>
|
|
||||||
<th>Title</th>
|
|
||||||
<th>Scheduled Start</th>
|
|
||||||
<th>Actual Start</th>
|
|
||||||
<th>Scheduled End</th>
|
|
||||||
<th>Actual End</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{combinedReport.length === 0 && (
|
|
||||||
<Panel.TableEmpty
|
|
||||||
title='No report data yet'
|
|
||||||
description='Reports are generated as you run through the show, comparing scheduled times against what actually happened.'
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{combinedReport.map((entry) => {
|
{!hasReport ? (
|
||||||
const start = (() => {
|
<Panel.Section>
|
||||||
if (entry.actualStart === null) return null;
|
<Panel.EmptyState
|
||||||
if (entry.actualStart <= entry.scheduledStart) return 'under';
|
title='No report yet'
|
||||||
return 'over';
|
description='Ontime records what actually happened as you run the show, and compares it against the schedule as it stood at the time. Start an event and this fills in.'
|
||||||
})();
|
/>
|
||||||
const end = (() => {
|
</Panel.Section>
|
||||||
if (entry.actualEnd === null) return null;
|
) : (
|
||||||
if (entry.actualEnd <= entry.scheduledEnd) return 'under';
|
<>
|
||||||
return 'over';
|
<Panel.Section>
|
||||||
})();
|
<ReportShowSummary
|
||||||
return (
|
rundownTitle={rundown.title}
|
||||||
<tr key={entry.id}>
|
show={show}
|
||||||
<th>{entry.index}</th>
|
summary={summary}
|
||||||
<th>{entry.cue}</th>
|
worstOverrunTitle={worstOverrunTitle}
|
||||||
<th>{entry.title}</th>
|
/>
|
||||||
<th className={cx([start && style[start]])}>{formatTime(entry.scheduledStart)}</th>
|
</Panel.Section>
|
||||||
<th className={cx([start && style[start]])}>{formatTime(entry.actualStart)}</th>
|
<Panel.Section>
|
||||||
<th className={cx([end && style[end]])}>{formatTime(entry.scheduledEnd)}</th>
|
<ReportTable rows={combinedReport} groups={groups} />
|
||||||
<th className={cx([end && style[end]])}>{formatTime(entry.actualEnd)}</th>
|
</Panel.Section>
|
||||||
</tr>
|
</>
|
||||||
);
|
)}
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</Panel.Table>
|
|
||||||
</Panel.Section>
|
|
||||||
</Panel.Card>
|
</Panel.Card>
|
||||||
</Panel.Section>
|
</Panel.Section>
|
||||||
);
|
);
|
||||||
|
|||||||
+161
@@ -0,0 +1,161 @@
|
|||||||
|
import type { OntimeEventReport, OntimeReport } from 'ontime-types';
|
||||||
|
import {
|
||||||
|
createDelay,
|
||||||
|
createEvent,
|
||||||
|
createGroup,
|
||||||
|
dayInMs,
|
||||||
|
MILLIS_PER_HOUR,
|
||||||
|
MILLIS_PER_MINUTE,
|
||||||
|
MILLIS_PER_SECOND,
|
||||||
|
} from 'ontime-utils';
|
||||||
|
|
||||||
|
import {
|
||||||
|
formatOffset,
|
||||||
|
getCombinedReport,
|
||||||
|
getGroupReports,
|
||||||
|
getRunSummary,
|
||||||
|
getShowOffsets,
|
||||||
|
makeReportCSV,
|
||||||
|
} from '../reportSettings.utils';
|
||||||
|
|
||||||
|
function makeEvent(id: string, patch = {}) {
|
||||||
|
const event = createEvent({ id, title: id, ...patch });
|
||||||
|
if (!event) throw new Error('Failed to create test event');
|
||||||
|
return event;
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeReport(patch: Partial<OntimeEventReport> = {}): OntimeEventReport {
|
||||||
|
return {
|
||||||
|
startedAt: 5 * MILLIS_PER_MINUTE,
|
||||||
|
startedAtDay: 1,
|
||||||
|
endedAt: 15 * MILLIS_PER_MINUTE,
|
||||||
|
endedAtDay: 1,
|
||||||
|
scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
|
||||||
|
scheduledDay: 0,
|
||||||
|
scheduledDuration: 10 * MILLIS_PER_MINUTE,
|
||||||
|
...patch,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('getCombinedReport()', () => {
|
||||||
|
it('uses the captured schedule and absolute day when calculating offsets', () => {
|
||||||
|
const entry = makeEvent('a', { timeStart: 0, duration: 99 * MILLIS_PER_MINUTE });
|
||||||
|
const rows = getCombinedReport({ a: makeReport() }, { a: entry }, ['a']);
|
||||||
|
|
||||||
|
expect(rows[0]).toMatchObject({
|
||||||
|
scheduledStart: dayInMs - 5 * MILLIS_PER_MINUTE,
|
||||||
|
scheduledEnd: dayInMs + 5 * MILLIS_PER_MINUTE,
|
||||||
|
startOffset: 10 * MILLIS_PER_MINUTE,
|
||||||
|
endOffset: 10 * MILLIS_PER_MINUTE,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('includes unplayed events but excludes skipped and non-event entries', () => {
|
||||||
|
const ran = makeEvent('ran');
|
||||||
|
const unplayed = makeEvent('unplayed', { timeStart: 20 * MILLIS_PER_MINUTE });
|
||||||
|
const skipped = makeEvent('skipped', { skip: true });
|
||||||
|
const delay = createDelay({ id: 'delay' });
|
||||||
|
const report: OntimeReport = { ran: makeReport({ scheduledStart: 0, scheduledDay: 0 }) };
|
||||||
|
|
||||||
|
const rows = getCombinedReport(report, { ran, unplayed, skipped, delay }, ['ran', 'unplayed', 'skipped', 'delay']);
|
||||||
|
|
||||||
|
expect(rows.map(({ id }) => id)).toEqual(['ran', 'unplayed']);
|
||||||
|
expect(rows[1]).toMatchObject({ scheduledStart: unplayed.timeStart, actualStart: null, actualEnd: null });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('report calculations', () => {
|
||||||
|
it('keeps finishing time separate from running time', () => {
|
||||||
|
const offsets = getShowOffsets({
|
||||||
|
plannedStart: 19 * MILLIS_PER_HOUR,
|
||||||
|
plannedEnd: 21 * MILLIS_PER_HOUR,
|
||||||
|
plannedDuration: 2 * MILLIS_PER_HOUR,
|
||||||
|
actualStart: 19 * MILLIS_PER_HOUR - 10 * MILLIS_PER_MINUTE,
|
||||||
|
actualEnd: 21 * MILLIS_PER_HOUR - 6 * MILLIS_PER_MINUTE,
|
||||||
|
actualDuration: 2 * MILLIS_PER_HOUR + 4 * MILLIS_PER_MINUTE,
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(offsets).toMatchObject({
|
||||||
|
startOffset: -10 * MILLIS_PER_MINUTE,
|
||||||
|
endOffset: -6 * MILLIS_PER_MINUTE,
|
||||||
|
durationOffset: 4 * MILLIS_PER_MINUTE,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('measures completed groups against their target and exposes untimed gaps', () => {
|
||||||
|
const group = createGroup({ id: 'group', entries: ['a', 'b'], targetDuration: 30 * MILLIS_PER_MINUTE });
|
||||||
|
const entries = {
|
||||||
|
group,
|
||||||
|
a: makeEvent('a', { parent: group.id, duration: 10 * MILLIS_PER_MINUTE }),
|
||||||
|
b: makeEvent('b', { parent: group.id, duration: 10 * MILLIS_PER_MINUTE }),
|
||||||
|
};
|
||||||
|
const report: OntimeReport = {
|
||||||
|
a: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 10 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
|
||||||
|
b: makeReport({
|
||||||
|
startedAt: 15 * MILLIS_PER_MINUTE,
|
||||||
|
startedAtDay: 0,
|
||||||
|
endedAt: 25 * MILLIS_PER_MINUTE,
|
||||||
|
endedAtDay: 0,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(getGroupReports(report, entries, [group.id])[0]).toMatchObject({
|
||||||
|
elapsed: 25 * MILLIS_PER_MINUTE,
|
||||||
|
untimed: 5 * MILLIS_PER_MINUTE,
|
||||||
|
variance: -5 * MILLIS_PER_MINUTE,
|
||||||
|
eventsRun: 2,
|
||||||
|
eventsPlanned: 2,
|
||||||
|
});
|
||||||
|
expect(getGroupReports({ a: report.a }, entries, [group.id])[0].variance).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('summarises completed events and excludes skipped events from the plan', () => {
|
||||||
|
const entries = { a: makeEvent('a'), b: makeEvent('b', { skip: true }) };
|
||||||
|
const report = {
|
||||||
|
a: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 15 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
|
||||||
|
b: makeReport({ startedAt: 0, startedAtDay: 0, endedAt: 30 * MILLIS_PER_MINUTE, endedAtDay: 0 }),
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(getRunSummary(report, entries, ['a', 'b'])).toEqual({
|
||||||
|
eventsRun: 2,
|
||||||
|
eventsPlanned: 1,
|
||||||
|
worstOverrun: { id: 'b', delta: 20 * MILLIS_PER_MINUTE },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('report formatting', () => {
|
||||||
|
it.each([
|
||||||
|
[null, '–'],
|
||||||
|
[MILLIS_PER_SECOND / 2, 'On time'],
|
||||||
|
[4 * MILLIS_PER_MINUTE + 12 * MILLIS_PER_SECOND, '+4m12s'],
|
||||||
|
[-MILLIS_PER_MINUTE, '-1m'],
|
||||||
|
])('formats offset %s', (value, expected) => {
|
||||||
|
expect(formatOffset(value)).toBe(expected);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('exports group context and leaves missing actual times empty', () => {
|
||||||
|
const csv = makeReportCSV([
|
||||||
|
{
|
||||||
|
id: 'a',
|
||||||
|
index: 1,
|
||||||
|
title: 'Welcome',
|
||||||
|
cue: '1',
|
||||||
|
parent: 'act1',
|
||||||
|
groupTitle: 'Act 1',
|
||||||
|
scheduledStart: 0,
|
||||||
|
scheduledEnd: 10 * MILLIS_PER_MINUTE,
|
||||||
|
actualStart: null,
|
||||||
|
startOffset: null,
|
||||||
|
actualEnd: null,
|
||||||
|
endOffset: null,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const fields = csv.trim().split('\n')[1].split(',');
|
||||||
|
expect(csv).toContain('Group');
|
||||||
|
expect(fields[1]).toBe('Act 1');
|
||||||
|
expect(fields[5]).toBe('');
|
||||||
|
expect(fields[7]).toBe('');
|
||||||
|
});
|
||||||
|
});
|
||||||
+138
@@ -0,0 +1,138 @@
|
|||||||
|
// Panel.Table nests its own padding inside the section it sits in, so the
|
||||||
|
// summary takes the same inset to keep one left edge down the whole panel
|
||||||
|
.inset {
|
||||||
|
padding: 0 var(--panel-card-padding, 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
padding: 1.25rem;
|
||||||
|
background-color: $gray-1200;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
color: $ui-white;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headlineLabel,
|
||||||
|
.metricLabel {
|
||||||
|
color: $gray-300;
|
||||||
|
font-size: calc(1rem - 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.headlineValue {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unavailable {
|
||||||
|
max-width: 32rem;
|
||||||
|
color: $warning-orange;
|
||||||
|
font-size: calc(1rem - 2px);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto auto;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.375rem 1.5rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricValue,
|
||||||
|
.metricOffset {
|
||||||
|
margin: 0;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricValue {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planned,
|
||||||
|
.arrow {
|
||||||
|
color: $gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actual {
|
||||||
|
color: $ui-white;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metricOffset {
|
||||||
|
justify-self: end;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.over {
|
||||||
|
color: $playback-over;
|
||||||
|
}
|
||||||
|
|
||||||
|
.under {
|
||||||
|
color: $playback-under;
|
||||||
|
}
|
||||||
|
|
||||||
|
.none {
|
||||||
|
color: $gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem 0.75rem;
|
||||||
|
|
||||||
|
padding-top: 0.875rem;
|
||||||
|
border-top: 1px solid $white-10;
|
||||||
|
|
||||||
|
color: $gray-300;
|
||||||
|
font-size: calc(1rem - 2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerItem {
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
& + &::before {
|
||||||
|
content: '·';
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
color: $gray-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: $ui-white;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.overrun {
|
||||||
|
color: $playback-over;
|
||||||
|
font-weight: 600;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
+130
@@ -0,0 +1,130 @@
|
|||||||
|
import type { MaybeNumber, ShowReport } from 'ontime-types';
|
||||||
|
|
||||||
|
import { cx, enDash } from '../../../../../common/utils/styleUtils';
|
||||||
|
import { formatDuration, formatTime } from '../../../../../common/utils/time';
|
||||||
|
import { formatOffset, getShowOffsets, offsetTone } from '../reportSettings.utils';
|
||||||
|
import type { RunSummary } from '../reportSettings.utils';
|
||||||
|
|
||||||
|
import style from './ReportShowSummary.module.scss';
|
||||||
|
|
||||||
|
interface ReportShowSummaryProps {
|
||||||
|
rundownTitle: string;
|
||||||
|
show: ShowReport;
|
||||||
|
summary: RunSummary;
|
||||||
|
worstOverrunTitle: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Leads the report with whether the show ran to the length it was planned for.
|
||||||
|
*
|
||||||
|
* Running time is the headline rather than finishing time because it is the
|
||||||
|
* part the team controls and the part that carries into the next run of the
|
||||||
|
* same rundown. Finishing time is the other question a report is asked, and
|
||||||
|
* the two can point opposite ways, so it stays beside it as its own row
|
||||||
|
* rather than being folded into a single figure.
|
||||||
|
*/
|
||||||
|
export default function ReportShowSummary({ rundownTitle, show, summary, worstOverrunTitle }: ReportShowSummaryProps) {
|
||||||
|
const offsets = getShowOffsets(show);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A show that stopped early has no meaningful end: its last event is simply
|
||||||
|
* where it got to. Measuring that against the plan would report a show which
|
||||||
|
* never finished as having come in comfortably short.
|
||||||
|
*/
|
||||||
|
const didReachEnd = summary.eventsRun > 0 && summary.eventsRun === summary.eventsPlanned;
|
||||||
|
const hasPlan = offsets.startOffset !== null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={style.inset}>
|
||||||
|
<section className={style.summary} aria-labelledby='report-summary-title'>
|
||||||
|
<h4 id='report-summary-title' className={style.title}>
|
||||||
|
{rundownTitle || 'Untitled rundown'}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className={style.body}>
|
||||||
|
<div className={style.headline}>
|
||||||
|
<span className={style.headlineLabel}>{didReachEnd ? 'Against planned duration' : 'Show incomplete'}</span>
|
||||||
|
{didReachEnd && offsets.durationOffset !== null ? (
|
||||||
|
<span className={cx([style.headlineValue, style[offsetTone(offsets.durationOffset)]])}>
|
||||||
|
{formatOffset(offsets.durationOffset)}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className={style.unavailable}>
|
||||||
|
The show did not reach the end of the rundown, so there is nothing to measure it against.
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dl className={style.metrics}>
|
||||||
|
{hasPlan && (
|
||||||
|
<Metric
|
||||||
|
label='Started'
|
||||||
|
planned={formatMaybeTime(show.plannedStart)}
|
||||||
|
actual={formatMaybeTime(show.actualStart)}
|
||||||
|
offset={offsets.startOffset}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{hasPlan && didReachEnd && (
|
||||||
|
<Metric
|
||||||
|
label='Ended'
|
||||||
|
planned={formatMaybeTime(show.plannedEnd)}
|
||||||
|
actual={formatMaybeTime(show.actualEnd)}
|
||||||
|
offset={offsets.endOffset}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{didReachEnd && (
|
||||||
|
<Metric
|
||||||
|
label='Duration'
|
||||||
|
planned={formatMaybeDuration(offsets.plannedDuration)}
|
||||||
|
actual={formatMaybeDuration(offsets.actualDuration)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{summary.worstOverrun !== null && (
|
||||||
|
<div className={style.footer}>
|
||||||
|
<span className={style.footerItem}>
|
||||||
|
longest overrun <b>{worstOverrunTitle || 'an event'}</b>{' '}
|
||||||
|
<span className={style.overrun}>+{formatDuration(summary.worstOverrun.delta, false)}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Metric({
|
||||||
|
label,
|
||||||
|
planned,
|
||||||
|
actual,
|
||||||
|
offset,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
planned: string;
|
||||||
|
actual: string;
|
||||||
|
offset?: MaybeNumber;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<dt className={style.metricLabel}>{label}</dt>
|
||||||
|
<dd className={style.metricValue}>
|
||||||
|
<span className={style.planned}>{planned}</span>
|
||||||
|
<span className={style.arrow}>→</span>
|
||||||
|
<span className={style.actual}>{actual}</span>
|
||||||
|
</dd>
|
||||||
|
<dd className={cx([style.metricOffset, offset !== undefined && style[offsetTone(offset)]])}>
|
||||||
|
{offset === undefined ? '' : formatOffset(offset)}
|
||||||
|
</dd>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatMaybeTime(value: MaybeNumber): string {
|
||||||
|
return value === null ? enDash : formatTime(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatMaybeDuration(value: MaybeNumber): string {
|
||||||
|
return value === null ? enDash : formatDuration(value, false);
|
||||||
|
}
|
||||||
+160
@@ -0,0 +1,160 @@
|
|||||||
|
$rail: var(--user-bg, #{$gray-500});
|
||||||
|
$event-wash: var(--event-bg, transparent);
|
||||||
|
|
||||||
|
// event rows carry their values in td, not th: the panel's th styling is meant
|
||||||
|
// for column headings and renders whatever it holds small, bold and upper case
|
||||||
|
td.over {
|
||||||
|
color: $playback-over;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.under {
|
||||||
|
color: $playback-under;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventRow td {
|
||||||
|
background-color: color-mix(in srgb, #{$gray-1300} 96%, #{$event-wash} 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupedRow td:first-child {
|
||||||
|
box-shadow: inset 2px 0 $rail;
|
||||||
|
// clear the rail rather than sitting against it
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupRow > * {
|
||||||
|
background-color: color-mix(in srgb, #{$gray-1300} 88%, #{$rail} 12%);
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupSpacer {
|
||||||
|
height: 0.75rem;
|
||||||
|
background: transparent !important;
|
||||||
|
|
||||||
|
td {
|
||||||
|
height: 0.75rem;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupSummary {
|
||||||
|
padding: 0.875rem 1rem;
|
||||||
|
box-shadow: inset 4px 0 $rail;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
text-transform: none;
|
||||||
|
letter-spacing: normal;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupTitle,
|
||||||
|
.groupLabel,
|
||||||
|
.groupValues,
|
||||||
|
.groupFooter {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupTitle {
|
||||||
|
color: $ui-white;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupBody {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem 2.5rem;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupHeadline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupLabel,
|
||||||
|
.groupMetrics dt,
|
||||||
|
.groupFooter {
|
||||||
|
color: $gray-400;
|
||||||
|
font-size: calc(1rem - 3px);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupHeadlineValue {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.1;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupMetrics {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.375rem 1.5rem;
|
||||||
|
margin: 0;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupMetrics dd {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupValues {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: $gray-300;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: $ui-white;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupFooter {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.25rem 1rem;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
border-top: 1px solid $white-10;
|
||||||
|
|
||||||
|
b {
|
||||||
|
color: $ui-white;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.unavailable {
|
||||||
|
color: $gray-400;
|
||||||
|
font-size: calc(1rem - 3px);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
color: $gray-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.over {
|
||||||
|
color: $playback-over;
|
||||||
|
}
|
||||||
|
|
||||||
|
.under {
|
||||||
|
color: $playback-under;
|
||||||
|
}
|
||||||
|
|
||||||
|
.none {
|
||||||
|
color: $ui-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventCue,
|
||||||
|
.eventIndex {
|
||||||
|
color: $gray-300;
|
||||||
|
}
|
||||||
@@ -0,0 +1,193 @@
|
|||||||
|
import type { EntryId } from 'ontime-types';
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
|
import Tooltip from '../../../../../common/components/tooltip/Tooltip';
|
||||||
|
import { cx, enDash } from '../../../../../common/utils/styleUtils';
|
||||||
|
import { formatDuration, formatTime } from '../../../../../common/utils/time';
|
||||||
|
import * as Panel from '../../../panel-utils/PanelUtils';
|
||||||
|
import { formatOffset, offsetTone } from '../reportSettings.utils';
|
||||||
|
import type { CombinedReport, GroupReport } from '../reportSettings.utils';
|
||||||
|
|
||||||
|
import style from './ReportTable.module.scss';
|
||||||
|
|
||||||
|
interface ReportTableProps {
|
||||||
|
rows: CombinedReport[];
|
||||||
|
groups: GroupReport[];
|
||||||
|
}
|
||||||
|
|
||||||
|
type ReportColourStyle = React.CSSProperties & Partial<Record<'--event-bg' | '--user-bg', string | undefined>>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The report laid out the way the show was planned: blocks, then the events
|
||||||
|
* inside them. Each block carries how it ran against the budget set for it.
|
||||||
|
*/
|
||||||
|
export default function ReportTable({ rows, groups }: ReportTableProps) {
|
||||||
|
// groups are rendered where their first event appears, so the table follows
|
||||||
|
// the rundown rather than a separate ordering
|
||||||
|
const sections = useMemo(() => makeSections(rows, groups), [rows, groups]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Panel.Table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>Cue</th>
|
||||||
|
<th>Title</th>
|
||||||
|
<th>Scheduled Start</th>
|
||||||
|
<th>Actual Start</th>
|
||||||
|
<th>Scheduled End</th>
|
||||||
|
<th>Actual End</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
{sections.map((section, index) => (
|
||||||
|
<tbody key={section.key}>
|
||||||
|
{section.group && index > 0 && <GroupSpacer />}
|
||||||
|
{section.group && <GroupRow group={section.group} />}
|
||||||
|
{section.rows.map((entry) => (
|
||||||
|
<EventRow
|
||||||
|
key={entry.id}
|
||||||
|
entry={entry}
|
||||||
|
groupColour={section.group?.colour}
|
||||||
|
grouped={section.group !== null}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
))}
|
||||||
|
</Panel.Table>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function GroupSpacer() {
|
||||||
|
return (
|
||||||
|
<tr aria-hidden='true' className={style.groupSpacer}>
|
||||||
|
<td colSpan={7} />
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A group read the same way as the show above it: what it was measured
|
||||||
|
* against, what it actually did, and how much of it ran.
|
||||||
|
*/
|
||||||
|
function GroupRow({ group }: { group: GroupReport }) {
|
||||||
|
const hasTarget = group.targetDuration !== null;
|
||||||
|
const measuredAgainst = group.targetDuration ?? group.scheduledDuration;
|
||||||
|
const unavailableReason = group.eventsRun === 0 ? 'Did not run' : 'Still running';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr className={style.groupRow} style={groupColourStyle(group.colour)}>
|
||||||
|
<th scope='rowgroup' colSpan={7} className={style.groupSummary}>
|
||||||
|
<span className={style.groupTitle}>{group.title || 'Untitled group'}</span>
|
||||||
|
<div className={style.groupBody}>
|
||||||
|
<div className={style.groupHeadline}>
|
||||||
|
<span className={style.groupLabel}>{hasTarget ? 'Against target' : 'Against schedule'}</span>
|
||||||
|
{group.variance === null ? (
|
||||||
|
<span className={style.unavailable}>{unavailableReason}</span>
|
||||||
|
) : (
|
||||||
|
<span className={cx([style.groupHeadlineValue, style[offsetTone(group.variance)]])}>
|
||||||
|
{formatOffset(group.variance)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<dl className={style.groupMetrics}>
|
||||||
|
<dt>{hasTarget ? 'Target' : 'Scheduled'}</dt>
|
||||||
|
<dd className={style.groupValues}>
|
||||||
|
<span>{formatDuration(measuredAgainst, false)}</span>
|
||||||
|
<span className={style.arrow}>→</span>
|
||||||
|
<b>{group.elapsed === null ? enDash : formatDuration(group.elapsed, false)}</b>
|
||||||
|
</dd>
|
||||||
|
{group.actualStart !== null && group.actualEnd !== null && (
|
||||||
|
<>
|
||||||
|
<dt>Ran</dt>
|
||||||
|
<dd className={style.groupValues}>
|
||||||
|
<span>{formatTime(group.actualStart)}</span>
|
||||||
|
<span className={style.arrow}>→</span>
|
||||||
|
<b>{formatTime(group.actualEnd)}</b>
|
||||||
|
</dd>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
{group.untimed !== null && group.untimed > 0 && (
|
||||||
|
<span className={style.groupFooter}>
|
||||||
|
<Tooltip
|
||||||
|
text='Time inside this group with no event running. It covers anything the timer did not: changeovers, a late start on an event, or an item run without a timer at all.'
|
||||||
|
render={<span />}
|
||||||
|
>
|
||||||
|
<b>{formatDuration(group.untimed, false)}</b> untimed
|
||||||
|
</Tooltip>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function EventRow({ entry, groupColour, grouped }: { entry: CombinedReport; groupColour?: string; grouped: boolean }) {
|
||||||
|
const start = offsetTone(entry.startOffset);
|
||||||
|
const end = offsetTone(entry.endOffset);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr className={cx([style.eventRow, grouped && style.groupedRow])} style={eventColours(entry.colour, groupColour)}>
|
||||||
|
<td className={style.eventIndex}>{entry.index}</td>
|
||||||
|
<td className={style.eventCue}>{entry.cue}</td>
|
||||||
|
<td>{entry.title}</td>
|
||||||
|
<td>{formatTime(entry.scheduledStart)}</td>
|
||||||
|
<td className={cx([start && style[start]])}>{formatTime(entry.actualStart)}</td>
|
||||||
|
<td>{formatTime(entry.scheduledEnd)}</td>
|
||||||
|
<td className={cx([end && style[end]])}>{formatTime(entry.actualEnd)}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Uses the cuesheet's custom property for group colour. Left unset when the
|
||||||
|
* group has none so the stylesheet can provide a neutral edge.
|
||||||
|
*/
|
||||||
|
function groupColourStyle(colour?: string): ReportColourStyle {
|
||||||
|
const style: ReportColourStyle = {};
|
||||||
|
if (colour) style['--user-bg'] = colour;
|
||||||
|
return style;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Keeps the event wash distinct from its parent group's identifying rail. */
|
||||||
|
function eventColours(eventColour: string, groupColour?: string): ReportColourStyle {
|
||||||
|
const style: ReportColourStyle = {};
|
||||||
|
if (eventColour) style['--event-bg'] = eventColour;
|
||||||
|
if (groupColour) style['--user-bg'] = groupColour;
|
||||||
|
return style;
|
||||||
|
}
|
||||||
|
|
||||||
|
type Section = {
|
||||||
|
key: string;
|
||||||
|
group: GroupReport | null;
|
||||||
|
rows: CombinedReport[];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Splits the rows into the blocks they belong to, keeping rundown order and
|
||||||
|
* leaving ungrouped events in their own run of rows.
|
||||||
|
*/
|
||||||
|
function makeSections(rows: CombinedReport[], groups: GroupReport[]): Section[] {
|
||||||
|
const byId = new Map<EntryId, GroupReport>(groups.map((group) => [group.id, group]));
|
||||||
|
const sections: Section[] = [];
|
||||||
|
let current: Section | null = null;
|
||||||
|
|
||||||
|
let currentParent: EntryId | null | undefined;
|
||||||
|
|
||||||
|
for (const row of rows) {
|
||||||
|
if (current === null || row.parent !== currentParent) {
|
||||||
|
currentParent = row.parent;
|
||||||
|
// index keeps the key unique even if a group were to appear twice
|
||||||
|
current = {
|
||||||
|
key: `${row.parent ?? 'ungrouped'}-${sections.length}`,
|
||||||
|
group: row.parent ? (byId.get(row.parent) ?? null) : null,
|
||||||
|
rows: [],
|
||||||
|
};
|
||||||
|
sections.push(current);
|
||||||
|
}
|
||||||
|
current.rows.push(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
return sections;
|
||||||
|
}
|
||||||
+223
-50
@@ -1,89 +1,262 @@
|
|||||||
import { EntryId, MaybeNumber, OntimeReport, RundownEntries, isOntimeEvent } from 'ontime-types';
|
import type { EntryId, MaybeNumber, OntimeGroup, OntimeReport, RundownEntries, ShowReport } from 'ontime-types';
|
||||||
|
import { isOntimeEvent, isOntimeGroup } from 'ontime-types';
|
||||||
|
import { dayInMs, MILLIS_PER_SECOND } from 'ontime-utils';
|
||||||
|
|
||||||
import { makeCSVFromArrayOfArrays } from '../../../../common/utils/csv';
|
import { makeCSVFromArrayOfArrays } from '../../../../common/utils/csv';
|
||||||
import { formatTime } from '../../../../common/utils/time';
|
import { getEventVariance, getReportTimePosition } from '../../../../common/utils/report';
|
||||||
|
import { enDash } from '../../../../common/utils/styleUtils';
|
||||||
|
import { formatDuration, formatTime } from '../../../../common/utils/time';
|
||||||
|
|
||||||
export type CombinedReport = {
|
export type CombinedReport = {
|
||||||
id: EntryId;
|
id: EntryId;
|
||||||
index: number;
|
index: number;
|
||||||
title: string;
|
title: string;
|
||||||
cue: string;
|
cue: string;
|
||||||
|
colour: string;
|
||||||
|
/** the group this event belongs to, so the report can mirror the rundown */
|
||||||
|
parent: EntryId | null;
|
||||||
|
groupTitle: string;
|
||||||
scheduledStart: number;
|
scheduledStart: number;
|
||||||
actualStart: MaybeNumber;
|
actualStart: MaybeNumber;
|
||||||
|
startOffset: MaybeNumber;
|
||||||
scheduledEnd: number;
|
scheduledEnd: number;
|
||||||
actualEnd: MaybeNumber;
|
actualEnd: MaybeNumber;
|
||||||
|
endOffset: MaybeNumber;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ShowOffsets = {
|
||||||
|
startOffset: MaybeNumber;
|
||||||
|
endOffset: MaybeNumber;
|
||||||
|
plannedDuration: MaybeNumber;
|
||||||
|
actualDuration: MaybeNumber;
|
||||||
|
durationOffset: MaybeNumber;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type GroupReport = {
|
||||||
|
id: EntryId;
|
||||||
|
title: string;
|
||||||
|
colour: string;
|
||||||
|
targetDuration: MaybeNumber;
|
||||||
|
scheduledDuration: number;
|
||||||
|
actualStart: MaybeNumber;
|
||||||
|
actualEnd: MaybeNumber;
|
||||||
|
elapsed: MaybeNumber;
|
||||||
|
untimed: MaybeNumber;
|
||||||
|
variance: MaybeNumber;
|
||||||
|
eventsRun: number;
|
||||||
|
eventsPlanned: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type RunSummary = {
|
||||||
|
eventsRun: number;
|
||||||
|
eventsPlanned: number;
|
||||||
|
worstOverrun: { id: EntryId; delta: number } | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a combined report with the rundown data
|
* Creates a combined report with the rundown data.
|
||||||
|
*
|
||||||
|
* Events that ran are measured against the schedule recorded at the time,
|
||||||
|
* not the rundown's current values, so editing the rundown afterwards does
|
||||||
|
* not change how a show that already happened is reported. Events that never
|
||||||
|
* ran have no snapshot and fall back to the rundown.
|
||||||
*/
|
*/
|
||||||
export function getCombinedReport(
|
export function getCombinedReport(
|
||||||
report: OntimeReport,
|
report: OntimeReport,
|
||||||
rundown: RundownEntries,
|
rundown: RundownEntries,
|
||||||
flatOrder: EntryId[],
|
flatOrder: EntryId[],
|
||||||
): CombinedReport[] {
|
): CombinedReport[] {
|
||||||
if (Object.keys(report).length === 0) return [];
|
if (Object.keys(report).length === 0 || flatOrder.length === 0) return [];
|
||||||
if (flatOrder.length === 0) return [];
|
|
||||||
|
|
||||||
const combinedReport: CombinedReport[] = [];
|
const combinedReport: CombinedReport[] = [];
|
||||||
|
|
||||||
let index = 1;
|
let index = 1;
|
||||||
for (let i = 0; i < flatOrder.length; i++) {
|
for (const id of flatOrder) {
|
||||||
const id = flatOrder[i];
|
|
||||||
const entry = rundown[id];
|
const entry = rundown[id];
|
||||||
if (!entry || !isOntimeEvent(entry)) continue;
|
// skipped events were never meant to run, listing them alongside events
|
||||||
|
// that did would also disagree with the summary, which excludes them
|
||||||
|
if (!entry || !isOntimeEvent(entry) || entry.skip) continue;
|
||||||
|
|
||||||
if (!(id in report)) {
|
const parent = entry.parent;
|
||||||
combinedReport.push({
|
const group = parent ? rundown[parent] : undefined;
|
||||||
id: id,
|
const reported = report[id];
|
||||||
index: index,
|
const scheduledStart = reported?.scheduledStart ?? entry.timeStart;
|
||||||
title: entry.title,
|
const scheduledDay = reported?.scheduledDay ?? entry.dayOffset;
|
||||||
cue: entry.cue,
|
const scheduledStartPosition = getReportTimePosition(scheduledStart, scheduledDay);
|
||||||
scheduledStart: entry.timeStart,
|
const actualStartPosition = reported ? getReportTimePosition(reported.startedAt, reported.startedAtDay) : null;
|
||||||
actualEnd: null,
|
const actualEndPosition = reported ? getReportTimePosition(reported.endedAt, reported.endedAtDay) : null;
|
||||||
scheduledEnd: entry.timeEnd,
|
const scheduledDuration = reported?.scheduledDuration ?? entry.duration;
|
||||||
actualStart: null,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (id in report) {
|
combinedReport.push({
|
||||||
combinedReport.push({
|
id,
|
||||||
id: id,
|
index,
|
||||||
index: index,
|
title: entry.title,
|
||||||
title: entry.title,
|
cue: entry.cue,
|
||||||
cue: entry.cue,
|
colour: entry.colour,
|
||||||
scheduledStart: entry.timeStart,
|
parent,
|
||||||
actualEnd: report[id].endedAt,
|
groupTitle: group && isOntimeGroup(group) ? group.title : '',
|
||||||
scheduledEnd: entry.timeEnd,
|
// an event that ran is measured against the plan it ran on, one that
|
||||||
actualStart: report[id].startedAt,
|
// did not has no snapshot and falls back to the rundown
|
||||||
});
|
scheduledStart,
|
||||||
}
|
scheduledEnd: scheduledStart + scheduledDuration,
|
||||||
|
actualStart: reported?.startedAt ?? null,
|
||||||
|
startOffset: getOffset(actualStartPosition, scheduledStartPosition),
|
||||||
|
actualEnd: reported?.endedAt ?? null,
|
||||||
|
endOffset: getOffset(actualEndPosition, scheduledStartPosition + scheduledDuration),
|
||||||
|
});
|
||||||
index++;
|
index++;
|
||||||
}
|
}
|
||||||
|
|
||||||
return combinedReport;
|
return combinedReport;
|
||||||
}
|
}
|
||||||
|
|
||||||
const csvHeader = ['Index', 'Title', 'Cue', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
|
function getOffset(actual: MaybeNumber, scheduled: number): MaybeNumber {
|
||||||
|
return actual === null ? null : actual - scheduled;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
export function getShowOffsets(show: ShowReport): ShowOffsets {
|
||||||
* Transforms a CombinedReport into a CSV string
|
const { plannedDuration, actualDuration } = show;
|
||||||
*/
|
return {
|
||||||
export function makeReportCSV(combinedReport: CombinedReport[]) {
|
startOffset: getWallClockOffset(show.plannedStart, show.actualStart),
|
||||||
const csv: string[][] = [];
|
endOffset: getWallClockOffset(show.plannedEnd, show.actualEnd),
|
||||||
csv.push(csvHeader);
|
plannedDuration,
|
||||||
|
actualDuration,
|
||||||
|
durationOffset: plannedDuration === null || actualDuration === null ? null : actualDuration - plannedDuration,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
for (const entry of combinedReport) {
|
function getWallClockOffset(planned: MaybeNumber, actual: MaybeNumber): MaybeNumber {
|
||||||
csv.push([
|
if (planned === null || actual === null) return null;
|
||||||
String(entry.index),
|
|
||||||
entry.title,
|
const offset = actual - planned;
|
||||||
entry.cue,
|
if (offset < -dayInMs / 2) return offset + dayInMs;
|
||||||
formatTime(entry.scheduledStart),
|
if (offset > dayInMs / 2) return offset - dayInMs;
|
||||||
formatTime(entry.actualStart),
|
return offset;
|
||||||
formatTime(entry.scheduledEnd),
|
}
|
||||||
formatTime(entry.actualEnd),
|
|
||||||
]);
|
export function getGroupReports(report: OntimeReport, entries: RundownEntries, order: EntryId[]): GroupReport[] {
|
||||||
|
const groups: GroupReport[] = [];
|
||||||
|
for (const id of order) {
|
||||||
|
const group = entries[id];
|
||||||
|
if (group && isOntimeGroup(group)) groups.push(getGroupReport(group, report, entries));
|
||||||
|
}
|
||||||
|
return groups;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getGroupReport(group: OntimeGroup, report: OntimeReport, entries: RundownEntries): GroupReport {
|
||||||
|
let scheduledDuration = 0;
|
||||||
|
let eventsPlanned = 0;
|
||||||
|
let eventsRun = 0;
|
||||||
|
let ranDuration = 0;
|
||||||
|
let firstStart = Number.POSITIVE_INFINITY;
|
||||||
|
let lastEnd = Number.NEGATIVE_INFINITY;
|
||||||
|
let actualStart: MaybeNumber = null;
|
||||||
|
let actualEnd: MaybeNumber = null;
|
||||||
|
|
||||||
|
for (const childId of group.entries) {
|
||||||
|
const child = entries[childId];
|
||||||
|
if (!child || !isOntimeEvent(child) || child.skip) continue;
|
||||||
|
|
||||||
|
eventsPlanned += 1;
|
||||||
|
const reported = report[childId];
|
||||||
|
scheduledDuration += reported?.scheduledDuration ?? child.duration;
|
||||||
|
|
||||||
|
const variance = getEventVariance(reported);
|
||||||
|
if (variance.actualDuration === null || !reported) continue;
|
||||||
|
|
||||||
|
eventsRun += 1;
|
||||||
|
ranDuration += variance.actualDuration;
|
||||||
|
const start = getReportTimePosition(reported.startedAt, reported.startedAtDay);
|
||||||
|
const end = getReportTimePosition(reported.endedAt, reported.endedAtDay);
|
||||||
|
if (start !== null && start < firstStart) {
|
||||||
|
firstStart = start;
|
||||||
|
actualStart = reported.startedAt;
|
||||||
|
}
|
||||||
|
if (end !== null && end > lastEnd) {
|
||||||
|
lastEnd = end;
|
||||||
|
actualEnd = reported.endedAt;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return makeCSVFromArrayOfArrays(csv);
|
const elapsed = actualStart === null || actualEnd === null ? null : lastEnd - firstStart;
|
||||||
|
const measuredAgainst = group.targetDuration ?? scheduledDuration;
|
||||||
|
const isComplete = eventsRun > 0 && eventsRun === eventsPlanned;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: group.id,
|
||||||
|
title: group.title,
|
||||||
|
colour: group.colour,
|
||||||
|
targetDuration: group.targetDuration,
|
||||||
|
scheduledDuration,
|
||||||
|
actualStart,
|
||||||
|
actualEnd,
|
||||||
|
elapsed,
|
||||||
|
untimed: elapsed === null ? null : Math.max(0, elapsed - ranDuration),
|
||||||
|
variance: elapsed === null || !isComplete ? null : elapsed - measuredAgainst,
|
||||||
|
eventsRun,
|
||||||
|
eventsPlanned,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getRunSummary(report: OntimeReport, entries: RundownEntries, order: EntryId[]): RunSummary {
|
||||||
|
const eventsPlanned = order.filter((id) => {
|
||||||
|
const entry = entries[id];
|
||||||
|
return entry && isOntimeEvent(entry) && !entry.skip;
|
||||||
|
}).length;
|
||||||
|
const summary: RunSummary = { eventsRun: 0, eventsPlanned, worstOverrun: null };
|
||||||
|
for (const [id, entry] of Object.entries(report)) {
|
||||||
|
const variance = getEventVariance(entry);
|
||||||
|
if (variance.status === 'not-run') continue;
|
||||||
|
|
||||||
|
summary.eventsRun += 1;
|
||||||
|
if (variance.status === 'over' && (summary.worstOverrun?.delta ?? 0) < variance.delta) {
|
||||||
|
summary.worstOverrun = { id, delta: variance.delta };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return summary;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Signed offset, eg "+4m12s" / "-1m", following Ontime's convention that
|
||||||
|
* positive means behind schedule.
|
||||||
|
*/
|
||||||
|
export function formatOffset(value: MaybeNumber): string {
|
||||||
|
if (value === null) return enDash;
|
||||||
|
if (Math.abs(value) < MILLIS_PER_SECOND) return 'On time';
|
||||||
|
return `${value > 0 ? '+' : '-'}${formatDuration(Math.abs(value), false)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Whether an offset is behind, ahead, or neither, for colouring */
|
||||||
|
export function offsetTone(value: MaybeNumber): 'over' | 'under' | 'none' {
|
||||||
|
if (value === null || Math.abs(value) < MILLIS_PER_SECOND) return 'none';
|
||||||
|
return value > 0 ? 'over' : 'under';
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatCsvTime(value: MaybeNumber): string {
|
||||||
|
return value === null ? '' : formatTime(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const csvHeader = ['Index', 'Group', 'Cue', 'Title', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Transforms a CombinedReport into a CSV string.
|
||||||
|
*
|
||||||
|
* Exported as one row per event with its group named, rather than with
|
||||||
|
* rollups baked in, so it stays the dataset a report is built from.
|
||||||
|
*/
|
||||||
|
export function makeReportCSV(combinedReport: CombinedReport[]) {
|
||||||
|
const csv = combinedReport.map((entry) => [
|
||||||
|
String(entry.index),
|
||||||
|
entry.groupTitle,
|
||||||
|
entry.cue,
|
||||||
|
entry.title,
|
||||||
|
formatTime(entry.scheduledStart),
|
||||||
|
// an event that never ran leaves the cell empty rather than a
|
||||||
|
// placeholder, so a spreadsheet reads it as missing
|
||||||
|
formatCsvTime(entry.actualStart),
|
||||||
|
formatTime(entry.scheduledEnd),
|
||||||
|
formatCsvTime(entry.actualEnd),
|
||||||
|
]);
|
||||||
|
|
||||||
|
return makeCSVFromArrayOfArrays([csvHeader, ...csv]);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ function RunningStatus({ startedAt, expectedFinish, isStopped, isCountToEnd, isO
|
|||||||
|
|
||||||
function StoppedStatus() {
|
function StoppedStatus() {
|
||||||
const { data } = useReport();
|
const { data } = useReport();
|
||||||
const hasReport = Object.keys(data).length > 0;
|
const hasReport = Object.keys(data.eventReports).length > 0;
|
||||||
|
|
||||||
if (hasReport) {
|
if (hasReport) {
|
||||||
return <AppLink search='settings=sharing__report'>Go to report management</AppLink>;
|
return <AppLink search='settings=sharing__report'>Go to report management</AppLink>;
|
||||||
|
|||||||
@@ -141,7 +141,6 @@ function RundownEventInner({
|
|||||||
isPast={isPast}
|
isPast={isPast}
|
||||||
isLoaded={loaded}
|
isLoaded={loaded}
|
||||||
totalGap={totalGap}
|
totalGap={totalGap}
|
||||||
duration={duration}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div className={style.statusElements} id='entry-status' data-timertype={timerType}>
|
<div className={style.statusElements} id='entry-status' data-timertype={timerType}>
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { IoCheckmarkCircle } from 'react-icons/io5';
|
|||||||
import Tooltip from '../../../../common/components/tooltip/Tooltip';
|
import Tooltip from '../../../../common/components/tooltip/Tooltip';
|
||||||
import useReport from '../../../../common/hooks-query/useReport';
|
import useReport from '../../../../common/hooks-query/useReport';
|
||||||
import { usePlayback } from '../../../../common/hooks/useSocket';
|
import { usePlayback } from '../../../../common/hooks/useSocket';
|
||||||
|
import { getEventVariance } from '../../../../common/utils/report';
|
||||||
import { cx } from '../../../../common/utils/styleUtils';
|
import { cx } from '../../../../common/utils/styleUtils';
|
||||||
import { formatDuration, useTimeUntilExpectedStart } from '../../../../common/utils/time';
|
import { formatDuration, useTimeUntilExpectedStart } from '../../../../common/utils/time';
|
||||||
|
|
||||||
@@ -20,7 +21,6 @@ interface RundownEventChipProps {
|
|||||||
isLoaded: boolean;
|
isLoaded: boolean;
|
||||||
className: string;
|
className: string;
|
||||||
totalGap: number;
|
totalGap: number;
|
||||||
duration: number;
|
|
||||||
isLinkedToLoaded: boolean;
|
isLinkedToLoaded: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -33,7 +33,6 @@ export default function RundownEventChip({
|
|||||||
className,
|
className,
|
||||||
totalGap,
|
totalGap,
|
||||||
id,
|
id,
|
||||||
duration,
|
|
||||||
isLinkedToLoaded,
|
isLinkedToLoaded,
|
||||||
}: RundownEventChipProps) {
|
}: RundownEventChipProps) {
|
||||||
const playback = usePlayback();
|
const playback = usePlayback();
|
||||||
@@ -45,25 +44,20 @@ export default function RundownEventChip({
|
|||||||
const playbackActive = isPlaybackActive(playback);
|
const playbackActive = isPlaybackActive(playback);
|
||||||
|
|
||||||
if (!playbackActive || isPast) {
|
if (!playbackActive || isPast) {
|
||||||
return <EventReport className={className} id={id} duration={duration} />;
|
return <EventReport className={className} id={id} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (playbackActive) {
|
return (
|
||||||
// we extracted the component to avoid unnecessary calculations and re-renders
|
<Tooltip text='Expected time until start' render={<span />} className={className}>
|
||||||
return (
|
<EventUntil
|
||||||
<Tooltip text='Expected time until start' render={<span />} className={className}>
|
timeStart={timeStart}
|
||||||
<EventUntil
|
delay={delay}
|
||||||
timeStart={timeStart}
|
dayOffset={dayOffset}
|
||||||
delay={delay}
|
totalGap={totalGap}
|
||||||
dayOffset={dayOffset}
|
isLinkedToLoaded={isLinkedToLoaded}
|
||||||
totalGap={totalGap}
|
/>
|
||||||
isLinkedToLoaded={isLinkedToLoaded}
|
</Tooltip>
|
||||||
/>
|
);
|
||||||
</Tooltip>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface EventUntilProps {
|
interface EventUntilProps {
|
||||||
@@ -86,41 +80,30 @@ function EventUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
|
|||||||
interface EventReportProps {
|
interface EventReportProps {
|
||||||
className: string;
|
className: string;
|
||||||
id: string;
|
id: string;
|
||||||
duration: number;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function EventReport(props: EventReportProps) {
|
function EventReport({ className, id }: EventReportProps) {
|
||||||
const { className, id, duration } = props;
|
|
||||||
const { data } = useReport();
|
const { data } = useReport();
|
||||||
const currentReport = data[id];
|
const currentReport = data.eventReports[id];
|
||||||
|
|
||||||
const [value, overUnderStyle, tooltip] = useMemo(() => {
|
const [value, overUnderStyle, tooltip] = useMemo(() => {
|
||||||
if (!currentReport) {
|
// Use the schedule recorded when the event ran so later rundown edits do
|
||||||
|
// not change its report.
|
||||||
|
const variance = getEventVariance(currentReport);
|
||||||
|
if (variance.status === 'not-run') {
|
||||||
return [null, 'none', ''];
|
return [null, 'none', ''];
|
||||||
}
|
}
|
||||||
|
|
||||||
const { startedAt, endedAt } = currentReport;
|
if (variance.status === 'ontime') {
|
||||||
if (!startedAt || !endedAt) {
|
|
||||||
return [null, 'none', ''];
|
|
||||||
}
|
|
||||||
|
|
||||||
const actualDuration = endedAt - startedAt;
|
|
||||||
const difference = actualDuration - duration;
|
|
||||||
const absDifference = Math.abs(difference);
|
|
||||||
|
|
||||||
if (absDifference < MILLIS_PER_SECOND) {
|
|
||||||
return ['ontime', 'under', 'Event finished on time'];
|
return ['ontime', 'under', 'Event finished on time'];
|
||||||
}
|
}
|
||||||
|
|
||||||
const isOver = difference > 0;
|
const absDifference = Math.abs(variance.delta);
|
||||||
|
const isOver = variance.status === 'over';
|
||||||
const fullTimeValue = millisToString(absDifference);
|
const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${millisToString(absDifference)}`;
|
||||||
|
|
||||||
const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${fullTimeValue}`;
|
|
||||||
|
|
||||||
const value = `${isOver ? '+' : '-'}${formatDuration(absDifference, absDifference > 2 * MILLIS_PER_MINUTE)}`;
|
const value = `${isOver ? '+' : '-'}${formatDuration(absDifference, absDifference > 2 * MILLIS_PER_MINUTE)}`;
|
||||||
return [value, isOver ? 'over' : 'under', tooltip];
|
return [value, variance.status, tooltip];
|
||||||
}, [currentReport, duration]);
|
}, [currentReport]);
|
||||||
|
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return null;
|
return null;
|
||||||
|
|||||||
@@ -107,7 +107,15 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
|
|||||||
// a subscribed group is live when any of its children is the selected/running event
|
// a subscribed group is live when any of its children is the selected/running event
|
||||||
const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
|
const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
|
||||||
const isArmed = !isLive && activeEntryId === selectedEventId;
|
const isArmed = !isLive && activeEntryId === selectedEventId;
|
||||||
const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
|
const countdownEvent = extendEventData(
|
||||||
|
event,
|
||||||
|
currentDay,
|
||||||
|
actualStart,
|
||||||
|
plannedStart,
|
||||||
|
offset,
|
||||||
|
mode,
|
||||||
|
reportData.eventReports,
|
||||||
|
);
|
||||||
const displayTitle = getPropertyValue(event, mainSource ?? 'title');
|
const displayTitle = getPropertyValue(event, mainSource ?? 'title');
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ export default function SingleEventCountdown({ subscribedEvent, goToEditMode }:
|
|||||||
|
|
||||||
const expectedEnd = getExpectedEnd(subscribedEvent, expectedStart, currentDay);
|
const expectedEnd = getExpectedEnd(subscribedEvent, expectedStart, currentDay);
|
||||||
|
|
||||||
const { endedAt } = reportData[subscribedEvent.reportId ?? subscribedEvent.id] ?? { endedAt: null };
|
const { endedAt } = reportData.eventReports[subscribedEvent.reportId ?? subscribedEvent.id] ?? { endedAt: null };
|
||||||
const countdownEvent = { ...subscribedEvent, expectedStart, endedAt, expectedEnd };
|
const countdownEvent = { ...subscribedEvent, expectedStart, endedAt, expectedEnd };
|
||||||
const titleTmp = getPropertyValue(subscribedEvent, mainSource ?? 'title');
|
const titleTmp = getPropertyValue(subscribedEvent, mainSource ?? 'title');
|
||||||
const title = titleTmp?.length ? titleTmp : ' '; // insert utf-8 empty space to avoid the line collapsing;
|
const title = titleTmp?.length ? titleTmp : ' '; // insert utf-8 empty space to avoid the line collapsing;
|
||||||
|
|||||||
@@ -0,0 +1,112 @@
|
|||||||
|
import type { PlayableEvent } from 'ontime-types';
|
||||||
|
import { RefetchKey, TimerLifeCycle } from 'ontime-types';
|
||||||
|
import { MILLIS_PER_MINUTE } from 'ontime-utils';
|
||||||
|
import { vi } from 'vitest';
|
||||||
|
|
||||||
|
import { sendRefetch } from '../../../adapters/WebsocketAdapter.js';
|
||||||
|
import { makeRuntimeStateData } from '../../../stores/__mocks__/runtimeState.mocks.js';
|
||||||
|
import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
|
||||||
|
import { clear, generate, generateLastRunReport, triggerReportEntry } from '../report.service.js';
|
||||||
|
|
||||||
|
vi.mock('../../../adapters/WebsocketAdapter.js', () => ({ sendRefetch: vi.fn() }));
|
||||||
|
|
||||||
|
const eventA = makeOntimeEvent({
|
||||||
|
id: 'event-a',
|
||||||
|
dayOffset: 0,
|
||||||
|
timeStart: 0,
|
||||||
|
timeEnd: MILLIS_PER_MINUTE,
|
||||||
|
duration: MILLIS_PER_MINUTE,
|
||||||
|
}) as PlayableEvent;
|
||||||
|
const eventB = makeOntimeEvent({
|
||||||
|
id: 'event-b',
|
||||||
|
dayOffset: 0,
|
||||||
|
timeStart: MILLIS_PER_MINUTE,
|
||||||
|
timeEnd: 2 * MILLIS_PER_MINUTE,
|
||||||
|
duration: MILLIS_PER_MINUTE,
|
||||||
|
}) as PlayableEvent;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
clear();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('records lifecycle times while keeping the schedule captured at start', () => {
|
||||||
|
const start = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 500 }, _startEpoch: 1 });
|
||||||
|
triggerReportEntry(TimerLifeCycle.onStart, start);
|
||||||
|
|
||||||
|
const edited = { ...eventA, timeStart: 999, duration: 999 } as PlayableEvent;
|
||||||
|
const stop = makeRuntimeStateData({ eventNow: edited, clock: 2 * MILLIS_PER_MINUTE, rundown: { currentDay: 1 } });
|
||||||
|
triggerReportEntry(TimerLifeCycle.onStop, stop);
|
||||||
|
|
||||||
|
expect(generate()[eventA.id]).toEqual({
|
||||||
|
startedAt: 500,
|
||||||
|
startedAtDay: 0,
|
||||||
|
endedAt: 2 * MILLIS_PER_MINUTE,
|
||||||
|
endedAtDay: 1,
|
||||||
|
scheduledStart: eventA.timeStart,
|
||||||
|
scheduledDay: eventA.dayOffset,
|
||||||
|
scheduledDuration: eventA.duration,
|
||||||
|
});
|
||||||
|
expect(sendRefetch).toHaveBeenCalledTimes(2);
|
||||||
|
expect(sendRefetch).toHaveBeenLastCalledWith(RefetchKey.Report);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('falls back to the current event when a stop arrives without a start', () => {
|
||||||
|
const stop = makeRuntimeStateData({ eventNow: eventA, clock: MILLIS_PER_MINUTE });
|
||||||
|
triggerReportEntry(TimerLifeCycle.onStop, stop);
|
||||||
|
|
||||||
|
expect(generate()[eventA.id]).toMatchObject({
|
||||||
|
startedAt: null,
|
||||||
|
endedAt: MILLIS_PER_MINUTE,
|
||||||
|
scheduledDuration: eventA.duration,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accumulates one run and replaces it when the next run starts', () => {
|
||||||
|
const firstRun = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
|
||||||
|
triggerReportEntry(TimerLifeCycle.onStart, firstRun);
|
||||||
|
triggerReportEntry(TimerLifeCycle.onStart, { ...firstRun, eventNow: eventB });
|
||||||
|
expect(Object.keys(generate())).toHaveLength(2);
|
||||||
|
|
||||||
|
triggerReportEntry(TimerLifeCycle.onStart, { ...firstRun, _startEpoch: 2 });
|
||||||
|
expect(Object.keys(generate())).toEqual([eventA.id]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns the latest report with the rundown plan captured at run start', () => {
|
||||||
|
const rundown = makeRundown({
|
||||||
|
id: 'run-1',
|
||||||
|
title: 'Original title',
|
||||||
|
order: [eventA.id, eventB.id],
|
||||||
|
entries: { [eventA.id]: eventA, [eventB.id]: eventB },
|
||||||
|
});
|
||||||
|
const start = makeRuntimeStateData({
|
||||||
|
eventNow: eventA,
|
||||||
|
timer: { startedAt: 500 },
|
||||||
|
_startEpoch: 1,
|
||||||
|
rundown: { plannedStart: 0, plannedEnd: 2 * MILLIS_PER_MINUTE },
|
||||||
|
});
|
||||||
|
triggerReportEntry(TimerLifeCycle.onStart, start, rundown);
|
||||||
|
triggerReportEntry(TimerLifeCycle.onStop, { ...start, clock: MILLIS_PER_MINUTE });
|
||||||
|
rundown.title = 'Edited later';
|
||||||
|
|
||||||
|
expect(generateLastRunReport()).toMatchObject({
|
||||||
|
rundown: { id: 'run-1', title: 'Original title' },
|
||||||
|
eventReports: { [eventA.id]: { scheduledDuration: MILLIS_PER_MINUTE } },
|
||||||
|
show: {
|
||||||
|
plannedStart: 0,
|
||||||
|
plannedEnd: 2 * MILLIS_PER_MINUTE,
|
||||||
|
plannedDuration: 2 * MILLIS_PER_MINUTE,
|
||||||
|
actualStart: 500,
|
||||||
|
actualEnd: MILLIS_PER_MINUTE,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('clears the retained report and rundown snapshot together', () => {
|
||||||
|
const rundown = makeRundown({ order: [eventA.id], entries: { [eventA.id]: eventA } });
|
||||||
|
const state = makeRuntimeStateData({ eventNow: eventA, timer: { startedAt: 0 }, _startEpoch: 1 });
|
||||||
|
triggerReportEntry(TimerLifeCycle.onStart, state, rundown);
|
||||||
|
clear();
|
||||||
|
|
||||||
|
expect(generateLastRunReport()).toMatchObject({ eventReports: {}, rundown: null });
|
||||||
|
});
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
import type { OntimeEventReport, OntimeReport, PlayableEvent } from 'ontime-types';
|
||||||
|
import { dayInMs, MILLIS_PER_HOUR, MILLIS_PER_MINUTE } from 'ontime-utils';
|
||||||
|
|
||||||
|
import { makeOntimeEvent, makeRundown } from '../../rundown/__mocks__/rundown.mocks.js';
|
||||||
|
import { getActualShowTimes, getPlannedShowDuration } from '../report.utils.js';
|
||||||
|
|
||||||
|
function makeReport(patch: Partial<OntimeEventReport>): OntimeEventReport {
|
||||||
|
return {
|
||||||
|
startedAt: 0,
|
||||||
|
startedAtDay: 0,
|
||||||
|
endedAt: 0,
|
||||||
|
endedAtDay: 0,
|
||||||
|
scheduledStart: 0,
|
||||||
|
scheduledDay: 0,
|
||||||
|
scheduledDuration: 0,
|
||||||
|
...patch,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('getActualShowTimes()', () => {
|
||||||
|
it('preserves long gaps within the same day', () => {
|
||||||
|
const report: OntimeReport = {
|
||||||
|
morning: makeReport({ startedAt: 6 * MILLIS_PER_HOUR, endedAt: 7 * MILLIS_PER_HOUR }),
|
||||||
|
evening: makeReport({ startedAt: 20 * MILLIS_PER_HOUR, endedAt: 21 * MILLIS_PER_HOUR }),
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(getActualShowTimes(report)).toEqual({
|
||||||
|
actualStart: 6 * MILLIS_PER_HOUR,
|
||||||
|
actualEnd: 21 * MILLIS_PER_HOUR,
|
||||||
|
actualDuration: 15 * MILLIS_PER_HOUR,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('orders events by their captured day across midnight', () => {
|
||||||
|
const report: OntimeReport = {
|
||||||
|
beforeMidnight: makeReport({
|
||||||
|
startedAt: dayInMs - 10 * MILLIS_PER_MINUTE,
|
||||||
|
endedAt: dayInMs - 5 * MILLIS_PER_MINUTE,
|
||||||
|
}),
|
||||||
|
afterMidnight: makeReport({
|
||||||
|
startedAt: 0,
|
||||||
|
startedAtDay: 1,
|
||||||
|
endedAt: 10 * MILLIS_PER_MINUTE,
|
||||||
|
endedAtDay: 1,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
expect(getActualShowTimes(report).actualDuration).toBe(20 * MILLIS_PER_MINUTE);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('derives planned duration from playable, non-skipped events', () => {
|
||||||
|
const first = makeOntimeEvent({
|
||||||
|
id: 'first',
|
||||||
|
dayOffset: 0,
|
||||||
|
timeStart: 23 * MILLIS_PER_HOUR,
|
||||||
|
duration: MILLIS_PER_HOUR,
|
||||||
|
}) as PlayableEvent;
|
||||||
|
const last = makeOntimeEvent({
|
||||||
|
id: 'last',
|
||||||
|
dayOffset: 1,
|
||||||
|
timeStart: MILLIS_PER_HOUR,
|
||||||
|
duration: MILLIS_PER_HOUR,
|
||||||
|
}) as PlayableEvent;
|
||||||
|
const skipped = makeOntimeEvent({ id: 'skipped', dayOffset: 2, timeStart: 0, duration: MILLIS_PER_HOUR, skip: true });
|
||||||
|
const rundown = makeRundown({
|
||||||
|
order: [first.id, last.id, skipped.id],
|
||||||
|
entries: { [first.id]: first, [last.id]: last, [skipped.id]: skipped },
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(getPlannedShowDuration(rundown)).toBe(3 * MILLIS_PER_HOUR);
|
||||||
|
});
|
||||||
@@ -10,6 +10,10 @@ router.get('/', (_req: Request, res: Response) => {
|
|||||||
res.status(200).json(report.generate());
|
res.status(200).json(report.generate());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
router.get('/last-run', (_req: Request, res: Response) => {
|
||||||
|
res.status(200).json(report.generateLastRunReport());
|
||||||
|
});
|
||||||
|
|
||||||
router.delete('/all', (_req: Request, res: Response) => {
|
router.delete('/all', (_req: Request, res: Response) => {
|
||||||
report.clear();
|
report.clear();
|
||||||
res.status(204).send();
|
res.status(204).send();
|
||||||
|
|||||||
@@ -1,13 +1,35 @@
|
|||||||
import { OntimeEventReport, OntimeReport, RefetchKey, TimerLifeCycle } from 'ontime-types';
|
import type { LastRunReport, OntimeEventReport, OntimeReport, Rundown, ShowReport } from 'ontime-types';
|
||||||
import { DeepReadonly } from 'ts-essentials';
|
import { RefetchKey, TimerLifeCycle } from 'ontime-types';
|
||||||
|
import type { DeepReadonly } from 'ts-essentials';
|
||||||
|
|
||||||
import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
|
import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
|
||||||
import { RuntimeState } from '../../stores/runtimeState.js';
|
import type { RuntimeState } from '../../stores/runtimeState.js';
|
||||||
|
import { getCurrentRundown } from '../rundown/rundown.dao.js';
|
||||||
|
import { getActualShowTimes, getPlannedShowDuration } from './report.utils.js';
|
||||||
|
|
||||||
const report = new Map<string, OntimeEventReport>();
|
const report = new Map<string, OntimeEventReport>();
|
||||||
|
|
||||||
let formattedReport: OntimeReport | null = null;
|
let formattedReport: OntimeReport | null = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Identifies the show the current report belongs to.
|
||||||
|
* The report describes one run, so starting a new show begins a fresh one
|
||||||
|
* rather than mixing a rehearsal into the numbers for the performance.
|
||||||
|
*/
|
||||||
|
let currentShowStart: number | null = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The plan the show was measured against, taken when it starts.
|
||||||
|
* Snapshotted for the same reason the per event schedule is: editing the
|
||||||
|
* rundown afterwards must not move the target a past show was judged by.
|
||||||
|
*/
|
||||||
|
let plannedTimes: Pick<ShowReport, 'plannedStart' | 'plannedEnd' | 'plannedDuration'> = {
|
||||||
|
plannedStart: null,
|
||||||
|
plannedEnd: null,
|
||||||
|
plannedDuration: null,
|
||||||
|
};
|
||||||
|
let rundownSnapshot: Rundown | null = null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* generates a full report
|
* generates a full report
|
||||||
* @returns full report
|
* @returns full report
|
||||||
@@ -27,9 +49,15 @@ export function clear(id?: string) {
|
|||||||
formattedReport = null;
|
formattedReport = null;
|
||||||
if (id) {
|
if (id) {
|
||||||
report.delete(id);
|
report.delete(id);
|
||||||
} else {
|
return;
|
||||||
report.clear();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// clearing everything also forgets which show the report described, so the
|
||||||
|
// next event starts a report rather than resuming the one just discarded
|
||||||
|
report.clear();
|
||||||
|
currentShowStart = null;
|
||||||
|
plannedTimes = { plannedStart: null, plannedEnd: null, plannedDuration: null };
|
||||||
|
rundownSnapshot = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -41,6 +69,7 @@ export function clear(id?: string) {
|
|||||||
export function triggerReportEntry(
|
export function triggerReportEntry(
|
||||||
cycle: TimerLifeCycle.onStart | TimerLifeCycle.onStop,
|
cycle: TimerLifeCycle.onStart | TimerLifeCycle.onStop,
|
||||||
state: DeepReadonly<RuntimeState>,
|
state: DeepReadonly<RuntimeState>,
|
||||||
|
rundown: Readonly<Rundown> = getCurrentRundown(),
|
||||||
) {
|
) {
|
||||||
if (!state.eventNow?.id) {
|
if (!state.eventNow?.id) {
|
||||||
return;
|
return;
|
||||||
@@ -49,15 +78,80 @@ export function triggerReportEntry(
|
|||||||
const eventId = state.eventNow.id;
|
const eventId = state.eventNow.id;
|
||||||
|
|
||||||
if (cycle === TimerLifeCycle.onStart) {
|
if (cycle === TimerLifeCycle.onStart) {
|
||||||
report.set(eventId, { startedAt: state.timer.startedAt, endedAt: null });
|
startShowIfNew(state, rundown);
|
||||||
|
|
||||||
|
report.set(eventId, {
|
||||||
|
startedAt: state.timer.startedAt,
|
||||||
|
startedAtDay: state.rundown.currentDay ?? state.eventNow.dayOffset,
|
||||||
|
endedAt: null,
|
||||||
|
endedAtDay: null,
|
||||||
|
// snapshot the schedule so later rundown edits cannot change how a show
|
||||||
|
// that already happened is reported
|
||||||
|
scheduledStart: state.eventNow.timeStart,
|
||||||
|
scheduledDay: state.eventNow.dayOffset,
|
||||||
|
scheduledDuration: state.eventNow.duration,
|
||||||
|
});
|
||||||
formattedReport = null;
|
formattedReport = null;
|
||||||
|
sendRefetch(RefetchKey.Report);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (cycle === TimerLifeCycle.onStop) {
|
if (cycle === TimerLifeCycle.onStop) {
|
||||||
const startedAt = report.get(eventId)?.startedAt ?? null;
|
const previous = report.get(eventId);
|
||||||
report.set(eventId, { startedAt, endedAt: state.clock });
|
report.set(eventId, {
|
||||||
|
startedAt: previous?.startedAt ?? null,
|
||||||
|
startedAtDay: previous?.startedAtDay ?? null,
|
||||||
|
endedAt: state.clock,
|
||||||
|
endedAtDay: state.rundown.currentDay ?? state.eventNow.dayOffset,
|
||||||
|
scheduledStart: previous?.scheduledStart ?? state.eventNow.timeStart,
|
||||||
|
scheduledDay: previous?.scheduledDay ?? state.eventNow.dayOffset,
|
||||||
|
scheduledDuration: previous?.scheduledDuration ?? state.eventNow.duration,
|
||||||
|
});
|
||||||
formattedReport = null;
|
formattedReport = null;
|
||||||
sendRefetch(RefetchKey.Report);
|
sendRefetch(RefetchKey.Report);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clears the report when a new show begins.
|
||||||
|
*
|
||||||
|
* The runtime stamps a show when its first event starts, so a change of stamp
|
||||||
|
* means the previous report described a different run. Without this the report
|
||||||
|
* would accumulate across rehearsals and performances with no way to tell
|
||||||
|
* which numbers belonged to which.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
function startShowIfNew(state: DeepReadonly<RuntimeState>, rundown: Readonly<Rundown>) {
|
||||||
|
const showStart = state._startEpoch ?? state.rundown.actualStart;
|
||||||
|
if (showStart === null || showStart === currentShowStart) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
report.clear();
|
||||||
|
formattedReport = null;
|
||||||
|
currentShowStart = showStart;
|
||||||
|
rundownSnapshot = structuredClone(rundown);
|
||||||
|
plannedTimes = {
|
||||||
|
plannedStart: state.rundown.plannedStart,
|
||||||
|
plannedEnd: state.rundown.plannedEnd,
|
||||||
|
plannedDuration: getPlannedShowDuration(rundownSnapshot),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show level times for the report.
|
||||||
|
* Planned times are the ones captured when the show started, actual times are
|
||||||
|
* derived from the events that ran.
|
||||||
|
*/
|
||||||
|
function generateShowReport(): ShowReport {
|
||||||
|
return { ...plannedTimes, ...getActualShowTimes(generate()) };
|
||||||
|
}
|
||||||
|
|
||||||
|
/** The single report retained for the UI: the latest run and its captured plan. */
|
||||||
|
export function generateLastRunReport(): LastRunReport {
|
||||||
|
return {
|
||||||
|
eventReports: generate(),
|
||||||
|
rundown: rundownSnapshot,
|
||||||
|
show: generateShowReport(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import type { OntimeReport, Rundown, ShowReport } from 'ontime-types';
|
||||||
|
import { isOntimeEvent } from 'ontime-types';
|
||||||
|
import { dayInMs } from 'ontime-utils';
|
||||||
|
|
||||||
|
export function getActualShowTimes(
|
||||||
|
report: OntimeReport,
|
||||||
|
): Pick<ShowReport, 'actualStart' | 'actualEnd' | 'actualDuration'> {
|
||||||
|
let firstStart = Number.POSITIVE_INFINITY;
|
||||||
|
let lastEnd = Number.NEGATIVE_INFINITY;
|
||||||
|
let actualStart: number | null = null;
|
||||||
|
let actualEnd: number | null = null;
|
||||||
|
|
||||||
|
for (const entry of Object.values(report)) {
|
||||||
|
if (entry.startedAt !== null && entry.startedAtDay !== null) {
|
||||||
|
const start = entry.startedAtDay * dayInMs + entry.startedAt;
|
||||||
|
if (start < firstStart) {
|
||||||
|
firstStart = start;
|
||||||
|
actualStart = entry.startedAt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (entry.endedAt !== null && entry.endedAtDay !== null) {
|
||||||
|
const end = entry.endedAtDay * dayInMs + entry.endedAt;
|
||||||
|
if (end > lastEnd) {
|
||||||
|
lastEnd = end;
|
||||||
|
actualEnd = entry.endedAt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
actualStart,
|
||||||
|
actualEnd,
|
||||||
|
actualDuration: actualStart === null || actualEnd === null ? null : lastEnd - firstStart,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getPlannedShowDuration(rundown: Rundown): number | null {
|
||||||
|
let firstStart = Number.POSITIVE_INFINITY;
|
||||||
|
let lastEnd = Number.NEGATIVE_INFINITY;
|
||||||
|
|
||||||
|
for (const id of rundown.flatOrder) {
|
||||||
|
const entry = rundown.entries[id];
|
||||||
|
if (!entry || !isOntimeEvent(entry) || entry.skip) continue;
|
||||||
|
|
||||||
|
const start = entry.dayOffset * dayInMs + entry.timeStart;
|
||||||
|
firstStart = Math.min(firstStart, start);
|
||||||
|
lastEnd = Math.max(lastEnd, start + entry.duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Number.isFinite(firstStart) ? lastEnd - firstStart : null;
|
||||||
|
}
|
||||||
@@ -38,6 +38,12 @@ When relevant, cover interactions among:
|
|||||||
|
|
||||||
Pass time/state explicitly to keep rules deterministic and unit-testable.
|
Pass time/state explicitly to keep rules deterministic and unit-testable.
|
||||||
|
|
||||||
|
## Reports
|
||||||
|
|
||||||
|
- Retain only the most recent run. A report is one aggregate containing its event records, show timing, and rundown snapshot.
|
||||||
|
- Capture the rundown plan when the run starts; later rundown edits must not change a completed report.
|
||||||
|
- Store day offsets with report timestamps. Use absolute timeline positions for ordering and duration, and wall-clock values only for display.
|
||||||
|
|
||||||
## Imports and migrations
|
## Imports and migrations
|
||||||
|
|
||||||
- Treat project files, spreadsheets, custom fields, migrated data as untrusted.
|
- Treat project files, spreadsheets, custom fields, migrated data as untrusted.
|
||||||
|
|||||||
@@ -1,8 +1,42 @@
|
|||||||
import type { MaybeNumber } from '../../utils/utils.type.js';
|
import type { MaybeNumber } from '../../utils/utils.type.js';
|
||||||
|
import type { EntryId } from './OntimeEntry.js';
|
||||||
|
import type { Rundown } from './Rundown.type.js';
|
||||||
|
|
||||||
export type OntimeEventReport = {
|
export type OntimeEventReport = {
|
||||||
startedAt: MaybeNumber;
|
startedAt: MaybeNumber;
|
||||||
|
startedAtDay: number | null;
|
||||||
endedAt: MaybeNumber;
|
endedAt: MaybeNumber;
|
||||||
|
endedAtDay: number | null;
|
||||||
|
/**
|
||||||
|
* Snapshot of the schedule taken when the event ran.
|
||||||
|
* Keeping a copy is what makes a report a record: editing the rundown
|
||||||
|
* afterwards no longer changes how a show that already happened is reported.
|
||||||
|
*/
|
||||||
|
scheduledStart: number;
|
||||||
|
scheduledDay: number;
|
||||||
|
scheduledDuration: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type OntimeReport = Record<string, OntimeEventReport>;
|
export type OntimeReport = Record<EntryId, OntimeEventReport>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show level times for the report.
|
||||||
|
*
|
||||||
|
* Planned times are snapshotted when the show starts, for the same reason the
|
||||||
|
* per event schedule is. Actual times are derived from the events that ran.
|
||||||
|
*/
|
||||||
|
export type ShowReport = {
|
||||||
|
plannedStart: MaybeNumber;
|
||||||
|
plannedEnd: MaybeNumber;
|
||||||
|
plannedDuration: MaybeNumber;
|
||||||
|
actualStart: MaybeNumber;
|
||||||
|
actualEnd: MaybeNumber;
|
||||||
|
actualDuration: MaybeNumber;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** The only report retained by the server: the most recent run and its plan. */
|
||||||
|
export type LastRunReport = {
|
||||||
|
eventReports: OntimeReport;
|
||||||
|
rundown: Rundown | null;
|
||||||
|
show: ShowReport;
|
||||||
|
};
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export { TimerType } from './definitions/TimerType.type.js';
|
|||||||
export type { Day, Duration, Instant, TimeOfDay } from './definitions/core/Temporal.js';
|
export type { Day, Duration, Instant, TimeOfDay } from './definitions/core/Temporal.js';
|
||||||
|
|
||||||
// ---> Report
|
// ---> Report
|
||||||
export type { OntimeReport, OntimeEventReport } from './definitions/core/Report.type.js';
|
export type { LastRunReport, OntimeReport, OntimeEventReport, ShowReport } from './definitions/core/Report.type.js';
|
||||||
|
|
||||||
// ---> Automations
|
// ---> Automations
|
||||||
export { ontimeActionKeyValues } from './definitions/core/Automation.type.js';
|
export { ontimeActionKeyValues } from './definitions/core/Automation.type.js';
|
||||||
|
|||||||
Reference in New Issue
Block a user