Skip to content

Commit 690ae86

Browse files
Lucki2gLucki2g
committed
feat: additional pie charts with feature and attribute distributions
1 parent ed96a67 commit 690ae86

File tree

1 file changed

+139
-2
lines changed

1 file changed

+139
-2
lines changed

‎Website/components/insightsview/overview/InsightsOverviewView.tsx‎

Lines changed: 139 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ComponentIcon, InfoIcon, ProcessesIcon, SolutionIcon, WarningIcon } fro
44
import { generateLiquidCheeseSVG } from "@/lib/svgart";
55
import { Box, Grid, Paper, Stack, Tooltip, Typography, useTheme } from "@mui/material";
66
import { ResponsiveBar } from "@nivo/bar";
7+
import { ResponsivePie } from "@nivo/pie";
78
import { useMemo } from "react";
89

910
interface InsightsOverviewViewProps {
@@ -66,6 +67,42 @@ const InsightsOverviewView = ({ }: InsightsOverviewViewProps) => {
6667
];
6768
}, [groups]);
6869

70+
const entityFeaturesData = useMemo(() => {
71+
const allEntities = groups.flatMap(group => group.Entities);
72+
73+
const auditEnabled = allEntities.filter(entity => entity.IsAuditEnabled).length;
74+
const auditDisabled = allEntities.filter(entity => !entity.IsAuditEnabled).length;
75+
const activities = allEntities.filter(entity => entity.IsActivity).length;
76+
const notesEnabled = allEntities.filter(entity => entity.IsNotesEnabled).length;
77+
const notesDisabled = allEntities.filter(entity => !entity.IsNotesEnabled).length;
78+
79+
return [
80+
{ id: 'Audit Enabled', label: 'Audit Enabled', value: auditEnabled },
81+
{ id: 'Audit Disabled', label: 'Audit Disabled', value: auditDisabled },
82+
{ id: 'Activities', label: 'Activities', value: activities },
83+
{ id: 'Notes Enabled', label: 'Notes Enabled', value: notesEnabled },
84+
{ id: 'Notes Disabled', label: 'Notes Disabled', value: notesDisabled },
85+
].filter(item => item.value > 0); // Only show categories with values
86+
}, [groups, theme.palette]);
87+
88+
const attributeTypeData = useMemo(() => {
89+
const allEntities = groups.flatMap(group => group.Entities);
90+
const allAttributes = allEntities.flatMap(entity => entity.Attributes);
91+
92+
// Count attribute types
93+
const attributeTypeCounts = allAttributes.reduce((acc, attr) => {
94+
const type = attr.AttributeType;
95+
acc[type] = (acc[type] || 0) + 1;
96+
return acc;
97+
}, {} as Record<string, number>);
98+
99+
return Object.entries(attributeTypeCounts).map(([type, count], index) => ({
100+
id: type.replace('Attribute', ''),
101+
label: type.replace('Attribute', ''),
102+
value: count
103+
}));
104+
}, [groups, theme.palette]);
105+
69106
return (
70107
<Grid container spacing={4}>
71108
<Grid size={{ xs: 12, md: 7 }}>
@@ -180,7 +217,7 @@ const InsightsOverviewView = ({ }: InsightsOverviewViewProps) => {
180217
layout="vertical"
181218
valueScale={{ type: 'linear' }}
182219
indexScale={{ type: 'band', round: true }}
183-
colors={[theme.palette.primary.main, theme.palette.secondary.main]}
220+
colors={{ scheme: "blues" }}
184221
borderRadius={4}
185222
borderWidth={1}
186223
borderColor={{ from: 'color', modifiers: [['darker', 0.2]] }}
@@ -189,7 +226,7 @@ const InsightsOverviewView = ({ }: InsightsOverviewViewProps) => {
189226
enableLabel={true}
190227
labelSkipWidth={12}
191228
labelSkipHeight={12}
192-
labelTextColor={{ from: 'color', modifiers: [['brighter', 3]] }}
229+
labelTextColor={{ from: 'color', modifiers: [['darker', 3]] }}
193230
legends={[
194231
{
195232
dataFrom: 'keys',
@@ -314,6 +351,106 @@ const InsightsOverviewView = ({ }: InsightsOverviewViewProps) => {
314351
/>
315352
</Box>
316353
</Paper>
354+
</Grid>
355+
356+
<Grid size={{ xs: 12, sm: 12, md: 6 }}>
357+
<Paper elevation={2} className="p-6 rounded-2xl">
358+
<Typography variant="h6" className="mb-4" sx={{ color: 'text.primary' }}>
359+
Entity Features Distribution
360+
</Typography>
361+
<Box sx={{ height: 400 }}>
362+
<ResponsivePie
363+
data={entityFeaturesData}
364+
margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
365+
innerRadius={0.5}
366+
padAngle={0.7}
367+
cornerRadius={3}
368+
activeOuterRadiusOffset={8}
369+
colors={{ scheme: "blues" }}
370+
borderWidth={1}
371+
borderColor={{
372+
from: 'color',
373+
modifiers: [
374+
['darker', 0.2]
375+
]
376+
}}
377+
arcLinkLabelsSkipAngle={10}
378+
arcLinkLabelsTextColor={theme.palette.text.primary}
379+
arcLinkLabelsThickness={2}
380+
arcLinkLabelsColor={{ from: 'color' }}
381+
arcLabelsSkipAngle={10}
382+
arcLabelsTextColor={{
383+
from: 'color',
384+
modifiers: [
385+
['darker', 2]
386+
]
387+
}}
388+
theme={{
389+
background: 'transparent',
390+
text: {
391+
fontSize: 12,
392+
fill: theme.palette.text.primary,
393+
},
394+
tooltip: {
395+
container: {
396+
background: theme.palette.background.paper,
397+
color: theme.palette.text.primary,
398+
}
399+
}
400+
}}
401+
/>
402+
</Box>
403+
</Paper>
404+
</Grid>
405+
406+
<Grid size={{ xs: 12, sm: 12, md: 6 }}>
407+
<Paper elevation={2} className="p-6 rounded-2xl">
408+
<Typography variant="h6" className="mb-4" sx={{ color: 'text.primary' }}>
409+
Attribute Types Distribution
410+
</Typography>
411+
<Box sx={{ height: 400 }}>
412+
<ResponsivePie
413+
data={attributeTypeData}
414+
margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
415+
innerRadius={0.5}
416+
padAngle={0.7}
417+
cornerRadius={3}
418+
activeOuterRadiusOffset={8}
419+
colors={{ scheme: "blues" }}
420+
borderWidth={1}
421+
borderColor={{
422+
from: 'color',
423+
modifiers: [
424+
['darker', 0.2]
425+
]
426+
}}
427+
arcLinkLabelsSkipAngle={10}
428+
arcLinkLabelsTextColor={theme.palette.text.primary}
429+
arcLinkLabelsThickness={2}
430+
arcLinkLabelsColor={{ from: 'color' }}
431+
arcLabelsSkipAngle={10}
432+
arcLabelsTextColor={{
433+
from: 'color',
434+
modifiers: [
435+
['darker', 2]
436+
]
437+
}}
438+
theme={{
439+
background: 'transparent',
440+
text: {
441+
fontSize: 12,
442+
fill: theme.palette.text.primary,
443+
},
444+
tooltip: {
445+
container: {
446+
background: theme.palette.background.paper,
447+
color: theme.palette.text.primary,
448+
}
449+
}
450+
}}
451+
/>
452+
</Box>
453+
</Paper>
317454
</Grid>
318455
</Grid>
319456
)

0 commit comments

Comments
 (0)