Skip to content
Snippets Groups Projects
Commit 8b0a6bc4 authored by Bjarke Madsen's avatar Bjarke Madsen
Browse files

finish refactor of ScrollableMatrix

parent 5cb575fd
No related branches found
No related tags found
1 merge request!134Refactor
This commit is part of merge request !134. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
compendium-frontend/src/components/ScrollableMatrix.tsx
+ 49
− 65
View file @ 8b0a6bc4
......@@ -28,32 +28,28 @@ export function ScrollableMatrix({ dataLookup, rowInfo, categoryLookup, isTickIc
}
const categoryContainers = Object.entries(categoryLookup).map(([categoryKey, categoryTitle]) => {
let rows;
rows = Object.entries(rowInfo).map(([title, field]) => {
const rows = Object.entries(rowInfo).map(([title, field]) => {
const dataForRow: (string | number | React.JSX.Element)[] = [];
dataLookup.forEach((nrenData) => {
nrenData.forEach((yearData) => {
const valuesForCategory = yearData.get(categoryKey);
let fieldValue;
if (valuesForCategory) {
const _value = valuesForCategory[field];
if (_value == null) {
fieldValue = null;
} else {
// it's an object with a single value, so use the key directly
fieldValue = Object.values(_value)[0];
}
const value = fieldValue != null && isTickIcon ? TICK_ICON : fieldValue;
dataForRow.push(value);
if (!valuesForCategory) return;
let fieldValue = valuesForCategory[field];
if (fieldValue != null) {
// it's an object with a single value, so use the value directly
fieldValue = Object.values(fieldValue)[0];
}
const value = fieldValue != null && isTickIcon ? TICK_ICON : fieldValue;
dataForRow.push(value);
})
});
if (dataForRow.every((value) => value === null)) {
if (!dataForRow.length) {
// don't show the row if there's no data
return null;
}
return (<tr key={title}>
......@@ -64,9 +60,21 @@ export function ScrollableMatrix({ dataLookup, rowInfo, categoryLookup, isTickIc
</tr>)
});
if (rows && rows.every((row) => row === null)) {
rows = null;
}
const nrenYears: { [key: string]: number[] } = Array.from(dataLookup.entries()).reduce((nrenYears, [nren, nrenData]) => {
Array.from(nrenData.entries()).forEach(([year, yearData]) => {
const has_category = yearData.get(categoryKey)
if (has_category) {
if (!nrenYears[nren]) {
nrenYears[nren] = []
}
nrenYears[nren].push(year)
}
})
return nrenYears;
}, {});
const categoryContent = (
<CollapsibleBox title={categoryTitle} startCollapsed key={categoryKey}>
......@@ -75,53 +83,29 @@ export function ScrollableMatrix({ dataLookup, rowInfo, categoryLookup, isTickIc
<div className="table-responsive">
<Table className="matrix-table" bordered>
<thead>
<tr>
<th className="fixed-column"></th>
{Array.from(dataLookup.entries()).map(([nren, nrenData]) => {
const yearsWithData: number[] = []
Array.from(nrenData.entries()).forEach(([year, yearData]) => {
const has_category = yearData.get(categoryKey)
if (has_category) {
yearsWithData.push(year)
}
})
if (!yearsWithData.length) {
return null
}
return (
<th key={nren} colSpan={yearsWithData.length} style={{ width: `${yearsWithData.length * CELL_SIZE}rem` }}>
{nren}
</th>
)
})}
</tr>
<tr>
<th className="fixed-column"></th>
{Array.from(dataLookup.values()).map((nrenData) => {
const yearsWithData: number[] = []
Array.from(nrenData.entries()).forEach(([year, yearData]) => {
const has_category = yearData.get(categoryKey)
if (has_category) {
yearsWithData.push(year)
}
})
if (!yearsWithData.length) {
return null
}
return (
yearsWithData.map((year) => (
<th key={year}>{year}</th>
))
)
}
)}
</tr>
{(() => {
const nrenEntries = Object.entries(nrenYears);
return (
<>
<tr>
<th className="fixed-column"></th>
{nrenEntries.map(([nren, years]) => (
<th key={nren} colSpan={years.length} style={{ width: `${years.length * CELL_SIZE}rem` }}>
{nren}
</th>
))}
</tr>
<tr>
<th className="fixed-column"></th>
{nrenEntries.flatMap(([nren, years]) =>
years.map((year) => (
<th key={`${nren}-${year}`}>{year}</th>
))
)}
</tr>
</>
);
})()}
</thead>
<tbody>
{rows}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment