Modernize analysaattori packages (#16)

See plotly/react-pivottable#150 (comment)
koodiklinikka · Sep 28, 2023 · 2195f66 · 2195f66
1 parent ff8f98f
commit 2195f66
Show file tree

Hide file tree

Showing 8 changed files with 1,138 additions and 1,138 deletions.
diff --git a/analysaattori/.eslintrc.js b/analysaattori/.eslintrc.js
@@ -0,0 +1,22 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:react/recommended",
+    "prettier",
+  ],
+  rules: {},
+};
diff --git a/analysaattori/index.html b/analysaattori/index.html
@@ -4,14 +4,6 @@
     <meta charset="utf-8" />
     <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <script
-      src="https://cdn.plot.ly/plotly-latest.min.js"
-      charset="utf-8"
-    ></script>
     <title>Palkka-analysaattori</title>
   </head>
   <body>

diff --git a/analysaattori/package.json b/analysaattori/package.json
@@ -4,28 +4,33 @@
   "private": true,
   "homepage": "https://koodiklinikka.github.io/palkkakysely/analysaattori/",
   "dependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-pivottable": "^0.11.0",
-    "react-plotly.js": "^2.5.1",
-    "swr": "^0.4.2"
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
+    "@imc-trading/react-pivottable": "^0.2.13",
+    "immutability-helper": "^3.1.1",
+    "plotly.js-dist": "^2.26.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-plotly.js": "^2.6.0",
+    "swr": "^2.2.4"
   },
   "devDependencies": {
-    "@types/node": "^14.14.31",
-    "@types/plotly.js": "^1.54.8",
-    "@types/react-plotly.js": "^2.2.4",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
-    "@vitejs/plugin-react": "^2.0.0",
-    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "^7.30.1",
+    "@types/node": "^20.7.1",
+    "@types/plotly.js": "^2.12.27",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@types/react-plotly.js": "^2.6.1",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
+    "@vitejs/plugin-react-swc": "^3.4.0",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.7.1",
-    "typescript": "^4.1.5",
-    "vite": "^3.0.0"
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
   },
   "scripts": {
     "dev": "vite",
@@ -34,9 +39,6 @@
     "lint": "eslint .",
     "prettify": "prettier --write ."
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

diff --git a/analysaattori/src/App.tsx b/analysaattori/src/App.tsx
@@ -1,24 +1,34 @@
 import React from "react";
-import PivotTableUI from "react-pivottable/PivotTableUI";
-import "react-pivottable/pivottable.css";
-import TableRenderers from "react-pivottable/TableRenderers";
+import "@imc-trading/react-pivottable/pivottable.css";
+import {
+  PivotTableUI,
+  TableRenderers,
+  createPlotlyRenderers,
+} from "@imc-trading/react-pivottable";
 import createPlotlyComponent from "react-plotly.js/factory";
-import createPlotlyRenderers from "react-pivottable/PlotlyRenderers";
-import useSWR from "swr/esm";
+import Plotly from "plotly.js-dist/plotly";
+import useSWR from "swr";
 
-const Plot = createPlotlyComponent(window.Plotly);
+const Plot = createPlotlyComponent(Plotly);
 const PlotlyRenderers = createPlotlyRenderers(Plot);
 const renderers = Object.assign({}, TableRenderers, PlotlyRenderers);
 
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
 function App() {
   const qs = new URLSearchParams(window.location.search);
+  const url = qs.get("url") || "/palkkakysely/data.json";
   const [pivotState, setPivotState] = React.useState({});
-  const dataSwr = useSWR(qs.get("url") || "/palkkakysely/data.json");
+  const dataSwr = useSWR(url, fetcher, { revalidateOnFocus: false });
   if (!dataSwr.data) {
     if (dataSwr.error) {
-      return <>Virhe ladatessa dataa: {`${dataSwr.error}`}</>;
+      return (
+        <>
+          Virhe ladatessa dataa {url}: {`${dataSwr.error}`}
+        </>
+      );
     }
-    return <>Ladataan...</>;
+    return <>Ladataan {url}...</>;
   }
   return (
     <div>

diff --git a/analysaattori/src/index.tsx b/analysaattori/src/index.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root"),
 );
diff --git a/analysaattori/src/react-pivottable.d.ts b/analysaattori/src/react-pivottable.d.ts
@@ -1,3 +1,2 @@
-declare module "react-pivottable/PivotTableUI";
-declare module "react-pivottable/TableRenderers";
-declare module "react-pivottable/PlotlyRenderers";
+declare module "@imc-trading/react-pivottable";
+declare module "plotly.js-dist/plotly";
diff --git a/analysaattori/vite.config.ts b/analysaattori/vite.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react-swc";
 
 // https://vitejs.dev/config/
 export default defineConfig({