Mirror of https://github.com/roostorg/coop
github.com/roostorg/coop
[Code Simplification] Remove use of `react-google-charts` and ui fixes (#131)
* [Code Simplification] Remove use of and ui fixes
* fix betterer issue
* fix pre-existing bug
+110
-73
+25
-25
.betterer.results
+25
-25
.betterer.results
···
118
118
"client/src/webpages/dashboard/rules/dashboard/RulesDashboard.tsx:3586802679": [
119
119
[192, 30, 3, "Unexpected any. Specify a different type.", "193409811"]
120
120
],
121
-
"client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx:2418477128": [
122
-
[309, 21, 3, "Unexpected any. Specify a different type.", "193409811"],
123
-
[338, 19, 3, "Unexpected any. Specify a different type.", "193409811"],
124
-
[397, 52, 3, "Unexpected any. Specify a different type.", "193409811"],
125
-
[410, 52, 3, "Unexpected any. Specify a different type.", "193409811"],
126
-
[422, 28, 3, "Unexpected any. Specify a different type.", "193409811"],
127
-
[439, 30, 3, "Unexpected any. Specify a different type.", "193409811"],
128
-
[661, 20, 3, "Unexpected any. Specify a different type.", "193409811"]
121
+
"client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx:3222042515": [
122
+
[311, 21, 3, "Unexpected any. Specify a different type.", "193409811"],
123
+
[340, 19, 3, "Unexpected any. Specify a different type.", "193409811"],
124
+
[399, 52, 3, "Unexpected any. Specify a different type.", "193409811"],
125
+
[412, 52, 3, "Unexpected any. Specify a different type.", "193409811"],
126
+
[424, 28, 3, "Unexpected any. Specify a different type.", "193409811"],
127
+
[441, 30, 3, "Unexpected any. Specify a different type.", "193409811"],
128
+
[663, 20, 3, "Unexpected any. Specify a different type.", "193409811"]
129
129
],
130
130
"client/src/webpages/dashboard/rules/dashboard/visualization/rulesDashboardInsightsChart.tsx:3641428222": [
131
131
[198, 32, 3, "Unexpected any. Specify a different type.", "193409811"],
···
136
136
[135, 52, 3, "Unexpected any. Specify a different type.", "193409811"],
137
137
[147, 28, 3, "Unexpected any. Specify a different type.", "193409811"]
138
138
],
139
-
"client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsSamplesTable.tsx:2418655797": [
139
+
"client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsSamplesTable.tsx:1919031301": [
140
140
[442, 42, 3, "Unexpected any. Specify a different type.", "193409811"],
141
141
[454, 32, 3, "Unexpected any. Specify a different type.", "193409811"]
142
142
],
143
-
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx:1526952710": [
143
+
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx:179927555": [
144
144
[74, 20, 3, "Unexpected any. Specify a different type.", "193409811"],
145
145
[75, 40, 3, "Unexpected any. Specify a different type.", "193409811"],
146
146
[122, 12, 3, "Unexpected any. Specify a different type.", "193409811"],
147
147
[122, 20, 3, "Unexpected any. Specify a different type.", "193409811"],
148
148
[125, 24, 3, "Unexpected any. Specify a different type.", "193409811"],
149
-
[138, 52, 3, "Unexpected any. Specify a different type.", "193409811"],
150
-
[151, 52, 3, "Unexpected any. Specify a different type.", "193409811"]
149
+
[132, 52, 3, "Unexpected any. Specify a different type.", "193409811"],
150
+
[145, 52, 3, "Unexpected any. Specify a different type.", "193409811"]
151
151
],
152
-
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesTable.tsx:1132615281": [
152
+
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesTable.tsx:3800335297": [
153
153
[611, 25, 3, "Unexpected any. Specify a different type.", "193409811"],
154
154
[623, 32, 3, "Unexpected any. Specify a different type.", "193409811"],
155
-
[747, 11, 3, "Unexpected any. Specify a different type.", "193409811"]
155
+
[748, 11, 3, "Unexpected any. Specify a different type.", "193409811"]
156
156
],
157
157
"client/src/webpages/dashboard/rules/rule_form/ReportingRuleForm.tsx:3391496803": [
158
158
[424, 38, 3, "Unexpected any. Specify a different type.", "193409811"],
···
482
482
"client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx:3836324260": [
483
483
[204, 33, 16, "When a function \`x\` is written inline and passed as an argument, it\'s usually better not to write explicit type annotations on \`x\`\'s arguments because the argument types should be able to be inferred, and the inferred type will usually be more accurate than what you\'d write manually. Plus, the inferred type will automatically update.\\n\\nIf the type for x\'s arguments is not being correctly inferred, that suggests an issue with the type definition of the function that \`x\` is being passed to.", "2813373547"]
484
484
],
485
-
"client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx:2418477128": [
486
-
[661, 16, 7, "When a function \`x\` is written inline and passed as an argument, it\'s usually better not to write explicit type annotations on \`x\`\'s arguments because the argument types should be able to be inferred, and the inferred type will usually be more accurate than what you\'d write manually. Plus, the inferred type will automatically update.\\n\\nIf the type for x\'s arguments is not being correctly inferred, that suggests an issue with the type definition of the function that \`x\` is being passed to.", "2339939476"]
485
+
"client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx:3222042515": [
486
+
[663, 16, 7, "When a function \`x\` is written inline and passed as an argument, it\'s usually better not to write explicit type annotations on \`x\`\'s arguments because the argument types should be able to be inferred, and the inferred type will usually be more accurate than what you\'d write manually. Plus, the inferred type will automatically update.\\n\\nIf the type for x\'s arguments is not being correctly inferred, that suggests an issue with the type definition of the function that \`x\` is being passed to.", "2339939476"]
487
487
],
488
-
"client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsSamplesTable.tsx:2418655797": [
488
+
"client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsSamplesTable.tsx:1919031301": [
489
489
[239, 15, 18, "When a function \`x\` is written inline and passed as an argument, it\'s usually better not to write explicit type annotations on \`x\`\'s arguments because the argument types should be able to be inferred, and the inferred type will usually be more accurate than what you\'d write manually. Plus, the inferred type will automatically update.\\n\\nIf the type for x\'s arguments is not being correctly inferred, that suggests an issue with the type definition of the function that \`x\` is being passed to.", "4144316489"]
490
490
],
491
-
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx:1526952710": [
491
+
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx:179927555": [
492
492
[75, 26, 17, "When a function \`x\` is written inline and passed as an argument, it\'s usually better not to write explicit type annotations on \`x\`\'s arguments because the argument types should be able to be inferred, and the inferred type will usually be more accurate than what you\'d write manually. Plus, the inferred type will automatically update.\\n\\nIf the type for x\'s arguments is not being correctly inferred, that suggests an issue with the type definition of the function that \`x\` is being passed to.", "1029763998"],
493
493
[122, 9, 6, "When a function \`x\` is written inline and passed as an argument, it\'s usually better not to write explicit type annotations on \`x\`\'s arguments because the argument types should be able to be inferred, and the inferred type will usually be more accurate than what you\'d write manually. Plus, the inferred type will automatically update.\\n\\nIf the type for x\'s arguments is not being correctly inferred, that suggests an issue with the type definition of the function that \`x\` is being passed to.", "1412855912"],
494
494
[122, 17, 6, "When a function \`x\` is written inline and passed as an argument, it\'s usually better not to write explicit type annotations on \`x\`\'s arguments because the argument types should be able to be inferred, and the inferred type will usually be more accurate than what you\'d write manually. Plus, the inferred type will automatically update.\\n\\nIf the type for x\'s arguments is not being correctly inferred, that suggests an issue with the type definition of the function that \`x\` is being passed to.", "1449682699"],
495
495
[125, 12, 15, "When a function \`x\` is written inline and passed as an argument, it\'s usually better not to write explicit type annotations on \`x\`\'s arguments because the argument types should be able to be inferred, and the inferred type will usually be more accurate than what you\'d write manually. Plus, the inferred type will automatically update.\\n\\nIf the type for x\'s arguments is not being correctly inferred, that suggests an issue with the type definition of the function that \`x\` is being passed to.", "2927082151"]
496
496
],
497
-
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesTable.tsx:1132615281": [
497
+
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesTable.tsx:3800335297": [
498
498
[404, 15, 18, "When a function \`x\` is written inline and passed as an argument, it\'s usually better not to write explicit type annotations on \`x\`\'s arguments because the argument types should be able to be inferred, and the inferred type will usually be more accurate than what you\'d write manually. Plus, the inferred type will automatically update.\\n\\nIf the type for x\'s arguments is not being correctly inferred, that suggests an issue with the type definition of the function that \`x\` is being passed to.", "4144316489"]
499
499
],
500
500
"client/src/webpages/dashboard/rules/rule_form/RuleForm.tsx:1069542000": [
···
651
651
"client/src/webpages/dashboard/rules/dashboard/RulesDashboard.tsx:3586802679": [
652
652
[8, 0, 76, "\'@ant-design/icons\' import is restricted from being used. AntDesign icons are now deprecated in our codebase. Please use line icons instead.", "4151994019"]
653
653
],
654
-
"client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx:2418477128": [
654
+
"client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx:3222042515": [
655
655
[5, 0, 113, "\'@ant-design/icons\' import is restricted from being used. AntDesign icons are now deprecated in our codebase. Please use line icons instead.", "3403673047"]
656
656
],
657
657
"client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsActionsChart.tsx:1076126041": [
658
658
[2, 0, 72, "\'@ant-design/icons\' import is restricted from being used. AntDesign icons are now deprecated in our codebase. Please use line icons instead.", "87078707"]
659
659
],
660
-
"client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsSamplesTable.tsx:2418655797": [
660
+
"client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsSamplesTable.tsx:1919031301": [
661
661
[0, 0, 92, "\'@ant-design/icons\' import is restricted from being used. AntDesign icons are now deprecated in our codebase. Please use line icons instead.", "3155850297"]
662
662
],
663
-
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx:1526952710": [
663
+
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx:179927555": [
664
664
[3, 0, 72, "\'@ant-design/icons\' import is restricted from being used. AntDesign icons are now deprecated in our codebase. Please use line icons instead.", "87078707"]
665
665
],
666
666
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesPlayVideoButton.tsx:3799970987": [
667
667
[0, 0, 53, "\'@ant-design/icons\' import is restricted from being used. AntDesign icons are now deprecated in our codebase. Please use line icons instead.", "1828321615"]
668
668
],
669
-
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesTable.tsx:1132615281": [
669
+
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesTable.tsx:3800335297": [
670
670
[0, 0, 92, "\'@ant-design/icons\' import is restricted from being used. AntDesign icons are now deprecated in our codebase. Please use line icons instead.", "3155850297"]
671
671
],
672
672
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesVideoModal.tsx:2468150091": [
···
826
826
[0, 0, 87, "\'@/icons/lni/Direction/chevron-down.svg\' import is restricted from being used by a pattern.", "3761457464"],
827
827
[1, 0, 83, "\'@/icons/lni/Direction/chevron-up.svg\' import is restricted from being used by a pattern.", "1296196504"]
828
828
],
829
-
"client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx:2418477128": [
829
+
"client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx:3222042515": [
830
830
[3, 0, 62, "\'@/icons\' import is restricted from being used.", "469112768"]
831
831
],
832
832
"client/src/webpages/dashboard/rules/dashboard/visualization/rulesDashboardInsightsChart.tsx:3641428222": [
···
836
836
"client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsActionsChart.tsx:1076126041": [
837
837
[1, 0, 43, "\'@/icons\' import is restricted from being used.", "3049589739"]
838
838
],
839
-
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx:1526952710": [
839
+
"client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx:179927555": [
840
840
[1, 0, 62, "\'@/icons\' import is restricted from being used.", "469112768"]
841
841
],
842
842
"client/src/webpages/dashboard/rules/rule_form/ReportingRuleForm.tsx:3391496803": [
-10
client/package-lock.json
-10
client/package-lock.json
···
64
64
"react-csv": "^2.2.2",
65
65
"react-day-picker": "^8.9.1",
66
66
"react-dom": "^18.2.0",
67
-
"react-google-charts": "^4.0.0",
68
67
"react-helmet-async": "^2.0.3",
69
68
"react-markdown": "^9.0.1",
70
69
"react-player": "^2.10.1",
···
24621
24620
"version": "3.2.2",
24622
24621
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
24623
24622
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
24624
-
},
24625
-
"node_modules/react-google-charts": {
24626
-
"version": "4.0.0",
24627
-
"resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.0.tgz",
24628
-
"integrity": "sha512-9OG0EkBb9JerKEPQYdhmAXnhGLzOdOHOPS9j7l+P1a3z1kcmq9mGDa7PUoX/VQUY4IjZl2/81nsO4o+1cuYsuw==",
24629
-
"peerDependencies": {
24630
-
"react": ">=16.3.0",
24631
-
"react-dom": ">=16.3.0"
24632
-
}
24633
24623
},
24634
24624
"node_modules/react-helmet-async": {
24635
24625
"version": "2.0.3",
-1
client/package.json
-1
client/package.json
+72
-20
client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx
+72
-20
client/src/webpages/dashboard/rules/dashboard/visualization/RulesDashboardInsights.tsx
···
25
25
import sumBy from 'lodash/sumBy';
26
26
import union from 'lodash/union';
27
27
import without from 'lodash/without';
28
-
import moment from 'moment';
28
+
import { format, parseISO } from 'date-fns';
29
29
import React, { ReactNode, useCallback, useMemo, useState } from 'react';
30
-
import { Chart } from 'react-google-charts';
31
30
import {
32
31
Area,
33
32
Bar,
34
33
BarChart,
35
34
CartesianGrid,
35
+
Cell,
36
36
ComposedChart,
37
37
Legend,
38
38
Line,
39
+
Pie,
40
+
PieChart,
39
41
ReferenceLine,
40
42
ResponsiveContainer,
41
43
Tooltip,
···
403
405
fill="#71717a"
404
406
className="pt-3 text-slate-500"
405
407
>
406
-
{moment(payload.value).format('MM/DD/YY')}
408
+
{format(parseISO(payload.value), 'MM/dd/yy')}
407
409
</text>
408
410
);
409
411
};
···
472
474
return (
473
475
<div className="flex flex-col bg-white rounded-lg shadow text-start">
474
476
<div className="p-3 text-white rounded-t-lg bg-primary">
475
-
{moment(label).format('MM/DD/YY')}
477
+
{format(parseISO(label), 'MM/dd/yy')}
476
478
</div>
477
479
{data.length > 1 && (
478
480
<div className="flex flex-col">
···
667
669
});
668
670
return curr;
669
671
},
670
-
{} as { [k: string]: string },
672
+
{} as { [k: string]: number },
671
673
);
672
-
const pieChartData = Object.keys(combinedChartData).map((category) => [
673
-
category,
674
-
combinedChartData[category],
675
-
]);
674
+
const pieChartData = Object.keys(combinedChartData).map((category) => ({
675
+
name: category,
676
+
value: combinedChartData[category],
677
+
}));
678
+
679
+
const RADIAN = Math.PI / 180;
680
+
const renderLabel = ({
681
+
cx,
682
+
cy,
683
+
midAngle,
684
+
innerRadius,
685
+
outerRadius,
686
+
percent,
687
+
}: {
688
+
cx: number;
689
+
cy: number;
690
+
midAngle: number;
691
+
innerRadius: number;
692
+
outerRadius: number;
693
+
percent: number;
694
+
}) => {
695
+
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
696
+
const x = cx + radius * Math.cos(-midAngle * RADIAN);
697
+
const y = cy + radius * Math.sin(-midAngle * RADIAN);
698
+
return (
699
+
<text
700
+
x={x}
701
+
y={y}
702
+
fill="white"
703
+
textAnchor="middle"
704
+
dominantBaseline="central"
705
+
fontSize={12}
706
+
fontWeight={600}
707
+
>
708
+
{`${(percent * 100).toFixed(0)}%`}
709
+
</text>
710
+
);
711
+
};
676
712
677
713
return (
678
-
<Chart
679
-
chartType="PieChart"
680
-
data={[['category', 'total'], ...pieChartData]}
681
-
options={{
682
-
pieSliceText: 'percentage',
683
-
pieStartAngle: 100,
684
-
pieHole: 0.5,
685
-
}}
686
-
width={'100%'}
687
-
height={'100%'}
688
-
/>
714
+
<ResponsiveContainer width="100%" height="100%">
715
+
<PieChart>
716
+
<Pie
717
+
dataKey="value"
718
+
nameKey="name"
719
+
data={pieChartData}
720
+
cx="50%"
721
+
cy="50%"
722
+
startAngle={100}
723
+
endAngle={100 + 360}
724
+
innerRadius="50%"
725
+
outerRadius="80%"
726
+
label={renderLabel}
727
+
labelLine={false}
728
+
isAnimationActive={false}
729
+
>
730
+
{pieChartData.map((_, index) => (
731
+
<Cell
732
+
key={`cell-${index}`}
733
+
fill={chartColors[index % chartColors.length]}
734
+
/>
735
+
))}
736
+
</Pie>
737
+
<Tooltip />
738
+
<Legend />
739
+
</PieChart>
740
+
</ResponsiveContainer>
689
741
);
690
742
}, [sortedChartData]);
691
743
+3
-2
client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsSamplesTable.tsx
+3
-2
client/src/webpages/dashboard/rules/info/insights/ReportingRuleInsightsSamplesTable.tsx
···
532
532
) : tableData?.length === 0 ? (
533
533
noSamples
534
534
) : (
535
-
<div className="flex">
536
-
<div className="rounded-[5px] border-solid border-0 border-b border-[#f0f0f0] max-h-[1500px] overflow-scroll scrollbar-hide">
535
+
<div className="flex w-full">
536
+
<div className="w-full rounded-[5px] border-solid border-0 border-b border-[#f0f0f0] max-h-[1500px] overflow-scroll scrollbar-hide">
537
537
<Table
538
538
// @ts-ignore
539
539
columns={columns}
540
540
data={tableData}
541
541
onSelectRow={onSelectRow}
542
+
containerClassName="w-full"
542
543
/>
543
544
</div>
544
545
{detailViewData.visible && detailViewData.item && (
+7
-13
client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx
+7
-13
client/src/webpages/dashboard/rules/info/insights/RuleInsightsActionsChart.tsx
···
7
7
import orderBy from 'lodash/orderBy';
8
8
import sortBy from 'lodash/sortBy';
9
9
import sumBy from 'lodash/sumBy';
10
-
import moment from 'moment';
10
+
import { format, parseISO } from 'date-fns';
11
11
import { ReactNode, useCallback, useMemo, useState } from 'react';
12
12
import {
13
13
Bar,
···
123
123
(a: any, b: any) =>
124
124
new Date(a.date).getTime() - new Date(b.date).getTime(),
125
125
)
126
-
.map((actionData: any) => {
127
-
// change actionData.date format from YYYY-MM-DD to MM/DD
128
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
129
-
const [year, month, date] = actionData.date.split('-');
130
-
131
-
return {
132
-
date: `${month}/${date}/${year.slice(-2)}`,
133
-
totalMatches: actionData.totalMatches,
134
-
totalRequests: actionData.totalRequests,
135
-
};
136
-
});
126
+
.map((actionData: any) => ({
127
+
date: format(parseISO(actionData.date), 'MM/dd/yy'),
128
+
totalMatches: actionData.totalMatches,
129
+
totalRequests: actionData.totalRequests,
130
+
}));
137
131
}, [filteredPassRateData]);
138
132
139
133
const renderCustomXAxisTick = ({ x, y, payload }: any) => {
···
177
171
return (
178
172
<div className="flex flex-col bg-white rounded-lg shadow text-start">
179
173
<div className="p-3 text-white rounded-t-lg bg-primary">
180
-
{moment(label).format('MM/DD/YY')}
174
+
{label}
181
175
</div>
182
176
{data.length > 1 && (
183
177
<div className="flex flex-col">
+3
-2
client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesTable.tsx
+3
-2
client/src/webpages/dashboard/rules/info/insights/RuleInsightsSamplesTable.tsx
···
700
700
) : tableData?.length === 0 ? (
701
701
noSamples
702
702
) : (
703
-
<div className="flex">
704
-
<div className="rounded-[5px] border-solid border-0 border-b border-[#f0f0f0] max-h-[1500px] overflow-scroll scrollbar-hide">
703
+
<div className="flex w-full">
704
+
<div className="w-full rounded-[5px] border-solid border-0 border-b border-[#f0f0f0] max-h-[1500px] overflow-scroll scrollbar-hide">
705
705
<Table
706
706
// @ts-ignore
707
707
columns={columns}
708
708
data={tableData!}
709
709
onSelectRow={onSelectRow}
710
+
containerClassName="w-full"
710
711
/>
711
712
</div>
712
713
{detailViewData.visible && detailViewData.item && (