From a25286c98ffbfc1a77f89901ab7e635e20e31e0b Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Sep 2018 12:08:57 -0400 Subject: [PATCH 1/7] Using the visualize app logo for empty prompt and centering --- src/components/series_chart/_index.scss | 1 + src/components/series_chart/_series_chart.scss | 8 ++++++++ src/components/series_chart/series_chart.js | 11 +++++------ src/components/series_chart/status-text.js | 2 +- 4 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 src/components/series_chart/_series_chart.scss diff --git a/src/components/series_chart/_index.scss b/src/components/series_chart/_index.scss index 4653686d02f..c7bc5640ed9 100644 --- a/src/components/series_chart/_index.scss +++ b/src/components/series_chart/_index.scss @@ -10,3 +10,4 @@ @import "series/index"; @import "legend"; @import "line_annotation"; +@import "series_chart"; diff --git a/src/components/series_chart/_series_chart.scss b/src/components/series_chart/_series_chart.scss new file mode 100644 index 00000000000..3ccd2cc7f36 --- /dev/null +++ b/src/components/series_chart/_series_chart.scss @@ -0,0 +1,8 @@ +.euiSeriesChartContainer__emptyPrompt { + // Center the empty prompt within the series container + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} diff --git a/src/components/series_chart/series_chart.js b/src/components/series_chart/series_chart.js index b31646a5108..fa44089c317 100644 --- a/src/components/series_chart/series_chart.js +++ b/src/components/series_chart/series_chart.js @@ -1,4 +1,4 @@ -import React, { PureComponent, Fragment } from 'react'; +import React, { PureComponent } from 'react'; import classNames from 'classnames'; import { XYPlot, AbstractSeries } from 'react-vis'; import { makeFlexible } from './utils/flexible'; @@ -116,12 +116,11 @@ class XYChart extends PureComponent { if (this._isEmptyPlot(children)) { return ( Chart not available} + className="euiSeriesChartContainer__emptyPrompt" + iconType="visualizeApp" + title={Chart not available} body={ - -

{ statusText }

- +

{ statusText }

} /> ); diff --git a/src/components/series_chart/status-text.js b/src/components/series_chart/status-text.js index 45ba7da8121..5dd00a42545 100644 --- a/src/components/series_chart/status-text.js +++ b/src/components/series_chart/status-text.js @@ -16,7 +16,7 @@ function StatusText({ width, height, text }) { }} >
-
{text && {text}} From 182371161325544c42aca40924cf16cb61793d73 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Sep 2018 12:11:45 -0400 Subject: [PATCH 2/7] Suppressing non-EUI vis color warning --- .../__snapshots__/series_chart.test.js.snap | 46 ++++++++++++++----- .../series_chart/series_chart.test.js | 27 +++++------ .../utils/visualization_color_type.js | 3 +- 3 files changed, 50 insertions(+), 26 deletions(-) diff --git a/src/components/series_chart/__snapshots__/series_chart.test.js.snap b/src/components/series_chart/__snapshots__/series_chart.test.js.snap index 983f44f21a9..6f44338de82 100644 --- a/src/components/series_chart/__snapshots__/series_chart.test.js.snap +++ b/src/components/series_chart/__snapshots__/series_chart.test.js.snap @@ -5,20 +5,45 @@ exports[`EuiSeriesChart renders an empty chart 1`] = ` style="width: 100%; height: 100%;" >
- + > + + + +
-

Chart not available -

+
@@ -41,9 +66,6 @@ exports[`EuiSeriesChart renders an empty chart 1`] = ` ~~Empty Chart~~

-
diff --git a/src/components/series_chart/series_chart.test.js b/src/components/series_chart/series_chart.test.js index 7151fb7e2eb..41c1aad9401 100644 --- a/src/components/series_chart/series_chart.test.js +++ b/src/components/series_chart/series_chart.test.js @@ -120,18 +120,19 @@ describe('EuiSeriesChart', () => { expect(lineComponents.at(AVAILABLE_COLORS + 1).props().color).toBe(VISUALIZATION_COLORS[0]); }); - test(`Check wrong EUI color warning`, () => { - const data = [ { x: 0, y: 1 }, { x: 1, y: 2 }]; - const original = console.warn; - const mock = jest.fn(); - console.warn = mock; - mount( - - - ); - expect(console.warn.mock.calls[0][0]).toBe('Prefer safe EUI Visualization Colors.'); - console.warn.mockClear(); - console.warn = original; + // Suppressing warning for now + // test(`Check wrong EUI color warning`, () => { + // const data = [ { x: 0, y: 1 }, { x: 1, y: 2 }]; + // const original = console.warn; + // const mock = jest.fn(); + // console.warn = mock; + // mount( + // + // + // ); + // expect(console.warn.mock.calls[0][0]).toBe('Prefer safe EUI Visualization Colors.'); + // console.warn.mockClear(); + // console.warn = original; - }); + // }); }); diff --git a/src/components/series_chart/utils/visualization_color_type.js b/src/components/series_chart/utils/visualization_color_type.js index 2ce053adc33..74630cbf487 100644 --- a/src/components/series_chart/utils/visualization_color_type.js +++ b/src/components/series_chart/utils/visualization_color_type.js @@ -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.'); } } From d0acf032d4b465b9ba9abe6c6d0aaeb6892fd70a Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Sep 2018 12:14:04 -0400 Subject: [PATCH 3/7] =?UTF-8?q?Adding=20some=20opacity=20options=20to=20li?= =?UTF-8?q?ne=20and=20area=20series=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/area_series.test.js.snap | 532 +++++++++++++++++- .../__snapshots__/line_series.test.js.snap | 2 + .../series_chart/series/_area_series.scss | 1 + .../series_chart/series/area_series.js | 52 +- .../series_chart/series/line_series.js | 9 +- 5 files changed, 567 insertions(+), 29 deletions(-) diff --git a/src/components/series_chart/series/__snapshots__/area_series.test.js.snap b/src/components/series_chart/series/__snapshots__/area_series.test.js.snap index 24764feab26..7fb5aa2d5f6 100644 --- a/src/components/series_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/series_chart/series/__snapshots__/area_series.test.js.snap @@ -153,6 +153,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } fillDomain={Array []} + fillOpacity={1} fillRange={ Array [ "#EF5D28", @@ -181,6 +182,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` innerHeight={150} innerWidth={550} key=".0:$.0" + lineSize={1} marginBottom={40} marginLeft={40} marginRight={10} @@ -236,6 +238,513 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` } yType="linear" > + + + + + + + + + + + + + ); } } @@ -78,8 +94,12 @@ EuiAreaSeries.propTypes = { color: VisualizationColorType, curve: PropTypes.oneOf(Object.values(CURVE)), onSeriesClick: PropTypes.func, + lineSize: PropTypes.number, + fillOpacity: PropTypes.number, }; EuiAreaSeries.defaultProps = { curve: CURVE.LINEAR, + lineSize: 1, + fillOpacity: 1, }; diff --git a/src/components/series_chart/series/line_series.js b/src/components/series_chart/series/line_series.js index 8eb94b20d32..25ac15825e0 100644 --- a/src/components/series_chart/series/line_series.js +++ b/src/components/series_chart/series/line_series.js @@ -17,6 +17,7 @@ export class EuiLineSeries extends AbstractSeries { lineMarkColor, lineMarkSize, color, + borderOpacity, ...rest } = this.props; @@ -27,7 +28,7 @@ export class EuiLineSeries extends AbstractSeries { key={`${name}-border`} curve={curve} data={data} - opacity={1} + opacity={borderOpacity} onSeriesClick={onSeriesClick} style={{ pointerEvents: 'visiblestroke', @@ -90,12 +91,14 @@ EuiLineSeries.propTypes = { lineMarkColor: PropTypes.string, lineMarkSize: PropTypes.number, onSeriesClick: PropTypes.func, - onValueClick: PropTypes.func + onValueClick: PropTypes.func, + borderOpacity: PropTypes.number, }; EuiLineSeries.defaultProps = { curve: CURVE.LINEAR, showLineMarks: false, lineSize: 1, - lineMarkSize: 0 + lineMarkSize: 0, + borderOpacity: 1, }; From 12728228e247c891056f4aaf89dc2e4039b25a90 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Sep 2018 12:20:59 -0400 Subject: [PATCH 4/7] Conditional spacing in EuiEmptyPrompt Only add space beween content and actions if both `body` and `actions` exist. --- .../empty_prompt/__snapshots__/empty_prompt.test.js.snap | 9 +++------ src/components/empty_prompt/empty_prompt.js | 4 +++- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/empty_prompt/__snapshots__/empty_prompt.test.js.snap b/src/components/empty_prompt/__snapshots__/empty_prompt.test.js.snap index c3241d5b6f7..99eccdffc30 100644 --- a/src/components/empty_prompt/__snapshots__/empty_prompt.test.js.snap +++ b/src/components/empty_prompt/__snapshots__/empty_prompt.test.js.snap @@ -48,10 +48,10 @@ exports[`EuiEmptyPrompt is rendered 1`] = ` Body

-
+
@@ -108,9 +108,6 @@ exports[`EuiEmptyPrompt props body renders alone 1`] = ` > body
-
`; diff --git a/src/components/empty_prompt/empty_prompt.js b/src/components/empty_prompt/empty_prompt.js index 5ae19dffe83..26ba32374e3 100644 --- a/src/components/empty_prompt/empty_prompt.js +++ b/src/components/empty_prompt/empty_prompt.js @@ -56,7 +56,6 @@ export const EuiEmptyPrompt = ({ {body} - ); } @@ -108,6 +107,9 @@ export const EuiEmptyPrompt = ({ > {icon} {content} + {body && actions && + + } {actionsEl}
); From 0015dfd260f8d7d255f6d432dd78e51a3d6904d4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Sep 2018 12:38:57 -0400 Subject: [PATCH 5/7] Fixing opacities --- .../series/__snapshots__/area_series.test.js.snap | 6 +++--- .../series/__snapshots__/line_series.test.js.snap | 6 ++++++ src/components/series_chart/series/_area_series.scss | 3 +-- src/components/series_chart/series/area_series.js | 2 +- src/components/series_chart/series/line_series.js | 2 +- 5 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/series_chart/series/__snapshots__/area_series.test.js.snap b/src/components/series_chart/series/__snapshots__/area_series.test.js.snap index 7fb5aa2d5f6..f91b6f2193f 100644 --- a/src/components/series_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/series_chart/series/__snapshots__/area_series.test.js.snap @@ -832,7 +832,6 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` onSeriesClick={[MockFunction]} onSeriesMouseOut={[Function]} onSeriesMouseOver={[Function]} - opacity={1} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -857,6 +856,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` style={ Object { "cursor": "default", + "opacity": 1, } } xDomain={ @@ -1012,7 +1012,6 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` onSeriesClick={[MockFunction]} onSeriesMouseOut={[Function]} onSeriesMouseOver={[Function]} - opacity={1} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -1037,6 +1036,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` style={ Object { "cursor": "default", + "opacity": 1, } } xDomain={ @@ -1174,7 +1174,6 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` onSeriesClick={[MockFunction]} onSeriesMouseOut={[Function]} onSeriesMouseOver={[Function]} - opacity={1} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -1199,6 +1198,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` style={ Object { "cursor": "default", + "opacity": 1, } } xDomain={ diff --git a/src/components/series_chart/series/__snapshots__/line_series.test.js.snap b/src/components/series_chart/series/__snapshots__/line_series.test.js.snap index d6074555f73..5fef54fa7e2 100644 --- a/src/components/series_chart/series/__snapshots__/line_series.test.js.snap +++ b/src/components/series_chart/series/__snapshots__/line_series.test.js.snap @@ -345,6 +345,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` strokeStyle="solid" style={ Object { + "opacity": 1, "pointerEvents": "visiblestroke", "strokeWidth": 3, } @@ -525,6 +526,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` strokeStyle="solid" style={ Object { + "opacity": 1, "pointerEvents": "visiblestroke", "strokeWidth": 3, } @@ -687,6 +689,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` strokeStyle="solid" style={ Object { + "opacity": 1, "pointerEvents": "visiblestroke", "strokeWidth": 3, } @@ -4463,6 +4466,7 @@ exports[`EuiLineSeries is rendered 1`] = ` strokeStyle="solid" style={ Object { + "opacity": 1, "pointerEvents": "visiblestroke", "strokeWidth": 3, } @@ -4641,6 +4645,7 @@ exports[`EuiLineSeries is rendered 1`] = ` strokeStyle="solid" style={ Object { + "opacity": 1, "pointerEvents": "visiblestroke", "strokeWidth": 3, } @@ -4801,6 +4806,7 @@ exports[`EuiLineSeries is rendered 1`] = ` strokeStyle="solid" style={ Object { + "opacity": 1, "pointerEvents": "visiblestroke", "strokeWidth": 3, } diff --git a/src/components/series_chart/series/_area_series.scss b/src/components/series_chart/series/_area_series.scss index 416b3b7cba0..49eaa94b286 100644 --- a/src/components/series_chart/series/_area_series.scss +++ b/src/components/series_chart/series/_area_series.scss @@ -1,4 +1,3 @@ .euiAreaSeries { - stroke-width: 0; - opacity: .2 !important; + stroke-width: 0 !important; } diff --git a/src/components/series_chart/series/area_series.js b/src/components/series_chart/series/area_series.js index 2f2496379af..986ac3c5aa1 100644 --- a/src/components/series_chart/series/area_series.js +++ b/src/components/series_chart/series/area_series.js @@ -65,13 +65,13 @@ export class EuiAreaSeries extends AbstractSeries { className="euiAreaSeries" curve={curve} color={color} - opacity={fillOpacity} data={data} onSeriesClick={onSeriesClick} onSeriesMouseOver={this._onSeriesMouseOver} onSeriesMouseOut={this._onSeriesMouseOut} style={{ cursor: isMouseOverSeries && onSeriesClick ? 'pointer' : 'default', + opacity: fillOpacity, }} {...rest} /> diff --git a/src/components/series_chart/series/line_series.js b/src/components/series_chart/series/line_series.js index 25ac15825e0..0e202e3a0f8 100644 --- a/src/components/series_chart/series/line_series.js +++ b/src/components/series_chart/series/line_series.js @@ -28,11 +28,11 @@ export class EuiLineSeries extends AbstractSeries { key={`${name}-border`} curve={curve} data={data} - opacity={borderOpacity} onSeriesClick={onSeriesClick} style={{ pointerEvents: 'visiblestroke', strokeWidth: lineSize + 2, // border margin + opacity: borderOpacity, }} _colorValue={'white'} /> From f1e443b268340af92b0c00846a2df63a2923642f Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Sep 2018 12:52:33 -0400 Subject: [PATCH 6/7] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa93664bbaf..3a0a36a75ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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)) **Bug fixes** From a1f26a83271118bdc6fd8b7e5ff2ad79943066db Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 18 Sep 2018 13:01:17 -0400 Subject: [PATCH 7/7] Completely removing non-EUI color warning --- src/components/series_chart/series_chart.test.js | 16 ---------------- .../utils/visualization_color_type.js | 6 ------ 2 files changed, 22 deletions(-) diff --git a/src/components/series_chart/series_chart.test.js b/src/components/series_chart/series_chart.test.js index 41c1aad9401..f6fd752c98b 100644 --- a/src/components/series_chart/series_chart.test.js +++ b/src/components/series_chart/series_chart.test.js @@ -119,20 +119,4 @@ describe('EuiSeriesChart', () => { expect(lineComponents.at(2).props().color).toBe(VISUALIZATION_COLORS[1]); expect(lineComponents.at(AVAILABLE_COLORS + 1).props().color).toBe(VISUALIZATION_COLORS[0]); }); - - // Suppressing warning for now - // test(`Check wrong EUI color warning`, () => { - // const data = [ { x: 0, y: 1 }, { x: 1, y: 2 }]; - // const original = console.warn; - // const mock = jest.fn(); - // console.warn = mock; - // mount( - // - // - // ); - // expect(console.warn.mock.calls[0][0]).toBe('Prefer safe EUI Visualization Colors.'); - // console.warn.mockClear(); - // console.warn = original; - - // }); }); diff --git a/src/components/series_chart/utils/visualization_color_type.js b/src/components/series_chart/utils/visualization_color_type.js index 74630cbf487..2bfbe965f9c 100644 --- a/src/components/series_chart/utils/visualization_color_type.js +++ b/src/components/series_chart/utils/visualization_color_type.js @@ -1,5 +1,3 @@ -import { VISUALIZATION_COLORS } from '../../../services'; - export function VisualizationColorType(props, propName) { const color = props[propName]; if (color === undefined) { @@ -10,8 +8,4 @@ export function VisualizationColorType(props, propName) { if (!(typeof color === 'string' || color instanceof String) || !color.startsWith('#')) { return new Error('Color must be a valid hex color string in the form #RRGGBB'); } - if (!VISUALIZATION_COLORS.includes(color.toUpperCase())) { - // Suppress warning for now as it can overwhelm the console for custom charts - // console.warn('Prefer safe EUI Visualization Colors.'); - } }