Skip to content
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

Update dashboard styling to be more RMI-like #177

Merged
merged 8 commits into from
Jan 16, 2025
Merged

Update dashboard styling to be more RMI-like #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fe2da9b
Update dashboard layout colours
MonikaFu Jan 15, 2025
99e45e4
Merge branch 'main' into 91-style-dashboard-rmi
MonikaFu Jan 15, 2025
aec8e48
Style
MonikaFu Jan 15, 2025
4b920b4
Use Roboto font
MonikaFu Jan 15, 2025
66de850
Update plot colours
MonikaFu Jan 15, 2025
8b6f5d3
Style
MonikaFu Jan 15, 2025
1d40999
Update warning styles
MonikaFu Jan 15, 2025
6e6d2e5
Merge branch 'main' into 91-style-dashboard-rmi
MonikaFu Jan 16, 2025
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
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
"type": "module",
"dependencies": {
"@floating-ui/dom": "^1.6.7",
"@fontsource/roboto": "^5.1.1",
"@fortawesome/fontawesome-free": "^6.7.1",
"d3": "^5.16.0",
"d3-array": "^3.2.4",
Expand Down
5 changes: 5 additions & 0 deletions src/app.postcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,8 @@ body {
width: 100%;
background-color: rgb(var(--color-surface-100));
}

:root [data-theme='rmi_theme'] {
--theme-font-family-base: 'Roboto', sans-serif;
--theme-font-family-heading: 'Roboto', sans-serif;
}
34 changes: 19 additions & 15 deletions src/css/plot_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
/* src/css/plot_styles.css */

strong {
font-weight: 700;
}

.d3chart > style {
display: none;
}
Expand Down Expand Up @@ -94,7 +98,7 @@
/* styles for interactive charts ****************/

div.d3chart {
font-family: sans-serif;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
width: 100%;
max-width: 1400px;
Expand All @@ -103,34 +107,34 @@ div.d3chart {
}

div.d3chart .chart_title {
font-family: sans-serif;
font-family: 'Roboto', sans-serif;
font-size: 1em;
text-align: center;
}

div.d3chart .chart_filters {
font-family: sans-serif;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
text-align: center;
margin: 10px;
}

div.d3chart .chart_caption {
font-family: sans-serif;
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
text-align: center;
}

div.d3chart .chart_source {
font-family: sans-serif;
font-family: 'Roboto', sans-serif;
font-size: 0.7em;
font-style: italic;
padding-top: 5px;
}

div.d3chart svg {
/* border: 1px dashed; */
background-color: #d9e2e8;
background-color: #ffffff;
}

div.d3chart > * {
Expand All @@ -140,18 +144,18 @@ div.d3chart > * {

div.d3chart div.d3tooltip {
opacity: 0.9;
background-color: #d9e2e8;
background-color: #ffffff;
color: black;
border-radius: 4px;
padding: 10px;
border: 1px solid;
font-family: sans-serif;
font-family: 'Roboto', sans-serif;
/* position: absolute; */
position: fixed; /* position must be fixed to work in Gitbook */
}

div.d3chart svg text {
font-family: sans-serif;
font-family: 'Roboto', sans-serif;
}

div.d3chart.tech_exposure {
Expand All @@ -176,11 +180,11 @@ div.d3chart .axis {

/* axis color */
div.d3chart path.domain {
stroke: #99b1c1;
stroke: #93aec6;
}

div.d3chart .tick line {
stroke: #99b1c1;
stroke: #93aec6;
}

/* d3 data_table styling */
Expand All @@ -190,7 +194,7 @@ div.d3chart.data_table th,
div.d3chart.data_table td {
border-collapse: collapse;
padding: 8px;
border-bottom: 1px solid #aaa;
border-bottom: 1px solid #93aec6;
border-bottom: none !important;
text-align: center;
font-size: 1em;
Expand All @@ -210,7 +214,7 @@ div.d3chart.included_table {

div.d3chart.included_table table thead tr {
border-top: none !important;
border-bottom: 2px solid #99b1c1 !important;
border-bottom: 1px solid #93aec6 !important;
}

div.d3chart.included_table table,
Expand All @@ -225,13 +229,13 @@ div.d3chart.included_table tr {
}

div.d3chart.included_table table tr.summary_row {
border-top: 1px solid #99b1c1 !important;
border-top: 1px solid #93aec6 !important;
border-bottom: none !important;
}

div.d3chart.included_table table td.column_left_border,
div.d3chart.included_table table th.column_left_border {
border-left: 1px solid #99b1c1 !important;
border-left: 1px solid #93aec6 !important;
}

/* sectors color palette */
Expand Down
4 changes: 2 additions & 2 deletions src/js/createErrorMessageDiv.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ export function createErrorMessageDiv() {
let errorMessageDiv = document.createElement('div');
errorMessageDiv.setAttribute('role', 'alert');
let errorTitle = document.createElement('div');
errorTitle.classList = 'bg-red-500 text-white font-bold rounded-t px-4 py-2';
errorTitle.classList = 'bg-error-500 text-white font-bold rounded-t px-4 py-2';
errorTitle.appendChild(document.createTextNode('Something went wrong'));
let errorMessage = document.createElement('div');
errorMessage.classList =
'border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700';
'border border-t-0 border-error-400 rounded-b bg-error-100 px-4 py-3 text-error-700';
errorMessage.appendChild(
document.createTextNode('An error occurred while generating this plot.')
);
Expand Down
2 changes: 1 addition & 1 deletion src/js/pie_exploded.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export class PieExploded {
.attr('class', (d) => (d.data.exploded ? d.data.key : 'non-PACTA'))
.attr('d', arc)
.attr('fill', (d) => (d.data.exploded ? color(d.data.key) : greys(d.data.key)))
.attr('stroke', '#d9e2e8')
.attr('stroke', '#ffffff')
.style('stroke-width', '2px')
.style('opacity', 1)
.on('mouseover', mouseover)
Expand Down
104 changes: 52 additions & 52 deletions src/rmi_theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ export const rmi_theme: CustomThemeConfig = {
'--theme-border-base': '1px',
// =~= Theme On-X Colors =~=
'--on-primary': '0 0 0',
'--on-secondary': '255 255 255',
'--on-tertiary': '255 255 255',
'--on-secondary': '0 0 0',
'--on-tertiary': '0 0 0',
'--on-success': '0 0 0',
'--on-warning': '0 0 0',
'--on-error': '0 0 0',
'--on-error': '255 255 255',
'--on-surface': '255 255 255',
// =~= Theme Colors =~=
// primary | #45CFCC
Expand All @@ -31,39 +31,39 @@ export const rmi_theme: CustomThemeConfig = {
'--color-primary-700': '52 155 153', // #349b99
'--color-primary-800': '41 124 122', // #297c7a
'--color-primary-900': '34 101 100', // #226564
// secondary | #58595B
'--color-secondary-50': '230 230 230', // #e6e6e6
'--color-secondary-100': '222 222 222', // #dedede
'--color-secondary-200': '213 214 214', // #d5d6d6
'--color-secondary-300': '188 189 189', // #bcbdbd
'--color-secondary-400': '138 139 140', // #8a8b8c
'--color-secondary-500': '88 89 91', // #58595B
'--color-secondary-600': '79 80 82', // #4f5052
'--color-secondary-700': '66 67 68', // #424344
'--color-secondary-800': '53 53 55', // #353537
'--color-secondary-900': '43 44 45', // #2b2c2d
// tertiary | #FFFFFF
'--color-tertiary-50': '255 255 255', // #ffffff
'--color-tertiary-100': '255 255 255', // #ffffff
'--color-tertiary-200': '255 255 255', // #ffffff
'--color-tertiary-300': '255 255 255', // #ffffff
'--color-tertiary-400': '255 255 255', // #ffffff
'--color-tertiary-500': '255 255 255', // #FFFFFF
'--color-tertiary-600': '230 230 230', // #e6e6e6
'--color-tertiary-700': '191 191 191', // #bfbfbf
'--color-tertiary-800': '153 153 153', // #999999
'--color-tertiary-900': '125 125 125', // #7d7d7d
// success | #99b083
'--color-success-50': '240 243 236', // #f0f3ec
'--color-success-100': '235 239 230', // #ebefe6
'--color-success-200': '230 235 224', // #e6ebe0
'--color-success-300': '214 223 205', // #d6dfcd
'--color-success-400': '184 200 168', // #b8c8a8
'--color-success-500': '153 176 131', // #99b083
'--color-success-600': '138 158 118', // #8a9e76
'--color-success-700': '115 132 98', // #738462
'--color-success-800': '92 106 79', // #5c6a4f
'--color-success-900': '75 86 64', // #4b5640
// secondary | #93aec6
'--color-secondary-50': '239 243 246', // #eff3f6
'--color-secondary-100': '233 239 244', // #e9eff4
'--color-secondary-200': '228 235 241', // #e4ebf1
'--color-secondary-300': '212 223 232', // #d4dfe8
'--color-secondary-400': '179 198 215', // #b3c6d7
'--color-secondary-500': '147 174 198', // #93aec6
'--color-secondary-600': '132 157 178', // #849db2
'--color-secondary-700': '110 131 149', // #6e8395
'--color-secondary-800': '88 104 119', // #586877
'--color-secondary-900': '72 85 97', // #485561
// tertiary | #768B9E
'--color-tertiary-50': '234 238 240', // #eaeef0
'--color-tertiary-100': '228 232 236', // #e4e8ec
'--color-tertiary-200': '221 226 231', // #dde2e7
'--color-tertiary-300': '200 209 216', // #c8d1d8
'--color-tertiary-400': '159 174 187', // #9faebb
'--color-tertiary-500': '118 139 158', // #768B9E
'--color-tertiary-600': '106 125 142', // #6a7d8e
'--color-tertiary-700': '89 104 119', // #596877
'--color-tertiary-800': '71 83 95', // #47535f
'--color-tertiary-900': '58 68 77', // #3a444d
// success | #00994D
'--color-success-50': '217 240 228', // #d9f0e4
'--color-success-100': '204 235 219', // #ccebdb
'--color-success-200': '191 230 211', // #bfe6d3
'--color-success-300': '153 214 184', // #99d6b8
'--color-success-400': '77 184 130', // #4db882
'--color-success-500': '0 153 77', // #00994D
'--color-success-600': '0 138 69', // #008a45
'--color-success-700': '0 115 58', // #00733a
'--color-success-800': '0 92 46', // #005c2e
'--color-success-900': '0 75 38', // #004b26
// warning | #ffe480
'--color-warning-50': '255 251 236', // #fffbec
'--color-warning-100': '255 250 230', // #fffae6
Expand All @@ -75,23 +75,23 @@ export const rmi_theme: CustomThemeConfig = {
'--color-warning-700': '191 171 96', // #bfab60
'--color-warning-800': '153 137 77', // #99894d
'--color-warning-900': '125 112 63', // #7d703f
// error | #df897b
'--color-error-50': '250 237 235', // #faedeb
'--color-error-100': '249 231 229', // #f9e7e5
'--color-error-200': '247 226 222', // #f7e2de
'--color-error-300': '242 208 202', // #f2d0ca
'--color-error-400': '233 172 163', // #e9aca3
'--color-error-500': '223 137 123', // #df897b
'--color-error-600': '201 123 111', // #c97b6f
'--color-error-700': '167 103 92', // #a7675c
'--color-error-800': '134 82 74', // #86524a
'--color-error-900': '109 67 60', // #6d433c
// error | #AB3C2C
'--color-error-50': '242 226 223', // #f2e2df
'--color-error-100': '238 216 213', // #eed8d5
'--color-error-200': '234 206 202', // #eaceca
'--color-error-300': '221 177 171', // #ddb1ab
'--color-error-400': '196 119 107', // #c4776b
'--color-error-500': '171 60 44', // #AB3C2C
'--color-error-600': '154 54 40', // #9a3628
'--color-error-700': '128 45 33', // #802d21
'--color-error-800': '103 36 26', // #67241a
'--color-error-900': '84 29 22', // #541d16
// surface | #003B63
'--color-surface-50': '217 226 232', // #d9e2e8
'--color-surface-100': '204 216 224', // #ccd8e0
'--color-surface-200': '191 206 216', // #bfced8
'--color-surface-300': '153 177 193', // #99b1c1
'--color-surface-400': '77 118 146', // #4d7692
'--color-surface-50': '255 255 255', // #ffffff
'--color-surface-100': '255 255 255', // #ffffff
'--color-surface-200': '244 247 249', // #f4f7f9
'--color-surface-300': '153 177 193', // #e9eff4
'--color-surface-400': '77 118 146', // #dfe7ee
'--color-surface-500': '0 59 99', // #003B63
'--color-surface-600': '0 53 89', // #003559
'--color-surface-700': '0 44 74', // #002c4a
Expand Down
4 changes: 4 additions & 0 deletions src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@
import { storePopup } from '@skeletonlabs/skeleton';
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });

//fonts
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/700.css';

async function downloadArchive() {
try {
const response = await fetch('data/archive.zip');
Expand Down
6 changes: 3 additions & 3 deletions src/routes/company_view.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@
<select class="select max-w-48 variant-outline-surface" id="asset_class_selector_landing">
<option value="Not_selected">Please select</option>
</select>
<button class="btn variant-filled-surface" id="go_button_landing">Go!</button>
<button class="btn variant-filled-secondary" id="go_button_landing">Go!</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -473,7 +473,7 @@
</div>
</div>
<div
class="alert-message sm:col-span-10 bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 hidden"
class="alert-message sm:col-span-10 bg-warning-300 border-t border-b border-warning-700 text-warning-900 px-4 py-3 hidden"
role="alert"
id="alert-message-parameters"
>
Expand Down Expand Up @@ -512,7 +512,7 @@
</div>

<div
class="alert-message bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 hidden"
class="alert-message bg-warning-300 border-t border-b border-warning-700 text-warning-900 px-4 py-3 hidden"
role="alert"
id="alert-message"
>
Expand Down
6 changes: 3 additions & 3 deletions src/routes/sector_view.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,7 @@
<select class="select max-w-48 variant-outline-surface" id="asset_class_selector_landing">
<option value="Not_selected">Please select</option>
</select>
<button class="btn variant-filled-surface" id="go_button_landing">Go!</button>
<button class="btn variant-filled-secondary" id="go_button_landing">Go!</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -580,7 +580,7 @@
</div>
</div>
<div
class="alert-message sm:col-span-10 bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 hidden"
class="alert-message sm:col-span-10 bg-warning-300 border-t border-b border-warning-700 text-warning-900 px-4 py-3 hidden"
role="alert"
id="alert-message-parameters"
>
Expand Down Expand Up @@ -646,7 +646,7 @@
</div>

<div
class="alert-message bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 hidden"
class="alert-message bg-warning-300 border-t border-b border-warning-700 text-warning-900 px-4 py-3 hidden"
role="alert"
id="alert-message"
>
Expand Down
Loading