refactor: Add chart in demo

Author: d3xter666

internal/npm-integration-poc/consolidated-app/webapp/controller/Main.controller.js

@@ -27,6 +27,11 @@ sap.ui.define([
 			console.log("   Available methods:", Object.keys(validator).slice(0, 10).join(", "), "...");
 
 			console.log("✅ Chart.js loaded:", chartjs);
+
+			// Initialize chart after view is rendered
+			this.getView().addEventDelegate({
+				onAfterRendering: this._initChart.bind(this)
+			});
 		},
 
 		onValidate: function() {
@@ -94,6 +99,67 @@ sap.ui.define([
 			MessageToast.show("Form reset");
 		},
 
+		_initChart: function() {
+			// Only init once
+			if (this._chartInitialized) return;
+			this._chartInitialized = true;
+
+			const canvas = document.getElementById("myChart");
+			if (!canvas) {
+				console.error("Chart canvas not found");
+				return;
+			}
+
+			// Chart.js v4+ requires explicit registration of components
+			const {Chart, BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend} = chartjs;
+			Chart.register(BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend);
+
+			// Generate random data
+			const labels = ["January", "February", "March", "April", "May", "June"];
+			const randomData = labels.map(() => Math.floor(Math.random() * 100));
+			const randomData2 = labels.map(() => Math.floor(Math.random() * 100));
+
+			// Create chart using Chart.js
+			this._chart = new Chart(canvas, {
+				type: "bar",
+				data: {
+					labels: labels,
+					datasets: [
+						{
+							label: "Sales 2025",
+							data: randomData,
+							backgroundColor: "rgba(54, 162, 235, 0.6)",
+							borderColor: "rgba(54, 162, 235, 1)",
+							borderWidth: 1
+						},
+						{
+							label: "Sales 2026",
+							data: randomData2,
+							backgroundColor: "rgba(255, 99, 132, 0.6)",
+							borderColor: "rgba(255, 99, 132, 1)",
+							borderWidth: 1
+						}
+					]
+				},
+				options: {
+					responsive: true,
+					plugins: {
+						title: {
+							display: true,
+							text: "Random Sales Data (Chart.js via NPM)"
+						}
+					},
+					scales: {
+						y: {
+							beginAtZero: true
+						}
+					}
+				}
+			});
+
+			console.log("✅ Chart.js chart rendered successfully");
+		},
+
 		onWebComponentClick: function() {
 			// Toggle the bundled MessageStrip visibility
 			const oMessageStrip = this.byId("bundledMessageStrip");

internal/npm-integration-poc/consolidated-app/webapp/view/Main.view.xml

@@ -6,6 +6,7 @@
 	xmlns:f="sap.ui.layout.form"
 	xmlns:webc="sap.ui.webc.main"
 	xmlns:wcgen="com.example.app.thirdparty.@ui5.webcomponents.dist"
+	xmlns:core="sap.ui.core"
 	displayBlock="true">
 
 	<App id="app">
@@ -92,6 +93,16 @@
 					<webc:Button id="wcButton" design="Emphasized" icon="activate" click="onWebComponentClick" text="Web Component Validate" />
 				</Toolbar>
 
+				<!-- Chart.js Demo Panel -->
+				<Panel
+					id="chartPanel"
+					headerText="Chart.js Demo (Random Data)"
+					class="sapUiSmallMarginTop">
+					<content>
+						<core:HTML id="chartContainer" content="&lt;canvas id='myChart' width='400' height='200'&gt;&lt;/canvas&gt;" />
+					</content>
+				</Panel>
+				
 				<!-- Result Panel -->
 				<Panel
 					id="resultPanel"