OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 31 LINES
 
[ HISTORY ]  [ UP ]
 

---
import "./ActivityChart.scss";
import type { StatsWeeklyActivityEntry } from "../../../lib/types";

interface Props {
  data: StatsWeeklyActivityEntry[];
  // unique scope id so multiple charts on a page can each find their own data isl
and
  scope: string;
}

const { data, scope } = Astro.props;

// Pre-encode data into the data attribute as JSON; ActivityChart.ts reads it on t
he client
// and renders the SVG path + interactive hover layer. Server emits a placeholder.
const dataJson = JSON.stringify(data);
---

<figure class="activity-chart" data-scope={scope} data-points={dataJson}>
  <div class="activity-chart__canvas">
    {
      /* Filled by ActivityChart.ts on mount; kept empty server-side to avoid dupl
icate work. */
    }
  </div>
</figure>

<script>
  import { initActivityCharts } from "./ActivityChart.ts";
  initActivityCharts();
  document.addEventListener("astro:page-load", () => initActivityCharts());
</script>


---
import "./ActivityChart.scss";
import type { StatsWeeklyActivityEntry } fro
m "../../../lib/types";

interface Props {
  data: StatsWeeklyActivityEntry[];
  // unique scope id so multiple charts on a
 page can each find their own data island
  scope: string;
}

const { data, scope } = Astro.props;

// Pre-encode data into the data attribute a
s JSON; ActivityChart.ts reads it on the cli
ent
// and renders the SVG path + interactive ho
ver layer. Server emits a placeholder.
const dataJson = JSON.stringify(data);
---

<figure class="activity-chart" data-scope={s
cope} data-points={dataJson}>
  <div class="activity-chart__canvas">
    {
      /* Filled by ActivityChart.ts on mount
; kept empty server-side to avoid duplicate 
work. */
    }
  </div>
</figure>

<script>
  import { initActivityCharts } from "./Acti
vityChart.ts";
  initActivityCharts();
  document.addEventListener("astro:page-load
", () => initActivityCharts());
</script>

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET