@quillsql/react 1.0.2 → 1.0.4
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 +2 -1
- 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.d.ts +2 -1
- package/lib/Dashboard.js +97 -58
- 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 +164 -106
- package/tailwind.config.js +4 -1
package/lib/Dashboard.js
CHANGED
|
@@ -48,22 +48,24 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
48
48
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
49
49
|
import React, { useContext, useEffect, useState } from 'react';
|
|
50
50
|
import Chart from './Chart';
|
|
51
|
-
import { ClientContext, DateFilterContext, } from './Context';
|
|
51
|
+
import { ClientContext, DashboardContext, DateFilterContext, ThemeContext, } from './Context';
|
|
52
52
|
import { startOfToday, sub } from 'date-fns';
|
|
53
53
|
import { DateRangePicker } from './DateRangePicker/index';
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
};
|
|
54
|
+
// const theme = {
|
|
55
|
+
// fontFamily: 'Inter; Helvetica',
|
|
56
|
+
// primaryTextColor: '#212121',
|
|
57
|
+
// secondaryTextColor: '#6C727F',
|
|
58
|
+
// chartLabelColor: '#666666',
|
|
59
|
+
// chartTickColor: '#CCCCCC',
|
|
60
|
+
// chartColors: ['#6269E9', '#E14F62'],
|
|
61
|
+
// };
|
|
62
62
|
export default function Dashboard(_a) {
|
|
63
|
-
var name = _a.name, containerStyle = _a.containerStyle, maxColumnWidth = _a.maxColumnWidth, rowHeight = _a.rowHeight;
|
|
63
|
+
var name = _a.name, containerStyle = _a.containerStyle, maxColumnWidth = _a.maxColumnWidth, rowHeight = _a.rowHeight, onClickDashboardItem = _a.onClickDashboardItem;
|
|
64
64
|
var _b = useState(null), dashboardSections = _b[0], setDashboardSections = _b[1];
|
|
65
|
+
var dashboard = useContext(DashboardContext).dashboard;
|
|
65
66
|
var _c = useContext(ClientContext), client = _c[0], _ = _c[1];
|
|
66
|
-
var _d = useContext(
|
|
67
|
+
var _d = useContext(ThemeContext), theme = _d[0], _ = _d[1];
|
|
68
|
+
var _e = useContext(DateFilterContext), dateFilter = _e.dateFilter, dateFilterDispatch = _e.dateFilterDispatch;
|
|
67
69
|
var setGlobalDateFilter = function (startDate, endDate) {
|
|
68
70
|
dateFilterDispatch({
|
|
69
71
|
type: 'SET_GLOBAL_DATE_FILTER',
|
|
@@ -116,10 +118,15 @@ export default function Dashboard(_a) {
|
|
|
116
118
|
},
|
|
117
119
|
});
|
|
118
120
|
}, []);
|
|
121
|
+
var handleOnClickDashboardItem = function (id) {
|
|
122
|
+
if (dashboard[id]) {
|
|
123
|
+
onClickDashboardItem(dashboard[id]);
|
|
124
|
+
}
|
|
125
|
+
};
|
|
119
126
|
if (!dashboardSections) {
|
|
120
127
|
return null;
|
|
121
128
|
}
|
|
122
|
-
return (_jsxs("div", __assign({ style: containerStyle }, { children: [_jsx("div", __assign({ style: { width: 420,
|
|
129
|
+
return (_jsxs("div", __assign({ style: containerStyle }, { children: [_jsx("div", __assign({ style: { width: 420, marginBottom: 25, marginLeft: 25 } }, { children: _jsx(DateRangePicker
|
|
123
130
|
// change to be set on the dashboard / section as default date range
|
|
124
131
|
, {
|
|
125
132
|
// change to be set on the dashboard / section as default date range
|
|
@@ -134,7 +141,7 @@ export default function Dashboard(_a) {
|
|
|
134
141
|
flexDirection: 'column',
|
|
135
142
|
} }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", { style: { height: sectionIndex > 0 ? 25 : 0 } }), section && (_jsx("h1", __assign({ style: {
|
|
136
143
|
fontSize: 22,
|
|
137
|
-
|
|
144
|
+
color: theme.primaryTextColor,
|
|
138
145
|
fontFamily: theme.fontFamily,
|
|
139
146
|
fontWeight: 'bold',
|
|
140
147
|
// fontWeight: theme.headerFontWeight,
|
|
@@ -142,7 +149,7 @@ export default function Dashboard(_a) {
|
|
|
142
149
|
marginLeft: 25,
|
|
143
150
|
textAlign: 'left',
|
|
144
151
|
marginTop: 12,
|
|
145
|
-
} }, { children: section })))] })), _jsx("div", __assign({ style: {
|
|
152
|
+
} }, { children: section })))] })), dashboardSections[section].filter(function (elem) { return elem.chartType === 'metric'; }).length ? (_jsx("div", __assign({ style: {
|
|
146
153
|
width: "100%",
|
|
147
154
|
listStyleType: 'none',
|
|
148
155
|
marginBottom: 50,
|
|
@@ -153,17 +160,18 @@ export default function Dashboard(_a) {
|
|
|
153
160
|
} }, { children: dashboardSections[section]
|
|
154
161
|
.filter(function (elem) { return elem.chartType === 'metric'; })
|
|
155
162
|
.map(function (elem, index) {
|
|
156
|
-
return (_jsx("div", __assign({
|
|
157
|
-
// onClick={() => handleEditDashboardItem(elem)}
|
|
158
|
-
// className="shadow"
|
|
159
|
-
style: {
|
|
163
|
+
return (_jsx("div", __assign({ onClick: function () { return handleOnClickDashboardItem(elem._id); }, className: "hover:bg-zinc-50", style: {
|
|
160
164
|
// background: theme.elevatedCardColor,
|
|
161
165
|
// borderRadius: theme.borderRadius,
|
|
162
166
|
// boxShadow: theme.boxShadow,
|
|
167
|
+
paddingTop: 12,
|
|
168
|
+
borderRadius: 8,
|
|
163
169
|
height: '100%',
|
|
164
170
|
cursor: 'pointer',
|
|
165
171
|
width: '100%',
|
|
166
|
-
} }, { children: _jsx("div", __assign({
|
|
172
|
+
} }, { children: _jsx("div", __assign({
|
|
173
|
+
// className="group-hover:bg-black"
|
|
174
|
+
style: {
|
|
167
175
|
width: '100%',
|
|
168
176
|
height: '100%',
|
|
169
177
|
} }, { children: _jsx("div", __assign({ style: {
|
|
@@ -173,38 +181,54 @@ export default function Dashboard(_a) {
|
|
|
173
181
|
display: 'flex',
|
|
174
182
|
flexDirection: 'column',
|
|
175
183
|
justifyContent: 'space-between',
|
|
176
|
-
} }, { children: [
|
|
184
|
+
} }, { children: [_jsxs("div", __assign({
|
|
185
|
+
// className="group-hover:bg-black"
|
|
186
|
+
style: {
|
|
177
187
|
display: 'flex',
|
|
178
188
|
flexDirection: 'row',
|
|
179
189
|
justifyContent: 'space-between',
|
|
180
190
|
// alignItems: 'center',
|
|
181
191
|
// paddingLeft: theme.padding,
|
|
182
|
-
|
|
192
|
+
paddingRight: 25,
|
|
183
193
|
// paddingTop: theme.padding,
|
|
184
|
-
} }, { children: _jsx("div", __assign({ style: {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
194
|
+
} }, { children: [_jsx("div", __assign({ title: elem.name, style: {
|
|
195
|
+
fontFamily: theme.fontFamily,
|
|
196
|
+
color: theme.primaryTextColor,
|
|
197
|
+
// TODO: FIX SIZE
|
|
198
|
+
fontSize: 18,
|
|
199
|
+
// TODO: FIX WEIGHT
|
|
200
|
+
fontWeight: '500',
|
|
201
|
+
// fontSize: theme.headerFontSize,
|
|
202
|
+
// color: theme.fontColor,
|
|
203
|
+
// fontWeight: theme.headerFontWeight,
|
|
204
|
+
textOverflow: 'ellipsis',
|
|
205
|
+
// margin: 0,
|
|
206
|
+
marginLeft: 25,
|
|
207
|
+
padding: 0,
|
|
208
|
+
whiteSpace: 'nowrap',
|
|
209
|
+
display: 'block',
|
|
210
|
+
maxWidth: '100%',
|
|
211
|
+
overflow: 'hidden',
|
|
212
|
+
} }, { children: elem.name })), _jsx("div", __assign({
|
|
213
|
+
// className="hover:bg-black"
|
|
214
|
+
style: {
|
|
215
|
+
fontFamily: theme.fontFamily,
|
|
216
|
+
color: theme.primaryTextColor,
|
|
217
|
+
fontWeight: '500',
|
|
218
|
+
fontSize: 14,
|
|
219
|
+
minWidth: 14 * 7,
|
|
220
|
+
// background: 'red',
|
|
221
|
+
display: 'flex',
|
|
222
|
+
alignItems: 'center',
|
|
223
|
+
justifyContent: 'flex-end',
|
|
224
|
+
} }, { children: 'view report →' }))] })), _jsx("div", __assign({ style: { padding: 0 } }, { children: _jsx(Chart, { containerStyle: {
|
|
201
225
|
display: 'flex',
|
|
202
226
|
width: '100%',
|
|
203
227
|
height: 120,
|
|
204
228
|
marginBottom: 50,
|
|
205
229
|
marginTop: 20,
|
|
206
230
|
}, chartId: elem._id, colors: ['#6269E9', '#E14F62'] }) }))] })) })) })) }), elem.name + '' + index));
|
|
207
|
-
}) })), _jsx("div", __assign({ style: {
|
|
231
|
+
}) }))) : null, _jsx("div", __assign({ style: {
|
|
208
232
|
width: "100%",
|
|
209
233
|
listStyleType: 'none',
|
|
210
234
|
display: 'grid',
|
|
@@ -214,7 +238,7 @@ export default function Dashboard(_a) {
|
|
|
214
238
|
} }, { children: dashboardSections[section]
|
|
215
239
|
.filter(function (elem) { return elem.chartType !== 'metric'; })
|
|
216
240
|
.map(function (elem, index) {
|
|
217
|
-
return (_jsx("div", __assign({
|
|
241
|
+
return (_jsx("div", __assign({ onClick: function () { return handleOnClickDashboardItem(elem._id); }, className: "hover:bg-zinc-50",
|
|
218
242
|
// onClick={() => handleEditDashboardItem(elem)}
|
|
219
243
|
// className="shadow"
|
|
220
244
|
style: {
|
|
@@ -224,6 +248,9 @@ export default function Dashboard(_a) {
|
|
|
224
248
|
height: '100%',
|
|
225
249
|
cursor: 'pointer',
|
|
226
250
|
width: '100%',
|
|
251
|
+
paddingRight: 25,
|
|
252
|
+
borderRadius: 8,
|
|
253
|
+
paddingTop: 20,
|
|
227
254
|
} }, { children: _jsx("div", __assign({ style: {
|
|
228
255
|
width: '100%',
|
|
229
256
|
height: '100%',
|
|
@@ -234,7 +261,7 @@ export default function Dashboard(_a) {
|
|
|
234
261
|
display: 'flex',
|
|
235
262
|
flexDirection: 'column',
|
|
236
263
|
justifyContent: 'space-between',
|
|
237
|
-
} }, { children: [
|
|
264
|
+
} }, { children: [_jsxs("div", __assign({ style: {
|
|
238
265
|
display: 'flex',
|
|
239
266
|
flexDirection: 'row',
|
|
240
267
|
justifyContent: 'space-between',
|
|
@@ -242,23 +269,35 @@ export default function Dashboard(_a) {
|
|
|
242
269
|
// paddingLeft: theme.padding,
|
|
243
270
|
// paddingRight: theme.padding,
|
|
244
271
|
// paddingTop: theme.padding,
|
|
245
|
-
} }, { children: _jsx("div", __assign({ style: {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
272
|
+
} }, { children: [_jsx("div", __assign({ style: {
|
|
273
|
+
fontFamily: theme.fontFamily,
|
|
274
|
+
color: theme.primaryTextColor,
|
|
275
|
+
fontSize: 18,
|
|
276
|
+
fontWeight: '500',
|
|
277
|
+
// fontSize: theme.headerFontSize,
|
|
278
|
+
// color: theme.fontColor,
|
|
279
|
+
// fontWeight: theme.headerFontWeight,
|
|
280
|
+
textOverflow: 'ellipsis',
|
|
281
|
+
// margin: 0,
|
|
282
|
+
marginLeft: 25,
|
|
283
|
+
padding: 0,
|
|
284
|
+
whiteSpace: 'nowrap',
|
|
285
|
+
display: 'block',
|
|
286
|
+
maxWidth: '100%',
|
|
287
|
+
overflow: 'hidden',
|
|
288
|
+
} }, { children: elem.name })), _jsx("div", __assign({
|
|
289
|
+
// className="hover:bg-black"
|
|
290
|
+
style: {
|
|
291
|
+
fontFamily: theme.fontFamily,
|
|
292
|
+
color: theme.primaryTextColor,
|
|
293
|
+
fontWeight: '500',
|
|
294
|
+
fontSize: 14,
|
|
295
|
+
minWidth: 14 * 7,
|
|
296
|
+
// background: 'red',
|
|
297
|
+
display: 'flex',
|
|
298
|
+
alignItems: 'center',
|
|
299
|
+
justifyContent: 'flex-end',
|
|
300
|
+
} }, { children: 'view report →' }))] })), _jsx("div", __assign({ style: { padding: 0 } }, { children: _jsx(Chart, { containerStyle: {
|
|
262
301
|
display: 'flex',
|
|
263
302
|
width: '100%',
|
|
264
303
|
height: 300,
|
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,
|
|
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
|
>
|