mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
Fixed the process of adding new column to UI
This commit is contained in:
Khalim Conn-Kowlessar
parent
4346660a35
commit
3579c83f5e
2 changed files with 171 additions and 56 deletions
|
|
@ -19,10 +19,19 @@ import {
|
|||
import SelectComparisonModal from "./SelectComparisonModal";
|
||||
import EpcBarChart from "./EpcBarChart";
|
||||
|
||||
interface DataItem {
|
||||
interface ChartData {
|
||||
name: string;
|
||||
[key: string]: number | string; // Allows for any number of properties with numeric values, plus the name
|
||||
}
|
||||
|
||||
interface Scenario {
|
||||
scenarioName: string; // E.g., "today", "baseline", or dynamically named scenarios
|
||||
data: ChartData[] | string; // This could be an array of chart data or a simple string if applicable
|
||||
}
|
||||
|
||||
export interface DataItem {
|
||||
title: string;
|
||||
today: string;
|
||||
summary: string;
|
||||
scenarios: Scenario[];
|
||||
}
|
||||
|
||||
const SummaryTable = ({
|
||||
|
|
@ -34,64 +43,106 @@ const SummaryTable = ({
|
|||
data: DataItem[];
|
||||
userPortfolios: { name: string; id: bigint }[];
|
||||
}) => {
|
||||
const initialchartdata = [
|
||||
{ name: "G", G: 2488 },
|
||||
{ name: "F", F: 1445 },
|
||||
{ name: "E", E: 743 },
|
||||
{ name: "D", D: 281 },
|
||||
{ name: "C", C: 251 },
|
||||
{ name: "B", B: 232 },
|
||||
{ name: "A", A: 98 },
|
||||
];
|
||||
const initialColumnSetup = () => {
|
||||
const initialColumns: ColumnDef<DataItem>[] = [
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: () => null,
|
||||
cell: (info) => <b>{info.getValue() as string}</b>,
|
||||
},
|
||||
];
|
||||
|
||||
// Initial columns
|
||||
// Initial columns
|
||||
const [columns, setColumns] = useState<ColumnDef<DataItem>[]>([
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: () => null,
|
||||
cell: (info) => <b>{info.getValue() as string}</b>,
|
||||
},
|
||||
{
|
||||
accessorKey: "today",
|
||||
header: () => <span>Today</span>,
|
||||
cell: (info) => {
|
||||
// Check if the title is "EPCs" and render the bar chart
|
||||
if (info.row.original.title === "EPCs") {
|
||||
return <EpcBarChart chartdata={initialchartdata} />;
|
||||
}
|
||||
// Otherwise, just return the text
|
||||
return <span>{info.getValue() as string}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "summary",
|
||||
header: () => <span>{portfolioName}</span>,
|
||||
cell: (info) => {
|
||||
return <span>{info.getValue() as string}</span>;
|
||||
},
|
||||
},
|
||||
]);
|
||||
// Automatically add columns for each predefined scenario
|
||||
// TODO: Retrieve this from the data!
|
||||
const predefinedScenarios = ["Today", "Projected"]; // Extend this list based on your initial scenario setup
|
||||
predefinedScenarios.forEach((scenarioName) => {
|
||||
initialColumns.push({
|
||||
id: scenarioName,
|
||||
header: () => <span>{scenarioName}</span>,
|
||||
accessorFn: (row) => {
|
||||
const scenarioData = row.scenarios.find(
|
||||
(s) => s.scenarioName === scenarioName
|
||||
)?.data;
|
||||
return scenarioData;
|
||||
},
|
||||
cell: (info) => {
|
||||
const value = info.getValue();
|
||||
// Render chart if data is array and matches the chart data structure, otherwise render as text
|
||||
return Array.isArray(value) && value[0]?.name ? (
|
||||
<EpcBarChart chartdata={value as ChartData[]} />
|
||||
) : (
|
||||
<span>{value as String}</span>
|
||||
);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return initialColumns;
|
||||
};
|
||||
|
||||
const [columns, setColumns] =
|
||||
useState<ColumnDef<DataItem>[]>(initialColumnSetup);
|
||||
|
||||
const [managedData, setManagedData] = useState<DataItem[]>(data || []);
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
data: managedData,
|
||||
columns: columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
const addColumn = (columnName: string) => {
|
||||
// Example of dynamically fetched data for a new scenario
|
||||
const fetchedScenarioData = {
|
||||
EPCs: [
|
||||
{ name: "G", G: Math.random() * 1000 },
|
||||
{ name: "F", F: Math.random() * 1000 },
|
||||
{ name: "E", E: Math.random() * 1000 },
|
||||
{ name: "D", D: Math.random() * 1000 },
|
||||
{ name: "C", C: Math.random() * 1000 },
|
||||
{ name: "B", B: Math.random() * 1000 },
|
||||
{ name: "A", A: Math.random() * 1000 },
|
||||
],
|
||||
"# Units": (Math.random() * 10000).toFixed(0),
|
||||
"Co2/unit": (Math.random() * 100).toFixed(0) + "t",
|
||||
"Energy bills/unit": "£" + (Math.random() * 2000).toFixed(0),
|
||||
Cost: "£" + (Math.random() * 50000).toFixed(0),
|
||||
"£ per CO2 reduction": "£" + (Math.random() * 100).toFixed(0),
|
||||
"£ per SAP point": "£" + (Math.random() * 100).toFixed(0),
|
||||
};
|
||||
|
||||
// Map over existing data and append new scenario data where applicable
|
||||
const updatedData = managedData.map((item) => ({
|
||||
...item,
|
||||
scenarios: [
|
||||
...item.scenarios,
|
||||
{
|
||||
scenarioName: columnName,
|
||||
data: fetchedScenarioData[item.title] || "No data available",
|
||||
},
|
||||
],
|
||||
}));
|
||||
|
||||
setManagedData(updatedData);
|
||||
|
||||
// Create a new column dynamically based on the scenarioName
|
||||
const newColumn: ColumnDef<DataItem> = {
|
||||
accessorKey: columnName.toLowerCase().replace(/\s+/g, "_"),
|
||||
accessorFn: (row) =>
|
||||
row.scenarios.find((s) => s.scenarioName === columnName)?.data,
|
||||
id: columnName.toLowerCase().replace(/\s+/g, "_"),
|
||||
header: () => <span>{columnName}</span>,
|
||||
cell: ({ getValue }: CellContext<DataItem, unknown>) => {
|
||||
const value = getValue();
|
||||
return (
|
||||
<span>{typeof value === "string" ? value : "Invalid data"}</span>
|
||||
cell: (info) => {
|
||||
const value = info.getValue();
|
||||
return Array.isArray(value) ? (
|
||||
<EpcBarChart chartdata={value as ChartData[]} />
|
||||
) : (
|
||||
<span>{value as String}</span>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
setColumns((oldColumns) => [...oldColumns, newColumn]);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import SummaryTable from "@/app/components/portfolio/summary/SummaryTable";
|
||||
import SummaryTable, {
|
||||
DataItem,
|
||||
} from "@/app/components/portfolio/summary/SummaryTable";
|
||||
import { getPortfolio, getUserPortfolios } from "../../utils";
|
||||
import { getSession } from "next-auth/react";
|
||||
|
||||
export default async function PortfolioSummary({
|
||||
params,
|
||||
|
|
@ -14,16 +15,79 @@ export default async function PortfolioSummary({
|
|||
const userPortfolios = await getUserPortfolios(portfolioId);
|
||||
|
||||
// Dummy data for rows
|
||||
const data = [
|
||||
|
||||
const data: DataItem[] = [
|
||||
{
|
||||
title: "EPCs",
|
||||
today: "Initial Bar Chart Here",
|
||||
summary: "Comparison Bar Chart",
|
||||
scenarios: [
|
||||
{
|
||||
scenarioName: "Today",
|
||||
data: [
|
||||
{ name: "G", G: 2488 },
|
||||
{ name: "F", F: 1445 },
|
||||
{ name: "E", E: 743 },
|
||||
{ name: "D", D: 281 },
|
||||
{ name: "C", C: 251 },
|
||||
{ name: "B", B: 0 },
|
||||
{ name: "A", A: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
scenarioName: "Projected",
|
||||
data: [
|
||||
{ name: "G", G: 0 },
|
||||
{ name: "F", F: 0 },
|
||||
{ name: "E", E: 0 },
|
||||
{ name: "D", D: 0 },
|
||||
{ name: "C", C: 5000 },
|
||||
{ name: "B", B: 0 },
|
||||
{ name: "A", A: 0 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "# Units",
|
||||
scenarios: [
|
||||
{ scenarioName: "Today", data: "5000" },
|
||||
{ scenarioName: "Projected", data: "" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Co2/unit",
|
||||
scenarios: [
|
||||
{ scenarioName: "Today", data: "100t" },
|
||||
{ scenarioName: "Projected", data: "50t" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Energy bills/unit",
|
||||
scenarios: [
|
||||
{ scenarioName: "Today", data: "£2000" },
|
||||
{ scenarioName: "Projected", data: "£1,500" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Cost",
|
||||
scenarios: [
|
||||
{ scenarioName: "Today", data: "" },
|
||||
{ scenarioName: "Projected", data: "£32,412" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "£ per CO2 reduction",
|
||||
scenarios: [
|
||||
{ scenarioName: "Today", data: "" },
|
||||
{ scenarioName: "Projected", data: "£50" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "£ per SAP point",
|
||||
scenarios: [
|
||||
{ scenarioName: "Today", data: "" },
|
||||
{ scenarioName: "Projected", data: "£30" },
|
||||
],
|
||||
},
|
||||
{ title: "Total Co2", today: "100t", summary: "50t" },
|
||||
{ title: "Energy bills", today: "£20,000", summary: "£10,000" },
|
||||
{ title: "Cost", today: "", summary: "£32,412" },
|
||||
{ title: "Cost per CO2 reduction", today: "", summary: "£50" },
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue