@quillsql/react 2.11.20 → 2.11.21
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/cjs/Chart.d.ts +6 -0
- package/dist/cjs/Chart.d.ts.map +1 -1
- package/dist/cjs/Chart.js +13 -13
- package/dist/cjs/ChartBuilder.d.ts +16 -6
- package/dist/cjs/ChartBuilder.d.ts.map +1 -1
- package/dist/cjs/ChartBuilder.js +88 -40
- package/dist/cjs/ChartEditor.js +1 -1
- package/dist/cjs/Dashboard.d.ts +3 -2
- package/dist/cjs/Dashboard.d.ts.map +1 -1
- package/dist/cjs/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
- package/dist/cjs/DateRangePicker/QuillDateRangePicker.js +1 -1
- package/dist/cjs/ReportBuilder.d.ts +9 -1
- package/dist/cjs/ReportBuilder.d.ts.map +1 -1
- package/dist/cjs/ReportBuilder.js +56 -41
- package/dist/cjs/SQLEditor.d.ts +7 -1
- package/dist/cjs/SQLEditor.d.ts.map +1 -1
- package/dist/cjs/SQLEditor.js +3 -6
- package/dist/cjs/Table.d.ts +6 -0
- package/dist/cjs/Table.d.ts.map +1 -1
- package/dist/cjs/Table.js +4 -4
- package/dist/cjs/components/Chart/BarChart.d.ts +2 -1
- package/dist/cjs/components/Chart/BarChart.d.ts.map +1 -1
- package/dist/cjs/components/Chart/BarChart.js +6 -4
- package/dist/cjs/components/Chart/BarList.d.ts +3 -2
- package/dist/cjs/components/Chart/BarList.d.ts.map +1 -1
- package/dist/cjs/components/Chart/BarList.js +3 -3
- package/dist/cjs/components/Chart/ChartError.d.ts +1 -1
- package/dist/cjs/components/Chart/ChartError.d.ts.map +1 -1
- package/dist/cjs/components/Chart/ChartError.js +2 -2
- package/dist/cjs/components/Chart/ChartSkeleton.d.ts +2 -1
- package/dist/cjs/components/Chart/ChartSkeleton.d.ts.map +1 -1
- package/dist/cjs/components/Chart/ChartSkeleton.js +2 -2
- package/dist/cjs/components/Chart/LineChart.d.ts +2 -1
- package/dist/cjs/components/Chart/LineChart.d.ts.map +1 -1
- package/dist/cjs/components/Chart/LineChart.js +3 -3
- package/dist/cjs/components/Chart/PieChart.d.ts +1 -0
- package/dist/cjs/components/Chart/PieChart.d.ts.map +1 -1
- package/dist/cjs/components/Chart/PieChart.js +4 -100
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts +2 -1
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DashboardFilter.js +2 -2
- package/dist/cjs/components/QuillCard.d.ts +1 -1
- package/dist/cjs/components/QuillCard.d.ts.map +1 -1
- package/dist/cjs/components/QuillCard.js +1 -1
- package/dist/cjs/components/QuillSelect.d.ts +1 -1
- package/dist/cjs/components/QuillSelect.d.ts.map +1 -1
- package/dist/cjs/components/QuillSelect.js +5 -3
- package/dist/cjs/components/QuillTable.d.ts +2 -1
- package/dist/cjs/components/QuillTable.d.ts.map +1 -1
- package/dist/cjs/components/QuillTable.js +5 -5
- package/dist/cjs/components/ReportBuilder/AddColumnPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddColumnPopover.js +2 -9
- package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddSortPopover.js +2 -2
- package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.js +4 -16
- package/dist/cjs/components/UiComponents.d.ts +9 -9
- package/dist/cjs/components/UiComponents.d.ts.map +1 -1
- package/dist/cjs/components/UiComponents.js +32 -17
- package/dist/cjs/internals/ReportBuilder/PivotList.d.ts +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotList.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotList.js +3 -3
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.js +25 -24
- package/dist/cjs/utils/color.d.ts +6 -0
- package/dist/cjs/utils/color.d.ts.map +1 -1
- package/dist/cjs/utils/color.js +98 -1
- package/dist/cjs/utils/valueFormatter.d.ts.map +1 -1
- package/dist/cjs/utils/valueFormatter.js +32 -2
- package/dist/esm/Chart.d.ts +6 -0
- package/dist/esm/Chart.d.ts.map +1 -1
- package/dist/esm/Chart.js +13 -13
- package/dist/esm/ChartBuilder.d.ts +16 -6
- package/dist/esm/ChartBuilder.d.ts.map +1 -1
- package/dist/esm/ChartBuilder.js +88 -40
- package/dist/esm/ChartEditor.js +1 -1
- package/dist/esm/Dashboard.d.ts +3 -2
- package/dist/esm/Dashboard.d.ts.map +1 -1
- package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
- package/dist/esm/DateRangePicker/QuillDateRangePicker.js +1 -1
- package/dist/esm/ReportBuilder.d.ts +9 -1
- package/dist/esm/ReportBuilder.d.ts.map +1 -1
- package/dist/esm/ReportBuilder.js +56 -41
- package/dist/esm/SQLEditor.d.ts +7 -1
- package/dist/esm/SQLEditor.d.ts.map +1 -1
- package/dist/esm/SQLEditor.js +3 -6
- package/dist/esm/Table.d.ts +6 -0
- package/dist/esm/Table.d.ts.map +1 -1
- package/dist/esm/Table.js +4 -4
- package/dist/esm/components/Chart/BarChart.d.ts +2 -1
- package/dist/esm/components/Chart/BarChart.d.ts.map +1 -1
- package/dist/esm/components/Chart/BarChart.js +7 -5
- package/dist/esm/components/Chart/BarList.d.ts +3 -2
- package/dist/esm/components/Chart/BarList.d.ts.map +1 -1
- package/dist/esm/components/Chart/BarList.js +3 -3
- package/dist/esm/components/Chart/ChartError.d.ts +1 -1
- package/dist/esm/components/Chart/ChartError.d.ts.map +1 -1
- package/dist/esm/components/Chart/ChartError.js +2 -2
- package/dist/esm/components/Chart/ChartSkeleton.d.ts +2 -1
- package/dist/esm/components/Chart/ChartSkeleton.d.ts.map +1 -1
- package/dist/esm/components/Chart/ChartSkeleton.js +2 -2
- package/dist/esm/components/Chart/LineChart.d.ts +2 -1
- package/dist/esm/components/Chart/LineChart.d.ts.map +1 -1
- package/dist/esm/components/Chart/LineChart.js +3 -3
- package/dist/esm/components/Chart/PieChart.d.ts +1 -0
- package/dist/esm/components/Chart/PieChart.d.ts.map +1 -1
- package/dist/esm/components/Chart/PieChart.js +3 -99
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts +2 -1
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DashboardFilter.js +2 -2
- package/dist/esm/components/QuillCard.d.ts +1 -1
- package/dist/esm/components/QuillCard.d.ts.map +1 -1
- package/dist/esm/components/QuillCard.js +1 -1
- package/dist/esm/components/QuillSelect.d.ts +1 -1
- package/dist/esm/components/QuillSelect.d.ts.map +1 -1
- package/dist/esm/components/QuillSelect.js +5 -3
- package/dist/esm/components/QuillTable.d.ts +2 -1
- package/dist/esm/components/QuillTable.d.ts.map +1 -1
- package/dist/esm/components/QuillTable.js +5 -5
- package/dist/esm/components/ReportBuilder/AddColumnPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddColumnPopover.js +2 -9
- package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddSortPopover.js +2 -2
- package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.js +4 -16
- package/dist/esm/components/UiComponents.d.ts +9 -9
- package/dist/esm/components/UiComponents.d.ts.map +1 -1
- package/dist/esm/components/UiComponents.js +32 -17
- package/dist/esm/internals/ReportBuilder/PivotList.d.ts +1 -1
- package/dist/esm/internals/ReportBuilder/PivotList.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotList.js +3 -3
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.js +25 -24
- package/dist/esm/utils/color.d.ts +6 -0
- package/dist/esm/utils/color.d.ts.map +1 -1
- package/dist/esm/utils/color.js +96 -0
- package/dist/esm/utils/valueFormatter.d.ts.map +1 -1
- package/dist/esm/utils/valueFormatter.js +32 -2
- package/package.json +1 -1
package/dist/cjs/Chart.d.ts
CHANGED
|
@@ -94,6 +94,12 @@ export interface ChartProps {
|
|
|
94
94
|
* ```
|
|
95
95
|
*/
|
|
96
96
|
mapColorsToFields?: (dashboardItem: DashboardItem, theme: QuillTheme) => ColorMapType;
|
|
97
|
+
/**
|
|
98
|
+
* Styles the top-level container of the Chart.
|
|
99
|
+
*
|
|
100
|
+
* This can be useful for TailwindCSS-style classname strings.
|
|
101
|
+
*/
|
|
102
|
+
className?: string;
|
|
97
103
|
/**
|
|
98
104
|
* Styles the top-level container of the Chart.
|
|
99
105
|
*/
|
package/dist/cjs/Chart.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAgGjD,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,WAQhE;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAeF;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,GAAG,CAAC;IAE7B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAClB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,UAAU,KACd,YAAY,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAsC/B,CAAC;AAyiBF,eAAe,KAAK,CAAC"}
|
package/dist/cjs/Chart.js
CHANGED
|
@@ -119,9 +119,9 @@ const Chart = (props) => {
|
|
|
119
119
|
? theme.chartColors
|
|
120
120
|
: ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
|
|
121
121
|
}, [data.colors]);
|
|
122
|
-
return ((0, jsx_runtime_1.jsx)(ChartUpdater, { chartId: data.chartId, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideDateRangeFilter: data.hideDateRangeFilter, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
|
|
122
|
+
return ((0, jsx_runtime_1.jsx)(ChartUpdater, { chartId: data.chartId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideDateRangeFilter: data.hideDateRangeFilter, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
|
|
123
123
|
};
|
|
124
|
-
const ChartUpdater = ({ colors, chartId, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, hideDateRangeFilter, mapColorsToFields, }) => {
|
|
124
|
+
const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, hideDateRangeFilter, mapColorsToFields, }) => {
|
|
125
125
|
const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
|
|
126
126
|
const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
|
|
127
127
|
const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
|
|
@@ -198,9 +198,9 @@ const ChartUpdater = ({ colors, chartId, containerStyle, isAnimationActive, hide
|
|
|
198
198
|
setInitialLoad(false);
|
|
199
199
|
getChartOptions();
|
|
200
200
|
}, [dashboardFilters, client, chartId]);
|
|
201
|
-
return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
|
|
201
|
+
return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
|
|
202
202
|
};
|
|
203
|
-
const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
|
|
203
|
+
const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
|
|
204
204
|
const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
|
|
205
205
|
const theme = (0, useTheme_1.default)();
|
|
206
206
|
const chartColors = (0, react_1.useMemo)(() => {
|
|
@@ -239,10 +239,10 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
239
239
|
: null;
|
|
240
240
|
}, [pivotTable, config?.yAxisFields]);
|
|
241
241
|
if (error) {
|
|
242
|
-
return (0, jsx_runtime_1.jsx)(ChartError_1.default, { containerStyle: containerStyle });
|
|
242
|
+
return (0, jsx_runtime_1.jsx)(ChartError_1.default, { className: className, containerStyle: containerStyle });
|
|
243
243
|
}
|
|
244
244
|
else if (!config || loading) {
|
|
245
|
-
return (0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { containerStyle: containerStyle });
|
|
245
|
+
return (0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { className: className, containerStyle: containerStyle });
|
|
246
246
|
}
|
|
247
247
|
// TODO: Figure out if we can use ?? to coalesce these into the variable.
|
|
248
248
|
const chartTypes = [config?.chartType];
|
|
@@ -250,7 +250,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
250
250
|
const rows = pivotTable ? pivotTable.rows : config.rows;
|
|
251
251
|
const yAxisFields = pivotTableYAxis ? pivotTableYAxis : config.yAxisFields;
|
|
252
252
|
const xAxisField = config.xAxisField;
|
|
253
|
-
return ((0, jsx_runtime_1.jsx)(PieChart_1.default, { containerStyle: containerStyle, data: rows.map((row) => {
|
|
253
|
+
return ((0, jsx_runtime_1.jsx)(PieChart_1.default, { className: className, containerStyle: containerStyle, data: rows.map((row) => {
|
|
254
254
|
return {
|
|
255
255
|
...row,
|
|
256
256
|
count: parseInt(row[yAxisFields[0].field]) /
|
|
@@ -292,7 +292,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
292
292
|
return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, rowsPerPage: config?.rowsPerPage || 10, containerStyle: {
|
|
293
293
|
width: containerStyle?.width || '100%',
|
|
294
294
|
height: containerStyle?.height || '400px',
|
|
295
|
-
}, showDownloadCSVButton: true, downloadCSV: () => {
|
|
295
|
+
}, className: className, showDownloadCSVButton: true, downloadCSV: () => {
|
|
296
296
|
(0, csv_1.downloadCSV)({
|
|
297
297
|
rows: pivotTable?.rows ?? data.rows ?? [],
|
|
298
298
|
fields: columns ?? data.yAxisFields,
|
|
@@ -301,7 +301,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
301
301
|
} }));
|
|
302
302
|
}
|
|
303
303
|
if (chartTypes.includes('bar')) {
|
|
304
|
-
return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable ? pivotTable.rows : config.rows, theme: theme, yAxisFields: pivotTableYAxis ? pivotTableYAxis : config.yAxisFields, colors: chartColors, xAxisField: config.xAxisField, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, colorMap: colorMap }));
|
|
304
|
+
return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable ? pivotTable.rows : config.rows, theme: theme, yAxisFields: pivotTableYAxis ? pivotTableYAxis : config.yAxisFields, colors: chartColors, xAxisField: config.xAxisField, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, colorMap: colorMap }));
|
|
305
305
|
}
|
|
306
306
|
const yAxisFields = pivotTableYAxis
|
|
307
307
|
? pivotTableYAxis
|
|
@@ -327,7 +327,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
327
327
|
const yAxis = yAxisFields[0]?.field;
|
|
328
328
|
barChartData = [{ [xAxis]: '', [yAxis]: '0' }];
|
|
329
329
|
}
|
|
330
|
-
return ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: chartColors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, data: barChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, colorMap: colorMap }));
|
|
330
|
+
return ((0, jsx_runtime_1.jsx)(BarChart_1.default, { colors: chartColors, theme: theme, isStacked: isPivot && yAxisFields.length > (dateFilter?.comparison ? 2 : 1), yAxisFields: yAxisFields, data: barChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, colorMap: colorMap }));
|
|
331
331
|
}
|
|
332
332
|
if (chartTypes.includes('metric')) {
|
|
333
333
|
const data = config;
|
|
@@ -350,7 +350,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
350
350
|
maxWidth: '100%',
|
|
351
351
|
width: '100%',
|
|
352
352
|
...containerStyle,
|
|
353
|
-
}, children: "No results" }));
|
|
353
|
+
}, className: className, children: "No results" }));
|
|
354
354
|
}
|
|
355
355
|
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
356
356
|
fontFamily: theme?.fontFamily,
|
|
@@ -368,7 +368,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
368
368
|
display: 'flex',
|
|
369
369
|
width: '100%',
|
|
370
370
|
flexDirection: 'row',
|
|
371
|
-
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
371
|
+
}, className: className, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
372
372
|
display: 'flex',
|
|
373
373
|
gap: 4,
|
|
374
374
|
alignItems: 'baseline',
|
|
@@ -440,6 +440,6 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
440
440
|
{ [xAxis]: endDate, [yAxis]: '0' },
|
|
441
441
|
];
|
|
442
442
|
}
|
|
443
|
-
return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields, data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle ?? 'solid' }));
|
|
443
|
+
return ((0, jsx_runtime_1.jsx)(LineChart_1.default, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields, data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle ?? 'solid' }));
|
|
444
444
|
};
|
|
445
445
|
exports.default = Chart;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
import { QuillTheme } from './QuillProvider';
|
|
3
2
|
import { DashboardItem } from './Dashboard';
|
|
4
3
|
export declare const numberFormatOptions: string[];
|
|
5
4
|
export declare const dateFormatOptions: string[];
|
|
@@ -15,6 +14,7 @@ export interface ChartBuilderProps {
|
|
|
15
14
|
SelectComponent?: (props: {
|
|
16
15
|
value: string;
|
|
17
16
|
label?: string;
|
|
17
|
+
width: number;
|
|
18
18
|
options: {
|
|
19
19
|
value: string;
|
|
20
20
|
label: string;
|
|
@@ -244,12 +244,22 @@ export declare function ChartBuilderWithModal(props: ChartBuilderProps): import(
|
|
|
244
244
|
* ### Chart Builder API
|
|
245
245
|
* @see https://docs.quillsql.com/components/chart-builder
|
|
246
246
|
*/
|
|
247
|
-
export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton, hideSubmitButton, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
|
|
248
|
-
export declare function DashboardFilterModal({ isOpen, setIsOpen,
|
|
247
|
+
export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, ModalComponent, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton, hideSubmitButton, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
|
|
248
|
+
export declare function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent, ButtonComponent, }: {
|
|
249
249
|
isOpen: boolean;
|
|
250
250
|
setIsOpen: (e: boolean) => void;
|
|
251
|
-
override: () => void;
|
|
252
|
-
theme: QuillTheme;
|
|
253
251
|
issues: string[];
|
|
254
|
-
|
|
252
|
+
ButtonComponent?: (props: {
|
|
253
|
+
onClick: () => void;
|
|
254
|
+
label: string;
|
|
255
|
+
}) => JSX.Element;
|
|
256
|
+
ModalComponent?: (props: {
|
|
257
|
+
isOpen: boolean;
|
|
258
|
+
setIsOpen: (isOpen: boolean) => void;
|
|
259
|
+
title?: string;
|
|
260
|
+
children: ReactNode;
|
|
261
|
+
width?: number;
|
|
262
|
+
height?: number;
|
|
263
|
+
}) => JSX.Element;
|
|
264
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
255
265
|
//# sourceMappingURL=ChartBuilder.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAOZ,SAAS,EACV,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"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"}
|
package/dist/cjs/ChartBuilder.js
CHANGED
|
@@ -18,6 +18,7 @@ const merge_1 = require("./utils/merge");
|
|
|
18
18
|
const textProcessing_1 = require("./utils/textProcessing");
|
|
19
19
|
const QuillSelect_1 = require("./components/QuillSelect");
|
|
20
20
|
const QuillCard_1 = require("./components/QuillCard");
|
|
21
|
+
const valueFormatter_1 = require("./utils/valueFormatter");
|
|
21
22
|
const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
|
|
22
23
|
const POSTGRES_DATE_TYPES = [
|
|
23
24
|
'timestamp',
|
|
@@ -215,13 +216,14 @@ exports.ChartBuilderWithModal = ChartBuilderWithModal;
|
|
|
215
216
|
* ### Chart Builder API
|
|
216
217
|
* @see https://docs.quillsql.com/components/chart-builder
|
|
217
218
|
*/
|
|
218
|
-
function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, }) {
|
|
219
|
+
function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, LabelComponent = UiComponents_1.MemoizedLabel, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextComponent = UiComponents_1.MemoizedText, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, TableComponent = UiComponents_1.QuillTableComponent, ModalComponent, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, }) {
|
|
219
220
|
const dateRange = dr || [null, null, null];
|
|
220
221
|
const [client] = (0, react_1.useContext)(Context_1.ClientContext);
|
|
221
222
|
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
222
223
|
const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
|
|
224
|
+
const [windowWidth, setWindowWidth] = (0, react_1.useState)(1200);
|
|
223
225
|
const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
|
|
224
|
-
const [divWidth, setDivWidth] = (0, react_1.useState)(
|
|
226
|
+
const [divWidth, setDivWidth] = (0, react_1.useState)('auto');
|
|
225
227
|
const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
|
|
226
228
|
const fields = fieldsProp?.map((field) => ({
|
|
227
229
|
field: field.name,
|
|
@@ -231,33 +233,30 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
231
233
|
})) || [];
|
|
232
234
|
const parentRef = (0, react_1.useRef)(null);
|
|
233
235
|
const deleteRef = (0, react_1.useRef)(null);
|
|
236
|
+
const pivotCardContainer = (0, react_1.useRef)(null);
|
|
234
237
|
const modalPadding = 20;
|
|
235
238
|
const deleteButtonMargin = -13;
|
|
236
239
|
(0, react_1.useEffect)(() => {
|
|
237
|
-
const
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
? deleteRef?.current.offsetWidth - deleteButtonMargin
|
|
243
|
-
: 0));
|
|
240
|
+
const handleResize = () => setWindowWidth(window.innerWidth);
|
|
241
|
+
handleResize();
|
|
242
|
+
window.addEventListener('resize', handleResize);
|
|
243
|
+
return () => {
|
|
244
|
+
window.removeEventListener('resize', handleResize);
|
|
244
245
|
};
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
}
|
|
249
|
-
// Optional: Handle window resize
|
|
246
|
+
}, []);
|
|
247
|
+
(0, react_1.useEffect)(() => {
|
|
248
|
+
const calculateWidth = () => pivotCardContainer.current?.getBoundingClientRect().width ?? 'auto';
|
|
250
249
|
const handleResize = () => {
|
|
251
|
-
if (
|
|
250
|
+
if (pivotCardContainer.current) {
|
|
252
251
|
setDivWidth(calculateWidth());
|
|
253
252
|
}
|
|
254
253
|
};
|
|
254
|
+
handleResize();
|
|
255
255
|
window.addEventListener('resize', handleResize);
|
|
256
|
-
// Cleanup listener
|
|
257
256
|
return () => {
|
|
258
257
|
window.removeEventListener('resize', handleResize);
|
|
259
258
|
};
|
|
260
|
-
}, []);
|
|
259
|
+
}, [pivotCardContainer]);
|
|
261
260
|
// get schema
|
|
262
261
|
(0, react_1.useEffect)(() => {
|
|
263
262
|
let isSubscribed = true;
|
|
@@ -472,6 +471,41 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
472
471
|
return undefined;
|
|
473
472
|
}
|
|
474
473
|
}, [formData.pivot, rows]);
|
|
474
|
+
const formattedRows = (0, react_1.useMemo)(() => {
|
|
475
|
+
if (selectedPivotTable && formData.chartType === 'table') {
|
|
476
|
+
const columns = selectedPivotTable.columns;
|
|
477
|
+
columns.forEach((col, index) => {
|
|
478
|
+
// ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
|
|
479
|
+
if (formData.pivot?.valueFieldType && index !== 0) {
|
|
480
|
+
col.format = formData.pivot.valueFieldType;
|
|
481
|
+
}
|
|
482
|
+
});
|
|
483
|
+
return selectedPivotTable.rows.map((row) => {
|
|
484
|
+
return columns.reduce((formattedRow, column) => {
|
|
485
|
+
// Apply the format function to each field in the row
|
|
486
|
+
const formattedValue = (0, valueFormatter_1.quillFormat)({
|
|
487
|
+
value: row[column.field],
|
|
488
|
+
format: column.format,
|
|
489
|
+
});
|
|
490
|
+
formattedRow[column.field] = formattedValue;
|
|
491
|
+
return formattedRow;
|
|
492
|
+
}, {});
|
|
493
|
+
});
|
|
494
|
+
}
|
|
495
|
+
else {
|
|
496
|
+
return rows.map((row) => {
|
|
497
|
+
return formData.columns.reduce((formattedRow, column) => {
|
|
498
|
+
// Apply the format function to each field in the row
|
|
499
|
+
const formattedValue = (0, valueFormatter_1.quillFormat)({
|
|
500
|
+
value: row[column.field],
|
|
501
|
+
format: column.format,
|
|
502
|
+
});
|
|
503
|
+
formattedRow[column.field] = formattedValue;
|
|
504
|
+
return formattedRow;
|
|
505
|
+
}, {});
|
|
506
|
+
});
|
|
507
|
+
}
|
|
508
|
+
}, [selectedPivotTable, formData.columns, formData.chartType]);
|
|
475
509
|
const handleChange = (value, fieldName, index) => {
|
|
476
510
|
try {
|
|
477
511
|
// WE NEED TO REPROCESS THE PIVOT TABLE IF THE PIVOT COLUMN CHANGES
|
|
@@ -680,6 +714,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
680
714
|
query: queryNoDateColumn || query,
|
|
681
715
|
queryString: queryNoDateColumn || query,
|
|
682
716
|
pivot: formData.pivot,
|
|
717
|
+
referencedTables: allTables,
|
|
683
718
|
};
|
|
684
719
|
// @ts-ignore
|
|
685
720
|
if (cloudBody['rows']) {
|
|
@@ -727,10 +762,18 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
727
762
|
onAddToDashboardComplete();
|
|
728
763
|
}
|
|
729
764
|
};
|
|
765
|
+
// Prevent horizontal view on small screens.
|
|
766
|
+
isHorizontalView = windowWidth < 1200 ? false : isHorizontalView;
|
|
730
767
|
if (!schema) {
|
|
731
768
|
return null;
|
|
732
769
|
}
|
|
733
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
770
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
771
|
+
width: '100%',
|
|
772
|
+
height: '100%',
|
|
773
|
+
display: 'flex',
|
|
774
|
+
flexDirection: 'column',
|
|
775
|
+
flexGrow: 1,
|
|
776
|
+
}, children: [(0, jsx_runtime_1.jsxs)("div", { id: "quill-chart-modal", style: {
|
|
734
777
|
width: '100%',
|
|
735
778
|
height: '100%',
|
|
736
779
|
maxWidth: '100%',
|
|
@@ -752,12 +795,18 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
752
795
|
height: formData.chartType === 'metric'
|
|
753
796
|
? 100
|
|
754
797
|
: isHorizontalView
|
|
755
|
-
? '
|
|
798
|
+
? 'calc(50% - 10px)'
|
|
756
799
|
: 400,
|
|
757
800
|
...(isHorizontalView && { flexGrow: 1 }),
|
|
758
801
|
} })),
|
|
759
802
|
// Make sure to display non-pivoted table when using pivot chart
|
|
760
|
-
isHorizontalView &&
|
|
803
|
+
isHorizontalView && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
804
|
+
width: '100%',
|
|
805
|
+
height: 'calc(50% - 10px)',
|
|
806
|
+
flexGrow: 1,
|
|
807
|
+
}, children: formData.chartType !== 'table' ? ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: formData.columns })) : ((0, jsx_runtime_1.jsx)(TableComponent, { rows: formattedRows, columns: selectedPivotTable
|
|
808
|
+
? selectedPivotTable.columns
|
|
809
|
+
: formData.columns })) }))] }), isOpen && ((0, jsx_runtime_1.jsxs)("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
|
|
761
810
|
display: 'flex',
|
|
762
811
|
flexDirection: 'column',
|
|
763
812
|
height: '100%',
|
|
@@ -773,10 +822,10 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
773
822
|
}, options: dashboardOptions.map((elem) => ({
|
|
774
823
|
label: elem.label,
|
|
775
824
|
value: elem.label,
|
|
776
|
-
})) })] })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Chart type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'),
|
|
825
|
+
})), width: 200 })] })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Chart type" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.chartType, onChange: (e) => handleChange(e.target.value, 'chartType'),
|
|
777
826
|
// filter out metric for all pivots
|
|
778
827
|
// filter out bar and pie for row and column pivot
|
|
779
|
-
options: getChartTypeOptions(formData) })] })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
828
|
+
options: getChartTypeOptions(formData), width: 200 })] })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
780
829
|
display: 'flex',
|
|
781
830
|
flexDirection: 'column',
|
|
782
831
|
gap: 12,
|
|
@@ -786,11 +835,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
786
835
|
// marginTop: 6,
|
|
787
836
|
display: 'flex',
|
|
788
837
|
flexDirection: 'column',
|
|
789
|
-
}, children: (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
790
|
-
// width: 592,
|
|
791
|
-
paddingRight: 42,
|
|
792
|
-
maxWidth: 750,
|
|
793
|
-
}, children: (0, jsx_runtime_1.jsx)("div", { style: { width: !isHorizontalView ? divWidth : 'auto' }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
|
|
838
|
+
}, children: (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { ref: pivotCardContainer, children: (0, jsx_runtime_1.jsx)("div", { style: { width: !isHorizontalView ? divWidth : 'auto' }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
|
|
794
839
|
pivot: formData.pivot,
|
|
795
840
|
rows: selectedPivotTable?.rows,
|
|
796
841
|
columns: selectedPivotTable?.columns,
|
|
@@ -816,7 +861,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
816
861
|
: fieldOptions.map((elem) => ({
|
|
817
862
|
label: elem.field,
|
|
818
863
|
value: elem.field,
|
|
819
|
-
})) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.pivot
|
|
864
|
+
})), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-x-axis-label", width: 200, value: formData.pivot
|
|
820
865
|
? formData.pivot.rowField
|
|
821
866
|
: formData.xAxisLabel, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'xAxisLabel') }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot &&
|
|
822
867
|
(0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
|
|
@@ -824,7 +869,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
824
869
|
: formData.xAxisFormat, onChange: (e) => handleChange(e.target.value, 'xAxisFormat'), options: formData.pivot &&
|
|
825
870
|
(0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
|
|
826
871
|
? [{ value: 'pivot_date', label: 'date' }]
|
|
827
|
-
: formatOptions })] }, 'xAxisField'), (0, jsx_runtime_1.jsx)("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
872
|
+
: formatOptions, width: 200 })] }, 'xAxisField'), (0, jsx_runtime_1.jsx)("br", {})] })), CHART_TO_LABELS[formData.chartType]?.yAxisLabel && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: CHART_TO_LABELS[formData.chartType]?.yAxisLabel ?? '' }), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
828
873
|
display: 'flex',
|
|
829
874
|
flexDirection: 'column',
|
|
830
875
|
gap: 10,
|
|
@@ -848,7 +893,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
848
893
|
.map((elem) => ({
|
|
849
894
|
label: elem.field,
|
|
850
895
|
value: elem.field,
|
|
851
|
-
})) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
|
|
896
|
+
})), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "chart-builder-y-axis-label", width: 200, value: formData.pivot?.valueField || yAxisField.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'yAxisFields.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.pivot
|
|
852
897
|
? NUMBER_OPTIONS.find((option) => {
|
|
853
898
|
return (option.value === yAxisField.format);
|
|
854
899
|
})
|
|
@@ -857,7 +902,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
857
902
|
: 'whole_number'
|
|
858
903
|
: yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
|
|
859
904
|
? NUMBER_OPTIONS
|
|
860
|
-
: formatOptions }), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] }))] })), (0, jsx_runtime_1.jsx)("br", {})] })), isHorizontalView && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
905
|
+
: formatOptions, width: 200 }), formData.pivot === null && ((0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))) }), formData.pivot === null && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" })] }))] })), (0, jsx_runtime_1.jsx)("br", {})] })), isHorizontalView && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
861
906
|
display: 'flex',
|
|
862
907
|
flexDirection: 'column',
|
|
863
908
|
gap: 6,
|
|
@@ -878,7 +923,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
878
923
|
}, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.label, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: selectedPivotTable.columns.map((elem) => ({
|
|
879
924
|
label: elem.label,
|
|
880
925
|
value: elem.label,
|
|
881
|
-
})) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value:
|
|
926
|
+
})), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value:
|
|
882
927
|
// The first index use rowField for the rest of them use value fields
|
|
883
928
|
formData.pivot &&
|
|
884
929
|
column.field === formData.pivot.rowField
|
|
@@ -891,7 +936,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
891
936
|
? (0, PivotModal_1.isDateField)(formData.pivot.rowFieldType)
|
|
892
937
|
? [{ label: 'date', value: 'pivot_date' }]
|
|
893
938
|
: [{ label: 'string', value: 'string' }]
|
|
894
|
-
: [...NUMBER_OPTIONS] })] }, 'column' + index)))
|
|
939
|
+
: [...NUMBER_OPTIONS], width: 200 })] }, 'column' + index)))
|
|
895
940
|
: formData.columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
896
941
|
display: 'flex',
|
|
897
942
|
flexDirection: 'row',
|
|
@@ -899,7 +944,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
899
944
|
}, children: [(0, jsx_runtime_1.jsx)(SelectComponent, { value: column.field, onChange: (e) => handleChange(e.target.value, 'columns.field', index), options: fields.map((elem) => ({
|
|
900
945
|
label: elem.field,
|
|
901
946
|
value: elem.field,
|
|
902
|
-
})) }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] })), showDateFieldOptions && formData.dateField && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
947
|
+
})), width: 200 }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: `chart-builder-column-label-${index}`, width: 200, value: column.label, placeholder: "Column Label", onChange: (e) => handleChange(e.target.value, 'columns.label', index) }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: column.format, onChange: (e) => handleChange(e.target.value, 'columns.format', index), options: formatOptions, width: 200 }), (0, jsx_runtime_1.jsx)("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => handleRemoveField('columns', index) }) })] }, 'column' + index))) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('columns'), label: "Add column +" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {})] })), showDateFieldOptions && formData.dateField && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
903
948
|
display: 'flex',
|
|
904
949
|
flexDirection: 'column',
|
|
905
950
|
gap: 6,
|
|
@@ -911,12 +956,12 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
911
956
|
}, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Table" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: formData.dateField?.table, onChange: (e) => handleChange(e.target.value, 'dateField.table'), options: dateFieldOptions.map((elem) => ({
|
|
912
957
|
label: elem.name,
|
|
913
958
|
value: elem.name,
|
|
914
|
-
})) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: (0, textProcessing_1.removeDoubleQuotes)(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
|
|
959
|
+
})), width: 200 })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { label: "Field" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: (0, textProcessing_1.removeDoubleQuotes)(formData.dateField?.field), onChange: (e) => handleChange(e.target.value, 'dateField.field'), options: dateFieldOptions
|
|
915
960
|
?.find((elem) => elem.name === formData.dateField?.table)
|
|
916
961
|
?.columns?.map((elem) => ({
|
|
917
962
|
label: elem.name,
|
|
918
963
|
value: elem.name,
|
|
919
|
-
})) || [] })] })] }), (0, jsx_runtime_1.jsx)("br", {})] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
964
|
+
})) || [], width: 200 })] })] }), (0, jsx_runtime_1.jsx)("br", {})] })), showAccessControlOptions && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
920
965
|
display: 'flex',
|
|
921
966
|
flexDirection: 'column',
|
|
922
967
|
gap: 12,
|
|
@@ -931,7 +976,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
931
976
|
? buttonLabel
|
|
932
977
|
: dashboardItem
|
|
933
978
|
? 'Save changes'
|
|
934
|
-
: 'Add to dashboard' }))] })] }))] }), (0, jsx_runtime_1.jsx)(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal,
|
|
979
|
+
: 'Add to dashboard' }))] })] }))] }), (0, jsx_runtime_1.jsx)(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent })] }));
|
|
935
980
|
}
|
|
936
981
|
exports.default = ChartBuilder;
|
|
937
982
|
function SegmentedControl({ onChange, value, theme, organizationName, }) {
|
|
@@ -996,18 +1041,21 @@ function SegmentedControl({ onChange, value, theme, organizationName, }) {
|
|
|
996
1041
|
}
|
|
997
1042
|
` }), organizationName] }))] }));
|
|
998
1043
|
}
|
|
999
|
-
function DashboardFilterModal({ isOpen, setIsOpen,
|
|
1000
|
-
|
|
1044
|
+
function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent = UiComponents_1.MemoizedModal, ButtonComponent = UiComponents_1.MemoizedButton, }) {
|
|
1045
|
+
if (!isOpen)
|
|
1046
|
+
return null;
|
|
1047
|
+
return ((0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: 'Chart not compatible with selected dashboard', width: 600, height: 400, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
1001
1048
|
display: 'flex',
|
|
1002
1049
|
flexDirection: 'column',
|
|
1003
1050
|
width: '600px',
|
|
1004
1051
|
padding: '20px',
|
|
1005
1052
|
boxSizing: 'border-box',
|
|
1053
|
+
overflow: 'scroll',
|
|
1006
1054
|
}, children: [issues.map((issue, index) => ((0, jsx_runtime_1.jsx)("span", { style: { paddingTop: '10px' }, children: issue }, issue))), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: {
|
|
1007
1055
|
display: 'flex',
|
|
1008
1056
|
flexDirection: 'row',
|
|
1009
1057
|
gap: '12px',
|
|
1010
1058
|
justifyContent: 'flex-end',
|
|
1011
|
-
}, children: (0, jsx_runtime_1.jsx)(
|
|
1059
|
+
}, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Got It", onClick: () => setIsOpen(false) }) })] }) }));
|
|
1012
1060
|
}
|
|
1013
1061
|
exports.DashboardFilterModal = DashboardFilterModal;
|
package/dist/cjs/ChartEditor.js
CHANGED
|
@@ -118,7 +118,7 @@ function ChartEditor({ isOpen, chartId, isAdmin = false, destinationDashboard, c
|
|
|
118
118
|
if (!dashboardItem) {
|
|
119
119
|
return (0, jsx_runtime_1.jsx)("div", {});
|
|
120
120
|
}
|
|
121
|
-
return ((0, jsx_runtime_1.jsx)("div", { ref: parentRef, children: (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: chartBuilderTitle || 'Add to dashboard',
|
|
121
|
+
return ((0, jsx_runtime_1.jsx)("div", { ref: parentRef, style: { height: '100%' }, children: (0, jsx_runtime_1.jsx)(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: chartBuilderTitle || 'Add to dashboard',
|
|
122
122
|
// For isHorizontalView, use full viewport size minus 80px for padding,
|
|
123
123
|
// otherwise use the default layout method of the modal (contents).
|
|
124
124
|
width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { dashboardItem: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, fields: dashboardItem.fields, query: dashboardItem.queryString, pivot: dashboardItem.pivot, isOpen: isOpen, setIsOpen: setIsOpen, showTableFormatOptions: isAdmin, showDateFieldOptions: isAdmin, showAccessControlOptions: isAdmin, showDashboardDropdown: isAdmin, destinationDashboard: destinationDashboard, onAddToDashboardComplete: onAddToDashboardComplete, dateRange: dateRange, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, DeleteButtonComponent: DeleteButtonComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, isHorizontalView: isHorizontalView, PopoverComponent: PopoverComponent, TableComponent: TableComponent, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName, hideSubmitButton: hideSubmitButton, hideDeleteButton: hideDeleteButton }) }) }));
|
package/dist/cjs/Dashboard.d.ts
CHANGED
|
@@ -131,8 +131,9 @@ export interface DashboardProps {
|
|
|
131
131
|
error?: string;
|
|
132
132
|
}) => JSX.Element;
|
|
133
133
|
/** A select component. */
|
|
134
|
-
SelectComponent?: ({ label, value, options, onChange, }: {
|
|
134
|
+
SelectComponent?: ({ label, value, options, onChange, width, }: {
|
|
135
135
|
value: string;
|
|
136
|
+
width: number;
|
|
136
137
|
label?: string;
|
|
137
138
|
options: {
|
|
138
139
|
value: string;
|
|
@@ -188,7 +189,7 @@ export interface DashboardProps {
|
|
|
188
189
|
/** The line style for comparison ranges on line chart (default: `solid`). */
|
|
189
190
|
comparisonLineStyle?: 'solid' | 'dashed';
|
|
190
191
|
/**
|
|
191
|
-
*
|
|
192
|
+
* The styles for the dashboard container.
|
|
192
193
|
*
|
|
193
194
|
* This container is the parent of all the filtering buttons as well as any
|
|
194
195
|
* dashboard sections. This can be useful for TailwindCSS-style classname
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/Dashboard.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/Dashboard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,WAAW,EAKZ,MAAM,OAAO,CAAC;AAqBf,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,OAAO,EAAE,IAAI,CAAA;KAAE,CAAC;IAC9C,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAClD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACf,KAAK,IAAI,CAAC;IACX,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,GACN,EAAE,6BAA6B,
|
|
1
|
+
{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,WAAW,EAKZ,MAAM,OAAO,CAAC;AAqBf,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,OAAO,EAAE,IAAI,CAAA;KAAE,CAAC;IAC9C,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAClD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACf,KAAK,IAAI,CAAC;IACX,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,GACN,EAAE,6BAA6B,2CA+H/B"}
|
|
@@ -61,7 +61,7 @@ function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onC
|
|
|
61
61
|
})), value: localPreset.label || '', onChange: (e) => {
|
|
62
62
|
onChangePreset(e);
|
|
63
63
|
setLocalPreset({ label: e.target.value });
|
|
64
|
-
} })] }));
|
|
64
|
+
}, width: 200 })] }));
|
|
65
65
|
}
|
|
66
66
|
exports.QuillDateRangePicker = QuillDateRangePicker;
|
|
67
67
|
function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate, setAnchorEndDate, localStartDate, localEndDate, setLocalStartDate, setLocalEndDate, updateDateFilter, setLocalPreset, setShowModal, }) {
|