@quillsql/react 1.3.5 → 1.3.7

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.
Files changed (11) hide show
  1. package/lib/BarList.js +7 -0
  2. package/lib/BarList.js.map +1 -1
  3. package/lib/Chart.js +7 -4
  4. package/lib/Chart.js.map +1 -1
  5. package/lib/TableChart.d.ts +0 -6
  6. package/lib/TableChart.js +245 -96
  7. package/lib/TableChart.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/BarList.tsx +7 -0
  10. package/src/Chart.tsx +9 -3
  11. package/src/TableChart.tsx +277 -172
package/src/TableChart.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable react/display-name */
2
2
  // @ts-nocheck
3
- import React, { useState } from 'react';
3
+ import React, { useMemo, useState } from 'react';
4
4
  // import { twMerge } from 'tailwind-merge';
5
5
  import {
6
6
  Area,
@@ -13,6 +13,7 @@ import {
13
13
  YAxis,
14
14
  } from 'recharts';
15
15
  import { format } from 'date-fns';
16
+ import { valueFormatter } from './Chart';
16
17
 
17
18
  // const data = [
18
19
  // { name: 'Pool and Spa', median_days: 56.5104166666667 },
@@ -76,25 +77,9 @@ interface YAxisField {
76
77
 
77
78
  export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
78
79
  data: object[];
79
- valueFormatter?: any;
80
- color?: string;
81
- showAnimation?: boolean;
82
- xAxisField: string;
83
80
  yAxisFields: YAxisField[];
84
- containerStyle: any;
85
81
  colors: string[];
86
- theme: any;
87
82
  }
88
- function makeBarListClassName(componentName: string) {
89
- return (className: string) => {
90
- return `BarList-${componentName}-${className};`;
91
- };
92
- }
93
-
94
- const valueFormatter = (number: number) => {
95
- // return '$ ' + Intl.NumberFormat('us').format(number).toString();
96
- return number.toFixed(0);
97
- };
98
83
 
99
84
  export function hexToRgbaWith10PercentAlpha(hex) {
100
85
  // Convert the hex color to RGB
@@ -109,20 +94,78 @@ export function hexToRgbaWith10PercentAlpha(hex) {
109
94
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
110
95
  }
111
96
 
97
+ function Columns({ columns, data, theme }) {
98
+ return (
99
+ <div
100
+ style={{
101
+ display: 'flex',
102
+ flexDirection: 'row',
103
+ // overflowX: 'scroll',
104
+ // overflowY: 'hidden',
105
+ overflow: 'scroll',
106
+ height: '100%',
107
+ }}
108
+ >
109
+ {columns.map(elem => (
110
+ <Column key={elem.field} column={elem} data={data} theme={theme} />
111
+ ))}
112
+ </div>
113
+ );
114
+ }
115
+
116
+ function Column({ column, data, theme }) {
117
+ return (
118
+ <div
119
+ style={{
120
+ paddingLeft: 20,
121
+ paddingRight: 20,
122
+ // width: 'max-content',
123
+ display: 'inline-flex',
124
+ flexDirection: 'column',
125
+ whiteSpace: 'nowrap',
126
+ }}
127
+ >
128
+ <div
129
+ style={{
130
+ height: 40,
131
+ minHeight: 40,
132
+ color: theme?.primaryTextColor,
133
+ boxSizing: 'content-box',
134
+ fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
135
+ fontSize: theme?.fontSizeSmall || '0.875rem',
136
+ fontWeight: theme?.fontWeightMedium || '500',
137
+ }}
138
+ >
139
+ {column.label}
140
+ </div>
141
+ {data.map(elem => (
142
+ <Cell item={elem[column.field]} theme={theme} />
143
+ ))}
144
+ </div>
145
+ );
146
+ }
147
+
148
+ function Cell({ item, theme }) {
149
+ return (
150
+ <div
151
+ style={{
152
+ height: 40,
153
+ minHeight: 40,
154
+ whiteSpace: 'nowrap',
155
+ width: '100%',
156
+ fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
157
+ fontSize: theme?.fontSizeSmall || '0.875rem',
158
+ color: theme?.chartLabelColor,
159
+ }}
160
+ >
161
+ {item}
162
+ </div>
163
+ );
164
+ }
165
+
112
166
  const TableChart = React.forwardRef<HTMLDivElement, BarListProps>(
113
167
  (props, ref) => {
114
- const {
115
- data = [],
116
- yAxisFields,
117
- xAxisField,
118
- colors,
119
- // valueFormatter = (value: any) => value,valueFormatter
120
- showAnimation = true,
121
- className,
122
- containerStyle,
123
- theme,
124
- ...other
125
- } = props;
168
+ const { data = [], yAxisFields, containerStyle, theme, ...other } = props;
126
169
 
127
170
  // const widths = getWidthsFromValues(
128
171
  // data.map(item => item[yAxisFields[0].field])
@@ -130,7 +173,24 @@ const TableChart = React.forwardRef<HTMLDivElement, BarListProps>(
130
173
 
131
174
  const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1 || 6;
132
175
 
133
- if (!data.length) {
176
+ const memoizedData = useMemo(() => {
177
+ return data.slice(0, NUM_TO_SHOW).map(item => {
178
+ const fieldsWithFormattedValues = {};
179
+
180
+ for (const field of yAxisFields) {
181
+ const value = item[field.field];
182
+ fieldsWithFormattedValues[field.field] = valueFormatter({
183
+ value,
184
+ field: field.field,
185
+ fields: yAxisFields,
186
+ });
187
+ }
188
+
189
+ return fieldsWithFormattedValues;
190
+ });
191
+ }, [data, NUM_TO_SHOW]);
192
+
193
+ if (!memoizedData.length) {
134
194
  return (
135
195
  <div
136
196
  ref={ref}
@@ -161,162 +221,207 @@ const TableChart = React.forwardRef<HTMLDivElement, BarListProps>(
161
221
 
162
222
  return (
163
223
  <div
164
- ref={ref}
165
224
  style={{
166
- // width: '100%',
167
225
  boxSizing: 'content-box',
168
- height: '100%',
169
- // height: hei
170
- // marginLeft: 25,
171
- // background: 'red',
226
+ height: containerStyle?.height || '100%',
172
227
  marginTop: 20,
173
- // paddingRight: 25,
174
- overflow: 'hidden',
228
+ // overflow: 'hidden',
175
229
  display: 'flex',
176
- marginLeft: '1.5rem',
177
- justifyContent: 'space-between',
230
+ marginLeft: '1rem',
231
+ flexDirection: 'column',
232
+ // justifyContent: 'space-between',
178
233
  }}
179
- // className={twMerge(
180
- // makeBarListClassName('root'),
181
- // 'qq-flex qq-justify-between qq-h-full qq-w-full',
182
- // 'qq-space-x-6',
183
- // className
184
- // )}
185
- {...other}
186
234
  >
187
- <div
188
- // className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
189
- // className="qq-relative-w-full"
190
- style={{
191
- width: 'calc(100%)',
192
- boxSizing: 'content-box',
193
- height: '100%',
194
- paddingRight: 25,
195
- position: 'relative',
196
- }}
197
- >
235
+ <Columns columns={yAxisFields} data={memoizedData} theme={theme} />
236
+ {data.length > NUM_TO_SHOW && (
198
237
  <div
199
238
  style={{
200
- display: 'flex',
201
- flexDirection: 'row',
202
- alignItems: 'center',
239
+ color: theme?.chartLabelColor,
203
240
  boxSizing: 'content-box',
241
+ fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
242
+ fontSize: theme?.fontSizeSmall || '0.875rem',
243
+ marginLeft: 12,
244
+ marginTop: 8,
204
245
  }}
246
+ // className="qq-text-sm"
205
247
  >
206
- {Object.keys(data[0]).map((elem, index) => (
207
- <p
208
- key={index}
209
- style={{
210
- color: theme?.primaryTextColor,
211
- width: 98,
212
- maxWidth: 98,
213
- boxSizing: 'content-box',
214
- whiteSpace: 'nowrap',
215
- overflow: 'hidden',
216
- textOverflow: 'ellipsis',
217
- fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
218
- fontSize: theme?.fontSizeSmall || '0.875rem',
219
- fontWeight: theme?.fontWeightMedium || '500',
220
- }}
221
- // className={twMerge(
222
- // makeBarListClassName('barText'),
223
- // 'qq-whitespace-nowrap truncate',
224
- // 'qq-text-sm'
225
- // )}
226
- >
227
- {elem}
228
- </p>
229
- ))}
248
+ ...{data.length - NUM_TO_SHOW} more
230
249
  </div>
231
- {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
232
- // const Icon = item.icon;
233
- const Icon = null;
234
-
235
- return (
236
- <div
237
- key={'label' + idx}
238
- // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
239
- style={{
240
- // width: `${widths[idx]}%`,
241
- width: '100%',
242
- transition: showAnimation ? 'all 2s' : '',
243
- boxSizing: 'content-box',
244
- // backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
245
- display: 'flex',
246
- alignItems: 'center',
247
- height: '2.25rem',
248
- marginBottom: '0.5rem',
249
- borderRadius: '0.25rem',
250
- }}
251
- >
252
- <div
253
- style={{
254
- boxSizing: 'content-box',
255
- position: 'absolute',
256
- maxWidth: '100%',
257
- display: 'flex',
258
- // marginLeft: '0.5rem',
259
- }}
260
- // className={twMerge(
261
- // 'qq-absolute qq-max-w-full qq-flex',
262
- // 'qq-ml-2'
263
- // )}
264
- >
265
- <div
266
- style={{
267
- display: 'flex',
268
- flexDirection: 'row',
269
- alignItems: 'center',
270
- boxSizing: 'content-box',
271
- }}
272
- >
273
- {Object.keys(item).map((elem, index) => (
274
- <p
275
- key={index}
276
- style={{
277
- width: 98,
278
- maxWidth: 98,
279
- color: theme?.chartLabelColor,
280
- boxSizing: 'content-box',
281
- paddingRight: 10,
282
- whiteSpace: 'nowrap',
283
- overflow: 'hidden',
284
- textOverflow: 'ellipsis',
285
- fontFamily:
286
- theme?.chartLabelFontFamily || theme?.fontFamily,
287
- fontSize: theme?.fontSizeSmall || '0.875rem',
288
- }}
289
- // className={twMerge(
290
- // makeBarListClassName('barText'),
291
- // 'qq-whitespace-nowrap truncate',
292
- // 'qq-text-sm'
293
- // )}
294
- >
295
- {item[elem]}
296
- </p>
297
- ))}
298
- </div>
299
- </div>
300
- </div>
301
- );
302
- })}
303
- {data.length > NUM_TO_SHOW && (
304
- <div
305
- style={{
306
- color: theme?.chartLabelColor,
307
- boxSizing: 'content-box',
308
- fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
309
- fontSize: theme?.fontSizeSmall || '0.875rem',
310
- }}
311
- // className="qq-text-sm"
312
- >
313
- ...{data.length - NUM_TO_SHOW} more
314
- </div>
315
- )}
316
- </div>
317
- {/* eslint-disable prettier/prettier */}
250
+ )}
318
251
  </div>
319
252
  );
253
+
254
+ // return (
255
+ // <div
256
+ // ref={ref}
257
+ // style={{
258
+ // // width: '100%',
259
+ // boxSizing: 'content-box',
260
+ // height: '100%',
261
+ // // height: hei
262
+ // // marginLeft: 25,
263
+ // // background: 'red',
264
+ // marginTop: 20,
265
+ // // paddingRight: 25,
266
+ // overflow: 'hidden',
267
+ // display: 'flex',
268
+ // marginLeft: '1.5rem',
269
+ // justifyContent: 'space-between',
270
+ // }}
271
+ // // className={twMerge(
272
+ // // makeBarListClassName('root'),
273
+ // // 'qq-flex qq-justify-between qq-h-full qq-w-full',
274
+ // // 'qq-space-x-6',
275
+ // // className
276
+ // // )}
277
+ // {...other}
278
+ // >
279
+ // <div
280
+ // // className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
281
+ // // className="qq-relative-w-full"
282
+ // style={{
283
+ // width: 'calc(100%)',
284
+ // boxSizing: 'content-box',
285
+ // height: '100%',
286
+ // paddingRight: 25,
287
+ // position: 'relative',
288
+ // }}
289
+ // >
290
+ // <div
291
+ // style={{
292
+ // display: 'flex',
293
+ // flexDirection: 'row',
294
+ // alignItems: 'center',
295
+ // boxSizing: 'content-box',
296
+ // }}
297
+ // >
298
+ // {yAxisFields.map((elem, index) => (
299
+ // <div
300
+ // key={index}
301
+ // style={{
302
+ // color: theme?.primaryTextColor,
303
+ // width: 98,
304
+ // maxWidth: 98,
305
+ // boxSizing: 'content-box',
306
+ // whiteSpace: 'nowrap',
307
+ // overflow: 'hidden',
308
+ // textOverflow: 'ellipsis',
309
+ // fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
310
+ // fontSize: theme?.fontSizeSmall || '0.875rem',
311
+ // fontWeight: theme?.fontWeightMedium || '500',
312
+ // }}
313
+ // // className={twMerge(
314
+ // // makeBarListClassName('barText'),
315
+ // // 'qq-whitespace-nowrap truncate',
316
+ // // 'qq-text-sm'
317
+ // // )}
318
+ // >
319
+ // {elem.label}
320
+ // </div>
321
+ // ))}
322
+ // </div>
323
+ // {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
324
+ // // const Icon = item.icon;
325
+ // const Icon = null;
326
+
327
+ // return (
328
+ // <div
329
+ // key={'label' + idx}
330
+ // // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
331
+ // style={{
332
+ // // width: `${widths[idx]}%`,
333
+ // width: '100%',
334
+ // transition: showAnimation ? 'all 2s' : '',
335
+ // boxSizing: 'content-box',
336
+ // // backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
337
+ // display: 'flex',
338
+ // alignItems: 'center',
339
+ // height: '2.25rem',
340
+ // // marginBottom: '0.5rem',
341
+ // borderRadius: '0.25rem',
342
+ // }}
343
+ // >
344
+ // <div
345
+ // style={{
346
+ // boxSizing: 'content-box',
347
+ // position: 'absolute',
348
+ // maxWidth: '100%',
349
+ // display: 'flex',
350
+ // // height: 40,
351
+ // // minHeight: 40,
352
+ // // marginLeft: '0.5rem',
353
+ // }}
354
+ // // className={twMerge(
355
+ // // 'qq-absolute qq-max-w-full qq-flex',
356
+ // // 'qq-ml-2'
357
+ // // )}
358
+ // >
359
+ // <div
360
+ // style={{
361
+ // display: 'flex',
362
+ // flexDirection: 'row',
363
+ // alignItems: 'center',
364
+ // boxSizing: 'content-box',
365
+ // height: 40,
366
+ // minHeight: 40,
367
+ // }}
368
+ // >
369
+ // {yAxisFields.map((elem, index) => (
370
+ // <div
371
+ // key={index}
372
+ // style={{
373
+ // width: 98,
374
+ // maxWidth: 98,
375
+ // color: theme?.chartLabelColor,
376
+ // boxSizing: 'content-box',
377
+ // paddingRight: 10,
378
+ // height: 40,
379
+ // minHeight: 40,
380
+ // whiteSpace: 'nowrap',
381
+ // overflow: 'hidden',
382
+ // textOverflow: 'ellipsis',
383
+ // fontFamily:
384
+ // theme?.chartLabelFontFamily || theme?.fontFamily,
385
+ // fontSize: theme?.fontSizeSmall || '0.875rem',
386
+ // borderBottomColor: theme?.borderColor,
387
+ // borderBottomWidth: 1,
388
+ // borderBottomStyle: 'solid',
389
+ // }}
390
+ // // className={twMerge(
391
+ // // makeBarListClassName('barText'),
392
+ // // 'qq-whitespace-nowrap truncate',
393
+ // // 'qq-text-sm'
394
+ // // )}
395
+ // >
396
+ // {valueFormatter({
397
+ // value: item[elem.field],
398
+ // field: elem.field,
399
+ // fields: yAxisFields,
400
+ // })}
401
+ // </div>
402
+ // ))}
403
+ // </div>
404
+ // </div>
405
+ // </div>
406
+ // );
407
+ // })}
408
+ // {data.length > NUM_TO_SHOW && (
409
+ // <div
410
+ // style={{
411
+ // color: theme?.chartLabelColor,
412
+ // boxSizing: 'content-box',
413
+ // fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
414
+ // fontSize: theme?.fontSizeSmall || '0.875rem',
415
+ // }}
416
+ // // className="qq-text-sm"
417
+ // >
418
+ // ...{data.length - NUM_TO_SHOW} more
419
+ // </div>
420
+ // )}
421
+ // </div>
422
+ // {/* eslint-disable prettier/prettier */}
423
+ // </div>
424
+ // );
320
425
  }
321
426
  );
322
427