starcoach-hackathon/zarinpal-analytics-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: polish dashboard loading and interactions

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-08-20 22:59:07 +03:30
parent b599cdfba4
commit 05e4dcd123
7 changed files with 48 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/components/PaymentHistoryChart.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { scale } from 'svelte/transition';
import type { components } from '$lib/api/schema';
import { formatMoney, formatValue } from '$lib/format';
@@ -26,6 +28,14 @@
new Date(`${value}T12:00:00Z`),
);
}
function tooltipPosition(point: (typeof positions)[number]) {
const horizontalPercent = (point.x / width) * 100;
const verticalPercent = (point.y / height) * 100;
const placeBelow = verticalPercent < 34;
const top = placeBelow ? verticalPercent + 5 : verticalPercent - 5;
return `left:clamp(5.75rem, ${horizontalPercent}%, calc(100% - 5.75rem)); top:${top}%; transform:translate(-50%, ${placeBelow ? '0' : '-100%'});`;
}
</script>
<div class="relative min-h-[260px] w-full overflow-hidden" dir="ltr">
@@ -89,13 +99,20 @@
</svg>
{#if active !== null && positions[active]}
<div
class="pointer-events-none absolute z-10 w-44 -translate-x-1/2 rounded-md bg-zinc-950 p-3 text-right text-xs leading-6 text-white shadow-xl"
style={`left:${(positions[active].x / width) * 100}%; top:${Math.max(0, (positions[active].y / height) * 100 - 8)}%`}
class="pointer-events-none absolute z-10 w-44 transition-[left,top,transform] duration-150 ease-out motion-reduce:transition-none"
style={tooltipPosition(positions[active])}
dir="rtl"
>
<strong class="block">{persianDate(positions[active].localDate)}</strong>
<span class="block text-white/75">{formatValue(positions[active].bankPaidSessions)} پرداخت موفق</span>
<span class="block text-white/75">{formatMoney(positions[active].bankPaidAmountRial)}</span>
<div
class="rounded-md bg-zinc-950 p-3 text-right text-xs leading-6 text-white shadow-xl"
transition:scale={{ duration: 150, start: 0.96 }}
>
<strong class="block">{persianDate(positions[active].localDate)}</strong>
<span class="block text-white/75"
>{formatValue(positions[active].bankPaidSessions)} پرداخت موفق</span
>
<span class="block text-white/75">{formatMoney(positions[active].bankPaidAmountRial)}</span>
</div>
</div>
{/if}
{/if}