Skip to content

Feature/refactor radar 2 #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JeroenKesteloo merged 7 commits into from
Apr 29, 2024
Merged

Feature/refactor radar 2 #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3c37f9a
refactor: removed unused code and added some additional css variables
JeroenKesteloo Apr 26, 2024
4283752
feat: added Finaps fonts
JeroenKesteloo Apr 26, 2024
eeedd1e
fix: added color-white css variable
JeroenKesteloo Apr 29, 2024
92c8875
fix: moved most of the style attributes from radar.js to css
JeroenKesteloo Apr 29, 2024
ed64eb2
feat: added index to items in list and show index nr in radar for cle…
JeroenKesteloo Apr 29, 2024
48eaa58
refactor: cleaned up some more js code in the radar
JeroenKesteloo Apr 29, 2024
0b695db
fix: added TODO for making list of colors more consistent
JeroenKesteloo Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 151 additions & 34 deletions docs/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,22 @@
CUSTOM CSS
*/

@font-face {
font-family: 'Open Sans';
src: url('./fonts/open_sans/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
font-family: 'Open Sans';
src: url('./fonts/open_sans/OpenSans-Bold.ttf') format('truetype');
font-weight: bold;
}

@font-face {
font-family: 'Poppins';
src: url('./fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
}

:root {
--color-accent-1: #01bfad;
--color-accent-2: #a98fef;
Expand All @@ -10,23 +26,38 @@ CUSTOM CSS
--color-accent-5: #cb46bf;
--color-accent-6: #2d4b73;

--color-gray-1: #f5f5f5;
--color-gray-2: #495057;
--color-gray-3: #212529;
--color-gray-4: #1b1f22;

--base-bg-color: var(--color-gray-1);
--body-bg-color: #ffffff;
--font-color: var(--color-gray-3);
--font-color-inverse: #ffffff;
--font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--color-white: #ffffff;

/* TODO: make list of colors consistent */
--color-grey-1: #e6e7e8;
--color-grey-2: #495057;
--color-grey-3: #212529;
--color-grey-4: #1b1f22;

--color-grey-10: #212121;
--color-grey-20: #424242;
--color-grey-30: #616161;
--color-grey-40: #767676;
--color-grey-50: #9e9e9e;
--color-grey-60: #bdbdbd;
--color-grey-70: #e0e0e0;
--color-grey-80: #eeeeee;
--color-grey-90: #f5f5f5;
--color-grey-95: #fafafa;

--base-bg-color: var(--color-grey-1);
--body-bg-color: var(--color-white);
--font-color: var(--color-grey-3);
--font-color-inverse: var(--color-white);
--font-color-grey: var(--color-grey-40);
--font-family: 'Open Sans', monospace;
--font-family-header: 'Poppins', monospace;

--color-primary: #191970;
--color-secondary: #feaa00;

--border-color: var(--color-gray-2);
--border-color: var(--color-grey-70);
--border-radius: 0.25rem;

--size-1: 3rem;
--size-2: 1.75rem;
Expand All @@ -38,24 +69,19 @@ CUSTOM CSS

--icon-cross: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

--btn-bg-default: var(--color-gray-1);
--btn-bg-default: var(--color-grey-1);
--btn-color-default: var(--font-color);
--modal-width: 500px;
}

@media (prefers-color-scheme: dark) {
:root {
--base-bg-color: var(--color-gray-3);
--body-bg-color: var(--color-gray-4);
--font-color: #ffffff;
--font-color-inverse: #ffffff;

--border-color: var(--color-gray-2);

--color-primary: #191970;
--color-secondary: #feaa00;

--btn-bg-default: var(--color-gray-3);
--btn-color-default: var(--font-color);
--base-bg-color: var(--color-grey-3);
--body-bg-color: var(--color-grey-4);
--font-color: var(--color-white);
--font-color-inverse: var(--color-grey-4);
--border-color: var(--color-grey-2);
--btn-bg-default: var(--color-grey-3);
}
}

Expand All @@ -66,11 +92,13 @@ html {

body {
font-family: var(--font-family);
font-weight: normal;
padding: 2rem;
max-width: 1400px;
margin: auto;
background-color: var(--body-bg-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
color: var(--font-color);
}

Expand All @@ -80,9 +108,10 @@ body {
h1,
h2,
h3 {
font-family: var(--font-family-header);
color: var(--header-color);
margin-bottom: 1rem;
font-weight: 900;
font-weight: 600;
}

h1 {
Expand Down Expand Up @@ -140,6 +169,10 @@ h3 {
background-color: var(--color-accent-6);
}

.text-gray {
color: var(--font-color-grey);
}

/* CONTAINERS
-------------------------------*/

Expand All @@ -162,8 +195,22 @@ h3 {

.d-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, 1fr);

&.items {
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
&.quadrants {
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
}
}

.quadrants {
background-color: var(--base-bg-color);
padding: 2rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
}

/* BUTTONS
Expand Down Expand Up @@ -193,7 +240,7 @@ button.btn-default {

button.btn-primary {
background-color: var(--color-primary);
color: var(--font-color-inverse);
color: var(--color-white);
}

button.btn-transparent {
Expand All @@ -216,9 +263,10 @@ button.btn-close {
}

.btn-image {
flex-direction: row-reverse;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
width: 100%;
}

button.btn-sm {
Expand All @@ -240,7 +288,7 @@ ul {
padding: 0.5rem 0.75rem;
border-radius: 9999px;
font-weight: bold;
color: var(--font-color-inverse);
color: var(--color-grey-3);
font-size: var(--font-size-small);
display: flex;
justify-content: center;
Expand Down Expand Up @@ -305,7 +353,7 @@ ul {
}

.modal-header {
/* border-bottom: 1px solid var(--border-color); */
border-bottom: 1px solid var(--border-color);
padding: 2rem;
display: flex;
justify-content: space-between;
Expand All @@ -316,7 +364,7 @@ ul {
}

.modal-footer {
/* border-top: 1px solid var(--border-color); */
border-top: 1px solid var(--border-color);
padding: 2rem;
display: flex;
justify-content: end;
Expand All @@ -330,3 +378,72 @@ body.modal-open {
display: flex;
gap: 0.5rem;
}

/* RADAR
-------------------------------*/

.blip {
cursor: pointer;
}

.blip path,
.blip circle {
stroke-width: 2px;
stroke-linejoin: round;
stroke-linecap: round;
}

.blip > text {
fill: var(--font-color-inverse);
font-family: var(--font-family-header);
font-size: var(--font-size-small);
pointer-events: none;
user-select: none;
}

#radar .legend-header {
font-family: var(--font-family);
font-size: var(--size-3);
font-weight: 900;
fill: var(--font-color);
}
#radar .legend-text {
font-family: var(--font-family);
fill: var(--font-color);
}

#radar .line {
stroke-width: 2;
}

#radar .circle {
fill: none;
stroke-width: 2;
}

#radar .circle-text {
opacity: 0.35;
font-family: var(--font-family-header);
font-size: var(--size-1);
pointer-events: none;
user-select: none;
}

#radar #bubble {
pointer-events: none;
user-select: none;
}

#bubble rect {
fill: var(--color-grey-10);
}

#bubble path {
fill: var(--color-grey-10);
}

#bubble text {
font-family: var(--font-family);
font-size: var(--font-size-small);
fill: var(--color-white);
}
24 changes: 17 additions & 7 deletions docs/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,16 @@ fetch('./data.json')
radar_visualization(radarInput);

dataSet.forEach(function (item) {
let label = document.createElement('button');
label.setAttribute(
// create button
const button = document.createElement('button');
button.setAttribute(
'class',
'btn-transparent btn-sm text-left d-flex btn-image',
);
const params = `openTechDetails(${item.index})`;
label.setAttribute('onClick', params);
label.textContent = item.label;
button.setAttribute('onClick', params);

// create favicon
const favicon = document.createElement('img');
favicon.setAttribute('class', 'img-circle');

Expand All @@ -46,10 +47,19 @@ fetch('./data.json')
);
}
item.favObjectUrl = favicon.getAttribute('src');
label.appendChild(favicon);
button.appendChild(favicon);

// create index + label
const index = document.createElement('span');
const label = document.createElement('span');
index.textContent = '#' + item.id;
index.setAttribute('class', 'text-gray');
label.textContent = item.label;
button.appendChild(index);
button.appendChild(label);

let li = document.createElement('li');
li.appendChild(label);
const li = document.createElement('li');
li.appendChild(button);

const id = item.quadrant + '-' + item.ring;
document.getElementById(id).appendChild(li);
Expand Down
17 changes: 5 additions & 12 deletions docs/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,25 +32,18 @@ const RINGS = [
{ name: 'HOLD', color: 'var(--color-accent-4)', id: 3 },
];

const RADAR_WIDTH = 1400 - 4 * 16;

const RADAR_CONFIG = {
svg_id: 'radar',
width: 1400,
width: RADAR_WIDTH,
height: 1000,
colors: {
background: 'var(--bg-base-color)',
grid: '#dddde0',
inactive: '#ddd',
bubble: 'var(--font-color-inverse)',
grid: 'var(--border-color)',
inactive: 'var(--color-grey-1)',
},
title: 'Finaps Tech Radar',
// date: data.date,
quadrants: QUADRANTS,
rings: RINGS,
print_rings: true,
print_title: false,
print_legend: true,
print_layout: false,
links_in_new_tabs: true,
// zoomed_quadrant: 0,
// entries: data.entries,
};
2 changes: 1 addition & 1 deletion docs/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"description": "Core browser language; SCSS is a mature extension that makes writing large CSS code bases easier (although CSS is coming close, so this might update the future)",
"link": "https://sass-lang.com/",
"active": true,
"moved": 0
"moved": 1
},
{
"label": "Adobe Creative Cloud",
Expand Down
Binary file added docs/fonts/open_sans/OpenSans-Bold.ttf
View file
Open in desktop
Binary file not shown.
Binary file added docs/fonts/open_sans/OpenSans-Light.ttf
View file
Open in desktop
Binary file not shown.
Binary file added docs/fonts/open_sans/OpenSans-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file added docs/fonts/poppins/Poppins-SemiBold.ttf
View file
Open in desktop
Binary file not shown.
Loading