Mirror of https://github.com/roostorg/coop
github.com/roostorg/coop
fix: ErrorBoundary's and fixes for Rechart's Division By Zero errors (#95)
authored by
Caleb McQuaid
and committed by
GitHub
f19196ef
c976b6af
+52
-22
+2
-6
client/src/webpages/dashboard/mrt/visualization/ManualReviewDashboardInsightsFilterBy.tsx
+2
-6
client/src/webpages/dashboard/mrt/visualization/ManualReviewDashboardInsightsFilterBy.tsx
···
202
202
};
203
203
}, [filterByMenuVisible]);
204
204
205
-
if (error) {
206
-
throw error;
207
-
}
208
-
209
-
if (loading) {
210
-
return <ComponentLoading />;
205
+
if (error || loading) {
206
+
return loading ? <ComponentLoading /> : null;
211
207
}
212
208
213
209
const toggleColumn = (column: FilterByColumnName) => {
+36
-8
client/src/webpages/dashboard/overview/Overview.tsx
+36
-8
client/src/webpages/dashboard/overview/Overview.tsx
···
22
22
import { Helmet } from 'react-helmet-async';
23
23
24
24
import DashboardHeader from '../components/DashboardHeader';
25
+
import ErrorBoundary from '@/components/ErrorBoundary';
25
26
import FullScreenLoading from '@/components/common/FullScreenLoading';
26
27
27
28
import { ChartType } from '../rules/dashboard/visualization/RulesDashboardInsights';
···
198
199
<div className="flex flex-col w-full gap-4 mb-12">
199
200
<div className="flex flex-col w-full gap-4 sm:flex-row">{cards}</div>
200
201
<div className="flex w-full">
201
-
<RuleDashboardInsightsChart
202
-
lookback={LookbackLength.CUSTOM}
203
-
timeWindow={customTimeWindow}
204
-
timeDivision={timeDivision}
205
-
title="Total actions"
206
-
initialGroupBy="ACTION_ID"
207
-
/>
202
+
<ErrorBoundary
203
+
containedInLayout
204
+
FallbackComponent={() => (
205
+
<div className="flex flex-col items-center justify-center w-full gap-3 p-6 rounded bg-slate-100">
206
+
<div className="text-xl">
207
+
No chart data available yet
208
+
</div>
209
+
</div>
210
+
)}
211
+
>
212
+
<RuleDashboardInsightsChart
213
+
lookback={LookbackLength.CUSTOM}
214
+
timeWindow={customTimeWindow}
215
+
timeDivision={timeDivision}
216
+
title="Total actions"
217
+
initialGroupBy="ACTION_ID"
218
+
/>
219
+
</ErrorBoundary>
220
+
</div>
221
+
<div className="flex w-full gap-4">
222
+
{charts.map((chart) => (
223
+
<ErrorBoundary
224
+
key={chart.key}
225
+
containedInLayout
226
+
FallbackComponent={() => (
227
+
<div className="flex flex-col items-center justify-center w-full gap-3 p-6 rounded bg-slate-100">
228
+
<div className="text-xl">
229
+
No chart data available yet
230
+
</div>
231
+
</div>
232
+
)}
233
+
>
234
+
{chart}
235
+
</ErrorBoundary>
236
+
))}
208
237
</div>
209
-
<div className="flex w-full gap-4">{charts}</div>
210
238
</div>
211
239
)}
212
240
</div>
+6
-1
client/src/webpages/dashboard/overview/OverviewChart.tsx
+6
-1
client/src/webpages/dashboard/overview/OverviewChart.tsx
···
379
379
return obj;
380
380
});
381
381
382
+
const hasNonZeroData = finalChartData.some((row) =>
383
+
uniqueLines.some((line) => (row[line] ?? 0) > 0),
384
+
);
385
+
382
386
const lineChart = uniqueLines.map((name, index) => {
383
387
return (
384
388
<Line
···
442
446
</div>
443
447
</div>
444
448
<div className="z-10 flex flex-col w-full h-full min-h-[400px] pb-4">
445
-
{!loading && finalChartData.length === 0 ? (
449
+
{!loading && (finalChartData.length === 0 || uniqueLines.length === 0 || !hasNonZeroData) ? (
446
450
emptyChart
447
451
) : (
448
452
<ResponsiveContainer width="100%" height={400}>
···
460
464
tick={renderCustomYAxisTick}
461
465
tickLine={false}
462
466
stroke="#d4d4d8"
467
+
domain={[0, (dataMax: number) => dataMax || 1]}
463
468
label={{
464
469
value: `Total ${titleCaseEnumString(metric)}`,
465
470
style: { textAnchor: 'middle' },
+2
-6
client/src/webpages/dashboard/rules/dashboard/visualization/RuleInsightsFilterBy.tsx
+2
-6
client/src/webpages/dashboard/rules/dashboard/visualization/RuleInsightsFilterBy.tsx
···
95
95
};
96
96
}, [filterByMenuVisible]);
97
97
98
-
if (error) {
99
-
throw error;
100
-
}
101
-
102
-
if (loading) {
103
-
return <ComponentLoading />;
98
+
if (error || loading) {
99
+
return loading ? <ComponentLoading /> : null;
104
100
}
105
101
106
102
const toggleColumn = (column: FilterByColumnName) => {
+6
-1
client/src/webpages/dashboard/rules/dashboard/visualization/rulesDashboardInsightsChart.tsx
+6
-1
client/src/webpages/dashboard/rules/dashboard/visualization/rulesDashboardInsightsChart.tsx
···
432
432
</div>
433
433
);
434
434
435
+
const hasNonZeroData = finalChartData.some((row) =>
436
+
uniqueLines.some((line) => (row[line] ?? 0) > 0),
437
+
);
438
+
435
439
const lineChart = uniqueLines.map((name, index) => {
436
440
return (
437
441
<Line
···
536
540
</div>
537
541
</div>
538
542
<div className="z-10 flex flex-col w-full h-full min-h-[400px] pb-4">
539
-
{!loading && finalChartData.length === 0 ? (
543
+
{!loading && (finalChartData.length === 0 || uniqueLines.length === 0 || !hasNonZeroData) ? (
540
544
emptyChart
541
545
) : (
542
546
<ResponsiveContainer width="100%" height={400}>
···
554
558
tick={renderCustomYAxisTick}
555
559
tickLine={false}
556
560
stroke="#d4d4d8"
561
+
domain={[0, (dataMax: number) => dataMax || 1]}
557
562
label={{
558
563
value: `Total Actions`,
559
564
style: { textAnchor: 'middle' },