mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
PieChart: Refactoring & adding unsubscribe (#33432)
* Tweaks to piechart and theme * Adds unsubscribe to events and move out to separate hook * reverted constrast change * Minor refactor after review feedback * chain the subs
This commit is contained in:
parent
df8d301d1e
commit
bac8b967be
@ -1,4 +1,4 @@
|
||||
import React, { FC, ReactNode, useState } from 'react';
|
||||
import React, { FC, useEffect, useState } from 'react';
|
||||
import {
|
||||
DataHoverClearEvent,
|
||||
DataHoverEvent,
|
||||
@ -6,9 +6,9 @@ import {
|
||||
FieldDisplay,
|
||||
formattedValueToString,
|
||||
getFieldDisplayValues,
|
||||
GrafanaTheme,
|
||||
GrafanaThemeV2,
|
||||
} from '@grafana/data';
|
||||
import { useStyles, useTheme } from '../../themes/ThemeContext';
|
||||
import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import Pie, { PieArcDatum, ProvidedProps } from '@visx/shape/lib/shapes/Pie';
|
||||
import { Group } from '@visx/group';
|
||||
@ -33,6 +33,7 @@ import {
|
||||
import { getTooltipContainerStyles } from '../../themes/mixins';
|
||||
import { SeriesTable, SeriesTableRowProps, VizTooltipOptions } from '../VizTooltip';
|
||||
import { usePanelContext } from '../PanelChrome';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
const defaultLegendOptions: PieChartLegendOptions = {
|
||||
displayMode: LegendDisplayMode.List,
|
||||
@ -44,99 +45,33 @@ const defaultLegendOptions: PieChartLegendOptions = {
|
||||
/**
|
||||
* @beta
|
||||
*/
|
||||
export const PieChart: FC<PieChartProps> = ({
|
||||
data,
|
||||
timeZone,
|
||||
reduceOptions,
|
||||
fieldConfig,
|
||||
replaceVariables,
|
||||
legendOptions = defaultLegendOptions,
|
||||
tooltipOptions,
|
||||
onSeriesColorChange,
|
||||
width,
|
||||
height,
|
||||
...restProps
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const [highlightedTitle, setHighlightedTitle] = useState<string>();
|
||||
const { eventBus } = usePanelContext();
|
||||
|
||||
if (eventBus) {
|
||||
const setHighlightedSlice = (event: DataHoverEvent) => {
|
||||
if (eventBus.isOwnEvent(event)) {
|
||||
setHighlightedTitle(event.payload.dataId);
|
||||
}
|
||||
};
|
||||
|
||||
const resetHighlightedSlice = (event: DataHoverClearEvent) => {
|
||||
if (eventBus.isOwnEvent(event)) {
|
||||
setHighlightedTitle(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
eventBus.subscribe(DataHoverEvent, setHighlightedSlice);
|
||||
eventBus.subscribe(DataHoverClearEvent, resetHighlightedSlice);
|
||||
}
|
||||
|
||||
const getLegend = (fields: FieldDisplay[], legendOptions: PieChartLegendOptions) => {
|
||||
if (legendOptions.displayMode === LegendDisplayMode.Hidden) {
|
||||
return undefined;
|
||||
}
|
||||
const values = fields.map((v) => v.display);
|
||||
const total = values.reduce((acc, item) => item.numeric + acc, 0);
|
||||
|
||||
const legendItems = values.map<VizLegendItem>((value, idx) => {
|
||||
return {
|
||||
label: value.title ?? '',
|
||||
color: value.color ?? FALLBACK_COLOR,
|
||||
yAxis: 1,
|
||||
getItemKey: () => (value.title ?? '') + idx,
|
||||
getDisplayValues: () => {
|
||||
const valuesToShow = legendOptions.values ?? [];
|
||||
let displayValues = [];
|
||||
|
||||
if (valuesToShow.includes(PieChartLegendValues.Value)) {
|
||||
displayValues.push({ numeric: value.numeric, text: formattedValueToString(value), title: 'Value' });
|
||||
}
|
||||
|
||||
if (valuesToShow.includes(PieChartLegendValues.Percent)) {
|
||||
const fractionOfTotal = value.numeric / total;
|
||||
const percentOfTotal = fractionOfTotal * 100;
|
||||
|
||||
displayValues.push({
|
||||
numeric: fractionOfTotal,
|
||||
percent: percentOfTotal,
|
||||
text: percentOfTotal.toFixed(0) + '%',
|
||||
title: valuesToShow.length > 1 ? 'Percent' : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
return displayValues;
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<VizLegend
|
||||
items={legendItems}
|
||||
onSeriesColorChange={onSeriesColorChange}
|
||||
placement={legendOptions.placement}
|
||||
displayMode={legendOptions.displayMode}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export function PieChart(props: PieChartProps) {
|
||||
const {
|
||||
data,
|
||||
timeZone,
|
||||
reduceOptions,
|
||||
fieldConfig,
|
||||
replaceVariables,
|
||||
tooltipOptions,
|
||||
onSeriesColorChange,
|
||||
width,
|
||||
height,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const theme = useTheme2();
|
||||
const highlightedTitle = useSliceHighlightState();
|
||||
const fieldDisplayValues = getFieldDisplayValues({
|
||||
fieldConfig,
|
||||
reduceOptions,
|
||||
data,
|
||||
theme,
|
||||
theme: theme.v1,
|
||||
replaceVariables,
|
||||
timeZone,
|
||||
});
|
||||
|
||||
return (
|
||||
<VizLayout width={width} height={height} legend={getLegend(fieldDisplayValues, legendOptions)}>
|
||||
<VizLayout width={width} height={height} legend={getLegend(props, fieldDisplayValues)}>
|
||||
{(vizWidth: number, vizHeight: number) => {
|
||||
return (
|
||||
<PieChartSvg
|
||||
@ -151,7 +86,90 @@ export const PieChart: FC<PieChartProps> = ({
|
||||
}}
|
||||
</VizLayout>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
function getLegend(props: PieChartProps, displayValues: FieldDisplay[]) {
|
||||
const { legendOptions = defaultLegendOptions } = props;
|
||||
|
||||
if (legendOptions.displayMode === LegendDisplayMode.Hidden) {
|
||||
return undefined;
|
||||
}
|
||||
const values = displayValues.map((v) => v.display);
|
||||
const total = values.reduce((acc, item) => item.numeric + acc, 0);
|
||||
|
||||
const legendItems = values.map<VizLegendItem>((value, idx) => {
|
||||
return {
|
||||
label: value.title ?? '',
|
||||
color: value.color ?? FALLBACK_COLOR,
|
||||
yAxis: 1,
|
||||
getItemKey: () => (value.title ?? '') + idx,
|
||||
getDisplayValues: () => {
|
||||
const valuesToShow = legendOptions.values ?? [];
|
||||
let displayValues = [];
|
||||
|
||||
if (valuesToShow.includes(PieChartLegendValues.Value)) {
|
||||
displayValues.push({ numeric: value.numeric, text: formattedValueToString(value), title: 'Value' });
|
||||
}
|
||||
|
||||
if (valuesToShow.includes(PieChartLegendValues.Percent)) {
|
||||
const fractionOfTotal = value.numeric / total;
|
||||
const percentOfTotal = fractionOfTotal * 100;
|
||||
|
||||
displayValues.push({
|
||||
numeric: fractionOfTotal,
|
||||
percent: percentOfTotal,
|
||||
text: percentOfTotal.toFixed(0) + '%',
|
||||
title: valuesToShow.length > 1 ? 'Percent' : undefined,
|
||||
});
|
||||
}
|
||||
|
||||
return displayValues;
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<VizLegend
|
||||
items={legendItems}
|
||||
onSeriesColorChange={props.onSeriesColorChange}
|
||||
placement={legendOptions.placement}
|
||||
displayMode={legendOptions.displayMode}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function useSliceHighlightState() {
|
||||
const [highlightedTitle, setHighlightedTitle] = useState<string>();
|
||||
const { eventBus } = usePanelContext();
|
||||
|
||||
useEffect(() => {
|
||||
if (!eventBus) {
|
||||
return;
|
||||
}
|
||||
|
||||
const setHighlightedSlice = (event: DataHoverEvent) => {
|
||||
if (eventBus.isOwnEvent(event)) {
|
||||
setHighlightedTitle(event.payload.dataId);
|
||||
}
|
||||
};
|
||||
|
||||
const resetHighlightedSlice = (event: DataHoverClearEvent) => {
|
||||
if (eventBus.isOwnEvent(event)) {
|
||||
setHighlightedTitle(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
const subs = new Subscription()
|
||||
.add(eventBus.subscribe(DataHoverEvent, setHighlightedSlice))
|
||||
.add(eventBus.subscribe(DataHoverClearEvent, resetHighlightedSlice));
|
||||
|
||||
return () => {
|
||||
subs.unsubscribe();
|
||||
};
|
||||
}, [setHighlightedTitle, eventBus]);
|
||||
|
||||
return highlightedTitle;
|
||||
}
|
||||
|
||||
export const PieChartSvg: FC<PieChartSvgProps> = ({
|
||||
fieldDisplayValues,
|
||||
@ -159,13 +177,12 @@ export const PieChartSvg: FC<PieChartSvgProps> = ({
|
||||
width,
|
||||
height,
|
||||
highlightedTitle,
|
||||
useGradients = true,
|
||||
displayLabels = [],
|
||||
tooltipOptions,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const theme = useTheme2();
|
||||
const componentInstanceId = useComponentInstanceId('PieChart');
|
||||
const styles = useStyles(getStyles);
|
||||
const styles = useStyles2(getStyles);
|
||||
const tooltip = useTooltip<SeriesTableRowProps[]>();
|
||||
const { containerRef, TooltipInPortal } = useTooltipInPortal({
|
||||
detectBounds: true,
|
||||
@ -218,55 +235,55 @@ export const PieChartSvg: FC<PieChartSvgProps> = ({
|
||||
cornerRadius={3}
|
||||
padAngle={0.005}
|
||||
>
|
||||
{(pie) => {
|
||||
return pie.arcs.map((arc) => {
|
||||
const color = arc.data.display.color ?? FALLBACK_COLOR;
|
||||
const highlighted = highlightedTitle === arc.data.display.title;
|
||||
const label = showLabel ? (
|
||||
<PieLabel
|
||||
arc={arc}
|
||||
outerRadius={layout.outerRadius}
|
||||
innerRadius={layout.innerRadius}
|
||||
displayLabels={displayLabels}
|
||||
total={total}
|
||||
color={theme.colors.text}
|
||||
/>
|
||||
) : undefined;
|
||||
if (arc.data.hasLinks && arc.data.getLinks) {
|
||||
return (
|
||||
<DataLinksContextMenu config={arc.data.field} key={arc.index} links={arc.data.getLinks}>
|
||||
{(api) => (
|
||||
<PieSlice
|
||||
tooltip={tooltip}
|
||||
highlighted={highlighted}
|
||||
arc={arc}
|
||||
pie={pie}
|
||||
fill={getGradientColor(color)}
|
||||
openMenu={api.openMenu}
|
||||
tooltipOptions={tooltipOptions}
|
||||
>
|
||||
{label}
|
||||
</PieSlice>
|
||||
)}
|
||||
</DataLinksContextMenu>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<PieSlice
|
||||
key={arc.index}
|
||||
highlighted={highlighted}
|
||||
tooltip={tooltip}
|
||||
{(pie) => (
|
||||
<>
|
||||
{pie.arcs.map((arc) => {
|
||||
let color = arc.data.display.color ?? FALLBACK_COLOR;
|
||||
const highlighted = highlightedTitle === arc.data.display.title;
|
||||
if (arc.data.hasLinks && arc.data.getLinks) {
|
||||
return (
|
||||
<DataLinksContextMenu config={arc.data.field} key={arc.index} links={arc.data.getLinks}>
|
||||
{(api) => (
|
||||
<PieSlice
|
||||
tooltip={tooltip}
|
||||
highlighted={highlighted}
|
||||
arc={arc}
|
||||
pie={pie}
|
||||
fill={getGradientColor(color)}
|
||||
openMenu={api.openMenu}
|
||||
tooltipOptions={tooltipOptions}
|
||||
/>
|
||||
)}
|
||||
</DataLinksContextMenu>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<PieSlice
|
||||
key={arc.index}
|
||||
highlighted={highlighted}
|
||||
tooltip={tooltip}
|
||||
arc={arc}
|
||||
pie={pie}
|
||||
fill={getGradientColor(color)}
|
||||
tooltipOptions={tooltipOptions}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
{showLabel &&
|
||||
pie.arcs.map((arc) => (
|
||||
<PieLabel
|
||||
arc={arc}
|
||||
pie={pie}
|
||||
fill={getGradientColor(color)}
|
||||
tooltipOptions={tooltipOptions}
|
||||
>
|
||||
{label}
|
||||
</PieSlice>
|
||||
);
|
||||
}
|
||||
});
|
||||
}}
|
||||
key={arc.index}
|
||||
outerRadius={layout.outerRadius}
|
||||
innerRadius={layout.innerRadius}
|
||||
displayLabels={displayLabels}
|
||||
total={total}
|
||||
color={theme.colors.text.primary}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Pie>
|
||||
</Group>
|
||||
</svg>
|
||||
@ -286,8 +303,7 @@ export const PieChartSvg: FC<PieChartSvgProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
const PieSlice: FC<{
|
||||
children: ReactNode;
|
||||
interface SliceProps {
|
||||
arc: PieArcDatum<FieldDisplay>;
|
||||
pie: ProvidedProps<FieldDisplay>;
|
||||
highlighted?: boolean;
|
||||
@ -295,9 +311,11 @@ const PieSlice: FC<{
|
||||
tooltip: UseTooltipParams<SeriesTableRowProps[]>;
|
||||
tooltipOptions: VizTooltipOptions;
|
||||
openMenu?: (event: React.MouseEvent<SVGElement>) => void;
|
||||
}> = ({ arc, children, pie, highlighted, openMenu, fill, tooltip, tooltipOptions }) => {
|
||||
const theme = useTheme();
|
||||
const styles = useStyles(getStyles);
|
||||
}
|
||||
|
||||
function PieSlice({ arc, pie, highlighted, openMenu, fill, tooltip, tooltipOptions }: SliceProps) {
|
||||
const theme = useTheme2();
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
const onMouseMoveOverArc = (event: any) => {
|
||||
const coords = localPoint(event.target.ownerSVGElement, event);
|
||||
@ -316,20 +334,21 @@ const PieSlice: FC<{
|
||||
onMouseOut={tooltip.hideTooltip}
|
||||
onClick={openMenu}
|
||||
>
|
||||
<path d={pie.path({ ...arc })!} fill={fill} stroke={theme.colors.panelBg} strokeWidth={1} />
|
||||
{children}
|
||||
<path d={pie.path({ ...arc })!} fill={fill} stroke={theme.colors.background.primary} strokeWidth={1} />
|
||||
</g>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const PieLabel: FC<{
|
||||
interface LabelProps {
|
||||
arc: PieArcDatum<FieldDisplay>;
|
||||
outerRadius: number;
|
||||
innerRadius: number;
|
||||
displayLabels: PieChartLabels[];
|
||||
total: number;
|
||||
color: string;
|
||||
}> = ({ arc, outerRadius, innerRadius, displayLabels, total, color }) => {
|
||||
}
|
||||
|
||||
function PieLabel({ arc, outerRadius, innerRadius, displayLabels, total, color }: LabelProps) {
|
||||
const labelRadius = innerRadius === 0 ? outerRadius / 6 : innerRadius;
|
||||
const [labelX, labelY] = getLabelPos(arc, outerRadius, labelRadius);
|
||||
const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.3;
|
||||
@ -371,7 +390,7 @@ const PieLabel: FC<{
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
function getTooltipData(
|
||||
pie: ProvidedProps<FieldDisplay>,
|
||||
@ -403,14 +422,14 @@ function getLabelPos(arc: PieArcDatum<FieldDisplay>, outerRadius: number, innerR
|
||||
return [Math.cos(a) * r, Math.sin(a) * r];
|
||||
}
|
||||
|
||||
function getGradientColorFrom(color: string, theme: GrafanaTheme) {
|
||||
function getGradientColorFrom(color: string, theme: GrafanaThemeV2) {
|
||||
return tinycolor(color)
|
||||
.darken(20 * (theme.isDark ? 1 : -0.7))
|
||||
.spin(8)
|
||||
.toRgbString();
|
||||
}
|
||||
|
||||
function getGradientColorTo(color: string, theme: GrafanaTheme) {
|
||||
function getGradientColorTo(color: string, theme: GrafanaThemeV2) {
|
||||
return tinycolor(color)
|
||||
.darken(10 * (theme.isDark ? 1 : -0.7))
|
||||
.spin(-8)
|
||||
@ -442,7 +461,7 @@ function getPieLayout(height: number, width: number, pieType: PieChartType, marg
|
||||
};
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => {
|
||||
const getStyles = (theme: GrafanaThemeV2) => {
|
||||
return {
|
||||
container: css`
|
||||
width: 100%;
|
||||
|
@ -1,9 +1,9 @@
|
||||
import React, { useState, useLayoutEffect, useRef, HTMLAttributes, useMemo } from 'react';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { useStyles } from '../../themes';
|
||||
import { useStyles2 } from '../../themes';
|
||||
import { getTooltipContainerStyles } from '../../themes/mixins';
|
||||
import useWindowSize from 'react-use/lib/useWindowSize';
|
||||
import { Dimensions2D, GrafanaTheme } from '@grafana/data';
|
||||
import { Dimensions2D, GrafanaThemeV2 } from '@grafana/data';
|
||||
|
||||
/**
|
||||
* @public
|
||||
@ -84,7 +84,7 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
|
||||
});
|
||||
}, [width, height, positionX, offsetX, positionY, offsetY, tooltipMeasurement.width, tooltipMeasurement.height]);
|
||||
|
||||
const styles = useStyles(getStyles);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -105,7 +105,7 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
|
||||
|
||||
VizTooltipContainer.displayName = 'VizTooltipContainer';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => ({
|
||||
const getStyles = (theme: GrafanaThemeV2) => ({
|
||||
wrapper: css`
|
||||
${getTooltipContainerStyles(theme)}
|
||||
`,
|
||||
|
@ -63,11 +63,11 @@ export function getFocusStyles(theme: GrafanaThemeV2): CSSObject {
|
||||
}
|
||||
|
||||
// max-width is set up based on .grafana-tooltip class that's used in dashboard
|
||||
export const getTooltipContainerStyles = (theme: GrafanaTheme) => `
|
||||
export const getTooltipContainerStyles = (theme: GrafanaThemeV2) => `
|
||||
overflow: hidden;
|
||||
background: ${theme.colors.bg2};
|
||||
background: ${theme.components.tooltip.background};
|
||||
max-width: 800px;
|
||||
padding: ${theme.spacing.sm};
|
||||
border-radius: ${theme.border.radius.sm};
|
||||
padding: ${theme.spacing(1)};
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
z-index: ${theme.zIndex.tooltip};
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user