@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.10

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

@@ -0,0 +1,668 @@
+const _excluded = ["children"],
+  _excluded2 = ["animate"];
+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; }
+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, useEffect, useState } from 'react';
+import { Button } from '@coinbase/cds-mobile/buttons';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { VStack } from '@coinbase/cds-mobile/layout';
+import { XAxis, YAxis } from '../../axis';
+import { CartesianChart } from '../../CartesianChart';
+import { ReferenceLine, SolidLine } from '../../line';
+import { Bar } from '../Bar';
+import { BarChart } from '../BarChart';
+import { BarPlot } from '../BarPlot';
+import { DefaultBarStack } from '../DefaultBarStack';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+  strokeWidth: 1
+})));
+const defaultChartHeight = 250;
+const PositiveAndNegativeCashFlow = () => {
+  const theme = useTheme();
+  const categories = Array.from({
+    length: 31
+  }, (_, i) => "3/" + (i + 1));
+  const gains = [5, 0, 6, 18, 0, 5, 12, 0, 12, 22, 28, 18, 0, 12, 6, 0, 0, 24, 0, 0, 4, 0, 18, 0, 0, 14, 10, 16, 0, 0, 0];
+  const losses = [-4, 0, -8, -12, -6, 0, 0, 0, -18, 0, -12, 0, -9, -6, 0, 0, 0, 0, -22, -8, 0, 0, -10, -14, 0, 0, 0, 0, 0, -12, -10];
+  const series = [{
+    id: 'gains',
+    data: gains,
+    color: theme.color.fgPositive,
+    stackId: 'bars'
+  }, {
+    id: 'losses',
+    data: losses,
+    color: theme.color.fgNegative,
+    stackId: 'bars'
+  }];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 420,
+    inset: 32,
+    series: series,
+    xAxis: {
+      data: categories,
+      scaleType: 'band'
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {}), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      GridLineComponent: ThinSolidLine,
+      tickLabelFormatter: value => "$" + value + "M"
+    }), /*#__PURE__*/_jsx(BarPlot, {}), /*#__PURE__*/_jsx(ReferenceLine, {
+      LineComponent: SolidLine,
+      dataY: 0
+    })]
+  });
+};
+const FiatAndStablecoinBalance = () => {
+  const theme = useTheme();
+  const categories = Array.from({
+    length: 31
+  }, (_, i) => "3/" + (i + 1));
+  const usd = [20, 20, 20, 20, 20, 40, 60, 60, 80, 120, 200, 240, 240, 240, 240, 240, 240, 240, 240, 60, 30, 20, 25, 5, 0, 0, 0, 0, 80, 120, 150];
+  const usdc = [0, 0, 0, 0, 0, 0, 0, 0, 0, 60, 260, 260, 240, 220, 180, 160, 200, 240, 220, 0, 0, 0, 0, 0, 0, 250, 250, 250, 250, 250, 250];
+  const brl = [0, 0, 0, 0, 0, 0, 0, 20, 40, 100, 60, 60, 60, 0, 0, 0, 0, 0, 0, 160, 40, 80, 140, 180, 120, 0, 0, 0, 30, 30, 40];
+  const series = [{
+    id: 'BRL',
+    data: brl,
+    color: theme.color.accentBoldGreen
+  }, {
+    id: 'USDC',
+    data: usdc,
+    color: theme.color.accentBoldBlue
+  }, {
+    id: 'USD',
+    data: usd,
+    color: '#5b6cff'
+  }];
+  return /*#__PURE__*/_jsx(BarChart, {
+    showXAxis: true,
+    stacked: true,
+    barMinSize: 8,
+    height: 420,
+    inset: 32,
+    series: series,
+    stackGap: 2,
+    stackMinSize: 16,
+    xAxis: {
+      data: categories
+    }
+  });
+};
+const CustomBarStackComponent = /*#__PURE__*/memo(_ref => {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  if (props.height === 0) {
+    const diameter = props.width;
+    return /*#__PURE__*/_jsx(Bar, {
+      roundBottom: true,
+      roundTop: true,
+      borderRadius: 1000,
+      fill: theme.color.bgTertiary,
+      height: diameter,
+      originY: props.y,
+      width: diameter,
+      x: props.x,
+      y: props.y - diameter
+    });
+  }
+  return /*#__PURE__*/_jsx(DefaultBarStack, _extends({}, props, {
+    children: children
+  }));
+});
+const MonthlyRewards = () => {
+  const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
+  const purple = [null, 6, 8, 10, 7, 6, 6, 8, null, null, null, null];
+  const blue = [null, 10, 12, 11, 10, 9, 10, 11, null, null, null, null];
+  const cyan = [null, 7, 10, 12, 11, 10, 8, 11, null, null, null, null];
+  const green = [10, null, null, null, 1, null, null, 6, null, null, null, null];
+  const [roundBaseline, setRoundBaseline] = useState(true);
+  const series = [{
+    id: 'purple',
+    data: purple,
+    color: '#b399ff'
+  }, {
+    id: 'blue',
+    data: blue,
+    color: '#4f7cff'
+  }, {
+    id: 'cyan',
+    data: cyan,
+    color: '#00c2df'
+  }, {
+    id: 'green',
+    data: green,
+    color: '#33c481'
+  }];
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(BarChart, {
+      showXAxis: true,
+      stacked: true,
+      BarStackComponent: CustomBarStackComponent,
+      borderRadius: 1000,
+      height: 300,
+      inset: 0,
+      roundBaseline: roundBaseline,
+      series: series,
+      showYAxis: false,
+      stackMinSize: 24,
+      xAxis: {
+        tickLabelFormatter: index => {
+          return months[index];
+        },
+        categoryPadding: 0.27
+      }
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: () => setRoundBaseline(!roundBaseline),
+      children: "Toggle Round Baseline"
+    })]
+  });
+};
+const MultipleYAxes = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: defaultChartHeight,
+    series: [{
+      id: 'revenue',
+      data: [455, 520, 380, 455, 190, 235],
+      yAxisId: 'revenue',
+      color: theme.color.accentBoldYellow
+    }, {
+      id: 'profit',
+      data: [23, 15, 30, 56, 4, 12],
+      yAxisId: 'profit',
+      color: theme.color.fgPositive
+    }],
+    xAxis: {
+      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+      scaleType: 'band'
+    },
+    yAxis: [{
+      id: 'revenue'
+    }, {
+      id: 'profit'
+    }],
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Month"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      axisId: "revenue",
+      label: "Revenue",
+      position: "left",
+      requestedTickCount: 5,
+      tickLabelFormatter: value => "$" + value + "k",
+      width: 80
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "profit",
+      label: "Profit",
+      requestedTickCount: 5,
+      tickLabelFormatter: value => "$" + value + "k",
+      width: 70
+    }), /*#__PURE__*/_jsx(BarPlot, {})]
+  });
+};
+const initialData = [45, 52, 38, 45, 19, 23, 32];
+const MyCustomLine = /*#__PURE__*/memo(_ref2 => {
+  let props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/_jsx(SolidLine, _extends({}, props));
+});
+const UpdatingChartValues = () => {
+  const [data, setData] = useState(initialData);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(BarChart, {
+      height: 100,
+      series: [{
+        id: 'weekly-data',
+        data: data
+      }],
+      xAxis: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        showTickMarks: true,
+        showLine: true
+      },
+      yAxis: {
+        requestedTickCount: 5,
+        tickLabelFormatter: value => "$" + value + "k",
+        showGrid: true,
+        showTickMarks: true,
+        showLine: true,
+        tickMarkSize: 12,
+        domain: {
+          max: 250
+        }
+      }
+    }), /*#__PURE__*/_jsx(BarChart, {
+      height: 100,
+      series: [{
+        id: 'weekly-data',
+        data: data
+      }],
+      transition: {
+        type: 'timing',
+        duration: 300
+      },
+      xAxis: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        showTickMarks: true,
+        showLine: true
+      },
+      yAxis: {
+        requestedTickCount: 5,
+        tickLabelFormatter: value => "$" + value + "k",
+        showGrid: true,
+        showTickMarks: true,
+        showLine: true,
+        tickMarkSize: 12,
+        domain: {
+          max: 250
+        }
+      }
+    }), /*#__PURE__*/_jsx(BarChart, {
+      height: 100,
+      series: [{
+        id: 'weekly-data',
+        data: data.map((d, i) => i % 2 === 0 ? d : -d)
+      }],
+      xAxis: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        showTickMarks: true,
+        showLine: true
+      },
+      yAxis: {
+        requestedTickCount: 5,
+        tickLabelFormatter: value => "$" + value + "k",
+        showGrid: true,
+        showTickMarks: true,
+        showLine: true,
+        tickMarkSize: 12,
+        domain: {
+          max: 250
+        }
+      },
+      children: /*#__PURE__*/_jsx(ReferenceLine, {
+        LineComponent: MyCustomLine,
+        dataY: 0
+      })
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: () => setData(data => data[0] > 200 ? initialData : data.map(d => d + 50)),
+      children: "Update Data"
+    })]
+  });
+};
+const AnimatedUpdatingChartValues = () => {
+  const [data, setData] = useState([45, 52, 38, 45, 19, 23, 32]);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setData(prevData => prevData.map(value => {
+        // Generate random change between -15 and +15
+        const change = Math.floor(Math.random() * 31) - 15;
+        // Ensure values stay between 10 and 200
+        return Math.max(10, Math.min(200, value + change));
+      }));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+  return /*#__PURE__*/_jsx(BarChart, {
+    showXAxis: true,
+    showYAxis: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'weekly-data',
+      data: data
+    }],
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      showTickMarks: true,
+      showLine: true
+    },
+    yAxis: {
+      requestedTickCount: 5,
+      tickLabelFormatter: value => "$" + value + "k",
+      showGrid: true,
+      showTickMarks: true,
+      showLine: true,
+      tickMarkSize: 12,
+      domain: {
+        max: 250
+      }
+    }
+  });
+};
+const NegativeValuesWithTopAxis = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: defaultChartHeight,
+    series: [{
+      id: 'losses',
+      data: [-45, -52, -38, -45, -19, -23, -32],
+      color: theme.color.fgNegative
+    }],
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      scaleType: 'band'
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Day of Week",
+      position: "top"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      label: "Loss",
+      requestedTickCount: 5,
+      tickLabelFormatter: value => "$" + value + "k"
+    }), /*#__PURE__*/_jsx(BarPlot, {})]
+  });
+};
+const tabs = [{
+  id: 'week',
+  label: '1W'
+}, {
+  id: 'month',
+  label: '1M'
+}, {
+  id: 'year',
+  label: '1Y'
+}];
+const YAxisContinuousColorMap = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(BarChart, {
+    showXAxis: true,
+    showYAxis: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'temperature',
+      data: [12, 25, 38, 52, 45, 30, 18],
+      // Continuous gradient from blue (cold) to red (hot)
+      gradient: {
+        axis: 'y',
+        stops: _ref3 => {
+          let {
+            min,
+            max
+          } = _ref3;
+          return [{
+            offset: min,
+            color: theme.color.accentBoldGreen
+          }, {
+            offset: (min + max) / 2,
+            color: theme.color.accentBoldYellow
+          }, {
+            offset: max,
+            color: theme.color.accentBoldRed
+          }];
+        }
+      }
+    }],
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      requestedTickCount: 5,
+      tickLabelFormatter: value => value + "\xB0C",
+      showGrid: true
+    }
+  });
+};
+const YAxisDiscreteColorMap = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(BarChart, {
+    showXAxis: true,
+    showYAxis: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'temperature',
+      data: [12, 25, 38, 52, 45, 30, 18],
+      // Hard transitions based on performance thresholds
+      gradient: {
+        axis: 'y',
+        stops: [{
+          offset: 20,
+          color: theme.color.accentBoldGreen
+        }, {
+          offset: 20,
+          color: theme.color.accentBoldYellow
+        }, {
+          offset: 40,
+          color: theme.color.accentBoldYellow
+        }, {
+          offset: 40,
+          color: theme.color.accentBoldRed
+        }, {
+          offset: 60,
+          color: theme.color.accentBoldRed
+        }] // Hard transitions at 20, 40
+      }
+    }],
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      requestedTickCount: 5,
+      tickLabelFormatter: value => value + "\xB0C",
+      showGrid: true
+    }
+  });
+};
+const XAxisContinuousColorMap = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(BarChart, {
+    showXAxis: true,
+    showYAxis: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'weekly-trend',
+      data: [45, 52, 38, 45, 48, 50, 55],
+      // Gradient from left (start of week) to right (end of week)
+      gradient: {
+        axis: 'x',
+        stops: _ref4 => {
+          let {
+            min,
+            max
+          } = _ref4;
+          return [{
+            offset: min,
+            color: theme.color.accentBoldPurple
+          }, {
+            offset: max,
+            color: theme.color.accentBoldBlue
+          }];
+        }
+      }
+    }],
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      requestedTickCount: 5,
+      tickLabelFormatter: value => "" + value,
+      showGrid: true
+    }
+  });
+};
+const XAxisDiscreteColorMap = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(BarChart, {
+    showXAxis: true,
+    showYAxis: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'weekly-trend',
+      data: [45, 52, 38, 45, 48, 50, 55],
+      // Hard color transition from purple to blue at midweek
+      gradient: {
+        axis: 'x',
+        stops: [{
+          offset: 4,
+          color: theme.color.accentBoldPurple
+        },
+        // First half of week
+        {
+          offset: 4,
+          color: theme.color.accentBoldBlue
+        } // Second half of week - hard transition at index 4 (Thursday)
+        ]
+      }
+    }],
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      requestedTickCount: 5,
+      tickLabelFormatter: value => "" + value,
+      showGrid: true
+    }
+  });
+};
+const XAxisMultiSegmentColorMap = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(BarChart, {
+    showXAxis: true,
+    showYAxis: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'quarters',
+      data: [120, 135, 142, 128, 145, 158, 162, 155, 168, 175, 182, 190],
+      // Different color for each quarter
+      gradient: {
+        axis: 'x',
+        stops: [{
+          offset: 3,
+          color: theme.color.accentBoldBlue
+        },
+        // Q1 (Jan-Mar)
+        {
+          offset: 3,
+          color: theme.color.accentBoldGreen
+        },
+        // Q2 (Apr-Jun)
+        {
+          offset: 6,
+          color: theme.color.accentBoldGreen
+        }, {
+          offset: 6,
+          color: theme.color.accentBoldYellow
+        },
+        // Q3 (Jul-Sep)
+        {
+          offset: 9,
+          color: theme.color.accentBoldYellow
+        }, {
+          offset: 9,
+          color: theme.color.accentBoldPurple
+        } // Q4 (Oct-Dec)
+        ] // Hard transitions at indices 3, 6, 9
+      }
+    }],
+    xAxis: {
+      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    },
+    yAxis: {
+      requestedTickCount: 5,
+      tickLabelFormatter: value => "$" + value + "k",
+      showGrid: true
+    }
+  });
+};
+const ColorMapWithOpacity = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(BarChart, {
+    showXAxis: true,
+    showYAxis: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'confidence',
+      data: [25, 35, 45, 55, 65, 75, 85],
+      // Gradient with opacity changes
+      gradient: {
+        axis: 'y',
+        stops: _ref5 => {
+          let {
+            min,
+            max
+          } = _ref5;
+          return [{
+            offset: min,
+            color: theme.color.accentBoldBlue,
+            opacity: 0
+          },
+          // Low values - more transparent
+          {
+            offset: max,
+            color: theme.color.accentBoldBlue,
+            opacity: 1.0
+          } // High values - more opaque
+          ];
+        }
+      }
+    }],
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      requestedTickCount: 5,
+      tickLabelFormatter: value => value + "%",
+      showGrid: true
+    }
+  });
+};
+const BarChartStories = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(UpdatingChartValues, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Animated Auto-Updating",
+      children: /*#__PURE__*/_jsx(AnimatedUpdatingChartValues, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Negative Values with Top Axis",
+      children: /*#__PURE__*/_jsx(NegativeValuesWithTopAxis, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Positive and Negative Cash Flow",
+      children: /*#__PURE__*/_jsx(PositiveAndNegativeCashFlow, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Fiat & Stablecoin Balance",
+      children: /*#__PURE__*/_jsx(FiatAndStablecoinBalance, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Monthly Rewards",
+      children: /*#__PURE__*/_jsx(MonthlyRewards, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multiple Y Axes",
+      children: /*#__PURE__*/_jsx(MultipleYAxes, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Y-Axis Continuous ColorMap",
+      children: /*#__PURE__*/_jsx(YAxisContinuousColorMap, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Y-Axis Discrete ColorMap",
+      children: /*#__PURE__*/_jsx(YAxisDiscreteColorMap, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "X-Axis Continuous ColorMap",
+      children: /*#__PURE__*/_jsx(XAxisContinuousColorMap, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "X-Axis Discrete ColorMap",
+      children: /*#__PURE__*/_jsx(XAxisDiscreteColorMap, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "X-Axis Multi-Segment ColorMap",
+      children: /*#__PURE__*/_jsx(XAxisMultiSegmentColorMap, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "ColorMap with Opacity",
+      children: /*#__PURE__*/_jsx(ColorMapWithOpacity, {})
+    })]
+  });
+};
+export default BarChartStories;

package/esm/chart/bar/index.js

@@ -0,0 +1,9 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './Bar';
+export * from './BarChart';
+export * from './BarPlot';
+export * from './BarStack';
+export * from './BarStackGroup';
+export * from './DefaultBar';
+export * from './DefaultBarStack';
+// codegen:end