Merge f2bf7810dd into 0de73e8971

.eslintrc-auto-import.json

@@ -286,6 +286,9 @@
     "watchTriggerable": true,
     "watchWithFilter": true,
     "whenever": true,
-    "toValue": true
+    "toValue": true,
+    "injectLocal": true,
+    "provideLocal": true,
+    "useClipboardItems": true
   }
 }

auto-imports.d.ts

@@ -36,6 +36,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -65,6 +66,7 @@ declare global {
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -128,6 +130,7 @@ declare global {
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
@@ -326,6 +329,7 @@ declare module 'vue' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -355,6 +359,7 @@ declare module 'vue' {
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -418,6 +423,7 @@ declare module 'vue' {
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
@@ -610,6 +616,7 @@ declare module '@vue/runtime-core' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -639,6 +646,7 @@ declare module '@vue/runtime-core' {
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -702,6 +710,7 @@ declare module '@vue/runtime-core' {
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>

components.d.ts

@@ -64,6 +64,8 @@ declare module '@vue/runtime-core' {
     'CTextCopyable.demo': typeof import('./src/ui/c-text-copyable/c-text-copyable.demo.vue')['default']
     CTooltip: typeof import('./src/ui/c-tooltip/c-tooltip.vue')['default']
     'CTooltip.demo': typeof import('./src/ui/c-tooltip/c-tooltip.demo.vue')['default']
+    DataStorageUnitConverter: typeof import('./src/tools/data-storage-unit-converter/data-storage-unit-converter.vue')['default']
+    DataTransferRateConverter: typeof import('./src/tools/data-transfer-rate-converter/data-transfer-rate-converter.vue')['default']
     DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
     'DemoHome.page': typeof import('./src/ui/demo/demo-home.page.vue')['default']
     DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
@@ -130,7 +132,9 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
@@ -138,6 +142,8 @@ declare module '@vue/runtime-core' {
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']

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('1024');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000, fromUnit: 'MB', toUnit: 'GB' })).toBe('1');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1024, fromUnit: 'MB', toUnit: 'MB' })).toBe('1024');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1, fromUnit: 'MB', toUnit: 'KB' })).toBe('1000');
+      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('1048.576');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1, fromUnit: 'MB', toUnit: 'Mb' })).toBe('8');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000, fromUnit: 'KB', toUnit: 'Kb' })).toBe('8000');
+      expect(convertStorageAndRateUnitsDisplay({ value: 1000, fromUnit: 'KiB', toUnit: 'Kb' })).toBe('8192');
+      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('8388.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,45 @@
+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.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '') + (appendUnit ? unit : ''); // NOSONAR
+}
+
+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,96 @@
+<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 = [
+  { value: 'B', label: 'Bytes (B)' },
+  { value: 'b', label: 'Bits (bit)' },
+  { value: 'iB', label: 'Bibytes (iB)' },
+  { value: 'KB', label: 'Kilobytes (KB)' },
+  { value: 'Kb', label: 'Kilobits (Kbit)' },
+  { value: 'KiB', label: 'Kibibytes (KiB)' },
+  { value: 'MB', label: 'Megabytes (MB)' },
+  { value: 'Mb', label: 'Megabits (Mbit)' },
+  { value: 'MiB', label: 'Mebibytes (MiB)' },
+  { value: 'GB', label: 'Gigabytes (GB)' },
+  { value: 'Gb', label: 'Gigabits (Gbit)' },
+  { value: 'GiB', label: 'Gibibytes (GiB)' },
+  { value: 'TB', label: 'Terabytes (TB)' },
+  { value: 'Tb', label: 'Terabits (Tbit)' },
+  { value: 'TiB', label: 'Tebibytes (TiB)' },
+  { value: 'PB', label: 'Petabytes (PB)' },
+  { value: 'Pb', label: 'Petabits (Pbit)' },
+  { value: 'PiB', label: 'Pebibytes (PiB)' },
+  { value: 'EB', label: 'Exabytes (EB)' },
+  { value: 'Eb', label: 'Exabits (Ebit)' },
+  { value: 'EiB', label: 'Exbibytes (EiB)' },
+  { value: 'ZB', label: 'Zettabytes (ZB)' },
+  { value: 'Zb', label: 'Zettabits (Zbit)' },
+  { value: 'ZiB', label: 'Zebibytes (ZiB)' },
+  { value: 'YB', label: 'Yottabytes (YB)' },
+  { value: 'Yb', label: 'Yottabits (Ybit)' },
+  { value: 'YiB', label: 'Yobibytes (YiB)' },
+];
+
+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" style="width:100px" 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,47 @@
+import { describe, expect, it } from 'vitest';
+import { amountTransferable, transferSpeedRate, 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('transferSpeedRate', () => {
+    it('compute transferSpeedRate', () => {
+      expect(transferSpeedRate({
+        dataSize: 100,
+        dataSizeUnit: 'MB',
+        hours: 0,
+        minutes: 1,
+        seconds: 20,
+        bitRateUnit: 'Mb',
+      })).toBe(10);
+      expect(transferSpeedRate({
+        dataSize: 100,
+        dataSizeUnit: 'MB',
+        hours: 0,
+        minutes: 1,
+        seconds: 20,
+        bitRateUnit: 'MB',
+      })).toBe(1.25);
+    });
+  });
+  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, 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: AllSupportedUnits
+}): 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 transferSpeedRate({
+  dataSize,
+  dataSizeUnit,
+  hours,
+  minutes,
+  seconds,
+  bitRateUnit,
+}: {
+  dataSize: number
+  dataSizeUnit: AllSupportedUnits
+  hours: number
+  minutes: number
+  seconds: number
+  bitRateUnit: AllSupportedUnits
+}): 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: AllSupportedUnits
+  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,246 @@
+<script setup lang="ts">
+import { formatDuration, intervalToDuration } from 'date-fns';
+import { type AllSupportedUnits, displayStorageAndRateUnits } from '../data-storage-unit-converter/data-storage-unit-converter.service';
+import { amountTransferable, transferSpeedRate, transferTimeSeconds } from './data-transfer-rate-converter.service';
+
+const allStorateUnits = [
+  { value: 'B', label: 'Bytes (B)' },
+  { value: 'iB', label: 'Bibytes (iB)' },
+  { value: 'KB', label: 'Kilobytes (KB)' },
+  { value: 'KiB', label: 'Kibibytes (KiB)' },
+  { value: 'MB', label: 'Megabytes (MB)' },
+  { value: 'MiB', label: 'Mebibytes (MiB)' },
+  { value: 'GB', label: 'Gigabytes (GB)' },
+  { value: 'GiB', label: 'Gibibytes (GiB)' },
+  { value: 'TB', label: 'Terabytes (TB)' },
+  { value: 'TiB', label: 'Tebibytes (TiB)' },
+  { value: 'PB', label: 'Petabytes (PB)' },
+  { value: 'PiB', label: 'Pebibytes (PiB)' },
+  { value: 'EB', label: 'Exabytes (EB)' },
+  { value: 'EiB', label: 'Exbibytes (EiB)' },
+  { value: 'ZB', label: 'Zettabytes (ZB)' },
+  { value: 'ZiB', label: 'Zebibytes (ZiB)' },
+  { value: 'YB', label: 'Yottabytes (YB)' },
+  { value: 'YiB', label: 'Yobibytes (YiB)' },
+];
+const allBitsUnits = [
+  { value: 'b', label: 'Bits (bit)' },
+  { value: 'Kb', label: 'Kilobits (Kbit)' },
+  { value: 'Mb', label: 'Megabits (Mbit)' },
+  { value: 'Gb', label: 'Gigabits (Gbit)' },
+  { value: 'Tb', label: 'Terabits (Tbit)' },
+  { value: 'Pb', label: 'Petabits (Pbit)' },
+  { value: 'Eb', label: 'Exabits (Ebit)' },
+  { value: 'Zb', label: 'Zettabits (Zbit)' },
+  { value: 'Yb', label: 'Yottabits (Ybit)' },
+];
+
+const allRateUnits = [...allBitsUnits, ...allStorateUnits];
+
+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 AllSupportedUnits,
+    }));
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+const transferSpeedRateInput = 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 transferSpeedRateOutput = computed(() => {
+  try {
+    return displayStorageAndRateUnits({
+      unit: transferSpeedRateInput.value.bitRateUnit as AllSupportedUnits,
+      appendUnit: true,
+      value: transferSpeedRate({
+        dataSize: Number(transferSpeedRateInput.value.dataSize),
+        dataSizeUnit: transferSpeedRateInput.value.dataSizeUnit as AllSupportedUnits,
+        hours: transferSpeedRateInput.value.hours,
+        minutes: transferSpeedRateInput.value.minutes,
+        seconds: transferSpeedRateInput.value.seconds,
+        bitRateUnit: transferSpeedRateInput.value.bitRateUnit as AllSupportedUnits,
+      }),
+    });
+  }
+  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 AllSupportedUnits,
+        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="allRateUnits"
+          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="Transfer Bit Rate/Speed" mb-2>
+      <n-form-item label="Data Size:" label-placement="left">
+        <n-input v-model:value="transferSpeedRateInput.dataSize" placeholder="Data Size..." :min="0" w-full />
+        <c-select
+          v-model:value="transferSpeedRateInput.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="transferSpeedRateInput.hours" mr-1 placeholder="Hours" :min="0" w-full />
+        <n-input-number v-model:value="transferSpeedRateInput.minutes" mr-1 placeholder="Minutes" :min="0" w-full />
+        <n-input-number v-model:value="transferSpeedRateInput.seconds" mr-1 placeholder="Seconds" :min="0" w-full />
+      </n-form-item>
+
+      <n-divider />
+
+      <div flex items-baseline gap-2>
+        <InputCopyable
+          label="Transfer Bit Rate/Speed:"
+          label-position="left"
+          :value="transferSpeedRateOutput"
+          placeholder="Bit Rate will be here..."
+        />
+        <c-select
+          v-model:value="transferSpeedRateInput.bitRateUnit"
+          :options="allRateUnits"
+          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="allRateUnits"
+          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';
 
@@ -168,7 +170,13 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Math',
-    components: [mathEvaluator, etaCalculator, percentageCalculator],
+    components: [
+      mathEvaluator,
+      etaCalculator,
+      percentageCalculator,
+      dataTransferRateConverter,
+      dataStorageUnitConverter,
+    ],
   },
   {
     name: 'Measurement',