feat(insights): add evaluation period selector in component drawer

Also fixes UI-11

Author: cprussin

apps/insights/src/app/component-score-history/route.ts

@@ -15,8 +15,14 @@ export const GET = async (req: NextRequest) => {
     ),
   );
   if (parsed.success) {
-    const { cluster, publisherKey, symbol } = parsed.data;
-    const data = await getFeedScoreHistory(cluster, publisherKey, symbol);
+    const { cluster, publisherKey, symbol, from, to } = parsed.data;
+    const data = await getFeedScoreHistory(
+      cluster,
+      publisherKey,
+      symbol,
+      from,
+      to,
+    );
     return Response.json(data);
   } else {
     return new Response(fromError(parsed.error).toString(), {
@@ -29,4 +35,6 @@ const queryParamsSchema = z.object({
   cluster: z.enum(CLUSTER_NAMES).transform((value) => toCluster(value)),
   publisherKey: z.string(),
   symbol: z.string().transform((value) => decodeURIComponent(value)),
+  from: z.string(),
+  to: z.string(),
 });

apps/insights/src/components/LivePrices/index.tsx

@@ -146,7 +146,11 @@ export const LiveValue = <T extends keyof PriceData>({
 }: LiveValueProps<T>) => {
   const { current } = useLivePriceData(feedKey);
 
-  return current?.[field]?.toString() ?? defaultValue;
+  return current !== undefined || defaultValue !== undefined ? (
+    (current?.[field]?.toString() ?? defaultValue)
+  ) : (
+    <Skeleton width={SKELETON_WIDTH} />
+  );
 };
 
 type LiveComponentValueProps<T extends keyof PriceComponent["latest"]> = {
@@ -164,7 +168,11 @@ export const LiveComponentValue = <T extends keyof PriceComponent["latest"]>({
 }: LiveComponentValueProps<T>) => {
   const { current } = useLivePriceComponent(feedKey, publisherKey);
 
-  return current?.latest[field].toString() ?? defaultValue;
+  return current !== undefined || defaultValue !== undefined ? (
+    (current?.latest[field].toString() ?? defaultValue)
+  ) : (
+    <Skeleton width={SKELETON_WIDTH} />
+  );
 };
 
 const isToday = (date: Date) => {

apps/insights/src/components/PriceComponentDrawer/index.module.scss

@@ -17,4 +17,164 @@
     margin: theme.spacing(40) auto;
     font-size: theme.spacing(16);
   }
+
+  .rankingBreakdown {
+    .scoreHistoryChart {
+      grid-column: span 2 / span 2;
+      border-radius: theme.border-radius("2xl");
+      display: flex;
+      flex-flow: column nowrap;
+      gap: theme.spacing(4);
+      background: theme.color("background", "primary");
+      margin-bottom: theme.spacing(2);
+
+      .top {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin: theme.spacing(4);
+
+        .left {
+          display: flex;
+          flex-flow: column nowrap;
+          gap: theme.spacing(1);
+
+          .header {
+            color: theme.color("heading");
+
+            @include theme.text("sm", "medium");
+          }
+
+          .subheader {
+            color: theme.color("muted");
+
+            @include theme.text("xs", "normal");
+          }
+        }
+      }
+
+      .chart {
+        border-bottom-left-radius: theme.border-radius("2xl");
+        border-bottom-right-radius: theme.border-radius("2xl");
+        overflow: hidden;
+
+        .score,
+        .uptimeScore,
+        .deviationScore,
+        .stalledScore {
+          transition: opacity 100ms linear;
+          opacity: 0.2;
+        }
+
+        .score {
+          color: theme.color("states", "data", "normal");
+        }
+
+        .uptimeScore {
+          color: theme.color("states", "info", "normal");
+        }
+
+        .deviationScore {
+          color: theme.color("states", "lime", "normal");
+        }
+
+        .stalledScore {
+          color: theme.color("states", "warning", "normal");
+        }
+      }
+
+      &:not([data-focused-score], [data-hovered-score]) {
+        .score,
+        .uptimeScore,
+        .deviationScore,
+        .stalledScore {
+          opacity: 1;
+        }
+      }
+
+      &[data-hovered-score="uptime"],
+      &[data-focused-score="uptime"] {
+        .uptimeScore {
+          opacity: 1;
+        }
+      }
+
+      &[data-hovered-score="deviation"],
+      &[data-focused-score="deviation"] {
+        .deviationScore {
+          opacity: 1;
+        }
+      }
+
+      &[data-hovered-score="stalled"],
+      &[data-focused-score="stalled"] {
+        .stalledScore {
+          opacity: 1;
+        }
+      }
+
+      &[data-hovered-score="final"],
+      &[data-focused-score="final"] {
+        .score {
+          opacity: 1;
+        }
+      }
+    }
+
+    .date {
+      @include theme.text("sm", "normal");
+
+      margin: theme.spacing(2) theme.spacing(4);
+    }
+
+    .scoreCell {
+      vertical-align: top;
+    }
+
+    .metric {
+      display: flex;
+      flex-flow: column nowrap;
+      gap: theme.spacing(2);
+      overflow: hidden;
+
+      .metricName {
+        display: flex;
+        flex-flow: row nowwrap;
+        align-items: center;
+        gap: theme.spacing(2);
+
+        .legend {
+          width: theme.spacing(4);
+          height: theme.spacing(4);
+          fill: none;
+        }
+      }
+
+      .metricDescription {
+        color: theme.color("muted");
+
+        @include theme.text("sm", "normal");
+
+        white-space: normal;
+        line-height: 1.2;
+      }
+
+      &[data-component="uptime"] .legend {
+        stroke: theme.color("states", "info", "normal");
+      }
+
+      &[data-component="deviation"] .legend {
+        stroke: theme.color("states", "lime", "normal");
+      }
+
+      &[data-component="stalled"] .legend {
+        stroke: theme.color("states", "warning", "normal");
+      }
+
+      &[data-component="final"] .legend {
+        stroke: theme.color("states", "data", "normal");
+      }
+    }
+  }
 }