Implement date colors
This commit is contained in:
@@ -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>
|
||||||
|
@@ -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>
|
||||||
|
@@ -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
|
||||||
|
Reference in New Issue
Block a user