@oxy.so/bloom 5.0.0 → 5.1.0

package/src/chart-cards/SankeyChartCard.tsx

@@ -31,6 +31,8 @@ import {
 } from './sankey-layout';
 import { svgTextType, textTopForBaseline } from './svg-text';
 import { useEasedValues } from './use-eased-values';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 export interface SankeyNodeDatum {
   name: string;
@@ -142,7 +144,7 @@ const sameItem = (a: SankeyActiveItem | null, b: SankeyActiveItem | null) =>
  * Hover on web, press-and-scrub on native (letting go clears).
  */
 export function SankeyChartCard({
-  title = 'Tracked time',
+  title: titleProp,
   nodes: nodesProp,
   links: linksProp,
   headline: headlineProp,
@@ -161,6 +163,8 @@ export function SankeyChartCard({
   style,
   testID,
 }: SankeyChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const title = titleProp ?? chartText.titles.trackedTime;
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
@@ -372,7 +376,7 @@ export function SankeyChartCard({
         label={headerLabel}
         value={headlineValue}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={active !== null}
         fadeKey={`${selectedId ?? ''}:${active ? `${active.type}:${active.index}` : 'idle'}`}
         range={range}

package/src/chart-cards/ScatterChartCard.tsx

@@ -25,6 +25,8 @@ import { compactNumber, describeDeltaRatio, formatNumber } from './primitives/fo
 import { useChartCardSurfacePalette, useChartTones } from './primitives/use-chart-palette';
 import { useChartRange, type ChartRange } from './primitives/use-chart-range';
 import { svgTextType, textTopForBaseline } from './svg-text';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 export interface ScatterPoint {
   x: number;
@@ -218,7 +220,7 @@ const samePoint = (a: ScatterActivePoint | null, b: ScatterActivePoint | null) =
  * Symbols grow in over 450ms on mount and glide on a data change.
  */
 export function ScatterChartCard({
-  title = 'Revenue per account',
+  title: titleProp,
   series: seriesProp,
   axisLabels,
   bubble: bubbleProp,
@@ -228,8 +230,8 @@ export function ScatterChartCard({
   ranges,
   defaultRange,
   onRangeChange,
-  format = formatNumber,
-  formatX = compactNumber,
+  format: formatProp,
+  formatX: formatXProp,
   tiles = false,
   activePoint: controlled,
   onActivePointChange,
@@ -237,6 +239,10 @@ export function ScatterChartCard({
   style,
   testID,
 }: ScatterChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatNumber(value, chartLocale));
+  const formatX = formatXProp ?? ((value: number) => compactNumber(value, chartLocale));
+  const title = titleProp ?? chartText.titles.revenuePerAccount;
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
   const { selected, selectedId, select } = useChartRange(ranges, defaultRange, onRangeChange);
@@ -348,7 +354,7 @@ export function ScatterChartCard({
   const xLabelTop = box ? textTopForBaseline(box.bottom + TICK_SIZE + X_TICK_MARGIN + 0.71 * 12, TICK_TYPE) : 0;
   const tickColor = { color: palette.textTertiary };
 
-  const label = accessibilityLabel ?? `${title} ${bubble ? 'bubble' : 'scatter'} chart: ${series.map((s) => s.label).join(', ')}`;
+  const label = accessibilityLabel ?? (bubble ? chartText.bubbleChart : chartText.scatterChart)(title, series.map((s) => s.label).join(', '));
 
   return (
     <ChartCardSurface height={tiles ? 'auto' : undefined} style={style} testID={testID}>
@@ -356,7 +362,7 @@ export function ScatterChartCard({
         label={headerLabel}
         value={headlineValue}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${active ? `${active.series}:${active.index}` : 'idle'}`}
         range={range}
@@ -412,7 +418,7 @@ export function ScatterChartCard({
                         alignItems: 'flex-end',
                   }}>
                   <Text numberOfLines={1} style={[TICK_TYPE, tickColor, { maxWidth: '100%' }]}>
-                    {compactNumber(tick.value)}
+                    {compactNumber(tick.value, chartLocale)}
                   </Text>
                 </View>
               ))}

package/src/chart-cards/SleepScoreCard.tsx

@@ -14,6 +14,8 @@ import { useActiveIndex } from './primitives/use-active-index';
 import { useChartCardSurfacePalette, useChartTones } from './primitives/use-chart-palette';
 import { useWebTransition } from './primitives/use-web-transition';
 import { useChartProgress } from './use-chart-progress';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 /** One sub-score: an arc on the ring and a row in the panel. */
 export interface SleepMetric {
@@ -102,7 +104,7 @@ function Chevron16({ d, color }: { d: string; color: string }) {
  */
 export function SleepScoreCard({
   metrics,
-  title = 'Sleep score',
+  title: titleProp,
   scoreLabel,
   range,
   height = SLEEP_CARD_HEIGHT,
@@ -112,6 +114,8 @@ export function SleepScoreCard({
   style,
   testID,
 }: SleepScoreCardProps) {
+  const { messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const title = titleProp ?? chartText.titles.sleepScore;
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
@@ -159,7 +163,7 @@ export function SleepScoreCard({
 
   const a11y =
     accessibilityLabel ??
-    `${title}: ${total} of ${totalMax}, ${verdict}. ${metrics.map((m) => `${m.label} ${m.score} of ${m.max}`).join(', ')}`;
+    `${title}: ${chartText.scoreOf(String(total), String(totalMax))}, ${verdict}. ${metrics.map((m) => `${m.label} ${chartText.scoreOf(String(m.score), String(m.max))}`).join(', ')}`;
 
   return (
     <ChartCardSurface radius="radius-20"

package/src/chart-cards/StageBarsCard.tsx

@@ -20,6 +20,8 @@ import {
   useMountedAfterDelay,
   type ChartIcon,
 } from './stage-parts';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 /**
  * `StageBarsCard`: the funnel as a list.
@@ -92,7 +94,7 @@ const BAR_HEIGHT = 20;
 const ICON_SIZE = 14;
 
 export function StageBarsCard({
-  title = 'Pipeline',
+  title: titleProp,
   stages: stagesProp,
   mono = false,
   showIcons = true,
@@ -102,13 +104,16 @@ export function StageBarsCard({
   ranges,
   defaultRange,
   onRangeChange,
-  format = formatNumber,
+  format: formatProp,
   activeIndex: controlledIndex,
   onActiveIndexChange,
   accessibilityLabel,
   style,
   testID,
 }: StageBarsCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatNumber(value, chartLocale));
+  const title = titleProp ?? chartText.titles.pipeline;
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
   const monoTone = useMonoTone();
@@ -146,7 +151,7 @@ export function StageBarsCard({
         label={headerLabel}
         value={headlineValue}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${activeIndex}`}
         range={range}

package/src/chart-cards/StepsCard.tsx

@@ -31,6 +31,8 @@ import {
   useSvgEase,
 } from './medical-parts';
 import { lerp, useChartProgress } from './use-chart-progress';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 import { useChartCardSurfacePalette } from './primitives/use-chart-palette';
 /**
@@ -146,12 +148,12 @@ export function stepsBars(width: number, count: number): StepsBar[] {
 
 export function StepsCard({
   data,
-  title = 'Steps',
+  title: titleProp,
   getPointTitle,
   headline,
-  totalSuffix = 'total steps',
-  pointSuffix = 'steps',
-  format = groupThousands,
+  totalSuffix: totalSuffixProp,
+  pointSuffix: pointSuffixProp,
+  format: formatProp,
   range,
   onPrevRange,
   onNextRange,
@@ -163,6 +165,11 @@ export function StepsCard({
   style,
   testID,
 }: StepsCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => groupThousands(value, chartLocale));
+  const title = titleProp ?? chartText.titles.steps;
+  const totalSuffix = totalSuffixProp ?? chartText.totalSteps;
+  const pointSuffix = pointSuffixProp ?? chartText.stepsSuffix;
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const tone = useMemo(

package/src/chart-cards/TokensChartCard.tsx

@@ -25,6 +25,9 @@ import { FadeOnChange } from './primitives/FadeOnChange';
 import { PulsingDot } from './primitives/PulsingDot';
 import { useActiveIndex } from './primitives/use-active-index';
 import { useCountUp } from './use-count-up';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
+import { formatGregorian } from '../locale/format-date';
 
 import { useChartCardSurfacePalette } from './primitives/use-chart-palette';
 /**
@@ -179,13 +182,13 @@ function useReveal(skip: boolean): number {
 
 export function TokensChartCard({
   data,
-  title = 'Tokens',
+  title: titleProp,
   headline,
   format = defaultFormat,
   getPointTitle,
   delta,
-  startLabel = 'Jun 14',
-  endLabel = 'Today',
+  startLabel: startLabelProp,
+  endLabel: endLabelProp,
   plotHeight = TOKENS_PLOT_HEIGHT,
   color,
   activeColor,
@@ -195,6 +198,12 @@ export function TokensChartCard({
   style,
   testID,
 }: TokensChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const title = titleProp ?? chartText.titles.tokens;
+  const endLabel = endLabelProp ?? chartText.today;
+  // The sample range's start (June 14), written the locale's way.
+  const startLabel =
+    startLabelProp ?? formatGregorian(new Date(2024, 5, 14), chartLocale, { month: 'short', day: 'numeric' }) ?? '6/14';
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const reducedMotion = useReducedMotion();

package/src/chart-cards/contributions-cells.ts

@@ -1,4 +1,6 @@
 import type { ActivityHeatmapDay } from '../activity-heatmap';
+import { formatGregorian } from '../locale/format-date';
+import { CHART_CARDS_MESSAGES, type ChartCardsMessages } from './messages';
 
 /** One square of the contributions grid. */
 export interface ContributionCell {
@@ -19,7 +21,6 @@ export const CONTRIBUTION_TIER_THRESHOLDS = [1, 5, 10, 16, 25] as const;
 export const CONTRIBUTION_COLUMNS = 37;
 export const CONTRIBUTION_ROWS = 7;
 
-const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] as const;
 
 export function contributionTier(cell: ContributionCell, thresholds: readonly number[] = CONTRIBUTION_TIER_THRESHOLDS): ContributionTier {
   if (cell.tier !== undefined) return cell.tier;
@@ -31,11 +32,12 @@ export function contributionTier(cell: ContributionCell, thresholds: readonly nu
   return Math.min(5, tier) as ContributionTier;
 }
 
-/** Tooltip copy: "12 contributions on Apr 26" / "No contributions on Apr 26". */
-export function contributionLabel(cell: ContributionCell): string {
-  const on = cell.date ? ` on ${cell.date}` : '';
-  if (cell.count === 0) return `No contributions${on}`;
-  return `${cell.count} contribution${cell.count === 1 ? '' : 's'}${on}`;
+/**
+ * Tooltip copy: "12 contributions on Apr 26" / "No contributions on Apr 26",
+ * in the language of `text` (English unless the grid passes its locale's).
+ */
+export function contributionLabel(cell: ContributionCell, text: ChartCardsMessages = CHART_CARDS_MESSAGES.en): string {
+  return text.contributions(cell.count, cell.date);
 }
 
 /**
@@ -69,12 +71,17 @@ export function contributionCellsFromDays(
   days: readonly ActivityHeatmapDay[],
   year: number,
   columns: number = CONTRIBUTION_COLUMNS,
+  locale?: string,
 ): ContributionCell[] {
   const slots = columns * CONTRIBUTION_ROWS;
   const cells: ContributionCell[] = Array.from({ length: slots }, (_, i) => {
     const dayOfYear = Math.round((i / (slots - 1)) * 364);
     const d = new Date(Date.UTC(year, 0, 1 + dayOfYear));
-    return { count: 0, date: `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}` };
+    // The cell's day the locale's way ("Apr 26", "26 abr"); `d` is a UTC date.
+    return {
+      count: 0,
+      date: formatGregorian(d, locale, { month: 'short', day: 'numeric', timeZone: 'UTC' }) ?? d.toISOString().slice(0, 10),
+    };
   });
   const start = Date.UTC(year, 0, 1);
   for (const day of days) {