Skip to content

Commit

Permalink
Fix dark mode colors, add Provider column
Browse files Browse the repository at this point in the history
  • Loading branch information
@juberti
juberti committed Apr 22, 2024
1 parent 616806c commit 7b6cade
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 231 deletions.
120 changes: 56 additions & 64 deletions website/src/components/DataGrid.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,27 @@ Astro.response.headers.set('Cache-Control', 'no-cache');
<style>
.ag-theme-quartz {
font-family: monospace;
--ag-background-color: rgb(245 245 244);
--ag-header-background-color: rgb(245 245 244);
--ag-odd-row-background-color: #F1F1F1;
--ag-background-color: #f5f5f4;
--ag-header-background-color: white;
--ag-odd-row-background-color: white;
--good-color: #B9F6CE;
--bad-color: #FDC9C9;
}

.ag-theme-quartz-dark {
font-family: monospace;
--ag-background-color: rgb(28 25 23);
--ag-header-background-color: rgb(28 25 23);
--ag-odd-row-background-color: #000000;
--ag-background-color: rgb(30 41 59);
--ag-header-background-color: rgb(55 65 81);
--ag-odd-row-background-color: rgb(55 65 81);
--good-color: rgb(22 101 52);
--bad-color: rgb(101 22 22);
}

.good {
background-color: var(--good-color);
}
.bad {
background-color: var(--bad-color);
}
</style>

Expand Down Expand Up @@ -51,11 +62,11 @@ Astro.response.headers.set('Cache-Control', 'no-cache');


<div id="myGrid" class="ag-theme-quartz text-sm bg-stone-100 font-mono text-gray-950 dark:bg-stone-900 dark:text-white w-full"></div>
<div class="mt-4 flex flex-row justify-between text-sm items-center">
<div id="myFooter" class="ag-theme-quartz mt-4 flex flex-row justify-between text-sm items-center">
<div>
<p class="inline-flex">
<div class="inline-flex items-center"><span class="text-center rounded-md bg-[#B9F6CE] px-2 py-1 text-sm ring-1 ring-inset ring-gray-500/10 w-14">Green</span><span>&nbsp;= fastest,</span></div>
<div class="inline-flex items-center"><span class="text-center rounded-md bg-[#FDC9C9] px-2 py-1 text-sm ring-1 ring-inset ring-gray-500/10 w-14">Red</span><span>&nbsp;= slowest.</span></div>
<div class="inline-flex items-center"><span class="good text-center rounded-md px-2 py-1 text-sm ring-1 ring-inset ring-gray-500/10 w-14">Green</span><span>&nbsp;= fastest,</span></div>
<div class="inline-flex items-center"><span class="bad text-center rounded-md px-2 py-1 text-sm ring-1 ring-inset ring-gray-500/10 w-14">Red</span><span>&nbsp;= slowest.</span></div>
</p>
</div>
<div id="lastUpdated" class=" font-mono italic text-right"></div>
Expand All @@ -64,17 +75,16 @@ Astro.response.headers.set('Cache-Control', 'no-cache');

<script>
import { createGrid } from 'ag-grid-community';
import { BenchmarkRegions, gridOptions, WorstColor, BestColor, TTFTDefinition, TPSDefinition, TotalTimeDefinition } from '@/utils/DataGridDefinitions.ts';
import { generateColor } from '@/utils/DataGridColors.js';
import { BenchmarkRegions, gridOptionsBase, TTFTDefinition, TPSDefinition, TotalTimeDefinition } from '@/utils/DataGridDefinitions.ts';
import { fetchLocalJsonFile } from '@/utils/FetchData.ts';

let gridApi;
const localData = '../../data/latest.json';
let gridData = [];
const gridData = await fetchLocalJsonFile(localData);
let selectedRegion = 'sea';
let selectedRegionData = [];

function setGridData(region, gridData) {
function updateRegion(region: string) {
selectedRegion = region;
gridData.forEach((regionData) => {
if (regionData.region === region) {
Expand All @@ -87,68 +97,44 @@ Astro.response.headers.set('Cache-Control', 'no-cache');
// Returns the background color for the cell based on the value
function colFunction(params) {
const currentColumnID = params.column.colId;
TTFTDefinition.bestPerformance;
TPSDefinition.bestPerformance;
TotalTimeDefinition.bestPerformance;

// TTFT (Lower is better)
if (currentColumnID == 'ttft') {
if (params.value <= TTFTDefinition.bestPerformance) {
return { backgroundColor: BestColor.hex };
} else if (params.value >= TTFTDefinition.worstPerformance) {
return { backgroundColor: WorstColor.hex };
}
}
// TPS (Higher is better)
else if (currentColumnID == 'tps') {
if (params.value >= TPSDefinition.bestPerformance) {
return { backgroundColor: BestColor.hex };
} else if (params.value <= TPSDefinition.worstPerformance) {
return { backgroundColor: WorstColor.hex };
const style = getComputedStyle(myGrid);
const map = {
"ttft": TTFTDefinition,
"tps": TPSDefinition,
"total_time": TotalTimeDefinition
};
const def = map[currentColumnID];
if (def) {
if (params.value <= def.bestPerformance) {
return {backgroundColor: style.getPropertyValue('--good-color')};
} else if (params.value >= def.worstPerformance) {
return {backgroundColor: style.getPropertyValue('--bad-color')};
}
}
// Total Time (Lower is better)
else if (currentColumnID == 'total_time') {
if (params.value <= TotalTimeDefinition.bestPerformance) {
return { backgroundColor: BestColor.hex };
} else if (params.value >= TotalTimeDefinition.worstPerformance) {
return { backgroundColor: WorstColor.hex };
}
}

return { };
};

function setCellFormatter() {
const columnDefs = gridApi.getColumnDefs();
columnDefs.forEach((colDef, index) => {
// Only apply the formatter for ttft, tps
if(colDef.colId == 'ttft' || colDef.colId == 'tps' || colDef.colId == 'total_time') {
colDef.cellStyle = colFunction;
}
});
gridApi.setGridOption("columnDefs", columnDefs);
};
return {};
}

async function onDOMContentLoaded() {
gridData = await fetchLocalJsonFile(localData);

// setup the grid after the page has finished loading
var gridDiv = document.querySelector("#myGrid");
const gridDiv = document.querySelector("#myGrid") as HTMLElement;
const gridOptions = gridOptionsBase;
gridOptions.columnDefs.forEach((columnDef) => {
columnDef.cellStyle = colFunction;
});

gridApi = createGrid(gridDiv, gridOptions);
setGridData(selectedRegion, gridData); // default to sea region on load
setCellFormatter();
updateRegion(selectedRegion); // default to sea region on load

// Add text for our last updated date
const ourDiv = document.getElementById('lastUpdated');
// ourDiv.classList.add('text-base', 'font-mono', 'italic', 'text-right');
ourDiv.innerText = `Last Updated: ${gridData[0].time.split('T')[0]}`;
ourDiv!.innerText = `Last Updated: ${gridData[0].time.split('T')[0]}`;

// Add an event listener to the radio buttons to filter the grid data
document.getElementById('benchmarks').addEventListener('change', function(event) {
document.getElementById('benchmarks')!.addEventListener('change', function(event) {
// Filter the grid data based on the selected region
if (event.target.name === 'selectedRegion') {
setGridData(event.target.value, gridData);
updateRegion(event.target.value);
}
});
}
Expand All @@ -161,7 +147,13 @@ Astro.response.headers.set('Cache-Control', 'no-cache');
onDOMContentLoaded();
}

// Watch for dark mode changes and refresh the grid accordingly
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'class') {
gridApi.refreshCells({ force: true });
}
});
});
observer.observe(document.documentElement, { attributes: true });
</script>



28 changes: 10 additions & 18 deletions website/src/components/Navbar.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,15 @@ const data = await fs.readFile(url, 'utf8');
</Section>

<script>
function setDarkMode(isDarkMode: boolean) {
localStorage.setItem('dark-mode', isDarkMode.toString());
document.documentElement.classList.toggle('dark', isDarkMode);
const elements = [document.getElementById('myGrid'), document.getElementById('myFooter')];
elements.forEach((el) => {
el.classList.toggle('ag-theme-quartz-dark', isDarkMode);
el.classList.toggle('ag-theme-quartz', !isDarkMode);
});
}
const lightSwitches = document.querySelectorAll('.light-switch');
if (lightSwitches.length > 0) {
lightSwitches.forEach((lightSwitch: any, i) => {
Expand All @@ -57,24 +66,7 @@ const data = await fs.readFile(url, 'utf8');
el.checked = checked;
}
});
if (lightSwitch.checked) { // Dark mode
document.documentElement.classList.add('dark');
localStorage.setItem('dark-mode', 'true');

// Change the data grid
const myElement = document.getElementById('myGrid');
myElement.classList.remove('ag-theme-quartz');
myElement.classList.add('ag-theme-quartz-dark');

} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('dark-mode', 'false');

// Change the data grid
const myElement = document.getElementById('myGrid');
myElement.classList.remove('ag-theme-quartz-dark');
myElement.classList.add('ag-theme-quartz');
}
setDarkMode(checked);
});
});
}
Expand Down
44 changes: 16 additions & 28 deletions website/src/layouts/Base.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,35 +23,23 @@ const {
<meta name="description" content={description} />
<meta name="author" content={AppConfig.author} />

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛠️</text></svg>">

<script>
if (
localStorage.getItem('dark-mode') === 'true' ||
(!('dark-mode' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
localStorage.setItem('dark-mode', 'true');
document.querySelector('html')?.classList.add('dark');

// Change the data grid
const myElement = document.getElementById('myGrid');
myElement.classList.remove('ag-theme-quartz');
myElement.classList.add('ag-theme-quartz-dark');

} else {
localStorage.setItem('dark-mode', 'false');
document.querySelector('html')?.classList.remove('dark');

// Change the data grid
const myElement = document.getElementById('myGrid');
myElement.classList.remove('ag-theme-quartz-dark');
myElement.classList.add('ag-theme-quartz');
}
</script>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛠️</text></svg>">

<script>
const isDarkMode = localStorage.getItem('dark-mode') === 'true' ||
(!('dark-mode' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches);
localStorage.setItem('dark-mode', isDarkMode.toString());
document.querySelector('html')?.classList.toggle('dark', isDarkMode);
const elements = [document.getElementById('myGrid'), document.getElementById('myFooter')];
elements.forEach((el) => {
el.classList.toggle('ag-theme-quartz', !isDarkMode);
el.classList.toggle('ag-theme-quartz-dark', isDarkMode);
});
</script>
</head>
<body
class="flex min-h-screen flex-col bg-stone-100 font-mono text-gray-950 dark:bg-stone-900 dark:text-white"
<body"
class="flex min-h-screen flex-col bg-stone-100 font-mono text-gray-950 dark:bg-gray-800 dark:text-slate-50"
>
<Navbar />
<div class="flex-1 text-sm">
Expand Down
56 changes: 0 additions & 56 deletions website/src/utils/DataGridColors.js
View file

This file was deleted.

Loading

0 comments on commit 7b6cade

Please sign in to comment.