1mpacto-react-ui 2.0.17 → 2.0.18
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/package.json.cjs +1 -1
- package/dist/package.json.d.ts +1 -1
- package/dist/package.json.mjs +1 -1
- package/dist/src/components/Chart/PieChart.d.ts +3 -0
- package/dist/src/components/Chart/PieChart.stories.d.ts +147 -0
- package/dist/src/interfaces/components/Chart/index.d.ts +203 -0
- package/package.json +1 -1
package/dist/package.json.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="2.0.
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="2.0.18",o={version:e};exports.default=o;exports.version=e;
|
package/dist/package.json.d.ts
CHANGED
package/dist/package.json.mjs
CHANGED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { IPieChart } from '../../interfaces/components/Chart';
|
|
2
|
+
declare const PieChart: ({ data, height, classNameContainer, id, options, CustomTooltip, threshold, colors, valueFormat, hideLabelBelowPercentage, }: IPieChart) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export default PieChart;
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ data, height, classNameContainer, id, options, CustomTooltip, threshold, colors, valueFormat, hideLabelBelowPercentage, }: import('../../interfaces/components/Chart').IPieChart) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
parameters: {};
|
|
6
|
+
tags: string[];
|
|
7
|
+
argTypes: {
|
|
8
|
+
id: {
|
|
9
|
+
control: "text";
|
|
10
|
+
description: string;
|
|
11
|
+
table: {
|
|
12
|
+
category: string;
|
|
13
|
+
type: {
|
|
14
|
+
summary: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
data: {
|
|
19
|
+
control: "object";
|
|
20
|
+
description: string;
|
|
21
|
+
table: {
|
|
22
|
+
category: string;
|
|
23
|
+
type: {
|
|
24
|
+
summary: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
height: {
|
|
29
|
+
control: {
|
|
30
|
+
type: "number";
|
|
31
|
+
min: number;
|
|
32
|
+
step: number;
|
|
33
|
+
};
|
|
34
|
+
description: string;
|
|
35
|
+
table: {
|
|
36
|
+
category: string;
|
|
37
|
+
type: {
|
|
38
|
+
summary: string;
|
|
39
|
+
};
|
|
40
|
+
defaultValue: {
|
|
41
|
+
summary: string;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
classNameContainer: {
|
|
46
|
+
control: "text";
|
|
47
|
+
description: string;
|
|
48
|
+
table: {
|
|
49
|
+
category: string;
|
|
50
|
+
type: {
|
|
51
|
+
summary: string;
|
|
52
|
+
};
|
|
53
|
+
defaultValue: {
|
|
54
|
+
summary: string;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
colors: {
|
|
59
|
+
control: "object";
|
|
60
|
+
description: string;
|
|
61
|
+
table: {
|
|
62
|
+
category: string;
|
|
63
|
+
type: {
|
|
64
|
+
summary: string;
|
|
65
|
+
};
|
|
66
|
+
defaultValue: {
|
|
67
|
+
summary: string;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
options: {
|
|
72
|
+
control: "object";
|
|
73
|
+
description: string;
|
|
74
|
+
table: {
|
|
75
|
+
category: string;
|
|
76
|
+
type: {
|
|
77
|
+
summary: string;
|
|
78
|
+
};
|
|
79
|
+
defaultValue: {
|
|
80
|
+
summary: string;
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
threshold: {
|
|
85
|
+
control: "object";
|
|
86
|
+
description: string;
|
|
87
|
+
table: {
|
|
88
|
+
category: string;
|
|
89
|
+
type: {
|
|
90
|
+
summary: string;
|
|
91
|
+
};
|
|
92
|
+
defaultValue: {
|
|
93
|
+
summary: string;
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
valueFormat: {
|
|
98
|
+
control: "select";
|
|
99
|
+
options: string[];
|
|
100
|
+
description: string;
|
|
101
|
+
table: {
|
|
102
|
+
category: string;
|
|
103
|
+
type: {
|
|
104
|
+
summary: string;
|
|
105
|
+
};
|
|
106
|
+
defaultValue: {
|
|
107
|
+
summary: string;
|
|
108
|
+
};
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
hideLabelBelowPercentage: {
|
|
112
|
+
control: {
|
|
113
|
+
type: "number";
|
|
114
|
+
min: number;
|
|
115
|
+
step: number;
|
|
116
|
+
};
|
|
117
|
+
description: string;
|
|
118
|
+
table: {
|
|
119
|
+
category: string;
|
|
120
|
+
type: {
|
|
121
|
+
summary: string;
|
|
122
|
+
};
|
|
123
|
+
defaultValue: {
|
|
124
|
+
summary: string;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
CustomTooltip: {
|
|
129
|
+
control: false;
|
|
130
|
+
description: string;
|
|
131
|
+
table: {
|
|
132
|
+
category: string;
|
|
133
|
+
type: {
|
|
134
|
+
summary: string;
|
|
135
|
+
};
|
|
136
|
+
defaultValue: {
|
|
137
|
+
summary: string;
|
|
138
|
+
};
|
|
139
|
+
};
|
|
140
|
+
};
|
|
141
|
+
};
|
|
142
|
+
args: {};
|
|
143
|
+
render: (args: import('../../interfaces/components/Chart').IPieChart) => import("react/jsx-runtime").JSX.Element;
|
|
144
|
+
};
|
|
145
|
+
export default meta;
|
|
146
|
+
type Story = StoryObj<typeof meta>;
|
|
147
|
+
export declare const Default: Story;
|
|
@@ -206,7 +206,15 @@ export interface ILineChart {
|
|
|
206
206
|
*/
|
|
207
207
|
height?: number;
|
|
208
208
|
}
|
|
209
|
+
/**
|
|
210
|
+
* [ID] : Tipe skala untuk grafik garis gradien.
|
|
211
|
+
* [EN] : Scale type for gradient line chart.
|
|
212
|
+
*/
|
|
209
213
|
type TGradientLineChartScales = Record<string, Scale<CoreScaleOptions>>;
|
|
214
|
+
/**
|
|
215
|
+
* [ID] : Target gradien — latar belakang atau border.
|
|
216
|
+
* [EN] : Gradient target — background or border.
|
|
217
|
+
*/
|
|
210
218
|
type TGradientLineChartGradientFor = 'background' | 'border';
|
|
211
219
|
/**
|
|
212
220
|
* [ID] : Parameter untuk mengatur gradien grafik garis.
|
|
@@ -280,10 +288,15 @@ export interface TGetGradientLineParams {
|
|
|
280
288
|
* [EN] : Custom tooltip component type for gradient line chart.
|
|
281
289
|
*/
|
|
282
290
|
export type TGradientLineChartCustomTooltip = React.ComponentType<{
|
|
291
|
+
/** [ID] : Label tooltip. [EN] : Tooltip label. */
|
|
283
292
|
label: string;
|
|
293
|
+
/** [ID] : Nama dataset. [EN] : Dataset name. */
|
|
284
294
|
dataset: string;
|
|
295
|
+
/** [ID] : Nilai tooltip. [EN] : Tooltip value. */
|
|
285
296
|
value: number;
|
|
297
|
+
/** [ID] : Gaya CSS tooltip. [EN] : Tooltip CSS style. */
|
|
286
298
|
style: React.CSSProperties;
|
|
299
|
+
/** [ID] : Titik data tooltip. [EN] : Tooltip data points. */
|
|
287
300
|
dataPoints: TooltipItem<'line'>[];
|
|
288
301
|
}>;
|
|
289
302
|
/**
|
|
@@ -400,7 +413,15 @@ export interface IDataGradientLineChartCustomTooltip {
|
|
|
400
413
|
*/
|
|
401
414
|
dataPoints: TooltipItem<'line'>[];
|
|
402
415
|
}
|
|
416
|
+
/**
|
|
417
|
+
* [ID] : Tipe skala untuk grafik batang gradien.
|
|
418
|
+
* [EN] : Scale type for gradient bar chart.
|
|
419
|
+
*/
|
|
403
420
|
type TGradientBarChartScales = Record<string, Scale<CoreScaleOptions>>;
|
|
421
|
+
/**
|
|
422
|
+
* [ID] : Target gradien — latar belakang atau border.
|
|
423
|
+
* [EN] : Gradient target — background or border.
|
|
424
|
+
*/
|
|
404
425
|
type TGradientBarChartGradientFor = 'background' | 'border';
|
|
405
426
|
/**
|
|
406
427
|
* [ID] : Parameter untuk mengatur gradien grafik batang.
|
|
@@ -474,10 +495,15 @@ export interface TGetGradientBarParams {
|
|
|
474
495
|
* [EN] : Custom tooltip component type for gradient bar chart.
|
|
475
496
|
*/
|
|
476
497
|
export type TGradientBarChartCustomTooltip = React.ComponentType<{
|
|
498
|
+
/** [ID] : Label tooltip. [EN] : Tooltip label. */
|
|
477
499
|
label: string;
|
|
500
|
+
/** [ID] : Nama dataset. [EN] : Dataset name. */
|
|
478
501
|
dataset: string;
|
|
502
|
+
/** [ID] : Nilai tooltip. [EN] : Tooltip value. */
|
|
479
503
|
value: number;
|
|
504
|
+
/** [ID] : Gaya CSS tooltip. [EN] : Tooltip CSS style. */
|
|
480
505
|
style: React.CSSProperties;
|
|
506
|
+
/** [ID] : Titik data tooltip. [EN] : Tooltip data points. */
|
|
481
507
|
dataPoints: TooltipItem<'bar'>[];
|
|
482
508
|
}>;
|
|
483
509
|
/**
|
|
@@ -609,4 +635,181 @@ export interface IDataGradientBarChartCustomTooltip {
|
|
|
609
635
|
*/
|
|
610
636
|
dataPoints: TooltipItem<'bar'>[];
|
|
611
637
|
}
|
|
638
|
+
/**
|
|
639
|
+
* [ID] : Item data individual untuk grafik pie.
|
|
640
|
+
* [EN] : Individual data item for pie chart.
|
|
641
|
+
*/
|
|
642
|
+
export interface IPieChartDataItem {
|
|
643
|
+
/**
|
|
644
|
+
* [ID] : Label data.
|
|
645
|
+
* [EN] : Data label.
|
|
646
|
+
*/
|
|
647
|
+
label: string;
|
|
648
|
+
/**
|
|
649
|
+
* [ID] : Nilai data.
|
|
650
|
+
* [EN] : Data value.
|
|
651
|
+
*/
|
|
652
|
+
value: number;
|
|
653
|
+
/**
|
|
654
|
+
* [ID] : Warna latar belakang (opsional, jika tidak disediakan akan digenerate random).
|
|
655
|
+
* [EN] : Background color (optional, if not provided will be randomly generated).
|
|
656
|
+
*/
|
|
657
|
+
backgroundColor?: string;
|
|
658
|
+
/**
|
|
659
|
+
* [ID] : Properti dinamis lainnya.
|
|
660
|
+
* [EN] : Other dynamic properties.
|
|
661
|
+
*/
|
|
662
|
+
[key: string]: unknown;
|
|
663
|
+
}
|
|
664
|
+
/**
|
|
665
|
+
* [ID] : Konfigurasi threshold untuk pengelompokan data kecil ke slice "Other".
|
|
666
|
+
* [EN] : Threshold configuration for grouping small data into "Other" slice.
|
|
667
|
+
*/
|
|
668
|
+
export interface IPieChartThreshold {
|
|
669
|
+
/**
|
|
670
|
+
* [ID] : Mode threshold — 'percentage' untuk persentase dari total, 'value' untuk nilai absolut.
|
|
671
|
+
* [EN] : Threshold mode — 'percentage' for percentage of total, 'value' for absolute value.
|
|
672
|
+
*/
|
|
673
|
+
mode: 'percentage' | 'value';
|
|
674
|
+
/**
|
|
675
|
+
* [ID] : Nilai threshold. Data di bawah nilai ini akan digabung ke "Other".
|
|
676
|
+
* [EN] : Threshold value. Data below this value will be grouped into "Other".
|
|
677
|
+
*/
|
|
678
|
+
value: number;
|
|
679
|
+
/**
|
|
680
|
+
* [ID] : Label untuk slice "Other" (default: "Other").
|
|
681
|
+
* [EN] : Label for "Other" slice (default: "Other").
|
|
682
|
+
*/
|
|
683
|
+
otherLabel?: string;
|
|
684
|
+
/**
|
|
685
|
+
* [ID] : Warna latar belakang untuk slice "Other" (opsional).
|
|
686
|
+
* [EN] : Background color for "Other" slice (optional).
|
|
687
|
+
*/
|
|
688
|
+
otherBackgroundColor?: string;
|
|
689
|
+
}
|
|
690
|
+
/**
|
|
691
|
+
* [ID] : Tipe komponen tooltip kustom untuk grafik pie.
|
|
692
|
+
* [EN] : Custom tooltip component type for pie chart.
|
|
693
|
+
*/
|
|
694
|
+
export type TPieChartCustomTooltip = React.ComponentType<{
|
|
695
|
+
/** [ID] : Label tooltip. [EN] : Tooltip label. */
|
|
696
|
+
label: string;
|
|
697
|
+
/** [ID] : Nilai mentah tooltip. [EN] : Raw tooltip value. */
|
|
698
|
+
value: number;
|
|
699
|
+
/** [ID] : Persentase tooltip. [EN] : Tooltip percentage. */
|
|
700
|
+
percentage: number;
|
|
701
|
+
/** [ID] : Nilai yang sudah diformat. [EN] : Formatted value. */
|
|
702
|
+
formattedValue: string;
|
|
703
|
+
/** [ID] : Warna latar belakang slice. [EN] : Slice background color. */
|
|
704
|
+
backgroundColor: string;
|
|
705
|
+
/** [ID] : Item yang digabung ke slice ini (hanya pada "Other"). */
|
|
706
|
+
/** [EN] : Items merged into this slice (only on "Other"). */
|
|
707
|
+
mergedItems: IPieChartDataItem[];
|
|
708
|
+
/** [ID] : Gaya CSS tooltip. [EN] : Tooltip CSS style. */
|
|
709
|
+
style: React.CSSProperties;
|
|
710
|
+
/** [ID] : Titik data tooltip. [EN] : Tooltip data points. */
|
|
711
|
+
dataPoints: TooltipItem<'pie'>[];
|
|
712
|
+
}>;
|
|
713
|
+
/**
|
|
714
|
+
* [ID] : Interface untuk komponen grafik pie.
|
|
715
|
+
* [EN] : Interface for pie chart component.
|
|
716
|
+
*/
|
|
717
|
+
export interface IPieChart {
|
|
718
|
+
/**
|
|
719
|
+
* [ID] : Data grafik pie.
|
|
720
|
+
* [EN] : Pie chart data.
|
|
721
|
+
*/
|
|
722
|
+
data: IPieChartDataItem[];
|
|
723
|
+
/**
|
|
724
|
+
* [ID] : ID grafik.
|
|
725
|
+
* [EN] : Chart ID.
|
|
726
|
+
*/
|
|
727
|
+
id: string;
|
|
728
|
+
/**
|
|
729
|
+
* [ID] : Opsi grafik (opsional).
|
|
730
|
+
* [EN] : Chart options (optional).
|
|
731
|
+
*/
|
|
732
|
+
options?: ChartOptions<'pie'>;
|
|
733
|
+
/**
|
|
734
|
+
* [ID] : Nama kelas CSS kontainer (opsional).
|
|
735
|
+
* [EN] : Container CSS class name (optional).
|
|
736
|
+
*/
|
|
737
|
+
classNameContainer?: string;
|
|
738
|
+
/**
|
|
739
|
+
* [ID] : Tinggi grafik (opsional).
|
|
740
|
+
* [EN] : Chart height (optional).
|
|
741
|
+
*/
|
|
742
|
+
height?: number;
|
|
743
|
+
/**
|
|
744
|
+
* [ID] : Tooltip kustom (opsional).
|
|
745
|
+
* [EN] : Custom tooltip (optional).
|
|
746
|
+
*/
|
|
747
|
+
CustomTooltip?: TPieChartCustomTooltip;
|
|
748
|
+
/**
|
|
749
|
+
* [ID] : Konfigurasi threshold untuk pengelompokan data kecil (opsional).
|
|
750
|
+
* [EN] : Threshold configuration for grouping small data (optional).
|
|
751
|
+
*/
|
|
752
|
+
threshold?: IPieChartThreshold;
|
|
753
|
+
/**
|
|
754
|
+
* [ID] : Array warna kustom untuk slice pie (opsional, jika tidak disediakan akan random).
|
|
755
|
+
* [EN] : Custom color array for pie slices (optional, if not provided will be random).
|
|
756
|
+
*/
|
|
757
|
+
colors?: string[];
|
|
758
|
+
/**
|
|
759
|
+
* [ID] : Format tampilan nilai — 'percentage', 'decimal', atau 'currency' (default: 'percentage').
|
|
760
|
+
* [EN] : Value display format — 'percentage', 'decimal', or 'currency' (default: 'percentage').
|
|
761
|
+
*/
|
|
762
|
+
valueFormat?: 'percentage' | 'decimal' | 'currency';
|
|
763
|
+
/**
|
|
764
|
+
* [ID] : Persentase minimum untuk menampilkan label pada slice (default: 5). Slice di bawah nilai ini disembunyikan.
|
|
765
|
+
* [EN] : Minimum percentage to show label on slice (default: 5). Slices below this value are hidden.
|
|
766
|
+
*/
|
|
767
|
+
hideLabelBelowPercentage?: number;
|
|
768
|
+
}
|
|
769
|
+
/**
|
|
770
|
+
* [ID] : Interface untuk data tooltip kustom grafik pie.
|
|
771
|
+
* [EN] : Interface for pie chart custom tooltip data.
|
|
772
|
+
*/
|
|
773
|
+
export interface IDataPieChartCustomTooltip {
|
|
774
|
+
/**
|
|
775
|
+
* [ID] : Gaya CSS.
|
|
776
|
+
* [EN] : CSS style.
|
|
777
|
+
*/
|
|
778
|
+
style: React.CSSProperties;
|
|
779
|
+
/**
|
|
780
|
+
* [ID] : Label tooltip.
|
|
781
|
+
* [EN] : Tooltip label.
|
|
782
|
+
*/
|
|
783
|
+
label: string;
|
|
784
|
+
/**
|
|
785
|
+
* [ID] : Nilai tooltip.
|
|
786
|
+
* [EN] : Tooltip value.
|
|
787
|
+
*/
|
|
788
|
+
value: number;
|
|
789
|
+
/**
|
|
790
|
+
* [ID] : Persentase tooltip.
|
|
791
|
+
* [EN] : Tooltip percentage.
|
|
792
|
+
*/
|
|
793
|
+
percentage: number;
|
|
794
|
+
/**
|
|
795
|
+
* [ID] : Nilai yang sudah diformat sesuai valueFormat.
|
|
796
|
+
* [EN] : Formatted value according to valueFormat.
|
|
797
|
+
*/
|
|
798
|
+
formattedValue: string;
|
|
799
|
+
/**
|
|
800
|
+
* [ID] : Warna latar belakang tooltip.
|
|
801
|
+
* [EN] : Tooltip background color.
|
|
802
|
+
*/
|
|
803
|
+
backgroundColor: string;
|
|
804
|
+
/**
|
|
805
|
+
* [ID] : Item-item yang digabung ke slice ini (hanya ada pada slice "Other" hasil threshold).
|
|
806
|
+
* [EN] : Items merged into this slice (only present on "Other" slice from threshold).
|
|
807
|
+
*/
|
|
808
|
+
mergedItems: IPieChartDataItem[];
|
|
809
|
+
/**
|
|
810
|
+
* [ID] : Titik data tooltip.
|
|
811
|
+
* [EN] : Tooltip data points.
|
|
812
|
+
*/
|
|
813
|
+
dataPoints: TooltipItem<'pie'>[];
|
|
814
|
+
}
|
|
612
815
|
export {};
|