@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/pages/AnalyticsPage/components/MetricCard.tsx

@@ -0,0 +1,46 @@
+/* metric card (dashboard-01's SectionCards) */
+
+import type { ReactNode } from "react";
+import { TrendDown, TrendUp } from "../../../components/icons";
+import type { Trend } from "../../../lib/analytics-metrics";
+import { Hint } from "./Hint";
+
+export function MetricCard({
+  description,
+  value,
+  trend,
+  line,
+  dimmed,
+  hint,
+}: {
+  description: string;
+  value: string;
+  trend?: Trend | null;
+  line?: ReactNode;
+  dimmed?: ReactNode;
+  hint?: string;
+}) {
+  return (
+    <div className="metric-card" data-slot="card">
+      <div className="metric-card-top">
+        <span className="metric-card-description">
+          {description}
+          {hint && <Hint text={hint} />}
+        </span>
+        {trend && (
+          <span className={`trend-badge${trend.good == null ? "" : trend.good ? " ok" : " warning"}`}>
+            {trend.up ? <TrendUp aria-hidden="true" /> : <TrendDown aria-hidden="true" />}
+            {trend.text}
+          </span>
+        )}
+      </div>
+      <div className="metric-card-value">{value}</div>
+      {(line || dimmed) && (
+        <div className="metric-card-footer">
+          {line && <div className="row">{line}</div>}
+          {dimmed && <div className="dimmed">{dimmed}</div>}
+        </div>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/AnalyticsPage/components/PlanSection.tsx

@@ -0,0 +1,40 @@
+/* channel: the plan for the next videos, from the last analysis */
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/ui/accordion";
+import { Markdown } from "../../../components/Markdown";
+import { sections } from "../../../lib/analytics-metrics";
+
+export function PlanSection({ analysis }: { analysis: { text: string | null } | null }) {
+  if (!analysis?.text)
+    return (
+      <div className="tab-content">
+        <div className="chart-empty">O plano dos próximos vídeos sai na análise do canal.</div>
+      </div>
+    );
+  const { sections: s } = sections(analysis.text);
+  const plan = s.find(x => /^plano/i.test(x.title));
+  const others = s.filter(x => /^(parar|testes)/i.test(x.title));
+  return (
+    <div className="tab-content">
+      {plan ? (
+        <div className="analysis-text">
+          <Markdown text={plan.body} />
+        </div>
+      ) : (
+        <div className="chart-empty">A última análise não trouxe a seção do plano.</div>
+      )}
+      {others.length > 0 && (
+        <Accordion type="multiple" className="insights-accordion secondary">
+          {others.map(o => (
+            <AccordionItem key={o.title} value={o.title}>
+              <AccordionTrigger>{o.title}</AccordionTrigger>
+              <AccordionContent className="analysis-text">
+                <Markdown text={o.body} />
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/AnalyticsPage/components/ProgressionChart.tsx

@@ -0,0 +1,155 @@
+/* channel: progression (dashboard-01's ChartAreaInteractive, as a wave line with area) */
+
+import { useId, useState } from "react";
+import { Area, AreaChart, CartesianGrid, ReferenceDot, XAxis, YAxis } from "recharts";
+import { Panel } from "../../../components/ui/panel";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "../../../components/ui/chart";
+import {
+  DAY_MS,
+  PERIODS,
+  PROGRESSION,
+  axisProps,
+  dayOf,
+  fmtAxisY,
+  hourOf,
+  noAnimation,
+  type Period,
+  type ProgressionId,
+} from "../../../lib/analytics-metrics";
+import type { Analytics } from "../../../types/api";
+import { Hint } from "./Hint";
+import { SegmentedControl } from "./SegmentedControl";
+
+type AnalyticsData = Exclude<Analytics, { error: string }>;
+
+export function ProgressionChart({
+  progression,
+  publications,
+}: {
+  progression: AnalyticsData["progression"];
+  publications: AnalyticsData["publications"];
+}) {
+  const [id, setId] = useState<ProgressionId>("views");
+  const [period, setPeriod] = useState<Period>("7d");
+  const gradient = `prog-${useId().replace(/:/g, "")}`;
+  const def = PROGRESSION.find(p => p.id === id)!;
+  const all =
+    id === "followers"
+      ? progression.filter(p => p.followers != null).map(p => ({ t: p.t, value: p.followers! }))
+      : progression.map(p => ({ t: p.t, value: p[id] }));
+  const end = all.at(-1)?.t ?? 0;
+  const ms = PERIODS.find(p => p.id === period)!.ms;
+  const data = all.filter(d => d.t >= end - ms);
+  const pubs =
+    id === "followers"
+      ? []
+      : publications
+          .filter(p => data.length && p.t >= data[0].t && p.t <= end)
+          .map(p => ({ ...p, y: data.find(d => d.t >= p.t)?.value ?? data.at(-1)!.value }));
+  const config = { series: { label: def.name, color: "var(--chart-1)" } } satisfies ChartConfig;
+  const fmtX = (t: number) => (period === "24h" ? hourOf(t) : dayOf(t));
+  const fmtY = fmtAxisY(data.map(d => d.value));
+  /* one tick per day (7 days), every 5 days (30) or every 4 hours (24 h), on round hours */
+  const step = period === "24h" ? 4 * 3_600_000 : period === "7d" ? DAY_MS : 5 * DAY_MS;
+  const ticks: number[] = [];
+  if (data.length >= 2) {
+    const base = new Date(data[0].t);
+    if (period === "24h") base.setMinutes(0, 0, 0);
+    else base.setHours(0, 0, 0, 0);
+    for (let t = base.getTime() + step; t <= end; t += step) if (t >= data[0].t) ticks.push(t);
+  }
+  return (
+    <Panel
+      title={
+        <span className="title-with-hint">
+          Progressão
+          <Hint text="Um ponto por coleta (o agente, de 4 em 4 horas, ou o Coletar agora): a soma das leituras de cada Reel naquele instante; antes de publicado, zero." />
+        </span>
+      }
+      extra={
+        <span className="progression-toggles">
+          <SegmentedControl options={PROGRESSION} value={id} onChange={setId} label="Métrica da progressão" small />
+          <SegmentedControl options={PERIODS} value={period} onChange={setPeriod} label="Período" small />
+        </span>
+      }
+      className="progression-panel"
+    >
+      <p className="panel-description">
+        {def.description}
+        {data.length >= 2 ? ` · ${fmtX(data[0].t)} a ${fmtX(end)}` : ""}
+      </p>
+      {data.length < 2 ? (
+        <div className="chart-empty">
+          A curva aparece com duas coletas: o agente lê de 4 em 4 horas, e o Coletar agora lê na hora.
+        </div>
+      ) : (
+        <ChartContainer config={config} className="chart-progression" aria-label={`${def.name}: progressão`}>
+          <AreaChart accessibilityLayer data={data} margin={{ left: 4, right: 12, top: 8 }}>
+            <defs>
+              <linearGradient id={gradient} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="var(--color-series)" stopOpacity={0.28} />
+                <stop offset="95%" stopColor="var(--color-series)" stopOpacity={0.02} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              type="number"
+              dataKey="t"
+              scale="time"
+              domain={["dataMin", "dataMax"]}
+              {...axisProps}
+              ticks={ticks}
+              tickFormatter={t => fmtX(Number(t))}
+              minTickGap={24}
+            />
+            <YAxis
+              {...axisProps}
+              width={64}
+              domain={["auto", "auto"]}
+              allowDecimals={false}
+              tickFormatter={v => fmtY(Number(v))}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  indicator="dot"
+                  labelFormatter={(_l, p) => {
+                    const t = Number(p?.[0]?.payload?.t);
+                    return `${dayOf(t)} ${id === "followers" ? "" : hourOf(t)}`;
+                  }}
+                />
+              }
+            />
+            <Area
+              dataKey="value"
+              name={def.name}
+              type="monotoneX"
+              stroke="var(--color-series)"
+              strokeWidth={2}
+              fill={`url(#${gradient})`}
+              {...noAnimation}
+            />
+            {pubs.map(p => (
+              <ReferenceDot
+                key={p.slug}
+                x={p.t}
+                y={p.y}
+                r={4}
+                fill="var(--color-series)"
+                stroke="var(--surface)"
+                strokeWidth={2}
+                ifOverflow="extendDomain"
+              />
+            ))}
+          </AreaChart>
+        </ChartContainer>
+      )}
+      {pubs.length > 0 && (
+        <p className="hint">
+          <span className="publish-dot" /> Reel publicado
+        </p>
+      )}
+    </Panel>
+  );
+}

package/studio/web/pages/AnalyticsPage/components/ReelBarsChart.tsx

@@ -0,0 +1,154 @@
+/* channel: compare the Reels (y bar) */
+
+import { useState } from "react";
+import { Bar, BarChart, Cell, LabelList, ReferenceLine, XAxis, YAxis } from "recharts";
+import { useNavigate } from "@tanstack/react-router";
+import { Panel } from "../../../components/ui/panel";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "../../../components/ui/chart";
+import {
+  BAR_METRICS,
+  METRICS,
+  METRIC_ICON,
+  axisProps,
+  median,
+  noAnimation,
+  shortLabel,
+  useWidth,
+  metricValue,
+  type MetricId,
+} from "../../../lib/analytics-metrics";
+import { mediaUrl } from "../../../lib/media";
+import type { FileEntry, ReelMetrics } from "../../../types/api";
+import { Hint } from "./Hint";
+import { ReelThumb } from "./ReelThumb";
+import { SegmentedControl } from "./SegmentedControl";
+
+type BarRow = { slug: string; name: string; value: number; cover: FileEntry | null };
+
+export function ReelBarsChart({ reels, selected }: { reels: ReelMetrics[]; selected: Set<string> }) {
+  const navigate = useNavigate();
+  const [id, setId] = useState<MetricId>("skip");
+  const [ref, width] = useWidth<HTMLDivElement>();
+  const metric = METRICS[id];
+  const data = reels
+    .map(r => ({ slug: r.slug, name: r.title ?? r.slug, value: metricValue(r, id), cover: r.cover }))
+    .filter((d): d is BarRow => d.value != null)
+    .sort((a, b) => (metric.lowerIsBetter ? a.value - b.value : b.value - a.value));
+  const med = median(data.map(d => d.value));
+  const config = { value: { label: metric.name, color: "var(--chart-1)" } } satisfies ChartConfig;
+  const yWidth = Math.max(140, Math.min(230, width * 0.38));
+  const THUMB_H = 44,
+    THUMB_W = 25,
+    ROW = 52;
+  const chars = Math.floor((yWidth - THUMB_W - 22) / 6.6);
+  const open = (slug: string) => navigate({ to: "/analytics/$slug", params: { slug } });
+  /* the cover left of the title, at the axis edge (the tick's x = the axis's right edge minus the margin) */
+  const tick = ({ x, y, payload }: any) => {
+    const d = data.find(v => v.name === payload?.value);
+    const src = d ? mediaUrl(d, d.cover) : null;
+    const left = x - yWidth + 14;
+    return (
+      <g>
+        {src && (
+          <image
+            href={src}
+            x={left}
+            y={y - THUMB_H / 2}
+            width={THUMB_W}
+            height={THUMB_H}
+            preserveAspectRatio="xMidYMid slice"
+          />
+        )}
+        <text x={src ? left + THUMB_W + 8 : left} y={y} dy={4} textAnchor="start" className="chart-tick-reel">
+          {shortLabel(String(payload?.value ?? ""), chars)}
+        </text>
+      </g>
+    );
+  };
+  const highlight = selected.size > 0;
+  return (
+    <Panel
+      title={
+        <span className="title-with-hint">
+          Comparar os Reels
+          <Hint text="Idades diferentes: um Reel de horas ainda não juntou o público de um de dias. A linha é a mediana dos Reels no gráfico." />
+        </span>
+      }
+      extra={
+        <SegmentedControl
+          options={BAR_METRICS.map(b => ({ id: b, name: METRICS[b].name, Icon: METRIC_ICON[b] }))}
+          value={id}
+          onChange={setId}
+          label="Métrica comparada"
+          small
+        />
+      }
+      className="bars-panel"
+    >
+      <div ref={ref} className="bars-body">
+        {data.length < 2 ? (
+          <div className="chart-empty">A comparação aparece com dois Reels lidos.</div>
+        ) : (
+          <ChartContainer
+            config={config}
+            className="chart-bars"
+            style={{ height: data.length * ROW + 34 }}
+            aria-label={`${metric.name} por Reel`}
+          >
+            <BarChart accessibilityLayer data={data} layout="vertical" margin={{ left: 4, right: 56, top: 18 }}>
+              <XAxis type="number" dataKey="value" hide domain={[0, "dataMax"]} />
+              <YAxis type="category" dataKey="name" {...axisProps} width={yWidth} tick={tick} />
+              <ChartTooltip
+                cursor={false}
+                content={
+                  <ChartTooltipContent
+                    hideLabel
+                    hideIndicator
+                    formatter={(v, _n, item) => (
+                      <div className="chart-tooltip-row">
+                        <ReelThumb r={item.payload} />
+                        <span className="chart-tooltip-name">{shortLabel(String(item.payload?.name ?? ""), 48)}</span>
+                        <span className="chart-tooltip-value">{metric.fmt(Number(v))}</span>
+                      </div>
+                    )}
+                  />
+                }
+              />
+              <Bar
+                dataKey="value"
+                fill="var(--color-value)"
+                radius={4}
+                barSize={18}
+                className="clickable-bar"
+                {...noAnimation}
+                onClick={(d: any) => {
+                  const slug = d?.payload?.slug ?? d?.slug;
+                  if (slug) open(slug);
+                }}
+              >
+                {data.map(d => (
+                  <Cell key={d.slug} fillOpacity={!highlight || selected.has(d.slug) ? 1 : 0.28} />
+                ))}
+                <LabelList
+                  dataKey="value"
+                  position="right"
+                  offset={8}
+                  className="chart-label"
+                  formatter={(v: unknown) => metric.fmt(Number(v))}
+                />
+              </Bar>
+              {med != null && (
+                <ReferenceLine
+                  x={med}
+                  className="chart-median"
+                  ifOverflow="extendDomain"
+                  label={{ value: `mediana ${metric.fmt(med)}`, position: "top", className: "chart-median-label" }}
+                />
+              )}
+            </BarChart>
+          </ChartContainer>
+        )}
+      </div>
+    </Panel>
+  );
+}

package/studio/web/pages/AnalyticsPage/components/ReelThumb.tsx

@@ -0,0 +1,19 @@
+/* a Reel's cover: wherever a video shows up, its cover shows too (the chosen thumbnail or the c01 still) */
+
+import { mediaUrl } from "../../../lib/media";
+import type { FileEntry } from "../../../types/api";
+
+export function ReelThumb({
+  r,
+  size = "s",
+}: {
+  r: { slug: string; cover?: FileEntry | null };
+  size?: "s" | "m" | "l";
+}) {
+  const src = mediaUrl(r, r.cover ?? null);
+  return src ? (
+    <img className={`reel-thumb ${size}`} src={src} alt="" loading="lazy" />
+  ) : (
+    <span className={`reel-thumb empty ${size}`} aria-hidden="true" />
+  );
+}