mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
parent
09634b518c
commit
0b5ffcfcf0
@ -1,7 +1,7 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Label, stylesFactory, useTheme2, VizLegendItem } from '@grafana/ui';
|
||||
import { useStyles2, VizLegendItem } from '@grafana/ui';
|
||||
import { DataFrame, formattedValueToString, getFieldColorModeForField, GrafanaTheme2 } from '@grafana/data';
|
||||
import { css } from '@emotion/css';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { config } from 'app/core/config';
|
||||
import { DimensionSupplier } from 'app/features/dimensions';
|
||||
import { getThresholdItems } from 'app/plugins/panel/state-timeline/utils';
|
||||
@ -23,8 +23,7 @@ export interface MarkersLegendProps {
|
||||
|
||||
export function MarkersLegend(props: MarkersLegendProps) {
|
||||
const { layerName, styleConfig, layer } = props;
|
||||
const theme = useTheme2();
|
||||
const style = getStyles(theme);
|
||||
const style = useStyles2(getStyles);
|
||||
|
||||
const hoverEvent = useObservable(((layer as any)?.__state as MapLayerState)?.mouseEvents ?? of(undefined));
|
||||
|
||||
@ -55,14 +54,14 @@ export function MarkersLegend(props: MarkersLegendProps) {
|
||||
if (color && symbol && !colorField) {
|
||||
return (
|
||||
<div className={style.infoWrap}>
|
||||
<div className={style.fixedColorContainer}>
|
||||
<div className={style.layerName}>{layerName}</div>
|
||||
<div className={cx(style.layerBody, style.fixedColorContainer)}>
|
||||
<SVG
|
||||
src={`public/${symbol}`}
|
||||
className={style.legendSymbol}
|
||||
title={'Symbol'}
|
||||
style={{ fill: color, opacity: opacity }}
|
||||
/>
|
||||
<span>{layerName}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@ -90,15 +89,12 @@ export function MarkersLegend(props: MarkersLegendProps) {
|
||||
|
||||
const display = colorField.display ? (v: number) => formattedValueToString(colorField.display!(v)) : (v: number) => `${v}`;
|
||||
return (
|
||||
<>
|
||||
<div className={style.labelsWrapper}>
|
||||
<Label>{layerName}</Label>
|
||||
<Label>{colorField?.name}</Label>
|
||||
</div>
|
||||
<div className={style.colorScaleWrapper}>
|
||||
<div className={style.infoWrap}>
|
||||
<div className={style.layerName}>{layerName}</div>
|
||||
<div className={cx(style.layerBody, style.colorScaleWrapper)}>
|
||||
<ColorScale hoverValue={hoverValue} colorPalette={colors} min={colorRange.min as number} max={colorRange.max as number} display={display} useStopsPercentage={false}/>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -110,7 +106,8 @@ export function MarkersLegend(props: MarkersLegendProps) {
|
||||
const items = getThresholdItems(colorField!.config, config.theme2);
|
||||
return (
|
||||
<div className={style.infoWrap}>
|
||||
<div className={style.legend}>
|
||||
<div className={style.layerName}>{layerName}</div>
|
||||
<div className={cx(style.layerBody, style.legend)}>
|
||||
{items.map((item: VizLegendItem, idx: number) => (
|
||||
<div key={`${idx}/${item.label}`} className={style.legendItem}>
|
||||
<i style={{ background: item.color }}></i>
|
||||
@ -122,17 +119,28 @@ export function MarkersLegend(props: MarkersLegendProps) {
|
||||
);
|
||||
}
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
infoWrap: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: ${theme.colors.background.secondary};
|
||||
border-radius: 2px;
|
||||
border-radius: 1px;
|
||||
padding: ${theme.spacing(1)};
|
||||
border-bottom: 2px solid ${theme.colors.border.strong};
|
||||
min-width: 150px;
|
||||
`,
|
||||
layerName: css`
|
||||
font-size: ${theme.typography.body.fontSize};
|
||||
`,
|
||||
layerBody: css`
|
||||
padding-left: 10px;
|
||||
`,
|
||||
legend: css`
|
||||
line-height: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
padding: 5px 10px 0;
|
||||
|
||||
i {
|
||||
width: 18px;
|
||||
@ -148,20 +156,16 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
|
||||
fixedColorContainer: css`
|
||||
min-width: 80px;
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
padding-top: 5px;
|
||||
`,
|
||||
legendSymbol: css`
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: auto;
|
||||
margin-right: 4px;
|
||||
`,
|
||||
colorScaleWrapper: css`
|
||||
min-width: 200px;
|
||||
font-size: ${theme.typography.bodySmall.fontSize};
|
||||
padding: ${theme.spacing(0, 0.5)};
|
||||
padding-top: 10px;
|
||||
`,
|
||||
labelsWrapper: css`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`
|
||||
}));
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user