refactor(client): Update the visuals of interaction chart

The data points are displayed as small circles and the line is displayed in the back with a low opacity.
Vizzuality · Nov 28, 2024 · b4749e2 · b4749e2
1 parent 60a11b5
commit b4749e2
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/client/package.json b/client/package.json
@@ -44,6 +44,7 @@
     "@turf/meta": "7.1.0",
     "@types/mapbox-gl": "3.4.0",
     "@visx/axis": "3.12.0",
+    "@visx/glyph": "3.12.0",
     "@visx/gradient": "3.12.0",
     "@visx/grid": "3.12.0",
     "@visx/responsive": "3.12.0",

diff --git a/client/src/components/interaction-chart/index.tsx b/client/src/components/interaction-chart/index.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { AxisBottom, AxisLeft, AxisTop } from "@visx/axis";
+import { GlyphCircle } from "@visx/glyph";
 import { GridColumns, GridRows } from "@visx/grid";
 import { Group } from "@visx/group";
 import { useParentSize } from "@visx/responsive";
@@ -26,7 +27,7 @@ const X_AXIS_HEIGHT = 22;
 const X_AXIS_OFFSET_RIGHT = 5;
 const X_AXIS_TICK_COUNT = 5;
 const X_AXIS_TICK_HEIGHT = 5;
-const Y_AXIS_WIDTH = 34;
+const Y_AXIS_WIDTH = 40;
 const Y_AXIS_OFFSET_TOP = 20;
 const Y_AXIS_TICK_WIDTH = 5;
 const Y_AXIS_TICK_COUNT = 5;
@@ -138,8 +139,26 @@ const InteractionChart = ({ data, loading }: InteractionChartProps) => {
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore
               strokeWidth={1}
-              className="stroke-supernova-yellow-600"
+              className="stroke-supernova-yellow-600/30"
             />
+            {data.data.map((d) => {
+              if (d.y === null) {
+                return null;
+              }
+
+              const top = yScale(d.y) ?? 0;
+              const left = xScale(new Date(d.x)) ?? 0;
+
+              return (
+                <GlyphCircle
+                  key={`${d.x}-${d.y}`}
+                  top={top}
+                  left={left}
+                  size={2}
+                  className="fill-supernova-yellow-600"
+                />
+              );
+            })}
           </Group>
           <AxisLeft
             scale={yScale}

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -4897,6 +4897,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@visx/glyph@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/glyph@npm:3.12.0"
+  dependencies:
+    "@types/d3-shape": "npm:^1.3.1"
+    "@types/react": "npm:*"
+    "@visx/group": "npm:3.12.0"
+    classnames: "npm:^2.3.1"
+    d3-shape: "npm:^1.2.0"
+    prop-types: "npm:^15.6.2"
+  peerDependencies:
+    react: ^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 10c0/0595a1314e3daa9132c2d83f9f62d0a9624a675cee54500e72947a9bd4c3422f8c93107e8607853799535719f08f7f8f81cd2fd872c8af462aa28a2d9005031f
+  languageName: node
+  linkType: hard
+
 "@visx/gradient@npm:3.12.0":
   version: 3.12.0
   resolution: "@visx/gradient@npm:3.12.0"
@@ -5929,6 +5945,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:8.9.0"
     "@typescript-eslint/parser": "npm:8.9.0"
     "@visx/axis": "npm:3.12.0"
+    "@visx/glyph": "npm:3.12.0"
     "@visx/gradient": "npm:3.12.0"
     "@visx/grid": "npm:3.12.0"
     "@visx/responsive": "npm:3.12.0"