From dad03534d5708b253be764e27758140567dc36b9 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Tue, 12 Nov 2024 18:45:41 +0900
Subject: [PATCH 1/5] docs: add trusted by section

---
 docs/intro.md         | 16 ++++++++++++++++
 docs/ja/intro.md      | 18 ++++++++++++++++++
 docs/ko/intro.md      | 18 ++++++++++++++++++
 docs/zh_hans/intro.md | 18 ++++++++++++++++++
 4 files changed, 70 insertions(+)

diff --git a/docs/intro.md b/docs/intro.md
index 8f2ce25a7..bf6beb298 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -18,6 +18,22 @@ Here are some of the features es-toolkit offers:
 - **Promise**: Asynchronous utilities like [delay](./reference/promise/delay.md).
 - **String**: Utilities for string manipulation, such as [snakeCase](./reference/string/snakeCase.md)
 
+## Trusted by Developers
+
+Developers from major repositories have chosen es-toolkit, as shown below.
+
+- [storybookjs/storybook](https://github.com/storybookjs/storybook)
+  ![GitHub stars](https://img.shields.io/github/stars/storybookjs/storybook?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/storybook?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+- [microsoft/genaiscript](https://github.com/microsoft/genaiscript)
+  ![GitHub stars](https://img.shields.io/github/stars/microsoft/genaiscript?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/genaiscript?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+- [vadimdemedes/ink](https://github.com/vadimdemedes/ink)
+  ![GitHub stars](https://img.shields.io/github/stars/vadimdemedes/ink?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/ink?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+[Check more](https://github.com/toss/es-toolkit/network/dependents)
+
 ## Links
 
 Please refer to the following links for more information about this project.
diff --git a/docs/ja/intro.md b/docs/ja/intro.md
index 12138f772..7a6091d19 100644
--- a/docs/ja/intro.md
+++ b/docs/ja/intro.md
@@ -18,6 +18,24 @@ es-toolkitが提供する機能リストは以下の通りです：
 - **Promise**: 非同期操作のためのユーティリティ、例えば [delay](./reference/promise/delay.md) など。
 - **String**: 文字列操作のためのユーティリティ、例えば [snakeCase](./reference/string/snakeCase.md) など。
 
+## 信頼されるツール
+
+以下のように、大規模リポジトリの開発者たちが es-toolkit を選択しています。
+
+- [storybookjs/storybook](https://github.com/storybookjs/storybook)
+  ![GitHub stars](https://img.shields.io/github/stars/storybookjs/storybook?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/storybook?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [microsoft/genaiscript](https://github.com/microsoft/genaiscript)
+  ![GitHub stars](https://img.shields.io/github/stars/microsoft/genaiscript?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/genaiscript?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [vadimdemedes/ink](https://github.com/vadimdemedes/ink)
+  ![GitHub stars](https://img.shields.io/github/stars/vadimdemedes/ink?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/ink?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+[もっと見る](https://github.com/toss/es-toolkit/network/dependents)
+
 ## リンク
 
 このプロジェクトについてより多くの情報を得るには、以下のリンクを参照してください：
diff --git a/docs/ko/intro.md b/docs/ko/intro.md
index 1f2c56d01..423319a54 100644
--- a/docs/ko/intro.md
+++ b/docs/ko/intro.md
@@ -18,6 +18,24 @@ es-toolkit이 제공하는 기능 목록은 다음과 같습니다.
 - **Promise**: [delay](./reference/promise/delay.md)와 같은 비동기 유틸리티 함수를 제공해요.
 - **문자열**: [snakeCase](./reference/string/snakeCase.md)와 같이 문자열을 다루기 위한 다양한 함수를 제공해요.
 
+## 신뢰할 수 있는 라이브러리
+
+아래와 같이 대형 리포지토리의 개발자들이 es-toolkit을 선택했습니다.
+
+- [storybookjs/storybook](https://github.com/storybookjs/storybook)
+  ![GitHub stars](https://img.shields.io/github/stars/storybookjs/storybook?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/storybook?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [microsoft/genaiscript](https://github.com/microsoft/genaiscript)
+  ![GitHub stars](https://img.shields.io/github/stars/microsoft/genaiscript?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/genaiscript?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [vadimdemedes/ink](https://github.com/vadimdemedes/ink)
+  ![GitHub stars](https://img.shields.io/github/stars/vadimdemedes/ink?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/ink?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+[더 보기](https://github.com/toss/es-toolkit/network/dependents)
+
 ## 링크
 
 이 프로젝트에 대해서 더 많은 정보를 얻기 위해서는 아래 링크를 참고하세요.
diff --git a/docs/zh_hans/intro.md b/docs/zh_hans/intro.md
index 0106ea61d..0380ad3fa 100644
--- a/docs/zh_hans/intro.md
+++ b/docs/zh_hans/intro.md
@@ -18,6 +18,24 @@ es-toolkit 内置 TypeScript 类型，并经过严格测试，确保了100%的
 - **Promise**: 异步操作工具，如 [delay](./reference/promise/delay.md)。
 - **String**: 字符串操作工具，如 [snakeCase](./reference/string/snakeCase.md)。
 
+## 值得信赖的工具
+
+如下所示，来自大型代码库的开发者选择了 es-toolkit。
+
+- [storybookjs/storybook](https://github.com/storybookjs/storybook)
+  ![GitHub stars](https://img.shields.io/github/stars/storybookjs/storybook?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/storybook?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [microsoft/genaiscript](https://github.com/microsoft/genaiscript)
+  ![GitHub stars](https://img.shields.io/github/stars/microsoft/genaiscript?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/genaiscript?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+- [vadimdemedes/ink](https://github.com/vadimdemedes/ink)
+  ![GitHub stars](https://img.shields.io/github/stars/vadimdemedes/ink?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
+  ![NPM downloads](https://img.shields.io/npm/dw/ink?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
+[查看更多](https://github.com/toss/es-toolkit/network/dependents)
+
 ## 链接
 
 请参考以下链接获取有关该项目的更多信息。

From 2919313f3a97fc42391527733aa7e71456bf0ae3 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Tue, 12 Nov 2024 18:55:33 +0900
Subject: [PATCH 2/5] chore: update

---
 docs/intro.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/intro.md b/docs/intro.md
index bf6beb298..390651998 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -25,9 +25,11 @@ Developers from major repositories have chosen es-toolkit, as shown below.
 - [storybookjs/storybook](https://github.com/storybookjs/storybook)
   ![GitHub stars](https://img.shields.io/github/stars/storybookjs/storybook?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
   ![NPM downloads](https://img.shields.io/npm/dw/storybook?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
 - [microsoft/genaiscript](https://github.com/microsoft/genaiscript)
   ![GitHub stars](https://img.shields.io/github/stars/microsoft/genaiscript?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
   ![NPM downloads](https://img.shields.io/npm/dw/genaiscript?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)
+
 - [vadimdemedes/ink](https://github.com/vadimdemedes/ink)
   ![GitHub stars](https://img.shields.io/github/stars/vadimdemedes/ink?style=flat-square&logo=github&label=Stars&labelColor=black&color=black)
   ![NPM downloads](https://img.shields.io/npm/dw/ink?style=flat-square&logo=npm&label=Downloads&labelColor=black&color=black)

From e9172fdeb31a3ce6f9ab66959aef74940718fc55 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Tue, 12 Nov 2024 19:42:40 +0900
Subject: [PATCH 3/5] docs: add NpmWeeklyDownloadsChart.vue

---
 docs/components/NpmWeeklyDownloadsChart.vue | 127 ++++++++++++++++++++
 docs/intro.md                               |   6 +
 docs/ja/intro.md                            |   6 +
 docs/ko/intro.md                            |   6 +
 docs/zh_hans/intro.md                       |   6 +
 5 files changed, 151 insertions(+)
 create mode 100644 docs/components/NpmWeeklyDownloadsChart.vue

diff --git a/docs/components/NpmWeeklyDownloadsChart.vue b/docs/components/NpmWeeklyDownloadsChart.vue
new file mode 100644
index 000000000..0599a222c
--- /dev/null
+++ b/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>
diff --git a/docs/intro.md b/docs/intro.md
index 390651998..67c3f1096 100644
--- a/docs/intro.md
+++ b/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.
diff --git a/docs/ja/intro.md b/docs/ja/intro.md
index 7a6091d19..5a4c80517 100644
--- a/docs/ja/intro.md
+++ b/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 />
+
 ## リンク
 
 このプロジェクトについてより多くの情報を得るには、以下のリンクを参照してください：
diff --git a/docs/ko/intro.md b/docs/ko/intro.md
index 423319a54..d8b75fb1e 100644
--- a/docs/ko/intro.md
+++ b/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 />
+
 ## 링크
 
 이 프로젝트에 대해서 더 많은 정보를 얻기 위해서는 아래 링크를 참고하세요.
diff --git a/docs/zh_hans/intro.md b/docs/zh_hans/intro.md
index 0380ad3fa..caf009ba7 100644
--- a/docs/zh_hans/intro.md
+++ b/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 />
+
 ## 链接
 
 请参考以下链接获取有关该项目的更多信息。

From 4a82c7145c616eb94367aac62d8dcc8eb2517d71 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Tue, 12 Nov 2024 19:55:26 +0900
Subject: [PATCH 4/5] chore: update

---
 docs/components/NpmWeeklyDownloadsChart.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/components/NpmWeeklyDownloadsChart.vue b/docs/components/NpmWeeklyDownloadsChart.vue
index 0599a222c..80aae7864 100644
--- a/docs/components/NpmWeeklyDownloadsChart.vue
+++ b/docs/components/NpmWeeklyDownloadsChart.vue
@@ -90,12 +90,13 @@ export default {
         }
       });
 
-      const yStep = 10000;
-      const steps = Math.ceil(maxDownload / yStep);
+      const yStep = Math.ceil(maxDownload / 5 / 10000) * 10000;
       ctx.font = '12px Arial';
-      for (let i = 0; i <= steps; i++) {
-        const y = padding + (chartHeight - (chartHeight / steps) * i);
-        const label = i * yStep;
+      for (let i = 0; i <= 5; i++) {
+        const value = maxDownload - i * yStep;
+        if (value < 0) break;
+
+        const y = padding + (chartHeight - (chartHeight / maxDownload) * value);
 
         ctx.strokeStyle = '#d3d3d3';
         ctx.beginPath();
@@ -105,7 +106,7 @@ export default {
 
         ctx.fillStyle = '#000';
         ctx.textAlign = 'right';
-        ctx.fillText(label, padding - 10, y + 5);
+        ctx.fillText(value, padding - 10, y + 5);
       }
 
       ctx.strokeStyle = '#007bff';

From a7e6de10d2ead0066f79e181c9ddb0958f233f70 Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <jonghyeon@toss.im>
Date: Tue, 12 Nov 2024 20:09:28 +0900
Subject: [PATCH 5/5] chore: update

---
 docs/intro.md         | 4 ++--
 docs/ja/intro.md      | 4 ++--
 docs/ko/intro.md      | 4 ++--
 docs/zh_hans/intro.md | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/intro.md b/docs/intro.md
index 67c3f1096..5c51822b9 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -37,10 +37,10 @@ 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'
+import NpmWeeklyDownloadsChart from './components/NpmWeeklyDownloadsChart.vue'
 </script>
 
-<CustomComponent />
+<NpmWeeklyDownloadsChart />
 
 ## Links
 
diff --git a/docs/ja/intro.md b/docs/ja/intro.md
index 5a4c80517..a77ac6a8f 100644
--- a/docs/ja/intro.md
+++ b/docs/ja/intro.md
@@ -37,10 +37,10 @@ es-toolkitが提供する機能リストは以下の通りです：
 [もっと見る](https://github.com/toss/es-toolkit/network/dependents)
 
 <script setup>
-import CustomComponent from '../components/NpmWeeklyDownloadsChart.vue'
+import NpmWeeklyDownloadsChart from '../components/NpmWeeklyDownloadsChart.vue'
 </script>
 
-<CustomComponent />
+<NpmWeeklyDownloadsChart />
 
 ## リンク
 
diff --git a/docs/ko/intro.md b/docs/ko/intro.md
index d8b75fb1e..b3b0fbdb2 100644
--- a/docs/ko/intro.md
+++ b/docs/ko/intro.md
@@ -37,10 +37,10 @@ es-toolkit이 제공하는 기능 목록은 다음과 같습니다.
 [더 보기](https://github.com/toss/es-toolkit/network/dependents)
 
 <script setup>
-import CustomComponent from '../components/NpmWeeklyDownloadsChart.vue'
+import NpmWeeklyDownloadsChart from '../components/NpmWeeklyDownloadsChart.vue'
 </script>
 
-<CustomComponent />
+<NpmWeeklyDownloadsChart />
 
 ## 링크
 
diff --git a/docs/zh_hans/intro.md b/docs/zh_hans/intro.md
index caf009ba7..67cd16cb3 100644
--- a/docs/zh_hans/intro.md
+++ b/docs/zh_hans/intro.md
@@ -37,10 +37,10 @@ es-toolkit 内置 TypeScript 类型，并经过严格测试，确保了100%的
 [查看更多](https://github.com/toss/es-toolkit/network/dependents)
 
 <script setup>
-import CustomComponent from '../components/NpmWeeklyDownloadsChart.vue'
+import NpmWeeklyDownloadsChart from '../components/NpmWeeklyDownloadsChart.vue'
 </script>
 
-<CustomComponent />
+<NpmWeeklyDownloadsChart />
 
 ## 链接