refactor: string and datetime formatters

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

Author: pedrolamas

src/components/widgets/spoolman/SpoolmanCard.vue

@@ -115,23 +115,23 @@
               >
                 <template v-if="field === 'remaining_weight'">
                   <span v-if="remainingFilamentUnit === 'weight'">
-                    {{ $filters.getReadableWeightString(activeSpool.remaining_weight) }}
-                    <small>/ {{ $filters.getReadableWeightString(activeSpool.initial_weight) }}</small>
+                    {{ getFormattedField('remaining_weight') }}
+                    <small>/ {{ getFormattedField('initial_weight') }}</small>
                   </span>
                   <span v-else-if="remainingFilamentUnit === 'length'">
-                    {{ $filters.getReadableLengthString(activeSpool.remaining_length) }}
-                    <small>/ {{ $filters.getReadableLengthString(activeSpool.initial_length) }}</small>
+                    {{ getFormattedField('remaining_length') }}
+                    <small>/ {{ getFormattedField('initial_length') }}</small>
                   </span>
                 </template>
 
                 <template v-else-if="field === 'used_weight'">
                   <span v-if="remainingFilamentUnit === 'weight'">
-                    {{ $filters.getReadableWeightString(activeSpool.used_weight) }}
-                    <small>/ {{ $filters.getReadableWeightString(activeSpool.initial_weight) }}</small>
+                    {{ getFormattedField('used_weight') }}
+                    <small>/ {{ getFormattedField('initial_weight') }}</small>
                   </span>
                   <span v-else-if="remainingFilamentUnit === 'length'">
-                    {{ $filters.getReadableLengthString(activeSpool.used_length) }}
-                    <small>/ {{ $filters.getReadableLengthString(activeSpool.initial_length) }}</small>
+                    {{ getFormattedField('used_length') }}
+                    <small>/ {{ getFormattedField('initial_length') }}</small>
                   </span>
                 </template>
 
@@ -287,6 +287,24 @@ export default class SpoolmanCard extends Mixins(StateMixin) {
       case 'bed_temp':
         return this.activeSpool.filament.settings_bed_temp || '-'
 
+      case 'remaining_weight':
+        return this.activeSpool.remaining_weight != null ? this.$filters.getReadableWeightString(this.activeSpool.remaining_weight) : '-'
+
+      case 'remaining_length':
+        return this.activeSpool.remaining_length != null ? this.$filters.getReadableLengthString(this.activeSpool.remaining_length) : '-'
+
+      case 'used_weight':
+        return this.activeSpool.used_weight != null ? this.$filters.getReadableWeightString(this.activeSpool.used_weight) : '-'
+
+      case 'used_length':
+        return this.activeSpool.used_length != null ? this.$filters.getReadableLengthString(this.activeSpool.used_length) : '-'
+
+      case 'initial_weight':
+        return this.activeSpool.initial_weight != null ? this.$filters.getReadableWeightString(this.activeSpool.initial_weight) : '-'
+
+      case 'initial_length':
+        return this.activeSpool.initial_length != null ? this.$filters.getReadableLengthString(this.activeSpool.initial_length) : '-'
+
       default:
         return this.activeSpool[field as keyof Spool] || '-'
     }

src/util/date-time-formatters.ts

@@ -119,26 +119,40 @@ const dateTimeFormatters = (getDefaultDateFormat: GetDefaultDateTimeFormatFuncti
     },
 
     formatRelativeTimeToDate (value: number | string | Date, value2: number | string | Date, options?: Intl.RelativeTimeFormatOptions) {
-      let v = Math.floor(+new Date(value) / 1000)
-      let v2 = Math.floor(+new Date(value2) / 1000)
-
-      const units: { unit: Intl.RelativeTimeFormatUnit, limit: number }[] = [
-        { unit: 'second', limit: 60 },
-        { unit: 'minute', limit: 60 },
-        { unit: 'hour', limit: 24 },
-        { unit: 'day', limit: 30 },
-        { unit: 'month', limit: 12 },
-        { unit: 'year', limit: -1 }
-      ]
-
-      for (const { unit, limit } of units) {
-        if (limit === -1 || Math.abs(v - v2) < limit) {
-          return instance.formatRelativeTime(v - v2, unit, options)
-        }
-
-        v = Math.floor(v / limit)
-        v2 = Math.floor(v2 / limit)
-      }
+      const seconds = (+new Date(value) - +new Date(value2)) / 1000
+      const absoluteSeconds = Math.abs(seconds)
+
+      const [unit, unitValue]: [Intl.RelativeTimeFormatUnit, number] = absoluteSeconds >= 60 * 60 * 24 * 365
+        ? [
+            'year',
+            Math.round(seconds / (60 * 60 * 24 * 365))
+          ]
+        : absoluteSeconds >= 60 * 60 * 24 * 30
+          ? [
+              'month',
+              Math.round(seconds / (60 * 60 * 24 * 30))
+            ]
+          : absoluteSeconds >= 60 * 60 * 24
+            ? [
+                'day',
+                Math.round(seconds / (60 * 60 * 24))
+              ]
+            : absoluteSeconds >= 60 * 60
+              ? [
+                  'hour',
+                  Math.round(seconds / (60 * 60))
+                ]
+              : absoluteSeconds >= 60
+                ? [
+                    'minute',
+                    Math.round(seconds / 60)
+                  ]
+                : [
+                    'second',
+                    seconds
+                  ]
+
+      return instance.formatRelativeTime(unitValue, unit, options)
     },
 
     formatRelativeTime (value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions) {

src/util/string-formatters.ts

@@ -2,6 +2,12 @@ import { upperFirst } from 'lodash-es'
 import { getAllLocales } from '@/plugins/i18n'
 
 const stringFormatters = () => {
+  const byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const frequencyUnits = [' Hz', ' kHz', ' MHz', ' GHz', ' THz']
+
+  const resistanceUnits = [' Ω', ' kΩ', ' MΩ', ' GΩ', ' TΩ']
+
   const instance = {
     prettyCase: (value: string) => {
       return value
@@ -11,101 +17,110 @@ const stringFormatters = () => {
         .join(' ')
     },
 
+    getStringValueWithUnit: (value: number, fractionDigits: number, unit: string) => {
+      if (value === 0) {
+        return `0${unit}`
+      }
+
+      return Math.max(value, Math.pow(10, -fractionDigits))
+        .toFixed(fractionDigits) + unit
+    },
+
     /**
-   * Splits a string into an array of strings, removing quotes.
-   */
+     * Splits a string into an array of strings, removing quotes.
+     */
     getStringArray: (value: string, separator = ';') => {
       return value.split(separator)
         .map(x => x.replace(/^"|"$/g, ''))
     },
 
     /**
-   * Formats a number (in bytes) to a human readable file size.
-   */
+     * Formats a number (in bytes) to a human readable file size.
+     */
     getReadableFileSizeString: (fileSizeInBytes: number, fractionDigits = 1) => {
       let i = -1
-      const byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB']
-      if (fileSizeInBytes === 0) return `0${byteUnits[0]}`
       do {
         fileSizeInBytes = fileSizeInBytes / 1024
         i++
       } while (fileSizeInBytes > 1024)
 
-      return Math.max(fileSizeInBytes, 0.1).toFixed(fractionDigits) + byteUnits[i]
+      return instance.getStringValueWithUnit(fileSizeInBytes, fractionDigits, byteUnits[i])
     },
 
     /**
-   * Formats a number (in bytes/sec) to a human readable data rate.
-   */
+     * Formats a number (in bytes/sec) to a human readable data rate.
+     */
     getReadableDataRateString: (dataRateInBytesPerSec: number, fractionDigits = 1) => {
       let i = -1
-      const byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB']
-      if (dataRateInBytesPerSec === 0) return `0${byteUnits[0]}`
       do {
         dataRateInBytesPerSec = dataRateInBytesPerSec / 1024
         i++
       } while (dataRateInBytesPerSec > 1024)
 
-      return Math.max(dataRateInBytesPerSec, 0.2).toFixed(fractionDigits) + byteUnits[i] + '/Sec'
+      return instance.getStringValueWithUnit(dataRateInBytesPerSec, fractionDigits, byteUnits[i] + '/Sec')
     },
 
     /**
-   * Formats a number representing mm to human readable distance.
-   */
-    getReadableLengthString: (lengthInMm: number | undefined | null, showMicrons = false) => {
-      if (lengthInMm === undefined || lengthInMm === null) {
-        return '-'
+     * Formats a number representing mm to human readable distance.
+     */
+    getReadableLengthString: (lengthInMm: number, showMicrons = false, fractionDigits: number | undefined = undefined) => {
+      if (lengthInMm >= 1000) {
+        return (lengthInMm / 1000).toFixed(fractionDigits ?? 2) + ' m'
       }
 
-      if (lengthInMm >= 1000) return (lengthInMm / 1000).toFixed(2) + ' m'
-      if (lengthInMm > 100) return (lengthInMm / 10).toFixed(1) + ' cm'
-      if (lengthInMm < 0.1 && showMicrons) return (lengthInMm * 1000).toFixed(0) + ' μm'
-      return lengthInMm.toFixed(1) + ' mm'
+      if (lengthInMm > 100) {
+        return (lengthInMm / 10).toFixed(fractionDigits ?? 1) + ' cm'
+      }
+
+      if (lengthInMm < 0.1 && showMicrons) {
+        return instance.getStringValueWithUnit(lengthInMm * 1000, fractionDigits ?? 0, ' μm')
+      }
+
+      return instance.getStringValueWithUnit(lengthInMm, fractionDigits ?? 1, ' mm')
     },
 
     /**
-   * Formats a number representing g to human readable weight.
-   */
-    getReadableWeightString: (weightInG: number | undefined | null, fractionDigits = 2) => {
-      if (weightInG === undefined || weightInG === null) {
-        return '-'
+     * Formats a number representing g to human readable weight.
+     */
+    getReadableWeightString: (weightInG: number, fractionDigits = 2) => {
+      if (weightInG >= 1000) {
+        return (weightInG / 1000).toFixed(fractionDigits) + ' kg'
       }
 
-      if (weightInG >= 1000) return (weightInG / 1000).toFixed(fractionDigits) + ' kg'
-      return weightInG.toFixed(fractionDigits) + ' g'
+      return instance.getStringValueWithUnit(weightInG, fractionDigits, ' g')
     },
 
     /**
-   * Formats a number (in Hz) to a human readable frequency.
-   */
+     * Formats a number (in Hz) to a human readable frequency.
+     */
     getReadableFrequencyString: (frequencyInHz: number, fractionDigits = 0) => {
       let i = 0
-      const frequencyUnits = [' Hz', ' kHz', ' MHz', ' GHz', ' THz']
       while (frequencyInHz >= 1000) {
         frequencyInHz = frequencyInHz / 1000
         i++
       }
-      return frequencyInHz.toFixed(fractionDigits) + frequencyUnits[i]
+
+      return instance.getStringValueWithUnit(frequencyInHz, fractionDigits, frequencyUnits[i])
     },
 
     /**
-   * Formats a number (in ohms) to a human readable resistance.
-   */
+     * Formats a number (in ohms) to a human readable resistance.
+     */
     getReadableResistanceString: (resistanceInOhms: number, fractionDigits = 1) => {
       let i = 0
-      const resistanceUnits = [' Ω', ' kΩ', ' MΩ', ' GΩ', ' TΩ']
       while (resistanceInOhms >= 1000) {
         resistanceInOhms = resistanceInOhms / 1000
         i++
       }
-      return resistanceInOhms.toFixed(fractionDigits) + resistanceUnits[i]
+
+      return instance.getStringValueWithUnit(resistanceInOhms, fractionDigits, resistanceUnits[i])
     },
 
     /**
-   * Formats a number (in hPa) to human readable atmospheric pressure.
-   */
+     * Formats a number (in hPa) to human readable atmospheric pressure.
+     */
     getReadableAtmosphericPressureString: (pressumeInHPa: number, fractionDigits = 1) => {
-      return pressumeInHPa.toFixed(fractionDigits) + ' hPa'
+      return instance.getStringValueWithUnit(pressumeInHPa, fractionDigits, ' hPa')
     },
 
     getReadableCurrencyString: (value: number, currency: string, options?: Intl.NumberFormatOptions) => {