update

huxulm · Sep 3, 2024 · a5a4024 · a5a4024
1 parent b72d786
commit a5a4024
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 21 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -21,6 +21,12 @@ svg {
     fill: purple;
 }
 .brush {
-    fill: rgba(230, 230, 230, 0.998);
-    stroke: rgba(24, 24, 24, 0.329)
+    fill: rgba(129, 174, 248, 0.1);
+    stroke: none;
+}
+.brush-chart path {
+    stroke-width: .8;
+}
+.brush .selection {
+    fill: url(#brush_pattern);
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -11,7 +11,7 @@ import { DataShape, refresh, render, SelectionRef } from "../components/viz";
 import { useParentSize } from "@visx/responsive";
 import { scaleLinear, scaleUtc } from "d3-scale";
 import pkgs from "./pkg.json";
-import { Selection } from "d3-selection"
+import { Selection } from "d3-selection";
 import { min, max } from "d3-array";
 import { utcDay, utcMonth } from "d3-time";
 
@@ -47,7 +47,9 @@ const DownloadCard = ({
 }) => {
   const ref = useRef<SVGSVGElement>(null);
   const { parentRef, width, height } = useParentSize({ debounceTime: 150 });
-  const [brushSelection, setBrushSelection] = useState<[Date, Date] | null>(null)
+  const [brushSelection, setBrushSelection] = useState<[Date, Date] | null>(
+    null
+  );
   const filteredData = useMemo(() => {
     return data.map((item) => ({
       ...item,
@@ -64,10 +66,12 @@ const DownloadCard = ({
   }, []);
 
   const xDomain = useMemo(() => {
-    return brushSelection ? brushSelection : [
-      min(data, (d) => min(d.downloads, (v) => new Date(v.day))),
-      max(data, (d) => max(d.downloads, (v) => new Date(v.day))),
-    ];
+    return brushSelection
+      ? brushSelection
+      : [
+          min(data, (d) => min(d.downloads, (v) => new Date(v.day))),
+          max(data, (d) => max(d.downloads, (v) => new Date(v.day))),
+        ];
   }, [brushSelection]);
 
   const yDomain = useMemo(() => {
@@ -123,7 +127,6 @@ const DownloadCard = ({
   }, []);
   const selectionRef = useRef<SelectionRef | null>(null);
   if (!selectionRef.current) {
-
   }
   useEffect(() => {
     if (width > 0 && !selectionRef.current) {
@@ -143,7 +146,7 @@ const DownloadCard = ({
         xValue: xValueFn(),
         yValue: yValueFn(),
       });
-    } else if (selectionRef && selectionRef.current){
+    } else if (selectionRef && selectionRef.current) {
       refresh({
         selectionRef: selectionRef.current,
         xScale,
@@ -155,12 +158,39 @@ const DownloadCard = ({
         ticks,
         xValue: xValueFn(),
         yValue: yValueFn(),
-      })
+      });
     }
-  }, [parentRef, width, height, xScale, yScale, xScaleBrush, yScaleBrush, filteredData, ticks]);
+  }, [
+    parentRef,
+    width,
+    height,
+    xScale,
+    yScale,
+    xScaleBrush,
+    yScaleBrush,
+    filteredData,
+    ticks,
+  ]);
   return (
     <div ref={parentRef} className="w-full h-full">
-      <svg width={width} height={height} fill="none" />
+      <svg width={width} height={height} fill="none">
+        <pattern
+          id="brush_pattern"
+          width="8"
+          height="8"
+          patternUnits="userSpaceOnUse"
+        >
+          <path
+            className="brush-pattern-line"
+            d="M 0,8 l 8,-8 M -2,2 l 4,-4
+             M 6,10 l 4,-4"
+            stroke="#2e7af3"
+            stroke-width="1"
+            stroke-linecap="square"
+            shape-rendering="auto"
+          ></path>
+        </pattern>
+      </svg>
     </div>
   );
 };
@@ -185,7 +215,7 @@ export default function Home() {
   return (
     <div className="p-2 flex flex-wrap justify-center items-center min-h-screen min-w-full">
       {stats.length === pkgs.length && (
-        <div style={{ width: "80vw", height: "90vh" }}>
+        <div style={{ width: "50vw", height: "50vh" }}>
           <DownloadCard
             ticks={
               type === "w"

diff --git a/components/viz.ts b/components/viz.ts
@@ -28,6 +28,10 @@ export interface SelectionRef {
   rect: Selection<SVGRectElement, unknown, null, undefined>;
   mouseG: Selection<SVGGElement, unknown, null, undefined>;
   brushG: Selection<SVGGElement, unknown, null, undefined>;
+  brushChartG: Selection<BaseType | SVGPathElement, {
+    name: string;
+    downloads: DataShape[];
+}, SVGGElement, unknown>;
 }
 
 export interface RenderFunction {
@@ -86,7 +90,6 @@ export const render: RenderFunction = ({
     }
     const [x0, x1] = selection.map(xScaleBrush.invert);
     onBrush([x0, x1]);
-    console.log("brushed", x0, x1);
   }
 
   const brush = brushX()
@@ -95,6 +98,8 @@ export const render: RenderFunction = ({
       [width, height],
     ])
     .on("start brush end", brushed);
+
+  const brushTransform = `translate(0, ${chartHeight * 0.04})`;
 
   const color = scaleOrdinal(schemeCategory10).domain(data.map((d) => d.name));
 
@@ -267,10 +272,12 @@ export const render: RenderFunction = ({
   });
 
   const renderBrushChart = (
-    selection: Selection<SVGGElement, unknown, null, undefined>
+    selection: Selection<BaseType, unknown, null, undefined>
   ) => {
-    selection
+    selectionRef.brushChartG = selection
       .append("g")
+      .attr("class", "brush-chart")
+      .attr("transform", brushTransform)
       .selectAll("path")
       .data(data)
       .join("path")
@@ -280,14 +287,17 @@ export const render: RenderFunction = ({
       .attr("stroke-width", 1);
   };
 
+  // brush chart
+  svg.call(renderBrushChart);
+
   // brush
   const brushG = svg
     .append("g")
     .attr("class", "brush")
-    .attr("transform", "translate(0, 40)")
+    .attr("transform", brushTransform)
     .call(brush)
     .on("mousedown touchstart", function beforebrushstarted(event) {
-      const dx = chartWidth * 0.2; //xScale(new Date(data[0].downloads[0].day)) - xScale(new Date(data[0].downloads[1].day)); // Use a fixed width when recentering.
+      const dx = chartWidth * 0.2;
       const [[cx]] = pointers(event);
       const [x0, x1] = [cx - dx / 2, cx + dx / 2];
       const [X0, X1] = xScale.range();
@@ -297,8 +307,7 @@ export const render: RenderFunction = ({
         x1 > X1 ? [X1 - dx, X1] : x0 < X0 ? [X0, X0 + dx] : [x0, x1]
       );
     })
-    .call(renderBrushChart);
-
+
   selectionRef.brushG = brushG;
   return selectionRef;
 };
@@ -355,6 +364,11 @@ export const refresh = ({
         .y((d) => yScale(yValue(d)))(v.downloads)
     );
 
+  // refresh brush chart
+  selectionRef.brushChartG.attr("d", (v) => line<DataShape>()
+  .x((d) => xScaleBrush(xValue(d)))
+  .y((d) => yScaleBrush(yValue(d)))(v.downloads))
+
   // mouse listeners
   selectionRef.rect.on("mouseover", function (e) {
     e.preventDefault();