Skip to content

feat: heatmap tooltip enhancements and fixes#847

Merged
darnautov merged 3 commits intoelastic:masterfrom
darnautov:heatmap-fixes
Oct 6, 2020
Merged

feat: heatmap tooltip enhancements and fixes#847
darnautov merged 3 commits intoelastic:masterfrom
darnautov:heatmap-fixes

Conversation

@darnautov
Copy link
Copy Markdown
Contributor

Summary

  • Add configurable names for X and Y axes labels
  • Add extra values to the tooltip info for X and Y axes, fix formattedValue for the cell value
  • Export HeatmapConfig as RecursivePartial

@darnautov darnautov self-assigned this Oct 5, 2020
timeZone: 'UTC',

xAxisLabel: {
name: '',
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's use a better and informative default X Value

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in b8081ac

formatter: String,
},
yAxisLabel: {
name: '',
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's use a better and informative default Y Value

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in b8081ac

tooltipInfo.values.push({
label: `${shape.datum.y} - ${xValueLabel}`,
label: config.xAxisLabel.name,
color: RGBtoString(shape.fill.color),
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
color: RGBtoString(shape.fill.color),
color: 'transparent',

I think X and Y values should not be connected to the cell color

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in b8081ac

// Y-axis value
tooltipInfo.values.push({
label: config.yAxisLabel.name,
color: RGBtoString(shape.fill.color),
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as above

Suggested change
color: RGBtoString(shape.fill.color),
color: 'transparent',

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in b8081ac


// Cell value
tooltipInfo.values.push({
label: '',
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here, on XYAxis charts we use the spec.name or the spec.id as fallback

Suggested change
label: '',
label: label: spec.name ?? spec.id,

You can add an optional name parameter on the Heatmap spec to use in this case. an empty name can be used if the user don't want the default parameter.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in b8081ac

@darnautov darnautov requested a review from markov00 October 5, 2020 17:53
@codecov-commenter
Copy link
Copy Markdown

Codecov Report

Merging #847 into master will increase coverage by 0.49%.
The diff coverage is 0.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #847      +/-   ##
==========================================
+ Coverage   70.01%   70.50%   +0.49%     
==========================================
  Files         319      334      +15     
  Lines       10474    10760     +286     
  Branches     2221     2264      +43     
==========================================
+ Hits         7333     7586     +253     
- Misses       3132     3159      +27     
- Partials        9       15       +6     
Flag Coverage Δ
#unittests 69.99% <0.00%> (-0.02%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/chart_types/heatmap/layout/config/config.ts 100.00% <ø> (ø)
src/chart_types/heatmap/specs/heatmap.ts 66.66% <ø> (ø)
src/chart_types/heatmap/state/selectors/tooltip.ts 36.36% <0.00%> (-3.64%) ⬇️
src/specs/settings.tsx 87.09% <ø> (ø)
src/mocks/series/series.ts 88.13% <0.00%> (ø)
src/mocks/series/series_identifiers.ts 100.00% <0.00%> (ø)
src/mocks/theme.ts 100.00% <0.00%> (ø)
src/mocks/scale/index.ts 100.00% <0.00%> (ø)
src/mocks/series/index.ts 100.00% <0.00%> (ø)
src/mocks/utils.ts 100.00% <0.00%> (ø)
... and 9 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 42460bd...b8081ac. Read the comment docs.

Copy link
Copy Markdown
Collaborator

@markov00 markov00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@darnautov darnautov merged commit d879e05 into elastic:master Oct 6, 2020
@darnautov darnautov deleted the heatmap-fixes branch October 6, 2020 07:10
markov00 pushed a commit that referenced this pull request Oct 6, 2020
# [23.2.0](v23.1.1...v23.2.0) (2020-10-06)

### Bug Fixes

* **heatmap:** adjust pageSize based available chart height ([#849](#849)) ([9aa396b](9aa396b))
* **heatmap:** destroy canvas bbox calculator when done ([#844](#844)) ([42460bd](42460bd))
* **heatmap:** x-axis labels overlapping for time series data ([#850](#850)) ([9ebd879](9ebd879))
* **interactions:** recognise drag after 100ms and 4px ([#848](#848)) ([70626fe](70626fe)), closes [#748](#748)

### Features

* heatmap tooltip enhancements and fixes ([#847](#847)) ([d879e05](d879e05))
@markov00
Copy link
Copy Markdown
Collaborator

markov00 commented Oct 6, 2020

🎉 This PR is included in version 23.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Oct 6, 2020
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
# [23.2.0](elastic/elastic-charts@v23.1.1...v23.2.0) (2020-10-06)

### Bug Fixes

* **heatmap:** adjust pageSize based available chart height ([opensearch-project#849](elastic/elastic-charts#849)) ([fd56099](elastic/elastic-charts@fd56099))
* **heatmap:** destroy canvas bbox calculator when done ([opensearch-project#844](elastic/elastic-charts#844)) ([4c1fd55](elastic/elastic-charts@4c1fd55))
* **heatmap:** x-axis labels overlapping for time series data ([opensearch-project#850](elastic/elastic-charts#850)) ([7cbd151](elastic/elastic-charts@7cbd151))
* **interactions:** recognise drag after 100ms and 4px ([opensearch-project#848](elastic/elastic-charts#848)) ([f7aa7f8](elastic/elastic-charts@f7aa7f8)), closes [opensearch-project#748](elastic/elastic-charts#748)

### Features

* heatmap tooltip enhancements and fixes ([opensearch-project#847](elastic/elastic-charts#847)) ([6d763fb](elastic/elastic-charts@6d763fb))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

released Issue released publicly

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants