feat(components): add BoxPlot, PercentBar and FrequencyBars components

DataKitchen · Nov 7, 2024 · 58ca5a7 · 58ca5a7
1 parent ab08ba2
commit 58ca5a7
Show file tree

Hide file tree

Showing 7 changed files with 573 additions and 14 deletions.
diff --git a/testgen/ui/components/frontend/css/shared.css b/testgen/ui/components/frontend/css/shared.css
@@ -20,6 +20,8 @@ body {
     --blue: #42A5F5;
     --brown: #8D6E63;
     --grey: #BDBDBD;
+    --empty: #EEEEEE;
+    --empty-light: #FAFAFA;
 
     --primary-text-color: #000000de;
     --secondary-text-color: #0000008a;
@@ -62,6 +64,9 @@ body {
 
 @media (prefers-color-scheme: dark) {
     body {
+        --empty: #424242;
+        --empty-light: #212121;
+
         --primary-text-color: rgba(255, 255, 255);
         --secondary-text-color: rgba(255, 255, 255, .7);
         --disabled-text-color: rgba(255, 255, 255, .5);
@@ -150,15 +155,12 @@ body {
 .flex-row {
     display: flex;
     flex-direction: row;
-    flex-grow: 1;
-    width: 100%;
     align-items: center;
 }
 
 .flex-column {
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
 }
 
 .fx-flex {
@@ -209,6 +211,34 @@ body {
     align-content: flex-start;
 }
 
+.fx-gap-1 {
+    gap: 4px;
+}
+
+.fx-gap-2 {
+    gap: 8px;
+}
+
+.fx-gap-3 {
+    gap: 12px;
+}
+
+.fx-gap-4 {
+    gap: 16px;
+}
+
+.fx-gap-5 {
+    gap: 24px;
+}
+
+.fx-gap-6 {
+    gap: 32px;
+}
+
+.fx-gap-7 {
+    gap: 40px;
+}
+
 /*  */
 
 /* Whitespace utilities */

diff --git a/testgen/ui/components/frontend/js/axis_utils.js b/testgen/ui/components/frontend/js/axis_utils.js
@@ -0,0 +1,54 @@
+// https://stackoverflow.com/a/4955179
+function niceNumber(value, round = false) {
+    const exponent = Math.floor(Math.log10(value));
+    const fraction = value / Math.pow(10, exponent);
+    let niceFraction;
+
+    if (round) {
+        if (fraction < 1.5) {
+            niceFraction = 1;
+        } else if (fraction < 3) {
+            niceFraction = 2;
+        } else if (fraction < 7) {
+            niceFraction = 5;
+        } else {
+            niceFraction = 10;
+        }
+    } else {
+        if (fraction <= 1) {
+            niceFraction = 1;
+        } else if (fraction <= 2) {
+            niceFraction = 2;
+        } else if (fraction <= 5) {
+            niceFraction = 5;
+        } else {
+            niceFraction = 10;
+        }
+    }
+
+    return niceFraction * Math.pow(10, exponent);
+}
+
+function niceBounds(axisStart, axisEnd, tickCount = 4) {
+    let axisWidth = axisEnd - axisStart;
+
+    if (axisWidth == 0) {
+        axisStart -= 0.5;
+        axisEnd += 0.5;
+        axisWidth = axisEnd - axisStart;
+    }
+
+    const niceRange = niceNumber(axisWidth);
+    const niceTick = niceNumber(niceRange / (tickCount - 1), true);
+    axisStart = Math.floor(axisStart / niceTick) * niceTick;
+    axisEnd = Math.ceil(axisEnd / niceTick) * niceTick;
+
+    return {
+        min: axisStart,
+        max: axisEnd,
+        step: niceTick,
+        range: axisEnd - axisStart,
+    };
+}
+
+export { niceBounds };