Add heatmap and pastel greens color palette

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

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,

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;
+  }
+}

reports/pages/+layout.svelte

@@ -0,0 +1,10 @@
+<script>
+    import '@evidence-dev/tailwind/fonts.css';
+    import '../app.css';
+    import { EvidenceDefaultLayout } from '@evidence-dev/core-components';
+    export let data;
+</script>
+
+<EvidenceDefaultLayout {data} title="🌲 dbtree 🌳" githubRepo="https://github.com/gwenwindflower/dbtree">
+    <slot slot="content" />
+</EvidenceDefaultLayout>

reports/pages/index.md

@@ -2,22 +2,55 @@
 title: 🌲🌳 Trees of San Francisco 🚃🌉
 ---
 
+<script>
+    let myColors = [
+      "#D7E4C0",
+      "#C6DCBA",
+      "#BBC3A4",
+      "#B3A398",
+      "#638889"
+    ]
+</script>
+
 ## Species counts
 
 <BarChart
-  data={species_counts}
+  data={common_species_counts}
   x="species"
   y="count_of_trees"
   title="Most common species"
+  subtitle="Species with more than 3000 trees"
+  colorPalette={myColors}
 />
 
-```sql species_counts
+```sql common_species_counts
 select
     species,
     count_of_trees,
 
 from dbtree.species
 
 where count_of_trees > 3000
+```
+
+<CalendarHeatmap
+    data={trees_planted_2023}
+    date="planted_at_date"
+    value=count_of_trees
+    title="Trees Planted"
+    subtitle="Heatmap of trees planted in 2023"
+    yearLabel=false
+    colorPalette={myColors}
+/>
+
+```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
 ```