Add layout option to circlePacking and also update design system library

Author: mustafasaifee42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/data-viz",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",
@@ -441,6 +441,7 @@
     "d3-array": "^3.2.4",
     "d3-delaunay": "^6.0.4",
     "d3-force": "^3.0.0",
+    "d3-force-boundary": "^0.0.3",
     "d3-format": "^3.1.0",
     "d3-geo": "^3.1.1",
     "d3-hierarchy": "^3.1.2",
@@ -466,7 +467,7 @@
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
-    "@undp/design-system-react": "^2.0.1",
+    "@undp/design-system-react": "^2.0.4",
     "dom-to-svg": "^0.12.2",
     "file-saver": "^2.0.5",
     "handlebars": "^4.7.8",

package.json

@@ -1391,6 +1391,7 @@ function GraphEl(props: Props) {
           leftMargin: settings?.leftMargin,
           rightMargin: settings?.rightMargin,
           colorDomain: settings?.colorDomain,
+          circularBoundary: settings?.circularBoundary,
           colorLegendTitle:
             Object.keys(settings || {}).indexOf('colorLegendTitle') !== -1
               ? settings?.colorLegendTitle

src/Components/Dashboard/GraphEl.tsx

@@ -3,6 +3,7 @@ import { forceCollide, forceManyBody, forceSimulation, forceX, forceY } from 'd3
 import orderBy from 'lodash.orderby';
 import { scaleSqrt } from 'd3-scale';
 import { extent } from 'd3-array';
+import forceBoundary from 'd3-force-boundary';
 import { cn } from '@undp/design-system-react/cn';
 import { Spinner } from '@undp/design-system-react/Spinner';
 import { P } from '@undp/design-system-react/Typography';
@@ -145,6 +146,7 @@ export const Graph = (props: Props) => {
           forceCollide((d: any) => (radiusScale ? radiusScale(d.size || 0) + 1 : radius + 1)),
         )
         .force('charge', forceManyBody().strength(-15))
+        .force('boundary', forceBoundary(0, 0, graphWidth, graphHeight).strength(0.2).border(50))
         .alphaDecay(0.05)
         .tick(10000);
 

src/Components/Graphs/CirclePackingGraph/Graph.tsx

@@ -2,9 +2,13 @@ export function getMaxCircleRadius(
   values: (number | undefined | null)[],
   width: number,
   height: number,
+  circularBoundary?: boolean,
 ) {
   const filteredValues = values.filter(d => d !== undefined && d !== null);
-  const containerRadius = Math.min(width, height) / 2;
+  const containerRadius =
+    circularBoundary === false
+      ? Math.sqrt((width * height) / Math.PI)
+      : Math.min(width, height) / 2;
   const totalValue = filteredValues.reduce((sum, v) => sum + v, 0);
   const maxValue = Math.max(...filteredValues);
   const getPackingEfficiency = (n: number) => {
@@ -21,7 +25,7 @@ export function getMaxCircleRadius(
   return (
     containerRadius *
     Math.sqrt(maxValue / totalValue) *
-    getEfficiencyBecauseOfContainerRadius(containerRadius) *
-    getPackingEfficiency(filteredValues.length)
+    (circularBoundary ? getEfficiencyBecauseOfContainerRadius(containerRadius) : 1) *
+    (circularBoundary ? getPackingEfficiency(filteredValues.length) : 1)
   );
 }

src/Components/Graphs/CirclePackingGraph/getMaxCircleRadius.ts

@@ -72,6 +72,8 @@ interface Props {
   maxRadiusValue?: number;
 
   // Graph Parameters
+  /** If true, the graph will be rendered in a circle layout */
+  circularBoundary?: boolean;
   /** Maximum radius of the circle */
   radius?: number;
   /** Toggle visibility of labels */
@@ -162,6 +164,7 @@ export function CirclePackingGraph(props: Props) {
     classNames,
     dimmedOpacity = 0.3,
     precision = 2,
+    circularBoundary = true,
   } = props;
   const [svgWidth, setSvgWidth] = useState(0);
   const [svgHeight, setSvgHeight] = useState(0);
@@ -272,6 +275,7 @@ export function CirclePackingGraph(props: Props) {
                     data.map(d => d.size),
                     svgWidth,
                     svgHeight,
+                    circularBoundary,
                   )
                 : radius
             }

src/Components/Graphs/CirclePackingGraph/index.tsx

@@ -1020,6 +1020,7 @@ export interface GraphSettingsDataType {
   hideAxisLine?: boolean;
   projectionRotate?: [number, number] | [number, number, number];
   rewindCoordinatesInMapData?: boolean;
+  circularBoundary?: boolean;
 }
 
 export interface InfoBoxDataType {

src/Types.ts

@@ -1,3 +1,4 @@
 // declarations.d.ts
 declare module 'pmtiles';
 declare module '@undp/design-system-react/tailwind.config';
+declare module 'd3-force-boundary';

src/declarations.d.ts

@@ -91,6 +91,7 @@ const meta: Meta<PagePropsAndCustomArgs> = {
     // Graph parameters
     showLabels: { table: { defaultValue: { summary: 'true' } } },
     showValues: { table: { defaultValue: { summary: 'true' } } },
+    circularBoundary: { table: { defaultValue: { summary: 'true' } } },
     showColorScale: { table: { defaultValue: { summary: 'false' } } },
     showNAColor: { table: { defaultValue: { summary: 'true' } } },
     highlightedDataPoints: {