Implement date colors

This commit is contained in:
2024-06-12 20:01:01 +02:00
parent c83f51a00b
commit 057377186a
3 changed files with 21 additions and 4 deletions

View File

@@ -4,6 +4,7 @@
export let item: Food export let item: Food
export let energyColor: string export let energyColor: string
export let nameColor: string export let nameColor: string
export let dateColor: string
let amount: string = item.amount.toString() let amount: string = item.amount.toString()
let per100: string = item.per100?.toString() ?? '' let per100: string = item.per100?.toString() ?? ''
@@ -39,6 +40,7 @@
<template> <template>
<tr class="border-b border-gray-200 dark:border-gray-700 font-bold text-lg"> <tr class="border-b border-gray-200 dark:border-gray-700 font-bold text-lg">
<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800" <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800"
style="color: {dateColor}"
scope="row"> scope="row">
{item.date} {item.date}
</th> </th>

View File

@@ -39,6 +39,20 @@
// @ts-ignore // @ts-ignore
return itemColors.get(item.food) return itemColors.get(item.food)
} }
const dateColors: Map<string, string> = new Map<string, string>()
function getDateColor(item: Food): string {
if (!item) return GenerateColor()
if (!item.date) return GenerateColor()
const date = item.date.toString().split(" ")[0]
if (!date) return GenerateColor()
if (!dateColors.has(date)) dateColors.set(date, GenerateColor())
// THERE'S NOTHING UNDEFINED HERE
// WE GOT RID OF UNDEFINED ON LINE 33
// ASSHOLE
// @ts-ignore
return dateColors.get(date)
}
</script> </script>
<template> <template>
@@ -70,7 +84,7 @@
<tbody> <tbody>
<EmptyFoodComp /> <EmptyFoodComp />
{#each items as f} {#each items as f}
<FoodComp item="{f}" energyColor="{lerp(f)}" nameColor="{getNameColor(f)}" /> <FoodComp item="{f}" energyColor="{lerp(f)}" nameColor="{getNameColor(f)}" dateColor="{getDateColor(f)}" />
{/each} {/each}
</tbody> </tbody>
</table> </table>

View File

@@ -81,15 +81,15 @@ function GenerateRandomHSL(): Color {
const existingColors: Color[] = [] const existingColors: Color[] = []
function GenerateColor(): string { function GenerateColor(): string {
const minDistance = 200 const minDistance = 15
let newColor: Color let newColor: Color
let isDistinct = false let isDistinct = false
let iterations = 0 let iterations = 0
while (!isDistinct) { while (!isDistinct) {
iterations++ iterations++
if (iterations > 100) { if (iterations > 1000) {
console.error('Failed to generate a distinct color after 100 iterations') console.error('Failed to generate a distinct color after 1000 iterations')
break break
} }
newColor = GenerateRandomHSL() newColor = GenerateRandomHSL()
@@ -101,6 +101,7 @@ function GenerateColor(): string {
break break
} }
} }
existingColors.push(newColor)
} }
// We can not reach this point without having a color generated // We can not reach this point without having a color generated