From df90598504f1dcdc697c864262d08bf8da8efc57 Mon Sep 17 00:00:00 2001 From: Matteo La Cognata Date: Fri, 29 Sep 2023 14:13:15 +0200 Subject: [PATCH] chore(): refac --- LICENSE | 21 +++++++ app/components/Battery.tsx | 4 +- app/components/Meter/History.tsx | 42 ++++++-------- app/components/Meter/Percentile.tsx | 2 +- app/components/Meter/enum.ts | 36 ++++++++++++ app/components/Meter/utils.tsx | 86 +++++++---------------------- 6 files changed, 95 insertions(+), 96 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..c7c830d --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Matteo La Cognata + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/app/components/Battery.tsx b/app/components/Battery.tsx index d097f28..9d7cc19 100644 --- a/app/components/Battery.tsx +++ b/app/components/Battery.tsx @@ -1,4 +1,4 @@ -import { classNames, isDefined } from "~/utils"; +import { classNames, inRange, isDefined } from "~/utils"; export const Battery = ({ value, @@ -24,7 +24,7 @@ export const Battery = ({ return color; }; - const almostEmpty = percentage > 0 && percentage < 10; + const almostEmpty = inRange(0, 10, percentage); const almostFull = percentage > 49; const charging = isDefined(value) && value === 0; diff --git a/app/components/Meter/History.tsx b/app/components/Meter/History.tsx index 19ea800..94714dd 100644 --- a/app/components/Meter/History.tsx +++ b/app/components/Meter/History.tsx @@ -2,6 +2,18 @@ import { classNames, isDefined } from "~/utils"; import type { MeterVariation } from "."; import { Percentile } from "./Percentile"; +const Value = ({ value, success }: { value?: number; success?: boolean }) => ( +
+ {(value || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })} +
+); + export const History = ({ min, max, @@ -26,33 +38,11 @@ export const History = ({
-
- {(max || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })} -
-
- {(min || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })} -
+ +
-
-
- {(avg || 0).toLocaleString("en-US", { maximumFractionDigits: 0 })} -
+
+
diff --git a/app/components/Meter/Percentile.tsx b/app/components/Meter/Percentile.tsx index 1ab7901..e10ac0e 100644 --- a/app/components/Meter/Percentile.tsx +++ b/app/components/Meter/Percentile.tsx @@ -10,7 +10,7 @@ export const Percentile = ({ value?: number; variation?: MeterVariation; }) => ( -
+
{ - let color = "bg-green-400"; - if (value > 899) { - color = "bg-yellow-400"; - } - if (value > 1099) { - color = "bg-amber-300"; - } - if (value > 1499) { - color = "bg-orange-600 animate-pulse"; - } - if (value > 1999) { - color = "bg-red-600 animate-pulse"; - } - if (value > 2999) { - color = "bg-purple-700 animate-pulse"; - } - if (value > 4999) { - color = "bg-amber-950 animate-pulse"; - } - return color; -}; - -const colorForBvoc = (value: number) => { - let color = "bg-green-400"; - if (value > 1.0) { - color = "bg-amber-300"; - } - if (value > 5.0) { - color = "bg-orange-600 animate-pulse"; - } - if (value > 15.0) { - color = "bg-red-600 animate-pulse"; - } - if (value > 30.0) { - color = "bg-purple-700 animate-pulse"; - } - if (value > 40.0) { - color = "bg-amber-950 animate-pulse"; - } - return color; -}; - -const colorForIaq = (value: number) => { - let color = "bg-green-400"; - if (value > 50) { - color = "bg-amber-300"; - } - if (value > 100) { - color = "bg-orange-600 animate-pulse"; - } - if (value > 150) { - color = "bg-red-600 animate-pulse"; - } - if (value > 200) { - color = "bg-purple-700 animate-pulse"; - } - if (value > 300) { - color = "bg-amber-950 animate-pulse"; - } - return color; +const rangeForEnum = ( + value: number, + _enum: typeof CO2Range | typeof BVOCRange | typeof IAQRange, +) => { + const key = Object.keys(_enum).reduce((prev, curr) => { + if (value > Number(prev)) return curr; + return prev; + }); + return _enum[key as keyof typeof _enum]; }; export const colorFor = (value: number, type: MeterType) => { - if (type === MeterType.CO2) return colorForCo2(value); - if (type === MeterType.BVOC) return colorForBvoc(value); - if (type === MeterType.IAQ) return colorForIaq(value); - return "bg-green-400"; + let _enum; + if (type === MeterType.CO2) _enum = CO2Range; + if (type === MeterType.BVOC) _enum = BVOCRange; + if (type === MeterType.IAQ) _enum = IAQRange; + if (_enum === undefined) return ""; + return RangeClass[ + rangeForEnum(value, _enum) as unknown as keyof typeof RangeClass + ]; }; export const IconForPressure = ({ value }: { value: number | undefined }) => { - if (value === undefined) return <>; + if (value === undefined) return
; if (value < 1000) return ; if (value > 1000) return ; return ;