Skip to content
Snippets Groups Projects
Commit 62ad7fb3 authored by Saket Agrahari's avatar Saket Agrahari
Browse files

[COMP-292] : fine tuning the css

parent c5fafedd
No related branches found
No related tags found
1 merge request!89Feature/comp 292 : Institutions with IP Connectivity provided by NREN
Hide whitespace changes
Inline Side-by-side
compendium-frontend/src/helpers/ConnectivityDisplayConstant.tsx 0 → 100644
+ 92
− 0
View file @ 62ad7fb3
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",
}
compendium-frontend/src/helpers/ConnectivityViewComponent.tsx
+ 9
− 6
View file @ 62ad7fb3
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>&#10004;</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>
......
compendium-frontend/src/pages/ConnectedUser.tsx
+ 2
− 63
View file @ 62ad7fb3
......@@ -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}>
<>
......
compendium-frontend/src/scss/layout/_components.scss
+ 25
− 2
View file @ 62ad7fb3
......@@ -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;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment