@lobehub/charts 1.0.0 → 1.2.0

package/es/SparkChart/SparkLineChart.js

@@ -0,0 +1,102 @@
+'use client';
+
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _templateObject;
+var _excluded = ["data", "categories", "index", "colors", "animationDuration", "showAnimation", "curveType", "connectNulls", "noDataText", "autoMinValue", "minValue", "maxValue", "className", "width", "height", "style"];
+import { css } from 'antd-style';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { Line, LineChart as ReChartsLineChart, ResponsiveContainer, XAxis, YAxis } from 'recharts';
+import { useStyles } from "../LineChart/styles";
+import NoData from "../common/NoData";
+import { constructCategoryColors, getYAxisDomain } from "../common/utils";
+import { useThemeColorRange } from "../hooks/useThemeColorRange";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SparkLineChart = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
+  var themeColorRange = useThemeColorRange();
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    _props$categories = props.categories,
+    categories = _props$categories === void 0 ? [] : _props$categories,
+    index = props.index,
+    _props$colors = props.colors,
+    colors = _props$colors === void 0 ? themeColorRange : _props$colors,
+    _props$animationDurat = props.animationDuration,
+    animationDuration = _props$animationDurat === void 0 ? 900 : _props$animationDurat,
+    _props$showAnimation = props.showAnimation,
+    showAnimation = _props$showAnimation === void 0 ? false : _props$showAnimation,
+    _props$curveType = props.curveType,
+    curveType = _props$curveType === void 0 ? 'linear' : _props$curveType,
+    _props$connectNulls = props.connectNulls,
+    connectNulls = _props$connectNulls === void 0 ? false : _props$connectNulls,
+    _props$noDataText = props.noDataText,
+    noDataText = _props$noDataText === void 0 ? /*#__PURE__*/_jsx("div", {}) : _props$noDataText,
+    _props$autoMinValue = props.autoMinValue,
+    autoMinValue = _props$autoMinValue === void 0 ? false : _props$autoMinValue,
+    minValue = props.minValue,
+    maxValue = props.maxValue,
+    className = props.className,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 112 : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 48 : _props$height,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var categoryColors = constructCategoryColors(categories, colors);
+  var yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    height: height,
+    ref: ref,
+    style: _objectSpread({
+      position: 'relative'
+    }, style),
+    width: width
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsx(ResponsiveContainer, {
+      children: data !== null && data !== void 0 && data.length ? /*#__PURE__*/_jsxs(ReChartsLineChart, {
+        data: data,
+        margin: {
+          bottom: 1,
+          left: 1,
+          right: 1,
+          top: 1
+        },
+        children: [/*#__PURE__*/_jsx(YAxis, {
+          domain: yAxisDomain,
+          hide: true
+        }), /*#__PURE__*/_jsx(XAxis, {
+          dataKey: index,
+          hide: true
+        }), categories.map(function (category) {
+          var _categoryColors$get;
+          return /*#__PURE__*/_jsx(Line, {
+            animationDuration: animationDuration,
+            className: cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                  stroke: ", ";\n                "])), (_categoryColors$get = categoryColors.get(category)) !== null && _categoryColors$get !== void 0 ? _categoryColors$get : theme.colorPrimary)),
+            connectNulls: connectNulls,
+            dataKey: category,
+            dot: false,
+            isAnimationActive: showAnimation,
+            name: category,
+            stroke: "",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeOpacity: 1,
+            strokeWidth: 2,
+            type: curveType
+          }, category);
+        })]
+      }) : /*#__PURE__*/_jsx(NoData, {
+        noDataText: noDataText
+      })
+    })
+  }));
+});
+SparkLineChart.displayName = 'SparkLineChart';
+export default SparkLineChart;

package/es/SparkChart/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SparkAreaChart, type SparkAreaChartProps } from './SparkAreaChart';
+export { default as SparkBarChart, type SparkBarChartProps } from './SparkBarChart';
+export { default as SparkLineChart, type SparkLineChartProps } from './SparkLineChart';

package/es/SparkChart/index.js

@@ -0,0 +1,3 @@
+export { default as SparkAreaChart } from "./SparkAreaChart";
+export { default as SparkBarChart } from "./SparkBarChart";
+export { default as SparkLineChart } from "./SparkLineChart";

package/es/Tracker/TrackerBlock.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface TrackerBlockProps {
+    color?: 'success' | 'warning' | 'error' | string;
+    key?: string | number;
+    tooltip?: ReactNode;
+}
+declare const TrackerBlock: import("react").ForwardRefExoticComponent<TrackerBlockProps & import("react-layout-kit/lib/FlexBasic").FlexBasicProps & import("react-layout-kit").CommonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TrackerBlock;

package/es/Tracker/TrackerBlock.js

@@ -0,0 +1,62 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["color", "tooltip", "width", "style"];
+var _templateObject;
+import { Tooltip } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { forwardRef, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\n\n    &:first-child {\n      border-top-left-radius: ", "px;\n      border-bottom-left-radius: ", "px;\n    }\n\n    &:last-child {\n      border-top-right-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n    }\n\n    &:hover {\n      opacity: 0.5;\n    }\n  "])), token.colorFill, token.borderRadiusSM, token.borderRadiusSM, token.borderRadiusSM, token.borderRadiusSM)
+  };
+});
+var TrackerBlock = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var color = _ref2.color,
+    tooltip = _ref2.tooltip,
+    width = _ref2.width,
+    style = _ref2.style,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  var blockColor = useMemo(function () {
+    switch (color) {
+      case 'success':
+        {
+          return theme.colorSuccess;
+        }
+      case 'warning':
+        {
+          return theme.colorWarning;
+        }
+      case 'error':
+        {
+          return theme.colorError;
+        }
+      default:
+        {
+          return color;
+        }
+    }
+  }, [color]);
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: tooltip,
+    children: /*#__PURE__*/_jsx(Flexbox, _objectSpread({
+      className: styles.block,
+      height: '100%',
+      ref: ref,
+      style: _objectSpread({
+        background: blockColor
+      }, style),
+      width: width || '100%'
+    }, rest))
+  });
+});
+export default TrackerBlock;

package/es/Tracker/index.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+import { TrackerBlockProps } from './TrackerBlock';
+interface DataItem extends TrackerBlockProps {
+    [key: string]: any;
+}
+export interface TrackerProps extends FlexboxProps {
+    blockGap?: number | string;
+    blockHeight?: number | string;
+    blockWidth?: number | string;
+    customTooltip?: (payload: DataItem) => ReactNode;
+    data: DataItem[];
+    leftLabel?: ReactNode;
+    onValueChange?: (payload: DataItem) => void;
+    rightLabel?: ReactNode;
+}
+declare const Tracker: import("react").ForwardRefExoticComponent<TrackerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tracker;

package/es/Tracker/index.js

@@ -0,0 +1,98 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["data", "className", "height", "width", "blockWidth", "blockHeight", "blockGap", "customTooltip", "onValueChange", "leftLabel", "rightLabel", "style"];
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import TrackerBlock from "./TrackerBlock";
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Tracker = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    className = props.className,
+    height = props.height,
+    _props$width = props.width,
+    width = _props$width === void 0 ? 'fit-content' : _props$width,
+    _props$blockWidth = props.blockWidth,
+    blockWidth = _props$blockWidth === void 0 ? 12 : _props$blockWidth,
+    _props$blockHeight = props.blockHeight,
+    blockHeight = _props$blockHeight === void 0 ? 40 : _props$blockHeight,
+    _props$blockGap = props.blockGap,
+    blockGap = _props$blockGap === void 0 ? 4 : _props$blockGap,
+    customTooltip = props.customTooltip,
+    onValueChange = props.onValueChange,
+    leftLabel = props.leftLabel,
+    rightLabel = props.rightLabel,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var content = data.map(function (item, idx) {
+    var _item$key;
+    return /*#__PURE__*/_jsx(TrackerBlock, {
+      color: item.color,
+      height: blockHeight,
+      onClick: function onClick() {
+        return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(item);
+      },
+      style: {
+        cursor: onValueChange ? 'pointer' : 'default'
+      },
+      tooltip: customTooltip ? customTooltip(item) : item.tooltip,
+      width: blockWidth
+    }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : idx);
+  });
+  if (leftLabel || rightLabel) {
+    return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+      className: className,
+      gap: 8,
+      height: height,
+      ref: ref,
+      style: _objectSpread({
+        position: 'relative'
+      }, style),
+      width: width
+    }, rest), {}, {
+      children: [/*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        horizontal: true,
+        justify: 'space-between',
+        width: '100%',
+        children: [/*#__PURE__*/_jsx("div", {
+          className: cx(styles.strongLabel, styles.emphasis),
+          children: leftLabel
+        }), /*#__PURE__*/_jsx("div", {
+          className: cx(styles.label, styles.emphasis),
+          style: {
+            textAlign: 'right'
+          },
+          children: rightLabel
+        })]
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        gap: blockGap,
+        height: blockHeight,
+        horizontal: true,
+        width: '100%',
+        children: content
+      })]
+    }));
+  }
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    className: className,
+    gap: blockGap,
+    height: height || blockHeight,
+    horizontal: true,
+    ref: ref,
+    width: width
+  }, rest), {}, {
+    children: content
+  }));
+});
+Tracker.displayName = 'Tracker';
+export default Tracker;

package/es/Tracker/styles.d.ts

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

package/es/Tracker/styles.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
+    label: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 16px;\n    color: ", ";\n  "])), token.colorTextDescription),
+    strongLabel: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 16px;\n    fill: ", ";\n  "])), token.colorTextSecondary)
+  };
+});

package/es/common/BaseSparkChartProps.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import BaseAnimationTimingProps from './BaseAnimationTimingProps';
+interface BaseSparkChartProps extends BaseAnimationTimingProps, HTMLAttributes<HTMLDivElement> {
+    autoMinValue?: boolean;
+    categories: string[];
+    colors?: string[];
+    data: any[];
+    index: string;
+    maxValue?: number;
+    minValue?: number;
+    noDataText?: string;
+}
+export default BaseSparkChartProps;

package/es/common/BaseSparkChartProps.js

@@ -0,0 +1 @@
+export {};

package/es/common/utils.d.ts

@@ -1,5 +1,5 @@
 export declare const constructCategoryColors: (categories: string[], colors: string[]) => Map<string, string>;
 export declare const getYAxisDomain: (autoMinValue: boolean, minValue: number | undefined, maxValue: number | undefined) => (string | number)[];
 export declare const constructCategories: (data: any[], color?: string) => string[];
-export declare function deepEqual(obj1: any, obj2: any): boolean;
-export declare function hasOnlyOneValueForThisKey(array: any[], keyToCheck: string): boolean;
+export declare const deepEqual: (obj1: any, obj2: any) => boolean;
+export declare const hasOnlyOneValueForThisKey: (array: any[], keyToCheck: string) => boolean;

package/es/common/utils.js

@@ -42,7 +42,7 @@ export var constructCategories = function constructCategories(data, color) {
   }
   return _toConsumableArray(categories);
 };
-export function deepEqual(obj1, obj2) {
+export var deepEqual = function deepEqual(obj1, obj2) {
   if (obj1 === obj2) return true;
   if (_typeof(obj1) !== 'object' || _typeof(obj2) !== 'object' || obj1 === null || obj2 === null) return false;
   var keys1 = Object.keys(obj1);
@@ -53,8 +53,8 @@ export function deepEqual(obj1, obj2) {
     if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) return false;
   }
   return true;
-}
-export function hasOnlyOneValueForThisKey(array, keyToCheck) {
+};
+export var hasOnlyOneValueForThisKey = function hasOnlyOneValueForThisKey(array, keyToCheck) {
   var val = [];
   var _iterator3 = _createForOfIteratorHelper(array),
     _step3;
@@ -74,4 +74,4 @@ export function hasOnlyOneValueForThisKey(array, keyToCheck) {
     _iterator3.f();
   }
   return true;
-}
+};

package/es/hooks/useOnWindowResize.js

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
+import { isOnSeverSide } from "../utils";
 export var useOnWindowResize = function useOnWindowResize(handler) {
   useEffect(function () {
-    if (window === undefined) return;
+    if (isOnSeverSide) return;
     var handleResize = function handleResize() {
       handler();
     };

package/es/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare const usePrefersReducedMotion: () => boolean;

package/es/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+import { isOnSeverSide } from "../utils";
+var query = '(prefers-reduced-motion: reduce)';
+export var usePrefersReducedMotion = function usePrefersReducedMotion() {
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    prefersReducedMotion = _useState2[0],
+    setPrefersReducedMotion = _useState2[1];
+  useEffect(function () {
+    if (isOnSeverSide) return;
+    var mediaQuery = window.matchMedia(query);
+    setPrefersReducedMotion(mediaQuery.matches);
+    var onChange = function onChange(event) {
+      setPrefersReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener('change', onChange);
+    return function () {
+      mediaQuery.removeEventListener('change', onChange);
+    };
+  }, []);
+  return prefersReducedMotion;
+};

package/es/index.d.ts

@@ -1,8 +1,12 @@
 export { default as AreaChart, type AreaChartProps } from './AreaChart';
 export { default as BarChart, type BarChartProps } from './BarChart';
+export { type Bar, default as BarList, type BarListProps } from './BarList';
 export { default as ChartTooltipFrame } from './common/ChartTooltip/ChartTooltipFrame';
 export { default as Legend, type LegendProps } from './components/Legend';
 export { default as DonutChart, type DonutChartProps } from './DonutChart';
+export { default as Heatmaps, type HeatmapsProps } from './Heatmaps';
 export { default as LineChart, type LineChartProps } from './LineChart';
 export { default as ScatterChart, type ScatterChartProps } from './ScatterChart';
+export * from './SparkChart';
+export { default as Tracker, type TrackerProps } from './Tracker';
 export type * from './types';

package/es/index.js

@@ -1,7 +1,11 @@
 export { default as AreaChart } from "./AreaChart";
 export { default as BarChart } from "./BarChart";
+export { default as BarList } from "./BarList";
 export { default as ChartTooltipFrame } from "./common/ChartTooltip/ChartTooltipFrame";
 export { default as Legend } from "./components/Legend";
 export { default as DonutChart } from "./DonutChart";
+export { default as Heatmaps } from "./Heatmaps";
 export { default as LineChart } from "./LineChart";
-export { default as ScatterChart } from "./ScatterChart";
+export { default as ScatterChart } from "./ScatterChart";
+export * from "./SparkChart";
+export { default as Tracker } from "./Tracker";

package/es/types.d.ts

@@ -1,3 +1,28 @@
+import type { AnimationEvent, ClipboardEvent, CompositionEvent, DOMAttributes, DragEvent, FocusEvent, FormEvent, HTMLAttributes, JSXElementConstructor, KeyboardEvent, MouseEvent, PointerEvent, ReactElement, SVGAttributes, SyntheticEvent, TouchEvent, TransitionEvent, UIEvent, WheelEvent } from 'react';
+export interface Activity {
+    count: number;
+    date: string;
+    level: number;
+}
+export type Week = Array<Activity | undefined>;
+export type Labels = Partial<{
+    legend: Partial<{
+        less: string;
+        more: string;
+    }>;
+    months: Array<string>;
+    tooltip: string;
+    totalCount: string;
+    weekdays: Array<string>;
+}>;
+interface BlockAttributes extends SVGAttributes<SVGRectElement>, HTMLAttributes<SVGRectElement> {
+}
+export type BlockElement = ReactElement<BlockAttributes, JSXElementConstructor<SVGRectElement>>;
+export type SVGRectEventHandler = Omit<DOMAttributes<SVGRectElement>, 'css' | 'children' | 'dangerouslySetInnerHTML'>;
+export type EventHandlerMap = {
+    [key in keyof SVGRectEventHandler]: (...event: Parameters<NonNullable<SVGRectEventHandler[keyof SVGRectEventHandler]>>) => (activity: Activity) => void;
+};
+export type ReactEvent<E extends Element> = AnimationEvent<E> & ClipboardEvent<E> & CompositionEvent<E> & DragEvent<E> & FocusEvent<E> & FormEvent<E> & KeyboardEvent<E> & MouseEvent<E> & PointerEvent<E> & SyntheticEvent<E> & TouchEvent<E> & TransitionEvent<E> & UIEvent<E> & WheelEvent<E>;
 type FixedProps = {
     categoryClicked: string;
     eventType: 'dot' | 'category' | 'bar' | 'slice' | 'bubble';

package/es/utils/calendar.d.ts

@@ -0,0 +1,29 @@
+import type { Day as WeekDay } from 'date-fns';
+import type { Activity, Week } from "../types";
+export declare const DEFAULT_MONTH_LABELS: string[];
+export declare const DEFAULT_LABELS: {
+    legend: {
+        less: string;
+        more: string;
+    };
+    months: string[];
+    tooltip: string;
+    totalCount: string;
+    weekdays: string[];
+};
+interface MonthLabel {
+    label: string;
+    weekIndex: number;
+}
+export declare const groupByWeeks: (activities: Array<Activity>, weekStart?: WeekDay) => Array<Week>;
+export declare const getMonthLabels: (weeks: Array<Week>, monthNames?: Array<string>) => Array<MonthLabel>;
+export declare const generateEmptyData: () => Array<Activity>;
+export declare const generateTestData: (args: {
+    interval?: {
+        end: Date;
+        start: Date;
+    } | undefined;
+    maxLevel?: number | undefined;
+}) => Array<Activity>;
+export declare const maxWeekdayLabelLength: (firstWeek: Week, weekStart: number, labels: string[], fontSize: number) => number;
+export {};