@quillsql/react 2.9.2 → 2.9.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/dist/Context.js +1 -1
- package/dist/Dashboard.d.ts.map +1 -1
- package/dist/Dashboard.js +5 -102
- package/package.json +1 -1
package/dist/Context.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
3
2
|
// @ts-nocheck
|
|
3
|
+
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
4
4
|
import { useState, createContext, useEffect, useReducer, useContext, } from 'react';
|
|
5
5
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
6
6
|
const dummySetter = () => { };
|
package/dist/Dashboard.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../src/Dashboard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../src/Dashboard.tsx"],"names":[],"mappings":"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"}
|
package/dist/Dashboard.js
CHANGED
|
@@ -6,11 +6,8 @@ import Chart from './Chart';
|
|
|
6
6
|
import { capitalize, defaultOptions, getWeekdays, getRangeFromPreset, PRIMARY_RANGE, COMPARISON_RANGE, PRIMARY_CODES, } from './DateRangePicker/dateRangePickerUtils';
|
|
7
7
|
import { ClientContext, DashboardContext, ThemeContext, DashboardFiltersContext, DateFilterContext, useComparisonRange, useDateFilter, } from './Context';
|
|
8
8
|
import { addDays, eachDayOfInterval, endOfMonth, format, isAfter, isBefore, isEqual, isSaturday, isSunday, nextSaturday, previousSunday, startOfMonth, startOfToday, startOfWeek, startOfYear, sub, subDays, } from 'date-fns';
|
|
9
|
-
import Modal from './components/Modal/Modal';
|
|
10
|
-
import { HoveredValueContext, SelectedValueContext } from './contexts';
|
|
11
|
-
import { DropdownItem } from './components/Dropdown';
|
|
12
9
|
import { ArrowDownHeadIcon, ArrowLeftHeadIcon, ArrowRightHeadIcon, CalendarNormalIcon, } from './assets';
|
|
13
|
-
import {
|
|
10
|
+
import { useOnClickOutside, } from './hooks';
|
|
14
11
|
import { enUS } from 'date-fns/locale';
|
|
15
12
|
import { useDashboard } from './hooks/useDashboard';
|
|
16
13
|
export const COMPARISON_OPTIONS = [
|
|
@@ -538,7 +535,8 @@ const areEqual = (prevProps, nextProps) => {
|
|
|
538
535
|
prevProps.dateRange[1] === nextProps.dateRange[1]);
|
|
539
536
|
};
|
|
540
537
|
const MemoizedDateRangePicker = React.memo(QuillDateRangePicker, areEqual);
|
|
541
|
-
|
|
538
|
+
const QuillEmptyDashboardComponent = () => _jsx("div", {});
|
|
539
|
+
export default function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, FilterDropdownComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, DashboardItemComponent, }) {
|
|
542
540
|
const { dateFilter } = useDateFilter();
|
|
543
541
|
const { isLoading: isDataLoading, data, reload } = useDashboard(name);
|
|
544
542
|
const [dashboardSections, setDashboardSections] = useState(null);
|
|
@@ -625,10 +623,10 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
|
|
|
625
623
|
}
|
|
626
624
|
};
|
|
627
625
|
const handleOnClickDashboardItem = (elem) => {
|
|
628
|
-
if (dashboard[elem._id]._id) {
|
|
626
|
+
if (dashboard[elem._id]._id && onClickDashboardItem) {
|
|
629
627
|
onClickDashboardItem(dashboard[elem._id]);
|
|
630
628
|
}
|
|
631
|
-
else {
|
|
629
|
+
else if (onClickDashboardItem) {
|
|
632
630
|
onClickDashboardItem({
|
|
633
631
|
...dashboard[elem._id],
|
|
634
632
|
error_id: elem._id,
|
|
@@ -1155,98 +1153,3 @@ export default function Dashboard({ name, containerStyle, chartContainerStyle, m
|
|
|
1155
1153
|
})] })) : null, _jsx("div", { style: { height: 40 } })] }, section + '' + sectionIndex));
|
|
1156
1154
|
})] }));
|
|
1157
1155
|
}
|
|
1158
|
-
// ----------------------------------------------------------------
|
|
1159
|
-
// REST OF CODE NOT USED
|
|
1160
|
-
function Filter({ defaultValue, theme, onValueChange, filter }) {
|
|
1161
|
-
//should be date as well as strings
|
|
1162
|
-
const dropdownOptions = [
|
|
1163
|
-
{ value: 'popupbagelsmardens', text: 'popupbagelsmardens' },
|
|
1164
|
-
{ value: 'popupbagelswestport', text: 'popupbagelswestport' },
|
|
1165
|
-
{ value: 'popupbagelseasthampton', text: 'popupbagelseasthampton' },
|
|
1166
|
-
{ value: 'popupbagelsgreenwich', text: 'popupbagelsgreenwich' },
|
|
1167
|
-
{ value: 'popupbagelsredding', text: 'popupbagelsredding' },
|
|
1168
|
-
{ value: 'popupbagelsthompson', text: 'popupbagelsthompson' },
|
|
1169
|
-
];
|
|
1170
|
-
const dropdownRef = useRef(null);
|
|
1171
|
-
const [showDropdown, setShowDropdown] = useState(false);
|
|
1172
|
-
const [selectedValue, setSelectedValue] = useInternalState(defaultValue, undefined);
|
|
1173
|
-
const selectedDropdownValue = selectedValue ? selectedValue[2] ?? null : null;
|
|
1174
|
-
const handleDropdownOptionClick = (dropdownValue) => {
|
|
1175
|
-
setSelectedValue([undefined, undefined, dropdownValue]);
|
|
1176
|
-
onValueChange?.([undefined, undefined, dropdownValue]);
|
|
1177
|
-
setShowDropdown(false);
|
|
1178
|
-
};
|
|
1179
|
-
const [hoveredDropdownValue, handleDropdownKeyDown] = useSelectOnKeyDown(handleDropdownOptionClick, dropdownOptions.map((option) => option.value), showDropdown, setShowDropdown, selectedDropdownValue);
|
|
1180
|
-
return (_jsxs("div", { style: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
|
|
1181
|
-
marginBottom: 6,
|
|
1182
|
-
fontWeight: '600',
|
|
1183
|
-
color: theme.secondaryTextColor,
|
|
1184
|
-
fontSize: 14,
|
|
1185
|
-
fontFamily: theme.fontFamily,
|
|
1186
|
-
}, children: filter.label }), _jsx(FilterDropdown, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, handleDropdownKeyDown: handleDropdownKeyDown, dropdownRef: dropdownRef, theme: theme, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, field: filter.field, label: filter.labelField }), _jsx(FilterModal, { showDropdown: showDropdown, setShowDropdown: setShowDropdown, dropdownRef: dropdownRef, theme: theme, hoveredDropdownValue: hoveredDropdownValue, selectedDropdownValue: selectedDropdownValue, dropdownOptions: filter.options, handleDropdownOptionClick: handleDropdownOptionClick, field: filter.field, label: filter.labelField })] }));
|
|
1187
|
-
}
|
|
1188
|
-
function removeQuotes(str) {
|
|
1189
|
-
if (str.startsWith('"') && str.endsWith('"')) {
|
|
1190
|
-
return str.slice(1, -1);
|
|
1191
|
-
}
|
|
1192
|
-
else {
|
|
1193
|
-
return str;
|
|
1194
|
-
}
|
|
1195
|
-
}
|
|
1196
|
-
function FilterDropdown({ setShowDropdown, dropdownRef, showDropdown, handleDropdownKeyDown, theme, dropdownPlaceholder = 'Select', selectedDropdownValue, dropdownOptions, field, label, }) {
|
|
1197
|
-
const dropdownText = selectedDropdownValue
|
|
1198
|
-
? String(dropdownOptions.find((option) => option[removeQuotes(field)] === selectedDropdownValue)[removeQuotes(label)])
|
|
1199
|
-
: dropdownPlaceholder;
|
|
1200
|
-
return (_jsx("div", { style: {
|
|
1201
|
-
display: 'flex',
|
|
1202
|
-
alignItems: 'center',
|
|
1203
|
-
justifyContent: 'space-between',
|
|
1204
|
-
borderRadius: '0.375rem',
|
|
1205
|
-
background: theme?.backgroundColor,
|
|
1206
|
-
fontFamily: theme?.fontFamily,
|
|
1207
|
-
boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
1208
|
-
}, children: _jsxs("button", { type: "button", style: {
|
|
1209
|
-
// fontFamily: theme?.fontFamily,
|
|
1210
|
-
borderColor: theme?.borderColor || '#E5E7EB',
|
|
1211
|
-
borderStyle: 'solid',
|
|
1212
|
-
borderWidth: 1,
|
|
1213
|
-
cursor: 'pointer',
|
|
1214
|
-
marginLeft: -1,
|
|
1215
|
-
borderRadius: '0.375rem',
|
|
1216
|
-
// width: '12rem',
|
|
1217
|
-
width: '100%',
|
|
1218
|
-
overflow: 'hidden',
|
|
1219
|
-
textOverflow: 'ellipsis',
|
|
1220
|
-
whiteSpace: 'nowrap',
|
|
1221
|
-
paddingLeft: '1rem',
|
|
1222
|
-
paddingRight: '1rem',
|
|
1223
|
-
display: 'inline-flex',
|
|
1224
|
-
minHeight: 38,
|
|
1225
|
-
justifyContent: 'space-between',
|
|
1226
|
-
alignItems: 'center',
|
|
1227
|
-
background: theme?.backgroundColor,
|
|
1228
|
-
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
1229
|
-
// fontWeight: theme?.fontWeightMedium || '800',
|
|
1230
|
-
}, ref: dropdownRef, onClick: () => setShowDropdown(!showDropdown), onKeyDown: handleDropdownKeyDown, children: [_jsx("p", { style: {
|
|
1231
|
-
margin: 0,
|
|
1232
|
-
fontFamily: theme?.fontFamily,
|
|
1233
|
-
color: theme?.primaryTextColor || '#364153',
|
|
1234
|
-
overflow: 'hidden',
|
|
1235
|
-
textOverflow: 'ellipsis',
|
|
1236
|
-
whiteSpace: 'nowrap',
|
|
1237
|
-
fontWeight: theme?.fontWeightMedium || '500',
|
|
1238
|
-
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
1239
|
-
}, children: dropdownText }), _jsx(ArrowDownHeadIcon, { style: {
|
|
1240
|
-
height: '1.25rem',
|
|
1241
|
-
width: '1.25rem',
|
|
1242
|
-
flex: 'none',
|
|
1243
|
-
color: theme?.secondaryTextColor,
|
|
1244
|
-
marginRight: '-0.25rem',
|
|
1245
|
-
}, "aria-hidden": "true" })] }) }));
|
|
1246
|
-
}
|
|
1247
|
-
function FilterModal({ setShowDropdown, dropdownRef, showDropdown, theme, selectedDropdownValue, hoveredDropdownValue, dropdownOptions, handleDropdownOptionClick, field, label, }) {
|
|
1248
|
-
return (_jsx(Modal, { showModal: showDropdown, setShowModal: setShowDropdown, parentRef: dropdownRef, theme: theme, children: _jsx(SelectedValueContext.Provider, { value: {
|
|
1249
|
-
selectedValue: selectedDropdownValue,
|
|
1250
|
-
handleValueChange: handleDropdownOptionClick,
|
|
1251
|
-
}, children: _jsx(HoveredValueContext.Provider, { value: { hoveredValue: hoveredDropdownValue }, children: dropdownOptions.map((row, index) => (_jsx(DropdownItem, { value: row[removeQuotes(field)], text: row[removeQuotes(label)], theme: theme, lastItem: dropdownOptions.length - 1 === index }, row[removeQuotes(field)]))) }) }) }));
|
|
1252
|
-
}
|