@manta-eu/react 0.7.0 → 0.8.0

package/src/components/chart/ForecastLegend.tsx

@@ -0,0 +1,97 @@
+import { cn } from "#style";
+
+export type ForecastLegendItem = {
+  label: string;
+  color: string;
+  kind: "line" | "dotted-line" | "thin-line" | "fill" | "faint-fill";
+};
+
+type LegendSource = {
+  metrics: { label: string; color: string }[];
+  withoutLabels: string[];
+  /** The metrics with a `withoutPlans` line and the color their gain is shaded in. */
+  gains: { metric: string; color: string }[];
+  gainLabel: string;
+  betweenLabels: string[];
+  firstColor: string;
+  withoutColor: string;
+  hasProjection: boolean;
+  legendLabels?: { historic?: string; projected?: string };
+};
+
+/** Two metrics are named per line; a single metric is split into its historic and projected parts instead. */
+export function forecastLegendItems(source: LegendSource): ForecastLegendItem[] {
+  const {
+    metrics,
+    withoutLabels,
+    gains,
+    gainLabel,
+    betweenLabels,
+    firstColor,
+    withoutColor,
+    hasProjection,
+    legendLabels,
+  } = source;
+  const withoutItems = [...new Set(withoutLabels)].map(
+    (label): ForecastLegendItem => ({ label, color: withoutColor, kind: "thin-line" }),
+  );
+  const oneGainColor = new Set(gains.map((gain) => gain.color)).size === 1;
+  const gainItems = (oneGainColor ? gains.slice(0, 1) : gains).map(
+    (gain): ForecastLegendItem => ({
+      label: oneGainColor ? gainLabel : `${gainLabel} · ${gain.metric}`,
+      color: gain.color,
+      kind: "fill",
+    }),
+  );
+  const betweenItems = betweenLabels.map(
+    (label): ForecastLegendItem => ({ label, color: firstColor, kind: "faint-fill" }),
+  );
+  if (metrics.length > 1) {
+    return [
+      ...metrics.map((metric): ForecastLegendItem => ({ label: metric.label, color: metric.color, kind: "line" })),
+      ...betweenItems,
+      ...gainItems,
+      ...withoutItems,
+    ];
+  }
+  return [
+    { label: legendLabels?.historic ?? "Historic results", color: firstColor, kind: "line" },
+    ...(hasProjection
+      ? [{ label: legendLabels?.projected ?? "Projected results", color: firstColor, kind: "dotted-line" as const }]
+      : []),
+    ...withoutItems,
+    ...gainItems,
+    ...betweenItems,
+  ];
+}
+
+export function ForecastLegend(props: { items: ForecastLegendItem[] }) {
+  const { items } = props;
+  return (
+    <ul className="m-0 mb-3 flex list-none flex-wrap gap-x-6 gap-y-2 p-0 typography-small text-muted-foreground">
+      {items.map((item) => (
+        <li key={item.label} className="inline-flex items-center gap-2">
+          {item.kind === "fill" || item.kind === "faint-fill" ? (
+            <span
+              className="h-2.5 w-4 rounded-xs-v4"
+              style={{
+                background: `color-mix(in srgb, ${item.color} ${item.kind === "fill" ? 42 : 10}%, transparent)`,
+              }}
+            />
+          ) : (
+            <span
+              className={cn(
+                "w-5 rounded-sm",
+                item.kind === "line" && "border-t-[2.5px]",
+                item.kind === "dotted-line" && "border-t-[3px] border-dotted",
+                item.kind === "thin-line" && "border-t-2",
+              )}
+              style={{ borderColor: item.color }}
+            />
+          )}
+          {item.label}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/chart/forecast-model.ts

@@ -0,0 +1,130 @@
+import { isPresent } from "@manta-eu/lib/present";
+import type { ChartConfig } from "./chart";
+import { chartColorAt } from "./chart-colors";
+import { forecastDomain, partKey, splitAtToday, type ForecastPart, type ForecastRange } from "./forecast";
+import type { ForecastHoverMetric } from "./ForecastHoverCard";
+import { forecastLegendItems } from "./ForecastLegend";
+
+export type ForecastMetric = {
+  key: string;
+  label: string;
+  color?: string;
+  /** For costs: a drop with the plans shows as a gain in the hover card. */
+  lowerIsBetter?: boolean;
+  /** The same metric if the plans are not approved; the gap between the two is shaded as what the plans add. */
+  withoutPlans?: { key: string; label: string };
+};
+
+export type ForecastBetween = { from: string; to: string; label: string };
+
+export const forecastParts = ["past", "ahead"] as const;
+export const withoutColor = "color-mix(in srgb, var(--color-muted-foreground) 82%, var(--color-card))";
+const metricColors = [
+  "var(--color-accent-foreground)",
+  "color-mix(in srgb, var(--color-accent-foreground) 45%, var(--color-muted-foreground))",
+];
+
+export function metricColor(metric: ForecastMetric, index: number): string {
+  return metric.color ?? metricColors[index] ?? chartColorAt(index);
+}
+
+export function gainName(index: number): string {
+  return `gain-${index}`;
+}
+
+export function betweenName(index: number): string {
+  return `between-${index}`;
+}
+
+type ModelInput = {
+  data: Record<string, unknown>[];
+  today?: string | number;
+  metrics: ForecastMetric[];
+  between: ForecastBetween[];
+  goal?: { value: number };
+  gainLabel: string;
+  legendLabels?: { historic?: string; projected?: string };
+};
+
+/** Everything the chart draws, derived once from its props: split rows, axis, fades, legend and hover metrics. */
+export function buildForecastModel(input: ModelInput) {
+  const { data, today, metrics, between, goal, gainLabel, legendLabels } = input;
+  const overlay = metrics.length > 1;
+  const todayIndex = today === undefined ? -1 : data.findIndex((row) => row.x === today);
+  const withPlans = metrics.flatMap((metric, index) =>
+    isPresent(metric.withoutPlans) ? [{ metric, index, without: metric.withoutPlans }] : [],
+  );
+  const ranges: Record<string, ForecastRange> = {
+    ...Object.fromEntries(
+      withPlans.map((entry) => [gainName(entry.index), { from: entry.without.key, to: entry.metric.key }]),
+    ),
+    ...Object.fromEntries(between.map((range, index) => [betweenName(index), range])),
+  };
+  const lineKeys = [...metrics.map((metric) => metric.key), ...withPlans.map((entry) => entry.without.key)];
+  const emptyKeys = lineKeys.filter((key) => !data.some((row) => typeof row[key] === "number"));
+  const rows = splitAtToday(data, todayIndex, lineKeys, ranges);
+  const values = data.flatMap((row) => lineKeys.map((key) => row[key])).filter((value) => typeof value === "number");
+  const { domain, ticks } = forecastDomain(isPresent(goal) ? [...values, goal.value] : values);
+
+  function meanOf(key: string) {
+    const numbers = data.map((row) => row[key]).filter((value) => typeof value === "number");
+    return numbers.reduce((sum, value) => sum + value, 0) / Math.max(numbers.length, 1);
+  }
+  const lowestIndex = metrics.reduce(
+    (lowest, metric, index) => (meanOf(metric.key) < meanOf(metrics[lowest]?.key ?? "") ? index : lowest),
+    0,
+  );
+  const lowestMetric = metrics[lowestIndex];
+  const onlyWithout = withPlans[0]?.without;
+  function drawsIn(key: string, part: ForecastPart) {
+    return rows.filter((row) => typeof row[partKey(key, part)] === "number").length > 1;
+  }
+  const fadeKeys = forecastParts.flatMap((part) => {
+    const key = overlay
+      ? lowestMetric?.key
+      : onlyWithout && drawsIn(onlyWithout.key, part)
+        ? onlyWithout.key
+        : metrics[0]?.key;
+    return key === undefined ? [] : [{ part, key }];
+  });
+  const firstColor = metrics[0] ? metricColor(metrics[0], 0) : withoutColor;
+
+  return {
+    emptyKeys,
+    todayMissing: today !== undefined && todayIndex < 0 && isPresent(data),
+    overlay,
+    todayIndex,
+    withPlans,
+    rows,
+    domain,
+    ticks,
+    fadeKeys,
+    fadeColor: overlay && lowestMetric ? metricColor(lowestMetric, lowestIndex) : withoutColor,
+    firstColor,
+    config: Object.fromEntries(
+      [...metrics, ...withPlans.map((entry) => entry.without)].map((line) => [line.key, { label: line.label }]),
+    ) satisfies ChartConfig,
+    hoverMetrics: metrics.map(
+      (metric): ForecastHoverMetric => ({
+        key: metric.key,
+        label: metric.label,
+        lowerIsBetter: metric.lowerIsBetter === true,
+        ...(isPresent(metric.withoutPlans) ? { withoutKey: metric.withoutPlans.key } : {}),
+      }),
+    ),
+    legendItems: forecastLegendItems({
+      metrics: metrics.map((metric, index) => ({ label: metric.label, color: metricColor(metric, index) })),
+      withoutLabels: withPlans.map((entry) => entry.without.label),
+      gains: withPlans.map((entry) => ({
+        metric: entry.metric.label,
+        color: metricColor(entry.metric, entry.index),
+      })),
+      gainLabel,
+      betweenLabels: between.map((range) => range.label),
+      firstColor,
+      withoutColor,
+      hasProjection: todayIndex >= 0,
+      ...(legendLabels ? { legendLabels } : {}),
+    }),
+  };
+}

package/src/components/chart/forecast.ts

@@ -0,0 +1,144 @@
+import { isPresent } from "@manta-eu/lib/present";
+
+export type ForecastPart = "past" | "ahead";
+
+export type ForecastRange = { from: string; to: string };
+
+export function partKey(key: string, part: ForecastPart): string {
+  return `${key}~${part}`;
+}
+
+export function rangeKey(name: string, part: ForecastPart): string {
+  return `${name}~range~${part}`;
+}
+
+export const projectedKey = "~projected";
+
+function rangeOf(row: Record<string, unknown>, range: ForecastRange): [number, number] | null {
+  const from = row[range.from];
+  const to = row[range.to];
+  return typeof from === "number" && typeof to === "number" ? [Math.min(from, to), Math.max(from, to)] : null;
+}
+
+/** Splits each line and range at Today: the past part runs up to and including Today, the part ahead starts there. */
+export function splitAtToday(
+  rows: readonly Record<string, unknown>[],
+  todayIndex: number,
+  lineKeys: readonly string[],
+  ranges: Readonly<Record<string, ForecastRange>>,
+): Record<string, unknown>[] {
+  return rows.map((row, index) => {
+    const inPast = todayIndex < 0 || index <= todayIndex;
+    const ahead = todayIndex >= 0 && index >= todayIndex;
+    const split: Record<string, unknown> = { ...row, [projectedKey]: todayIndex >= 0 && index > todayIndex };
+    lineKeys.forEach((key) => {
+      split[partKey(key, "past")] = inPast ? (row[key] ?? null) : null;
+      split[partKey(key, "ahead")] = ahead ? (row[key] ?? null) : null;
+    });
+    Object.entries(ranges).forEach(([name, range]) => {
+      const value = rangeOf(row, range);
+      split[rangeKey(name, "past")] = inPast ? value : null;
+      split[rangeKey(name, "ahead")] = ahead ? value : null;
+    });
+    return split;
+  });
+}
+
+function niceStep(rough: number): number {
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const step = [1, 2, 2.5, 5, 10].find((multiple) => multiple * magnitude >= rough) ?? 10;
+  return step * magnitude;
+}
+
+/** A y range that hugs the values with a little air and round ticks, never dipping below zero for positive data. */
+export function forecastDomain(values: number[], tickCount = 5): { domain: [number, number]; ticks: number[] } {
+  if (!isPresent(values)) {
+    return { domain: [0, 1], ticks: [0, 1] };
+  }
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const spread = max - min || Math.abs(max) || 1;
+  const step = niceStep((spread * 1.2) / (tickCount - 1));
+  const low = Math.floor((min - spread * 0.1) / step) * step;
+  const high = Math.ceil((max + spread * 0.1) / step) * step;
+  const domainLow = min >= 0 ? Math.max(0, low) : low;
+  const ticks = Array.from({ length: Math.round((high - domainLow) / step) + 1 }, (_, index) =>
+    Number((domainLow + index * step).toFixed(10)),
+  );
+  return { domain: [domainLow, high], ticks };
+}
+
+const compact = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+
+export function formatCompact(value: number): string {
+  return compact.format(value);
+}
+
+const whole = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+
+export function formatWhole(value: number): string {
+  return whole.format(value);
+}
+
+/** "+$2,664 with the plans": the signed gap between a metric and its line without plans. */
+export function signedChange(value: number, without: number, format: (value: number) => string): string {
+  const change = value - without;
+  return `${change < 0 ? "-" : "+"}${format(Math.abs(change))}`;
+}
+
+/** The margin and x-axis height the chart passes to recharts; the plot geometry below is derived from them. */
+export const forecastMargin = { top: 24, right: 12, left: 8, bottom: 0 };
+export const forecastXAxisHeight = 30;
+
+/** Where the plot area sits inside a chart of this height, so a pointer's y maps back to a value. */
+export function plotGeometry(chartHeight: number): { top: number; height: number } {
+  return {
+    top: forecastMargin.top,
+    height: chartHeight - forecastMargin.top - forecastMargin.bottom - forecastXAxisHeight,
+  };
+}
+
+/** The value at a pointer's height in the plot, with `domain[0]` at its bottom and `domain[1]` at its top. */
+export function valueAtY(y: number, plotTop: number, plotHeight: number, domain: [number, number]): number {
+  return domain[1] - ((y - plotTop) / plotHeight) * (domain[1] - domain[0]);
+}
+
+/** The metric whose line passes closest to a value at one point: the hover card follows that line. */
+export function nearestMetric(
+  row: Record<string, unknown>,
+  keys: readonly string[],
+  value: number,
+): string | undefined {
+  const distances = keys.flatMap((key) => {
+    const metricValue = row[key];
+    return typeof metricValue === "number" ? [{ key, distance: Math.abs(metricValue - value) }] : [];
+  });
+  return distances.reduce<{ key: string; distance: number } | undefined>(
+    (nearest, candidate) => (nearest === undefined || candidate.distance < nearest.distance ? candidate : nearest),
+    undefined,
+  )?.key;
+}
+
+/** An action already applied (a filled dot) or a plan waiting for approval (a hollow dot), on a metric's line. */
+export type ForecastEvent = {
+  x: string | number;
+  metric: string;
+  status: "applied" | "waiting";
+  title: string;
+  /** The small line above the title; defaults to "Applied" or "Waiting for your approval". */
+  label?: string;
+  value?: string;
+  valueNote?: string;
+  /** Rendered as a plain link in the card (and on the dot when the chart has no `onEventSelect`). */
+  href?: string;
+  linkLabel?: string;
+};
+
+export type ForecastPointPlan = { label: string; value: number };
+
+/** The plans behind one metric's projected value at one point, as the chart's data carries them. */
+export type ForecastPlanShare = { x: string | number; metric: string; plans: ForecastPointPlan[] };
+
+export function plansAt(shares: readonly ForecastPlanShare[], x: string | number, metric: string): ForecastPointPlan[] {
+  return shares.find((share) => share.x === x && share.metric === metric)?.plans ?? [];
+}

package/src/components/chart/index.tsx

@@ -19,6 +19,9 @@ export { ChartFrame, type ChartFrameProps } from "./ChartFrame";
 export { AreaChart, type AreaChartProps } from "./AreaChart";
 export { BarChart, type BarChartProps } from "./BarChart";
 export { ComposedChart, type ComposedChartProps } from "./ComposedChart";
+export { ForecastChart, type ForecastChartProps } from "./ForecastChart";
+export type { ForecastBetween, ForecastMetric } from "./forecast-model";
+export type { ForecastEvent, ForecastPlanShare, ForecastPointPlan } from "./forecast";
 export { LineChart, type LineChartProps } from "./LineChart";
 export { PieChart, type PieChartProps } from "./PieChart";
 export { RadarChart, type RadarChartProps } from "./RadarChart";

package/src/components/popover/index.tsx

@@ -8,6 +8,7 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverClose = PopoverPrimitive.Close;
+const PopoverArrow = PopoverPrimitive.Arrow;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -81,4 +82,4 @@ const PopoverItem = React.forwardRef<HTMLButtonElement, PopoverItemProps>((props
 });
 PopoverItem.displayName = "PopoverItem";
 
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverItem, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverItem, PopoverTrigger };

package/src/globals.css

@@ -381,6 +381,8 @@
   --color-rank-3: #ffe4d6;
 
   --color-default-foreground: var(--color-neutral-900);
+  --color-inverse: var(--color-neutral-900);
+  --color-inverse-foreground: #ffffff;
   --color-body-foreground: rgba(23, 23, 23, 0.85);
   --color-muted-foreground: var(--color-neutral-500);
   --color-disabled-foreground: var(--color-neutral-400);

package/src/hooks/useAuth.ts

@@ -22,6 +22,7 @@ export type UseAuthResult = {
   user: User | undefined;
   datastore: Datastore | undefined;
   datastores: Datastore[] | undefined;
+  inOrganization: boolean;
   isLoading: boolean;
   isAuthenticated: boolean;
   isOperator: boolean;
@@ -296,6 +297,7 @@ export function useAuth(): UseAuthResult {
       const datastore = sessionDatastore(row);
       return isPresent(datastore) ? [datastore] : [];
     }),
+    inOrganization: isPresent(contextData?.user?.memberOrgs) || isPresent(contextData?.datastores),
     datastoreAccessGranted: contextData?.datastoreAccessGranted ?? true,
     isOperator: contextData?.user?.isOperator ?? false,
     canManageTeam: contextData?.user?.canManageTeam ?? false,

package/src/providers/AuthContext.ts

@@ -21,6 +21,7 @@ export type AuthContextValue = Pick<
   // Only Manta's own web app may list the apps connected to someone; any other host's token is refused.
   canDisconnectCustomApps?: boolean;
   hasProfilePage?: boolean;
+  inOrganization?: boolean;
 };
 
 export const AuthContext = createContext<AuthContextValue | undefined>(undefined);

package/src/themes/manta-dark.css

@@ -25,6 +25,8 @@
   --color-rank-3: #431407;
 
   --color-default-foreground: #ffffff;
+  --color-inverse: #05070d;
+  --color-inverse-foreground: #ffffff;
   --color-body-foreground: rgba(255, 255, 255, 0.8);
   --color-muted-foreground: #8a90a0;
   --color-placeholder-foreground: #4b4e58;

package/src/themes/manta.css

@@ -26,6 +26,8 @@
   --color-card-alpha-0: rgb(255 255 255 / 0);
 
   --color-default-foreground: #0b1b45;
+  --color-inverse: #0b1530;
+  --color-inverse-foreground: #ffffff;
   --color-body-foreground: rgba(23, 23, 23, 0.85);
   --color-muted-foreground: #5a6480;
   --color-placeholder-foreground: var(--color-muted-foreground);

package/src/themes/standard.css

@@ -48,6 +48,8 @@
   --color-rank-3: #ffe4d6;
 
   --color-default-foreground: var(--color-neutral-900);
+  --color-inverse: var(--color-neutral-900);
+  --color-inverse-foreground: #ffffff;
   --color-muted-foreground: var(--color-neutral-500);
   --color-disabled-foreground: var(--color-neutral-400);
   --color-placeholder-foreground: var(--color-neutral-400);