Skip to content

Commit 2a3b39b

Browse files
sudhirvermaasa1997
sudhirverma
and
asa1997
authored
Syncing changes for release 0.30.4
* Fixed issue with interpreter count for cyberseceval4 (#750) * added info for fix pie chart (#751) * added info for fix pie chart * Fix CSS and text --------- Co-authored-by: Arun Suresh <58501088+asa1997@users.noreply.github.com>
1 parent c43a25e commit 2a3b39b

7 files changed

Lines changed: 285 additions & 172 deletions

File tree

‎package-lock.json‎

Lines changed: 0 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/apiDetailsConfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313
"token": ""
1414
},
1515
"activeTool": "github",
16-
"version": "0.30.3",
16+
"version": "0.30.4",
1717
"labName": "Be-Secure Community Lab"
1818
}

‎src/components/Charts/PieChart/index.tsx‎

Lines changed: 134 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,164 @@
1-
2-
31
import * as React from "react";
4-
52
import Card from "@mui/material/Card";
6-
73
import ReactApexChart from "react-apexcharts";
4+
import ApexCharts from "apexcharts";
85
import { useTheme } from "@mui/material/styles";
96
import useChart from "./useChart";
107
import MKBox from "../../MKBox";
11-
import { fNumber } from "../../../utils/formatNumber";
128
import { Typography } from "@mui/material";
13-
import MKTypography from "../../MKTypography";
149

1510
function PieChart({ title, chartColors, chartData, height }: any) {
1611
const theme = useTheme();
12+
const chartId = `${title}-chart`;
1713

18-
const chartLabels = chartData.map((i: { label: any }) => i.label);
19-
20-
const chartSeries = chartData.map((i: { value: any }) => i.value);
14+
const chartLabels = chartData.map((i: any) => i.label);
15+
const chartSeries = chartData.map((i: any) => i.value);
2116

2217
const chartOptions = useChart({
18+
chart: {
19+
id: chartId
20+
},
21+
2322
colors: chartColors,
2423
labels: chartLabels,
24+
25+
legend: { show: false },
26+
2527
stroke: { colors: [theme.palette.background.paper] },
26-
legend: { position: "right", offsetY: -20 },
27-
dataLabels: { enabled: true, dropShadow: { enabled: false } },
28-
tooltip: {
29-
fillSeriesColor: false,
30-
y: {
31-
formatter: (seriesName: any) => fNumber(seriesName),
32-
title: {
33-
formatter: (seriesName: any) => `${seriesName}`
34-
}
28+
29+
dataLabels: {
30+
enabled: true,
31+
dropShadow: { enabled: false }
32+
},
33+
34+
states: {
35+
hover: {
36+
filter: { type: "none" }
37+
},
38+
active: {
39+
filter: { type: "none" }
40+
},
41+
inactive: {
42+
opacity: 0.25
3543
}
3644
},
45+
3746
plotOptions: {
38-
pie: { donut: { labels: { show: false } } }
47+
pie: {
48+
customScale: 1,
49+
donut: {
50+
labels: { show: false }
51+
}
52+
}
3953
}
4054
});
4155

56+
const highlightSlice = (index: number) => {
57+
ApexCharts.exec(chartId, "highlightSeries", index);
58+
};
59+
60+
const resetSlice = () => {
61+
ApexCharts.exec(chartId, "resetSeries");
62+
};
63+
4264
return (
43-
<Card>
44-
<MKBox pt={ 1 } pb={ 1 } px={ 1 }>
45-
{
46-
(title === "Risk Posture") ? <MKTypography
47-
variant="h6"
48-
fontWeight="bold"
49-
color="text"
50-
textTransform="capitalize"
51-
style={ {
52-
fontSize: "15px",
65+
<Card sx={{ height: "244px", display: "flex", flexDirection: "column" }}>
66+
<MKBox pt={1} pb={1} px={1} sx={{ flex: 1 }}>
67+
68+
{/* TITLE */}
69+
<Typography color="black" fontSize="20px" variant="h6" pl={2}>
70+
{title}
71+
</Typography>
72+
73+
<MKBox
74+
sx={{
75+
display: "flex",
76+
alignItems: "center",
77+
height: height ?? 195
78+
}}
79+
>
80+
81+
{/* PIE CHART */}
82+
<MKBox
83+
sx={{
84+
width: "60%",
5385
display: "flex",
54-
position: "relative",
55-
left: "-44px",
56-
placeContent: "center",
57-
} }
86+
justifyContent: "center"
87+
}}
5888
>
59-
{ title }
60-
</MKTypography> : <Typography
61-
display="flex"
62-
justifyContent="left"
63-
alignItems="left"
64-
color="black"
65-
fontSize="20px"
66-
variant="h6"
67-
pl={ 2 }
68-
textTransform="capitalize"
89+
<ReactApexChart
90+
type="pie"
91+
series={chartSeries}
92+
options={chartOptions}
93+
height={height ?? 195}
94+
/>
95+
</MKBox>
96+
97+
{/* LEGEND */}
98+
<MKBox
99+
sx={{
100+
width: "40%",
101+
maxHeight: (height ?? 185) - 5,
102+
overflowY: "auto",
103+
pl: 2,
104+
pr: 1,
105+
pb: 1.5
106+
}}
69107
>
70-
{ title }
71-
</Typography>
72-
}
108+
{chartLabels.map((label: string, index: number) => (
109+
<MKBox
110+
key={index}
111+
onMouseEnter={() => highlightSlice(index)}
112+
onMouseLeave={resetSlice}
113+
sx={{
114+
display: "flex",
115+
alignItems: "center",
116+
gap: "8px",
117+
mb: 1.3,
118+
fontSize: "14px",
119+
cursor: "pointer",
120+
color: "#444",
121+
122+
"& .legend-text": {
123+
display: "block",
124+
maxWidth: "110px",
125+
whiteSpace: "nowrap",
126+
overflow: "hidden",
127+
textOverflow: "ellipsis",
128+
transition: "all 0.25s ease"
129+
},
130+
131+
"&:hover .legend-text": {
132+
whiteSpace: "normal",
133+
overflow: "visible",
134+
textOverflow: "unset",
135+
maxWidth: "100%"
136+
}
137+
}}
138+
>
139+
140+
{/* COLOR DOT */}
141+
<MKBox
142+
sx={{
143+
width: 12,
144+
height: 12,
145+
borderRadius: "50%",
146+
backgroundColor: chartColors[index],
147+
flexShrink: 0
148+
}}
149+
/>
150+
151+
{/* LEGEND TEXT */}
152+
<span className="legend-text">
153+
{label}
154+
</span>
155+
156+
</MKBox>
157+
))}
158+
</MKBox>
159+
160+
</MKBox>
73161

74-
<ReactApexChart
75-
type="pie"
76-
series={ chartSeries }
77-
options={ chartOptions }
78-
height={ height ?? 195 }
79-
/>
80162
</MKBox>
81163
</Card>
82164
);

‎src/pages/ModelOfInterest/index.tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,9 @@ function ModelOfInterest() {
8686

8787
return (
8888
<>
89-
<DefaultNavbar routes={ routes } sticky />
89+
<DefaultNavbar routes={routes} sticky />
9090

91-
<MKBox pt={ 10 } sx={ { mx: { xs: 2, lg: 3 } } }>
91+
<MKBox pt={10} sx={{ mx: { xs: 2, lg: 3 } }}>
9292
<MKTypography variant="h3" color="black">
9393
Models of Interest
9494
</MKTypography>
@@ -99,7 +99,7 @@ function ModelOfInterest() {
9999
paddingTop="2px"
100100
fontSize="18px"
101101
width="100%"
102-
style={ { fontWeight: "lighter" } }
102+
style={{ fontWeight: "lighter" }}
103103
// fontWeight="lighter"
104104
>
105105
Gain visibility into vulnerabilities and security gaps within popular
@@ -110,61 +110,62 @@ function ModelOfInterest() {
110110
open source machine learning.
111111
</MKTypography>
112112
</MKBox>
113-
<MKBox pt={ 1 } sx={ { mx: { xs: 2, lg: 3 } } }>
114-
<Grid container spacing={ 3 }>
115-
<Grid item xs={ 12 } sm={ 12 } md={ 12 } lg={ 12 } xl={ 4 }>
113+
<MKBox pt={1} sx={{ mx: { xs: 2, lg: 3 } }}>
114+
<Grid container spacing={1}>
115+
<Grid item xs={12} sm={12} md={12} lg={12} xl={4}>
116116
<ProjectCount
117117
title="models tracked"
118-
total={ report.length }
118+
total={report.length}
119119
color="success"
120120
icon={
121121
<img
122-
style={ { width: "140px", top: "58px", position: "absolute" } }
122+
style={{ width: "140px", top: "58px", position: "absolute" }}
123123
alt="icon"
124-
src={ networkIcon }
124+
src={networkIcon}
125125
/>
126126
}
127-
sx={ { width: "100%", height: "244px" } }
127+
sx={{ width: "100%", height: "244px" }}
128128
/>
129129
</Grid>
130-
<Grid item xs={ 12 } sm={ 12 } md={ 12 } lg={ 12 } xl={ 4 }>
130+
<Grid item xs={12} sm={12} md={12} lg={12} xl={4}>
131131
<PieChart
132132
title="Model Type"
133-
chartData={ modelType }
134-
chartColors={ [
133+
chartData={modelType}
134+
chartColors={[
135135
theme.palette.primary.main,
136136
theme.palette.info.main,
137137
theme.palette.warning.main,
138138
theme.palette.error.main,
139139
theme.palette.success.main,
140140
theme.palette.secondary.main
141-
] }
141+
]}
142142
/>
143143
</Grid>
144-
<Grid item xs={ 12 } sm={ 12 } md={ 12 } lg={ 12 } xl={ 4 }>
144+
<Grid item xs={12} sm={12} md={12} lg={12} xl={4}>
145145
<PieChart
146146
title="Risk Analysis"
147-
chartData={ riskAnalysis }
148-
chartColors={ [
147+
chartData={riskAnalysis}
148+
chartColors={[
149149
theme.palette.primary.main,
150150
theme.palette.info.main,
151151
theme.palette.warning.main,
152152
theme.palette.error.main,
153153
theme.palette.success.main,
154-
theme.palette.secondary.main
155-
] }
154+
theme.palette.secondary.main,
155+
theme.palette.secondary.dark
156+
]}
156157
/>
157158
</Grid>
158159
</Grid>
159160
</MKBox>
160161
<ScrollableTabsButtonVisibleML
161-
filter={ filterData }
162-
setFilter={ setFilterData }
162+
filter={filterData}
163+
setFilter={setFilterData}
163164
/>
164-
<MKBox pt={ 2 } sx={ { mx: { xs: 2, lg: 3 } } }>
165+
<MKBox pt={2} sx={{ mx: { xs: 2, lg: 3 } }}>
165166
<Card>
166167
<MKBox>
167-
<ModelDisplay selectedFilter={ filterData } />
168+
<ModelDisplay selectedFilter={filterData} />
168169
</MKBox>
169170
</Card>
170171
</MKBox>

0 commit comments

Comments
 (0)