Skip to content

Commit d51b1d0

Browse files
fniephausfniephaus
committed
Revise demo and add more examples.
1 parent 2b40f8d commit d51b1d0

File tree

10 files changed

+433
-21
lines changed

10 files changed

+433
-21
lines changed

‎graaljs/graaljs-micronaut-react-ssr/pom.xml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,11 @@
5454
<scope>runtime</scope>
5555
</dependency>
5656
<dependency>
57-
<groupId>org.graalvm.js</groupId>
58-
<artifactId>js-language</artifactId>
57+
<groupId>org.graalvm.polyglot</groupId>
58+
<artifactId>js</artifactId>
5959
<version>${graaljs.version}</version>
6060
<scope>runtime</scope>
61+
<type>pom</type>
6162
</dependency>
6263
<dependency>
6364
<groupId>org.graalvm.polyglot</groupId>

‎graaljs/graaljs-micronaut-react-ssr/src/main/java/com/example/AppController.java‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
@Controller
1717
public class AppController {
1818
@Introspected
19-
public record InitialProps(String title) {
19+
public record InitialProps(String title, int width, int height) {
2020
}
2121

2222
@View("App")
2323
@Get
2424
public HttpResponse<?> index() {
25-
return HttpResponse.ok(new InitialProps("Charts"));
25+
return HttpResponse.ok(new InitialProps("Recharts Examples", 500, 300));
2626
}
2727
}

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1 @@
1-
import React from 'react';
2-
import {hydrateRoot} from 'react-dom/client';
3-
4-
const pageComponentName = Micronaut.rootComponent;
5-
6-
import(`./components/${pageComponentName}.js`).then(module => {
7-
const PageComponent = module[pageComponentName] ?? module['default'];
8-
hydrateRoot(document, <PageComponent {...Micronaut.rootProps}/>)
9-
})
1+
/* Client-side code disabled to illustrate pure server-side rendering. */

‎graaljs/graaljs-micronaut-react-ssr/src/main/js/components/App.js‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React from 'react';
22
import SimpleLineChart from './SimpleLineChart';
3+
import SimpleAreaChart from "./SimpleAreaChart";
4+
import SimpleBarChart from "./SimpleBarChart";
5+
import VerticalComposedChart from "./VerticalComposedChart";
6+
import TwoLevelPieChart from "./TwoLevelPieChart";
7+
import SimpleTreemap from "./SimpleTreemap";
38

4-
function App({ title }) {
9+
function App({ title, width, height }) {
510
return (
611
<html>
712
<head>
@@ -10,8 +15,18 @@ function App({ title }) {
1015
</head>
1116
<body>
1217
<div>
13-
<h2>Line Chart</h2>
14-
<SimpleLineChart />
18+
<h2>SimpleLineChart</h2>
19+
<SimpleLineChart width={width} height={height}/>
20+
<h2>SimpleAreaChart</h2>
21+
<SimpleAreaChart width={width} height={height}/>
22+
<h2>SimpleBarChart</h2>
23+
<SimpleBarChart width={width} height={height}/>
24+
<h2>VerticalComposedChart</h2>
25+
<VerticalComposedChart width={width} height={height}/>
26+
<h2>TwoLevelPieChart</h2>
27+
<TwoLevelPieChart width={width} height={height}/>
28+
<h2>SimpleTreemap</h2>
29+
<SimpleTreemap width={width} height={height}/>
1530
</div>
1631
</body>
1732
</html>

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* Original Recharts example at: https://recharts.org/en-US/examples/SimpleAreaChart */
2+
3+
import React from 'react';
4+
import { AreaChart, Area, XAxis, YAxis, CartesianGrid } from 'recharts';
5+
6+
const data = [
7+
{
8+
name: 'Page A',
9+
uv: 4000,
10+
pv: 2400,
11+
amt: 2400,
12+
},
13+
{
14+
name: 'Page B',
15+
uv: 3000,
16+
pv: 1398,
17+
amt: 2210,
18+
},
19+
{
20+
name: 'Page C',
21+
uv: 2000,
22+
pv: 9800,
23+
amt: 2290,
24+
},
25+
{
26+
name: 'Page D',
27+
uv: 2780,
28+
pv: 3908,
29+
amt: 2000,
30+
},
31+
{
32+
name: 'Page E',
33+
uv: 1890,
34+
pv: 4800,
35+
amt: 2181,
36+
},
37+
{
38+
name: 'Page F',
39+
uv: 2390,
40+
pv: 3800,
41+
amt: 2500,
42+
},
43+
{
44+
name: 'Page G',
45+
uv: 3490,
46+
pv: 4300,
47+
amt: 2100,
48+
},
49+
];
50+
51+
const SimpleAreaChart = ({width, height}) => {
52+
return (
53+
<AreaChart
54+
width={width}
55+
height={height}
56+
data={data}
57+
margin={{
58+
top: 10,
59+
right: 30,
60+
left: 0,
61+
bottom: 0,
62+
}}
63+
>
64+
<CartesianGrid strokeDasharray="3 3" />
65+
<XAxis dataKey="name" />
66+
<YAxis />
67+
<Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
68+
</AreaChart>
69+
);
70+
};
71+
72+
export default SimpleAreaChart;
73+

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/* Original Recharts example at: https://recharts.org/en-US/examples/SimpleBarChart */
2+
3+
import React from 'react';
4+
import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Legend } from 'recharts';
5+
6+
const data = [
7+
{
8+
name: 'Page A',
9+
uv: 4000,
10+
pv: 2400,
11+
amt: 2400,
12+
},
13+
{
14+
name: 'Page B',
15+
uv: 3000,
16+
pv: 1398,
17+
amt: 2210,
18+
},
19+
{
20+
name: 'Page C',
21+
uv: 2000,
22+
pv: 9800,
23+
amt: 2290,
24+
},
25+
{
26+
name: 'Page D',
27+
uv: 2780,
28+
pv: 3908,
29+
amt: 2000,
30+
},
31+
{
32+
name: 'Page E',
33+
uv: 1890,
34+
pv: 4800,
35+
amt: 2181,
36+
},
37+
{
38+
name: 'Page F',
39+
uv: 2390,
40+
pv: 3800,
41+
amt: 2500,
42+
},
43+
{
44+
name: 'Page G',
45+
uv: 3490,
46+
pv: 4300,
47+
amt: 2100,
48+
},
49+
];
50+
51+
const SimpleBarChart = ({width, height}) => {
52+
return (
53+
<BarChart
54+
width={width}
55+
height={height}
56+
data={data}
57+
margin={{
58+
top: 5,
59+
right: 30,
60+
left: 20,
61+
bottom: 5,
62+
}}
63+
>
64+
<CartesianGrid strokeDasharray="3 3" />
65+
<XAxis dataKey="name" />
66+
<YAxis />
67+
<Legend />
68+
<Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue" />} />
69+
<Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple" />} />
70+
</BarChart>
71+
);
72+
};
73+
74+
export default SimpleBarChart;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
/* Original Recharts example at: https://recharts.org/en-US/examples/SimpleLineChart */
2+
13
import React from 'react';
2-
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';
4+
import { LineChart, Line, CartesianGrid, XAxis, YAxis } from 'recharts';
35

4-
// Original line chart example from Recharts:
5-
// https://recharts.org/en-US/examples/SimpleLineChart
66
const data = [
77
{ name: 'A', uv: 400, pv: 240 },
88
{ name: 'B', uv: 300, pv: 456 },
@@ -12,9 +12,9 @@ const data = [
1212
{ name: 'F', uv: 189, pv: 480 },
1313
];
1414

15-
function SimpleLineChart() {
15+
function SimpleLineChart({width, height}) {
1616
return (
17-
<LineChart width={500} height={300} data={data}>
17+
<LineChart width={width} height={height} data={data}>
1818
<XAxis dataKey="name" />
1919
<YAxis />
2020
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />

‎graaljs/graaljs-micronaut-react-ssr/src/main/js/components/SimpleTreemap.js‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* Original Recharts example at: https://recharts.org/en-US/examples/SimpleTreemap */
2+
3+
import React from 'react';
4+
import { Treemap } from 'recharts';
5+
6+
const data = [
7+
{
8+
name: 'axis',
9+
children: [
10+
{ name: 'Axes', size: 1302 },
11+
{ name: 'Axis', size: 24593 },
12+
{ name: 'AxisGridLine', size: 652 },
13+
{ name: 'AxisLabel', size: 636 },
14+
{ name: 'CartesianAxes', size: 6703 },
15+
],
16+
},
17+
{
18+
name: 'controls',
19+
children: [
20+
{ name: 'AnchorControl', size: 2138 },
21+
{ name: 'ClickControl', size: 3824 },
22+
{ name: 'Control', size: 1353 },
23+
{ name: 'ControlList', size: 4665 },
24+
{ name: 'DragControl', size: 2649 },
25+
{ name: 'ExpandControl', size: 2832 },
26+
{ name: 'HoverControl', size: 4896 },
27+
{ name: 'IControl', size: 763 },
28+
{ name: 'PanZoomControl', size: 5222 },
29+
{ name: 'SelectionControl', size: 7862 },
30+
{ name: 'TooltipControl', size: 8435 },
31+
],
32+
},
33+
{
34+
name: 'data',
35+
children: [
36+
{ name: 'Data', size: 20544 },
37+
{ name: 'DataList', size: 19788 },
38+
{ name: 'DataSprite', size: 10349 },
39+
{ name: 'EdgeSprite', size: 3301 },
40+
{ name: 'NodeSprite', size: 19382 },
41+
{
42+
name: 'render',
43+
children: [
44+
{ name: 'ArrowType', size: 698 },
45+
{ name: 'EdgeRenderer', size: 5569 },
46+
{ name: 'IRenderer', size: 353 },
47+
{ name: 'ShapeRenderer', size: 2247 },
48+
],
49+
},
50+
{ name: 'ScaleBinding', size: 11275 },
51+
{ name: 'Tree', size: 7147 },
52+
{ name: 'TreeBuilder', size: 9930 },
53+
],
54+
},
55+
{
56+
name: 'events',
57+
children: [
58+
{ name: 'DataEvent', size: 7313 },
59+
{ name: 'SelectionEvent', size: 6880 },
60+
{ name: 'TooltipEvent', size: 3701 },
61+
{ name: 'VisualizationEvent', size: 2117 },
62+
],
63+
},
64+
{
65+
name: 'legend',
66+
children: [
67+
{ name: 'Legend', size: 20859 },
68+
{ name: 'LegendItem', size: 4614 },
69+
{ name: 'LegendRange', size: 10530 },
70+
],
71+
},
72+
{
73+
name: 'operator',
74+
children: [
75+
{
76+
name: 'distortion',
77+
children: [
78+
{ name: 'BifocalDistortion', size: 4461 },
79+
{ name: 'Distortion', size: 6314 },
80+
{ name: 'FisheyeDistortion', size: 3444 },
81+
],
82+
},
83+
{
84+
name: 'encoder',
85+
children: [
86+
{ name: 'ColorEncoder', size: 3179 },
87+
{ name: 'Encoder', size: 4060 },
88+
{ name: 'PropertyEncoder', size: 4138 },
89+
{ name: 'ShapeEncoder', size: 1690 },
90+
{ name: 'SizeEncoder', size: 1830 },
91+
],
92+
},
93+
{
94+
name: 'filter',
95+
children: [
96+
{ name: 'FisheyeTreeFilter', size: 5219 },
97+
{ name: 'GraphDistanceFilter', size: 3165 },
98+
{ name: 'VisibilityFilter', size: 3509 },
99+
],
100+
},
101+
{ name: 'IOperator', size: 1286 },
102+
{
103+
name: 'label',
104+
children: [
105+
{ name: 'Labeler', size: 9956 },
106+
{ name: 'RadialLabeler', size: 3899 },
107+
{ name: 'StackedAreaLabeler', size: 3202 },
108+
],
109+
},
110+
{
111+
name: 'layout',
112+
children: [
113+
{ name: 'AxisLayout', size: 6725 },
114+
{ name: 'BundledEdgeRouter', size: 3727 },
115+
{ name: 'CircleLayout', size: 9317 },
116+
{ name: 'CirclePackingLayout', size: 12003 },
117+
{ name: 'DendrogramLayout', size: 4853 },
118+
{ name: 'ForceDirectedLayout', size: 8411 },
119+
{ name: 'IcicleTreeLayout', size: 4864 },
120+
{ name: 'IndentedTreeLayout', size: 3174 },
121+
{ name: 'Layout', size: 7881 },
122+
{ name: 'NodeLinkTreeLayout', size: 12870 },
123+
{ name: 'PieLayout', size: 2728 },
124+
{ name: 'RadialTreeLayout', size: 12348 },
125+
{ name: 'RandomLayout', size: 870 },
126+
{ name: 'StackedAreaLayout', size: 9121 },
127+
{ name: 'TreeMapLayout', size: 9191 },
128+
],
129+
},
130+
{ name: 'Operator', size: 2490 },
131+
{ name: 'OperatorList', size: 5248 },
132+
{ name: 'OperatorSequence', size: 4190 },
133+
{ name: 'OperatorSwitch', size: 2581 },
134+
{ name: 'SortOperator', size: 2023 },
135+
],
136+
},
137+
];
138+
139+
const SimpleTreemap = ({width, height}) => {
140+
return (
141+
<Treemap width={width} height={height} data={data} dataKey="size" aspectRatio={4 / 3} stroke="#fff" fill="#8884d8" />
142+
);
143+
};
144+
145+
export default SimpleTreemap;

0 commit comments

Comments
 (0)