Feature/pn 10451

README.md

@@ -51,7 +51,7 @@ As rule of thumb, merge with squash is preferred over merge. Rebase is not advis
 
 ### Lerna
 
-This project uses [lerna](https://github.com/lerna/lerna) and [craco](https://github.com/gsoft-inc/craco)
+This project uses [lerna](https://github.com/lerna/lerna) and [vitejs](https://vitejs.dev/config/)
 These tools allow to handle a monorepo with multiple webapps which share common components.
 The content of monorepo is:
 
@@ -60,8 +60,7 @@ The content of monorepo is:
 - packages/pn-pa-webapp app for public administration
 - packages/pn-personafisica-webapp app for citizens
 - packages/pn-personafisica-login login section for citizen app
-
-https://medium.com/geekculture/setting-up-monorepo-with-create-react-app-cb2cfa763b96
+- packages/pn-data-viz component-library for statistical data visualization for SEND
 
 ### Sonar
 
@@ -73,7 +72,7 @@ You can run a task analysis with sonar-scanner using this script in each package
 
 ### Versioning
 
-These scripts use [lerna version](https://github.com/lerna/lerna/blob/main/commands/version/README.md).
+These scripts use [lerna version](https://github.com/lerna/lerna/tree/main/libs/commands/version#readme).
 
 Release a prepatch:
 

package.json

@@ -1,6 +1,7 @@
 {
-  "name": "send-monorepo",
+  "name": "pn-frontend",
   "private": true,
+  "license": "SEE LICENS IN LICENSE",
   "devDependencies": {
     "lerna": "^6.4.1"
   },

packages/pn-data-viz/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+test-report.xml
+
+# sonar
+/.scannerwork
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/pn-data-viz/README.md

@@ -0,0 +1,11 @@
+# `pn-data-viz`
+
+> TODO: description
+
+## Usage
+
+```
+const pnDataViz = require('pn-data-viz');
+
+// TODO: DEMONSTRATE API
+```

packages/pn-data-viz/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@pagopa-pn/pn-data-viz",
+  "version": "0.0.1",
+  "private": true,
+  "description": "SEND component library for data visualization",
+  "keywords": [
+    "data-viz",
+    "charts",
+    "send"
+  ],
+  "homepage": "https://github.com/pagopa/pn-frontend/pn-data-viz#readme",
+  "main": "src/pn-data-viz.js",
+  "dependencies": {
+    "@types/echarts": "^4.9.22",
+    "echarts": "^5.5.0",
+    "typescript": "^5.2.2"
+  },
+  "scripts": {
+    "test": "node ./__tests__/pn-data-viz.test.js"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.14.5",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "eslint": "7.11.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-functional": "^3.7.2",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-sonarjs": "^0.10.0",
+    "vite": "^5.1.4",
+    "vitest": "1.3.1"
+  }
+}

packages/pn-data-viz/src/PnEcharts.tsx

@@ -0,0 +1,72 @@
+import senderDashboard from "./theme/senderDashboard";
+import { init, getInstanceByDom, registerTheme } from "echarts";
+import type { EChartOption, ECharts, SetOptionOpts } from "echarts";
+import React, { useRef, useEffect } from "react";
+import type { CSSProperties } from "react";
+
+export interface PnEChartsProps {
+	option: EChartOption;
+	style?: CSSProperties;
+	settings?: SetOptionOpts;
+	loading?: boolean;
+	theme?: "light" | "dark" | object;
+}
+
+export function PnECharts({
+	option,
+	style,
+	settings,
+	loading,
+	theme,
+}: PnEChartsProps): JSX.Element {
+	const chartRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		// Initialize chart
+		let chart: ECharts | undefined;
+		if (chartRef.current !== null) {
+			let selectedTheme = "defaultTheme";
+
+			registerTheme("defaultTheme", senderDashboard);
+			if (typeof theme === "object") {
+				registerTheme("customTheme", theme);
+				selectedTheme = "customTheme";
+			}
+			chart = init(chartRef.current, selectedTheme);
+		}
+
+		// Add chart resize listener
+		// ResizeObserver is leading to a bit janky UX
+		function resizeChart() {
+			chart?.resize();
+		}
+		window.addEventListener("resize", resizeChart);
+
+		// Return cleanup function
+		return () => {
+			chart?.dispose();
+			window.removeEventListener("resize", resizeChart);
+		};
+	}, [theme]);
+
+	useEffect(() => {
+		// Update chart
+		if (chartRef.current !== null) {
+			const chart = getInstanceByDom(chartRef.current);
+			chart?.setOption(option, settings);
+		}
+	}, [option, settings, theme]); // Whenever theme changes we need to add option and setting due to it being deleted in cleanup function
+
+	useEffect(() => {
+		// Update chart
+		if (chartRef.current !== null) {
+			const chart = getInstanceByDom(chartRef.current);
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+			loading === true ? chart?.showLoading() : chart?.hideLoading();
+		}
+	}, [loading, theme]);
+
+	return (
+		<div ref={chartRef} style={{ width: "100%", height: "100%", ...style }} />
+	);
+}