@multiplatform.one/components 7.7.6 → 7.8.0

package/src/views/Dashboard.tsx

@@ -1,4 +1,5 @@
 import { Meter } from "../Meter";
+import { ChartDataView } from "../charts/ChartDataView";
 import { BarChart } from "../charts/BarChart";
 import { LineChart } from "../charts/LineChart";
 import { PieChart } from "../charts/PieChart";
@@ -12,7 +13,7 @@ import {
   formatPercent,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import React, { useCallback, useMemo, type ReactNode } from "react";
+import React, { useCallback, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
 import {
   ScrollView,
@@ -56,6 +57,13 @@ function trendFill(color: string): string {
   return "$color4";
 }
 
+function trendInk(color: string): string {
+  // Step 11 clears the page, but falls below AA on the status pill's step 4 wash.
+  if (color === componentColors.semantic.success) return "$green12";
+  if (color === componentColors.semantic.error) return "$red12";
+  return color;
+}
+
 // ============================================================================
 // Types
 // ============================================================================
@@ -222,7 +230,7 @@ export interface DashboardProps extends Omit<YStackProps, "children"> {
 // Shared card chrome
 // ============================================================================
 
-function useWidgetChrome(onPress?: () => void) {
+function useWidgetChrome(onPress?: YStackProps["onPress"]) {
   const resolved = useResolvedKnobs();
   const { knobProps, control } = resolved;
   const nested = splitNestedControl(knobProps.nestedControl);
@@ -294,11 +302,11 @@ function TrendPill({
       {...radius}
       data-nested-px={px}
     >
-      <Text {...label} color={color}>
+      <Text {...label} color={trendInk(color)}>
         {symbol}
       </Text>
       {value != null && value !== "" && (
-        <Text {...label} color={color}>
+        <Text {...label} color={trendInk(color)}>
           {value}
         </Text>
       )}
@@ -339,8 +347,13 @@ export function resolveTrendColor(
  */
 export function KPICard({ config, ...stackProps }: KPICardProps) {
   const { t } = useTranslation();
-  const { knobProps, nested, interactive } = useWidgetChrome(config.onClick);
+  const { onPress: consumerOnPress, ...cardProps } = stackProps;
+  const onPress = Object.hasOwn(stackProps, "onPress") ? consumerOnPress : config.onClick;
+  const { knobProps, nested, interactive } = useWidgetChrome(onPress);
   const { px, box } = nested;
+  const [dataActionSize, setDataActionSize] = useState({ width: 0, height: 44 });
+  const [dataHeaderHeight, setDataHeaderHeight] = useState(44);
+  const hasDataView = Boolean(config.sparkline?.length);
   const formatMetric = useCallback(
     (num: number) => {
       if (config.format === "currency") {
@@ -370,15 +383,16 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
     return "—";
   }, [config.trend]);
 
-  return (
-    <Card
-      width="100%"
-      elevation={knobProps.elevation}
-      {...knobProps.surface}
-      {...interactive}
-      {...stackProps}
-    >
-      <XStack justifyContent="space-between" alignItems="flex-start">
+  const content = (
+    <>
+      <XStack
+        justifyContent="space-between"
+        alignItems="center"
+        {...knobProps.gap}
+        onLayout={
+          hasDataView ? (event) => setDataHeaderHeight(event.nativeEvent.layout.height) : undefined
+        }
+      >
         <Text {...knobProps.label} color={knobProps.textAccentColor} flex={1}>
           {config.title}
         </Text>
@@ -387,6 +401,13 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
             {config.icon}
           </NestedIconWell>
         ) : null}
+        {hasDataView ? (
+          <YStack
+            width={dataActionSize.width}
+            height={dataActionSize.height}
+            pointerEvents="none"
+          />
+        ) : null}
       </XStack>
 
       <Text fontSize="$8" color="$color" {...knobProps.heading}>
@@ -394,7 +415,12 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
       </Text>
 
       {config.sparkline && config.sparkline.length > 0 ? (
-        <Sparkline data={config.sparkline} height={px} title={config.title} />
+        <Sparkline
+          data={config.sparkline}
+          height={px}
+          title={config.title}
+          valueFormatter={formatMetric}
+        />
       ) : null}
 
       {(config.trend || config.trendValue) && (
@@ -414,10 +440,70 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
           )}
         </XStack>
       )}
-    </Card>
+    </>
+  );
+  if (!hasDataView)
+    return (
+      <Card
+        width="100%"
+        elevation={knobProps.elevation}
+        {...knobProps.surface}
+        {...interactive}
+        {...stackProps}
+      >
+        {content}
+      </Card>
+    );
+  return (
+    <ChartDataView data={config.sparkline!} title={config.title} valueFormatter={formatMetric}>
+      {({ action }) => (
+        <Card width="100%" elevation={knobProps.elevation} {...knobProps.surface} {...cardProps}>
+          <YStack position="relative">
+            <YStack
+              {...knobProps.gap}
+              {...knobProps.containerRadius}
+              {...interactive}
+              focusable={Boolean(onPress)}
+              {...(isWeb
+                ? {
+                    "data-mpo-kpi-navigation": config.id,
+                    tabIndex: onPress ? 0 : undefined,
+                    onKeyDown: onPress
+                      ? (event: React.KeyboardEvent<HTMLElement>) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            if (!event.repeat) event.currentTarget.click();
+                          }
+                        }
+                      : undefined,
+                  }
+                : {})}
+            >
+              {content}
+            </YStack>
+            <YStack
+              position="absolute"
+              top={Math.max(0, (dataHeaderHeight - dataActionSize.height) / 2)}
+              right={0}
+              minHeight={44}
+              justifyContent="center"
+              onLayout={(event) => {
+                const { width, height } = event.nativeEvent.layout;
+                setDataActionSize((previous) =>
+                  previous.width === width && previous.height === height
+                    ? previous
+                    : { width, height },
+                );
+              }}
+            >
+              {action}
+            </YStack>
+          </YStack>
+        </Card>
+      )}
+    </ChartDataView>
   );
 }
-
 // ============================================================================
 // Chart Card Component
 // ============================================================================
@@ -455,11 +541,14 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
   const dataColors = config.colors ?? colors;
   const showXAxis = config.showLabels !== false;
 
-  return (
+  const renderCard = (action?: ReactNode) => (
     <YStack {...knobProps.gap} width="100%" {...stackProps}>
-      <HeadingTag margin={0} {...knobProps.heading} {...sectionHeading}>
-        {config.title}
-      </HeadingTag>
+      <XStack alignItems="center" justifyContent="space-between" {...knobProps.gap}>
+        <HeadingTag flex={1} minWidth={0} margin={0} {...knobProps.heading} {...sectionHeading}>
+          {config.title}
+        </HeadingTag>
+        {action}
+      </XStack>
       <Card elevation={knobProps.elevation} {...knobProps.surface}>
         {config.type === "pie" ? (
           <PieChart
@@ -473,6 +562,7 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
         ) : config.type === "line" ? (
           <LineChart
             data={config.data}
+            title={config.title}
             height={config.height}
             color={dataColors?.[0]}
             showPoints
@@ -482,6 +572,7 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
         ) : (
           <BarChart
             data={config.data}
+            title={config.title}
             height={config.height}
             colors={dataColors}
             showXAxis={showXAxis}
@@ -491,6 +582,13 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
       </Card>
     </YStack>
   );
+  return config.type === "pie" && config.showLegend !== false ? (
+    renderCard()
+  ) : (
+    <ChartDataView data={config.data} title={config.title}>
+      {({ action }) => renderCard(action)}
+    </ChartDataView>
+  );
 }
 
 // ============================================================================

package/src/views/Gantt.scroll.spec.tsx

@@ -0,0 +1,120 @@
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { GanttView, type GanttTask } from "./Gantt";
+import { addDays, computeGanttRange, dateToX, rangeDays, startOfDay } from "./ganttMath";
+
+// Match the Carousel layout harness: RNW measures through ResizeObserver and
+// a deferred offsetWidth read. Keep prototype patches isolated to this file.
+let viewportWidth = 178;
+const resizeCallbacks = new Map<Element, () => void>();
+vi.stubGlobal(
+  "ResizeObserver",
+  class {
+    constructor(private callback: ResizeObserverCallback) {}
+    observe(target: Element) {
+      const notify = () =>
+        this.callback([{ target } as ResizeObserverEntry], this as unknown as ResizeObserver);
+      resizeCallbacks.set(target, notify);
+      notify();
+    }
+    unobserve(target: Element) {
+      resizeCallbacks.delete(target);
+    }
+    disconnect() {}
+  },
+);
+Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+  configurable: true,
+  get: () => viewportWidth,
+});
+Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+  configurable: true,
+  get: () => 240,
+});
+const scrollCalls: number[] = [];
+Object.defineProperty(HTMLElement.prototype, "scroll", {
+  configurable: true,
+  writable: true,
+  value(options: { left?: number }) {
+    if (typeof options.left === "number") scrollCalls.push(options.left);
+  },
+});
+
+const today = startOfDay(new Date());
+const tasks: GanttTask[] = [
+  { id: "track", title: "Track", start: addDays(today, -44), end: addDays(today, 19) },
+];
+const range = computeGanttRange([{ start: tasks[0].start!, end: tasks[0].end! }], "week", today);
+const chartWidth = rangeDays(range) * 24;
+const anchorX = dateToX(today, range.start, 24);
+
+async function flushLayout() {
+  await act(async () => new Promise((resolve) => setTimeout(resolve, 0)));
+}
+
+beforeEach(() => {
+  viewportWidth = 178;
+  scrollCalls.length = 0;
+});
+afterEach(() => {
+  cleanup();
+  document.documentElement.removeAttribute("dir");
+});
+
+describe("Gantt measured viewport anchoring", () => {
+  it("reanchors a narrow LTR mount after layout so the marker is inside the viewport", async () => {
+    renderWithProviders(<GanttView tasks={tasks} initialDate={today} markerDate={today} />);
+    await flushLayout();
+    const left = scrollCalls.at(-1)!;
+    expect(left).toBeGreaterThanOrEqual(0);
+    expect(left).toBeLessThanOrEqual(chartWidth - viewportWidth);
+    expect(anchorX + 12 - left).toBeGreaterThanOrEqual(0);
+    expect(anchorX + 12 - left).toBeLessThan(viewportWidth);
+  });
+
+  it("keeps the narrow RTL marker inside the mirrored viewport", async () => {
+    document.documentElement.setAttribute("dir", "rtl");
+    renderWithProviders(<GanttView tasks={tasks} initialDate={today} markerDate={today} />);
+    await flushLayout();
+    const markerLeft = chartWidth - anchorX - 12 - scrollCalls.at(-1)!;
+    expect(markerLeft).toBeGreaterThanOrEqual(0);
+    expect(markerLeft).toBeLessThan(viewportWidth);
+  });
+
+  it("retains its pending anchor through a hidden zero-width first layout", async () => {
+    viewportWidth = 0;
+    renderWithProviders(<GanttView tasks={tasks} initialDate={today} markerDate={today} />);
+    await flushLayout();
+    viewportWidth = 178;
+    for (const notify of resizeCallbacks.values()) notify();
+    await flushLayout();
+    const markerLeft = anchorX + 12 - scrollCalls.at(-1)!;
+    expect(markerLeft).toBeGreaterThanOrEqual(0);
+    expect(markerLeft).toBeLessThan(viewportWidth);
+  });
+
+  it("preserves the desktop anchor inset", async () => {
+    viewportWidth = 820;
+    renderWithProviders(<GanttView tasks={tasks} initialDate={today} />);
+    await flushLayout();
+    expect(scrollCalls.at(-1)).toBe(anchorX - 180);
+  });
+
+  it("clamps a range-end anchor to the measured scroll extent", async () => {
+    viewportWidth = 820;
+    renderWithProviders(<GanttView tasks={tasks} initialDate={addDays(range.end, -1)} />);
+    await flushLayout();
+    expect(scrollCalls.at(-1)).toBeLessThanOrEqual(chartWidth - viewportWidth);
+  });
+
+  it("uses the measured viewport for the Today action", async () => {
+    const result = renderWithProviders(<GanttView tasks={tasks} initialDate={range.start} />);
+    await flushLayout();
+    scrollCalls.length = 0;
+    fireEvent.click(result.getByRole("button", { name: "Today" }));
+    const markerLeft = anchorX + 12 - scrollCalls.at(-1)!;
+    expect(markerLeft).toBeGreaterThanOrEqual(0);
+    expect(markerLeft).toBeLessThan(viewportWidth);
+  });
+});