minerva-design 1.4.0 → 1.6.0

package/dist/native/source/components/ShapeChart/charts.tsx

@@ -1,24 +1,26 @@
 import { useMemo } from "react";
-import type {
-  BulletChartOptions,
-  CalendarDate,
-  CalendarHeatmapOptions,
-  FunnelChartOptions,
-  GaugeChartOptions,
-  PieChartOptions,
-  RadarChartOptions,
-  RadialBarChartOptions,
-  SankeyChartOptions,
-  ShapeChartCommonOptions,
-  ShapeChartOptions,
-  ShapeDrillEvent,
-  SunburstChartOptions,
-  TreemapChartOptions,
+import {
+  calendarStrips,
+  type BulletChartOptions,
+  type CalendarHeatmapOptions,
+  type ChordChartOptions,
+  type FunnelChartOptions,
+  type GaugeChartOptions,
+  type PieChartOptions,
+  type RadarChartOptions,
+  type RadialBarChartOptions,
+  type SankeyChartOptions,
+  type ShapeChartCommonOptions,
+  type ShapeChartOptions,
+  type ShapeDrillEvent,
+  type SunburstChartOptions,
+  type TreemapChartOptions,
 } from "../../../charts/src/canvas.js";
 import { ShapeChartBase } from "./ShapeChartBase";
 import type {
   BulletChartProps,
   CalendarHeatmapProps,
+  ChordChartProps,
   DonutChartProps,
   FunnelChartProps,
   GaugeChartProps,
@@ -44,6 +46,8 @@ function useCommonOptions({
   animation,
   padding,
   ariaLabel,
+  locale,
+  texts,
 }: ShapeChartCommonProps): ShapeChartCommonOptions {
   // a new array with the same indexes keeps the options (and the animation)
   const hiddenKey = hidden ? hidden.join(",") : null;
@@ -67,6 +71,8 @@ function useCommonOptions({
       animation,
       padding,
       ariaLabel,
+      locale,
+      texts,
     }),
     [
       palette,
@@ -78,6 +84,8 @@ function useCommonOptions({
       animation,
       padding,
       ariaLabel,
+      locale,
+      texts,
     ],
   );
 }
@@ -449,25 +457,6 @@ export function RadialBarChart(props: RadialBarChartProps) {
   return <ShapeHost frame={props} options={options} defaultHeight={300} />;
 }
 
-const yearOf = (date: CalendarDate) => {
-  const time =
-    date instanceof Date
-      ? date.getTime()
-      : typeof date === "number"
-        ? date
-        : Date.parse(date);
-  return Number.isFinite(time) ? new Date(time).getUTCFullYear() : NaN;
-};
-
-/** Strips of the `weeks` layout: one per year when a range spans more than 53 weeks */
-const calendarStrips = (range: CalendarHeatmapOptions["range"]) => {
-  if (!Array.isArray(range) || range.length < 2) return 1;
-  const [a, b] = range as readonly [CalendarDate, CalendarDate];
-  const from = Math.min(yearOf(a), yearOf(b));
-  const to = Math.max(yearOf(a), yearOf(b));
-  return to > from ? to - from + 1 : 1;
-};
-
 /** Calendar heatmap: daily values on a calendar, contributions-style */
 export function CalendarHeatmap(props: CalendarHeatmapProps) {
   const {
@@ -525,8 +514,9 @@ export function CalendarHeatmap(props: CalendarHeatmapProps) {
     ],
   );
   const legend = options.legend === false ? 0 : 34;
+  // one strip of weeks per year when the range spans more than 53 weeks
   const defaultHeight =
-    layout === "months" ? 560 : calendarStrips(range) * 120 + legend + 16;
+    layout === "months" ? 560 : calendarStrips(options) * 120 + legend + 16;
   return (
     <ShapeHost frame={props} options={options} defaultHeight={defaultHeight} />
   );
@@ -580,12 +570,78 @@ export function BulletChart(props: BulletChartProps) {
   );
 }
 
+/**
+ * Chord diagram: flows between groups around a circle; pressing a group
+ * highlights its ribbons, pressing a ribbon shows both directions
+ */
+export function ChordChart(props: ChordChartProps) {
+  const {
+    groups,
+    matrix,
+    links,
+    directed,
+    arrows,
+    padAngle,
+    startAngle,
+    sortGroups,
+    sortSubgroups,
+    ribbonColor,
+    ribbonOpacity,
+    arcWidth,
+    ticks,
+    tickFormat,
+    labels,
+  } = props;
+  const common = useCommonOptions(props);
+  const options = useMemo(
+    (): ChordChartOptions => ({
+      ...common,
+      type: "chord",
+      groups,
+      matrix,
+      links,
+      directed,
+      arrows,
+      padAngle,
+      startAngle,
+      sortGroups,
+      sortSubgroups,
+      ribbonColor,
+      ribbonOpacity,
+      arcWidth,
+      ticks,
+      tickFormat,
+      labels,
+    }),
+    [
+      common,
+      groups,
+      matrix,
+      links,
+      directed,
+      arrows,
+      padAngle,
+      startAngle,
+      sortGroups,
+      sortSubgroups,
+      ribbonColor,
+      ribbonOpacity,
+      arcWidth,
+      ticks,
+      tickFormat,
+      labels,
+    ],
+  );
+  return <ShapeHost frame={props} options={options} defaultHeight={420} />;
+}
+
 /** Default height of a shape chart type (ShapeChart) */
 const DEFAULT_HEIGHTS: Partial<Record<ShapeChartOptions["type"], number>> = {
   gauge: 240,
   radialBar: 300,
   sankey: 360,
   sunburst: 360,
+  chord: 420,
 };
 
 /**

package/dist/native/source/components/ShapeChart/draw.tsx

@@ -106,11 +106,41 @@ function textView(
   );
 }
 
+/**
+ * Position of a view: rotated or curved views (and anything inside a clip)
+ * are placed with a translation, kept exact by the renderers, as layout
+ * offsets are rounded to the pixel grid before a rotation applies (up to
+ * half a pixel per nested clip: visible steps at the rounded corners);
+ * straight views keep the crisp edges of the rounded layout
+ */
+const placed = (
+  x: number,
+  y: number,
+  rotate: number,
+  exact: boolean,
+): ViewStyle =>
+  exact
+    ? {
+        left: 0,
+        top: 0,
+        transform: [
+          { translateX: x },
+          { translateY: y },
+          ...(rotate ? [{ rotate: `${rotate}rad` }] : []),
+        ],
+      }
+    : {
+        left: x,
+        top: y,
+        ...(rotate ? { transform: [{ rotate: `${rotate}rad` }] } : null),
+      };
+
 /** Elements of the primitives */
 export function renderPrims(
   prims: readonly Prim[],
   family: string | undefined,
   prefix = "",
+  inClip = false,
 ): ReactNode[] {
   return prims.map((p, i) => {
     const key = `${prefix}${i}`;
@@ -118,8 +148,12 @@ export function renderPrims(
       case "box": {
         const style: ViewStyle = {
           position: "absolute",
-          left: p.x,
-          top: p.y,
+          ...placed(
+            p.x,
+            p.y,
+            p.rotate ?? 0,
+            inClip || !!p.rotate || (p.radius ?? 0) > 0,
+          ),
           width: p.w,
           height: p.h,
           ...(p.color ? { backgroundColor: p.color } : null),
@@ -127,7 +161,6 @@ export function renderPrims(
           ...(p.borderWidth
             ? { borderWidth: p.borderWidth, borderColor: p.borderColor }
             : null),
-          ...(p.rotate ? { transform: [{ rotate: `${p.rotate}rad` }] } : null),
           ...(p.shadow ? SHADOW : null),
         };
         return <View key={key} style={style} />;
@@ -138,15 +171,13 @@ export function renderPrims(
             key={key}
             style={{
               position: "absolute",
-              left: p.x,
-              top: p.y,
+              ...placed(p.x, p.y, p.rotate, true),
               width: p.size,
               height: p.size,
               overflow: "hidden",
-              transform: [{ rotate: `${p.rotate}rad` }],
             }}
           >
-            {renderPrims(p.children, family, `${key}.`)}
+            {renderPrims(p.children, family, `${key}.`, true)}
           </View>
         );
       case "group":
@@ -158,7 +189,7 @@ export function renderPrims(
             }
             style={[StyleSheet.absoluteFill, { opacity: p.opacity }]}
           >
-            {renderPrims(p.children, family, `${key}.`)}
+            {renderPrims(p.children, family, `${key}.`, inClip)}
           </View>
         );
       case "text":