Some quick EuiSeriesChart additions
#1198
Conversation
Only add space beween content and actions if both `body` and `actions` exist.
| @@ -11,6 +11,7 @@ export function VisualizationColorType(props, propName) { | |||
| return new Error('Color must be a valid hex color string in the form #RRGGBB'); | |||
| } | |||
| if (!VISUALIZATION_COLORS.includes(color.toUpperCase())) { | |||
| console.warn('Prefer safe EUI Visualization Colors.'); | |||
| // Suppress warning for now as it can overwhelm the console for custom charts | |||
| // console.warn('Prefer safe EUI Visualization Colors.'); | |||
There was a problem hiding this comment.
I think it's OK to just remove this. We'll end up using the palette service for something like this anyway.
| @@ -4,6 +4,7 @@ | |||
| - Fixed issue with unselected tabs and aria-controls attribute in EuiTabbedContent | |||
| - Added `tag` icon ([#1188](https://github.com/elastic/eui/pull/1188)) | |||
| - Replaced `logging` app icon ([#1194](https://github.com/elastic/eui/pull/1194)) | |||
| - Added some opacity options to `EuiLineSeries` and `EuiAreaSeries` ([#1198](https://github.com/elastic/eui/pull/1198)) | |||
There was a problem hiding this comment.
@chandlerprall should we label these under the experimental subheader? Or only do that for experimental breaks?
There was a problem hiding this comment.
I'm fine with either. The chart themselves were/are flagged as experimental, and these changes themselves are not experimental in of themselves.
There was a problem hiding this comment.
Yeah that was kind of my line of thought too
| onSeriesMouseOut={this._onSeriesMouseOut} | ||
| style={{ | ||
| cursor: isMouseOverSeries && onSeriesClick ? 'pointer' : 'default', | ||
| opacity: fillOpacity, |
There was a problem hiding this comment.
react-viz's AreaSeries supports an opacity prop, same as their LineSeries. Did you try passing opacity through?
There was a problem hiding this comment.
I did, and it didn't work
There was a problem hiding this comment.
I poked around, looks like react-viz overrides the opacity value for some series items somewhere in its internals, so that's cool.
Summary
1. Suppressing non-EUI vis color warning
I commented out the console warning (and tests) that displayed if you passed a color that is not one of the EUI vis palette colors. Every chart render would spit out this warning and would really overload the console output. I only commented it for now to allow us to revisit if necessary.
2. Added some opacity options to line and area series’
I kept the defaults of
1but this helps to be able to lessen the line series border and area series fill.Ex:
3. Using the visualize app logo for empty prompt and vertically centering
Also, changed some spacing to be conditional EuiEmptyPrompt (only add space between content and actions if both
bodyandactionsexist).Before
After
Checklist
- [ ] Documentation examples were added- [ ] This was checked for breaking changes and labeled appropriately- [ ] This was checked against keyboard-only and screenreader scenarios