@quillsql/react 2.11.30 → 2.12.0
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 +25 -18
- package/dist/cjs/Chart.d.ts.map +1 -1
- package/dist/cjs/Chart.js +25 -17
- package/dist/cjs/ChartBuilder.d.ts +9 -5
- package/dist/cjs/ChartBuilder.d.ts.map +1 -1
- package/dist/cjs/ChartBuilder.js +34 -38
- package/dist/cjs/ChartEditor.d.ts +10 -6
- package/dist/cjs/ChartEditor.d.ts.map +1 -1
- package/dist/cjs/ChartEditor.js +11 -9
- package/dist/cjs/Dashboard.d.ts +53 -38
- package/dist/cjs/Dashboard.d.ts.map +1 -1
- package/dist/cjs/Dashboard.js +36 -17
- package/dist/cjs/ReportBuilder.d.ts +3 -3
- package/dist/cjs/ReportBuilder.d.ts.map +1 -1
- package/dist/cjs/ReportBuilder.js +20 -20
- package/dist/cjs/SQLEditor.d.ts +5 -5
- package/dist/cjs/SQLEditor.d.ts.map +1 -1
- package/dist/cjs/SQLEditor.js +2 -2
- package/dist/cjs/Table.d.ts +6 -6
- package/dist/cjs/Table.d.ts.map +1 -1
- package/dist/cjs/Table.js +14 -12
- package/dist/cjs/components/Chart/BarChart.d.ts.map +1 -1
- package/dist/cjs/components/Chart/BarChart.js +8 -1
- 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 +5 -1
- package/dist/cjs/components/Dashboard/ChartComponent.d.ts +2 -2
- package/dist/cjs/components/Dashboard/ChartComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/ChartComponent.js +4 -4
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts +12 -1
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DashboardFilter.js +26 -2
- package/dist/cjs/components/Dashboard/DataLoader.d.ts +2 -2
- package/dist/cjs/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.js +3 -0
- package/dist/cjs/components/Dashboard/MetricComponent.d.ts +2 -2
- package/dist/cjs/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/MetricComponent.js +6 -6
- package/dist/cjs/components/Dashboard/TableComponent.d.ts +2 -2
- package/dist/cjs/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/TableComponent.js +6 -6
- package/dist/cjs/components/QuillMultiSelect.d.ts +11 -0
- package/dist/cjs/components/QuillMultiSelect.d.ts.map +1 -0
- package/dist/cjs/components/QuillMultiSelect.js +183 -0
- package/dist/cjs/components/QuillSelect.d.ts.map +1 -1
- package/dist/cjs/components/QuillSelect.js +0 -1
- package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.js +1 -0
- package/dist/cjs/components/UiComponents.d.ts +10 -0
- package/dist/cjs/components/UiComponents.d.ts.map +1 -1
- package/dist/cjs/components/UiComponents.js +15 -17
- package/dist/cjs/hooks/useExport.d.ts +1 -1
- package/dist/cjs/hooks/useExport.d.ts.map +1 -1
- package/dist/cjs/hooks/useExport.js +2 -2
- package/dist/cjs/hooks/useFormat.d.ts +1 -1
- package/dist/cjs/hooks/useFormat.d.ts.map +1 -1
- package/dist/cjs/hooks/useFormat.js +2 -2
- package/dist/cjs/hooks/useQuill.d.ts +2 -2
- package/dist/cjs/hooks/useQuill.d.ts.map +1 -1
- package/dist/cjs/hooks/useQuill.js +12 -11
- package/dist/cjs/index.d.ts +1 -3
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +1 -3
- package/dist/cjs/models/Filter.d.ts +7 -0
- package/dist/cjs/models/Filter.d.ts.map +1 -0
- package/dist/cjs/models/Filter.js +2 -0
- package/dist/cjs/utils/dashboard.d.ts +2 -2
- package/dist/cjs/utils/dashboard.d.ts.map +1 -1
- package/dist/cjs/utils/dashboard.js +2 -14
- package/dist/cjs/utils/errorProcessing.d.ts +2 -0
- package/dist/cjs/utils/errorProcessing.d.ts.map +1 -0
- package/dist/cjs/utils/errorProcessing.js +12 -0
- package/dist/cjs/utils/valueFormatter.js +1 -1
- package/dist/esm/Chart.d.ts +25 -18
- package/dist/esm/Chart.d.ts.map +1 -1
- package/dist/esm/Chart.js +25 -17
- package/dist/esm/ChartBuilder.d.ts +9 -5
- package/dist/esm/ChartBuilder.d.ts.map +1 -1
- package/dist/esm/ChartBuilder.js +35 -39
- package/dist/esm/ChartEditor.d.ts +10 -6
- package/dist/esm/ChartEditor.d.ts.map +1 -1
- package/dist/esm/ChartEditor.js +12 -10
- package/dist/esm/Dashboard.d.ts +53 -38
- package/dist/esm/Dashboard.d.ts.map +1 -1
- package/dist/esm/Dashboard.js +36 -17
- package/dist/esm/ReportBuilder.d.ts +3 -3
- package/dist/esm/ReportBuilder.d.ts.map +1 -1
- package/dist/esm/ReportBuilder.js +20 -20
- package/dist/esm/SQLEditor.d.ts +5 -5
- package/dist/esm/SQLEditor.d.ts.map +1 -1
- package/dist/esm/SQLEditor.js +2 -2
- package/dist/esm/Table.d.ts +6 -6
- package/dist/esm/Table.d.ts.map +1 -1
- package/dist/esm/Table.js +14 -12
- package/dist/esm/components/Chart/BarChart.d.ts.map +1 -1
- package/dist/esm/components/Chart/BarChart.js +8 -1
- 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 +3 -1
- package/dist/esm/components/Dashboard/ChartComponent.d.ts +2 -2
- package/dist/esm/components/Dashboard/ChartComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/ChartComponent.js +4 -4
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts +12 -1
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DashboardFilter.js +26 -2
- package/dist/esm/components/Dashboard/DataLoader.d.ts +2 -2
- package/dist/esm/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DataLoader.js +3 -0
- package/dist/esm/components/Dashboard/MetricComponent.d.ts +2 -2
- package/dist/esm/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/MetricComponent.js +6 -6
- package/dist/esm/components/Dashboard/TableComponent.d.ts +2 -2
- package/dist/esm/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/TableComponent.js +6 -6
- package/dist/esm/components/QuillMultiSelect.d.ts +11 -0
- package/dist/esm/components/QuillMultiSelect.d.ts.map +1 -0
- package/dist/esm/components/QuillMultiSelect.js +178 -0
- package/dist/esm/components/QuillSelect.d.ts.map +1 -1
- package/dist/esm/components/QuillSelect.js +0 -1
- package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.js +1 -0
- package/dist/esm/components/UiComponents.d.ts +10 -0
- package/dist/esm/components/UiComponents.d.ts.map +1 -1
- package/dist/esm/components/UiComponents.js +15 -17
- package/dist/esm/hooks/useExport.d.ts +1 -1
- package/dist/esm/hooks/useExport.d.ts.map +1 -1
- package/dist/esm/hooks/useExport.js +2 -2
- package/dist/esm/hooks/useFormat.d.ts +1 -1
- package/dist/esm/hooks/useFormat.d.ts.map +1 -1
- package/dist/esm/hooks/useFormat.js +2 -2
- package/dist/esm/hooks/useQuill.d.ts +2 -2
- package/dist/esm/hooks/useQuill.d.ts.map +1 -1
- package/dist/esm/hooks/useQuill.js +12 -11
- package/dist/esm/index.d.ts +1 -3
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/models/Filter.d.ts +7 -0
- package/dist/esm/models/Filter.d.ts.map +1 -0
- package/dist/esm/models/Filter.js +1 -0
- package/dist/esm/utils/dashboard.d.ts +2 -2
- package/dist/esm/utils/dashboard.d.ts.map +1 -1
- package/dist/esm/utils/dashboard.js +2 -14
- package/dist/esm/utils/errorProcessing.d.ts +2 -0
- package/dist/esm/utils/errorProcessing.d.ts.map +1 -0
- package/dist/esm/utils/errorProcessing.js +8 -0
- package/dist/esm/utils/valueFormatter.js +1 -1
- package/package.json +1 -1
package/dist/cjs/Chart.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { QuillTheme } from './QuillProvider';
|
|
3
|
-
import { type
|
|
3
|
+
import { type QuillReport } from './Dashboard';
|
|
4
|
+
import { Filter } from './models/Filter';
|
|
4
5
|
export declare function didFiltersChange(dashboardItem: any, filters: any): boolean;
|
|
5
6
|
export type ColorMapType = {
|
|
6
7
|
[key: string]: {
|
|
@@ -17,24 +18,24 @@ export type ColorMapType = {
|
|
|
17
18
|
*/
|
|
18
19
|
export interface ChartProps {
|
|
19
20
|
/**
|
|
20
|
-
* A
|
|
21
|
+
* A report to render, if any.
|
|
21
22
|
*
|
|
22
|
-
* When config is passed, the chart will not refetch the given
|
|
23
|
-
*
|
|
23
|
+
* When config is passed, the chart will not refetch the given report and will
|
|
24
|
+
* instead simply render the item it was given.
|
|
24
25
|
*
|
|
25
|
-
* A `config` must be passed if `
|
|
26
|
+
* A `config` must be passed if `reportId` is not present.
|
|
26
27
|
*/
|
|
27
|
-
config?:
|
|
28
|
+
config?: QuillReport | any;
|
|
28
29
|
/**
|
|
29
|
-
*
|
|
30
|
+
* The id of a report to render, if any.
|
|
30
31
|
*
|
|
31
|
-
* When a
|
|
32
|
-
* render this chart, and then it will render the
|
|
33
|
-
*
|
|
32
|
+
* When a reportId is passed, the chart will first fetch the data necessary to
|
|
33
|
+
* render this chart, and then it will render the report that it receives from
|
|
34
|
+
* the server.
|
|
34
35
|
*
|
|
35
|
-
* A `
|
|
36
|
+
* A `reportId` must be passed if `config` is not present.
|
|
36
37
|
*/
|
|
37
|
-
|
|
38
|
+
reportId?: string;
|
|
38
39
|
/**
|
|
39
40
|
* A list of color strings used to color the chart.
|
|
40
41
|
*
|
|
@@ -88,8 +89,8 @@ export interface ChartProps {
|
|
|
88
89
|
*/
|
|
89
90
|
cartesianGridLineColor?: string;
|
|
90
91
|
/**
|
|
91
|
-
* An optional function that takes a
|
|
92
|
-
*
|
|
92
|
+
* An optional function that takes a report and theme and returns a map of
|
|
93
|
+
* keys used in that report to the colors they should use.
|
|
93
94
|
*
|
|
94
95
|
* The color values support RGB hexcodes and CSS color literals.
|
|
95
96
|
*
|
|
@@ -113,7 +114,11 @@ export interface ChartProps {
|
|
|
113
114
|
* }
|
|
114
115
|
* ```
|
|
115
116
|
*/
|
|
116
|
-
mapColorsToFields?: (
|
|
117
|
+
mapColorsToFields?: (report: QuillReport, theme: QuillTheme) => ColorMapType;
|
|
118
|
+
/**
|
|
119
|
+
* A loading component to show when the chart is loading.
|
|
120
|
+
*/
|
|
121
|
+
LoadingComponent?: () => JSX.Element;
|
|
117
122
|
/**
|
|
118
123
|
* Styles the top-level container of the Chart.
|
|
119
124
|
*
|
|
@@ -124,6 +129,8 @@ export interface ChartProps {
|
|
|
124
129
|
* Styles the top-level container of the Chart.
|
|
125
130
|
*/
|
|
126
131
|
containerStyle?: React.CSSProperties;
|
|
132
|
+
/** An array of dashboard filters that are indicated by the frontend dev. */
|
|
133
|
+
filters?: Filter[];
|
|
127
134
|
}
|
|
128
135
|
/**
|
|
129
136
|
* ### Quill Chart
|
|
@@ -133,13 +140,13 @@ export interface ChartProps {
|
|
|
133
140
|
* @example
|
|
134
141
|
* ```js
|
|
135
142
|
* // Usage with chart id (will auto-fetch data)
|
|
136
|
-
* <Chart
|
|
143
|
+
* <Chart reportId="12345" />
|
|
137
144
|
* ```
|
|
138
145
|
*
|
|
139
146
|
* @example
|
|
140
147
|
* ```js
|
|
141
|
-
* // Usage with a
|
|
142
|
-
* <Chart config={
|
|
148
|
+
* // Usage with a report (will not auto-fetch data)
|
|
149
|
+
* <Chart config={report} />
|
|
143
150
|
* ```
|
|
144
151
|
*
|
|
145
152
|
* ### Chart API
|
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,
|
|
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,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AA0GzC,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,WAAW,GAAG,GAAG,CAAC;IAE3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;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,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;;OAEG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEzC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE5C;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,EAAE,CAClB,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,UAAU,KACd,YAAY,CAAC;IAElB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAErC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CA8C/B,CAAC;AAynBF,eAAe,KAAK,CAAC"}
|
package/dist/cjs/Chart.js
CHANGED
|
@@ -18,12 +18,13 @@ const valueFormatter_1 = require("./utils/valueFormatter");
|
|
|
18
18
|
const LineChart_1 = __importDefault(require("./components/Chart/LineChart"));
|
|
19
19
|
const BarChart_1 = __importDefault(require("./components/Chart/BarChart"));
|
|
20
20
|
const merge_1 = require("./utils/merge");
|
|
21
|
-
const ChartSkeleton_1 =
|
|
21
|
+
const ChartSkeleton_1 = require("./components/Chart/ChartSkeleton");
|
|
22
22
|
const ChartError_1 = __importDefault(require("./components/Chart/ChartError"));
|
|
23
23
|
const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
|
|
24
24
|
const valueFormatter_2 = require("./utils/valueFormatter");
|
|
25
25
|
const csv_1 = require("./utils/csv");
|
|
26
26
|
const useTheme_1 = __importDefault(require("./hooks/useTheme"));
|
|
27
|
+
const errorProcessing_1 = require("./utils/errorProcessing");
|
|
27
28
|
const MAX_ROWS_FOR_GENERIC_TABLE = 300;
|
|
28
29
|
// @ts-ignore
|
|
29
30
|
function sumByKey(arr, key) {
|
|
@@ -82,7 +83,7 @@ function didFiltersChange(dashboardItem, filters) {
|
|
|
82
83
|
return !isEquivalent(dashboardItem.filtersApplied, filters);
|
|
83
84
|
}
|
|
84
85
|
exports.didFiltersChange = didFiltersChange;
|
|
85
|
-
function fallbackMapColorsToFields(
|
|
86
|
+
function fallbackMapColorsToFields(_report, _theme) {
|
|
86
87
|
// By default, if the key is not in the map we use the colors array.
|
|
87
88
|
return {};
|
|
88
89
|
}
|
|
@@ -94,13 +95,13 @@ function fallbackMapColorsToFields(_dashboardItem, _theme) {
|
|
|
94
95
|
* @example
|
|
95
96
|
* ```js
|
|
96
97
|
* // Usage with chart id (will auto-fetch data)
|
|
97
|
-
* <Chart
|
|
98
|
+
* <Chart reportId="12345" />
|
|
98
99
|
* ```
|
|
99
100
|
*
|
|
100
101
|
* @example
|
|
101
102
|
* ```js
|
|
102
|
-
* // Usage with a
|
|
103
|
-
* <Chart config={
|
|
103
|
+
* // Usage with a report (will not auto-fetch data)
|
|
104
|
+
* <Chart config={report} />
|
|
104
105
|
* ```
|
|
105
106
|
*
|
|
106
107
|
* ### Chart API
|
|
@@ -121,9 +122,9 @@ const Chart = (props) => {
|
|
|
121
122
|
? theme.chartColors
|
|
122
123
|
: ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
|
|
123
124
|
}, [data.colors]);
|
|
124
|
-
return ((0, jsx_runtime_1.jsx)(ChartUpdater, {
|
|
125
|
+
return ((0, jsx_runtime_1.jsx)(ChartUpdater, { reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideHorizontalCartesianGrid: data.hideHorizontalCartesianGrid, hideVerticalCartesianGrid: data.hideVerticalCartesianGrid, hideSubsequentXAxisTicks: data.hideSubsequentXAxisTicks, hideDateRangeFilter: data.hideDateRangeFilter, cartesianGridLineStyle: data.cartesianGridLineStyle, cartesianGridLineColor: data.cartesianGridLineColor, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields, LoadingComponent: data.LoadingComponent, filters: data.filters }));
|
|
125
126
|
};
|
|
126
|
-
const ChartUpdater = ({ colors,
|
|
127
|
+
const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, mapColorsToFields, LoadingComponent = ChartSkeleton_1.QuillLoadingSkeleton, filters, }) => {
|
|
127
128
|
const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
|
|
128
129
|
const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
|
|
129
130
|
const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
|
|
@@ -136,7 +137,7 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
|
|
|
136
137
|
(0, react_1.useEffect)(() => {
|
|
137
138
|
async function getChartOptions() {
|
|
138
139
|
setLoading(true);
|
|
139
|
-
if (!didFiltersChange(dashboard[
|
|
140
|
+
if (!didFiltersChange(dashboard[reportId], dashboardFilters)) {
|
|
140
141
|
setLoading(false);
|
|
141
142
|
return;
|
|
142
143
|
}
|
|
@@ -156,9 +157,12 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
|
|
|
156
157
|
return newFilter;
|
|
157
158
|
})
|
|
158
159
|
: [];
|
|
160
|
+
if (filters) {
|
|
161
|
+
minimalFilters.push(...filters);
|
|
162
|
+
}
|
|
159
163
|
const hostedBody = {
|
|
160
164
|
metadata: {
|
|
161
|
-
dashboardItemId:
|
|
165
|
+
dashboardItemId: reportId,
|
|
162
166
|
orgId: client.customerId || '*',
|
|
163
167
|
clientId: client.publicKey,
|
|
164
168
|
task: 'item',
|
|
@@ -167,20 +171,21 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
|
|
|
167
171
|
},
|
|
168
172
|
};
|
|
169
173
|
const cloudBody = {
|
|
170
|
-
id:
|
|
174
|
+
id: reportId,
|
|
171
175
|
filters: minimalFilters,
|
|
172
176
|
};
|
|
173
177
|
setError(undefined);
|
|
174
178
|
const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
|
|
179
|
+
(0, errorProcessing_1.processFilterErrorList)(resp);
|
|
175
180
|
if (resp && resp.name !== 'error' && !resp.errorMessage) {
|
|
176
181
|
setIsComparison(!!resp.compareRows?.length);
|
|
177
182
|
if (resp.compareRows) {
|
|
178
183
|
(0, merge_1.mergeComparisonRange)(resp);
|
|
179
184
|
}
|
|
180
|
-
const dashboardItem = { ...resp, filtersApplied:
|
|
185
|
+
const dashboardItem = { ...resp, filtersApplied: minimalFilters };
|
|
181
186
|
dispatch({
|
|
182
187
|
type: 'UPDATE_DASHBOARD_ITEM',
|
|
183
|
-
id:
|
|
188
|
+
id: reportId,
|
|
184
189
|
data: dashboardItem,
|
|
185
190
|
});
|
|
186
191
|
if (mapColorsToFields) {
|
|
@@ -199,10 +204,10 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
|
|
|
199
204
|
}
|
|
200
205
|
setInitialLoad(false);
|
|
201
206
|
getChartOptions();
|
|
202
|
-
}, [dashboardFilters, client,
|
|
203
|
-
return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[
|
|
207
|
+
}, [dashboardFilters, client, reportId]);
|
|
208
|
+
return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[reportId], colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent }));
|
|
204
209
|
};
|
|
205
|
-
const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
|
|
210
|
+
const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, LoadingComponent = ChartSkeleton_1.QuillLoadingSkeleton, }) => {
|
|
206
211
|
const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
|
|
207
212
|
const theme = (0, useTheme_1.default)();
|
|
208
213
|
const chartColors = (0, react_1.useMemo)(() => {
|
|
@@ -247,12 +252,13 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
247
252
|
else if (!pivotTable &&
|
|
248
253
|
config &&
|
|
249
254
|
config?.chartType !== 'metric' &&
|
|
255
|
+
config?.chartType !== 'table' &&
|
|
250
256
|
config.rows &&
|
|
251
257
|
config.rows.length > MAX_ROWS_FOR_GENERIC_TABLE) {
|
|
252
258
|
return ((0, jsx_runtime_1.jsx)(ChartError_1.default, { className: className, containerStyle: containerStyle, label: "Charts can only display 300 rows. Please add a pivot or modify the query." }));
|
|
253
259
|
}
|
|
254
260
|
else if (!config || loading) {
|
|
255
|
-
return ((0, jsx_runtime_1.jsx)(
|
|
261
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: className, style: containerStyle, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) }));
|
|
256
262
|
}
|
|
257
263
|
const chartTypes = [config?.chartType];
|
|
258
264
|
if (chartTypes.includes('pie')) {
|
|
@@ -277,7 +283,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
277
283
|
columns.forEach((col, index) => {
|
|
278
284
|
// ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
|
|
279
285
|
if ((valueFieldType ||
|
|
280
|
-
['min', 'max'].includes(config?.pivot
|
|
286
|
+
['min', 'max'].includes(config?.pivot?.aggregationType)) &&
|
|
281
287
|
index !== 0) {
|
|
282
288
|
col.format = valueFieldType || 'two_decimal_places';
|
|
283
289
|
}
|
|
@@ -303,6 +309,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
303
309
|
return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, rowsPerPage: config?.rowsPerPage || 10, containerStyle: {
|
|
304
310
|
width: containerStyle?.width || '100%',
|
|
305
311
|
height: containerStyle?.height || '400px',
|
|
312
|
+
...containerStyle,
|
|
306
313
|
}, className: className, downloadCSV: () => {
|
|
307
314
|
(0, csv_1.downloadCSV)({
|
|
308
315
|
rows: pivotTable?.rows ?? data.rows ?? [],
|
|
@@ -384,6 +391,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
384
391
|
display: 'flex',
|
|
385
392
|
width: '100%',
|
|
386
393
|
flexDirection: 'row',
|
|
394
|
+
...containerStyle,
|
|
387
395
|
}, className: className, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
388
396
|
display: 'flex',
|
|
389
397
|
gap: 4,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
import { ColumnInternal } from './models/Columns';
|
|
3
|
-
import {
|
|
3
|
+
import { QuillReport } from './Dashboard';
|
|
4
4
|
export declare const numberFormatOptions: string[];
|
|
5
5
|
export declare const dateFormatOptions: string[];
|
|
6
6
|
/**
|
|
@@ -109,6 +109,10 @@ export interface ChartBuilderProps {
|
|
|
109
109
|
ErrorMessageComponent?: (props: {
|
|
110
110
|
errorMessage: string;
|
|
111
111
|
}) => JSX.Element;
|
|
112
|
+
/**
|
|
113
|
+
* A loading component to show in the pivot modal while suggestions load.
|
|
114
|
+
*/
|
|
115
|
+
LoadingComponent?: () => JSX.Element;
|
|
112
116
|
/**
|
|
113
117
|
* A container for each row of inputs for the ChartBuilder form.
|
|
114
118
|
*/
|
|
@@ -160,7 +164,7 @@ export interface ChartBuilderProps {
|
|
|
160
164
|
/** Whether to show the dashboard dropdown. */
|
|
161
165
|
showDashboardDropdown?: boolean;
|
|
162
166
|
/** A callback fired when the add to dashboard flow has been completed. */
|
|
163
|
-
onAddToDashboardComplete?: (
|
|
167
|
+
onAddToDashboardComplete?: (report: QuillReport) => void;
|
|
164
168
|
/** A callback fired when this chart is delete. */
|
|
165
169
|
onDelete?: () => void;
|
|
166
170
|
/** The pivot info applied to this data. */
|
|
@@ -187,8 +191,8 @@ export interface ChartBuilderProps {
|
|
|
187
191
|
start: Date;
|
|
188
192
|
end: Date;
|
|
189
193
|
} | undefined;
|
|
190
|
-
/** The
|
|
191
|
-
|
|
194
|
+
/** The report for this ChartBuilder. */
|
|
195
|
+
report?: QuillReport | any;
|
|
192
196
|
/** A list of generated pivots that were recommended as useful for this query. */
|
|
193
197
|
recommendedPivots?: {
|
|
194
198
|
rowField: string;
|
|
@@ -282,7 +286,7 @@ export declare function ChartBuilderWithModal(props: ChartBuilderProps): import(
|
|
|
282
286
|
* ### Chart Builder API
|
|
283
287
|
* @see https://docs.quillsql.com/components/chart-builder
|
|
284
288
|
*/
|
|
285
|
-
export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, ModalComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, FormContainer, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete,
|
|
289
|
+
export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, ModalComponent, LoadingComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, FormContainer, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, report, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton, hideSubmitButton, hideDateRangeFilter, initialUniqueValues, pivotRecommendationsEnabled, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
|
|
286
290
|
export declare function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent, ButtonComponent, }: {
|
|
287
291
|
isOpen: boolean;
|
|
288
292
|
setIsOpen: (e: boolean) => void;
|
|
@@ -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
|
@@ -238,7 +238,7 @@ exports.ChartBuilderWithModal = ChartBuilderWithModal;
|
|
|
238
238
|
* ### Chart Builder API
|
|
239
239
|
* @see https://docs.quillsql.com/components/chart-builder
|
|
240
240
|
*/
|
|
241
|
-
function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, 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, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, FormContainer = UiComponents_1.QuillChartBuilderFormContainer, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete,
|
|
241
|
+
function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, 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, LoadingComponent = UiComponents_1.QuillLoadingComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, FormContainer = UiComponents_1.QuillChartBuilderFormContainer, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, report = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, }) {
|
|
242
242
|
const dateRange = dr;
|
|
243
243
|
const [client] = (0, react_1.useContext)(Context_1.ClientContext);
|
|
244
244
|
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
@@ -310,7 +310,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
310
310
|
}, []);
|
|
311
311
|
// get dashboards
|
|
312
312
|
const [dashboardOptions, setDashboardOptions] = (0, react_1.useState)([]);
|
|
313
|
-
const [defaultDashboardName, setDefaultDashboardName] = (0, react_1.useState)(destinationDashboard ||
|
|
313
|
+
const [defaultDashboardName, setDefaultDashboardName] = (0, react_1.useState)(destinationDashboard || report?.dashboardName || '');
|
|
314
314
|
const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
|
|
315
315
|
const [dashboardFilters2, setDashboardFilters] = (0, react_1.useState)([]);
|
|
316
316
|
const [dashboardHasDateFilter, setDashboardHasDateFilter] = (0, react_1.useState)(false);
|
|
@@ -324,7 +324,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
324
324
|
const [tableName, setTableName] = (0, react_1.useState)(undefined);
|
|
325
325
|
const selectedTable = schema?.find((t) => t.displayName === tableName);
|
|
326
326
|
const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add pivot');
|
|
327
|
-
const [createdPivots, setCreatedPivots] = (0, react_1.useState)(pivot ? [pivot] :
|
|
327
|
+
const [createdPivots, setCreatedPivots] = (0, react_1.useState)(pivot ? [pivot] : report?.pivot ? [report.pivot] : cp);
|
|
328
328
|
const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)(rp);
|
|
329
329
|
const [pivotRowField, setPivotRowField] = (0, react_1.useState)(pivot?.rowField);
|
|
330
330
|
const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(pivot?.columnField);
|
|
@@ -389,15 +389,15 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
389
389
|
};
|
|
390
390
|
const pivotFormData = (pivot) => {
|
|
391
391
|
const yAxisField = pivot.columnField || pivot.valueField;
|
|
392
|
-
const yAxisLabel =
|
|
393
|
-
?
|
|
392
|
+
const yAxisLabel = report?.yAxisFields?.length > 0
|
|
393
|
+
? report.yAxisFields[0].label
|
|
394
394
|
: pivot.valueField;
|
|
395
395
|
// date labels for pivots should be treated like strings since they are
|
|
396
396
|
// formatted in generatePivotTable
|
|
397
397
|
const yAxisIsDate = pivot.columnField
|
|
398
398
|
? (0, PivotModal_1.isDateField)(pivot.columnFieldType || '')
|
|
399
399
|
: false;
|
|
400
|
-
const chartType =
|
|
400
|
+
const chartType = report?.chartType ?? (pivot.rowField ? 'column' : 'metric');
|
|
401
401
|
return {
|
|
402
402
|
pivot,
|
|
403
403
|
chartType: chartType,
|
|
@@ -406,15 +406,15 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
406
406
|
? 'string'
|
|
407
407
|
: columns.find((col) => col.field === pivot.rowField)?.format ||
|
|
408
408
|
'whole_number',
|
|
409
|
-
xAxisLabel:
|
|
409
|
+
xAxisLabel: report?.xAxisLabel || pivot.rowField,
|
|
410
410
|
yAxisFields: [
|
|
411
411
|
{
|
|
412
412
|
field: yAxisField,
|
|
413
413
|
label: yAxisLabel,
|
|
414
414
|
format: yAxisIsDate
|
|
415
415
|
? 'string'
|
|
416
|
-
:
|
|
417
|
-
?
|
|
416
|
+
: report?.yAxisFields?.length > 0
|
|
417
|
+
? report?.yAxisFields[0].format
|
|
418
418
|
: columns.find((col) => col.field === pivot.valueField)?.format ||
|
|
419
419
|
'whole_number',
|
|
420
420
|
},
|
|
@@ -424,11 +424,11 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
424
424
|
const [formData, setFormData] = (0, react_1.useState)(pivot
|
|
425
425
|
? {
|
|
426
426
|
...formEmptyState,
|
|
427
|
-
...
|
|
427
|
+
...report,
|
|
428
428
|
...pivotFormData(pivot),
|
|
429
429
|
...(destinationDashboard && { dashboardName: destinationDashboard }),
|
|
430
430
|
}
|
|
431
|
-
:
|
|
431
|
+
: report || formEmptyState);
|
|
432
432
|
(0, react_1.useEffect)(() => {
|
|
433
433
|
async function getFormData() {
|
|
434
434
|
const curFormData = formData;
|
|
@@ -437,19 +437,13 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
437
437
|
.filter((elem) => elem !== null)
|
|
438
438
|
.map((key) => ({ label: key, value: key }));
|
|
439
439
|
await updateDashboardFilters(destinationDashboard ??
|
|
440
|
-
(
|
|
441
|
-
? dashboardItem?.dashboardName
|
|
442
|
-
: dashboardOptions[0]?.label));
|
|
440
|
+
(report ? report?.dashboardName : dashboardOptions[0]?.label));
|
|
443
441
|
setDashboardOptions(dashboardOptions);
|
|
444
442
|
const dashboardName = destinationDashboard ??
|
|
445
|
-
(
|
|
446
|
-
? dashboardItem?.dashboardName
|
|
447
|
-
: dashboardOptions[0]?.label);
|
|
443
|
+
(report ? report?.dashboardName : dashboardOptions[0]?.label);
|
|
448
444
|
curFormData.dashboardName = dashboardName;
|
|
449
445
|
setDefaultDashboardName(destinationDashboard ??
|
|
450
|
-
(
|
|
451
|
-
? dashboardItem?.dashboardName
|
|
452
|
-
: dashboardOptions[0]?.label));
|
|
446
|
+
(report ? report?.dashboardName : dashboardOptions[0]?.label));
|
|
453
447
|
const { queryEndpoint, queryHeaders, publicKey } = client;
|
|
454
448
|
const response = await fetch(`${queryEndpoint}`, {
|
|
455
449
|
method: 'POST',
|
|
@@ -502,8 +496,8 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
502
496
|
curFormData.dateField = dateField;
|
|
503
497
|
setFormData({
|
|
504
498
|
...curFormData,
|
|
505
|
-
dashboardName:
|
|
506
|
-
?
|
|
499
|
+
dashboardName: report
|
|
500
|
+
? report?.dashboardName
|
|
507
501
|
: dashboardOptions[0]?.label,
|
|
508
502
|
});
|
|
509
503
|
}
|
|
@@ -720,12 +714,12 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
720
714
|
event.preventDefault();
|
|
721
715
|
};
|
|
722
716
|
const deleteChart = async () => {
|
|
723
|
-
if (!
|
|
717
|
+
if (!report._id || !client) {
|
|
724
718
|
return;
|
|
725
719
|
}
|
|
726
720
|
const { publicKey, customerId } = client;
|
|
727
721
|
const cloudBody = {
|
|
728
|
-
dashboardItemId:
|
|
722
|
+
dashboardItemId: report._id,
|
|
729
723
|
};
|
|
730
724
|
const searchParams = new URLSearchParams(customerId
|
|
731
725
|
? {
|
|
@@ -774,11 +768,10 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
774
768
|
return;
|
|
775
769
|
}
|
|
776
770
|
// If the dashbaordItem is a template but the editor isn't an admin, create a new dashboardItem and set the template to false
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
: undefined;
|
|
771
|
+
let dashboardItemId = report ? report._id : undefined;
|
|
772
|
+
if (report && !showDateFieldOptions && report.template) {
|
|
773
|
+
dashboardItemId = undefined;
|
|
774
|
+
}
|
|
782
775
|
const cloudBody = {
|
|
783
776
|
...formData,
|
|
784
777
|
...(formData.dateField?.table
|
|
@@ -793,7 +786,9 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
793
786
|
pivot: formData.pivot,
|
|
794
787
|
referencedTables: allTables,
|
|
795
788
|
referencedColumns,
|
|
796
|
-
template: !showDateFieldOptions &&
|
|
789
|
+
template: report && !showDateFieldOptions && report.template
|
|
790
|
+
? false
|
|
791
|
+
: formData.template,
|
|
797
792
|
customerId: customerId || '*',
|
|
798
793
|
};
|
|
799
794
|
// @ts-ignore
|
|
@@ -883,12 +878,15 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
883
878
|
height: formData.chartType === 'metric'
|
|
884
879
|
? 100
|
|
885
880
|
: isHorizontalView || !isOpen
|
|
886
|
-
?
|
|
881
|
+
? showTableFormatOptions
|
|
882
|
+
? 'calc(50% - 10px)'
|
|
883
|
+
: 'calc(100% - 10px)'
|
|
887
884
|
: 400,
|
|
888
885
|
...(isHorizontalView && { flexGrow: 1 }),
|
|
889
886
|
} })),
|
|
890
887
|
// Make sure to display non-pivoted table when using pivot chart
|
|
891
|
-
|
|
888
|
+
showTableFormatOptions &&
|
|
889
|
+
(isHorizontalView || (!isOpen && windowWidth < 1200)) && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
892
890
|
width: '100%',
|
|
893
891
|
height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
|
|
894
892
|
flexGrow: 1,
|
|
@@ -927,7 +925,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
927
925
|
// marginTop: 6,
|
|
928
926
|
display: 'flex',
|
|
929
927
|
flexDirection: 'column',
|
|
930
|
-
}, 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, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, 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, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: { width: pivotCardWidth }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
|
|
928
|
+
}, 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, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, 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, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled }) }), formData.pivot && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: { width: pivotCardWidth }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: {
|
|
931
929
|
pivot: formData.pivot,
|
|
932
930
|
rows: selectedPivotTable?.rows,
|
|
933
931
|
columns: selectedPivotTable?.columns,
|
|
@@ -979,9 +977,7 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
979
977
|
: ''
|
|
980
978
|
: yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
|
|
981
979
|
? NUMBER_OPTIONS
|
|
982
|
-
: 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.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })),
|
|
983
|
-
// Make sure to display non-pivoted table when using pivot chart
|
|
984
|
-
windowWidth < 1200 && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
980
|
+
: 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.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), showTableFormatOptions && windowWidth < 1200 && ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
985
981
|
width: '100%',
|
|
986
982
|
height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
|
|
987
983
|
flexGrow: 1,
|
|
@@ -1042,9 +1038,9 @@ function ChartBuilder({ TextInputComponent = UiComponents_1.QuillTextInput, Sele
|
|
|
1042
1038
|
justifyContent: 'flex-end',
|
|
1043
1039
|
marginTop: 'auto',
|
|
1044
1040
|
gap: 10,
|
|
1045
|
-
}, children: [!hideDeleteButton && !isHorizontalView &&
|
|
1041
|
+
}, children: [!hideDeleteButton && !isHorizontalView && report && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => editChart(), label: buttonLabel
|
|
1046
1042
|
? buttonLabel
|
|
1047
|
-
:
|
|
1043
|
+
: report
|
|
1048
1044
|
? 'Save changes'
|
|
1049
1045
|
: 'Add to dashboard' }))] })] }))] }), (0, jsx_runtime_1.jsx)(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent })] }));
|
|
1050
1046
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { QuillReport } from './Dashboard';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Quill ChartEditor component.
|
|
5
5
|
*/
|
|
@@ -9,7 +9,7 @@ export interface ChartEditorProps {
|
|
|
9
9
|
/** A callback that sets the isOpen state. */
|
|
10
10
|
setIsOpen: (isOpen: boolean) => void;
|
|
11
11
|
/** The id of the chart that is being edited. */
|
|
12
|
-
|
|
12
|
+
reportId: string;
|
|
13
13
|
/** Whether the editor has administrative priveleges. */
|
|
14
14
|
isAdmin?: boolean;
|
|
15
15
|
/** The title of the chart builder form. */
|
|
@@ -19,7 +19,7 @@ export interface ChartEditorProps {
|
|
|
19
19
|
/**
|
|
20
20
|
* A callback that is fired when the add to dashboard flow has been completed.
|
|
21
21
|
*/
|
|
22
|
-
onAddToDashboardComplete?: (
|
|
22
|
+
onAddToDashboardComplete?: (report: QuillReport) => void;
|
|
23
23
|
/** A callback that is fired when the item is deleted. */
|
|
24
24
|
onDelete?: () => void;
|
|
25
25
|
/** A select component. */
|
|
@@ -114,6 +114,10 @@ export interface ChartEditorProps {
|
|
|
114
114
|
}[];
|
|
115
115
|
isLoading?: boolean;
|
|
116
116
|
}) => JSX.Element;
|
|
117
|
+
/**
|
|
118
|
+
* A loading component to show in the pivot modal while suggestions load.
|
|
119
|
+
*/
|
|
120
|
+
LoadingComponent?: () => JSX.Element;
|
|
117
121
|
/**
|
|
118
122
|
* A container for each row of inputs for the ChartBuilder form.
|
|
119
123
|
*/
|
|
@@ -169,7 +173,7 @@ export interface ChartEditorProps {
|
|
|
169
173
|
* @example
|
|
170
174
|
* ```js
|
|
171
175
|
* // Usage without custom components
|
|
172
|
-
* <ChartEditor isOpen={true}
|
|
176
|
+
* <ChartEditor isOpen={true} reportId="1234" />
|
|
173
177
|
* ```
|
|
174
178
|
*
|
|
175
179
|
* @example
|
|
@@ -178,7 +182,7 @@ export interface ChartEditorProps {
|
|
|
178
182
|
* <ChartEditor
|
|
179
183
|
* isOpen={isOpen}
|
|
180
184
|
* setIsOpen={setIsOpen}
|
|
181
|
-
*
|
|
185
|
+
* reportId="1234"
|
|
182
186
|
* Button={MyButton}
|
|
183
187
|
* Modal={MyModal}
|
|
184
188
|
* />
|
|
@@ -187,5 +191,5 @@ export interface ChartEditorProps {
|
|
|
187
191
|
* ### Chart Editor API
|
|
188
192
|
* @see https://docs.quillsql.com/components/chart-editor
|
|
189
193
|
*/
|
|
190
|
-
export default function ChartEditor({ isOpen,
|
|
194
|
+
export default function ChartEditor({ isOpen, reportId, isAdmin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent, CardComponent, PopoverComponent, LoadingComponent, TableComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, ErrorMessageComponent, ChartBuilderFormContainer, hideDeleteButton, hideSubmitButton, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
191
195
|
//# sourceMappingURL=ChartEditor.d.ts.map
|