evan/AnthoLume
evan/AnthoLume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(graph): fix stretchy text on graph
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Evan Reichard 2024-02-01 19:00:02 -05:00
parent 622dcd5702
commit 4a5464853b
3 changed files with 42 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Makefile
View File

@ -29,6 +29,16 @@ docker_build_release_latest: build_tailwind
build_tailwind: build_tailwind:
tailwind build -o ./assets/style.css --minify tailwind build -o ./assets/style.css --minify
dev: build_tailwind
GIN_MODE=release \
CONFIG_PATH=./data \
DATA_PATH=./data \
SEARCH_ENABLED=true \
REGISTRATION_ENABLED=true \
COOKIE_SECURE=false \
COOKIE_AUTH_KEY=1234 \
LOG_LEVEL=debug go run main.go serve
clean: clean:
rm -rf ./build rm -rf ./build

2
assets/style.css
View File

File diff suppressed because one or more lines are too long

71
templates/pages/home.tmpl
View File

@ -4,63 +4,40 @@
{{ define "content" }} {{ define "content" }}
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="w-full"> <div class="w-full">
<div class="relative w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded"> <div class="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
<p class="absolute top-3 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500"> <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 Daily Read Totals
</p> </p>
{{ $data := (getSVGGraphData .Data.GraphData 800 70 )}} {{ $data := (getSVGGraphData .Data.GraphData 800 70 )}}
<div class="relative">
<svg viewBox="26 0 755 {{ $data.Height }}" <svg viewBox="26 0 755 {{ $data.Height }}"
preserveAspectRatio="none" preserveAspectRatio="none"
width="100%" width="100%"
height="4em"> height="6em">
<!-- Bezier Line Graph --> <!-- Bezier Line Graph -->
<path fill="#316BBE" fill-opacity="0.5" stroke="none" d="{{ $data.BezierPath }} {{ $data.BezierFill }}" /> <path fill="#316BBE" fill-opacity="0.5" stroke="none" d="{{ $data.BezierPath }} {{ $data.BezierFill }}" />
<path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" /> <path fill="none" stroke="#316BBE" d="{{ $data.BezierPath }}" />
{{ range $index, $item := $data.LinePoints }}
<line class="hover-trigger" stroke="black" stroke-opacity="0.0" stroke-width="{{ $data.Offset }}" x1="{{ $item.X }}" x2="{{ $item.X }}" y1="0" y2="{{ $data.Height }}"></line>
<g class="hover-item">
<line class="text-black dark:text-white" stroke-opacity="0.2" x1="{{ $item.X }}" x2="{{ $item.X }}" y1="30" y2="{{ $data.Height }}"></line>
<text class="text-black dark:text-white" alignment-baseline="middle" transform="translate({{ $item.X }}, 5) translate(-30, 8)" font-size="10">
{{ (index $.Data.GraphData $index).Date }}
</text>
<text class="text-black dark:text-white" alignment-baseline="middle" transform="translate({{ $item.X }}, 25) translate(-30, -2)" font-size="10">
{{ (index $.Data.GraphData $index).MinutesRead }} minutes
</text>
</g>
{{ end }}
</svg> </svg>
<style> <div class="flex absolute w-full h-full top-0"
/* Interactive Hover */ style="width: calc(100%*31/30);
.hover-item { transform: translateX(-50%);
visibility: hidden; left: 50%">
opacity: 0; {{ range $index, $item := $data.LinePoints }}
} <!-- Required for iOS "Hover" Events (onclick) -->
<div onclick
.hover-trigger:hover+.hover-item, class="opacity-0 hover:opacity-100 w-full"
.hover-item:hover { style="background: linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)) no-repeat center/2px 100%">
visibility: visible; <div class="flex flex-col items-center p-2 rounded absolute top-3 dark:text-white text-xs pointer-events-none"
opacity: 1; style="transform: translateX(-50%);
} background-color: rgba(128, 128, 128, 0.2);
left: 50%">
/* SVG Component Styling */ <span>{{ (index $.Data.GraphData $index).Date }}</span>
svg text.text-black { <span>{{ (index $.Data.GraphData $index).MinutesRead }} minutes</span>
fill: black; </div>
} </div>
{{ end }}
svg line.text-black { </div>
stroke: black; </div>
}
@media (prefers-color-scheme: dark) {
svg text.dark\:text-white {
fill: white;
}
svg line.dark\:text-white {
stroke: white;
}
}
</style>
</div> </div>
</div> </div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-4"> <div class="grid grid-cols-2 gap-4 md:grid-cols-4">