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

Add year to Service Matrix tooltip

parent de7943f4
No related branches found
No related tags found
No related merge requests found
import React from "react";
import { BiCheck } from 'react-icons/bi'; import { BiCheck } from 'react-icons/bi';
...@@ -8,7 +7,6 @@ function ColorBadgeService({ year, active, serviceInfo, tickServiceIndex, curren ...@@ -8,7 +7,6 @@ function ColorBadgeService({ year, active, serviceInfo, tickServiceIndex, curren
if (serviceInfo !== undefined) { if (serviceInfo !== undefined) {
const serviceName = serviceInfo['service_name'] const serviceName = serviceInfo['service_name']
const year = serviceInfo['year']
let name = serviceInfo['product_name']; let name = serviceInfo['product_name'];
let desc = serviceInfo['official_description']; let desc = serviceInfo['official_description'];
let info = serviceInfo['additional_information']; let info = serviceInfo['additional_information'];
...@@ -16,7 +14,7 @@ function ColorBadgeService({ year, active, serviceInfo, tickServiceIndex, curren ...@@ -16,7 +14,7 @@ function ColorBadgeService({ year, active, serviceInfo, tickServiceIndex, curren
name = name || "N/A"; name = name || "N/A";
desc = desc || "N/A"; desc = desc || "N/A";
info = info || "N/A"; info = info || "N/A";
tooltip_text = serviceName + " (" + year + ")" + "\n" + name + "\n\n" + "Description: " + desc + "\n" + "Information: " + info; tooltip_text = serviceName + "\n" + name + "\n\n" + "Description: " + desc + "\n" + "Information: " + info;
} }
} }
...@@ -26,6 +24,8 @@ function ColorBadgeService({ year, active, serviceInfo, tickServiceIndex, curren ...@@ -26,6 +24,8 @@ function ColorBadgeService({ year, active, serviceInfo, tickServiceIndex, curren
shadow_class = "pill-shadow"; shadow_class = "pill-shadow";
} }
tooltip_text = `${year}: ${tooltip_text}`;
return ( return (
<div className="d-inline-block" key={year}> <div className="d-inline-block" key={year}>
{active && current ? ( {active && current ? (
......
import{X as te,a as K,j as s,r as se,F as ie}from"./main-BIBsTO5W.js";import{e as b,S as re}from"./report.js";import{u as oe,g as ae,F as le,D as ne,f as ce}from"./useData-BDYwoQEh.js";import{T as de}from"./Table-HH9WOnMU.js";import"./xlsx-CxqzP9DR.js";import"./index-D6hre9Be.js";import"./hook-DmuGcAOd.js";function J(h){return te({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"},child:[]}]})(h)}function me(h){const e=K.c(9),{year:i,active:t,serviceInfo:r,tickServiceIndex:u,current:o}=h;let l="No additional information available";if(r!==void 0){const x=r.service_name,N=r.year;let c=r.product_name,d=r.official_description,m=r.additional_information;(c!=""||d!=""||m!="")&&(c=c||"N/A",d=d||"N/A",m=m||"N/A",l=x+" ("+N+`)
`+c+`
Description: `+d+`
Information: `+m)}let f="";l!=="No additional information available"&&(f="pill-shadow");let a;e[0]!==t||e[1]!==o||e[2]!==f||e[3]!==u||e[4]!==l?(a=t&&o?s.jsx("div",{"data-description":l,className:" bottom-tooltip ",style:{width:"30px",height:"30px",margin:"2px"},children:s.jsx(J,{className:`rounded-pill color-of-the-current-service-${u%13} bottom-tooltip ${f}`})}):t&&!o?s.jsx("div",{"data-description":l,className:" bottom-tooltip ",style:{width:"30px",height:"30px",margin:"2px"},children:s.jsx(J,{className:`rounded-pill color-of-the-previous-service-${u%13} bottom-tooltip ${f}`})}):s.jsx("div",{className:"rounded-pill bg-color-of-the-year-blank",style:{width:"30px",height:"30px",margin:"2px"},children:" "}),e[0]=t,e[1]=o,e[2]=f,e[3]=u,e[4]=l,e[5]=a):a=e[5];let n;return e[6]!==a||e[7]!==i?(n=s.jsx("div",{className:"d-inline-block",children:a},i),e[6]=a,e[7]=i,e[8]=n):n=e[8],n}const v={};v[b.network_services]="network";v[b.isp_support]="ISP support";v[b.security]="security";v[b.identity]="identity";v[b.collaboration]="collaboration";v[b.multimedia]="multimedia";v[b.storage_and_hosting]="storage and hosting";v[b.professional_services]="professional";function je(h){const e=K.c(62),{category:i}=h,{filterSelection:t,setFilterSelection:r}=se.useContext(ie),{data:u,years:o,nrens:l}=oe("/api/nren-services",r),f=Math.max(...t.selectedYears);let a,n,x,N,c,d,m,g,j,y,_,w,S;if(e[0]!==i||e[1]!==t||e[2]!==f||e[3]!==l||e[4]!==u||e[5]!==r||e[6]!==o){let L;e[20]!==i||e[21]!==t.selectedNrens||e[22]!==t.selectedYears?(L=p=>t.selectedYears.includes(p.year)&&t.selectedNrens.includes(p.nren)&&p.service_category==i,e[20]=i,e[21]=t.selectedNrens,e[22]=t.selectedYears,e[23]=L):L=e[23];const P=u.filter(L),z={};P.forEach(p=>{z[p.service_name]=p.service_description});const G=Object.entries(z).sort(he),Q=ae(P,"service_name");let D;e[24]!==o?(D=[...o],e[24]=o,e[25]=D):D=e[25];let T;e[26]!==l?(T=l.values(),e[26]=l,e[27]=T):T=e[27];let E;e[28]!==T?(E=[...T],e[28]=T,e[29]=E):E=e[29];let I;e[30]!==D||e[31]!==E?(I={availableYears:D,availableNrens:E},e[30]=D,e[31]=E,e[32]=I):I=e[32];let R;e[33]!==t||e[34]!==r||e[35]!==I?(R=s.jsx(le,{filterOptions:I,filterSelection:t,setFilterSelection:r}),e[33]=t,e[34]=r,e[35]=I,e[36]=R):R=e[36];const U=R;let A;e[37]!==o?(A=p=>o.has(p),e[37]=o,e[38]=A):A=e[38];const V=[...t.selectedYears.filter(A)].sort();x=ne,j="NREN "+v[i]+" services matrix",y=`The service matrix shows the services NRENs offer to their users. These
services are grouped thematically, with navigation possible via. the side menu. NRENs
are invited to give extra information about their services; where this is provided,
you will see a black circle around the marker. Hover over the marker to read more.`,_=re.Services,w=U,S=P,c="nren_services",n=ce,a=de,d="service-table",m=!0;let B;e[39]===Symbol.for("react.memo_cache_sentinel")?(B=s.jsx("th",{}),e[39]=B):B=e[39];const M=s.jsxs("tr",{children:[B,G.map(pe)]});e[40]!==M?(g=s.jsx("thead",{children:M}),e[40]=M,e[41]=g):g=e[41],N=Array.from(Q.entries()).map(p=>{const[H,X]=p;return s.jsxs("tr",{children:[s.jsx("td",{className:"bold-text",children:H}),G.map((W,Z)=>{const[O]=W;return s.jsx("td",{children:X.has(O)&&V.map($=>{const q=X.get(O),ee=q.get($);return s.jsx(me,{year:$,active:q.has($),serviceInfo:ee,tickServiceIndex:Z,current:$==f},$)})},O)})]},H)}),e[0]=i,e[1]=t,e[2]=f,e[3]=l,e[4]=u,e[5]=r,e[6]=o,e[7]=a,e[8]=n,e[9]=x,e[10]=N,e[11]=c,e[12]=d,e[13]=m,e[14]=g,e[15]=j,e[16]=y,e[17]=_,e[18]=w,e[19]=S}else a=e[7],n=e[8],x=e[9],N=e[10],c=e[11],d=e[12],m=e[13],g=e[14],j=e[15],y=e[16],_=e[17],w=e[18],S=e[19];let k;e[42]!==N?(k=s.jsx("tbody",{children:N}),e[42]=N,e[43]=k):k=e[43];let C;e[44]!==a||e[45]!==k||e[46]!==d||e[47]!==m||e[48]!==g?(C=s.jsxs(a,{className:d,bordered:m,children:[g,k]}),e[44]=a,e[45]=k,e[46]=d,e[47]=m,e[48]=g,e[49]=C):C=e[49];let Y;e[50]!==n||e[51]!==C?(Y=s.jsx(n,{children:C}),e[50]=n,e[51]=C,e[52]=Y):Y=e[52];let F;return e[53]!==x||e[54]!==c||e[55]!==Y||e[56]!==j||e[57]!==y||e[58]!==_||e[59]!==w||e[60]!==S?(F=s.jsx(x,{title:j,description:y,category:_,filter:w,data:S,filename:c,children:Y}),e[53]=x,e[54]=c,e[55]=Y,e[56]=j,e[57]=y,e[58]=_,e[59]=w,e[60]=S,e[61]=F):F=e[61],F}function pe(h,e){const[i,t]=h;return s.jsx("th",{"data-description":t,className:`bottom-tooltip color-of-the-service-header-${e%13}`,children:i},i)}function he(h,e){return h[0].toLowerCase()<e[0].toLowerCase()?-1:1}export{je as default};
import{X as te,a as K,j as s,r as se,F as ie}from"./main-BIBsTO5W.js";import{e as g,S as re}from"./report.js";import{u as oe,g as ae,F as le,D as ne,f as ce}from"./useData-BDYwoQEh.js";import{T as de}from"./Table-HH9WOnMU.js";import"./xlsx-CxqzP9DR.js";import"./index-D6hre9Be.js";import"./hook-DmuGcAOd.js";function J(h){return te({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"},child:[]}]})(h)}function me(h){const e=K.c(9),{year:i,active:t,serviceInfo:l,tickServiceIndex:u,current:o}=h;let r="No additional information available";if(l!==void 0){const x=l.service_name;let c=l.product_name,d=l.official_description,m=l.additional_information;(c!=""||d!=""||m!="")&&(c=c||"N/A",d=d||"N/A",m=m||"N/A",r=x+`
`+c+`
Description: `+d+`
Information: `+m)}let f="";r!=="No additional information available"&&(f="pill-shadow"),r=`${i}: ${r}`;let a;e[0]!==t||e[1]!==o||e[2]!==f||e[3]!==u||e[4]!==r?(a=t&&o?s.jsx("div",{"data-description":r,className:" bottom-tooltip ",style:{width:"30px",height:"30px",margin:"2px"},children:s.jsx(J,{className:`rounded-pill color-of-the-current-service-${u%13} bottom-tooltip ${f}`})}):t&&!o?s.jsx("div",{"data-description":r,className:" bottom-tooltip ",style:{width:"30px",height:"30px",margin:"2px"},children:s.jsx(J,{className:`rounded-pill color-of-the-previous-service-${u%13} bottom-tooltip ${f}`})}):s.jsx("div",{className:"rounded-pill bg-color-of-the-year-blank",style:{width:"30px",height:"30px",margin:"2px"},children:" "}),e[0]=t,e[1]=o,e[2]=f,e[3]=u,e[4]=r,e[5]=a):a=e[5];let n;return e[6]!==a||e[7]!==i?(n=s.jsx("div",{className:"d-inline-block",children:a},i),e[6]=a,e[7]=i,e[8]=n):n=e[8],n}const v={};v[g.network_services]="network";v[g.isp_support]="ISP support";v[g.security]="security";v[g.identity]="identity";v[g.collaboration]="collaboration";v[g.multimedia]="multimedia";v[g.storage_and_hosting]="storage and hosting";v[g.professional_services]="professional";function je(h){const e=K.c(62),{category:i}=h,{filterSelection:t,setFilterSelection:l}=se.useContext(ie),{data:u,years:o,nrens:r}=oe("/api/nren-services",l),f=Math.max(...t.selectedYears);let a,n,x,c,d,m,b,N,j,y,_,w,S;if(e[0]!==i||e[1]!==t||e[2]!==f||e[3]!==r||e[4]!==u||e[5]!==l||e[6]!==o){let L;e[20]!==i||e[21]!==t.selectedNrens||e[22]!==t.selectedYears?(L=p=>t.selectedYears.includes(p.year)&&t.selectedNrens.includes(p.nren)&&p.service_category==i,e[20]=i,e[21]=t.selectedNrens,e[22]=t.selectedYears,e[23]=L):L=e[23];const P=u.filter(L),z={};P.forEach(p=>{z[p.service_name]=p.service_description});const G=Object.entries(z).sort(he),Q=ae(P,"service_name");let $;e[24]!==o?($=[...o],e[24]=o,e[25]=$):$=e[25];let D;e[26]!==r?(D=r.values(),e[26]=r,e[27]=D):D=e[27];let T;e[28]!==D?(T=[...D],e[28]=D,e[29]=T):T=e[29];let E;e[30]!==$||e[31]!==T?(E={availableYears:$,availableNrens:T},e[30]=$,e[31]=T,e[32]=E):E=e[32];let R;e[33]!==t||e[34]!==l||e[35]!==E?(R=s.jsx(le,{filterOptions:E,filterSelection:t,setFilterSelection:l}),e[33]=t,e[34]=l,e[35]=E,e[36]=R):R=e[36];const U=R;let A;e[37]!==o?(A=p=>o.has(p),e[37]=o,e[38]=A):A=e[38];const V=[...t.selectedYears.filter(A)].sort();x=ne,j="NREN "+v[i]+" services matrix",y=`The service matrix shows the services NRENs offer to their users. These
services are grouped thematically, with navigation possible via. the side menu. NRENs
are invited to give extra information about their services; where this is provided,
you will see a black circle around the marker. Hover over the marker to read more.`,_=re.Services,w=U,S=P,d="nren_services",n=ce,a=de,m="service-table",b=!0;let B;e[39]===Symbol.for("react.memo_cache_sentinel")?(B=s.jsx("th",{}),e[39]=B):B=e[39];const M=s.jsxs("tr",{children:[B,G.map(pe)]});e[40]!==M?(N=s.jsx("thead",{children:M}),e[40]=M,e[41]=N):N=e[41],c=Array.from(Q.entries()).map(p=>{const[H,X]=p;return s.jsxs("tr",{children:[s.jsx("td",{className:"bold-text",children:H}),G.map((W,Z)=>{const[O]=W;return s.jsx("td",{children:X.has(O)&&V.map(I=>{const q=X.get(O),ee=q.get(I);return s.jsx(me,{year:I,active:q.has(I),serviceInfo:ee,tickServiceIndex:Z,current:I==f},I)})},O)})]},H)}),e[0]=i,e[1]=t,e[2]=f,e[3]=r,e[4]=u,e[5]=l,e[6]=o,e[7]=a,e[8]=n,e[9]=x,e[10]=c,e[11]=d,e[12]=m,e[13]=b,e[14]=N,e[15]=j,e[16]=y,e[17]=_,e[18]=w,e[19]=S}else a=e[7],n=e[8],x=e[9],c=e[10],d=e[11],m=e[12],b=e[13],N=e[14],j=e[15],y=e[16],_=e[17],w=e[18],S=e[19];let k;e[42]!==c?(k=s.jsx("tbody",{children:c}),e[42]=c,e[43]=k):k=e[43];let C;e[44]!==a||e[45]!==k||e[46]!==m||e[47]!==b||e[48]!==N?(C=s.jsxs(a,{className:m,bordered:b,children:[N,k]}),e[44]=a,e[45]=k,e[46]=m,e[47]=b,e[48]=N,e[49]=C):C=e[49];let Y;e[50]!==n||e[51]!==C?(Y=s.jsx(n,{children:C}),e[50]=n,e[51]=C,e[52]=Y):Y=e[52];let F;return e[53]!==x||e[54]!==d||e[55]!==Y||e[56]!==j||e[57]!==y||e[58]!==_||e[59]!==w||e[60]!==S?(F=s.jsx(x,{title:j,description:y,category:_,filter:w,data:S,filename:d,children:Y}),e[53]=x,e[54]=d,e[55]=Y,e[56]=j,e[57]=y,e[58]=_,e[59]=w,e[60]=S,e[61]=F):F=e[61],F}function pe(h,e){const[i,t]=h;return s.jsx("th",{"data-description":t,className:`bottom-tooltip color-of-the-service-header-${e%13}`,children:i},i)}function he(h,e){return h[0].toLowerCase()<e[0].toLowerCase()?-1:1}export{je as default};
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment