IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Tooltip: Make active series more noticeable (#36824)

Browse Source 
* fix: make active series in tooltip more noticeable

* update font and spacing theme values
This commit is contained in:
nikki-kiga 2021-07-16 11:28:35 -07:00 committed by GitHub
parent afe6e793ff
commit 2172920095
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { GrafanaTheme, GraphSeriesValue } from '@grafana/data';
import { GrafanaTheme2, GraphSeriesValue } from '@grafana/data';
import { css, cx } from '@emotion/css';
import { SeriesIcon } from '../VizLegend/SeriesIcon';
import { useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
/**
* @public
@ -14,10 +14,10 @@ export interface SeriesTableRowProps {
isActive?: boolean;
}
const getSeriesTableRowStyles = (theme: GrafanaTheme) => {
const getSeriesTableRowStyles = (theme: GrafanaTheme2) => {
return {
icon: css`
margin-right: ${theme.spacing.xs};
margin-right: ${theme.spacing(1)};
vertical-align: middle;
`,
seriesTable: css`
@ -25,7 +25,7 @@ const getSeriesTableRowStyles = (theme: GrafanaTheme) => {
`,
seriesTableRow: css`
display: table-row;
font-size: ${theme.typography.size.sm};
font-size: ${theme.typography.bodySmall.fontSize};
`,
seriesTableCell: css`
display: table-cell;
@ -34,14 +34,15 @@ const getSeriesTableRowStyles = (theme: GrafanaTheme) => {
word-break: break-all;
`,
value: css`
padding-left: ${theme.spacing.md};
padding-left: ${theme.spacing(2)};
`,
activeSeries: css`
font-weight: ${theme.typography.weight.bold};
font-weight: ${theme.typography.fontWeightBold};
color: ${theme.colors.text.maxContrast};
`,
timestamp: css`
font-weight: ${theme.typography.weight.bold};
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.fontWeightBold};
font-size: ${theme.typography.bodySmall.fontSize};
`,
};
};
@ -50,7 +51,7 @@ const getSeriesTableRowStyles = (theme: GrafanaTheme) => {
* @public
*/
export const SeriesTableRow: React.FC<SeriesTableRowProps> = ({ color, label, value, isActive }) => {
const styles = useStyles(getSeriesTableRowStyles);
const styles = useStyles2(getSeriesTableRowStyles);
return (
<div className={cx(styles.seriesTableRow, isActive && styles.activeSeries)}>
@ -77,7 +78,7 @@ export interface SeriesTableProps {
* @public
*/
export const SeriesTable: React.FC<SeriesTableProps> = ({ timestamp, series }) => {
const styles = useStyles(getSeriesTableRowStyles);
const styles = useStyles2(getSeriesTableRowStyles);
return (
<>