From ee649f7b279d2655846592d71d499e7091ea87d2 Mon Sep 17 00:00:00 2001 From: gwen windflower Date: Sat, 16 Mar 2024 11:56:59 -0500 Subject: [PATCH] Add heatmap and pastel greens color palette --- Taskfile.yml | 3 + models/staging/stg_sf_trees.sql | 2 +- reports/app.css | 309 ++++++++++++++++++++++++++++++++ reports/pages/+layout.svelte | 10 ++ reports/pages/index.md | 37 +++- 5 files changed, 358 insertions(+), 3 deletions(-) create mode 100644 reports/app.css create mode 100644 reports/pages/+layout.svelte diff --git a/Taskfile.yml b/Taskfile.yml index 5c140c3..5391994 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -1,6 +1,9 @@ version: "3" tasks: + t: + cmds: + - source .venv/bin/activate && dbt build bi: cmds: - npm --prefix ./reports run sources && npm --prefix ./reports run dev diff --git a/models/staging/stg_sf_trees.sql b/models/staging/stg_sf_trees.sql index 3106b70..dd2fc72 100644 --- a/models/staging/stg_sf_trees.sql +++ b/models/staging/stg_sf_trees.sql @@ -18,7 +18,7 @@ staged as ( planttype as plant_type, qcaretaker as caretaker, qcareassistant as care_assistant, - plantdate as plant_date, + plantdate as planted_at_date, dbh, plotsize as plot_size, permitnotes as permit_notes, diff --git a/reports/app.css b/reports/app.css new file mode 100644 index 0000000..514ce9b --- /dev/null +++ b/reports/app.css @@ -0,0 +1,309 @@ +/* Write your global styles here, in PostCSS syntax */ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + html { + @apply scroll-smooth; + } + + body { + @apply select-none; + } + + /* osx style scrollbars */ + .pretty-scrollbar { + scrollbar-width: thin; + scrollbar-color: theme("colors.gray.200") transparent; + } + + .pretty-scrollbar::-webkit-scrollbar { + height: 0.75rem; + width: 6px; + } + + .pretty-scrollbar::-webkit-scrollbar-track { + background-color: transparent; + } + + .pretty-scrollbar::-webkit-scrollbar-thumb { + background-color: transparent; + border-radius: 7px; + } + + .pretty-scrollbar:hover::-webkit-scrollbar-thumb { + background-color: theme("colors.gray.200"); + } + + /* remove user agent styles for select */ + select { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + } +} + +@layer components { + .markdown { + @apply leading-normal font-mono text-base antialiased text-gray-700; + } + + img.markdown { + @apply mx-auto h-auto max-w-full rounded-lg; + } + + article.markdown a.markdown { + @apply text-blue-600 underline decoration-transparent hover:decoration-blue-600 transition-all duration-200 !important; + } + + p.markdown, + ul.markdown, + ol.markdown { + margin-block-end: 1.2em; + margin-block-start: 0em; + } + + /* lists */ + + ol.markdown { + @apply list-decimal ps-6; + } + ul.markdown { + @apply list-disc ps-6; + } + + /* 1st level list */ + ul.markdown, + ol.markdown { + /* 2nd level unordered list */ + & ul.markdown { + @apply list-circle; + } + /* 2nd level ordered list */ + & ol.markdown { + @apply list-lower-alpha; + } + + /* any 2nd level list */ + & ul.markdown, + & ol.markdown { + @apply mt-1; + margin-block-end: 0em; + + /* 3rd level unordered list */ + & ul.markdown { + @apply list-square; + } + /* 3rd level ordered list */ + & ol.markdown { + @apply list-lower-roman; + } + } + + li.markdown { + @apply list-item; + text-align: -webkit-match-parent; + + & + li.markdown { + @apply mt-1; + } + } + } + ol.markdown > li.markdown::marker { + @apply text-gray-800; + } + + ul.markdown > li.markdown::marker { + @apply text-gray-800; + } + + h1.markdown, + h2.markdown, + h3.markdown, + h4.markdown, + h5.markdown, + h6.markdown { + @apply scroll-mt-14 break-inside-avoid font-mono; + /* ensure that table of contents links scroll with room for the header */ + } + + h1.title:first-of-type, + h1.markdown:first-of-type { + @apply mt-1 mb-2; + } + + h1.title { + @apply mt-5 mb-1 text-2xl tracking-wide font-bold text-gray-800 break-inside-avoid; + } + + h1.markdown, + h1.markdown > a.markdown { + @apply mt-5 mb-1 text-2xl tracking-wide font-bold text-gray-800 break-inside-avoid; + } + + h2.markdown, + h2.markdown > a.markdown { + @apply mt-3 mb-1 text-xl font-semibold text-gray-800; + } + + h3.markdown, + h3.markdown > a.markdown { + @apply mt-2 mb-1 font-semibold text-base text-gray-800; + } + + h4.markdown, + h4.markdown > a.markdown { + @apply mt-1 text-sm font-semibold text-gray-800; + } + + h5.markdown, + h5.markdown > a.markdown { + @apply mt-1 text-xs font-semibold text-gray-800; + } + + h6.markdown, + h6.markdown > a.markdown { + @apply mt-1 text-xs text-gray-950; + } + + hr.markdown { + @apply h-px my-8 max-w-xl mx-auto bg-gray-200 border-0; + } + + code.markdown { + @apply font-mono text-gray-800 text-sm bg-gray-50 border rounded px-1 select-all py-0.5; + } + + form code { + font-size: unset; + } + + blockquote.markdown { + @apply border-l-4 border-gray-300 pl-3 my-8; + } + + blockquote.markdown * { + @apply text-gray-500; + } + + table.markdown { + @apply min-w-full border-collapse text-center mx-auto my-5; + } + + th.markdown { + @apply text-sm text-gray-800 font-medium border-b border-gray-800 py-0 px-2 text-ellipsis overflow-hidden; + } + + td.markdown { + @apply text-sm text-gray-800 py-1 px-2 overflow-hidden text-ellipsis; + } +} + +:root { + /* Layout header height */ + --header-height: 3.5rem; + /* Font stacks */ + --monospace-font-family: theme(fontFamily.mono); + --ui-font-family: theme(fontFamily.mono); + --ui-font-family-compact: theme(fontFamily.mono); + --color1: theme(colors.color.1); + --color2: theme(colors.color.2); + --color3: theme(colors.color.3); + --color4: theme(colors.color.4); + --color5: theme(colors.color.5); + --color6: theme(colors.color.6); + --color7: theme(colors.color.7); + --color8: theme(colors.color.8); + --color9: theme(colors.color.9); + --color10: theme(colors.color.10); + --color11: theme(colors.color.11); + --color12: theme(colors.color.12); + --color13: theme(colors.color.13); + --color14: theme(colors.color.14); + --color15: theme(colors.color.15); + --color16: theme(colors.color.16); + --color17: theme(colors.color.17); + --color18: theme(colors.color.18); + --color19: theme(colors.color.19); + --color20: theme(colors.color.20); + + /* Colour System */ + --blue-50: theme(colors.blue.50); + --blue-100: theme(colors.blue.100); + --blue-200: theme(colors.blue.200); + --blue-300: theme(colors.blue.300); + --blue-400: theme(colors.blue.400); + --blue-500: theme(colors.blue.500); + --blue-600: theme(colors.blue.600); + --blue-700: theme(colors.blue.700); + --blue-800: theme(colors.blue.800); + --blue-900: theme(colors.blue.900); + --blue-999: theme(colors.blue.950); + --blue-link: theme(colors.blue.700); + --green-50: theme(colors.green.50); + --green-100: theme(colors.green.100); + --green-200: theme(colors.green.200); + --green-300: theme(colors.green.300); + --green-400: theme(colors.green.400); + --green-500: theme(colors.green.500); + --green-600: theme(colors.green.600); + --green-700: theme(colors.green.700); + --green-800: theme(colors.green.800); + --green-900: theme(colors.green.900); + --green-999: theme(colors.green.950); + --grey-50: theme(colors.gray.50); + --grey-100: theme(colors.gray.100); + --grey-200: theme(colors.gray.200); + --grey-300: theme(colors.gray.300); + --grey-400: theme(colors.gray.400); + --grey-500: theme(colors.gray.500); + --grey-600: theme(colors.gray.600); + --grey-700: theme(colors.gray.700); + --grey-800: theme(colors.gray.800); + --grey-900: theme(colors.gray.900); + --grey-999: theme(colors.gray.950); + --red-50: theme(colors.red.50); + --red-100: theme(colors.red.100); + --red-200: theme(colors.red.200); + --red-300: theme(colors.red.300); + --red-400: theme(colors.red.400); + --red-500: theme(colors.red.500); + --red-600: theme(colors.red.600); + --red-700: theme(colors.red.700); + --red-800: theme(colors.red.800); + --red-900: theme(colors.red.900); + --red-999: theme(colors.red.950); + --yellow-50: theme(colors.yellow.50); + --yellow-100: theme(colors.yellow.100); + --yellow-200: theme(colors.yellow.200); + --yellow-300: theme(colors.yellow.300); + --yellow-400: theme(colors.yellow.400); + --yellow-500: theme(colors.yellow.500); + --yellow-600: theme(colors.yellow.600); + --yellow-700: theme(colors.yellow.700); + --yellow-800: theme(colors.yellow.800); + --yellow-900: theme(colors.yellow.900); + --yellow-999: theme(colors.yellow.950); +} + +@media print { + html { + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + + h1::after, + h2::after, + h3::after { + content: ""; + display: block; + height: 100px; + margin-bottom: -100px; + } + + article { + orphans: 2; + widows: 2; + } +} diff --git a/reports/pages/+layout.svelte b/reports/pages/+layout.svelte new file mode 100644 index 0000000..f4f4220 --- /dev/null +++ b/reports/pages/+layout.svelte @@ -0,0 +1,10 @@ + + + + + diff --git a/reports/pages/index.md b/reports/pages/index.md index 30a5d46..0d3bfd2 100644 --- a/reports/pages/index.md +++ b/reports/pages/index.md @@ -2,16 +2,28 @@ title: 🌲🌳 Trees of San Francisco 🚃🌉 --- + + ## Species counts -```sql species_counts +```sql common_species_counts select species, count_of_trees, @@ -19,5 +31,26 @@ select from dbtree.species where count_of_trees > 3000 +``` + + + +```sql trees_planted_2023 +select + planted_at_date, + count(*) as count_of_trees, + +from dbtree.trees + +where planted_at_date between '2023-01-01' and '2023-12-31' +group by 1 ```