@lobehub/charts 1.0.0 → 1.2.0

package/README.md

@@ -156,6 +156,7 @@ Every bit counts and your one-time donation sparkles in our galaxy of support! Y
 
 - **recharts** - <https://github.com/recharts/recharts>
 - **tremor** - <https://github.com/tremorlabs/tremor>
+- **react-activity-calendar** - <https://github.com/grubersjoe/react-activity-calendar>
 
 <div align="right">
 

package/es/AreaChart/index.js

@@ -5,7 +5,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var _excluded = ["data", "categories", "index", "stack", "colors", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showAnimation", "animationDuration", "showTooltip", "showLegend", "showGridLines", "showGradient", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height"];
+var _excluded = ["data", "categories", "index", "stack", "colors", "valueFormatter", "startEndOnly", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showAnimation", "animationDuration", "showTooltip", "showLegend", "showGridLines", "showGradient", "autoMinValue", "curveType", "minValue", "maxValue", "connectNulls", "allowDecimals", "noDataText", "className", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "tickGap", "xAxisLabel", "yAxisLabel", "width", "height", "style"];
 import { css } from 'antd-style';
 import { Fragment, forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -83,6 +83,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
     height = _props$height === void 0 ? '20rem' : _props$height,
+    style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var paddingValue = !showXAxis && !showYAxis || startEndOnly && !showYAxis ? 0 : 20;
@@ -101,7 +102,7 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
   var categoryColors = constructCategoryColors(categories, colors);
   var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
   var hasOnValueChange = !!onValueChange;
-  function onDotClick(itemData, event) {
+  var onDotClick = function onDotClick(itemData, event) {
     event.stopPropagation();
     if (!hasOnValueChange) return;
     if (itemData.index === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.index) && itemData.dataKey === (activeDot === null || activeDot === void 0 ? void 0 : activeDot.dataKey) || hasOnlyOneValueForThisKey(data, itemData.dataKey) && activeLegend && activeLegend === itemData.dataKey) {
@@ -119,8 +120,8 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
         eventType: 'dot'
       }, itemData.payload));
     }
-  }
-  function onCategoryClick(dataKey) {
+  };
+  var onCategoryClick = function onCategoryClick(dataKey) {
     if (!hasOnValueChange) return;
     if (dataKey === activeLegend && !activeDot || hasOnlyOneValueForThisKey(data, dataKey) && activeDot && activeDot.dataKey === dataKey) {
       setActiveLegend(undefined);
@@ -133,11 +134,14 @@ var AreaChart = /*#__PURE__*/forwardRef(function (props, ref) {
       });
     }
     setActiveDot(undefined);
-  }
+  };
   return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: className,
     height: height,
     ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
     width: width
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(ResponsiveContainer, {

package/es/BarChart/index.js

@@ -5,7 +5,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["data", "categories", "index", "colors", "valueFormatter", "layout", "stack", "relative", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "minValue", "maxValue", "allowDecimals", "noDataText", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "barCategoryGap", "tickGap", "xAxisLabel", "yAxisLabel", "className", "width", "height"];
+var _excluded = ["data", "categories", "index", "colors", "valueFormatter", "layout", "stack", "relative", "startEndOnly", "animationDuration", "showAnimation", "showXAxis", "showYAxis", "yAxisWidth", "intervalType", "showTooltip", "showLegend", "showGridLines", "autoMinValue", "minValue", "maxValue", "allowDecimals", "noDataText", "onValueChange", "enableLegendSlider", "customTooltip", "rotateLabelX", "barCategoryGap", "tickGap", "xAxisLabel", "yAxisLabel", "className", "width", "height", "style"];
 import { css } from 'antd-style';
 import { forwardRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -83,6 +83,7 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
     height = _props$height === void 0 ? '20rem' : _props$height,
+    style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var paddingValue = !showXAxis && !showYAxis ? 0 : 20;
@@ -140,6 +141,9 @@ var BarChart = /*#__PURE__*/forwardRef(function (props, ref) {
     className: className,
     height: height,
     ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
     width: width
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(ResponsiveContainer, {

package/es/BarList/index.d.ts

@@ -0,0 +1,24 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+import { ValueFormatter } from "../types";
+export interface Bar {
+    [key: string]: any;
+    color?: string;
+    href?: string;
+    icon?: ReactNode;
+    key?: string;
+    name: ReactNode;
+    target?: string;
+    value: number;
+}
+export interface BarListProps extends HTMLAttributes<HTMLDivElement> {
+    color?: string;
+    data: Bar[];
+    leftLabel?: ReactNode;
+    onValueChange?: (payload: Bar) => void;
+    rightLabel?: ReactNode;
+    showAnimation?: boolean;
+    sortOrder?: 'ascending' | 'descending' | 'none';
+    valueFormatter?: ValueFormatter;
+}
+declare const BarList: React.ForwardRefExoticComponent<BarListProps & React.RefAttributes<HTMLDivElement>>;
+export default BarList;

package/es/BarList/index.js

@@ -0,0 +1,149 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["data", "color", "valueFormatter", "showAnimation", "onValueChange", "sortOrder", "className", "leftLabel", "rightLabel", "style"];
+import A from '@lobehub/ui/es/A';
+import React, { forwardRef, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { defaultValueFormatter } from "../utils";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var BarList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$color = props.color,
+    color = _props$color === void 0 ? themeColorRange[0] : _props$color,
+    _props$valueFormatter = props.valueFormatter,
+    valueFormatter = _props$valueFormatter === void 0 ? defaultValueFormatter : _props$valueFormatter,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    onValueChange = props.onValueChange,
+    _props$sortOrder = props.sortOrder,
+    sortOrder = _props$sortOrder === void 0 ? 'descending' : _props$sortOrder,
+    className = props.className,
+    leftLabel = props.leftLabel,
+    rightLabel = props.rightLabel,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var sortedData = useMemo(function () {
+    if (sortOrder === 'none') {
+      return data;
+    }
+    return _toConsumableArray(data).sort(function (a, b) {
+      return sortOrder === 'ascending' ? a.value - b.value : b.value - a.value;
+    });
+  }, [data, sortOrder]);
+  var widths = useMemo(function () {
+    var maxValue = Math.max.apply(Math, _toConsumableArray(sortedData.map(function (item) {
+      return item.value;
+    })).concat([0]));
+    return sortedData.map(function (item) {
+      return item.value === 0 ? 0 : Math.max(item.value / maxValue * 100, 2);
+    });
+  }, [sortedData]);
+  var rowHeight = 32;
+  var labelHeight = 20;
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    "aria-sort": sortOrder,
+    className: className,
+    gap: 24,
+    horizontal: true,
+    justify: 'space-between',
+    ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style)
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      flex: 1,
+      gap: 8,
+      style: {
+        position: 'relative'
+      },
+      children: [(leftLabel || rightLabel) && /*#__PURE__*/_jsx(Flexbox, {
+        className: cx(styles.label, styles.emphasis),
+        height: labelHeight,
+        width: "100%",
+        children: leftLabel
+      }), sortedData.map(function (item, index) {
+        var _item$key, _item$color;
+        return /*#__PURE__*/_jsxs(Flexbox, {
+          align: 'center',
+          className: styles.barContainer,
+          height: rowHeight,
+          horizontal: true,
+          onClick: function onClick() {
+            onValueChange === null || onValueChange === void 0 || onValueChange(item);
+          },
+          style: {
+            cursor: onValueChange ? 'pointer' : 'default',
+            width: "".concat(widths[index], "%")
+          },
+          width: '100%',
+          children: [/*#__PURE__*/_jsx("div", {
+            className: cx(styles.bar, onValueChange && styles.barHover),
+            style: {
+              background: (_item$color = item.color) !== null && _item$color !== void 0 ? _item$color : color,
+              transition: showAnimation ? undefined : 'none',
+              width: "".concat(widths[index], "%"),
+              zIndex: 0
+            }
+          }), /*#__PURE__*/_jsxs(Flexbox, {
+            align: 'center',
+            gap: 8,
+            horizontal: true,
+            paddingInline: 8,
+            style: {
+              zIndex: 1
+            },
+            children: [item.icon, item.href ? /*#__PURE__*/_jsx(A, {
+              className: cx(styles.sourceALabel, styles.emphasis),
+              href: item.href,
+              onClick: function onClick(event) {
+                return event.stopPropagation();
+              },
+              target: item.target,
+              children: item.name
+            }) : /*#__PURE__*/_jsx("div", {
+              className: cx(styles.sourceLabel, styles.emphasis),
+              children: item.name
+            })]
+          })]
+        }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : index);
+      })]
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      gap: 8,
+      children: [(leftLabel || rightLabel) && /*#__PURE__*/_jsx(Flexbox, {
+        className: cx(styles.label, styles.emphasis),
+        height: labelHeight,
+        style: {
+          textAlign: 'right'
+        },
+        width: "100%",
+        children: rightLabel
+      }), sortedData.map(function (item, index) {
+        var _item$key2;
+        return /*#__PURE__*/_jsx(Flexbox, {
+          align: 'center',
+          height: rowHeight,
+          horizontal: true,
+          justify: 'flex-end',
+          children: /*#__PURE__*/_jsx("div", {
+            className: cx(styles.strongLabel, styles.emphasis),
+            children: valueFormatter(item.value)
+          })
+        }, (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : index);
+      })]
+    })]
+  }));
+});
+BarList.displayName = 'BarList';
+export default BarList;

package/es/BarList/styles.d.ts

@@ -0,0 +1,10 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    bar: import("antd-style").SerializedStyles;
+    barContainer: import("antd-style").SerializedStyles;
+    barHover: import("antd-style").SerializedStyles;
+    emphasis: import("antd-style").SerializedStyles;
+    label: import("antd-style").SerializedStyles;
+    sourceALabel: import("antd-style").SerializedStyles;
+    sourceLabel: import("antd-style").SerializedStyles;
+    strongLabel: import("antd-style").SerializedStyles;
+}>;

package/es/BarList/styles.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    bar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n\n    max-width: 100%;\n    height: 100%;\n\n    opacity: 0.25;\n    border-radius: ", "px;\n\n    transition: all 0.25s ", ";\n  "])), token.borderRadius, token.motionEaseInOut),
+    barContainer: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n  "]))),
+    barHover: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    &:hover {\n      opacity: 0.4;\n    }\n  "]))),
+    emphasis: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
+    label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorTextDescription),
+    sourceALabel: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n  "])), token.colorText, token.colorLinkHover),
+    sourceLabel: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorText),
+    strongLabel: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorText)
+  };
+});

package/es/DonutChart/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import { CSSProperties, ComponentType } from 'react';
 import type BaseAnimationTimingProps from "../common/BaseAnimationTimingProps";
 import { CustomTooltipProps } from "../common/CustomTooltipProps";
 import { type NoDataProps } from "../common/NoData";
@@ -18,6 +18,7 @@ export interface DonutChartProps extends BaseAnimationTimingProps {
     showAnimation?: boolean;
     showLabel?: boolean;
     showTooltip?: boolean;
+    style?: CSSProperties;
     valueFormatter?: ValueFormatter;
     variant?: DonutChartVariant;
 }

package/es/DonutChart/index.js

@@ -6,7 +6,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _templateObject;
-var _excluded = ["data", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "height"];
+var _excluded = ["data", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "height", "style"];
 import { css } from 'antd-style';
 import { forwardRef, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -55,6 +55,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
     height = _props$height === void 0 ? '10rem' : _props$height,
+    style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
   var CustomTooltip = customTooltip;
   var isDonut = variant === 'donut';
@@ -64,7 +65,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
     activeIndex = _useState2[0],
     setActiveIndex = _useState2[1];
   var hasOnValueChange = !!onValueChange;
-  function onShapeClick(data, index, event) {
+  var onShapeClick = function onShapeClick(data, index, event) {
     event.stopPropagation();
     if (!hasOnValueChange) return;
     if (activeIndex === index) {
@@ -76,7 +77,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
         eventType: 'slice'
       }, data.payload.payload));
     }
-  }
+  };
   useEffect(function () {
     var pieSectors = document.querySelectorAll('.recharts-pie-sector');
     if (pieSectors) {
@@ -108,6 +109,9 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
     className: className,
     height: height,
     ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
     width: width
   }, rest), {}, {
     children: /*#__PURE__*/_jsx(ResponsiveContainer, {

package/es/Heatmaps/Calendar.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import type { Activity, Labels, Week } from "../types";
+interface CalendarProps {
+    blockMargin: number;
+    blockRadius: number;
+    blockSize: number;
+    colorScale: string[];
+    customTooltip?: (activity: Activity) => ReactNode;
+    enableAnimation: boolean;
+    labelHeight: number;
+    labels: Labels;
+    maxLevel: number;
+    onValueChange?: (value: Activity) => void;
+    showTooltip: boolean;
+    weeks: Week[];
+}
+declare const Calendar: import("react").NamedExoticComponent<CalendarProps>;
+export default Calendar;

package/es/Heatmaps/Calendar.js

@@ -0,0 +1,67 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { Tooltip } from '@lobehub/ui';
+import { keyframes } from 'antd-style';
+import { Fragment, memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Calendar = /*#__PURE__*/memo(function (_ref) {
+  var weeks = _ref.weeks,
+    maxLevel = _ref.maxLevel,
+    enableAnimation = _ref.enableAnimation,
+    colorScale = _ref.colorScale,
+    blockSize = _ref.blockSize,
+    blockRadius = _ref.blockRadius,
+    blockMargin = _ref.blockMargin,
+    labelHeight = _ref.labelHeight,
+    showTooltip = _ref.showTooltip,
+    customTooltip = _ref.customTooltip,
+    labels = _ref.labels,
+    onValueChange = _ref.onValueChange;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: weeks.map(function (week, weekIndex) {
+      return week.map(function (activity, dayIndex) {
+        if (!activity) {
+          return null;
+        }
+        if (activity.level < 0 || activity.level > maxLevel) {
+          throw new RangeError("Provided activity level ".concat(activity.level, " for ").concat(activity.date, " is out of range. It must be between 0 and ").concat(maxLevel, "."));
+        }
+        var style = enableAnimation ? {
+          animation: "".concat(keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                      0% {\n                        fill: var(--lobe-heatmaps-loading);\n                      }\n                      50% {\n                        fill: var(--lobe-heatmaps-loading-active);\n                      }\n                      100% {\n                        fill: var(--lobe-heatmaps-loading);\n                      }\n                    "]))), " 1.75s ease-in-out infinite"),
+          animationDelay: "".concat(weekIndex * 20 + dayIndex * 20, "ms")
+        } : undefined;
+        var block = /*#__PURE__*/_jsx("rect", {
+          "data-date": activity.date,
+          "data-level": activity.level,
+          fill: colorScale[activity.level],
+          height: blockSize,
+          onClick: function onClick() {
+            return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(activity);
+          },
+          rx: blockRadius,
+          ry: blockRadius,
+          style: _objectSpread({
+            cursor: onValueChange ? 'pointer' : undefined
+          }, style),
+          width: blockSize,
+          x: 0,
+          y: labelHeight + (blockSize + blockMargin) * dayIndex
+        });
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: showTooltip ? /*#__PURE__*/_jsx(Tooltip, {
+            title: customTooltip ? customTooltip(activity) : labels.tooltip ? labels.tooltip.replace('{{count}}', String(activity.count)).replace('{{date}}', String(activity.date)) : "".concat(activity.count, " activities on ").concat(activity.date),
+            children: block
+          }) : block
+        }, activity.date);
+      });
+    }).map(function (week, x) {
+      return /*#__PURE__*/_jsx("g", {
+        transform: "translate(".concat((blockSize + blockMargin) * x, ", 0)"),
+        children: week
+      }, x);
+    })
+  });
+});
+export default Calendar;

package/es/Heatmaps/ChartLabels.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { Labels, Week } from "../types";
+interface ChartLabelsProps {
+    blockMargin: number;
+    blockSize: number;
+    hideMonthLabels: boolean;
+    labelHeight: number;
+    labelMargin: number;
+    labels: Labels;
+    showWeekdayLabels: boolean;
+    weekStart: number;
+    weeks: Week[];
+}
+declare const ChartLabels: import("react").NamedExoticComponent<ChartLabelsProps>;
+export default ChartLabels;

package/es/Heatmaps/ChartLabels.js

@@ -0,0 +1,50 @@
+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;
+        return /*#__PURE__*/_jsx("text", {
+          dominantBaseline: "middle",
+          textAnchor: "end",
+          x: -labelMargin,
+          y: labelHeight + (blockSize + blockMargin) * index + blockSize / 2,
+          children: labels === null || labels === void 0 || (_labels$weekdays = labels.weekdays) === null || _labels$weekdays === void 0 ? void 0 : _labels$weekdays[dayIndex]
+        }, index);
+      })
+    }), !hideMonthLabels && /*#__PURE__*/_jsx("g", {
+      className: cx('legend-month'),
+      children: getMonthLabels(weeks, labels.months).map(function (_ref2) {
+        var label = _ref2.label,
+          weekIndex = _ref2.weekIndex;
+        return /*#__PURE__*/_jsx("text", {
+          dominantBaseline: "hanging",
+          x: (blockSize + blockMargin) * weekIndex,
+          children: label
+        }, weekIndex);
+      })
+    })]
+  });
+});
+export default ChartLabels;

package/es/Heatmaps/Footer.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+interface FooterProps {
+    blockRadius: number;
+    blockSize: number;
+    colorScale: string[];
+    hideColorLegend?: boolean;
+    hideTotalCount?: boolean;
+    labels: {
+        legend: {
+            less: string;
+            more: string;
+        };
+        totalCount?: string;
+    };
+    loading: boolean;
+    maxLevel: number;
+    totalCount: number;
+    weekdayLabelOffset?: number;
+    year: number;
+}
+declare const Footer: import("react").NamedExoticComponent<FooterProps>;
+export default Footer;

package/es/Heatmaps/Footer.js

@@ -0,0 +1,60 @@
+import { memo } from 'react';
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Footer = /*#__PURE__*/memo(function (_ref) {
+  var hideTotalCount = _ref.hideTotalCount,
+    hideColorLegend = _ref.hideColorLegend,
+    weekdayLabelOffset = _ref.weekdayLabelOffset,
+    loading = _ref.loading,
+    labels = _ref.labels,
+    year = _ref.year,
+    maxLevel = _ref.maxLevel,
+    blockSize = _ref.blockSize,
+    colorScale = _ref.colorScale,
+    blockRadius = _ref.blockRadius,
+    totalCount = _ref.totalCount;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsxs("footer", {
+    className: cx('footer', styles.footer),
+    style: {
+      marginLeft: weekdayLabelOffset
+    },
+    children: [loading && /*#__PURE__*/_jsx("div", {
+      children: "\xA0"
+    }), !loading && !hideTotalCount && /*#__PURE__*/_jsx("div", {
+      className: cx('count'),
+      children: labels.totalCount ? labels.totalCount.replace('{{count}}', String(totalCount)).replace('{{year}}', String(year)) : "".concat(totalCount, " activities in ").concat(year)
+    }), !loading && !hideColorLegend && /*#__PURE__*/_jsxs("div", {
+      className: cx('legend-colors', styles.legendColors),
+      children: [/*#__PURE__*/_jsx("span", {
+        style: {
+          marginRight: '0.4em'
+        },
+        children: labels.legend.less
+      }), Array.from({
+        length: maxLevel + 1
+      }).fill(null).map(function (_, level) {
+        return /*#__PURE__*/_jsx("svg", {
+          height: blockSize,
+          width: blockSize,
+          children: /*#__PURE__*/_jsx("rect", {
+            fill: colorScale[level],
+            height: blockSize,
+            rx: blockRadius,
+            ry: blockRadius,
+            width: blockSize
+          })
+        }, level);
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          marginLeft: '0.4em'
+        },
+        children: labels.legend.more
+      })]
+    })]
+  });
+});
+export default Footer;

package/es/Heatmaps/index.d.ts

@@ -0,0 +1,28 @@
+import type { Day as WeekDay } from 'date-fns';
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+import { NoDataProps } from "../common/NoData";
+import type { Activity, Labels } from "../types";
+export interface HeatmapsProps extends FlexboxProps {
+    blockMargin?: number;
+    blockRadius?: number;
+    blockSize?: number;
+    colors?: string[];
+    customTooltip?: (activity: Activity) => ReactNode;
+    data: Array<Activity>;
+    fontSize?: number;
+    hideColorLegend?: boolean;
+    hideMonthLabels?: boolean;
+    hideTotalCount?: boolean;
+    labels?: Labels;
+    loading?: boolean;
+    maxLevel?: number;
+    noDataText?: NoDataProps['noDataText'];
+    onValueChange?: (value: Activity) => void;
+    showTooltip?: boolean;
+    showWeekdayLabels?: boolean;
+    totalCount?: number;
+    weekStart?: WeekDay;
+}
+declare const Heatmaps: import("react").ForwardRefExoticComponent<HeatmapsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Heatmaps;