feat(new tools): Data Storage Units Converter and Data Transfer Rate Converter

New Tool: Data Transfer Rate Converter
New Tool: Data Storage Units Converter (with MB, MiB and Mb)

Fix #539 #785 #1160 #848

Data Storage Units Converter inspired by #948 by @utf26

src/tools/data-storage-unit-converter/data-storage-unit-converter.service.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { convertStorageAndRateUnitsDisplay, displayStorageAndRateUnits } from './data-storage-unit-converter.service';
+
+describe('data-storage-unit-converter', () => {
+  describe('convertStorageAndRateUnitsDisplay', () => {
+    it('convert from same base units', () => {
+      expect(convertStorageAndRateUnitsDisplay({ value: 1024 * 1024, fromUnit: 'B', toUnit: 'MiB' })).toBe('1');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1024, fromUnit: 'KiB', toUnit: 'MiB' })).toBe('1');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1, fromUnit: 'MiB', toUnit: 'KiB' })).toBe('1,024');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000, fromUnit: 'MB', toUnit: 'GB' })).toBe('1');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1024, fromUnit: 'MB', toUnit: 'MB' })).toBe('1,024');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1, fromUnit: 'MB', toUnit: 'KB' })).toBe('1,000');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1024, fromUnit: 'MiB', toUnit: 'GiB' })).toBe('1');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000, fromUnit: 'MB', toUnit: 'GB' })).toBe('1');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000, fromUnit: 'Mb', toUnit: 'Gb' })).toBe('1');
+    });
+
+    it('convert between base units', () => {
+      expect(convertStorageAndRateUnitsDisplay({ value: 1, fromUnit: 'MB', toUnit: 'MiB' })).toBe('0.954');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1, fromUnit: 'MiB', toUnit: 'MB' })).toBe('1.049');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000 * 1000, fromUnit: 'B', toUnit: 'MiB' })).toBe('0.954');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1024, fromUnit: 'KB', toUnit: 'MiB' })).toBe('0.977');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000, fromUnit: 'MiB', toUnit: 'MB' })).toBe('1,048.576');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1, fromUnit: 'MB', toUnit: 'Mb' })).toBe('8');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000, fromUnit: 'KB', toUnit: 'Kb' })).toBe('8,000');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000, fromUnit: 'KiB', toUnit: 'Kb' })).toBe('8,192');
+      expect(convertStorageAndRateUnitsDisplay({ value: 8, fromUnit: 'Mb', toUnit: 'MB' })).toBe('1');
+
+      expect(convertStorageAndRateUnitsDisplay({ value: 1, fromUnit: 'Mb', toUnit: 'KB' })).toBe('125');
+      expect(convertStorageAndRateUnitsDisplay({ value: 125, fromUnit: 'KB', toUnit: 'Mb' })).toBe('1');
+
+      expect(convertStorageAndRateUnitsDisplay({ value: 1, fromUnit: 'MiB', toUnit: 'Kb' })).toBe('8,388.608');
+      expect(convertStorageAndRateUnitsDisplay({ value: 8388.608, fromUnit: 'Kb', toUnit: 'MiB' })).toBe('1');
+    });
+    it('convert with unit display', () => {
+      expect(convertStorageAndRateUnitsDisplay({ value: 1024 * 1024, fromUnit: 'B', toUnit: 'MiB', appendUnit: true })).toBe('1MiB');
+    });
+
+    //
+  });
+  describe('displayStorageAndRateUnits', () => {
+    it('convert to correct display value', () => {
+      expect(displayStorageAndRateUnits({
+        value: 1.234567, unit: 'MB', appendUnit: false,
+      })).toBe('1.235');
+      expect(displayStorageAndRateUnits({
+        value: 1.234567, unit: 'MB', appendUnit: true,
+      })).toBe('1.235MB');
+      expect(displayStorageAndRateUnits({
+        value: 1.234567, unit: 'MB', appendUnit: true, precision: 5,
+      })).toBe('1.23457MB');
+    });
+  });
+});

src/tools/data-storage-unit-converter/data-storage-unit-converter.service.ts

@@ -0,0 +1,47 @@
+export type BibytesUnits = 'iB' | 'KiB' | 'MiB' | 'GiB' | 'TiB' | 'PiB' | 'EiB' | 'ZiB' | 'YiB';
+export type BytesUnits = 'B' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB';
+export type BitsUnits = 'b' | 'Kb' | 'Mb' | 'Gb' | 'Tb' | 'Pb' | 'Eb' | 'Zb' | 'Yb';
+export type AllSupportedUnits = BibytesUnits | BytesUnits | BitsUnits;
+
+export function displayStorageAndRateUnits(
+  { value, unit, precision = 3, appendUnit = false }:
+  { value: number; unit: AllSupportedUnits; precision?: number ; appendUnit?: boolean }): string {
+  return value.toLocaleString(undefined, {
+    maximumFractionDigits: precision,
+  }) + (appendUnit ? unit : '');
+}
+
+export function convertStorageAndRateUnitsDisplay(
+  { value, fromUnit, toUnit, precision = 3, appendUnit = false }:
+  { value: number; fromUnit: AllSupportedUnits; toUnit: AllSupportedUnits; precision?: number; appendUnit?: boolean }): string {
+  return displayStorageAndRateUnits({
+    precision,
+    unit: toUnit,
+    appendUnit,
+    value: convertStorageAndRateUnits({
+      value, fromUnit, toUnit,
+    }),
+  });
+}
+
+export function convertStorageAndRateUnits(
+  { value, fromUnit, toUnit }:
+  { value: number; fromUnit: AllSupportedUnits; toUnit: AllSupportedUnits }): number {
+  const units = [
+    'iB', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB',
+    'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB',
+    'b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb',
+  ];
+
+  const fromIndex = units.indexOf(fromUnit);
+  const fromFactor = fromIndex / 9 > 1 ? 1000 : 1024;
+  const fromDivisor = fromIndex / 9 > 2 ? 8 : 1;
+  const toIndex = units.indexOf(toUnit);
+  const toFactor = toIndex / 9 > 1 ? 1000 : 1024;
+  const toDivisor = toIndex / 9 > 2 ? 8 : 1;
+
+  const fromBase = (fromFactor ** (fromIndex % 9)) / fromDivisor;
+  const toBase = (toFactor ** (toIndex % 9)) / toDivisor;
+
+  return value * fromBase / toBase;
+}

src/tools/data-storage-unit-converter/data-storage-unit-converter.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import InputCopyable from '../../components/InputCopyable.vue';
+import { type AllSupportedUnits, convertStorageAndRateUnitsDisplay } from './data-storage-unit-converter.service';
+
+const input = ref<{ size: string; unit: string }>({ size: '0', unit: 'KB' });
+const output = ref<{ unit: string; precision: number; appendUnit: boolean }>({ unit: 'MB', precision: 3, appendUnit: false });
+
+const allUnits = [
+  'iB', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB',
+  'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB',
+  'b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'];
+
+const convertedValue = computed(() => {
+  try {
+    return convertStorageAndRateUnitsDisplay({
+      value: Number(input.value.size),
+      fromUnit: input.value.unit as AllSupportedUnits,
+      toUnit: output.value.unit as AllSupportedUnits,
+      precision: output.value.precision,
+      appendUnit: output.value.appendUnit,
+    });
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <c-card>
+      <n-form-item label="Input Size:" label-placement="left" mb-1>
+        <c-input-text
+          v-model:value="input.size"
+          placeholder="Put your number here (ex: 1024)"
+          mr-2
+        />
+        <c-select
+          v-model:value="input.unit"
+          :options="allUnits"
+          placeholder="Select input unit"
+        />
+      </n-form-item>
+
+      <div flex items-baseline gap-2>
+        <c-select
+          v-model:value="output.unit"
+          label="Output:" label-position="left"
+          :options="allUnits"
+          placeholder="Select output unit"
+        />
+
+        <n-form-item label="Precision:" label-placement="left">
+          <n-input-number v-model:value="output.precision" placeholder="Precision..." :max="10" :min="0" />
+        </n-form-item>
+
+        <n-checkbox v-model:checked="output.appendUnit">
+          Show unit?
+        </n-checkbox>
+      </div>
+
+      <n-divider />
+
+      <InputCopyable
+        label="Output value"
+        :value="convertedValue"
+        placeholder="Output value will be here..."
+      />
+    </c-card>
+  </div>
+</template>

src/tools/data-storage-unit-converter/index.ts

@@ -0,0 +1,16 @@
+import { ArrowsLeftRight } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Data Storage Unit converter',
+  path: '/data-storage-unit-converter',
+  description: 'Convert data storage or transfer units (bytes, bibytes, bits, kilobytes...)',
+  keywords: ['data', 'storage', 'unit', 'conversion',
+    'bits', 'bytes', 'bibytes', 'binary',
+    'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB',
+    'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB',
+    'b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'],
+  component: () => import('./data-storage-unit-converter.vue'),
+  icon: ArrowsLeftRight,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/data-transfer-rate-converter/data-transfer-rate-converter.service.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { amountTransferable, neededRate, transferTimeSeconds } from './data-transfer-rate-converter.service';
+
+describe('data-transfer-converter', () => {
+  describe('transferTimeSeconds', () => {
+    it('compute transfer time in seconds', () => {
+      expect(transferTimeSeconds({
+        dataSize: 100,
+        dataSizeUnit: 'MB',
+        bitRate: 10,
+        bitRateUnit: 'Mb',
+      })).toBe(80);
+    });
+  });
+  describe('neededRate', () => {
+    it('compute neededRate', () => {
+      expect(neededRate({
+        dataSize: 100,
+        dataSizeUnit: 'MB',
+        hours: 0,
+        minutes: 1,
+        seconds: 20,
+        bitRateUnit: 'Mb',
+      })).toBe(10);
+    });
+  });
+  describe('amountTransferable', () => {
+    it('compute amount transfered', () => {
+      expect(amountTransferable({
+        bitRate: 10,
+        bitRateUnit: 'Mb',
+        hours: 1,
+        minutes: 0,
+        seconds: 0,
+        dataSizeUnit: 'MB',
+      })).toBe(4500);
+    });
+  });
+});

src/tools/data-transfer-rate-converter/data-transfer-rate-converter.service.ts

@@ -0,0 +1,57 @@
+import { type AllSupportedUnits, type BitsUnits, convertStorageAndRateUnits } from '../data-storage-unit-converter/data-storage-unit-converter.service';
+
+export function transferTimeSeconds({
+  dataSize,
+  dataSizeUnit,
+  bitRate,
+  bitRateUnit,
+}: {
+  dataSize: number
+  dataSizeUnit: AllSupportedUnits
+  bitRate: number
+  bitRateUnit: BitsUnits
+}): number {
+  const dataSizeInBytes = convertStorageAndRateUnits({ value: dataSize, fromUnit: dataSizeUnit, toUnit: 'B' });
+  const bitRateInBytes = convertStorageAndRateUnits({ value: bitRate, fromUnit: bitRateUnit, toUnit: 'B' });
+  return bitRateInBytes > 0 ? dataSizeInBytes / bitRateInBytes : 0;
+}
+
+export function neededRate({
+  dataSize,
+  dataSizeUnit,
+  hours,
+  minutes,
+  seconds,
+  bitRateUnit,
+}: {
+  dataSize: number
+  dataSizeUnit: AllSupportedUnits
+  hours: number
+  minutes: number
+  seconds: number
+  bitRateUnit: BitsUnits
+}): number {
+  const dataSizeInBits = convertStorageAndRateUnits({ value: dataSize, fromUnit: dataSizeUnit, toUnit: 'b' });
+  const timeInSeconds = hours * 3600 + minutes * 60 + seconds;
+  return convertStorageAndRateUnits({ value: timeInSeconds > 0 ? dataSizeInBits / timeInSeconds : 0, fromUnit: 'b', toUnit: bitRateUnit });
+}
+
+export function amountTransferable({
+  bitRate,
+  bitRateUnit,
+  hours,
+  minutes,
+  seconds,
+  dataSizeUnit,
+}: {
+  bitRate: number
+  bitRateUnit: BitsUnits
+  hours: number
+  minutes: number
+  seconds: number
+  dataSizeUnit: AllSupportedUnits
+}): number {
+  const bitRateInBytes = convertStorageAndRateUnits({ value: bitRate, fromUnit: bitRateUnit, toUnit: 'B' });
+  const timeInSeconds = hours * 3600 + minutes * 60 + seconds;
+  return convertStorageAndRateUnits({ value: bitRateInBytes * timeInSeconds, fromUnit: 'B', toUnit: dataSizeUnit });
+}

src/tools/data-transfer-rate-converter/data-transfer-rate-converter.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { formatDuration, intervalToDuration } from 'date-fns';
+import { type AllSupportedUnits, type BitsUnits, displayStorageAndRateUnits } from '../data-storage-unit-converter/data-storage-unit-converter.service';
+import { amountTransferable, neededRate, transferTimeSeconds } from './data-transfer-rate-converter.service';
+
+const allStorateUnits = [
+  'iB', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB',
+  'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+const allBitsUnits = ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'];
+
+function convertToTimeDisplay(seconds: number) {
+  if (seconds === 0) {
+    return '0';
+  }
+  return formatDuration(intervalToDuration({ start: 0, end: seconds * 1000 }));
+}
+
+const transferTimeInput = ref<{
+  dataSize: string
+  dataSizeUnit: string
+  bitRate: string
+  bitRateUnit: string
+}>({
+  dataSize: '0',
+  dataSizeUnit: 'MB',
+  bitRate: '1',
+  bitRateUnit: 'Mb',
+});
+const transferTimeOutput = computed(() => {
+  try {
+    return convertToTimeDisplay(transferTimeSeconds({
+      dataSize: Number(transferTimeInput.value.dataSize),
+      dataSizeUnit: transferTimeInput.value.dataSizeUnit as AllSupportedUnits,
+      bitRate: Number(transferTimeInput.value.bitRate),
+      bitRateUnit: transferTimeInput.value.bitRateUnit as BitsUnits,
+    }));
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+const neededRateInput = ref<{
+  dataSize: string
+  dataSizeUnit: string
+  hours: number
+  minutes: number
+  seconds: number
+  bitRateUnit: string
+}>({
+  dataSize: '0',
+  dataSizeUnit: 'GB',
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
+  bitRateUnit: 'Mb',
+});
+const neededRateOutput = computed(() => {
+  try {
+    return displayStorageAndRateUnits({
+      unit: neededRateInput.value.bitRateUnit as BitsUnits,
+      appendUnit: true,
+      value: neededRate({
+        dataSize: Number(neededRateInput.value.dataSize),
+        dataSizeUnit: neededRateInput.value.dataSizeUnit as AllSupportedUnits,
+        hours: neededRateInput.value.hours,
+        minutes: neededRateInput.value.minutes,
+        seconds: neededRateInput.value.seconds,
+        bitRateUnit: neededRateInput.value.bitRateUnit as BitsUnits,
+      }),
+    });
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+const amountTransferableInput = ref<{
+  bitRate: string
+  bitRateUnit: string
+  hours: number
+  minutes: number
+  seconds: number
+  dataSizeUnit: string
+}>({
+  bitRate: '0',
+  bitRateUnit: 'Mb',
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
+  dataSizeUnit: 'MB',
+});
+const amountTransferableOutput = computed(() => {
+  try {
+    return displayStorageAndRateUnits({
+      unit: amountTransferableInput.value.dataSizeUnit as AllSupportedUnits,
+      appendUnit: true,
+      value: amountTransferable({
+        bitRate: Number(amountTransferableInput.value.bitRate),
+        bitRateUnit: amountTransferableInput.value.bitRateUnit as BitsUnits,
+        hours: amountTransferableInput.value.hours,
+        minutes: amountTransferableInput.value.minutes,
+        seconds: amountTransferableInput.value.seconds,
+        dataSizeUnit: amountTransferableInput.value.dataSizeUnit as AllSupportedUnits,
+      }),
+    });
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <c-card title="Transfer Time" mb-2>
+      <n-form-item label="Data Size:" label-placement="left">
+        <n-input v-model:value="transferTimeInput.dataSize" placeholder="Data Size..." :min="0" w-full />
+        <c-select
+          v-model:value="transferTimeInput.dataSizeUnit"
+          searchable
+          :options="allStorateUnits"
+          placeholder="Select a storage unit"
+          ml-1
+        />
+      </n-form-item>
+
+      <n-form-item label="Bit Rate:" label-placement="left">
+        <n-input v-model:value="transferTimeInput.bitRate" placeholder="Bit Rate..." :min="0" w-full />
+        <c-select
+          v-model:value="transferTimeInput.bitRateUnit"
+          searchable
+          :options="allBitsUnits"
+          placeholder="Select a bit rate unit"
+          ml-1
+        />
+      </n-form-item>
+
+      <n-divider />
+
+      <InputCopyable
+        label="Transfer time"
+        :value="transferTimeOutput"
+        placeholder="Transfer time will be here..."
+      />
+    </c-card>
+    <c-card title="Needed Bit Rate" mb-2>
+      <n-form-item label="Data Size:" label-placement="left">
+        <n-input v-model:value="neededRateInput.dataSize" placeholder="Data Size..." :min="0" w-full />
+        <c-select
+          v-model:value="neededRateInput.dataSizeUnit"
+          :options="allStorateUnits"
+          placeholder="Select a storage unit"
+          ml-1
+        />
+      </n-form-item>
+
+      <n-form-item label="Duration (h/m/s):" label-placement="left">
+        <n-input-number v-model:value="neededRateInput.hours" mr-1 placeholder="Hours" :min="0" w-full />
+        <n-input-number v-model:value="neededRateInput.minutes" mr-1 placeholder="Minutes" :min="0" w-full />
+        <n-input-number v-model:value="neededRateInput.seconds" mr-1 placeholder="Seconds" :min="0" w-full />
+      </n-form-item>
+
+      <n-divider />
+
+      <div flex items-baseline gap-2>
+        <InputCopyable
+          label="Needed Bit Rate:"
+          label-position="left"
+          :value="neededRateOutput"
+          placeholder="Needed Bit Rate will be here..."
+        />
+        <c-select
+          v-model:value="transferTimeInput.bitRateUnit"
+          :options="allBitsUnits"
+          placeholder="Select a bit rate unit"
+          ml-1
+        />
+      </div>
+    </c-card>
+    <c-card title="Amount Transferable" mb-2>
+      <n-form-item label="Bit Rate:" label-placement="left">
+        <n-input v-model:value="amountTransferableInput.bitRate" placeholder="Bit Rate..." :min="0" w-full />
+        <c-select
+          v-model:value="amountTransferableInput.bitRateUnit"
+          :options="allBitsUnits"
+          placeholder="Select a bit rate unit"
+          ml-1
+        />
+      </n-form-item>
+
+      <n-form-item label="Duration (h/m/s):" label-placement="left">
+        <n-input-number v-model:value="amountTransferableInput.hours" mr-1 placeholder="Hours" :min="0" w-full />
+        <n-input-number v-model:value="amountTransferableInput.minutes" mr-1 placeholder="Minutes" :min="0" w-full />
+        <n-input-number v-model:value="amountTransferableInput.seconds" mr-1 placeholder="Seconds" :min="0" w-full />
+      </n-form-item>
+
+      <n-divider />
+
+      <div flex items-baseline gap-2>
+        <InputCopyable
+          label="Amount transferable:"
+          label-position="left"
+          :value="amountTransferableOutput"
+          placeholder="Amount transferable will be here..."
+        />
+        <c-select
+          v-model:value="amountTransferableInput.dataSizeUnit"
+          searchable
+          :options="allStorateUnits"
+          placeholder="Select a storage unit"
+          ml-1
+        />
+      </div>
+    </c-card>
+  </div>
+</template>

src/tools/data-transfer-rate-converter/index.ts

@@ -0,0 +1,12 @@
+import { TransferIn } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Data Transfer Rate Calculator',
+  path: '/data-transfer-rate-converter',
+  description: 'Compute Data Transfer times, rates and amount of data',
+  keywords: ['data', 'transfer', 'rate', 'convert', 'time'],
+  component: () => import('./data-transfer-rate-converter.vue'),
+  icon: TransferIn,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/index.ts

@@ -2,6 +2,8 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as dataTransferRateConverter } from './data-transfer-rate-converter';
+import { tool as dataStorageUnitConverter } from './data-storage-unit-converter';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -164,7 +166,13 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
+    components: [
+      mathEvaluator,
+      etaCalculator,
+      percentageCalculator,
+      dataTransferRateConverter,
+      dataStorageUnitConverter,
+    ],
   },
   {
     name: 'Measurement',