Skip to content

Commit fb98ecc

Browse files
Lucki2gLucki2g
authored
Merge pull request #67 from delegateas/features/insights-patch-01
Insights Minor Patch
2 parents 2186c61 + 9b1aff8 commit fb98ecc

File tree

2 files changed

+138
-3
lines changed

2 files changed

+138
-3
lines changed

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

Lines changed: 137 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]);
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]) => ({
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,104 @@ 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+
arcLinkLabelsTextColor={theme.palette.text.primary}
378+
arcLinkLabelsThickness={2}
379+
arcLinkLabelsColor={{ from: 'color' }}
380+
arcLabelsSkipAngle={10}
381+
arcLabelsTextColor={{
382+
from: 'color',
383+
modifiers: [
384+
['darker', 2]
385+
]
386+
}}
387+
theme={{
388+
background: 'transparent',
389+
text: {
390+
fontSize: 12,
391+
fill: theme.palette.text.primary,
392+
},
393+
tooltip: {
394+
container: {
395+
background: theme.palette.background.paper,
396+
color: theme.palette.text.primary,
397+
}
398+
}
399+
}}
400+
/>
401+
</Box>
402+
</Paper>
403+
</Grid>
404+
405+
<Grid size={{ xs: 12, sm: 12, md: 6 }}>
406+
<Paper elevation={2} className="p-6 rounded-2xl">
407+
<Typography variant="h6" className="mb-4" sx={{ color: 'text.primary' }}>
408+
Attribute Types Distribution
409+
</Typography>
410+
<Box sx={{ height: 400 }}>
411+
<ResponsivePie
412+
data={attributeTypeData}
413+
margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
414+
innerRadius={0.5}
415+
padAngle={0.7}
416+
cornerRadius={3}
417+
activeOuterRadiusOffset={8}
418+
colors={{ scheme: "blues" }}
419+
borderWidth={1}
420+
borderColor={{
421+
from: 'color',
422+
modifiers: [
423+
['darker', 0.2]
424+
]
425+
}}
426+
arcLinkLabelsTextColor={theme.palette.text.primary}
427+
arcLinkLabelsThickness={2}
428+
arcLinkLabelsColor={{ from: 'color' }}
429+
arcLabelsSkipAngle={10}
430+
arcLabelsTextColor={{
431+
from: 'color',
432+
modifiers: [
433+
['darker', 2]
434+
]
435+
}}
436+
theme={{
437+
background: 'transparent',
438+
text: {
439+
fontSize: 12,
440+
fill: theme.palette.text.primary,
441+
},
442+
tooltip: {
443+
container: {
444+
background: theme.palette.background.paper,
445+
color: theme.palette.text.primary,
446+
}
447+
}
448+
}}
449+
/>
450+
</Box>
451+
</Paper>
317452
</Grid>
318453
</Grid>
319454
)

‎Website/components/shared/elements/InfoCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const InfoCard = ({
4646
return (
4747
<Paper elevation={2} className="p-4 flex rounded-2xl items-center justify-between overflow-hidden">
4848
<Box className="flex flex-col ml-4">
49-
<Typography variant="subtitle1" sx={{ color: 'text.secondary' }}>
49+
<Typography variant="subtitle1" className="text-nowrap" sx={{ color: 'text.secondary' }}>
5050
{title}
5151
</Typography>
5252
<Typography variant="h4" className='py-2 font-semibold' sx={{ color: 'text.primary' }}>

0 commit comments

Comments
 (0)