feat(tool): text statistics

7 files changed, 67 insertions, 1 deletions

diff --git a/src/plugins/naive.plugin.ts b/src/plugins/naive.plugin.ts
index 93da522..8b3e009 100644
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -44,9 +44,11 @@ import {
   NInputGroup,
   NInputGroupLabel,
   NDivider,
+  NStatistic,
 } from 'naive-ui';
 
 const components = [
+  NStatistic,
   NDivider,
   NInputGroup,
   NInputGroupLabel,
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 649b69d..d744353 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as textStatistics } from './text-statistics';
 import { tool as tokenGenerator } from './token-generator';
 import { tool as hashText } from './hash-text';
 import { tool as uuidGenerator } from './uuid-generator';
@@ -38,7 +39,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Text',
     icon: LockOpen,
-    components: [loremIpsumGenerator],
+    components: [loremIpsumGenerator, textStatistics],
   },
 ];
 
diff --git a/src/tools/text-statistics/index.ts b/src/tools/text-statistics/index.ts
new file mode 100644
index 0000000..6f9ad84
--- /dev/null
+++ b/src/tools/text-statistics/index.ts
@@ -0,0 +1,11 @@
+import { FileText } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'Text statistics',
+  path: '/text-statistics',
+  description: "Get information about a text, the amount of characters, the amount of words, it's size, ...",
+  keywords: ['text', 'statistics', 'length', 'characters', 'count', 'size', 'bytes'],
+  component: () => import('./text-statistics.vue'),
+  icon: FileText,
+};
diff --git a/src/tools/text-statistics/text-statistics.service.test.ts b/src/tools/text-statistics/text-statistics.service.test.ts
new file mode 100644
index 0000000..5260683
--- /dev/null
+++ b/src/tools/text-statistics/text-statistics.service.test.ts
@@ -0,0 +1,14 @@
+import { expect, describe, it } from 'vitest';
+import { getStringSizeInBytes } from './text-statistics.service';
+
+describe('text-statistics', () => {
+  describe('getStringSizeInBytes', () => {
+    it('should return the size of a string in bytes', () => {
+      expect(getStringSizeInBytes('')).toEqual(0);
+      expect(getStringSizeInBytes('a')).toEqual(1);
+      expect(getStringSizeInBytes('aa')).toEqual(2);
+      expect(getStringSizeInBytes('😀')).toEqual(4);
+      expect(getStringSizeInBytes('aaaaaaaaaa')).toEqual(10);
+    });
+  });
+});
diff --git a/src/tools/text-statistics/text-statistics.service.ts b/src/tools/text-statistics/text-statistics.service.ts
new file mode 100644
index 0000000..a69443c
--- /dev/null
+++ b/src/tools/text-statistics/text-statistics.service.ts
@@ -0,0 +1,3 @@
+export function getStringSizeInBytes(text: string) {
+  return new TextEncoder().encode(text).buffer.byteLength;
+}
diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue
new file mode 100644
index 0000000..1563c43
--- /dev/null
+++ b/src/tools/text-statistics/text-statistics.vue
@@ -0,0 +1,24 @@
+<template>
+  <n-card>
+    <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
+    <br>
+    <br>
+    <n-space justify="space-around">
+      <n-statistic label="Character count" :value="text.length" />
+      <n-statistic label="Word count" :value="text.split(/\s+/).length" />
+      <n-statistic label="Line count" :value="text.split(/\r\n|\r|\n/).length" />
+      <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
+    </n-space>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { formatBytes } from '@/utils/convert'
+import { getStringSizeInBytes } from './text-statistics.service'
+
+const text = ref('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commodo risus faucibus varius volutpat habitasse suspendisse justo inceptos primis mi. Fusce molestie lorem bibendum habitasse litora adipiscing turpis egestas quis nec. Non id conubia vulputate etiam iaculis vitae venenatis hac fusce condimentum. Adipiscing pellentesque venenatis ornare pulvinar tempus hac montes velit erat convallis.')
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file
diff --git a/src/utils/convert.ts b/src/utils/convert.ts
new file mode 100644
index 0000000..c8c325f
--- /dev/null
+++ b/src/utils/convert.ts
@@ -0,0 +1,11 @@
+export function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0) {
+    return '0 Bytes';
+  }
+
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
+}