Merge pull request #18 from github/ui/model-metrics-and-nav

Add model AIC-per-request chart and refine nav layout

Author: asizikov

src/App.css

@@ -997,6 +997,24 @@ td.cost-centers-view__num {
   outline-offset: 2px;
 }
 
+.per-model__chartGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.per-model__chartNote {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: center;
+  color: #1f2328;
+}
+
+.per-model__chartNote strong {
+  font-weight: 700;
+}
+
 .products-view {
   display: flex;
   flex-direction: column;
@@ -1785,6 +1803,12 @@ td.cost-centers-view__num {
 
   .sidebar {
     width: 48px;
+    padding-left: 4px;
+  }
+
+  .sidebar__nav {
+    border: none;
+    padding: 2px;
   }
 
   .sidebar__label {
@@ -1793,7 +1817,7 @@ td.cost-centers-view__num {
 
   .sidebar__item {
     justify-content: center;
-    padding: 10px;
+    padding: 8px;
   }
 }
 
@@ -1808,9 +1832,12 @@ td.cost-centers-view__num {
 .sidebar {
   width: var(--sidebar-width);
   flex-shrink: 0;
-  background: #ffffff;
-  border-right: 1px solid #d1d9e0;
-  padding: 12px 0;
+  padding: 16px 0 16px 16px;
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  max-height: 100vh;
+  overflow-y: auto;
 }
 
 @media (min-width: 1440px) {
@@ -1821,6 +1848,10 @@ td.cost-centers-view__num {
 }
 
 .sidebar__nav {
+  background: #ffffff;
+  border: 1px solid #d1d9e0;
+  border-radius: 8px;
+  padding: 6px;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -1831,8 +1862,9 @@ td.cost-centers-view__num {
   align-items: center;
   gap: 10px;
   width: 100%;
-  padding: 10px 16px;
+  padding: 10px 12px;
   border: none;
+  border-radius: 6px;
   background: transparent;
   color: #636c76;
   font-size: 13px;

src/views/ModelsView.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo } from 'react'
 import type { ModelUsageResult, ModelDailyUsageData } from '../pipeline/aggregators/modelUsageAggregator'
-import { DualAxisLineChart } from '../components'
+import { DualAxisLineChart, MultiSeriesStackedBarChart } from '../components'
 import { fillDataForRange } from '../utils/fillDataForRange'
 import { formatAiu, formatUsd } from '../utils/format'
 
@@ -24,6 +24,14 @@ type ModelsViewProps = {
   rangeEnd: string | null
 }
 
+function formatAverageAicPerRequest(value: number): string {
+  return value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 3 })
+}
+
+function roundAverageAicPerRequest(value: number): number {
+  return Number(value.toFixed(3))
+}
+
 export function ModelsView({ modelUsage, aicDiscountRate, rangeStart, rangeEnd }: ModelsViewProps) {
   const [selectedModel, setSelectedModel] = useState<string>(modelUsage.models[0] ?? '')
 
@@ -41,6 +49,19 @@ export function ModelsView({ modelUsage, aicDiscountRate, rangeStart, rangeEnd }
   const selectedModelAicNetAmount = selectedModelTotals
     ? Math.max(selectedModelTotals.aiuGrossAmount - selectedModelAicDiscount, 0)
     : 0
+  const dailyAverageAicPerRequest = useMemo(
+    () => filledPerModelDailyData.map((day) => ({
+      date: day.date,
+      averageAicPerRequest: day.requests > 0 ? roundAverageAicPerRequest(day.aiuQuantity / day.requests) : 0,
+    })),
+    [filledPerModelDailyData],
+  )
+  const overallAverageAicPerRequest = selectedModelTotals && selectedModelTotals.requests > 0
+    ? selectedModelTotals.aiuQuantity / selectedModelTotals.requests
+    : 0
+  const overallAverageAicGrossPerRequest = selectedModelTotals && selectedModelTotals.requests > 0
+    ? selectedModelTotals.aiuGrossAmount / selectedModelTotals.requests
+    : 0
 
   const periodLabel = rangeStart
     ? new Date(rangeStart + 'T00:00:00').toLocaleString('en-US', { month: 'long', year: 'numeric' })
@@ -132,6 +153,25 @@ export function ModelsView({ modelUsage, aicDiscountRate, rangeStart, rangeEnd }
 
       {selectedModel && filledPerModelDailyData.length > 0 && (
         <div className="per-model__charts charts-grid">
+          <div className="per-model__chartGroup">
+            <MultiSeriesStackedBarChart
+              title={`Daily average AIC per Request (${selectedModel})`}
+              labels={dailyAverageAicPerRequest.map((day) => day.date)}
+              series={[
+                {
+                  label: 'Average daily AICs per request',
+                  color: '#14b8a6',
+                  data: dailyAverageAicPerRequest.map((day) => day.averageAicPerRequest),
+                },
+              ]}
+              height={320}
+            />
+            <p className="per-model__chartNote">
+              Average AICs per request for <strong>{selectedModel}</strong> in the current report period:{' '}
+              <strong>{formatAverageAicPerRequest(overallAverageAicPerRequest)}</strong>, average gross per request{' '}
+              <strong>{formatUsd(overallAverageAicGrossPerRequest)}</strong>
+            </p>
+          </div>
           <DualAxisLineChart
             title={`Daily Requests & AI Credits (${selectedModel})`}
             labels={filledPerModelDailyData.map((day) => day.date)}

src/views/ProductsView.tsx

@@ -113,8 +113,7 @@ export function ProductsView({ data }: ProductsViewProps) {
         </div>
       </div>
 
-      <div className="products-view__card card">
-        <div className="products-view__tableWrap data-table-wrap">
+      <div className="products-view__tableWrap data-table-wrap">
           <table className="products-view__table data-table">
             <thead>
               <tr>
@@ -145,7 +144,6 @@ export function ProductsView({ data }: ProductsViewProps) {
             </tbody>
           </table>
         </div>
-      </div>
     </section>
   )
 }