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

Chart components in Apptane React UI framework

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["context", "domainZ", "minPointSize", "maxPointSize"],
      _excluded2 = ["axisYVisible", "gridYVisible", "gridXVisible", "legendInteractive", "tooltipVisible", "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 { scaleLinear } from "d3-scale";
import { ChartNumericDataContext, ChartOrdinalDataContext } from "../parts/ChartDataContext.js";
import { ChartLinearAxis } from "../parts/ChartLinearAxis.js";
import { ChartLinearGrid } from "../parts/ChartLinearGrid.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";

function XYScatterChartPaneBase(_ref) {
  let {
    context,
    domainZ,
    minPointSize,
    maxPointSize
  } = _ref,
      props = _objectWithoutProperties(_ref, _excluded);

  const p = props;
  const offset = props.axisYWidth;
  const [scaleY, compareY] = useMemo(() => {
    var _props$domainY, _domainY$slice$revers;

    const domainY = (_props$domainY = props.domainY) !== null && _props$domainY !== void 0 ? _props$domainY : [];
    const scaleY = scaleLinear().rangeRound([0, props.extentY]).domain((_domainY$slice$revers = domainY.slice().reverse()) !== null && _domainY$slice$revers !== void 0 ? _domainY$slice$revers : []) // [!] reversed domain
    .nice();

    const compare = (a, b) => a === b ? 0 : a < b ? -1 : 1;

    return [scaleY, compare];
  }, [props.domainY, props.extentY]);
  const [computed, domainX, domainY,, layers] = useXYZPaneData(context, scaleY, compareY, "numeric", domainZ ? domainZ[0] : undefined, domainZ ? domainZ[1] : undefined, minPointSize, maxPointSize, p, p.domainXType === "numeric");

  const axisY = scaleY && _jsx(ChartLinearAxis, {
    orientation: "y",
    componentId: props.componentId,
    theme: props.theme,
    colorMode: props.colorMode,
    span: props.axisYWidth,
    textOffset: 1,
    tickSize: props.axisYWidth - 4,
    axisVisible: false,
    tickVisible: true,
    tickValues: props.axisYValues,
    format: props.formatYDomain,
    scale: scaleY
  }, "axisY");

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

  return _jsxs(XYChartPane, _objectSpread(_objectSpread(_objectSpread({}, p), {}, {
    computed: computed,
    computedDomainX: domainX,
    computedDomainY: domainY,
    scaleY: scaleY,
    invertY: scaleY.invert,
    findDatum: props.legendInteractive ? findDatum : undefined
  }, context), {}, {
    tooltipOffset: maxPointSize * 0.5,
    children: [axisY, gridY, props.gridXVisible && p.gridX(p), layers, computed && _jsx(XYBubbleLayer, {
      componentId: props.componentId,
      offset: offset,
      data: computed
    })]
  }));
}

function XYNumericScatterChartPane(props) {
  const context = useContext(ChartNumericDataContext);
  return _jsx(XYScatterChartPaneBase, _objectSpread(_objectSpread({}, props), {}, {
    context: context
  }));
}

function XYOrdinalScatterChartPane(props) {
  const context = useContext(ChartOrdinalDataContext);
  return _jsx(XYScatterChartPaneBase, _objectSpread(_objectSpread({}, props), {}, {
    context: context
  }));
}

export function XYScatterChartPane(props) {
  var _props$minPointSize, _props$maxPointSize;

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

  const _ref2 = props,
        {
    axisYVisible = true,
    gridYVisible = true,
    gridXVisible = true,
    legendInteractive = true,
    tooltipVisible = true,
    domainZ
  } = _ref2,
        p = _objectWithoutProperties(_ref2, _excluded2); // see XYChartPanes


  const propsEx = {
    componentId,
    axisYVisible,
    gridYVisible,
    gridXVisible,
    legendInteractive,
    tooltipVisible,
    domainZ,
    minPointSize: (_props$minPointSize = props.minPointSize) !== null && _props$minPointSize !== void 0 ? _props$minPointSize : 4,
    maxPointSize: (_props$maxPointSize = props.maxPointSize) !== null && _props$maxPointSize !== void 0 ? _props$maxPointSize : 0.05 * Math.min(p.extentX, p.extentY),
    axisYWidth: axisYVisible ? p.axisYWidth : 0
  };

  switch (p.domainXType) {
    case "numeric":
      return _jsx(XYNumericScatterChartPane, _objectSpread(_objectSpread({}, p), propsEx));

    case "ordinal":
      return _jsx(XYOrdinalScatterChartPane, _objectSpread(_objectSpread({}, p), propsEx));

    default:
      warning(false, "Chart pane does not have 'domainXType' specified");
      return null;
  }
}
//# sourceMappingURL=XYScatterChartPane.js.map