@tipp/ui 1.0.7 → 1.0.9
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/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.js +45 -45
- package/dist/atoms/pagination.js +2 -2
- package/dist/charts/chart.cjs +227 -0
- package/dist/charts/chart.cjs.map +1 -0
- package/dist/charts/chart.d.cts +179 -0
- package/dist/charts/chart.d.ts +179 -0
- package/dist/charts/chart.js +10 -0
- package/dist/charts/chart.js.map +1 -0
- package/dist/charts/horizontal-bar-chart.cjs +51 -0
- package/dist/charts/horizontal-bar-chart.cjs.map +1 -0
- package/dist/charts/horizontal-bar-chart.d.cts +17 -0
- package/dist/charts/horizontal-bar-chart.d.ts +17 -0
- package/dist/charts/horizontal-bar-chart.js +8 -0
- package/dist/charts/horizontal-bar-chart.js.map +1 -0
- package/dist/charts/index.cjs +254 -0
- package/dist/charts/index.cjs.map +1 -0
- package/dist/charts/index.d.cts +5 -0
- package/dist/charts/index.d.ts +5 -0
- package/dist/charts/index.js +14 -0
- package/dist/charts/index.js.map +1 -0
- package/dist/charts/vertical-bar-chart.cjs +48 -0
- package/dist/charts/vertical-bar-chart.cjs.map +1 -0
- package/dist/charts/vertical-bar-chart.d.cts +17 -0
- package/dist/charts/vertical-bar-chart.d.ts +17 -0
- package/dist/charts/vertical-bar-chart.js +8 -0
- package/dist/charts/vertical-bar-chart.js.map +1 -0
- package/dist/chunk-7QVMAHXH.js +24 -0
- package/dist/chunk-7QVMAHXH.js.map +1 -0
- package/dist/chunk-EUS56L3L.js +180 -0
- package/dist/chunk-EUS56L3L.js.map +1 -0
- package/dist/chunk-GKHTWD7W.js +24 -0
- package/dist/chunk-GKHTWD7W.js.map +1 -0
- package/dist/chunk-KD2BVMEX.js +119 -0
- package/dist/chunk-KD2BVMEX.js.map +1 -0
- package/dist/chunk-QOY42XM2.js +59 -0
- package/dist/chunk-QOY42XM2.js.map +1 -0
- package/dist/chunk-R6PYUH56.js +104 -0
- package/dist/chunk-R6PYUH56.js.map +1 -0
- package/dist/chunk-SDAJ6NLJ.js +24 -0
- package/dist/chunk-SDAJ6NLJ.js.map +1 -0
- package/dist/chunk-SGMO4KBC.js +27 -0
- package/dist/chunk-SGMO4KBC.js.map +1 -0
- package/dist/chunk-TG7PURWS.js +18 -0
- package/dist/chunk-TG7PURWS.js.map +1 -0
- package/dist/index.css +27 -0
- package/dist/index.js +51 -51
- package/dist/molecules/expand-table/index.js +21 -21
- package/dist/molecules/expand-table/row.js +19 -19
- package/dist/molecules/index.js +22 -22
- package/dist/molecules/navigation.js +20 -20
- package/package.json +18 -18
- package/src/charts/horizontal-bar-chart.tsx +35 -0
- package/src/charts/index.ts +2 -0
- /package/src/{chart → charts}/chart-theme.json +0 -0
- /package/src/{chart → charts}/chart.tsx +0 -0
package/package.json
CHANGED
|
@@ -1,19 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tipp/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
|
-
".": {
|
|
8
|
-
"require": {
|
|
9
|
-
"types": "./dist/index.d.ts",
|
|
10
|
-
"default": "./dist/index.cjs"
|
|
11
|
-
},
|
|
12
|
-
"import": {
|
|
13
|
-
"types": "./dist/index.d.ts",
|
|
14
|
-
"default": "./dist/index.js"
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
7
|
"./icon": {
|
|
18
8
|
"require": {
|
|
19
9
|
"types": "./dist/icon.d.ts",
|
|
@@ -34,14 +24,24 @@
|
|
|
34
24
|
"default": "./dist/theme/theme-provider.js"
|
|
35
25
|
}
|
|
36
26
|
},
|
|
37
|
-
"./
|
|
27
|
+
"./charts": {
|
|
38
28
|
"require": {
|
|
39
|
-
"types": "./dist/
|
|
40
|
-
"default": "./dist/
|
|
29
|
+
"types": "./dist/charts/index.d.ts",
|
|
30
|
+
"default": "./dist/charts/index.cjs"
|
|
41
31
|
},
|
|
42
32
|
"import": {
|
|
43
|
-
"types": "./dist/
|
|
44
|
-
"default": "./dist/
|
|
33
|
+
"types": "./dist/charts/index.d.ts",
|
|
34
|
+
"default": "./dist/charts/index.js"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
".": {
|
|
38
|
+
"require": {
|
|
39
|
+
"types": "./dist/index.d.ts",
|
|
40
|
+
"default": "./dist/index.cjs"
|
|
41
|
+
},
|
|
42
|
+
"import": {
|
|
43
|
+
"types": "./dist/index.d.ts",
|
|
44
|
+
"default": "./dist/index.js"
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
"./*": "./*"
|
|
@@ -83,8 +83,8 @@
|
|
|
83
83
|
"postcss-nesting": "12.0.2",
|
|
84
84
|
"tsup": "^8.0.2",
|
|
85
85
|
"typescript": "^5.3.3",
|
|
86
|
-
"@tipp/
|
|
87
|
-
"@tipp/
|
|
86
|
+
"@tipp/typescript-config": "0.0.4",
|
|
87
|
+
"@tipp/eslint-config": "0.2.3"
|
|
88
88
|
},
|
|
89
89
|
"scripts": {
|
|
90
90
|
"build": "pnpm run build:js & pnpm run build:css",
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
export interface HorizontalBarChartProps {
|
|
4
|
+
/** 100% 바가 뜻하는 전체 값 */
|
|
5
|
+
total: number;
|
|
6
|
+
/** 화면에 채워져보이는 값 */
|
|
7
|
+
value: number;
|
|
8
|
+
/** 배경 색상 */
|
|
9
|
+
backgroundColor?: string;
|
|
10
|
+
/** 바의 색상 */
|
|
11
|
+
barColor?: string;
|
|
12
|
+
/** 바의 높이 */
|
|
13
|
+
height?: number;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export function HorizontalBarChart(
|
|
17
|
+
props: HorizontalBarChartProps
|
|
18
|
+
): React.ReactNode {
|
|
19
|
+
const { total, value, backgroundColor, barColor, height } = props;
|
|
20
|
+
return (
|
|
21
|
+
<div
|
|
22
|
+
className="tipp_horizontal-bar-chart bar-wrapper"
|
|
23
|
+
style={{ height, backgroundColor }}
|
|
24
|
+
>
|
|
25
|
+
<div
|
|
26
|
+
style={{
|
|
27
|
+
width: `${Math.round((value / total) * 100)}%`,
|
|
28
|
+
height: '100%',
|
|
29
|
+
}}
|
|
30
|
+
>
|
|
31
|
+
<div className="bar" style={{ backgroundColor: barColor }} />
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
File without changes
|
|
File without changes
|