make label optional for scatterplot data

UNDP-Data · Jul 25, 2024 · 5c0de64 · 5c0de64
1 parent 8589d2e
commit 5c0de64
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@undp-data/undp-visualization-library",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/src/Components/Graphs/ScatterPlot/Graph.tsx b/src/Components/Graphs/ScatterPlot/Graph.tsx
@@ -86,6 +86,7 @@ export function Graph(props: Props) {
     left: leftMargin,
     right: rightMargin,
   };
+  const dataWithId = data.map((d, i) => ({ ...d, id: `${i}` }));
   const graphWidth = width - margin.left - margin.right;
   const graphHeight = height - margin.top - margin.bottom;
   const radiusScale =
@@ -101,10 +102,10 @@ export function Graph(props: Props) {
           .nice()
       : undefined;
   const dataOrdered =
-    data.filter(d => d.radius !== undefined).length === 0
-      ? data
+    dataWithId.filter(d => d.radius !== undefined).length === 0
+      ? dataWithId
       : orderBy(
-          data.filter(d => d.radius !== undefined),
+          dataWithId.filter(d => d.radius !== undefined),
           'radius',
           'desc',
         );
@@ -350,11 +351,11 @@ export function Graph(props: Props) {
                           : 0.3
                         : 0.3
                       : mouseOverData
-                      ? mouseOverData.label === d.label
+                      ? mouseOverData.id === d.id
                         ? 1
                         : 0.3
                       : highlightedDataPoints.length !== 0
-                      ? highlightedDataPoints.indexOf(d.label) !== -1
+                      ? highlightedDataPoints.indexOf(d.label || '') !== -1
                         ? 1
                         : 0.3
                       : 1
@@ -381,7 +382,7 @@ export function Graph(props: Props) {
                     }}
                     fillOpacity={0.6}
                   />
-                  {showLabels ? (
+                  {showLabels && d.label ? (
                     <text
                       fontSize={10}
                       style={{
@@ -402,7 +403,7 @@ export function Graph(props: Props) {
                     >
                       {d.label}
                     </text>
-                  ) : highlightedDataPoints.length !== 0 ? (
+                  ) : highlightedDataPoints.length !== 0 && d.label ? (
                     highlightedDataPoints.indexOf(d.label) !== -1 ? (
                       <text
                         fontSize={10}

diff --git a/src/Components/Graphs/ScatterPlot/index.tsx b/src/Components/Graphs/ScatterPlot/index.tsx
@@ -271,7 +271,11 @@ export function ScatterPlot(props: Props) {
                   highlightAreaSettings={
                     highlightAreaSettings || [null, null, null, null]
                   }
-                  highlightedDataPoints={highlightedDataPoints || []}
+                  highlightedDataPoints={
+                    data.filter(el => el.label).length === 0
+                      ? []
+                      : highlightedDataPoints || []
+                  }
                   highlightAreaColor={highlightAreaColor || 'var(--gray-300)'}
                   selectedColor={selectedColor}
                   pointRadiusMaxValue={pointRadiusMaxValue}

diff --git a/src/Types.tsx b/src/Types.tsx
@@ -85,7 +85,7 @@ export interface ScatterPlotDataType {
   y: number;
   radius?: number;
   color?: string;
-  label: string;
+  label?: string;
   data?: object;
 }