From 6d763fbbc7aa580c5206f5e129b85f0d6c10f358 Mon Sep 17 00:00:00 2001 From: Dima Arnautov Date: Tue, 6 Oct 2020 09:10:36 +0200 Subject: [PATCH] feat: heatmap tooltip enhancements and fixes (#847) Add configurable names for X, Y axes labels and cell values Add extra values to the tooltip info for X and Y axes, fix formattedValue for the cell value --- .../osd-charts/.playground/playground.tsx | 4 ++- packages/osd-charts/api/charts.api.md | 8 +++-- .../heatmap/layout/config/config.ts | 2 ++ .../heatmap/layout/types/config_types.ts | 2 ++ .../src/chart_types/heatmap/specs/heatmap.ts | 1 + .../heatmap/state/selectors/tooltip.ts | 34 +++++++++++++++++-- packages/osd-charts/src/specs/settings.tsx | 2 +- 7 files changed, 46 insertions(+), 7 deletions(-) diff --git a/packages/osd-charts/.playground/playground.tsx b/packages/osd-charts/.playground/playground.tsx index 29bb2151e41c..a0dd97650b40 100644 --- a/packages/osd-charts/.playground/playground.tsx +++ b/packages/osd-charts/.playground/playground.tsx @@ -69,6 +69,7 @@ export class Playground extends React.Component d.laneLabel} valueAccessor="value" - valueFormatter={(d) => d.toFixed(0.2)} + valueFormatter={(d) => d.toFixed(2)} ySortPredicate="numAsc" xScaleType={ScaleType.Time} config={heatmapConfig} diff --git a/packages/osd-charts/api/charts.api.md b/packages/osd-charts/api/charts.api.md index 1ee376d18818..b16e336a54dd 100644 --- a/packages/osd-charts/api/charts.api.md +++ b/packages/osd-charts/api/charts.api.md @@ -847,6 +847,7 @@ export interface HeatmapConfig { // // (undocumented) xAxisLabel: Font & { + name: string; fontSize: Pixels; fill: string; align: TextAlign; @@ -857,6 +858,7 @@ export interface HeatmapConfig { }; // (undocumented) yAxisLabel: Font & { + name: string; fontSize: Pixels; width: Pixels | 'auto' | { max: Pixels; @@ -900,6 +902,8 @@ export interface HeatmapSpec extends Spec { y: any[]; }; // (undocumented) + name?: string; + // (undocumented) ranges?: number[] | [number, number]; // (undocumented) specType: typeof SpecTypes.Series; @@ -1866,8 +1870,8 @@ export type YDomainRange = YDomainBase & DomainRange; // Warnings were encountered during analysis: // // src/chart_types/heatmap/layout/types/config_types.ts:28:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts -// src/chart_types/heatmap/layout/types/config_types.ts:58:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts -// src/chart_types/heatmap/layout/types/config_types.ts:59:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts +// src/chart_types/heatmap/layout/types/config_types.ts:59:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts +// src/chart_types/heatmap/layout/types/config_types.ts:60:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts // src/chart_types/partition_chart/layout/types/config_types.ts:126:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts // src/chart_types/partition_chart/layout/types/config_types.ts:127:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts // src/chart_types/partition_chart/specs/index.ts:48:13 - (ae-forgotten-export) The symbol "NodeColorAccessor" needs to be exported by the entry point index.d.ts diff --git a/packages/osd-charts/src/chart_types/heatmap/layout/config/config.ts b/packages/osd-charts/src/chart_types/heatmap/layout/config/config.ts index 105c5870bc83..a8fd7f6075c0 100644 --- a/packages/osd-charts/src/chart_types/heatmap/layout/config/config.ts +++ b/packages/osd-charts/src/chart_types/heatmap/layout/config/config.ts @@ -48,6 +48,7 @@ export const config: Config = { timeZone: 'UTC', xAxisLabel: { + name: 'X Value', visible: true, fill: 'black', fontSize: 12, @@ -63,6 +64,7 @@ export const config: Config = { formatter: String, }, yAxisLabel: { + name: 'Y Value', visible: true, width: 'auto', fill: 'black', diff --git a/packages/osd-charts/src/chart_types/heatmap/layout/types/config_types.ts b/packages/osd-charts/src/chart_types/heatmap/layout/types/config_types.ts index f271a3b1c163..b52928520058 100644 --- a/packages/osd-charts/src/chart_types/heatmap/layout/types/config_types.ts +++ b/packages/osd-charts/src/chart_types/heatmap/layout/types/config_types.ts @@ -53,6 +53,7 @@ export interface Config { }; xAxisLabel: Font & { + name: string; fontSize: Pixels; fill: string; align: TextAlign; @@ -62,6 +63,7 @@ export interface Config { formatter: (value: string | number) => string; }; yAxisLabel: Font & { + name: string; fontSize: Pixels; width: Pixels | 'auto' | { max: Pixels }; fill: string; diff --git a/packages/osd-charts/src/chart_types/heatmap/specs/heatmap.ts b/packages/osd-charts/src/chart_types/heatmap/specs/heatmap.ts index 139ea0382808..4d36343b40f1 100644 --- a/packages/osd-charts/src/chart_types/heatmap/specs/heatmap.ts +++ b/packages/osd-charts/src/chart_types/heatmap/specs/heatmap.ts @@ -69,6 +69,7 @@ export interface HeatmapSpec extends Spec { xScaleType: SeriesScales['xScaleType']; config: RecursivePartial; highlightedData?: { x: any[]; y: any[] }; + name?: string; } type SpecRequiredProps = Pick; diff --git a/packages/osd-charts/src/chart_types/heatmap/state/selectors/tooltip.ts b/packages/osd-charts/src/chart_types/heatmap/state/selectors/tooltip.ts index ffdb4e79bf35..b7ddaa2ebec7 100644 --- a/packages/osd-charts/src/chart_types/heatmap/state/selectors/tooltip.ts +++ b/packages/osd-charts/src/chart_types/heatmap/state/selectors/tooltip.ts @@ -48,9 +48,37 @@ export const getTooltipInfoSelector = createCachedSelector( pickedShapes .filter(({ visible }) => visible) .forEach((shape) => { - const xValueLabel = config.xAxisLabel.formatter(shape.datum.x); + // X-axis value tooltipInfo.values.push({ - label: `${shape.datum.y} - ${xValueLabel}`, + label: config.xAxisLabel.name, + color: 'transparent', + isHighlighted: false, + isVisible: true, + seriesIdentifier: { + specId: spec.id, + key: spec.id, + }, + value: `${shape.datum.x}`, + formattedValue: config.xAxisLabel.formatter(shape.datum.x), + }); + + // Y-axis value + tooltipInfo.values.push({ + label: config.yAxisLabel.name, + color: 'transparent', + isHighlighted: false, + isVisible: true, + seriesIdentifier: { + specId: spec.id, + key: spec.id, + }, + value: `${shape.datum.y}`, + formattedValue: config.yAxisLabel.formatter(shape.datum.y), + }); + + // Cell value + tooltipInfo.values.push({ + label: spec.name ?? spec.id, color: RGBtoString(shape.fill.color), isHighlighted: false, isVisible: true, @@ -59,7 +87,7 @@ export const getTooltipInfoSelector = createCachedSelector( key: spec.id, }, value: `${shape.value}`, - formattedValue: `${shape.value}`, + formattedValue: `${shape.formatted}`, }); }); } else { diff --git a/packages/osd-charts/src/specs/settings.tsx b/packages/osd-charts/src/specs/settings.tsx index 6bd06d2a49ec..3adfd2b4a2ef 100644 --- a/packages/osd-charts/src/specs/settings.tsx +++ b/packages/osd-charts/src/specs/settings.tsx @@ -135,7 +135,7 @@ export interface TooltipValue { */ isVisible: boolean; /** - * The idenfitier of the related series + * The identifier of the related series */ seriesIdentifier: SeriesIdentifier; /**