@quillsql/react 1.0.1 → 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.
Files changed (13) hide show
  1. package/example/src/App.tsx +7 -3
  2. package/lib/BarList.d.ts +3 -0
  3. package/lib/BarList.js +68 -27
  4. package/lib/BarList.js.map +1 -1
  5. package/lib/Chart.js +31 -13
  6. package/lib/Chart.js.map +1 -1
  7. package/lib/Dashboard.js +86 -56
  8. package/lib/Dashboard.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/BarList.tsx +181 -57
  11. package/src/Chart.tsx +61 -6
  12. package/src/Dashboard.tsx +148 -106
  13. package/tailwind.config.js +4 -1
package/src/Dashboard.tsx CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  DashboardStateContext,
6
6
  DashboardUpdateContext,
7
7
  DateFilterContext,
8
+ ThemeContext,
8
9
  } from './Context';
9
10
  import { startOfToday, sub } from 'date-fns';
10
11
  import { DateRangePicker } from './DateRangePicker/index';
@@ -16,14 +17,14 @@ interface DashboardProps {
16
17
  rowHeight?: number;
17
18
  }
18
19
 
19
- const theme = {
20
- fontFamily: 'Inter; Helvetica',
21
- primaryTextColor: '#212121',
22
- secondaryTextColor: '#6C727F',
23
- chartLabelColor: '#666666',
24
- chartTickColor: '#CCCCCC',
25
- chartColors: ['#6269E9', '#E14F62'],
26
- };
20
+ // const theme = {
21
+ // fontFamily: 'Inter; Helvetica',
22
+ // primaryTextColor: '#212121',
23
+ // secondaryTextColor: '#6C727F',
24
+ // chartLabelColor: '#666666',
25
+ // chartTickColor: '#CCCCCC',
26
+ // chartColors: ['#6269E9', '#E14F62'],
27
+ // };
27
28
 
28
29
  export default function Dashboard({
29
30
  name,
@@ -33,6 +34,7 @@ export default function Dashboard({
33
34
  }: DashboardProps) {
34
35
  const [dashboardSections, setDashboardSections] = useState<any>(null);
35
36
  const [client, _] = useContext(ClientContext);
37
+ const [theme, _] = useContext(ThemeContext);
36
38
  const { dateFilter, dateFilterDispatch } = useContext(DateFilterContext);
37
39
 
38
40
  const setGlobalDateFilter = (startDate, endDate) => {
@@ -83,7 +85,7 @@ export default function Dashboard({
83
85
  }
84
86
  return (
85
87
  <div style={containerStyle}>
86
- <div style={{ width: 420, marginLeft: 25, marginBottom: 25 }}>
88
+ <div style={{ width: 420, marginBottom: 25, marginLeft: 25 }}>
87
89
  <DateRangePicker
88
90
  // change to be set on the dashboard / section as default date range
89
91
  defaultValue={[undefined, undefined, '90d']}
@@ -110,7 +112,7 @@ export default function Dashboard({
110
112
  <h1
111
113
  style={{
112
114
  fontSize: 22,
113
- // color: theme.fontColor,
115
+ color: theme.primaryTextColor,
114
116
  fontFamily: theme.fontFamily,
115
117
  fontWeight: 'bold',
116
118
  // fontWeight: theme.headerFontWeight,
@@ -124,61 +126,59 @@ export default function Dashboard({
124
126
  </h1>
125
127
  )}
126
128
  </div>
127
- <div
128
- style={{
129
- width: `100%`,
130
- listStyleType: 'none',
131
- marginBottom: 50,
132
- display: 'grid',
133
- gridGap: 25,
134
- gridTemplateColumns: `repeat(auto-fill,minmax(${
135
- maxColumnWidth || 400
136
- }px, 1fr))`,
137
- // gridTemplateRows: `repeat(${170}px)`,
138
- }}
139
- >
140
- {dashboardSections[section]
141
- .filter(elem => elem.chartType === 'metric')
142
- .map(
143
- (
144
- elem: {
145
- name:
146
- | string
147
- | number
148
- | boolean
149
- | React.ReactElement<
150
- any,
151
- string | React.JSXElementConstructor<any>
152
- >
153
- | React.ReactFragment
154
- | null
155
- | undefined;
156
- _id: string | undefined;
157
- },
158
- index: string
159
- ) => {
160
- return (
161
- <div
162
- // className="shadow-md"
163
- key={elem.name + '' + index}
164
- // onClick={() => handleEditDashboardItem(elem)}
165
- // className="shadow"
166
- style={{
167
- // background: theme.elevatedCardColor,
168
- // borderRadius: theme.borderRadius,
169
- // boxShadow: theme.boxShadow,
170
- height: '100%',
171
- cursor: 'pointer',
172
- width: '100%',
173
- }}
174
- >
129
+ {dashboardSections[section].filter(
130
+ elem => elem.chartType === 'metric'
131
+ ).length ? (
132
+ <div
133
+ style={{
134
+ width: `100%`,
135
+ listStyleType: 'none',
136
+ marginBottom: 50,
137
+ display: 'grid',
138
+ gridGap: 25,
139
+ gridTemplateColumns: `repeat(auto-fill,minmax(${
140
+ maxColumnWidth || 400
141
+ }px, 1fr))`,
142
+ // gridTemplateRows: `repeat(${170}px)`,
143
+ }}
144
+ >
145
+ {dashboardSections[section]
146
+ .filter(elem => elem.chartType === 'metric')
147
+ .map(
148
+ (
149
+ elem: {
150
+ name:
151
+ | string
152
+ | number
153
+ | boolean
154
+ | React.ReactElement<
155
+ any,
156
+ string | React.JSXElementConstructor<any>
157
+ >
158
+ | React.ReactFragment
159
+ | null
160
+ | undefined;
161
+ _id: string | undefined;
162
+ },
163
+ index: string
164
+ ) => {
165
+ return (
175
166
  <div
167
+ className="hover:bg-zinc-50"
168
+ key={elem.name + '' + index}
176
169
  style={{
177
- width: '100%',
170
+ // background: theme.elevatedCardColor,
171
+ // borderRadius: theme.borderRadius,
172
+ // boxShadow: theme.boxShadow,
173
+ paddingTop: 12,
174
+ borderRadius: 8,
178
175
  height: '100%',
176
+ cursor: 'pointer',
177
+ width: '100%',
179
178
  }}
180
179
  >
181
180
  <div
181
+ // className="group-hover:bg-black"
182
182
  style={{
183
183
  width: '100%',
184
184
  height: '100%',
@@ -186,68 +186,94 @@ export default function Dashboard({
186
186
  >
187
187
  <div
188
188
  style={{
189
- display: 'flex',
190
- flexDirection: 'column',
191
- justifyContent: 'space-between',
189
+ width: '100%',
190
+ height: '100%',
192
191
  }}
193
192
  >
194
193
  <div
195
194
  style={{
196
195
  display: 'flex',
197
- flexDirection: 'row',
196
+ flexDirection: 'column',
198
197
  justifyContent: 'space-between',
199
- // alignItems: 'center',
200
- // paddingLeft: theme.padding,
201
- // paddingRight: theme.padding,
202
- // paddingTop: theme.padding,
203
198
  }}
204
199
  >
205
200
  <div
201
+ // className="group-hover:bg-black"
206
202
  style={{
207
- fontFamily: theme.fontFamily,
208
- color: '#394150',
209
- fontSize: 18,
210
- fontWeight: '500',
211
- // fontSize: theme.headerFontSize,
212
- // color: theme.fontColor,
213
- // fontWeight: theme.headerFontWeight,
214
- textOverflow: 'ellipsis',
215
- margin: 0,
216
- marginLeft: 25,
217
- padding: 0,
218
- whiteSpace: 'nowrap',
219
- display: 'block',
220
- maxWidth: '100%',
221
- overflow: 'hidden',
203
+ display: 'flex',
204
+ flexDirection: 'row',
205
+ justifyContent: 'space-between',
206
+ // alignItems: 'center',
207
+ // paddingLeft: theme.padding,
208
+ paddingRight: 25,
209
+ // paddingTop: theme.padding,
222
210
  }}
223
211
  >
224
- {elem.name}
212
+ <div
213
+ title={elem.name}
214
+ style={{
215
+ fontFamily: theme.fontFamily,
216
+ color: theme.primaryTextColor,
217
+ // TODO: FIX SIZE
218
+ fontSize: 18,
219
+ // TODO: FIX WEIGHT
220
+ fontWeight: '500',
221
+ // fontSize: theme.headerFontSize,
222
+ // color: theme.fontColor,
223
+ // fontWeight: theme.headerFontWeight,
224
+ textOverflow: 'ellipsis',
225
+ // margin: 0,
226
+ marginLeft: 25,
227
+ padding: 0,
228
+ whiteSpace: 'nowrap',
229
+ display: 'block',
230
+ maxWidth: '100%',
231
+ overflow: 'hidden',
232
+ }}
233
+ >
234
+ {elem.name}
235
+ </div>
236
+ <div
237
+ // className="hover:bg-black"
238
+ style={{
239
+ fontFamily: theme.fontFamily,
240
+ color: theme.primaryTextColor,
241
+ fontWeight: '500',
242
+ fontSize: 14,
243
+ minWidth: 14 * 7,
244
+ // background: 'red',
245
+ display: 'flex',
246
+ alignItems: 'center',
247
+ justifyContent: 'flex-end',
248
+ }}
249
+ >
250
+ {'view report →'}
251
+ </div>
252
+ </div>
253
+ {/* <div style={{ height: 20 }} /> */}
254
+ <div style={{ padding: 0 }}>
255
+ <Chart
256
+ containerStyle={{
257
+ display: 'flex',
258
+ width: '100%',
259
+ height: 120,
260
+ marginBottom: 50,
261
+ marginTop: 20,
262
+ }}
263
+ chartId={elem._id}
264
+ colors={['#6269E9', '#E14F62']}
265
+ // updateDashboard={updateDashboard}
266
+ />
225
267
  </div>
226
- {/* <Arrow fill={theme.fontColor} /> */}
227
- </div>
228
- {/* <div style={{ height: 20 }} /> */}
229
- <div style={{ padding: 0 }}>
230
- <Chart
231
- containerStyle={{
232
- display: 'flex',
233
- width: '100%',
234
- height: 120,
235
- marginBottom: 50,
236
- marginTop: 20,
237
- }}
238
- chartId={elem._id}
239
- colors={['#6269E9', '#E14F62']}
240
- // updateDashboard={updateDashboard}
241
- />
242
268
  </div>
243
269
  </div>
244
270
  </div>
245
271
  </div>
246
- </div>
247
- );
248
- }
249
- )}
250
- </div>
272
+ );
273
+ }
274
+ )}
275
+ </div>
276
+ ) : null}
251
277
  <div
252
278
  style={{
253
279
  width: `100%`,
@@ -328,14 +354,14 @@ export default function Dashboard({
328
354
  <div
329
355
  style={{
330
356
  fontFamily: theme.fontFamily,
331
- color: '#394150',
357
+ color: theme.primaryTextColor,
332
358
  fontSize: 18,
333
359
  fontWeight: '500',
334
360
  // fontSize: theme.headerFontSize,
335
361
  // color: theme.fontColor,
336
362
  // fontWeight: theme.headerFontWeight,
337
363
  textOverflow: 'ellipsis',
338
- margin: 0,
364
+ // margin: 0,
339
365
  marginLeft: 25,
340
366
  padding: 0,
341
367
  whiteSpace: 'nowrap',
@@ -346,6 +372,22 @@ export default function Dashboard({
346
372
  >
347
373
  {elem.name}
348
374
  </div>
375
+ <div
376
+ // className="hover:bg-black"
377
+ style={{
378
+ fontFamily: theme.fontFamily,
379
+ color: theme.primaryTextColor,
380
+ fontWeight: '500',
381
+ fontSize: 14,
382
+ minWidth: 14 * 7,
383
+ // background: 'red',
384
+ display: 'flex',
385
+ alignItems: 'center',
386
+ justifyContent: 'flex-end',
387
+ }}
388
+ >
389
+ {'view report →'}
390
+ </div>
349
391
  {/* <Arrow fill={theme.fontColor} /> */}
350
392
  </div>
351
393
  {/* <div style={{ height: 20 }} /> */}
package/tailwind.config.js CHANGED
@@ -10,7 +10,10 @@ module.exports = {
10
10
  extend: {},
11
11
  },
12
12
  variants: {
13
- extend: {},
13
+ extend: {
14
+ background: ['hover', 'group-hover'],
15
+ backgroundColor: ['hover', 'group-hover'],
16
+ },
14
17
  },
15
18
  plugins: [],
16
19
  };