fix(xy): time axis improvements#1445
Conversation
| baseTheme={{ | ||
| ...baseTheme, | ||
| axes: { ...baseTheme.axes, tickLine: { ...baseTheme.axes.tickLine, size: 0.0001, padding: 4 } }, | ||
| }} |
There was a problem hiding this comment.
baseTheme should be left alone, the axes overrides should go in the theme prop.
There was a problem hiding this comment.
Will change it in the next commit—is it mostly convenience like no need to deepmerge myself, or is there some deeper reason?
There was a problem hiding this comment.
Correct, just for ease of use. You also might spread something that is not actually a full Theme type and it could break.
rshen91
left a comment
There was a problem hiding this comment.
LGTM - timeslip looks great in dark mode compared to current master 👍🏻
markov00
left a comment
There was a problem hiding this comment.
Thanks Robert, it looks way better now
|
|
||
| if (isMultilayerTimeAxis) { | ||
| const rasterSelector = getRasterSelector(xDomain.timeZone, timeAxisLayerCount); | ||
| const rasterSelector = rasters({ minimumTickPixelDistance: 24, locale: 'en-US' }, xDomain.timeZone); |
There was a problem hiding this comment.
Also the locale should be picked up from Kibana
| const axisTitleColor = 'rgb(112,112,112)'; | ||
| const axisTitleFontSize = 15; | ||
| const dataInk = 'rgba(96, 146, 192, 1)'; | ||
| const horizontalGridLineStyle = { stroke: 'black', strokeWidth: 0.15, opacity: 1 }; |
There was a problem hiding this comment.
do we need the black stroke and very thin width?
There was a problem hiding this comment.
Yes, because the equivalent looking much lighter grey stroke, with the default width (1px) leads to a different intersection of the horizontal and vertical grid lines, and it results in a "broken vertical grid line" artifact
## [38.1.1](v38.1.0...v38.1.1) (2021-10-28) ### Bug Fixes * **xy:** multilayer time axis tick/grid line placement and styling ([#1445](#1445)) ([1ce4223](1ce4223))
|
🎉 This PR is included in version 38.1.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Summary
Multilayer time axis tick/grid line placement and styling improvements
Details
Issues
Partial fulfilment of #1442
Checklist
:xy,:partition):interactions,:axis):themelabel has been added and the@elastic/eui-designteam has been pinged when there areThemeAPI changescloses #123,fixes #123)New public API exports have been added topackages/charts/src/index.tsUnit tests have been added or updated to match the most common scenariosdark,light,eui-dark&eui-light