@apptane/react-ui-charts/dist/xy/XYBubbleChartPane.js

Chart components in Apptane React UI framework

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["axisYVisible", "gridYVisible", "gridXVisible", "legendInteractive", "tooltipVisible", "minBubbleSize", "domainZ"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import { useComponentId, warning } from "@apptane/react-ui-core";
import { useContext, useMemo } from "react";
import { scaleBand } from "d3-scale";
import { ChartOrdinalAxis } from "../parts/ChartOrdinalAxis.js";
import { ChartOrdinalDataContext } from "../parts/ChartDataContext.js";
import { ChartOrdinalGrid } from "../parts/ChartOrdinalGrid.js";
import { scaleBandInvert } from "./common.js";
import { findDatum, useXYZPaneData } from "./commonXYZ.js";
import { XYBubbleLayer } from "./XYBubbleLayer.js";
import { XYChartPane } from "./XYChartPane.js";
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
export function XYBubbleChartPane(props) {
  var _context$bandwidth;

  const componentId = useComponentId("--apptane-chart");

  const _ref = props,
        {
    axisYVisible = true,
    gridYVisible = true,
    gridXVisible = true,
    legendInteractive = true,
    tooltipVisible = true,
    minBubbleSize = 4,
    domainZ
  } = _ref,
        p = _objectWithoutProperties(_ref, _excluded); // see XYChartPanes


  const propsEx = {
    componentId,
    axisYVisible,
    gridYVisible,
    gridXVisible,
    legendInteractive,
    tooltipVisible,
    minBubbleSize,
    domainZ,
    axisYWidth: axisYVisible ? p.axisYWidth : 0
  };
  const context = useContext(ChartOrdinalDataContext);
  const bandwidthX = (_context$bandwidth = context.bandwidth) !== null && _context$bandwidth !== void 0 ? _context$bandwidth : 0;
  const offset = propsEx.axisYWidth;
  const [scaleY, scaleYp, scaleYi, compareY, bandwidthY] = useMemo(() => {
    var _p$domainY, _domainY$slice$revers;

    const domainY = (_p$domainY = p.domainY) !== null && _p$domainY !== void 0 ? _p$domainY : [];
    const padding = p.axisPadding;
    const scaleY = scaleBand().rangeRound([0, p.extentY]).domain((_domainY$slice$revers = domainY.slice().reverse()) !== null && _domainY$slice$revers !== void 0 ? _domainY$slice$revers : []) // [!] reversed domain
    .paddingOuter(padding * 0.5).paddingInner(padding); // build a lookup map using original domain order for sorting

    const lookup = new Map();
    domainY.map((value, index) => lookup.set(value, index));

    const compare = (a, b) => {
      var _lookup$get, _lookup$get2;

      const d = ((_lookup$get = lookup.get(a)) !== null && _lookup$get !== void 0 ? _lookup$get : -1) - ((_lookup$get2 = lookup.get(b)) !== null && _lookup$get2 !== void 0 ? _lookup$get2 : -1);
      return d < 0 ? -1 : d > 0 ? 1 : 0;
    };

    const bandwidth = scaleY.bandwidth();
    const half = bandwidth * 0.5;

    const scaleYp = v => {
      const p = scaleY(v);
      return p != null ? Math.round(p + half) : undefined;
    };

    return [scaleY, scaleYp, scaleBandInvert(scaleY), compare, bandwidth];
  }, [p.domainY, p.extentY, p.axisPadding]);
  const bandwidth = Math.min(bandwidthX, bandwidthY);
  const [computed, domainX, domainY,, layers] = useXYZPaneData(context, scaleYp, compareY, "ordinal", domainZ ? domainZ[0] : undefined, domainZ ? domainZ[1] : undefined, minBubbleSize, bandwidth, _objectSpread(_objectSpread({}, p), propsEx));

  const axisY = scaleY && _jsx(ChartOrdinalAxis, {
    orientation: "y",
    componentId: componentId,
    theme: p.theme,
    colorMode: p.colorMode,
    span: p.axisYWidth,
    textOffset: 1,
    tickSize: 0,
    axisVisible: false,
    tickVisible: false,
    format: props.formatYDomain,
    scale: scaleY
  }, "axisY");

  const gridY = scaleY && gridYVisible && _jsx(ChartOrdinalGrid, {
    orientation: "horizontal",
    componentId: componentId,
    theme: p.theme,
    colorMode: p.colorMode,
    left: p.axisYWidth,
    width: p.extentX,
    height: p.extentY,
    scale: scaleY
  }, "gridY");

  warning(p.domainXType === "ordinal", "Chart pane is not supported with domainXType='".concat(p.domainXType, "'"));
  return _jsxs(XYChartPane, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, p), propsEx), {}, {
    computed: computed,
    computedDomainX: domainX,
    computedDomainY: domainY,
    scaleY: scaleYp,
    invertY: scaleYi,
    findDatum: props.legendInteractive ? findDatum : undefined
  }, context), {}, {
    tooltipOffset: bandwidth * 0.5,
    children: [axisY, gridY, gridXVisible && p.gridX(p), layers, computed && _jsx(XYBubbleLayer, {
      componentId: componentId,
      offset: offset,
      data: computed
    })]
  }));
}
//# sourceMappingURL=XYBubbleChartPane.js.map