Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-05 17:53:12 +02:00
Code Issues Projects Releases Wiki Activity

Colors

Browse Source
This commit is contained in:
sjaanus 2025-07-29 16:07:05 +03:00
parent dc7a231b1a
commit ded566b2fe
No known key found for this signature in database
GPG Key ID: 20E007C0248BA7FF
2 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
View File

@ -142,7 +142,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
const flagTypeDatasets = Array.from(allFlagTypes).map(
(flagType, index) => ({
label: `Created: ${flagType}`,
label: flagType,
data: weeks,
backgroundColor: flagTypeColors[index % flagTypeColors.length],
borderColor: flagTypeColors[index % flagTypeColors.length],
@ -157,6 +157,8 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
}),
);
const flagTypeNames = Array.from(allFlagTypes);
return {
datasets: [
{
@ -164,10 +166,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
data: weeks,
backgroundColor: theme.palette.background.application,
borderColor: theme.palette.background.application,
type: 'bar' as const,
parsing: { yAxisKey: 'archivedFlags', xAxisKey: 'date' },
yAxisID: 'y',
stack: 'archived',
order: 2,
},
...flagTypeDatasets,
@ -176,7 +175,6 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
data: weeks,
borderColor: theme.palette.primary.light,
backgroundColor: theme.palette.primary.light,
fill: false,
type: 'line' as const,
parsing: {
yAxisKey: 'archivePercentage',
@ -186,6 +184,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
order: 1,
},
],
flagTypeNames, // Add this to the return object
};
}, [creationArchiveData, theme]);
@ -201,6 +200,11 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
const data =
notEnoughData || isLoading ? placeholderData : aggregateOrProjectData;
// Get flag type names for legend filtering
const flagTypeNames = isAggregate
? (aggregateHealthData as any).flagTypeNames || []
: [];
return (
<>
<Chart
@ -214,9 +218,8 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
position: 'bottom' as const,
labels: {
filter: (legendItem) => {
// Hide individual created flag type labels
return !legendItem.text?.startsWith(
'Created:',
return !flagTypeNames.includes(
legendItem.text || '',
);
},
generateLabels: (chart) => {
@ -226,7 +229,9 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
);
const filtered = original.filter(
(item) =>
!item.text?.startsWith('Created:'),
!flagTypeNames.includes(
item.text || '',
),
);
// Add custom "Created Flags" legend item
@ -294,8 +299,10 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
height={100}
width={250}
/>
{tooltip?.dataPoints?.some((point) =>
point.dataset.label?.startsWith('Created:'),
{tooltip?.dataPoints?.some(
(point) =>
point.dataset.label !== 'Archived flags' &&
point.dataset.label !== 'Flags archived / Flags created',
) ? (
<CreationArchiveTooltip tooltip={tooltip} />
) : tooltip?.dataPoints?.some(

13
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveTooltip.tsx
View File

@ -28,30 +28,29 @@ export const CreationArchiveTooltip: FC<CreationArchiveTooltipProps> = ({
return null;
}
// Filter for created flag type datasets only
const createdFlagDataPoints = tooltip.dataPoints.filter((point) =>
point.dataset.label?.startsWith('Created:'),
// Filter for flag type datasets (exclude archived flags and percentage line)
const createdFlagDataPoints = tooltip.dataPoints.filter(
(point) =>
point.dataset.label !== 'Archived flags' &&
point.dataset.label !== 'Flags archived / Flags created',
);
if (createdFlagDataPoints.length === 0) {
return null;
}
// Get the data from the first point (they all have the same raw data)
const rawData = createdFlagDataPoints[0]?.raw as any;
if (!rawData?.createdFlagsByType) {
return null;
}
// Get flag type names from the chart datasets
const flagTypeNames = createdFlagDataPoints.map(
(point) => point.dataset.label?.replace('Created: ', '') || '',
(point) => point.dataset.label || '',
);
const flagTypeColors = getFlagTypeColors(theme);
// Create entries for each flag type with count > 0
const flagTypeEntries = Object.entries(rawData.createdFlagsByType)
.filter(([, count]) => (count as number) > 0)
.map(([flagType, count], index) => ({