@quillsql/react 2.11.8 → 2.11.12
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/BarList.d.ts +2 -1
- package/dist/cjs/BarList.d.ts.map +1 -1
- package/dist/cjs/BarList.js +9 -3
- package/dist/cjs/Chart.d.ts +11 -5
- package/dist/cjs/Chart.d.ts.map +1 -1
- package/dist/cjs/Chart.js +57 -20
- package/dist/cjs/ChartBuilder.d.ts +16 -1
- package/dist/cjs/ChartBuilder.d.ts.map +1 -1
- package/dist/cjs/ChartBuilder.js +423 -281
- package/dist/cjs/ChartEditor.d.ts.map +1 -1
- package/dist/cjs/ChartEditor.js +1 -0
- package/dist/cjs/Dashboard.d.ts +2 -1
- package/dist/cjs/Dashboard.d.ts.map +1 -1
- package/dist/cjs/Dashboard.js +5 -19
- package/dist/cjs/PieChart.d.ts.map +1 -1
- package/dist/cjs/PieChart.js +2 -1
- package/dist/cjs/QuillProvider.d.ts.map +1 -1
- package/dist/cjs/QuillProvider.js +15 -1
- package/dist/cjs/ReportBuilder.d.ts +4 -3
- package/dist/cjs/ReportBuilder.d.ts.map +1 -1
- package/dist/cjs/ReportBuilder.js +76 -45
- package/dist/cjs/SQLEditor.d.ts +2 -1
- package/dist/cjs/SQLEditor.d.ts.map +1 -1
- package/dist/cjs/SQLEditor.js +60 -90
- 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 +10 -3
- package/dist/cjs/components/Chart/LineChart.d.ts +3 -4
- package/dist/cjs/components/Chart/LineChart.d.ts.map +1 -1
- package/dist/cjs/components/Chart/LineChart.js +32 -15
- package/dist/cjs/components/Dashboard/ChartComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/ChartComponent.js +0 -3
- package/dist/cjs/components/Dashboard/DashboardSection.js +4 -4
- package/dist/cjs/components/Dashboard/DashboardSectionContainer.js +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.d.ts +8 -1
- package/dist/cjs/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.js +12 -3
- package/dist/cjs/components/Dashboard/MetricComponent.d.ts +12 -1
- package/dist/cjs/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/MetricComponent.js +105 -9
- package/dist/cjs/components/Dashboard/TableComponent.d.ts +1 -1
- package/dist/cjs/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/TableComponent.js +78 -3
- package/dist/cjs/components/QuillTable.d.ts.map +1 -1
- package/dist/cjs/components/QuillTable.js +3 -1
- package/dist/cjs/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/AddSortPopover.js +5 -4
- package/dist/cjs/components/ReportBuilder/ast.d.ts +4 -0
- package/dist/cjs/components/ReportBuilder/ast.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ast.js +10 -1
- package/dist/cjs/components/ReportBuilder/convert.d.ts +4 -1
- package/dist/cjs/components/ReportBuilder/convert.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/convert.js +45 -13
- package/dist/cjs/components/ReportBuilder/pivot.d.ts +3 -0
- package/dist/cjs/components/ReportBuilder/pivot.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.js +3 -2
- package/dist/cjs/components/ReportBuilder/util.d.ts +1 -0
- package/dist/cjs/components/ReportBuilder/util.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/util.js +48 -1
- package/dist/cjs/components/UiComponents.d.ts +3 -1
- package/dist/cjs/components/UiComponents.d.ts.map +1 -1
- package/dist/cjs/components/UiComponents.js +4 -4
- package/dist/cjs/hooks/useQuill.js +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.js +65 -62
- package/dist/cjs/utils/axisFormatter.js +74 -30
- package/dist/cjs/utils/dataFetcher.d.ts.map +1 -1
- package/dist/cjs/utils/dataFetcher.js +10 -0
- package/dist/cjs/utils/getDomain.d.ts.map +1 -1
- package/dist/cjs/utils/getDomain.js +22 -4
- package/dist/cjs/utils/valueFormatter.d.ts +2 -1
- package/dist/cjs/utils/valueFormatter.d.ts.map +1 -1
- package/dist/esm/BarList.d.ts +2 -1
- package/dist/esm/BarList.d.ts.map +1 -1
- package/dist/esm/BarList.js +9 -3
- package/dist/esm/Chart.d.ts +11 -5
- package/dist/esm/Chart.d.ts.map +1 -1
- package/dist/esm/Chart.js +57 -20
- package/dist/esm/ChartBuilder.d.ts +16 -1
- package/dist/esm/ChartBuilder.d.ts.map +1 -1
- package/dist/esm/ChartBuilder.js +421 -280
- package/dist/esm/ChartEditor.d.ts.map +1 -1
- package/dist/esm/ChartEditor.js +1 -0
- package/dist/esm/Dashboard.d.ts +2 -1
- package/dist/esm/Dashboard.d.ts.map +1 -1
- package/dist/esm/Dashboard.js +5 -19
- package/dist/esm/PieChart.d.ts.map +1 -1
- package/dist/esm/PieChart.js +2 -1
- package/dist/esm/QuillProvider.d.ts.map +1 -1
- package/dist/esm/QuillProvider.js +16 -2
- package/dist/esm/ReportBuilder.d.ts +4 -3
- package/dist/esm/ReportBuilder.d.ts.map +1 -1
- package/dist/esm/ReportBuilder.js +80 -49
- package/dist/esm/SQLEditor.d.ts +2 -1
- package/dist/esm/SQLEditor.d.ts.map +1 -1
- package/dist/esm/SQLEditor.js +61 -91
- 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 +10 -3
- package/dist/esm/components/Chart/LineChart.d.ts +3 -4
- package/dist/esm/components/Chart/LineChart.d.ts.map +1 -1
- package/dist/esm/components/Chart/LineChart.js +32 -15
- package/dist/esm/components/Dashboard/ChartComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/ChartComponent.js +0 -3
- package/dist/esm/components/Dashboard/DashboardSection.js +4 -4
- package/dist/esm/components/Dashboard/DashboardSectionContainer.js +1 -1
- package/dist/esm/components/Dashboard/DataLoader.d.ts +8 -1
- package/dist/esm/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DataLoader.js +13 -4
- package/dist/esm/components/Dashboard/MetricComponent.d.ts +12 -1
- package/dist/esm/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/MetricComponent.js +101 -8
- package/dist/esm/components/Dashboard/TableComponent.d.ts +1 -1
- package/dist/esm/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/TableComponent.js +74 -2
- package/dist/esm/components/QuillTable.d.ts.map +1 -1
- package/dist/esm/components/QuillTable.js +3 -1
- package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/AddSortPopover.js +6 -5
- package/dist/esm/components/ReportBuilder/ast.d.ts +4 -0
- package/dist/esm/components/ReportBuilder/ast.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ast.js +8 -0
- package/dist/esm/components/ReportBuilder/convert.d.ts +4 -1
- package/dist/esm/components/ReportBuilder/convert.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/convert.js +45 -13
- package/dist/esm/components/ReportBuilder/pivot.d.ts +3 -0
- package/dist/esm/components/ReportBuilder/pivot.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.js +3 -2
- package/dist/esm/components/ReportBuilder/util.d.ts +1 -0
- package/dist/esm/components/ReportBuilder/util.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/util.js +46 -0
- package/dist/esm/components/UiComponents.d.ts +3 -1
- package/dist/esm/components/UiComponents.d.ts.map +1 -1
- package/dist/esm/components/UiComponents.js +4 -4
- package/dist/esm/hooks/useQuill.js +1 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.js +65 -62
- package/dist/esm/utils/axisFormatter.js +74 -30
- package/dist/esm/utils/dataFetcher.d.ts.map +1 -1
- package/dist/esm/utils/dataFetcher.js +10 -0
- package/dist/esm/utils/getDomain.d.ts.map +1 -1
- package/dist/esm/utils/getDomain.js +22 -4
- package/dist/esm/utils/valueFormatter.d.ts +2 -1
- package/dist/esm/utils/valueFormatter.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/esm/BarList.js
CHANGED
|
@@ -123,7 +123,9 @@ const BarList = React.forwardRef((props, ref) => {
|
|
|
123
123
|
marginBottom: '8px',
|
|
124
124
|
width: `${widths[idx]}%`,
|
|
125
125
|
transition: showAnimation ? 'all 2s' : '',
|
|
126
|
-
backgroundColor: (colorMap &&
|
|
126
|
+
backgroundColor: (colorMap &&
|
|
127
|
+
colorMap[xAxisField] &&
|
|
128
|
+
colorMap[xAxisField]['primary']) ??
|
|
127
129
|
hexToRgbaWith10PercentAlpha(colors[0]),
|
|
128
130
|
boxSizing: 'content-box',
|
|
129
131
|
}, children: _jsx("div", { style: {
|
|
@@ -150,7 +152,9 @@ const BarList = React.forwardRef((props, ref) => {
|
|
|
150
152
|
marginBottom: '8px',
|
|
151
153
|
width: `${widths2[idx]}%`,
|
|
152
154
|
transition: showAnimation ? 'all 2s' : '',
|
|
153
|
-
backgroundColor: (colorMap &&
|
|
155
|
+
backgroundColor: (colorMap &&
|
|
156
|
+
colorMap[xAxisField] &&
|
|
157
|
+
colorMap[xAxisField]['primary']) ??
|
|
154
158
|
hexToRgbaWith10PercentAlpha(colors[1]),
|
|
155
159
|
boxSizing: 'content-box',
|
|
156
160
|
}, children: _jsx("div", { style: {
|
|
@@ -228,7 +232,9 @@ const BarList = React.forwardRef((props, ref) => {
|
|
|
228
232
|
width: `${widths[idx]}%`,
|
|
229
233
|
transition: showAnimation ? 'all 2s' : '',
|
|
230
234
|
boxSizing: 'content-box',
|
|
231
|
-
backgroundColor: (colorMap &&
|
|
235
|
+
backgroundColor: (colorMap &&
|
|
236
|
+
colorMap[xAxisField] &&
|
|
237
|
+
colorMap[xAxisField]['primary']) ??
|
|
232
238
|
hexToRgbaWith10PercentAlpha(colors[0]),
|
|
233
239
|
display: 'flex',
|
|
234
240
|
alignItems: 'center',
|
package/dist/esm/Chart.d.ts
CHANGED
|
@@ -11,13 +11,9 @@ interface BaseChartProps {
|
|
|
11
11
|
hideYAxis?: boolean;
|
|
12
12
|
hideCartesianGrid?: boolean;
|
|
13
13
|
dashedComparison?: boolean;
|
|
14
|
-
customPrimaryColor?: string;
|
|
15
|
-
customComparisonColor?: string;
|
|
16
14
|
dateRangeFilterDisabled?: boolean;
|
|
17
15
|
singlePointStyle?: 'dot' | 'line';
|
|
18
|
-
mapColorsToFields?: (_dashboardItem: DashboardItem, _theme: QuillTheme) =>
|
|
19
|
-
[key: string]: string;
|
|
20
|
-
};
|
|
16
|
+
mapColorsToFields?: (_dashboardItem: DashboardItem, _theme: QuillTheme) => ColorMapType;
|
|
21
17
|
}
|
|
22
18
|
interface WithChartId extends BaseChartProps {
|
|
23
19
|
chartId: string;
|
|
@@ -46,6 +42,16 @@ interface WithConfig extends BaseChartProps {
|
|
|
46
42
|
}
|
|
47
43
|
type ChartProps = WithChartId | WithConfig;
|
|
48
44
|
export declare function didFiltersChange(dashboardItem: any, filters: any): boolean;
|
|
45
|
+
export type ColorMapType = {
|
|
46
|
+
[key: string]: {
|
|
47
|
+
primary: string;
|
|
48
|
+
comparison?: string;
|
|
49
|
+
primaryGradientStart?: string;
|
|
50
|
+
primaryGradientStop?: string;
|
|
51
|
+
comparisonGradientStart?: string;
|
|
52
|
+
comparisonGradientStop?: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
49
55
|
declare const Chart: (data: ChartProps) => import("react/jsx-runtime").JSX.Element;
|
|
50
56
|
export default Chart;
|
|
51
57
|
//# sourceMappingURL=Chart.d.ts.map
|
package/dist/esm/Chart.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,
|
|
1
|
+
{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAClB,cAAc,EAAE,aAAa,EAC7B,MAAM,EAAE,UAAU,KACf,YAAY,CAAC;CACnB;AAED,UAAU,WAAY,SAAQ,cAAc;IAC1C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GACnB,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,GACf,cAAc,GACd,UAAU,GACV,aAAa,GACb,eAAe,GACf,oBAAoB,GACpB,UAAU,GACV,SAAS,GACT,QAAQ,CAAC;AAEb,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,UAAU,UAAW,SAAQ,cAAc;IACzC,MAAM,EAAE,aAAa,GAAG,GAAG,CAAC;CAC7B;AAED,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC;AA+D3C,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;AAaF,QAAA,MAAM,KAAK,SAAU,UAAU,4CAqC9B,CAAC;AAkiBF,eAAe,KAAK,CAAC"}
|
package/dist/esm/Chart.js
CHANGED
|
@@ -78,7 +78,7 @@ function fallbackMapColorsToFields(_dashboardItem, _theme) {
|
|
|
78
78
|
}
|
|
79
79
|
const Chart = (data) => {
|
|
80
80
|
if ('config' in data) {
|
|
81
|
-
return (_jsx(ChartDisplay, { ...data, loading: Boolean(!data.config), isComparison: Boolean(data?.config?.compareRows?.length) }));
|
|
81
|
+
return (_jsx(ChartDisplay, { ...data, error: data.config.rows ? undefined : 'No rows found', loading: Boolean(!data.config), isComparison: Boolean(data?.config?.compareRows?.length) }));
|
|
82
82
|
}
|
|
83
83
|
const [theme] = useContext(ThemeContext);
|
|
84
84
|
const chartColors = useMemo(() => {
|
|
@@ -88,24 +88,25 @@ const Chart = (data) => {
|
|
|
88
88
|
? theme.chartColors
|
|
89
89
|
: ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
|
|
90
90
|
}, [data.colors]);
|
|
91
|
-
return (_jsx(ChartUpdater, { chartId: data.chartId, containerStyle: data.containerStyle, colors: chartColors, theme: theme, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, dashedComparison: data.dashedComparison, dateRangeFilterDisabled: data.dateRangeFilterDisabled,
|
|
91
|
+
return (_jsx(ChartUpdater, { chartId: data.chartId, containerStyle: data.containerStyle, colors: chartColors, theme: theme, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, dashedComparison: data.dashedComparison, dateRangeFilterDisabled: data.dateRangeFilterDisabled, singlePointStyle: data.singlePointStyle ?? 'dot', mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields }));
|
|
92
92
|
};
|
|
93
|
-
const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, dateRangeFilterDisabled,
|
|
93
|
+
const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, dateRangeFilterDisabled, singlePointStyle, mapColorsToFields, }) => {
|
|
94
94
|
const { dispatch, dashboard } = useContext(DashboardContext);
|
|
95
95
|
const { dashboardFilters } = useContext(DashboardFiltersContext);
|
|
96
96
|
const [initialLoad, setInitialLoad] = useState(true);
|
|
97
97
|
const [loading, setLoading] = useState(false);
|
|
98
|
+
const [error, setError] = useState(undefined);
|
|
98
99
|
const [isComparison, setIsComparison] = useState(false);
|
|
99
100
|
const [colorMap, setColorMap] = useState({});
|
|
100
101
|
const [client, _] = useContext(ClientContext);
|
|
101
102
|
useEffect(() => {
|
|
102
103
|
async function getChartOptions() {
|
|
104
|
+
setLoading(true);
|
|
103
105
|
if (!didFiltersChange(dashboard[chartId], dashboardFilters)) {
|
|
104
106
|
setLoading(false);
|
|
105
107
|
return;
|
|
106
108
|
}
|
|
107
109
|
try {
|
|
108
|
-
setLoading(true);
|
|
109
110
|
// Remove extra fields on each filter so we don't confuse the backend.
|
|
110
111
|
const allowDateRange = !dateRangeFilterDisabled;
|
|
111
112
|
const minimalFilters = Object.values(dashboardFilters).length
|
|
@@ -135,6 +136,7 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
|
|
|
135
136
|
id: chartId,
|
|
136
137
|
filters: minimalFilters,
|
|
137
138
|
};
|
|
139
|
+
setError(undefined);
|
|
138
140
|
const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
|
|
139
141
|
if (resp && resp.name !== 'error' && !resp.errorMessage) {
|
|
140
142
|
setIsComparison(!!resp.compareRows?.length);
|
|
@@ -151,6 +153,9 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
|
|
|
151
153
|
setColorMap(mapColorsToFields(dashboardItem, theme));
|
|
152
154
|
}
|
|
153
155
|
}
|
|
156
|
+
else {
|
|
157
|
+
setError(resp?.errorMessage);
|
|
158
|
+
}
|
|
154
159
|
setLoading(false);
|
|
155
160
|
}
|
|
156
161
|
catch (e) {
|
|
@@ -161,9 +166,9 @@ const ChartUpdater = ({ colors, chartId, containerStyle, theme, isAnimationActiv
|
|
|
161
166
|
setInitialLoad(false);
|
|
162
167
|
getChartOptions();
|
|
163
168
|
}, [dashboardFilters, client, chartId]);
|
|
164
|
-
return (_jsx(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle,
|
|
169
|
+
return (_jsx(ChartDisplay, { config: dashboard[chartId], colors: colors, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, error: error, colorMap: colorMap }));
|
|
165
170
|
};
|
|
166
|
-
const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison,
|
|
171
|
+
const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, dashedComparison, isAnimationActive, loading = false, error = undefined, isComparison = false, singlePointStyle = 'dot', colorMap, }) => {
|
|
167
172
|
const { dashboardFilters } = useContext(DashboardFiltersContext);
|
|
168
173
|
const [theme] = useContext(ThemeContext);
|
|
169
174
|
const chartColors = useMemo(() => {
|
|
@@ -201,13 +206,11 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
201
206
|
? generatePivotTableYAxis(pivot, pivotTable.columns, yAxisFields?.[0]?.format)
|
|
202
207
|
: null;
|
|
203
208
|
}, [pivotTable, config?.yAxisFields]);
|
|
204
|
-
if (
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
return _jsx(ChartError, { containerStyle: containerStyle });
|
|
210
|
-
}
|
|
209
|
+
if (error) {
|
|
210
|
+
return _jsx(ChartError, { containerStyle: containerStyle });
|
|
211
|
+
}
|
|
212
|
+
else if (!config || loading) {
|
|
213
|
+
return _jsx(ChartSkeleton, { containerStyle: containerStyle });
|
|
211
214
|
}
|
|
212
215
|
// TODO: Figure out if we can use ?? to coalesce these into the variable.
|
|
213
216
|
const chartTypes = [config?.chartType];
|
|
@@ -285,17 +288,37 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
285
288
|
(key.startsWith('comparison_') &&
|
|
286
289
|
Boolean(row[key.replace('comparison_', '')]))));
|
|
287
290
|
if (chartTypes.includes('column')) {
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
+
// Autofill the column chart with an empty column if there are no rows
|
|
292
|
+
let barChartData = data;
|
|
293
|
+
if (dateFilter && (!data || data.length === 0)) {
|
|
294
|
+
const xAxis = config.xAxisField;
|
|
295
|
+
const yAxis = yAxisFields[0]?.field;
|
|
296
|
+
barChartData = [{ [xAxis]: '', [yAxis]: '0' }];
|
|
297
|
+
}
|
|
298
|
+
return (_jsx(BarChart, { 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 }));
|
|
291
299
|
}
|
|
292
300
|
if (chartTypes.includes('metric')) {
|
|
293
301
|
const data = config; // THIS SHOULD ACCOUNT FOR PIVOT TABLES IN THE FUTURE
|
|
294
|
-
const isComparison = data.rows
|
|
302
|
+
const isComparison = data.rows?.length > 0 &&
|
|
295
303
|
Object.keys(data.rows[0]).includes(`comparison_${data.xAxisField}`);
|
|
296
304
|
const primaryMetricLabel = data?.filtersApplied?.date_range?.preset?.label;
|
|
297
305
|
const comparisonKey = data?.filtersApplied?.date_range?.comparisonRange?.value;
|
|
298
306
|
const comparisonLabel = COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
|
|
307
|
+
if (data.rows?.length === 0 || data.rows[0][data.xAxisField] === null) {
|
|
308
|
+
return (_jsx("div", { style: {
|
|
309
|
+
display: 'flex',
|
|
310
|
+
flex: '1 0 auto',
|
|
311
|
+
height: containerStyle?.height || '100%',
|
|
312
|
+
margin: 'auto',
|
|
313
|
+
justifyContent: 'center',
|
|
314
|
+
alignItems: 'center',
|
|
315
|
+
fontSize: 13,
|
|
316
|
+
color: theme.secondaryTextColor,
|
|
317
|
+
maxWidth: '100%',
|
|
318
|
+
width: '100%',
|
|
319
|
+
...containerStyle,
|
|
320
|
+
}, children: "No results" }));
|
|
321
|
+
}
|
|
299
322
|
return (_jsxs("div", { style: {
|
|
300
323
|
fontFamily: theme?.fontFamily,
|
|
301
324
|
fontSize: 32,
|
|
@@ -317,7 +340,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
317
340
|
gap: 4,
|
|
318
341
|
alignItems: 'baseline',
|
|
319
342
|
marginRight: 'auto',
|
|
320
|
-
}, children: [_jsx("span", { children: data.rows
|
|
343
|
+
}, children: [_jsx("span", { children: data.rows?.length > 0 &&
|
|
321
344
|
valueFormatter({
|
|
322
345
|
value: data.rows[0][data.xAxisField] ?? 0,
|
|
323
346
|
field: data.xAxisField,
|
|
@@ -348,7 +371,7 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
348
371
|
fontWeight: '500',
|
|
349
372
|
fontFamily: theme?.fontFamily,
|
|
350
373
|
color: theme?.secondaryTextColor,
|
|
351
|
-
}, children: data.rows
|
|
374
|
+
}, children: data.rows?.length > 0 &&
|
|
352
375
|
valueFormatter({
|
|
353
376
|
value: data.rows[0][`comparison_${data.xAxisField}`] ?? 0,
|
|
354
377
|
field: data.xAxisField,
|
|
@@ -370,6 +393,20 @@ const ChartDisplay = ({ config, colors, containerStyle, hideXAxis, hideYAxis, hi
|
|
|
370
393
|
? 'in ' + comparisonLabel.toLowerCase()
|
|
371
394
|
: 'previous period' })] }))] }));
|
|
372
395
|
}
|
|
373
|
-
|
|
396
|
+
// Autofill the line chart with two zero values, so they form a line at 0.0
|
|
397
|
+
// when there are no rows on the config.
|
|
398
|
+
let lineChartData = data;
|
|
399
|
+
if (dateFilter && (!data || data.length === 0)) {
|
|
400
|
+
const xAxis = config.xAxisField;
|
|
401
|
+
const yAxis = yAxisFields[0]?.field;
|
|
402
|
+
const format = config.columns.find((c) => c.field === xAxis).format;
|
|
403
|
+
const startDate = quillFormat({ value: dateFilter?.startDate, format });
|
|
404
|
+
const endDate = quillFormat({ value: dateFilter?.endDate, format });
|
|
405
|
+
lineChartData = [
|
|
406
|
+
{ [xAxis]: startDate, [yAxis]: '0' },
|
|
407
|
+
{ [xAxis]: endDate, [yAxis]: '0' },
|
|
408
|
+
];
|
|
409
|
+
}
|
|
410
|
+
return (_jsx(LineChart, { 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, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle }));
|
|
374
411
|
};
|
|
375
412
|
export default Chart;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { QuillTheme } from './QuillProvider';
|
|
2
3
|
import { Pivot } from './internals/ReportBuilder/PivotModal';
|
|
3
4
|
import { SelectComponentProps, TextInputComponentProps, ButtonComponentProps, ModalComponentProps, HeaderProps, LabelProps, TextProps, DeleteButtonProps, MemoizedPopoverProps } from './components/UiComponents';
|
|
4
5
|
import { Column } from './models/Tables';
|
|
@@ -35,6 +36,13 @@ interface ChartBuilderProps {
|
|
|
35
36
|
onDelete?: () => void;
|
|
36
37
|
fields?: Field[];
|
|
37
38
|
pivot?: Pivot;
|
|
39
|
+
pivotData?: {
|
|
40
|
+
rows: any[];
|
|
41
|
+
columns: {
|
|
42
|
+
label: string;
|
|
43
|
+
field: string;
|
|
44
|
+
}[];
|
|
45
|
+
};
|
|
38
46
|
dateRange?: (string | Date)[];
|
|
39
47
|
dashboardItem?: any;
|
|
40
48
|
recommendedPivots?: Pivot[];
|
|
@@ -47,6 +55,13 @@ interface ChartBuilderProps {
|
|
|
47
55
|
organizationName?: string;
|
|
48
56
|
}
|
|
49
57
|
export declare function ChartBuilderWithModal(props: ChartBuilderProps): import("react/jsx-runtime").JSX.Element;
|
|
50
|
-
export default function ChartBuilder({ TextInput, Select, Button, SecondaryButton, Header, Label, DeleteButton, Text, Popover, isOpen, isEditMode, horizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | undefined;
|
|
58
|
+
export default function ChartBuilder({ TextInput, Select, Button, SecondaryButton, Header, Label, DeleteButton, Text, Popover, isOpen, isEditMode, horizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, 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 | undefined;
|
|
59
|
+
export declare function DashboardFilterModal({ isOpen, setIsOpen, override, theme, issues, }: {
|
|
60
|
+
isOpen: boolean;
|
|
61
|
+
setIsOpen: (e: boolean) => void;
|
|
62
|
+
override: () => void;
|
|
63
|
+
theme: QuillTheme;
|
|
64
|
+
issues: string[];
|
|
65
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
51
66
|
export {};
|
|
52
67
|
//# sourceMappingURL=ChartBuilder.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"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"}
|