@quillsql/react 2.11.15 → 2.11.17
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 +117 -42
- package/dist/cjs/Chart.d.ts.map +1 -1
- package/dist/cjs/Chart.js +44 -18
- package/dist/cjs/ChartBuilder.d.ts +195 -28
- package/dist/cjs/ChartBuilder.d.ts.map +1 -1
- package/dist/cjs/ChartBuilder.js +124 -63
- package/dist/cjs/ChartEditor.d.ts +114 -18
- package/dist/cjs/ChartEditor.d.ts.map +1 -1
- package/dist/cjs/ChartEditor.js +47 -15
- package/dist/cjs/Dashboard.d.ts +148 -90
- package/dist/cjs/Dashboard.d.ts.map +1 -1
- package/dist/cjs/Dashboard.js +46 -152
- package/dist/cjs/DateRangePicker/QuillDateRangePicker.d.ts +21 -1
- package/dist/cjs/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
- package/dist/cjs/DateRangePicker/QuillDateRangePicker.js +5 -2
- package/dist/cjs/DateRangePicker/dateRangePickerUtils.js +1 -1
- package/dist/cjs/QuillProvider.d.ts +105 -2
- package/dist/cjs/QuillProvider.d.ts.map +1 -1
- package/dist/cjs/QuillProvider.js +59 -0
- package/dist/cjs/ReportBuilder.d.ts +188 -34
- package/dist/cjs/ReportBuilder.d.ts.map +1 -1
- package/dist/cjs/ReportBuilder.js +551 -426
- package/dist/cjs/SQLEditor.d.ts +158 -29
- package/dist/cjs/SQLEditor.d.ts.map +1 -1
- package/dist/cjs/SQLEditor.js +52 -32
- package/dist/cjs/Table.d.ts +119 -15
- package/dist/cjs/Table.d.ts.map +1 -1
- package/dist/cjs/Table.js +37 -6
- package/dist/cjs/TableChart.d.ts.map +1 -1
- package/dist/cjs/TableChart.js +0 -194
- package/dist/cjs/{BarList.d.ts → components/Chart/BarList.d.ts} +1 -1
- package/dist/cjs/components/Chart/BarList.d.ts.map +1 -0
- package/dist/cjs/{BarList.js → components/Chart/BarList.js} +1 -1
- package/dist/cjs/components/Chart/LineChart.d.ts +2 -3
- 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.map +1 -0
- package/dist/cjs/{PieChart.js → components/Chart/PieChart.js} +1 -1
- package/dist/cjs/components/Dashboard/ChartComponent.d.ts +2 -1
- package/dist/cjs/components/Dashboard/ChartComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/ChartComponent.js +6 -7
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts +22 -0
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts.map +1 -0
- package/dist/cjs/components/Dashboard/DashboardFilter.js +75 -0
- package/dist/cjs/components/Dashboard/DataLoader.d.ts +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.js +1 -1
- package/dist/cjs/components/Dashboard/MetricComponent.d.ts +2 -12
- package/dist/cjs/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/MetricComponent.js +39 -17
- package/dist/cjs/components/Dashboard/TableComponent.d.ts +2 -1
- package/dist/cjs/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/TableComponent.js +6 -9
- package/dist/cjs/components/QuillSelect.d.ts +4 -1
- package/dist/cjs/components/QuillSelect.d.ts.map +1 -1
- package/dist/cjs/components/QuillSelect.js +13 -8
- package/dist/cjs/components/QuillTable.d.ts +16 -2
- package/dist/cjs/components/QuillTable.d.ts.map +1 -1
- package/dist/cjs/components/QuillTable.js +4 -4
- package/dist/cjs/components/ReportBuilder/AddColumnPopover.d.ts +30 -1
- package/dist/cjs/components/ReportBuilder/AddColumnPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddColumnPopover.js +33 -14
- package/dist/cjs/components/ReportBuilder/AddLimitPopover.d.ts +25 -2
- package/dist/cjs/components/ReportBuilder/AddLimitPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddLimitPopover.js +19 -19
- package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts +22 -2
- package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddSortPopover.js +18 -20
- package/dist/cjs/components/ReportBuilder/bigDateMap.js +1 -1
- package/dist/cjs/components/ReportBuilder/convert.d.ts +2 -1
- package/dist/cjs/components/ReportBuilder/convert.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/convert.js +40 -20
- package/dist/cjs/components/ReportBuilder/pivot.d.ts +2 -1
- package/dist/cjs/components/ReportBuilder/pivot.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.d.ts +83 -19
- package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.js +68 -121
- package/dist/cjs/components/ReportBuilder/util.d.ts +3 -1
- package/dist/cjs/components/ReportBuilder/util.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/util.js +34 -8
- package/dist/cjs/components/UiComponents.d.ts +98 -97
- package/dist/cjs/components/UiComponents.d.ts.map +1 -1
- package/dist/cjs/components/UiComponents.js +132 -112
- package/dist/cjs/hooks/index.d.ts +1 -0
- package/dist/cjs/hooks/index.d.ts.map +1 -1
- package/dist/cjs/hooks/index.js +3 -1
- package/dist/cjs/hooks/useTheme.d.ts +7 -0
- package/dist/cjs/hooks/useTheme.d.ts.map +1 -0
- package/dist/cjs/hooks/useTheme.js +12 -0
- package/dist/cjs/index.d.ts +10 -2
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotList.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotList.js +10 -10
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts +29 -14
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.js +73 -49
- package/dist/cjs/utils/dataFetcher.d.ts.map +1 -1
- package/dist/cjs/utils/dataFetcher.js +2 -0
- package/dist/cjs/utils/width.d.ts +12 -0
- package/dist/cjs/utils/width.d.ts.map +1 -0
- package/dist/cjs/utils/width.js +25 -0
- package/dist/esm/Chart.d.ts +117 -42
- package/dist/esm/Chart.d.ts.map +1 -1
- package/dist/esm/Chart.js +45 -19
- package/dist/esm/ChartBuilder.d.ts +195 -28
- package/dist/esm/ChartBuilder.d.ts.map +1 -1
- package/dist/esm/ChartBuilder.js +124 -63
- package/dist/esm/ChartEditor.d.ts +114 -18
- package/dist/esm/ChartEditor.d.ts.map +1 -1
- package/dist/esm/ChartEditor.js +51 -19
- package/dist/esm/Dashboard.d.ts +148 -90
- package/dist/esm/Dashboard.d.ts.map +1 -1
- package/dist/esm/Dashboard.js +49 -153
- package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts +21 -1
- package/dist/esm/DateRangePicker/QuillDateRangePicker.d.ts.map +1 -1
- package/dist/esm/DateRangePicker/QuillDateRangePicker.js +6 -3
- package/dist/esm/DateRangePicker/dateRangePickerUtils.js +1 -1
- package/dist/esm/QuillProvider.d.ts +105 -2
- package/dist/esm/QuillProvider.d.ts.map +1 -1
- package/dist/esm/QuillProvider.js +59 -0
- package/dist/esm/ReportBuilder.d.ts +188 -34
- package/dist/esm/ReportBuilder.d.ts.map +1 -1
- package/dist/esm/ReportBuilder.js +553 -428
- package/dist/esm/SQLEditor.d.ts +158 -29
- package/dist/esm/SQLEditor.d.ts.map +1 -1
- package/dist/esm/SQLEditor.js +53 -33
- package/dist/esm/Table.d.ts +119 -15
- package/dist/esm/Table.d.ts.map +1 -1
- package/dist/esm/Table.js +38 -7
- package/dist/esm/TableChart.d.ts.map +1 -1
- package/dist/esm/TableChart.js +0 -194
- package/dist/esm/{BarList.d.ts → components/Chart/BarList.d.ts} +1 -1
- package/dist/esm/components/Chart/BarList.d.ts.map +1 -0
- package/dist/esm/{BarList.js → components/Chart/BarList.js} +1 -1
- package/dist/esm/components/Chart/LineChart.d.ts +2 -3
- 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.map +1 -0
- package/dist/esm/{PieChart.js → components/Chart/PieChart.js} +1 -1
- package/dist/esm/components/Dashboard/ChartComponent.d.ts +2 -1
- package/dist/esm/components/Dashboard/ChartComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/ChartComponent.js +5 -6
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts +22 -0
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map +1 -0
- package/dist/esm/components/Dashboard/DashboardFilter.js +71 -0
- package/dist/esm/components/Dashboard/DataLoader.d.ts +1 -1
- package/dist/esm/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DataLoader.js +1 -1
- package/dist/esm/components/Dashboard/MetricComponent.d.ts +2 -12
- package/dist/esm/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/MetricComponent.js +39 -17
- package/dist/esm/components/Dashboard/TableComponent.d.ts +2 -1
- package/dist/esm/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/TableComponent.js +6 -9
- package/dist/esm/components/QuillSelect.d.ts +4 -1
- package/dist/esm/components/QuillSelect.d.ts.map +1 -1
- package/dist/esm/components/QuillSelect.js +14 -9
- package/dist/esm/components/QuillTable.d.ts +16 -2
- package/dist/esm/components/QuillTable.d.ts.map +1 -1
- package/dist/esm/components/QuillTable.js +4 -4
- package/dist/esm/components/ReportBuilder/AddColumnPopover.d.ts +30 -1
- package/dist/esm/components/ReportBuilder/AddColumnPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddColumnPopover.js +34 -15
- package/dist/esm/components/ReportBuilder/AddLimitPopover.d.ts +25 -2
- package/dist/esm/components/ReportBuilder/AddLimitPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddLimitPopover.js +20 -20
- package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts +22 -2
- package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddSortPopover.js +20 -22
- package/dist/esm/components/ReportBuilder/bigDateMap.js +1 -1
- package/dist/esm/components/ReportBuilder/convert.d.ts +2 -1
- package/dist/esm/components/ReportBuilder/convert.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/convert.js +33 -13
- package/dist/esm/components/ReportBuilder/pivot.d.ts +2 -1
- package/dist/esm/components/ReportBuilder/pivot.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.d.ts +83 -19
- package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.js +67 -119
- package/dist/esm/components/ReportBuilder/util.d.ts +3 -1
- package/dist/esm/components/ReportBuilder/util.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/util.js +31 -7
- package/dist/esm/components/UiComponents.d.ts +98 -97
- package/dist/esm/components/UiComponents.d.ts.map +1 -1
- package/dist/esm/components/UiComponents.js +125 -110
- package/dist/esm/hooks/index.d.ts +1 -0
- package/dist/esm/hooks/index.d.ts.map +1 -1
- package/dist/esm/hooks/index.js +1 -0
- package/dist/esm/hooks/useTheme.d.ts +7 -0
- package/dist/esm/hooks/useTheme.d.ts.map +1 -0
- package/dist/esm/hooks/useTheme.js +10 -0
- package/dist/esm/index.d.ts +10 -2
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotList.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotList.js +10 -10
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts +29 -14
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.js +73 -49
- package/dist/esm/utils/dataFetcher.d.ts.map +1 -1
- package/dist/esm/utils/dataFetcher.js +2 -0
- package/dist/esm/utils/width.d.ts +12 -0
- package/dist/esm/utils/width.d.ts.map +1 -0
- package/dist/esm/utils/width.js +21 -0
- package/package.json +1 -1
- package/dist/cjs/BarList.d.ts.map +0 -1
- package/dist/cjs/PieChart.d.ts.map +0 -1
- package/dist/esm/BarList.d.ts.map +0 -1
- package/dist/esm/PieChart.d.ts.map +0 -1
- /package/dist/cjs/{PieChart.d.ts → components/Chart/PieChart.d.ts} +0 -0
- /package/dist/esm/{PieChart.d.ts → components/Chart/PieChart.d.ts} +0 -0
package/dist/cjs/Chart.d.ts
CHANGED
|
@@ -1,46 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { QuillTheme } from './QuillProvider';
|
|
3
|
-
|
|
4
|
-
colors?: string[];
|
|
5
|
-
containerStyle?: React.CSSProperties;
|
|
6
|
-
dateFilter?: any;
|
|
7
|
-
theme?: any;
|
|
8
|
-
isDateFilter?: boolean;
|
|
9
|
-
isAnimationActive?: boolean;
|
|
10
|
-
hideXAxis?: boolean;
|
|
11
|
-
hideYAxis?: boolean;
|
|
12
|
-
hideCartesianGrid?: boolean;
|
|
13
|
-
dashedComparison?: boolean;
|
|
14
|
-
dateRangeFilterDisabled?: boolean;
|
|
15
|
-
singlePointStyle?: 'dot' | 'line';
|
|
16
|
-
mapColorsToFields?: (_dashboardItem: DashboardItem, _theme: QuillTheme) => ColorMapType;
|
|
17
|
-
}
|
|
18
|
-
interface WithChartId extends BaseChartProps {
|
|
19
|
-
chartId: string;
|
|
20
|
-
}
|
|
21
|
-
export type FieldFormat = 'whole_number' | 'one_decimal_place' | 'two_decimal_places' | 'dollar_amount' | 'dollar_cents' | 'MMM_yyyy' | 'MMM_dd_yyyy' | 'MMM_dd-MMM_dd' | 'MMM_dd_hh:mm_ap_pm' | 'hh_ap_pm' | 'percent' | 'string';
|
|
22
|
-
interface YAxisField {
|
|
23
|
-
label: string;
|
|
24
|
-
field: string;
|
|
25
|
-
chartType: string;
|
|
26
|
-
format: FieldFormat;
|
|
27
|
-
}
|
|
28
|
-
export interface DashboardItem {
|
|
29
|
-
id: string;
|
|
30
|
-
name: string;
|
|
31
|
-
chartType: string;
|
|
32
|
-
xAxisField: string;
|
|
33
|
-
xAxisLabel: string;
|
|
34
|
-
xAxisFormat: FieldFormat;
|
|
35
|
-
yAxisFields: YAxisField[];
|
|
36
|
-
rows: any[];
|
|
37
|
-
columns: any[];
|
|
38
|
-
pivot: any;
|
|
39
|
-
}
|
|
40
|
-
interface WithConfig extends BaseChartProps {
|
|
41
|
-
config: DashboardItem | any;
|
|
42
|
-
}
|
|
43
|
-
type ChartProps = WithChartId | WithConfig;
|
|
3
|
+
import { type DashboardItem } from './Dashboard';
|
|
44
4
|
export declare function didFiltersChange(dashboardItem: any, filters: any): boolean;
|
|
45
5
|
export type ColorMapType = {
|
|
46
6
|
[key: string]: {
|
|
@@ -52,6 +12,121 @@ export type ColorMapType = {
|
|
|
52
12
|
comparisonGradientStop?: string;
|
|
53
13
|
};
|
|
54
14
|
};
|
|
55
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Props for the Quill Chart component.
|
|
17
|
+
*/
|
|
18
|
+
export interface ChartProps {
|
|
19
|
+
/**
|
|
20
|
+
* A dashboard item to render, if any.
|
|
21
|
+
*
|
|
22
|
+
* When config is passed, the chart will not refetch the given dashboard item
|
|
23
|
+
* and will instead simply render the item it was given.
|
|
24
|
+
*
|
|
25
|
+
* A `config` must be passed if `chartId` is not present.
|
|
26
|
+
*/
|
|
27
|
+
config?: DashboardItem | any;
|
|
28
|
+
/**
|
|
29
|
+
* A dashboard item to render, if any.
|
|
30
|
+
*
|
|
31
|
+
* When a chartId is passed, the chart will first fetch the data necessary to
|
|
32
|
+
* render this chart, and then it will render the dashboard item that it
|
|
33
|
+
* receives from the server.
|
|
34
|
+
*
|
|
35
|
+
* A `chartId` must be passed if `config` is not present.
|
|
36
|
+
*/
|
|
37
|
+
chartId?: string;
|
|
38
|
+
/**
|
|
39
|
+
* A list of color strings used to color the chart.
|
|
40
|
+
*
|
|
41
|
+
* For example, a pie chart would use the colors for each section and a bar
|
|
42
|
+
* chart would use the colors for each bar.
|
|
43
|
+
*/
|
|
44
|
+
colors?: string[];
|
|
45
|
+
/**
|
|
46
|
+
* Applies the given date filter to this chart, if any.
|
|
47
|
+
*/
|
|
48
|
+
dateFilter?: any;
|
|
49
|
+
/**
|
|
50
|
+
* Whether this chart has a date filter.
|
|
51
|
+
*/
|
|
52
|
+
isDateFilter?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Whether to show animations on render complete.
|
|
55
|
+
*/
|
|
56
|
+
isAnimationActive?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Whether to hide the x axis.
|
|
59
|
+
*/
|
|
60
|
+
hideXAxis?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Whether to hide the y axis.
|
|
63
|
+
*/
|
|
64
|
+
hideYAxis?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* Whether to hide the cartesian grid lines.
|
|
67
|
+
*/
|
|
68
|
+
hideCartesianGrid?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Whether the date range filter has been disabled.
|
|
71
|
+
*/
|
|
72
|
+
hideDateRangeFilter?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Whether the comparison range shows as dashed for date comparison line
|
|
75
|
+
* charts (as opposed to the default solid line).
|
|
76
|
+
*/
|
|
77
|
+
comparisonLineStyle?: 'solid' | 'dashed';
|
|
78
|
+
/**
|
|
79
|
+
* An optional function that takes a dashboard item and theme and returns a
|
|
80
|
+
* map of keys used in that dashboard item to the colors they should use.
|
|
81
|
+
*
|
|
82
|
+
* The color values support RGB hexcodes and CSS color literals.
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```js
|
|
86
|
+
* let mapColorsToFields = (item, theme) => {
|
|
87
|
+
* return {
|
|
88
|
+
* // all the queries with yAxis of 'amount' get colored this way:
|
|
89
|
+
* amount: {
|
|
90
|
+
* primary: 'red',
|
|
91
|
+
* comparison: 'gray',
|
|
92
|
+
* primaryGradientStart: 'red',
|
|
93
|
+
* primaryGradientStop: 'lightred',
|
|
94
|
+
* comparisonGradientStart: '#EFEFEF',
|
|
95
|
+
* comparisonGradientStop: '#EFEFEF00',
|
|
96
|
+
* },
|
|
97
|
+
* total: {
|
|
98
|
+
* primary: 'red'
|
|
99
|
+
* },
|
|
100
|
+
* };
|
|
101
|
+
* }
|
|
102
|
+
* ```
|
|
103
|
+
*/
|
|
104
|
+
mapColorsToFields?: (dashboardItem: DashboardItem, theme: QuillTheme) => ColorMapType;
|
|
105
|
+
/**
|
|
106
|
+
* Styles the top-level container of the Chart.
|
|
107
|
+
*/
|
|
108
|
+
containerStyle?: React.CSSProperties;
|
|
109
|
+
}
|
|
110
|
+
/**
|
|
111
|
+
* ### Quill Chart
|
|
112
|
+
*
|
|
113
|
+
* A simple component that displays the given data in one of many chart types.
|
|
114
|
+
*
|
|
115
|
+
* @example
|
|
116
|
+
* ```js
|
|
117
|
+
* // Usage with chart id (will auto-fetch data)
|
|
118
|
+
* <Chart chartId="12345" />
|
|
119
|
+
* ```
|
|
120
|
+
*
|
|
121
|
+
* @example
|
|
122
|
+
* ```js
|
|
123
|
+
* // Usage with a dashboard item (will not auto-fetch data)
|
|
124
|
+
* <Chart config={dashboardItem} />
|
|
125
|
+
* ```
|
|
126
|
+
*
|
|
127
|
+
* ### Chart API
|
|
128
|
+
* @see https://docs.quillsql.com/components/chart
|
|
129
|
+
*/
|
|
130
|
+
declare const Chart: (props: ChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
56
131
|
export default Chart;
|
|
57
132
|
//# sourceMappingURL=Chart.d.ts.map
|
package/dist/cjs/Chart.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";
|
|
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;AAiGjD,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,UAAU,CAAC,EAAE,GAAG,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;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;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAqC/B,CAAC;AA+hBF,eAAe,KAAK,CAAC"}
|
package/dist/cjs/Chart.js
CHANGED
|
@@ -5,10 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.didFiltersChange = void 0;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
/* eslint-disable no-unused-vars */
|
|
8
9
|
const react_1 = require("react");
|
|
9
10
|
const date_fns_1 = require("date-fns");
|
|
10
|
-
const BarList_1 = __importDefault(require("./BarList"));
|
|
11
|
-
const PieChart_1 = __importDefault(require("./PieChart"));
|
|
11
|
+
const BarList_1 = __importDefault(require("./components/Chart/BarList"));
|
|
12
|
+
const PieChart_1 = __importDefault(require("./components/Chart/PieChart"));
|
|
12
13
|
const Context_1 = require("./Context");
|
|
13
14
|
const QuillTable_1 = __importDefault(require("./components/QuillTable"));
|
|
14
15
|
const dataFetcher_1 = require("./utils/dataFetcher");
|
|
@@ -22,6 +23,7 @@ const ChartError_1 = __importDefault(require("./components/Chart/ChartError"));
|
|
|
22
23
|
const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
|
|
23
24
|
const valueFormatter_2 = require("./utils/valueFormatter");
|
|
24
25
|
const csv_1 = require("./utils/csv");
|
|
26
|
+
const useTheme_1 = __importDefault(require("./hooks/useTheme"));
|
|
25
27
|
// @ts-ignore
|
|
26
28
|
function sumByKey(arr, key) {
|
|
27
29
|
// @ts-ignore
|
|
@@ -83,11 +85,33 @@ function fallbackMapColorsToFields(_dashboardItem, _theme) {
|
|
|
83
85
|
// By default, if the key is not in the map we use the colors array.
|
|
84
86
|
return {};
|
|
85
87
|
}
|
|
86
|
-
|
|
88
|
+
/**
|
|
89
|
+
* ### Quill Chart
|
|
90
|
+
*
|
|
91
|
+
* A simple component that displays the given data in one of many chart types.
|
|
92
|
+
*
|
|
93
|
+
* @example
|
|
94
|
+
* ```js
|
|
95
|
+
* // Usage with chart id (will auto-fetch data)
|
|
96
|
+
* <Chart chartId="12345" />
|
|
97
|
+
* ```
|
|
98
|
+
*
|
|
99
|
+
* @example
|
|
100
|
+
* ```js
|
|
101
|
+
* // Usage with a dashboard item (will not auto-fetch data)
|
|
102
|
+
* <Chart config={dashboardItem} />
|
|
103
|
+
* ```
|
|
104
|
+
*
|
|
105
|
+
* ### Chart API
|
|
106
|
+
* @see https://docs.quillsql.com/components/chart
|
|
107
|
+
*/
|
|
108
|
+
const Chart = (props) => {
|
|
109
|
+
// Cast the props to the internal version so we can use the inherited types.
|
|
110
|
+
let data = props;
|
|
87
111
|
if ('config' in data) {
|
|
88
112
|
return ((0, jsx_runtime_1.jsx)(ChartDisplay, { ...data, error: data.config.rows ? undefined : 'No rows found', loading: Boolean(!data.config), isComparison: Boolean(data?.config?.compareRows?.length) }));
|
|
89
113
|
}
|
|
90
|
-
const
|
|
114
|
+
const theme = (0, useTheme_1.default)();
|
|
91
115
|
const chartColors = (0, react_1.useMemo)(() => {
|
|
92
116
|
return data.colors?.length
|
|
93
117
|
? data.colors
|
|
@@ -95,9 +119,9 @@ const Chart = (data) => {
|
|
|
95
119
|
? theme.chartColors
|
|
96
120
|
: ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
|
|
97
121
|
}, [data.colors]);
|
|
98
|
-
return ((0, jsx_runtime_1.jsx)(ChartUpdater, { chartId: data.chartId, containerStyle: data.containerStyle, colors: chartColors,
|
|
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 }));
|
|
99
123
|
};
|
|
100
|
-
const ChartUpdater = ({ colors, chartId, containerStyle,
|
|
124
|
+
const ChartUpdater = ({ colors, chartId, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, hideDateRangeFilter, mapColorsToFields, }) => {
|
|
101
125
|
const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
|
|
102
126
|
const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
|
|
103
127
|
const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
|
|
@@ -106,6 +130,7 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
|
|
|
106
130
|
const [isComparison, setIsComparison] = (0, react_1.useState)(false);
|
|
107
131
|
const [colorMap, setColorMap] = (0, react_1.useState)({});
|
|
108
132
|
const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
|
|
133
|
+
const theme = (0, useTheme_1.default)();
|
|
109
134
|
(0, react_1.useEffect)(() => {
|
|
110
135
|
async function getChartOptions() {
|
|
111
136
|
setLoading(true);
|
|
@@ -115,7 +140,7 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
|
|
|
115
140
|
}
|
|
116
141
|
try {
|
|
117
142
|
// Remove extra fields on each filter so we don't confuse the backend.
|
|
118
|
-
const allowDateRange = !
|
|
143
|
+
const allowDateRange = !hideDateRangeFilter;
|
|
119
144
|
const minimalFilters = Object.values(dashboardFilters).length
|
|
120
145
|
? Object.values(dashboardFilters)
|
|
121
146
|
.filter((f) => allowDateRange || f.filterType !== 'date_range')
|
|
@@ -173,11 +198,11 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
|
|
|
173
198
|
setInitialLoad(false);
|
|
174
199
|
getChartOptions();
|
|
175
200
|
}, [dashboardFilters, client, chartId]);
|
|
176
|
-
return ((0, jsx_runtime_1.jsx)(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid,
|
|
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 }));
|
|
177
202
|
};
|
|
178
|
-
const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid,
|
|
203
|
+
const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
|
|
179
204
|
const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
|
|
180
|
-
const
|
|
205
|
+
const theme = (0, useTheme_1.default)();
|
|
181
206
|
const chartColors = (0, react_1.useMemo)(() => {
|
|
182
207
|
return colors?.length
|
|
183
208
|
? colors
|
|
@@ -305,13 +330,14 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
305
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 }));
|
|
306
331
|
}
|
|
307
332
|
if (chartTypes.includes('metric')) {
|
|
308
|
-
const data = config;
|
|
309
|
-
const
|
|
310
|
-
|
|
333
|
+
const data = config;
|
|
334
|
+
const rows = pivotTable?.rows ?? data.rows ?? [];
|
|
335
|
+
const isComparison = rows?.length > 0 &&
|
|
336
|
+
Object.keys(rows[0]).includes(`comparison_${data.xAxisField}`);
|
|
311
337
|
const primaryMetricLabel = data?.filtersApplied?.date_range?.preset?.label;
|
|
312
338
|
const comparisonKey = data?.filtersApplied?.date_range?.comparisonRange?.value;
|
|
313
339
|
const comparisonLabel = dateRangePickerUtils_1.COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
|
|
314
|
-
if (
|
|
340
|
+
if (rows?.length === 0 || rows[0][data.xAxisField] === null) {
|
|
315
341
|
return ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
316
342
|
display: 'flex',
|
|
317
343
|
flex: '1 0 auto',
|
|
@@ -349,7 +375,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
349
375
|
marginRight: 'auto',
|
|
350
376
|
}, children: [(0, jsx_runtime_1.jsx)("span", { children: data.rows?.length > 0 &&
|
|
351
377
|
(0, valueFormatter_1.valueFormatter)({
|
|
352
|
-
value:
|
|
378
|
+
value: rows[0][data.xAxisField] ?? 0,
|
|
353
379
|
field: data.xAxisField,
|
|
354
380
|
fields: [
|
|
355
381
|
{
|
|
@@ -378,9 +404,9 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
378
404
|
fontWeight: '500',
|
|
379
405
|
fontFamily: theme?.fontFamily,
|
|
380
406
|
color: theme?.secondaryTextColor,
|
|
381
|
-
}, children:
|
|
407
|
+
}, children: rows?.length > 0 &&
|
|
382
408
|
(0, valueFormatter_1.valueFormatter)({
|
|
383
|
-
value:
|
|
409
|
+
value: rows[0][`comparison_${data.xAxisField}`] ?? 0,
|
|
384
410
|
field: data.xAxisField,
|
|
385
411
|
fields: [
|
|
386
412
|
{
|
|
@@ -414,6 +440,6 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
414
440
|
{ [xAxis]: endDate, [yAxis]: '0' },
|
|
415
441
|
];
|
|
416
442
|
}
|
|
417
|
-
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,
|
|
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' }));
|
|
418
444
|
};
|
|
419
445
|
exports.default = Chart;
|
|
@@ -1,41 +1,134 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { QuillTheme } from './QuillProvider';
|
|
3
|
-
import {
|
|
4
|
-
import { SelectComponentProps, TextInputComponentProps, ButtonComponentProps, ModalComponentProps, HeaderProps, LabelProps, TextProps, DeleteButtonProps, MemoizedPopoverProps } from './components/UiComponents';
|
|
5
|
-
import { Column } from './models/Tables';
|
|
6
|
-
import { Field } from './hooks/useQuill';
|
|
3
|
+
import { DashboardItem } from './Dashboard';
|
|
7
4
|
export declare const numberFormatOptions: string[];
|
|
8
5
|
export declare const dateFormatOptions: string[];
|
|
9
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Props for the Quill ChartBuilder component.
|
|
8
|
+
*/
|
|
9
|
+
export interface ChartBuilderProps {
|
|
10
|
+
/** Whether the modal is open. */
|
|
10
11
|
isOpen: boolean;
|
|
12
|
+
/** A callback that sets the isOpen state. */
|
|
11
13
|
setIsOpen: (isOpen: boolean) => void;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
/** A select component. */
|
|
15
|
+
SelectComponent?: (props: {
|
|
16
|
+
value: string;
|
|
17
|
+
label?: string;
|
|
18
|
+
options: {
|
|
19
|
+
value: string;
|
|
20
|
+
label: string;
|
|
21
|
+
}[];
|
|
22
|
+
onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
23
|
+
}) => JSX.Element;
|
|
24
|
+
/** An input component to get text from your users. */
|
|
25
|
+
TextInputComponent?: (props: {
|
|
26
|
+
id: string;
|
|
27
|
+
width: number;
|
|
28
|
+
value: string;
|
|
29
|
+
placeholder?: string;
|
|
30
|
+
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
31
|
+
}) => JSX.Element;
|
|
32
|
+
/** A button component. */
|
|
33
|
+
ButtonComponent?: (props: {
|
|
34
|
+
onClick: () => void;
|
|
35
|
+
label: string;
|
|
36
|
+
}) => JSX.Element;
|
|
37
|
+
/** A secondary button. */
|
|
38
|
+
SecondaryButtonComponent?: (props: {
|
|
39
|
+
onClick: () => void;
|
|
40
|
+
label: string;
|
|
41
|
+
}) => JSX.Element;
|
|
42
|
+
/**
|
|
43
|
+
* A small delete button used to click out of things. Usually an "X" icon.
|
|
44
|
+
*/
|
|
45
|
+
DeleteButtonComponent?: (props: {
|
|
46
|
+
onClick: () => void;
|
|
47
|
+
}) => JSX.Element;
|
|
48
|
+
/** A header component. */
|
|
49
|
+
HeaderComponent?: (props: {
|
|
50
|
+
label: string;
|
|
51
|
+
}) => JSX.Element;
|
|
52
|
+
/** A label component. */
|
|
53
|
+
LabelComponent?: (props: {
|
|
54
|
+
label: string;
|
|
55
|
+
}) => JSX.Element;
|
|
56
|
+
/** A text component. */
|
|
57
|
+
TextComponent?: (props: {
|
|
58
|
+
label: string;
|
|
59
|
+
}) => JSX.Element;
|
|
60
|
+
/**
|
|
61
|
+
* A modal component.
|
|
62
|
+
*/
|
|
63
|
+
ModalComponent?: (props: {
|
|
64
|
+
isOpen: boolean;
|
|
65
|
+
setIsOpen: (isOpen: boolean) => void;
|
|
66
|
+
title?: string;
|
|
67
|
+
children: ReactNode;
|
|
68
|
+
width?: number;
|
|
69
|
+
height?: number;
|
|
70
|
+
}) => JSX.Element;
|
|
71
|
+
/** A popover component. */
|
|
72
|
+
PopoverComponent?: (props: {
|
|
73
|
+
isOpen: boolean;
|
|
74
|
+
setIsOpen: (isOpen: boolean) => void;
|
|
75
|
+
triggerLabel?: string;
|
|
76
|
+
popoverTitle?: string;
|
|
77
|
+
popoverChildren: ReactNode;
|
|
78
|
+
}) => JSX.Element;
|
|
79
|
+
/** The rows of the query response for this query. */
|
|
22
80
|
rows: {
|
|
23
81
|
[key: string]: any;
|
|
24
82
|
}[];
|
|
25
|
-
|
|
83
|
+
/**
|
|
84
|
+
* Columns of this query response.
|
|
85
|
+
*/
|
|
86
|
+
columns: {
|
|
87
|
+
label: string;
|
|
88
|
+
field: string;
|
|
89
|
+
name: string;
|
|
90
|
+
displayName: string;
|
|
91
|
+
fieldType: string;
|
|
92
|
+
format: string;
|
|
93
|
+
}[];
|
|
94
|
+
/** The fields on this query. */
|
|
95
|
+
fields?: {
|
|
96
|
+
name: string;
|
|
97
|
+
tableID: number;
|
|
98
|
+
columnID: number;
|
|
99
|
+
dataTypeID: number;
|
|
100
|
+
dataTypeSize: number;
|
|
101
|
+
dataTypeModifier: number;
|
|
102
|
+
format: string;
|
|
103
|
+
}[];
|
|
104
|
+
/** The SQL query for this dashboard item. */
|
|
26
105
|
query?: string;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
106
|
+
/** Whether the ChartBuilder is in horizontal view mode. */
|
|
107
|
+
isHorizontalView?: boolean;
|
|
108
|
+
/** Whether to show the table format options. */
|
|
30
109
|
showTableFormatOptions?: boolean;
|
|
31
|
-
|
|
110
|
+
/** Whether to show the date field options. */
|
|
32
111
|
showDateFieldOptions?: boolean;
|
|
112
|
+
/** Whether to show the access control options. */
|
|
33
113
|
showAccessControlOptions?: boolean;
|
|
114
|
+
/** Whether to show the dashboard dropdown. */
|
|
34
115
|
showDashboardDropdown?: boolean;
|
|
116
|
+
/** A callback fired when the add to dashboard flow has been completed. */
|
|
35
117
|
onAddToDashboardComplete?: () => void;
|
|
118
|
+
/** A callback fired when this chart is delete. */
|
|
36
119
|
onDelete?: () => void;
|
|
37
|
-
|
|
38
|
-
pivot?:
|
|
120
|
+
/** The pivot info applied to this data. */
|
|
121
|
+
pivot?: {
|
|
122
|
+
rowField: string;
|
|
123
|
+
rowFieldType: string;
|
|
124
|
+
columnField?: string;
|
|
125
|
+
columnFieldType?: string;
|
|
126
|
+
valueField: string;
|
|
127
|
+
aggregationType: string;
|
|
128
|
+
title?: string;
|
|
129
|
+
triggerButtonText?: string;
|
|
130
|
+
};
|
|
131
|
+
/** The data extracted from the pivot info. */
|
|
39
132
|
pivotData?: {
|
|
40
133
|
rows: any[];
|
|
41
134
|
columns: {
|
|
@@ -43,19 +136,94 @@ interface ChartBuilderProps {
|
|
|
43
136
|
field: string;
|
|
44
137
|
}[];
|
|
45
138
|
};
|
|
139
|
+
/** The date range applied to this ChartBuilder. */
|
|
46
140
|
dateRange?: (string | Date)[];
|
|
47
|
-
dashboardItem
|
|
48
|
-
|
|
49
|
-
|
|
141
|
+
/** The dashboardItem for this ChartBuilder. */
|
|
142
|
+
dashboardItem?: DashboardItem | any;
|
|
143
|
+
/** A list of generated pivots that were recommended as useful for this query. */
|
|
144
|
+
recommendedPivots?: {
|
|
145
|
+
rowField: string;
|
|
146
|
+
rowFieldType: string;
|
|
147
|
+
columnField?: string;
|
|
148
|
+
columnFieldType?: string;
|
|
149
|
+
valueField: string;
|
|
150
|
+
aggregationType: string;
|
|
151
|
+
title?: string;
|
|
152
|
+
triggerButtonText?: string;
|
|
153
|
+
}[];
|
|
154
|
+
/** A list of generated pivots based on this query. */
|
|
155
|
+
createdPivots?: {
|
|
156
|
+
rowField: string;
|
|
157
|
+
rowFieldType: string;
|
|
158
|
+
columnField?: string;
|
|
159
|
+
columnFieldType?: string;
|
|
160
|
+
valueField: string;
|
|
161
|
+
aggregationType: string;
|
|
162
|
+
title?: string;
|
|
163
|
+
triggerButtonText?: string;
|
|
164
|
+
}[];
|
|
165
|
+
/** Query without a date column */
|
|
50
166
|
queryNoDateColumn?: string;
|
|
167
|
+
/** The default dashboard to add the item to. */
|
|
51
168
|
destinationDashboard?: string;
|
|
169
|
+
/** The title of the ChartBuilder. */
|
|
52
170
|
title?: string;
|
|
171
|
+
/** The button label for the ChartBuilder. */
|
|
53
172
|
buttonLabel?: string;
|
|
173
|
+
/** The date column to use for the ChartBuilder. */
|
|
54
174
|
dateColumn?: string;
|
|
175
|
+
/** The name of the current organization. */
|
|
55
176
|
organizationName?: string;
|
|
56
177
|
}
|
|
178
|
+
/**
|
|
179
|
+
* ### Quill Chart Builder with Modal
|
|
180
|
+
*
|
|
181
|
+
* Renders a ChartBuilder component with a modal.
|
|
182
|
+
*
|
|
183
|
+
* @example
|
|
184
|
+
* ```js
|
|
185
|
+
* // Usage without custom components
|
|
186
|
+
* <ChartBuilder />
|
|
187
|
+
* ```
|
|
188
|
+
*
|
|
189
|
+
* @example
|
|
190
|
+
* ```js
|
|
191
|
+
* // You can also pass your own components
|
|
192
|
+
* <ChartBuilder
|
|
193
|
+
* ButtonComponent={MyButton}
|
|
194
|
+
* SecondaryButtonComponent={MySecondaryButton}
|
|
195
|
+
* />
|
|
196
|
+
* ```
|
|
197
|
+
*
|
|
198
|
+
* ### Chart Builder API
|
|
199
|
+
* @see https://docs.quillsql.com/components/chart-builder#with-modal
|
|
200
|
+
*/
|
|
57
201
|
export declare function ChartBuilderWithModal(props: ChartBuilderProps): import("react/jsx-runtime").JSX.Element;
|
|
58
|
-
|
|
202
|
+
/**
|
|
203
|
+
* ### Quill Chart Builder
|
|
204
|
+
*
|
|
205
|
+
* A simple form that lets users turn a SQL query into a chart, metric, or table
|
|
206
|
+
* and then add that dashboard item into one of their dashboards.
|
|
207
|
+
*
|
|
208
|
+
* @example
|
|
209
|
+
* ```js
|
|
210
|
+
* // Usage without custom components
|
|
211
|
+
* <ChartBuilder />
|
|
212
|
+
* ```
|
|
213
|
+
*
|
|
214
|
+
* @example
|
|
215
|
+
* ```js
|
|
216
|
+
* // You can also pass your own components
|
|
217
|
+
* <ChartBuilder
|
|
218
|
+
* ButtonComponent={MyButton}
|
|
219
|
+
* SecondaryButtonComponent={MySecondaryButton}
|
|
220
|
+
* />
|
|
221
|
+
* ```
|
|
222
|
+
*
|
|
223
|
+
* ### Chart Builder API
|
|
224
|
+
* @see https://docs.quillsql.com/components/chart-builder
|
|
225
|
+
*/
|
|
226
|
+
export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, 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, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
|
|
59
227
|
export declare function DashboardFilterModal({ isOpen, setIsOpen, override, theme, issues, }: {
|
|
60
228
|
isOpen: boolean;
|
|
61
229
|
setIsOpen: (e: boolean) => void;
|
|
@@ -63,5 +231,4 @@ export declare function DashboardFilterModal({ isOpen, setIsOpen, override, them
|
|
|
63
231
|
theme: QuillTheme;
|
|
64
232
|
issues: string[];
|
|
65
233
|
}): import("react/jsx-runtime").JSX.Element;
|
|
66
|
-
export {};
|
|
67
234
|
//# sourceMappingURL=ChartBuilder.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"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"}
|