Feature/no ref/add backend timeline

.github/workflows/quarto_netlify.yml

@@ -21,8 +21,15 @@ jobs:
     env:
       BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
       NETLIFY_SITE_ID: 397b6416-708f-4133-afe9-9a07ed2e03bf
+      SUPABASE_URL: https://bleficzaoyltozjjndha.supabase.co
+      SUPABASE_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY  # ${{ secrets.SUPABASE_KEY }}
 
     steps:
+      - name: setup os env
+        run: |
+          export SUPABASE_URL=${{ env.SUPABASE_URL }} && \
+          export SUPABASE_KEY=${{ env.SUPABASE_KEY }}
+
       - uses: actions/checkout@v4
         with:
           submodules: recursive

results/index.qmd

@@ -13,12 +13,73 @@ listing:
     page-size: 100
     filter-ui: true
 toc: false
-css: [../style/style-hero.css, tasks.css]
+execute:
+  echo: false
+css: [../style/style-hero.css, tasks.css, milestones.css]
 ---
 
+:::{#timeline}
+
+## Timeline
+
+:::
+
+
 :::{#tasks}
 :::
 
 ## Additional information
 
 * [Task quality control](quality_control.qmd)
+
+
+<!-- add timeline in D3 -->
+
+
+
+```{R env-variables}
+supabase_url <- Sys.getenv("SUPABASE_URL")
+supabase_key <- Sys.getenv("SUPABASE_KEY")
+
+ojs_define(supabase_url=supabase_url, supabase_key=supabase_key)
+
+```
+
+```{ojs requires}
+ms = require('d3-milestones');
+sb = require('@supabase/supabase-js');
+```
+
+
+```{ojs supabase_data}
+supabase = sb.createClient(supabase_url, supabase_key);
+data  = await supabase
+  .from('timeline')
+  .select();
+```
+
+
+```{ojs}
+timelineArray = [];
+{
+  for (let year = 2020; year <= 2025; year++) {
+    timelineArray.push({ first_run: `${year}-01-01`, task: ''});
+  } 
+}
+
+combined =data.data.concat(timelineArray);
+```
+
+
+```{ojs timeline}
+
+timeline = ms('#timeline')
+	.mapping({
+		'timestamp': 'first_run',
+		'text': 'task'
+	})
+  .optimize(true)
+	.parseTime('%Y-%m-%d')
+	.aggregateBy('month')
+	.render(combined);
+```

results/milestones.css

@@ -0,0 +1,111 @@
+.milestones__category_label {
+  display: inline-block;
+  text-align: right;
+  font-size: 14px;
+  margin-top: -4px;
+}
+.milestones__horizontal_line {
+  position: absolute;
+  background-color: #000;
+  height: 3px;
+  margin-top: 4px;
+  margin-left: 5.5px;
+  border-radius: 1.5px;
+}
+.milestones__vertical_line {
+  position: absolute;
+  background-color: #000;
+  width: 3px;
+  margin-left: 4px;
+  margin-bottom: 5.5px;
+  border-radius: 1.5px;
+}
+.milestones__group {
+  position: absolute;
+  font-family: sans-serif;
+  font-size: 10px;
+}
+.milestones__group__bullet {
+  background-color: #fff;
+  border: 3px solid #333;
+  border-radius: 50%;
+  width: 0px;
+  height: 0px;
+  padding: 2.5px;
+}
+.milestones__group__label-horizontal,
+.milestones__group__label-vertical {
+  position: absolute;
+  padding: 0;
+  color: #666;
+}
+.milestones__group__label-horizontal {
+  border-left: 1px solid #000;
+  margin-left: 5px;
+}
+.milestones__group__label-horizontal div {
+  position: relative;
+  margin-left: 3px;
+  display: inline-block;
+}
+.milestones__group__label-vertical {
+  padding-left: 10px;
+  padding-bottom: 0px;
+  border-bottom: 1px solid #000;
+  margin-bottom: -5.5px;
+  margin-left: 10px;
+  bottom: 100%;
+  overflow: visible;
+}
+.milestones__group__label-vertical .wrapper {
+  min-width: 100px;
+  max-width: 300px;
+  border-left: 1px solid black;
+  border-bottom: 1px solid white;
+  margin-bottom: -1px;
+  padding-left: 5px;
+}
+.milestones__group__label-above-horizontal {
+  bottom: 100%;
+}
+.milestones__group__label-above-vertical {
+  padding-left: 0px;
+  padding-right: 10px;
+  right: 100%;
+  text-align: right;
+}
+.milestones__group__label-above-vertical .wrapper {
+  border-left: 0;
+  border-right: 1px solid black;
+  padding-left: 0px;
+  padding-right: 5px;
+}
+.milestones__group__label-last {
+  right: 100%;
+  border-left: 0;
+  border-right: 1px solid #000;
+  margin-left: 0;
+  margin-right: -6px;
+  text-align: right;
+}
+.milestones__group__label-last div {
+  margin-left: 0px;
+  margin-right: 3px;
+}
+.milestones__group__label__text-vertical {
+  display: table-cell;
+  vertical-align: bottom;
+}
+.milestones__group__label__text__title {
+  color: #000;
+  font-weight: bold;
+  font-size: 11px;
+  white-space: nowrap;
+}
+.milestones__group__label__text__event {
+  cursor: pointer;
+}
+.milestones__group__label__text__event--hover {
+  background: #efefef;
+  color: #313131;
+}