Change NDArray to have fixed dot position and minus sign

irdkwmnsb · May 14, 2024 · a4902d7 · a4902d7
1 parent d7f1cd0
commit a4902d7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/components/array/ndarray.module.scss b/src/components/array/ndarray.module.scss
@@ -5,6 +5,7 @@
         color: #777;
         tr {
             td {
+                text-align: center;
                 border: 1px solid black;
             }
         }
@@ -19,4 +20,19 @@
             }
         }
     }
+}
+
+.numberCell {
+    width: 100%;
+    display: flex;
+    .whole {
+        flex-grow: 1;
+        text-align: end;
+    }
+    .dot {
+
+    }
+    .rational {
+
+    }
 }
diff --git a/src/components/array/ndarray.tsx b/src/components/array/ndarray.tsx
@@ -10,6 +10,18 @@ type VisNDArrayProps<T> = {
     } 
     : unknown)
 
+const NumberCell = ({value, roundTo} : {value: number, roundTo: number}) => {
+    const whole = Math.floor(value)
+    const rational = Math.round((Math.abs(value) % 1) * Math.pow(10, roundTo))
+    return <div className={styles.numberCell}>
+        <div className={styles.whole}>{(whole + "").replace("-", "−")}</div>
+        <div className={styles.dot}>.</div>
+        <div className={styles.rational} style={{
+            width: roundTo + "ch"
+        }}>{rational}</div>
+    </div>
+}
+
 export const VisNDArray = <T extends RenderableData,>(props: VisNDArrayProps<T>) => {
     const maxElems = props.array.reduce((a, b) => Math.max(a, b.length), 0)
     return <div>
@@ -34,7 +46,10 @@ export const VisNDArray = <T extends RenderableData,>(props: VisNDArrayProps<T>)
                         {row.map((el, colIndex) => (
                             <td key={rowIndex + "-" + colIndex}>
                                 {
-                                    typeof el === "number" ? el.toFixed((props as VisNDArrayProps<typeof el>).roundTo ?? 2) : el
+                                    typeof el === "number" ? 
+                                        <NumberCell value={el} roundTo={(props as VisNDArrayProps<typeof el>).roundTo ?? 2}/>
+                                        : 
+                                        el
                                 }
                             </td>
                         ))}