GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 16:19:00 +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

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

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

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