@undp/data-viz 0.0.1

package/package.json

@@ -0,0 +1,173 @@
+{
+  "name": "@undp/data-viz",
+  "version": "0.0.1",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "browser": "./dist/index.umd.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/index.js",
+    "dist/index.cjs",
+    "dist/index.umd.js",
+    "dist/index.d.ts",
+    "dist/style.css"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "description": "The open source graphing library build by UNDP",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/UNDP-Data/dv-visualization-starter-kit.git"
+  },
+  "author": "United Nations Development Programme",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/UNDP-Data/dv-visualization-starter-kit/issues"
+  },
+  "homepage": "https://orange-bay-04736e710.4.azurestaticapps.net/",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "clean": "rimraf node_modules && rimraf dist"
+  },
+  "keywords": [
+    "UNDP",
+    "United Nations",
+    "React",
+    "visualization",
+    "data visualization",
+    "graphing",
+    "plotting",
+    "graphs",
+    "maps"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@undp/design-system-react": "^0.0.1",
+    "ajv": "^8.17.1",
+    "d3-array": "^3.2.4",
+    "d3-delaunay": "^6.0.4",
+    "d3-force": "^3.0.0",
+    "d3-format": "^3.1.0",
+    "d3-geo": "^3.1.1",
+    "d3-hierarchy": "^3.1.2",
+    "d3-sankey": "^0.12.3",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-zoom": "^3.0.0",
+    "date-fns": "^4.1.0",
+    "dom-to-svg": "^0.12.2",
+    "fast-deep-equal": "^3.1.3",
+    "file-saver": "^2.0.5",
+    "handlebars": "^4.7.8",
+    "html2canvas": "^1.4.1",
+    "lodash.flattendeep": "^4.4.0",
+    "lodash.groupby": "^4.6.0",
+    "lodash.intersection": "^4.4.0",
+    "lodash.max": "^4.0.1",
+    "lodash.maxby": "^4.6.0",
+    "lodash.min": "^4.0.1",
+    "lodash.minby": "^4.6.0",
+    "lodash.orderby": "^4.6.0",
+    "lodash.sortby": "^4.7.0",
+    "lodash.sum": "^4.0.2",
+    "lodash.uniq": "^4.5.0",
+    "lodash.uniqby": "^4.7.0",
+    "marked": "^15.0.8",
+    "math-expression-evaluator": "^2.0.6",
+    "motion": "^12.7.4",
+    "papaparse": "^5.5.2",
+    "pmtiles": "^4.3.0",
+    "react-csv": "^2.2.2",
+    "simple-statistics": "^7.8.8",
+    "xss": "^1.0.15"
+  },
+  "peerDependencies": {
+    "maplibre-gl": "^5.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.6",
+    "@storybook/addon-essentials": "^8.6.11",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/addon-onboarding": "^8.6.11",
+    "@storybook/blocks": "^8.6.11",
+    "@storybook/react": "^8.6.11",
+    "@storybook/react-vite": "^8.6.11",
+    "@storybook/test": "^8.6.12",
+    "@types/d3-array": "^3.0.5",
+    "@types/d3-delaunay": "^6.0.4",
+    "@types/d3-force": "^3.0.10",
+    "@types/d3-format": "^3.0.1",
+    "@types/d3-geo": "^3.0.3",
+    "@types/d3-hierarchy": "^3.1.7",
+    "@types/d3-sankey": "^0.12.4",
+    "@types/d3-scale": "^4.0.3",
+    "@types/d3-selection": "^3.0.5",
+    "@types/d3-shape": "^3.1.1",
+    "@types/d3-zoom": "^3.0.3",
+    "@types/dom-to-image": "^2.6.4",
+    "@types/file-saver": "^2.0.5",
+    "@types/lodash.flattendeep": "^4.4.9",
+    "@types/lodash.groupby": "^4.6.9",
+    "@types/lodash.intersection": "^4.4.9",
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/lodash.max": "^4.0.7",
+    "@types/lodash.maxby": "^4.6.7",
+    "@types/lodash.min": "^4.0.7",
+    "@types/lodash.minby": "^4.6.7",
+    "@types/lodash.orderby": "^4.6.9",
+    "@types/lodash.sortby": "^4.7.7",
+    "@types/lodash.sum": "^4.0.7",
+    "@types/lodash.uniq": "^4.5.9",
+    "@types/lodash.uniqby": "^4.7.7",
+    "@types/math-expression-evaluator": "^1.3.3",
+    "@types/node": "^20.14.10",
+    "@types/papaparse": "^5.3.14",
+    "@types/react": "^18.0.27",
+    "@types/react-csv": "^1.1.3",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.30.1",
+    "@typescript-eslint/parser": "^8.30.1",
+    "@vitejs/plugin-react": "^4.4.0",
+    "eslint": "^9.25.0",
+    "eslint-config-love": "^119.0.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-n": "^17.17.0",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^0.12.0",
+    "prettier": "^3.5.3",
+    "react-docgen-typescript": "^2.2.2",
+    "rimraf": "^6.0.1",
+    "storybook": "^8.6.12",
+    "typescript": "^5.7.3",
+    "vite": "^6.3.2",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-eslint": "^1.8.1"
+  }
+}

package/readme.md

@@ -0,0 +1,76 @@
+# Getting Started
+
+UNDP visualization library 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 v16 or above. 
+
+We also assumes that you have intermediate knowledge about HTML, CSS, and JavaScript/TypeScript, and React. Starting out is straightforward.
+
+Detailed documentation can be found [here](https://orange-bay-04736e710.4.azurestaticapps.net/).
+
+### Installation
+__Using npm__
+```
+npm i @undp-data/undp-visualization-library
+```
+
+
+__Using yarn__
+```
+yarn add @undp-data/undp-visualization-library
+```
+
+### 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/undp-visualization-library'
+```
+
+
+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/undp-visualization-library/dist/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
+* Various Lodash libraries - For array and data manipulation
+    * lodash.flattendeep
+    * lodash.intersection
+    * lodash.isequal
+    * lodash.max
+    * lodash.maxby
+    * lodash.min
+    * lodash.minby
+    * lodash.orderby
+    * lodash.sortby
+    * lodash.sum
+    * lodash.uniq
+    * lodash.uniqby
+* maplibre-gl - For Maplibre maps
+* pmtiles - For adding pmtiles to Maplibre maps
+* papaparse - For loading and parsing csv from links
+* framer-motion - For creating animations in the animated graphs
+* react-draggable - For creating comparison maps
+* simple-statistics - For statistical functions
+* xss - For cleaning up cross scripting from user-submitted HTML
+* ajv - For schema validation
+* date-fns - For date formatting
+* dom-to-image - For downloading div as images
+* dom-to-svg - For downloading div as svg
+* file-saver - For downloading files
+* react-csv - For generating a csv file
+* xlsx - For generating a xlsx file
+* React (of course!)