Geomap: Legend style update (#48641)

Legend style update
This commit is contained in:
Adela Almasan 2022-05-03 15:03:41 -05:00 committed by GitHub
parent 09634b518c
commit 0b5ffcfcf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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;
`
}));
});