From 5c0de64774145be44cb361f99b2fb0da2e65b997 Mon Sep 17 00:00:00 2001
From: Mustafa Saifee <mustafa.saifee@undp.org>
Date: Thu, 25 Jul 2024 19:45:19 +0300
Subject: [PATCH] make label optional for scatterplot data

---
 package-lock.json                           |  4 ++--
 package.json                                |  2 +-
 src/Components/Graphs/ScatterPlot/Graph.tsx | 15 ++++++++-------
 src/Components/Graphs/ScatterPlot/index.tsx |  6 +++++-
 src/Types.tsx                               |  2 +-
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d37098e..8a9d1b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@undp-data/undp-visualization-library",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@undp-data/undp-visualization-library",
-      "version": "0.0.28",
+      "version": "0.0.29",
       "license": "MIT",
       "dependencies": {
         "@undp-data/undp-viz-colors": "^1.0.1",
diff --git a/package.json b/package.json
index 98d9476..a46302a 100644
--- 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
index 79de583..307856c 100644
--- 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
index 1675219..b3734a2 100644
--- 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
index 5ed5308..6510ef7 100644
--- 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;
 }