Add tooltips and client.js again.

Author: fniephaus

graaljs/graaljs-micronaut-react-ssr/src/main/js/client.js

@@ -1 +1,9 @@
-/* Client-side code disabled to illustrate pure server-side rendering. */
+import React from 'react';
+import {hydrateRoot} from 'react-dom/client';
+
+const pageComponentName = Micronaut.rootComponent;
+
+import(`./components/${pageComponentName}.js`).then(module => {
+    const PageComponent = module[pageComponentName] ?? module['default'];
+    hydrateRoot(document, <PageComponent {...Micronaut.rootProps}/>)
+})

graaljs/graaljs-micronaut-react-ssr/src/main/js/components/SimpleAreaChart.js

@@ -1,7 +1,7 @@
 /* Original Recharts example at: https://recharts.org/en-US/examples/SimpleAreaChart */
 
 import React from 'react';
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from 'recharts';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
 
 const data = [
     {
@@ -64,6 +64,7 @@ const SimpleAreaChart = ({width, height}) => {
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis dataKey="name" />
             <YAxis />
+            <Tooltip />
             <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
         </AreaChart>
     );

graaljs/graaljs-micronaut-react-ssr/src/main/js/components/SimpleBarChart.js

@@ -1,7 +1,7 @@
 /* Original Recharts example at: https://recharts.org/en-US/examples/SimpleBarChart */
 
 import React from 'react';
-import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Legend } from 'recharts';
+import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
 
 const data = [
     {
@@ -64,6 +64,7 @@ const SimpleBarChart = ({width, height}) => {
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis dataKey="name" />
             <YAxis />
+            <Tooltip />
             <Legend />
             <Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue" />} />
             <Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple" />} />

graaljs/graaljs-micronaut-react-ssr/src/main/js/components/SimpleLineChart.js

@@ -1,27 +1,72 @@
 /* Original Recharts example at: https://recharts.org/en-US/examples/SimpleLineChart */
 
-import React from 'react';
-import { LineChart, Line, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
 
 const data = [
-  { name: 'A', uv: 400, pv: 240 },
-  { name: 'B', uv: 300, pv: 456 },
-  { name: 'C', uv: 300, pv: 139 },
-  { name: 'D', uv: 200, pv: 980 },
-  { name: 'E', uv: 278, pv: 390 },
-  { name: 'F', uv: 189, pv: 480 },
+    {
+        name: 'Page A',
+        uv: 4000,
+        pv: 2400,
+        amt: 2400,
+    },
+    {
+        name: 'Page B',
+        uv: 3000,
+        pv: 1398,
+        amt: 2210,
+    },
+    {
+        name: 'Page C',
+        uv: 2000,
+        pv: 9800,
+        amt: 2290,
+    },
+    {
+        name: 'Page D',
+        uv: 2780,
+        pv: 3908,
+        amt: 2000,
+    },
+    {
+        name: 'Page E',
+        uv: 1890,
+        pv: 4800,
+        amt: 2181,
+    },
+    {
+        name: 'Page F',
+        uv: 2390,
+        pv: 3800,
+        amt: 2500,
+    },
+    {
+        name: 'Page G',
+        uv: 3490,
+        pv: 4300,
+        amt: 2100,
+    },
 ];
 
-function SimpleLineChart({width, height}) {
-  return (
-    <LineChart width={width} height={height} data={data}>
-      <XAxis dataKey="name" />
-      <YAxis />
-      <CartesianGrid stroke="#eee" strokeDasharray="5 5" />
-      <Line type="monotone" dataKey="uv" stroke="#ff7300" />
-      <Line type="monotone" dataKey="pv" stroke="#387908" />
-    </LineChart>
-  );
+export default function SimpleLineChart({width, height}) {
+    return (
+        <LineChart
+            width={width}
+            height={height}
+            data={data}
+            margin={{
+                top: 5,
+                right: 30,
+                left: 20,
+                bottom: 5,
+            }}
+        >
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="name" />
+            <YAxis />
+            <Tooltip />
+            <Legend />
+            <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
+            <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
+        </LineChart>
+    );
 }
-
-export default SimpleLineChart;

graaljs/graaljs-micronaut-react-ssr/src/main/js/components/VerticalComposedChart.js

@@ -9,6 +9,7 @@ import {
     XAxis,
     YAxis,
     CartesianGrid,
+    Tooltip,
     Legend,
 } from 'recharts';
 
@@ -68,6 +69,7 @@ const VerticalComposedChart = ({width, height}) => {
             <CartesianGrid stroke="#f5f5f5" />
             <XAxis type="number" />
             <YAxis dataKey="name" type="category" scale="band" />
+            <Tooltip />
             <Legend />
             <Area dataKey="amt" fill="#8884d8" stroke="#8884d8" />
             <Bar dataKey="pv" barSize={20} fill="#413ea0" />