@lobehub/charts/es/Heatmaps/ChartLabels.js

React modern charts components built on recharts

import { memo } from 'react';
import { getMonthLabels } from "../utils/calendar";
import { useStyles } from "./styles";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var ChartLabels = /*#__PURE__*/memo(function (_ref) {
  var labels = _ref.labels,
    blockSize = _ref.blockSize,
    labelHeight = _ref.labelHeight,
    blockMargin = _ref.blockMargin,
    labelMargin = _ref.labelMargin,
    showWeekdayLabels = _ref.showWeekdayLabels,
    hideMonthLabels = _ref.hideMonthLabels,
    weeks = _ref.weeks,
    weekStart = _ref.weekStart;
  var _useStyles = useStyles(),
    cx = _useStyles.cx;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [showWeekdayLabels && weeks[0] && /*#__PURE__*/_jsx("g", {
      className: cx('legend-weekday'),
      children: weeks[0].map(function (_, index) {
        var _labels$weekdays;
        if (index % 2 === 0) {
          return null;
        }
        var dayIndex = (index + weekStart) % 7;
        var maxLength = Math.floor((blockSize * 7 + blockMargin * 6) / 12);
        var label = (labels === null || labels === void 0 || (_labels$weekdays = labels.weekdays) === null || _labels$weekdays === void 0 ? void 0 : _labels$weekdays[dayIndex]) || '';
        return /*#__PURE__*/_jsx("text", {
          dominantBaseline: "middle",
          textAnchor: "end",
          x: -labelMargin,
          y: labelHeight + (blockSize + blockMargin) * index + blockSize / 2,
          children: label.length > maxLength ? label.slice(0, maxLength) + '...' : label
        }, index);
      })
    }), !hideMonthLabels && /*#__PURE__*/_jsx("g", {
      className: cx('legend-month'),
      children: getMonthLabels(weeks, labels.months).map(function (_ref2) {
        var label = _ref2.label,
          weekIndex = _ref2.weekIndex;
        var maxLength = Math.floor((blockSize * 4 + blockMargin * 3) / 12);
        return /*#__PURE__*/_jsx("text", {
          dominantBaseline: "hanging",
          x: (blockSize + blockMargin) * weekIndex,
          children: label.length > maxLength ? label.slice(0, maxLength) + '...' : label
        }, weekIndex);
      })
    })]
  });
});
export default ChartLabels;