feat: heatmap tooltip enhancements and fixes (opensearch-project#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
AMoo-Miki · Oct 6, 2020 · 6d763fb · 6d763fb
1 parent 4c1fd55
commit 6d763fb
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 7 deletions.
diff --git a/packages/osd-charts/.playground/playground.tsx b/packages/osd-charts/.playground/playground.tsx
@@ -69,6 +69,7 @@ export class Playground extends React.Component<any, { highlightedData?: Heatmap
         fill: 'red',
       },
       yAxisLabel: {
+        name: 'instance',
         visible: true,
         width: { max: 50 },
         padding: 5,
@@ -97,6 +98,7 @@ export class Playground extends React.Component<any, { highlightedData?: Heatmap
             />
             <Heatmap
               id="heatmap1"
+              name="maxAnomalyScore"
               ranges={[0, 3, 25, 50, 75]}
               colorScale={ScaleType.Threshold}
               colors={['#ffffff', '#d2e9f7', '#8bc8fb', '#fdec25', '#fba740', '#fe5050']}
@@ -105,7 +107,7 @@ export class Playground extends React.Component<any, { highlightedData?: Heatmap
               xAccessor="time"
               yAccessor={(d) => 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
@@ -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
@@ -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
@@ -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
@@ -69,6 +69,7 @@ export interface HeatmapSpec extends Spec {
   xScaleType: SeriesScales['xScaleType'];
   config: RecursivePartial<Config>;
   highlightedData?: { x: any[]; y: any[] };
+  name?: string;
 }
 
 type SpecRequiredProps = Pick<HeatmapSpec, 'id' | 'data'>;

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
@@ -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
@@ -135,7 +135,7 @@ export interface TooltipValue {
    */
   isVisible: boolean;
   /**
-   * The idenfitier of the related series
+   * The identifier of the related series
    */
   seriesIdentifier: SeriesIdentifier;
   /**