@hero-design/rn 8.100.2 → 8.101.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.
Files changed (36) hide show
  1. package/.turbo/turbo-build.log +3 -3
  2. package/CHANGELOG.md +6 -0
  3. package/es/index.js +109 -25
  4. package/lib/index.js +109 -25
  5. package/package.json +1 -1
  6. package/src/components/Chart/ColumnChart/ColumnChartContent.tsx +19 -3
  7. package/src/components/Chart/ColumnChart/Segment.tsx +1 -1
  8. package/src/components/Chart/ColumnChart/StackedSegment.tsx +10 -6
  9. package/src/components/Chart/ColumnChart/__tests__/Segment.spec.tsx +1 -1
  10. package/src/components/Chart/ColumnChart/__tests__/__snapshots__/StackedSegment.spec.tsx.snap +6 -21
  11. package/src/components/Chart/ColumnChart/__tests__/__snapshots__/index.spec.tsx.snap +999 -6
  12. package/src/components/Chart/ColumnChart/__tests__/index.spec.tsx +107 -0
  13. package/src/components/Chart/ColumnChart/index.tsx +15 -0
  14. package/src/components/Chart/Line/Line.tsx +5 -2
  15. package/src/components/Chart/Line/__tests__/Line.spec.tsx +13 -6
  16. package/src/components/Chart/Line/__tests__/__snapshots__/Line.spec.tsx.snap +1 -1
  17. package/src/components/Chart/Line/__tests__/__snapshots__/index.spec.tsx.snap +1464 -4
  18. package/src/components/Chart/Line/__tests__/index.spec.tsx +95 -1
  19. package/src/components/Chart/Line/index.tsx +14 -2
  20. package/src/components/Chart/shared/__tests__/utils.spec.ts +16 -0
  21. package/src/components/Chart/shared/constants.ts +4 -0
  22. package/src/components/Chart/shared/hooks/useCustomColor.ts +84 -0
  23. package/src/components/Chart/shared/utils.ts +14 -0
  24. package/src/components/Chart/types.ts +32 -0
  25. package/stats/8.100.2/rn-stats.html +1 -3
  26. package/stats/8.101.0/rn-stats.html +4844 -0
  27. package/types/components/Chart/ColumnChart/ColumnChartContent.d.ts +5 -1
  28. package/types/components/Chart/ColumnChart/StackedSegment.d.ts +4 -0
  29. package/types/components/Chart/ColumnChart/index.d.ts +8 -2
  30. package/types/components/Chart/Line/Line.d.ts +3 -1
  31. package/types/components/Chart/Line/index.d.ts +8 -2
  32. package/types/components/Chart/index.d.ts +2 -2
  33. package/types/components/Chart/shared/constants.d.ts +2 -0
  34. package/types/components/Chart/shared/hooks/useCustomColor.d.ts +22 -0
  35. package/types/components/Chart/shared/utils.d.ts +11 -0
  36. package/types/components/Chart/types.d.ts +14 -1
@@ -1,5 +1,1465 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`LineChart renders chart with custom colors 1`] = `
4
+ <View
5
+ style={
6
+ {
7
+ "flex": 1,
8
+ }
9
+ }
10
+ >
11
+ <View
12
+ onLayout={[Function]}
13
+ style={
14
+ [
15
+ {},
16
+ [
17
+ {
18
+ "height": "100%",
19
+ "width": "100%",
20
+ },
21
+ undefined,
22
+ ],
23
+ ]
24
+ }
25
+ >
26
+ <View
27
+ style={
28
+ [
29
+ {},
30
+ {
31
+ "height": 0,
32
+ "width": 0,
33
+ },
34
+ ]
35
+ }
36
+ >
37
+ <View
38
+ onLayout={[Function]}
39
+ style={
40
+ [
41
+ {},
42
+ [
43
+ {
44
+ "alignItems": "center",
45
+ "flexDirection": "row",
46
+ "justifyContent": "space-between",
47
+ "marginBottom": 16,
48
+ },
49
+ undefined,
50
+ ],
51
+ ]
52
+ }
53
+ >
54
+ <View
55
+ style={
56
+ [
57
+ {},
58
+ undefined,
59
+ ]
60
+ }
61
+ >
62
+ <Text
63
+ allowFontScaling={false}
64
+ style={
65
+ [
66
+ {
67
+ "color": "#001f23",
68
+ "fontFamily": "BeVietnamPro-Regular",
69
+ "fontSize": 16,
70
+ "letterSpacing": 0.48,
71
+ "lineHeight": 24,
72
+ },
73
+ undefined,
74
+ ]
75
+ }
76
+ themeIntent="body"
77
+ themeTypeface="neutral"
78
+ themeVariant="regular"
79
+ >
80
+ Line Chart
81
+ </Text>
82
+ </View>
83
+ <View
84
+ style={
85
+ [
86
+ {},
87
+ undefined,
88
+ ]
89
+ }
90
+ >
91
+ <View
92
+ accessibilityState={
93
+ {
94
+ "disabled": false,
95
+ }
96
+ }
97
+ accessibilityValue={
98
+ {
99
+ "max": undefined,
100
+ "min": undefined,
101
+ "now": undefined,
102
+ "text": undefined,
103
+ }
104
+ }
105
+ accessible={true}
106
+ focusable={true}
107
+ onClick={[Function]}
108
+ onResponderGrant={[Function]}
109
+ onResponderMove={[Function]}
110
+ onResponderRelease={[Function]}
111
+ onResponderTerminate={[Function]}
112
+ onResponderTerminationRequest={[Function]}
113
+ onStartShouldSetResponder={[Function]}
114
+ style={
115
+ [
116
+ {
117
+ "alignItems": "center",
118
+ "alignSelf": "flex-start",
119
+ "backgroundColor": "transparent",
120
+ "borderRadius": 4,
121
+ "borderWidth": 0,
122
+ "flexDirection": "row",
123
+ "height": undefined,
124
+ "justifyContent": "center",
125
+ "paddingHorizontal": 0,
126
+ "paddingVertical": 0,
127
+ },
128
+ undefined,
129
+ ]
130
+ }
131
+ >
132
+ <Text
133
+ allowFontScaling={false}
134
+ disabled={false}
135
+ ellipsizeMode="tail"
136
+ numberOfLines={1}
137
+ style={
138
+ [
139
+ {
140
+ "color": "#001f23",
141
+ "fontFamily": "BeVietnamPro-SemiBold",
142
+ "fontSize": 14,
143
+ "letterSpacing": 0.24,
144
+ "lineHeight": 22,
145
+ },
146
+ [
147
+ {
148
+ "color": "#401960",
149
+ "flexShrink": 1,
150
+ "lineHeight": 16,
151
+ "textAlign": "center",
152
+ "textAlignVertical": "center",
153
+ },
154
+ undefined,
155
+ ],
156
+ ]
157
+ }
158
+ themeButtonVariant="text-primary"
159
+ themeIntent="body"
160
+ themeIsCompact={true}
161
+ themeIsPressed={false}
162
+ themeTypeface="neutral"
163
+ themeVariant="small-bold"
164
+ >
165
+ Chart extra
166
+ </Text>
167
+ </View>
168
+ </View>
169
+ </View>
170
+ <View
171
+ style={
172
+ [
173
+ {},
174
+ {
175
+ "paddingTop": 8,
176
+ },
177
+ ]
178
+ }
179
+ >
180
+ <RNSVGSvgView
181
+ bbHeight={0}
182
+ bbWidth={0}
183
+ focusable={false}
184
+ style={
185
+ [
186
+ {
187
+ "backgroundColor": "transparent",
188
+ "borderWidth": 0,
189
+ },
190
+ {
191
+ "height": 0,
192
+ "overflow": "visible",
193
+ "width": 0,
194
+ },
195
+ ]
196
+ }
197
+ >
198
+ <RNSVGGroup
199
+ fill={
200
+ {
201
+ "payload": 4278190080,
202
+ "type": 0,
203
+ }
204
+ }
205
+ >
206
+ <RNSVGGroup
207
+ fill={
208
+ {
209
+ "payload": 4278190080,
210
+ "type": 0,
211
+ }
212
+ }
213
+ >
214
+ <RNSVGGroup
215
+ fill={
216
+ {
217
+ "payload": 4278190080,
218
+ "type": 0,
219
+ }
220
+ }
221
+ >
222
+ <View
223
+ alignItems="center"
224
+ style={
225
+ [
226
+ {
227
+ "alignItems": "center",
228
+ },
229
+ {
230
+ "left": 33,
231
+ "maxHeight": 32,
232
+ "position": "absolute",
233
+ "top": -32,
234
+ "width": 12.000000000000002,
235
+ },
236
+ ]
237
+ }
238
+ testID="x-axis-label-May 2025-container"
239
+ >
240
+ <Text
241
+ adjustsFontSizeToFit={true}
242
+ allowFontScaling={false}
243
+ ellipsizeMode="tail"
244
+ minimumFontScale={0.6}
245
+ numberOfLines={2}
246
+ style={
247
+ [
248
+ {
249
+ "color": "#4d6265",
250
+ "fontSize": 10,
251
+ "letterSpacing": 0,
252
+ "lineHeight": 14,
253
+ },
254
+ {
255
+ "textAlign": "center",
256
+ },
257
+ ]
258
+ }
259
+ themeIntent="subdued"
260
+ >
261
+ May 2025
262
+ </Text>
263
+ </View>
264
+ </RNSVGGroup>
265
+ <RNSVGGroup
266
+ fill={
267
+ {
268
+ "payload": 4278190080,
269
+ "type": 0,
270
+ }
271
+ }
272
+ >
273
+ <View
274
+ alignItems="center"
275
+ style={
276
+ [
277
+ {
278
+ "alignItems": "center",
279
+ },
280
+ {
281
+ "left": 18,
282
+ "maxHeight": 32,
283
+ "position": "absolute",
284
+ "top": -32,
285
+ "width": 12.000000000000002,
286
+ },
287
+ ]
288
+ }
289
+ testID="x-axis-label-Jun 2025-container"
290
+ >
291
+ <Text
292
+ adjustsFontSizeToFit={true}
293
+ allowFontScaling={false}
294
+ ellipsizeMode="tail"
295
+ minimumFontScale={0.6}
296
+ numberOfLines={2}
297
+ style={
298
+ [
299
+ {
300
+ "color": "#4d6265",
301
+ "fontSize": 10,
302
+ "letterSpacing": 0,
303
+ "lineHeight": 14,
304
+ },
305
+ {
306
+ "textAlign": "center",
307
+ },
308
+ ]
309
+ }
310
+ themeIntent="subdued"
311
+ >
312
+ Jun 2025
313
+ </Text>
314
+ </View>
315
+ </RNSVGGroup>
316
+ <RNSVGGroup
317
+ fill={
318
+ {
319
+ "payload": 4278190080,
320
+ "type": 0,
321
+ }
322
+ }
323
+ >
324
+ <View
325
+ alignItems="center"
326
+ style={
327
+ [
328
+ {
329
+ "alignItems": "center",
330
+ },
331
+ {
332
+ "left": 3,
333
+ "maxHeight": 32,
334
+ "position": "absolute",
335
+ "top": -32,
336
+ "width": 12.000000000000002,
337
+ },
338
+ ]
339
+ }
340
+ testID="x-axis-label-Jul 2025-container"
341
+ >
342
+ <Text
343
+ adjustsFontSizeToFit={true}
344
+ allowFontScaling={false}
345
+ ellipsizeMode="tail"
346
+ minimumFontScale={0.6}
347
+ numberOfLines={2}
348
+ style={
349
+ [
350
+ {
351
+ "color": "#4d6265",
352
+ "fontSize": 10,
353
+ "letterSpacing": 0,
354
+ "lineHeight": 14,
355
+ },
356
+ {
357
+ "textAlign": "center",
358
+ },
359
+ ]
360
+ }
361
+ themeIntent="subdued"
362
+ >
363
+ Jul 2025
364
+ </Text>
365
+ </View>
366
+ </RNSVGGroup>
367
+ </RNSVGGroup>
368
+ <RNSVGGroup
369
+ fill={
370
+ {
371
+ "payload": 4278190080,
372
+ "type": 0,
373
+ }
374
+ }
375
+ >
376
+ <RNSVGGroup
377
+ fill={
378
+ {
379
+ "payload": 4278190080,
380
+ "type": 0,
381
+ }
382
+ }
383
+ >
384
+ <View
385
+ style={
386
+ [
387
+ {},
388
+ {
389
+ "maxWidth": 32,
390
+ "position": "absolute",
391
+ "right": -32,
392
+ "top": -44,
393
+ "transform": [
394
+ {
395
+ "translateY": -7,
396
+ },
397
+ ],
398
+ },
399
+ ]
400
+ }
401
+ testID="y-axis-label-1-container"
402
+ >
403
+ <Text
404
+ adjustsFontSizeToFit={true}
405
+ allowFontScaling={false}
406
+ ellipsizeMode="tail"
407
+ minimumFontScale={0.6}
408
+ numberOfLines={1}
409
+ style={
410
+ [
411
+ {
412
+ "color": "#4d6265",
413
+ "fontSize": 10,
414
+ "letterSpacing": 0,
415
+ "lineHeight": 14,
416
+ },
417
+ {
418
+ "textAlign": "right",
419
+ },
420
+ ]
421
+ }
422
+ themeIntent="subdued"
423
+ >
424
+ $1
425
+ </Text>
426
+ </View>
427
+ </RNSVGGroup>
428
+ <RNSVGGroup
429
+ fill={
430
+ {
431
+ "payload": 4278190080,
432
+ "type": 0,
433
+ }
434
+ }
435
+ >
436
+ <View
437
+ style={
438
+ [
439
+ {},
440
+ {
441
+ "maxWidth": 32,
442
+ "position": "absolute",
443
+ "right": -32,
444
+ "top": -39.6,
445
+ "transform": [
446
+ {
447
+ "translateY": -7,
448
+ },
449
+ ],
450
+ },
451
+ ]
452
+ }
453
+ testID="y-axis-label-1.5-container"
454
+ >
455
+ <Text
456
+ adjustsFontSizeToFit={true}
457
+ allowFontScaling={false}
458
+ ellipsizeMode="tail"
459
+ minimumFontScale={0.6}
460
+ numberOfLines={1}
461
+ style={
462
+ [
463
+ {
464
+ "color": "#4d6265",
465
+ "fontSize": 10,
466
+ "letterSpacing": 0,
467
+ "lineHeight": 14,
468
+ },
469
+ {
470
+ "textAlign": "right",
471
+ },
472
+ ]
473
+ }
474
+ themeIntent="subdued"
475
+ >
476
+ $2
477
+ </Text>
478
+ </View>
479
+ </RNSVGGroup>
480
+ <RNSVGGroup
481
+ fill={
482
+ {
483
+ "payload": 4278190080,
484
+ "type": 0,
485
+ }
486
+ }
487
+ >
488
+ <View
489
+ style={
490
+ [
491
+ {},
492
+ {
493
+ "maxWidth": 32,
494
+ "position": "absolute",
495
+ "right": -32,
496
+ "top": -35.2,
497
+ "transform": [
498
+ {
499
+ "translateY": -7,
500
+ },
501
+ ],
502
+ },
503
+ ]
504
+ }
505
+ testID="y-axis-label-2-container"
506
+ >
507
+ <Text
508
+ adjustsFontSizeToFit={true}
509
+ allowFontScaling={false}
510
+ ellipsizeMode="tail"
511
+ minimumFontScale={0.6}
512
+ numberOfLines={1}
513
+ style={
514
+ [
515
+ {
516
+ "color": "#4d6265",
517
+ "fontSize": 10,
518
+ "letterSpacing": 0,
519
+ "lineHeight": 14,
520
+ },
521
+ {
522
+ "textAlign": "right",
523
+ },
524
+ ]
525
+ }
526
+ themeIntent="subdued"
527
+ >
528
+ $3
529
+ </Text>
530
+ </View>
531
+ </RNSVGGroup>
532
+ <RNSVGGroup
533
+ fill={
534
+ {
535
+ "payload": 4278190080,
536
+ "type": 0,
537
+ }
538
+ }
539
+ >
540
+ <View
541
+ style={
542
+ [
543
+ {},
544
+ {
545
+ "maxWidth": 32,
546
+ "position": "absolute",
547
+ "right": -32,
548
+ "top": -30.799999999999997,
549
+ "transform": [
550
+ {
551
+ "translateY": -7,
552
+ },
553
+ ],
554
+ },
555
+ ]
556
+ }
557
+ testID="y-axis-label-2.5-container"
558
+ >
559
+ <Text
560
+ adjustsFontSizeToFit={true}
561
+ allowFontScaling={false}
562
+ ellipsizeMode="tail"
563
+ minimumFontScale={0.6}
564
+ numberOfLines={1}
565
+ style={
566
+ [
567
+ {
568
+ "color": "#4d6265",
569
+ "fontSize": 10,
570
+ "letterSpacing": 0,
571
+ "lineHeight": 14,
572
+ },
573
+ {
574
+ "textAlign": "right",
575
+ },
576
+ ]
577
+ }
578
+ themeIntent="subdued"
579
+ />
580
+ </View>
581
+ </RNSVGGroup>
582
+ <RNSVGGroup
583
+ fill={
584
+ {
585
+ "payload": 4278190080,
586
+ "type": 0,
587
+ }
588
+ }
589
+ >
590
+ <View
591
+ style={
592
+ [
593
+ {},
594
+ {
595
+ "maxWidth": 32,
596
+ "position": "absolute",
597
+ "right": -32,
598
+ "top": -26.4,
599
+ "transform": [
600
+ {
601
+ "translateY": -7,
602
+ },
603
+ ],
604
+ },
605
+ ]
606
+ }
607
+ testID="y-axis-label-3-container"
608
+ >
609
+ <Text
610
+ adjustsFontSizeToFit={true}
611
+ allowFontScaling={false}
612
+ ellipsizeMode="tail"
613
+ minimumFontScale={0.6}
614
+ numberOfLines={1}
615
+ style={
616
+ [
617
+ {
618
+ "color": "#4d6265",
619
+ "fontSize": 10,
620
+ "letterSpacing": 0,
621
+ "lineHeight": 14,
622
+ },
623
+ {
624
+ "textAlign": "right",
625
+ },
626
+ ]
627
+ }
628
+ themeIntent="subdued"
629
+ />
630
+ </View>
631
+ </RNSVGGroup>
632
+ <RNSVGGroup
633
+ fill={
634
+ {
635
+ "payload": 4278190080,
636
+ "type": 0,
637
+ }
638
+ }
639
+ >
640
+ <View
641
+ style={
642
+ [
643
+ {},
644
+ {
645
+ "maxWidth": 32,
646
+ "position": "absolute",
647
+ "right": -32,
648
+ "top": -22,
649
+ "transform": [
650
+ {
651
+ "translateY": -7,
652
+ },
653
+ ],
654
+ },
655
+ ]
656
+ }
657
+ testID="y-axis-label-3.5-container"
658
+ >
659
+ <Text
660
+ adjustsFontSizeToFit={true}
661
+ allowFontScaling={false}
662
+ ellipsizeMode="tail"
663
+ minimumFontScale={0.6}
664
+ numberOfLines={1}
665
+ style={
666
+ [
667
+ {
668
+ "color": "#4d6265",
669
+ "fontSize": 10,
670
+ "letterSpacing": 0,
671
+ "lineHeight": 14,
672
+ },
673
+ {
674
+ "textAlign": "right",
675
+ },
676
+ ]
677
+ }
678
+ themeIntent="subdued"
679
+ />
680
+ </View>
681
+ </RNSVGGroup>
682
+ <RNSVGGroup
683
+ fill={
684
+ {
685
+ "payload": 4278190080,
686
+ "type": 0,
687
+ }
688
+ }
689
+ >
690
+ <View
691
+ style={
692
+ [
693
+ {},
694
+ {
695
+ "maxWidth": 32,
696
+ "position": "absolute",
697
+ "right": -32,
698
+ "top": -17.6,
699
+ "transform": [
700
+ {
701
+ "translateY": -7,
702
+ },
703
+ ],
704
+ },
705
+ ]
706
+ }
707
+ testID="y-axis-label-4-container"
708
+ >
709
+ <Text
710
+ adjustsFontSizeToFit={true}
711
+ allowFontScaling={false}
712
+ ellipsizeMode="tail"
713
+ minimumFontScale={0.6}
714
+ numberOfLines={1}
715
+ style={
716
+ [
717
+ {
718
+ "color": "#4d6265",
719
+ "fontSize": 10,
720
+ "letterSpacing": 0,
721
+ "lineHeight": 14,
722
+ },
723
+ {
724
+ "textAlign": "right",
725
+ },
726
+ ]
727
+ }
728
+ themeIntent="subdued"
729
+ />
730
+ </View>
731
+ </RNSVGGroup>
732
+ <RNSVGGroup
733
+ fill={
734
+ {
735
+ "payload": 4278190080,
736
+ "type": 0,
737
+ }
738
+ }
739
+ >
740
+ <View
741
+ style={
742
+ [
743
+ {},
744
+ {
745
+ "maxWidth": 32,
746
+ "position": "absolute",
747
+ "right": -32,
748
+ "top": -13.200000000000003,
749
+ "transform": [
750
+ {
751
+ "translateY": -7,
752
+ },
753
+ ],
754
+ },
755
+ ]
756
+ }
757
+ testID="y-axis-label-4.5-container"
758
+ >
759
+ <Text
760
+ adjustsFontSizeToFit={true}
761
+ allowFontScaling={false}
762
+ ellipsizeMode="tail"
763
+ minimumFontScale={0.6}
764
+ numberOfLines={1}
765
+ style={
766
+ [
767
+ {
768
+ "color": "#4d6265",
769
+ "fontSize": 10,
770
+ "letterSpacing": 0,
771
+ "lineHeight": 14,
772
+ },
773
+ {
774
+ "textAlign": "right",
775
+ },
776
+ ]
777
+ }
778
+ themeIntent="subdued"
779
+ />
780
+ </View>
781
+ </RNSVGGroup>
782
+ <RNSVGGroup
783
+ fill={
784
+ {
785
+ "payload": 4278190080,
786
+ "type": 0,
787
+ }
788
+ }
789
+ >
790
+ <View
791
+ style={
792
+ [
793
+ {},
794
+ {
795
+ "maxWidth": 32,
796
+ "position": "absolute",
797
+ "right": -32,
798
+ "top": -8.799999999999997,
799
+ "transform": [
800
+ {
801
+ "translateY": -7,
802
+ },
803
+ ],
804
+ },
805
+ ]
806
+ }
807
+ testID="y-axis-label-5-container"
808
+ >
809
+ <Text
810
+ adjustsFontSizeToFit={true}
811
+ allowFontScaling={false}
812
+ ellipsizeMode="tail"
813
+ minimumFontScale={0.6}
814
+ numberOfLines={1}
815
+ style={
816
+ [
817
+ {
818
+ "color": "#4d6265",
819
+ "fontSize": 10,
820
+ "letterSpacing": 0,
821
+ "lineHeight": 14,
822
+ },
823
+ {
824
+ "textAlign": "right",
825
+ },
826
+ ]
827
+ }
828
+ themeIntent="subdued"
829
+ />
830
+ </View>
831
+ </RNSVGGroup>
832
+ <RNSVGGroup
833
+ fill={
834
+ {
835
+ "payload": 4278190080,
836
+ "type": 0,
837
+ }
838
+ }
839
+ >
840
+ <View
841
+ style={
842
+ [
843
+ {},
844
+ {
845
+ "maxWidth": 32,
846
+ "position": "absolute",
847
+ "right": -32,
848
+ "top": -4.399999999999999,
849
+ "transform": [
850
+ {
851
+ "translateY": -7,
852
+ },
853
+ ],
854
+ },
855
+ ]
856
+ }
857
+ testID="y-axis-label-5.5-container"
858
+ >
859
+ <Text
860
+ adjustsFontSizeToFit={true}
861
+ allowFontScaling={false}
862
+ ellipsizeMode="tail"
863
+ minimumFontScale={0.6}
864
+ numberOfLines={1}
865
+ style={
866
+ [
867
+ {
868
+ "color": "#4d6265",
869
+ "fontSize": 10,
870
+ "letterSpacing": 0,
871
+ "lineHeight": 14,
872
+ },
873
+ {
874
+ "textAlign": "right",
875
+ },
876
+ ]
877
+ }
878
+ themeIntent="subdued"
879
+ />
880
+ </View>
881
+ </RNSVGGroup>
882
+ <RNSVGGroup
883
+ fill={
884
+ {
885
+ "payload": 4278190080,
886
+ "type": 0,
887
+ }
888
+ }
889
+ >
890
+ <View
891
+ style={
892
+ [
893
+ {},
894
+ {
895
+ "maxWidth": 32,
896
+ "position": "absolute",
897
+ "right": -32,
898
+ "top": 0,
899
+ "transform": [
900
+ {
901
+ "translateY": -7,
902
+ },
903
+ ],
904
+ },
905
+ ]
906
+ }
907
+ testID="y-axis-label-6-container"
908
+ >
909
+ <Text
910
+ adjustsFontSizeToFit={true}
911
+ allowFontScaling={false}
912
+ ellipsizeMode="tail"
913
+ minimumFontScale={0.6}
914
+ numberOfLines={1}
915
+ style={
916
+ [
917
+ {
918
+ "color": "#4d6265",
919
+ "fontSize": 10,
920
+ "letterSpacing": 0,
921
+ "lineHeight": 14,
922
+ },
923
+ {
924
+ "textAlign": "right",
925
+ },
926
+ ]
927
+ }
928
+ themeIntent="subdued"
929
+ />
930
+ </View>
931
+ </RNSVGGroup>
932
+ </RNSVGGroup>
933
+ <RNSVGGroup
934
+ fill={
935
+ {
936
+ "payload": 4278190080,
937
+ "type": 0,
938
+ }
939
+ }
940
+ testID="x-axis-grid"
941
+ >
942
+ <RNSVGLine
943
+ fill={
944
+ {
945
+ "payload": 4278190080,
946
+ "type": 0,
947
+ }
948
+ }
949
+ propList={
950
+ [
951
+ "stroke",
952
+ "strokeDasharray",
953
+ ]
954
+ }
955
+ stroke={
956
+ {
957
+ "payload": 4293454314,
958
+ "type": 0,
959
+ }
960
+ }
961
+ strokeDasharray={
962
+ [
963
+ 4,
964
+ 4,
965
+ ]
966
+ }
967
+ testID="x-axis-grid-May 2025"
968
+ x1={39}
969
+ x2={39}
970
+ y1={0}
971
+ y2={-44}
972
+ />
973
+ <RNSVGLine
974
+ fill={
975
+ {
976
+ "payload": 4278190080,
977
+ "type": 0,
978
+ }
979
+ }
980
+ propList={
981
+ [
982
+ "stroke",
983
+ "strokeDasharray",
984
+ ]
985
+ }
986
+ stroke={
987
+ {
988
+ "payload": 4293454314,
989
+ "type": 0,
990
+ }
991
+ }
992
+ strokeDasharray={
993
+ [
994
+ 4,
995
+ 4,
996
+ ]
997
+ }
998
+ testID="x-axis-grid-Jun 2025"
999
+ x1={24}
1000
+ x2={24}
1001
+ y1={0}
1002
+ y2={-44}
1003
+ />
1004
+ <RNSVGLine
1005
+ fill={
1006
+ {
1007
+ "payload": 4278190080,
1008
+ "type": 0,
1009
+ }
1010
+ }
1011
+ propList={
1012
+ [
1013
+ "stroke",
1014
+ "strokeDasharray",
1015
+ ]
1016
+ }
1017
+ stroke={
1018
+ {
1019
+ "payload": 4293454314,
1020
+ "type": 0,
1021
+ }
1022
+ }
1023
+ strokeDasharray={
1024
+ [
1025
+ 4,
1026
+ 4,
1027
+ ]
1028
+ }
1029
+ testID="x-axis-grid-Jul 2025"
1030
+ x1={9}
1031
+ x2={9}
1032
+ y1={0}
1033
+ y2={-44}
1034
+ />
1035
+ </RNSVGGroup>
1036
+ <RNSVGGroup
1037
+ fill={
1038
+ {
1039
+ "payload": 4278190080,
1040
+ "type": 0,
1041
+ }
1042
+ }
1043
+ testID="y-axis-grid"
1044
+ >
1045
+ <RNSVGLine
1046
+ fill={
1047
+ {
1048
+ "payload": 4278190080,
1049
+ "type": 0,
1050
+ }
1051
+ }
1052
+ propList={
1053
+ [
1054
+ "stroke",
1055
+ "strokeDasharray",
1056
+ ]
1057
+ }
1058
+ stroke={
1059
+ {
1060
+ "payload": 4293454314,
1061
+ "type": 0,
1062
+ }
1063
+ }
1064
+ strokeDasharray={
1065
+ [
1066
+ 4,
1067
+ 4,
1068
+ ]
1069
+ }
1070
+ testID="y-axis-grid-1"
1071
+ x1={48}
1072
+ x2={0}
1073
+ y1={-44}
1074
+ y2={-44}
1075
+ />
1076
+ <RNSVGLine
1077
+ fill={
1078
+ {
1079
+ "payload": 4278190080,
1080
+ "type": 0,
1081
+ }
1082
+ }
1083
+ propList={
1084
+ [
1085
+ "stroke",
1086
+ "strokeDasharray",
1087
+ ]
1088
+ }
1089
+ stroke={
1090
+ {
1091
+ "payload": 4293454314,
1092
+ "type": 0,
1093
+ }
1094
+ }
1095
+ strokeDasharray={
1096
+ [
1097
+ 4,
1098
+ 4,
1099
+ ]
1100
+ }
1101
+ testID="y-axis-grid-1.5"
1102
+ x1={48}
1103
+ x2={0}
1104
+ y1={-39.6}
1105
+ y2={-39.6}
1106
+ />
1107
+ <RNSVGLine
1108
+ fill={
1109
+ {
1110
+ "payload": 4278190080,
1111
+ "type": 0,
1112
+ }
1113
+ }
1114
+ propList={
1115
+ [
1116
+ "stroke",
1117
+ "strokeDasharray",
1118
+ ]
1119
+ }
1120
+ stroke={
1121
+ {
1122
+ "payload": 4293454314,
1123
+ "type": 0,
1124
+ }
1125
+ }
1126
+ strokeDasharray={
1127
+ [
1128
+ 4,
1129
+ 4,
1130
+ ]
1131
+ }
1132
+ testID="y-axis-grid-2"
1133
+ x1={48}
1134
+ x2={0}
1135
+ y1={-35.2}
1136
+ y2={-35.2}
1137
+ />
1138
+ <RNSVGLine
1139
+ fill={
1140
+ {
1141
+ "payload": 4278190080,
1142
+ "type": 0,
1143
+ }
1144
+ }
1145
+ propList={
1146
+ [
1147
+ "stroke",
1148
+ "strokeDasharray",
1149
+ ]
1150
+ }
1151
+ stroke={
1152
+ {
1153
+ "payload": 4293454314,
1154
+ "type": 0,
1155
+ }
1156
+ }
1157
+ strokeDasharray={
1158
+ [
1159
+ 4,
1160
+ 4,
1161
+ ]
1162
+ }
1163
+ testID="y-axis-grid-2.5"
1164
+ x1={48}
1165
+ x2={0}
1166
+ y1={-30.799999999999997}
1167
+ y2={-30.799999999999997}
1168
+ />
1169
+ <RNSVGLine
1170
+ fill={
1171
+ {
1172
+ "payload": 4278190080,
1173
+ "type": 0,
1174
+ }
1175
+ }
1176
+ propList={
1177
+ [
1178
+ "stroke",
1179
+ "strokeDasharray",
1180
+ ]
1181
+ }
1182
+ stroke={
1183
+ {
1184
+ "payload": 4293454314,
1185
+ "type": 0,
1186
+ }
1187
+ }
1188
+ strokeDasharray={
1189
+ [
1190
+ 4,
1191
+ 4,
1192
+ ]
1193
+ }
1194
+ testID="y-axis-grid-3"
1195
+ x1={48}
1196
+ x2={0}
1197
+ y1={-26.4}
1198
+ y2={-26.4}
1199
+ />
1200
+ <RNSVGLine
1201
+ fill={
1202
+ {
1203
+ "payload": 4278190080,
1204
+ "type": 0,
1205
+ }
1206
+ }
1207
+ propList={
1208
+ [
1209
+ "stroke",
1210
+ "strokeDasharray",
1211
+ ]
1212
+ }
1213
+ stroke={
1214
+ {
1215
+ "payload": 4293454314,
1216
+ "type": 0,
1217
+ }
1218
+ }
1219
+ strokeDasharray={
1220
+ [
1221
+ 4,
1222
+ 4,
1223
+ ]
1224
+ }
1225
+ testID="y-axis-grid-3.5"
1226
+ x1={48}
1227
+ x2={0}
1228
+ y1={-22}
1229
+ y2={-22}
1230
+ />
1231
+ <RNSVGLine
1232
+ fill={
1233
+ {
1234
+ "payload": 4278190080,
1235
+ "type": 0,
1236
+ }
1237
+ }
1238
+ propList={
1239
+ [
1240
+ "stroke",
1241
+ "strokeDasharray",
1242
+ ]
1243
+ }
1244
+ stroke={
1245
+ {
1246
+ "payload": 4293454314,
1247
+ "type": 0,
1248
+ }
1249
+ }
1250
+ strokeDasharray={
1251
+ [
1252
+ 4,
1253
+ 4,
1254
+ ]
1255
+ }
1256
+ testID="y-axis-grid-4"
1257
+ x1={48}
1258
+ x2={0}
1259
+ y1={-17.6}
1260
+ y2={-17.6}
1261
+ />
1262
+ <RNSVGLine
1263
+ fill={
1264
+ {
1265
+ "payload": 4278190080,
1266
+ "type": 0,
1267
+ }
1268
+ }
1269
+ propList={
1270
+ [
1271
+ "stroke",
1272
+ "strokeDasharray",
1273
+ ]
1274
+ }
1275
+ stroke={
1276
+ {
1277
+ "payload": 4293454314,
1278
+ "type": 0,
1279
+ }
1280
+ }
1281
+ strokeDasharray={
1282
+ [
1283
+ 4,
1284
+ 4,
1285
+ ]
1286
+ }
1287
+ testID="y-axis-grid-4.5"
1288
+ x1={48}
1289
+ x2={0}
1290
+ y1={-13.200000000000003}
1291
+ y2={-13.200000000000003}
1292
+ />
1293
+ <RNSVGLine
1294
+ fill={
1295
+ {
1296
+ "payload": 4278190080,
1297
+ "type": 0,
1298
+ }
1299
+ }
1300
+ propList={
1301
+ [
1302
+ "stroke",
1303
+ "strokeDasharray",
1304
+ ]
1305
+ }
1306
+ stroke={
1307
+ {
1308
+ "payload": 4293454314,
1309
+ "type": 0,
1310
+ }
1311
+ }
1312
+ strokeDasharray={
1313
+ [
1314
+ 4,
1315
+ 4,
1316
+ ]
1317
+ }
1318
+ testID="y-axis-grid-5"
1319
+ x1={48}
1320
+ x2={0}
1321
+ y1={-8.799999999999997}
1322
+ y2={-8.799999999999997}
1323
+ />
1324
+ <RNSVGLine
1325
+ fill={
1326
+ {
1327
+ "payload": 4278190080,
1328
+ "type": 0,
1329
+ }
1330
+ }
1331
+ propList={
1332
+ [
1333
+ "stroke",
1334
+ "strokeDasharray",
1335
+ ]
1336
+ }
1337
+ stroke={
1338
+ {
1339
+ "payload": 4293454314,
1340
+ "type": 0,
1341
+ }
1342
+ }
1343
+ strokeDasharray={
1344
+ [
1345
+ 4,
1346
+ 4,
1347
+ ]
1348
+ }
1349
+ testID="y-axis-grid-5.5"
1350
+ x1={48}
1351
+ x2={0}
1352
+ y1={-4.399999999999999}
1353
+ y2={-4.399999999999999}
1354
+ />
1355
+ <RNSVGLine
1356
+ fill={
1357
+ {
1358
+ "payload": 4278190080,
1359
+ "type": 0,
1360
+ }
1361
+ }
1362
+ propList={
1363
+ [
1364
+ "stroke",
1365
+ "strokeDasharray",
1366
+ ]
1367
+ }
1368
+ stroke={
1369
+ {
1370
+ "payload": 4293454314,
1371
+ "type": 0,
1372
+ }
1373
+ }
1374
+ strokeDasharray={
1375
+ [
1376
+ 4,
1377
+ 4,
1378
+ ]
1379
+ }
1380
+ testID="y-axis-grid-6"
1381
+ x1={48}
1382
+ x2={0}
1383
+ y1={0}
1384
+ y2={0}
1385
+ />
1386
+ </RNSVGGroup>
1387
+ <RNSVGPath
1388
+ accessibilityLabel="chart-line-maxValue:6,minValue:1,labelsLength:3,color:#5fda84"
1389
+ d="M39,-44L36.5,-42.533C34,-41.067,29,-38.133,24,-35.2C19,-32.267,14,-29.333,11.5,-27.867L9,-26.4"
1390
+ fill={null}
1391
+ propList={
1392
+ [
1393
+ "fill",
1394
+ "stroke",
1395
+ "strokeWidth",
1396
+ "strokeLinecap",
1397
+ "strokeLinejoin",
1398
+ ]
1399
+ }
1400
+ stroke={
1401
+ {
1402
+ "payload": 4284471940,
1403
+ "type": 0,
1404
+ }
1405
+ }
1406
+ strokeLinecap={1}
1407
+ strokeLinejoin={1}
1408
+ strokeWidth={2}
1409
+ testID="line-Series 1"
1410
+ />
1411
+ <RNSVGPath
1412
+ accessibilityLabel="chart-line-maxValue:6,minValue:1,labelsLength:3,color:#1dbeee"
1413
+ d="M39,-17.6L36.5,-16.133C34,-14.667,29,-11.733,24,-8.8C19,-5.867,14,-2.933,11.5,-1.467L9,0"
1414
+ fill={null}
1415
+ propList={
1416
+ [
1417
+ "fill",
1418
+ "stroke",
1419
+ "strokeWidth",
1420
+ "strokeLinecap",
1421
+ "strokeLinejoin",
1422
+ ]
1423
+ }
1424
+ stroke={
1425
+ {
1426
+ "payload": 4280139502,
1427
+ "type": 0,
1428
+ }
1429
+ }
1430
+ strokeLinecap={1}
1431
+ strokeLinejoin={1}
1432
+ strokeWidth={2}
1433
+ testID="line-Series 2"
1434
+ />
1435
+ </RNSVGGroup>
1436
+ </RNSVGSvgView>
1437
+ </View>
1438
+ </View>
1439
+ </View>
1440
+ <View
1441
+ pointerEvents="box-none"
1442
+ position="bottom"
1443
+ style={
1444
+ [
1445
+ {
1446
+ "bottom": 0,
1447
+ "elevation": 9999,
1448
+ "flexDirection": "column-reverse",
1449
+ "left": 0,
1450
+ "paddingHorizontal": 24,
1451
+ "paddingVertical": 16,
1452
+ "position": "absolute",
1453
+ "right": 0,
1454
+ "top": 0,
1455
+ },
1456
+ undefined,
1457
+ ]
1458
+ }
1459
+ />
1460
+ </View>
1461
+ `;
1462
+
3
1463
  exports[`LineChart should render 1`] = `
4
1464
  <View
5
1465
  style={
@@ -1385,7 +2845,7 @@ exports[`LineChart should render 1`] = `
1385
2845
  />
1386
2846
  </RNSVGGroup>
1387
2847
  <RNSVGPath
1388
- accessibilityLabel="chart-line-maxValue:6,minValue:1,labelsLength:3"
2848
+ accessibilityLabel="chart-line-maxValue:6,minValue:1,labelsLength:3,color:#c38cee"
1389
2849
  d="M39,-44L36.5,-42.533C34,-41.067,29,-38.133,24,-35.2C19,-32.267,14,-29.333,11.5,-27.867L9,-26.4"
1390
2850
  fill={null}
1391
2851
  propList={
@@ -1406,10 +2866,10 @@ exports[`LineChart should render 1`] = `
1406
2866
  strokeLinecap={1}
1407
2867
  strokeLinejoin={1}
1408
2868
  strokeWidth={2}
1409
- testID="line-path"
2869
+ testID="line-Series 1"
1410
2870
  />
1411
2871
  <RNSVGPath
1412
- accessibilityLabel="chart-line-maxValue:6,minValue:1,labelsLength:3"
2872
+ accessibilityLabel="chart-line-maxValue:6,minValue:1,labelsLength:3,color:#1dbeee"
1413
2873
  d="M39,-17.6L36.5,-16.133C34,-14.667,29,-11.733,24,-8.8C19,-5.867,14,-2.933,11.5,-1.467L9,0"
1414
2874
  fill={null}
1415
2875
  propList={
@@ -1430,7 +2890,7 @@ exports[`LineChart should render 1`] = `
1430
2890
  strokeLinecap={1}
1431
2891
  strokeLinejoin={1}
1432
2892
  strokeWidth={2}
1433
- testID="line-path"
2893
+ testID="line-Series 2"
1434
2894
  />
1435
2895
  </RNSVGGroup>
1436
2896
  </RNSVGSvgView>