Skip to content

Commit

Permalink
feat: heatmap tooltip enhancements and fixes (#847)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
darnautov authored Oct 6, 2020
1 parent 42460bd commit d879e05
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 7 deletions.
4 changes: 3 additions & 1 deletion .playground/playground.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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']}
Expand All @@ -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}
Expand Down
8 changes: 6 additions & 2 deletions api/charts.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -847,6 +847,7 @@ export interface HeatmapConfig {
//
// (undocumented)
xAxisLabel: Font & {
name: string;
fontSize: Pixels;
fill: string;
align: TextAlign;
Expand All @@ -857,6 +858,7 @@ export interface HeatmapConfig {
};
// (undocumented)
yAxisLabel: Font & {
name: string;
fontSize: Pixels;
width: Pixels | 'auto' | {
max: Pixels;
Expand Down Expand Up @@ -900,6 +902,8 @@ export interface HeatmapSpec extends Spec {
y: any[];
};
// (undocumented)
name?: string;
// (undocumented)
ranges?: number[] | [number, number];
// (undocumented)
specType: typeof SpecTypes.Series;
Expand Down Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions src/chart_types/heatmap/layout/config/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const config: Config = {
timeZone: 'UTC',

xAxisLabel: {
name: 'X Value',
visible: true,
fill: 'black',
fontSize: 12,
Expand All @@ -63,6 +64,7 @@ export const config: Config = {
formatter: String,
},
yAxisLabel: {
name: 'Y Value',
visible: true,
width: 'auto',
fill: 'black',
Expand Down
2 changes: 2 additions & 0 deletions src/chart_types/heatmap/layout/types/config_types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export interface Config {
};

xAxisLabel: Font & {
name: string;
fontSize: Pixels;
fill: string;
align: TextAlign;
Expand All @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/chart_types/heatmap/specs/heatmap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'>;
Expand Down
34 changes: 31 additions & 3 deletions src/chart_types/heatmap/state/selectors/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -59,7 +87,7 @@ export const getTooltipInfoSelector = createCachedSelector(
key: spec.id,
},
value: `${shape.value}`,
formattedValue: `${shape.value}`,
formattedValue: `${shape.formatted}`,
});
});
} else {
Expand Down
2 changes: 1 addition & 1 deletion src/specs/settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export interface TooltipValue {
*/
isVisible: boolean;
/**
* The idenfitier of the related series
* The identifier of the related series
*/
seriesIdentifier: SeriesIdentifier;
/**
Expand Down

0 comments on commit d879e05

Please sign in to comment.