Skip to content

First iteration cool UI (responsive and clean) #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alvaromanoso merged 1 commit into from
Jun 3, 2025
Merged

First iteration cool UI (responsive and clean) #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/pages/webapp/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ function Summary() {
return (
<div className={"flex flex-col gap-5"}>
<Card onClick={() => navigate("/news")}
className={"md:flex-1 bg-neutral-100 shadow-none border-none cursor-pointer"}>
className={"md:flex-1 bg-neutral-100 shadow-none hover:inset-ring-1 hover:inset-ring-neutral-200 border-none cursor-pointer"}>
<CardHeader>
<div className={"rounded-full bg-neutral-200 w-fit box-border p-3"}>
<NewspaperIcon className={"size-6"}/>
Expand All @@ -115,7 +115,7 @@ function Summary() {
</CardHeader>
</Card>
<Card onClick={() => navigate("/alerts")}
className={"md:flex-1 bg-neutral-100 shadow-none border-none cursor-pointer"}>
className={"md:flex-1 bg-neutral-100 shadow-none hover:inset-ring-1 hover:inset-ring-neutral-200 border-none cursor-pointer"}>
<CardHeader>
<div className={"rounded-full bg-neutral-200 w-fit box-border p-3"}>
<ExclamationTriangleIcon className={"size-6"}/>
Expand Down
119 changes: 51 additions & 68 deletions src/pages/webapp/Simulation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,9 @@ import {PortfolioHttpService} from "@/services/portfolio-http-service.ts";
import {AssetsHttpService} from "@/services/assets-http-service.ts";
import {Badge} from "@/components/ui/badge.tsx";

import {Area, AreaChart, CartesianGrid, XAxis, YAxis} from "recharts"
import {CartesianGrid, Line, LineChart, XAxis, YAxis} from "recharts"
import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from "@/components/ui/card"
import {
ChartConfig,
ChartContainer,
ChartLegend,
ChartLegendContent,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart"
import {ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart"
import {Decision} from "@/model/Decision.ts";
import {DecisionHttpService} from "@/services/decision-http-service.ts";
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select.tsx";
Expand Down Expand Up @@ -57,7 +50,7 @@ function Simulation() {
const [simulationConfig, setSimulationConfig] = useState<SimulationConfig>();

return (
<div className={"flex flex-row gap-5"}>
<div className={"flex flex-col lg:flex-row gap-5"}>
<div className={"flex-1"}>
<SimulationConfig setSimulationConfig={setSimulationConfig}/>
</div>
Expand Down Expand Up @@ -387,7 +380,14 @@ function DataChart<T extends BaseChartData>
config={chartConfig}
className="aspect-auto h-[250px] w-full"
>
<AreaChart data={filteredData}>
<LineChart
accessibilityLayer
data={filteredData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false}/>
<XAxis
dataKey="date"
Expand All @@ -407,6 +407,10 @@ function DataChart<T extends BaseChartData>
tickLine={false}
axisLine={false}
tickMargin={8}
domain={([dataMin, dataMax]) => {
const margin = (dataMax - dataMin)/10;
return [Math.max(0, dataMin - margin), dataMax + margin]
}}
tickFormatter={(value) => {
const cents = Number(value);
return (cents / 100).toLocaleString("en-US", {
Expand All @@ -417,72 +421,51 @@ function DataChart<T extends BaseChartData>
/>
<ChartTooltip
cursor={false}
content={
<ChartTooltipContent
formatter={(value, name) => (
<>
<div
className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
style={{backgroundColor: `var(--color-${name})`}}
/>
{chartConfig[name as keyof typeof chartConfig]?.label || name}
<div
className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
{(Number(value) / 100).toLocaleString("en-US", {
style: "currency",
currency: "USD"
})}
</div>
</>
)}
indicator="dot"
/>
}
content={<ChartTooltipContent
formatter={(value, name) => (
<>
<div
className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
style={{backgroundColor: `var(--color-${name})`}}
/>
{((chartConfig["name" as keyof typeof chartConfig]?.label || name) as string)
.replace(/^./, c => c.toUpperCase())}
<div
className="ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums text-foreground">
{(Number(value) / 100).toLocaleString("en-US", {
style: "currency",
currency: "USD"
})}
</div>
</>
)}
/>}
/>
<defs>
<linearGradient id="fillAutoinvested" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="var(--color-autoinvested)"
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor="var(--color-autoinvested)"
stopOpacity={0.1}
/>
</linearGradient>
<linearGradient id="fillNoAutoinvested" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="var(--color-noAutoinvested)"
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor="var(--color-noAutoinvested)"
stopOpacity={0.1}
/>
</linearGradient>
</defs>
<Area
<Line
dataKey="autoinvested"
type="natural"
fill="url(#fillAutoinvested)"
fillOpacity={0.4}
stroke="var(--color-autoinvested)"
stackId="a"
strokeWidth={2}
dot={{
fill: "var(--color-autoinvested)",
}}
activeDot={{
r: 6,
}}
/>
<Area
<Line
dataKey="noAutoinvested"
type="natural"
fill="url(#fillNoAutoinvested)"
fillOpacity={0.4}
stroke="var(--color-noAutoinvested)"
stackId="b"
strokeWidth={2}
dot={{
fill: "var(--color-noAutoinvested)",
}}
activeDot={{
r: 6,
}}
/>
<ChartLegend content={<ChartLegendContent/>}/>
</AreaChart>
</LineChart>
</ChartContainer>
</CardContent>
</Card>
Expand Down
Loading