+
+ );
+}
+
+export default BarChartSample;
diff --git a/projects/charts/bar-chart/src/main.tsx b/projects/charts/bar-chart/src/main.tsx
new file mode 100644
index 0000000..2c35b4a
--- /dev/null
+++ b/projects/charts/bar-chart/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import BarChartSample from "./BarChartSample.tsx";
+
+createRoot(document.getElementById("root")!).render(
+ Highest Grossing Movie Franchises
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ColumnChartSample;
diff --git a/projects/charts/column-chart/src/main.tsx b/projects/charts/column-chart/src/main.tsx
new file mode 100644
index 0000000..2711930
--- /dev/null
+++ b/projects/charts/column-chart/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import ColumnChartSample from "./ColumnChartSample.tsx";
+
+createRoot(document.getElementById("root")!).render(
+ Average Max Temperature
+
+
+
+
+
+
+ );
+}
+
+export default LineChartSample;
diff --git a/projects/charts/line-chart/src/main.tsx b/projects/charts/line-chart/src/main.tsx
new file mode 100644
index 0000000..b6f2f5e
--- /dev/null
+++ b/projects/charts/line-chart/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import LineChartSample from "./LineChartSample.tsx";
+
+createRoot(document.getElementById("root")!).render(
+ Renewable Electricity Generated
+
+
+
+
+
+
+
+ {/* First Pie Chart */}
+
+ );
+}
+
+export default PieChartSample;
diff --git a/projects/charts/pie-chart/src/main.tsx b/projects/charts/pie-chart/src/main.tsx
new file mode 100644
index 0000000..7571cb8
--- /dev/null
+++ b/projects/charts/pie-chart/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import PieChartSample from "./PieChartSample";
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+ {/* Second Pie Chart */}
+ PIE CHART
+
+ Global Electricity Demand by Energy Use
+
+
+
+
+
+
+
+ PIE CHART EXPLOSION
+
+ Global Electricity Demand by Energy Use
+
+
+
+
+
+
+
+ );
+}
+
+export default PolarChartSample;
diff --git a/projects/charts/polar-chart/src/main.tsx b/projects/charts/polar-chart/src/main.tsx
new file mode 100644
index 0000000..13e8c01
--- /dev/null
+++ b/projects/charts/polar-chart/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import PolarChartSample from "./PolarChartSample.tsx";
+
+createRoot(document.getElementById("root")!).render(
+ Wind Speed vs Boat Speed
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default StepChartSample;
diff --git a/projects/charts/step-chart/src/main.tsx b/projects/charts/step-chart/src/main.tsx
new file mode 100644
index 0000000..3da14b9
--- /dev/null
+++ b/projects/charts/step-chart/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import StepChartSample from "./StepChartSample.tsx";
+
+createRoot(document.getElementById("root")!).render(
+ Renewable Electricity Generated
+
+
+
+
+
+
+
- // [col.field]})
${col.field}
- //
- // `;
+ col.headerTemplate = () => {
+ return (
+ html`
+ ![]()
+ ${col.field}
+
`
+ );
+ };
}
}
diff --git a/src/app/app-routes.tsx b/src/app/app-routes.tsx
index cb47a96..bbf0d20 100644
--- a/src/app/app-routes.tsx
+++ b/src/app/app-routes.tsx
@@ -1,26 +1,56 @@
-import { redirect, RouteObject } from 'react-router-dom';
-import ERPHGridView from './views/erp-hgrid/erp-hgrid-view';
-import HRPortalView from './views/hr-portal/hr-portal-view';
-import FinanceView from './views/finance/finance-view';
-import SalesView from './views/sales/sales-view';
-import FleetManagementView from './views/fleet-management/fleet-management-view';
-import HomeView from './views/home/home-view';
+import { redirect, RouteObject } from "react-router-dom";
+import ERPHGridView from "./views/erp-hgrid/erp-hgrid-view";
+import HRPortalView from "./views/hr-portal/hr-portal-view";
+import FinanceView from "./views/finance/finance-view";
+import SalesView from "./views/sales/sales-view";
+import FleetManagementView from "./views/fleet-management/fleet-management-view";
+import HomeView from "./views/home/home-view";
+import ColumnChartView from "./views/charts/column-chart/column-chart-view";
+import BarChartView from "./views/charts/bar-chart/bar-chart-view";
+import LineChartView from "./views/charts/line-chart/line-chart-view";
+import PieChartView from "./views/charts/pie-chart/pie-chart-view";
+import StepChartView from "./views/charts/step-chart/step-chart-view";
+import PolarChartView from "./views/charts/polar-chart/polar-chart-view";
export const routes: RouteObject[] = [
- { index: true, loader: () => redirect('home') },
- { path: 'home', element:
{!isFullscreen && (
- {tabs.map(({ key }) => (
-
- {({ isActive }) => (
-
- ))}
+ {isChartsSection
+ ? activeTabs.map(({ key }) => (
+
+ {({ isActive }) => (
+
+ ))
+ : activeTabs.map(({ key }) => (
+
+ {({ isActive }) => (
+
+ ))}
)}