Add icons to unit chart and strictValuePosition prop to bee swarm

Author: mustafasaifee42

.gitignore

@@ -24,6 +24,7 @@ stats.html
 .vscode/*
 !.vscode/extensions.json
 .idea
+.npmrc
 .DS_Store
 *.suo
 *.ntvs*

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/data-viz",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -467,7 +467,7 @@
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
-    "@undp/design-system-react": "^2.2.6",
+    "@undp/design-system-react": "^2.2.7",
     "dom-to-svg": "^0.12.2",
     "file-saver": "^2.0.5",
     "handlebars": "^4.7.8",

package.json

@@ -1503,6 +1503,7 @@ function GraphEl(props: Props) {
       case 'beeSwarmChart':
         return {
           customLayers: settings?.customLayers,
+          strictValuePosition: settings?.strictValuePosition,
           theme: settings?.theme,
           dimmedOpacity: settings?.dimmedOpacity,
           resetSelectionOnDoubleClick: settings?.resetSelectionOnDoubleClick,
@@ -1789,6 +1790,7 @@ function GraphEl(props: Props) {
       case 'unitChart':
         return {
           naLabel: settings?.naLabel,
+          gridIcon: settings?.gridIcon,
           numberDisplayOptions: settings?.numberDisplayOptions,
           theme: settings?.theme,
           totalNoOfDots: settings?.totalNoOfDots,

src/Components/Dashboard/GraphEl.tsx

@@ -72,6 +72,7 @@ interface Props {
   hideAxisLine: boolean;
   locale: string;
   padZeros: boolean;
+  strictValuePosition: boolean;
 }
 
 export function VerticalGraph(props: Props) {
@@ -111,6 +112,7 @@ export function VerticalGraph(props: Props) {
     hideAxisLine,
     locale,
     padZeros,
+    strictValuePosition,
   } = props;
   const svgRef = useRef(null);
   // biome-ignore lint/suspicious/noExplicitAny: undefined data type
@@ -183,26 +185,42 @@ export function VerticalGraph(props: Props) {
         ...(d.data && { data: { ...d.data } }),
       })) as BeeSwarmChartDataType[]
     ).filter((d) => d.position);
+    if (strictValuePosition) {
+      dataTemp.forEach((d) => {
+        // biome-ignore lint/suspicious/noExplicitAny: undefined data type
+        (d as any).fy = y(d.position as number);
+        // biome-ignore lint/suspicious/noExplicitAny: undefined data type
+        (d as any).x = graphWidth / 2;
+      });
+    }
     // biome-ignore lint/suspicious/noExplicitAny: undefined data type
-    forceSimulation(dataTemp as any)
-      // biome-ignore lint/suspicious/noExplicitAny: undefined data type
-      .force('y', forceY((d: any) => y(d.position as number)).strength(5))
+    const simulation = forceSimulation(dataTemp as any)
       .force('x', forceX((_d) => graphWidth / 2).strength(1))
       .force(
         'collide',
         // biome-ignore lint/suspicious/noExplicitAny: undefined data type
         forceCollide((d: any) => (radiusScale ? radiusScale(d.radius || 0) + 1 : radius + 1)),
       )
       .force('charge', forceManyBody().strength(-15))
-      .alphaDecay(0.05)
+      .alphaDecay(0.05);
+
+    if (!strictValuePosition) {
+      simulation.force(
+        'y',
+        // biome-ignore lint/suspicious/noExplicitAny: undefined data type
+        forceY((d: any) => y(d.position as number)).strength(5),
+      );
+    }
+
+    simulation
       .tick(10000)
       .on('tick', () => {
         setFinalData(dataTemp as BeeSwarmChartDataTypeForBubbleChart[]);
       })
       .on('end', () => {
         setFinalData(dataTemp as BeeSwarmChartDataTypeForBubbleChart[]);
       });
-  }, [radius, graphWidth, dataOrdered, y, radiusScale]);
+  }, [radius, graphWidth, dataOrdered, y, radiusScale, strictValuePosition]);
 
   return (
     <>
@@ -471,6 +489,7 @@ export function HorizontalGraph(props: Props) {
     hideAxisLine,
     locale,
     padZeros,
+    strictValuePosition,
   } = props;
   const svgRef = useRef(null);
   // biome-ignore lint/suspicious/noExplicitAny: undefined data type
@@ -543,26 +562,44 @@ export function HorizontalGraph(props: Props) {
         ...(d.data && { data: { ...d.data } }),
       })) as BeeSwarmChartDataType[]
     ).filter((d) => d.position);
+
+    if (strictValuePosition) {
+      dataTemp.forEach((d) => {
+        // biome-ignore lint/suspicious/noExplicitAny: undefined data type
+        (d as any).fx = x(d.position as number);
+        // biome-ignore lint/suspicious/noExplicitAny: undefined data type
+        (d as any).y = graphHeight / 2;
+      });
+    }
+
     // biome-ignore lint/suspicious/noExplicitAny: undefined data type
-    forceSimulation(dataTemp as any)
-      // biome-ignore lint/suspicious/noExplicitAny: undefined data type
-      .force('x', forceX((d: any) => x(d.position as number)).strength(5))
+    const simulation = forceSimulation(dataTemp as any)
       .force('y', forceY((_d) => graphHeight / 2).strength(1))
       .force(
         'collide',
         // biome-ignore lint/suspicious/noExplicitAny: undefined data type
         forceCollide((d: any) => (radiusScale ? radiusScale(d.radius || 0) + 1 : radius + 1)),
       )
       .force('charge', forceManyBody().strength(-15))
-      .alphaDecay(0.05)
+      .alphaDecay(0.05);
+
+    if (!strictValuePosition) {
+      simulation.force(
+        'x',
+        // biome-ignore lint/suspicious/noExplicitAny: undefined data type
+        forceX((d: any) => x(d.position as number)).strength(5),
+      );
+    }
+
+    simulation
       .tick(10000)
       .on('tick', () => {
         setFinalData(dataTemp as BeeSwarmChartDataTypeForBubbleChart[]);
       })
       .on('end', () => {
         setFinalData(dataTemp as BeeSwarmChartDataTypeForBubbleChart[]);
       });
-  }, [radius, graphHeight, dataOrdered, x, radiusScale]);
+  }, [radius, graphHeight, dataOrdered, x, radiusScale, strictValuePosition]);
 
   return (
     <>

src/Components/Graphs/BeeSwarmChart/Graph.tsx

@@ -95,6 +95,8 @@ interface Props {
   showNAColor?: boolean;
   /** Toggle visibility of axis line for the  main axis */
   hideAxisLine?: boolean;
+  /** Defines if teh data point are locked exactly to their data value on the axis; if false, nodes are pulled toward their value but may drift when crowded */
+  strictValuePosition?: boolean;
   /** Data points to highlight. Use the label value from data to highlight the data point */
   highlightedDataPoints?: (string | number)[];
   /** Defines the opacity of the non-highlighted data */
@@ -184,6 +186,7 @@ export function BeeSwarmChart(props: Props) {
     dimmedOpacity = 0.3,
     customLayers = [],
     hideAxisLine = false,
+    strictValuePosition = false,
   } = props;
   const [svgWidth, setSvgWidth] = useState(0);
   const [svgHeight, setSvgHeight] = useState(0);
@@ -302,6 +305,7 @@ export function BeeSwarmChart(props: Props) {
             suffix={numberDisplayOptions?.suffix || ''}
             prefix={numberDisplayOptions?.prefix || ''}
             precision={numberDisplayOptions?.precision ?? 2}
+            strictValuePosition={strictValuePosition}
           />
         ) : null}
       </GraphArea>

src/Components/Graphs/BeeSwarmChart/index.tsx

@@ -61,13 +61,15 @@ interface Props {
   // Graph Parameters
   /** Size of the visualization */
   size?: number;
-  /** No. of dots in a single row */
+  /** No. of grid icons in a single row */
   gridSize?: number;
-  /** Spacing between 2 dots */
+  /** Defines the `d` attribute values for the SVG paths used as grid icons. Each path should be designed for a 24px × 24px viewBox. The order of paths determines the rendering order. If no paths are provided, a circle icon is used as the default. */
+  gridIcon?: string[];
+  /** Spacing between 2 grid icons */
   unitPadding?: number;
-  /** Total no. of dot that are rendered in the chart */
+  /** Total no. of grid icon that are rendered in the chart */
   totalNoOfDots?: number;
-  /** Toggle visibility of stroke for the unfilled dots */
+  /** Toggle visibility of stroke for the unfilled grid icons. */
   showStrokeForWhiteDots?: boolean;
   /** Toggles if the graph animates in when loaded.  */
   animate?: boolean | AnimateDataType;
@@ -123,6 +125,7 @@ export function UnitChart(props: Props) {
     animate = false,
     naLabel = 'NA',
     numberDisplayOptions,
+    gridIcon,
   } = props;
   const svgRef = useRef(null);
   const animateValue =
@@ -141,15 +144,19 @@ export function UnitChart(props: Props) {
   if (radius <= 0) {
     console.error(
       'The size of single unit is less than or equal to zero. Check values for ((dimension / gridSize) - (padding * 2)) / 2 is not less than or equal to 0.',
+      `size: ${size}`,
+      `gridSize: ${gridSize}`,
+      `gridDimension: ${gridDimension}`,
+      `unitPadding: ${unitPadding}`,
     );
     return null;
   }
 
-  const cellsData: { color: string }[] = [];
+  const cellsData: { color: string; index: number }[] = [];
   data.forEach((item, index) => {
     const count = Math.round((item.value / totalValue) * totalNoOfDots);
     for (let i = 0; i < count; i += 1) {
-      cellsData.push({ color: colors[index] });
+      cellsData.push({ color: colors[index], index });
     }
   });
   return (
@@ -267,46 +274,91 @@ export function UnitChart(props: Props) {
         >
           <AnimatePresence>
             <g>
-              {cellsData.map((d, i) => (
-                <motion.circle
-                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier
-                  key={i}
-                  style={{
-                    strokeWidth: 1,
-                  }}
-                  variants={{
-                    initial: {
-                      fill: '#fff',
-                      opacity: 0,
-                      ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),
-                      strokeWidth: 1,
-                    },
-                    whileInView: {
-                      fill: d.color,
-                      opacity: 1,
-                      ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),
-                      strokeWidth: 1,
-                      cx: (i % gridSize) * gridDimension + gridDimension / 2,
-                      cy: Math.floor(i / gridSize) * gridDimension + gridDimension / 2,
-                      transition: {
-                        duration: 0,
-                        delay: (animateValue.duration / cellsData.length) * i,
-                      },
-                    },
-                  }}
-                  initial='initial'
-                  animate={isInView ? 'whileInView' : 'initial'}
-                  className={
-                    (d.color.toLowerCase() === '#fff' ||
-                      d.color.toLowerCase() === '#ffffff' ||
-                      d.color.toLowerCase() === 'white') &&
-                    showStrokeForWhiteDots
-                      ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'
-                      : ''
-                  }
-                  r={radius}
-                />
-              ))}
+              {gridIcon
+                ? cellsData.map((d, i) => (
+                    <motion.svg
+                      key={d.index}
+                      style={{
+                        strokeWidth: 1,
+                      }}
+                      viewBox='0 0 24 24'
+                      width={radius * 2}
+                      height={radius * 2}
+                      variants={{
+                        initial: {
+                          fill: '#fff',
+                          opacity: 0,
+                          ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),
+                          strokeWidth: 1,
+                        },
+                        whileInView: {
+                          fill: d.color,
+                          opacity: 1,
+                          ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),
+                          strokeWidth: 1,
+                          x: (i % gridSize) * gridDimension,
+                          y: Math.floor(i / gridSize) * gridDimension,
+                          transition: {
+                            duration: 0,
+                            delay: (animateValue.duration / cellsData.length) * i,
+                          },
+                        },
+                      }}
+                      initial='initial'
+                      animate={isInView ? 'whileInView' : 'initial'}
+                      className={
+                        (d.color.toLowerCase() === '#fff' ||
+                          d.color.toLowerCase() === '#ffffff' ||
+                          d.color.toLowerCase() === 'white') &&
+                        showStrokeForWhiteDots
+                          ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'
+                          : ''
+                      }
+                    >
+                      {gridIcon.map((el) => (
+                        <path d={el} key={el} />
+                      ))}
+                    </motion.svg>
+                  ))
+                : cellsData.map((d, i) => (
+                    <motion.circle
+                      key={d.index}
+                      style={{
+                        strokeWidth: 1,
+                      }}
+                      variants={{
+                        initial: {
+                          fill: '#fff',
+                          opacity: 0,
+                          ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),
+                          strokeWidth: 1,
+                        },
+                        whileInView: {
+                          fill: d.color,
+                          opacity: 1,
+                          ...(!showStrokeForWhiteDots ? { stroke: d.color } : {}),
+                          strokeWidth: 1,
+                          cx: (i % gridSize) * gridDimension + gridDimension / 2,
+                          cy: Math.floor(i / gridSize) * gridDimension + gridDimension / 2,
+                          transition: {
+                            duration: 0,
+                            delay: (animateValue.duration / cellsData.length) * i,
+                          },
+                        },
+                      }}
+                      initial='initial'
+                      animate={isInView ? 'whileInView' : 'initial'}
+                      className={
+                        (d.color.toLowerCase() === '#fff' ||
+                          d.color.toLowerCase() === '#ffffff' ||
+                          d.color.toLowerCase() === 'white') &&
+                        showStrokeForWhiteDots
+                          ? 'stroke-primary-gray-400 dark:stroke-primary-gray-500'
+                          : ''
+                      }
+                      r={radius}
+                    />
+                  ))}
             </g>
           </AnimatePresence>
         </svg>

src/Components/Graphs/UnitChart/index.tsx

@@ -1061,6 +1061,8 @@ export interface GraphSettingsDataType {
   xNumberDisplayOptions?: NumberFormatOptions;
   yNumberDisplayOptions?: NumberFormatOptions;
   defaultColor?: string;
+  strictValuePosition?: boolean;
+  gridIcon?: string[];
 }
 
 export interface InfoBoxDataType {