@chakra-ui/charts 3.19.2 → 3.20.0
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.
package/dist/cjs/chart/chart.cjs
CHANGED
|
@@ -150,6 +150,7 @@ function ChartTooltip(props) {
|
|
|
150
150
|
showTotal,
|
|
151
151
|
fitContent,
|
|
152
152
|
nameKey,
|
|
153
|
+
formatter,
|
|
153
154
|
render
|
|
154
155
|
} = props;
|
|
155
156
|
const chart = useChartContext();
|
|
@@ -179,6 +180,8 @@ function ChartTooltip(props) {
|
|
|
179
180
|
/* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: payload.map((item, index) => {
|
|
180
181
|
const config = chart.getSeries(item);
|
|
181
182
|
if (render) return render(item.payload);
|
|
183
|
+
const formatted = formatter ? formatter(item.value, config?.label || item.name) : item.value?.toLocaleString();
|
|
184
|
+
const [formattedValue, formattedName] = Array.isArray(formatted) ? formatted : [formatted, config?.label || item.name];
|
|
182
185
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
183
186
|
react.Flex,
|
|
184
187
|
{
|
|
@@ -197,14 +200,14 @@ function ChartTooltip(props) {
|
|
|
197
200
|
}
|
|
198
201
|
),
|
|
199
202
|
/* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { justify: "space-between", flex: "1", children: [
|
|
200
|
-
!hideSeriesLabel && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { color: "fg.muted", children:
|
|
203
|
+
!hideSeriesLabel && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { color: "fg.muted", children: formattedName }),
|
|
201
204
|
item.value && /* @__PURE__ */ jsxRuntime.jsx(
|
|
202
205
|
react.Text,
|
|
203
206
|
{
|
|
204
207
|
fontFamily: "mono",
|
|
205
208
|
fontWeight: "medium",
|
|
206
209
|
fontVariantNumeric: "tabular-nums",
|
|
207
|
-
children:
|
|
210
|
+
children: formattedValue
|
|
208
211
|
}
|
|
209
212
|
)
|
|
210
213
|
] })
|
|
@@ -223,7 +226,11 @@ function ChartTooltip(props) {
|
|
|
223
226
|
fontFamily: "mono",
|
|
224
227
|
fontWeight: "medium",
|
|
225
228
|
fontVariantNumeric: "tabular-nums",
|
|
226
|
-
children:
|
|
229
|
+
children: (() => {
|
|
230
|
+
if (!formatter) return total.toLocaleString();
|
|
231
|
+
const formatted = formatter(total, "");
|
|
232
|
+
return Array.isArray(formatted) ? formatted[0] : formatted;
|
|
233
|
+
})()
|
|
227
234
|
}
|
|
228
235
|
)
|
|
229
236
|
] })
|
package/dist/esm/chart/chart.js
CHANGED
|
@@ -148,6 +148,7 @@ function ChartTooltip(props) {
|
|
|
148
148
|
showTotal,
|
|
149
149
|
fitContent,
|
|
150
150
|
nameKey,
|
|
151
|
+
formatter,
|
|
151
152
|
render
|
|
152
153
|
} = props;
|
|
153
154
|
const chart = useChartContext();
|
|
@@ -177,6 +178,8 @@ function ChartTooltip(props) {
|
|
|
177
178
|
/* @__PURE__ */ jsx(Box, { children: payload.map((item, index) => {
|
|
178
179
|
const config = chart.getSeries(item);
|
|
179
180
|
if (render) return render(item.payload);
|
|
181
|
+
const formatted = formatter ? formatter(item.value, config?.label || item.name) : item.value?.toLocaleString();
|
|
182
|
+
const [formattedValue, formattedName] = Array.isArray(formatted) ? formatted : [formatted, config?.label || item.name];
|
|
180
183
|
return /* @__PURE__ */ jsxs(
|
|
181
184
|
Flex,
|
|
182
185
|
{
|
|
@@ -195,14 +198,14 @@ function ChartTooltip(props) {
|
|
|
195
198
|
}
|
|
196
199
|
),
|
|
197
200
|
/* @__PURE__ */ jsxs(HStack, { justify: "space-between", flex: "1", children: [
|
|
198
|
-
!hideSeriesLabel && /* @__PURE__ */ jsx(Span, { color: "fg.muted", children:
|
|
201
|
+
!hideSeriesLabel && /* @__PURE__ */ jsx(Span, { color: "fg.muted", children: formattedName }),
|
|
199
202
|
item.value && /* @__PURE__ */ jsx(
|
|
200
203
|
Text,
|
|
201
204
|
{
|
|
202
205
|
fontFamily: "mono",
|
|
203
206
|
fontWeight: "medium",
|
|
204
207
|
fontVariantNumeric: "tabular-nums",
|
|
205
|
-
children:
|
|
208
|
+
children: formattedValue
|
|
206
209
|
}
|
|
207
210
|
)
|
|
208
211
|
] })
|
|
@@ -221,7 +224,11 @@ function ChartTooltip(props) {
|
|
|
221
224
|
fontFamily: "mono",
|
|
222
225
|
fontWeight: "medium",
|
|
223
226
|
fontVariantNumeric: "tabular-nums",
|
|
224
|
-
children:
|
|
227
|
+
children: (() => {
|
|
228
|
+
if (!formatter) return total.toLocaleString();
|
|
229
|
+
const formatted = formatter(total, "");
|
|
230
|
+
return Array.isArray(formatted) ? formatted[0] : formatted;
|
|
231
|
+
})()
|
|
225
232
|
}
|
|
226
233
|
)
|
|
227
234
|
] })
|
|
@@ -32,6 +32,7 @@ export interface ChartTooltipProps extends TooltipProps<string, string> {
|
|
|
32
32
|
fitContent?: boolean;
|
|
33
33
|
nameKey?: string;
|
|
34
34
|
indicator?: "line" | "dot" | "dashed";
|
|
35
|
+
formatter?: (value: any, name: any) => React.ReactNode | [React.ReactNode, React.ReactNode];
|
|
35
36
|
render?: (item: Payload<string, string>) => React.ReactNode;
|
|
36
37
|
}
|
|
37
38
|
export declare function ChartTooltip(props: ChartTooltipProps): import("react/jsx-runtime").JSX.Element | null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chakra-ui/charts",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.20.0",
|
|
4
4
|
"description": "Data visualization components for Chakra UI",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/cjs/index.cjs",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"recharts": "2.15.3",
|
|
47
47
|
"react": "19.1.0",
|
|
48
48
|
"react-dom": "19.1.0",
|
|
49
|
-
"@chakra-ui/react": "3.
|
|
49
|
+
"@chakra-ui/react": "3.20.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"@chakra-ui/react": ">=3",
|