feat(tool): text statistics

src/plugins/naive.plugin.ts

@@ -44,9 +44,11 @@ import {
   NInputGroup,
   NInputGroupLabel,
   NDivider,
+  NStatistic,
 } from 'naive-ui';
 
 const components = [
+  NStatistic,
   NDivider,
   NInputGroup,
   NInputGroupLabel,

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],
   },
 ];
 

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,
+};

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);
+    });
+  });
+});

src/tools/text-statistics/text-statistics.service.ts

@@ -0,0 +1,3 @@
+export function getStringSizeInBytes(text: string) {
+  return new TextEncoder().encode(text).buffer.byteLength;
+}

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>

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];
+}