@coinbase/cds-mobile-visualization 3.4.0 → 3.6.1

package/CHANGELOG.md

@@ -8,6 +8,24 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.6.1 (4/16/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: stabilize chart path transitions. [[#618](https://github.com/coinbase/cds/pull/618)]
+
+## 3.6.0 (4/13/2026 PST)
+
+#### 🚀 Updates
+
+- Add PercentageBarChart component. [[#550](https://github.com/coinbase/cds/pull/550)]
+
+## 3.5.0 (4/13/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: add enter opacity transition to bars. [[#612](https://github.com/coinbase/cds/pull/612)]
+
 ## 3.4.0 (4/1/2026 PST)
 
 #### 🐞 Fixes

package/dts/chart/Path.d.ts

@@ -60,6 +60,7 @@ export type PathProps = PathBaseProps &
      *
      * @default transitions = {{
      *   enter: { type: 'timing', duration: 500 },
+     *   enterOpacity: undefined,
      *   update: { type: 'spring', stiffness: 900, damping: 120 }
      * }}
      *
@@ -77,6 +78,12 @@ export type PathProps = PathBaseProps &
        * Set to `null` to disable.
        */
       enter?: Transition | null;
+      /**
+       * Transition for the initial enter opacity animation.
+       * When provided, path opacity animates from 0 to 1.
+       * Set to `null` to disable.
+       */
+      enterOpacity?: Transition | null;
       /**
        * Transition for subsequent data update animations.
        * Set to `null` to disable.

package/dts/chart/Path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,SAAS,IAAI,aAAa,EAGhC,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAIL,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAI5B;;GAEG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,aAAa,EACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,OAAO,GACP,WAAW,CACd,GAAG;IACF;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;CACjB,CAAC;AAqEJ,eAAO,MAAM,IAAI,iDA+Kf,CAAC"}
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../src/chart/Path.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EACL,KAAK,YAAY,EAGjB,KAAK,SAAS,IAAI,aAAa,EAGhC,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAIL,KAAK,UAAU,EAEhB,MAAM,oBAAoB,CAAC;AAI5B;;GAEG;AACH,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,IAAI,CACF,aAAa,EACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,YAAY,GACZ,aAAa,GACb,aAAa,GACb,OAAO,GACP,WAAW,CACd,GAAG;IACF;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;;WAIG;QACH,YAAY,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QACjC;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;CACjB,CAAC;AAqEJ,eAAO,MAAM,IAAI,iDAwNf,CAAC"}

package/dts/chart/bar/Bar.d.ts

@@ -39,6 +39,7 @@ export type BarProps = BarBaseProps & {
    *
    * @default transitions = {{
    *   enter: { type: 'spring', stiffness: 900, damping: 120, staggerDelay: 250 },
+   *   enterOpacity: { type: 'timing', duration: 200 },
    *   update: { type: 'spring', stiffness: 900, damping: 120 }
    * }}
    *
@@ -56,6 +57,13 @@ export type BarProps = BarBaseProps & {
      * Set to `null` to disable.
      */
     enter?: BarTransition | null;
+    /**
+     * Transition for the initial enter opacity animation.
+     * Uses a default subtle fade when undefined (unless `enter` is disabled).
+     * @note falls back to `enter` timing offsets (`delay` and `staggerDelay`) when not provided.
+     * Set to `null` to disable enter opacity animation. Automatically set to null if enter transition is disabled.
+     */
+    enterOpacity?: BarTransition | null;
     /**
      * Transition for subsequent data update animations.
      * Set to `null` to disable.

package/dts/chart/bar/Bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAIjD,OAAO,EAAE,KAAK,aAAa,EAAc,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG;IAChC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACzC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACzC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,uFAAuF;IACvF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG;IACpC;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;QAC7B;;;WAGG;QACH,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;KAC/B,CAAC;IACF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,GAAG;IAC/D;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,GAAG,sCA2Df,CAAC"}
+{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAIjD,OAAO,EAAE,KAAK,aAAa,EAAc,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG;IAChC;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACzC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IACzC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,uFAAuF;IACvF,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,GAAG;IACpC;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE;QACZ;;;WAGG;QACH,KAAK,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;QAC7B;;;;;WAKG;QACH,YAAY,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;QACpC;;;WAGG;QACH,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;KAC/B,CAAC;IACF;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,GAAG;IAC/D;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,GAAG,sCA2Df,CAAC"}

package/dts/chart/bar/DefaultBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultBar.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/DefaultBar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,UAAU,yDAqGtB,CAAC"}
+{"version":3,"file":"DefaultBar.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/DefaultBar.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,UAAU,yDAgItB,CAAC"}

package/dts/chart/bar/PercentageBarChart.d.ts

@@ -0,0 +1,106 @@
+import type { View } from 'react-native';
+import type { BarChartBaseProps, BarChartProps } from './BarChart';
+import type { BarSeries } from './BarStack';
+/** Extended series type that supports single data values. */
+export type PercentageBarSeries = Omit<BarSeries, 'data' | 'stackId' | 'xAxisId' | 'yAxisId'> & {
+  /**
+   * Data for this series.
+   *
+   * Can be either:
+   * - Single number: `1400`
+   * - Array of numbers: `[10, 15, 20]`
+   */
+  data: number | Array<number | null>;
+};
+export type PercentageBarChartBaseProps = Omit<
+  BarChartBaseProps,
+  | 'series'
+  | 'stacked'
+  | 'layout'
+  | 'roundBaseline'
+  | 'inset'
+  | 'enableScrubbing'
+  | 'onScrubberPositionChange'
+> & {
+  /**
+   * Configuration objects that define how to visualize the data.
+   * Each series contains its own data.
+   */
+  series?: PercentageBarSeries[];
+  /**
+   * Chart layout - describes the direction bars/areas grow.
+   * - 'vertical': Bars grow vertically. X is category axis, Y is value axis.
+   * - 'horizontal' (default): Bars grow horizontally. Y is category axis, X is value axis.
+   * @default 'horizontal'
+   */
+  layout?: BarChartBaseProps['layout'];
+  /**
+   * Whether to round the baseline of a bar (where the value is 0).
+   * @default true
+   */
+  roundBaseline?: BarChartBaseProps['roundBaseline'];
+  /**
+   * Inset around the entire chart (outside the axes).
+   * @default 0
+   */
+  inset?: BarChartBaseProps['inset'];
+};
+export type PercentageBarChartProps = PercentageBarChartBaseProps &
+  Omit<
+    BarChartProps,
+    | 'series'
+    | 'stacked'
+    | 'layout'
+    | 'roundBaseline'
+    | 'inset'
+    | 'enableScrubbing'
+    | 'onScrubberPositionChange'
+  >;
+export declare const PercentageBarChart: import('react').MemoExoticComponent<
+  import('react').ForwardRefExoticComponent<
+    Omit<
+      BarChartBaseProps,
+      | 'inset'
+      | 'layout'
+      | 'series'
+      | 'roundBaseline'
+      | 'enableScrubbing'
+      | 'onScrubberPositionChange'
+      | 'stacked'
+    > & {
+      /**
+       * Configuration objects that define how to visualize the data.
+       * Each series contains its own data.
+       */
+      series?: PercentageBarSeries[];
+      /**
+       * Chart layout - describes the direction bars/areas grow.
+       * - 'vertical': Bars grow vertically. X is category axis, Y is value axis.
+       * - 'horizontal' (default): Bars grow horizontally. Y is category axis, X is value axis.
+       * @default 'horizontal'
+       */
+      layout?: BarChartBaseProps['layout'];
+      /**
+       * Whether to round the baseline of a bar (where the value is 0).
+       * @default true
+       */
+      roundBaseline?: BarChartBaseProps['roundBaseline'];
+      /**
+       * Inset around the entire chart (outside the axes).
+       * @default 0
+       */
+      inset?: BarChartBaseProps['inset'];
+    } & Omit<
+        BarChartProps,
+        | 'inset'
+        | 'layout'
+        | 'series'
+        | 'roundBaseline'
+        | 'enableScrubbing'
+        | 'onScrubberPositionChange'
+        | 'stacked'
+      > &
+      import('react').RefAttributes<View>
+  >
+>;
+//# sourceMappingURL=PercentageBarChart.d.ts.map

package/dts/chart/bar/PercentageBarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PercentageBarChart.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/PercentageBarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,6DAA6D;AAC7D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC,GAAG;IAC9F;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,iBAAiB,EACf,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,eAAe,GACf,OAAO,GACP,iBAAiB,GACjB,0BAA0B,CAC7B,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACpC,CAAC;AAgBF,MAAM,MAAM,uBAAuB,GAAG,2BAA2B,GAC/D,IAAI,CACF,aAAa,EACX,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,eAAe,GACf,OAAO,GACP,iBAAiB,GACjB,0BAA0B,CAC7B,CAAC;AAEJ,eAAO,MAAM,kBAAkB;IAlD7B;;;OAGG;aACM,mBAAmB,EAAE;IAC9B;;;;;OAKG;aACM,iBAAiB,CAAC,QAAQ,CAAC;IACpC;;;OAGG;oBACa,iBAAiB,CAAC,eAAe,CAAC;IAClD;;;OAGG;YACK,iBAAiB,CAAC,OAAO,CAAC;6KAoGnC,CAAC"}

package/dts/chart/bar/index.d.ts

@@ -5,4 +5,5 @@ export * from './BarStack';
 export * from './BarStackGroup';
 export * from './DefaultBar';
 export * from './DefaultBarStack';
+export * from './PercentageBarChart';
 //# sourceMappingURL=index.d.ts.map

package/dts/chart/bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/index.ts"],"names":[],"mappings":"AACA,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/bar/index.ts"],"names":[],"mappings":"AACA,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC"}

package/dts/chart/utils/bar.d.ts

@@ -56,6 +56,11 @@ export declare const withStaggerDelayTransition: (
  * `{ type: 'spring', stiffness: 900, damping: 120, staggerDelay: 250 }`
  */
 export declare const defaultBarEnterTransition: BarTransition;
+/**
+ * Default bar enter opacity transition.
+ * `{ type: 'timing', duration: 200 }`
+ */
+export declare const defaultBarEnterOpacityTransition: BarTransition;
 /**
  * Calculates the size adjustment needed for bars when accounting for gaps between them.
  * This function helps determine how much to reduce each bar's width to accommodate

package/dts/chart/utils/bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/bar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/bar.ts"],"names":[],"mappings":"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"}

package/dts/chart/utils/transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAKhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAAG,CACrB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAC1C,GAAG;IACF;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,UAI7C,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,UAAU,GAAG,IAAI,GAAG,SAAS,EACpC,SAAS,OAAO,EAChB,cAAc,UAAU,KACvB,UAAU,GAAG,IAGf,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,GAAG,IAAI,KAAG,MA4BpF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAAI,wDAK/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ;;;;WAIG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAkFrB,CAAC"}
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAKhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAAG,CACrB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAC1C,GAAG;IACF;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,UAI7C,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,UAAU,GAAG,IAAI,GAAG,SAAS,EACpC,SAAS,OAAO,EAChB,cAAc,UAAU,KACvB,UAAU,GAAG,IAGf,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,GAAG,IAAI,KAAG,MA4BpF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAAI,wDAK/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ;;;;WAIG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAsFrB,CAAC"}

package/esm/chart/Path.js

@@ -2,7 +2,7 @@ const _excluded = ["d", "initialPath", "fill", "fillOpacity", "stroke", "strokeO
   _excluded2 = ["animate", "clipRect", "clipPath", "clipOffset", "d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transitions", "transition"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo, useEffect, useMemo } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { Group, Path as SkiaPath, Skia, usePathInterpolation } from '@shopify/react-native-skia';
 import { defaultPathEnterTransition } from './utils/path';
@@ -92,19 +92,46 @@ export const Path = /*#__PURE__*/memo(props => {
   const isReady = !!context.getXScale();
   const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultPathEnterTransition), [animate, transitions == null ? void 0 : transitions.enter]);
   const updateTransition = useMemo(() => getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), [animate, transitions == null ? void 0 : transitions.update, transition]);
-  const shouldAnimateClip = animate && enterTransition !== null;
+  const enterOpacityTransition = useMemo(() => {
+    if (!animate) return null;
+    return transitions == null ? void 0 : transitions.enterOpacity;
+  }, [animate, transitions == null ? void 0 : transitions.enterOpacity]);
+  const animateEnterOpacity = Boolean(enterOpacityTransition);
+  const enterOpacity = useSharedValue(animateEnterOpacity ? 0 : 1);
+  const hasAnimatedEnterOpacity = useRef(false);
+  useEffect(() => {
+    if (hasAnimatedEnterOpacity.current) {
+      return;
+    }
+    if (!animateEnterOpacity) {
+      hasAnimatedEnterOpacity.current = true;
+      enterOpacity.value = 1;
+      return;
+    }
+    if (!isReady) {
+      return;
+    }
+    if (enterOpacityTransition === undefined || enterOpacityTransition === null) {
+      enterOpacity.value = 1;
+      hasAnimatedEnterOpacity.current = true;
+      return;
+    }
+    hasAnimatedEnterOpacity.current = true;
+    enterOpacity.value = buildTransition(1, enterOpacityTransition);
+  }, [animateEnterOpacity, isReady, enterOpacityTransition, enterOpacity]);
+  const animateClip = animate && enterTransition !== null;
 
   // The clip offset provides extra padding to prevent path from being cut off
   // Area charts typically use offset=0 for exact clipping, while lines use offset=2 for breathing room
   const totalOffset = clipOffset * 2; // Applied on both sides
 
   // Animation progress for clip path reveal
-  const clipProgress = useSharedValue(shouldAnimateClip ? 0 : 1);
+  const clipProgress = useSharedValue(animateClip ? 0 : 1);
   useEffect(() => {
-    if (shouldAnimateClip && isReady) {
+    if (animateClip && isReady) {
       clipProgress.value = buildTransition(1, enterTransition);
     }
-  }, [shouldAnimateClip, isReady, clipProgress, enterTransition]);
+  }, [animateClip, isReady, clipProgress, enterTransition]);
 
   // Create initial and target clip paths for animation
   const {
@@ -143,7 +170,7 @@ export const Path = /*#__PURE__*/memo(props => {
   }, [rect, clipOffset, totalOffset, context.layout]);
 
   // Use usePathInterpolation for animated clip path
-  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], shouldAnimateClip && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);
+  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], animateClip && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);
 
   // Resolve the final clip path:
   // 1. If clipPath prop was explicitly provided, use it (even if null = no clipping)
@@ -156,13 +183,13 @@ export const Path = /*#__PURE__*/memo(props => {
     }
 
     // If not animating or paths are null, return target clip path
-    if (!shouldAnimateClip || !targetClipPath) {
+    if (!animateClip || !targetClipPath) {
       return targetClipPath;
     }
 
     // Return undefined here since we'll use animatedClipPath directly
     return undefined;
-  }, [clipPathProp, shouldAnimateClip, targetClipPath]);
+  }, [clipPathProp, animateClip, targetClipPath]);
 
   // Convert SVG path string to SkPath for static rendering
   const staticPath = useDerivedValue(() => {
@@ -204,20 +231,25 @@ export const Path = /*#__PURE__*/memo(props => {
     strokeWidth: strokeWidth,
     transitions: {
       enter: enterTransition,
+      enterOpacity: enterOpacityTransition,
       update: updateTransition
     },
     children: children
   });
 
   // Determine which clip path to use
-  const finalClipPath = shouldAnimateClip && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
+  const finalClipPath = animateClip && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
 
   // If finalClipPath is null, render without clipping
   if (finalClipPath === null) {
-    return content;
+    return /*#__PURE__*/_jsx(Group, {
+      opacity: animateEnterOpacity ? enterOpacity : undefined,
+      children: content
+    });
   }
   return /*#__PURE__*/_jsx(Group, {
     clip: finalClipPath,
+    opacity: animateEnterOpacity ? enterOpacity : undefined,
     children: content
   });
 });

package/esm/chart/bar/DefaultBar.js

@@ -1,8 +1,9 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Path } from '../Path';
-import { defaultBarEnterTransition, getBarPath, withStaggerDelayTransition } from '../utils';
+import { defaultBarEnterOpacityTransition, defaultBarEnterTransition, getBarPath, withStaggerDelayTransition } from '../utils';
 import { getNormalizedStagger } from '../utils/bar';
 import { defaultTransition, getTransition } from '../utils/transition';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,7 +37,19 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
   const theme = useTheme();
   const defaultFill = fill || theme.color.fgPrimary;
   const normalizedStagger = useMemo(() => getNormalizedStagger(layout, x, y, drawingArea), [layout, x, y, drawingArea]);
-  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedStagger), [transitions == null ? void 0 : transitions.enter, animate, normalizedStagger]);
+  const enterTransition = useMemo(() => getTransition(transitions == null ? void 0 : transitions.enter, animate, defaultBarEnterTransition), [transitions == null ? void 0 : transitions.enter, animate]);
+  const enterTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterTransition, normalizedStagger), [enterTransition, normalizedStagger]);
+  const enterOpacityTransition = useMemo(() => {
+    var _enterOpacityTransiti, _enterOpacityTransiti2;
+    if ((transitions == null ? void 0 : transitions.enterOpacity) === undefined && enterTransition === null) return null;
+    const enterOpacityTransition = getTransition(transitions == null ? void 0 : transitions.enterOpacity, animate, defaultBarEnterOpacityTransition);
+    if (!enterOpacityTransition) return null;
+    return _extends({}, enterOpacityTransition, {
+      delay: (_enterOpacityTransiti = enterOpacityTransition.delay) != null ? _enterOpacityTransiti : enterTransition == null ? void 0 : enterTransition.delay,
+      staggerDelay: (_enterOpacityTransiti2 = enterOpacityTransition.staggerDelay) != null ? _enterOpacityTransiti2 : enterTransition == null ? void 0 : enterTransition.staggerDelay
+    });
+  }, [transitions == null ? void 0 : transitions.enterOpacity, animate, enterTransition]);
+  const enterOpacityTransitionWithStagger = useMemo(() => withStaggerDelayTransition(enterOpacityTransition, normalizedStagger), [enterOpacityTransition, normalizedStagger]);
   const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedStagger), [transitions == null ? void 0 : transitions.update, transition, animate, normalizedStagger]);
   const initialPath = useMemo(() => {
     if (!animate) return;
@@ -58,7 +71,8 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
     stroke: stroke,
     strokeWidth: strokeWidth,
     transitions: {
-      enter: enterTransition,
+      enter: enterTransitionWithStagger,
+      enterOpacity: enterOpacityTransitionWithStagger,
       update: updateTransition
     }
   });

package/esm/chart/bar/PercentageBarChart.js

@@ -0,0 +1,99 @@
+const _excluded = ["series", "layout", "roundBaseline", "inset", "transitions", "xAxis", "yAxis", "testID", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useMemo } from 'react';
+import { BarChart } from './BarChart';
+
+/** Extended series type that supports single data values. */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Returns the value for a group index from numeric shorthand or per-group series data.
+ * @param data - A single number (group `0` only) or an array of values per group.
+ * @param groupIndex - The group index to read.
+ * @returns The clamped value for that group, or `null` when the value is `null`, undefined, or out of range.
+ */
+const unwrapSeriesDataValue = (data, groupIndex) => {
+  const raw = typeof data === 'number' ? groupIndex === 0 ? data : null : data[groupIndex];
+  return raw != null ? Math.max(0, raw) : null;
+};
+export const PercentageBarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      layout = 'horizontal',
+      roundBaseline = true,
+      inset = 0,
+      transitions,
+      xAxis,
+      yAxis,
+      testID,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const barSeries = useMemo(() => {
+    var _series$map;
+    const groupCount = Math.max(0, ...((_series$map = series == null ? void 0 : series.map(_ref2 => {
+      let {
+        data
+      } = _ref2;
+      return typeof data === 'number' ? 1 : data.length;
+    })) != null ? _series$map : []));
+    const totals = Array.from({
+      length: groupCount
+    }, (_, i) => {
+      var _series$reduce;
+      return (_series$reduce = series == null ? void 0 : series.reduce((sum, _ref3) => {
+        var _unwrapSeriesDataValu;
+        let {
+          data
+        } = _ref3;
+        return sum + ((_unwrapSeriesDataValu = unwrapSeriesDataValue(data, i)) != null ? _unwrapSeriesDataValu : 0);
+      }, 0)) != null ? _series$reduce : 0;
+    });
+    return series == null ? void 0 : series.map(s => _extends({}, s, {
+      data: Array.from({
+        length: groupCount
+      }, (_, i) => {
+        const val = unwrapSeriesDataValue(s.data, i);
+        return val != null && totals[i] > 0 ? val / totals[i] * 100 : null;
+      })
+    }));
+  }, [series]);
+  const isHorizontalLayout = layout === 'horizontal';
+  const xAxisConfig = useMemo(() => {
+    return isHorizontalLayout ? _extends({
+      domain: {
+        min: 0,
+        max: 100
+      },
+      domainLimit: 'strict'
+    }, xAxis) : _extends({
+      categoryPadding: 0
+    }, xAxis);
+  }, [isHorizontalLayout, xAxis]);
+  const yAxisConfig = useMemo(() => {
+    return isHorizontalLayout ? _extends({
+      categoryPadding: 0
+    }, yAxis) : _extends({
+      domain: {
+        min: 0,
+        max: 100
+      },
+      domainLimit: 'strict'
+    }, yAxis);
+  }, [isHorizontalLayout, yAxis]);
+  return /*#__PURE__*/_jsx(BarChart, _extends({
+    ref: ref,
+    stacked: true,
+    inset: inset,
+    layout: layout,
+    roundBaseline: roundBaseline,
+    series: barSeries,
+    testID: testID,
+    transitions: transitions,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig
+  }, props, {
+    children: children
+  }));
+}));
+PercentageBarChart.displayName = 'PercentageBarChart';

package/esm/chart/bar/__stories__/BarChart.stories.js

@@ -1132,13 +1132,6 @@ function BuyVsSellExample() {
           legendShape: 'circle'
         }],
         stackGap: stackGap,
-        transitions: {
-          enter: {
-            type: 'timing',
-            duration: 5000,
-            delay: 2000
-          }
-        },
         xAxis: _extends({
           domainLimit: 'strict'
         }, xAxis),