wip dilution for calibration

Author: aeltorio

src/components/ConcentrationSelector.tsx

@@ -0,0 +1,40 @@
+import type React from "react";
+
+import { Select, SelectItem } from "@heroui/select";
+
+import { siteConfig } from "@/config/site";
+
+interface ConcentrationSelectorProps {
+  label?: string;
+  selectedConcentration: number;
+  onConcentrationChange: (concentration: number) => void;
+}
+
+export const ConcentrationSelector: React.FC<ConcentrationSelectorProps> = ({
+  label,
+  selectedConcentration,
+  onConcentrationChange,
+}) => {
+  return (
+    <Select
+      aria-label="Concentration Values"
+      className="max-w-xs"
+      label={label}
+      labelPlacement="outside-left"
+      selectedKeys={new Set([selectedConcentration.toString()])}
+      selectionMode="single"
+      variant="flat"
+      onSelectionChange={(keys) => {
+        const concentration = parseFloat(keys.currentKey as string);
+
+        if (!isNaN(concentration)) {
+          onConcentrationChange(concentration);
+        }
+      }}
+    >
+      {siteConfig.calibrationConcentrations.map((item) => (
+        <SelectItem key={item.concentration}>{item.name}</SelectItem>
+      ))}
+    </Select>
+  );
+};

src/components/OrificeSelector.tsx

@@ -1,6 +1,7 @@
 import type React from "react";
 
 import { Select, SelectItem } from "@heroui/select";
+
 import { siteConfig } from "@/config/site";
 
 interface OrificeSelectorProps {

src/components/navbar.tsx

@@ -7,7 +7,6 @@ import {
   NavbarItem,
   NavbarMenuToggle,
   NavbarMenu,
-  NavbarMenuItem,
 } from "@heroui/navbar";
 import { link as linkStyles } from "@heroui/theme";
 import clsx from "clsx";
@@ -83,7 +82,7 @@ export const Navbar = () => {
 
       <NavbarMenu>
         <div className="mx-4 mt-2 flex flex-col gap-2">
-        {siteConfig.navItems.map((item) => (
+          {siteConfig.navItems.map((item) => (
             <NavbarItem key={item.href}>
               <Link
                 className={clsx(

src/config/site.ts

@@ -9,7 +9,18 @@ export type SiteConfig = typeof siteConfig;
 export interface Orifice {
   size: number;
   name: string;
-};
+}
+
+/**
+ * Interface representing a calibration gas concentration
+ * @interface Concentration
+ * @property {number} concentration - The concentration value in ppm
+ * @property {string} name - The display name of the concentration (e.g., "5 ppm")
+ */
+export interface Concentration {
+  concentration: number;
+  name: string;
+}
 
 export const siteConfig = {
   name: "Flow Dilution",
@@ -81,4 +92,15 @@ export const siteConfig = {
     { size: 0.95, name: "950 Micron" },
     { size: 1.0, name: "1 mm" },
   ],
+  calibrationConcentrations: [
+    { concentration: 5e-6, name: "5 ppm" },
+    { concentration: 10e-6, name: "10 ppm" },
+    { concentration: 20e-6, name: "20 ppm" },
+    { concentration: 30e-6, name: "30 ppm" },
+    { concentration: 50e-6, name: "50 ppm" },
+    { concentration: 100e-6, name: "100 ppm" },
+    { concentration: 200e-6, name: "200 ppm" },
+    { concentration: 500e-6, name: "500 ppm" },
+    { concentration: 1e-3, name: "1000 ppm" },
+  ],
 };

src/pages/calibrationgas.tsx

@@ -27,13 +27,19 @@ import {
 import { title } from "@/components/primitives";
 import DefaultLayout from "@/layouts/default";
 import { FlowData, GasInlet } from "@/components/GasInlet";
+import { ConcentrationSelector } from "@/components/ConcentrationSelector";
+import { OrificeSelector } from "@/components/OrificeSelector";
+import { PressureSlider } from "@/components/PressureSlider";
 
 export default function CalibrationGasPage() {
   const [temperature, setTemperature] = useState<number>(293.15);
   const [selectedGasInlet1, setSelectedGasInlet1] = useState<GasMixtureExt>(
-    availableGasMixtures.find((gas) => gas.name.toLowerCase() === "nitrogen") as GasMixtureExt,
+    availableGasMixtures.find(
+      (gas) => gas.name.toLowerCase() === "nitrogen",
+    ) as GasMixtureExt,
   );
   const [inlet1Pressure, setInlet1Pressure] = useState<number>(400);
+  const [inlet2Pressure, setInlet2Pressure] = useState<number>(400);
   const [selectedOrificeInlet1, setSelectedOrificeInlet1] =
     useState<number>(0.02);
   const [inlet1FlowData, setInlet1FlowData] = useState<FlowData>({
@@ -60,6 +66,9 @@ export default function CalibrationGasPage() {
             concentration of 5 ppm H<sub>2</sub>S. The calculator uses ISO
             9300:2022 standards for sonic nozzle flow calculations.
           </p>
+          <p className="text-xs">Note that the mass of the calibration (ppm values) is ignored in the
+            calculation. 1000 ppm = 0.1% so it is less than the ISO9300:2022
+            standard tolerance.</p>
           <Input
             isRequired
             className="max-w-xs mt-4"
@@ -82,6 +91,31 @@ export default function CalibrationGasPage() {
             onOrificeChange={setSelectedOrificeInlet1}
             onPressureChange={setInlet1Pressure}
           />
+          <div className="mt-4">
+            <PressureSlider
+                    label={`Calibration gas Pressure`}
+                    value={inlet2Pressure}
+                    onChange={setInlet2Pressure}
+                  />
+            </div>
+          <div className="mt-4">
+            <OrificeSelector
+              label="Calibration orifice"
+              selectedOrifice={0.020}
+              onOrificeChange={function (orifice: number): void {
+                throw new Error("Function not implemented.");
+              }}
+            />
+          </div>
+          <div className="mt-4">
+            <ConcentrationSelector
+              label="Calibration bottle"
+              selectedConcentration={50e-6}
+              onConcentrationChange={function (concentration: number): void {
+                throw new Error("Function not implemented.");
+              }}
+            />
+          </div>
         </div>
       </section>
     </DefaultLayout>