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

React modern charts components built on recharts

import { cx } from 'antd-style';
import isEqual from 'fast-deep-equal';
import { memo, useMemo } from 'react';
import { getMonthLabels } from "../utils/calendar";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
// Simple component - ChartLabels already memoized, so this doesn't need memo
var WeekdayLabels = function WeekdayLabels(_ref) {
  var blockMargin = _ref.blockMargin,
    blockSize = _ref.blockSize,
    firstWeek = _ref.firstWeek,
    labelHeight = _ref.labelHeight,
    labelMargin = _ref.labelMargin,
    weekStart = _ref.weekStart,
    weekdays = _ref.weekdays;
  var labels = useMemo(function () {
    var maxLength = Math.floor((blockSize * 7 + blockMargin * 6) / 12);
    return firstWeek.map(function (_, index) {
      if (index % 2 === 0) return null;
      var dayIndex = (index + weekStart) % 7;
      var label = (weekdays === null || weekdays === void 0 ? void 0 : weekdays[dayIndex]) || '';
      var truncatedLabel = label.length > maxLength ? label.slice(0, maxLength) + '...' : label;
      return {
        dayIndex: dayIndex,
        index: index,
        label: truncatedLabel,
        y: labelHeight + (blockSize + blockMargin) * index + blockSize / 2
      };
    }).filter(function (item) {
      return item !== null;
    });
  }, [firstWeek, weekStart, blockSize, blockMargin, labelHeight, weekdays]);
  if (labels.length === 0) return null;
  return /*#__PURE__*/_jsx("g", {
    className: cx('legend-weekday'),
    children: labels.map(function (item) {
      return /*#__PURE__*/_jsx("text", {
        dominantBaseline: "middle",
        textAnchor: "end",
        x: -labelMargin,
        y: item.y,
        children: item.label
      }, item.index);
    })
  });
};
WeekdayLabels.displayName = 'WeekdayLabels';
// Simple component - ChartLabels already memoized, so this doesn't need memo
var MonthLabels = function MonthLabels(_ref2) {
  var blockMargin = _ref2.blockMargin,
    blockSize = _ref2.blockSize,
    monthNames = _ref2.monthNames,
    weeks = _ref2.weeks;
  var labels = useMemo(function () {
    if (weeks.length === 0) return [];
    return getMonthLabels(weeks, monthNames);
  }, [weeks, monthNames]);
  var maxLength = useMemo(function () {
    return Math.floor((blockSize * 4 + blockMargin * 3) / 12);
  }, [blockSize, blockMargin]);
  if (labels.length === 0) return null;
  return /*#__PURE__*/_jsx("g", {
    className: cx('legend-month'),
    children: labels.map(function (_ref3) {
      var label = _ref3.label,
        weekIndex = _ref3.weekIndex;
      var truncatedLabel = label.length > maxLength ? label.slice(0, maxLength) + '...' : label;
      return /*#__PURE__*/_jsx("text", {
        dominantBaseline: "hanging",
        x: (blockSize + blockMargin) * weekIndex,
        children: truncatedLabel
      }, weekIndex);
    })
  });
};
MonthLabels.displayName = 'MonthLabels';
var ChartLabels = /*#__PURE__*/memo(function (_ref4) {
  var labels = _ref4.labels,
    blockSize = _ref4.blockSize,
    labelHeight = _ref4.labelHeight,
    blockMargin = _ref4.blockMargin,
    labelMargin = _ref4.labelMargin,
    showWeekdayLabels = _ref4.showWeekdayLabels,
    hideMonthLabels = _ref4.hideMonthLabels,
    weeks = _ref4.weeks,
    weekStart = _ref4.weekStart;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [showWeekdayLabels && weeks[0] && /*#__PURE__*/_jsx(WeekdayLabels, {
      blockMargin: blockMargin,
      blockSize: blockSize,
      firstWeek: weeks[0],
      labelHeight: labelHeight,
      labelMargin: labelMargin,
      weekStart: weekStart,
      weekdays: labels.weekdays
    }), !hideMonthLabels && /*#__PURE__*/_jsx(MonthLabels, {
      blockMargin: blockMargin,
      blockSize: blockSize,
      monthNames: labels.months,
      weeks: weeks
    })]
  });
}, isEqual);
ChartLabels.displayName = 'ChartLabels';
export default ChartLabels;