Update map rendering and simplify it using D3

Author: mustafasaifee42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/data-viz",
-  "version": "2.2.3",
+  "version": "2.3.1",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",
@@ -436,6 +436,7 @@
     "@turf/area": "^7.2.0",
     "@turf/bbox": "^7.2.0",
     "@turf/center-of-mass": "^7.2.0",
+    "@turf/rewind": "^7.3.3",
     "babel-plugin-react-compiler": "^1.0.0",
     "d3-array": "^3.2.4",
     "d3-delaunay": "^6.0.4",

package.json

@@ -99,16 +99,9 @@ Adding a new chart or graph to the library requires multiple steps:
 * Add the missing settings  to `GraphSettingsDataType` in `./src/Types.tsx`
 * Add the graph configuration settings in `./src/Utils/transformData/graphConfig.ts`
 * Add the graph to the list in `./src/Utils/getGraphList.tsx`
-* Add the file names in the next step to the `getDataSchema` and `getSettingsSchema` functions in `./src/Schemas/getSchema.tsx`
 * Add the graph to the `graphComponent` and `getGraphProps` functions in `./src/Components/Dashboard/GraphEl.tsx`
 * Finally add an export in `./src/index.ts`
 
-Adding schema
-__Schemas are in different repo: [undp-viz-library-schema](https://github.com/UNDP-Data/undp-viz-library-schemas)
-
-* Add the data schema for the graph and graph settings schema to the `dataSchema` folder.
-* Also add the missing properties to the `SettingSchema` in `settingSchema` folder
-
 Adding documentation and stories in storybook:
 
 * Add a new story in `./src/stories/Graph+Map+Chart` folder

readme.md

@@ -909,6 +909,8 @@ function GraphEl(props: Props) {
           zoomInteraction: settings?.zoomInteraction,
           animate: settings?.animate,
           zoomAndCenterByHighlightedIds: settings?.zoomAndCenterByHighlightedIds,
+          projectionRotate: settings?.projectionRotate,
+          rewindCoordinatesInMapData: settings?.rewindCoordinatesInMapData,
         };
       case 'biVariateChoroplethMap':
         return {
@@ -969,6 +971,8 @@ function GraphEl(props: Props) {
           zoomInteraction: settings?.zoomInteraction,
           animate: settings?.animate,
           zoomAndCenterByHighlightedIds: settings?.zoomAndCenterByHighlightedIds,
+          projectionRotate: settings?.projectionRotate,
+          rewindCoordinatesInMapData: settings?.rewindCoordinatesInMapData,
         };
       case 'dotDensityMap':
         return {
@@ -1022,6 +1026,8 @@ function GraphEl(props: Props) {
           classNames: settings?.classNames,
           zoomInteraction: settings?.zoomInteraction,
           animate: settings?.animate,
+          projectionRotate: settings?.projectionRotate,
+          rewindCoordinatesInMapData: settings?.rewindCoordinatesInMapData,
         };
       case 'hybridMap':
         return {
@@ -1086,6 +1092,8 @@ function GraphEl(props: Props) {
           dotColor: settings?.dotColor,
           dotBorderColor: settings?.dotBorderColor,
           labelColor: settings?.labelColor,
+          projectionRotate: settings?.projectionRotate,
+          rewindCoordinatesInMapData: settings?.rewindCoordinatesInMapData,
         };
       case 'donutChart':
         return {