update

huxulm · Sep 8, 2024 · 39734e0 · 39734e0
1 parent a939fe0
commit 39734e0
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 22 deletions.
diff --git a/app/build/page.tsx b/app/build/page.tsx
@@ -14,4 +14,3 @@ export default function Home() {
     </div>
   );
 }
-
diff --git a/app/page.tsx b/app/page.tsx
@@ -31,22 +31,26 @@ function Page() {
   return (
     <div className="flex flex-wrap w-screen h-screen">
       <div style={{ width: "50%", height: "50%" }} className="bg-grey-50 p-10">
-        <div className="w-full h-full ms-5" ref={p1}>
+        <div className="w-full h-full ms-5 relative" ref={p1}>
+          <button className="absolute px-2 left-[-0.1rem] top-[-2rem] bg-purple-400 hover:bg-purple-200 rounded border border-purple-950">CSS Framework</button>
           <CssTrend width={w1} height={h1} />
         </div>
       </div>
       <div style={{ width: "50%", height: "50%" }} className="bg-grey-50 p-10">
-        <div className="w-full h-full ms-5" ref={p3}>
+        <div className="w-full h-full ms-5 relative" ref={p3}>
+          <button className="absolute px-2 left-[-0.1rem] top-[-2rem] bg-cyan-400 hover:bg-cyan-200 rounded border border-cyan-950">Javascript Framework</button>
           <JsTrend width={w3} height={h3} />
         </div>
       </div>
       <div style={{ width: "50%", height: "50%" }} className="bg-grey-50 p-10">
-        <div className="w-full h-full ms-5" ref={p4}>
+        <div className="w-full h-full ms-5 relative" ref={p4}>
+          <button className="absolute px-2 left-[-0.1rem] top-[-2rem] bg-orange-400 hover:bg-orange-200 rounded border border-orange-950">Visualization Framework</button>
           <VizTrend width={w4} height={h4} />
         </div>
       </div>
       <div style={{ width: "50%", height: "50%" }} className="bg-grey-50 p-10">
-        <div className="w-full h-full ms-5" ref={p2}>
+        <div className="w-full h-full ms-5 relative" ref={p2}>
+          <button className="absolute px-2 left-[-0.1rem] top-[-2rem] bg-blue-400 hover:bg-blue-200 rounded border border-blue-950">Building & Bundling Tools</button>
           <BuildTrend width={w2} height={h2} />
         </div>
       </div>

diff --git a/components/build/pkg.json b/components/build/pkg.json
@@ -1,5 +1,6 @@
 [
   "esbuild",
+  "tsup",
   "turbo",
   "@swc/core",
   "bun",

diff --git a/components/viz.ts b/components/viz.ts
@@ -135,15 +135,15 @@ export const render: RenderFunction = ({
 
   const yAxisG = g.append("g").call(yAxis);
 
-  yAxisG
-    .append("text")
-    .attr("class", "axis-label")
-    .attr("y", -35)
-    .attr("x", -(height - brushHeight) / 2)
-    .attr("fill", "black")
-    .attr("transform", `rotate(-90)`)
-    .attr("text-anchor", "middle")
-    .text(yAxisLabel);
+  // yAxisG
+  //   .append("text")
+  //   .attr("class", "axis-label")
+  //   .attr("y", -35)
+  //   .attr("x", -(height - brushHeight) / 2)
+  //   .attr("fill", "black")
+  //   .attr("transform", `rotate(-90)`)
+  //   .attr("text-anchor", "middle")
+  //   .text(yAxisLabel);
 
   const xAxisG = g
     .append("g")
@@ -153,13 +153,13 @@ export const render: RenderFunction = ({
   selectionRef.xAxisG = xAxisG;
   selectionRef.yAxisG = yAxisG;
 
-  xAxisG
-    .append("text")
-    .attr("class", "axis-label")
-    .attr("y", 35)
-    .attr("x", chartWidth / 2)
-    .attr("fill", "black")
-    .text(xAxisLabel);
+  // xAxisG
+  //   .append("text")
+  //   .attr("class", "axis-label")
+  //   .attr("y", 35)
+  //   .attr("x", chartWidth / 2)
+  //   .attr("fill", "black")
+  //   .text(xAxisLabel);
 
   const lineGenerator = line<DataShape>()
     .x((d) => xScale(xValue(d)))

diff --git a/components/viz/pkg.json b/components/viz/pkg.json
@@ -1,7 +1,8 @@
 [
   "d3",
-  "highcharts",
+  "recharts",
   "echarts",
   "@visx/scale",
+  "highcharts",
   "plotly.js"
 ]