From 00e37dc840f7dd9b4ec8d2aa7c17bebad08a2696 Mon Sep 17 00:00:00 2001
From: Linnea Gräf <nea@nea.moe>
Date: Thu, 1 May 2025 21:46:32 +0200
Subject: feat(frontend): more styling

---
 server/frontend/src/Analysis.tsx | 63 ++++++++++++++++++++++++++++++++++++----
 server/frontend/src/index.css    |  5 +++-
 server/frontend/src/index.tsx    | 11 +++++--
 3 files changed, 71 insertions(+), 8 deletions(-)

(limited to 'server/frontend/src')

diff --git a/server/frontend/src/Analysis.tsx b/server/frontend/src/Analysis.tsx
index 3bf9c13..3317f68 100644
--- a/server/frontend/src/Analysis.tsx
+++ b/server/frontend/src/Analysis.tsx
@@ -2,6 +2,7 @@ import { createAsync, useParams } from "@solidjs/router"
 import { client, getAnalysisList, paths } from "./api.ts";
 import { createSignal, For, onMount, Show, Suspense } from "solid-js";
 import { SolidApexCharts } from "solid-apexcharts";
+import { BarChart, times } from "chartist";
 
 type AnalysisResult =
     { status: 'not requested' }
@@ -13,11 +14,11 @@ export default function Analysis() {
     const analysisId = pathParams.id!;
     let analysis = createAsync(() => getAnalysisList());
     const analysisName = () => analysis()?.data?.find(it => it.id == analysisId)?.name
-    const [startTimestamp, setStartTimestamp] = createSignal(new Date().getTime() - 1000 * 60 * 60 * 24 * 30);
+    const [startTimestamp, setStartTimestamp] = createSignal(new Date().getTime() - 1000 * 60 * 60 * 24 * 356);
     const [endTimestamp, setEndTimestamp] = createSignal(new Date().getTime());
     const [analysisResult, setAnalysisResult] = createSignal<AnalysisResult>({ status: 'not requested' });
     return <>
-        <h1><Suspense fallback="Name not loaded...">{analysisName()}</Suspense></h1>
+        <h1 class="text-xl"><Suspense fallback="Name not loaded...">{analysisName()}</Suspense></h1>
         <p>
             <label>
                 Start:
@@ -52,13 +53,42 @@ export default function Analysis() {
                 {element =>
                     <For each={element().result.visualizations}>
                         {item =>
-                            <div>
+                            <div class="h-300 max-h-[90vh]">
                                 <SolidApexCharts
-                                    width={1200}
                                     type="bar"
+                                    width={"100%"}
+                                    height={"100%"}
                                     options={{
+                                        colors: ['#b03060'],
                                         xaxis: {
-                                            type: 'numeric'
+                                            labels: {
+                                                style: {
+                                                    colors: '#A0A0A0',
+                                                },
+                                                formatter(value, timestamp, opts) {
+                                                    return formatDate(timestamp!)
+                                                },
+                                            },
+                                            type: 'numeric',
+                                        },
+                                        tooltip: {
+                                            enabled: false
+                                        },
+                                        yaxis: {
+                                            labels: {
+                                                style: {
+                                                    colors: '#A0A0A0'
+                                                },
+                                                formatter(val, opts) {
+                                                    return formatMoney(val)
+                                                }
+                                            },
+                                            decimalsInFloat: 3
+                                        },
+                                        dataLabels: {
+                                            formatter(val, opts) {
+                                                return formatMoney(val as number)
+                                            },
                                         }
                                     }}
                                     series={[
@@ -76,6 +106,29 @@ export default function Analysis() {
     </>
 }
 
+const formatMoney = (money: number): string => {
+    if (money < 0) return `-${formatMoney(money)}`
+    const moneyNames = [
+        [1_000_000_000, 'b'],
+        [1_000_000, 'm'],
+        [1_000, 'k'],
+        [1, '']
+    ] as const;
+
+    for (const [factor, name] of moneyNames) {
+        if (money >= factor) {
+            const scaledValue = Math.round(money / factor * 10) / 10
+            return `${scaledValue}${name}`
+        }
+    }
+    return money.toString()
+}
+
+const formatDate = (date: number | Date) => {
+    const _date = new Date(date);
+    return `${_date.getDay()}.${_date.getMonth() + 1}.${_date.getFullYear()}`
+}
+
 function takeIf<T extends P, P>(
     obj: P,
     condition: (arg: P) => arg is T,
diff --git a/server/frontend/src/index.css b/server/frontend/src/index.css
index 4a1df4d..e10ddff 100644
--- a/server/frontend/src/index.css
+++ b/server/frontend/src/index.css
@@ -1,3 +1,6 @@
+@import "tailwindcss";
+
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -10,4 +13,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
+}
\ No newline at end of file
diff --git a/server/frontend/src/index.tsx b/server/frontend/src/index.tsx
index 610a78b..3009300 100644
--- a/server/frontend/src/index.tsx
+++ b/server/frontend/src/index.tsx
@@ -5,7 +5,7 @@ import 'solid-devtools';
 import "./index.css";
 import type { RouteDefinition } from "@solidjs/router";
 import { Router } from "@solidjs/router";
-import { lazy } from "solid-js";
+import { lazy, onMount } from "solid-js";
 
 const root = document.getElementById("root");
 
@@ -20,4 +20,11 @@ const routes: Array<RouteDefinition> = [
   { path: "/analysis/:id", component: lazy(() => import("./Analysis.tsx")) },
 ];
 
-render(() => <Router>{routes}</Router>, root!);
+const Root = () => {
+
+  return <div class="bg-gray-800 text-white min-h-[100vh]">
+    <Router>{routes}</Router>
+  </div>
+}
+
+render(() => <Root />, root!);
-- 
cgit