@coinbase/cds-mcp-server 8.52.0 → 8.52.2

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.52.2 ((3/11/2026, 10:02 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.52.1 ((3/11/2026, 09:52 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.52.0 ((3/10/2026, 08:50 AM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/mobile/components/AreaChart.txt

@@ -145,233 +145,22 @@ You can have different area styles for each series.
 
 ### Animations
 
-You can configure chart transitions using the `transitions` prop on individual chart elements, or use the `animate` prop to toggle animations entirely.
-
-#### Customized Transitions
-
-You can pass in a custom spring or timing based transition to your chart for custom update animations. Use `CartesianChart` with `Area` and `Line` components directly to configure `transitions` per element.
+You can configure chart transitions using the `transitions` prop.
 
 ```jsx
-function AnimatedStackedAreas() {
-  const theme = useTheme();
-  const dataCount = 20;
-  const minYValue = 5000;
-  const maxDataOffset = 15000;
-  const minStepOffset = 2500;
-  const maxStepOffset = 10000;
-  const updateInterval = 500;
-  const seriesSpacing = 2000;
-  const myTransition = {
+<AreaChart
+  {...props}
+  transitions={{
+    enter: { type: 'spring', stiffness: 700, damping: 80 },
     update: { type: 'spring', stiffness: 700, damping: 20 },
-  };
-
-  const seriesConfig = [
-    { id: 'red', label: 'Red', color: `rgb(${theme.spectrum.red40})` },
-    { id: 'orange', label: 'Orange', color: `rgb(${theme.spectrum.orange40})` },
-    { id: 'yellow', label: 'Yellow', color: `rgb(${theme.spectrum.yellow40})` },
-    { id: 'green', label: 'Green', color: `rgb(${theme.spectrum.green40})` },
-    { id: 'blue', label: 'Blue', color: `rgb(${theme.spectrum.blue40})` },
-    { id: 'indigo', label: 'Indigo', color: `rgb(${theme.spectrum.indigo40})` },
-    { id: 'purple', label: 'Purple', color: `rgb(${theme.spectrum.purple40})` },
-  ];
-
-  const domainLimit = maxDataOffset + seriesConfig.length * seriesSpacing;
-
-  function generateNextValue(previousValue) {
-    const range = maxStepOffset - minStepOffset;
-    const offset = Math.random() * range + minStepOffset;
-
-    let direction;
-    if (previousValue >= maxDataOffset) {
-      direction = -1;
-    } else if (previousValue <= minYValue) {
-      direction = 1;
-    } else {
-      direction = Math.random() < 0.5 ? -1 : 1;
-    }
-
-    let newValue = previousValue + offset * direction;
-    newValue = Math.max(minYValue, Math.min(maxDataOffset, newValue));
-    return newValue;
-  }
-
-  function generateInitialData() {
-    const data = [];
-
-    let previousValue = minYValue + Math.random() * (maxDataOffset - minYValue);
-    data.push(previousValue);
-
-    for (let i = 1; i < dataCount; i++) {
-      const newValue = generateNextValue(previousValue);
-      data.push(newValue);
-      previousValue = newValue;
-    }
-
-    return data;
-  }
-
-  const MemoizedDottedArea = memo((props) => (
-    <DottedArea {...props} baselineOpacity={1} peakOpacity={1} />
-  ));
-
-  function AnimatedChart() {
-    const [data, setData] = useState(generateInitialData);
-
-    useEffect(() => {
-      const intervalId = setInterval(() => {
-        setData((currentData) => {
-          const lastValue = currentData[currentData.length - 1] ?? 0;
-          const newValue = generateNextValue(lastValue);
-
-          return [...currentData.slice(1), newValue];
-        });
-      }, updateInterval);
-
-      return () => clearInterval(intervalId);
-    }, []);
-
-    const series = seriesConfig.map((config, index) => ({
-      id: config.id,
-      label: config.label,
-      color: config.color,
-      data: index === 0 ? data : Array(dataCount).fill(seriesSpacing),
-    }));
-
-    return (
-      <AreaChart
-        stacked
-        height={300}
-        series={series}
-        type="dotted"
-        showLines
-        AreaComponent={MemoizedDottedArea}
-        transition={myTransition.update}
-        inset={0}
-        showYAxis
-        yAxis={{
-          showGrid: true,
-          width: 0,
-          tickLabelFormatter: () => '',
-          domain: { min: 0, max: domainLimit },
-        }}
-      />
-    );
-  }
-
-  return <AnimatedChart />;
-}
+  }}
+/>
 ```
 
-#### Disable Animations
-
-You can also disable animations by setting the `animate` prop to `false`.
+Also, you can toggle animations by setting `animate` to `true` or `false`.
 
 ```jsx
-function AnimatedStackedAreas() {
-  const theme = useTheme();
-  const dataCount = 20;
-  const minYValue = 5000;
-  const maxDataOffset = 15000;
-  const minStepOffset = 2500;
-  const maxStepOffset = 10000;
-  const updateInterval = 500;
-  const seriesSpacing = 2000;
-
-  const seriesConfig = [
-    { id: 'red', label: 'Red', color: `rgb(${theme.spectrum.red40})` },
-    { id: 'orange', label: 'Orange', color: `rgb(${theme.spectrum.orange40})` },
-    { id: 'yellow', label: 'Yellow', color: `rgb(${theme.spectrum.yellow40})` },
-    { id: 'green', label: 'Green', color: `rgb(${theme.spectrum.green40})` },
-    { id: 'blue', label: 'Blue', color: `rgb(${theme.spectrum.blue40})` },
-    { id: 'indigo', label: 'Indigo', color: `rgb(${theme.spectrum.indigo40})` },
-    { id: 'purple', label: 'Purple', color: `rgb(${theme.spectrum.purple40})` },
-  ];
-
-  const domainLimit = maxDataOffset + seriesConfig.length * seriesSpacing;
-
-  function generateNextValue(previousValue) {
-    const range = maxStepOffset - minStepOffset;
-    const offset = Math.random() * range + minStepOffset;
-
-    let direction;
-    if (previousValue >= maxDataOffset) {
-      direction = -1;
-    } else if (previousValue <= minYValue) {
-      direction = 1;
-    } else {
-      direction = Math.random() < 0.5 ? -1 : 1;
-    }
-
-    let newValue = previousValue + offset * direction;
-    newValue = Math.max(minYValue, Math.min(maxDataOffset, newValue));
-    return newValue;
-  }
-
-  function generateInitialData() {
-    const data = [];
-
-    let previousValue = minYValue + Math.random() * (maxDataOffset - minYValue);
-    data.push(previousValue);
-
-    for (let i = 1; i < dataCount; i++) {
-      const newValue = generateNextValue(previousValue);
-      data.push(newValue);
-      previousValue = newValue;
-    }
-
-    return data;
-  }
-
-  const MemoizedDottedArea = memo((props) => (
-    <DottedArea {...props} baselineOpacity={1} peakOpacity={1} />
-  ));
-
-  function AnimatedChart() {
-    const [data, setData] = useState(generateInitialData);
-
-    useEffect(() => {
-      const intervalId = setInterval(() => {
-        setData((currentData) => {
-          const lastValue = currentData[currentData.length - 1] ?? 0;
-          const newValue = generateNextValue(lastValue);
-
-          return [...currentData.slice(1), newValue];
-        });
-      }, updateInterval);
-
-      return () => clearInterval(intervalId);
-    }, []);
-
-    const series = seriesConfig.map((config, index) => ({
-      id: config.id,
-      label: config.label,
-      color: config.color,
-      data: index === 0 ? data : Array(dataCount).fill(seriesSpacing),
-    }));
-
-    return (
-      <AreaChart
-        animate={false}
-        stacked
-        height={300}
-        series={series}
-        type="dotted"
-        showLines
-        AreaComponent={MemoizedDottedArea}
-        inset={0}
-        showYAxis
-        yAxis={{
-          showGrid: true,
-          width: 0,
-          tickLabelFormatter: () => '',
-          domain: { min: 0, max: domainLimit },
-        }}
-      />
-    );
-  }
-
-  return <AnimatedChart />;
-}
+<AreaChart {...props} animate={false} />
 ```
 
 ### Gradients
@@ -673,6 +462,7 @@ function XAxisGradient() {
 | `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
+| `layout` | `horizontal \| vertical` | No | `'vertical'` | Chart layout - describes the direction bars/areas grow. - vertical (default): Bars grow vertically. X is category axis, Y is value axis. - horizontal: Bars grow horizontally. Y is category axis, X is value axis. |
 | `left` | `string \| number` | No | `-` | - |
 | `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
 | `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
@@ -737,8 +527,8 @@ function XAxisGradient() {
 | `type` | `solid \| dotted \| gradient` | No | `'solid'` | The type of area to render. |
 | `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
 | `width` | `string \| number` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<CartesianAxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<CartesianAxisConfigProps> & AxisBaseProps & { GridLineComponent?: LineComponent; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `number` | No | `-` | - |