Feat/cookbook/charts

[AndrejNikolicEq]

Why

To test and check if cart.js is working correctly in CI
https://github.com/equinor/fusion/issues/566

Check off the following:

• Confirm that I checked changes to branch which I am merging into.

  • I have validated included files
  • My code does not generate new linting warnings
  • My PR is not a duplicate, check existing pr`s

• Confirm that the I have completed the self-review checklist.

• Confirm that my changes meet our code of conduct.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2b98d69

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

Biome

---

[Biome] _{reported by reviewdog 🐶}

fusion-framework/cookbooks/app-react-charts/src/pages/LineChart.tsx

Lines 65 to 70 in bf088be

	return (
	<div>
	<h2>📈 Line Chart Example</h2>
	<Line data={data} options={options} />
	</div>
	);

---

[Biome] _{reported by reviewdog 🐶}

fusion-framework/cookbooks/app-react-charts/src/routes.tsx

Lines 1 to 5 in bf088be

	import { Outlet, type RouteObject } from "react-router-dom";
	import Navigation from "./components/Navigation";
	import { BarChart } from "./pages/BarChart";
	import { LineChart } from "./pages/LineChart";
	import HomePage from "./pages/HomePage";

---

[Biome] _{reported by reviewdog 🐶}

fusion-framework/cookbooks/app-react-charts/src/routes.tsx

Lines 8 to 15 in bf088be

	return (
	<div style={{ display: "flex", gap: 20 }}>
	<Navigation />
	<div style={{ flexGrow: 1 }}>
	<Outlet />
	</div>
	</div>
	);

---

[Biome] _{reported by reviewdog 🐶}

fusion-framework/cookbooks/app-react-charts/src/routes.tsx

Lines 19 to 36 in bf088be

	{
	path: "/",
	element: <Root />,
	children: [
	{
	index: true,
	Component: HomePage
	},
	{
	path: "bar-chart/*",
	Component: BarChart
	},
	{
	path: "line-chart/*",
	Component: LineChart
	}
	]
	}

[Copilot]

Pull Request Overview

This PR introduces a React-based charts cookbook to verify Chart.js integration in CI, adding routing, navigation, and demo pages.

• Adds routes and a layout component for chart pages
• Implements Bar, Line, and Pie chart examples using react-chartjs-2
• Configures app entrypoint, Fusion framework integration, and a minimal README

Reviewed Changes

Copilot reviewed 12 out of 16 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
cookbooks/app-react-charts/src/routes.tsx	Defines root and child routes for Home, BarChart, and LineChart
cookbooks/app-react-charts/src/pages/LineChart.tsx	Implements LineChart example and registers ChartJS components
cookbooks/app-react-charts/src/pages/BarChart.tsx	Implements BarChart example with EDS icon and ChartJS registration
cookbooks/app-react-charts/src/pages/HomePage.tsx	Adds HomePage with Bar and Pie chart examples
cookbooks/app-react-charts/src/components/Navigation.tsx	Adds sidebar navigation linking to chart routes
cookbooks/app-react-charts/src/index.ts	Bootstraps React app within Fusion framework
cookbooks/app-react-charts/src/config.ts	Configures Fusion modules (navigation) and logging callbacks
cookbooks/app-react-charts/src/Router.tsx	Sets up React RouterProvider with Fusion’s useRouter
cookbooks/app-react-charts/src/App.tsx	Renders the router component
cookbooks/app-react-charts/app.manifest.config.ts	Defines the application manifest
cookbooks/app-react-charts/README.md	Adds initial README header

Files not reviewed (4)

• cookbooks/app-react-charts/package.json: Language not supported
• cookbooks/app-react-charts/tsconfig.docker.json: Language not supported
• cookbooks/app-react-charts/tsconfig.json: Language not supported
• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (3)

cookbooks/app-react-charts/src/pages/LineChart.tsx:21

• The new LineChart component lacks test coverage; consider adding unit or snapshot tests to validate its rendering and data handling.

export const LineChart = () => {

cookbooks/app-react-charts/src/pages/BarChart.tsx:15

• The BarChart component is untested; adding tests would help catch regressions in rendering or data changes.

export const BarChart = () => {

cookbooks/app-react-charts/src/pages/HomePage.tsx:23

• HomePage displays two charts but has no associated tests; consider adding tests to verify layout and data presence.

const HomePage = () => {

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	0.61%	2933 / 478089
🔵	Statements	0.61%	2933 / 478089
🔵	Functions	29.46%	297 / 1008
🔵	Branches	50%	637 / 1274

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
cookbooks/app-react-charts/app.manifest.config.ts	0%	0%	0%	0%	1-8
cookbooks/app-react-charts/src/App.tsx	0%	0%	0%	0%	1-5
cookbooks/app-react-charts/src/Router.tsx	0%	0%	0%	0%	1-9
cookbooks/app-react-charts/src/config.ts	0%	0%	0%	0%	1-20
cookbooks/app-react-charts/src/index.ts	0%	0%	0%	0%	1-30
cookbooks/app-react-charts/src/routes.tsx	0%	0%	0%	0%	1-39
cookbooks/app-react-charts/src/components/Navigation.tsx	0%	0%	0%	0%	1-52
cookbooks/app-react-charts/src/pages/BarChart.tsx	0%	0%	0%	0%	1-53
cookbooks/app-react-charts/src/pages/HomePage.tsx	0%	0%	0%	0%	1-57
cookbooks/app-react-charts/src/pages/LineChart.tsx	0%	0%	0%	0%	1-66

Generated in workflow #9418 for commit 2b98d69 by the Vitest Coverage Report Action

[Copilot]

Pull Request Overview

This PR adds a new React cookbook for Chart.js examples, including Bar, Line, and Pie charts along with the necessary routing, configuration, manifest, and navigation components to integrate these examples into the application.

• Adds new chart pages (BarChart, LineChart, HomePage) with chart examples.
• Configures app routing, navigation, and application manifest.
• Sets up app bootstrap code (index, Router, App) for the cookbook.

Reviewed Changes

Copilot reviewed 12 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
cookbooks/app-react-charts/src/routes.tsx	Defines routing for chart pages using a custom Root layout.
cookbooks/app-react-charts/src/pages/LineChart.tsx	Implements an example Line Chart using react-chartjs-2.
cookbooks/app-react-charts/src/pages/HomePage.tsx	Provides Bar and Pie chart examples on the home page.
cookbooks/app-react-charts/src/pages/BarChart.tsx	Implements an example Bar Chart with an icon in the header.
cookbooks/app-react-charts/src/index.ts	Bootstraps the application rendering logic.
cookbooks/app-react-charts/src/config.ts	Sets up application configuration with callbacks.
cookbooks/app-react-charts/src/components/Navigation.tsx	Implements sidebar navigation for the chart examples.
cookbooks/app-react-charts/src/Router.tsx	Provides router integration using a custom useRouter hook.
cookbooks/app-react-charts/src/App.tsx	Wraps the router inside the main app component.
cookbooks/app-react-charts/app.manifest.config.ts	Defines the app manifest for the cookbook.
cookbooks/app-react-charts/README.md	Describes the cookbook purpose and examples.
cookbooks/app-react-charts/CHANGELOG.md	Contains a simple change log file.

Files not reviewed (4)

• cookbooks/app-react-charts/package.json: Language not supported
• cookbooks/app-react-charts/tsconfig.docker.json: Language not supported
• cookbooks/app-react-charts/tsconfig.json: Language not supported
• pnpm-lock.yaml: Language not supported