diff options
| -rw-r--r-- | src/components/RadarChart.astro | 49 | ||||
| -rw-r--r-- | src/pages/blogs/[...slug].astro | 3 | ||||
| -rw-r--r-- | src/pages/skills.astro | 26 |
3 files changed, 50 insertions, 28 deletions
diff --git a/src/components/RadarChart.astro b/src/components/RadarChart.astro index efc0bb0..2b2a54d 100644 --- a/src/components/RadarChart.astro +++ b/src/components/RadarChart.astro @@ -1,24 +1,24 @@ --- -// const { data } = Astro.props; +import "../styles/terminal.css" -const data = [ - { name: "React", total: 10 }, - { name: "GraphQL", total: 5 }, - { name: "JavaScript", total: 5 }, - { name: "SVG", total: 1 }, - { name: "TypeScript", total: 5 }, -]; +interface Entry { + name: string; + weight: number; +} + +interface Props { + max: number + data: Entry[]; +} + +const { max, data } = Astro.props const chartPadding = 100; const chartSize = 400; const chartCenter = chartSize / 2; -const chartData = data.sort((a, b) => b.total - a.total).slice(0, data.length); +const chartData = data ;// .sort((a, b) => b.weight - a.weight).slice(0, data.length); const pointPadding = 0; -const max = chartData.reduce( - (max, current) => (current.total > max ? current.total : max), - 0, -); const rings = [...Array(6).keys()]; const getX = (angle: number, value: number) => @@ -42,7 +42,7 @@ const axes = chartData.map((_, index) => { }); const properties = chartData.map((item, index) => { - const { name, total } = item; + const { name, weight: total } = item; const clamp = Number(total / (max + pointPadding)); const angle = (Math.PI * 2 * index) / chartData.length; const x = getX(angle, (clamp * chartSize) / 2); @@ -57,13 +57,10 @@ const shape = return items + string; }, "") + "z"; -const bgColor = "bg-blue-500"; -const borderColor = "border-gray-100"; -const strokeColor = "stroke-gray-200"; -const shapeClass = "stroke-gray-900 fill-gray-900/[0.5]"; ---- +const strokeColor = "stroke-[var(--alt)]"; +const shapeClass = "stroke-[var(--primary)] fill-[#7ed4fb]/50"; -<div class=`w-[25%] m-0 p-0 ${bgColor} border rounded ${borderColor} shadow-lg`> +--- <div class="w-full grid md:grid-cols-1 items-center gap-16 p-0"> <svg xmlns="http://www.w3.org/2000/svg" @@ -108,17 +105,20 @@ const shapeClass = "stroke-gray-900 fill-gray-900/[0.5]"; const angle = (Math.PI * 2) * index / chartData.length; const maxX = getX(angle, (length * chartSize) / 2); const maxY = getY(angle, (length * chartSize) / 2); - const textAngle = (angle * (180 / Math.PI)) + let textAngle = (angle * (180 / Math.PI)) + if (90 < textAngle && textAngle < 270) { + textAngle += 180 + } return ( <g transform={`translate(${maxX},${maxY})`}> <text x={0} y={0} - fill="#000000" - font-size="16px" + fill="var(--secondary)" + font-size="24px" text-anchor="middle" - dominant-baseline="middle" transform=`rotate(${textAngle})` + dominant-baseline="middle" > {property.name} </text> @@ -129,4 +129,3 @@ const shapeClass = "stroke-gray-900 fill-gray-900/[0.5]"; </g> </svg> </div> -</div> diff --git a/src/pages/blogs/[...slug].astro b/src/pages/blogs/[...slug].astro index 3e42575..37e6f53 100644 --- a/src/pages/blogs/[...slug].astro +++ b/src/pages/blogs/[...slug].astro @@ -1,6 +1,5 @@ --- import Blog from "../../layouts/Blog.astro"; -import RadarChart from "../../components/RadarChart.astro" import { getCollection } from "astro:content"; export async function getStaticPaths() { @@ -16,7 +15,5 @@ const { Content } = await entry.render(); --- <Blog title=`/home/kyren/blogs/${entry.slug}`> - <h1>Test</h1> - <RadarChart></RadarChart> <Content /> </Blog> diff --git a/src/pages/skills.astro b/src/pages/skills.astro index 550ac1d..a555f5c 100644 --- a/src/pages/skills.astro +++ b/src/pages/skills.astro @@ -1,6 +1,32 @@ --- import Terminal from "../layouts/Terminal.astro"; +import RadarChart from "../components/RadarChart.astro"; + +const data1 = [ + { name: "Backend", weight: 40 }, + { name: "Gamedev", weight: 70 }, + { name: "Frontend", weight: 5 }, + { name: "Low-Level", weight: 63 }, + { name: "Tooling", weight: 100 }, +]; + +const data = [ + { name: "Gamedev", weight: 70 }, + { name: "Backend", weight: 40 }, + { name: "Low-Level", weight: 63 }, + { name: "Tooling", weight: 100 }, + { name: "Frontend", weight: 15 }, +]; + + +const max = data.reduce( + (max, current) => (current.weight > max ? current.weight : max), + 0, +); --- <Terminal path="skills"> + <div class="w-[40%]"> + <RadarChart max={100} data={data} /> + </div> </Terminal> |