@lobehub/charts 1.6.0 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/es/AreaChart/styles.js +2 -2
  2. package/es/BarChart/styles.js +2 -2
  3. package/es/BarList/styles.js +1 -1
  4. package/es/DataBars/styles.js +1 -1
  5. package/es/DonutChart/index.d.ts +1 -0
  6. package/es/DonutChart/index.js +31 -6
  7. package/es/DonutChart/styles.js +1 -1
  8. package/es/Heatmaps/index.js +1 -1
  9. package/es/Legend/LegendItem.js +2 -2
  10. package/es/LineChart/styles.js +2 -2
  11. package/es/ScatterChart/styles.js +2 -2
  12. package/es/Tracker/styles.js +2 -2
  13. package/es/common/CustomYAxisTick.js +1 -1
  14. package/es/utils/getMaxLabelLength.js +1 -2
  15. package/package.json +1 -1
package/es/AreaChart/styles.js CHANGED
@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref) {
7
7
  return {
8
8
  emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
9
9
  gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n stroke: ", ";\n stroke-width: 1;\n "])), token.colorBorderSecondary),
10
- label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
11
- strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
10
+ label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
11
+ strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
12
12
  };
13
13
  });
package/es/BarChart/styles.js CHANGED
@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref) {
7
7
  return {
8
8
  emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
9
9
  gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n stroke: ", ";\n stroke-width: 1;\n "])), token.colorBorderSecondary),
10
- label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
11
- strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
10
+ label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
11
+ strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
12
12
  };
13
13
  });
package/es/BarList/styles.js CHANGED
@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref) {
9
9
  barContainer: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n "]))),
10
10
  barHover: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &:hover {\n opacity: 0.4;\n }\n "]))),
11
11
  emphasis: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
12
- label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n color: ", ";\n "])), token.colorTextDescription),
12
+ label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n color: ", ";\n "])), token.colorTextDescription),
13
13
  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),
14
14
  sourceLabel: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n color: ", ";\n "])), token.colorText),
15
15
  strongLabel: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n color: ", ";\n "])), token.colorText)
package/es/DataBars/styles.js CHANGED
@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref) {
6
6
  token = _ref.token;
7
7
  return {
8
8
  emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
9
- label: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
9
+ label: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
10
10
  marker: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 4px;\n border-radius: 4px;\n box-shadow: 0 0 0 3px ", ";\n "])), token.colorBgContainer),
11
11
  markerWrapper: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n right: 50%;\n width: 1.25rem;\n "]))),
12
12
  showAnimation: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n transition: all 0.25s ", ";\n "])), token.motionEaseInOut)
package/es/DonutChart/index.d.ts CHANGED
@@ -14,6 +14,7 @@ export interface DonutChartProps extends BaseAnimationTimingProps {
14
14
  };
15
15
  customTooltip?: ComponentType<CustomTooltipProps>;
16
16
  data: any[];
17
+ donutLabel?: string;
17
18
  index?: string;
18
19
  label?: string;
19
20
  noDataText?: NoDataProps['noDataText'];
package/es/DonutChart/index.js CHANGED
@@ -1,13 +1,14 @@
1
1
  'use client';
2
2
 
3
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
3
4
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
4
5
  import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
5
6
  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
6
7
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
7
8
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
8
9
  var _templateObject;
9
- var _excluded = ["data", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "height", "style", "customCategories"];
10
- import { css } from 'antd-style';
10
+ var _excluded = ["data", "category", "index", "colors", "variant", "valueFormatter", "label", "showLabel", "animationDuration", "showAnimation", "showTooltip", "noDataText", "onValueChange", "customTooltip", "className", "width", "height", "style", "customCategories", "donutLabel"];
11
+ import { css, useThemeMode } from 'antd-style';
11
12
  import { forwardRef, useEffect, useState } from 'react';
12
13
  import { Flexbox } from 'react-layout-kit';
13
14
  import { Pie, PieChart as ReChartsDonutChart, ResponsiveContainer, Tooltip } from 'recharts';
@@ -21,6 +22,7 @@ import { useStyles } from "./styles";
21
22
  import { jsx as _jsx } from "react/jsx-runtime";
22
23
  import { jsxs as _jsxs } from "react/jsx-runtime";
23
24
  var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
25
+ var _data;
24
26
  var _useStyles = useStyles(),
25
27
  cx = _useStyles.cx,
26
28
  theme = _useStyles.theme,
@@ -57,7 +59,10 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
57
59
  height = _props$height === void 0 ? '10rem' : _props$height,
58
60
  style = props.style,
59
61
  customCategories = props.customCategories,
62
+ donutLabel = props.donutLabel,
60
63
  rest = _objectWithoutProperties(props, _excluded);
64
+ var _useThemeMode = useThemeMode(),
65
+ isDarkMode = _useThemeMode.isDarkMode;
61
66
  var CustomTooltip = customTooltip;
62
67
  var isDonut = variant === 'donut';
63
68
  var parsedLabelInput = parseLabelInput(label, valueFormatter, data, category);
@@ -133,7 +138,7 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
133
138
  textAnchor: "middle",
134
139
  x: "50%",
135
140
  y: "50%",
136
- children: parsedLabelInput
141
+ children: donutLabel || typeof activeIndex === 'number' ? valueFormatter(data === null || data === void 0 || (_data = data[activeIndex]) === null || _data === void 0 ? void 0 : _data[category]) : parsedLabelInput
137
142
  }) : null, /*#__PURE__*/_jsx(Pie, {
138
143
  activeIndex: activeIndex,
139
144
  animationDuration: animationDuration,
@@ -156,11 +161,31 @@ var DonutChart = /*#__PURE__*/forwardRef(function (props, ref) {
156
161
  outline: 'none',
157
162
  stroke: theme.colorBgContainer
158
163
  }
164
+ }), isDonut && /*#__PURE__*/_jsx(Pie, {
165
+ activeIndex: activeIndex,
166
+ animationDuration: animationDuration,
167
+ cx: "50%",
168
+ cy: "50%",
169
+ data: parseData([_defineProperty({}, category, 1)], [isDarkMode ? 'rgba(0,0,0,.33)' : 'rgba(0,0,0,.1)']),
170
+ dataKey: category,
171
+ endAngle: -270,
172
+ inactiveShape: renderInactiveShape,
173
+ innerRadius: isDonut ? '75%' : '0%',
174
+ isAnimationActive: false,
175
+ nameKey: index,
176
+ outerRadius: "80%",
177
+ startAngle: 90,
178
+ stroke: "",
179
+ strokeLinejoin: "round",
180
+ style: {
181
+ outline: 'none',
182
+ pointerEvents: 'none'
183
+ }
159
184
  }), /*#__PURE__*/_jsx(Tooltip, {
160
- content: showTooltip ? function (_ref) {
185
+ content: showTooltip ? function (_ref2) {
161
186
  var _payload$;
162
- var active = _ref.active,
163
- payload = _ref.payload;
187
+ var active = _ref2.active,
188
+ payload = _ref2.payload;
164
189
  return CustomTooltip ? /*#__PURE__*/_jsx(CustomTooltip, {
165
190
  active: active,
166
191
  customCategories: customCategories,
package/es/DonutChart/styles.js CHANGED
@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref) {
7
7
  return {
8
8
  emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
9
9
  gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n stroke: ", ";\n stroke-width: 1;\n "])), token.colorBorderSecondary),
10
- label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
10
+ label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
11
11
  strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 16px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
12
12
  };
13
13
  });
package/es/Heatmaps/index.js CHANGED
@@ -30,7 +30,7 @@ var Heatmaps = /*#__PURE__*/forwardRef(function (props, ref) {
30
30
  blockSize = _props$blockSize === void 0 ? 12 : _props$blockSize,
31
31
  onValueChange = props.onValueChange,
32
32
  _props$fontSize = props.fontSize,
33
- fontSize = _props$fontSize === void 0 ? 14 : _props$fontSize,
33
+ fontSize = _props$fontSize === void 0 ? 12 : _props$fontSize,
34
34
  _props$hideColorLegen = props.hideColorLegend,
35
35
  hideColorLegend = _props$hideColorLegen === void 0 ? false : _props$hideColorLegen,
36
36
  _props$hideMonthLabel = props.hideMonthLabels,
package/es/Legend/LegendItem.js CHANGED
@@ -14,7 +14,7 @@ var useStyles = createStyles(function (_ref) {
14
14
  return {
15
15
  container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n\n color: ", ";\n white-space: nowrap;\n\n border-radius: ", "px;\n "])), token.colorTextDescription, token.borderRadius),
16
16
  hasOnValueChange: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n transition: all 0.25s ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n "])), token.motionEaseInOut, token.colorTextSecondary, token.colorFillTertiary),
17
- itemContent: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 14px;\n color: inherit;\n "])))
17
+ itemContent: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 12px;\n color: inherit;\n "])))
18
18
  };
19
19
  });
20
20
  var LegendItem = /*#__PURE__*/memo(function (_ref2) {
@@ -30,7 +30,7 @@ var LegendItem = /*#__PURE__*/memo(function (_ref2) {
30
30
  var hasOnValueChange = !!_onClick;
31
31
  return /*#__PURE__*/_jsxs(Flexbox, {
32
32
  className: cx(styles.container, hasOnValueChange && styles.hasOnValueChange),
33
- gap: 8,
33
+ gap: 6,
34
34
  horizontal: true,
35
35
  onClick: function onClick(e) {
36
36
  e.stopPropagation();
package/es/LineChart/styles.js CHANGED
@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref) {
7
7
  return {
8
8
  emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
9
9
  gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n stroke: ", ";\n stroke-width: 1;\n "])), token.colorBorderSecondary),
10
- label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
11
- strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
10
+ label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
11
+ strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
12
12
  };
13
13
  });
package/es/ScatterChart/styles.js CHANGED
@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref) {
7
7
  return {
8
8
  emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
9
9
  gridLines: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n stroke: ", ";\n stroke-width: 1;\n "])), token.colorBorderSecondary),
10
- label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
11
- strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
10
+ label: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextDescription),
11
+ strongLabel: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
12
12
  };
13
13
  });
package/es/Tracker/styles.js CHANGED
@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref) {
6
6
  token = _ref.token;
7
7
  return {
8
8
  emphasis: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n "]))),
9
- label: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n color: ", ";\n "])), token.colorTextDescription),
10
- strongLabel: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
9
+ label: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 12px;\n line-height: 16px;\n color: ", ";\n "])), token.colorTextDescription),
10
+ strongLabel: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n fill: ", ";\n "])), token.colorTextSecondary)
11
11
  };
12
12
  });
package/es/common/CustomYAxisTick.js CHANGED
@@ -15,7 +15,7 @@ var CustomYAxisTick = /*#__PURE__*/memo(function (_ref) {
15
15
  children: /*#__PURE__*/_jsx("text", {
16
16
  dy: 4,
17
17
  fill: theme.colorTextDescription,
18
- fontSize: 14,
18
+ fontSize: 12,
19
19
  textAnchor: align === 'left' ? 'start' : 'end',
20
20
  x: 0,
21
21
  y: 0,
package/es/utils/getMaxLabelLength.js CHANGED
@@ -5,7 +5,7 @@ export var getTextWidth = function getTextWidth(text) {
5
5
  var span = document.createElement('span');
6
6
 
7
7
  // 设置样式使其不可见
8
- span.style.fontSize = '14px';
8
+ span.style.fontSize = '12px';
9
9
  span.style.position = 'absolute';
10
10
  span.style.visibility = 'hidden';
11
11
  span.style.whiteSpace = 'nowrap';
@@ -102,6 +102,5 @@ export var getMaxLabelLength = function getMaxLabelLength(_ref) {
102
102
  _iterator3.f();
103
103
  }
104
104
  }
105
- console.log(maxLabel);
106
105
  return getTextWidth(maxLabel) + margin;
107
106
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/charts",
3
- "version": "1.6.0",
3
+ "version": "1.6.2",
4
4
  "description": "React modern charts components built on recharts",
5
5
  "keywords": [
6
6
  "lobehub",