Add waterfall chart and remove schema validation

Author: mustafasaifee42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/data-viz",
-  "version": "2.1.9",
+  "version": "2.2.1",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",
@@ -32,6 +32,11 @@
       "import": "./dist/ButterflyChart.js",
       "require": "./dist/ButterflyChart.cjs"
     },
+    "./WaterfallChart": {
+      "types": "./dist/WaterfallChart.d.ts",
+      "import": "./dist/WaterfallChart.js",
+      "require": "./dist/WaterfallChart.cjs"
+    },
     "./CirclePackingGraph": {
       "types": "./dist/CirclePackingGraph.d.ts",
       "import": "./dist/CirclePackingGraph.js",
@@ -382,16 +387,6 @@
       "import": "./dist/transformData.js",
       "require": "./dist/transformData.cjs"
     },
-    "./validateSchema": {
-      "types": "./dist/validateSchema.d.ts",
-      "import": "./dist/validateSchema.js",
-      "require": "./dist/validateSchema.cjs"
-    },
-    "./getSchema": {
-      "types": "./dist/getSchema.d.ts",
-      "import": "./dist/getSchema.js",
-      "require": "./dist/getSchema.cjs"
-    },
     "./Types": {
       "types": "./dist/Types.d.ts",
       "import": "./dist/Types.js",
@@ -471,7 +466,6 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@undp/design-system-react": "^1.5.5",
-    "ajv": "^8.17.1",
     "dom-to-svg": "^0.12.2",
     "file-saver": "^2.0.5",
     "handlebars": "^4.7.8",
@@ -538,15 +532,14 @@
     },
     "handlebars": {
       "optional": true
-    },
-    "ajv": {
-      "optional": true
     }
   },
   "optionalDependencies": {
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/rollup": "^3.1.1",
     "@nabla/vite-plugin-eslint": "^2.0.6",
@@ -584,8 +577,10 @@
     "@types/three": "^0.180.0",
     "@typescript-eslint/eslint-plugin": "^8.42.0",
     "@typescript-eslint/parser": "^8.42.0",
+    "@undp/design-system-react": "^1.5.5",
     "@vitejs/plugin-react": "^5.0.2",
     "autoprefixer": "^10.4.21",
+    "dom-to-svg": "^0.12.2",
     "eslint": "^9.34.0",
     "eslint-config-love": "^122.0.0",
     "eslint-config-prettier": "^10.1.8",
@@ -597,13 +592,26 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-storybook": "^9.1.4",
+    "file-saver": "^2.0.5",
+    "handlebars": "^4.7.8",
+    "maplibre-gl": "^5.16.0",
+    "marked": "^17.0.1",
+    "math-expression-evaluator": "^2.0.7",
+    "pmtiles": "^4.3.2",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
+    "react": "^19.2.3",
     "react-docgen-typescript": "^2.4.0",
+    "react-dom": "^19.2.3",
+    "react-globe.gl": "^2.37.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^6.0.3",
     "storybook": "^9.1.4",
+    "tailwind-animate": "^0.2.10",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.12",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.182.0",
     "typescript": "^5.9.2",
     "vite": "^7.1.4",
     "vite-plugin-dts": "^4.5.4"

package.json

@@ -2,7 +2,7 @@
 
 ### Getting Started
 
-[UNDP data viz library](https://dataviz.design.undp.org) is dedicated to providing a good development experience for data visualization specialists. Before starting, it is recommended to learn React first, and correctly install and configure Node.js v18 or above. 
+[UNDP data viz library](https://dataviz.design.undp.org) is dedicated to providing a good development experience for data visualization specialists. Before starting, it is recommended to learn React first, and correctly install and configure Node.js v18 or above.
 
 We also assumes that you have intermediate knowledge about HTML, CSS, and JavaScript/TypeScript, and React.
 
@@ -13,52 +13,59 @@ Detailed documentation can be found [here](https://dataviz.design.undp.org)
 NPM Package can be found [here](https://www.npmjs.com/package/@undp/data-viz)
 
 ### Installation
+
 __Using npm__
+
 ```
 npm i @undp/data-viz
 ```
 
-
 __Using yarn__
+
 ```
 yarn add @undp/data-viz
 ```
 
 ### Import
+
 It is recommended to import what you need and the use it. For example, import the `HorizontalBarGraph` like this:
+
 ```
 import { HorizontalBarGraph } from '@undp/data-viz'
 ```
 
+It is also recommended to import the css because some setting expect the CSS to be imported to look good. You can import the css file like this:
 
-It is also recommended to import the css because some setting expect the CSS to be imported to look good. You can import the css file like this: 
 ```
 import '@undp/data-viz/style.css';
 ```
 
 ### TypeScript
+
 UNDP visualization library provides a built-in ts definition, you don't need to install any type definitions.
 
 ### Dependencies
+
 The dependencies that are pre-installed wit the library:
+
 * Various D3 libraries - For visualizations
-    * d3-array
-    * d3-delaunay
-    * d3-force
-    * d3-format
-    * d3-geo
-    * d3-hierarchy
-    * d3-scale
-    * d3-selection
-    * d3-shape
-    * d3-zoom
+  * d3-array
+  * d3-delaunay
+  * d3-force
+  * d3-format
+  * d3-geo
+  * d3-hierarchy
+  * d3-scale
+  * d3-selection
+  * d3-shape
+  * d3-zoom
 * Various Lodash libraries - For array and data manipulation
-    * lodash.flattendeep
-    * lodash.intersection
-    * lodash.orderby
-    * lodash.sortby
-    * lodash.sum
-    * lodash.uniqby
+  * lodash.flattendeep
+  * lodash.intersection
+  * lodash.orderby
+  * lodash.sortby
+  * lodash.sum
+  * lodash.uniqby
 * motion - For creating animations in the animated graphs
 * papaparse - For loading and parsing csv from links
 * simple-statistics - For statistical functions
@@ -67,12 +74,14 @@ The dependencies that are pre-installed wit the library:
 * modern-screenshot - For downloading div as images
 * react-csv - For generating a csv file
 
-__Required peer dependencies__ 
+__Required peer dependencies__
+
 * React (of course!) (Peer dependency)
 * React-dom (of course!) (Peer dependency)
 * @undp/design-system-react - For UI elements (Peer dependency)
 
-__Optional peer dependencies__ 
+__Optional peer dependencies__
+
 * maplibre-gl - For Maplibre maps (Peer optional dependency: only needed when using GeoHub maps)
 * pmtiles - For adding pmtiles to Maplibre maps (Peer optional dependency: only needed when using GeoHub maps)
 * dnd-kit - For creating comparison maps (Peer optional dependency: only needed when using GeoHub compare maps)
@@ -84,6 +93,7 @@ __Optional peer dependencies__
 ### How to add a new chart or graph
 
 Adding a new chart or graph to the library requires multiple steps:
+
 * Add the code for the graph to `./src/Components/Elements/Graphs/` folder
 * Once the code is done add the id of the graph to either `GraphTypeForGriddedGraph` or `GeoHubGraphType` in `./src/Types.tsx` depending if you want it to be available in `GriddedGraphDashboard` or not
 * Add the missing settings  to `GraphSettingsDataType` in `./src/Types.tsx`
@@ -95,13 +105,14 @@ Adding a new chart or graph to the library requires multiple steps:
 
 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
 * Add a graph name and id to `GraphNames` in `./src/stories/assets/constants.ts`
 * Add a config file for the graph in `./src/stories/assets/config` folder
 * Add the graph in `./src/stories/assets/graphSettingsSelect.ts`
 * Add the graph in `./src/stories/assets/graphDataConfigSelect.ts`
-

readme.md

@@ -32,6 +32,7 @@ import { BeeSwarmChart } from '../Graphs/BeeSwarmChart';
 import { RadarChart } from '../Graphs/RadarChart';
 import { BulletChart } from '../Graphs/BulletChart';
 import { HybridMap } from '../Graphs/Maps/HybridMap';
+import { WaterfallChart } from '../Graphs/WaterfallChart';
 
 import { getValues } from '@/Utils/getValues';
 import {
@@ -127,6 +128,7 @@ function GraphEl(props: Props) {
     dataCards: DataCards,
     radarChart: RadarChart,
     hybridMap: HybridMap,
+    waterfallChart: WaterfallChart,
   };
   const getGraphProps = (graphType: GraphType) => {
     switch (graphType) {
@@ -199,6 +201,69 @@ function GraphEl(props: Props) {
           animate: settings?.animate,
           naLabel: settings?.naLabel,
         };
+      case 'waterfallChart':
+        return {
+          customLayers: settings?.customLayers,
+          precision: settings?.precision,
+          theme: settings?.theme,
+          dimmedOpacity: settings?.dimmedOpacity,
+          data: graphData,
+          colors: settings?.colors as string | string[] | undefined,
+          graphTitle: settings?.graphTitle,
+          graphDescription: settings?.graphDescription,
+          footNote: settings?.footNote,
+          height: settings?.height,
+          width: settings?.width,
+          suffix: settings?.suffix,
+          prefix: settings?.prefix,
+          sources: settings?.sources,
+          barPadding: settings?.barPadding,
+          showValues: settings?.showValues,
+          showTicks: settings?.showTicks,
+          leftMargin: settings?.leftMargin,
+          rightMargin: settings?.rightMargin,
+          truncateBy: settings?.truncateBy,
+          colorDomain: settings?.colorDomain,
+          colorLegendTitle:
+            Object.keys(settings || {}).indexOf('colorLegendTitle') !== -1
+              ? settings?.colorLegendTitle
+              : getValues('color', graphDataConfiguration || [], readableHeader || []),
+          backgroundColor: settings?.backgroundColor,
+          padding: settings?.padding,
+          topMargin: settings?.topMargin,
+          bottomMargin: settings?.bottomMargin,
+          relativeHeight: settings?.relativeHeight,
+          showLabels: settings?.showLabels,
+          showColorScale: settings?.showColorScale,
+          maxValue: settings?.maxValue,
+          minValue: settings?.minValue,
+          labelOrder: settings?.labelOrder,
+          tooltip: settings?.tooltip,
+          refValues: settings?.refValues,
+          graphID: settings?.graphID,
+          highlightedDataPoints: settings?.highlightedDataPoints,
+          graphDownload: settings?.graphDownload,
+          dataDownload: settings?.dataDownload,
+          language: settings?.language,
+          minHeight: settings?.minHeight,
+          showNAColor: settings?.showNAColor,
+          maxBarThickness: settings?.maxBarThickness,
+          minBarThickness: settings?.minBarThickness,
+          maxNumberOfBars: settings?.maxNumberOfBars,
+          ariaLabel: settings?.ariaLabel,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          onSeriesMouseClick: (el: any) => {
+            updateFilters?.(el.label);
+          },
+          detailsOnClick: settings?.detailsOnClick,
+          barAxisTitle: settings?.barAxisTitle,
+          noOfTicks: settings?.noOfTicks,
+          styles: settings?.styles,
+          classNames: settings?.classNames,
+          filterNA: settings?.filterNA,
+          animate: settings?.animate,
+          naLabel: settings?.naLabel,
+        };
       case 'groupedBarChart':
         return {
           timeline: settings?.timeline,

src/Components/Dashboard/GraphEl.tsx

@@ -123,8 +123,8 @@ export function Graph(props: Props) {
             .nodePadding(nodePadding)
             .size([graphWidth, graphHeight])
             .nodeAlign(sankeyCenter)
-            .nodeSort(() => null)
-            .linkSort(() => null)
+            .nodeSort(null)
+            .linkSort(null)
         : sankey()
             .nodeWidth(nodeWidth)
             .nodePadding(nodePadding)