diff --git a/compendium-frontend/src/helpers/ConnectivityDisplayConstant.tsx b/compendium-frontend/src/helpers/ConnectivityDisplayConstant.tsx new file mode 100644 index 0000000000000000000000000000000000000000..cf8637f3c6686ccc17361bd8266efd2b19cc1d7e --- /dev/null +++ b/compendium-frontend/src/helpers/ConnectivityDisplayConstant.tsx @@ -0,0 +1,92 @@ +export const displayTitle={ + "proportion": "Connected Proportion", + "level": "Connectivity Level", + "carrier": "Connection Carrier", + "load": "Connectivity Load", + "growth": "Connectivity Growth", + "charging": "Commercial Charging Level", + "commercial": "Commercial Connectivity" +} + +export const questionMap={ + "proportion": "An estimate of portion of institute of different type which are provided with IP Connectivity " + + "by their NREN, Including information on the remit of the NREN, actual number of institution connected, " + + "market share and number of user.", + "level": "This table explores the average level of connectivity for each type of institution to the NREN. " + + "The typical and the highest capacity at which institutions in this category are connected ( in Mbit/s).", + "carrier": "How is the traffic carried?", + "load": "What are the traffic loads in Mbit/s?", + "growth": "What do you expect the traffic growth to be in the next 3 years?", + "charging": "What are the typical charging levels for the following types of commercial connections?", + "commercial": "What types of commercial organisations do you connect?", +} + +export const dataKeyMap = { + "proportion": { + "Remit cover connectivity": "coverage", + "Number of institutions connected": "number_connected", + "Percentage market share of institutions connected": "market_share", + "Number of users served": "users_served", + }, + "level": { + "Typical link speed (Mbit/s):": "typical_speed", + "Highest speed link (Mbit/s):": "highest_speed", + "Proportionally how many institutions in this category are connected at the highest capacity? (%):" + : "highest_speed_proportion", + }, + "carrier": { + "Commercial Provider Backbone":"commercial_provider_backbone", + "Nren Local Loops":"nren_local_loops", + "Regional Nren Backbone":"regional_nren_backbone", + "Man":"man", + "Other": "other", + + }, + "load": { + "Average Load From Institutions": "average_load_from_institutions", + "Average Load To Institutions": "average_load_to_institutions", + "Peak Load To Institution": "peak_load_to_institutions", + "Peak Load From Institution": "peak_load_from_institutions" + }, + "growth": { + "Percentage growth": "growth" + }, + "charging": { + "No charges applied if requested by R&E users": "no_charges_if_r_e_requested", + "Same charging model as for R&E users":"same_as_r_e_charges", + "Charges typically higher than for R&E users":"higher_than_r_e_charges", + "Charges typically lower than for R&E users": "lower_than_r_e_charges" + }, + "commercial": { + "No - but we offer a direct or IX peering":"no_but_direct_peering", + "No - not eligible for policy reasons": "no_policy", + "No - financial restrictions (NREN is unable to charge/recover costs)":"no_financial", + "No - other reason / unsure":"no_other", + "Yes - National NREN access only":"yes_national_nren", + "Yes - Including transit to other networks":"yes_incl_other", + "Yes - only if sponsored by a connected institution":"yes_if_sponsored", + + } +}; + +export const displayCategoryMap={ + "hospitals": "Non-university public Hospitals", + "universities": "Universities & Other (ISCED 6-8)", + "further_education": "Further education (ISCED 4-5)", + "government": "Government departments (national, regional, local)", + "institutes" : "Research Institutes", + "primary_schools" : "Primary schools (ISCED 1)", + "for_profit_orgs" : "For-profit organisations", + "secondary_schools" : "Secondary schools (ISCED 2-3)", + "cultural" : "Libraries, Museums, Archives, Cultural institutions", + "iros" : "International (virtual) research organisations", + "collaboration": "Connection to your network for collaboration with R&E users", + "service_supplier":"Connection to your network for supplying services for R&E", + "direct_peering":"Direct peering (e.g. direct peering or cloud peering)", + "university_spin_off" :"University Spin Off/Incubator", + "commercial_r_and_e" : "Commercial R&E traffic only", + "commercial_general" :"Commercial general", + "commercial_collaboration":"Commercial for collaboration only (project/time limited)", + "commercial_service_provider": "Commercial Service Provider", + +} diff --git a/compendium-frontend/src/helpers/ConnectivityViewComponent.tsx b/compendium-frontend/src/helpers/ConnectivityViewComponent.tsx index 6751fe021f27f3778a83239c19023bc1f7622f51..593b523a1a5b41d1f9044ccc4d1e8f790d56bb5c 100644 --- a/compendium-frontend/src/helpers/ConnectivityViewComponent.tsx +++ b/compendium-frontend/src/helpers/ConnectivityViewComponent.tsx @@ -1,12 +1,13 @@ import React from "react"; import CollapsibleConnectivityBox from "../components/CollapsibleConnectivityBox"; import {Table} from "react-bootstrap"; +import {displayCategoryMap} from "./ConnectivityDisplayConstant"; function TableRow({ title, data }) { return ( <tr> - <th>{title}</th> + <th className="fixed-column">{title}</th> {data.map((entry, index) => ( <td key={index}>{entry}</td> ))} @@ -29,7 +30,7 @@ function TableSection({ userCategoryMap, filterSelection, title, dataKey }) { function TableRowForTickIcon({ title, data }) { return ( <tr> - <th>{title}</th> + <th className="fixed-column">{title}</th> {data.map((entry, index) => ( <td key={index}> {entry ? <span>✔</span> : null} @@ -58,12 +59,14 @@ function TableSectionForTickIcon({ userCategoryMapForCarrier, filterSelection, t type UserCategoryMap = Map<string, Map<string, any>>; type UserCategoryMapForCarrier = Map<string, Map<string, Map<string, any>>>; -export function ConnectedUserData({ dataLookup, filterSelection, tableDataMap, isTickIcon=false, carrierCategoryList= [] }): React.ReactElement { +export function ConnectedUserData({ dataLookup, filterSelection, tableDataMap, isTickIcon=false, + carrierCategoryList= [] }): React.ReactElement { const result: JSX.Element[] = []; let tableSections; const dataLookupEntries: [string, UserCategoryMap| UserCategoryMapForCarrier][] = Array.from(dataLookup.entries()); dataLookupEntries.forEach(([userCategory, userCategoryMap]) => { let tableSections; + // console.log(userCategory) if (isTickIcon) { // If isTickIcon is true, for UserCategoryMapForCarrier const userCategoryMapForCarrier = userCategoryMap as UserCategoryMapForCarrier; @@ -91,7 +94,7 @@ export function ConnectedUserData({ dataLookup, filterSelection, tableDataMap, i )); } const categoryContent = ( - <CollapsibleConnectivityBox title={userCategory} startCollapsed key={userCategory}> + <CollapsibleConnectivityBox title={displayCategoryMap[userCategory]} startCollapsed key={userCategory}> <div className="table-responsive"> <Table className="connectivity-table" bordered> <colgroup> @@ -99,7 +102,7 @@ export function ConnectedUserData({ dataLookup, filterSelection, tableDataMap, i </colgroup> <thead> <tr> - <th></th> + <th className="fixed-column"></th> {Array.from(userCategoryMap.entries()).map(([nrens, nrensMap]) => ( <th key={nrens} colSpan={filterSelection.selectedYears.length}> {nrens} @@ -107,7 +110,7 @@ export function ConnectedUserData({ dataLookup, filterSelection, tableDataMap, i ))} </tr> <tr> - <th></th> + <th className="fixed-column"></th> {Array.from(userCategoryMap.entries()).map(([nrens, nrensMap]) => ( Array.from(nrensMap.entries()).map(([yearRef, entry]) => ( <th key={yearRef}>{yearRef}</th> diff --git a/compendium-frontend/src/pages/ConnectedUser.tsx b/compendium-frontend/src/pages/ConnectedUser.tsx index faf84fcc18ee66ce6cdaeb2ae792282f2662b747..e5b0fa9c8a894290b2cd697a41ff9d4c24c2b0d8 100644 --- a/compendium-frontend/src/pages/ConnectedUser.tsx +++ b/compendium-frontend/src/pages/ConnectedUser.tsx @@ -14,7 +14,7 @@ import { FilterSelectionContext } from "../helpers/FilterSelectionProvider"; import ChartContainer from "../components/graphing/ChartContainer"; import { useData } from "../helpers/useData"; import {ConnectedUserData} from "../helpers/ConnectivityViewComponent"; -import CollapsibleConnectivityBox from "../components/CollapsibleConnectivityBox"; +import {questionMap,dataKeyMap,displayTitle} from "../helpers/ConnectivityDisplayConstant"; @@ -64,71 +64,10 @@ function ConnectedUserPage({ connectivity_category}: inputProps): React.ReactEle const showYears = [...filterSelection.selectedYears.filter(year => years.has(year))].sort(); - const questionMap={ - "proportion": "An estimate of portion of institute of different type which are provided with IP Connectivity by their NREN, " + - "Including information on the remit of the NREN, actual number of institution connected, market share and number of user.", - "level": "An estimate of portion of institute of different type which are provided with IP Connectivity by their NREN, " + - "Including information on the remit of the NREN, actual number of institution connected, market share and number of user.", - "carrier": "An estimate of portion of institute of different type which are provided with IP Connectivity by their NREN, " + - "Including information on the remit of the NREN, actual number of institution connected, market share and number of user.", - "load": "An estimate of portion of institute of different type which are provided with IP Connectivity by their NREN, " + - "Including information on the remit of the NREN, actual number of institution connected, market share and number of user.", - "growth": "An estimate of portion of institute of different type which are provided with IP Connectivity by their NREN, " + - "Including information on the remit of the NREN, actual number of institution connected, market share and number of user.", - "charging": "An estimate of portion of institute of different type which are provided with IP Connectivity by their NREN, " + - "Including information on the remit of the NREN, actual number of institution connected, market share and number of user.", - "commercial": "An estimate of portion of institute of different type which are provided with IP Connectivity by their NREN, " + - "Including information on the remit of the NREN, actual number of institution connected, market share and number of user.", - } - - const dataKeyMap = { - "proportion": { - "Remit cover connectivity": "coverage", - "Number of institutions connected": "number_connected", - "Percentage market share of institutions connected": "market_share", - "Number of users served": "users_served", - }, - "level": { - "Typical Speed": "typical_speed", - "Highest Speed": "highest_speed", - "Highest Speed Proportion": "highest_speed_proportion", - }, - "carrier": { - "other": "other", - "Commercial Provider Backbone":"commercial_provider_backbone", - "Nren Local Loops":"nren_local_loops", - "Regional Nren Backbone":"regional_nren_backbone", - "Man":"man", - - }, - "load": { - "Average Load From Institutions": "average_load_from_institutions", - "Average Load To Institutions": "average_load_to_institutions", - "Peak Load To Institution": "peak_load_to_institutions", - "Peak Load From Institution": "peak_load_from_institutions" - }, - "growth": { - "Percentage growth": "growth" - }, - "charging": { - "no_charges_if_r_e_requested": "no_charges_if_r_e_requested", - "same_as_r_e_charges":"same_as_r_e_charges", - "higher_than_r_e_charges":"higher_than_r_e_charges", - "lower_than_r_e_charges": "lower_than_r_e_charges" - }, - "commercial": { - "no_but_direct_peering":"no_but_direct_peering", - "no_policy": "no_policy", - "yes_national_nren":"yes_national_nren", - "yes_incl_other":"yes_incl_other", - "yes_if_sponsored":"yes_if_sponsored", - - } - }; return ( - <DataPage title={connectivity_category} + <DataPage title={displayTitle[connectivity_category]} description="Hover over the elements for additional information." category={Sections.ConnectedUsers} filter={filterNode}> <> diff --git a/compendium-frontend/src/scss/layout/_components.scss b/compendium-frontend/src/scss/layout/_components.scss index e2a646468fff6b4ea6792ab35f7b42868285b9b8..bc91e98dd2d93b715cfbec27ef6899c4ffdfb258 100644 --- a/compendium-frontend/src/scss/layout/_components.scss +++ b/compendium-frontend/src/scss/layout/_components.scss @@ -221,11 +221,23 @@ $year-colors: ( left: 0; } -.connectivity-table tbody tr:nth-of-type(even) { +.connectivity-table tbody tr:nth-of-type(even) th{ background-color: rgb(210,235,243); } -.connectivity-table tbody tr:nth-of-type(odd) { +.connectivity-table tbody tr:nth-of-type(odd) th{ + background-color: white; +} + +.connectivity-table tbody tr:nth-of-type(even) td{ + background-color: rgb(210,235,243); +} + +.connectivity-table tbody tr:nth-of-type(odd) td{ + background-color: white; +} + +.connectivity-table thead th{ background-color: white; } @@ -233,6 +245,17 @@ $year-colors: ( text-align: center; } +.fixed-column { + border-right-color: black; + position: sticky; + left: 0; + //z-index: 1; +} +td,th { + text-align: center; + vertical-align: middle; +} + .fit-max-content { min-width: max-content; }