Offerwall page - using datatables to show the bucket contents, setting up tabs to allow overview and detail insights of buckets, formatting of height and layout, playing with iqr, connection to conditionally eligible sidebar

2 files changed, 105 insertions, 1 deletions

diff --git a/src/lib/snippets.tsx b/src/lib/snippets.tsx
new file mode 100644
index 0000000..5e95cd2
--- /dev/null
+++ b/src/lib/snippets.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+
+type IQRData = {
+    min: number;
+    q1: number;
+    median: number;
+    q3: number;
+    max: number;
+};
+
+type IQRBoxPlotProps = {
+    data: IQRData;
+};
+
+export const IQRBoxPlot: React.FC<IQRBoxPlotProps> = ({data}) => {
+    const {min, q1, median, q3, max} = data;
+
+    const scale = (value: number): number =>
+        ((value - min) / (max - min)) * 100;
+
+    return (
+        <div className="w-full p-4">
+            <div className="text-sm mb-2 text-muted-foreground">Box Plot</div>
+            <svg viewBox="0 0 100 20" className="w-full h-12">
+                <line
+                    x1={scale(min)}
+                    x2={scale(q1)}
+                    y1={10}
+                    y2={10}
+                    stroke="#999"
+                    strokeWidth={1}
+                />
+
+                <line
+                    x1={scale(q3)}
+                    x2={scale(max)}
+                    y1={10}
+                    y2={10}
+                    stroke="#999"
+                    strokeWidth={1}
+                />
+
+                <rect
+                    x={scale(q1)}
+                    y={5}
+                    width={scale(q3) - scale(q1)}
+                    height={10}
+                    fill="#e2e8f0"
+                    stroke="#64748b"
+                    strokeWidth={1}
+                />
+
+                <line
+                    x1={scale(median)}
+                    x2={scale(median)}
+                    y1={5}
+                    y2={15}
+                    stroke="#1e293b"
+                    stroke-width={1.5}
+                />
+
+                <line
+                    x1={scale(min)}
+                    x2={scale(min)}
+                    y1={7}
+                    y2={13}
+                    stroke="#666"
+                    strokeWidth={1}/>
+
+                <line
+                    x1={scale(max)}
+                    x2={scale(max)}
+                    y1={7}
+                    y2={13}
+                    stroke="#666"
+                    strokeWidth={1}/>
+            </svg>
+        </div>
+    )
+};
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 8525468..b1cd120 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,6 @@
 import {type ClassValue, clsx} from "clsx"
 import {twMerge} from "tailwind-merge"
+import React from "react";
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
@@ -9,4 +10,27 @@ export function assert(condition: any, msg?: string): asserts condition {
     if (!condition) {
         throw new Error(msg);
     }
-}
\ No newline at end of file
+}
+
+export function formatSecondsVerbose(seconds: number): string {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    const parts = []
+    if (mins > 0) parts.push(`${mins} min`)
+    if (secs > 0 || mins === 0) parts.push(`${secs} sec`)
+    return parts.join(" ")
+}
+
+export function formatSeconds(seconds: number): string {
+    const mins = Math.floor(seconds / 60)
+    const secs = seconds % 60
+    const paddedSecs = secs.toString().padStart(2, '0')
+    return `${mins}:${paddedSecs}`
+}
+
+export function formatCentsToUSD(cents: number): string {
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+    }).format(cents / 100)
+}