Final changes to the Table

statisticsnorway · Sep 5, 2024 · 92f0e0b · 92f0e0b
1 parent 6195931
commit 92f0e0b
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 27 deletions.
diff --git a/src/pages/Components/ComponentsInfo/TableInfoContent.jsx b/src/pages/Components/ComponentsInfo/TableInfoContent.jsx
@@ -15,11 +15,15 @@ const tableData = [
 		header: 'Museer og samlinger totalt',
 		data: { 2020: '102', 2021: '101', 2022: '104' },
 	},
+	{
+		id: 'empty',
+		header: '.',
+		data: { 2020: '', 2021: '', 2022: '' },
+	},
 	{
 		id: 'besok_totalt',
 		header: 'Besøk totalt',
 		data: { 2020: '5 134 293', 2021: '6 485 173', 2022: '10 321 374' },
-		bold: true,
 	},
 	{
 		id: 'enkeltbesok',
@@ -36,6 +40,11 @@ const tableData = [
 		header: 'Betalende besøkende',
 		data: { 2020: '2 391 962', 2021: '2 774 376', 2022: '5 654 919' },
 	},
+	{
+		id: 'empty2',
+		header: '.',
+		data: { 2020: '', 2021: '', 2022: '' },
+	},
 	{
 		id: 'arsverk',
 		header: 'Årsverk',
@@ -56,34 +65,51 @@ const tableData = [
 const TableHeaderRow = ({ years }) => (
 	<TableHead>
 		<TableRow>
-			<TableCell type="th" colSpan={1} />
+			<TableCell type="th" rowSpan={2} colSpan={1} />
 			<TableCell type="th" colSpan={years.length} align="center">
 				Antall
 			</TableCell>
 		</TableRow>
 		<TableRow>
-			<TableCell type="th">Museer og samlinger totalt</TableCell>
 			{years.map(year => (
-				<TableCell type="th" align="right" key={`year_${year}`}>
+				<TableCell
+					type="th"
+					align="right"
+					key={`year_${year}`}
+					className="align-right"
+				>
 					{year}
 				</TableCell>
 			))}
 		</TableRow>
 	</TableHead>
 );
 
-const TableBodyRows = ({ rowsData, years, boldStyle }) => (
+const getClassName = id => {
+	if (id === 'museer_totalt' || id === 'besok_totalt') {
+		return 'bold-override';
+	}
+	if (id === 'enkeltbesok' || id === 'gruppebesok') {
+		return 'level1';
+	}
+	if (id === 'empty' || id === 'empty2') {
+		return 'hidden-content-override';
+	}
+	return '';
+};
+
+const TableBodyRows = ({ rowsData, years }) => (
 	<TableBody>
-		{rowsData.map(({ id, header, data, bold }) => (
+		{rowsData.map(({ id, header, data }, rowIndex) => (
 			<TableRow key={id}>
-				<TableCell type="th" scope="row">
-					{header}
+				<TableCell type="th" scope="row" className={getClassName(id)}>
+					{header} {rowIndex === 0 && <sup>1</sup>}
 				</TableCell>
 				{years.map(year => (
 					<TableCell
 						align="right"
-						style={bold ? boldStyle : {}}
 						key={`${id}_${year}`}
+						className={getClassName(id) || 'align-right'}
 					>
 						{data[year]}
 					</TableCell>
@@ -95,24 +121,37 @@ const TableBodyRows = ({ rowsData, years, boldStyle }) => (
 
 export const TableExample = () => {
 	const years = Object.keys(tableData[0].data);
-	const boldStyle = { fontWeight: 'bold' };
 
 	return (
-		<SSBTable caption="Antall besøk og årsverk på museer og samlinger">
-			<TableHeaderRow years={years} />
-			<TableBodyRows rowsData={tableData} years={years} boldStyle={boldStyle} />
-			<TableFooter>
-				<TableRow>
-					<TableCell type="td" colSpan={years.length + 1}>
-						<div>
-							<sup>1</sup> Tallet på museer vil variere fra år til år. For
-							eksempel leverer noen museer tall til statistikken ett år, men
-							ikke et annet.
-						</div>
-					</TableCell>
-				</TableRow>
-			</TableFooter>
-		</SSBTable>
+		<div>
+			<style>
+				{`
+          .bold-override {
+            font-weight: bold !important;
+          }
+          .hidden-content-override {
+            text-indent: -9999px;
+            opacity: 0;
+          }
+        `}
+			</style>
+
+			<SSBTable caption="Antall besøk og årsverk på museer og samlinger">
+				<TableHeaderRow years={years} />
+				<TableBodyRows rowsData={tableData} years={years} />
+				<TableFooter>
+					<TableRow>
+						<TableCell type="td" colSpan={years.length + 1}>
+							<div>
+								<sup>1</sup> Tallet på museer vil variere fra år til år. For
+								eksempel leverer noen museer tall til statistikken ett år, men
+								ikke et annet.
+							</div>
+						</TableCell>
+					</TableRow>
+				</TableFooter>
+			</SSBTable>
+		</div>
 	);
 };
 
@@ -130,7 +169,6 @@ TableBodyRows.propTypes = {
 		}),
 	).isRequired,
 	years: PropTypes.arrayOf(PropTypes.string).isRequired,
-	boldStyle: PropTypes.object.isRequired,
 };
 
 export const overviewText = `

diff --git a/webpack/dev.config.js b/webpack/dev.config.js
@@ -22,7 +22,7 @@ module.exports = merge(base, {
 			watch: true,
 		},
 		historyApiFallback: true,
-		port: 3070,
+		port: 3080,
 	},
 
 	module: {