Add React analysaattori

analysaattori/src/App.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PivotTableUI from 'react-pivottable/PivotTableUI';
+import 'react-pivottable/pivottable.css';
+import TableRenderers from 'react-pivottable/TableRenderers';
+import createPlotlyComponent from 'react-plotly.js/factory';
+import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';
+import useSWR from "swr/esm";
+
+const Plot = createPlotlyComponent(window.Plotly);
+const PlotlyRenderers = createPlotlyRenderers(Plot);
+const renderers = Object.assign({}, TableRenderers, PlotlyRenderers);
+
+
+function App() {
+  const qs = new URLSearchParams(window.location.search);
+  const [pivotState, setPivotState] = React.useState({});
+  const dataSwr = useSWR(qs.get("url") || "/palkkakysely/data.json");
+  if (!dataSwr.data) {
+    if (dataSwr.error) {
+      return <>Virhe ladatessa dataa: {`${dataSwr.error}`}</>;
+    }
+    return <>Ladataan...</>;
+  }
+  return (
+    <div>
+      <PivotTableUI
+        data={dataSwr.data}
+        renderers={renderers}
+        onChange={setPivotState}
+        {...pivotState}
+      />
+    </div>
+  );
+}
+
+export default App;

analysaattori/src/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

analysaattori/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

analysaattori/src/react-pivottable.d.ts

@@ -0,0 +1,3 @@
+declare module "react-pivottable/PivotTableUI";
+declare module "react-pivottable/TableRenderers";
+declare module "react-pivottable/PlotlyRenderers";