48 lines
1.6 KiB
Plaintext
48 lines
1.6 KiB
Plaintext
|
package components
|
||
|
|
|
||
|
|
import (
|
||
|
|
"fmt"
|
||
|
|
"reichard.io/antholume/graph"
|
||
|
|
)
|
||
|
|
|
||
|
|
templ DailyReadChart(dailyReadSVG graph.SVGGraphData) {
|
||
|
|
<div class="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
|
||
|
|
<p class="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
|
||
|
|
Daily Read Totals
|
||
|
|
</p>
|
||
|
|
<div class="relative">
|
||
|
|
<svg viewBox={ fmt.Sprintf("26 0 755 %d", dailyReadSVG.Height) } preserveAspectRatio="none" width="100%" height="6em">
|
||
|
|
<!-- Bezier Line Graph -->
|
||
|
|
<path
|
||
|
|
fill="#316BBE"
|
||
|
|
fill-opacity="0.5"
|
||
|
|
stroke="none"
|
||
|
|
d={ fmt.Sprintf("%s %s", dailyReadSVG.BezierPath, dailyReadSVG.BezierFill) }
|
||
|
|
></path>
|
||
|
|
<path fill="none" stroke="#316BBE" d={ dailyReadSVG.BezierPath }></path>
|
||
|
|
</svg>
|
||
|
|
<div
|
||
|
|
class="flex absolute w-full h-full top-0"
|
||
|
|
style="width: calc(100%*31/30); transform: translateX(-50%); left: 50%"
|
||
|
|
>
|
||
|
|
<!-- Required for iOS "Hover" Events (onclick) -->
|
||
|
|
for _, item := range dailyReadSVG.LinePoints {
|
||
|
|
<div
|
||
|
|
onclick
|
||
|
|
class="opacity-0 hover:opacity-100 w-full"
|
||
|
|
style="background: linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="flex flex-col items-center p-2 rounded absolute top-3 dark:text-white text-xs pointer-events-none"
|
||
|
|
style="transform: translateX(-50%); background-color: rgba(128, 128, 128, 0.2); left: 50%"
|
||
|
|
>
|
||
|
|
<span>{ item.Data.Label }</span>
|
||
|
|
<span>{ fmt.Sprint(item.Data.Value) } minutes</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|