docs: add NpmWeeklyDownloadsChart.vue

docs/components/NpmWeeklyDownloadsChart.vue

@@ -0,0 +1,127 @@
+<template>
+  <canvas id="downloadChart" width="800" height="400"></canvas>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      downloads: [],
+      labels: [],
+      packageName: 'es-toolkit',
+    };
+  },
+  async mounted() {
+    await this.fetchDownloads();
+    this.drawChart();
+  },
+  methods: {
+    async fetchDownloads() {
+      const endDate = new Date();
+      const startDate = new Date();
+      startDate.setFullYear(endDate.getFullYear() - 1);
+
+      const start = startDate.toISOString().split('T')[0];
+      const end = endDate.toISOString().split('T')[0];
+      const url = `https://api.npmjs.org/downloads/range/${start}:${end}/${this.packageName}`;
+
+      try {
+        const response = await fetch(url);
+        const data = await response.json();
+
+        const weeklyDownloads = [];
+        const weeklyLabels = [];
+        let weeklySum = 0;
+        data.downloads.forEach((item, index) => {
+          weeklySum += item.downloads;
+          if ((index + 1) % 7 === 0 || index === data.downloads.length - 1) {
+            weeklyDownloads.push(weeklySum);
+            weeklyLabels.push(item.day);
+            weeklySum = 0;
+          }
+        });
+
+        this.downloads = weeklyDownloads;
+        this.labels = weeklyLabels;
+      } catch (error) {
+        console.error('Error fetching download data:', error);
+        alert('Failed to fetch data from npm API.');
+      }
+    },
+    drawChart() {
+      const canvas = document.getElementById('downloadChart');
+      const ctx = canvas.getContext('2d');
+
+      const maxDownload = Math.ceil(Math.max(...this.downloads) / 10000) * 10000;
+
+      const padding = 50;
+      const chartWidth = canvas.width - padding * 2;
+      const chartHeight = canvas.height - padding * 2;
+
+      ctx.fillStyle = '#fff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.font = '16px Arial';
+      ctx.textAlign = 'center';
+      ctx.fillStyle = '#000';
+      ctx.fillText('es-toolkit npm weekly downloads', canvas.width / 2, 30);
+
+      ctx.strokeStyle = '#000';
+      ctx.beginPath();
+      ctx.moveTo(padding, padding + 20);
+      ctx.lineTo(padding, canvas.height - padding);
+      ctx.lineTo(canvas.width - padding, canvas.height - padding);
+      ctx.stroke();
+
+      ctx.font = '10px Arial';
+      this.labels.forEach((label, index) => {
+        const x = padding + (chartWidth / (this.labels.length - 1)) * index;
+        const y = canvas.height - padding + 20;
+        const date = new Date(label);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const formattedLabel = `${year}/${month}/${day}`;
+
+        if (index % Math.floor(this.labels.length / 10) === 0) {
+          ctx.fillStyle = '#000';
+          ctx.textAlign = 'center';
+          ctx.fillText(formattedLabel, x, y);
+        }
+      });
+
+      const yStep = 10000;
+      const steps = Math.ceil(maxDownload / yStep);
+      ctx.font = '12px Arial';
+      for (let i = 0; i <= steps; i++) {
+        const y = padding + (chartHeight - (chartHeight / steps) * i);
+        const label = i * yStep;
+
+        ctx.strokeStyle = '#d3d3d3';
+        ctx.beginPath();
+        ctx.moveTo(padding, y);
+        ctx.lineTo(canvas.width - padding, y);
+        ctx.stroke();
+
+        ctx.fillStyle = '#000';
+        ctx.textAlign = 'right';
+        ctx.fillText(label, padding - 10, y + 5);
+      }
+
+      ctx.strokeStyle = '#007bff';
+      ctx.lineWidth = 4;
+      ctx.beginPath();
+      this.downloads.forEach((download, index) => {
+        const x = padding + (chartWidth / (this.downloads.length - 1)) * index;
+        const y = padding + chartHeight - chartHeight * (download / maxDownload);
+        if (index === 0) {
+          ctx.moveTo(x, y);
+        } else {
+          ctx.lineTo(x, y);
+        }
+      });
+      ctx.stroke();
+    },
+  },
+};
+</script>

docs/intro.md

@@ -36,6 +36,12 @@ Developers from major repositories have chosen es-toolkit, as shown below.
 
 [Check more](https://github.com/toss/es-toolkit/network/dependents)
 
+<script setup>
+import CustomComponent from './components/NpmWeeklyDownloadsChart.vue'
+</script>
+
+<CustomComponent />
+
 ## Links
 
 Please refer to the following links for more information about this project.

docs/ja/intro.md

@@ -36,6 +36,12 @@ es-toolkitが提供する機能リストは以下の通りです：
 
 [もっと見る](https://github.com/toss/es-toolkit/network/dependents)
 
+<script setup>
+import CustomComponent from '../components/NpmWeeklyDownloadsChart.vue'
+</script>
+
+<CustomComponent />
+
 ## リンク
 
 このプロジェクトについてより多くの情報を得るには、以下のリンクを参照してください：

docs/ko/intro.md

@@ -36,6 +36,12 @@ es-toolkit이 제공하는 기능 목록은 다음과 같습니다.
 
 [더 보기](https://github.com/toss/es-toolkit/network/dependents)
 
+<script setup>
+import CustomComponent from '../components/NpmWeeklyDownloadsChart.vue'
+</script>
+
+<CustomComponent />
+
 ## 링크
 
 이 프로젝트에 대해서 더 많은 정보를 얻기 위해서는 아래 링크를 참고하세요.

docs/zh_hans/intro.md

@@ -36,6 +36,12 @@ es-toolkit 内置 TypeScript 类型，并经过严格测试，确保了100%的
 
 [查看更多](https://github.com/toss/es-toolkit/network/dependents)
 
+<script setup>
+import CustomComponent from '../components/NpmWeeklyDownloadsChart.vue'
+</script>
+
+<CustomComponent />
+
 ## 链接
 
 请参考以下链接获取有关该项目的更多信息。