@coinbase/cds-mobile-visualization 3.4.0-beta.12 → 3.4.0-beta.14

package/esm/chart/legend/__stories__/Legend.stories.js

@@ -0,0 +1,574 @@
+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, useState } from 'react';
+import { ScrollView } from 'react-native';
+import { Chip } from '@coinbase/cds-mobile/chips';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { TextLabel1, TextLabel2 } from '@coinbase/cds-mobile/typography';
+import { Canvas, Group, Path as SkiaPath, Skia } from '@shopify/react-native-skia';
+import { XAxis, YAxis } from '../../axis';
+import { BarChart, BarPlot, DefaultBar } from '../../bar';
+import { CartesianChart } from '../../CartesianChart';
+import { LineChart } from '../../line';
+import { Scrubber } from '../../scrubber';
+import { getDottedAreaPath } from '../../utils/path';
+import { DefaultLegendShape } from '../DefaultLegendShape';
+import { Legend } from '../Legend';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const spectrumColors = ['blue40', 'green40', 'orange40', 'yellow40', 'gray40', 'indigo40', 'pink40', 'purple40', 'red40', 'teal40'];
+const shapes = ['pill', 'circle', 'squircle', 'square'];
+const Shapes = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(VStack, {
+    gap: 2,
+    children: shapes.map(shape => /*#__PURE__*/_jsx(HStack, {
+      gap: 1,
+      children: spectrumColors.map(color => /*#__PURE__*/_jsx(Box, {
+        style: {
+          width: 10,
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/_jsx(DefaultLegendShape, {
+          color: "rgb(" + theme.spectrum[color] + ")",
+          shape: shape
+        })
+      }, color))
+    }, shape))
+  });
+};
+const BasicLegend = () => {
+  const theme = useTheme();
+  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
+  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
+  const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 0
+  }).format(value), []);
+  const chartAccessibilityLabel = "Website traffic across " + pages.length + " pages showing page views and unique visitors.";
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    legend: true,
+    showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    height: 150,
+    legendPosition: "right",
+    series: [{
+      id: 'pageViews',
+      data: pageViews,
+      color: "rgb(" + theme.spectrum.green40 + ")",
+      label: 'Page Views'
+    }, {
+      id: 'uniqueVisitors',
+      data: uniqueVisitors,
+      color: "rgb(" + theme.spectrum.purple40 + ")",
+      label: 'Unique Visitors',
+      areaType: 'dotted'
+    }],
+    width: "100%",
+    xAxis: {
+      data: pages
+    },
+    yAxis: {
+      showGrid: true,
+      tickLabelFormatter: numberFormatter
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+const Position = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 200,
+    inset: {
+      bottom: 8,
+      left: 0,
+      right: 0,
+      top: 8
+    },
+    legend: /*#__PURE__*/_jsx(Legend, {
+      justifyContent: "flex-end"
+    }),
+    legendPosition: "bottom",
+    series: [{
+      id: 'revenue',
+      label: 'Revenue',
+      data: [455, 520, 380, 455, 285, 235],
+      yAxisId: 'revenue',
+      color: "rgb(" + theme.spectrum.yellow40 + ")",
+      legendShape: 'squircle'
+    }, {
+      id: 'profitMargin',
+      label: 'Profit Margin',
+      data: [23, 20, 16, 38, 12, 9],
+      yAxisId: 'profitMargin',
+      color: theme.color.fgPositive,
+      legendShape: 'squircle'
+    }],
+    width: "100%",
+    xAxis: {
+      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+      scaleType: 'band'
+    },
+    yAxis: [{
+      id: 'revenue',
+      domain: {
+        min: 0
+      }
+    }, {
+      id: 'profitMargin',
+      domain: {
+        max: 100,
+        min: 0
+      }
+    }],
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      axisId: "revenue",
+      position: "left",
+      requestedTickCount: 5,
+      tickLabelFormatter: value => "$" + value + "k",
+      width: 60
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      axisId: "profitMargin",
+      position: "right",
+      requestedTickCount: 5,
+      tickLabelFormatter: value => value + "%"
+    }), /*#__PURE__*/_jsx(BarPlot, {})]
+  });
+};
+const ShapeVariants = () => {
+  const theme = useTheme();
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
+  return /*#__PURE__*/_jsx(LineChart, {
+    legend: true,
+    showArea: true,
+    height: 200,
+    legendPosition: "left",
+    series: [{
+      id: 'pill',
+      label: 'Pill',
+      data: [120, 150, 130, 170, 160, 190],
+      color: "rgb(" + theme.spectrum.blue40 + ")",
+      legendShape: 'pill'
+    }, {
+      id: 'circle',
+      label: 'Circle',
+      data: [80, 110, 95, 125, 115, 140],
+      color: "rgb(" + theme.spectrum.green40 + ")",
+      legendShape: 'circle'
+    }, {
+      id: 'square',
+      label: 'Square',
+      data: [60, 85, 70, 100, 90, 115],
+      color: "rgb(" + theme.spectrum.orange40 + ")",
+      legendShape: 'square'
+    }, {
+      id: 'squircle',
+      label: 'Squircle',
+      data: [40, 60, 50, 75, 65, 85],
+      color: "rgb(" + theme.spectrum.purple40 + ")",
+      legendShape: 'squircle'
+    }],
+    width: "100%",
+    xAxis: {
+      data: months
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      showGrid: true
+    }
+  });
+};
+const DynamicData = () => {
+  var _seriesConfig$0$data$, _seriesConfig$0$data;
+  const theme = useTheme();
+  const [scrubberPosition, setScrubberPosition] = useState();
+  const timeLabels = useMemo(() => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], []);
+  const seriesConfig = useMemo(() => [{
+    id: 'candidate-a',
+    label: 'Candidate A',
+    data: [48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 38],
+    color: "rgb(" + theme.spectrum.blue40 + ")",
+    legendShape: 'circle'
+  }, {
+    id: 'candidate-b',
+    label: 'Candidate B',
+    data: [null, null, null, 6, 10, 14, 18, 22, 26, 29, 32, 35],
+    color: "rgb(" + theme.spectrum.orange40 + ")",
+    legendShape: 'circle'
+  }, {
+    id: 'candidate-c',
+    label: 'Candidate C',
+    data: [52, 53, 54, 49, 46, 43, 40, 37, 34, 32, 30, 27],
+    color: "rgb(" + theme.spectrum.gray40 + ")",
+    legendShape: 'circle'
+  }], [theme.spectrum.blue40, theme.spectrum.gray40, theme.spectrum.orange40]);
+  const dataLength = (_seriesConfig$0$data$ = (_seriesConfig$0$data = seriesConfig[0].data) == null ? void 0 : _seriesConfig$0$data.length) != null ? _seriesConfig$0$data$ : 0;
+  const dataIndex = scrubberPosition != null ? scrubberPosition : dataLength - 1;
+  const chartAccessibilityLabel = "Candidate polling data over " + timeLabels.length + " months showing support percentages for 3 candidates.";
+  const ValueLegendEntry = useCallback(_ref => {
+    var _seriesData$data;
+    let {
+      seriesId,
+      label,
+      color,
+      shape
+    } = _ref;
+    const seriesData = seriesConfig.find(s => s.id === seriesId);
+    const rawValue = seriesData == null || (_seriesData$data = seriesData.data) == null ? void 0 : _seriesData$data[dataIndex];
+    const formattedValue = rawValue === null || rawValue === undefined ? '--' : Math.round(rawValue) + "%";
+    return /*#__PURE__*/_jsxs(HStack, {
+      gap: 1,
+      style: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(DefaultLegendShape, {
+        color: color,
+        shape: shape
+      }), /*#__PURE__*/_jsx(TextLabel2, {
+        children: label
+      }), /*#__PURE__*/_jsx(TextLabel1, {
+        children: formattedValue
+      })]
+    });
+  }, [seriesConfig, dataIndex]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    height: 250,
+    legend: /*#__PURE__*/_jsx(Legend, {
+      EntryComponent: ValueLegendEntry,
+      justifyContent: "flex-start",
+      paddingX: 2
+    }),
+    legendPosition: "top",
+    onScrubberPositionChange: setScrubberPosition,
+    series: seriesConfig,
+    width: "100%",
+    xAxis: {
+      data: timeLabels
+    },
+    yAxis: {
+      domain: {
+        max: 100,
+        min: 0
+      },
+      showGrid: true,
+      tickLabelFormatter: value => value + "%"
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+const Interactive = () => {
+  const theme = useTheme();
+  const [emphasizedId, setEmphasizedId] = useState(null);
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  const seriesConfig = useMemo(() => [{
+    id: 'revenue',
+    label: 'Revenue',
+    data: [120, 150, 180, 165, 190, 210, 240, 220, 260, 280, 310, 350],
+    baseColor: 'blue'
+  }, {
+    id: 'expenses',
+    label: 'Expenses',
+    data: [80, 95, 110, 105, 120, 130, 145, 140, 155, 165, 180, 195],
+    baseColor: 'orange'
+  }, {
+    id: 'profit',
+    label: 'Profit',
+    data: [40, 55, 70, 60, 70, 80, 95, 80, 105, 115, 130, 155],
+    baseColor: 'green'
+  }], []);
+  const handleToggle = useCallback(seriesId => {
+    setEmphasizedId(prev => prev === seriesId ? null : seriesId);
+  }, []);
+  const ChipLegendEntry = /*#__PURE__*/memo(function ChipLegendEntry(_ref2) {
+    var _config$baseColor;
+    let {
+      seriesId,
+      label
+    } = _ref2;
+    const isEmphasized = emphasizedId === seriesId;
+    const config = seriesConfig.find(s => s.id === seriesId);
+    const baseColor = (_config$baseColor = config == null ? void 0 : config.baseColor) != null ? _config$baseColor : 'gray';
+    const color10 = theme.spectrum[baseColor + "10"];
+    const color50 = theme.spectrum[baseColor + "50"];
+    const color90 = theme.spectrum[baseColor + "90"];
+    return /*#__PURE__*/_jsx(Chip, {
+      compact: true,
+      accessibilityLabel: (isEmphasized ? 'Remove emphasis from' : 'Emphasize') + " " + label + " series",
+      background: "transparent",
+      onPress: () => handleToggle(seriesId),
+      style: {
+        backgroundColor: "rgb(" + (isEmphasized ? color90 : color10) + ")",
+        borderWidth: 0,
+        borderRadius: theme.borderRadius[1000]
+      },
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        style: {
+          alignItems: 'center'
+        },
+        children: [/*#__PURE__*/_jsx(DefaultLegendShape, {
+          color: "rgb(" + color50 + ")"
+        }), /*#__PURE__*/_jsx(TextLabel2, {
+          color: isEmphasized ? 'bg' : 'fg',
+          children: label
+        })]
+      })
+    });
+  });
+  const series = useMemo(() => {
+    return seriesConfig.map(config => {
+      const isEmphasized = emphasizedId === config.id;
+      const isDimmed = emphasizedId !== null && !isEmphasized;
+      return {
+        id: config.id,
+        label: config.label,
+        data: config.data,
+        color: "rgb(" + theme.spectrum[config.baseColor + "40"] + ")",
+        opacity: isDimmed ? 0.3 : 1
+      };
+    });
+  }, [emphasizedId, seriesConfig, theme]);
+  return /*#__PURE__*/_jsx(LineChart, {
+    showArea: true,
+    height: 300,
+    legend: /*#__PURE__*/_jsx(Legend, {
+      EntryComponent: ChipLegendEntry,
+      gap: 1,
+      paddingTop: 1
+    }),
+    legendPosition: "top",
+    series: series,
+    width: "100%",
+    xAxis: {
+      data: months
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      showGrid: true,
+      tickLabelFormatter: value => "$" + value + "k"
+    }
+  });
+};
+const Accessible = () => {
+  const theme = useTheme();
+  const months = useMemo(() => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], []);
+  return /*#__PURE__*/_jsx(LineChart, {
+    legend: true,
+    showArea: true,
+    height: 200,
+    legendAccessibilityLabel: "Financial performance chart, legend",
+    legendPosition: "bottom",
+    series: [{
+      id: 'revenue',
+      label: 'Revenue',
+      data: [120, 150, 180, 165, 190, 210],
+      color: "rgb(" + theme.spectrum.green40 + ")"
+    }, {
+      id: 'expenses',
+      label: 'Expenses',
+      data: [80, 95, 110, 105, 120, 130],
+      color: "rgb(" + theme.spectrum.orange40 + ")"
+    }],
+    width: "100%",
+    xAxis: {
+      data: months
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      showGrid: true
+    }
+  });
+};
+const LegendShapes = () => {
+  const theme = useTheme();
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+  // Actual revenue (first 9 months)
+  const actualRevenue = [320, 380, 420, 390, 450, 480, 520, 490, 540, null, null, null];
+
+  // Forecasted revenue (last 3 months)
+  const forecastRevenue = [null, null, null, null, null, null, null, null, null, 580, 620, 680];
+  const numberFormatter = useCallback(value => "$" + new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 0
+  }).format(value) + "k", []);
+
+  // Pattern settings for dotted fill
+  const patternSize = 4;
+  const dotSize = 1;
+
+  // Custom legend indicator that matches the dotted bar pattern
+  const DottedLegendIndicator = useMemo(() => {
+    // Create a small dotted pattern for the legend indicator
+    const indicatorSize = 10;
+    const legendPatternSize = patternSize / 2;
+    const legendDotSize = dotSize / 2;
+    const dottedPath = getDottedAreaPath({
+      x: 1,
+      y: 1,
+      width: indicatorSize - 2,
+      height: indicatorSize - 2
+    }, legendPatternSize, legendDotSize);
+    const skiaPath = Skia.Path.MakeFromSVGString(dottedPath);
+    // Create squircle path for clipping
+    const squirclePath = Skia.Path.Make();
+    squirclePath.addRRect(Skia.RRectXY(Skia.XYWHRect(1, 1, 8, 8), 2, 2));
+    return /*#__PURE__*/_jsxs(Canvas, {
+      style: {
+        width: indicatorSize,
+        height: indicatorSize
+      },
+      children: [/*#__PURE__*/_jsx(Group, {
+        clip: squirclePath,
+        children: skiaPath && /*#__PURE__*/_jsx(SkiaPath, {
+          color: theme.color.fgPositive,
+          path: skiaPath,
+          style: "fill"
+        })
+      }), /*#__PURE__*/_jsx(SkiaPath, {
+        color: theme.color.fgPositive,
+        path: squirclePath,
+        strokeWidth: 2,
+        style: "stroke"
+      })]
+    });
+  }, [theme.color.fgPositive]);
+
+  // Custom bar component that renders bars with dotted pattern fill
+  const DottedBarComponent = useMemo(() => {
+    return /*#__PURE__*/memo(function DottedBar(props) {
+      const {
+        x,
+        y,
+        width,
+        height,
+        fill,
+        d
+      } = props;
+
+      // Generate dotted path for this bar's bounds
+      const dottedPath = useMemo(() => {
+        return getDottedAreaPath({
+          x,
+          y,
+          width,
+          height
+        }, patternSize, dotSize);
+      }, [x, y, width, height]);
+
+      // Create Skia paths
+      const barClipPath = useMemo(() => {
+        var _Skia$Path$MakeFromSV;
+        return d ? (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(d)) != null ? _Skia$Path$MakeFromSV : undefined : undefined;
+      }, [d]);
+      const dotsSkiaPath = useMemo(() => {
+        var _Skia$Path$MakeFromSV2;
+        return (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(dottedPath)) != null ? _Skia$Path$MakeFromSV2 : undefined;
+      }, [dottedPath]);
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Group, {
+          clip: barClipPath,
+          children: dotsSkiaPath && /*#__PURE__*/_jsx(SkiaPath, {
+            color: fill,
+            path: dotsSkiaPath,
+            style: "fill"
+          })
+        }), /*#__PURE__*/_jsx(DefaultBar, _extends({}, props, {
+          fill: undefined,
+          stroke: fill,
+          strokeWidth: 2
+        }))]
+      });
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(BarChart, {
+    legend: true,
+    showXAxis: true,
+    showYAxis: true,
+    height: 250,
+    inset: 0,
+    legendPosition: "top",
+    series: [{
+      id: 'actual',
+      label: 'Historical',
+      data: actualRevenue,
+      color: theme.color.fgPositive,
+      legendShape: 'squircle',
+      stackId: 'revenue'
+    }, {
+      id: 'forecast',
+      label: 'Forecasted',
+      data: forecastRevenue,
+      color: theme.color.fgPositive,
+      legendShape: DottedLegendIndicator,
+      stackId: 'revenue',
+      BarComponent: DottedBarComponent
+    }],
+    xAxis: {
+      data: months,
+      scaleType: 'band',
+      showLine: true,
+      showTickMarks: true
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      },
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      position: 'left',
+      tickLabelFormatter: numberFormatter,
+      width: 60
+    }
+  });
+};
+const LegendStories = () => {
+  return /*#__PURE__*/_jsx(ScrollView, {
+    children: /*#__PURE__*/_jsxs(ExampleScreen, {
+      children: [/*#__PURE__*/_jsx(Example, {
+        title: "Shapes",
+        children: /*#__PURE__*/_jsx(Shapes, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Basic Legend",
+        children: /*#__PURE__*/_jsx(BasicLegend, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Position",
+        children: /*#__PURE__*/_jsx(Position, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Shape Variants",
+        children: /*#__PURE__*/_jsx(ShapeVariants, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Dynamic Data",
+        children: /*#__PURE__*/_jsx(DynamicData, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Interactive Legend",
+        children: /*#__PURE__*/_jsx(Interactive, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Legend Shapes",
+        children: /*#__PURE__*/_jsx(LegendShapes, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Accessible Legend",
+        children: /*#__PURE__*/_jsx(Accessible, {})
+      })]
+    })
+  });
+};
+export default LegendStories;

package/esm/chart/legend/index.js

@@ -0,0 +1,3 @@
+export * from './DefaultLegendEntry';
+export * from './DefaultLegendShape';
+export * from './Legend';

package/esm/chart/line/LineChart.js

@@ -45,7 +45,8 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       color: s.color,
       yAxisId: s.yAxisId,
       stackId: s.stackId,
-      gradient: s.gradient
+      gradient: s.gradient,
+      legendShape: s.legendShape
     }));
   }, [series]);