From 1caaa784d9436776847d4844e4666f9fba12bb7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 1 Jul 2021 09:43:40 +0200 Subject: [PATCH] Legend: Updates display name for Last (not null) to just Last* (#35633) * Legend: Updates display name for Last (not null) to just Last* * added description * Removed the asterix * Added back * suffix --- .../src/transformations/fieldReducer.ts | 6 +- .../grafana-data/src/types/displayValue.ts | 5 ++ .../VizLegend/VizLegendStatsList.tsx | 2 +- .../components/VizLegend/VizLegendTable.tsx | 56 +++++++++---------- .../src/components/uPlot/PlotLegend.tsx | 9 ++- 5 files changed, 41 insertions(+), 37 deletions(-) diff --git a/packages/grafana-data/src/transformations/fieldReducer.ts b/packages/grafana-data/src/transformations/fieldReducer.ts index 7e2d7cc5f49..a07c0bd1769 100644 --- a/packages/grafana-data/src/transformations/fieldReducer.ts +++ b/packages/grafana-data/src/transformations/fieldReducer.ts @@ -129,7 +129,7 @@ export function reduceField(options: ReduceFieldOptions): FieldCalcs { export const fieldReducers = new Registry(() => [ { id: ReducerID.lastNotNull, - name: 'Last (not null)', + name: 'Last *', description: 'Last non-null value', standard: true, aliasIds: ['current'], @@ -138,14 +138,14 @@ export const fieldReducers = new Registry(() => [ { id: ReducerID.last, name: 'Last', - description: 'Last Value', + description: 'Last value', standard: true, reduce: calculateLast, }, { id: ReducerID.first, name: 'First', description: 'First Value', standard: true, reduce: calculateFirst }, { id: ReducerID.firstNotNull, - name: 'First (not null)', + name: 'First', description: 'First non-null value', standard: true, reduce: calculateFirstNotNull, diff --git a/packages/grafana-data/src/types/displayValue.ts b/packages/grafana-data/src/types/displayValue.ts index 781ae4203e3..678ef293ecd 100644 --- a/packages/grafana-data/src/types/displayValue.ts +++ b/packages/grafana-data/src/types/displayValue.ts @@ -16,6 +16,11 @@ export interface DisplayValue extends FormattedValue { */ color?: string; title?: string; + + /** + * Used in limited scenarios like legend reducer calculations + */ + description?: string; } /** diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx index 2f3b6a244c4..2fdf0db9961 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx @@ -20,7 +20,7 @@ export const VizLegendStatsList: React.FunctionComponent<{ stats: DisplayValue[] className={styles.list} items={stats} renderItem={(stat) => ( -
+
{stat.title && `${capitalize(stat.title)}:`} {formattedValueToString(stat)}
)} diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx index e79955f01ab..dbe7fba1103 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { css, cx } from '@emotion/css'; import { VizLegendTableProps } from './types'; import { Icon } from '../Icon/Icon'; -import { useStyles } from '../../themes/ThemeContext'; -import { union, sortBy } from 'lodash'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { sortBy } from 'lodash'; import { LegendTableItem } from './VizLegendTableItem'; -import { GrafanaTheme } from '@grafana/data'; +import { DisplayValue, GrafanaTheme2 } from '@grafana/data'; /** * @internal @@ -22,24 +22,16 @@ export const VizLegendTable = ({ onLabelMouseOut, readonly, }: VizLegendTableProps): JSX.Element => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); + const stats: Record = {}; - const columns = items - .map((item) => { - if (item.getDisplayValues) { - return item.getDisplayValues().map((i) => i.title); + for (const item of items) { + if (item.getDisplayValues) { + for (const displayValue of item.getDisplayValues()) { + stats[displayValue.title ?? '?'] = displayValue; } - return []; - }) - .reduce( - (acc, current) => { - return union( - acc, - current.filter((item) => !!item) - ); - }, - [''] - ) as string[]; + } + } const sortedItems = sortKey ? sortBy(items, (item) => { @@ -69,19 +61,22 @@ export const VizLegendTable = ({ - {columns.map((columnHeader) => { + + {Object.keys(stats).map((columnTitle) => { + const displayValue = stats[columnTitle]; return ( @@ -94,7 +89,7 @@ export const VizLegendTable = ({ ); }; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ table: css` width: 100%; th:first-child { @@ -102,10 +97,11 @@ const getStyles = (theme: GrafanaTheme) => ({ } `, header: css` - color: ${theme.colors.textBlue}; - font-weight: ${theme.typography.weight.semibold}; - border-bottom: 1px solid ${theme.colors.border1}; - padding: ${theme.spacing.xxs} ${theme.spacing.sm}; + color: ${theme.colors.primary.text}; + font-weight: ${theme.typography.fontWeightMedium}; + border-bottom: 1px solid ${theme.colors.border.weak}; + padding: ${theme.spacing(0.25, 1)}; + font-size: ${theme.typography.bodySmall.fontSize}; text-align: right; white-space: nowrap; `, @@ -113,6 +109,6 @@ const getStyles = (theme: GrafanaTheme) => ({ cursor: pointer; `, sortIcon: css` - margin-left: ${theme.spacing.sm}; + margin-left: ${theme.spacing(1)}; `, }); diff --git a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx index 08cf4ec3c99..1144de00a0e 100644 --- a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx +++ b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx @@ -57,10 +57,13 @@ export const PlotLegend: React.FC = ({ reducers: calcs, }); - return calcs.map((reducer) => { + return calcs.map((reducerId) => { + const fieldReducer = fieldReducers.get(reducerId); + return { - ...fmt(fieldCalcs[reducer]), - title: fieldReducers.get(reducer).name, + ...fmt(fieldCalcs[reducerId]), + title: fieldReducer.name, + description: fieldReducer.description, }; }); },
{ if (onToggleSort) { - onToggleSort(columnHeader); + onToggleSort(columnTitle); } }} > - {columnHeader} - {sortKey === columnHeader && ( + {columnTitle} + {sortKey === columnTitle && ( )}