<script lang="ts">
import { analytics } from "../../stores/analytics.svelte.js";
import { sync } from "../../stores/sync.svelte.js";
interface Preset {
label: string;
days: number;
}
const presets: Preset[] = [
{ label: "7d", days: 7 },
{ label: "30d", days: 30 },
{ label: "90d", days: 90 },
{ label: "1y", days: 365 },
{ label: "All", days: 0 },
];
function localDateStr(d: Date): string {
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${y}-${m}-${day}`;
}
function daysAgo(n: number): string {
const d = new Date();
d.setDate(d.getDate() - n);
return localDateStr(d);
}
function todayStr(): string {
return localDateStr(new Date());
}
function allFrom(): string {
const ts = sync.stats?.earliest_session;
if (ts && ts.length >= 10) {
return ts.slice(0, 10);
}
return daysAgo(365);
}
function applyPreset(days: number) {
if (days === 0) {
analytics.setDateRange(allFrom(), todayStr());
} else {
analytics.setDateRange(daysAgo(days), todayStr());
}
}
function isActive(days: number): boolean {
const from = days === 0 ? allFrom() : daysAgo(days);
return analytics.from === from &&
analytics.to === todayStr();
}
</script>
<div class="date-range-picker">
<div class="presets">
{#each presets as preset}
<button
class="preset-btn"
class:active={isActive(preset.days)}
onclick={() => applyPreset(preset.days)}
>
{preset.label}
</button>
{/each}
</div>
<div class="date-inputs">
<input
type="date"
class="date-input"
value={analytics.from}
onchange={(e) => {
const target = e.target as HTMLInputElement;
analytics.setDateRange(target.value, analytics.to);
}}
/>
<span class="date-sep">-</span>
<input
type="date"
class="date-input"
value={analytics.to}
onchange={(e) => {
const target = e.target as HTMLInputElement;
analytics.setDateRange(analytics.from, target.value);
}}
/>
</div>
</div>
<style>
.date-range-picker {
display: flex;
align-items: center;
gap: var(--wb-spacing-12);
}
.presets {
display: flex;
gap: var(--wb-spacing-2);
}
.preset-btn {
height: var(--wb-control-size-24);
padding: 0 var(--wb-spacing-8);
border-radius: var(--wsb-radius-sm);
font-size: var(--wb-font-size-11);
font-weight: 500;
color: var(--vscode-disabledForeground);
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.preset-btn:hover {
background: var(--vscode-list-hoverBackground);
color: var(--vscode-foreground);
}
.preset-btn.active {
background: var(--vscode-focusBorder);
color: #fff;
}
.date-inputs {
display: flex;
align-items: center;
gap: var(--wb-spacing-4);
}
.date-input {
height: var(--wb-control-size-24);
padding: 0 var(--wb-spacing-6);
background: var(--vscode-input-background);
border: 1px solid var(--vscode-panel-border);
border-radius: var(--wsb-radius-sm);
font-size: var(--wb-font-size-11);
color: var(--vscode-foreground);
font-family: var(--wsb-font-mono);
}
.date-input:focus {
outline: none;
border-color: var(--vscode-focusBorder);
}
.date-sep {
color: var(--vscode-disabledForeground);
font-size: var(--wb-font-size-11);
}
</style>