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 b319f7d39a
2 changed files with 41 additions and 54 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

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