@macrostrat/column-components/dist/axis.js

React rendering primitives for stratigraphic columns

import { useRef, useEffect } from "react";
import h from "./hyper.js";
import { select } from "d3-selection";
import { axisLeft } from "d3-axis";
import { useColumn } from "./context/column.js";
const __d3axisKeys = [
  "ticks",
  "tickArguments",
  "tickValues",
  "tickFormat",
  "tickSize",
  "tickSizeInner",
  "tickSizeOuter",
  "tickPadding"
];
function ColumnAxis(props) {
  const { scale } = useColumn();
  return h(AgeAxis, { scale, ...props });
}
function AgeAxis(props) {
  const {
    showLabel,
    className,
    showDomain = true,
    tickSpacing = 60,
    minTickSpacing = 20,
    scale
  } = props;
  const range = scale.range();
  const pixelHeight = Math.abs(range[0] - range[range.length - 1]);
  let tickValues = void 0;
  let ticks = Math.round(pixelHeight / tickSpacing);
  if (pixelHeight < 3 * tickSpacing) {
    let t0 = [];
    while (t0.length <= 2) {
      ticks += 1;
      t0 = scale.ticks(ticks);
    }
    tickValues = t0;
    if (pixelHeight < 2 * tickSpacing) {
      tickValues = [t0[0], t0[t0.length - 1]];
    }
  }
  if (pixelHeight < minTickSpacing) {
    ticks = 1;
    tickValues = scale.ticks(1);
    tickValues = [tickValues[0]];
  }
  const defaultProps = {
    ticks,
    // Suppress domain endpoints
    tickSizeOuter: 0,
    tickValues
  };
  const ref = useRef(null);
  const axisRef = useRef(axisLeft());
  const deps = __d3axisKeys.map((k) => props[k]);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    axisRef.current.scale(scale);
    for (let k of __d3axisKeys) {
      const val = props[k] ?? defaultProps[k];
      if (val == null) continue;
      axisRef.current[k](val);
    }
    const ax = select(el).call(axisRef.current);
    if (!showDomain) {
      ax.select(".domain").remove();
    }
    ax.selectAll(".tick text").each(function(d) {
      if (!(showLabel?.(d) ?? true)) {
        select(this).attr("visibility", "hidden");
      }
    });
    return () => {
      select(el).selectAll("*").remove();
    };
  }, [scale, ref.current, showDomain, showLabel, ...deps]);
  return h("g.y.axis.column-axis", { className, ref });
}
export {
  AgeAxis,
  ColumnAxis
};
//# sourceMappingURL=axis.js.map