react-native-metrify 0.1.0-beta.2 → 0.1.0-beta.3
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/CHANGELOG.md +16 -0
- package/dist/cjs/renderer-svg/adapters/index.js +17 -10
- package/dist/cjs/renderer-svg/adapters/index.js.map +1 -1
- package/dist/esm/renderer-svg/adapters/index.js +17 -10
- package/dist/esm/renderer-svg/adapters/index.js.map +1 -1
- package/dist/renderer-svg/adapters/index.d.ts +2 -2
- package/dist/renderer-svg/adapters/index.d.ts.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [0.1.0-beta.3] - 2026-02-03
|
|
6
|
+
|
|
7
|
+
### 🐛 Bug Fixes
|
|
8
|
+
- **Critical**: Fixed worklet error "[Worklets] Tried to synchronously call a non-worklet function 'formatNumber' on the UI thread"
|
|
9
|
+
- Made `formatNumber` function worklet-compatible by adding 'worklet' directive
|
|
10
|
+
- Replaced `Intl.NumberFormat` with worklet-compatible string manipulation (regex-based comma formatting)
|
|
11
|
+
- Made `getTrendColor` function worklet-compatible
|
|
12
|
+
- Fixed KPI and Gauge widgets crashing when using animations with React Native Reanimated
|
|
13
|
+
|
|
14
|
+
### 🔧 Technical Improvements
|
|
15
|
+
- All formatting functions now work on the UI thread in React Native Reanimated
|
|
16
|
+
- Simplified currency formatting to `$1,234,567` format (worklet-compatible)
|
|
17
|
+
- Number formatting now uses regex-based comma insertion for better performance
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
5
21
|
## [0.1.0-beta.2] - 2026-01-27
|
|
6
22
|
|
|
7
23
|
**🎨 Animation System Overhaul**
|
|
@@ -24,17 +24,22 @@ function dataToPoints(data, width, height, padding = 0) {
|
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
27
|
-
* Formats numbers for display
|
|
27
|
+
* Formats numbers for display (worklet-compatible)
|
|
28
28
|
*/
|
|
29
29
|
function formatNumber(value, format) {
|
|
30
|
+
'worklet';
|
|
31
|
+
// Helper to format number with commas (worklet-compatible)
|
|
32
|
+
const addCommas = (num) => {
|
|
33
|
+
'worklet';
|
|
34
|
+
const parts = num.toFixed(0).split('.');
|
|
35
|
+
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
36
|
+
return parts.join('.');
|
|
37
|
+
};
|
|
30
38
|
switch (format) {
|
|
31
39
|
case 'currency':
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
minimumFractionDigits: 0,
|
|
36
|
-
maximumFractionDigits: 0,
|
|
37
|
-
}).format(value);
|
|
40
|
+
// Worklet-compatible currency formatting
|
|
41
|
+
const currencyValue = Math.round(value);
|
|
42
|
+
return `$${addCommas(currencyValue)}`;
|
|
38
43
|
case 'percent':
|
|
39
44
|
return `${value.toFixed(1)}%`;
|
|
40
45
|
case 'compact':
|
|
@@ -44,16 +49,18 @@ function formatNumber(value, format) {
|
|
|
44
49
|
if (value >= 1000) {
|
|
45
50
|
return `${(value / 1000).toFixed(1)}K`;
|
|
46
51
|
}
|
|
47
|
-
return value.toString();
|
|
52
|
+
return Math.round(value).toString();
|
|
48
53
|
case 'number':
|
|
49
54
|
default:
|
|
50
|
-
|
|
55
|
+
// Worklet-compatible number formatting with commas
|
|
56
|
+
return addCommas(value);
|
|
51
57
|
}
|
|
52
58
|
}
|
|
53
59
|
/**
|
|
54
|
-
* Gets color for trend direction
|
|
60
|
+
* Gets color for trend direction (worklet-compatible)
|
|
55
61
|
*/
|
|
56
62
|
function getTrendColor(trend, colors) {
|
|
63
|
+
'worklet';
|
|
57
64
|
switch (trend) {
|
|
58
65
|
case 'up':
|
|
59
66
|
return colors.positive;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/renderer-svg/adapters/index.ts"],"names":[],"mappings":";;AAQA,oCAuBC;AAKD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/renderer-svg/adapters/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -19,17 +19,22 @@ export function dataToPoints(data, width, height, padding = 0) {
|
|
|
19
19
|
});
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
|
-
* Formats numbers for display
|
|
22
|
+
* Formats numbers for display (worklet-compatible)
|
|
23
23
|
*/
|
|
24
24
|
export function formatNumber(value, format) {
|
|
25
|
+
'worklet';
|
|
26
|
+
// Helper to format number with commas (worklet-compatible)
|
|
27
|
+
const addCommas = (num) => {
|
|
28
|
+
'worklet';
|
|
29
|
+
const parts = num.toFixed(0).split('.');
|
|
30
|
+
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
31
|
+
return parts.join('.');
|
|
32
|
+
};
|
|
25
33
|
switch (format) {
|
|
26
34
|
case 'currency':
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
minimumFractionDigits: 0,
|
|
31
|
-
maximumFractionDigits: 0,
|
|
32
|
-
}).format(value);
|
|
35
|
+
// Worklet-compatible currency formatting
|
|
36
|
+
const currencyValue = Math.round(value);
|
|
37
|
+
return `$${addCommas(currencyValue)}`;
|
|
33
38
|
case 'percent':
|
|
34
39
|
return `${value.toFixed(1)}%`;
|
|
35
40
|
case 'compact':
|
|
@@ -39,16 +44,18 @@ export function formatNumber(value, format) {
|
|
|
39
44
|
if (value >= 1000) {
|
|
40
45
|
return `${(value / 1000).toFixed(1)}K`;
|
|
41
46
|
}
|
|
42
|
-
return value.toString();
|
|
47
|
+
return Math.round(value).toString();
|
|
43
48
|
case 'number':
|
|
44
49
|
default:
|
|
45
|
-
|
|
50
|
+
// Worklet-compatible number formatting with commas
|
|
51
|
+
return addCommas(value);
|
|
46
52
|
}
|
|
47
53
|
}
|
|
48
54
|
/**
|
|
49
|
-
* Gets color for trend direction
|
|
55
|
+
* Gets color for trend direction (worklet-compatible)
|
|
50
56
|
*/
|
|
51
57
|
export function getTrendColor(trend, colors) {
|
|
58
|
+
'worklet';
|
|
52
59
|
switch (trend) {
|
|
53
60
|
case 'up':
|
|
54
61
|
return colors.positive;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/renderer-svg/adapters/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,UAAU,YAAY,CAC1B,IAAc,EACd,KAAa,EACb,MAAc,EACd,UAAkB,CAAC;IAEnB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IAEjC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;IAE7B,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC;IACvC,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,WAAW,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC;QAC1C,OAAO;YACL,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK;YAC1B,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW;SACrD,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAC1B,KAAa,EACb,MAAsD;IAEtD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/renderer-svg/adapters/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,UAAU,YAAY,CAC1B,IAAc,EACd,KAAa,EACb,MAAc,EACd,UAAkB,CAAC;IAEnB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IAEjC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;IAE7B,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC;IACvC,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,WAAW,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC;QAC1C,OAAO;YACL,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK;YAC1B,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW;SACrD,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAC1B,KAAa,EACb,MAAsD;IAEtD,SAAS,CAAC;IAEV,2DAA2D;IAC3D,MAAM,SAAS,GAAG,CAAC,GAAW,EAAU,EAAE;QACxC,SAAS,CAAC;QACV,MAAM,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACxC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC,CAAC;QAC1D,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,UAAU;YACb,yCAAyC;YACzC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACxC,OAAO,IAAI,SAAS,CAAC,aAAa,CAAC,EAAE,CAAC;QAExC,KAAK,SAAS;YACZ,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;QAEhC,KAAK,SAAS;YACZ,IAAI,KAAK,IAAI,OAAS,EAAE,CAAC;gBACvB,OAAO,GAAG,CAAC,KAAK,GAAG,OAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;YAC9C,CAAC;YACD,IAAI,KAAK,IAAI,IAAK,EAAE,CAAC;gBACnB,OAAO,GAAG,CAAC,KAAK,GAAG,IAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;YAC1C,CAAC;YACD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;QAEtC,KAAK,QAAQ,CAAC;QACd;YACE,mDAAmD;YACnD,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAgC,EAChC,MAA+D;IAE/D,SAAS,CAAC;IAEV,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,IAAI;YACP,OAAO,MAAM,CAAC,QAAQ,CAAC;QACzB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC,QAAQ,CAAC;QACzB,KAAK,SAAS,CAAC;QACf;YACE,OAAO,MAAM,CAAC,OAAO,CAAC;IAC1B,CAAC;AACH,CAAC"}
|
|
@@ -7,11 +7,11 @@ import { Point } from '../../core/layout';
|
|
|
7
7
|
*/
|
|
8
8
|
export declare function dataToPoints(data: number[], width: number, height: number, padding?: number): Point[];
|
|
9
9
|
/**
|
|
10
|
-
* Formats numbers for display
|
|
10
|
+
* Formats numbers for display (worklet-compatible)
|
|
11
11
|
*/
|
|
12
12
|
export declare function formatNumber(value: number, format?: 'number' | 'currency' | 'percent' | 'compact'): string;
|
|
13
13
|
/**
|
|
14
|
-
* Gets color for trend direction
|
|
14
|
+
* Gets color for trend direction (worklet-compatible)
|
|
15
15
|
*/
|
|
16
16
|
export declare function getTrendColor(trend: 'up' | 'down' | 'neutral', colors: {
|
|
17
17
|
positive: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer-svg/adapters/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EAAE,EACd,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,MAAU,GAClB,KAAK,EAAE,CAkBT;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GACrD,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/renderer-svg/adapters/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EAAE,EACd,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,MAAU,GAClB,KAAK,EAAE,CAkBT;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GACrD,MAAM,CAkCR;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,EAChC,MAAM,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC9D,MAAM,CAYR"}
|
package/package.json
CHANGED