@quillsql/react 1.0.2 → 1.0.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/example/src/App.tsx +7 -3
- package/lib/BarList.d.ts +3 -0
- package/lib/BarList.js +68 -27
- package/lib/BarList.js.map +1 -1
- package/lib/Chart.js +29 -11
- package/lib/Chart.js.map +1 -1
- package/lib/Dashboard.js +86 -56
- package/lib/Dashboard.js.map +1 -1
- package/package.json +1 -1
- package/src/BarList.tsx +181 -57
- package/src/Chart.tsx +61 -6
- package/src/Dashboard.tsx +148 -106
- package/tailwind.config.js +4 -1
package/lib/Dashboard.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dashboard.js","sourceRoot":"","sources":["../src/Dashboard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EACL,aAAa,EAGb,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Dashboard.js","sourceRoot":"","sources":["../src/Dashboard.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/BarList.tsx
CHANGED
|
@@ -81,6 +81,9 @@ export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
81
81
|
xAxisField: string;
|
|
82
82
|
chartType: string;
|
|
83
83
|
yAxisFields: YAxisField[];
|
|
84
|
+
containerStyle: any;
|
|
85
|
+
colors: string[];
|
|
86
|
+
theme: any;
|
|
84
87
|
}
|
|
85
88
|
function makeBarListClassName(componentName: string) {
|
|
86
89
|
return (className: string) => {
|
|
@@ -93,26 +96,190 @@ const valueFormatter = (number: number) => {
|
|
|
93
96
|
return number.toFixed(0);
|
|
94
97
|
};
|
|
95
98
|
|
|
99
|
+
function hexToRgbaWith10PercentAlpha(hex) {
|
|
100
|
+
// Convert the hex color to RGB
|
|
101
|
+
let r = parseInt(hex.slice(1, 3), 16);
|
|
102
|
+
let g = parseInt(hex.slice(3, 5), 16);
|
|
103
|
+
let b = parseInt(hex.slice(5, 7), 16);
|
|
104
|
+
|
|
105
|
+
// Set the alpha value to 10%
|
|
106
|
+
let alpha = 0.1;
|
|
107
|
+
|
|
108
|
+
// Return the color as an rgba string
|
|
109
|
+
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
110
|
+
}
|
|
111
|
+
|
|
96
112
|
const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
97
113
|
const {
|
|
98
114
|
data = [],
|
|
99
115
|
yAxisFields,
|
|
100
116
|
xAxisField,
|
|
101
|
-
|
|
117
|
+
colors,
|
|
102
118
|
// valueFormatter = (value: any) => value,valueFormatter
|
|
103
119
|
showAnimation = true,
|
|
104
120
|
className,
|
|
121
|
+
containerStyle,
|
|
122
|
+
theme,
|
|
105
123
|
...other
|
|
106
124
|
} = props;
|
|
107
125
|
|
|
108
|
-
const widths = getWidthsFromValues(
|
|
126
|
+
const widths = getWidthsFromValues(
|
|
127
|
+
data.map(item => item[yAxisFields[0].field])
|
|
128
|
+
);
|
|
109
129
|
|
|
110
|
-
const
|
|
130
|
+
const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1;
|
|
131
|
+
|
|
132
|
+
if (yAxisFields.length > 1) {
|
|
133
|
+
const widths2 = getWidthsFromValues(
|
|
134
|
+
data.map(item => item[yAxisFields[1].field])
|
|
135
|
+
);
|
|
136
|
+
return (
|
|
137
|
+
<div
|
|
138
|
+
ref={ref}
|
|
139
|
+
style={{
|
|
140
|
+
width: '100%',
|
|
141
|
+
marginLeft: 25,
|
|
142
|
+
// background: 'red',
|
|
143
|
+
marginTop: 20,
|
|
144
|
+
paddingRight: 25,
|
|
145
|
+
overflow: 'hidden',
|
|
146
|
+
}}
|
|
147
|
+
className={twMerge(
|
|
148
|
+
// makeBarListClassName('root'),
|
|
149
|
+
'flex justify-between',
|
|
150
|
+
'space-x-6',
|
|
151
|
+
className
|
|
152
|
+
)}
|
|
153
|
+
{...other}
|
|
154
|
+
>
|
|
155
|
+
<div
|
|
156
|
+
// className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
|
|
157
|
+
className="relative-w-full bg-[#212121]"
|
|
158
|
+
style={{ width: '100%' }}
|
|
159
|
+
>
|
|
160
|
+
{data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
|
|
161
|
+
// const Icon = item.icon;
|
|
162
|
+
const Icon = null;
|
|
163
|
+
|
|
164
|
+
return (
|
|
165
|
+
<div className="flex flex-row items-center">
|
|
166
|
+
<div
|
|
167
|
+
title={item[xAxisField]}
|
|
168
|
+
style={{ maxWidth: 130, minWidth: 130, overflow: 'hidden' }}
|
|
169
|
+
>
|
|
170
|
+
<p
|
|
171
|
+
className={twMerge(
|
|
172
|
+
// makeBarListClassName('barText'),
|
|
173
|
+
'whitespace-nowrap truncate',
|
|
174
|
+
'text-gray-500',
|
|
175
|
+
'text-sm'
|
|
176
|
+
)}
|
|
177
|
+
>
|
|
178
|
+
{item[xAxisField]}
|
|
179
|
+
</p>
|
|
180
|
+
</div>
|
|
181
|
+
<div style={{ width: '100%' }} className="flex flex-col">
|
|
182
|
+
<div
|
|
183
|
+
key={item.name}
|
|
184
|
+
className={`flex items-center h-9 rounded mb-2`}
|
|
185
|
+
style={{
|
|
186
|
+
width: `${widths[idx]}%`,
|
|
187
|
+
transition: showAnimation ? 'all 2s' : '',
|
|
188
|
+
backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
|
|
189
|
+
}}
|
|
190
|
+
>
|
|
191
|
+
<div
|
|
192
|
+
className={twMerge('absolute max-w-full flex', 'ml-2')}
|
|
193
|
+
>
|
|
194
|
+
<p
|
|
195
|
+
className={twMerge(
|
|
196
|
+
// makeBarListClassName('barText'),
|
|
197
|
+
'whitespace-nowrap truncate',
|
|
198
|
+
'text-gray-500',
|
|
199
|
+
'text-sm'
|
|
200
|
+
)}
|
|
201
|
+
>
|
|
202
|
+
{yAxisFields[0].label}
|
|
203
|
+
</p>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
<div
|
|
207
|
+
key={item.name}
|
|
208
|
+
className={`flex items-center h-9 rounded mb-2`}
|
|
209
|
+
style={{
|
|
210
|
+
width: `${widths2[idx]}%`,
|
|
211
|
+
transition: showAnimation ? 'all 2s' : '',
|
|
212
|
+
backgroundColor: hexToRgbaWith10PercentAlpha(colors[1]),
|
|
213
|
+
}}
|
|
214
|
+
>
|
|
215
|
+
<div
|
|
216
|
+
className={twMerge('absolute max-w-full flex', 'ml-2')}
|
|
217
|
+
>
|
|
218
|
+
<p
|
|
219
|
+
className={twMerge(
|
|
220
|
+
// makeBarListClassName('barText'),
|
|
221
|
+
'whitespace-nowrap truncate',
|
|
222
|
+
'text-gray-500',
|
|
223
|
+
'text-sm'
|
|
224
|
+
)}
|
|
225
|
+
>
|
|
226
|
+
{yAxisFields[1].label}
|
|
227
|
+
{/* {item[xAxisField]} */}
|
|
228
|
+
</p>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
);
|
|
234
|
+
})}
|
|
235
|
+
{data.length > NUM_TO_SHOW && (
|
|
236
|
+
<div style={{ color: theme.chartLabelColor }} className="text-sm">
|
|
237
|
+
...{data.length - NUM_TO_SHOW} more
|
|
238
|
+
</div>
|
|
239
|
+
)}
|
|
240
|
+
</div>
|
|
241
|
+
{/* eslint-disable prettier/prettier */}
|
|
242
|
+
<div
|
|
243
|
+
className={(makeBarListClassName('labels'), 'text-right min-w-min')}
|
|
244
|
+
>
|
|
245
|
+
{data.slice(0, NUM_TO_SHOW).map((item, idx) => (
|
|
246
|
+
<div
|
|
247
|
+
key={item[xAxisField]}
|
|
248
|
+
className={twMerge(
|
|
249
|
+
makeBarListClassName('labelWrapper'),
|
|
250
|
+
'flex justify-end items-center',
|
|
251
|
+
'h-9',
|
|
252
|
+
idx === data.length - 1 ? 'mb-0' : 'mb-2'
|
|
253
|
+
)}
|
|
254
|
+
>
|
|
255
|
+
<p
|
|
256
|
+
className={twMerge(
|
|
257
|
+
makeBarListClassName('labelText'),
|
|
258
|
+
'whitespace-nowrap truncate',
|
|
259
|
+
'text-gray-500',
|
|
260
|
+
'text-sm'
|
|
261
|
+
)}
|
|
262
|
+
>
|
|
263
|
+
{valueFormatter(item[yAxisFields[0].field])}
|
|
264
|
+
</p>
|
|
265
|
+
</div>
|
|
266
|
+
))}
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
);
|
|
270
|
+
}
|
|
111
271
|
|
|
112
272
|
return (
|
|
113
273
|
<div
|
|
114
274
|
ref={ref}
|
|
115
|
-
style={{
|
|
275
|
+
style={{
|
|
276
|
+
width: '100%',
|
|
277
|
+
marginLeft: 25,
|
|
278
|
+
// background: 'red',
|
|
279
|
+
marginTop: 20,
|
|
280
|
+
paddingRight: 25,
|
|
281
|
+
overflow: 'hidden',
|
|
282
|
+
}}
|
|
116
283
|
className={twMerge(
|
|
117
284
|
// makeBarListClassName('root'),
|
|
118
285
|
'flex justify-between',
|
|
@@ -126,27 +293,18 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
126
293
|
className="relative-w-full bg-[#212121]"
|
|
127
294
|
style={{ width: '100%' }}
|
|
128
295
|
>
|
|
129
|
-
{data.map((item, idx) => {
|
|
296
|
+
{data.slice(0, NUM_TO_SHOW).map((item, idx) => {
|
|
130
297
|
// const Icon = item.icon;
|
|
131
298
|
const Icon = null;
|
|
132
299
|
|
|
133
300
|
return (
|
|
134
301
|
<div
|
|
135
|
-
// key={item.key ?? item.name}
|
|
136
302
|
key={item.name}
|
|
137
303
|
className={`flex items-center h-9 rounded mb-2`}
|
|
138
|
-
// className={twMerge(
|
|
139
|
-
// // makeBarListClassName('bar'),
|
|
140
|
-
// 'flex items-center',
|
|
141
|
-
// rowHeight,
|
|
142
|
-
// 'bg-black',
|
|
143
|
-
// 'rounded',
|
|
144
|
-
// idx === data.length - 1 ? 'mb-0' : 'mb-2'
|
|
145
|
-
// )}
|
|
146
304
|
style={{
|
|
147
305
|
width: `${widths[idx]}%`,
|
|
148
306
|
transition: showAnimation ? 'all 2s' : '',
|
|
149
|
-
backgroundColor:
|
|
307
|
+
backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
|
|
150
308
|
}}
|
|
151
309
|
>
|
|
152
310
|
<div className={twMerge('absolute max-w-full flex', 'ml-2')}>
|
|
@@ -158,61 +316,27 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
|
|
|
158
316
|
'text-sm'
|
|
159
317
|
)}
|
|
160
318
|
>
|
|
161
|
-
{item
|
|
319
|
+
{item[xAxisField]}
|
|
162
320
|
</p>
|
|
163
|
-
{/* {Icon ? (
|
|
164
|
-
<Icon
|
|
165
|
-
className={twMerge(
|
|
166
|
-
makeBarListClassName('barIcon'),
|
|
167
|
-
'flex-none',
|
|
168
|
-
'h-5',
|
|
169
|
-
'w-5',
|
|
170
|
-
'mr-2.5',
|
|
171
|
-
'text-gray-400'
|
|
172
|
-
)}
|
|
173
|
-
aria-hidden="true"
|
|
174
|
-
/>
|
|
175
|
-
) : null} */}
|
|
176
|
-
{/* {item.href ? (
|
|
177
|
-
<a
|
|
178
|
-
href={item.href}
|
|
179
|
-
target={item.target ?? '_blank'}
|
|
180
|
-
rel="noreferrer"
|
|
181
|
-
className={twMerge(
|
|
182
|
-
makeBarListClassName('barLink'),
|
|
183
|
-
'whitespace-nowrap truncate text-blue-500',
|
|
184
|
-
'no-underline hover:underline visited:text-blue-500',
|
|
185
|
-
'text-sm'
|
|
186
|
-
)}
|
|
187
|
-
>
|
|
188
|
-
{item.name}
|
|
189
|
-
</a>
|
|
190
|
-
) : (
|
|
191
|
-
<p
|
|
192
|
-
className={twMerge(
|
|
193
|
-
makeBarListClassName('barText'),
|
|
194
|
-
'whitespace-nowrap truncate',
|
|
195
|
-
'text-gray-500',
|
|
196
|
-
'text-sm'
|
|
197
|
-
)}
|
|
198
|
-
>
|
|
199
|
-
{item.name}
|
|
200
|
-
</p>
|
|
201
|
-
)} */}
|
|
202
321
|
</div>
|
|
203
322
|
</div>
|
|
204
323
|
);
|
|
205
324
|
})}
|
|
325
|
+
{data.length > NUM_TO_SHOW && (
|
|
326
|
+
<div style={{ color: theme.chartLabelColor }} className="text-sm">
|
|
327
|
+
...{data.length - NUM_TO_SHOW} more
|
|
328
|
+
</div>
|
|
329
|
+
)}
|
|
206
330
|
</div>
|
|
207
331
|
{/* eslint-disable prettier/prettier */}
|
|
208
332
|
<div className={(makeBarListClassName('labels'), 'text-right min-w-min')}>
|
|
209
|
-
{data.map((item, idx) => (
|
|
333
|
+
{data.slice(0, NUM_TO_SHOW).map((item, idx) => (
|
|
210
334
|
<div
|
|
211
335
|
key={item[xAxisField]}
|
|
212
336
|
className={twMerge(
|
|
213
337
|
makeBarListClassName('labelWrapper'),
|
|
214
338
|
'flex justify-end items-center',
|
|
215
|
-
|
|
339
|
+
'h-9',
|
|
216
340
|
idx === data.length - 1 ? 'mb-0' : 'mb-2'
|
|
217
341
|
)}
|
|
218
342
|
>
|
package/src/Chart.tsx
CHANGED
|
@@ -381,6 +381,7 @@ const Chart = ({ chartId, colors, containerStyle }) => {
|
|
|
381
381
|
containerStyle={containerStyle}
|
|
382
382
|
colors={colors}
|
|
383
383
|
client={client}
|
|
384
|
+
theme={theme}
|
|
384
385
|
/>
|
|
385
386
|
);
|
|
386
387
|
};
|
|
@@ -494,7 +495,10 @@ const ChartUpdater: React.FC<ChartProps> = ({
|
|
|
494
495
|
|
|
495
496
|
if (!chartConfig || loading) {
|
|
496
497
|
return (
|
|
497
|
-
<div
|
|
498
|
+
<div
|
|
499
|
+
className="flex flex-col flex-1 h-[100%]"
|
|
500
|
+
style={{ ...containerStyle, marginLeft: 25 }}
|
|
501
|
+
>
|
|
498
502
|
<Skeleton
|
|
499
503
|
count={1}
|
|
500
504
|
height={containerStyle?.height}
|
|
@@ -531,10 +535,28 @@ const ChartUpdater: React.FC<ChartProps> = ({
|
|
|
531
535
|
}
|
|
532
536
|
|
|
533
537
|
if (chartConfig?.chartType === 'bar') {
|
|
534
|
-
|
|
538
|
+
return (
|
|
539
|
+
<BarList
|
|
540
|
+
data={chartConfig.rows.map(row => {
|
|
541
|
+
const fieldKeys = chartConfig.yAxisFields.map(elem => elem.field);
|
|
542
|
+
const newRow = row;
|
|
543
|
+
for (const key of fieldKeys) {
|
|
544
|
+
newRow[key] = parseFloat(row[key]);
|
|
545
|
+
}
|
|
546
|
+
return newRow;
|
|
547
|
+
})}
|
|
548
|
+
theme={theme}
|
|
549
|
+
yAxisFields={chartConfig.yAxisFields}
|
|
550
|
+
colors={colors}
|
|
551
|
+
xAxisField={chartConfig.xAxisField}
|
|
552
|
+
xAxisLabel={chartConfig.xAxisLabel}
|
|
553
|
+
containerStyle={containerStyle}
|
|
554
|
+
/>
|
|
555
|
+
);
|
|
535
556
|
return (
|
|
536
557
|
<BarChart
|
|
537
558
|
colors={colors}
|
|
559
|
+
theme={theme}
|
|
538
560
|
yAxisFields={chartConfig.yAxisFields}
|
|
539
561
|
// @ts-ignore
|
|
540
562
|
data={chartConfig.rows.map(row => {
|
|
@@ -561,7 +583,6 @@ const ChartUpdater: React.FC<ChartProps> = ({
|
|
|
561
583
|
fontWeight: '600',
|
|
562
584
|
textOverflow: 'ellipsis',
|
|
563
585
|
margin: 0,
|
|
564
|
-
marginLeft: 0,
|
|
565
586
|
padding: 20,
|
|
566
587
|
whiteSpace: 'nowrap',
|
|
567
588
|
display: 'block',
|
|
@@ -601,9 +622,9 @@ function formatNumber(num, label) {
|
|
|
601
622
|
return num.toFixed(2) + ' ' + label;
|
|
602
623
|
}
|
|
603
624
|
if (num >= 1.0e6) {
|
|
604
|
-
return
|
|
625
|
+
return Math.round(num / 1.0e6).toLocaleString() + 'M';
|
|
605
626
|
} else {
|
|
606
|
-
return
|
|
627
|
+
return Math.round(num / 1.0e6).toLocaleString() + 'M';
|
|
607
628
|
}
|
|
608
629
|
}
|
|
609
630
|
|
|
@@ -629,6 +650,37 @@ function getDomain(data, fields) {
|
|
|
629
650
|
return [adjustedMin, adjustedMax];
|
|
630
651
|
}
|
|
631
652
|
|
|
653
|
+
const CustomizedTick = ({
|
|
654
|
+
x,
|
|
655
|
+
y,
|
|
656
|
+
payload,
|
|
657
|
+
theme,
|
|
658
|
+
}: {
|
|
659
|
+
x: number;
|
|
660
|
+
y: number;
|
|
661
|
+
payload: any;
|
|
662
|
+
theme: any;
|
|
663
|
+
}) => {
|
|
664
|
+
// const { x, y, payload } = props;
|
|
665
|
+
const maxLength = 10;
|
|
666
|
+
const value = payload.value;
|
|
667
|
+
const truncatedValue =
|
|
668
|
+
value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
|
|
669
|
+
return (
|
|
670
|
+
<text
|
|
671
|
+
xlinkTitle={value}
|
|
672
|
+
fill={theme.chartLabelColor}
|
|
673
|
+
fontSize={12}
|
|
674
|
+
x={x}
|
|
675
|
+
y={y + 15}
|
|
676
|
+
width={30}
|
|
677
|
+
textAnchor="middle"
|
|
678
|
+
>
|
|
679
|
+
{truncatedValue}
|
|
680
|
+
</text>
|
|
681
|
+
);
|
|
682
|
+
};
|
|
683
|
+
|
|
632
684
|
function BarChart({
|
|
633
685
|
colors,
|
|
634
686
|
yAxisFields,
|
|
@@ -636,6 +688,7 @@ function BarChart({
|
|
|
636
688
|
containerStyle,
|
|
637
689
|
xAxisField,
|
|
638
690
|
xAxisLabel,
|
|
691
|
+
theme,
|
|
639
692
|
}: {
|
|
640
693
|
colors: string[];
|
|
641
694
|
yAxisFields: any[];
|
|
@@ -643,6 +696,7 @@ function BarChart({
|
|
|
643
696
|
containerStyle?: React.CSSProperties;
|
|
644
697
|
xAxisField: string;
|
|
645
698
|
xAxisLabel: string;
|
|
699
|
+
theme: any;
|
|
646
700
|
}) {
|
|
647
701
|
const newColors = findComplementaryAndAnalogousColors(colors[0], colors[1]);
|
|
648
702
|
return (
|
|
@@ -680,7 +734,8 @@ function BarChart({
|
|
|
680
734
|
hide={false}
|
|
681
735
|
dataKey={xAxisField}
|
|
682
736
|
// interval="preserveStartEnd"
|
|
683
|
-
tick={{ transform: 'translate(0, 6)' }}
|
|
737
|
+
tick={{ transform: 'translate(0, 6)' }}
|
|
738
|
+
//padding between labels and axis
|
|
684
739
|
style={{
|
|
685
740
|
fontSize: '12px',
|
|
686
741
|
// TODO: generalize
|