mirror of
https://github.com/koodiklinikka/palkkakysely.git
synced 2026-01-26 03:14:03 +00:00
Modernize analysaattori packages (#16)
See https://github.com/plotly/react-pivottable/issues/150#issuecomment-1327602745
This commit is contained in:
Aarni Koskela
GitHub
22
analysaattori/.eslintrc.js
Normal file
22
analysaattori/.eslintrc.js
Normal file
@@ -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: {},
|
||||
};
|
||||
@@ -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>
|
||||
|
||||
@@ -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%",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"),
|
||||
);
|
||||
|
||||
5
analysaattori/src/react-pivottable.d.ts
vendored
5
analysaattori/src/react-pivottable.d.ts
vendored
@@ -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";
|
||||
|
||||
@@ -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({
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user