From 8e10c1c6bb10951008816c7952519dbc4277ca60 Mon Sep 17 00:00:00 2001 From: Nicolas Date: Sat, 25 May 2024 23:29:56 -0700 Subject: [PATCH] Nick: --- package-lock.json | 6 ++ package.json | 1 + src/app/embed/page.tsx | 47 +++++++++++ src/components/graph.tsx | 89 ++++++++++++--------- src/components/menu.tsx | 165 ++++++++++++++++++++++++--------------- 5 files changed, 209 insertions(+), 99 deletions(-) create mode 100644 src/app/embed/page.tsx diff --git a/package-lock.json b/package-lock.json index 6d48238..82974c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "html2canvas": "^1.4.1", + "lucide": "^0.379.0", "lucide-react": "^0.379.0", "next": "14.2.3", "react": "^18", @@ -4145,6 +4146,11 @@ "node": "14 || >=16.14" } }, + "node_modules/lucide": { + "version": "0.379.0", + "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.379.0.tgz", + "integrity": "sha512-2F7ycF+CAZCLusl4iuhhd0nlS5pTMHwdgY4qehZy5qN14tR+db2GX9nhNzhW3mg73wiDlkrue1khgG1BxVNAZg==" + }, "node_modules/lucide-react": { "version": "0.379.0", "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.379.0.tgz", diff --git a/package.json b/package.json index 6bc3401..9cea5aa 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "html2canvas": "^1.4.1", + "lucide": "^0.379.0", "lucide-react": "^0.379.0", "next": "14.2.3", "react": "^18", diff --git a/src/app/embed/page.tsx b/src/app/embed/page.tsx new file mode 100644 index 0000000..7d70463 --- /dev/null +++ b/src/app/embed/page.tsx @@ -0,0 +1,47 @@ +"use client"; +import { useSearchParams } from 'next/navigation'; +import { useEffect, useState, useRef } from 'react'; +import Graph from '@/components/graph'; +import { allThemes, Theme } from '@/lib/theme'; + +export default function EmbedPage() { + const searchParams = useSearchParams(); + const padding = searchParams?.get('padding') || '64'; + const theme = searchParams?.get('theme') || JSON.stringify(allThemes['sunset']); + const background = searchParams?.get('background') || 'false'; + + const [parsedPadding, setParsedPadding] = useState(0); + const [parsedTheme, setParsedTheme] = useState(null); + const [parsedBackground, setParsedBackground] = useState(false); + const chartRef = useRef(null); + + useEffect(() => { + if (padding) { + setParsedPadding(parseInt(padding, 10)); + } + if (theme) { + try { + setParsedTheme(JSON.parse(theme) as Theme); + } catch (error) { + console.error('Failed to parse theme:', error); + setParsedTheme(null); + } + } + if (background) { + setParsedBackground(background === 'true'); + } + }, [padding, theme, background]); + + if (!parsedTheme) { + return
Loading...
; + } + + return ( + + ); +} diff --git a/src/components/graph.tsx b/src/components/graph.tsx index 8c6c512..81aa304 100644 --- a/src/components/graph.tsx +++ b/src/components/graph.tsx @@ -5,7 +5,17 @@ import { AreaChart, Color } from "@tremor/react"; import { useState, useRef } from "react"; import html2canvas from "html2canvas"; -export default function Graph({ padding, theme, background, chartRef }: { padding: number, theme: Theme, background: boolean, chartRef: React.RefObject }) { +export default function Graph({ + padding, + theme, + background, + chartRef, +}: { + padding: number; + theme: Theme; + background: boolean; + chartRef: React.RefObject; +}) { const mockchartdata = [ { date: "Apr 15", @@ -76,56 +86,59 @@ export default function Graph({ padding, theme, background, chartRef }: { paddin const [chartData, setChartData] = useState(mockchartdata); const maxStars = Math.max(...mockchartdata.map((data) => data.Stars)); const [maxValue, setMaxValue] = useState(maxStars); + return ( -
-
-
-
-
-
-
-
-
- { - if (value > 99) { - return (value / 1000).toFixed(1) + "k"; - } - return value.toString(); - }} - maxValue={maxValue} - connectNulls={true} - curveType="natural" - /> +
+
+
+
+
+
+
+
+
+ { + if (value > 99) { + return (value / 1000).toFixed(1) + "k"; + } + return value.toString(); + }} + maxValue={maxValue} + connectNulls={true} + curveType="natural" + /> +
-
- {/* Graph Example */} +
-
); } diff --git a/src/components/menu.tsx b/src/components/menu.tsx index 4b5a196..ec73af8 100644 --- a/src/components/menu.tsx +++ b/src/components/menu.tsx @@ -9,6 +9,7 @@ import { import { Theme, allThemes } from "@/lib/theme"; import { Button } from "./ui/button"; import { Switch } from "./ui/switch"; +import { Code, Download, Plus } from "lucide-react"; export default function Menu({ padding, @@ -27,71 +28,113 @@ export default function Menu({ setBackground: (background: boolean) => void; handleExport: () => void; }) { + const generateEmbedCode = () => { + const embedCode = ` + + `; + navigator.clipboard.writeText(embedCode).then(() => { + alert("Embed code copied to clipboard!"); + }); + }; return ( -
-
- Theme - + setTheme(allThemes[value as keyof typeof allThemes] as Theme) + } + > + + + + + {Object.entries(allThemes).map(([themeKey, themeValue]) => ( + +
+
+
+ {themeValue.name.charAt(0).toUpperCase() + + themeValue.name.slice(1)} +
-
- - ))} - - -
-
- Background - setBackground(checked)} - /> -
-
- Padding - +
+
+ Background + setBackground(checked)} + /> +
+
+ Padding + +
+ +
- - + + {/*
+ +
*/}
); }