@rojaostudio/ds 2.0.0-next.6 → 2.0.0-next.7

package/dist/components/chart.d.ts

@@ -10,7 +10,7 @@ interface ChartSeries {
     /** line only: which axis it reads on. right only when the two series have different units (volume and rate). */
     axis?: 'left' | 'right';
 }
-interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onSelect'> {
     /** What the chart shows, with the period. It names the chart and captions its data table. */
     label: string;
     /** line: lines over time; bar: a ranking in horizontal bars; column: columns by category. */
@@ -32,8 +32,22 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     showLegend?: boolean;
     /** The values of the point under the pointer or the keyboard (Figma: `showTooltip`). */
     showTooltip?: boolean;
-    /** Off: only the first, middle and last label (Figma: `showAllDates`). Use it under about 360 px. */
+    /**
+     * line and column: which x labels show (Figma: `dates`). edges, the default: the first, middle and last; all: every
+     * label, for short series only.
+     */
+    dates?: 'edges' | 'all';
+    /** line and column: one label every N points, with a tick on every point (Figma: `dates=every`). Wins over `dates`. */
+    dateEvery?: number;
+    /** @deprecated Use `dates="all"` (true) or `dates="edges"` (false). */
     showAllDates?: boolean;
+    /**
+     * bar and column: where each item leads, in the order of `labels`. In bar each bar becomes a link named
+     * "<label>: <value>"; in column a click or Enter on the plot follows the item's link.
+     */
+    hrefs?: Array<string | undefined>;
+    /** bar and column: called with the item's index when it is chosen (click, Enter). In bar each bar becomes a button. */
+    onSelect?: (index: number) => void;
     /** Show the data table under the chart. By default it is there only for screen readers. */
     showTable?: boolean;
     /** Height of the plot area, in px (Figma: 200). */
@@ -44,6 +58,6 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
  * data (visually hidden unless `showTable`). In line and column the plot is a slider for screen readers and the
  * keyboard: the arrows move from point to point, and each point is read with its label and values. Styles: chart.css.
  */
-declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, showAllDates, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
+declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, dates, dateEvery, showAllDates, hrefs, onSelect, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
 
 export { Chart, type ChartProps, type ChartSeries, type ChartType };

package/dist/components/chart.js

@@ -36,7 +36,11 @@ function Chart(_a) {
     showRightAxis = true,
     showLegend = true,
     showTooltip = true,
-    showAllDates = true,
+    dates,
+    dateEvery,
+    showAllDates,
+    hrefs,
+    onSelect,
     showTable = false,
     height = 200,
     className
@@ -50,7 +54,11 @@ function Chart(_a) {
     "showRightAxis",
     "showLegend",
     "showTooltip",
+    "dates",
+    "dateEvery",
     "showAllDates",
+    "hrefs",
+    "onSelect",
     "showTable",
     "height",
     "className"
@@ -78,7 +86,14 @@ function Chart(_a) {
     return `${s.name} ${formatFor(s)((_a3 = s.data[index]) != null ? _a3 : 0)}`;
   }).join(", ");
   const legendName = (s) => dual ? `${s.name} (${onRight(s) ? "direita" : "esquerda"})` : s.name;
-  const labelIndexes = showAllDates || count <= 3 ? labels.map((_, i) => i) : [0, Math.floor((count - 1) / 2), count - 1];
+  const every = dateEvery && dateEvery > 1 ? Math.floor(dateEvery) : null;
+  const allDates = (dates != null ? dates : showAllDates === void 0 ? "edges" : showAllDates ? "all" : "edges") === "all";
+  const labelIndexes = every ? labels.map((_, i) => i).filter((i) => i % every === 0) : allDates || count <= 3 ? labels.map((_, i) => i) : [0, Math.floor((count - 1) / 2), count - 1];
+  const linked = type !== "line" && Boolean(onSelect || (hrefs == null ? void 0 : hrefs.some(Boolean)));
+  const choose = (index) => {
+    if (onSelect) onSelect(index);
+    else if (hrefs == null ? void 0 : hrefs[index]) window.location.assign(hrefs[index]);
+  };
   const onPointerMove = (event) => {
     const box = event.currentTarget.getBoundingClientRect();
     const ratio = Math.min(1, Math.max(0, (event.clientX - box.left) / box.width));
@@ -94,6 +109,11 @@ function Chart(_a) {
       Home: 0,
       End: count - 1
     };
+    if (linked && event.key === "Enter" && active !== null) {
+      event.preventDefault();
+      choose(active);
+      return;
+    }
     if (!(event.key in keys)) return;
     event.preventDefault();
     setActive(keys[event.key]);
@@ -133,6 +153,7 @@ function Chart(_a) {
     onPointerLeave: (event) => {
       if (document.activeElement !== event.currentTarget) setActive(null);
     },
+    onClick: linked ? () => active !== null && choose(active) : void 0,
     onFocus: () => setActive((current) => current != null ? current : 0),
     onBlur: () => setActive(null),
     onKeyDown
@@ -142,19 +163,37 @@ function Chart(_a) {
   if (type === "bar") {
     const s = shown[0];
     const top = Math.max(0, ...(_a2 = s == null ? void 0 : s.data) != null ? _a2 : [0]);
-    body = /* @__PURE__ */ jsx("div", { className: "rds-chart__bars", "aria-hidden": "true", children: labels.map((name, i) => {
+    body = /* @__PURE__ */ jsx("div", { className: "rds-chart__bars", "aria-hidden": linked ? void 0 : true, children: labels.map((name, i) => {
       var _a3, _b2;
-      return /* @__PURE__ */ jsxs("div", { className: "rds-chart__bar-row", children: [
+      const value = s ? formatLeft((_a3 = s.data[i]) != null ? _a3 : 0) : "";
+      const parts = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-label", children: name }),
         /* @__PURE__ */ jsx("span", { className: "rds-chart__track", children: /* @__PURE__ */ jsx(
           "span",
           {
             className: "rds-chart__bar",
-            style: __spreadProps(__spreadValues({}, seriesStyle(i + 1)), { width: `${top ? ((_a3 = s == null ? void 0 : s.data[i]) != null ? _a3 : 0) / top * 100 : 0}%` })
+            style: __spreadProps(__spreadValues({}, seriesStyle(i + 1)), { width: `${top ? ((_b2 = s == null ? void 0 : s.data[i]) != null ? _b2 : 0) / top * 100 : 0}%` })
           }
         ) }),
-        /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-value", children: s ? formatLeft((_b2 = s.data[i]) != null ? _b2 : 0) : "" })
-      ] }, name);
+        /* @__PURE__ */ jsx("span", { className: "rds-chart__bar-value", children: value })
+      ] });
+      const href = hrefs == null ? void 0 : hrefs[i];
+      const accessibleName = `${name}: ${value}`;
+      if (linked && href && !onSelect)
+        return /* @__PURE__ */ jsx("a", { href, className: "rds-chart__bar-row rds-chart__bar-row--link", "aria-label": accessibleName, children: parts }, name);
+      if (linked && onSelect)
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rds-chart__bar-row rds-chart__bar-row--link",
+            "aria-label": accessibleName,
+            onClick: () => onSelect(i),
+            children: parts
+          },
+          name
+        );
+      return /* @__PURE__ */ jsx("div", { className: "rds-chart__bar-row", children: parts }, name);
     }) });
   } else {
     body = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -208,7 +247,10 @@ function Chart(_a) {
         ] })),
         rightScale && /* @__PURE__ */ jsx(Axis, { ticks: rightScale.ticks, format: formatRight, side: "right" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "rds-chart__labels", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: `rds-chart__labels-track rds-chart__labels-track--${type}`, children: labelIndexes.map((i) => /* @__PURE__ */ jsx("span", { className: "rds-chart__label", style: { left: `${x(i)}%` }, children: labels[i] }, i)) }) })
+      /* @__PURE__ */ jsx("div", { className: "rds-chart__labels", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("div", { className: `rds-chart__labels-track rds-chart__labels-track--${type}${every ? " rds-chart__labels-track--ticks" : ""}`, children: [
+        every && labels.map((_, i) => /* @__PURE__ */ jsx("i", { className: "rds-chart__tick", style: { left: `${x(i)}%` } }, `t${i}`)),
+        labelIndexes.map((i) => /* @__PURE__ */ jsx("span", { className: "rds-chart__label", style: { left: `${x(i)}%` }, children: labels[i] }, i))
+      ] }) })
     ] });
   }
   const firstColumn = type === "line" ? "Data" : "Categoria";
@@ -216,7 +258,7 @@ function Chart(_a) {
     "figure",
     __spreadProps(__spreadValues({}, rest), {
       "aria-label": label,
-      className: ["rds-chart", `rds-chart--${type}`, dual && "rds-chart--dual", className].filter(Boolean).join(" "),
+      className: ["rds-chart", `rds-chart--${type}`, dual && "rds-chart--dual", linked && "rds-chart--linked", className].filter(Boolean).join(" "),
       children: [
         body,
         showLegend && type !== "bar" && /* @__PURE__ */ jsx("ul", { className: "rds-chart__legend", "aria-hidden": "true", children: shown.map((s, n) => /* @__PURE__ */ jsxs("li", { children: [
@@ -229,7 +271,7 @@ function Chart(_a) {
             shown.map((s) => /* @__PURE__ */ jsx(TableHead, { align: "end", children: legendName(s) }, s.name))
           ] }) }),
           /* @__PURE__ */ jsx(TableBody, { children: labels.map((name, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: name }),
+            /* @__PURE__ */ jsx(TableCell, { children: linked && onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "rds-chart__table-link", onClick: () => onSelect(i), children: name }) : linked && (hrefs == null ? void 0 : hrefs[i]) ? /* @__PURE__ */ jsx("a", { className: "rds-chart__table-link", href: hrefs[i], children: name }) : name }),
             shown.map((s) => {
               var _a3;
               return /* @__PURE__ */ jsx(TableCell, { align: "end", children: formatFor(s)((_a3 = s.data[i]) != null ? _a3 : 0) }, s.name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.6",
+  "version": "2.0.0-next.7",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -190,7 +190,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.2"
+    "@rojaostudio/ds-core": "1.1.0-next.3"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",

package/styles/rds/components-styles.css

@@ -2182,14 +2182,31 @@ button.rds-breadcrumb__link:focus-visible {
   white-space: nowrap;
 }
 
-.rds-chart__labels-track--line .rds-chart__label:first-child {
+.rds-chart__labels-track--line .rds-chart__label:first-of-type {
   transform: none;
 }
 
-.rds-chart__labels-track--line .rds-chart__label:last-child {
+.rds-chart__labels-track--line .rds-chart__label:last-of-type {
   transform: translateX(-100%);
 }
 
+/* dateEvery: a 1x4 tick on every point, the labels under them. */
+.rds-chart__labels-track--ticks {
+  height: calc(var(--type-caption-line) + var(--space-4));
+}
+
+.rds-chart__labels-track--ticks .rds-chart__label {
+  top: var(--space-4);
+}
+
+.rds-chart__tick {
+  position: absolute;
+  top: 0;
+  width: 1px;
+  height: var(--space-4);
+  background: var(--chart-tick);
+}
+
 /* Bars: label, track, value. */
 .rds-chart__bars {
   display: flex;
@@ -2220,6 +2237,50 @@ button.rds-breadcrumb__link:focus-visible {
   background: var(--_series);
 }
 
+/* A bar with a destination (hrefs or onSelect): the row is the link or button. */
+.rds-chart__bar-row--link {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-focus);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.rds-chart__bar-row--link:hover .rds-chart__track {
+  background: var(--chart-bar-hover);
+}
+
+.rds-chart__bar-row--link:hover .rds-chart__bar-label {
+  text-decoration: underline;
+}
+
+.rds-chart__bar-row--link:focus-visible,
+.rds-chart__table-link:focus-visible {
+  outline: var(--focus-ring-width) solid var(--chart-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
+
+.rds-chart--linked.rds-chart--column .rds-chart__plot {
+  cursor: pointer;
+}
+
+.rds-chart__table-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 .rds-chart__bar-value {
   color: var(--chart-axis);
   font-variant-numeric: tabular-nums;
@@ -2253,7 +2314,8 @@ button.rds-breadcrumb__link:focus-visible {
     background: CanvasText;
   }
 
-  .rds-chart__plot:focus-visible {
+  .rds-chart__plot:focus-visible,
+  .rds-chart__bar-row--link:focus-visible {
     outline-color: Highlight;
   }
 }

package/styles/rds/components.css

@@ -292,6 +292,9 @@
   --chart-tooltip-border: var(--border-default);
   --chart-label: var(--text-body);
   --chart-tooltip-title: var(--text-heading);
+  --chart-bar-hover: var(--surface-muted);
+  --chart-focus-ring: var(--focus-ring);
+  --chart-tick: var(--border-strong);
   --carousel-slide-background: var(--surface-muted);
   --carousel-dot: var(--border-strong);
   --carousel-dot-active: var(--colors-primary-default);