gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-04-22 12:01:52 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

remove chart animation

Browse source
This commit is contained in:
Gabe Farrell 2026-01-12 17:36:46 -05:00
parent b46fb1873f
commit f3f5b5b437
1 changed files with 11 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

27
client/app/components/InterestGraph.tsx
View file

@ -1,17 +1,8 @@
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { import { getInterest, type getInterestArgs } from "api/api";
getActivity,
getInterest,
type getActivityArgs,
type getInterestArgs,
type ListenActivityItem,
} from "api/api";
import Popup from "./Popup";
import { useState } from "react";
import { useTheme } from "~/hooks/useTheme"; import { useTheme } from "~/hooks/useTheme";
import ActivityOptsSelector from "./ActivityOptsSelector";
import type { Theme } from "~/styles/themes.css"; import type { Theme } from "~/styles/themes.css";
import { Area, AreaChart, Line, LineChart, Tooltip } from "recharts"; import { Area, AreaChart } from "recharts";
import { RechartsDevtools } from "@recharts/devtools"; import { RechartsDevtools } from "@recharts/devtools";
function getPrimaryColor(theme: Theme): string { function getPrimaryColor(theme: Theme): string {
@ -34,7 +25,7 @@ interface Props {
} }
export default function InterestGraph({ export default function InterestGraph({
buckets = 14, buckets = 18,
artistId = 0, artistId = 0,
albumId = 0, albumId = 0,
trackId = 0, trackId = 0,
@ -71,6 +62,10 @@ export default function InterestGraph({
); );
} }
// Note: I would really like to have the animation for the graph, however
// the line graph can get weirdly clipped before the animation is done
// so I think I just have to remove it for now.
return ( return (
<div className="flex flex-col items-start w-full max-w-[500px]"> <div className="flex flex-col items-start w-full max-w-[500px]">
<h3>Interest over time</h3> <h3>Interest over time</h3>
@ -81,13 +76,13 @@ export default function InterestGraph({
maxWidth: 440, maxWidth: 440,
overflow: "visible", overflow: "visible",
}} }}
margin={{ top: 5, right: 0, left: 0, bottom: 15 }}
data={data} data={data}
margin={{ top: 15, bottom: 20 }}
> >
<defs> <defs>
<linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1"> <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.5} /> <stop offset="5%" stopColor={color} stopOpacity={0.5} />
<stop offset="85%" stopColor={color} stopOpacity={0} /> <stop offset="95%" stopColor={color} stopOpacity={0} />
</linearGradient> </linearGradient>
</defs> </defs>
<Area <Area
@ -95,7 +90,7 @@ export default function InterestGraph({
type="natural" type="natural"
stroke="none" stroke="none"
fill="url(#colorGradient)" fill="url(#colorGradient)"
animationDuration={750} animationDuration={0}
animationEasing="ease-in-out" animationEasing="ease-in-out"
activeDot={false} activeDot={false}
/> />
@ -105,7 +100,7 @@ export default function InterestGraph({
stroke={color} stroke={color}
fill="none" fill="none"
strokeWidth={2} strokeWidth={2}
animationDuration={750} animationDuration={0}
animationEasing="ease-in-out" animationEasing="ease-in-out"
dot={false} dot={false}
activeDot={false} activeDot={false}