feat: Polar charts

.cursor/rules/mobile.mdc

@@ -119,3 +119,11 @@ useAnimatedReaction(
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const AnimatedBox = Animated.createAnimatedComponent(Box);
 ```
+
+## Mobile App Routes
+
+When you add, remove, or rename story files in `packages/mobile` or `packages/mobile-visualization`, regenerate routes by running from the workspace root:
+
+```bash
+PROJECT_CWD=$(pwd) npx tsx libs/codegen/src/playground/prepareRoutes.ts
+```

apps/docs/docgen.config.js

@@ -74,7 +74,10 @@ module.exports = {
     'chart/area/AreaChart',
     'chart/bar/BarChart',
     'chart/CartesianChart',
+    'chart/DonutChart',
     'chart/line/LineChart',
+    'chart/pie/PieChart',
+    'chart/PolarChart',
     'chart/line/ReferenceLine',
     'chart/axis/XAxis',
     'chart/axis/YAxis',

apps/docs/docs/components/graphs/AreaChart/mobileMetadata.json

@@ -1,7 +1,7 @@
 {
   "import": "import { AreaChart } from '@coinbase/cds-mobile-visualization'",
   "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/area/AreaChart.tsx",
-  "description": "A chart component that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.",
+  "description": "A chart component built on CartesianChart that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.",
   "relatedComponents": [
     {
       "label": "CartesianChart",

apps/docs/docs/components/graphs/AreaChart/webMetadata.json

@@ -1,7 +1,7 @@
 {
   "import": "import { AreaChart } from '@coinbase/cds-web-visualization'",
   "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/area/AreaChart.tsx",
-  "description": "A chart component that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.",
+  "description": "A chart component built on CartesianChart that displays data as filled areas beneath lines. Ideal for showing cumulative values, stacked data, or emphasizing volume over time.",
   "relatedComponents": [
     {
       "label": "CartesianChart",

apps/docs/docs/components/graphs/BarChart/mobileMetadata.json

@@ -1,7 +1,7 @@
 {
   "import": "import { BarChart } from '@coinbase/cds-mobile-visualization'",
   "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/bar/BarChart.tsx",
-  "description": "A bar chart component for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.",
+  "description": "A bar chart component built on CartesianChart for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.",
   "relatedComponents": [
     {
       "label": "CartesianChart",

apps/docs/docs/components/graphs/BarChart/webMetadata.json

@@ -1,7 +1,7 @@
 {
   "import": "import { BarChart } from '@coinbase/cds-web-visualization'",
   "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/bar/BarChart.tsx",
-  "description": "A bar chart component for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.",
+  "description": "A bar chart component built on CartesianChart for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.",
   "relatedComponents": [
     {
       "label": "CartesianChart",

apps/docs/docs/components/graphs/CartesianChart/mobileMetadata.json

@@ -1,8 +1,24 @@
 {
   "import": "import { CartesianChart } from '@coinbase/cds-mobile-visualization'",
   "source": "https://github.com/coinbase/cds/blob/master/packages/mobile-visualization/src/chart/CartesianChart.tsx",
-  "description": "A flexible, low-level chart component for displaying data in an x/y coordinate space. Provides a foundation for building custom chart visualizations with full control over rendering.",
+  "description": "A flexible, low-level chart component for displaying data in an x/y coordinate space. Provides a foundation for building custom chart visualizations with full control over rendering. ",
   "relatedComponents": [
+    {
+      "label": "AreaChart",
+      "url": "/components/graphs/AreaChart/"
+    },
+    {
+      "label": "BarChart",
+      "url": "/components/graphs/BarChart/"
+    },
+    {
+      "label": "LineChart",
+      "url": "/components/graphs/LineChart/"
+    },
+    {
+      "label": "PolarChart",
+      "url": "/components/graphs/PolarChart/"
+    },
     {
       "label": "Point",
       "url": "/components/graphs/Point/"

apps/docs/docs/components/graphs/CartesianChart/webMetadata.json

@@ -3,6 +3,22 @@
   "source": "https://github.com/coinbase/cds/blob/master/packages/web-visualization/src/chart/CartesianChart.tsx",
   "description": "A flexible, low-level chart component for displaying data in an x/y coordinate space. Provides a foundation for building custom chart visualizations with full control over rendering.",
   "relatedComponents": [
+    {
+      "label": "AreaChart",
+      "url": "/components/graphs/AreaChart/"
+    },
+    {
+      "label": "BarChart",
+      "url": "/components/graphs/BarChart/"
+    },
+    {
+      "label": "LineChart",
+      "url": "/components/graphs/LineChart/"
+    },
+    {
+      "label": "PolarChart",
+      "url": "/components/graphs/PolarChart/"
+    },
     {
       "label": "Point",
       "url": "/components/graphs/Point/"