feat: Add chart zooming options for recent activities

index.html

@@ -66,6 +66,7 @@ <h1 class="panel__title">Members</h1>
 			<div class="panel">
 				<div class="panel__head">
 					<h1 class="panel__title">Data</h1>
+					<div class="panel__actions" id="zoom-options"></div>
 				</div>
 				<div class="panel__content">
 					<div id="charts"></div>

scripts/members.js

@@ -158,10 +158,40 @@ class Members extends Base {
 		});
 	}
 
+	prepareChartFilters() {
+		const dates = [
+			{
+				label: 'Last week',
+				value: 1000 * 60 * 60 * 24 * 7
+			},
+			{
+				label: '2 weeks ago',
+				value: 1000 * 60 * 60 * 24 * 14
+			},
+			{
+				label: 'Last month',
+				value: 1000 * 60 * 60 * 24 * 30
+			},
+		];
+		const today = +(new Date());
+		const zoomOptions = [];
+		for (const date of dates) {
+			zoomOptions.push(html`
+				<button @click=${() => {
+					this.chart.xAxis[0].setExtremes((today - date.value), today);
+					this.chart.showResetZoom();
+				}}>${date.label}</button>
+			`);
+		}
+		const buttons = html`${zoomOptions}`;
+		render(buttons, document.querySelector('#zoom-options'));
+	}
+
 	async displayEvents(memberId) {
 		const response = await this.prepaeUserData(memberId);
 		const { data, memberEvents: { member : { name }} } = response;
 		this.drawChart(data, name);
+		this.prepareChartFilters();
 	}
 
 	async appendToChart(memberId) {