type City = 'Vancouver' | 'Victoria' | 'Kelowna';
const SERIES = {
Vancouver: '#003f5c',
Victoria: '#bc5090',
Kelowna: '#ff6361',
} as Record<City, string>;
interface Props {
data: Array<{
date: string;
Vancouver: number;
Victoria: number;
Kelowna: number;
}>;
width: number;
}
const INITIAL_VIEW = createViewbox([201, 0, 50, 250]);
const OUTER_VIEW = createViewbox([0, 0, 251, 250]);
const App: preact.FunctionComponent<Props> = (props) => {
const { data, width } = props;
const [view, updateView, isAnimating] = useStateTransition(INITIAL_VIEW);
const zoomTo = (final: Viewbox) => {
updateView({
duration: 600,
step: (progress) => {
return view.interpolate(final, progress);
},
});
};
const events = useGesture({
onDrag: (ev) => {