GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 16:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fixed legend format not working for Pie Chart (#7300)

Browse Source 
* fix: fixed legend format not working for Pie Chart

* fix: added enhancement to legend fit and show, also made pie-chart responsive

* fix: made some css fixes

* fix: css fixes
This commit is contained in:
SagarRajput-7 2025-03-18 15:53:58 +05:30 committed by GitHub
parent 031e78cb20
commit 8a479d42ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 110 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
frontend/src/container/PanelWrapper/PiePanelWrapper.styles.scss
View File

@ -4,47 +4,78 @@
align-items: center;
width: 100%;
height: 100%;
font-size: 14px;
}
.piechart-wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: hidden;
}
.piechart-container {
height: 90%;
width: 100%;
flex: 1;
min-height: 0;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.piechart-tooltip {
padding: 8px 12px;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
.piechart-indicator {
width: 15px;
height: 3px;
width: 12px;
height: 12px;
border-radius: 2px;
margin-right: 8px;
display: inline-block;
}
.tooltip-value {
font-size: 12px;
font-weight: 600;
font-weight: bold;
margin-top: 4px;
}
}
.piechart-legend {
width: 100%;
height: 40px;
overflow-y: scroll;
padding: 8px;
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.piechart-legend-item {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
gap: 8px;
max-height: 68px;
overflow-y: auto;
width: 100%;
align-content: flex-start;
}
.piechart-legend-label {
width: 10px;
height: 10px;
border-radius: 50%;
}
.piechart-legend-item {
display: flex;
align-items: center;
font-size: 10px;
white-space: nowrap;
margin-bottom: 2px;
cursor: pointer;
flex: 0 0 auto;
}
.piechart-legend-label {
width: 12px;
height: 12px;
margin-right: 4px;
border-radius: 2px;
}
/* Media query for smaller containers */
@media (max-height: 300px) {
.piechart-legend {
max-height: 40%;
}
}

45
frontend/src/container/PanelWrapper/PiePanelWrapper.tsx
View File

@ -7,13 +7,13 @@ import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
import { themeColors } from 'constants/theme';
import { useIsDarkMode } from 'hooks/useDarkMode';
import getLabelName from 'lib/getLabelName';
import { generateColor } from 'lib/uPlotLib/utils/generateColor';
import { isNaN } from 'lodash-es';
import { useRef, useState } from 'react';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
import { PanelWrapperProps, TooltipData } from './panelWrapper.types';
import { getLabel, lightenColor, tooltipStyles } from './utils';
import { lightenColor, tooltipStyles } from './utils';
// refernce: https://www.youtube.com/watch?v=bL3P9CqQkKw
function PiePanelWrapper({
@ -40,8 +40,7 @@ function PiePanelWrapper({
detectBounds: true,
});
const panelData =
queryResponse.data?.payload?.data?.newResult?.data?.result || [];
const panelData = queryResponse.data?.payload?.data?.result || [];
const isDarkMode = useIsDarkMode();
@ -51,21 +50,14 @@ function PiePanelWrapper({
color: string;
}[] = [].concat(
...(panelData
.map((d) =>
d.series?.map((s) => ({
label:
d.series?.length === 1
? getLabel(Object.values(s.labels)[0], widget.query, d.queryName)
: getLabel(Object.values(s.labels)[0], {} as Query, d.queryName, true),
value: s.values[0].value,
.map((d) => ({
label: getLabelName(d.metric, d.queryName || '', d.legend || ''),
value: d.values?.[0]?.[1],
color: generateColor(
d.series?.length === 1
? getLabel(Object.values(s.labels)[0], widget.query, d.queryName)
: getLabel(Object.values(s.labels)[0], {} as Query, d.queryName, true),
getLabelName(d.metric, d.queryName || '', d.legend || ''),
isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
),
})),
)
}))
.filter((d) => d !== undefined) as never[]),
);
pieChartData = pieChartData.filter(
@ -95,7 +87,7 @@ function PiePanelWrapper({
};
return (
<>
<div className="piechart-wrapper">
{!pieChartData.length && <div className="piechart-no-data">No data</div>}
{pieChartData.length > 0 && (
<>
@ -127,6 +119,16 @@ function PiePanelWrapper({
const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.6;
const arcPath = pie.path(arc);
const arcFill = arc.data.color;
// Calculate available space for label text
const arcSize = arc.endAngle - arc.startAngle;
const maxLabelLength = Math.floor(arcSize * 15);
const labelText = arc.data.label;
const displayLabel =
labelText.length > maxLabelLength
? `${labelText.substring(0, maxLabelLength - 3)}...`
: labelText;
return (
<g
// eslint-disable-next-line react/no-array-index-key
@ -160,12 +162,12 @@ function PiePanelWrapper({
x={centroidX}
y={centroidY}
dy=".33em"
fill="#000"
fill={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400}
fontSize={10}
textAnchor="middle"
pointerEvents="none"
>
{arc.data.label}
{displayLabel}
</text>
)}
</g>
@ -198,8 +200,7 @@ function PiePanelWrapper({
)}
</div>
<div className="piechart-legend">
{pieChartData.length > 0 &&
pieChartData.map((data) => (
{pieChartData.map((data) => (
<div
key={data.label}
className="piechart-legend-item"
@ -222,7 +223,7 @@ function PiePanelWrapper({
</div>
</>
)}
</>
</div>
);
}