feat: render statistics data in stat view tab

Signed-off-by: edonyzpc <[email protected]>
edonyzpc · Mar 19, 2024 · 2b1ec3a · 2b1ec3a
1 parent 6c27927
commit 2b1ec3a
Showing 1 changed file with 16 additions and 26 deletions.
diff --git a/src/components/Statistics.svelte b/src/components/Statistics.svelte
@@ -12,6 +12,7 @@
  PointElement,
  CategoryScale,
  Filler,
+ type ChartData,
  type ChartOptions,
  } from 'chart.js';
  import type { App } from 'obsidian';
@@ -22,46 +23,36 @@
  export let staticsFileData: string;
 
  const statics = JSON.parse(staticsFileData);
- let wordsDatax = [];
  let wordsData = [];
  let filesData = [];
  let pagesData = [];
  const history = Object.keys(statics.history);
  for (const date of history) {
- wordsData.push(statics.history[date].words);
- wordsDatax.push(date);
- filesData.push({ x: date, y: Number(statics.history[date].files) });
- pagesData.push({ x: date, y: Number(statics.history[date].totalPages) });
+ wordsData.push({ key: date, value: statics.history[date].words });
+ filesData.push({ x: Number(date), y: Number(statics.history[date].files) });
+ pagesData.push({ x: Number(date), y: Number(statics.history[date].totalPages) });
  }
 
+ let chartElement: ChartJS<"line"> | undefined;
 
- const data = {
- //labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+
+ type CustomChartData = {
+ key: string;
+ value: number;
+};
+ const data: ChartData<"line", CustomChartData[]> = {
  datasets: [
  {
  label: "Daily Words",
- labels: wordsDatax,
  data: wordsData,
  backgroundColor: ["rgba(255, 99, 132, 0.2)"],
  borderColor: ['rgba(255, 99, 132, 1)'],
  borderWidth: 1.0,
  yAxisID: 'y',
-
- fill: false,
- lineTension: 0.3,
- //borderCapStyle: "butt",
- borderDash: [],
- borderDashOffset: 0.0,
- //borderJoinStyle: 'miter',
- pointBorderColor: 'rgb(205, 130,1 58)',
- pointBackgroundColor: 'rgb(255, 255, 255)',
- pointBorderWidth: 10,
- pointHoverRadius: 5,
- pointHoverBackgroundColor: 'rgb(0, 0, 0)',
- pointHoverBorderColor: 'rgba(220, 220, 220,1)',
- pointHoverBorderWidth: 2,
- pointRadius: 1,
- pointHitRadius: 10,
+ parsing: {
+ xAxisKey: 'key',
+ yAxisKey: 'value'
+ }
  },
  /*
  {
@@ -147,7 +138,6 @@
  },
  },
  x: {
- type: 'time',
  border: {
  display: false,
  width: 0.8,
@@ -176,7 +166,7 @@
 </script>
 
 <div id="statistics-line-chart">
- <Line {data} {options} />
+ <Line data={data} options={options} />
 </div>
 
 <style>