hotel-manage-stack/rates
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Sync x-axis range between rate and occupancy charts in history popup

Browse source 
Both Plotly charts in OccHistoryModal now share the same xaxis range,
computed as the union of valid_from timestamps across both datasets so
rate movements and occupancy pick-up align on the same time axis.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-12 13:52:29 +00:00
parent 60fdda8129
commit 516f774223
1 changed files with 12 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/pages/Bookability.tsx
View file

@ -1207,6 +1207,16 @@ function OccHistoryModal({ target, onClose }: { target: HistoryTarget; onClose:
} }
}, [occData]) }, [occData])
const xRange = useMemo(() => {
const ts: string[] = [
...(rateData?.history ?? []).map(h => h.valid_from),
...(occData?.snapshots ?? []).map(s => s.valid_from),
]
if (!ts.length) return undefined
const sorted = [...ts].sort()
return [sorted[0], sorted[sorted.length - 1]] as [string, string]
}, [rateData, occData])
const isLoading = rateLoading || occLoading const isLoading = rateLoading || occLoading
return ( return (
@ -1248,6 +1258,7 @@ function OccHistoryModal({ target, onClose }: { target: HistoryTarget; onClose:
height: 240, height: 240,
showlegend: true, showlegend: true,
legend: { orientation: 'h' as const, y: -0.35, font: { size: 11 } }, legend: { orientation: 'h' as const, y: -0.35, font: { size: 11 } },
xaxis: { ...PLOT_BASE.xaxis, ...(xRange ? { range: xRange } : {}) },
yaxis: { ...PLOT_BASE.yaxis, tickprefix: '£', title: { text: '£ / night' } }, yaxis: { ...PLOT_BASE.yaxis, tickprefix: '£', title: { text: '£ / night' } },
}} }}
config={{ displayModeBar: false, responsive: true }} config={{ displayModeBar: false, responsive: true }}
@ -1277,6 +1288,7 @@ function OccHistoryModal({ target, onClose }: { target: HistoryTarget; onClose:
...PLOT_BASE, ...PLOT_BASE,
height: 180, height: 180,
showlegend: false, showlegend: false,
xaxis: { ...PLOT_BASE.xaxis, ...(xRange ? { range: xRange } : {}) },
yaxis: { ...PLOT_BASE.yaxis, range: [0, 100], ticksuffix: '%', title: { text: 'Occ %' } }, yaxis: { ...PLOT_BASE.yaxis, range: [0, 100], ticksuffix: '%', title: { text: 'Occ %' } },
}} }}
config={{ displayModeBar: false, responsive: true }} config={{ displayModeBar: false, responsive: true }}