@wavv/ui 2.2.2-alpha.6 → 2.2.2-alpha.7
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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useTheme } from "@emotion/react";
|
|
3
3
|
import styled from "@emotion/styled";
|
|
4
|
-
import millify from "millify";
|
|
5
4
|
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, XAxis, YAxis } from "recharts";
|
|
5
|
+
import { formatNumber } from "../utils/formatNumber.js";
|
|
6
6
|
import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
|
|
7
7
|
const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize = 16, maxBarSize, vertical = false, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength = 10, xAxisHeight = 22, yAxisWidth = 45, axisColor, tooltipLegendPostfix, ...rest })=>{
|
|
8
8
|
const { scale2 } = useTheme();
|
|
@@ -41,7 +41,7 @@ const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap
|
|
|
41
41
|
/*#__PURE__*/ jsx(XAxis, {
|
|
42
42
|
stroke: axisColor || scale2,
|
|
43
43
|
tickMargin: 4,
|
|
44
|
-
tickFormatter: (value)=>vertical ?
|
|
44
|
+
tickFormatter: (value)=>vertical ? formatNumber(value) : value,
|
|
45
45
|
tick: hideXLabels ? false : xAxisTick,
|
|
46
46
|
height: hideXLabels ? 12 : xAxisHeight,
|
|
47
47
|
interval: diagonalXLabels ? 0 : void 0,
|
|
@@ -51,7 +51,7 @@ const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap
|
|
|
51
51
|
/*#__PURE__*/ jsx(YAxis, {
|
|
52
52
|
stroke: axisColor || scale2,
|
|
53
53
|
tickMargin: 4,
|
|
54
|
-
tickFormatter: (value)=>vertical ? value :
|
|
54
|
+
tickFormatter: (value)=>vertical ? value : formatNumber(value),
|
|
55
55
|
tick: hideYLabels ? false : {},
|
|
56
56
|
width: hideYLabels ? 5 : yAxisWidth,
|
|
57
57
|
dataKey: vertical ? 'name' : void 0,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useTheme } from "@emotion/react";
|
|
3
|
-
import millify from "millify";
|
|
4
3
|
import { useState } from "react";
|
|
5
4
|
import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
|
|
5
|
+
import { formatNumber } from "../utils/formatNumber.js";
|
|
6
6
|
import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
|
|
7
7
|
const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, ...rest })=>{
|
|
8
8
|
const [lines, setLines] = useState(keys);
|
|
@@ -48,7 +48,7 @@ const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor
|
|
|
48
48
|
/*#__PURE__*/ jsx(YAxis, {
|
|
49
49
|
stroke: axisColor || scale2,
|
|
50
50
|
tickMargin: 4,
|
|
51
|
-
tickFormatter: (value)=>
|
|
51
|
+
tickFormatter: (value)=>formatNumber(value)
|
|
52
52
|
}),
|
|
53
53
|
Tooltip({
|
|
54
54
|
legendPostfix: tooltipLegendPostfix
|
package/build/index.d.ts
CHANGED
|
@@ -85,5 +85,6 @@ export { default as useCopy } from './hooks/useCopy';
|
|
|
85
85
|
export { marginProps, paddingProps, positionProps, widthHeightProps } from './components/helpers/styledProps';
|
|
86
86
|
export { default as copyToClipboard } from './utils/copyToClipboard';
|
|
87
87
|
export { default as formatDate } from './utils/formatDate';
|
|
88
|
+
export { default as formatNumber } from './utils/formatNumber';
|
|
88
89
|
export { default as numberWithCommas } from './utils/numberWithCommas';
|
|
89
90
|
export { createEditorContent, editorContentToText } from './components/Editor';
|
package/build/index.js
CHANGED
|
@@ -75,5 +75,6 @@ import useCopy from "./hooks/useCopy.js";
|
|
|
75
75
|
import { marginProps, paddingProps, positionProps, widthHeightProps } from "./components/helpers/styledProps.js";
|
|
76
76
|
import copyToClipboard from "./utils/copyToClipboard.js";
|
|
77
77
|
import formatDate from "./utils/formatDate.js";
|
|
78
|
+
import formatNumber from "./utils/formatNumber.js";
|
|
78
79
|
import numberWithCommas from "./utils/numberWithCommas.js";
|
|
79
|
-
export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };
|
|
80
|
+
export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Formats a number with thousand separators and unit suffixes (K, M, B, T)
|
|
3
|
+
* @param value - The number to format
|
|
4
|
+
* @param decimals - Number of decimal places (default: 1)
|
|
5
|
+
* @returns Formatted number string (e.g., "1.2K", "500M")
|
|
6
|
+
*/
|
|
7
|
+
export declare const formatNumber: (value: number, decimals?: number) => string;
|
|
8
|
+
export default formatNumber;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
const formatNumber_formatNumber = (value, decimals = 1)=>{
|
|
2
|
+
if (0 === value) return '0';
|
|
3
|
+
if (!Number.isFinite(value)) return String(value);
|
|
4
|
+
const absValue = Math.abs(value);
|
|
5
|
+
const sign = value < 0 ? '-' : '';
|
|
6
|
+
const units = [
|
|
7
|
+
{
|
|
8
|
+
threshold: 1e12,
|
|
9
|
+
suffix: 'T'
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
threshold: 1e9,
|
|
13
|
+
suffix: 'B'
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
threshold: 1e6,
|
|
17
|
+
suffix: 'M'
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
threshold: 1e3,
|
|
21
|
+
suffix: 'K'
|
|
22
|
+
}
|
|
23
|
+
];
|
|
24
|
+
for (const unit of units)if (absValue >= unit.threshold) {
|
|
25
|
+
const formatted = (absValue / unit.threshold).toFixed(decimals);
|
|
26
|
+
const trimmed = formatted.replace(/\.?0+$/, '');
|
|
27
|
+
return `${sign}${trimmed}${unit.suffix}`;
|
|
28
|
+
}
|
|
29
|
+
return String(value);
|
|
30
|
+
};
|
|
31
|
+
const formatNumber = formatNumber_formatNumber;
|
|
32
|
+
export { formatNumber as default, formatNumber_formatNumber as formatNumber };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wavv/ui",
|
|
3
|
-
"version": "2.2.2-alpha.
|
|
3
|
+
"version": "2.2.2-alpha.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -31,23 +31,22 @@
|
|
|
31
31
|
"@emotion/styled": "^11.14.1",
|
|
32
32
|
"@internationalized/date": "3.10.0",
|
|
33
33
|
"@react-hook/resize-observer": "^2.0.2",
|
|
34
|
-
"@tiptap/core": "^3.
|
|
35
|
-
"@tiptap/extension-character-count": "^3.
|
|
36
|
-
"@tiptap/extension-highlight": "^3.
|
|
37
|
-
"@tiptap/extension-placeholder": "^3.
|
|
38
|
-
"@tiptap/extension-task-item": "^3.
|
|
39
|
-
"@tiptap/extension-task-list": "^3.
|
|
40
|
-
"@tiptap/markdown": "^3.
|
|
41
|
-
"@tiptap/pm": "^3.
|
|
42
|
-
"@tiptap/react": "^3.
|
|
43
|
-
"@tiptap/starter-kit": "^3.
|
|
34
|
+
"@tiptap/core": "^3.9.1",
|
|
35
|
+
"@tiptap/extension-character-count": "^3.9.1",
|
|
36
|
+
"@tiptap/extension-highlight": "^3.9.1",
|
|
37
|
+
"@tiptap/extension-placeholder": "^3.9.1",
|
|
38
|
+
"@tiptap/extension-task-item": "^3.9.1",
|
|
39
|
+
"@tiptap/extension-task-list": "^3.9.1",
|
|
40
|
+
"@tiptap/markdown": "^3.9.1",
|
|
41
|
+
"@tiptap/pm": "^3.9.1",
|
|
42
|
+
"@tiptap/react": "^3.9.1",
|
|
43
|
+
"@tiptap/starter-kit": "^3.9.1",
|
|
44
44
|
"cmdk": "^1.1.1",
|
|
45
45
|
"date-fns": "^4.1.0",
|
|
46
46
|
"draft-js": "^0.11.7",
|
|
47
47
|
"es-toolkit": "^1.41.0",
|
|
48
48
|
"libphonenumber-js": "^1.12.25",
|
|
49
49
|
"lucide-react": "^0.548.0",
|
|
50
|
-
"millify": "^6.1.0",
|
|
51
50
|
"polished": "^4.1.4",
|
|
52
51
|
"prism-react-renderer": "^2.4.1",
|
|
53
52
|
"react-aria": "3.44.0",
|
|
@@ -62,7 +61,7 @@
|
|
|
62
61
|
"@babel/core": "^7.28.5",
|
|
63
62
|
"@babel/preset-env": "^7.28.5",
|
|
64
63
|
"@babel/preset-typescript": "^7.28.5",
|
|
65
|
-
"@biomejs/biome": "2.3.
|
|
64
|
+
"@biomejs/biome": "2.3.2",
|
|
66
65
|
"@chromatic-com/storybook": "^4.1.1",
|
|
67
66
|
"@emotion/babel-plugin": "^11.13.5",
|
|
68
67
|
"@emotion/react": "^11.14.0",
|
|
@@ -87,7 +86,7 @@
|
|
|
87
86
|
"@types/draft-js": "^0.11.18",
|
|
88
87
|
"@types/jest": "^30.0.0",
|
|
89
88
|
"@types/ncp": "^2.0.8",
|
|
90
|
-
"@types/node": "^24.9.
|
|
89
|
+
"@types/node": "^24.9.2",
|
|
91
90
|
"@types/prompts": "^2.4.9",
|
|
92
91
|
"@types/randomcolor": "^0.5.9",
|
|
93
92
|
"@types/react": "^19.2.2",
|
|
@@ -99,7 +98,7 @@
|
|
|
99
98
|
"change-case": "^5.4.4",
|
|
100
99
|
"chromatic": "^13.3.2",
|
|
101
100
|
"jest": "^30.2.0",
|
|
102
|
-
"lefthook": "^2.0.
|
|
101
|
+
"lefthook": "^2.0.2",
|
|
103
102
|
"ncp": "^2.0.0",
|
|
104
103
|
"path": "^0.12.7",
|
|
105
104
|
"phone": "^3.1.67",
|