diff --git a/src/pages/Components/ComponentsInfo/TableInfo.jsx b/src/pages/Components/ComponentsInfo/TableInfo.jsx index e0ffab5..c73ea5d 100644 --- a/src/pages/Components/ComponentsInfo/TableInfo.jsx +++ b/src/pages/Components/ComponentsInfo/TableInfo.jsx @@ -13,7 +13,6 @@ import { TableExample, codeReact, codeHtml, - PropsTable, } from './TableInfoContent'; import ComponentPropsInfo from '../ComponentPropsInfo'; @@ -148,17 +147,17 @@ const TableInfo = () => { onClick={newTabPath => handleTabClick(newTabPath, 'contentTab')} /> - + {activeTab.contentTab === '/overview' && ( -
+
Retningslinjer for tabell -
+
{overviewText}
-
+
diff --git a/src/pages/Components/ComponentsInfo/TableInfoContent.jsx b/src/pages/Components/ComponentsInfo/TableInfoContent.jsx index 5a0f786..9adb271 100644 --- a/src/pages/Components/ComponentsInfo/TableInfoContent.jsx +++ b/src/pages/Components/ComponentsInfo/TableInfoContent.jsx @@ -133,7 +133,9 @@ TableBodyRows.propTypes = { boldStyle: PropTypes.object.isRequired, }; -export const overviewText = 'Rad- og kolonneoverskrifter er essensielle. En celle er overskrift hvis den beskriver innholdet i cellene under eller ved siden av. Juster tall for enkel sammenligning.'; +export const overviewText = ` +Det er viktig å bruke rad- og kolonneoverskrifter. En celle er en overskrift hvis den beskriver innholdet i cellene under. +Som en hovedregel bør tall høyrejusteres for å gjøre det enkelt å sammenligne de. `; export const LeadText = ` Tabeller brukes til å organisere og vise data på en strukturert måte. @@ -172,31 +174,158 @@ const SimpleTable = () => ( ); -export default SimpleTable; + +const StatisticTable = () => { + const tableData = [ + { + id: 'museer_totalt', + header: 'Museer og samlinger totalt', + data: { 2020: '102', 2021: '101', 2022: '104' }, + }, + { + id: 'besok_totalt', + header: 'Besøk totalt', + data: { 2020: '5 134 293', 2021: '6 485 173', 2022: '10 321 374' }, + bold: true, + }, + { + id: 'enkeltbesok', + header: 'Enkeltbesøk', + data: { 2020: '4 421 942', 2021: '5 474 120', 2022: '8 491 379' }, + }, + { + id: 'gruppebesok', + header: 'Gruppebesøk', + data: { 2020: '712 351', 2021: '1 011 053', 2022: '1 829 995' }, + } + ]; + const years = Object.keys(tableData[0].data) + const boldStyle = { fontWeight: 'bold' } + + return ( + + + + + + Antall + + + + Museer og samlinger totalt + {years.map((year) => ( + + {year} + + ))} + + + + {tableData.map(({ id, header, data, bold }) => ( + + + {header} + + {years.map((year) => ( + + {data[year]} + + ))} + + ))} + + + + +
+ 1 Tallet på museer vil variere fra år til år. For eksempel leverer noen museer tall til + statistikken ett år, men ikke et annet. +
+ + + +
+ ) +} `; export const codeHtml = ` - - - - - - - - - - - - - - - - - - - - - - -
Header 1Header 2
Data 1Data 2
More Data 1More Data 2
Footer Information
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
Antall besøk og årsverk på museer og samlinger
+
+
Antall
Museer og samlinger totalt202020212022
Museer og samlinger totalt102101104
Besøk totalt5 134 2936 485 17310 321 374
Enkeltbesøk4 421 9425 474 1208 491 379
Gruppebesøk712 3511 011 0531 829 995
Betalende besøkende2 391 9622 774 3765 654 919
Årsverk
Lønte417344044645
Faste stillinger335935163683
+
1 Tallet på museer vil variere fra år til år. For eksempel leverer noen museer tall til statistikken ett år, men ikke et annet.
+
+
`;