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

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

@@ -0,0 +1,99 @@
+const _excluded = ["series", "layout", "roundBaseline", "inset", "transitions", "xAxis", "yAxis", "testID", "children"];
+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); }
+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; }
+import { forwardRef, memo, useMemo } from 'react';
+import { BarChart } from './BarChart';
+
+/** Extended series type that supports single data values. */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Returns the value for a group index from numeric shorthand or per-group series data.
+ * @param data - A single number (group `0` only) or an array of values per group.
+ * @param groupIndex - The group index to read.
+ * @returns The clamped value for that group, or `null` when the value is `null`, undefined, or out of range.
+ */
+const unwrapSeriesDataValue = (data, groupIndex) => {
+  const raw = typeof data === 'number' ? groupIndex === 0 ? data : null : data[groupIndex];
+  return raw != null ? Math.max(0, raw) : null;
+};
+export const PercentageBarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      layout = 'horizontal',
+      roundBaseline = true,
+      inset = 0,
+      transitions,
+      xAxis,
+      yAxis,
+      testID,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const barSeries = useMemo(() => {
+    var _series$map;
+    const groupCount = Math.max(0, ...((_series$map = series == null ? void 0 : series.map(_ref2 => {
+      let {
+        data
+      } = _ref2;
+      return typeof data === 'number' ? 1 : data.length;
+    })) != null ? _series$map : []));
+    const totals = Array.from({
+      length: groupCount
+    }, (_, i) => {
+      var _series$reduce;
+      return (_series$reduce = series == null ? void 0 : series.reduce((sum, _ref3) => {
+        var _unwrapSeriesDataValu;
+        let {
+          data
+        } = _ref3;
+        return sum + ((_unwrapSeriesDataValu = unwrapSeriesDataValue(data, i)) != null ? _unwrapSeriesDataValu : 0);
+      }, 0)) != null ? _series$reduce : 0;
+    });
+    return series == null ? void 0 : series.map(s => _extends({}, s, {
+      data: Array.from({
+        length: groupCount
+      }, (_, i) => {
+        const val = unwrapSeriesDataValue(s.data, i);
+        return val != null && totals[i] > 0 ? val / totals[i] * 100 : null;
+      })
+    }));
+  }, [series]);
+  const isHorizontalLayout = layout === 'horizontal';
+  const xAxisConfig = useMemo(() => {
+    return isHorizontalLayout ? _extends({
+      domain: {
+        min: 0,
+        max: 100
+      },
+      domainLimit: 'strict'
+    }, xAxis) : _extends({
+      categoryPadding: 0
+    }, xAxis);
+  }, [isHorizontalLayout, xAxis]);
+  const yAxisConfig = useMemo(() => {
+    return isHorizontalLayout ? _extends({
+      categoryPadding: 0
+    }, yAxis) : _extends({
+      domain: {
+        min: 0,
+        max: 100
+      },
+      domainLimit: 'strict'
+    }, yAxis);
+  }, [isHorizontalLayout, yAxis]);
+  return /*#__PURE__*/_jsx(BarChart, _extends({
+    ref: ref,
+    stacked: true,
+    inset: inset,
+    layout: layout,
+    roundBaseline: roundBaseline,
+    series: barSeries,
+    testID: testID,
+    transitions: transitions,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig
+  }, props, {
+    children: children
+  }));
+}));
+PercentageBarChart.displayName = 'PercentageBarChart';