Fix wire gauge bugs, add extra outputs to generic calc generation

src/components/input/NumericInputWithUnit.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { TextField, Grid } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
+import Qty from 'js-quantities';
+
+export default function NumericInputWithUnit(props: {
+  value: { value: number; unit: string };
+  onChange: (value: { value: number; unit: string }) => void;
+}) {
+  const [inputValue, setInputValue] = useState(props.value.value);
+  const [unit, setUnit] = useState(props.value.unit);
+  const [unitOptions, setUnitOptions] = useState<string[]>([]);
+
+  useEffect(() => {
+    try {
+      const kind = Qty(props.value.unit).kind();
+      const units = Qty.getUnits(kind);
+      setUnitOptions(units);
+    } catch (error) {
+      console.error('Invalid unit kind', error);
+    }
+  }, [props.value.unit]);
+
+  useEffect(() => {
+    setInputValue(props.value.value);
+    setUnit(props.value.unit);
+  }, [props.value]);
+
+  const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(event.target.value) || 0;
+    setInputValue(newValue);
+    if (props.onChange) {
+      try {
+        const qty = Qty(newValue, unit).to('meters');
+        props.onChange({ unit: 'meters', value: qty.scalar });
+      } catch (error) {
+        console.error('Conversion error', error);
+      }
+    }
+  };
+
+  const handleUnitChange = (newUnit: string) => {
+    if (!newUnit) return;
+    setUnit(newUnit);
+    try {
+      const convertedValue = Qty(inputValue, unit).to(newUnit).scalar;
+      setInputValue(convertedValue);
+    } catch (error) {
+      console.error('Unit conversion error', error);
+    }
+  };
+
+  return (
+    <Grid container spacing={2} alignItems="center">
+      <Grid item xs={6}>
+        <TextField
+          type="number"
+          fullWidth
+          value={inputValue}
+          onChange={handleValueChange}
+          label="Value"
+        />
+      </Grid>
+      <Grid item xs={6}>
+        <Autocomplete
+          options={unitOptions}
+          value={unit}
+          onChange={() => {
+            handleUnitChange(unit);
+          }}
+          renderInput={(params) => (
+            <TextField {...params} label="Unit" fullWidth />
+          )}
+        />
+      </Grid>
+    </Grid>
+  );
+}

src/datatables/data/wire_gauge.ts

@@ -69,7 +69,7 @@ const data: DataTable = {
 };
 
 for (const key in data.data) {
-  data.data[key].area = Math.PI * data.data[key].diameter ** 2;
+  data.data[key].area = Math.PI * (data.data[key].diameter / 2) ** 2;
 }
 
 export default data;

src/pages/tools/number/generic-calc/data/types.ts

@@ -2,6 +2,12 @@ export interface GenericCalcType {
   title: string;
   name: string;
   formula: string;
+
+  extraOutputs?: {
+    title: string;
+    formula: string;
+    unit: string;
+  }[];
   selections?: {
     title: string;
     source: string;

src/pages/tools/number/generic-calc/data/wire_voltage_drop.ts

@@ -2,7 +2,7 @@ import type { GenericCalcType } from './types';
 const voltagedropinwire: GenericCalcType = {
   title: 'Round trip voltage drop in cable',
   name: 'cable-voltage-drop',
-  formula: 'x = (((p * L) / (A/10**6) ) *2) * I**2',
+  formula: 'x = (((p * L) / (A/10**6) ) *2) * I',
   selections: [
     {
       title: 'Material',
@@ -22,6 +22,19 @@ const voltagedropinwire: GenericCalcType = {
       }
     }
   ],
+
+  extraOutputs: [
+    {
+      title: 'Total Resistance',
+      formula: '((p * L) / (A/10**6))*2',
+      unit: 'Ω'
+    },
+    {
+      title: 'Total Power Dissipated',
+      formula: 'I**2 * (((p * L) / (A/10**6))*2)',
+      unit: 'W'
+    }
+  ],
   variables: [
     {
       name: 'L',

src/pages/tools/number/generic-calc/index.tsx

@@ -49,6 +49,10 @@ export default async function makeTool(
       [key: string]: string;
     }>({});
 
+    const [extraOutputs, setExtraOutputs] = useState<{
+      [key: string]: string;
+    }>({});
+
     const updateVarField = (
       name: string,
       value: number,
@@ -273,6 +277,15 @@ export default async function makeTool(
                       </TableCell>
                     </TableRow>
                   ))}
+
+                  {calcData.extraOutputs?.map((extraOutput) => (
+                    <TableRow key={extraOutput.title}>
+                      <TableCell>{extraOutput.title}</TableCell>
+                      <TableCell>{extraOutputs[extraOutput.title]}</TableCell>
+                      <TableCell>{extraOutput.unit}</TableCell>
+                      <TableCell></TableCell>
+                    </TableRow>
+                  ))}
                 </TableBody>
               </Table>
             )
@@ -311,6 +324,25 @@ export default async function makeTool(
           } else {
             setShortResult('');
           }
+
+          if (calcData.extraOutputs !== undefined) {
+            for (let i = 0; i < calcData.extraOutputs.length; i++) {
+              const extraOutput = calcData.extraOutputs[i];
+
+              let expr = nerdamer(extraOutput.formula);
+
+              Object.keys(values.vars).forEach((key) => {
+                if (key === values.outputVariable) return;
+                expr = expr.sub(key, values.vars[key].value.toString());
+              });
+
+              const result: nerdamer.Expression = expr.evaluate();
+
+              if (result) {
+                extraOutputs[extraOutput.title] = result.toDecimal();
+              }
+            }
+          }
         }}
       />
     );