@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/visualizations/chart/axis/__stories__/Axis.stories.js

@@ -0,0 +1,552 @@
+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, useCallback, useMemo } from 'react';
+import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
+import { useTheme } from '../../../../hooks/useTheme';
+import { BarPlot } from '../../bar';
+import { CartesianChart } from '../../CartesianChart';
+import { LineChart, SolidLine } from '../../line';
+import { Line } from '../../line/Line';
+import { Scrubber } from '../../scrubber/Scrubber';
+import { XAxis, YAxis } from '..';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultChartHeight = 250;
+const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+  strokeWidth: 1
+})));
+const Simple = () => {
+  const data = [{
+    name: 'Page A',
+    uv: 4000,
+    pv: 2400,
+    amt: 2400
+  }, {
+    name: 'Page B',
+    uv: 3000,
+    pv: 1398,
+    amt: 2210
+  }, {
+    name: 'Page C',
+    uv: 2000,
+    pv: 9800,
+    amt: 2290
+  }, {
+    name: 'Page D',
+    uv: 2780,
+    pv: 3908,
+    amt: 2000
+  }, {
+    name: 'Page E',
+    uv: 1890,
+    pv: 4800,
+    amt: 2181
+  }, {
+    name: 'Page F',
+    uv: 2390,
+    pv: 3800,
+    amt: 2500
+  }, {
+    name: 'Page G',
+    uv: 3490,
+    pv: 4300,
+    amt: 2100
+  }];
+  const pageViews = data.map(d => d.pv);
+  const pageNames = data.map(d => d.name);
+  const pageUniqueVisitors = data.map(d => d.uv);
+  const chartAccessibilityLabel = "Page views and unique visitors across " + pageNames.length + " pages. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => pageNames[index] + ": " + pageViews[index] + " views, " + pageUniqueVisitors[index] + " unique visitors", [pageNames, pageViews, pageUniqueVisitors]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showXAxis: true,
+    showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: defaultChartHeight,
+    inset: 32,
+    series: [{
+      id: 'pageViews',
+      data: pageViews,
+      label: 'Page Views',
+      color: '#8884d8',
+      curve: 'monotone'
+    }, {
+      id: 'uniqueVisitors',
+      data: pageUniqueVisitors,
+      label: 'Unique Visitors',
+      color: '#82ca9d',
+      curve: 'monotone'
+    }],
+    xAxis: {
+      data: pageNames,
+      showLine: true,
+      showGrid: true,
+      showTickMarks: true,
+      GridLineComponent: ThinSolidLine,
+      position: 'bottom',
+      requestedTickCount: 5
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      GridLineComponent: ThinSolidLine,
+      position: 'left',
+      requestedTickCount: 5
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+const TimeOfDayAxesExample = () => {
+  const theme = useTheme();
+  const lineA = useMemo(() => [5, 5, 10, 90, 85, 70, 30, 25, 25], []);
+  const lineB = useMemo(() => [90, 85, 70, 25, 23, 40, 45, 40, 50], []);
+  const timeData = useMemo(() => [new Date(2023, 7, 31), new Date(2023, 7, 31, 12), new Date(2023, 8, 1), new Date(2023, 8, 1, 12), new Date(2023, 8, 2), new Date(2023, 8, 2, 12), new Date(2023, 8, 3), new Date(2023, 8, 3, 12), new Date(2023, 8, 4)].map(d => d.getTime()), []);
+  const dateFormatter = useCallback(index => {
+    return new Date(timeData[index]).toLocaleDateString('en-US', {
+      month: '2-digit',
+      day: '2-digit'
+    });
+  }, [timeData]);
+  const timeOfDayFormatter = useCallback(index => {
+    return new Date(timeData[index]).toLocaleTimeString('en-US', {
+      hour: '2-digit'
+    });
+  }, [timeData]);
+  const timeOfDayTicks = useMemo(() => {
+    return timeData.map((d, index) => index);
+  }, [timeData]);
+  const dateTicks = useMemo(() => {
+    return timeData.map((d, index) => index).filter(d => d % 2 === 0);
+  }, [timeData]);
+  const chartAccessibilityLabel = "Chart with " + lineA.length + " data points. Swipe to navigate.";
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": lineA " + lineA[index] + ", lineB " + lineB[index], [lineA, lineB]);
+  return /*#__PURE__*/_jsxs(LineChart, {
+    enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: defaultChartHeight,
+    series: [{
+      id: 'lineA',
+      data: lineA,
+      color: theme.color.accentBoldBlue
+    }, {
+      id: 'lineB',
+      data: lineB,
+      color: theme.color.accentBoldGreen
+    }],
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      position: "top",
+      tickLabelFormatter: dateFormatter,
+      ticks: dateTicks
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      tickLabelFormatter: timeOfDayFormatter,
+      ticks: timeOfDayTicks
+    }), /*#__PURE__*/_jsx(Scrubber, {})]
+  });
+};
+const multipleYAxesData = [1, 10, 30, 50, 70, 90, 100];
+const MultipleYAxesExample = () => {
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": linear " + multipleYAxesData[index] + ", log " + multipleYAxesData[index], []);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Chart with linear and log axes. 7 data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: defaultChartHeight,
+    series: [{
+      id: 'linear',
+      yAxisId: 'linearAxis',
+      data: multipleYAxesData,
+      label: 'linear'
+    }, {
+      id: 'log',
+      yAxisId: 'logAxis',
+      data: multipleYAxesData,
+      label: 'log'
+    }],
+    xAxis: {
+      data: multipleYAxesData
+    },
+    yAxis: [{
+      id: 'linearAxis',
+      scaleType: 'linear'
+    }, {
+      id: 'logAxis',
+      scaleType: 'log'
+    }],
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "logAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "linearAxis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "linear"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "log"
+    }), /*#__PURE__*/_jsx(Scrubber, {})]
+  });
+};
+const AxesOnAllSides = () => {
+  const theme = useTheme();
+  const data = [30, 45, 60, 80, 55, 40, 65];
+  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: defaultChartHeight,
+    series: [{
+      id: 'data',
+      data,
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      data: labels
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Bottom Axis",
+      position: "bottom",
+      ticks: labels.map((label, index) => index)
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Top Axis",
+      position: "top",
+      ticks: labels.map((label, index) => index)
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Left Axis",
+      position: "left"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Right Axis",
+      position: "right"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "data"
+    })]
+  });
+};
+const CustomTickMarkSizes = () => {
+  const theme = useTheme();
+  const data = [25, 50, 75, 60, 45, 80, 35];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 300,
+    series: [{
+      id: 'data',
+      data,
+      color: theme.color.accentBoldGreen
+    }],
+    xAxis: {
+      data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=4 (default)",
+      tickMarkSize: 4
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      height: 60,
+      label: "tickMarkSize=8",
+      position: "top",
+      tickMarkSize: 8
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=16",
+      position: "left",
+      tickMarkSize: 16,
+      width: 76
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "tickMarkSize=24",
+      position: "right",
+      tickMarkSize: 24,
+      width: 84
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "monotone",
+      seriesId: "data"
+    })]
+  });
+};
+const DomainLimitType = _ref => {
+  let {
+    limit
+  } = _ref;
+  const exponentialData = useMemo(() => [1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000, 150000], []);
+  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + exponentialData[index], [exponentialData]);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: "Exponential growth chart with " + exponentialData.length + " data points. Swipe to navigate.",
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: defaultChartHeight,
+    series: [{
+      id: 'growthLinear',
+      data: exponentialData,
+      color: '#10b981',
+      yAxisId: 'linear'
+    }, {
+      id: 'growthExponential',
+      data: exponentialData,
+      color: '#10b981',
+      yAxisId: 'exponential'
+    }],
+    yAxis: [{
+      id: 'linear',
+      scaleType: 'linear',
+      domainLimit: limit
+    }, {
+      id: 'exponential',
+      scaleType: 'log',
+      domainLimit: limit
+    }],
+    children: [/*#__PURE__*/_jsx(Line, {
+      showArea: true,
+      curve: "natural",
+      seriesId: "growthLinear"
+    }), /*#__PURE__*/_jsx(Line, {
+      showArea: true,
+      curve: "natural",
+      seriesId: "growthExponential"
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "exponential",
+      position: "left",
+      requestedTickCount: 6,
+      tickLabelFormatter: value => value.toLocaleString(),
+      width: 70
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "linear",
+      tickLabelFormatter: value => value.toLocaleString(),
+      width: 70
+    }), /*#__PURE__*/_jsx(Scrubber, {})]
+  });
+};
+
+// Band scale with tick filtering - show every other tick
+const BandScaleTickFiltering = () => /*#__PURE__*/_jsxs(CartesianChart, {
+  height: defaultChartHeight,
+  inset: 8,
+  series: [{
+    id: 'data',
+    data: [10, 22, 29, 45, 98, 45, 22, 35, 42, 18, 55, 67]
+  }],
+  xAxis: {
+    scaleType: 'band',
+    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  },
+  yAxis: {
+    domain: {
+      min: 0
+    }
+  },
+  children: [/*#__PURE__*/_jsx(XAxis, {
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+    label: "ticks={(i) => i % 2 === 0}",
+    ticks: i => i % 2 === 0
+  }), /*#__PURE__*/_jsx(BarPlot, {})]
+});
+
+// Band scale with explicit ticks array
+const BandScaleExplicitTicks = () => /*#__PURE__*/_jsxs(CartesianChart, {
+  height: defaultChartHeight,
+  inset: 8,
+  series: [{
+    id: 'data',
+    data: [10, 22, 29, 45, 98, 45, 22]
+  }],
+  xAxis: {
+    scaleType: 'band',
+    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  },
+  yAxis: {
+    domain: {
+      min: 0
+    }
+  },
+  children: [/*#__PURE__*/_jsx(XAxis, {
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+    label: "ticks={[0, 3, 6]} (first, middle, last)",
+    ticks: [0, 3, 6]
+  }), /*#__PURE__*/_jsx(BarPlot, {})]
+});
+
+// Line chart on band scale - comparing grid placements
+const LineChartOnBandScale = _ref2 => {
+  let {
+    bandGridLinePlacement
+  } = _ref2;
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 180,
+    inset: 8,
+    series: [{
+      id: 'line1',
+      data: [10, 22, 29, 45, 98, 45, 22],
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      scaleType: 'band',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      bandGridLinePlacement: bandGridLinePlacement,
+      bandTickMarkPlacement: bandGridLinePlacement,
+      label: "bandGridLinePlacement: " + bandGridLinePlacement
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      position: "left"
+    }), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
+const AxisStories = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(Simple, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Time of Day",
+      children: /*#__PURE__*/_jsx(TimeOfDayAxesExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multiple Axes on Same Side",
+      children: /*#__PURE__*/_jsx(MultipleYAxesExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Strict Domain Limit",
+      children: /*#__PURE__*/_jsx(DomainLimitType, {
+        limit: "strict"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Nice Domain Limit",
+      children: /*#__PURE__*/_jsx(DomainLimitType, {
+        limit: "nice"
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Axis Grid Alignment",
+      children: /*#__PURE__*/_jsxs(CartesianChart, {
+        height: 350,
+        inset: 8,
+        series: [{
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22]
+        }],
+        xAxis: {
+          scaleType: 'band',
+          data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+        },
+        yAxis: {
+          domain: {
+            min: 0
+          }
+        },
+        children: [/*#__PURE__*/_jsx(XAxis, {
+          showGrid: true,
+          showLine: true,
+          showTickMarks: true,
+          label: "Default"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "start",
+          label: "Start"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "end",
+          label: "End"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "middle",
+          label: "Middle"
+        }), /*#__PURE__*/_jsx(XAxis, {
+          showLine: true,
+          showTickMarks: true,
+          bandTickMarkPlacement: "edges",
+          label: "Edges"
+        }), /*#__PURE__*/_jsx(BarPlot, {})]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Scale - Tick Filtering",
+      children: /*#__PURE__*/_jsx(BandScaleTickFiltering, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Band Scale - Explicit Ticks",
+      children: /*#__PURE__*/_jsx(BandScaleExplicitTicks, {})
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "Line Chart on Band Scale - Grid Positions",
+      children: [/*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "edges"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "start"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "middle"
+      }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
+        bandGridLinePlacement: "end"
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Axes on All Sides",
+      children: /*#__PURE__*/_jsx(AxesOnAllSides, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom Tick Mark Sizes",
+      children: /*#__PURE__*/_jsx(CustomTickMarkSizes, {})
+    })]
+  });
+};
+export default AxisStories;

package/esm/visualizations/chart/axis/index.js

@@ -0,0 +1,6 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './Axis';
+export * from './DefaultAxisTickLabel';
+export * from './XAxis';
+export * from './YAxis';
+// codegen:end

package/esm/visualizations/chart/bar/Bar.js

@@ -0,0 +1,71 @@
+import React, { memo, useMemo } from 'react';
+import { useTheme } from '../../../hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getBarPath } from '../utils';
+import { DefaultBar } from './DefaultBar';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Simple bar component that renders a single bar at the specified position.
+ *
+ * This component is intentionally kept simple - it just renders a static bar at the given
+ * x, y, width, height coordinates. Complex positioning logic (like handling stacks,
+ * groups, gaps, etc.) should be handled by parent components like BarChart or BarStack.
+ *
+ * @example
+ * ```tsx
+ * <Bar x={10} y={20} width={50} height={100} fill="blue" />
+ * ```
+ */
+export const Bar = /*#__PURE__*/memo(_ref => {
+  let {
+    x,
+    y,
+    width,
+    height,
+    origin: originProp,
+    dataX,
+    dataY,
+    seriesId,
+    BarComponent = DefaultBar,
+    fill,
+    fillOpacity = 1,
+    stroke,
+    strokeWidth,
+    borderRadius = 4,
+    roundTop = true,
+    roundBottom = true,
+    minSize,
+    transitions,
+    transition
+  } = _ref;
+  const theme = useTheme();
+  const {
+    layout
+  } = useCartesianChartContext();
+  const barPath = useMemo(() => {
+    return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom, layout);
+  }, [x, y, width, height, borderRadius, roundTop, roundBottom, layout]);
+  const origin = useMemo(() => originProp != null ? originProp : layout === 'horizontal' ? x : y + height, [originProp, layout, x, y, height]);
+  if (!barPath) return;
+  return /*#__PURE__*/_jsx(BarComponent, {
+    borderRadius: borderRadius,
+    d: barPath,
+    dataX: dataX,
+    dataY: dataY,
+    fill: fill != null ? fill : theme.color.fgPrimary,
+    fillOpacity: fillOpacity,
+    height: height,
+    minSize: minSize,
+    origin: origin,
+    roundBottom: roundBottom,
+    roundTop: roundTop,
+    seriesId: seriesId,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    transition: transition,
+    transitions: transitions,
+    width: width,
+    x: x,
+    y: y
+  });
+});