From 94c27b0a8d035286ba6cd0abab08fe29a69e4e82 Mon Sep 17 00:00:00 2001 From: Kevin Date: Sat, 24 Jun 2023 19:41:50 +0200 Subject: [PATCH] Feat: Colored brew pages (#4) * Removed graph animation * Smoother graph by removing data point bubbles * Added relatime button which keeps reloading every 2 sec * Clear timeout when destroying/navigating away from page * Added primary & secondary colors to match label per brew * Only render graph if dataset is list of length * Also color mobile image container primary color of brew * Add white background on graphs because of low contrast secondary background color --- src/brews.json | 191 +++++++++++++++------------ src/lib/components/Graph.svelte | 12 +- src/routes/brews/[date]/+page.svelte | 31 +++-- src/routes/graphs/+page.svelte | 26 +++- 4 files changed, 148 insertions(+), 112 deletions(-) diff --git a/src/brews.json b/src/brews.json index 75a9c46..dc22a73 100644 --- a/src/brews.json +++ b/src/brews.json @@ -1,91 +1,110 @@ -[{ - "beer": { - "name": "Kveldsbris", - "brewery": "Kinn Bryggeri", - "category": "Pilsner/Lys Lager", - "description": "" +[ + { + "beer": { + "name": "Kveldsbris", + "brewery": "Kinn Bryggeri", + "category": "Belgian Pale Ale", + "description": "" + }, + "date": "1682272800", + "by": ["Alf", "Kevin"], + "abv": "5.6", + "description": "Kveldsbris - Evening Breeze - is offered as a clean, refreshing and not-too-alcoholic Belgian ale. It has a fine balance of Belgian yeastiness with the premier hop varieties from three wildly different districts: East Kent Goldings on England's south coast, Saaz from Zatec in the Czech Republic, and Amarillo from Yakima Valley in the United States of America. Kveldsbris is a most versatile table ale that can cope with more spiciness and richness than a regular wheat beer.", + "image": "kinn_kveldsbris.png", + "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", + "order_page": "https://oslo.bryggselv.no/finest/104923/finest-originals-utepils-allgrain-ølsett-25-liter", + "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024", + "color_primary": "#FCF28F", + "color_secondary": "rgba(252, 242, 143, 0.2)" }, - "date": "1682272800", - "by": ["Alf", "Kevin"], - "abv": "5.6", - "description": "", - "image": "kinn_kveldsbris.png", - "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", - "order_page": "https://oslo.bryggselv.no/finest/104923/finest-originals-utepils-allgrain-ølsett-25-liter", - "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024" -}, { - "beer": { - "name": "FUCK YEAH IPA", - "brewery": "Finest", - "category": "American IPA", - "description": "" + { + "beer": { + "name": "FUCK YEAH IPA", + "brewery": "Finest", + "category": "American IPA", + "description": "" + }, + "date": "1648922400", + "by": ["Alf", "Kevin"], + "abv": "7", + "description": "", + "image": "finest_fuck-yeah-IPA.jpg", + "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", + "order_page": "https://web.archive.org/web/20210225043236/https://www.bryggselv.no/finest/105943/fuck-yeah-ipa-ultra-american-west-coast-ipa-25-liter", + "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024", + "color_primary": "#0169A6", + "color_secondary": "rgba(1, 105, 166, 0.2)" }, - "date": "1648922400", - "by": ["Alf", "Kevin"], - "abv": "7", - "description": "", - "image": "finest_fuck-yeah-IPA.jpg", - "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", - "order_page": "https://web.archive.org/web/20210225043236/https://www.bryggselv.no/finest/105943/fuck-yeah-ipa-ultra-american-west-coast-ipa-25-liter", - "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024" -}, { - "beer": { - "name": "Love in a canoe", - "brewery": "Finest", - "category": "Mexican Lager", - "description": "" + { + "beer": { + "name": "Love in a canoe", + "brewery": "Finest", + "category": "Mexican Lager", + "description": "" + }, + "date": "1646420400", + "by": ["Alf", "Kevin"], + "abv": "4.7", + "description": "", + "image": "finest_love-in-a-canoe.jpeg", + "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", + "order_page": "https://oslo.bryggselv.no/finest/104092/love-in-a-canoe-allgrain-ølsett-25-liter", + "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024", + "color_primary": "#F7F0DF", + "color_secondary": "rgba(247, 240, 223, 0.2)" }, - "date": "1646420400", - "by": ["Alf", "Kevin"], - "abv": "4.7", - "description": "", - "image": "finest_love-in-a-canoe.jpeg", - "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", - "order_page": "https://oslo.bryggselv.no/finest/104092/love-in-a-canoe-allgrain-ølsett-25-liter", - "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024" -}, { - "beer": { - "name": "Utepils", - "brewery": "Finest", - "category": "", - "description": "" + { + "beer": { + "name": "Utepils", + "brewery": "Finest", + "category": "", + "description": "" + }, + "date": "1637694000", + "by": ["Alf", "Kevin"], + "abv": "5.0", + "description": "", + "image": "finest_utepils.jpeg", + "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", + "order_page": "https://www.bryggselv.no/finest/105932/kinn-kveldsbris-allgrain-ølsett-25-liter", + "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024", + "color_primary": "#F4E9D3", + "color_secondary": "rgba(244, 233, 211, 0.2)" }, - "date": "1637694000", - "by": ["Alf", "Kevin"], - "abv": "5.0", - "description": "", - "image": "finest_utepils.jpeg", - "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", - "order_page": "https://www.bryggselv.no/finest/105932/kinn-kveldsbris-allgrain-ølsett-25-liter", - "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024" -}, { - "beer": { - "name": "HELLES Tysk Lager", - "brewery": "Münchener Helles", - "category": "Tysk Lager", - "description": "" + { + "beer": { + "name": "HELLES Tysk Lager", + "brewery": "Münchener Helles", + "category": "Tysk Lager", + "description": "" + }, + "date": "1629396000", + "by": ["Adrian", "Kevin", "Mats"], + "abv": "5.3", + "description": "", + "image": "helles_tysk-lager.jpeg", + "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", + "order_page": "https://oslo.bryggselv.no/finest/106231/finest-helles-allgrain-ølsett-25-liter", + "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024", + "color_primary": "#C5893D", + "color_secondary": "rgba(197, 137, 61, 0.2)" }, - "date": "1629396000", - "by": ["Adrian", "Kevin", "Mats"], - "abv": "5.3", - "description": "", - "image": "helles_tysk-lager.jpeg", - "recipe": "https://docs.google.com/document/d/1FL7ibXxW1r_zFNLK338pyjfMiCCaTOi2fzuMoInA3dQ", - "order_page": "https://oslo.bryggselv.no/finest/106231/finest-helles-allgrain-ølsett-25-liter", - "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024" -}, { - "beer": { - "name": "Lazy Days Weiss", - "brewery": "Finest", - "category": "Weissbier", - "description": "" - }, - "date": "1621706400", - "by": ["Alf", "Kevin", "Kristian"], - "abv": "5.3", - "description": "", - "image": "finest_lazy-days.jpeg", - "recipe": "https://docs.google.com/document/u/0/d/1I6qX4l4jDzK51GxBt3IdEv-HyNQHAx8ijc5dMlG1Xkk", - "order_page": "https://oslo.bryggselv.no/finest/106231/finest-helles-allgrain-ølsett-25-liter", - "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024" -}] \ No newline at end of file + { + "beer": { + "name": "Lazy Days Weiss", + "brewery": "Finest", + "category": "Weissbier", + "description": "" + }, + "date": "1621706400", + "by": ["Alf", "Kevin", "Kristian"], + "abv": "5.3", + "description": "", + "image": "finest_lazy-days.jpeg", + "recipe": "https://docs.google.com/document/u/0/d/1I6qX4l4jDzK51GxBt3IdEv-HyNQHAx8ijc5dMlG1Xkk", + "order_page": "https://oslo.bryggselv.no/finest/106231/finest-helles-allgrain-ølsett-25-liter", + "untapped": "https://untappd.com/b/kinn-bryggeri-kveldsbris/695024", + "color_primary": "#6C8D9E", + "color_secondary": "rgba(108, 141, 158, 0.2)" + } +] diff --git a/src/lib/components/Graph.svelte b/src/lib/components/Graph.svelte index 5d604de..5954838 100644 --- a/src/lib/components/Graph.svelte +++ b/src/lib/components/Graph.svelte @@ -94,17 +94,16 @@ function renderChart() { const context: CanvasRenderingContext2D | null = chartCanvas.getContext('2d'); - if (!context) return + if (!context) return; // create labels and singular dataset (data) const labels: string[] = dateLabelsFormatedBasedOnResolution(dataFrames); const data: ChartDataset = { data: dataFrames.map((frame) => frame.value), - borderWidth: 3, + borderWidth: 3 }; // based on name, add label and color options to dataset - setDataColorAndName(data) - + setDataColorAndName(data); // create chart instance, most here is chart options chart = new Chart(context, { @@ -114,9 +113,12 @@ datasets: [data] }, options: { + animation: { + duration: 0 + }, elements: { point: { - radius: 2 + radius: 0 }, line: { tension: 0.5 diff --git a/src/routes/brews/[date]/+page.svelte b/src/routes/brews/[date]/+page.svelte index 7bff593..b217484 100644 --- a/src/routes/brews/[date]/+page.svelte +++ b/src/routes/brews/[date]/+page.svelte @@ -5,8 +5,8 @@ export let data; let brew = data.brew; - let temperatureData: IChartFrame[] = data.graphData.temperature; - let humidityData: IChartFrame[] = data.graphData.humidity; + let temperatureData: IChartFrame[] = data?.graphData?.temperature; + let humidityData: IChartFrame[] = data?.graphData?.humidity; const dateFormat: Intl.DateTimeFormatOptions = { weekday: 'long', @@ -20,11 +20,11 @@
-
+
Tuborg Sommerøl
-
+

{brew.beer.name}

@@ -57,25 +57,22 @@ -
+
Tuborg Sommerøl
-

Historie

-

- I 1873 ble Tuborg Bryggeri grunnlagt av Carl Frederik Tietgen på Hellerud i Danmark. I 1970 - ble Tuborg Bryggeri en del av Carlsberg. -

+

Beskrivelse

+

{brew.description}

- {#if temperatureData} + {#if temperatureData && temperatureData?.length}

Temperature during fermentation

{/if} - {#if humidityData} + {#if humidityData && temperatureData?.length}

Humidity during carbonation

@@ -134,7 +131,6 @@ display: flex; justify-content: center; min-height: 1px; - background-color: #93a4a0; padding: 3rem 1rem; @include tablet { @@ -144,7 +140,8 @@ } @include mobile { - margin: 2rem 0; + width: calc(100% + 2rem); + margin: 2rem 0 2rem -1rem; } img { @@ -234,4 +231,10 @@ } } } + + :global(canvas) { + background-color: white; + border-radius: 0.5rem; + padding: 0 0.2rem; + } diff --git a/src/routes/graphs/+page.svelte b/src/routes/graphs/+page.svelte index 4208fba..9de9552 100644 --- a/src/routes/graphs/+page.svelte +++ b/src/routes/graphs/+page.svelte @@ -1,5 +1,5 @@
{#each buttonMinutes as button} - {button.name} {/each}