>(
63 | ({ className, ...props }, ref) => (
64 | [role=checkbox]]:translate-y-[2px]', className)}
67 | {...props}
68 | />
69 | )
70 | )
71 | TableCell.displayName = 'TableCell'
72 |
73 | const TableCaption = React.forwardRef>(
74 | ({ className, ...props }, ref) => (
75 | = {
100 | cx: circleSize / 2,
101 | cy: circleSize / 2,
102 | r: radius,
103 | strokeLinecap: 'round',
104 | strokeLinejoin: 'round',
105 | strokeDashoffset: 0,
106 | strokeWidth,
107 | shapeRendering: 'geometricPrecision'
108 | }
109 |
110 | return (
111 |
121 | {/*secondary*/}
122 |
154 | {Math.round(value)}
155 |
156 | )}
157 |
158 | )
159 | }
160 |
--------------------------------------------------------------------------------
/packages/gauge/src/index.types.ts:
--------------------------------------------------------------------------------
1 | import type { SVGProps } from 'react';
2 |
3 | export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
4 |
5 | export interface GaugeProps extends SVGProps {
6 | value: number;
7 | size?: Size | number | string;
8 | gapPercent?: number;
9 | strokeWidth?: number;
10 | variant?: 'ascending' | 'descending';
11 | showValue?: boolean;
12 | showAnimation?: boolean;
13 | primary?: string | { [key: number]: string };
14 | secondary?: string | { [key: number]: string };
15 | }
16 |
--------------------------------------------------------------------------------
/packages/gauge/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import type { Size } from '../index.types'
2 |
3 | export const calculatePrimaryStrokeDasharray = (
4 | strokePercent: number,
5 | offsetFactor: number,
6 | gapPercent: number,
7 | circumference: number
8 | ) => {
9 | const percentToPx = circumference / 100 // px
10 |
11 | if (offsetFactor > 0 && strokePercent > 100 - gapPercent * 2 * offsetFactor) {
12 | // Calculation to gradually shift back to 0 offset as progress nears 100% when offsetFactor > 0
13 | const subtract = -strokePercent + 100
14 |
15 | return `${Math.max(strokePercent * percentToPx - subtract * percentToPx, 0)} ${circumference}`
16 | } else {
17 | const subtract = gapPercent * 2 * offsetFactor
18 |
19 | return `${Math.max(strokePercent * percentToPx - subtract * percentToPx, 0)} ${circumference}`
20 | }
21 | }
22 |
23 | export const calculateSecondaryStrokeDasharray = (
24 | strokePercent: number,
25 | offsetFactorSecondary: number,
26 | gapPercent: number,
27 | circumference: number
28 | ) => {
29 | const percentToPx = circumference / 100 // px
30 |
31 | if (offsetFactorSecondary < 1 && strokePercent < gapPercent * 2 * offsetFactorSecondary) {
32 | // Calculation to gradually shift back to 1 secondary offset as progress nears 100% when offsetFactorSecondary < 1
33 | const subtract = strokePercent
34 |
35 | return `${Math.max((100 - strokePercent) * percentToPx - subtract * percentToPx, 0)} ${circumference}`
36 | } else {
37 | const subtract = gapPercent * 2 * offsetFactorSecondary
38 |
39 | return `${Math.max((100 - strokePercent) * percentToPx - subtract * percentToPx, 0)} ${circumference}`
40 | }
41 | }
42 |
43 | export const calculatePrimaryTransform = (
44 | strokePercent: number,
45 | offsetFactor: number,
46 | gapPercent: number,
47 | isAscendingVariant: boolean
48 | ) => {
49 | const percentToDegree = 360 / 100 // deg
50 |
51 | if (offsetFactor > 0 && strokePercent > 100 - gapPercent * 2 * offsetFactor) {
52 | // Calculation to gradually shift back to 0 offset as progress nears 100% when offsetFactor > 0
53 | const add = 0.5 * (-strokePercent + 100)
54 | const rotateDegValue = -90 + add * percentToDegree
55 |
56 | return isAscendingVariant ? `rotate(${rotateDegValue}deg)` : `rotate(${-1 * rotateDegValue}deg) scaleX(-1)`
57 | } else {
58 | const add = gapPercent * offsetFactor
59 | const rotateDegValue = -90 + add * percentToDegree
60 |
61 | return isAscendingVariant ? `rotate(${rotateDegValue}deg)` : `rotate(${-1 * rotateDegValue}deg) scaleX(-1)`
62 | }
63 | }
64 |
65 | export const calculateSecondaryTransform = (
66 | strokePercent: number,
67 | offsetFactorSecondary: number,
68 | gapPercent: number,
69 | isAscendingVariant: boolean
70 | ) => {
71 | const percentToDegree = 360 / 100 // deg
72 |
73 | if (offsetFactorSecondary < 1 && strokePercent < gapPercent * 2 * offsetFactorSecondary) {
74 | // Calculation to gradually shift back to 1 secondary offset as progress nears 100% when offsetFactorSecondary < 1
75 | const subtract = 0.5 * strokePercent
76 | const rotateDegValue = -90 + subtract * percentToDegree
77 |
78 | return isAscendingVariant
79 | ? `rotate(${rotateDegValue}deg) scaleY(-1)`
80 | : `rotate(${-1 * rotateDegValue}deg) scaleY(-1) scaleX(-1)`
81 | } else {
82 | const subtract = gapPercent * offsetFactorSecondary
83 | const rotateDegValue = 360 - 90 - subtract * percentToDegree
84 |
85 | return isAscendingVariant
86 | ? `rotate(${rotateDegValue}deg) scaleY(-1)`
87 | : `rotate(${-1 * rotateDegValue}deg) scaleY(-1) scaleX(-1)`
88 | }
89 | }
90 |
91 | const checkCustomColorRange = (color: Record, strokePercent: number) => {
92 | const colorKeys = Object.keys(color).sort((a, b) => Number(a) - Number(b))
93 | let stroke = ''
94 |
95 | for (let i = 0; i < colorKeys.length; i++) {
96 | const currentKey = Number(colorKeys[i])
97 | const nextKey = Number(colorKeys[i + 1])
98 |
99 | if (strokePercent >= currentKey && (strokePercent < nextKey || !nextKey)) {
100 | stroke = color[currentKey]
101 | break
102 | }
103 | }
104 |
105 | return stroke
106 | }
107 |
108 | export const calculatePrimaryStroke = (primary: string | Record, strokePercent: number) => {
109 | if (!primary) {
110 | // Default red --> amber --> blue --> green
111 | return strokePercent <= 25
112 | ? 'hsl(358 75% 59%)'
113 | : strokePercent <= 50
114 | ? 'hsl(39 100% 57%)'
115 | : strokePercent <= 75
116 | ? 'hsl(212 100% 48%)'
117 | : 'hsl(131 41% 46%)'
118 | } else if (typeof primary === 'string') {
119 | // Specific default color or custom color
120 | return primary
121 | } else if (typeof primary === 'object') {
122 | // Custom color range
123 | return checkCustomColorRange(primary, strokePercent)
124 | }
125 | }
126 |
127 | export const calculateSecondaryStroke = (secondary: string | Record, strokePercent: number) => {
128 | if (!secondary) {
129 | // Default gray
130 | return 'hsl(0 0% 92%)'
131 | } else if (typeof secondary === 'string') {
132 | // Specific default color or custom color
133 | return secondary
134 | } else if (typeof secondary === 'object') {
135 | // Custom color range
136 | return checkCustomColorRange(secondary, 100 - strokePercent)
137 | }
138 | }
139 |
140 | export const calculatePrimaryOpacity = (
141 | offsetFactor: number,
142 | strokePercent: number,
143 | gapPercent: number,
144 | offsetFactorSecondary: number
145 | ) => {
146 | if (
147 | offsetFactor > 0 &&
148 | strokePercent < gapPercent * 2 * offsetFactor &&
149 | strokePercent < gapPercent * 2 * offsetFactorSecondary
150 | ) {
151 | return 0
152 | } else return 1
153 | }
154 |
155 | export const calculateSecondaryOpacity = (
156 | offsetFactor: number,
157 | strokePercent: number,
158 | gapPercent: number,
159 | offsetFactorSecondary: number
160 | ) => {
161 | if (
162 | (offsetFactor === 0 && strokePercent > 100 - gapPercent * 2) ||
163 | (offsetFactor > 0 &&
164 | strokePercent > 100 - gapPercent * 2 * offsetFactor &&
165 | strokePercent > 100 - gapPercent * 2 * offsetFactorSecondary)
166 | ) {
167 | return 0
168 | } else return 1
169 | }
170 |
171 | export const sizeConfig: Record = {
172 | xs: {
173 | size: 32
174 | },
175 | sm: {
176 | size: 48
177 | },
178 | md: {
179 | size: 72
180 | },
181 | lg: {
182 | size: 96
183 | },
184 | xl: {
185 | size: 120
186 | },
187 | '2xl': {
188 | size: 144
189 | }
190 | }
191 |
--------------------------------------------------------------------------------
/packages/gauge/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react",
4 | "target": "es2018",
5 | "moduleResolution": "node",
6 | "esModuleInterop": true,
7 | "lib": ["es2016", "dom"]
8 | },
9 | "include": ["src"],
10 | "exclude": ["node_modules", "dist"]
11 | }
12 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'apps/*'
3 | - 'packages/*'
4 |
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 | "extends": [
4 | "config:recommended"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "pipeline": {
4 | "build": {
5 | "dependsOn": ["^build"],
6 | "outputs": ["dist/**", ".next/**"]
7 | },
8 | "dev": {
9 | "cache": false,
10 | "persistent": true
11 | }
12 | },
13 | "extends": ["//"]
14 | }
15 |
--------------------------------------------------------------------------------