From 328480f6d8f76049965454717798ac196423899e Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 1 Jun 2018 12:08:33 +0200 Subject: [PATCH 01/68] First version of barchart/histogram with examples --- .../src/views/xy_chart_series/bar_series.js | 12 - .../xy_chart_series/horizontal_bar_series.js | 23 + .../xy_chart_series/horizontal_rect_series.js | 22 + .../views/xy_chart_series/series_example.js | 163 +- .../stacked_horizontal_bar_series.js | 78 + .../stacked_vertical_bar_series.js | 78 + .../xy_chart_series/vertical_bar_series.js | 24 + .../xy_chart_series/vertical_rect_series.js | 23 + src/components/index.js | 7 +- .../xy_chart/__snapshots__/area.test.js.snap | 62 - .../xy_chart/__snapshots__/bar.test.js.snap | 6772 ----------------- .../xy_chart/__snapshots__/chart.test.js.snap | 1 - .../xy_chart/__snapshots__/line.test.js.snap | 54 - src/components/xy_chart/chart.js | 15 +- .../xy_chart/horizontal_bar_series.js | 44 + .../xy_chart/horizontal_rect_series.js | 44 + src/components/xy_chart/index.js | 14 +- .../xy_chart/vertical_bar_series.js | 42 + ...ar.test.js => vertical_bar_series.test.js} | 12 +- .../{bar.js => vertical_rect_series.js} | 12 +- 20 files changed, 569 insertions(+), 6933 deletions(-) delete mode 100644 src-docs/src/views/xy_chart_series/bar_series.js create mode 100644 src-docs/src/views/xy_chart_series/horizontal_bar_series.js create mode 100644 src-docs/src/views/xy_chart_series/horizontal_rect_series.js create mode 100644 src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js create mode 100644 src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js create mode 100644 src-docs/src/views/xy_chart_series/vertical_bar_series.js create mode 100644 src-docs/src/views/xy_chart_series/vertical_rect_series.js delete mode 100644 src/components/xy_chart/__snapshots__/bar.test.js.snap create mode 100644 src/components/xy_chart/horizontal_bar_series.js create mode 100644 src/components/xy_chart/horizontal_rect_series.js create mode 100644 src/components/xy_chart/vertical_bar_series.js rename src/components/xy_chart/{bar.test.js => vertical_bar_series.test.js} (89%) rename src/components/xy_chart/{bar.js => vertical_rect_series.js} (78%) diff --git a/src-docs/src/views/xy_chart_series/bar_series.js b/src-docs/src/views/xy_chart_series/bar_series.js deleted file mode 100644 index d2b31cd1d096..000000000000 --- a/src-docs/src/views/xy_chart_series/bar_series.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import { EuiXYChart, EuiBar } from '../../../../src/components'; - -export default () => ( - - - -); \ No newline at end of file diff --git a/src-docs/src/views/xy_chart_series/horizontal_bar_series.js b/src-docs/src/views/xy_chart_series/horizontal_bar_series.js new file mode 100644 index 000000000000..8be242d688f5 --- /dev/null +++ b/src-docs/src/views/xy_chart_series/horizontal_bar_series.js @@ -0,0 +1,23 @@ +import React from 'react'; + +import { EuiXYChart, EuiHorizontalBarSeries } from '../../../../src/components'; + +const data = [ + { x: 3, y: 'A' }, + { x: 1, y: 'B' }, + { x: 5, y: 'C' }, + { x: 2, y: 'D' }, + { x: 1, y: 'E' } +] +export default () => ( + + + +); diff --git a/src-docs/src/views/xy_chart_series/horizontal_rect_series.js b/src-docs/src/views/xy_chart_series/horizontal_rect_series.js new file mode 100644 index 000000000000..0c5284747c72 --- /dev/null +++ b/src-docs/src/views/xy_chart_series/horizontal_rect_series.js @@ -0,0 +1,22 @@ +import React from 'react'; + +import { EuiXYChart, EuiHorizontalRectSeries } from '../../../../src/components'; + +const data = [ + { x: 3, y: 0, y0: 1 }, + { x: 1, y: 1, y0: 2 }, + { x: 5, y: 2, y0: 3 }, + { x: 2, y: 3, y0: 4 }, + { x: 1, y: 4, y0: 5 }, +] +export default () => ( + + + +); diff --git a/src-docs/src/views/xy_chart_series/series_example.js b/src-docs/src/views/xy_chart_series/series_example.js index ac26a419e457..6a3ce1a71118 100644 --- a/src-docs/src/views/xy_chart_series/series_example.js +++ b/src-docs/src/views/xy_chart_series/series_example.js @@ -1,12 +1,17 @@ import React from 'react'; import { GuideSectionTypes } from '../../components'; import LineSeriesExample from './line_series'; -import BarSeriesExample from './bar_series'; +import VerticalBarSeriesExample from './vertical_bar_series'; +import HorizontalBarSeriesExample from './horizontal_bar_series'; +import StackedHorizontalBarSeriesExample from './stacked_horizontal_bar_series'; +import StackedVerticalBarSeriesExample from './stacked_vertical_bar_series'; +import VerticalRectSeriesExample from './vertical_rect_series'; +import HorizontalRectSeriesExample from './horizontal_rect_series'; import AreaSeriesExample from './area_series'; -import { EuiCode, EuiBar, EuiLine, EuiArea } from '../../../../src/components'; +import { EuiCode, EuiVerticalBarSeries, EuiHorizontalBarSeries, EuiLine, EuiArea } from '../../../../src/components'; export const XYChartSeriesExample = { - title: 'XYChart Series', + title: 'XYChart Series', sections: [ { title: 'Line Series', @@ -65,19 +70,21 @@ export const XYChartSeriesExample = { ) }, { - title: 'Bar Series', + title: 'Vertical Bar Chart', text: (

- When no data is provided to EuiXYChart, an empty state is displayed + Use EuiXYChart with EuiVerticalBarSeries for displaying + vertical bar charts. Use the appropriate xType props to match your + x value scale. Available values are: ordinal,linear

), - props: { EuiBar }, + props: { EuiVerticalBarSeries }, source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./bar_series') + code: require('!!raw-loader!./vertical_bar_series') }, { type: GuideSectionTypes.HTML, @@ -86,9 +93,147 @@ export const XYChartSeriesExample = { ], demo: (
- +
) - } + }, + { + title: 'Horizontal Bar Chart', + text: ( +
+

+ Use EuiXYChart with EuiHorizontalBarSeries for displaying + horizontal bar charts. Use the appropriate yType props to match your + y value scale. Available values are: ordinal,linear +

+
+ ), + props: { EuiHorizontalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./horizontal_bar_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Vertical Histogram', + text: ( +
+

+ Use EuiXYChart with EuiVerticalRectSeries for displaying + vertical histograms. +

+
+ ), + props: { EuiVerticalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./vertical_rect_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Horizontal Histogram', + text: ( +
+

+ Use EuiXYChart with EuiVerticalRectSeries for displaying + an horizontal histogram. +

+
+ ), + props: { EuiVerticalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./vertical_rect_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Stacked Horizontal Bar Chart', + text: ( +
+

+ Use EuiXYChart with EuiHorizontalBarSeries for displaying + horizontal bar charts. Use the appropriate yType props to match your + y value scale. Available values are: ordinal,linear +

+
+ ), + props: { EuiHorizontalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./stacked_horizontal_bar_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Stacked Vertical Bar Chart', + text: ( +
+

+ Use EuiXYChart with EuiHorizontalBarSeries for displaying + horizontal bar charts. Use the appropriate yType props to match your + y value scale. Available values are: ordinal,linear +

+
+ ), + props: { EuiHorizontalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./stacked_vertical_bar_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, ] }; diff --git a/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js b/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js new file mode 100644 index 000000000000..bb4bec36b87e --- /dev/null +++ b/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js @@ -0,0 +1,78 @@ +import React, { Component } from 'react'; + +import { + EuiButton, + EuiXYChart, + EuiHorizontalBarSeries, +} from '../../../../src/components'; + +const data = [ + [ + { x: 1, y: 'A' }, + { x: 2, y: 'B' }, + { x: 3, y: 'C' }, + { x: 4, y: 'D' }, + { x: 5, y: 'E' }, + ], + [ + { x: 3, y: 'A' }, + { x: 2, y: 'B' }, + { x: 1, y: 'C' }, + { x: 2, y: 'D' }, + { x: 3, y: 'E' }, + ] +]; +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + stacked: true, + }; + } + + onSwitchStacked = () => { + this.setState({ + stacked: !this.state.stacked, + }); + } + renderBars = () => { + const { stacked } = this.state + return data.map((d, i) => { + return ( + + ) + }) + } + + render() { + + return ( +
+ + Toggle stacked + + + { + this.renderBars() + } + + +
+ ) + } +} diff --git a/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js b/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js new file mode 100644 index 000000000000..5b3606ee0221 --- /dev/null +++ b/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js @@ -0,0 +1,78 @@ +import React, { Component } from 'react'; + +import { + EuiButton, + EuiXYChart, + EuiVerticalBarSeries, +} from '../../../../src/components'; + +const data = [ + [ + { x: 'A', y: 3 }, + { x: 'B', y: 1 }, + { x: 'C', y: 5 }, + { x: 'D', y: 2 }, + { x: 'E', y: 1 }, + ], + [ + { x: 'A', y: 1 }, + { x: 'B', y: 2 }, + { x: 'C', y: 3 }, + { x: 'D', y: 4 }, + { x: 'E', y: 5 }, + ] +]; +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + stacked: true, + }; + } + + onSwitchStacked = () => { + this.setState({ + stacked: !this.state.stacked, + }); + } + renderBars = () => { + const { stacked } = this.state + return data.map((d, i) => { + return ( + + ) + }) + } + + render() { + + return ( +
+ + Toggle stacked + + + { + this.renderBars() + } + + +
+ ) + } +} diff --git a/src-docs/src/views/xy_chart_series/vertical_bar_series.js b/src-docs/src/views/xy_chart_series/vertical_bar_series.js new file mode 100644 index 000000000000..b609ab00bab8 --- /dev/null +++ b/src-docs/src/views/xy_chart_series/vertical_bar_series.js @@ -0,0 +1,24 @@ +import React from 'react'; + +import { EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; + +const data = [ + { x: 'A', y: 3 }, + { x: 'B', y: 1 }, + { x: 'C', y: 5 }, + { x: 'D', y: 2 }, + { x: 'E', y: 1 }, +] + +export default () => ( + + + +); diff --git a/src-docs/src/views/xy_chart_series/vertical_rect_series.js b/src-docs/src/views/xy_chart_series/vertical_rect_series.js new file mode 100644 index 000000000000..78ebb4bde151 --- /dev/null +++ b/src-docs/src/views/xy_chart_series/vertical_rect_series.js @@ -0,0 +1,23 @@ +import React from 'react'; + +import { EuiXYChart, EuiVerticalRectSeries } from '../../../../src/components'; + +const data = [ + { x0: 0, x: 1, y: 1 }, + { x0: 1, x: 2, y: 3 }, + { x0: 2, x: 3, y: 2 }, + { x0: 3, x: 4, y: 0.5 }, + { x0: 4, x: 5, y: 5 }, +] + +export default () => ( + + + +); diff --git a/src/components/index.js b/src/components/index.js index 4183ccd24d78..6382aa9e00db 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -306,5 +306,8 @@ export { EuiXYChart, EuiLine, EuiArea, - EuiBar -} from './xy_chart'; \ No newline at end of file + EuiVerticalBarSeries, + EuiHorizontalBarSeries, + EuiVerticalRectSeries, + EuiHorizontalRectSeries, +} from './xy_chart'; diff --git a/src/components/xy_chart/__snapshots__/area.test.js.snap b/src/components/xy_chart/__snapshots__/area.test.js.snap index 99e1f750b518..20c9f8225616 100644 --- a/src/components/xy_chart/__snapshots__/area.test.js.snap +++ b/src/components/xy_chart/__snapshots__/area.test.js.snap @@ -16,7 +16,6 @@ exports[`EuiArea all props are rendered 1`] = `
-
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -0.4 - - - - - - -0.2 - - - - - - 0.0 - - - - - - 0.2 - - - - - - 0.4 - - - - - - 0.6 - - - - - - 0.8 - - - - - - 1.0 - - - - - - 1.2 - - - - - - 1.4 - - - - - - - - - - - - - - - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- -`; - -exports[`EuiBar is rendered 1`] = ` - -
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -0.4 - - - - - - -0.2 - - - - - - 0.0 - - - - - - 0.2 - - - - - - 0.4 - - - - - - 0.6 - - - - - - 0.8 - - - - - - 1.0 - - - - - - 1.2 - - - - - - 1.4 - - - - - - - - - - - - - - - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- -`; diff --git a/src/components/xy_chart/__snapshots__/chart.test.js.snap b/src/components/xy_chart/__snapshots__/chart.test.js.snap index 2ec3454ac13d..999858655eac 100644 --- a/src/components/xy_chart/__snapshots__/chart.test.js.snap +++ b/src/components/xy_chart/__snapshots__/chart.test.js.snap @@ -84,7 +84,6 @@ exports[`EuiXYChart passes handler functions 1`] = `
{showAxis && [ @@ -212,6 +216,9 @@ export class XYChart extends PureComponent { XYChart.propTypes = { width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, + stackBy: PropTypes.string, + xType: PropTypes.string, + yType: PropTypes.string, onHover: PropTypes.func, onMouseLeave: PropTypes.func, onSelectEnd: PropTypes.func, @@ -222,18 +229,16 @@ XYChart.propTypes = { showAxis: PropTypes.bool, xAxisLocation: PropTypes.string, yAxisLocation: PropTypes.string, - mode: PropTypes.string, showTooltips: PropTypes.bool, errorText: PropTypes.string, crosshairX: PropTypes.number, - onCrosshairUpdate: PropTypes.func + onCrosshairUpdate: PropTypes.func, }; XYChart.defaultProps = { truncateLegends: false, showAxis: true, showTooltips: true, - mode: 'linear', }; export default makeWidthFlexible(XYChart); diff --git a/src/components/xy_chart/horizontal_bar_series.js b/src/components/xy_chart/horizontal_bar_series.js new file mode 100644 index 000000000000..e6bf44ea596d --- /dev/null +++ b/src/components/xy_chart/horizontal_bar_series.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { HorizontalBarSeries } from 'react-vis'; + +class EuiHorizontalBarSeries extends HorizontalBarSeries { + render() { + const { name, data, color, onClick, ...rest } = this.props; + + return ( + + + + ); + } +} +export default EuiHorizontalBarSeries; + +EuiHorizontalBarSeries.propTypes = { + /** The name used to define the data in tooltips and ledgends */ + name: PropTypes.string.isRequired, + /** Array<{x: string|number, y: string|number}> */ + data: PropTypes.arrayOf(PropTypes.shape({ + x: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + y: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + })).isRequired, + /** Without a color set, a random EUI color palette color will be chosen */ + color: PropTypes.string, + onClick: PropTypes.func +}; + +EuiHorizontalBarSeries.defaultProps = {}; diff --git a/src/components/xy_chart/horizontal_rect_series.js b/src/components/xy_chart/horizontal_rect_series.js new file mode 100644 index 000000000000..9bc891e6d51a --- /dev/null +++ b/src/components/xy_chart/horizontal_rect_series.js @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { HorizontalRectSeries } from 'react-vis'; + +class EuiHorizontalBarSeries extends HorizontalRectSeries { + render() { + const { name, data, color, onClick, ...rest } = this.props; + + return ( + + + + ); + } +} +export default EuiHorizontalBarSeries; + +EuiHorizontalBarSeries.propTypes = { + /** The name used to define the data in tooltips and ledgends */ + name: PropTypes.string.isRequired, + /** Array<{x: string|number, y: string|number}> */ + data: PropTypes.arrayOf(PropTypes.shape({ + x: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + y: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + })).isRequired, + /** Without a color set, a random EUI color palette color will be chosen */ + color: PropTypes.string, + onClick: PropTypes.func +}; + +EuiHorizontalBarSeries.defaultProps = {}; diff --git a/src/components/xy_chart/index.js b/src/components/xy_chart/index.js index b375c1a81f23..3dafdc19dc30 100644 --- a/src/components/xy_chart/index.js +++ b/src/components/xy_chart/index.js @@ -2,14 +2,20 @@ import { asSeries } from './as_series'; import EuiXYChart from './chart'; import * as utils from './utils'; import { EuiLine } from './line'; -import EuiBar from './bar'; +import EuiVerticalBarSeries from './vertical_bar_series'; +import EuiHorizontalBarSeries from './horizontal_bar_series'; +import EuiVerticalRectSeries from './vertical_rect_series'; +import EuiHorizontalRectSeries from './horizontal_rect_series'; import{ EuiArea } from './area'; -export { +export { EuiXYChart, EuiLine, EuiArea, - EuiBar, + EuiVerticalBarSeries, + EuiHorizontalBarSeries, + EuiVerticalRectSeries, + EuiHorizontalRectSeries, utils, asSeries -}; \ No newline at end of file +}; diff --git a/src/components/xy_chart/vertical_bar_series.js b/src/components/xy_chart/vertical_bar_series.js new file mode 100644 index 000000000000..384363bfee94 --- /dev/null +++ b/src/components/xy_chart/vertical_bar_series.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { VerticalBarSeries } from 'react-vis'; + +class EuiVerticalBarSeries extends VerticalBarSeries { + render() { + const { name, data, color, onClick, ...rest } = this.props; + + return ( + + ); + } +} +export default EuiVerticalBarSeries; + +EuiVerticalBarSeries.propTypes = { + /** The name used to define the data in tooltips and ledgends */ + name: PropTypes.string.isRequired, + /** Array<{x: string|number, y: string|number}> */ + data: PropTypes.arrayOf(PropTypes.shape({ + x: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + y: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + })).isRequired, + /** Without a color set, a random EUI color palette color will be chosen */ + color: PropTypes.string, + onClick: PropTypes.func +}; + +EuiVerticalBarSeries.defaultProps = {}; diff --git a/src/components/xy_chart/bar.test.js b/src/components/xy_chart/vertical_bar_series.test.js similarity index 89% rename from src/components/xy_chart/bar.test.js rename to src/components/xy_chart/vertical_bar_series.test.js index a086d0caca8e..73e05c9356a6 100644 --- a/src/components/xy_chart/bar.test.js +++ b/src/components/xy_chart/vertical_bar_series.test.js @@ -4,17 +4,17 @@ import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { requiredProps } from '../../test/required_props'; import EuiXYChart from './chart'; -import EuiBar from './bar'; +import EuiVerticalBarSeries from './vertical_bar_series'; import { benchmarkFunction } from '../../test/time_execution'; beforeEach(patchRandom); afterEach(unpatchRandom); -describe('EuiBar', () => { +describe.skip('EuiVerticalBarSeries', () => { test('is rendered', () => { const component = mount( - @@ -27,7 +27,7 @@ describe('EuiBar', () => { test('all props are rendered', () => { const component = mount( - { function renderChart() { render( - + ) } @@ -94,7 +94,7 @@ describe('EuiBar', () => { render( {linesData.map((data, index) => ( - + ))} ) diff --git a/src/components/xy_chart/bar.js b/src/components/xy_chart/vertical_rect_series.js similarity index 78% rename from src/components/xy_chart/bar.js rename to src/components/xy_chart/vertical_rect_series.js index 9d54695ef776..a05f09e61b06 100644 --- a/src/components/xy_chart/bar.js +++ b/src/components/xy_chart/vertical_rect_series.js @@ -1,14 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { VerticalBarSeries } from 'react-vis'; +import { VerticalRectSeries } from 'react-vis'; -class EUIBarSeries extends VerticalBarSeries { +class EuiVerticalBarSeries extends VerticalRectSeries { render() { const { name, data, color, onClick, ...rest } = this.props; return ( - */ @@ -41,4 +41,4 @@ EUIBarSeries.propTypes = { onClick: PropTypes.func }; -EUIBarSeries.defaultProps = {}; +EuiVerticalBarSeries.defaultProps = {}; From 9ceb425321749d85b12b264d105f9cafae060cf4 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 1 Jun 2018 12:30:53 +0200 Subject: [PATCH 02/68] Fix wrong component naming. Fix stacked mechanism --- .../stacked_horizontal_bar_series.js | 57 +- .../stacked_vertical_bar_series.js | 58 +- .../vertical_bar_series.test.js.snap | 6724 +++++++++++++++++ .../xy_chart/horizontal_rect_series.js | 8 +- .../xy_chart/vertical_rect_series.js | 7 +- 5 files changed, 6780 insertions(+), 74 deletions(-) create mode 100644 src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap diff --git a/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js b/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js index bb4bec36b87e..f443646cfea4 100644 --- a/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js +++ b/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js @@ -6,22 +6,21 @@ import { EuiHorizontalBarSeries, } from '../../../../src/components'; -const data = [ - [ - { x: 1, y: 'A' }, - { x: 2, y: 'B' }, - { x: 3, y: 'C' }, - { x: 4, y: 'D' }, - { x: 5, y: 'E' }, - ], - [ - { x: 3, y: 'A' }, - { x: 2, y: 'B' }, - { x: 1, y: 'C' }, - { x: 2, y: 'D' }, - { x: 3, y: 'E' }, - ] +const dataA = [ + { x: 1, y: 'A' }, + { x: 2, y: 'B' }, + { x: 3, y: 'C' }, + { x: 4, y: 'D' }, + { x: 5, y: 'E' }, ]; +const dataB = [ + { x: 3, y: 'A' }, + { x: 2, y: 'B' }, + { x: 1, y: 'C' }, + { x: 2, y: 'D' }, + { x: 3, y: 'E' }, +]; + export default class extends Component { constructor(props) { super(props); @@ -36,22 +35,9 @@ export default class extends Component { stacked: !this.state.stacked, }); } - renderBars = () => { - const { stacked } = this.state - return data.map((d, i) => { - return ( - - ) - }) - } render() { - + const { stacked } = this.state return (
- { - this.renderBars() - } + +
diff --git a/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js b/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js index 5b3606ee0221..94ab4a93b04a 100644 --- a/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js @@ -6,22 +6,22 @@ import { EuiVerticalBarSeries, } from '../../../../src/components'; -const data = [ - [ - { x: 'A', y: 3 }, - { x: 'B', y: 1 }, - { x: 'C', y: 5 }, - { x: 'D', y: 2 }, - { x: 'E', y: 1 }, - ], - [ - { x: 'A', y: 1 }, - { x: 'B', y: 2 }, - { x: 'C', y: 3 }, - { x: 'D', y: 4 }, - { x: 'E', y: 5 }, - ] +const dataA = [ + { x: 'A', y: 3 }, + { x: 'B', y: 1 }, + { x: 'C', y: 5 }, + { x: 'D', y: 2 }, + { x: 'E', y: 1 }, ]; + +const dataB = [ + { x: 'A', y: 1 }, + { x: 'B', y: 2 }, + { x: 'C', y: 3 }, + { x: 'D', y: 4 }, + { x: 'E', y: 5 }, +]; + export default class extends Component { constructor(props) { super(props); @@ -36,22 +36,9 @@ export default class extends Component { stacked: !this.state.stacked, }); } - renderBars = () => { - const { stacked } = this.state - return data.map((d, i) => { - return ( - - ) - }) - } render() { - + const { stacked } = this.state return (
- { - this.renderBars() - } + +
diff --git a/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap b/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap new file mode 100644 index 000000000000..1ecc63cf4ec7 --- /dev/null +++ b/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap @@ -0,0 +1,6724 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiVerticalBarSeries all props are rendered 1`] = ` + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -0.4 + + + + + + -0.2 + + + + + + 0.0 + + + + + + 0.2 + + + + + + 0.4 + + + + + + 0.6 + + + + + + 0.8 + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +`; + +exports[`EuiVerticalBarSeries is rendered 1`] = ` + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -0.4 + + + + + + -0.2 + + + + + + 0.0 + + + + + + 0.2 + + + + + + 0.4 + + + + + + 0.6 + + + + + + 0.8 + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +`; diff --git a/src/components/xy_chart/horizontal_rect_series.js b/src/components/xy_chart/horizontal_rect_series.js index 9bc891e6d51a..4cec4d2cd997 100644 --- a/src/components/xy_chart/horizontal_rect_series.js +++ b/src/components/xy_chart/horizontal_rect_series.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { HorizontalRectSeries } from 'react-vis'; -class EuiHorizontalBarSeries extends HorizontalRectSeries { +class EuiHorizontalRectSeries extends HorizontalRectSeries { render() { const { name, data, color, onClick, ...rest } = this.props; @@ -20,9 +20,9 @@ class EuiHorizontalBarSeries extends HorizontalRectSeries { ); } } -export default EuiHorizontalBarSeries; +export default EuiHorizontalRectSeries; -EuiHorizontalBarSeries.propTypes = { +EuiHorizontalRectSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, /** Array<{x: string|number, y: string|number}> */ @@ -41,4 +41,4 @@ EuiHorizontalBarSeries.propTypes = { onClick: PropTypes.func }; -EuiHorizontalBarSeries.defaultProps = {}; +EuiHorizontalRectSeries.defaultProps = {}; diff --git a/src/components/xy_chart/vertical_rect_series.js b/src/components/xy_chart/vertical_rect_series.js index a05f09e61b06..711fd7e121fe 100644 --- a/src/components/xy_chart/vertical_rect_series.js +++ b/src/components/xy_chart/vertical_rect_series.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { VerticalRectSeries } from 'react-vis'; -class EuiVerticalBarSeries extends VerticalRectSeries { +export default class EuiVerticalRectSeries extends VerticalRectSeries { render() { const { name, data, color, onClick, ...rest } = this.props; @@ -20,9 +20,8 @@ class EuiVerticalBarSeries extends VerticalRectSeries { ); } } -export default EuiVerticalBarSeries; -EuiVerticalBarSeries.propTypes = { +EuiVerticalRectSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, /** Array<{x: string|number, y: string|number}> */ @@ -41,4 +40,4 @@ EuiVerticalBarSeries.propTypes = { onClick: PropTypes.func }; -EuiVerticalBarSeries.defaultProps = {}; +EuiVerticalRectSeries.defaultProps = {}; From a1639165570c4a0a196c0053792fe7126212c8f3 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 1 Jun 2018 18:01:52 +0200 Subject: [PATCH 03/68] Update examples --- .../views/xy_chart_series/series_example.js | 58 + .../stacked_horizontal_rect_series.js | 41 + .../stacked_vertical_bar_series.js | 20 +- .../stacked_vertical_rect_series.js | 41 + .../vertical_bar_series.test.js.snap | 7978 +++-------------- .../vertical_rect_series.test.js.snap | 1362 +++ .../xy_chart/horizontal_bar_series.js | 7 +- .../xy_chart/horizontal_rect_series.js | 7 +- .../xy_chart/vertical_bar_series.js | 7 +- .../xy_chart/vertical_bar_series.test.js | 34 +- .../xy_chart/vertical_rect_series.js | 7 +- .../xy_chart/vertical_rect_series.test.js | 135 + 12 files changed, 2985 insertions(+), 6712 deletions(-) create mode 100644 src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js create mode 100644 src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js create mode 100644 src/components/xy_chart/__snapshots__/vertical_rect_series.test.js.snap create mode 100644 src/components/xy_chart/vertical_rect_series.test.js diff --git a/src-docs/src/views/xy_chart_series/series_example.js b/src-docs/src/views/xy_chart_series/series_example.js index 6a3ce1a71118..3516e8921fb8 100644 --- a/src-docs/src/views/xy_chart_series/series_example.js +++ b/src-docs/src/views/xy_chart_series/series_example.js @@ -4,7 +4,9 @@ import LineSeriesExample from './line_series'; import VerticalBarSeriesExample from './vertical_bar_series'; import HorizontalBarSeriesExample from './horizontal_bar_series'; import StackedHorizontalBarSeriesExample from './stacked_horizontal_bar_series'; +import StackedHorizontalRectSeriesExample from './stacked_horizontal_rect_series'; import StackedVerticalBarSeriesExample from './stacked_vertical_bar_series'; +import StackedVerticalRectSeriesExample from './stacked_vertical_rect_series'; import VerticalRectSeriesExample from './vertical_rect_series'; import HorizontalRectSeriesExample from './horizontal_rect_series'; import AreaSeriesExample from './area_series'; @@ -235,5 +237,61 @@ export const XYChartSeriesExample = {
) }, + { + title: 'Stacked Vertical Histogram', + text: ( +
+

+ Use EuiXYChart with EuiHorizontalBarSeries for displaying + horizontal bar charts. Use the appropriate yType props to match your + y value scale. Available values are: ordinal,linear +

+
+ ), + props: { EuiHorizontalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./stacked_vertical_rect_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Stacked Horizontal Histogram', + text: ( +
+

+ Use EuiXYChart with EuiHorizontalBarSeries for displaying + horizontal bar charts. Use the appropriate yType props to match your + y value scale. Available values are: ordinal,linear +

+
+ ), + props: { EuiHorizontalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./stacked_horizontal_rect_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, ] }; diff --git a/src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js b/src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js new file mode 100644 index 000000000000..e1ddabd91a0e --- /dev/null +++ b/src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js @@ -0,0 +1,41 @@ +import React from 'react'; + +import { + EuiXYChart, + EuiHorizontalRectSeries, +} from '../../../../src/components'; + +const dataA = [ + { y: 0, y0: 1, x: 1 }, + { y: 1, y0: 2, x: 2 }, + { y: 2, y0: 3, x: 3 }, + { y: 3, y0: 4, x: 4 }, + { y: 4, y0: 5, x: 5 }, +]; + +const dataB = [ + { y: 0, y0: 1, x: 5 }, + { y: 1, y0: 2, x: 4 }, + { y: 2, y0: 3, x: 3 }, + { y: 3, y0: 4, x: 2 }, + { y: 4, y0: 5, x: 1 }, +]; + +export default () => ( + + + + +); diff --git a/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js b/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js index 94ab4a93b04a..936c093a0e43 100644 --- a/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js @@ -7,19 +7,19 @@ import { } from '../../../../src/components'; const dataA = [ - { x: 'A', y: 3 }, - { x: 'B', y: 1 }, - { x: 'C', y: 5 }, - { x: 'D', y: 2 }, - { x: 'E', y: 1 }, + { x: 0, y: 5 }, + { x: 1, y: 4 }, + { x: 2, y: 3 }, + { x: 3, y: 2 }, + { x: 4, y: 1 }, ]; const dataB = [ - { x: 'A', y: 1 }, - { x: 'B', y: 2 }, - { x: 'C', y: 3 }, - { x: 'D', y: 4 }, - { x: 'E', y: 5 }, + { x: 0, y: 1 }, + { x: 1, y: 2 }, + { x: 2, y: 3 }, + { x: 3, y: 4 }, + { x: 4, y: 5 }, ]; export default class extends Component { diff --git a/src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js b/src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js new file mode 100644 index 000000000000..0b28a65858eb --- /dev/null +++ b/src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js @@ -0,0 +1,41 @@ +import React from 'react'; + +import { + EuiXYChart, + EuiVerticalRectSeries, +} from '../../../../src/components'; + +const dataA = [ + { x0: 0, x: 1, y: 1 }, + { x0: 1, x: 2, y: 2 }, + { x0: 2, x: 3, y: 1 }, + { x0: 3, x: 4, y: 1 }, + { x0: 4, x: 5, y: 1 }, +]; + +const dataB = [ + { x0: 0, x: 1, y: 2 }, + { x0: 1, x: 2, y: 1 }, + { x0: 2, x: 3, y: 2 }, + { x0: 3, x: 4, y: 2 }, + { x0: 4, x: 5, y: 2 }, +]; + +export default () => ( + + + + + + +); diff --git a/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap b/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap index 1ecc63cf4ec7..81b1b12c6377 100644 --- a/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap +++ b/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap @@ -1,6724 +1,1314 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiVerticalBarSeries all props are rendered 1`] = ` - -
- +
-
- + + + + + + + + + + + -
+ - + + + -0.4 + + + + + + -0.2 + + + + + + 0.0 + + + + + + 0.2 + + + + + + 0.4 + + + - + - - - - - - - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - -0.4 - - - - - - -0.2 - - - - - - 0.0 - - - - - - 0.2 - - - - - - 0.4 - - - - - - 0.6 - - - - - - 0.8 - - - - - - 1.0 - - - - - - 1.2 - - - - - - 1.4 - - - - - - - - - - - + + + + - - - - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - + + + + - - - - - - - - - - - - - - - - - -
- -
- + 1.2 + + + + + + 1.4 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + +
- +
`; exports[`EuiVerticalBarSeries is rendered 1`] = ` -
- + + + + + + + + + + + + + + + + + + -0.4 + + + + + + -0.2 + + + + + + 0.0 + + + + + + 0.2 + + + + + + 0.4 + + + + + + 0.6 + + + + + + 0.8 + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + +
+
+
+`; + +exports[`EuiVerticalBarSeries renders stacked bar chart 1`] = ` +
+
+
-
- + + + + + + + + -
+ - - + - - - - - - - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - -0.4 - - - - - - -0.2 - - - - - - 0.0 - - - - - - 0.2 - - - - - - 0.4 - - - - - - 0.6 - - - - - - 0.8 - - - - - - 1.0 - - - - - - 1.2 - - - - - - 1.4 - - - - - - - - - - - + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + - - - - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - + + + + - - - - - - - - - - - - - - - - - -
- -
- + 10 + + + + + + + + + + + + + +
- +
`; diff --git a/src/components/xy_chart/__snapshots__/vertical_rect_series.test.js.snap b/src/components/xy_chart/__snapshots__/vertical_rect_series.test.js.snap new file mode 100644 index 000000000000..106d36b8c408 --- /dev/null +++ b/src/components/xy_chart/__snapshots__/vertical_rect_series.test.js.snap @@ -0,0 +1,1362 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiVerticalRectSeries all props are rendered 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + +
+
+
+`; + +exports[`EuiVerticalRectSeries is rendered 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + +
+
+
+`; + +exports[`EuiVerticalRectSeries renders stacked vertical histogram 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + 0 + + + + + + 1 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + + + + + + + + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/horizontal_bar_series.js b/src/components/xy_chart/horizontal_bar_series.js index e6bf44ea596d..000043282932 100644 --- a/src/components/xy_chart/horizontal_bar_series.js +++ b/src/components/xy_chart/horizontal_bar_series.js @@ -12,7 +12,12 @@ class EuiHorizontalBarSeries extends HorizontalBarSeries { key={name} onSeriesClick={onClick} color={color} - style={{ rx: 2, ry: 2 }} + style={{ + strokeWidth: 1, + stroke: 'white', + rx: 2, + ry: 2, + }} data={data} {...rest} /> diff --git a/src/components/xy_chart/horizontal_rect_series.js b/src/components/xy_chart/horizontal_rect_series.js index 4cec4d2cd997..2d120d3d3add 100644 --- a/src/components/xy_chart/horizontal_rect_series.js +++ b/src/components/xy_chart/horizontal_rect_series.js @@ -12,7 +12,12 @@ class EuiHorizontalRectSeries extends HorizontalRectSeries { key={name} onSeriesClick={onClick} color={color} - style={{ rx: 2, ry: 2 }} + style={{ + strokeWidth: 1, + stroke: 'white', + rx: 2, + ry: 2, + }} data={data} {...rest} /> diff --git a/src/components/xy_chart/vertical_bar_series.js b/src/components/xy_chart/vertical_bar_series.js index 384363bfee94..279cc10d8468 100644 --- a/src/components/xy_chart/vertical_bar_series.js +++ b/src/components/xy_chart/vertical_bar_series.js @@ -11,7 +11,12 @@ class EuiVerticalBarSeries extends VerticalBarSeries { key={name} onSeriesClick={onClick} color={color} - style={{ rx: 2, ry: 2 }} + style={{ + strokeWidth: 1, + stroke: 'white', + rx: 2, + ry: 2, + }} data={data} {...rest} /> diff --git a/src/components/xy_chart/vertical_bar_series.test.js b/src/components/xy_chart/vertical_bar_series.test.js index 73e05c9356a6..8976e8988485 100644 --- a/src/components/xy_chart/vertical_bar_series.test.js +++ b/src/components/xy_chart/vertical_bar_series.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { mount, render } from 'enzyme'; +import { render } from 'enzyme'; import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { requiredProps } from '../../test/required_props'; @@ -10,9 +10,9 @@ import { benchmarkFunction } from '../../test/time_execution'; beforeEach(patchRandom); afterEach(unpatchRandom); -describe.skip('EuiVerticalBarSeries', () => { +describe('EuiVerticalBarSeries', () => { test('is rendered', () => { - const component = mount( + const component = render( { }); test('all props are rendered', () => { - const component = mount( + const component = render( { expect(component).toMatchSnapshot(); }); + test('renders stacked bar chart', () => { + const component = render( + + {}} + /> + {}} + /> + + ); + + expect(component).toMatchSnapshot(); + }); + describe('performance', () => { it.skip('renders 1000 items in under 0.5 seconds', () => { const yTicks = [[0, 'zero'], [1, 'one']]; diff --git a/src/components/xy_chart/vertical_rect_series.js b/src/components/xy_chart/vertical_rect_series.js index 711fd7e121fe..83d7a4d69e51 100644 --- a/src/components/xy_chart/vertical_rect_series.js +++ b/src/components/xy_chart/vertical_rect_series.js @@ -12,7 +12,12 @@ export default class EuiVerticalRectSeries extends VerticalRectSeries { key={name} onSeriesClick={onClick} color={color} - style={{ rx: 2, ry: 2 }} + style={{ + strokeWidth: 1, + stroke: 'white', + rx: 2, + ry: 2, + }} data={data} {...rest} /> diff --git a/src/components/xy_chart/vertical_rect_series.test.js b/src/components/xy_chart/vertical_rect_series.test.js new file mode 100644 index 000000000000..5576d23b17a4 --- /dev/null +++ b/src/components/xy_chart/vertical_rect_series.test.js @@ -0,0 +1,135 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { patchRandom, unpatchRandom } from '../../test/patch_random'; +import { requiredProps } from '../../test/required_props'; + +import EuiXYChart from './chart'; +import EuiVerticalRectSeries from './vertical_rect_series'; +import { benchmarkFunction } from '../../test/time_execution'; + +beforeEach(patchRandom); +afterEach(unpatchRandom); + +describe('EuiVerticalRectSeries', () => { + test('is rendered', () => { + const component = render( + + + + ); + + expect(component).toMatchSnapshot(); + }); + + test('all props are rendered', () => { + const component = render( + + {}} + /> + + ); + + expect(component).toMatchSnapshot(); + }); + + test('renders stacked vertical histogram', () => { + const component = render( + + {}} + /> + {}} + /> + + ); + + expect(component).toMatchSnapshot(); + }); + + describe('performance', () => { + it.skip('renders 1000 items in under 0.5 seconds', () => { + const yTicks = [[0, 'zero'], [1, 'one']]; + const xTicks = [ + [0, '0'], + [250, '250'], + [500, '500'], + [750, '750'], + [1000, '1000'] + ]; + const data = []; + + for (let i = 0; i < 1000; i++) { + data.push({ x: i, y: Math.random() }); + } + + function renderChart() { + render( + + + + ) + } + + const runtime = benchmarkFunction(renderChart); + // as of 2018-05-011 / git 00cfbb94d2fcb08aeeed2bb8f4ed0b94eb08307b + // this is ~9ms on a MacBookPro + expect(runtime).toBeLessThan(500); + }); + + it.skip('renders 30 lines of 500 items in under 3 seconds', () => { + const yTicks = [[0, 'zero'], [1, 'one']]; + const xTicks = [ + [0, '0'], + [125, '125'], + [250, '240'], + [375, '375'], + [500, '500'] + ]; + + const linesData = []; + for (let i = 0; i < 30; i++) { + const data = []; + + for (let i = 0; i < 500; i++) { + data.push({ x: i, y: Math.random() }); + } + + linesData.push(data); + } + + function renderChart() { + render( + + {linesData.map((data, index) => ( + + ))} + + ) + } + + const runtime = benchmarkFunction(renderChart); + // as of 2018-05-011 / git 00cfbb94d2fcb08aeeed2bb8f4ed0b94eb08307b + // this is ~1750 on a MacBookPro + expect(runtime).toBeLessThan(3000); + }); + }); +}); From e64f5c25bed4e9be9e97322e5c8521bb5ea87a19 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 1 Jun 2018 18:51:02 +0200 Subject: [PATCH 04/68] Update example descriptions --- .../views/xy_chart_series/series_example.js | 73 ++++++++++++++----- .../xy_chart/horizontal_bar_series.js | 5 +- .../xy_chart/horizontal_rect_series.js | 10 +-- .../xy_chart/vertical_bar_series.js | 5 +- 4 files changed, 60 insertions(+), 33 deletions(-) diff --git a/src-docs/src/views/xy_chart_series/series_example.js b/src-docs/src/views/xy_chart_series/series_example.js index 3516e8921fb8..280464f884d4 100644 --- a/src-docs/src/views/xy_chart_series/series_example.js +++ b/src-docs/src/views/xy_chart_series/series_example.js @@ -77,8 +77,15 @@ export const XYChartSeriesExample = {

Use EuiXYChart with EuiVerticalBarSeries for displaying - vertical bar charts. Use the appropriate xType props to match your - x value scale. Available values are: ordinal,linear + vertical bar charts. +

+

+ Specify EuiXYChart prop xType="ordinal" + because we are creating a Bar Chart. +

+

+ The Y-Axis can be configured with linear,log, + time, time-utc

), @@ -105,8 +112,14 @@ export const XYChartSeriesExample = {

Use EuiXYChart with EuiHorizontalBarSeries for displaying - horizontal bar charts. Use the appropriate yType props to match your - y value scale. Available values are: ordinal,linear + horizontal bar charts. +

+

+ Specify EuiXYChart prop yType="ordinal" + because we are creating a Bar Chart. +

+

The X-Axis can be configured with linear,log, + time, time-utc.

), @@ -134,6 +147,9 @@ export const XYChartSeriesExample = {

Use EuiXYChart with EuiVerticalRectSeries for displaying vertical histograms. + The Y-Axis needs can be configured with linear,log, + time, time-utc. + The same for X-Axis.

), @@ -159,8 +175,11 @@ export const XYChartSeriesExample = { text: (

- Use EuiXYChart with EuiVerticalRectSeries for displaying - an horizontal histogram. + Use EuiXYChart with EuiHorizontalRectSeries for displaying + horizontal histograms. + The Y-Axis needs can be configured as linear,log, + time, time-utc. + The same for X-Axis.

), @@ -187,9 +206,18 @@ export const XYChartSeriesExample = {

Use EuiXYChart with EuiHorizontalBarSeries for displaying - horizontal bar charts. Use the appropriate yType props to match your - y value scale. Available values are: ordinal,linear + horizontal stacked bar charts. + Specify EuiXYChart props like the following:

+
    +
  • + yType="ordinal" because we are creating a Bar Chart +
    • +
  • + stackBy="x" to stack bars one above the other. + If stackBy is not specified, bars are clustered together depending on the Y value +
    • +
), props: { EuiHorizontalBarSeries }, @@ -214,10 +242,19 @@ export const XYChartSeriesExample = { text: (

- Use EuiXYChart with EuiHorizontalBarSeries for displaying - horizontal bar charts. Use the appropriate yType props to match your - y value scale. Available values are: ordinal,linear + Use EuiXYChart with EuiVerticalBarSeries for displaying + vertical stacked bar charts. + Specify EuiXYChart props like the following:

+
    +
  • + xType="ordinal" because we are creating a Bar Chart +
    • +
  • + stackBy="y" to stack bars one above the other. + If stackBy is not specified, bars are clustered together depending on the X value +
    • +
), props: { EuiHorizontalBarSeries }, @@ -242,10 +279,11 @@ export const XYChartSeriesExample = { text: (

- Use EuiXYChart with EuiHorizontalBarSeries for displaying - horizontal bar charts. Use the appropriate yType props to match your - y value scale. Available values are: ordinal,linear + Use EuiXYChart with EuiVerticalRectSeries for displaying + stacked vedrtical histograms.

+

Specify stackBy="x" to stack bars together.

+

Note: Is not possible to "cluster" bars by the same X value.

), props: { EuiHorizontalBarSeries }, @@ -270,10 +308,11 @@ export const XYChartSeriesExample = { text: (

- Use EuiXYChart with EuiHorizontalBarSeries for displaying - horizontal bar charts. Use the appropriate yType props to match your - y value scale. Available values are: ordinal,linear + Use EuiXYChart with EuiHorizontalRectSeries to display + stacked horizontal histograms.

+

Specify stackBy="x" to stack bars together.

+

Note: Is not possible to "cluster" bars by the same Y value.

), props: { EuiHorizontalBarSeries }, diff --git a/src/components/xy_chart/horizontal_bar_series.js b/src/components/xy_chart/horizontal_bar_series.js index 000043282932..db60f72f5421 100644 --- a/src/components/xy_chart/horizontal_bar_series.js +++ b/src/components/xy_chart/horizontal_bar_series.js @@ -32,10 +32,7 @@ EuiHorizontalBarSeries.propTypes = { name: PropTypes.string.isRequired, /** Array<{x: string|number, y: string|number}> */ data: PropTypes.arrayOf(PropTypes.shape({ - x: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), + x: PropTypes.number, y: PropTypes.oneOfType([ PropTypes.string, PropTypes.number diff --git a/src/components/xy_chart/horizontal_rect_series.js b/src/components/xy_chart/horizontal_rect_series.js index 2d120d3d3add..eb711d96b739 100644 --- a/src/components/xy_chart/horizontal_rect_series.js +++ b/src/components/xy_chart/horizontal_rect_series.js @@ -32,14 +32,8 @@ EuiHorizontalRectSeries.propTypes = { name: PropTypes.string.isRequired, /** Array<{x: string|number, y: string|number}> */ data: PropTypes.arrayOf(PropTypes.shape({ - x: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), - y: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), + x: PropTypes.number, + y: PropTypes.number, })).isRequired, /** Without a color set, a random EUI color palette color will be chosen */ color: PropTypes.string, diff --git a/src/components/xy_chart/vertical_bar_series.js b/src/components/xy_chart/vertical_bar_series.js index 279cc10d8468..ab91174e0306 100644 --- a/src/components/xy_chart/vertical_bar_series.js +++ b/src/components/xy_chart/vertical_bar_series.js @@ -34,10 +34,7 @@ EuiVerticalBarSeries.propTypes = { PropTypes.string, PropTypes.number ]), - y: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), + y: PropTypes.number, })).isRequired, /** Without a color set, a random EUI color palette color will be chosen */ color: PropTypes.string, From 70a878378949caf272760c1593c6cc8e7ad1bc1e Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 1 Jun 2018 19:06:03 +0200 Subject: [PATCH 05/68] Update props types --- .../views/xy_chart_series/series_example.js | 22 +++++++++++++------ .../xy_chart/horizontal_bar_series.js | 2 +- .../xy_chart/horizontal_rect_series.js | 3 ++- .../xy_chart/vertical_bar_series.js | 2 +- .../xy_chart/vertical_rect_series.js | 13 ++++------- 5 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src-docs/src/views/xy_chart_series/series_example.js b/src-docs/src/views/xy_chart_series/series_example.js index 280464f884d4..04a79f10178e 100644 --- a/src-docs/src/views/xy_chart_series/series_example.js +++ b/src-docs/src/views/xy_chart_series/series_example.js @@ -10,7 +10,15 @@ import StackedVerticalRectSeriesExample from './stacked_vertical_rect_series'; import VerticalRectSeriesExample from './vertical_rect_series'; import HorizontalRectSeriesExample from './horizontal_rect_series'; import AreaSeriesExample from './area_series'; -import { EuiCode, EuiVerticalBarSeries, EuiHorizontalBarSeries, EuiLine, EuiArea } from '../../../../src/components'; +import { + EuiCode, + EuiVerticalBarSeries, + EuiVerticalRectSeries, + EuiHorizontalBarSeries, + EuiHorizontalRectSeries, + EuiLine, + EuiArea, +} from '../../../../src/components'; export const XYChartSeriesExample = { title: 'XYChart Series', @@ -85,7 +93,7 @@ export const XYChartSeriesExample = {

The Y-Axis can be configured with linear,log, - time, time-utc + time, time-utc.

), @@ -153,7 +161,7 @@ export const XYChartSeriesExample = {

), - props: { EuiVerticalBarSeries }, + props: { EuiVerticalRectSeries }, source: [ { type: GuideSectionTypes.JS, @@ -183,7 +191,7 @@ export const XYChartSeriesExample = {

), - props: { EuiVerticalBarSeries }, + props: { EuiHorizontalRectSeries }, source: [ { type: GuideSectionTypes.JS, @@ -257,7 +265,7 @@ export const XYChartSeriesExample = { ), - props: { EuiHorizontalBarSeries }, + props: { EuiVerticalBarSeries }, source: [ { type: GuideSectionTypes.JS, @@ -286,7 +294,7 @@ export const XYChartSeriesExample = {

Note: Is not possible to "cluster" bars by the same X value.

), - props: { EuiHorizontalBarSeries }, + props: { EuiVerticalRectSeries }, source: [ { type: GuideSectionTypes.JS, @@ -315,7 +323,7 @@ export const XYChartSeriesExample = {

Note: Is not possible to "cluster" bars by the same Y value.

), - props: { EuiHorizontalBarSeries }, + props: { EuiHorizontalRectSeries }, source: [ { type: GuideSectionTypes.JS, diff --git a/src/components/xy_chart/horizontal_bar_series.js b/src/components/xy_chart/horizontal_bar_series.js index db60f72f5421..f45431f57a81 100644 --- a/src/components/xy_chart/horizontal_bar_series.js +++ b/src/components/xy_chart/horizontal_bar_series.js @@ -30,7 +30,7 @@ export default EuiHorizontalBarSeries; EuiHorizontalBarSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, - /** Array<{x: string|number, y: string|number}> */ + /** Array<{x: number, y: string|number}> */ data: PropTypes.arrayOf(PropTypes.shape({ x: PropTypes.number, y: PropTypes.oneOfType([ diff --git a/src/components/xy_chart/horizontal_rect_series.js b/src/components/xy_chart/horizontal_rect_series.js index eb711d96b739..9ac3b94ceb9e 100644 --- a/src/components/xy_chart/horizontal_rect_series.js +++ b/src/components/xy_chart/horizontal_rect_series.js @@ -30,10 +30,11 @@ export default EuiHorizontalRectSeries; EuiHorizontalRectSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, - /** Array<{x: string|number, y: string|number}> */ + /** Array<{x: number, y: number, y0: number}> */ data: PropTypes.arrayOf(PropTypes.shape({ x: PropTypes.number, y: PropTypes.number, + y0: PropTypes.number, })).isRequired, /** Without a color set, a random EUI color palette color will be chosen */ color: PropTypes.string, diff --git a/src/components/xy_chart/vertical_bar_series.js b/src/components/xy_chart/vertical_bar_series.js index ab91174e0306..be95df1d46ed 100644 --- a/src/components/xy_chart/vertical_bar_series.js +++ b/src/components/xy_chart/vertical_bar_series.js @@ -28,7 +28,7 @@ export default EuiVerticalBarSeries; EuiVerticalBarSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, - /** Array<{x: string|number, y: string|number}> */ + /** Array<{x: string|number, y: number}> */ data: PropTypes.arrayOf(PropTypes.shape({ x: PropTypes.oneOfType([ PropTypes.string, diff --git a/src/components/xy_chart/vertical_rect_series.js b/src/components/xy_chart/vertical_rect_series.js index 83d7a4d69e51..40913d47f280 100644 --- a/src/components/xy_chart/vertical_rect_series.js +++ b/src/components/xy_chart/vertical_rect_series.js @@ -29,16 +29,11 @@ export default class EuiVerticalRectSeries extends VerticalRectSeries { EuiVerticalRectSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, - /** Array<{x: string|number, y: string|number}> */ + /** Array<{x0: number, x: number, y: number}> */ data: PropTypes.arrayOf(PropTypes.shape({ - x: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), - y: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), + x0: PropTypes.number, + x: PropTypes.number, + y: PropTypes.number, })).isRequired, /** Without a color set, a random EUI color palette color will be chosen */ color: PropTypes.string, From a75682105fed6e6285a9fb020c1b7ed1416352cf Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 12 Jun 2018 16:53:05 +0200 Subject: [PATCH 06/68] Add DefaultAxis component --- .../src/views/xy_chart_series/area_series.js | 3 +- .../xy_chart_series/horizontal_bar_series.js | 5 +- .../xy_chart_series/horizontal_rect_series.js | 5 +- .../src/views/xy_chart_series/line_series.js | 3 +- .../stacked_horizontal_bar_series.js | 4 + .../stacked_horizontal_rect_series.js | 4 + .../stacked_vertical_bar_series.js | 2 + .../stacked_vertical_rect_series.js | 4 +- .../xy_chart_series/vertical_bar_series.js | 7 +- .../xy_chart_series/vertical_rect_series.js | 7 +- src/components/index.js | 1 + .../xy_chart/__snapshots__/area.test.js.snap | 8084 ++++------------- .../xy_chart/__snapshots__/chart.test.js.snap | 1 - .../xy_chart/__snapshots__/line.test.js.snap | 6594 +++----------- .../vertical_bar_series.test.js.snap | 1173 --- .../vertical_rect_series.test.js.snap | 1213 --- src/components/xy_chart/chart.js | 51 +- src/components/xy_chart/default_axis.js | 96 + src/components/xy_chart/index.js | 4 +- 19 files changed, 3196 insertions(+), 14065 deletions(-) create mode 100644 src/components/xy_chart/default_axis.js diff --git a/src-docs/src/views/xy_chart_series/area_series.js b/src-docs/src/views/xy_chart_series/area_series.js index bf849ee40d00..a1625acacce9 100644 --- a/src-docs/src/views/xy_chart_series/area_series.js +++ b/src-docs/src/views/xy_chart_series/area_series.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiArea } from '../../../../src/components'; +import { EuiXYChart, EuiArea, EuiDefaultAxis } from '../../../../src/components'; export default () => ( ( height={200} > + ); diff --git a/src-docs/src/views/xy_chart_series/horizontal_bar_series.js b/src-docs/src/views/xy_chart_series/horizontal_bar_series.js index 8be242d688f5..7d37dca18e7b 100644 --- a/src-docs/src/views/xy_chart_series/horizontal_bar_series.js +++ b/src-docs/src/views/xy_chart_series/horizontal_bar_series.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiHorizontalBarSeries } from '../../../../src/components'; +import { EuiXYChart, EuiHorizontalBarSeries, EuiDefaultAxis } from '../../../../src/components'; const data = [ { x: 3, y: 'A' }, @@ -19,5 +19,8 @@ export default () => ( name="Tag counts" data={data} /> + ); diff --git a/src-docs/src/views/xy_chart_series/horizontal_rect_series.js b/src-docs/src/views/xy_chart_series/horizontal_rect_series.js index 0c5284747c72..322a4f542476 100644 --- a/src-docs/src/views/xy_chart_series/horizontal_rect_series.js +++ b/src-docs/src/views/xy_chart_series/horizontal_rect_series.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiHorizontalRectSeries } from '../../../../src/components'; +import { EuiXYChart, EuiHorizontalRectSeries, EuiDefaultAxis } from '../../../../src/components'; const data = [ { x: 3, y: 0, y0: 1 }, @@ -18,5 +18,8 @@ export default () => ( name="Bytes" data={data} /> + ); diff --git a/src-docs/src/views/xy_chart_series/line_series.js b/src-docs/src/views/xy_chart_series/line_series.js index 1a2464b4b193..c50bb2fa8558 100644 --- a/src-docs/src/views/xy_chart_series/line_series.js +++ b/src-docs/src/views/xy_chart_series/line_series.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiLine } from '../../../../src/components'; +import { EuiXYChart, EuiLine, EuiDefaultAxis } from '../../../../src/components'; export default () => ( ( height={200} > + ); diff --git a/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js b/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js index f443646cfea4..3044417f4a1a 100644 --- a/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js +++ b/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js @@ -4,6 +4,7 @@ import { EuiButton, EuiXYChart, EuiHorizontalBarSeries, + EuiDefaultAxis, } from '../../../../src/components'; const dataA = [ @@ -61,6 +62,9 @@ export default class extends Component { name={`Tag B`} data={dataB} /> + diff --git a/src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js b/src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js index e1ddabd91a0e..05d5f36972bf 100644 --- a/src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js +++ b/src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js @@ -3,6 +3,7 @@ import React from 'react'; import { EuiXYChart, EuiHorizontalRectSeries, + EuiDefaultAxis, } from '../../../../src/components'; const dataA = [ @@ -37,5 +38,8 @@ export default () => ( data={dataB} stack={true} /> + ); diff --git a/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js b/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js index 936c093a0e43..9743d82c4fa9 100644 --- a/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js @@ -4,6 +4,7 @@ import { EuiButton, EuiXYChart, EuiVerticalBarSeries, + EuiDefaultAxis, } from '../../../../src/components'; const dataA = [ @@ -62,6 +63,7 @@ export default class extends Component { name={`Tag B`} data={dataB} /> + diff --git a/src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js b/src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js index 0b28a65858eb..da9cd516a0a3 100644 --- a/src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js +++ b/src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js @@ -3,6 +3,7 @@ import React from 'react'; import { EuiXYChart, EuiVerticalRectSeries, + EuiDefaultAxis, } from '../../../../src/components'; const dataA = [ @@ -35,7 +36,6 @@ export default () => ( name={`Tag B`} data={dataB} /> - - + ); diff --git a/src-docs/src/views/xy_chart_series/vertical_bar_series.js b/src-docs/src/views/xy_chart_series/vertical_bar_series.js index b609ab00bab8..6365ed608247 100644 --- a/src-docs/src/views/xy_chart_series/vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_series/vertical_bar_series.js @@ -1,6 +1,10 @@ import React from 'react'; -import { EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; +import { + EuiXYChart, + EuiVerticalBarSeries, + EuiDefaultAxis, +} from '../../../../src/components'; const data = [ { x: 'A', y: 3 }, @@ -20,5 +24,6 @@ export default () => ( name="Tags" data={data} /> + ); diff --git a/src-docs/src/views/xy_chart_series/vertical_rect_series.js b/src-docs/src/views/xy_chart_series/vertical_rect_series.js index 78ebb4bde151..6c6772ce8fe6 100644 --- a/src-docs/src/views/xy_chart_series/vertical_rect_series.js +++ b/src-docs/src/views/xy_chart_series/vertical_rect_series.js @@ -1,6 +1,10 @@ import React from 'react'; -import { EuiXYChart, EuiVerticalRectSeries } from '../../../../src/components'; +import { + EuiXYChart, + EuiVerticalRectSeries, + EuiDefaultAxis, +} from '../../../../src/components'; const data = [ { x0: 0, x: 1, y: 1 }, @@ -19,5 +23,6 @@ export default () => ( name="Bytes" data={data} /> + ); diff --git a/src/components/index.js b/src/components/index.js index 6382aa9e00db..27c70d831e0b 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -310,4 +310,5 @@ export { EuiHorizontalBarSeries, EuiVerticalRectSeries, EuiHorizontalRectSeries, + EuiDefaultAxis, } from './xy_chart'; diff --git a/src/components/xy_chart/__snapshots__/area.test.js.snap b/src/components/xy_chart/__snapshots__/area.test.js.snap index 20c9f8225616..b62dcf527bf9 100644 --- a/src/components/xy_chart/__snapshots__/area.test.js.snap +++ b/src/components/xy_chart/__snapshots__/area.test.js.snap @@ -16,7 +16,6 @@ exports[`EuiArea all props are rendered 1`] = ` - - - + - - + - - - - - - - - - - - - - - - + + + + + + - - + - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - - - - - - - - - - - - - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`EuiArea is rendered 1`] = ` - -
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - - - - - - - - - - + + + + + + + + + - + + - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - + + + + + + + + + + +
+ +
+ +
+ +`; + +exports[`EuiArea is rendered 1`] = ` + +
+ +
+ +
+ - - - + - - + - - - - - - + - - - - - - - - - + + + + - - - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - - - - - - - - - + + + + + + + + - - - - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- -`; - -exports[`EuiLine is rendered 1`] = ` - -
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - - - - - - - - - - - - - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - + + + + + + + + + + +
+ +
+ +
+ +`; + +exports[`EuiLine is rendered 1`] = ` + +
+ +
+ +
+ - - - - - - - - - - - - - - - - - -0.4 - - - - - - -0.2 - - - - - - 0.0 - - - - - - 0.2 - - - - - - 0.4 - - - - - - 0.6 - - - - - - 0.8 - - - - - - 1.0 - - - - - - 1.2 - - - - - - 1.4 - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - - - - - - -0.4 - - - - - - -0.2 - - - - - - 0.0 - - - - - - 0.2 - - - - - - 0.4 - - - - - - 0.6 - - - - - - 0.8 - - - - - - 1.0 - - - - - - 1.2 - - - - - - 1.4 - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - - - - 0 - - - - - - 1 - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - - - - - - - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - - - - 0 - - - - - - 1 - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - { - return v[1]; - }); - } - - _getTicks(ticks) { - if (!ticks) return; - - { - return ticks.map(v => { - return v[0]; - }); - } - } - _renderChildren = (child, i) => { const props = { id: `chart-${i}`, @@ -135,11 +117,6 @@ export class XYChart extends PureComponent { yType, stackBy, errorText, - xAxisLocation, - yAxisLocation, - showAxis, - yTicks, - xTicks, crosshairX, showTooltips, onSelectEnd, @@ -173,28 +150,6 @@ export class XYChart extends PureComponent { stackBy={stackBy} > - {showAxis && [ - , - this._getTickLabels(xTicks)[v] || v : undefined} - />, - this._getTickLabels(yTicks)[v] || v : undefined} - /> - ]} - {React.Children.map(children, this._renderChildren)} {showTooltips && ( @@ -226,7 +181,7 @@ XYChart.propTypes = { xTicks: PropTypes.array, yTicks: PropTypes.array, // [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]] truncateLegends: PropTypes.bool, - showAxis: PropTypes.bool, + // showAxis: PropTypes.bool, xAxisLocation: PropTypes.string, yAxisLocation: PropTypes.string, showTooltips: PropTypes.bool, @@ -237,7 +192,7 @@ XYChart.propTypes = { XYChart.defaultProps = { truncateLegends: false, - showAxis: true, + // showAxis: true, showTooltips: true, }; diff --git a/src/components/xy_chart/default_axis.js b/src/components/xy_chart/default_axis.js new file mode 100644 index 000000000000..b419af8198d3 --- /dev/null +++ b/src/components/xy_chart/default_axis.js @@ -0,0 +1,96 @@ +import React, { Fragment, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { XAxis, YAxis, HorizontalGridLines, VerticalGridLines } from 'react-vis'; + +export default class DefaultAxis extends PureComponent { + + _getTickLabels(ticks) { + if (!ticks) return; + + return ticks.map(v => { + return v[1]; + }); + } + + _getTicks(ticks) { + if (!ticks) return; + + { + return ticks.map(v => { + return v[0]; + }); + } + } + + render() { + const { + yTicks, + xTicks, + xAxisLocation, + yAxisLocation, + showGridLines, + isHorizontal, + ...rest } = this.props; + return ( + + { + showGridLines && !isHorizontal && + + } + { + showGridLines && isHorizontal && + + } + + this._getTickLabels(xTicks)[v] || v : undefined} + /> + this._getTickLabels(yTicks)[v] || v : undefined} + /> + + ) + } +} + +DefaultAxis.propTypes = { + xTicks: PropTypes.array, + yTicks: PropTypes.array, // [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]] + xAxisLocation: PropTypes.string, + yAxisLocation: PropTypes.string, + isHorizontal: PropTypes.boolean, + showGridLines: PropTypes.boolean, +}; + +DefaultAxis.defaultProps = { + isHorizontal: false, + showGridLines: true, +} + +DefaultAxis.requiresSVG = true; diff --git a/src/components/xy_chart/index.js b/src/components/xy_chart/index.js index 3dafdc19dc30..f83a5cdaf939 100644 --- a/src/components/xy_chart/index.js +++ b/src/components/xy_chart/index.js @@ -6,7 +6,8 @@ import EuiVerticalBarSeries from './vertical_bar_series'; import EuiHorizontalBarSeries from './horizontal_bar_series'; import EuiVerticalRectSeries from './vertical_rect_series'; import EuiHorizontalRectSeries from './horizontal_rect_series'; -import{ EuiArea } from './area'; +import EuiDefaultAxis from './default_axis'; +import { EuiArea } from './area'; export { EuiXYChart, @@ -16,6 +17,7 @@ export { EuiHorizontalBarSeries, EuiVerticalRectSeries, EuiHorizontalRectSeries, + EuiDefaultAxis, utils, asSeries }; From 4a629db1c965cf77d6097ca0c384a71ff7356862 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 13 Jun 2018 09:48:36 +0200 Subject: [PATCH 07/68] Added first branch of tests for rect and bars --- .../horizontal_bar_series.test.js.snap | 149 ++++++++++++++++++ .../horizontal_rect_series.test.js.snap | 149 ++++++++++++++++++ .../vertical_bar_series.test.js.snap | 8 +- .../vertical_rect_series.test.js.snap | 8 +- .../xy_chart/horizontal_bar_series.test.js | 84 ++++++++++ .../xy_chart/horizontal_rect_series.test.js | 84 ++++++++++ .../xy_chart/vertical_bar_series.test.js | 32 +++- .../xy_chart/vertical_rect_series.test.js | 25 ++- 8 files changed, 521 insertions(+), 18 deletions(-) create mode 100644 src/components/xy_chart/__snapshots__/horizontal_bar_series.test.js.snap create mode 100644 src/components/xy_chart/__snapshots__/horizontal_rect_series.test.js.snap create mode 100644 src/components/xy_chart/horizontal_bar_series.test.js create mode 100644 src/components/xy_chart/horizontal_rect_series.test.js diff --git a/src/components/xy_chart/__snapshots__/horizontal_bar_series.test.js.snap b/src/components/xy_chart/__snapshots__/horizontal_bar_series.test.js.snap new file mode 100644 index 000000000000..2c9143d2c0df --- /dev/null +++ b/src/components/xy_chart/__snapshots__/horizontal_bar_series.test.js.snap @@ -0,0 +1,149 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiHorizontalBarSeries all props are rendered 1`] = ` +
+
+
+ + + + + + + + +
+
+
+`; + +exports[`EuiHorizontalBarSeries is rendered 1`] = ` +
+
+
+ + + + + + + + +
+
+
+`; + +exports[`EuiHorizontalBarSeries renders stacked bar chart 1`] = ` +
+
+
+ + + + + + + + + + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/__snapshots__/horizontal_rect_series.test.js.snap b/src/components/xy_chart/__snapshots__/horizontal_rect_series.test.js.snap new file mode 100644 index 000000000000..ba079e6fbb4d --- /dev/null +++ b/src/components/xy_chart/__snapshots__/horizontal_rect_series.test.js.snap @@ -0,0 +1,149 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiHorizontalRectSeries all props are rendered 1`] = ` +
+
+
+ + + + + + + + +
+
+
+`; + +exports[`EuiHorizontalRectSeries is rendered 1`] = ` +
+
+
+ + + + + + + + +
+
+
+`; + +exports[`EuiHorizontalRectSeries renders stacked bar chart 1`] = ` +
+
+
+ + + + + + + + + + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap b/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap index df34319d51bb..654265554d0c 100644 --- a/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap +++ b/src/components/xy_chart/__snapshots__/vertical_bar_series.test.js.snap @@ -41,7 +41,7 @@ exports[`EuiVerticalBarSeries all props are rendered 1`] = ` exports[`EuiVerticalBarSeries is rendered 1`] = `
{ + test('is rendered', () => { + const component = mount( + + + + ); + + expect(component.find('.rv-xy-plot__series')).toHaveLength(1); + + const rects = component.find('.rv-xy-plot__series--bar rect') + expect(rects).toHaveLength(2); + + const firstRectProps = rects.at(0).props() + expect(firstRectProps.x).toBeDefined() + expect(firstRectProps.y).toBeDefined() + expect(firstRectProps.width).toBeDefined() + expect(firstRectProps.height).toBeDefined() + + const secondRectProps = rects.at(1).props() + expect(secondRectProps.x).toBeDefined() + expect(secondRectProps.y).toBeDefined() + expect(secondRectProps.width).toBeDefined() + expect(secondRectProps.height).toBeDefined() + + expect(component.render()).toMatchSnapshot(); + }); + + test('all props are rendered', () => { + const component = render( + + {}} + /> + + ); + + expect(component).toMatchSnapshot(); + }); + + test('renders stacked bar chart', () => { + const component = render( + + {}} + /> + {}} + /> + + ); + expect(component.find('.rv-xy-plot__series')).toHaveLength(2); + expect(component.find('.rv-xy-plot__series--bar rect')).toHaveLength(4); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/xy_chart/horizontal_rect_series.test.js b/src/components/xy_chart/horizontal_rect_series.test.js new file mode 100644 index 000000000000..cf67a63fc201 --- /dev/null +++ b/src/components/xy_chart/horizontal_rect_series.test.js @@ -0,0 +1,84 @@ +import React from 'react'; +import { render, mount } from 'enzyme'; +import { patchRandom, unpatchRandom } from '../../test/patch_random'; +import { requiredProps } from '../../test/required_props'; + +import EuiXYChart from './chart'; +import EuiHorizontalRectSeries from './horizontal_rect_series'; + +beforeEach(patchRandom); +afterEach(unpatchRandom); + +describe('EuiHorizontalRectSeries', () => { + test('is rendered', () => { + const component = mount( + + + + ); + + expect(component.find('.rv-xy-plot__series')).toHaveLength(1); + + const rects = component.find('.rv-xy-plot__series--rect rect') + expect(rects).toHaveLength(2); + + const firstRectProps = rects.at(0).props() + expect(firstRectProps.x).toBeDefined() + expect(firstRectProps.y).toBeDefined() + expect(firstRectProps.width).toBeDefined() + expect(firstRectProps.height).toBeDefined() + + const secondRectProps = rects.at(1).props() + expect(secondRectProps.x).toBeDefined() + expect(secondRectProps.y).toBeDefined() + expect(secondRectProps.width).toBeDefined() + expect(secondRectProps.height).toBeDefined() + + expect(component.render()).toMatchSnapshot(); + }); + + test('all props are rendered', () => { + const component = render( + + {}} + /> + + ); + + expect(component).toMatchSnapshot(); + }); + + test('renders stacked bar chart', () => { + const component = render( + + {}} + /> + {}} + /> + + ); + expect(component.find('.rv-xy-plot__series')).toHaveLength(2); + expect(component.find('.rv-xy-plot__series--rect rect')).toHaveLength(4); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/xy_chart/vertical_bar_series.test.js b/src/components/xy_chart/vertical_bar_series.test.js index 8976e8988485..f837305035af 100644 --- a/src/components/xy_chart/vertical_bar_series.test.js +++ b/src/components/xy_chart/vertical_bar_series.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from 'enzyme'; +import { render, mount } from 'enzyme'; import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { requiredProps } from '../../test/required_props'; @@ -12,7 +12,7 @@ afterEach(unpatchRandom); describe('EuiVerticalBarSeries', () => { test('is rendered', () => { - const component = render( + const component = mount( { ); - expect(component).toMatchSnapshot(); + expect(component.find('.rv-xy-plot__series')).toHaveLength(1); + + const rects = component.find('.rv-xy-plot__series--bar rect') + expect(rects).toHaveLength(2); + + const firstRectProps = rects.at(0).props() + expect(firstRectProps.x).toBeDefined() + expect(firstRectProps.y).toBeDefined() + expect(firstRectProps.width).toBeDefined() + expect(firstRectProps.height).toBeDefined() + + const secondRectProps = rects.at(1).props() + expect(secondRectProps.x).toBeDefined() + expect(secondRectProps.y).toBeDefined() + expect(secondRectProps.width).toBeDefined() + expect(secondRectProps.height).toBeDefined() + + expect(component.render()).toMatchSnapshot(); }); test('all props are rendered', () => { @@ -61,12 +78,13 @@ describe('EuiVerticalBarSeries', () => { /> ); - + expect(component.find('.rv-xy-plot__series')).toHaveLength(2); + expect(component.find('.rv-xy-plot__series--bar rect')).toHaveLength(4); expect(component).toMatchSnapshot(); }); - describe('performance', () => { - it.skip('renders 1000 items in under 0.5 seconds', () => { + describe.skip('performance', () => { + it('renders 1000 items in under 0.5 seconds', () => { const yTicks = [[0, 'zero'], [1, 'one']]; const xTicks = [ [0, '0'], @@ -95,7 +113,7 @@ describe('EuiVerticalBarSeries', () => { expect(runtime).toBeLessThan(500); }); - it.skip('renders 30 lines of 500 items in under 3 seconds', () => { + it('renders 30 lines of 500 items in under 3 seconds', () => { const yTicks = [[0, 'zero'], [1, 'one']]; const xTicks = [ [0, '0'], diff --git a/src/components/xy_chart/vertical_rect_series.test.js b/src/components/xy_chart/vertical_rect_series.test.js index 5576d23b17a4..c4f892fb78f9 100644 --- a/src/components/xy_chart/vertical_rect_series.test.js +++ b/src/components/xy_chart/vertical_rect_series.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from 'enzyme'; +import { render, mount } from 'enzyme'; import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { requiredProps } from '../../test/required_props'; @@ -12,7 +12,7 @@ afterEach(unpatchRandom); describe('EuiVerticalRectSeries', () => { test('is rendered', () => { - const component = render( + const component = mount( { ); - expect(component).toMatchSnapshot(); + expect(component.find('.rv-xy-plot__series')).toHaveLength(1); + + const rects = component.find('.rv-xy-plot__series--rect rect') + expect(rects).toHaveLength(2); + + const firstRectProps = rects.at(0).props() + expect(firstRectProps.x).toBeDefined() + expect(firstRectProps.y).toBeDefined() + expect(firstRectProps.width).toBeDefined() + expect(firstRectProps.height).toBeDefined() + + const secondRectProps = rects.at(1).props() + expect(secondRectProps.x).toBeDefined() + expect(secondRectProps.y).toBeDefined() + expect(secondRectProps.width).toBeDefined() + expect(secondRectProps.height).toBeDefined() + + expect(component.render()).toMatchSnapshot(); }); test('all props are rendered', () => { @@ -61,6 +78,8 @@ describe('EuiVerticalRectSeries', () => { /> ); + expect(component.find('.rv-xy-plot__series')).toHaveLength(2); + expect(component.find('.rv-xy-plot__series--rect rect')).toHaveLength(4); expect(component).toMatchSnapshot(); }); From 2daf1a78d55e567b19ad2e5197e7853b40aa3796 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 13 Jun 2018 15:48:20 +0200 Subject: [PATCH 08/68] Refactoring chart docs * Splitted into line, area, bar, histogram * Added new line chart examples --- src-docs/src/routes.js | 18 +- .../src/views/xy_chart_area/area_example.js | 68 + .../area_series.js | 13 +- .../xy_chart_area/stacked_area_series.js | 33 + .../src/views/xy_chart_bar/bar_example.js | 161 + .../horizontal_bar_series.js | 0 .../stacked_horizontal_bar_series.js | 0 .../stacked_vertical_bar_series.js | 0 .../vertical_bar_series.js | 0 .../xy_chart_histogram/histogram_example.js | 136 + .../horizontal_rect_series.js | 0 .../stacked_horizontal_rect_series.js | 0 .../stacked_vertical_rect_series.js | 0 .../vertical_rect_series.js | 0 .../src/views/xy_chart_line/curved_line.js | 72 + .../views/xy_chart_line/custom_domain_line.js | 30 + .../views/xy_chart_line/custom_style_line.js | 127 + .../line_series.js => xy_chart_line/line.js} | 14 +- .../src/views/xy_chart_line/line_example.js | 153 + .../src/views/xy_chart_line/multi_line.js | 36 + .../views/xy_chart_series/series_example.js | 344 -- .../xy_chart/__snapshots__/area.test.js.snap | 4463 +++-------------- .../xy_chart/__snapshots__/line.test.js.snap | 16 +- src/components/xy_chart/area.js | 4 +- src/components/xy_chart/chart.js | 14 +- src/components/xy_chart/default_axis.js | 10 +- src/components/xy_chart/line.js | 72 +- yarn.lock | 92 +- 28 files changed, 1667 insertions(+), 4209 deletions(-) create mode 100644 src-docs/src/views/xy_chart_area/area_example.js rename src-docs/src/views/{xy_chart_series => xy_chart_area}/area_series.js (57%) create mode 100644 src-docs/src/views/xy_chart_area/stacked_area_series.js create mode 100644 src-docs/src/views/xy_chart_bar/bar_example.js rename src-docs/src/views/{xy_chart_series => xy_chart_bar}/horizontal_bar_series.js (100%) rename src-docs/src/views/{xy_chart_series => xy_chart_bar}/stacked_horizontal_bar_series.js (100%) rename src-docs/src/views/{xy_chart_series => xy_chart_bar}/stacked_vertical_bar_series.js (100%) rename src-docs/src/views/{xy_chart_series => xy_chart_bar}/vertical_bar_series.js (100%) create mode 100644 src-docs/src/views/xy_chart_histogram/histogram_example.js rename src-docs/src/views/{xy_chart_series => xy_chart_histogram}/horizontal_rect_series.js (100%) rename src-docs/src/views/{xy_chart_series => xy_chart_histogram}/stacked_horizontal_rect_series.js (100%) rename src-docs/src/views/{xy_chart_series => xy_chart_histogram}/stacked_vertical_rect_series.js (100%) rename src-docs/src/views/{xy_chart_series => xy_chart_histogram}/vertical_rect_series.js (100%) create mode 100644 src-docs/src/views/xy_chart_line/curved_line.js create mode 100644 src-docs/src/views/xy_chart_line/custom_domain_line.js create mode 100644 src-docs/src/views/xy_chart_line/custom_style_line.js rename src-docs/src/views/{xy_chart_series/line_series.js => xy_chart_line/line.js} (56%) create mode 100644 src-docs/src/views/xy_chart_line/line_example.js create mode 100644 src-docs/src/views/xy_chart_line/multi_line.js delete mode 100644 src-docs/src/views/xy_chart_series/series_example.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 6263d220b6b4..a20e0e69cdee 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -207,8 +207,17 @@ import { ToolTipExample } import { XYChartExample } from './views/xy_chart/xy_chart_example'; -import { XYChartSeriesExample } - from './views/xy_chart_series/series_example' +import { XYChartBarExample } + from './views/xy_chart_bar/bar_example'; + +import { XYChartHistogramExample } + from './views/xy_chart_histogram/histogram_example'; + +import { XYChartAreaExample } + from './views/xy_chart_area/area_example'; + +import { XYChartLineExample } + from './views/xy_chart_line/line_example'; import { Changelog } from './views/package/changelog'; @@ -330,7 +339,10 @@ const navigation = [{ name: 'Charts', items: [ XYChartExample, - XYChartSeriesExample, + XYChartLineExample, + XYChartAreaExample, + XYChartBarExample, + XYChartHistogramExample, ].map(example => createExample(example)), }, { name: 'Forms', diff --git a/src-docs/src/views/xy_chart_area/area_example.js b/src-docs/src/views/xy_chart_area/area_example.js new file mode 100644 index 000000000000..7bd2609bc0f6 --- /dev/null +++ b/src-docs/src/views/xy_chart_area/area_example.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { GuideSectionTypes } from '../../components'; +import AreaSeriesExample from './area_series'; +import StackedAreaSeriesExample from './stacked_area_series'; +import { + EuiCode, + EuiArea, +} from '../../../../src/components'; + +export const XYChartAreaExample = { + title: 'XYChart Area', + sections: [ + { + title: 'Area Series', + text: ( +
+

+ Use EuiXYChart to display line, bar, area, and stream charts. Note that charts are composed with{' '} + EuiLine, EuiArea, EuiBar, and EuiStream being child + components. +

+
+ ), + props: { EuiArea }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./area_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Stacked Area Series', + text: ( +
+

+ TODO +

+
+ ), + props: { EuiArea }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./stacked_area_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + ] +}; diff --git a/src-docs/src/views/xy_chart_series/area_series.js b/src-docs/src/views/xy_chart_area/area_series.js similarity index 57% rename from src-docs/src/views/xy_chart_series/area_series.js rename to src-docs/src/views/xy_chart_area/area_series.js index a1625acacce9..e551d93b8157 100644 --- a/src-docs/src/views/xy_chart_series/area_series.js +++ b/src-docs/src/views/xy_chart_area/area_series.js @@ -2,12 +2,23 @@ import React from 'react'; import { EuiXYChart, EuiArea, EuiDefaultAxis } from '../../../../src/components'; +const DATA_A = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: 1 }, + { x: 5, y: 2 }, +]; + export default () => ( - + ); diff --git a/src-docs/src/views/xy_chart_area/stacked_area_series.js b/src-docs/src/views/xy_chart_area/stacked_area_series.js new file mode 100644 index 000000000000..03b60e9f7c5f --- /dev/null +++ b/src-docs/src/views/xy_chart_area/stacked_area_series.js @@ -0,0 +1,33 @@ +import React from 'react'; + +import { EuiXYChart, EuiLine, EuiDefaultAxis } from '../../../../src/components'; + +const dataA = [ + { x: 0, y: 3, }, + { x: 1, y: 2, }, + { x: 2, y: 1, }, + { x: 3, y: 2, }, + { x: 4, y: 3, }, +]; + +const dataB = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 4 }, + { x: 3, y: 1 }, + { x: 4, y: 1 }, +]; + +export default () => ( + + {/* + */} + + + + +); diff --git a/src-docs/src/views/xy_chart_bar/bar_example.js b/src-docs/src/views/xy_chart_bar/bar_example.js new file mode 100644 index 000000000000..63019624d66e --- /dev/null +++ b/src-docs/src/views/xy_chart_bar/bar_example.js @@ -0,0 +1,161 @@ +import React from 'react'; +import { GuideSectionTypes } from '../../components'; +import VerticalBarSeriesExample from './vertical_bar_series'; +import HorizontalBarSeriesExample from './horizontal_bar_series'; +import StackedVerticalBarSeriesExample from './stacked_vertical_bar_series'; +import StackedHorizontalBarSeriesExample from './stacked_horizontal_bar_series'; + +import { + EuiCode, + EuiVerticalBarSeries, + EuiHorizontalBarSeries, +} from '../../../../src/components'; + +export const XYChartBarExample = { + title: 'XYChart Bar Chart', + sections: [ + { + title: 'Vertical Bar Chart', + text: ( +
+

+ Use EuiXYChart with EuiVerticalBarSeries for displaying + vertical bar charts. +

+

+ Specify EuiXYChart prop xType="ordinal" + because we are creating a Bar Chart. +

+

+ The Y-Axis can be configured with linear,log, + time, time-utc. +

+
+ ), + props: { EuiVerticalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./vertical_bar_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Stacked Vertical Bar Chart', + text: ( +
+

+ Use EuiXYChart with EuiVerticalBarSeries for displaying + vertical stacked bar charts. + Specify EuiXYChart props like the following: +

+
    +
  • + xType="ordinal" because we are creating a Bar Chart +
    • +
  • + stackBy="y" to stack bars one above the other. + If stackBy is not specified, bars are clustered together depending on the X value +
    • +
+
+ ), + props: { EuiVerticalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./stacked_vertical_bar_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Horizontal Bar Chart', + text: ( +
+

+ Use EuiXYChart with EuiHorizontalBarSeries for displaying + horizontal bar charts. +

+

+ Specify EuiXYChart prop yType="ordinal" + because we are creating a Bar Chart. +

+

The X-Axis can be configured with linear,log, + time, time-utc. +

+
+ ), + props: { EuiHorizontalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./horizontal_bar_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Stacked Horizontal Bar Chart', + text: ( +
+

+ Use EuiXYChart with EuiHorizontalBarSeries for displaying + horizontal stacked bar charts. + Specify EuiXYChart props like the following: +

+
    +
  • + yType="ordinal" because we are creating a Bar Chart +
    • +
  • + stackBy="x" to stack bars one above the other. + If stackBy is not specified, bars are clustered together depending on the Y value +
    • +
+
+ ), + props: { EuiHorizontalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./stacked_horizontal_bar_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + ] +}; diff --git a/src-docs/src/views/xy_chart_series/horizontal_bar_series.js b/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js similarity index 100% rename from src-docs/src/views/xy_chart_series/horizontal_bar_series.js rename to src-docs/src/views/xy_chart_bar/horizontal_bar_series.js diff --git a/src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js b/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js similarity index 100% rename from src-docs/src/views/xy_chart_series/stacked_horizontal_bar_series.js rename to src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js diff --git a/src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js b/src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js similarity index 100% rename from src-docs/src/views/xy_chart_series/stacked_vertical_bar_series.js rename to src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js diff --git a/src-docs/src/views/xy_chart_series/vertical_bar_series.js b/src-docs/src/views/xy_chart_bar/vertical_bar_series.js similarity index 100% rename from src-docs/src/views/xy_chart_series/vertical_bar_series.js rename to src-docs/src/views/xy_chart_bar/vertical_bar_series.js diff --git a/src-docs/src/views/xy_chart_histogram/histogram_example.js b/src-docs/src/views/xy_chart_histogram/histogram_example.js new file mode 100644 index 000000000000..da70522970d9 --- /dev/null +++ b/src-docs/src/views/xy_chart_histogram/histogram_example.js @@ -0,0 +1,136 @@ +import React from 'react'; +import { GuideSectionTypes } from '../../components'; +import VerticalRectSeriesExample from './vertical_rect_series'; +import StackedVerticalRectSeriesExample from './stacked_vertical_rect_series'; +import HorizontalRectSeriesExample from './horizontal_rect_series'; +import StackedHorizontalRectSeriesExample from './stacked_horizontal_rect_series'; + +import { + EuiCode, + EuiVerticalRectSeries, + EuiHorizontalRectSeries, +} from '../../../../src/components'; + +export const XYChartHistogramExample = { + title: 'XYChart Histogram', + sections: [ + { + title: 'Vertical Histogram', + text: ( +
+

+ Use EuiXYChart with EuiVerticalRectSeries for displaying + vertical histograms. + The Y-Axis needs can be configured with linear,log, + time, time-utc. + The same for X-Axis. +

+
+ ), + props: { EuiVerticalRectSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./vertical_rect_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Stacked Vertical Histogram', + text: ( +
+

+ Use EuiXYChart with EuiVerticalRectSeries for displaying + stacked vedrtical histograms. +

+

Specify stackBy="x" to stack bars together.

+

Note: Is not possible to "cluster" bars by the same X value.

+
+ ), + props: { EuiVerticalRectSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./stacked_vertical_rect_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Horizontal Histogram', + text: ( +
+

+ Use EuiXYChart with EuiHorizontalRectSeries for displaying + horizontal histograms. + The Y-Axis needs can be configured as linear,log, + time, time-utc. + The same for X-Axis. +

+
+ ), + props: { EuiHorizontalRectSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./vertical_rect_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Stacked Horizontal Histogram', + text: ( +
+

+ Use EuiXYChart with EuiHorizontalRectSeries to display + stacked horizontal histograms. +

+

Specify stackBy="x" to stack bars together.

+

Note: Is not possible to "cluster" bars by the same Y value.

+
+ ), + props: { EuiHorizontalRectSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./stacked_horizontal_rect_series') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + ] +}; diff --git a/src-docs/src/views/xy_chart_series/horizontal_rect_series.js b/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js similarity index 100% rename from src-docs/src/views/xy_chart_series/horizontal_rect_series.js rename to src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js diff --git a/src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js b/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js similarity index 100% rename from src-docs/src/views/xy_chart_series/stacked_horizontal_rect_series.js rename to src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js diff --git a/src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js b/src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js similarity index 100% rename from src-docs/src/views/xy_chart_series/stacked_vertical_rect_series.js rename to src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js diff --git a/src-docs/src/views/xy_chart_series/vertical_rect_series.js b/src-docs/src/views/xy_chart_histogram/vertical_rect_series.js similarity index 100% rename from src-docs/src/views/xy_chart_series/vertical_rect_series.js rename to src-docs/src/views/xy_chart_histogram/vertical_rect_series.js diff --git a/src-docs/src/views/xy_chart_line/curved_line.js b/src-docs/src/views/xy_chart_line/curved_line.js new file mode 100644 index 000000000000..4a2229e4d8bf --- /dev/null +++ b/src-docs/src/views/xy_chart_line/curved_line.js @@ -0,0 +1,72 @@ +import React, { Component, Fragment } from 'react'; + +import { + EuiSelect, + EuiSpacer, + EuiXYChart, + EuiLine, + EuiDefaultAxis } from '../../../../src/components'; + +const DATA_A = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: -1 }, + { x: 5, y: 2 }, +]; + +export default class extends Component { + constructor(props) { + super(props); + + this.options = [ + { value: 'linear', text: 'Linear' }, + { value: 'curveCardinal', text: 'Curve Cardinal' }, + { value: 'curveNatural', text: 'Curve Natural' }, + { value: 'curveMonotoneX', text: 'Curve Monotone X' }, + { value: 'curveMonotoneY', text: 'Curve Monotone Y' }, + { value: 'curveBasis', text: 'Curve Basis' }, + { value: 'curveBundle', text: 'Curve Bundle' }, + { value: 'curveCatmullRom', text: 'Curve Catmull Rom' }, + { value: 'curveStep', text: 'Curve Step' }, + { value: 'curveStepAfter', text: 'Curve Step After' }, + { value: 'curveStepBefore', text: 'Curve Step Before' }, + ]; + + this.state = { + value: this.options[0].value, + }; + } + + onChange = e => { + this.setState({ + value: e.target.value, + }); + }; + + render() { + return ( + + + + + + + + + + + ) + } +} diff --git a/src-docs/src/views/xy_chart_line/custom_domain_line.js b/src-docs/src/views/xy_chart_line/custom_domain_line.js new file mode 100644 index 000000000000..bf5bbfc84694 --- /dev/null +++ b/src-docs/src/views/xy_chart_line/custom_domain_line.js @@ -0,0 +1,30 @@ +import React from 'react'; + +import { EuiXYChart, EuiLine, EuiDefaultAxis } from '../../../../src/components'; + +const X_DOMAIN = [ -1, 6 ]; +const Y_DOMAIN = [ 0, 3 ]; + +const DATA_A = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: 1 }, + { x: 5, y: 2 }, +]; + +export default () => ( + + + + + +); diff --git a/src-docs/src/views/xy_chart_line/custom_style_line.js b/src-docs/src/views/xy_chart_line/custom_style_line.js new file mode 100644 index 000000000000..f6a97df3ae0a --- /dev/null +++ b/src-docs/src/views/xy_chart_line/custom_style_line.js @@ -0,0 +1,127 @@ +import React, { Component, Fragment } from 'react'; + +import { + EuiForm, + EuiFormRow, + EuiRange, + EuiSpacer, + EuiXYChart, + EuiLine, + EuiDefaultAxis, + EuiCheckboxGroup, +} from '../../../../src/components'; + +import makeId from '../../../../src/components/form/form_row/make_id'; + + +const DATA_A = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: -1 }, + { x: 5, y: 2 }, +]; + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + lineMarkSize: '4', + lineSize: '2', + lineProps: [ + { + id: `showLine`, + label: 'Show Line', + }, + { + id: `showLineMarks`, + label: 'Show Line Marks', + }, + ], + linePropsIdToSelectedMap: { + showLine: true, + showLineMarks: true, + }, + }; + }; + + onLinePropsChange = optionId => { + const newLinePropsIdToSelectedMap = ({ ...this.state.linePropsIdToSelectedMap, ...{ + [optionId]: !this.state.linePropsIdToSelectedMap[optionId], + } }); + + this.setState({ + linePropsIdToSelectedMap: newLinePropsIdToSelectedMap, + }); + }; + + onChangeLineSize = e => { + this.setState({ + lineSize: e.target.value, + }); + }; + + onChangeLineMarkSize = e => { + this.setState({ + lineMarkSize: e.target.value, + }); + }; + + render() { + const { linePropsIdToSelectedMap: { showLine, showLineMarks }, lineSize, lineMarkSize } = this.state + return ( + + + + + + + + + + + + + + + + + + + + ) + } +} diff --git a/src-docs/src/views/xy_chart_series/line_series.js b/src-docs/src/views/xy_chart_line/line.js similarity index 56% rename from src-docs/src/views/xy_chart_series/line_series.js rename to src-docs/src/views/xy_chart_line/line.js index c50bb2fa8558..daa9c6db2df5 100644 --- a/src-docs/src/views/xy_chart_series/line_series.js +++ b/src-docs/src/views/xy_chart_line/line.js @@ -2,12 +2,24 @@ import React from 'react'; import { EuiXYChart, EuiLine, EuiDefaultAxis } from '../../../../src/components'; +const DATA_A = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: -1 }, + { x: 5, y: 2 }, +]; + export default () => ( - + + ); diff --git a/src-docs/src/views/xy_chart_line/line_example.js b/src-docs/src/views/xy_chart_line/line_example.js new file mode 100644 index 000000000000..141fbfda2172 --- /dev/null +++ b/src-docs/src/views/xy_chart_line/line_example.js @@ -0,0 +1,153 @@ +import React from 'react'; +import { GuideSectionTypes } from '../../components'; +import LineChartExample from './line'; +import CustomDomainLineChartExample from './custom_domain_line'; +import MultiLineChartExample from './multi_line'; +import CurvedLineChartExample from './curved_line'; +import CustomStyleLineChartExample from './custom_style_line'; +import { + EuiCode, + EuiLine, + EuiLink, +} from '../../../../src/components'; + +export const XYChartLineExample = { + title: 'XYChart Line', + sections: [ + { + title: 'Line chart', + text: ( +
+

+ Use EuiLine to display line charts. The chart domain + will cover the whole extent and doesn't add any padding. +

+
+ ), + props: { EuiLine }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./line') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Custom domain line chart', + text: ( +
+

+ Use EuiLine to display line charts. + Specify xDomain and/or yDomain + props to use custom domains. +

+
+ ), + props: { EuiLine }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./custom_domain_line') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Multi Line chart', + text: ( +
+

+ Use multiple EuiLine to display a milti-line chart. +

+
+ ), + props: { EuiLine }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./multi_line') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Curved Line chart', + text: ( +
+

+ Use the curve prop to change the curve representation. + Visit d3-shape#curves + for all possible values. +

+
+ ), + props: { EuiLine }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./curved_line') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + { + title: 'Custom style Line chart', + text: ( +
+

+ Use multiple EuiLine to display a milti-line chart. +

+
+ ), + props: { EuiLine }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./custom_style_line') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + ] +}; diff --git a/src-docs/src/views/xy_chart_line/multi_line.js b/src-docs/src/views/xy_chart_line/multi_line.js new file mode 100644 index 000000000000..baf3dfe6cc4f --- /dev/null +++ b/src-docs/src/views/xy_chart_line/multi_line.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import { EuiXYChart, EuiLine, EuiDefaultAxis } from '../../../../src/components'; + +const DATA_A = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: -1 }, + { x: 5, y: 2 }, +]; +const DATA_B = [ + { x: 0, y: 3 }, + { x: 1, y: 4 }, + { x: 2, y: 1 }, + { x: 3, y: 2 }, + { x: 5, y: 5 }, +]; + +export default () => ( + + + + + + +); diff --git a/src-docs/src/views/xy_chart_series/series_example.js b/src-docs/src/views/xy_chart_series/series_example.js deleted file mode 100644 index 04a79f10178e..000000000000 --- a/src-docs/src/views/xy_chart_series/series_example.js +++ /dev/null @@ -1,344 +0,0 @@ -import React from 'react'; -import { GuideSectionTypes } from '../../components'; -import LineSeriesExample from './line_series'; -import VerticalBarSeriesExample from './vertical_bar_series'; -import HorizontalBarSeriesExample from './horizontal_bar_series'; -import StackedHorizontalBarSeriesExample from './stacked_horizontal_bar_series'; -import StackedHorizontalRectSeriesExample from './stacked_horizontal_rect_series'; -import StackedVerticalBarSeriesExample from './stacked_vertical_bar_series'; -import StackedVerticalRectSeriesExample from './stacked_vertical_rect_series'; -import VerticalRectSeriesExample from './vertical_rect_series'; -import HorizontalRectSeriesExample from './horizontal_rect_series'; -import AreaSeriesExample from './area_series'; -import { - EuiCode, - EuiVerticalBarSeries, - EuiVerticalRectSeries, - EuiHorizontalBarSeries, - EuiHorizontalRectSeries, - EuiLine, - EuiArea, -} from '../../../../src/components'; - -export const XYChartSeriesExample = { - title: 'XYChart Series', - sections: [ - { - title: 'Line Series', - text: ( -
-

- Use EuiXYChart to display line, bar, area, and stream charts. Note that charts are composed with{' '} - EuiLine, EuiArea, EuiBar, and EuiStream being child - components. -

-
- ), - props: { EuiLine }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./line_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - { - title: 'Area Series', - text: ( -
-

- Use EuiXYChart to display line, bar, area, and stream charts. Note that charts are composed with{' '} - EuiLine, EuiArea, EuiBar, and EuiStream being child - components. -

-
- ), - props: { EuiArea }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./area_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - { - title: 'Vertical Bar Chart', - text: ( -
-

- Use EuiXYChart with EuiVerticalBarSeries for displaying - vertical bar charts. -

-

- Specify EuiXYChart prop xType="ordinal" - because we are creating a Bar Chart. -

-

- The Y-Axis can be configured with linear,log, - time, time-utc. -

-
- ), - props: { EuiVerticalBarSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./vertical_bar_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - { - title: 'Horizontal Bar Chart', - text: ( -
-

- Use EuiXYChart with EuiHorizontalBarSeries for displaying - horizontal bar charts. -

-

- Specify EuiXYChart prop yType="ordinal" - because we are creating a Bar Chart. -

-

The X-Axis can be configured with linear,log, - time, time-utc. -

-
- ), - props: { EuiHorizontalBarSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./horizontal_bar_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - { - title: 'Vertical Histogram', - text: ( -
-

- Use EuiXYChart with EuiVerticalRectSeries for displaying - vertical histograms. - The Y-Axis needs can be configured with linear,log, - time, time-utc. - The same for X-Axis. -

-
- ), - props: { EuiVerticalRectSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./vertical_rect_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - { - title: 'Horizontal Histogram', - text: ( -
-

- Use EuiXYChart with EuiHorizontalRectSeries for displaying - horizontal histograms. - The Y-Axis needs can be configured as linear,log, - time, time-utc. - The same for X-Axis. -

-
- ), - props: { EuiHorizontalRectSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./vertical_rect_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - { - title: 'Stacked Horizontal Bar Chart', - text: ( -
-

- Use EuiXYChart with EuiHorizontalBarSeries for displaying - horizontal stacked bar charts. - Specify EuiXYChart props like the following: -

-
    -
  • - yType="ordinal" because we are creating a Bar Chart -
    • -
  • - stackBy="x" to stack bars one above the other. - If stackBy is not specified, bars are clustered together depending on the Y value -
    • -
-
- ), - props: { EuiHorizontalBarSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_horizontal_bar_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - { - title: 'Stacked Vertical Bar Chart', - text: ( -
-

- Use EuiXYChart with EuiVerticalBarSeries for displaying - vertical stacked bar charts. - Specify EuiXYChart props like the following: -

-
    -
  • - xType="ordinal" because we are creating a Bar Chart -
    • -
  • - stackBy="y" to stack bars one above the other. - If stackBy is not specified, bars are clustered together depending on the X value -
    • -
-
- ), - props: { EuiVerticalBarSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_vertical_bar_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - { - title: 'Stacked Vertical Histogram', - text: ( -
-

- Use EuiXYChart with EuiVerticalRectSeries for displaying - stacked vedrtical histograms. -

-

Specify stackBy="x" to stack bars together.

-

Note: Is not possible to "cluster" bars by the same X value.

-
- ), - props: { EuiVerticalRectSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_vertical_rect_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - { - title: 'Stacked Horizontal Histogram', - text: ( -
-

- Use EuiXYChart with EuiHorizontalRectSeries to display - stacked horizontal histograms. -

-

Specify stackBy="x" to stack bars together.

-

Note: Is not possible to "cluster" bars by the same Y value.

-
- ), - props: { EuiHorizontalRectSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_horizontal_rect_series') - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } - ], - demo: ( -
- -
- ) - }, - ] -}; diff --git a/src/components/xy_chart/__snapshots__/area.test.js.snap b/src/components/xy_chart/__snapshots__/area.test.js.snap index b62dcf527bf9..d118720408e2 100644 --- a/src/components/xy_chart/__snapshots__/area.test.js.snap +++ b/src/components/xy_chart/__snapshots__/area.test.js.snap @@ -666,3505 +666,458 @@ exports[`EuiArea all props are rendered 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- -`; - -exports[`EuiArea is rendered 1`] = ` - -
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +
+ +
+ +
+ +`; + +exports[`EuiArea is rendered 1`] = ` + +
+ +
+ +
+ + + + + + - - - - - - - - - - - - - + transform="translate(2,2)" + /> + + + + diff --git a/src/components/xy_chart/__snapshots__/line.test.js.snap b/src/components/xy_chart/__snapshots__/line.test.js.snap index 3d1e205a43d7..2910fd5ac3ed 100644 --- a/src/components/xy_chart/__snapshots__/line.test.js.snap +++ b/src/components/xy_chart/__snapshots__/line.test.js.snap @@ -135,6 +135,7 @@ exports[`EuiLine all props are rendered 1`] = ` key=".0:$.0" lineMarkColor="#00ff00" lineMarkSize={13} + lineSize={2} marginBottom={2} marginLeft={2} marginRight={2} @@ -148,6 +149,8 @@ exports[`EuiLine all props are rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={0} + showLine={true} + showLineMarks={true} sizeDomain={Array []} sizeRange={ Array [ @@ -261,6 +264,7 @@ exports[`EuiLine all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} + hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} @@ -434,6 +438,7 @@ exports[`EuiLine all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} + hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} @@ -588,6 +593,7 @@ exports[`EuiLine all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} + hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} @@ -744,6 +750,7 @@ exports[`EuiLine all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} + hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} @@ -917,6 +924,7 @@ exports[`EuiLine all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} + hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} @@ -1071,6 +1079,7 @@ exports[`EuiLine all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} + hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} @@ -1224,6 +1233,7 @@ exports[`EuiLine all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} + hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} @@ -1392,6 +1402,7 @@ exports[`EuiLine all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} + hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} @@ -1541,6 +1552,7 @@ exports[`EuiLine all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} + hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} @@ -1902,12 +1914,12 @@ exports[`EuiLine is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} key=".0:$.0" lineMarkSize={5} + lineSize={2} marginBottom={2} marginLeft={2} marginRight={2} @@ -1919,6 +1931,8 @@ exports[`EuiLine is rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={0} + showLine={true} + showLineMarks={true} sizeDomain={Array []} sizeRange={ Array [ diff --git a/src/components/xy_chart/area.js b/src/components/xy_chart/area.js index 98cc05d34b55..e7e57b917cd7 100644 --- a/src/components/xy_chart/area.js +++ b/src/components/xy_chart/area.js @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { EuiLine } from './line'; import { AreaSeries, AbstractSeries } from 'react-vis'; export class EuiArea extends AbstractSeries { @@ -9,7 +8,6 @@ export class EuiArea extends AbstractSeries { return ( - ); } @@ -43,4 +41,4 @@ EuiArea.defaultProps = { curve: 'linear', hasLineMarks: true, lineMarkSize: 5 -}; \ No newline at end of file +}; diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/chart.js index cbf2000eafcd..3f0d585d6b91 100644 --- a/src/components/xy_chart/chart.js +++ b/src/components/xy_chart/chart.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { XYPlot, makeWidthFlexible, Crosshair } from 'react-vis'; +import { XYPlot, makeWidthFlexible, Crosshair, AbstractSeries } from 'react-vis'; import PropTypes from 'prop-types'; import { getPlotValues } from './utils'; import Highlight from './highlight'; @@ -85,6 +85,12 @@ export class XYChart extends PureComponent { } _renderChildren = (child, i) => { + const { prototype } = child.type; + // Avoid applying chart props to non series children + if (!(prototype instanceof AbstractSeries)) { + return child; + } + const props = { id: `chart-${i}`, }; @@ -121,6 +127,8 @@ export class XYChart extends PureComponent { showTooltips, onSelectEnd, children, + xDomain, + yDomain, animation, // eslint-disable-line no-unused-vars onCrosshairUpdate, // eslint-disable-line no-unused-vars truncateLegends, // eslint-disable-line no-unused-vars @@ -147,6 +155,8 @@ export class XYChart extends PureComponent { margin={2} xType={xType} yType={yType} + xDomain={xDomain} + yDomain={yDomain} stackBy={stackBy} > @@ -188,6 +198,8 @@ XYChart.propTypes = { errorText: PropTypes.string, crosshairX: PropTypes.number, onCrosshairUpdate: PropTypes.func, + xDomain: PropTypes.array, + yDomain: PropTypes.array, }; XYChart.defaultProps = { diff --git a/src/components/xy_chart/default_axis.js b/src/components/xy_chart/default_axis.js index b419af8198d3..aabbdd83f549 100644 --- a/src/components/xy_chart/default_axis.js +++ b/src/components/xy_chart/default_axis.js @@ -30,6 +30,8 @@ export default class DefaultAxis extends PureComponent { yAxisLocation, showGridLines, isHorizontal, + yOn0, + xOn0, ...rest } = this.props; return ( @@ -62,12 +64,14 @@ export default class DefaultAxis extends PureComponent { key="x" orientation={xAxisLocation === 'top' ? 'top' : 'bottom'} tickSize={1} + on0={xOn0} {...rest} tickValues={this._getTicks(xTicks)} tickFormat={xTicks ? v => this._getTickLabels(xTicks)[v] || v : undefined} /> - - + {showLine && + + } + {showLine && + + } - {hasLineMarks && ( + {showLineMarks && ( = 2.1.2 < 3" + icss-replace-symbols@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded" @@ -7349,6 +7386,20 @@ performance-now@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" +phantomjs-prebuilt@^2.1.16: + version "2.1.16" + resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.16.tgz#efd212a4a3966d3647684ea8ba788549be2aefef" + dependencies: + es6-promise "^4.0.3" + extract-zip "^1.6.5" + fs-extra "^1.0.0" + hasha "^2.2.0" + kew "^0.7.0" + progress "^1.1.8" + request "^2.81.0" + request-progress "^2.0.1" + which "^1.2.10" + pify@^2.0.0, pify@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" @@ -7806,6 +7857,10 @@ progress@2.0.0, progress@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f" +progress@^1.1.8: + version "1.1.8" + resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be" + promise-timeout@1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/promise-timeout/-/promise-timeout-1.3.0.tgz#d1c78dd50a607d5f0a5207410252a3a0914e1014" @@ -7822,7 +7877,7 @@ promisify-node@~0.3.0: dependencies: nodegit-promise "~4.0.0" -prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0: +prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -7830,7 +7885,7 @@ prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" -prop-types@^15.6.1: +prop-types@^15.5.8, prop-types@^15.6.1: version "15.6.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" dependencies: @@ -8131,8 +8186,8 @@ react-virtualized@^9.18.5: prop-types "^15.6.0" react-vis@^1.9.3: - version "1.9.3" - resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.9.3.tgz#2e5ea8e6bfa0f03bf6e7954d4559b4fd0bc3987c" + version "1.9.4" + resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.9.4.tgz#367934fb8fc9bc53026e5d29a3ff810d97f72b03" dependencies: d3-array "^1.2.0" d3-collection "^1.0.3" @@ -8468,6 +8523,12 @@ replace-ext@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb" +request-progress@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-2.0.1.tgz#5d36bb57961c673aa5b788dbc8141fdf23b44e08" + dependencies: + throttleit "^1.0.0" + request-promise-core@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6" @@ -8738,6 +8799,10 @@ safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s version "5.1.1" resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853" +"safer-buffer@>= 2.1.2 < 3": + version "2.1.2" + resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" + samsam@1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.3.0.tgz#8d1d9350e25622da30de3e44ba692b5221ab7c50" @@ -9706,6 +9771,10 @@ throat@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a" +throttleit@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c" + through2@^2.0.0, through2@^2.0.1: version "2.0.3" resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be" @@ -9886,9 +9955,9 @@ typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" -ua-parser-js@^0.7.9: - version "0.7.17" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac" +ua-parser-js@^0.7.18, ua-parser-js@^0.7.9: + version "0.7.18" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed" uc.micro@^1.0.1, uc.micro@^1.0.5: version "1.0.5" @@ -10330,7 +10399,6 @@ wdio-visual-regression-service@silne30/wdio-visual-regression-service#Add_Filena lodash "^4.13.1" node-resemble-js "0.0.5" nodeclient-spectre "^1.0.3" - phantomjs-prebuilt "^2.1.16" platform "^1.3.1" wdio-screenshot "^0.6.0" @@ -10462,8 +10530,8 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3: iconv-lite "0.4.19" whatwg-fetch@>=0.10.0: - version "2.0.3" - resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" + version "2.0.4" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f" whatwg-url@^6.4.0: version "6.4.0" From 1cb0e8a58a133d5d00d8840d5389b81ed557ca46 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 13 Jun 2018 16:09:19 +0200 Subject: [PATCH 09/68] Updated line examples descriptions --- .../src/views/xy_chart_line/curved_line.js | 19 ++++++++++++++----- .../src/views/xy_chart_line/line_example.js | 10 +++++++--- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/xy_chart_line/curved_line.js b/src-docs/src/views/xy_chart_line/curved_line.js index 4a2229e4d8bf..44aa6f25bad2 100644 --- a/src-docs/src/views/xy_chart_line/curved_line.js +++ b/src-docs/src/views/xy_chart_line/curved_line.js @@ -1,6 +1,8 @@ import React, { Component, Fragment } from 'react'; import { + EuiForm, + EuiFormRow, EuiSelect, EuiSpacer, EuiXYChart, @@ -47,13 +49,20 @@ export default class extends Component { render() { return ( - + + + + + + -

- Use multiple EuiLine to display a milti-line chart. -

+

Use the following props to change the style of the Line Chart

+
    +
  • lineSize to change the size/width of the line.
    • +
  • lineMarkSize to change the size/radius of marks.
    • +
  • showLine to show/hide the line.
    • +
  • showLineMarks to show/hide the line marks.
    • +
), props: { EuiLine }, From 51ea2495a1e7f684065673d0d08f065940e8a9e3 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 13 Jun 2018 17:12:49 +0200 Subject: [PATCH 10/68] Refactored area examples --- .../xy_chart_area/{area_series.js => area.js} | 0 .../src/views/xy_chart_area/area_example.js | 47 ++++++++-- .../src/views/xy_chart_area/curved_area.js | 93 +++++++++++++++++++ ...stacked_area_series.js => stacked_area.js} | 8 +- .../xy_chart/__snapshots__/area.test.js.snap | 62 ++++++++----- src/components/xy_chart/area.js | 16 ++-- 6 files changed, 185 insertions(+), 41 deletions(-) rename src-docs/src/views/xy_chart_area/{area_series.js => area.js} (100%) create mode 100644 src-docs/src/views/xy_chart_area/curved_area.js rename src-docs/src/views/xy_chart_area/{stacked_area_series.js => stacked_area.js} (62%) diff --git a/src-docs/src/views/xy_chart_area/area_series.js b/src-docs/src/views/xy_chart_area/area.js similarity index 100% rename from src-docs/src/views/xy_chart_area/area_series.js rename to src-docs/src/views/xy_chart_area/area.js diff --git a/src-docs/src/views/xy_chart_area/area_example.js b/src-docs/src/views/xy_chart_area/area_example.js index 7bd2609bc0f6..4f6069a6787f 100644 --- a/src-docs/src/views/xy_chart_area/area_example.js +++ b/src-docs/src/views/xy_chart_area/area_example.js @@ -1,10 +1,13 @@ import React from 'react'; import { GuideSectionTypes } from '../../components'; -import AreaSeriesExample from './area_series'; -import StackedAreaSeriesExample from './stacked_area_series'; +import AreaSeriesExample from './area'; +import StackedAreaSeriesExample from './stacked_area'; +import CurvedAreaExample from './curved_area'; + import { EuiCode, EuiArea, + EuiLink, } from '../../../../src/components'; export const XYChartAreaExample = { @@ -15,9 +18,7 @@ export const XYChartAreaExample = { text: (

- Use EuiXYChart to display line, bar, area, and stream charts. Note that charts are composed with{' '} - EuiLine, EuiArea, EuiBar, and EuiStream being child - components. + Use EuiArea to display area charts.

), @@ -25,7 +26,7 @@ export const XYChartAreaExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./area_series') + code: require('!!raw-loader!./area') }, { type: GuideSectionTypes.HTML, @@ -43,7 +44,9 @@ export const XYChartAreaExample = { text: (

- TODO + Use multiple EuiArea to display stacked area charts + specifying the stackBy:y prop on the EuiXYChart + to enable stacking.

), @@ -51,7 +54,7 @@ export const XYChartAreaExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_area_series') + code: require('!!raw-loader!./stacked_area') }, { type: GuideSectionTypes.HTML, @@ -64,5 +67,33 @@ export const XYChartAreaExample = {
) }, + { + title: 'Curved Area Series', + text: ( +
+

+ Use the curve prop to change the curve representation. + Visit d3-shape#curves + for available values (the bundle curve does not work with area chart). +

+
+ ), + props: { EuiArea }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./curved_area') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + } ] }; diff --git a/src-docs/src/views/xy_chart_area/curved_area.js b/src-docs/src/views/xy_chart_area/curved_area.js new file mode 100644 index 000000000000..7cdc14676ef0 --- /dev/null +++ b/src-docs/src/views/xy_chart_area/curved_area.js @@ -0,0 +1,93 @@ +import React, { Component, Fragment } from 'react'; + +import { + EuiForm, + EuiFormRow, + EuiSelect, + EuiSpacer, + EuiXYChart, + EuiArea, + EuiDefaultAxis } from '../../../../src/components'; + +const DATA_A = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: -1 }, + { x: 5, y: 2 }, +]; +const DATA_B = [ + { x: 0, y: 3 }, + { x: 1, y: 2 }, + { x: 2, y: 4 }, + { x: 3, y: 1 }, + { x: 5, y: 3 }, +]; + +export default class extends Component { + constructor(props) { + super(props); + + this.options = [ + { value: 'linear', text: 'Linear' }, + { value: 'curveCardinal', text: 'Curve Cardinal' }, + { value: 'curveNatural', text: 'Curve Natural' }, + { value: 'curveMonotoneX', text: 'Curve Monotone X' }, + { value: 'curveMonotoneY', text: 'Curve Monotone Y' }, + { value: 'curveBasis', text: 'Curve Basis' }, + { value: 'curveCatmullRom', text: 'Curve Catmull Rom' }, + { value: 'curveStep', text: 'Curve Step' }, + { value: 'curveStepAfter', text: 'Curve Step After' }, + { value: 'curveStepBefore', text: 'Curve Step Before' }, + ]; + + this.state = { + value: this.options[0].value, + }; + } + + onChange = e => { + this.setState({ + value: e.target.value, + }); + }; + + render() { + return ( + + + + + + + + + + + + + + + + + ) + } +} diff --git a/src-docs/src/views/xy_chart_area/stacked_area_series.js b/src-docs/src/views/xy_chart_area/stacked_area.js similarity index 62% rename from src-docs/src/views/xy_chart_area/stacked_area_series.js rename to src-docs/src/views/xy_chart_area/stacked_area.js index 03b60e9f7c5f..89d1ff17777a 100644 --- a/src-docs/src/views/xy_chart_area/stacked_area_series.js +++ b/src-docs/src/views/xy_chart_area/stacked_area.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiLine, EuiDefaultAxis } from '../../../../src/components'; +import { EuiXYChart, EuiArea, EuiDefaultAxis } from '../../../../src/components'; const dataA = [ { x: 0, y: 3, }, @@ -24,10 +24,8 @@ export default () => ( height={200} stackBy="y" > - {/* - */} - - + + ); diff --git a/src/components/xy_chart/__snapshots__/area.test.js.snap b/src/components/xy_chart/__snapshots__/area.test.js.snap index d118720408e2..de859842e29b 100644 --- a/src/components/xy_chart/__snapshots__/area.test.js.snap +++ b/src/components/xy_chart/__snapshots__/area.test.js.snap @@ -206,7 +206,7 @@ exports[`EuiArea all props are rendered 1`] = ` ] } _colorValue="#ff0000" - _opacityValue={0.2} + _opacityValue={1} angleDomain={Array []} animation={true} className="" @@ -296,7 +296,11 @@ exports[`EuiArea all props are rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "strokeWidth": 0, + } + } xDomain={ Array [ 0, @@ -340,7 +344,7 @@ exports[`EuiArea all props are rendered 1`] = ` ] } _colorValue="#ff0000" - _opacityValue={0.2} + _opacityValue={1} angleDomain={Array []} animatedProps={ Array [ @@ -467,7 +471,11 @@ exports[`EuiArea all props are rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "strokeWidth": 0, + } + } xDomain={ Array [ 0, @@ -531,7 +539,7 @@ exports[`EuiArea all props are rendered 1`] = ` } _animation={0.00002} _colorValue="#ff0000" - _opacityValue={0.2} + _opacityValue={1} angleDomain={Array []} animation={null} className="" @@ -620,7 +628,11 @@ exports[`EuiArea all props are rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "strokeWidth": 0, + } + } xDomain={ Array [ 0, @@ -656,8 +668,9 @@ exports[`EuiArea all props are rendered 1`] = ` style={ Object { "fill": "#ff0000", - "opacity": 0.2, + "opacity": 1, "stroke": "#ff0000", + "strokeWidth": 0, } } transform="translate(2,2)" @@ -925,12 +938,10 @@ exports[`EuiArea is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} key=".0:$.0" - lineMarkSize={5} marginBottom={2} marginLeft={2} marginRight={2} @@ -1000,7 +1011,7 @@ exports[`EuiArea is rendered 1`] = ` ] } _colorValue="#00B3A4" - _opacityValue={0.2} + _opacityValue={1} angleDomain={Array []} animation={true} className="" @@ -1056,12 +1067,10 @@ exports[`EuiArea is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} key="somename-area" - lineMarkSize={5} marginBottom={2} marginLeft={2} marginRight={2} @@ -1087,7 +1096,11 @@ exports[`EuiArea is rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "strokeWidth": 0, + } + } xDomain={ Array [ 0, @@ -1131,7 +1144,7 @@ exports[`EuiArea is rendered 1`] = ` ] } _colorValue="#00B3A4" - _opacityValue={0.2} + _opacityValue={1} angleDomain={Array []} animatedProps={ Array [ @@ -1225,11 +1238,9 @@ exports[`EuiArea is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} - lineMarkSize={5} marginBottom={2} marginLeft={2} marginRight={2} @@ -1255,7 +1266,11 @@ exports[`EuiArea is rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "strokeWidth": 0, + } + } xDomain={ Array [ 0, @@ -1319,7 +1334,7 @@ exports[`EuiArea is rendered 1`] = ` } _animation={0.00002} _colorValue="#00B3A4" - _opacityValue={0.2} + _opacityValue={1} angleDomain={Array []} animation={null} className="" @@ -1375,11 +1390,9 @@ exports[`EuiArea is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - hasLineMarks={true} id="chart-0" innerHeight={196} innerWidth={596} - lineMarkSize={5} marginBottom={2} marginLeft={2} marginRight={2} @@ -1405,7 +1418,11 @@ exports[`EuiArea is rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "strokeWidth": 0, + } + } xDomain={ Array [ 0, @@ -1441,8 +1458,9 @@ exports[`EuiArea is rendered 1`] = ` style={ Object { "fill": "#00B3A4", - "opacity": 0.2, + "opacity": 1, "stroke": "#00B3A4", + "strokeWidth": 0, } } transform="translate(2,2)" diff --git a/src/components/xy_chart/area.js b/src/components/xy_chart/area.js index e7e57b917cd7..5cabe36fc0c0 100644 --- a/src/components/xy_chart/area.js +++ b/src/components/xy_chart/area.js @@ -7,7 +7,16 @@ export class EuiArea extends AbstractSeries { const { name, data, curve, color, ...rest } = this.props; return ( - + ); } @@ -30,15 +39,10 @@ EuiArea.propTypes = { /** Without a color set, a random EUI color palette color will be chosen */ color: PropTypes.string, curve: PropTypes.string, - hasLineMarks: PropTypes.bool, - lineMarkColor: PropTypes.string, - lineMarkSize: PropTypes.number, onClick: PropTypes.func, onMarkClick: PropTypes.func } EuiArea.defaultProps = { curve: 'linear', - hasLineMarks: true, - lineMarkSize: 5 }; From b7d7678126277118d46d9c82d50d3431b21575e0 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 13 Jun 2018 17:41:22 +0200 Subject: [PATCH 11/68] Fix existing charts examples --- .../src/views/xy_chart/example-auto-axis.js | 9 +++++++-- .../src/views/xy_chart/example-crosshair.js | 14 ++++++++++---- src-docs/src/views/xy_chart/examples.js | 18 ++++++++++-------- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src-docs/src/views/xy_chart/example-auto-axis.js b/src-docs/src/views/xy_chart/example-auto-axis.js index db95d1d216bc..57454e04c430 100644 --- a/src-docs/src/views/xy_chart/example-auto-axis.js +++ b/src-docs/src/views/xy_chart/example-auto-axis.js @@ -1,12 +1,17 @@ import React from 'react'; -import { EuiXYChart, EuiBar } from '../../../../src/components'; +import { + EuiXYChart, + EuiVerticalBarSeries, + EuiDefaultAxis, +} from '../../../../src/components'; export default () => ( - + + ); diff --git a/src-docs/src/views/xy_chart/example-crosshair.js b/src-docs/src/views/xy_chart/example-crosshair.js index c73729f8d45a..3c06b875c533 100644 --- a/src-docs/src/views/xy_chart/example-crosshair.js +++ b/src-docs/src/views/xy_chart/example-crosshair.js @@ -1,6 +1,10 @@ import React from 'react'; -import { EuiXYChart, EuiBar } from '../../../../src/components'; +import { + EuiXYChart, + EuiVerticalBarSeries, + EuiDefaultAxis, +} from '../../../../src/components'; // eslint-disable-next-line export class ExampleCrosshair extends React.Component { @@ -19,7 +23,8 @@ export class ExampleCrosshair extends React.Component { width={600} height={200} > - + +

- + +
); } -} \ No newline at end of file +} diff --git a/src-docs/src/views/xy_chart/examples.js b/src-docs/src/views/xy_chart/examples.js index 137475163009..608e35968b5f 100644 --- a/src-docs/src/views/xy_chart/examples.js +++ b/src-docs/src/views/xy_chart/examples.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiBar, EuiArea, EuiLine } from '../../../../src/components'; +import { EuiXYChart, EuiVerticalBarSeries, EuiArea, EuiLine, EuiDefaultAxis } from '../../../../src/components'; export default () => { const yTicks = [[0, 'zero'], [1, 'one']]; @@ -34,11 +34,7 @@ export default () => { xTicks={xTicks} yTicks={yTicks} > - + { @@ -46,9 +42,15 @@ export default () => { }} data={[{ x: 0, y: 0 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 2 },{ x: 4, y: 1 }, { x: 10, y: 1 }, { x: 20, y: 2 } ]} /> + {barData.map((data, index) => ( - + ))} + ) -} \ No newline at end of file +} From a5a93b531c0c99a37fe2b73609c6bc8fe7a2ba0d Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 13 Jun 2018 22:58:59 +0200 Subject: [PATCH 12/68] Add first draft of EuiAxis and EuiGrids --- src-docs/src/routes.js | 4 + .../src/views/xy_chart_axis/simple_axis.js | 39 +++++++ .../views/xy_chart_axis/xy_axis_example.js | 38 +++++++ src/components/index.js | 4 + .../xy_chart/__snapshots__/area.test.js.snap | 28 +++++ .../xy_chart/__snapshots__/chart.test.js.snap | 2 + .../xy_chart/__snapshots__/line.test.js.snap | 52 +++++++++ src/components/xy_chart/axis/axis.js | 0 src/components/xy_chart/axis/default_axis.js | 53 +++++++++ .../xy_chart/axis/horizontal_grid.js | 20 ++++ src/components/xy_chart/axis/vertical_grid.js | 20 ++++ src/components/xy_chart/axis/x_axis.js | 71 ++++++++++++ src/components/xy_chart/axis/y_axis.js | 54 ++++++++++ src/components/xy_chart/chart.js | 8 ++ src/components/xy_chart/default_axis.js | 102 ------------------ src/components/xy_chart/index.js | 10 +- src/components/xy_chart/utils/axis_utils.js | 15 +++ src/components/xy_chart/utils/text_utils.js | 22 ++++ 18 files changed, 439 insertions(+), 103 deletions(-) create mode 100644 src-docs/src/views/xy_chart_axis/simple_axis.js create mode 100644 src-docs/src/views/xy_chart_axis/xy_axis_example.js create mode 100644 src/components/xy_chart/axis/axis.js create mode 100644 src/components/xy_chart/axis/default_axis.js create mode 100644 src/components/xy_chart/axis/horizontal_grid.js create mode 100644 src/components/xy_chart/axis/vertical_grid.js create mode 100644 src/components/xy_chart/axis/x_axis.js create mode 100644 src/components/xy_chart/axis/y_axis.js delete mode 100644 src/components/xy_chart/default_axis.js create mode 100644 src/components/xy_chart/utils/axis_utils.js create mode 100644 src/components/xy_chart/utils/text_utils.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index a20e0e69cdee..ccf312924607 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -207,6 +207,9 @@ import { ToolTipExample } import { XYChartExample } from './views/xy_chart/xy_chart_example'; +import { XYChartAxisExample } + from './views/xy_chart_axis/xy_axis_example'; + import { XYChartBarExample } from './views/xy_chart_bar/bar_example'; @@ -339,6 +342,7 @@ const navigation = [{ name: 'Charts', items: [ XYChartExample, + XYChartAxisExample, XYChartLineExample, XYChartAreaExample, XYChartBarExample, diff --git a/src-docs/src/views/xy_chart_axis/simple_axis.js b/src-docs/src/views/xy_chart_axis/simple_axis.js new file mode 100644 index 000000000000..ab9613ce0375 --- /dev/null +++ b/src-docs/src/views/xy_chart_axis/simple_axis.js @@ -0,0 +1,39 @@ +import React from 'react'; + +import { + EuiLine, + EuiXAxis, + EuiYAxis, + EuiXYChart, + EuiXYChartAxisUtils, + EuiXYChartTextUtils, +} from '../../../../src/components'; + +const DATA = [{ x: 0, y: 5 }, { x: 1, y: 3 }, { x: 2, y: 2 }, { x: 3, y: 3 }]; + +function xAxisTickFormatter(value) { + return EuiXYChartTextUtils.tspanTextWrapper(['MY VALUE', value]); +} + +export default () => ( + + + + + + + +); diff --git a/src-docs/src/views/xy_chart_axis/xy_axis_example.js b/src-docs/src/views/xy_chart_axis/xy_axis_example.js new file mode 100644 index 000000000000..03aeb24f0287 --- /dev/null +++ b/src-docs/src/views/xy_chart_axis/xy_axis_example.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { GuideSectionTypes } from '../../components'; +import { EuiCode, EuiXAxis, EuiYAxis } from '../../../../src/components'; +import SimpleAxisExampleCode from './simple_axis'; + +export const XYChartAxisExample = { + title: 'Axis', + sections: [ + { + title: 'Complex Axis example', + text: ( +
+

+ EuiYAxis and EuiXAxis can be used + instead of the EuiDefaultAxis to allow higher + axis customization. See the JS example to check the available properties. +

+
+ ), + props: { EuiXAxis, EuiYAxis }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./simple_axis') + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React' + } + ], + demo: ( +
+ +
+ ) + }, + ] +}; diff --git a/src/components/index.js b/src/components/index.js index 27c70d831e0b..294acc7f27fc 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -304,6 +304,8 @@ export { export { EuiXYChart, + EuiXYChartAxisUtils, + EuiXYChartTextUtils, EuiLine, EuiArea, EuiVerticalBarSeries, @@ -311,4 +313,6 @@ export { EuiVerticalRectSeries, EuiHorizontalRectSeries, EuiDefaultAxis, + EuiXAxis, + EuiYAxis, } from './xy_chart'; diff --git a/src/components/xy_chart/__snapshots__/area.test.js.snap b/src/components/xy_chart/__snapshots__/area.test.js.snap index de859842e29b..41dcc90f1839 100644 --- a/src/components/xy_chart/__snapshots__/area.test.js.snap +++ b/src/components/xy_chart/__snapshots__/area.test.js.snap @@ -19,6 +19,8 @@ exports[`EuiArea all props are rendered 1`] = ` showTooltips={true} truncateLegends={false} width={600} + xPadding={0} + yPadding={0} >
{ + return v[1]; + }); + } + + _getTicks(ticks) { + if (!ticks) return; + + { + return ticks.map(v => { + return v[0]; + }); + } + } + + render() { + const { showGridLines, isHorizontal, ...rest } = this.props; + return ( + + {showGridLines && !isHorizontal && } + {showGridLines && isHorizontal && } + + + + + ); + } +} + +EuiDefaultAxis.propTypes = { + isHorizontal: PropTypes.bool, + showGridLines: PropTypes.bool, + yOn0: PropTypes.bool, + xOn0: PropTypes.bool, +}; + +EuiDefaultAxis.defaultProps = { + isHorizontal: false, + showGridLines: true, +}; + +EuiDefaultAxis.requiresSVG = true; diff --git a/src/components/xy_chart/axis/horizontal_grid.js b/src/components/xy_chart/axis/horizontal_grid.js new file mode 100644 index 000000000000..e8d7c68b8c4f --- /dev/null +++ b/src/components/xy_chart/axis/horizontal_grid.js @@ -0,0 +1,20 @@ +import React, { PureComponent } from 'react'; +import { HorizontalGridLines } from 'react-vis'; + +export default class EuiHorizontalGrid extends PureComponent { + render() { + const style = { + strokeDasharray: '5 5', + strokeOpacity: 0.3, + }; + return ( + + ) + + } +} + +EuiHorizontalGrid.requiresSVG = true; diff --git a/src/components/xy_chart/axis/vertical_grid.js b/src/components/xy_chart/axis/vertical_grid.js new file mode 100644 index 000000000000..cded870d3d77 --- /dev/null +++ b/src/components/xy_chart/axis/vertical_grid.js @@ -0,0 +1,20 @@ +import React, { PureComponent } from 'react'; +import { VerticalGridLines } from 'react-vis'; + +export default class EuiVerticalGrid extends PureComponent { + render() { + const style = { + strokeDasharray: '5 5', + strokeOpacity: 0.3, + }; + return ( + + ) + + } +} + +EuiVerticalGrid.requiresSVG = true; diff --git a/src/components/xy_chart/axis/x_axis.js b/src/components/xy_chart/axis/x_axis.js new file mode 100644 index 000000000000..4f3bdb00557b --- /dev/null +++ b/src/components/xy_chart/axis/x_axis.js @@ -0,0 +1,71 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { XAxis } from 'react-vis'; +import { ORIENTATION, TITLE_POSITION } from '../utils/axis_utils' + + +export default class EuiXAxis extends PureComponent { + render() { + const { + title, + titlePosition, + orientation, + tickSize, + tickLabelAngle, + tickFormat, + tickValues, + on0, + ...rest + } = this.props; + return ( + + ) + + } +} + +EuiXAxis.propTypes = { + title: PropTypes.string, /** The axis title */ + /** The axis title position */ + titlePosition: PropTypes.oneOf([ + TITLE_POSITION.START, + TITLE_POSITION.MIDDLE, + TITLE_POSITION.END, + ]), + /** The axis orientation */ + orientation: PropTypes.oneOf([ + ORIENTATION.TOP, + ORIENTATION.BOTTOM, + ]), + /** Fix the axis at zero value */ + on0: PropTypes.bool, + /** An array of ticks values */ + ticks: PropTypes.array, + /** The height of the ticks in pixels */ + tickSize: PropTypes.number, + /** TODO */ + tickValues: PropTypes.array, + /** A formatter function in the form of function(value, index, scale, tickTotal) */ + tickFormat: PropTypes.func, + /** the rotation angle in degree of the tick label */ + tickLabelAngle: PropTypes.number, +}; + +EuiXAxis.defaultProps = { + on0: false, + titlePosition: TITLE_POSITION.MIDDLE, + orientation: ORIENTATION.BOTTOM, + tickSize: 5, +} + +EuiXAxis.requiresSVG = true; diff --git a/src/components/xy_chart/axis/y_axis.js b/src/components/xy_chart/axis/y_axis.js new file mode 100644 index 000000000000..03f69902cbd3 --- /dev/null +++ b/src/components/xy_chart/axis/y_axis.js @@ -0,0 +1,54 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { YAxis } from 'react-vis'; +import { ORIENTATION, TITLE_POSITION } from '../utils/axis_utils'; + +export default class EuiYAxis extends PureComponent { + render() { + const { + title, + titlePosition, + orientation, + tickSize, + tickLabelAngle, + tickFormat, + tickValues, + on0, + ...rest + } = this.props; + return ( + + ); + } +} + +EuiYAxis.propTypes = { + title: PropTypes.string, + titlePosition: PropTypes.oneOf([TITLE_POSITION.START, TITLE_POSITION.MIDDLE, TITLE_POSITION.END]), + orientation: PropTypes.oneOf([ORIENTATION.LEFT, ORIENTATION.RIGHT]), + on0: PropTypes.bool, + ticks: PropTypes.array, + tickSize: PropTypes.number, + tickValues: PropTypes.array, + tickFormat: PropTypes.func, + tickLabelAngle: PropTypes.number, +}; + +EuiYAxis.defaultProps = { + on0: false, + titlePosition: TITLE_POSITION.MIDDLE, + orientation: ORIENTATION.LEFT, + tickSize: 5, +}; + +EuiYAxis.requiresSVG = true; diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/chart.js index 3f0d585d6b91..6a413dbf6e5f 100644 --- a/src/components/xy_chart/chart.js +++ b/src/components/xy_chart/chart.js @@ -129,6 +129,8 @@ export class XYChart extends PureComponent { children, xDomain, yDomain, + yPadding, + xPadding, animation, // eslint-disable-line no-unused-vars onCrosshairUpdate, // eslint-disable-line no-unused-vars truncateLegends, // eslint-disable-line no-unused-vars @@ -158,6 +160,8 @@ export class XYChart extends PureComponent { xDomain={xDomain} yDomain={yDomain} stackBy={stackBy} + yPadding={yPadding} + xPadding={xPadding} > {React.Children.map(children, this._renderChildren)} @@ -200,12 +204,16 @@ XYChart.propTypes = { onCrosshairUpdate: PropTypes.func, xDomain: PropTypes.array, yDomain: PropTypes.array, + xPadding: PropTypes.number, + yPadding: PropTypes.number, }; XYChart.defaultProps = { truncateLegends: false, // showAxis: true, showTooltips: true, + yPadding: 0, + xPadding: 0, }; export default makeWidthFlexible(XYChart); diff --git a/src/components/xy_chart/default_axis.js b/src/components/xy_chart/default_axis.js deleted file mode 100644 index aabbdd83f549..000000000000 --- a/src/components/xy_chart/default_axis.js +++ /dev/null @@ -1,102 +0,0 @@ -import React, { Fragment, PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import { XAxis, YAxis, HorizontalGridLines, VerticalGridLines } from 'react-vis'; - -export default class DefaultAxis extends PureComponent { - - _getTickLabels(ticks) { - if (!ticks) return; - - return ticks.map(v => { - return v[1]; - }); - } - - _getTicks(ticks) { - if (!ticks) return; - - { - return ticks.map(v => { - return v[0]; - }); - } - } - - render() { - const { - yTicks, - xTicks, - xAxisLocation, - yAxisLocation, - showGridLines, - isHorizontal, - yOn0, - xOn0, - ...rest } = this.props; - return ( - - { - showGridLines && !isHorizontal && - - } - { - showGridLines && isHorizontal && - - } - - this._getTickLabels(xTicks)[v] || v : undefined} - /> - this._getTickLabels(yTicks)[v] || v : undefined} - /> - - ) - } -} - -DefaultAxis.propTypes = { - xTicks: PropTypes.array, - yTicks: PropTypes.array, // [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]] - xAxisLocation: PropTypes.string, - yAxisLocation: PropTypes.string, - isHorizontal: PropTypes.bool, - showGridLines: PropTypes.bool, - yOn0: PropTypes.bool, - xOn0: PropTypes.bool, -}; - -DefaultAxis.defaultProps = { - isHorizontal: false, - showGridLines: true, -} - -DefaultAxis.requiresSVG = true; diff --git a/src/components/xy_chart/index.js b/src/components/xy_chart/index.js index f83a5cdaf939..95830abc0458 100644 --- a/src/components/xy_chart/index.js +++ b/src/components/xy_chart/index.js @@ -6,8 +6,12 @@ import EuiVerticalBarSeries from './vertical_bar_series'; import EuiHorizontalBarSeries from './horizontal_bar_series'; import EuiVerticalRectSeries from './vertical_rect_series'; import EuiHorizontalRectSeries from './horizontal_rect_series'; -import EuiDefaultAxis from './default_axis'; +import EuiDefaultAxis from './axis/default_axis'; +import EuiXAxis from './axis/x_axis'; +import EuiYAxis from './axis/y_axis'; import { EuiArea } from './area'; +import * as EuiXYChartAxisUtils from './utils/axis_utils'; +import * as EuiXYChartTextUtils from './utils/text_utils'; export { EuiXYChart, @@ -18,6 +22,10 @@ export { EuiVerticalRectSeries, EuiHorizontalRectSeries, EuiDefaultAxis, + EuiXAxis, + EuiYAxis, + EuiXYChartAxisUtils, + EuiXYChartTextUtils, utils, asSeries }; diff --git a/src/components/xy_chart/utils/axis_utils.js b/src/components/xy_chart/utils/axis_utils.js new file mode 100644 index 000000000000..d893a8a5752c --- /dev/null +++ b/src/components/xy_chart/utils/axis_utils.js @@ -0,0 +1,15 @@ +import { AxisUtils } from 'react-vis'; + +export const ORIENTATION = AxisUtils.ORIENTATION; + +export const TITLE_POSITION = { + MIDDLE: 'middle', + START: 'start', + END: 'end', +}; + +export const GRID_TYPE = { + HORIZONTAL: 'horizontal', + VERTICAL: 'vertical', + BOTH: 'both', +} diff --git a/src/components/xy_chart/utils/text_utils.js b/src/components/xy_chart/utils/text_utils.js new file mode 100644 index 000000000000..4ccfbc31fa67 --- /dev/null +++ b/src/components/xy_chart/utils/text_utils.js @@ -0,0 +1,22 @@ +import React from 'react' + +/** + * Simplified version of tspan wrapper that takes an array of Strings. + * and return a SVG component composed by tspan tags. + * @param {Array of Strings} texts - an array of splitted text, one per line + * @return {Object} Returns an Object to use with dangerouslySetInnerHTML + * with the rendered markdown HTML + */ +export function tspanTextWrapper(texts) { + return ( + + { + texts.map((piece) => { + return ( + {piece} + ) + }) + } + + ) +} From f34a0650ed3d04525b595b64b8151b9d401b4681 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 13 Jun 2018 23:13:28 +0200 Subject: [PATCH 13/68] Update docs example groups names --- src-docs/src/views/xy_chart/xy_chart_example.js | 2 +- src-docs/src/views/xy_chart_area/area_example.js | 2 +- src-docs/src/views/xy_chart_bar/bar_example.js | 2 +- src-docs/src/views/xy_chart_histogram/histogram_example.js | 2 +- src-docs/src/views/xy_chart_line/line_example.js | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/xy_chart/xy_chart_example.js b/src-docs/src/views/xy_chart/xy_chart_example.js index 05ac54d72178..259cd8e0e7df 100644 --- a/src-docs/src/views/xy_chart/xy_chart_example.js +++ b/src-docs/src/views/xy_chart/xy_chart_example.js @@ -7,7 +7,7 @@ import AutoAxisChartExampleCode from './example-auto-axis'; import { ExampleCrosshair } from './example-crosshair'; export const XYChartExample = { - title: 'XYChart', + title: 'General', sections: [ { title: 'Complex example', diff --git a/src-docs/src/views/xy_chart_area/area_example.js b/src-docs/src/views/xy_chart_area/area_example.js index 4f6069a6787f..e640416a5b42 100644 --- a/src-docs/src/views/xy_chart_area/area_example.js +++ b/src-docs/src/views/xy_chart_area/area_example.js @@ -11,7 +11,7 @@ import { } from '../../../../src/components'; export const XYChartAreaExample = { - title: 'XYChart Area', + title: 'Area chart', sections: [ { title: 'Area Series', diff --git a/src-docs/src/views/xy_chart_bar/bar_example.js b/src-docs/src/views/xy_chart_bar/bar_example.js index 63019624d66e..57e03563c162 100644 --- a/src-docs/src/views/xy_chart_bar/bar_example.js +++ b/src-docs/src/views/xy_chart_bar/bar_example.js @@ -12,7 +12,7 @@ import { } from '../../../../src/components'; export const XYChartBarExample = { - title: 'XYChart Bar Chart', + title: 'Bar chart', sections: [ { title: 'Vertical Bar Chart', diff --git a/src-docs/src/views/xy_chart_histogram/histogram_example.js b/src-docs/src/views/xy_chart_histogram/histogram_example.js index da70522970d9..f50c52b47483 100644 --- a/src-docs/src/views/xy_chart_histogram/histogram_example.js +++ b/src-docs/src/views/xy_chart_histogram/histogram_example.js @@ -12,7 +12,7 @@ import { } from '../../../../src/components'; export const XYChartHistogramExample = { - title: 'XYChart Histogram', + title: 'Histogram', sections: [ { title: 'Vertical Histogram', diff --git a/src-docs/src/views/xy_chart_line/line_example.js b/src-docs/src/views/xy_chart_line/line_example.js index d3ff89c5bb91..e1ed683a57eb 100644 --- a/src-docs/src/views/xy_chart_line/line_example.js +++ b/src-docs/src/views/xy_chart_line/line_example.js @@ -12,7 +12,7 @@ import { } from '../../../../src/components'; export const XYChartLineExample = { - title: 'XYChart Line', + title: 'Line chart', sections: [ { title: 'Line chart', From 9197739e2f47f9b6767de7aa40f0c6d9cdcbeded Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 14 Jun 2018 16:20:38 +0200 Subject: [PATCH 14/68] First version of multi axis chart --- .../src/views/xy_chart/example_dual_axis.js | 71 +++++++++++++++++++ src-docs/src/views/xy_chart/examples.js | 46 +++++++----- .../src/views/xy_chart/xy_chart_example.js | 10 +-- src-docs/src/views/xy_chart_line/line.js | 1 + 4 files changed, 107 insertions(+), 21 deletions(-) create mode 100644 src-docs/src/views/xy_chart/example_dual_axis.js diff --git a/src-docs/src/views/xy_chart/example_dual_axis.js b/src-docs/src/views/xy_chart/example_dual_axis.js new file mode 100644 index 000000000000..f2629aab8e2d --- /dev/null +++ b/src-docs/src/views/xy_chart/example_dual_axis.js @@ -0,0 +1,71 @@ +import React from 'react'; + +import { + EuiXYChart, + EuiLine, + EuiXAxis, + EuiYAxis, + EuiXYChartAxisUtils, +} from '../../../../src/components'; +import { VISUALIZATION_COLORS } from '../../../../src/services'; + +const DATA_A = [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]; +const DATA_B = [{ x: 0, y: 100 }, { x: 1, y: 200 }, { x: 2, y: 150 }, { x: 3, y: 55 }, { x: 5, y: 95 }]; +const DATA_C = [{ x: 0, y: 30 }, { x: 1, y: 45 }, { x: 2, y: 67 }, { x: 3, y: 22 }, { x: 5, y: 44 }]; + +const DATA_A_DOMAIN = [-0.5, 3]; +const DATA_B_DOMAIN = [0, 200]; +const DATA_C_DOMAIN = [15, 80]; + +export default () => ( + + + + + + + + + +); diff --git a/src-docs/src/views/xy_chart/examples.js b/src-docs/src/views/xy_chart/examples.js index 608e35968b5f..6782db326584 100644 --- a/src-docs/src/views/xy_chart/examples.js +++ b/src-docs/src/views/xy_chart/examples.js @@ -1,23 +1,23 @@ import React from 'react'; -import { EuiXYChart, EuiVerticalBarSeries, EuiArea, EuiLine, EuiDefaultAxis } from '../../../../src/components'; +import { + EuiXYChart, + EuiVerticalBarSeries, + EuiArea, + EuiLine, + EuiDefaultAxis, +} from '../../../../src/components'; export default () => { const yTicks = [[0, 'zero'], [1, 'one']]; - const xTicks = [ - [0, '0'], - [5, '5'], - [10, '10'], - [15, '15'], - [20, '20'] - ]; + const xTicks = [[0, '0'], [5, '5'], [10, '10'], [15, '15'], [20, '20']]; const barData = []; for (let i = 0; i < 10; i++) { const data = []; for (let i = 0; i < 20; i++) { - data.push({ x: i, y: Math.random() }); + data.push({ x: i, y: Number(Math.random().toFixed(2)) }); } barData.push(data); @@ -34,23 +34,37 @@ export default () => { xTicks={xTicks} yTicks={yTicks} > - { alert('clicked!'); }} - data={[{ x: 0, y: 0 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 2 },{ x: 4, y: 1 }, { x: 10, y: 1 }, { x: 20, y: 2 } ]} + data={[ + { x: 0, y: 0 }, + { x: 1, y: 2 }, + { x: 2, y: 1 }, + { x: 3, y: 2 }, + { x: 4, y: 1 }, + { x: 10, y: 1 }, + { x: 20, y: 2 }, + ]} /> + {barData + .slice(0, 1) + .map((data, index) => ( + + ))} - {barData.map((data, index) => ( - - ))} - ) -} + ); +}; diff --git a/src-docs/src/views/xy_chart/xy_chart_example.js b/src-docs/src/views/xy_chart/xy_chart_example.js index 259cd8e0e7df..7bc253275e7c 100644 --- a/src-docs/src/views/xy_chart/xy_chart_example.js +++ b/src-docs/src/views/xy_chart/xy_chart_example.js @@ -3,11 +3,11 @@ import { GuideSectionTypes } from '../../components'; import { EuiCode } from '../../../../src/components'; import ChartExampleCode from './examples'; import EmptyExampleCode from './example-empty'; -import AutoAxisChartExampleCode from './example-auto-axis'; +import MultiAxisChartExampleCode from './example_dual_axis'; import { ExampleCrosshair } from './example-crosshair'; export const XYChartExample = { - title: 'General', + title: 'General', sections: [ { title: 'Complex example', @@ -87,7 +87,7 @@ export const XYChartExample = { ) }, { - title: 'Auto Axis', + title: 'Multi Axis', text: (

@@ -98,7 +98,7 @@ export const XYChartExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./example-auto-axis') + code: require('!!raw-loader!./example_dual_axis') }, { type: GuideSectionTypes.HTML, @@ -107,7 +107,7 @@ export const XYChartExample = { ], demo: (

- +
) } diff --git a/src-docs/src/views/xy_chart_line/line.js b/src-docs/src/views/xy_chart_line/line.js index daa9c6db2df5..f0cbe67ac4f6 100644 --- a/src-docs/src/views/xy_chart_line/line.js +++ b/src-docs/src/views/xy_chart_line/line.js @@ -7,6 +7,7 @@ const DATA_A = [ { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, + { x: 4, y: null }, { x: 5, y: 2 }, ]; From 5a74008b69dafdc86eb4e30364d4562813512cf8 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 14 Jun 2018 18:13:58 +0200 Subject: [PATCH 15/68] Update yarn.lock file --- yarn.lock | 47 ----------------------------------------------- 1 file changed, 47 deletions(-) diff --git a/yarn.lock b/yarn.lock index c66828b72fcc..f74ee29006be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3051,10 +3051,6 @@ es6-promise@^3.0.2: version "3.3.1" resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613" -es6-promise@^4.0.3: - version "4.2.4" - resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29" - es6-set@~0.1.5: version "0.1.5" resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1" @@ -3880,14 +3876,6 @@ fs-extra@^0.30.0: path-is-absolute "^1.0.0" rimraf "^2.2.8" -fs-extra@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-1.0.0.tgz#cd3ce5f7e7cb6145883fcae3191e9877f8587950" - dependencies: - graceful-fs "^4.1.2" - jsonfile "^2.1.0" - klaw "^1.0.0" - fs-extra@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291" @@ -4403,13 +4391,6 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.0" -hasha@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/hasha/-/hasha-2.2.0.tgz#78d7cbfc1e6d66303fe79837365984517b2f6ee1" - dependencies: - is-stream "^1.0.1" - pinkie-promise "^2.0.0" - hawk@3.1.3, hawk@~3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4" @@ -7386,20 +7367,6 @@ performance-now@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" -phantomjs-prebuilt@^2.1.16: - version "2.1.16" - resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.16.tgz#efd212a4a3966d3647684ea8ba788549be2aefef" - dependencies: - es6-promise "^4.0.3" - extract-zip "^1.6.5" - fs-extra "^1.0.0" - hasha "^2.2.0" - kew "^0.7.0" - progress "^1.1.8" - request "^2.81.0" - request-progress "^2.0.1" - which "^1.2.10" - pify@^2.0.0, pify@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" @@ -7857,10 +7824,6 @@ progress@2.0.0, progress@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f" -progress@^1.1.8: - version "1.1.8" - resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be" - promise-timeout@1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/promise-timeout/-/promise-timeout-1.3.0.tgz#d1c78dd50a607d5f0a5207410252a3a0914e1014" @@ -8523,12 +8486,6 @@ replace-ext@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb" -request-progress@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-2.0.1.tgz#5d36bb57961c673aa5b788dbc8141fdf23b44e08" - dependencies: - throttleit "^1.0.0" - request-promise-core@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6" @@ -9771,10 +9728,6 @@ throat@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a" -throttleit@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c" - through2@^2.0.0, through2@^2.0.1: version "2.0.3" resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be" From bff1959c3e10abae4002b86ffacdd75b2f35c625 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 15 Jun 2018 19:27:00 +0200 Subject: [PATCH 16/68] Add first draft of crosshair Reused as much as possible the existing charts implementation and existing event handling --- .../src/views/xy_chart/example_dual_axis.js | 9 +- src/components/index.js | 1 + .../xy_chart/__snapshots__/area.test.js.snap | 248 ++-------------- .../xy_chart/__snapshots__/chart.test.js.snap | 2 + .../xy_chart/__snapshots__/line.test.js.snap | 272 ++++-------------- src/components/xy_chart/chart.js | 100 +------ src/components/xy_chart/crosshair.js | 69 +++++ src/components/xy_chart/index.js | 9 +- .../{utils.js => utils/chart_utils.js} | 5 +- 9 files changed, 169 insertions(+), 546 deletions(-) create mode 100644 src/components/xy_chart/crosshair.js rename src/components/xy_chart/{utils.js => utils/chart_utils.js} (88%) diff --git a/src-docs/src/views/xy_chart/example_dual_axis.js b/src-docs/src/views/xy_chart/example_dual_axis.js index f2629aab8e2d..b86e8a0db08f 100644 --- a/src-docs/src/views/xy_chart/example_dual_axis.js +++ b/src-docs/src/views/xy_chart/example_dual_axis.js @@ -9,9 +9,11 @@ import { } from '../../../../src/components'; import { VISUALIZATION_COLORS } from '../../../../src/services'; -const DATA_A = [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]; -const DATA_B = [{ x: 0, y: 100 }, { x: 1, y: 200 }, { x: 2, y: 150 }, { x: 3, y: 55 }, { x: 5, y: 95 }]; -const DATA_C = [{ x: 0, y: 30 }, { x: 1, y: 45 }, { x: 2, y: 67 }, { x: 3, y: 22 }, { x: 5, y: 44 }]; + + +const DATA_A = [{ x: 'A', y: 0 }, { x: 'B', y: 1 }, { x: 'C', y: 2 }, { x: 'D', y: 1 }, { x: 'E', y: 2 }]; +const DATA_B = [{ x: 'A', y: 100 }, { x: 'B', y: 100 }, { x: 'C', y: 150 }, { x: 'D', y: 55 }, { x: 'E', y: 95 }]; +const DATA_C = [{ x: 'A', y: 30 }, { x: 'B', y: 45 }, { x: 'C', y: 67 }, { x: 'D', y: 22 }, { x: 'E', y: 44 }]; const DATA_A_DOMAIN = [-0.5, 3]; const DATA_B_DOMAIN = [0, 200]; @@ -22,6 +24,7 @@ export default () => ( width={600} height={200} xPadding={5} + xType="ordinal" >
-
@@ -840,7 +740,9 @@ exports[`EuiArea is rendered 1`] = ` truncateLegends={false} width={600} xPadding={0} + xType="linear" yPadding={0} + yType="linear" >
-
diff --git a/src/components/xy_chart/__snapshots__/chart.test.js.snap b/src/components/xy_chart/__snapshots__/chart.test.js.snap index ecc77af7e55d..c5772b997ecd 100644 --- a/src/components/xy_chart/__snapshots__/chart.test.js.snap +++ b/src/components/xy_chart/__snapshots__/chart.test.js.snap @@ -105,6 +105,7 @@ exports[`EuiXYChart passes handler functions 1`] = ` ], ] } + xType="linear" yPadding={0} yTicks={ Array [ @@ -118,6 +119,7 @@ exports[`EuiXYChart passes handler functions 1`] = ` ], ] } + yType="linear" >
-
@@ -1828,7 +1740,9 @@ exports[`EuiLine is rendered 1`] = ` truncateLegends={false} width={600} xPadding={0} + xType="linear" yPadding={0} + yType="linear" >
-
diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/chart.js index 6a413dbf6e5f..40d4fd3c9f67 100644 --- a/src/components/xy_chart/chart.js +++ b/src/components/xy_chart/chart.js @@ -1,87 +1,27 @@ import React, { PureComponent } from 'react'; -import { XYPlot, makeWidthFlexible, Crosshair, AbstractSeries } from 'react-vis'; +import { XYPlot, makeWidthFlexible, AbstractSeries } from 'react-vis'; import PropTypes from 'prop-types'; -import { getPlotValues } from './utils'; import Highlight from './highlight'; +import { EuiCrosshair } from './crosshair'; import { VISUALIZATION_COLORS } from '../../services'; import StatusText from './status-text'; -const NO_DATA_VALUE = '~~NODATATODISPLAY~~'; - export class XYChart extends PureComponent { state = { - crosshairValues: [], + mouseOver: false, }; - seriesItems = []; colorIterator = 0; - lastCrosshairX = 0; - _xyPlotRef = React.createRef();; + _xyPlotRef = React.createRef(); _onMouseLeave = () => { - this.setState({ crosshairValues: [], lastCrosshairIndex: null }); + // TODO we need to find a better way to trigger a mouse leave event + // for the crosshair + this.setState({ mouseOver: false }); } _onMouseMove = (e) => { - e.persist(); - this._updateCrosshairValues({ - boundingClientRect: e.currentTarget.getBoundingClientRect(), - clientX: e.clientX - }); - } - - _updateCrosshairValues = ({ boundingClientRect, clientX }) => { - // Calculate the range of the X axis - const chartData = this._xyPlotRef.current.state.data.filter(d => d !== undefined) - const plotValues = getPlotValues(chartData, this.props.width); - const xDomain = plotValues.x.domain(); - const maxChartXValue = (xDomain[1] - xDomain[0]) + 1; - - const innerChartWidth = this._xyPlotRef.current._getDefaultScaleProps(this._xyPlotRef.current.props).xRange[1] - - const mouseX = clientX - boundingClientRect.left; - const xAxisesBucketWidth = innerChartWidth / maxChartXValue; - const bucketX = Math.floor(mouseX / xAxisesBucketWidth) - - if (bucketX !== this.lastCrosshairX) { - if(this.props.onCrosshairUpdate) this.props.onCrosshairUpdate(bucketX) - if(!this.props.crosshairX) { - this.lastCrosshairX = bucketX; - - const crosshairValues = this._getAllSeriesFromDataAtIndex(chartData, bucketX) - - this.setState({ - crosshairValues - }); - } - } - } - - _getAllSeriesFromDataAtIndex = (chartData, xBucket) => { - const chartDataForXValue = chartData.map(series => series.filter(seriesData => { - return seriesData.x === xBucket - })[0]) - - if(chartDataForXValue.length === 0) { - chartDataForXValue.push({ x: xBucket, y: NO_DATA_VALUE }) - } - - return chartDataForXValue; - }; - - _itemsFormat = (values) => { - return values.map((v, i) => { - if (v) { - if(v.y === NO_DATA_VALUE) { - return { - title: 'No Data', - }; - } - return { - value: v.y, - title: this.seriesItems[i] || 'Other', - }; - } - }); + e.preventDefault(); + this.setState({ mouseOver: true }); } _renderChildren = (child, i) => { @@ -95,8 +35,6 @@ export class XYChart extends PureComponent { id: `chart-${i}`, }; - this.seriesItems.push(child.props.name); - if (!child.props.color) { props.color = VISUALIZATION_COLORS[this.colorIterator]; @@ -107,14 +45,6 @@ export class XYChart extends PureComponent { return React.cloneElement(child, props); } - _getCrosshairValues = (crosshairX) => { - if(!crosshairX) return this.state.crosshairValues - - const chartData = this._xyPlotRef.current.state.data.filter(d => d !== undefined) - return this._getAllSeriesFromDataAtIndex(chartData, crosshairX) - } - - render() { const { width, @@ -123,7 +53,6 @@ export class XYChart extends PureComponent { yType, stackBy, errorText, - crosshairX, showTooltips, onSelectEnd, children, @@ -166,13 +95,8 @@ export class XYChart extends PureComponent { {React.Children.map(children, this._renderChildren)} - {showTooltips && ( - null} - itemsFormat={this._itemsFormat} - /> + {showTooltips && this.state.mouseOver && ( + )} {onSelectEnd && } @@ -214,6 +138,8 @@ XYChart.defaultProps = { showTooltips: true, yPadding: 0, xPadding: 0, + xType: 'linear', + yType: 'linear', }; export default makeWidthFlexible(XYChart); diff --git a/src/components/xy_chart/crosshair.js b/src/components/xy_chart/crosshair.js new file mode 100644 index 000000000000..d548480784ca --- /dev/null +++ b/src/components/xy_chart/crosshair.js @@ -0,0 +1,69 @@ +import React from 'react'; +import { AbstractSeries, Crosshair } from 'react-vis'; + +export class EuiCrosshair extends AbstractSeries { + state = { + crosshairValues: [], + } + + static get requiresSVG() { + return false; + } + + static get isCanvas() { + return false; + } + + onParentMouseMove(event) { + this._handleNearestX(event); + } + + onParentMouseMove(event) { + this._handleNearestX(event); + } + + _handleNearestX(event) { + const chartData = this.props._allData.filter(d => d) + if (chartData.length === 0) { + return + } + const coordinate = super._getXYCoordinateInContainer(event); + const xScaleFn = super._getAttributeFunctor('x'); + + const crosshairValues = chartData + .map(data => { + let minDistance = Number.POSITIVE_INFINITY; + let value = null; + data.forEach((item) => { + const currentCoordinate = xScaleFn(item); + const newDistance = Math.abs(coordinate.x - currentCoordinate); + if (newDistance < minDistance) { + minDistance = newDistance; + value = item; + } + }); + if (!value) { + return; + } + return { + ...value, + } + }) + .filter(d => d); + + this.setState({ + crosshairValues, + }); + } + + render() { + + return ( + + ) + } +} diff --git a/src/components/xy_chart/index.js b/src/components/xy_chart/index.js index 95830abc0458..3c3b0bd36420 100644 --- a/src/components/xy_chart/index.js +++ b/src/components/xy_chart/index.js @@ -1,7 +1,7 @@ import { asSeries } from './as_series'; import EuiXYChart from './chart'; -import * as utils from './utils'; -import { EuiLine } from './line'; +import * as utils from './utils/chart_utils'; +export { EuiLine } from './line'; import EuiVerticalBarSeries from './vertical_bar_series'; import EuiHorizontalBarSeries from './horizontal_bar_series'; import EuiVerticalRectSeries from './vertical_rect_series'; @@ -9,14 +9,13 @@ import EuiHorizontalRectSeries from './horizontal_rect_series'; import EuiDefaultAxis from './axis/default_axis'; import EuiXAxis from './axis/x_axis'; import EuiYAxis from './axis/y_axis'; -import { EuiArea } from './area'; +export { EuiArea } from './area'; import * as EuiXYChartAxisUtils from './utils/axis_utils'; import * as EuiXYChartTextUtils from './utils/text_utils'; +export { EuiCrosshair } from './crosshair'; export { EuiXYChart, - EuiLine, - EuiArea, EuiVerticalBarSeries, EuiHorizontalBarSeries, EuiVerticalRectSeries, diff --git a/src/components/xy_chart/utils.js b/src/components/xy_chart/utils/chart_utils.js similarity index 88% rename from src/components/xy_chart/utils.js rename to src/components/xy_chart/utils/chart_utils.js index e39b95121988..58a5a0f266b2 100644 --- a/src/components/xy_chart/utils.js +++ b/src/components/xy_chart/utils/chart_utils.js @@ -37,12 +37,11 @@ export function getPlotValues(series, width) { const allCoordinates = _.flatten(series); - const xMin = d3.min(allCoordinates, d => d.x); - const xMax = d3.max(allCoordinates, d => d.x); + const xExtent = d3.extent(allCoordinates, d => d.x); const yMin = 0; const yMax = d3.max(allCoordinates, d => d.y); - const x = getXScale(xMin, xMax, width); + const x = getXScale(xExtent[0], xExtent[1], width); const y = getYScale(yMin, yMax); const yTickValues = getYTickValues(y.domain()[1]); const xTickValues = getYTickValues(x.domain()[1]); From bea0afccbad260ea4679f5b799e815a0a203179f Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 15 Jun 2018 19:41:47 +0200 Subject: [PATCH 17/68] Refactoring exports removing default exports --- src/components/xy_chart/area.test.js | 2 +- src/components/xy_chart/axis/axis.js | 0 src/components/xy_chart/axis/default_axis.js | 10 ++-- .../xy_chart/axis/horizontal_grid.js | 2 +- src/components/xy_chart/axis/vertical_grid.js | 2 +- src/components/xy_chart/axis/x_axis.js | 5 +- src/components/xy_chart/axis/y_axis.js | 6 ++- src/components/xy_chart/chart.js | 4 +- src/components/xy_chart/chart.test.js | 2 +- .../xy_chart/horizontal_bar_series.js | 3 +- .../xy_chart/horizontal_bar_series.test.js | 4 +- .../xy_chart/horizontal_rect_series.js | 3 +- .../xy_chart/horizontal_rect_series.test.js | 4 +- src/components/xy_chart/index.js | 38 ++++---------- src/components/xy_chart/line.test.js | 2 +- src/components/xy_chart/utils/axis_utils.js | 14 ++++-- src/components/xy_chart/utils/chart_utils.js | 50 ------------------- src/components/xy_chart/utils/text_utils.js | 6 ++- .../xy_chart/vertical_bar_series.js | 3 +- .../xy_chart/vertical_bar_series.test.js | 4 +- .../xy_chart/vertical_rect_series.js | 2 +- .../xy_chart/vertical_rect_series.test.js | 4 +- 22 files changed, 57 insertions(+), 113 deletions(-) delete mode 100644 src/components/xy_chart/axis/axis.js delete mode 100644 src/components/xy_chart/utils/chart_utils.js diff --git a/src/components/xy_chart/area.test.js b/src/components/xy_chart/area.test.js index 0184d8f76b2c..fb545b7d3faf 100644 --- a/src/components/xy_chart/area.test.js +++ b/src/components/xy_chart/area.test.js @@ -3,7 +3,7 @@ import { mount, render } from 'enzyme'; import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { requiredProps } from '../../test/required_props'; -import EuiXYChart from './chart'; +import { EuiXYChart } from './chart'; import { EuiArea } from './area'; import { benchmarkFunction } from '../../test/time_execution'; diff --git a/src/components/xy_chart/axis/axis.js b/src/components/xy_chart/axis/axis.js deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/components/xy_chart/axis/default_axis.js b/src/components/xy_chart/axis/default_axis.js index 62323dab1548..0fe69b93cc97 100644 --- a/src/components/xy_chart/axis/default_axis.js +++ b/src/components/xy_chart/axis/default_axis.js @@ -1,11 +1,11 @@ import React, { Fragment, PureComponent } from 'react'; import PropTypes from 'prop-types'; -import EuiXAxis from './x_axis'; -import EuiYAxis from './y_axis'; -import EuiHorizontalGrid from './horizontal_grid'; -import EuiVerticalGrid from './vertical_grid'; +import { EuiXAxis } from './x_axis'; +import { EuiYAxis } from './y_axis'; +import { EuiHorizontalGrid } from './horizontal_grid'; +import { EuiVerticalGrid } from './vertical_grid'; -export default class EuiDefaultAxis extends PureComponent { +export class EuiDefaultAxis extends PureComponent { _getTickLabels(ticks) { if (!ticks) return; diff --git a/src/components/xy_chart/axis/horizontal_grid.js b/src/components/xy_chart/axis/horizontal_grid.js index e8d7c68b8c4f..4fa5f211a8a9 100644 --- a/src/components/xy_chart/axis/horizontal_grid.js +++ b/src/components/xy_chart/axis/horizontal_grid.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { HorizontalGridLines } from 'react-vis'; -export default class EuiHorizontalGrid extends PureComponent { +export class EuiHorizontalGrid extends PureComponent { render() { const style = { strokeDasharray: '5 5', diff --git a/src/components/xy_chart/axis/vertical_grid.js b/src/components/xy_chart/axis/vertical_grid.js index cded870d3d77..b8106b87a0ae 100644 --- a/src/components/xy_chart/axis/vertical_grid.js +++ b/src/components/xy_chart/axis/vertical_grid.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { VerticalGridLines } from 'react-vis'; -export default class EuiVerticalGrid extends PureComponent { +export class EuiVerticalGrid extends PureComponent { render() { const style = { strokeDasharray: '5 5', diff --git a/src/components/xy_chart/axis/x_axis.js b/src/components/xy_chart/axis/x_axis.js index 4f3bdb00557b..87eb2fbc911c 100644 --- a/src/components/xy_chart/axis/x_axis.js +++ b/src/components/xy_chart/axis/x_axis.js @@ -1,10 +1,11 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { XAxis } from 'react-vis'; -import { ORIENTATION, TITLE_POSITION } from '../utils/axis_utils' +import { EuiXYChartAxisUtils } from '../utils/axis_utils'; +const { TITLE_POSITION, ORIENTATION } = EuiXYChartAxisUtils; -export default class EuiXAxis extends PureComponent { +export class EuiXAxis extends PureComponent { render() { const { title, diff --git a/src/components/xy_chart/axis/y_axis.js b/src/components/xy_chart/axis/y_axis.js index 03f69902cbd3..303438d3c302 100644 --- a/src/components/xy_chart/axis/y_axis.js +++ b/src/components/xy_chart/axis/y_axis.js @@ -1,9 +1,11 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { YAxis } from 'react-vis'; -import { ORIENTATION, TITLE_POSITION } from '../utils/axis_utils'; +import { EuiXYChartAxisUtils } from '../utils/axis_utils'; -export default class EuiYAxis extends PureComponent { +const { TITLE_POSITION, ORIENTATION } = EuiXYChartAxisUtils; + +export class EuiYAxis extends PureComponent { render() { const { title, diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/chart.js index 40d4fd3c9f67..68012f120d8b 100644 --- a/src/components/xy_chart/chart.js +++ b/src/components/xy_chart/chart.js @@ -6,7 +6,7 @@ import { EuiCrosshair } from './crosshair'; import { VISUALIZATION_COLORS } from '../../services'; import StatusText from './status-text'; -export class XYChart extends PureComponent { +class XYChart extends PureComponent { state = { mouseOver: false, }; @@ -142,4 +142,4 @@ XYChart.defaultProps = { yType: 'linear', }; -export default makeWidthFlexible(XYChart); +export const EuiXYChart = makeWidthFlexible(XYChart); diff --git a/src/components/xy_chart/chart.test.js b/src/components/xy_chart/chart.test.js index d9466c3927b3..d08c9e83461d 100644 --- a/src/components/xy_chart/chart.test.js +++ b/src/components/xy_chart/chart.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { mount, render } from 'enzyme'; -import EuiXYChart from './chart'; +import { EuiXYChart } from './chart'; import { requiredProps } from '../../test/required_props'; describe('EuiXYChart', () => { diff --git a/src/components/xy_chart/horizontal_bar_series.js b/src/components/xy_chart/horizontal_bar_series.js index f45431f57a81..0c4003815874 100644 --- a/src/components/xy_chart/horizontal_bar_series.js +++ b/src/components/xy_chart/horizontal_bar_series.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { HorizontalBarSeries } from 'react-vis'; -class EuiHorizontalBarSeries extends HorizontalBarSeries { +export class EuiHorizontalBarSeries extends HorizontalBarSeries { render() { const { name, data, color, onClick, ...rest } = this.props; @@ -25,7 +25,6 @@ class EuiHorizontalBarSeries extends HorizontalBarSeries { ); } } -export default EuiHorizontalBarSeries; EuiHorizontalBarSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ diff --git a/src/components/xy_chart/horizontal_bar_series.test.js b/src/components/xy_chart/horizontal_bar_series.test.js index e82fc8adbb4f..84286eff7621 100644 --- a/src/components/xy_chart/horizontal_bar_series.test.js +++ b/src/components/xy_chart/horizontal_bar_series.test.js @@ -3,8 +3,8 @@ import { render, mount } from 'enzyme'; import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { requiredProps } from '../../test/required_props'; -import EuiXYChart from './chart'; -import EuiHorizontalBarSeries from './horizontal_bar_series'; +import { EuiXYChart } from './chart'; +import { EuiHorizontalBarSeries } from './horizontal_bar_series'; beforeEach(patchRandom); afterEach(unpatchRandom); diff --git a/src/components/xy_chart/horizontal_rect_series.js b/src/components/xy_chart/horizontal_rect_series.js index 9ac3b94ceb9e..102f0ee119ed 100644 --- a/src/components/xy_chart/horizontal_rect_series.js +++ b/src/components/xy_chart/horizontal_rect_series.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { HorizontalRectSeries } from 'react-vis'; -class EuiHorizontalRectSeries extends HorizontalRectSeries { +export class EuiHorizontalRectSeries extends HorizontalRectSeries { render() { const { name, data, color, onClick, ...rest } = this.props; @@ -25,7 +25,6 @@ class EuiHorizontalRectSeries extends HorizontalRectSeries { ); } } -export default EuiHorizontalRectSeries; EuiHorizontalRectSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ diff --git a/src/components/xy_chart/horizontal_rect_series.test.js b/src/components/xy_chart/horizontal_rect_series.test.js index cf67a63fc201..486f839ebea3 100644 --- a/src/components/xy_chart/horizontal_rect_series.test.js +++ b/src/components/xy_chart/horizontal_rect_series.test.js @@ -3,8 +3,8 @@ import { render, mount } from 'enzyme'; import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { requiredProps } from '../../test/required_props'; -import EuiXYChart from './chart'; -import EuiHorizontalRectSeries from './horizontal_rect_series'; +import { EuiXYChart } from './chart'; +import { EuiHorizontalRectSeries } from './horizontal_rect_series'; beforeEach(patchRandom); afterEach(unpatchRandom); diff --git a/src/components/xy_chart/index.js b/src/components/xy_chart/index.js index 3c3b0bd36420..b33391942f9c 100644 --- a/src/components/xy_chart/index.js +++ b/src/components/xy_chart/index.js @@ -1,30 +1,14 @@ -import { asSeries } from './as_series'; -import EuiXYChart from './chart'; -import * as utils from './utils/chart_utils'; +export { asSeries } from './as_series'; +export { EuiXYChart } from './chart'; export { EuiLine } from './line'; -import EuiVerticalBarSeries from './vertical_bar_series'; -import EuiHorizontalBarSeries from './horizontal_bar_series'; -import EuiVerticalRectSeries from './vertical_rect_series'; -import EuiHorizontalRectSeries from './horizontal_rect_series'; -import EuiDefaultAxis from './axis/default_axis'; -import EuiXAxis from './axis/x_axis'; -import EuiYAxis from './axis/y_axis'; +export { EuiVerticalBarSeries } from './vertical_bar_series'; +export { EuiHorizontalBarSeries } from './horizontal_bar_series'; +export { EuiVerticalRectSeries } from './vertical_rect_series'; +export { EuiHorizontalRectSeries } from './horizontal_rect_series'; +export { EuiDefaultAxis } from './axis/default_axis'; +export { EuiXAxis } from './axis/x_axis'; +export { EuiYAxis } from './axis/y_axis'; export { EuiArea } from './area'; -import * as EuiXYChartAxisUtils from './utils/axis_utils'; -import * as EuiXYChartTextUtils from './utils/text_utils'; +export { EuiXYChartAxisUtils } from './utils/axis_utils'; +export { EuiXYChartTextUtils } from './utils/text_utils'; export { EuiCrosshair } from './crosshair'; - -export { - EuiXYChart, - EuiVerticalBarSeries, - EuiHorizontalBarSeries, - EuiVerticalRectSeries, - EuiHorizontalRectSeries, - EuiDefaultAxis, - EuiXAxis, - EuiYAxis, - EuiXYChartAxisUtils, - EuiXYChartTextUtils, - utils, - asSeries -}; diff --git a/src/components/xy_chart/line.test.js b/src/components/xy_chart/line.test.js index e0fe5275736e..a7536592f494 100644 --- a/src/components/xy_chart/line.test.js +++ b/src/components/xy_chart/line.test.js @@ -4,7 +4,7 @@ import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { benchmarkFunction } from '../../test/time_execution'; import { requiredProps } from '../../test/required_props'; -import EuiXYChart from './chart'; +import { EuiXYChart } from './chart'; import { EuiLine } from './line'; beforeEach(patchRandom); diff --git a/src/components/xy_chart/utils/axis_utils.js b/src/components/xy_chart/utils/axis_utils.js index d893a8a5752c..3056e7324a3d 100644 --- a/src/components/xy_chart/utils/axis_utils.js +++ b/src/components/xy_chart/utils/axis_utils.js @@ -1,15 +1,21 @@ import { AxisUtils } from 'react-vis'; -export const ORIENTATION = AxisUtils.ORIENTATION; +const ORIENTATION = AxisUtils.ORIENTATION; -export const TITLE_POSITION = { +const TITLE_POSITION = { MIDDLE: 'middle', START: 'start', END: 'end', }; -export const GRID_TYPE = { +const GRID_TYPE = { HORIZONTAL: 'horizontal', VERTICAL: 'vertical', BOTH: 'both', -} +}; + +export const EuiXYChartAxisUtils = { + TITLE_POSITION, + GRID_TYPE, + ORIENTATION, +}; diff --git a/src/components/xy_chart/utils/chart_utils.js b/src/components/xy_chart/utils/chart_utils.js deleted file mode 100644 index 58a5a0f266b2..000000000000 --- a/src/components/xy_chart/utils/chart_utils.js +++ /dev/null @@ -1,50 +0,0 @@ -import { scaleLinear } from 'd3-scale'; -import _ from 'lodash'; -import * as d3 from 'd3-array'; - -const unit = 16; -const XY_HEIGHT = unit * 16; -const XY_MARGIN = { - top: unit, - left: unit * 5, - right: unit, - bottom: unit * 2 -}; - -const getXScale = _.memoize( - (xMin, xMax, width) => { - return scaleLinear() - .domain([xMin, xMax]) - .range([XY_MARGIN.left, width - XY_MARGIN.right]); - }, - (...args) => args.join('_') -); - -const getYScale = _.memoize( - (yMin, yMax) => { - return scaleLinear() - .domain([yMin, yMax]) - .range([XY_HEIGHT, 0]) - .nice(); - }, - (...args) => args.join('_') -); - -const getYTickValues = _.memoize(yMaxNice => [0, yMaxNice / 2, yMaxNice]); - -export function getPlotValues(series, width) { - if (series.length === 0) return; - - const allCoordinates = _.flatten(series); - - const xExtent = d3.extent(allCoordinates, d => d.x); - const yMin = 0; - const yMax = d3.max(allCoordinates, d => d.y); - - const x = getXScale(xExtent[0], xExtent[1], width); - const y = getYScale(yMin, yMax); - const yTickValues = getYTickValues(y.domain()[1]); - const xTickValues = getYTickValues(x.domain()[1]); - - return { x, y, yTickValues, xTickValues }; -} diff --git a/src/components/xy_chart/utils/text_utils.js b/src/components/xy_chart/utils/text_utils.js index 4ccfbc31fa67..0d12226983ce 100644 --- a/src/components/xy_chart/utils/text_utils.js +++ b/src/components/xy_chart/utils/text_utils.js @@ -7,7 +7,7 @@ import React from 'react' * @return {Object} Returns an Object to use with dangerouslySetInnerHTML * with the rendered markdown HTML */ -export function tspanTextWrapper(texts) { +function tspanTextWrapper(texts) { return ( { @@ -20,3 +20,7 @@ export function tspanTextWrapper(texts) { ) } + +export const EuiXYChartTextUtils = { + tspanTextWrapper, +} diff --git a/src/components/xy_chart/vertical_bar_series.js b/src/components/xy_chart/vertical_bar_series.js index be95df1d46ed..dd00b5008be9 100644 --- a/src/components/xy_chart/vertical_bar_series.js +++ b/src/components/xy_chart/vertical_bar_series.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { VerticalBarSeries } from 'react-vis'; -class EuiVerticalBarSeries extends VerticalBarSeries { +export class EuiVerticalBarSeries extends VerticalBarSeries { render() { const { name, data, color, onClick, ...rest } = this.props; @@ -23,7 +23,6 @@ class EuiVerticalBarSeries extends VerticalBarSeries { ); } } -export default EuiVerticalBarSeries; EuiVerticalBarSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ diff --git a/src/components/xy_chart/vertical_bar_series.test.js b/src/components/xy_chart/vertical_bar_series.test.js index f837305035af..181ccda6d4a1 100644 --- a/src/components/xy_chart/vertical_bar_series.test.js +++ b/src/components/xy_chart/vertical_bar_series.test.js @@ -3,8 +3,8 @@ import { render, mount } from 'enzyme'; import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { requiredProps } from '../../test/required_props'; -import EuiXYChart from './chart'; -import EuiVerticalBarSeries from './vertical_bar_series'; +import { EuiXYChart } from './chart'; +import { EuiVerticalBarSeries } from './vertical_bar_series'; import { benchmarkFunction } from '../../test/time_execution'; beforeEach(patchRandom); diff --git a/src/components/xy_chart/vertical_rect_series.js b/src/components/xy_chart/vertical_rect_series.js index 40913d47f280..8b02787dcf04 100644 --- a/src/components/xy_chart/vertical_rect_series.js +++ b/src/components/xy_chart/vertical_rect_series.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { VerticalRectSeries } from 'react-vis'; -export default class EuiVerticalRectSeries extends VerticalRectSeries { +export class EuiVerticalRectSeries extends VerticalRectSeries { render() { const { name, data, color, onClick, ...rest } = this.props; diff --git a/src/components/xy_chart/vertical_rect_series.test.js b/src/components/xy_chart/vertical_rect_series.test.js index c4f892fb78f9..9ad2b887cbd8 100644 --- a/src/components/xy_chart/vertical_rect_series.test.js +++ b/src/components/xy_chart/vertical_rect_series.test.js @@ -3,8 +3,8 @@ import { render, mount } from 'enzyme'; import { patchRandom, unpatchRandom } from '../../test/patch_random'; import { requiredProps } from '../../test/required_props'; -import EuiXYChart from './chart'; -import EuiVerticalRectSeries from './vertical_rect_series'; +import { EuiXYChart } from './chart'; +import { EuiVerticalRectSeries } from './vertical_rect_series'; import { benchmarkFunction } from '../../test/time_execution'; beforeEach(patchRandom); From 444ff2dc109087b56a16a94f0cf7fae03dc49fde Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 18 Jun 2018 18:29:02 +0200 Subject: [PATCH 18/68] Add X chrosshair with fixed histogram and series behaviours --- .../src/views/xy_chart/example-crosshair.js | 17 +- src/components/index.js | 2 +- .../xy_chart/__snapshots__/area.test.js.snap | 506 +++++++++++++++- .../xy_chart/__snapshots__/line.test.js.snap | 542 +++++++++++++++++- src/components/xy_chart/chart.js | 57 +- src/components/xy_chart/crosshair.js | 69 --- src/components/xy_chart/crosshair_x.js | 161 ++++++ src/components/xy_chart/index.js | 2 +- src/components/xy_chart/utils/series_utils.js | 22 + .../xy_chart/vertical_bar_series.js | 8 +- .../xy_chart/vertical_rect_series.js | 7 +- 11 files changed, 1259 insertions(+), 134 deletions(-) delete mode 100644 src/components/xy_chart/crosshair.js create mode 100644 src/components/xy_chart/crosshair_x.js create mode 100644 src/components/xy_chart/utils/series_utils.js diff --git a/src-docs/src/views/xy_chart/example-crosshair.js b/src-docs/src/views/xy_chart/example-crosshair.js index 3c06b875c533..b67e83199baf 100644 --- a/src-docs/src/views/xy_chart/example-crosshair.js +++ b/src-docs/src/views/xy_chart/example-crosshair.js @@ -9,10 +9,11 @@ import { // eslint-disable-next-line export class ExampleCrosshair extends React.Component { state = { - crosshairX: 0 + crosshairX: 2, } _updateCrosshairLocation = (crosshairX) => { - this.setState({ crosshairX }) + console.log('update crosshair x'); + this.setState({ crosshairX }); } render() { return ( @@ -23,7 +24,11 @@ export class ExampleCrosshair extends React.Component { width={600} height={200} > - +

@@ -33,7 +38,11 @@ export class ExampleCrosshair extends React.Component { width={600} height={200} > - +
diff --git a/src/components/index.js b/src/components/index.js index 86844eda0c5e..dffacdff03eb 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -315,5 +315,5 @@ export { EuiDefaultAxis, EuiXAxis, EuiYAxis, - EuiCrosshair, + EuiCrosshairX, } from './xy_chart'; diff --git a/src/components/xy_chart/__snapshots__/area.test.js.snap b/src/components/xy_chart/__snapshots__/area.test.js.snap index 25d92608c398..3b638920b588 100644 --- a/src/components/xy_chart/__snapshots__/area.test.js.snap +++ b/src/components/xy_chart/__snapshots__/area.test.js.snap @@ -31,8 +31,6 @@ exports[`EuiArea all props are rendered 1`] = ` dontCheckIfEmpty={true} height={200} margin={2} - onMouseLeave={[Function]} - onMouseMove={[Function]} width={600} xPadding={0} xType="linear" @@ -79,6 +77,7 @@ exports[`EuiArea all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#ff0000" @@ -154,7 +153,7 @@ exports[`EuiArea all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -215,6 +214,7 @@ exports[`EuiArea all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#ff0000" @@ -291,7 +291,7 @@ exports[`EuiArea all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -357,6 +357,7 @@ exports[`EuiArea all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#ff0000" @@ -470,7 +471,7 @@ exports[`EuiArea all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -555,6 +556,7 @@ exports[`EuiArea all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _animation={0.00002} @@ -631,7 +633,7 @@ exports[`EuiArea all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -706,6 +708,245 @@ exports[`EuiArea all props are rendered 1`] = ` + + +
@@ -755,8 +996,6 @@ exports[`EuiArea is rendered 1`] = ` dontCheckIfEmpty={true} height={200} margin={2} - onMouseLeave={[Function]} - onMouseMove={[Function]} width={600} xPadding={0} xType="linear" @@ -803,6 +1042,7 @@ exports[`EuiArea is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#00B3A4" @@ -873,7 +1113,7 @@ exports[`EuiArea is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -934,6 +1174,7 @@ exports[`EuiArea is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#00B3A4" @@ -1005,7 +1246,7 @@ exports[`EuiArea is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -1071,6 +1312,7 @@ exports[`EuiArea is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#00B3A4" @@ -1179,7 +1421,7 @@ exports[`EuiArea is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -1264,6 +1506,7 @@ exports[`EuiArea is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _animation={0.00002} @@ -1335,7 +1578,7 @@ exports[`EuiArea is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -1410,6 +1653,245 @@ exports[`EuiArea is rendered 1`] = ` + + +
diff --git a/src/components/xy_chart/__snapshots__/line.test.js.snap b/src/components/xy_chart/__snapshots__/line.test.js.snap index c05b44ebce96..9ee47b20dc54 100644 --- a/src/components/xy_chart/__snapshots__/line.test.js.snap +++ b/src/components/xy_chart/__snapshots__/line.test.js.snap @@ -31,8 +31,6 @@ exports[`EuiLine all props are rendered 1`] = ` dontCheckIfEmpty={true} height={200} margin={2} - onMouseLeave={[Function]} - onMouseMove={[Function]} width={600} xPadding={0} xType="linear" @@ -79,6 +77,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#ff0000" @@ -155,7 +154,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} showLine={true} showLineMarks={true} @@ -218,6 +217,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="white" @@ -291,7 +291,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -358,6 +358,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="white" @@ -468,7 +469,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -554,6 +555,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _animation={0.00002} @@ -627,7 +629,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -715,6 +717,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#ff0000" @@ -788,7 +791,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -855,6 +858,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#ff0000" @@ -965,7 +969,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -1051,6 +1055,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _animation={0.00004} @@ -1124,7 +1129,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -1212,6 +1217,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#ff0000" @@ -1284,7 +1290,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} size={13} sizeDomain={Array []} @@ -1347,6 +1353,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#ff0000" @@ -1456,7 +1463,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} size={13} sizeDomain={Array []} @@ -1538,6 +1545,7 @@ exports[`EuiLine all props are rendered 1`] = ` "y": 15, }, ], + undefined, ] } _animation={0.00006} @@ -1610,7 +1618,7 @@ exports[`EuiLine all props are rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} size={13} sizeDomain={Array []} @@ -1706,6 +1714,245 @@ exports[`EuiLine all props are rendered 1`] = ` + + +
@@ -1755,8 +2002,6 @@ exports[`EuiLine is rendered 1`] = ` dontCheckIfEmpty={true} height={200} margin={2} - onMouseLeave={[Function]} - onMouseMove={[Function]} width={600} xPadding={0} xType="linear" @@ -1803,6 +2048,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#00B3A4" @@ -1875,7 +2121,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} showLine={true} showLineMarks={true} @@ -1938,6 +2184,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="white" @@ -2009,7 +2256,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -2076,6 +2323,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="white" @@ -2184,7 +2432,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -2270,6 +2518,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _animation={0.00002} @@ -2341,7 +2590,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -2429,6 +2678,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#00B3A4" @@ -2501,7 +2751,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -2568,6 +2818,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#00B3A4" @@ -2677,7 +2928,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -2763,6 +3014,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _animation={0.00004} @@ -2835,7 +3087,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} sizeDomain={Array []} sizeRange={ @@ -2923,6 +3175,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#00B3A4" @@ -2993,7 +3246,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} size={5} sizeDomain={Array []} @@ -3056,6 +3309,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _colorValue="#00B3A4" @@ -3163,7 +3417,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} size={5} sizeDomain={Array []} @@ -3245,6 +3499,7 @@ exports[`EuiLine is rendered 1`] = ` "y": 15, }, ], + undefined, ] } _animation={0.00006} @@ -3315,7 +3570,7 @@ exports[`EuiLine is rendered 1`] = ` opacityType="literal" radiusDomain={Array []} sameTypeIndex={0} - sameTypeTotal={1} + sameTypeTotal={2} seriesIndex={0} size={5} sizeDomain={Array []} @@ -3411,6 +3666,245 @@ exports[`EuiLine is rendered 1`] = ` + + +
diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/chart.js index 68012f120d8b..cbb45dc403e4 100644 --- a/src/components/xy_chart/chart.js +++ b/src/components/xy_chart/chart.js @@ -1,10 +1,35 @@ import React, { PureComponent } from 'react'; import { XYPlot, makeWidthFlexible, AbstractSeries } from 'react-vis'; + import PropTypes from 'prop-types'; import Highlight from './highlight'; -import { EuiCrosshair } from './crosshair'; +import { EuiCrosshairX } from './crosshair_x'; import { VISUALIZATION_COLORS } from '../../services'; import StatusText from './status-text'; +import { getSeriesChildren } from './utils/series_utils'; + +class XYExtendedPlot extends XYPlot { + /** + * Trigger onMouseLeave handler if it was passed in props. + * @param {Event} event Native event. + * @private + */ + _mouseLeaveHandler(event) { + const { onMouseLeave, children } = this.props; + console.log('parent mouse leaving') + if (onMouseLeave) { + super.onMouseLeave(event); + } + const seriesChildren = getSeriesChildren(children); + seriesChildren.forEach((child, index) => { + const component = this.refs[`series${index}`]; + if (component && component.onParentMouseLeave) { + component.onParentMouseLeave(event); + } + }); + } + +} class XYChart extends PureComponent { state = { @@ -13,17 +38,6 @@ class XYChart extends PureComponent { colorIterator = 0; _xyPlotRef = React.createRef(); - _onMouseLeave = () => { - // TODO we need to find a better way to trigger a mouse leave event - // for the crosshair - this.setState({ mouseOver: false }); - } - - _onMouseMove = (e) => { - e.preventDefault(); - this.setState({ mouseOver: true }); - } - _renderChildren = (child, i) => { const { prototype } = child.type; // Avoid applying chart props to non series children @@ -44,6 +58,11 @@ class XYChart extends PureComponent { return React.cloneElement(child, props); } + // canShowCrosshair = () => { + // const { crosshairX, showTooltips } = this.props; + // const { mouseOver } = this.state; + // return showTooltips && ( mouseOver || crosshairX !== undefined) + // } render() { const { @@ -53,7 +72,6 @@ class XYChart extends PureComponent { yType, stackBy, errorText, - showTooltips, onSelectEnd, children, xDomain, @@ -61,6 +79,8 @@ class XYChart extends PureComponent { yPadding, xPadding, animation, // eslint-disable-line no-unused-vars + showTooltips, + crosshairX, onCrosshairUpdate, // eslint-disable-line no-unused-vars truncateLegends, // eslint-disable-line no-unused-vars ...rest @@ -75,7 +95,7 @@ class XYChart extends PureComponent { return (
- + { showTooltips && ( + )} {onSelectEnd && } - +
); } diff --git a/src/components/xy_chart/crosshair.js b/src/components/xy_chart/crosshair.js deleted file mode 100644 index d548480784ca..000000000000 --- a/src/components/xy_chart/crosshair.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { AbstractSeries, Crosshair } from 'react-vis'; - -export class EuiCrosshair extends AbstractSeries { - state = { - crosshairValues: [], - } - - static get requiresSVG() { - return false; - } - - static get isCanvas() { - return false; - } - - onParentMouseMove(event) { - this._handleNearestX(event); - } - - onParentMouseMove(event) { - this._handleNearestX(event); - } - - _handleNearestX(event) { - const chartData = this.props._allData.filter(d => d) - if (chartData.length === 0) { - return - } - const coordinate = super._getXYCoordinateInContainer(event); - const xScaleFn = super._getAttributeFunctor('x'); - - const crosshairValues = chartData - .map(data => { - let minDistance = Number.POSITIVE_INFINITY; - let value = null; - data.forEach((item) => { - const currentCoordinate = xScaleFn(item); - const newDistance = Math.abs(coordinate.x - currentCoordinate); - if (newDistance < minDistance) { - minDistance = newDistance; - value = item; - } - }); - if (!value) { - return; - } - return { - ...value, - } - }) - .filter(d => d); - - this.setState({ - crosshairValues, - }); - } - - render() { - - return ( - - ) - } -} diff --git a/src/components/xy_chart/crosshair_x.js b/src/components/xy_chart/crosshair_x.js new file mode 100644 index 000000000000..47d4b1f0dfc4 --- /dev/null +++ b/src/components/xy_chart/crosshair_x.js @@ -0,0 +1,161 @@ +import React from 'react'; +import { AbstractSeries, Crosshair } from 'react-vis'; + +export class EuiCrosshairX extends AbstractSeries { + state = { + crosshairValues: [], + } + + static get requiresSVG() { + return false; + } + + static get isCanvas() { + return false; + } + + static getDerivedStateFromProps(props) { + const { crosshairX, _allData } = props; + + if (crosshairX !== undefined) { + return { + crosshairValues: EuiCrosshairX._computeDataFromXValue(_allData, crosshairX), + }; + } + return null; + } + + static _computeDataFromXValue(dataSeries, crosshairX) { + const filteredAndFlattenDataByX = dataSeries + .filter(series => series) // get only cleaned data series + .map(series => { + return series + .filter(dataPoint => dataPoint.x === crosshairX) + .map(dataPoint => ({ ...dataPoint, originalValues: { ...dataPoint } })); + }) + .reduce((acc, val) => acc.concat(val), []); + return filteredAndFlattenDataByX; + } + + onParentMouseMove(event) { + this._handleNearestX(event); + } + + onParentMouseLeave() { + if (this.props.onCrosshairUpdate) { + this.props.onCrosshairUpdate(null); + } + this.setState({ + crosshairValues: [] + }) + } + + _titleFormat = (dataPoints = []) => { + if (dataPoints.length > 0) { + const [ firstDataPoint ] = dataPoints + const { originalValues } = firstDataPoint + const value = (typeof originalValues.x0 === 'number') + ? `${originalValues.x0} to ${originalValues.x}` + : originalValues.x; + return { + title: 'X Value', + value, + } + } + } + + _itemsFormat = (dataPoints) => { + return dataPoints.map((d, i) => { + return { + title: `series ${i}`, // TODO specify series title or default one + value: d.y, + }; + }); + } + + _handleNearestX(event) { + const cleanedDataSeries = this.props._allData.filter(dataSeries => dataSeries); + if (cleanedDataSeries.length === 0) { + return; + } + const containerCoordiante = super._getXYCoordinateInContainer(event); + this._findNearestXData(cleanedDataSeries, containerCoordiante.x); + } + + _findNearestXData(dataSeries, mouseXContainerCoords) { + const xScaleFn = super._getAttributeFunctor('x'); + // keeping a global min distance to filter only elements with the same distance + let globalMinDistance = Number.POSITIVE_INFINITY; + + const nearestXData = dataSeries + .map(data => { + let minDistance = Number.POSITIVE_INFINITY; + let value = null; + data.forEach((item) => { + let itemXCoords; + const xCoord = xScaleFn(item); + // check the right item coordinate if we use x0 and x value (e.g. on histograms) + if (typeof item.x0 === 'number') { + // we need to compute the scaled x0 using the xScale attribute functor + // we don't have access of the x0 attribute functor + const x0Coord = xScaleFn({ x: item.x0 }); + itemXCoords = (xCoord - x0Coord) / 2 + x0Coord; + } else { + itemXCoords = xCoord; + } + const newDistance = Math.abs(mouseXContainerCoords - itemXCoords); + if (newDistance < minDistance) { + minDistance = newDistance; + value = item; + } + globalMinDistance = Math.min(globalMinDistance, minDistance) + }); + + if (!value) { + return; + } + + return { + minDistance, + value, + }; + }) + .filter(d => d); + + // filter and map nearest X data per dataseries to get only the nearet onces + const crosshairValues = nearestXData + .filter(value => value.minDistance === globalMinDistance) + .map(value => { + // check if we are on histograms and we need to show the right x and y values + const d = value.value; + const x = typeof d.x0 === 'number' + ? (d.x - d.x0) / 2 + d.x0 + : d.x; + const y = typeof d.y0 === 'number' + ? (d.y - d.y0) + : d.y; + return { x, y, originalValues: d }; + }); + + if (this.props.onCrosshairUpdate) { + this.props.onCrosshairUpdate(crosshairValues[0].x); + } + + this.setState({ + crosshairValues, + }); + } + + render() { + const { crosshairValues } = this.state + return ( + + ) + } +} diff --git a/src/components/xy_chart/index.js b/src/components/xy_chart/index.js index b33391942f9c..91ab93a07b38 100644 --- a/src/components/xy_chart/index.js +++ b/src/components/xy_chart/index.js @@ -11,4 +11,4 @@ export { EuiYAxis } from './axis/y_axis'; export { EuiArea } from './area'; export { EuiXYChartAxisUtils } from './utils/axis_utils'; export { EuiXYChartTextUtils } from './utils/text_utils'; -export { EuiCrosshair } from './crosshair'; +export { EuiCrosshairX } from './crosshair_x'; diff --git a/src/components/xy_chart/utils/series_utils.js b/src/components/xy_chart/utils/series_utils.js new file mode 100644 index 000000000000..44c65800ad2a --- /dev/null +++ b/src/components/xy_chart/utils/series_utils.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { AbstractSeries } from 'react-vis'; + +/** + * Check if the component is series or not. + * @param {React.Component} child Component. + * @returns {boolean} True if the child is series, false otherwise. + */ +export function isSeriesChild(child) { + const { prototype } = child.type; + return prototype instanceof AbstractSeries; +} + +/** + * Get all series from the 'children' object of the component. + * @param {Object} children Children. + * @returns {Array} Array of children. + */ +export function getSeriesChildren(children) { + return React.Children.toArray(children).filter(child => + child && isSeriesChild(child)); +} diff --git a/src/components/xy_chart/vertical_bar_series.js b/src/components/xy_chart/vertical_bar_series.js index dd00b5008be9..f0c5cd78d181 100644 --- a/src/components/xy_chart/vertical_bar_series.js +++ b/src/components/xy_chart/vertical_bar_series.js @@ -3,8 +3,10 @@ import PropTypes from 'prop-types'; import { VerticalBarSeries } from 'react-vis'; export class EuiVerticalBarSeries extends VerticalBarSeries { + render() { const { name, data, color, onClick, ...rest } = this.props; + const isHighDataVolume = data.length > 80 ? true : false; return ( 80 ? true : false; return ( @@ -13,10 +14,10 @@ export class EuiVerticalRectSeries extends VerticalRectSeries { onSeriesClick={onClick} color={color} style={{ - strokeWidth: 1, + strokeWidth: isHighDataVolume ? 0 : 1, stroke: 'white', - rx: 2, - ry: 2, + rx: isHighDataVolume ? 0 : 2, + ry: isHighDataVolume ? 0 : 2, }} data={data} {...rest} From 3c7328543774e4415e65dd9ea851d5a7dc668a3a Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 19 Jun 2018 12:23:42 +0200 Subject: [PATCH 19/68] Add crosshair Y --- .../xy_chart_bar/horizontal_bar_series.js | 21 ++- .../views/xy_chart_bar/rotate_bar_series.js | 71 ++++++++ .../stacked_horizontal_bar_series.js | 2 + .../horizontal_rect_series.js | 19 +- .../stacked_horizontal_rect_series.js | 2 + src/components/index.js | 3 + .../xy_chart/__snapshots__/area.test.js.snap | 6 +- .../xy_chart/__snapshots__/chart.test.js.snap | 3 +- .../xy_chart/__snapshots__/line.test.js.snap | 6 +- src/components/xy_chart/bar_series.js | 50 +++++ src/components/xy_chart/chart.js | 30 +-- .../xy_chart/{ => crosshairs}/crosshair_x.js | 10 + .../xy_chart/crosshairs/crosshair_y.js | 172 ++++++++++++++++++ .../crosshairs/react_vis_crosshair_y.js | 170 +++++++++++++++++ src/components/xy_chart/index.js | 5 +- src/components/xy_chart/utils/chart_utils.js | 9 + src/components/xy_chart/utils/series_utils.js | 11 ++ 17 files changed, 553 insertions(+), 37 deletions(-) create mode 100644 src-docs/src/views/xy_chart_bar/rotate_bar_series.js create mode 100644 src/components/xy_chart/bar_series.js rename src/components/xy_chart/{ => crosshairs}/crosshair_x.js (92%) create mode 100644 src/components/xy_chart/crosshairs/crosshair_y.js create mode 100644 src/components/xy_chart/crosshairs/react_vis_crosshair_y.js create mode 100644 src/components/xy_chart/utils/chart_utils.js diff --git a/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js b/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js index 7d37dca18e7b..ef24556e7234 100644 --- a/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js @@ -1,26 +1,27 @@ import React from 'react'; -import { EuiXYChart, EuiHorizontalBarSeries, EuiDefaultAxis } from '../../../../src/components'; +import { + EuiXYChart, + EuiHorizontalBarSeries, + EuiDefaultAxis, + EuiXYChartUtils, +} from '../../../../src/components'; const data = [ { x: 3, y: 'A' }, { x: 1, y: 'B' }, { x: 5, y: 'C' }, { x: 2, y: 'D' }, - { x: 1, y: 'E' } -] + { x: 1, y: 'E' }, +]; export default () => ( - - + + ); diff --git a/src-docs/src/views/xy_chart_bar/rotate_bar_series.js b/src-docs/src/views/xy_chart_bar/rotate_bar_series.js new file mode 100644 index 000000000000..2aa6416d59e8 --- /dev/null +++ b/src-docs/src/views/xy_chart_bar/rotate_bar_series.js @@ -0,0 +1,71 @@ +import React, { Component } from 'react'; + +import { + EuiSwitch, + EuiXYChart, + EuiBarSeries, + EuiSpacer, + EuiDefaultAxis, +} from '../../../../src/components'; + +const horizontalData = [ + { x: 3, y: 'A' }, + { x: 1, y: 'B' }, + { x: 5, y: 'C' }, + { x: 2, y: 'D' }, + { x: 1, y: 'E' } +] +const verticalData = [ + { x: 'A', y: 3 }, + { x: 'B', y: 1 }, + { x: 'C', y: 5 }, + { x: 'D', y: 2 }, + { x: 'E', y: 1 }, +] + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + isHorizontal: false, + }; + } + + onChange = e => { + this.setState({ + isHorizontal: e.target.checked, + }); + }; + + render() { + const { isHorizontal } = this.state + return ( +
+ + + + + + + + +
+ ) + } +} diff --git a/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js b/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js index 3044417f4a1a..bd24a0fe3025 100644 --- a/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js @@ -5,6 +5,7 @@ import { EuiXYChart, EuiHorizontalBarSeries, EuiDefaultAxis, + EuiXYChartUtils, } from '../../../../src/components'; const dataA = [ @@ -51,6 +52,7 @@ export default class extends Component { diff --git a/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js b/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js index 322a4f542476..2ee5f7afac8a 100644 --- a/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js @@ -1,6 +1,11 @@ import React from 'react'; -import { EuiXYChart, EuiHorizontalRectSeries, EuiDefaultAxis } from '../../../../src/components'; +import { + EuiXYChart, + EuiHorizontalRectSeries, + EuiDefaultAxis, + EuiXYChartUtils, +} from '../../../../src/components'; const data = [ { x: 3, y: 0, y0: 1 }, @@ -8,18 +13,14 @@ const data = [ { x: 5, y: 2, y0: 3 }, { x: 2, y: 3, y0: 4 }, { x: 1, y: 4, y0: 5 }, -] +]; export default () => ( - - + + ); diff --git a/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js b/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js index 05d5f36972bf..8f55bc4ae264 100644 --- a/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js @@ -4,6 +4,7 @@ import { EuiXYChart, EuiHorizontalRectSeries, EuiDefaultAxis, + EuiXYChartUtils, } from '../../../../src/components'; const dataA = [ @@ -27,6 +28,7 @@ export default () => ( width={600} height={200} stackBy="x" + crosshairOrientation={EuiXYChartUtils.ORIENTATION.HORIZONTAL} > + ); + } +} + +EuiBarSeries.propTypes = { + /** The name used to define the data in tooltips and ledgends */ + name: PropTypes.string.isRequired, + isHorizontal: PropTypes.bool, + /** Array<{x: number, y: string|number}> */ + data: PropTypes.arrayOf(PropTypes.shape({ + x: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + y: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + })).isRequired, + /** Without a color set, a random EUI color palette color will be chosen */ + color: PropTypes.string, + onClick: PropTypes.func +}; + +EuiBarSeries.defaultProps = { + isHorizontal: false, +}; diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/chart.js index cbb45dc403e4..024cf6d69422 100644 --- a/src/components/xy_chart/chart.js +++ b/src/components/xy_chart/chart.js @@ -3,10 +3,12 @@ import { XYPlot, makeWidthFlexible, AbstractSeries } from 'react-vis'; import PropTypes from 'prop-types'; import Highlight from './highlight'; -import { EuiCrosshairX } from './crosshair_x'; +import { EuiCrosshairX } from './crosshairs/crosshair_x'; +import { EuiCrosshairY } from './crosshairs/crosshair_y'; import { VISUALIZATION_COLORS } from '../../services'; import StatusText from './status-text'; import { getSeriesChildren } from './utils/series_utils'; +import { EuiXYChartUtils } from './utils/chart_utils'; class XYExtendedPlot extends XYPlot { /** @@ -59,9 +61,9 @@ class XYChart extends PureComponent { return React.cloneElement(child, props); } // canShowCrosshair = () => { - // const { crosshairX, showTooltips } = this.props; + // const { crosshairValues, showCrosshair } = this.props; // const { mouseOver } = this.state; - // return showTooltips && ( mouseOver || crosshairX !== undefined) + // return showCrosshair && ( mouseOver || crosshairValues !== undefined) // } render() { @@ -79,8 +81,9 @@ class XYChart extends PureComponent { yPadding, xPadding, animation, // eslint-disable-line no-unused-vars - showTooltips, - crosshairX, + showCrosshair, + crosshairOrientation, + crosshairValues, onCrosshairUpdate, // eslint-disable-line no-unused-vars truncateLegends, // eslint-disable-line no-unused-vars ...rest @@ -92,7 +95,9 @@ class XYChart extends PureComponent { } this.colorIterator = 0; - + const Crosshair = crosshairOrientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL + ? EuiCrosshairY + : EuiCrosshairX return (
)} @@ -145,9 +150,9 @@ XYChart.propTypes = { // showAxis: PropTypes.bool, xAxisLocation: PropTypes.string, yAxisLocation: PropTypes.string, - showTooltips: PropTypes.bool, + showCrosshair: PropTypes.bool, errorText: PropTypes.string, - crosshairX: PropTypes.number, + crosshairValues: PropTypes.number, onCrosshairUpdate: PropTypes.func, xDomain: PropTypes.array, yDomain: PropTypes.array, @@ -158,7 +163,8 @@ XYChart.propTypes = { XYChart.defaultProps = { truncateLegends: false, // showAxis: true, - showTooltips: true, + showCrosshair: true, + crosshairOrientation: EuiXYChartUtils.ORIENTATION.VERTICAL, yPadding: 0, xPadding: 0, xType: 'linear', diff --git a/src/components/xy_chart/crosshair_x.js b/src/components/xy_chart/crosshairs/crosshair_x.js similarity index 92% rename from src/components/xy_chart/crosshair_x.js rename to src/components/xy_chart/crosshairs/crosshair_x.js index 47d4b1f0dfc4..9780fa102f8d 100644 --- a/src/components/xy_chart/crosshair_x.js +++ b/src/components/xy_chart/crosshairs/crosshair_x.js @@ -1,6 +1,9 @@ import React from 'react'; import { AbstractSeries, Crosshair } from 'react-vis'; +/** + * The Crosshair used by the XYChart as main tooltip mechanism along X axis. + */ export class EuiCrosshairX extends AbstractSeries { state = { crosshairValues: [], @@ -82,6 +85,13 @@ export class EuiCrosshairX extends AbstractSeries { this._findNearestXData(cleanedDataSeries, containerCoordiante.x); } + /** + * _findNearestXData - Find the nearest set of data in all existing series. + * + * @param {type} dataSeries an array of dataseries + * @param {type} mouseXContainerCoords the x coordinate of the mouse on the chart container + * @protected + */ _findNearestXData(dataSeries, mouseXContainerCoords) { const xScaleFn = super._getAttributeFunctor('x'); // keeping a global min distance to filter only elements with the same distance diff --git a/src/components/xy_chart/crosshairs/crosshair_y.js b/src/components/xy_chart/crosshairs/crosshair_y.js new file mode 100644 index 000000000000..5da006d3dc04 --- /dev/null +++ b/src/components/xy_chart/crosshairs/crosshair_y.js @@ -0,0 +1,172 @@ +import React from 'react'; +import { AbstractSeries } from 'react-vis'; +import { CrosshairY } from './react_vis_crosshair_y'; + +/** + * The Crosshair used by the XYChart as main tooltip mechanism along X axis. + */ +export class EuiCrosshairY extends AbstractSeries { + state = { + crosshairValues: [], + } + + static get requiresSVG() { + return false; + } + + static get isCanvas() { + return false; + } + + static getDerivedStateFromProps(props) { + const { crosshairY, _allData } = props; + + if (crosshairY !== undefined) { + return { + crosshairValues: EuiCrosshairY._computeDataFromYValue(_allData, crosshairY), + }; + } + return null; + } + + static _computeDataFromYValue(dataSeries, crosshairY) { + const filteredAndFlattenDataByY = dataSeries + .filter(series => series) // get only cleaned data series + .map(series => { + return series + .filter(dataPoint => dataPoint.y === crosshairY) + .map(dataPoint => ({ ...dataPoint, originalValues: { ...dataPoint } })); + }) + .reduce((acc, val) => acc.concat(val), []); + return filteredAndFlattenDataByY; + } + + onParentMouseMove(event) { + this._handleNearestY(event); + } + + onParentMouseLeave() { + if (this.props.onCrosshairUpdate) { + this.props.onCrosshairUpdate(null); + } + this.setState({ + crosshairValues: [] + }) + } + + _titleFormat = (dataPoints = []) => { + if (dataPoints.length > 0) { + const [ firstDataPoint ] = dataPoints + const { originalValues } = firstDataPoint + const value = (typeof originalValues.y0 === 'number') + ? `${originalValues.y0} to ${originalValues.y}` + : originalValues.y; + return { + title: 'Y Value', + value, + } + } + } + + _itemsFormat = (dataPoints) => { + return dataPoints.map((d, i) => { + return { + title: `series ${i}`, // TODO specify series title or default one + value: d.x, + }; + }); + } + + _handleNearestY(event) { + const cleanedDataSeries = this.props._allData.filter(dataSeries => dataSeries); + if (cleanedDataSeries.length === 0) { + return; + } + const containerCoordiante = super._getXYCoordinateInContainer(event); + this._findNearestYData(cleanedDataSeries, containerCoordiante.y); + } + + /** + * _findNearestYData - Find the nearest set of data in all existing series. + * + * @param {type} dataSeries an array of dataseries + * @param {type} mouseYContainerCoords the y coordinate of the mouse on the chart container + * @protected + */ + _findNearestYData(dataSeries, mouseYContainerCoords) { + const yScaleFn = super._getAttributeFunctor('y'); + // keeping a global min distance to filter only elements with the same distance + let globalMinDistance = Number.POSITIVE_INFINITY; + + const nearestYData = dataSeries + .map(data => { + let minDistance = Number.POSITIVE_INFINITY; + let value = null; + data.forEach((item) => { + let itemYCoords; + const yCoord = yScaleFn(item); + // check the right item coordinate if we use x0 and x value (e.g. on histograms) + if (typeof item.y0 === 'number') { + // we need to compute the scaled y0 using the xScale attribute functor + // we don't have access of the y0 attribute functor + const y0Coord = yScaleFn({ x: item.y0 }); + itemYCoords = (yCoord - y0Coord) / 2 + y0Coord; + } else { + itemYCoords = yCoord; + } + const newDistance = Math.abs(mouseYContainerCoords - itemYCoords); + if (newDistance < minDistance) { + minDistance = newDistance; + value = item; + } + globalMinDistance = Math.min(globalMinDistance, minDistance) + }); + + if (!value) { + return; + } + + return { + minDistance, + value, + }; + }) + .filter(d => d); + + // filter and map nearest X data per dataseries to get only the nearet onces + const crosshairValues = nearestYData + .filter(value => value.minDistance === globalMinDistance) + .map(value => { + // check if we are on histograms and we need to show the right x and y values + const d = value.value; + const y = typeof d.y0 === 'number' + ? (d.y - d.y0) / 2 + d.y0 + : d.y; + const x = typeof d.x0 === 'number' + ? (d.x - d.x0) + : d.x; + return { x, y, originalValues: d }; + }); + + if (this.props.onCrosshairUpdate) { + this.props.onCrosshairUpdate(crosshairValues[0].y); + } + + this.setState({ + crosshairValues, + }); + } + + render() { + const { crosshairValues } = this.state + return ( + + ) + } +} diff --git a/src/components/xy_chart/crosshairs/react_vis_crosshair_y.js b/src/components/xy_chart/crosshairs/react_vis_crosshair_y.js new file mode 100644 index 000000000000..f2c3f913a4d5 --- /dev/null +++ b/src/components/xy_chart/crosshairs/react_vis_crosshair_y.js @@ -0,0 +1,170 @@ +// TODO this is a more or less a copy and paste of crosshair y +// we need to specify the license (if we need to use the uber one) +// we need to find a better name + +import React, { PureComponent } from 'react'; + +import PropTypes from 'prop-types'; + +import { ScaleUtils } from 'react-vis'; + +/** + * Format title by detault. + * @param {Array} values List of values. + * @returns {*} Formatted value or undefined. + */ +function defaultTitleFormat(values) { + const value = getFirstNonEmptyValue(values); + if (value) { + return { + title: 'x', + value: value.x + }; + } +} + +/** + * Format items by default. + * @param {Array} values Array of values. + * @returns {*} Formatted list of items. + */ +function defaultItemsFormat(values) { + return values.map((v, i) => { + if (v) { + return { value: v.y, title: i }; + } + }); +} + +/** + * Get the first non-empty item from an array. + * @param {Array} values Array of values. + * @returns {*} First non-empty value or undefined. + */ +function getFirstNonEmptyValue(values) { + return (values || []).find(v => Boolean(v)); +} + +export class CrosshairY extends PureComponent { + + static get propTypes() { + return { + className: PropTypes.string, + values: PropTypes.array, + series: PropTypes.object, + innerWidth: PropTypes.number, + innerHeight: PropTypes.number, + marginLeft: PropTypes.number, + marginTop: PropTypes.number, + orientation: PropTypes.oneOf(['left', 'right']), + itemsFormat: PropTypes.func, + titleFormat: PropTypes.func, + style: PropTypes.shape({ + line: PropTypes.object, + title: PropTypes.object, + box: PropTypes.object + }) + }; + } + + static get defaultProps() { + return { + titleFormat: defaultTitleFormat, + itemsFormat: defaultItemsFormat, + style: { + line: {}, + title: {}, + box: {} + } + }; + } + + /** + * Render crosshair title. + * @returns {*} Container with the crosshair title. + * @private + */ + _renderCrosshairTitle() { + const { values, titleFormat, style } = this.props; + const titleItem = titleFormat(values); + if (!titleItem) { + return null; + } + return ( +
+ {titleItem.title} + {': '} + {titleItem.value} +
+ ); + } + + /** + * Render crosshair items (title + value for each series). + * @returns {*} Array of React classes with the crosshair values. + * @private + */ + _renderCrosshairItems() { + const { values, itemsFormat } = this.props; + const items = itemsFormat(values); + if (!items) { + return null; + } + return items.filter(i => i).map(function renderValue(item, i) { + return ( +
+ {item.title} + {': '} + {item.value} +
+ ); + }); + } + + render() { + const { + children, + className, + values, + marginTop, + marginLeft, + innerWidth, + style } = this.props; + const value = getFirstNonEmptyValue(values); + if (!value) { + return null; + } + const y = ScaleUtils.getAttributeFunctor(this.props, 'y'); + const innerTop = y(value); + + const left = marginLeft; + const top = marginTop + innerTop; + const innerClassName = `rv-crosshair__inner rv-crosshair__inner--left`; + return ( +
+ +
+ +
+ {children ? + children : +
+
+ {this._renderCrosshairTitle()} + {this._renderCrosshairItems()} +
+
+ } +
+
+ ); + } +} + +CrosshairY.displayName = 'CrosshairY'; diff --git a/src/components/xy_chart/index.js b/src/components/xy_chart/index.js index 91ab93a07b38..6cdafcff6531 100644 --- a/src/components/xy_chart/index.js +++ b/src/components/xy_chart/index.js @@ -1,6 +1,7 @@ export { asSeries } from './as_series'; export { EuiXYChart } from './chart'; export { EuiLine } from './line'; +export { EuiBarSeries } from './bar_series'; export { EuiVerticalBarSeries } from './vertical_bar_series'; export { EuiHorizontalBarSeries } from './horizontal_bar_series'; export { EuiVerticalRectSeries } from './vertical_rect_series'; @@ -9,6 +10,8 @@ export { EuiDefaultAxis } from './axis/default_axis'; export { EuiXAxis } from './axis/x_axis'; export { EuiYAxis } from './axis/y_axis'; export { EuiArea } from './area'; +export { EuiXYChartUtils } from './utils/chart_utils'; export { EuiXYChartAxisUtils } from './utils/axis_utils'; export { EuiXYChartTextUtils } from './utils/text_utils'; -export { EuiCrosshairX } from './crosshair_x'; +export { EuiCrosshairX } from './crosshairs/crosshair_x'; +export { EuiCrosshairY } from './crosshairs/crosshair_y'; diff --git a/src/components/xy_chart/utils/chart_utils.js b/src/components/xy_chart/utils/chart_utils.js new file mode 100644 index 000000000000..c867d5634f66 --- /dev/null +++ b/src/components/xy_chart/utils/chart_utils.js @@ -0,0 +1,9 @@ +const ORIENTATION = { + HORIZONTAL: 'horizontal', + VERTICAL: 'vertical', + BOTH: 'both', +}; + +export const EuiXYChartUtils = { + ORIENTATION, +} diff --git a/src/components/xy_chart/utils/series_utils.js b/src/components/xy_chart/utils/series_utils.js index 44c65800ad2a..aacc1438bf8f 100644 --- a/src/components/xy_chart/utils/series_utils.js +++ b/src/components/xy_chart/utils/series_utils.js @@ -20,3 +20,14 @@ export function getSeriesChildren(children) { return React.Children.toArray(children).filter(child => child && isSeriesChild(child)); } + +export function rotateDataSeries(data) { + return data.map(d => { + return { + x: d.y, + y: d.x, + x0: d.y0, + y0: d.x0, + } + }) +} From 4f2b44f074a1b0388c3a0332eef2c95d0ffaae41 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 19 Jun 2018 12:58:14 +0200 Subject: [PATCH 20/68] Fix examples and updated the XYChart API --- .../{examples.js => example-complex.js} | 4 -- .../src/views/xy_chart/example-crosshair.js | 14 +++--- .../src/views/xy_chart/xy_chart_example.js | 6 +-- .../xy_chart/__snapshots__/area.test.js.snap | 26 +++++------ .../xy_chart/__snapshots__/line.test.js.snap | 26 +++++------ src/components/xy_chart/chart.js | 41 ++++++++---------- .../xy_chart/crosshairs/crosshair_x.js | 43 ++++++++++++------- 7 files changed, 84 insertions(+), 76 deletions(-) rename src-docs/src/views/xy_chart/{examples.js => example-complex.js} (89%) diff --git a/src-docs/src/views/xy_chart/examples.js b/src-docs/src/views/xy_chart/example-complex.js similarity index 89% rename from src-docs/src/views/xy_chart/examples.js rename to src-docs/src/views/xy_chart/example-complex.js index 6782db326584..d8c275dd14d7 100644 --- a/src-docs/src/views/xy_chart/examples.js +++ b/src-docs/src/views/xy_chart/example-complex.js @@ -9,8 +9,6 @@ import { } from '../../../../src/components'; export default () => { - const yTicks = [[0, 'zero'], [1, 'one']]; - const xTicks = [[0, '0'], [5, '5'], [10, '10'], [15, '15'], [20, '20']]; const barData = []; for (let i = 0; i < 10; i++) { @@ -31,8 +29,6 @@ export default () => { }} width={600} height={200} - xTicks={xTicks} - yTicks={yTicks} > { - console.log('update crosshair x'); - this.setState({ crosshairX }); + _updateCrosshairLocation = (crosshairValue) => { + this.setState({ crosshairValue }); } render() { return (
@@ -31,10 +31,10 @@ export class ExampleCrosshair extends React.Component { /> -

+ diff --git a/src-docs/src/views/xy_chart/xy_chart_example.js b/src-docs/src/views/xy_chart/xy_chart_example.js index 7bc253275e7c..62adeb6216ed 100644 --- a/src-docs/src/views/xy_chart/xy_chart_example.js +++ b/src-docs/src/views/xy_chart/xy_chart_example.js @@ -1,7 +1,7 @@ import React from 'react'; import { GuideSectionTypes } from '../../components'; import { EuiCode } from '../../../../src/components'; -import ChartExampleCode from './examples'; +import ComplexChartExampleCode from './example-complex'; import EmptyExampleCode from './example-empty'; import MultiAxisChartExampleCode from './example_dual_axis'; import { ExampleCrosshair } from './example-crosshair'; @@ -23,7 +23,7 @@ export const XYChartExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./examples') + code: require('!!raw-loader!./example-complex') }, { type: GuideSectionTypes.HTML, @@ -32,7 +32,7 @@ export const XYChartExample = { ], demo: (
- +
) }, diff --git a/src/components/xy_chart/__snapshots__/area.test.js.snap b/src/components/xy_chart/__snapshots__/area.test.js.snap index 0f38a7df5ae2..d878fcd1b85a 100644 --- a/src/components/xy_chart/__snapshots__/area.test.js.snap +++ b/src/components/xy_chart/__snapshots__/area.test.js.snap @@ -731,7 +731,6 @@ exports[`EuiArea all props are rendered 1`] = ` _opacityValue={1} angleDomain={Array []} animation={true} - className="" clusters={ Set { undefined, @@ -789,7 +788,6 @@ exports[`EuiArea all props are rendered 1`] = ` 10, ] } - stack={false} strokeDomain={Array []} strokeRange={ Array [ @@ -797,7 +795,6 @@ exports[`EuiArea all props are rendered 1`] = ` "#FF9833", ] } - style={Object {}} xDomain={ Array [ 0, @@ -849,7 +846,6 @@ exports[`EuiArea all props are rendered 1`] = ` _opacityValue={1} angleDomain={Array []} animation={true} - className="" clusters={ Set { undefined, @@ -907,7 +903,6 @@ exports[`EuiArea all props are rendered 1`] = ` 10, ] } - stack={false} strokeDomain={Array []} strokeRange={ Array [ @@ -915,7 +910,13 @@ exports[`EuiArea all props are rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "line": Object { + "background": "rgb(218, 218, 218)", + }, + } + } titleFormat={[Function]} values={Array []} xDomain={ @@ -1677,7 +1678,6 @@ exports[`EuiArea is rendered 1`] = ` _opacityValue={1} angleDomain={Array []} animation={true} - className="" clusters={ Set { undefined, @@ -1735,7 +1735,6 @@ exports[`EuiArea is rendered 1`] = ` 10, ] } - stack={false} strokeDomain={Array []} strokeRange={ Array [ @@ -1743,7 +1742,6 @@ exports[`EuiArea is rendered 1`] = ` "#FF9833", ] } - style={Object {}} xDomain={ Array [ 0, @@ -1795,7 +1793,6 @@ exports[`EuiArea is rendered 1`] = ` _opacityValue={1} angleDomain={Array []} animation={true} - className="" clusters={ Set { undefined, @@ -1853,7 +1850,6 @@ exports[`EuiArea is rendered 1`] = ` 10, ] } - stack={false} strokeDomain={Array []} strokeRange={ Array [ @@ -1861,7 +1857,13 @@ exports[`EuiArea is rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "line": Object { + "background": "rgb(218, 218, 218)", + }, + } + } titleFormat={[Function]} values={Array []} xDomain={ diff --git a/src/components/xy_chart/__snapshots__/line.test.js.snap b/src/components/xy_chart/__snapshots__/line.test.js.snap index 56e9e33d78c2..68cf86073b33 100644 --- a/src/components/xy_chart/__snapshots__/line.test.js.snap +++ b/src/components/xy_chart/__snapshots__/line.test.js.snap @@ -1737,7 +1737,6 @@ exports[`EuiLine all props are rendered 1`] = ` _opacityValue={1} angleDomain={Array []} animation={true} - className="" clusters={ Set { undefined, @@ -1795,7 +1794,6 @@ exports[`EuiLine all props are rendered 1`] = ` 10, ] } - stack={false} strokeDomain={Array []} strokeRange={ Array [ @@ -1803,7 +1801,6 @@ exports[`EuiLine all props are rendered 1`] = ` "#FF9833", ] } - style={Object {}} xDomain={ Array [ 0, @@ -1855,7 +1852,6 @@ exports[`EuiLine all props are rendered 1`] = ` _opacityValue={1} angleDomain={Array []} animation={true} - className="" clusters={ Set { undefined, @@ -1913,7 +1909,6 @@ exports[`EuiLine all props are rendered 1`] = ` 10, ] } - stack={false} strokeDomain={Array []} strokeRange={ Array [ @@ -1921,7 +1916,13 @@ exports[`EuiLine all props are rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "line": Object { + "background": "rgb(218, 218, 218)", + }, + } + } titleFormat={[Function]} values={Array []} xDomain={ @@ -3690,7 +3691,6 @@ exports[`EuiLine is rendered 1`] = ` _opacityValue={1} angleDomain={Array []} animation={true} - className="" clusters={ Set { undefined, @@ -3748,7 +3748,6 @@ exports[`EuiLine is rendered 1`] = ` 10, ] } - stack={false} strokeDomain={Array []} strokeRange={ Array [ @@ -3756,7 +3755,6 @@ exports[`EuiLine is rendered 1`] = ` "#FF9833", ] } - style={Object {}} xDomain={ Array [ 0, @@ -3808,7 +3806,6 @@ exports[`EuiLine is rendered 1`] = ` _opacityValue={1} angleDomain={Array []} animation={true} - className="" clusters={ Set { undefined, @@ -3866,7 +3863,6 @@ exports[`EuiLine is rendered 1`] = ` 10, ] } - stack={false} strokeDomain={Array []} strokeRange={ Array [ @@ -3874,7 +3870,13 @@ exports[`EuiLine is rendered 1`] = ` "#FF9833", ] } - style={Object {}} + style={ + Object { + "line": Object { + "background": "rgb(218, 218, 218)", + }, + } + } titleFormat={[Function]} values={Array []} xDomain={ diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/chart.js index 024cf6d69422..8fc726b7c3ae 100644 --- a/src/components/xy_chart/chart.js +++ b/src/components/xy_chart/chart.js @@ -61,9 +61,9 @@ class XYChart extends PureComponent { return React.cloneElement(child, props); } // canShowCrosshair = () => { - // const { crosshairValues, showCrosshair } = this.props; + // const { crosshairValue, showCrosshair } = this.props; // const { mouseOver } = this.state; - // return showCrosshair && ( mouseOver || crosshairValues !== undefined) + // return showCrosshair && ( mouseOver || crosshairValue !== undefined) // } render() { @@ -83,7 +83,7 @@ class XYChart extends PureComponent { animation, // eslint-disable-line no-unused-vars showCrosshair, crosshairOrientation, - crosshairValues, + crosshairValue, onCrosshairUpdate, // eslint-disable-line no-unused-vars truncateLegends, // eslint-disable-line no-unused-vars ...rest @@ -122,7 +122,7 @@ class XYChart extends PureComponent { { showCrosshair && ( )} @@ -140,35 +140,32 @@ XYChart.propTypes = { stackBy: PropTypes.string, xType: PropTypes.string, yType: PropTypes.string, + xDomain: PropTypes.array, + yDomain: PropTypes.array, + xPadding: PropTypes.number, + yPadding: PropTypes.number, onHover: PropTypes.func, - onMouseLeave: PropTypes.func, onSelectEnd: PropTypes.func, - hoverIndex: PropTypes.number, - xTicks: PropTypes.array, - yTicks: PropTypes.array, // [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]] truncateLegends: PropTypes.bool, - // showAxis: PropTypes.bool, - xAxisLocation: PropTypes.string, - yAxisLocation: PropTypes.string, - showCrosshair: PropTypes.bool, errorText: PropTypes.string, - crosshairValues: PropTypes.number, + showCrosshair: PropTypes.bool, + crosshairOrientation: PropTypes.string, + crosshairValue: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), onCrosshairUpdate: PropTypes.func, - xDomain: PropTypes.array, - yDomain: PropTypes.array, - xPadding: PropTypes.number, - yPadding: PropTypes.number, }; XYChart.defaultProps = { + xType: 'linear', + yType: 'linear', + yPadding: 0, + xPadding: 0, truncateLegends: false, - // showAxis: true, showCrosshair: true, crosshairOrientation: EuiXYChartUtils.ORIENTATION.VERTICAL, - yPadding: 0, - xPadding: 0, - xType: 'linear', - yType: 'linear', + }; export const EuiXYChart = makeWidthFlexible(XYChart); diff --git a/src/components/xy_chart/crosshairs/crosshair_x.js b/src/components/xy_chart/crosshairs/crosshair_x.js index 9780fa102f8d..839bed5a7022 100644 --- a/src/components/xy_chart/crosshairs/crosshair_x.js +++ b/src/components/xy_chart/crosshairs/crosshair_x.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { AbstractSeries, Crosshair } from 'react-vis'; /** @@ -6,7 +7,7 @@ import { AbstractSeries, Crosshair } from 'react-vis'; */ export class EuiCrosshairX extends AbstractSeries { state = { - crosshairValues: [], + values: [], } static get requiresSVG() { @@ -18,11 +19,11 @@ export class EuiCrosshairX extends AbstractSeries { } static getDerivedStateFromProps(props) { - const { crosshairX, _allData } = props; + const { crosshairValue, _allData } = props; - if (crosshairX !== undefined) { + if (crosshairValue !== undefined) { return { - crosshairValues: EuiCrosshairX._computeDataFromXValue(_allData, crosshairX), + values: EuiCrosshairX._computeDataFromXValue(_allData, crosshairValue), }; } return null; @@ -31,10 +32,10 @@ export class EuiCrosshairX extends AbstractSeries { static _computeDataFromXValue(dataSeries, crosshairX) { const filteredAndFlattenDataByX = dataSeries .filter(series => series) // get only cleaned data series - .map(series => { + .map((series, seriesIndex) => { return series .filter(dataPoint => dataPoint.x === crosshairX) - .map(dataPoint => ({ ...dataPoint, originalValues: { ...dataPoint } })); + .map(dataPoint => ({ ...dataPoint, originalValues: { ...dataPoint }, seriesIndex })); }) .reduce((acc, val) => acc.concat(val), []); return filteredAndFlattenDataByX; @@ -49,7 +50,7 @@ export class EuiCrosshairX extends AbstractSeries { this.props.onCrosshairUpdate(null); } this.setState({ - crosshairValues: [] + values: [] }) } @@ -68,9 +69,9 @@ export class EuiCrosshairX extends AbstractSeries { } _itemsFormat = (dataPoints) => { - return dataPoints.map((d, i) => { + return dataPoints.map(d => { return { - title: `series ${i}`, // TODO specify series title or default one + title: `series ${d.seriesIndex}`, // TODO specify series title or default one value: d.y, }; }); @@ -98,7 +99,7 @@ export class EuiCrosshairX extends AbstractSeries { let globalMinDistance = Number.POSITIVE_INFINITY; const nearestXData = dataSeries - .map(data => { + .map((data, seriesIndex) => { let minDistance = Number.POSITIVE_INFINITY; let value = null; data.forEach((item) => { @@ -128,12 +129,13 @@ export class EuiCrosshairX extends AbstractSeries { return { minDistance, value, + seriesIndex, }; }) .filter(d => d); // filter and map nearest X data per dataseries to get only the nearet onces - const crosshairValues = nearestXData + const values = nearestXData .filter(value => value.minDistance === globalMinDistance) .map(value => { // check if we are on histograms and we need to show the right x and y values @@ -144,23 +146,23 @@ export class EuiCrosshairX extends AbstractSeries { const y = typeof d.y0 === 'number' ? (d.y - d.y0) : d.y; - return { x, y, originalValues: d }; + return { x, y, originalValues: d, seriesIndex: value.seriesIndex }; }); if (this.props.onCrosshairUpdate) { - this.props.onCrosshairUpdate(crosshairValues[0].x); + this.props.onCrosshairUpdate(values[0].x); } this.setState({ - crosshairValues, + values, }); } render() { - const { crosshairValues } = this.state + const { values } = this.state return ( Date: Tue, 19 Jun 2018 13:00:54 +0200 Subject: [PATCH 21/68] Removed console.log --- src/components/xy_chart/chart.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/chart.js index 8fc726b7c3ae..5124ffd46ba0 100644 --- a/src/components/xy_chart/chart.js +++ b/src/components/xy_chart/chart.js @@ -18,7 +18,6 @@ class XYExtendedPlot extends XYPlot { */ _mouseLeaveHandler(event) { const { onMouseLeave, children } = this.props; - console.log('parent mouse leaving') if (onMouseLeave) { super.onMouseLeave(event); } From eb0cf2461c43ff1e755350ee78fca5a67dfd10c1 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 19 Jun 2018 14:15:17 +0200 Subject: [PATCH 22/68] Add showDefaultAxis prop on XYChart. Formatted examples --- .../src/views/xy_chart/example-auto-axis.js | 18 +- .../src/views/xy_chart/example-complex.js | 2 - .../src/views/xy_chart/example-crosshair.js | 15 +- src-docs/src/views/xy_chart/example-empty.js | 7 +- .../src/views/xy_chart/example_dual_axis.js | 1 + .../src/views/xy_chart/xy_chart_example.js | 50 +- src-docs/src/views/xy_chart_area/area.js | 21 +- .../src/views/xy_chart_area/area_example.js | 44 +- .../src/views/xy_chart_area/curved_area.js | 50 +- .../src/views/xy_chart_area/stacked_area.js | 25 +- .../src/views/xy_chart_axis/simple_axis.js | 2 +- .../views/xy_chart_axis/xy_axis_example.js | 16 +- .../src/views/xy_chart_bar/bar_example.js | 73 +- .../xy_chart_bar/horizontal_bar_series.js | 10 +- .../views/xy_chart_bar/rotate_bar_series.js | 44 +- .../stacked_horizontal_bar_series.js | 29 +- .../stacked_vertical_bar_series.js | 54 +- .../views/xy_chart_bar/vertical_bar_series.js | 20 +- .../xy_chart_histogram/histogram_example.js | 68 +- .../horizontal_rect_series.js | 14 +- .../stacked_horizontal_rect_series.js | 24 +- .../stacked_vertical_rect_series.js | 23 +- .../vertical_rect_series.js | 19 +- .../src/views/xy_chart_line/curved_line.js | 35 +- .../views/xy_chart_line/custom_domain_line.js | 28 +- .../views/xy_chart_line/custom_style_line.js | 48 +- src-docs/src/views/xy_chart_line/line.js | 14 +- .../src/views/xy_chart_line/line_example.js | 80 +- .../src/views/xy_chart_line/multi_line.js | 35 +- .../xy_chart/__snapshots__/area.test.js.snap | 6550 ++++++++++++-- .../xy_chart/__snapshots__/chart.test.js.snap | 3 +- .../horizontal_bar_series.test.js.snap | 1017 +++ .../horizontal_rect_series.test.js.snap | 1101 +++ .../xy_chart/__snapshots__/line.test.js.snap | 7608 ++++++++++++++--- .../vertical_bar_series.test.js.snap | 1173 +++ .../vertical_rect_series.test.js.snap | 1213 +++ src/components/xy_chart/axis/default_axis.js | 15 +- src/components/xy_chart/chart.js | 16 +- src/components/xy_chart/utils/text_utils.js | 4 +- 39 files changed, 17210 insertions(+), 2359 deletions(-) diff --git a/src-docs/src/views/xy_chart/example-auto-axis.js b/src-docs/src/views/xy_chart/example-auto-axis.js index 57454e04c430..e0568c4f7db1 100644 --- a/src-docs/src/views/xy_chart/example-auto-axis.js +++ b/src-docs/src/views/xy_chart/example-auto-axis.js @@ -1,17 +1,13 @@ import React from 'react'; -import { - EuiXYChart, - EuiVerticalBarSeries, - EuiDefaultAxis, -} from '../../../../src/components'; +import { EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; export default () => ( - - - + + ); diff --git a/src-docs/src/views/xy_chart/example-complex.js b/src-docs/src/views/xy_chart/example-complex.js index d8c275dd14d7..a2cc88f04ca0 100644 --- a/src-docs/src/views/xy_chart/example-complex.js +++ b/src-docs/src/views/xy_chart/example-complex.js @@ -5,7 +5,6 @@ import { EuiVerticalBarSeries, EuiArea, EuiLine, - EuiDefaultAxis, } from '../../../../src/components'; export default () => { @@ -60,7 +59,6 @@ export default () => { data={[{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]} color={'#db1374'} /> - ); }; diff --git a/src-docs/src/views/xy_chart/example-crosshair.js b/src-docs/src/views/xy_chart/example-crosshair.js index ac5b51d49e67..a55605d8682d 100644 --- a/src-docs/src/views/xy_chart/example-crosshair.js +++ b/src-docs/src/views/xy_chart/example-crosshair.js @@ -1,20 +1,15 @@ import React from 'react'; -import { - EuiSpacer, - EuiXYChart, - EuiVerticalBarSeries, - EuiDefaultAxis, -} from '../../../../src/components'; +import { EuiSpacer, EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; // eslint-disable-next-line export class ExampleCrosshair extends React.Component { state = { crosshairValue: 2, - } - _updateCrosshairLocation = (crosshairValue) => { + }; + _updateCrosshairLocation = crosshairValue => { this.setState({ crosshairValue }); - } + }; render() { return (
@@ -29,7 +24,6 @@ export class ExampleCrosshair extends React.Component { data={[{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]} color={'#db1374'} /> - -
); diff --git a/src-docs/src/views/xy_chart/example-empty.js b/src-docs/src/views/xy_chart/example-empty.js index d27394be5936..b3258caed09f 100644 --- a/src-docs/src/views/xy_chart/example-empty.js +++ b/src-docs/src/views/xy_chart/example-empty.js @@ -2,9 +2,4 @@ import React from 'react'; import { EuiXYChart } from '../../../../src/components'; -export default () => ( - -); +export default () => ; diff --git a/src-docs/src/views/xy_chart/example_dual_axis.js b/src-docs/src/views/xy_chart/example_dual_axis.js index b86e8a0db08f..f9191e2e5102 100644 --- a/src-docs/src/views/xy_chart/example_dual_axis.js +++ b/src-docs/src/views/xy_chart/example_dual_axis.js @@ -25,6 +25,7 @@ export default () => ( height={200} xPadding={5} xType="ordinal" + showDefaultAxis={false} >

- Use EuiXYChart to display line, bar, area, and stream charts. Note that charts are composed with{' '} - EuiLine, EuiArea, EuiBar, and EuiStream being child - components. + Use EuiXYChart to display line, bar, area, and stream charts. Note + that charts are composed with EuiLine, EuiArea,{' '} + EuiBar, and EuiStream being child components.

), source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./example-complex') + code: require('!!raw-loader!./example-complex'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Empty Chart', text: (
-

- When no data is provided to EuiXYChart, an empty state is displayed -

+

When no data is provided to EuiXYChart, an empty state is displayed

), source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./example-empty') + code: require('!!raw-loader!./example-empty'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Keep cross-hair in sync', @@ -73,43 +71,41 @@ export const XYChartExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./example-empty') + code: require('!!raw-loader!./example-empty'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Multi Axis', text: (
-

- If just displaying values is enough, then you can let the chart auto label axis -

+

If just displaying values is enough, then you can let the chart auto label axis

), source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./example_dual_axis') + code: require('!!raw-loader!./example_dual_axis'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) - } - ] + ), + }, + ], }; diff --git a/src-docs/src/views/xy_chart_area/area.js b/src-docs/src/views/xy_chart_area/area.js index e551d93b8157..de5b750bb838 100644 --- a/src-docs/src/views/xy_chart_area/area.js +++ b/src-docs/src/views/xy_chart_area/area.js @@ -1,24 +1,11 @@ import React from 'react'; -import { EuiXYChart, EuiArea, EuiDefaultAxis } from '../../../../src/components'; +import { EuiXYChart, EuiArea } from '../../../../src/components'; -const DATA_A = [ - { x: 0, y: 1 }, - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: 1 }, - { x: 5, y: 2 }, -]; +const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]; export default () => ( - - - + + ); diff --git a/src-docs/src/views/xy_chart_area/area_example.js b/src-docs/src/views/xy_chart_area/area_example.js index e640416a5b42..1bde2257b721 100644 --- a/src-docs/src/views/xy_chart_area/area_example.js +++ b/src-docs/src/views/xy_chart_area/area_example.js @@ -4,11 +4,7 @@ import AreaSeriesExample from './area'; import StackedAreaSeriesExample from './stacked_area'; import CurvedAreaExample from './curved_area'; -import { - EuiCode, - EuiArea, - EuiLink, -} from '../../../../src/components'; +import { EuiCode, EuiArea, EuiLink } from '../../../../src/components'; export const XYChartAreaExample = { title: 'Area chart', @@ -26,26 +22,26 @@ export const XYChartAreaExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./area') + code: require('!!raw-loader!./area'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Stacked Area Series', text: (

- Use multiple EuiArea to display stacked area charts - specifying the stackBy:y prop on the EuiXYChart + Use multiple EuiArea to display stacked area charts specifying the{' '} + stackBy:y prop on the EuiXYChart to enable stacking.

@@ -54,26 +50,28 @@ export const XYChartAreaExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_area') + code: require('!!raw-loader!./stacked_area'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Curved Area Series', text: (

- Use the curve prop to change the curve representation. - Visit d3-shape#curves + Use the curve prop to change the curve representation. Visit{' '} + + d3-shape#curves + for available values (the bundle curve does not work with area chart).

@@ -82,18 +80,18 @@ export const XYChartAreaExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./curved_area') + code: require('!!raw-loader!./curved_area'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) - } - ] + ), + }, + ], }; diff --git a/src-docs/src/views/xy_chart_area/curved_area.js b/src-docs/src/views/xy_chart_area/curved_area.js index 7cdc14676ef0..6e23cc1576b1 100644 --- a/src-docs/src/views/xy_chart_area/curved_area.js +++ b/src-docs/src/views/xy_chart_area/curved_area.js @@ -7,22 +7,10 @@ import { EuiSpacer, EuiXYChart, EuiArea, - EuiDefaultAxis } from '../../../../src/components'; +} from '../../../../src/components'; -const DATA_A = [ - { x: 0, y: 1 }, - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: -1 }, - { x: 5, y: 2 }, -]; -const DATA_B = [ - { x: 0, y: 3 }, - { x: 1, y: 2 }, - { x: 2, y: 4 }, - { x: 3, y: 1 }, - { x: 5, y: 3 }, -]; +const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }]; +const DATA_B = [{ x: 0, y: 3 }, { x: 1, y: 2 }, { x: 2, y: 4 }, { x: 3, y: 1 }, { x: 5, y: 3 }]; export default class extends Component { constructor(props) { @@ -56,38 +44,18 @@ export default class extends Component { return ( - - + + - - - - - + + + - ) + ); } } diff --git a/src-docs/src/views/xy_chart_area/stacked_area.js b/src-docs/src/views/xy_chart_area/stacked_area.js index 89d1ff17777a..e2f1a6137c85 100644 --- a/src-docs/src/views/xy_chart_area/stacked_area.js +++ b/src-docs/src/views/xy_chart_area/stacked_area.js @@ -1,31 +1,14 @@ import React from 'react'; -import { EuiXYChart, EuiArea, EuiDefaultAxis } from '../../../../src/components'; +import { EuiXYChart, EuiArea } from '../../../../src/components'; -const dataA = [ - { x: 0, y: 3, }, - { x: 1, y: 2, }, - { x: 2, y: 1, }, - { x: 3, y: 2, }, - { x: 4, y: 3, }, -]; +const dataA = [{ x: 0, y: 3 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 2 }, { x: 4, y: 3 }]; -const dataB = [ - { x: 0, y: 1 }, - { x: 1, y: 1 }, - { x: 2, y: 4 }, - { x: 3, y: 1 }, - { x: 4, y: 1 }, -]; +const dataB = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 4 }, { x: 3, y: 1 }, { x: 4, y: 1 }]; export default () => ( - + - ); diff --git a/src-docs/src/views/xy_chart_axis/simple_axis.js b/src-docs/src/views/xy_chart_axis/simple_axis.js index ab9613ce0375..5858b2f1d678 100644 --- a/src-docs/src/views/xy_chart_axis/simple_axis.js +++ b/src-docs/src/views/xy_chart_axis/simple_axis.js @@ -16,7 +16,7 @@ function xAxisTickFormatter(value) { } export default () => ( - +

- EuiYAxis and EuiXAxis can be used - instead of the EuiDefaultAxis to allow higher - axis customization. See the JS example to check the available properties. + EuiYAxis and EuiXAxis can be used instead of the{' '} + EuiDefaultAxis to allow higher axis customization. See the JS example + to check the available properties.

), @@ -21,18 +21,18 @@ export const XYChartAxisExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./simple_axis') + code: require('!!raw-loader!./simple_axis'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, - ] + ], }; diff --git a/src-docs/src/views/xy_chart_bar/bar_example.js b/src-docs/src/views/xy_chart_bar/bar_example.js index 57e03563c162..9116a9a8c37f 100644 --- a/src-docs/src/views/xy_chart_bar/bar_example.js +++ b/src-docs/src/views/xy_chart_bar/bar_example.js @@ -5,11 +5,7 @@ import HorizontalBarSeriesExample from './horizontal_bar_series'; import StackedVerticalBarSeriesExample from './stacked_vertical_bar_series'; import StackedHorizontalBarSeriesExample from './stacked_horizontal_bar_series'; -import { - EuiCode, - EuiVerticalBarSeries, - EuiHorizontalBarSeries, -} from '../../../../src/components'; +import { EuiCode, EuiVerticalBarSeries, EuiHorizontalBarSeries } from '../../../../src/components'; export const XYChartBarExample = { title: 'Bar chart', @@ -19,8 +15,8 @@ export const XYChartBarExample = { text: (

- Use EuiXYChart with EuiVerticalBarSeries for displaying - vertical bar charts. + Use EuiXYChart with EuiVerticalBarSeries for + displaying vertical bar charts.

Specify EuiXYChart prop xType="ordinal" @@ -36,35 +32,36 @@ export const XYChartBarExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./vertical_bar_series') + code: require('!!raw-loader!./vertical_bar_series'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (

- ) + ), }, { title: 'Stacked Vertical Bar Chart', text: (

- Use EuiXYChart with EuiVerticalBarSeries for displaying - vertical stacked bar charts. - Specify EuiXYChart props like the following: + Use EuiXYChart with EuiVerticalBarSeries for + displaying vertical stacked bar charts. Specify EuiXYChart props like + the following:

  • xType="ordinal" because we are creating a Bar Chart
  • - stackBy="y" to stack bars one above the other. - If stackBy is not specified, bars are clustered together depending on the X value + stackBy="y" to stack bars one above the other. If{' '} + stackBy is not specified, bars are clustered together depending on + the X value
@@ -73,32 +70,33 @@ export const XYChartBarExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_vertical_bar_series') + code: require('!!raw-loader!./stacked_vertical_bar_series'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Horizontal Bar Chart', text: (

- Use EuiXYChart with EuiHorizontalBarSeries for displaying - horizontal bar charts. + Use EuiXYChart with EuiHorizontalBarSeries for + displaying horizontal bar charts.

Specify EuiXYChart prop yType="ordinal" because we are creating a Bar Chart.

-

The X-Axis can be configured with linear,log, +

+ The X-Axis can be configured with linear,log, time, time-utc.

@@ -107,35 +105,36 @@ export const XYChartBarExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./horizontal_bar_series') + code: require('!!raw-loader!./horizontal_bar_series'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Stacked Horizontal Bar Chart', text: (

- Use EuiXYChart with EuiHorizontalBarSeries for displaying - horizontal stacked bar charts. - Specify EuiXYChart props like the following: + Use EuiXYChart with EuiHorizontalBarSeries for + displaying horizontal stacked bar charts. Specify EuiXYChart props + like the following:

  • yType="ordinal" because we are creating a Bar Chart
  • - stackBy="x" to stack bars one above the other. - If stackBy is not specified, bars are clustered together depending on the Y value + stackBy="x" to stack bars one above the other. If{' '} + stackBy is not specified, bars are clustered together depending on + the Y value
@@ -144,18 +143,18 @@ export const XYChartBarExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_horizontal_bar_series') + code: require('!!raw-loader!./stacked_horizontal_bar_series'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, - ] + ], }; diff --git a/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js b/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js index ef24556e7234..31256c30c0a9 100644 --- a/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js @@ -1,11 +1,6 @@ import React from 'react'; -import { - EuiXYChart, - EuiHorizontalBarSeries, - EuiDefaultAxis, - EuiXYChartUtils, -} from '../../../../src/components'; +import { EuiXYChart, EuiHorizontalBarSeries, EuiXYChartUtils } from '../../../../src/components'; const data = [ { x: 3, y: 'A' }, @@ -19,9 +14,8 @@ export default () => ( width={600} height={200} yType="ordinal" - crosshairOrientation={EuiXYChartUtils.ORIENTATION.HORIZONTAL} + orientation={EuiXYChartUtils.ORIENTATION.HORIZONTAL} > - ); diff --git a/src-docs/src/views/xy_chart_bar/rotate_bar_series.js b/src-docs/src/views/xy_chart_bar/rotate_bar_series.js index 2aa6416d59e8..5c20e9e8e1c7 100644 --- a/src-docs/src/views/xy_chart_bar/rotate_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/rotate_bar_series.js @@ -1,27 +1,6 @@ import React, { Component } from 'react'; -import { - EuiSwitch, - EuiXYChart, - EuiBarSeries, - EuiSpacer, - EuiDefaultAxis, -} from '../../../../src/components'; - -const horizontalData = [ - { x: 3, y: 'A' }, - { x: 1, y: 'B' }, - { x: 5, y: 'C' }, - { x: 2, y: 'D' }, - { x: 1, y: 'E' } -] -const verticalData = [ - { x: 'A', y: 3 }, - { x: 'B', y: 1 }, - { x: 'C', y: 5 }, - { x: 'D', y: 2 }, - { x: 'E', y: 1 }, -] +import { EuiSwitch, EuiXYChart, EuiSpacer } from '../../../../src/components'; export default class extends Component { constructor(props) { @@ -39,33 +18,28 @@ export default class extends Component { }; render() { - const { isHorizontal } = this.state + const { isHorizontal } = this.state; return (
- + - - + + /> */} -
- ) + ); } } diff --git a/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js b/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js index bd24a0fe3025..25e70c4fbb72 100644 --- a/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js @@ -4,7 +4,6 @@ import { EuiButton, EuiXYChart, EuiHorizontalBarSeries, - EuiDefaultAxis, EuiXYChartUtils, } from '../../../../src/components'; @@ -36,40 +35,26 @@ export default class extends Component { this.setState({ stacked: !this.state.stacked, }); - } + }; render() { - const { stacked } = this.state + const { stacked } = this.state; return (
- + Toggle stacked - - - + + -
- ) + ); } } diff --git a/src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js b/src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js index 9743d82c4fa9..7797fe2d8e6f 100644 --- a/src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js @@ -1,27 +1,10 @@ import React, { Component } from 'react'; -import { - EuiButton, - EuiXYChart, - EuiVerticalBarSeries, - EuiDefaultAxis, -} from '../../../../src/components'; +import { EuiButton, EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; -const dataA = [ - { x: 0, y: 5 }, - { x: 1, y: 4 }, - { x: 2, y: 3 }, - { x: 3, y: 2 }, - { x: 4, y: 1 }, -]; +const dataA = [{ x: 0, y: 5 }, { x: 1, y: 4 }, { x: 2, y: 3 }, { x: 3, y: 2 }, { x: 4, y: 1 }]; -const dataB = [ - { x: 0, y: 1 }, - { x: 1, y: 2 }, - { x: 2, y: 3 }, - { x: 3, y: 4 }, - { x: 4, y: 5 }, -]; +const dataB = [{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 4 }, { x: 4, y: 5 }]; export default class extends Component { constructor(props) { @@ -36,37 +19,20 @@ export default class extends Component { this.setState({ stacked: !this.state.stacked, }); - } + }; render() { - const { stacked } = this.state + const { stacked } = this.state; return (
- + Toggle stacked - - - - + + + -
- ) + ); } } diff --git a/src-docs/src/views/xy_chart_bar/vertical_bar_series.js b/src-docs/src/views/xy_chart_bar/vertical_bar_series.js index 6365ed608247..c45fe68c35d1 100644 --- a/src-docs/src/views/xy_chart_bar/vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/vertical_bar_series.js @@ -1,10 +1,6 @@ import React from 'react'; -import { - EuiXYChart, - EuiVerticalBarSeries, - EuiDefaultAxis, -} from '../../../../src/components'; +import { EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; const data = [ { x: 'A', y: 3 }, @@ -12,18 +8,10 @@ const data = [ { x: 'C', y: 5 }, { x: 'D', y: 2 }, { x: 'E', y: 1 }, -] +]; export default () => ( - - - + + ); diff --git a/src-docs/src/views/xy_chart_histogram/histogram_example.js b/src-docs/src/views/xy_chart_histogram/histogram_example.js index f50c52b47483..6c91717724b5 100644 --- a/src-docs/src/views/xy_chart_histogram/histogram_example.js +++ b/src-docs/src/views/xy_chart_histogram/histogram_example.js @@ -19,11 +19,10 @@ export const XYChartHistogramExample = { text: (

- Use EuiXYChart with EuiVerticalRectSeries for displaying - vertical histograms. - The Y-Axis needs can be configured with linear,log, - time, time-utc. - The same for X-Axis. + Use EuiXYChart with EuiVerticalRectSeries for + displaying vertical histograms. The Y-Axis needs can be configured with{' '} + linear,log, + time, time-utc. The same for X-Axis.

), @@ -31,28 +30,30 @@ export const XYChartHistogramExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./vertical_rect_series') + code: require('!!raw-loader!./vertical_rect_series'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Stacked Vertical Histogram', text: (

- Use EuiXYChart with EuiVerticalRectSeries for displaying - stacked vedrtical histograms. + Use EuiXYChart with EuiVerticalRectSeries for + displaying stacked vedrtical histograms. +

+

+ Specify stackBy="x" to stack bars together.

-

Specify stackBy="x" to stack bars together.

Note: Is not possible to "cluster" bars by the same X value.

), @@ -60,29 +61,28 @@ export const XYChartHistogramExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_vertical_rect_series') + code: require('!!raw-loader!./stacked_vertical_rect_series'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Horizontal Histogram', text: (

- Use EuiXYChart with EuiHorizontalRectSeries for displaying - horizontal histograms. - The Y-Axis needs can be configured as linear,log, - time, time-utc. - The same for X-Axis. + Use EuiXYChart with EuiHorizontalRectSeries for + displaying horizontal histograms. The Y-Axis needs can be configured as{' '} + linear,log, + time, time-utc. The same for X-Axis.

), @@ -90,28 +90,30 @@ export const XYChartHistogramExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./vertical_rect_series') + code: require('!!raw-loader!./vertical_rect_series'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Stacked Horizontal Histogram', text: (

- Use EuiXYChart with EuiHorizontalRectSeries to display - stacked horizontal histograms. + Use EuiXYChart with EuiHorizontalRectSeries to + display stacked horizontal histograms. +

+

+ Specify stackBy="x" to stack bars together.

-

Specify stackBy="x" to stack bars together.

Note: Is not possible to "cluster" bars by the same Y value.

), @@ -119,18 +121,18 @@ export const XYChartHistogramExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_horizontal_rect_series') + code: require('!!raw-loader!./stacked_horizontal_rect_series'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, - ] + ], }; diff --git a/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js b/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js index 2ee5f7afac8a..fdf369a76813 100644 --- a/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js @@ -1,11 +1,6 @@ import React from 'react'; -import { - EuiXYChart, - EuiHorizontalRectSeries, - EuiDefaultAxis, - EuiXYChartUtils, -} from '../../../../src/components'; +import { EuiXYChart, EuiHorizontalRectSeries, EuiXYChartUtils } from '../../../../src/components'; const data = [ { x: 3, y: 0, y0: 1 }, @@ -15,12 +10,7 @@ const data = [ { x: 1, y: 4, y0: 5 }, ]; export default () => ( - + - ); diff --git a/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js b/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js index 8f55bc4ae264..bfef45b59aac 100644 --- a/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js @@ -1,11 +1,6 @@ import React from 'react'; -import { - EuiXYChart, - EuiHorizontalRectSeries, - EuiDefaultAxis, - EuiXYChartUtils, -} from '../../../../src/components'; +import { EuiXYChart, EuiHorizontalRectSeries, EuiXYChartUtils } from '../../../../src/components'; const dataA = [ { y: 0, y0: 1, x: 1 }, @@ -28,20 +23,9 @@ export default () => ( width={600} height={200} stackBy="x" - crosshairOrientation={EuiXYChartUtils.ORIENTATION.HORIZONTAL} + orientation={EuiXYChartUtils.ORIENTATION.HORIZONTAL} > - - - + + ); diff --git a/src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js b/src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js index da9cd516a0a3..0a00b250dd62 100644 --- a/src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js @@ -1,10 +1,6 @@ import React from 'react'; -import { - EuiXYChart, - EuiVerticalRectSeries, - EuiDefaultAxis, -} from '../../../../src/components'; +import { EuiXYChart, EuiVerticalRectSeries } from '../../../../src/components'; const dataA = [ { x0: 0, x: 1, y: 1 }, @@ -23,19 +19,8 @@ const dataB = [ ]; export default () => ( - - - - + + + ); diff --git a/src-docs/src/views/xy_chart_histogram/vertical_rect_series.js b/src-docs/src/views/xy_chart_histogram/vertical_rect_series.js index 6c6772ce8fe6..96f04dbe95c3 100644 --- a/src-docs/src/views/xy_chart_histogram/vertical_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/vertical_rect_series.js @@ -1,10 +1,6 @@ import React from 'react'; -import { - EuiXYChart, - EuiVerticalRectSeries, - EuiDefaultAxis, -} from '../../../../src/components'; +import { EuiXYChart, EuiVerticalRectSeries } from '../../../../src/components'; const data = [ { x0: 0, x: 1, y: 1 }, @@ -12,17 +8,10 @@ const data = [ { x0: 2, x: 3, y: 2 }, { x0: 3, x: 4, y: 0.5 }, { x0: 4, x: 5, y: 5 }, -] +]; export default () => ( - - - + + ); diff --git a/src-docs/src/views/xy_chart_line/curved_line.js b/src-docs/src/views/xy_chart_line/curved_line.js index 44aa6f25bad2..b69602a9e7e6 100644 --- a/src-docs/src/views/xy_chart_line/curved_line.js +++ b/src-docs/src/views/xy_chart_line/curved_line.js @@ -7,15 +7,9 @@ import { EuiSpacer, EuiXYChart, EuiLine, - EuiDefaultAxis } from '../../../../src/components'; +} from '../../../../src/components'; -const DATA_A = [ - { x: 0, y: 1 }, - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: -1 }, - { x: 5, y: 2 }, -]; +const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }]; export default class extends Component { constructor(props) { @@ -50,32 +44,17 @@ export default class extends Component { return ( - - + + - - - - + + - ) + ); } } diff --git a/src-docs/src/views/xy_chart_line/custom_domain_line.js b/src-docs/src/views/xy_chart_line/custom_domain_line.js index bf5bbfc84694..4aaf42f80aad 100644 --- a/src-docs/src/views/xy_chart_line/custom_domain_line.js +++ b/src-docs/src/views/xy_chart_line/custom_domain_line.js @@ -1,30 +1,14 @@ import React from 'react'; -import { EuiXYChart, EuiLine, EuiDefaultAxis } from '../../../../src/components'; +import { EuiXYChart, EuiLine } from '../../../../src/components'; -const X_DOMAIN = [ -1, 6 ]; -const Y_DOMAIN = [ 0, 3 ]; +const X_DOMAIN = [-1, 6]; +const Y_DOMAIN = [0, 3]; -const DATA_A = [ - { x: 0, y: 1 }, - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: 1 }, - { x: 5, y: 2 }, -]; +const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]; export default () => ( - - - - + + ); diff --git a/src-docs/src/views/xy_chart_line/custom_style_line.js b/src-docs/src/views/xy_chart_line/custom_style_line.js index f6a97df3ae0a..ea8aeed8ec8e 100644 --- a/src-docs/src/views/xy_chart_line/custom_style_line.js +++ b/src-docs/src/views/xy_chart_line/custom_style_line.js @@ -7,20 +7,12 @@ import { EuiSpacer, EuiXYChart, EuiLine, - EuiDefaultAxis, EuiCheckboxGroup, } from '../../../../src/components'; import makeId from '../../../../src/components/form/form_row/make_id'; - -const DATA_A = [ - { x: 0, y: 1 }, - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: -1 }, - { x: 5, y: 2 }, -]; +const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }]; export default class extends Component { constructor(props) { @@ -44,12 +36,15 @@ export default class extends Component { showLineMarks: true, }, }; - }; + } onLinePropsChange = optionId => { - const newLinePropsIdToSelectedMap = ({ ...this.state.linePropsIdToSelectedMap, ...{ - [optionId]: !this.state.linePropsIdToSelectedMap[optionId], - } }); + const newLinePropsIdToSelectedMap = { + ...this.state.linePropsIdToSelectedMap, + ...{ + [optionId]: !this.state.linePropsIdToSelectedMap[optionId], + }, + }; this.setState({ linePropsIdToSelectedMap: newLinePropsIdToSelectedMap, @@ -69,13 +64,15 @@ export default class extends Component { }; render() { - const { linePropsIdToSelectedMap: { showLine, showLineMarks }, lineSize, lineMarkSize } = this.state + const { + linePropsIdToSelectedMap: { showLine, showLineMarks }, + lineSize, + lineMarkSize, + } = this.state; return ( - + - + - + - - + - - ) + ); } } diff --git a/src-docs/src/views/xy_chart_line/line.js b/src-docs/src/views/xy_chart_line/line.js index f0cbe67ac4f6..61a15ced087b 100644 --- a/src-docs/src/views/xy_chart_line/line.js +++ b/src-docs/src/views/xy_chart_line/line.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiLine, EuiDefaultAxis } from '../../../../src/components'; +import { EuiXYChart, EuiLine } from '../../../../src/components'; const DATA_A = [ { x: 0, y: 1 }, @@ -12,15 +12,7 @@ const DATA_A = [ ]; export default () => ( - - - - + + ); diff --git a/src-docs/src/views/xy_chart_line/line_example.js b/src-docs/src/views/xy_chart_line/line_example.js index e1ed683a57eb..349d05ef5733 100644 --- a/src-docs/src/views/xy_chart_line/line_example.js +++ b/src-docs/src/views/xy_chart_line/line_example.js @@ -5,11 +5,7 @@ import CustomDomainLineChartExample from './custom_domain_line'; import MultiLineChartExample from './multi_line'; import CurvedLineChartExample from './curved_line'; import CustomStyleLineChartExample from './custom_style_line'; -import { - EuiCode, - EuiLine, - EuiLink, -} from '../../../../src/components'; +import { EuiCode, EuiLine, EuiLink } from '../../../../src/components'; export const XYChartLineExample = { title: 'Line chart', @@ -19,8 +15,8 @@ export const XYChartLineExample = { text: (

- Use EuiLine to display line charts. The chart domain - will cover the whole extent and doesn't add any padding. + Use EuiLine to display line charts. The chart domain will cover the + whole extent and doesn't add any padding.

), @@ -28,27 +24,27 @@ export const XYChartLineExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./line') + code: require('!!raw-loader!./line'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Custom domain line chart', text: (

- Use EuiLine to display line charts. - Specify xDomain and/or yDomain - props to use custom domains. + Use EuiLine to display line charts. Specify{' '} + xDomain and/or yDomain + props to use custom domains.

), @@ -56,18 +52,18 @@ export const XYChartLineExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./custom_domain_line') + code: require('!!raw-loader!./custom_domain_line'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Multi Line chart', @@ -82,26 +78,28 @@ export const XYChartLineExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./multi_line') + code: require('!!raw-loader!./multi_line'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Curved Line chart', text: (

- Use the curve prop to change the curve representation. - Visit d3-shape#curves + Use the curve prop to change the curve representation. Visit{' '} + + d3-shape#curves + for all possible values.

@@ -110,18 +108,18 @@ export const XYChartLineExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./curved_line') + code: require('!!raw-loader!./curved_line'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, { title: 'Custom style Line chart', @@ -129,10 +127,18 @@ export const XYChartLineExample = {

Use the following props to change the style of the Line Chart

    -
  • lineSize to change the size/width of the line.
    • -
  • lineMarkSize to change the size/radius of marks.
    • -
  • showLine to show/hide the line.
    • -
  • showLineMarks to show/hide the line marks.
    • +
  • + lineSize to change the size/width of the line. +
    • +
  • + lineMarkSize to change the size/radius of marks. +
    • +
  • + showLine to show/hide the line. +
    • +
  • + showLineMarks to show/hide the line marks. +
), @@ -140,18 +146,18 @@ export const XYChartLineExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./custom_style_line') + code: require('!!raw-loader!./custom_style_line'), }, { type: GuideSectionTypes.HTML, - code: 'This component can only be used from React' - } + code: 'This component can only be used from React', + }, ], demo: (
- ) + ), }, - ] + ], }; diff --git a/src-docs/src/views/xy_chart_line/multi_line.js b/src-docs/src/views/xy_chart_line/multi_line.js index baf3dfe6cc4f..9aae57102a4e 100644 --- a/src-docs/src/views/xy_chart_line/multi_line.js +++ b/src-docs/src/views/xy_chart_line/multi_line.js @@ -1,36 +1,13 @@ import React from 'react'; -import { EuiXYChart, EuiLine, EuiDefaultAxis } from '../../../../src/components'; +import { EuiXYChart, EuiLine } from '../../../../src/components'; -const DATA_A = [ - { x: 0, y: 1 }, - { x: 1, y: 1 }, - { x: 2, y: 2 }, - { x: 3, y: -1 }, - { x: 5, y: 2 }, -]; -const DATA_B = [ - { x: 0, y: 3 }, - { x: 1, y: 4 }, - { x: 2, y: 1 }, - { x: 3, y: 2 }, - { x: 5, y: 5 }, -]; +const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }]; +const DATA_B = [{ x: 0, y: 3 }, { x: 1, y: 4 }, { x: 2, y: 1 }, { x: 3, y: 2 }, { x: 5, y: 5 }]; export default () => ( - - - - - + + + ); diff --git a/src/components/xy_chart/__snapshots__/area.test.js.snap b/src/components/xy_chart/__snapshots__/area.test.js.snap index d878fcd1b85a..f9d44d9fbd79 100644 --- a/src/components/xy_chart/__snapshots__/area.test.js.snap +++ b/src/components/xy_chart/__snapshots__/area.test.js.snap @@ -15,9 +15,10 @@ exports[`EuiArea all props are rendered 1`] = ` > - - - - -
- -
- -
- -`; - -exports[`EuiArea is rendered 1`] = ` - -
- -
- -
- - + - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + + + + + + + + + + + + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + + + + + + +
+ +
+ +
+ +`; + +exports[`EuiArea is rendered 1`] = ` + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + + + + - - + - - - - - - - + _animation={0.00008} + angleDomain={Array []} + animation={null} + attr="y" + attrAxis="x" + className="" + colorDomain={Array []} + colorRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + data={null} + fillDomain={Array []} + fillRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + getAngle={[Function]} + getAngle0={[Function]} + getColor={[Function]} + getColor0={[Function]} + getFill={[Function]} + getFill0={[Function]} + getOpacity={[Function]} + getOpacity0={[Function]} + getRadius={[Function]} + getRadius0={[Function]} + getSize={[Function]} + getSize0={[Function]} + getStroke={[Function]} + getStroke0={[Function]} + getX={[Function]} + getX0={[Function]} + getY={[Function]} + getY0={[Function]} + innerHeight={196} + innerWidth={596} + marginBottom={2} + marginLeft={2} + marginRight={2} + marginTop={2} + on0={false} + opacityDomain={Array []} + opacityType="literal" + orientation="left" + position="middle" + radiusDomain={Array []} + sizeDomain={Array []} + sizeRange={ + Array [ + 1, + 10, + ] + } + strokeDomain={Array []} + strokeRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + style={Object {}} + tickPadding={8} + tickSize={0} + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + + + + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 0 + + + + + + 5 + + + + + + 10 + + + + + + 15 + + + + + + 20 + + + +
@@ -80,6 +479,405 @@ exports[`EuiHorizontalBarSeries is rendered 1`] = ` /> + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 0 + + + + + + 5 + + + + + + 10 + + + + + + 15 + + + + + + 20 + + + +
@@ -142,6 +940,225 @@ exports[`EuiHorizontalBarSeries renders stacked bar chart 1`] = ` /> + + + + + + + + + + + + + + 0 + + + + + + 1 + + + + + + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + +
diff --git a/src/components/xy_chart/__snapshots__/horizontal_rect_series.test.js.snap b/src/components/xy_chart/__snapshots__/horizontal_rect_series.test.js.snap index ba079e6fbb4d..a52f81e2697d 100644 --- a/src/components/xy_chart/__snapshots__/horizontal_rect_series.test.js.snap +++ b/src/components/xy_chart/__snapshots__/horizontal_rect_series.test.js.snap @@ -35,6 +35,405 @@ exports[`EuiHorizontalRectSeries all props are rendered 1`] = ` /> + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + +
@@ -80,6 +479,405 @@ exports[`EuiHorizontalRectSeries is rendered 1`] = ` /> + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + @@ -142,6 +940,309 @@ exports[`EuiHorizontalRectSeries renders stacked bar chart 1`] = ` /> + + + + + + + + + + + + + + + + + 0 + + + + + + 1 + + + + + + + + + + + 3 + + + + + + 4 + + + + + + 5 + + + + + + 6 + + + + + + 7 + + + + + + 8 + + + + + + 9 + + + + + + 10 + + + + diff --git a/src/components/xy_chart/__snapshots__/line.test.js.snap b/src/components/xy_chart/__snapshots__/line.test.js.snap index 68cf86073b33..8212d4553088 100644 --- a/src/components/xy_chart/__snapshots__/line.test.js.snap +++ b/src/components/xy_chart/__snapshots__/line.test.js.snap @@ -15,9 +15,10 @@ exports[`EuiLine all props are rendered 1`] = ` > - - - - - - - - - - -`; - -exports[`EuiLine is rendered 1`] = ` - -
- -
- -
- - + - - + - - - - - - - - - + + + + + + + + + + + + + + + - - - + - - - - - - + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + + + - - - + + + + + + + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + + + + + + +
+ +
+ +
+ +`; + +exports[`EuiLine is rendered 1`] = ` + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + + + + + + - - + + + + - - - - - - - - + data={null} + fillDomain={Array []} + fillRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + getAngle={[Function]} + getAngle0={[Function]} + getColor={[Function]} + getColor0={[Function]} + getFill={[Function]} + getFill0={[Function]} + getOpacity={[Function]} + getOpacity0={[Function]} + getRadius={[Function]} + getRadius0={[Function]} + getSize={[Function]} + getSize0={[Function]} + getStroke={[Function]} + getStroke0={[Function]} + getX={[Function]} + getX0={[Function]} + getY={[Function]} + getY0={[Function]} + height={196} + innerHeight={196} + innerWidth={596} + left={0} + marginBottom={2} + marginLeft={2} + marginRight={2} + marginTop={2} + on0={false} + opacityDomain={Array []} + opacityType="literal" + orientation="left" + position="middle" + radiusDomain={Array []} + sizeDomain={Array []} + sizeRange={ + Array [ + 1, + 10, + ] + } + strokeDomain={Array []} + strokeRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + style={Object {}} + tickPadding={8} + tickSize={0} + tickTotal={5} + top={2} + width={2} + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -0.4 + + + + + + -0.2 + + + + + + 0.0 + + + + + + 0.2 + + + + + + 0.4 + + + + + + 0.6 + + + + + + 0.8 + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + +
@@ -76,6 +539,469 @@ exports[`EuiVerticalBarSeries is rendered 1`] = ` y="0" /> + + + + + + + + + + + + + + + + + -0.4 + + + + + + -0.2 + + + + + + 0.0 + + + + + + 0.2 + + + + + + 0.4 + + + + + + 0.6 + + + + + + 0.8 + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + +
@@ -134,6 +1060,253 @@ exports[`EuiVerticalBarSeries renders stacked bar chart 1`] = ` y="0" /> + + + + + + + + + + + + + + + 0 + + + + + + 1 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + diff --git a/src/components/xy_chart/__snapshots__/vertical_rect_series.test.js.snap b/src/components/xy_chart/__snapshots__/vertical_rect_series.test.js.snap index f01a36c35a93..9c866d415e28 100644 --- a/src/components/xy_chart/__snapshots__/vertical_rect_series.test.js.snap +++ b/src/components/xy_chart/__snapshots__/vertical_rect_series.test.js.snap @@ -35,6 +35,489 @@ exports[`EuiVerticalRectSeries all props are rendered 1`] = ` /> + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + @@ -80,6 +563,489 @@ exports[`EuiVerticalRectSeries is rendered 1`] = ` /> + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + @@ -142,6 +1108,253 @@ exports[`EuiVerticalRectSeries renders stacked vertical histogram 1`] = ` /> + + + + + + + + + + + + + + + 0 + + + + + + 1 + + + + + + + + + + + 0 + + + + + + 2 + + + + + + 4 + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + diff --git a/src/components/xy_chart/axis/default_axis.js b/src/components/xy_chart/axis/default_axis.js index 0fe69b93cc97..32658f164995 100644 --- a/src/components/xy_chart/axis/default_axis.js +++ b/src/components/xy_chart/axis/default_axis.js @@ -4,7 +4,7 @@ import { EuiXAxis } from './x_axis'; import { EuiYAxis } from './y_axis'; import { EuiHorizontalGrid } from './horizontal_grid'; import { EuiVerticalGrid } from './vertical_grid'; - +import { EuiXYChartUtils } from '../utils/chart_utils'; export class EuiDefaultAxis extends PureComponent { _getTickLabels(ticks) { if (!ticks) return; @@ -25,11 +25,14 @@ export class EuiDefaultAxis extends PureComponent { } render() { - const { showGridLines, isHorizontal, ...rest } = this.props; + const { showGridLines, orientation, ...rest } = this.props; + return ( - {showGridLines && !isHorizontal && } - {showGridLines && isHorizontal && } + {showGridLines && + orientation === EuiXYChartUtils.ORIENTATION.VERTICAL && } + {showGridLines && + orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL && } @@ -39,14 +42,14 @@ export class EuiDefaultAxis extends PureComponent { } EuiDefaultAxis.propTypes = { - isHorizontal: PropTypes.bool, + orientation: PropTypes.string, showGridLines: PropTypes.bool, yOn0: PropTypes.bool, xOn0: PropTypes.bool, }; EuiDefaultAxis.defaultProps = { - isHorizontal: false, + orientation: false, showGridLines: true, }; diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/chart.js index 5124ffd46ba0..1e33fbcba9d8 100644 --- a/src/components/xy_chart/chart.js +++ b/src/components/xy_chart/chart.js @@ -3,6 +3,7 @@ import { XYPlot, makeWidthFlexible, AbstractSeries } from 'react-vis'; import PropTypes from 'prop-types'; import Highlight from './highlight'; +import { EuiDefaultAxis } from './axis/default_axis'; import { EuiCrosshairX } from './crosshairs/crosshair_x'; import { EuiCrosshairY } from './crosshairs/crosshair_y'; import { VISUALIZATION_COLORS } from '../../services'; @@ -80,8 +81,9 @@ class XYChart extends PureComponent { yPadding, xPadding, animation, // eslint-disable-line no-unused-vars + showDefaultAxis, showCrosshair, - crosshairOrientation, + orientation, crosshairValue, onCrosshairUpdate, // eslint-disable-line no-unused-vars truncateLegends, // eslint-disable-line no-unused-vars @@ -94,7 +96,7 @@ class XYChart extends PureComponent { } this.colorIterator = 0; - const Crosshair = crosshairOrientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL + const Crosshair = orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL ? EuiCrosshairY : EuiCrosshairX return ( @@ -118,7 +120,9 @@ class XYChart extends PureComponent { > {React.Children.map(children, this._renderChildren)} - + { + showDefaultAxis && + } { showCrosshair && ( { - texts.map((piece) => { + texts.map((piece, i) => { return ( - {piece} + {piece} ) }) } From ec3862c40929d765b3c8bedf68f101c1c1dc8076 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 19 Jun 2018 18:26:37 +0200 Subject: [PATCH 23/68] Add two example of time series --- .../xy_chart_histogram/histogram_example.js | 57 +++++++++++++++++++ .../time_histogram_series.js | 50 ++++++++++++++++ .../views/xy_chart_histogram/time_series.js | 50 ++++++++++++++++ 3 files changed, 157 insertions(+) create mode 100644 src-docs/src/views/xy_chart_histogram/time_histogram_series.js create mode 100644 src-docs/src/views/xy_chart_histogram/time_series.js diff --git a/src-docs/src/views/xy_chart_histogram/histogram_example.js b/src-docs/src/views/xy_chart_histogram/histogram_example.js index 6c91717724b5..2f5458da0e49 100644 --- a/src-docs/src/views/xy_chart_histogram/histogram_example.js +++ b/src-docs/src/views/xy_chart_histogram/histogram_example.js @@ -4,6 +4,8 @@ import VerticalRectSeriesExample from './vertical_rect_series'; import StackedVerticalRectSeriesExample from './stacked_vertical_rect_series'; import HorizontalRectSeriesExample from './horizontal_rect_series'; import StackedHorizontalRectSeriesExample from './stacked_horizontal_rect_series'; +import TimeSeriesExample from './time_series'; +import TimeHistogramSeriesExample from './time_histogram_series'; import { EuiCode, @@ -134,5 +136,60 @@ export const XYChartHistogramExample = { ), }, + { + title: 'Time Series', + text: ( +
+

+ Use EuiXYChart with EuiVerticalBarSeries + with the + xType='time'. +

+
+ ), + props: { EuiVerticalRectSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./time_series'), + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React', + }, + ], + demo: ( +
+ +
+ ), + }, + { + title: 'Time Series Histogram version', + text: ( +
+

+ Use EuiXYChart with EuiVerticalRectSeries + with the xType='time' and a moderate number of elements. +

+
+ ), + props: { EuiVerticalRectSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./time_histogram_series'), + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React', + }, + ], + demo: ( +
+ +
+ ), + }, ], }; diff --git a/src-docs/src/views/xy_chart_histogram/time_histogram_series.js b/src-docs/src/views/xy_chart_histogram/time_histogram_series.js new file mode 100644 index 000000000000..c1f3b73959af --- /dev/null +++ b/src-docs/src/views/xy_chart_histogram/time_histogram_series.js @@ -0,0 +1,50 @@ +import React, { Component, Fragment } from 'react'; + +import { EuiButton, EuiSpacer, EuiXYChart, EuiVerticalRectSeries } from '../../../../src/components'; + +const timestamp = Date.now(); +const ONE_HOUR = 3600000; + +function randomizeData(size = 24, max = 15) { + return new Array(size) + .fill(0) + .map( (d,i) => ({ x0: ONE_HOUR * i, x: ONE_HOUR * (i + 1), y: Math.floor(Math.random() * max) })) + .map(el => ({ + x0: el.x0 + timestamp, + x: el.x + timestamp, + y: el.y })); +} +function buildData(series) { + const max = Math.ceil(Math.random() * 100000000); + return new Array(series) + .fill(0) + .map(() => randomizeData(100, max)) +} +export default class Example extends Component { + state = { + series: 4, + data: buildData(4) + } + handleRandomize = () => { + this.setState({ + data: buildData(this.state.series), + }); + } + render() { + const { data } = this.state; + return ( + + + Randomize data + + + + + { data.map((d, i) => ())} + + + ); + } +} diff --git a/src-docs/src/views/xy_chart_histogram/time_series.js b/src-docs/src/views/xy_chart_histogram/time_series.js new file mode 100644 index 000000000000..408780119853 --- /dev/null +++ b/src-docs/src/views/xy_chart_histogram/time_series.js @@ -0,0 +1,50 @@ +import React, { Component, Fragment } from 'react'; + +import { EuiButton, EuiSpacer, EuiXYChart, EuiLine, EuiVerticalBarSeries } from '../../../../src/components'; + +const timestamp = Date.now(); +const ONE_HOUR = 3600000; + +function randomizeData(size = 24, max = 15) { + return new Array(size) + .fill(0) + .map( (d,i) => ({ x0: ONE_HOUR * i, x: ONE_HOUR * (i + 1), y: Math.floor(Math.random() * max) })) + .map(el => ({ + x: el.x + timestamp, + y: el.y })); +} +function buildData(series) { + const max = Math.ceil(Math.random() * 100000); + return new Array(series) + .fill(0) + .map(() => randomizeData(10, max)) +} +export default class Example extends Component { + state = { + series: 4, + data: buildData(4) + } + handleRandomize = () => { + this.setState({ + data: buildData(this.state.series), + }); + } + render() { + const { data } = this.state; + return ( + + + Randomize data + + + + + { data.map((d, i) => ())} + { data.map((d, i) => ())} + + + ); + } +} From 05091960259a2d9c734cf5185fae6a666b14856f Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 20 Jun 2018 11:26:36 +0200 Subject: [PATCH 24/68] House-cleaning --- src-docs/src/routes.js | 24 +++++++------ .../{example-complex.js => complex.js} | 8 ++--- ...example-crosshair.js => crosshair_sync.js} | 0 .../xy_chart/{example-empty.js => empty.js} | 0 .../src/views/xy_chart/example-auto-axis.js | 13 ------- .../{example_dual_axis.js => multi_axis.js} | 8 ++--- .../src/views/xy_chart/xy_chart_example.js | 18 +++++----- src-docs/src/views/xy_chart_area/area.js | 4 +-- .../src/views/xy_chart_area/area_example.js | 12 +++---- .../src/views/xy_chart_area/curved_area.js | 6 ++-- .../src/views/xy_chart_area/stacked_area.js | 6 ++-- .../src/views/xy_chart_axis/simple_axis.js | 4 +-- .../views/xy_chart_histogram/time_series.js | 4 +-- .../src/views/xy_chart_line/curved_line.js | 4 +-- .../views/xy_chart_line/custom_domain_line.js | 4 +-- .../views/xy_chart_line/custom_style_line.js | 4 +-- src-docs/src/views/xy_chart_line/line.js | 4 +-- .../src/views/xy_chart_line/line_example.js | 18 +++++----- .../src/views/xy_chart_line/multi_line.js | 6 ++-- src/components/index.js | 4 +-- .../xy_chart/__snapshots__/title.test.js.snap | 11 ------ ...art.test.js.snap => xy_chart.test.js.snap} | 0 src/components/xy_chart/axis/index.js | 5 +++ src/components/xy_chart/crosshairs/index.js | 2 ++ src/components/xy_chart/index.js | 30 +++++++--------- .../__snapshots__/area_series.test.js.snap} | 4 +-- .../horizontal_bar_series.test.js.snap | 0 .../horizontal_rect_series.test.js.snap | 0 .../__snapshots__/line_series.test.js.snap} | 4 +-- .../vertical_bar_series.test.js.snap | 0 .../vertical_rect_series.test.js.snap | 0 .../{area.js => series/area_series.js} | 6 ++-- .../area_series.test.js} | 20 +++++------ .../xy_chart/{ => series}/as_series.js | 0 .../xy_chart/{ => series}/bar_series.js | 0 .../{ => series}/horizontal_bar_series.js | 0 .../horizontal_bar_series.test.js | 6 ++-- .../{ => series}/horizontal_rect_series.js | 0 .../horizontal_rect_series.test.js | 6 ++-- src/components/xy_chart/series/index.js | 7 ++++ .../{line.js => series/line_series.js} | 6 ++-- .../line_series.test.js} | 20 +++++------ .../{ => series}/vertical_bar_series.js | 0 .../{ => series}/vertical_bar_series.test.js | 8 ++--- .../{ => series}/vertical_rect_series.js | 0 .../{ => series}/vertical_rect_series.test.js | 8 ++--- src/components/xy_chart/title.js | 34 ------------------- src/components/xy_chart/title.test.js | 18 ---------- src/components/xy_chart/utils/index.js | 3 ++ .../xy_chart/{chart.js => xy_chart.js} | 0 .../{chart.test.js => xy_chart.test.js} | 2 +- 51 files changed, 145 insertions(+), 206 deletions(-) rename src-docs/src/views/xy_chart/{example-complex.js => complex.js} (94%) rename src-docs/src/views/xy_chart/{example-crosshair.js => crosshair_sync.js} (100%) rename src-docs/src/views/xy_chart/{example-empty.js => empty.js} (100%) delete mode 100644 src-docs/src/views/xy_chart/example-auto-axis.js rename src-docs/src/views/xy_chart/{example_dual_axis.js => multi_axis.js} (95%) delete mode 100644 src/components/xy_chart/__snapshots__/title.test.js.snap rename src/components/xy_chart/__snapshots__/{chart.test.js.snap => xy_chart.test.js.snap} (100%) create mode 100644 src/components/xy_chart/axis/index.js create mode 100644 src/components/xy_chart/crosshairs/index.js rename src/components/xy_chart/{__snapshots__/area.test.js.snap => series/__snapshots__/area_series.test.js.snap} (99%) rename src/components/xy_chart/{ => series}/__snapshots__/horizontal_bar_series.test.js.snap (100%) rename src/components/xy_chart/{ => series}/__snapshots__/horizontal_rect_series.test.js.snap (100%) rename src/components/xy_chart/{__snapshots__/line.test.js.snap => series/__snapshots__/line_series.test.js.snap} (99%) rename src/components/xy_chart/{ => series}/__snapshots__/vertical_bar_series.test.js.snap (100%) rename src/components/xy_chart/{ => series}/__snapshots__/vertical_rect_series.test.js.snap (100%) rename src/components/xy_chart/{area.js => series/area_series.js} (90%) rename src/components/xy_chart/{area.test.js => series/area_series.test.js} (83%) rename src/components/xy_chart/{ => series}/as_series.js (100%) rename src/components/xy_chart/{ => series}/bar_series.js (100%) rename src/components/xy_chart/{ => series}/horizontal_bar_series.js (100%) rename src/components/xy_chart/{ => series}/horizontal_bar_series.test.js (92%) rename src/components/xy_chart/{ => series}/horizontal_rect_series.js (100%) rename src/components/xy_chart/{ => series}/horizontal_rect_series.test.js (92%) create mode 100644 src/components/xy_chart/series/index.js rename src/components/xy_chart/{line.js => series/line_series.js} (95%) rename src/components/xy_chart/{line.test.js => series/line_series.test.js} (84%) rename src/components/xy_chart/{ => series}/vertical_bar_series.js (100%) rename src/components/xy_chart/{ => series}/vertical_bar_series.test.js (94%) rename src/components/xy_chart/{ => series}/vertical_rect_series.js (100%) rename src/components/xy_chart/{ => series}/vertical_rect_series.test.js (94%) delete mode 100644 src/components/xy_chart/title.js delete mode 100644 src/components/xy_chart/title.test.js create mode 100644 src/components/xy_chart/utils/index.js rename src/components/xy_chart/{chart.js => xy_chart.js} (100%) rename src/components/xy_chart/{chart.test.js => xy_chart.test.js} (95%) diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index ccf312924607..986c99fcf3fc 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -338,16 +338,6 @@ const navigation = [{ ToastExample, ToolTipExample, ].map(example => createExample(example)), -}, { - name: 'Charts', - items: [ - XYChartExample, - XYChartAxisExample, - XYChartLineExample, - XYChartAreaExample, - XYChartBarExample, - XYChartHistogramExample, - ].map(example => createExample(example)), }, { name: 'Forms', items: [ @@ -362,7 +352,19 @@ const navigation = [{ FilterGroupExample, SearchBarExample, ].map(example => createExample(example)), -}, { +}, +{ + name: 'XY Charts', + items: [ + XYChartExample, + XYChartAxisExample, + XYChartLineExample, + XYChartAreaExample, + XYChartBarExample, + XYChartHistogramExample, + ].map(example => createExample(example)), +}, +{ name: 'Utilities', items: [ AccessibilityExample, diff --git a/src-docs/src/views/xy_chart/example-complex.js b/src-docs/src/views/xy_chart/complex.js similarity index 94% rename from src-docs/src/views/xy_chart/example-complex.js rename to src-docs/src/views/xy_chart/complex.js index a2cc88f04ca0..508a02bcf6a5 100644 --- a/src-docs/src/views/xy_chart/example-complex.js +++ b/src-docs/src/views/xy_chart/complex.js @@ -3,8 +3,8 @@ import React from 'react'; import { EuiXYChart, EuiVerticalBarSeries, - EuiArea, - EuiLine, + EuiAreaSeries, + EuiLineSeries, } from '../../../../src/components'; export default () => { @@ -29,7 +29,7 @@ export default () => { width={600} height={200} > - { alert('clicked!'); @@ -54,7 +54,7 @@ export default () => { data={data} /> ))} - ( - - - -); diff --git a/src-docs/src/views/xy_chart/example_dual_axis.js b/src-docs/src/views/xy_chart/multi_axis.js similarity index 95% rename from src-docs/src/views/xy_chart/example_dual_axis.js rename to src-docs/src/views/xy_chart/multi_axis.js index f9191e2e5102..e8bdb688cd8b 100644 --- a/src-docs/src/views/xy_chart/example_dual_axis.js +++ b/src-docs/src/views/xy_chart/multi_axis.js @@ -2,7 +2,7 @@ import React from 'react'; import { EuiXYChart, - EuiLine, + EuiLineSeries, EuiXAxis, EuiYAxis, EuiXYChartAxisUtils, @@ -27,17 +27,17 @@ export default () => ( xType="ordinal" showDefaultAxis={false} > - - -

Use EuiXYChart to display line, bar, area, and stream charts. Note - that charts are composed with EuiLine, EuiArea,{' '} + that charts are composed with EuiLineSeries, EuiAreaSeries,{' '} EuiBar, and EuiStream being child components.

@@ -23,7 +23,7 @@ export const XYChartExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./example-complex'), + code: require('!!raw-loader!./complex'), }, { type: GuideSectionTypes.HTML, @@ -46,7 +46,7 @@ export const XYChartExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./example-empty'), + code: require('!!raw-loader!./empty'), }, { type: GuideSectionTypes.HTML, @@ -71,7 +71,7 @@ export const XYChartExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./example-empty'), + code: require('!!raw-loader!./crosshair_sync'), }, { type: GuideSectionTypes.HTML, @@ -94,7 +94,7 @@ export const XYChartExample = { source: [ { type: GuideSectionTypes.JS, - code: require('!!raw-loader!./example_dual_axis'), + code: require('!!raw-loader!./multi_axis'), }, { type: GuideSectionTypes.HTML, diff --git a/src-docs/src/views/xy_chart_area/area.js b/src-docs/src/views/xy_chart_area/area.js index de5b750bb838..2296360091d5 100644 --- a/src-docs/src/views/xy_chart_area/area.js +++ b/src-docs/src/views/xy_chart_area/area.js @@ -1,11 +1,11 @@ import React from 'react'; -import { EuiXYChart, EuiArea } from '../../../../src/components'; +import { EuiXYChart, EuiAreaSeries } from '../../../../src/components'; const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 5, y: 2 }]; export default () => ( - + ); diff --git a/src-docs/src/views/xy_chart_area/area_example.js b/src-docs/src/views/xy_chart_area/area_example.js index 1bde2257b721..9239d0204a2b 100644 --- a/src-docs/src/views/xy_chart_area/area_example.js +++ b/src-docs/src/views/xy_chart_area/area_example.js @@ -4,7 +4,7 @@ import AreaSeriesExample from './area'; import StackedAreaSeriesExample from './stacked_area'; import CurvedAreaExample from './curved_area'; -import { EuiCode, EuiArea, EuiLink } from '../../../../src/components'; +import { EuiCode, EuiAreaSeries, EuiLink } from '../../../../src/components'; export const XYChartAreaExample = { title: 'Area chart', @@ -14,11 +14,11 @@ export const XYChartAreaExample = { text: (

- Use EuiArea to display area charts. + Use EuiAreaSeries to display area charts.

), - props: { EuiArea }, + props: { EuiAreaSeries }, source: [ { type: GuideSectionTypes.JS, @@ -40,13 +40,13 @@ export const XYChartAreaExample = { text: (

- Use multiple EuiArea to display stacked area charts specifying the{' '} + Use multiple EuiAreaSeries to display stacked area charts specifying the{' '} stackBy:y prop on the EuiXYChart to enable stacking.

), - props: { EuiArea }, + props: { EuiAreaSeries }, source: [ { type: GuideSectionTypes.JS, @@ -76,7 +76,7 @@ export const XYChartAreaExample = {

), - props: { EuiArea }, + props: { EuiAreaSeries }, source: [ { type: GuideSectionTypes.JS, diff --git a/src-docs/src/views/xy_chart_area/curved_area.js b/src-docs/src/views/xy_chart_area/curved_area.js index 6e23cc1576b1..dd6d439dd2d6 100644 --- a/src-docs/src/views/xy_chart_area/curved_area.js +++ b/src-docs/src/views/xy_chart_area/curved_area.js @@ -6,7 +6,7 @@ import { EuiSelect, EuiSpacer, EuiXYChart, - EuiArea, + EuiAreaSeries, } from '../../../../src/components'; const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }]; @@ -52,8 +52,8 @@ export default class extends Component { - - + + ); diff --git a/src-docs/src/views/xy_chart_area/stacked_area.js b/src-docs/src/views/xy_chart_area/stacked_area.js index e2f1a6137c85..51286d6ca676 100644 --- a/src-docs/src/views/xy_chart_area/stacked_area.js +++ b/src-docs/src/views/xy_chart_area/stacked_area.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiArea } from '../../../../src/components'; +import { EuiXYChart, EuiAreaSeries } from '../../../../src/components'; const dataA = [{ x: 0, y: 3 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 2 }, { x: 4, y: 3 }]; @@ -8,7 +8,7 @@ const dataB = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 4 }, { x: 3, y: 1 }, { export default () => ( - - + + ); diff --git a/src-docs/src/views/xy_chart_axis/simple_axis.js b/src-docs/src/views/xy_chart_axis/simple_axis.js index 5858b2f1d678..13d0bb90d3c8 100644 --- a/src-docs/src/views/xy_chart_axis/simple_axis.js +++ b/src-docs/src/views/xy_chart_axis/simple_axis.js @@ -1,7 +1,7 @@ import React from 'react'; import { - EuiLine, + EuiLineSeries, EuiXAxis, EuiYAxis, EuiXYChart, @@ -17,7 +17,7 @@ function xAxisTickFormatter(value) { export default () => ( - + { data.map((d, i) => ())} - { data.map((d, i) => ())} + { data.map((d, i) => ())} ); diff --git a/src-docs/src/views/xy_chart_line/curved_line.js b/src-docs/src/views/xy_chart_line/curved_line.js index b69602a9e7e6..07dc833a1107 100644 --- a/src-docs/src/views/xy_chart_line/curved_line.js +++ b/src-docs/src/views/xy_chart_line/curved_line.js @@ -6,7 +6,7 @@ import { EuiSelect, EuiSpacer, EuiXYChart, - EuiLine, + EuiLineSeries, } from '../../../../src/components'; const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }]; @@ -52,7 +52,7 @@ export default class extends Component { - + ); diff --git a/src-docs/src/views/xy_chart_line/custom_domain_line.js b/src-docs/src/views/xy_chart_line/custom_domain_line.js index 4aaf42f80aad..157203bd138e 100644 --- a/src-docs/src/views/xy_chart_line/custom_domain_line.js +++ b/src-docs/src/views/xy_chart_line/custom_domain_line.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiLine } from '../../../../src/components'; +import { EuiXYChart, EuiLineSeries } from '../../../../src/components'; const X_DOMAIN = [-1, 6]; const Y_DOMAIN = [0, 3]; @@ -9,6 +9,6 @@ const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, export default () => ( - + ); diff --git a/src-docs/src/views/xy_chart_line/custom_style_line.js b/src-docs/src/views/xy_chart_line/custom_style_line.js index ea8aeed8ec8e..f2cb866649f9 100644 --- a/src-docs/src/views/xy_chart_line/custom_style_line.js +++ b/src-docs/src/views/xy_chart_line/custom_style_line.js @@ -6,7 +6,7 @@ import { EuiRange, EuiSpacer, EuiXYChart, - EuiLine, + EuiLineSeries, EuiCheckboxGroup, } from '../../../../src/components'; @@ -100,7 +100,7 @@ export default class extends Component { - ( - + ); diff --git a/src-docs/src/views/xy_chart_line/line_example.js b/src-docs/src/views/xy_chart_line/line_example.js index 349d05ef5733..2eb461624412 100644 --- a/src-docs/src/views/xy_chart_line/line_example.js +++ b/src-docs/src/views/xy_chart_line/line_example.js @@ -5,7 +5,7 @@ import CustomDomainLineChartExample from './custom_domain_line'; import MultiLineChartExample from './multi_line'; import CurvedLineChartExample from './curved_line'; import CustomStyleLineChartExample from './custom_style_line'; -import { EuiCode, EuiLine, EuiLink } from '../../../../src/components'; +import { EuiCode, EuiLineSeries, EuiLink } from '../../../../src/components'; export const XYChartLineExample = { title: 'Line chart', @@ -15,12 +15,12 @@ export const XYChartLineExample = { text: (

- Use EuiLine to display line charts. The chart domain will cover the + Use EuiLineSeries to display line charts. The chart domain will cover the whole extent and doesn't add any padding.

), - props: { EuiLine }, + props: { EuiLineSeries }, source: [ { type: GuideSectionTypes.JS, @@ -42,13 +42,13 @@ export const XYChartLineExample = { text: (

- Use EuiLine to display line charts. Specify{' '} + Use EuiLineSeries to display line charts. Specify{' '} xDomain and/or yDomain props to use custom domains.

), - props: { EuiLine }, + props: { EuiLineSeries }, source: [ { type: GuideSectionTypes.JS, @@ -70,11 +70,11 @@ export const XYChartLineExample = { text: (

- Use multiple EuiLine to display a milti-line chart. + Use multiple EuiLineSeries to display a milti-line chart.

), - props: { EuiLine }, + props: { EuiLineSeries }, source: [ { type: GuideSectionTypes.JS, @@ -104,7 +104,7 @@ export const XYChartLineExample = {

), - props: { EuiLine }, + props: { EuiLineSeries }, source: [ { type: GuideSectionTypes.JS, @@ -142,7 +142,7 @@ export const XYChartLineExample = { ), - props: { EuiLine }, + props: { EuiLineSeries }, source: [ { type: GuideSectionTypes.JS, diff --git a/src-docs/src/views/xy_chart_line/multi_line.js b/src-docs/src/views/xy_chart_line/multi_line.js index 9aae57102a4e..ba918494afb5 100644 --- a/src-docs/src/views/xy_chart_line/multi_line.js +++ b/src-docs/src/views/xy_chart_line/multi_line.js @@ -1,13 +1,13 @@ import React from 'react'; -import { EuiXYChart, EuiLine } from '../../../../src/components'; +import { EuiXYChart, EuiLineSeries } from '../../../../src/components'; const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }]; const DATA_B = [{ x: 0, y: 3 }, { x: 1, y: 4 }, { x: 2, y: 1 }, { x: 3, y: 2 }, { x: 5, y: 5 }]; export default () => ( - - + + ); diff --git a/src/components/index.js b/src/components/index.js index 7c8cd274f543..cb5d86f1dbea 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -307,8 +307,8 @@ export { EuiXYChartUtils, EuiXYChartAxisUtils, EuiXYChartTextUtils, - EuiLine, - EuiArea, + EuiLineSeries, + EuiAreaSeries, EuiBarSeries, EuiVerticalBarSeries, EuiHorizontalBarSeries, diff --git a/src/components/xy_chart/__snapshots__/title.test.js.snap b/src/components/xy_chart/__snapshots__/title.test.js.snap deleted file mode 100644 index 5d502f32bce9..000000000000 --- a/src/components/xy_chart/__snapshots__/title.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiTitle is rendered 1`] = ` -

- Title -

-`; diff --git a/src/components/xy_chart/__snapshots__/chart.test.js.snap b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap similarity index 100% rename from src/components/xy_chart/__snapshots__/chart.test.js.snap rename to src/components/xy_chart/__snapshots__/xy_chart.test.js.snap diff --git a/src/components/xy_chart/axis/index.js b/src/components/xy_chart/axis/index.js new file mode 100644 index 000000000000..ea6034fb57d7 --- /dev/null +++ b/src/components/xy_chart/axis/index.js @@ -0,0 +1,5 @@ +export { EuiDefaultAxis } from './default_axis'; +export { EuiXAxis } from './x_axis'; +export { EuiYAxis } from './y_axis'; +export { EuiHorizontalGrid } from './horizontal_grid'; +export { EuiVerticalGrid } from './vertical_grid'; diff --git a/src/components/xy_chart/crosshairs/index.js b/src/components/xy_chart/crosshairs/index.js new file mode 100644 index 000000000000..7eb5f347a4c1 --- /dev/null +++ b/src/components/xy_chart/crosshairs/index.js @@ -0,0 +1,2 @@ +export { EuiCrosshairX } from './crosshair_x'; +export { EuiCrosshairY } from './crosshair_y'; diff --git a/src/components/xy_chart/index.js b/src/components/xy_chart/index.js index 6cdafcff6531..2a105961fc2a 100644 --- a/src/components/xy_chart/index.js +++ b/src/components/xy_chart/index.js @@ -1,17 +1,13 @@ -export { asSeries } from './as_series'; -export { EuiXYChart } from './chart'; -export { EuiLine } from './line'; -export { EuiBarSeries } from './bar_series'; -export { EuiVerticalBarSeries } from './vertical_bar_series'; -export { EuiHorizontalBarSeries } from './horizontal_bar_series'; -export { EuiVerticalRectSeries } from './vertical_rect_series'; -export { EuiHorizontalRectSeries } from './horizontal_rect_series'; -export { EuiDefaultAxis } from './axis/default_axis'; -export { EuiXAxis } from './axis/x_axis'; -export { EuiYAxis } from './axis/y_axis'; -export { EuiArea } from './area'; -export { EuiXYChartUtils } from './utils/chart_utils'; -export { EuiXYChartAxisUtils } from './utils/axis_utils'; -export { EuiXYChartTextUtils } from './utils/text_utils'; -export { EuiCrosshairX } from './crosshairs/crosshair_x'; -export { EuiCrosshairY } from './crosshairs/crosshair_y'; +export { EuiXYChart } from './xy_chart'; + +// XY chart data series +export * from './series'; + +// XY chart axis components +export * from './axis'; + +// XY chart utility classes +export * from './utils'; + +// XY chart crosshairs +export * from './crosshairs'; diff --git a/src/components/xy_chart/__snapshots__/area.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap similarity index 99% rename from src/components/xy_chart/__snapshots__/area.test.js.snap rename to src/components/xy_chart/series/__snapshots__/area_series.test.js.snap index f9d44d9fbd79..bb8af741c099 100644 --- a/src/components/xy_chart/__snapshots__/area.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiArea all props are rendered 1`] = ` +exports[`EuiAreaSeries all props are rendered 1`] = ` `; -exports[`EuiArea is rendered 1`] = ` +exports[`EuiAreaSeries is rendered 1`] = ` `; -exports[`EuiLine is rendered 1`] = ` +exports[`EuiLineSeries is rendered 1`] = ` */ @@ -43,6 +43,6 @@ EuiArea.propTypes = { onMarkClick: PropTypes.func } -EuiArea.defaultProps = { +EuiAreaSeries.defaultProps = { curve: 'linear', }; diff --git a/src/components/xy_chart/area.test.js b/src/components/xy_chart/series/area_series.test.js similarity index 83% rename from src/components/xy_chart/area.test.js rename to src/components/xy_chart/series/area_series.test.js index fb545b7d3faf..18d93992bed5 100644 --- a/src/components/xy_chart/area.test.js +++ b/src/components/xy_chart/series/area_series.test.js @@ -1,20 +1,20 @@ import React from 'react'; import { mount, render } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../test/patch_random'; -import { requiredProps } from '../../test/required_props'; +import { patchRandom, unpatchRandom } from '../../../test/patch_random'; +import { requiredProps } from '../../../test/required_props'; -import { EuiXYChart } from './chart'; -import { EuiArea } from './area'; -import { benchmarkFunction } from '../../test/time_execution'; +import { EuiXYChart } from '../xy_chart'; +import { EuiAreaSeries } from './area_series'; +import { benchmarkFunction } from '../../../test/time_execution'; beforeEach(patchRandom); afterEach(unpatchRandom); -describe('EuiArea', () => { +describe('EuiAreaSeries', () => { test('is rendered', () => { const component = mount( - @@ -27,7 +27,7 @@ describe('EuiArea', () => { test('all props are rendered', () => { const component = mount( - { function renderChart() { render( - + ) } @@ -99,7 +99,7 @@ describe('EuiArea', () => { render( {linesData.map((data, index) => ( - + ))} ) diff --git a/src/components/xy_chart/as_series.js b/src/components/xy_chart/series/as_series.js similarity index 100% rename from src/components/xy_chart/as_series.js rename to src/components/xy_chart/series/as_series.js diff --git a/src/components/xy_chart/bar_series.js b/src/components/xy_chart/series/bar_series.js similarity index 100% rename from src/components/xy_chart/bar_series.js rename to src/components/xy_chart/series/bar_series.js diff --git a/src/components/xy_chart/horizontal_bar_series.js b/src/components/xy_chart/series/horizontal_bar_series.js similarity index 100% rename from src/components/xy_chart/horizontal_bar_series.js rename to src/components/xy_chart/series/horizontal_bar_series.js diff --git a/src/components/xy_chart/horizontal_bar_series.test.js b/src/components/xy_chart/series/horizontal_bar_series.test.js similarity index 92% rename from src/components/xy_chart/horizontal_bar_series.test.js rename to src/components/xy_chart/series/horizontal_bar_series.test.js index 84286eff7621..1869b5ea1c5e 100644 --- a/src/components/xy_chart/horizontal_bar_series.test.js +++ b/src/components/xy_chart/series/horizontal_bar_series.test.js @@ -1,9 +1,9 @@ import React from 'react'; import { render, mount } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../test/patch_random'; -import { requiredProps } from '../../test/required_props'; +import { patchRandom, unpatchRandom } from '../../../test/patch_random'; +import { requiredProps } from '../../../test/required_props'; -import { EuiXYChart } from './chart'; +import { EuiXYChart } from '../xy_chart'; import { EuiHorizontalBarSeries } from './horizontal_bar_series'; beforeEach(patchRandom); diff --git a/src/components/xy_chart/horizontal_rect_series.js b/src/components/xy_chart/series/horizontal_rect_series.js similarity index 100% rename from src/components/xy_chart/horizontal_rect_series.js rename to src/components/xy_chart/series/horizontal_rect_series.js diff --git a/src/components/xy_chart/horizontal_rect_series.test.js b/src/components/xy_chart/series/horizontal_rect_series.test.js similarity index 92% rename from src/components/xy_chart/horizontal_rect_series.test.js rename to src/components/xy_chart/series/horizontal_rect_series.test.js index 486f839ebea3..1538d5aefb5c 100644 --- a/src/components/xy_chart/horizontal_rect_series.test.js +++ b/src/components/xy_chart/series/horizontal_rect_series.test.js @@ -1,9 +1,9 @@ import React from 'react'; import { render, mount } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../test/patch_random'; -import { requiredProps } from '../../test/required_props'; +import { patchRandom, unpatchRandom } from '../../../test/patch_random'; +import { requiredProps } from '../../../test/required_props'; -import { EuiXYChart } from './chart'; +import { EuiXYChart } from '../xy_chart'; import { EuiHorizontalRectSeries } from './horizontal_rect_series'; beforeEach(patchRandom); diff --git a/src/components/xy_chart/series/index.js b/src/components/xy_chart/series/index.js new file mode 100644 index 000000000000..410dd7fae86c --- /dev/null +++ b/src/components/xy_chart/series/index.js @@ -0,0 +1,7 @@ +export { EuiLineSeries } from './line_series'; +export { EuiAreaSeries } from './area_series'; +export { EuiBarSeries } from './bar_series'; +export { EuiVerticalBarSeries } from './vertical_bar_series'; +export { EuiHorizontalBarSeries } from './horizontal_bar_series'; +export { EuiVerticalRectSeries } from './vertical_rect_series'; +export { EuiHorizontalRectSeries } from './horizontal_rect_series'; diff --git a/src/components/xy_chart/line.js b/src/components/xy_chart/series/line_series.js similarity index 95% rename from src/components/xy_chart/line.js rename to src/components/xy_chart/series/line_series.js index af4ff49e2dfb..5fab14dceeec 100644 --- a/src/components/xy_chart/line.js +++ b/src/components/xy_chart/series/line_series.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { LineSeries, MarkSeries, AbstractSeries } from 'react-vis'; -export class EuiLine extends AbstractSeries { +export class EuiLineSeries extends AbstractSeries { render() { const { data, @@ -68,7 +68,7 @@ export class EuiLine extends AbstractSeries { } } -EuiLine.propTypes = { +EuiLineSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, /** Array<{x: string|number, y: string|number}> */ @@ -94,7 +94,7 @@ EuiLine.propTypes = { onMarkClick: PropTypes.func }; -EuiLine.defaultProps = { +EuiLineSeries.defaultProps = { curve: 'linear', showLine: true, showLineMarks: true, diff --git a/src/components/xy_chart/line.test.js b/src/components/xy_chart/series/line_series.test.js similarity index 84% rename from src/components/xy_chart/line.test.js rename to src/components/xy_chart/series/line_series.test.js index a7536592f494..9eb7863ef0aa 100644 --- a/src/components/xy_chart/line.test.js +++ b/src/components/xy_chart/series/line_series.test.js @@ -1,20 +1,20 @@ import React from 'react'; import { mount, render } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../test/patch_random'; -import { benchmarkFunction } from '../../test/time_execution'; -import { requiredProps } from '../../test/required_props'; +import { patchRandom, unpatchRandom } from '../../../test/patch_random'; +import { benchmarkFunction } from '../../../test/time_execution'; +import { requiredProps } from '../../../test/required_props'; -import { EuiXYChart } from './chart'; -import { EuiLine } from './line'; +import { EuiXYChart } from '../xy_chart'; +import { EuiLineSeries } from './line_series'; beforeEach(patchRandom); afterEach(unpatchRandom); -describe('EuiLine', () => { +describe('EuiLineSeries', () => { test('is rendered', () => { const component = mount( - @@ -27,7 +27,7 @@ describe('EuiLine', () => { test('all props are rendered', () => { const component = mount( - { function renderChart() { render( - + ) } @@ -100,7 +100,7 @@ describe('EuiLine', () => { render( {linesData.map((data, index) => ( - + ))} ) diff --git a/src/components/xy_chart/vertical_bar_series.js b/src/components/xy_chart/series/vertical_bar_series.js similarity index 100% rename from src/components/xy_chart/vertical_bar_series.js rename to src/components/xy_chart/series/vertical_bar_series.js diff --git a/src/components/xy_chart/vertical_bar_series.test.js b/src/components/xy_chart/series/vertical_bar_series.test.js similarity index 94% rename from src/components/xy_chart/vertical_bar_series.test.js rename to src/components/xy_chart/series/vertical_bar_series.test.js index 181ccda6d4a1..4ddbac73e191 100644 --- a/src/components/xy_chart/vertical_bar_series.test.js +++ b/src/components/xy_chart/series/vertical_bar_series.test.js @@ -1,11 +1,11 @@ import React from 'react'; import { render, mount } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../test/patch_random'; -import { requiredProps } from '../../test/required_props'; +import { patchRandom, unpatchRandom } from '../../../test/patch_random'; +import { requiredProps } from '../../../test/required_props'; -import { EuiXYChart } from './chart'; +import { EuiXYChart } from '../xy_chart'; import { EuiVerticalBarSeries } from './vertical_bar_series'; -import { benchmarkFunction } from '../../test/time_execution'; +import { benchmarkFunction } from '../../../test/time_execution'; beforeEach(patchRandom); afterEach(unpatchRandom); diff --git a/src/components/xy_chart/vertical_rect_series.js b/src/components/xy_chart/series/vertical_rect_series.js similarity index 100% rename from src/components/xy_chart/vertical_rect_series.js rename to src/components/xy_chart/series/vertical_rect_series.js diff --git a/src/components/xy_chart/vertical_rect_series.test.js b/src/components/xy_chart/series/vertical_rect_series.test.js similarity index 94% rename from src/components/xy_chart/vertical_rect_series.test.js rename to src/components/xy_chart/series/vertical_rect_series.test.js index 9ad2b887cbd8..c44212074a52 100644 --- a/src/components/xy_chart/vertical_rect_series.test.js +++ b/src/components/xy_chart/series/vertical_rect_series.test.js @@ -1,11 +1,11 @@ import React from 'react'; import { render, mount } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../test/patch_random'; -import { requiredProps } from '../../test/required_props'; +import { patchRandom, unpatchRandom } from '../../../test/patch_random'; +import { requiredProps } from '../../../test/required_props'; -import { EuiXYChart } from './chart'; +import { EuiXYChart } from '../xy_chart'; import { EuiVerticalRectSeries } from './vertical_rect_series'; -import { benchmarkFunction } from '../../test/time_execution'; +import { benchmarkFunction } from '../../../test/time_execution'; beforeEach(patchRandom); afterEach(unpatchRandom); diff --git a/src/components/xy_chart/title.js b/src/components/xy_chart/title.js deleted file mode 100644 index e2278a89ce6e..000000000000 --- a/src/components/xy_chart/title.js +++ /dev/null @@ -1,34 +0,0 @@ -import { - cloneElement, -} from 'react'; -import classNames from 'classnames'; -import PropTypes from 'prop-types'; - -const titleSizeToClassNameMap = { - s: 'euiTitle--small', - l: 'euiTitle--large', -}; - -export const TITLE_SIZES = Object.keys(titleSizeToClassNameMap); - -export const EuiTitle = ({ size, children, className, ...rest }) => { - - const classes = classNames( - 'euiTitle', - titleSizeToClassNameMap[size], - className - ); - - const props = { - className: classes, - ...rest - }; - - return cloneElement(children, props); -}; - -EuiTitle.propTypes = { - children: PropTypes.element.isRequired, - className: PropTypes.string, - size: PropTypes.oneOf(TITLE_SIZES), -}; diff --git a/src/components/xy_chart/title.test.js b/src/components/xy_chart/title.test.js deleted file mode 100644 index 16b907516f2d..000000000000 --- a/src/components/xy_chart/title.test.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../test/required_props'; - -import { EuiTitle } from './title'; - -describe('EuiTitle', () => { - test('is rendered', () => { - const component = render( - -

Title

- - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/src/components/xy_chart/utils/index.js b/src/components/xy_chart/utils/index.js new file mode 100644 index 000000000000..43f4f75eb290 --- /dev/null +++ b/src/components/xy_chart/utils/index.js @@ -0,0 +1,3 @@ +export { EuiXYChartUtils } from './chart_utils'; +export { EuiXYChartAxisUtils } from './axis_utils'; +export { EuiXYChartTextUtils } from './text_utils'; diff --git a/src/components/xy_chart/chart.js b/src/components/xy_chart/xy_chart.js similarity index 100% rename from src/components/xy_chart/chart.js rename to src/components/xy_chart/xy_chart.js diff --git a/src/components/xy_chart/chart.test.js b/src/components/xy_chart/xy_chart.test.js similarity index 95% rename from src/components/xy_chart/chart.test.js rename to src/components/xy_chart/xy_chart.test.js index d08c9e83461d..28715c9933be 100644 --- a/src/components/xy_chart/chart.test.js +++ b/src/components/xy_chart/xy_chart.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { mount, render } from 'enzyme'; -import { EuiXYChart } from './chart'; +import { EuiXYChart } from './xy_chart'; import { requiredProps } from '../../test/required_props'; describe('EuiXYChart', () => { From 3340a4341a5649b342f0af57150e3ed4c534d0c6 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 20 Jun 2018 11:39:22 +0200 Subject: [PATCH 25/68] Refactoring exporting for utils --- src/components/xy_chart/axis/default_axis.js | 6 +++--- src/components/xy_chart/axis/x_axis.js | 4 +--- src/components/xy_chart/axis/y_axis.js | 4 +--- src/components/xy_chart/utils/axis_utils.js | 12 +++--------- src/components/xy_chart/utils/chart_utils.js | 7 +------ src/components/xy_chart/utils/index.js | 6 +++--- src/components/xy_chart/utils/text_utils.js | 6 +----- src/components/xy_chart/xy_chart.js | 6 +++--- 8 files changed, 16 insertions(+), 35 deletions(-) diff --git a/src/components/xy_chart/axis/default_axis.js b/src/components/xy_chart/axis/default_axis.js index 32658f164995..e241092c2e9f 100644 --- a/src/components/xy_chart/axis/default_axis.js +++ b/src/components/xy_chart/axis/default_axis.js @@ -4,7 +4,7 @@ import { EuiXAxis } from './x_axis'; import { EuiYAxis } from './y_axis'; import { EuiHorizontalGrid } from './horizontal_grid'; import { EuiVerticalGrid } from './vertical_grid'; -import { EuiXYChartUtils } from '../utils/chart_utils'; +import { ORIENTATION } from '../utils/chart_utils'; export class EuiDefaultAxis extends PureComponent { _getTickLabels(ticks) { if (!ticks) return; @@ -30,9 +30,9 @@ export class EuiDefaultAxis extends PureComponent { return ( {showGridLines && - orientation === EuiXYChartUtils.ORIENTATION.VERTICAL && } + orientation === ORIENTATION.VERTICAL && } {showGridLines && - orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL && } + orientation === ORIENTATION.HORIZONTAL && } diff --git a/src/components/xy_chart/axis/x_axis.js b/src/components/xy_chart/axis/x_axis.js index 87eb2fbc911c..5debb8524048 100644 --- a/src/components/xy_chart/axis/x_axis.js +++ b/src/components/xy_chart/axis/x_axis.js @@ -1,9 +1,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { XAxis } from 'react-vis'; -import { EuiXYChartAxisUtils } from '../utils/axis_utils'; - -const { TITLE_POSITION, ORIENTATION } = EuiXYChartAxisUtils; +import { TITLE_POSITION, ORIENTATION } from '../utils/axis_utils'; export class EuiXAxis extends PureComponent { render() { diff --git a/src/components/xy_chart/axis/y_axis.js b/src/components/xy_chart/axis/y_axis.js index 303438d3c302..0571f5d670bd 100644 --- a/src/components/xy_chart/axis/y_axis.js +++ b/src/components/xy_chart/axis/y_axis.js @@ -1,9 +1,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { YAxis } from 'react-vis'; -import { EuiXYChartAxisUtils } from '../utils/axis_utils'; - -const { TITLE_POSITION, ORIENTATION } = EuiXYChartAxisUtils; +import { TITLE_POSITION, ORIENTATION } from '../utils/axis_utils'; export class EuiYAxis extends PureComponent { render() { diff --git a/src/components/xy_chart/utils/axis_utils.js b/src/components/xy_chart/utils/axis_utils.js index 3056e7324a3d..d2c7ae161e31 100644 --- a/src/components/xy_chart/utils/axis_utils.js +++ b/src/components/xy_chart/utils/axis_utils.js @@ -1,21 +1,15 @@ import { AxisUtils } from 'react-vis'; -const ORIENTATION = AxisUtils.ORIENTATION; +export const ORIENTATION = AxisUtils.ORIENTATION; -const TITLE_POSITION = { +export const TITLE_POSITION = { MIDDLE: 'middle', START: 'start', END: 'end', }; -const GRID_TYPE = { +export const GRID_TYPE = { HORIZONTAL: 'horizontal', VERTICAL: 'vertical', BOTH: 'both', }; - -export const EuiXYChartAxisUtils = { - TITLE_POSITION, - GRID_TYPE, - ORIENTATION, -}; diff --git a/src/components/xy_chart/utils/chart_utils.js b/src/components/xy_chart/utils/chart_utils.js index c867d5634f66..137b722dcfa5 100644 --- a/src/components/xy_chart/utils/chart_utils.js +++ b/src/components/xy_chart/utils/chart_utils.js @@ -1,9 +1,4 @@ -const ORIENTATION = { +export const ORIENTATION = { HORIZONTAL: 'horizontal', VERTICAL: 'vertical', - BOTH: 'both', }; - -export const EuiXYChartUtils = { - ORIENTATION, -} diff --git a/src/components/xy_chart/utils/index.js b/src/components/xy_chart/utils/index.js index 43f4f75eb290..c595eb93aba0 100644 --- a/src/components/xy_chart/utils/index.js +++ b/src/components/xy_chart/utils/index.js @@ -1,3 +1,3 @@ -export { EuiXYChartUtils } from './chart_utils'; -export { EuiXYChartAxisUtils } from './axis_utils'; -export { EuiXYChartTextUtils } from './text_utils'; +export * as EuiXYChartUtils from './chart_utils'; +export * as EuiXYChartAxisUtils from './axis_utils'; +export * as EuiXYChartTextUtils from './text_utils'; diff --git a/src/components/xy_chart/utils/text_utils.js b/src/components/xy_chart/utils/text_utils.js index 669b468cea00..0d354a2d01f3 100644 --- a/src/components/xy_chart/utils/text_utils.js +++ b/src/components/xy_chart/utils/text_utils.js @@ -7,7 +7,7 @@ import React from 'react' * @return {Object} Returns an Object to use with dangerouslySetInnerHTML * with the rendered markdown HTML */ -function tspanTextWrapper(texts) { +export function tspanTextWrapper(texts) { return ( { @@ -20,7 +20,3 @@ function tspanTextWrapper(texts) { ) } - -export const EuiXYChartTextUtils = { - tspanTextWrapper, -} diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index 1e33fbcba9d8..a368e24142b1 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -9,7 +9,7 @@ import { EuiCrosshairY } from './crosshairs/crosshair_y'; import { VISUALIZATION_COLORS } from '../../services'; import StatusText from './status-text'; import { getSeriesChildren } from './utils/series_utils'; -import { EuiXYChartUtils } from './utils/chart_utils'; +import { ORIENTATION } from './utils/chart_utils'; class XYExtendedPlot extends XYPlot { /** @@ -96,7 +96,7 @@ class XYChart extends PureComponent { } this.colorIterator = 0; - const Crosshair = orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL + const Crosshair = orientation === ORIENTATION.HORIZONTAL ? EuiCrosshairY : EuiCrosshairX return ( @@ -168,7 +168,7 @@ XYChart.defaultProps = { xPadding: 0, truncateLegends: false, showCrosshair: true, - orientation: EuiXYChartUtils.ORIENTATION.VERTICAL, + orientation: ORIENTATION.VERTICAL, showDefaultAxis: true, }; From 6d2dc6c029c94ff543db5902a028501e75ff3672 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 20 Jun 2018 11:46:58 +0200 Subject: [PATCH 26/68] Revert "Refactoring exporting for utils" This reverts commit 3340a4341a5649b342f0af57150e3ed4c534d0c6. --- src/components/xy_chart/axis/default_axis.js | 6 +++--- src/components/xy_chart/axis/x_axis.js | 4 +++- src/components/xy_chart/axis/y_axis.js | 4 +++- src/components/xy_chart/utils/axis_utils.js | 12 +++++++++--- src/components/xy_chart/utils/chart_utils.js | 7 ++++++- src/components/xy_chart/utils/index.js | 6 +++--- src/components/xy_chart/utils/text_utils.js | 6 +++++- src/components/xy_chart/xy_chart.js | 6 +++--- 8 files changed, 35 insertions(+), 16 deletions(-) diff --git a/src/components/xy_chart/axis/default_axis.js b/src/components/xy_chart/axis/default_axis.js index e241092c2e9f..32658f164995 100644 --- a/src/components/xy_chart/axis/default_axis.js +++ b/src/components/xy_chart/axis/default_axis.js @@ -4,7 +4,7 @@ import { EuiXAxis } from './x_axis'; import { EuiYAxis } from './y_axis'; import { EuiHorizontalGrid } from './horizontal_grid'; import { EuiVerticalGrid } from './vertical_grid'; -import { ORIENTATION } from '../utils/chart_utils'; +import { EuiXYChartUtils } from '../utils/chart_utils'; export class EuiDefaultAxis extends PureComponent { _getTickLabels(ticks) { if (!ticks) return; @@ -30,9 +30,9 @@ export class EuiDefaultAxis extends PureComponent { return ( {showGridLines && - orientation === ORIENTATION.VERTICAL && } + orientation === EuiXYChartUtils.ORIENTATION.VERTICAL && } {showGridLines && - orientation === ORIENTATION.HORIZONTAL && } + orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL && } diff --git a/src/components/xy_chart/axis/x_axis.js b/src/components/xy_chart/axis/x_axis.js index 5debb8524048..87eb2fbc911c 100644 --- a/src/components/xy_chart/axis/x_axis.js +++ b/src/components/xy_chart/axis/x_axis.js @@ -1,7 +1,9 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { XAxis } from 'react-vis'; -import { TITLE_POSITION, ORIENTATION } from '../utils/axis_utils'; +import { EuiXYChartAxisUtils } from '../utils/axis_utils'; + +const { TITLE_POSITION, ORIENTATION } = EuiXYChartAxisUtils; export class EuiXAxis extends PureComponent { render() { diff --git a/src/components/xy_chart/axis/y_axis.js b/src/components/xy_chart/axis/y_axis.js index 0571f5d670bd..303438d3c302 100644 --- a/src/components/xy_chart/axis/y_axis.js +++ b/src/components/xy_chart/axis/y_axis.js @@ -1,7 +1,9 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { YAxis } from 'react-vis'; -import { TITLE_POSITION, ORIENTATION } from '../utils/axis_utils'; +import { EuiXYChartAxisUtils } from '../utils/axis_utils'; + +const { TITLE_POSITION, ORIENTATION } = EuiXYChartAxisUtils; export class EuiYAxis extends PureComponent { render() { diff --git a/src/components/xy_chart/utils/axis_utils.js b/src/components/xy_chart/utils/axis_utils.js index d2c7ae161e31..3056e7324a3d 100644 --- a/src/components/xy_chart/utils/axis_utils.js +++ b/src/components/xy_chart/utils/axis_utils.js @@ -1,15 +1,21 @@ import { AxisUtils } from 'react-vis'; -export const ORIENTATION = AxisUtils.ORIENTATION; +const ORIENTATION = AxisUtils.ORIENTATION; -export const TITLE_POSITION = { +const TITLE_POSITION = { MIDDLE: 'middle', START: 'start', END: 'end', }; -export const GRID_TYPE = { +const GRID_TYPE = { HORIZONTAL: 'horizontal', VERTICAL: 'vertical', BOTH: 'both', }; + +export const EuiXYChartAxisUtils = { + TITLE_POSITION, + GRID_TYPE, + ORIENTATION, +}; diff --git a/src/components/xy_chart/utils/chart_utils.js b/src/components/xy_chart/utils/chart_utils.js index 137b722dcfa5..c867d5634f66 100644 --- a/src/components/xy_chart/utils/chart_utils.js +++ b/src/components/xy_chart/utils/chart_utils.js @@ -1,4 +1,9 @@ -export const ORIENTATION = { +const ORIENTATION = { HORIZONTAL: 'horizontal', VERTICAL: 'vertical', + BOTH: 'both', }; + +export const EuiXYChartUtils = { + ORIENTATION, +} diff --git a/src/components/xy_chart/utils/index.js b/src/components/xy_chart/utils/index.js index c595eb93aba0..43f4f75eb290 100644 --- a/src/components/xy_chart/utils/index.js +++ b/src/components/xy_chart/utils/index.js @@ -1,3 +1,3 @@ -export * as EuiXYChartUtils from './chart_utils'; -export * as EuiXYChartAxisUtils from './axis_utils'; -export * as EuiXYChartTextUtils from './text_utils'; +export { EuiXYChartUtils } from './chart_utils'; +export { EuiXYChartAxisUtils } from './axis_utils'; +export { EuiXYChartTextUtils } from './text_utils'; diff --git a/src/components/xy_chart/utils/text_utils.js b/src/components/xy_chart/utils/text_utils.js index 0d354a2d01f3..669b468cea00 100644 --- a/src/components/xy_chart/utils/text_utils.js +++ b/src/components/xy_chart/utils/text_utils.js @@ -7,7 +7,7 @@ import React from 'react' * @return {Object} Returns an Object to use with dangerouslySetInnerHTML * with the rendered markdown HTML */ -export function tspanTextWrapper(texts) { +function tspanTextWrapper(texts) { return ( { @@ -20,3 +20,7 @@ export function tspanTextWrapper(texts) { ) } + +export const EuiXYChartTextUtils = { + tspanTextWrapper, +} diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index a368e24142b1..1e33fbcba9d8 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -9,7 +9,7 @@ import { EuiCrosshairY } from './crosshairs/crosshair_y'; import { VISUALIZATION_COLORS } from '../../services'; import StatusText from './status-text'; import { getSeriesChildren } from './utils/series_utils'; -import { ORIENTATION } from './utils/chart_utils'; +import { EuiXYChartUtils } from './utils/chart_utils'; class XYExtendedPlot extends XYPlot { /** @@ -96,7 +96,7 @@ class XYChart extends PureComponent { } this.colorIterator = 0; - const Crosshair = orientation === ORIENTATION.HORIZONTAL + const Crosshair = orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL ? EuiCrosshairY : EuiCrosshairX return ( @@ -168,7 +168,7 @@ XYChart.defaultProps = { xPadding: 0, truncateLegends: false, showCrosshair: true, - orientation: ORIENTATION.VERTICAL, + orientation: EuiXYChartUtils.ORIENTATION.VERTICAL, showDefaultAxis: true, }; From ea322ab592fb39a22d03dcca9232eac40205768b Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 20 Jun 2018 12:02:53 +0200 Subject: [PATCH 27/68] Fix missing y crosshair on horizontal histogram --- .../xy_chart/crosshairs/crosshair_y.js | 3 +-- src/components/xy_chart/xy_chart.js | 27 +++++-------------- 2 files changed, 8 insertions(+), 22 deletions(-) diff --git a/src/components/xy_chart/crosshairs/crosshair_y.js b/src/components/xy_chart/crosshairs/crosshair_y.js index 5da006d3dc04..4ec718ae80d6 100644 --- a/src/components/xy_chart/crosshairs/crosshair_y.js +++ b/src/components/xy_chart/crosshairs/crosshair_y.js @@ -109,7 +109,7 @@ export class EuiCrosshairY extends AbstractSeries { if (typeof item.y0 === 'number') { // we need to compute the scaled y0 using the xScale attribute functor // we don't have access of the y0 attribute functor - const y0Coord = yScaleFn({ x: item.y0 }); + const y0Coord = yScaleFn({ y: item.y0 }); itemYCoords = (yCoord - y0Coord) / 2 + y0Coord; } else { itemYCoords = yCoord; @@ -132,7 +132,6 @@ export class EuiCrosshairY extends AbstractSeries { }; }) .filter(d => d); - // filter and map nearest X data per dataseries to get only the nearet onces const crosshairValues = nearestYData .filter(value => value.minDistance === globalMinDistance) diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index 1e33fbcba9d8..9d6fe91a36e9 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -30,7 +30,6 @@ class XYExtendedPlot extends XYPlot { } }); } - } class XYChart extends PureComponent { @@ -59,7 +58,7 @@ class XYChart extends PureComponent { } return React.cloneElement(child, props); - } + }; // canShowCrosshair = () => { // const { crosshairValue, showCrosshair } = this.props; // const { mouseOver } = this.state; @@ -90,15 +89,13 @@ class XYChart extends PureComponent { ...rest } = this.props; - if (!children || errorText) { return ; } this.colorIterator = 0; - const Crosshair = orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL - ? EuiCrosshairY - : EuiCrosshairX + const Crosshair = + orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL ? EuiCrosshairY : EuiCrosshairX; return (
- {React.Children.map(children, this._renderChildren)} - { - showDefaultAxis && - } - { showCrosshair && ( - + {showDefaultAxis && } + {showCrosshair && ( + )} {onSelectEnd && } @@ -153,10 +144,7 @@ XYChart.propTypes = { truncateLegends: PropTypes.bool, errorText: PropTypes.string, showCrosshair: PropTypes.bool, - crosshairValue: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), + crosshairValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), onCrosshairUpdate: PropTypes.func, showDefaultAxis: PropTypes.bool, }; @@ -170,7 +158,6 @@ XYChart.defaultProps = { showCrosshair: true, orientation: EuiXYChartUtils.ORIENTATION.VERTICAL, showDefaultAxis: true, - }; export const EuiXYChart = makeWidthFlexible(XYChart); From 5458ec3f093e50b840822055be70905e46ee36ff Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 20 Jun 2018 14:38:35 +0200 Subject: [PATCH 28/68] Fix time histogram example to be stacked --- src-docs/src/views/xy_chart_histogram/time_histogram_series.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/xy_chart_histogram/time_histogram_series.js b/src-docs/src/views/xy_chart_histogram/time_histogram_series.js index c1f3b73959af..cb118b5421e1 100644 --- a/src-docs/src/views/xy_chart_histogram/time_histogram_series.js +++ b/src-docs/src/views/xy_chart_histogram/time_histogram_series.js @@ -41,7 +41,7 @@ export default class Example extends Component { - + { data.map((d, i) => ())} From 01728c7e266214704520a9ec0361145b6d8af47f Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 20 Jun 2018 15:36:29 +0200 Subject: [PATCH 29/68] Add propTypes docs on XYChart. Add correct displayName to chart elements --- .../src/views/xy_chart/xy_chart_example.js | 3 +- .../__snapshots__/xy_chart.test.js.snap | 9 +- src/components/xy_chart/axis/default_axis.js | 2 + .../xy_chart/axis/horizontal_grid.js | 2 + src/components/xy_chart/axis/vertical_grid.js | 2 + src/components/xy_chart/axis/x_axis.js | 2 + src/components/xy_chart/axis/y_axis.js | 2 + .../xy_chart/crosshairs/crosshair_x.js | 2 + .../xy_chart/crosshairs/crosshair_y.js | 2 + src/components/xy_chart/highlight.js | 31 +- .../__snapshots__/area_series.test.js.snap | 5520 ++++-------- .../__snapshots__/line_series.test.js.snap | 7568 +++++------------ src/components/xy_chart/series/area_series.js | 22 +- src/components/xy_chart/series/bar_series.js | 2 + .../xy_chart/series/horizontal_bar_series.js | 2 + .../xy_chart/series/horizontal_rect_series.js | 2 + src/components/xy_chart/series/line_series.js | 2 + .../xy_chart/series/vertical_bar_series.js | 2 + .../xy_chart/series/vertical_rect_series.js | 2 + src/components/xy_chart/xy_chart.js | 43 +- 20 files changed, 3681 insertions(+), 9541 deletions(-) diff --git a/src-docs/src/views/xy_chart/xy_chart_example.js b/src-docs/src/views/xy_chart/xy_chart_example.js index 83eef010042e..72bebc96c362 100644 --- a/src-docs/src/views/xy_chart/xy_chart_example.js +++ b/src-docs/src/views/xy_chart/xy_chart_example.js @@ -1,6 +1,6 @@ import React from 'react'; import { GuideSectionTypes } from '../../components'; -import { EuiCode } from '../../../../src/components'; +import { EuiCode, EuiXYChart } from '../../../../src/components'; import ComplexChartExampleCode from './complex'; import EmptyExampleCode from './empty'; import MultiAxisChartExampleCode from './multi_axis'; @@ -20,6 +20,7 @@ export const XYChartExample = {

), + props: { EuiXYChart }, source: [ { type: GuideSectionTypes.JS, diff --git a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap index 9448aa715908..4fe4d0374efe 100644 --- a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap +++ b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap @@ -40,7 +40,7 @@ exports[`EuiXYChart is rendered (empty) 1`] = ` `; exports[`EuiXYChart passes handler functions 1`] = ` - - - + - + `; diff --git a/src/components/xy_chart/axis/default_axis.js b/src/components/xy_chart/axis/default_axis.js index 32658f164995..22752510cd3e 100644 --- a/src/components/xy_chart/axis/default_axis.js +++ b/src/components/xy_chart/axis/default_axis.js @@ -41,6 +41,8 @@ export class EuiDefaultAxis extends PureComponent { } } +EuiDefaultAxis.displayName = 'EuiDefaultAxis'; + EuiDefaultAxis.propTypes = { orientation: PropTypes.string, showGridLines: PropTypes.bool, diff --git a/src/components/xy_chart/axis/horizontal_grid.js b/src/components/xy_chart/axis/horizontal_grid.js index 4fa5f211a8a9..1caa0d5e9ae6 100644 --- a/src/components/xy_chart/axis/horizontal_grid.js +++ b/src/components/xy_chart/axis/horizontal_grid.js @@ -17,4 +17,6 @@ export class EuiHorizontalGrid extends PureComponent { } } +EuiHorizontalGrid.displayName = 'EuiHorizontalGrid'; + EuiHorizontalGrid.requiresSVG = true; diff --git a/src/components/xy_chart/axis/vertical_grid.js b/src/components/xy_chart/axis/vertical_grid.js index b8106b87a0ae..6869f8bc06e6 100644 --- a/src/components/xy_chart/axis/vertical_grid.js +++ b/src/components/xy_chart/axis/vertical_grid.js @@ -17,4 +17,6 @@ export class EuiVerticalGrid extends PureComponent { } } +EuiVerticalGrid.displayName = 'EuiVerticalGrid'; + EuiVerticalGrid.requiresSVG = true; diff --git a/src/components/xy_chart/axis/x_axis.js b/src/components/xy_chart/axis/x_axis.js index 87eb2fbc911c..d282b15745bd 100644 --- a/src/components/xy_chart/axis/x_axis.js +++ b/src/components/xy_chart/axis/x_axis.js @@ -35,6 +35,8 @@ export class EuiXAxis extends PureComponent { } } +EuiXAxis.displayName = 'EuiXAxis'; + EuiXAxis.propTypes = { title: PropTypes.string, /** The axis title */ /** The axis title position */ diff --git a/src/components/xy_chart/axis/y_axis.js b/src/components/xy_chart/axis/y_axis.js index 303438d3c302..3188278b657e 100644 --- a/src/components/xy_chart/axis/y_axis.js +++ b/src/components/xy_chart/axis/y_axis.js @@ -34,6 +34,8 @@ export class EuiYAxis extends PureComponent { } } +EuiYAxis.displayName = 'EuiYAxis'; + EuiYAxis.propTypes = { title: PropTypes.string, titlePosition: PropTypes.oneOf([TITLE_POSITION.START, TITLE_POSITION.MIDDLE, TITLE_POSITION.END]), diff --git a/src/components/xy_chart/crosshairs/crosshair_x.js b/src/components/xy_chart/crosshairs/crosshair_x.js index 839bed5a7022..ab6c68062b40 100644 --- a/src/components/xy_chart/crosshairs/crosshair_x.js +++ b/src/components/xy_chart/crosshairs/crosshair_x.js @@ -172,6 +172,8 @@ export class EuiCrosshairX extends AbstractSeries { } } +EuiCrosshairX.displayName = 'EuiCrosshairX'; + EuiCrosshairX.propTypes = { ... AbstractSeries.propTypes, crosshairValue: PropTypes.oneOfType([ diff --git a/src/components/xy_chart/crosshairs/crosshair_y.js b/src/components/xy_chart/crosshairs/crosshair_y.js index 4ec718ae80d6..650a4a2ba961 100644 --- a/src/components/xy_chart/crosshairs/crosshair_y.js +++ b/src/components/xy_chart/crosshairs/crosshair_y.js @@ -169,3 +169,5 @@ export class EuiCrosshairY extends AbstractSeries { ) } } + +EuiCrosshairY.displayName = 'EuiCrosshairY'; diff --git a/src/components/xy_chart/highlight.js b/src/components/xy_chart/highlight.js index 3d29900f7920..bf24a0c4a2ba 100644 --- a/src/components/xy_chart/highlight.js +++ b/src/components/xy_chart/highlight.js @@ -1,17 +1,17 @@ import React from 'react'; import { ScaleUtils, AbstractSeries } from 'react-vis'; -export default class Highlight extends AbstractSeries { - static displayName = 'HighlightOverlay'; +export class EuiHighlight extends AbstractSeries { + static displayName = 'EuiHighlightOverlay'; static defaultProps = { allow: 'x', color: 'rgb(0,0, 0)', - opacity: 0.2 + opacity: 0.2, }; state = { drawing: false, drawArea: { top: 0, right: 0, bottom: 0, left: 0 }, - startLoc: 0 + startLoc: 0, }; _getDrawArea(loc) { @@ -22,14 +22,14 @@ export default class Highlight extends AbstractSeries { return { ...drawArea, left: Math.max(loc, 0), - right: startLoc + right: startLoc, }; } return { ...drawArea, right: Math.min(loc, innerWidth), - left: startLoc + left: startLoc, }; } @@ -43,9 +43,9 @@ export default class Highlight extends AbstractSeries { top: 0, right: location, bottom: innerHeight, - left: location + left: location, }, - startLoc: location + startLoc: location, }); if (onSelectStart) { @@ -67,7 +67,7 @@ export default class Highlight extends AbstractSeries { this.setState({ drawing: false, drawArea: { top: 0, right: 0, bottom: 0, left: 0 }, - startLoc: 0 + startLoc: 0, }); // Don't invoke the callback if the selected area was < 5px. @@ -79,7 +79,7 @@ export default class Highlight extends AbstractSeries { // Compute the corresponding domain drawn const domainArea = { end: xScale.invert(drawArea.right), - begin: xScale.invert(drawArea.left) + begin: xScale.invert(drawArea.left), }; if (onSelectEnd) { @@ -88,6 +88,7 @@ export default class Highlight extends AbstractSeries { } onParentMouseMove(e) { + e.preventDefault(); const { marginLeft, onSelect } = this.props; const { drawing } = this.state; const loc = e.nativeEvent.offsetX - marginLeft; @@ -113,7 +114,15 @@ export default class Highlight extends AbstractSeries { onMouseUp={() => this.stopDrawing()} onMouseLeave={() => this.stopDrawing()} > - + @@ -13,13 +13,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` } } > -
- - - - - - - - + transform="translate(2,2)" + /> - + - - + - + + + - - - - - - - - - - + } + x1={0} + x2={596} + y1={19.599999999999994} + y2={19.599999999999994} + /> + @@ -1504,7 +895,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} colorDomain={Array []} colorRange={ Array [ @@ -1612,7 +1003,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="x" attrAxis="y" colorDomain={Array []} @@ -1722,7 +1113,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="x" attrAxis="y" className="" @@ -1816,723 +1207,453 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` } yType="linear" > - - - + + + - + - - - + + + + - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - + 0.1 + - - - - - - - + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + - - - + + + + + + 6 + + + + + + 8 + + + - + - - - + + + + + 12 + + + + + - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - + 14 + - - - + + + - - +
- + - + `; exports[`EuiAreaSeries is rendered 1`] = ` - - - - + - - - - - - + transform="translate(2,2)" + /> - + - + - + - + + + - - - - - - - - - - + } + x1={0} + x2={596} + y1={19.599999999999994} + y2={19.599999999999994} + /> + @@ -5111,7 +3363,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} colorDomain={Array []} colorRange={ Array [ @@ -5219,7 +3471,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="x" attrAxis="y" colorDomain={Array []} @@ -5329,7 +3581,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="x" attrAxis="y" className="" @@ -5423,685 +3675,415 @@ exports[`EuiAreaSeries is rendered 1`] = ` } yType="linear" > - - - + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + - + + 0.7 + + + + + + 0.8 + + + + + - - - + + + + - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - + 1.0 + - - - + + + @@ -6124,7 +4106,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} colorDomain={Array []} colorRange={ Array [ @@ -6232,7 +4214,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="y" attrAxis="x" colorDomain={Array []} @@ -6342,7 +4324,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="y" attrAxis="x" className="" @@ -6436,547 +4418,277 @@ exports[`EuiAreaSeries is rendered 1`] = ` } yType="linear" > - - - + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + - + - - - + + + + - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - + 14 + - - - + + + - - + - + - + `; diff --git a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap index e790219d711c..454b97f4db4c 100644 --- a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiLineSeries all props are rendered 1`] = ` - @@ -13,13 +13,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` } } > -
- - - - - - - - + transform="translate(2,2)" + /> - - - - - - - + transform="translate(2,2)" + /> - - + - - - - - - - - + /> + - + - - + - + + + - - - - - - - - - - + } + x1={0} + x2={596} + y1={19.599999999999994} + y2={19.599999999999994} + /> + @@ -2510,7 +1233,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} colorDomain={Array []} colorRange={ Array [ @@ -2618,7 +1341,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="x" attrAxis="y" colorDomain={Array []} @@ -2728,7 +1451,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="x" attrAxis="y" className="" @@ -2822,748 +1545,478 @@ exports[`EuiLineSeries all props are rendered 1`] = ` } yType="linear" > - - - + + + - + - - - + + + + - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - + 0.1 + - - - - - - - + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + - - - + + - - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + - +
- + - + `; exports[`EuiLineSeries is rendered 1`] = ` - - - - - - - - - - - - - - - - - - - + Object { + "x": 0, + "y": 5, + }, + Object { + "x": 1, + "y": 15, + }, + ] + } + fillDomain={Array []} + fillRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + getAngle={[Function]} + getAngle0={[Function]} + getColor={[Function]} + getColor0={[Function]} + getFill={[Function]} + getFill0={[Function]} + getNull={[Function]} + getOpacity={[Function]} + getOpacity0={[Function]} + getRadius={[Function]} + getRadius0={[Function]} + getSize={[Function]} + getSize0={[Function]} + getStroke={[Function]} + getStroke0={[Function]} + getX={[Function]} + getX0={[Function]} + getY={[Function]} + getY0={[Function]} + id="chart-0" + innerHeight={196} + innerWidth={596} + key="test-border" + marginBottom={2} + marginLeft={2} + marginRight={2} + marginTop={2} + opacity={1} + opacityDomain={Array []} + opacityType="literal" + radiusDomain={Array []} + sameTypeIndex={0} + sameTypeTotal={1} + seriesIndex={0} + sizeDomain={Array []} + sizeRange={ + Array [ + 1, + 10, + ] + } + stack={false} + strokeDomain={Array []} + strokeRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + strokeStyle="solid" + style={ + Object { + "strokeWidth": 4, + } + } + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + - - + + + - + - - - - - - - - + /> + - + - + - + - + + + - - - - - - - - - - + } + x1={0} + x2={596} + y1={19.599999999999994} + y2={19.599999999999994} + /> + @@ -7124,7 +4040,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} colorDomain={Array []} colorRange={ Array [ @@ -7232,7 +4148,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="x" attrAxis="y" colorDomain={Array []} @@ -7342,7 +4258,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="x" attrAxis="y" className="" @@ -7436,685 +4352,415 @@ exports[`EuiLineSeries is rendered 1`] = ` } yType="linear" > - - - + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + - + - - - + + + + - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - + 1.0 + - - - + + + @@ -8137,7 +4783,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} colorDomain={Array []} colorRange={ Array [ @@ -8245,7 +4891,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="y" attrAxis="x" colorDomain={Array []} @@ -8355,7 +5001,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={true} + animation={null} attr="y" attrAxis="x" className="" @@ -8449,547 +5095,277 @@ exports[`EuiLineSeries is rendered 1`] = ` } yType="linear" > - - - + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + - + - - - + + + + - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - + 14 + - - - + + + - - + - + - + `; diff --git a/src/components/xy_chart/series/area_series.js b/src/components/xy_chart/series/area_series.js index 1154832c184b..b9c0327835c4 100644 --- a/src/components/xy_chart/series/area_series.js +++ b/src/components/xy_chart/series/area_series.js @@ -21,27 +21,23 @@ export class EuiAreaSeries extends AbstractSeries { ); } } - +EuiAreaSeries.displayName = 'EuiAreaSeries'; EuiAreaSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, /** Array<{x: string|number, y: string|number}> */ - data: PropTypes.arrayOf(PropTypes.shape({ - x: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), - y: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), - })).isRequired, + data: PropTypes.arrayOf( + PropTypes.shape({ + x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + }) + ).isRequired, /** Without a color set, a random EUI color palette color will be chosen */ color: PropTypes.string, curve: PropTypes.string, onClick: PropTypes.func, - onMarkClick: PropTypes.func -} + onMarkClick: PropTypes.func, +}; EuiAreaSeries.defaultProps = { curve: 'linear', diff --git a/src/components/xy_chart/series/bar_series.js b/src/components/xy_chart/series/bar_series.js index d853f5e4ae86..a1ab8fac6d8e 100644 --- a/src/components/xy_chart/series/bar_series.js +++ b/src/components/xy_chart/series/bar_series.js @@ -25,6 +25,8 @@ export class EuiBarSeries extends AbstractSeries { } } +EuiBarSeries.displayName = 'EuiBarSeries'; + EuiBarSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, diff --git a/src/components/xy_chart/series/horizontal_bar_series.js b/src/components/xy_chart/series/horizontal_bar_series.js index 0c4003815874..03287c5255e0 100644 --- a/src/components/xy_chart/series/horizontal_bar_series.js +++ b/src/components/xy_chart/series/horizontal_bar_series.js @@ -26,6 +26,8 @@ export class EuiHorizontalBarSeries extends HorizontalBarSeries { } } +EuiHorizontalBarSeries.displayName = 'EuiHorizontalBarSeries'; + EuiHorizontalBarSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, diff --git a/src/components/xy_chart/series/horizontal_rect_series.js b/src/components/xy_chart/series/horizontal_rect_series.js index 102f0ee119ed..623ee20ee494 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.js +++ b/src/components/xy_chart/series/horizontal_rect_series.js @@ -26,6 +26,8 @@ export class EuiHorizontalRectSeries extends HorizontalRectSeries { } } +EuiHorizontalRectSeries.displayName = 'EuiHorizontalRectSeries'; + EuiHorizontalRectSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, diff --git a/src/components/xy_chart/series/line_series.js b/src/components/xy_chart/series/line_series.js index 5fab14dceeec..08fc2e7ac5cc 100644 --- a/src/components/xy_chart/series/line_series.js +++ b/src/components/xy_chart/series/line_series.js @@ -68,6 +68,8 @@ export class EuiLineSeries extends AbstractSeries { } } +EuiLineSeries.displayName = 'EuiLineSeries'; + EuiLineSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, diff --git a/src/components/xy_chart/series/vertical_bar_series.js b/src/components/xy_chart/series/vertical_bar_series.js index f0c5cd78d181..fd6a6e26fd3e 100644 --- a/src/components/xy_chart/series/vertical_bar_series.js +++ b/src/components/xy_chart/series/vertical_bar_series.js @@ -26,6 +26,8 @@ export class EuiVerticalBarSeries extends VerticalBarSeries { } } +EuiVerticalBarSeries.displayName = 'EuiVerticalBarSeries'; + EuiVerticalBarSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, diff --git a/src/components/xy_chart/series/vertical_rect_series.js b/src/components/xy_chart/series/vertical_rect_series.js index 81cdb8bf87d3..37bc50bed85b 100644 --- a/src/components/xy_chart/series/vertical_rect_series.js +++ b/src/components/xy_chart/series/vertical_rect_series.js @@ -27,6 +27,8 @@ export class EuiVerticalRectSeries extends VerticalRectSeries { } } +EuiVerticalRectSeries.displayName = 'EuiVerticalRectSeries'; + EuiVerticalRectSeries.propTypes = { /** The name used to define the data in tooltips and ledgends */ name: PropTypes.string.isRequired, diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index 9d6fe91a36e9..1815622711ac 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -1,8 +1,8 @@ import React, { PureComponent } from 'react'; -import { XYPlot, makeWidthFlexible, AbstractSeries } from 'react-vis'; +import { XYPlot, makeVisFlexible, AbstractSeries } from 'react-vis'; import PropTypes from 'prop-types'; -import Highlight from './highlight'; +import { EuiHighlight } from './highlight'; import { EuiDefaultAxis } from './axis/default_axis'; import { EuiCrosshairX } from './crosshairs/crosshair_x'; import { EuiCrosshairY } from './crosshairs/crosshair_y'; @@ -10,6 +10,7 @@ import { VISUALIZATION_COLORS } from '../../services'; import StatusText from './status-text'; import { getSeriesChildren } from './utils/series_utils'; import { EuiXYChartUtils } from './utils/chart_utils'; +const { HORIZONTAL, VERTICAL } = EuiXYChartUtils.ORIENTATION class XYExtendedPlot extends XYPlot { /** @@ -79,13 +80,12 @@ class XYChart extends PureComponent { yDomain, yPadding, xPadding, - animation, // eslint-disable-line no-unused-vars + animation, showDefaultAxis, showCrosshair, orientation, crosshairValue, - onCrosshairUpdate, // eslint-disable-line no-unused-vars - truncateLegends, // eslint-disable-line no-unused-vars + onCrosshairUpdate, ...rest } = this.props; @@ -104,7 +104,7 @@ class XYChart extends PureComponent { onMouseMove={this._onMouseMove} onMouseLeave={this._onMouseLeave} width={width} - animation={true} + animation={animation} height={height} margin={2} xType={xType} @@ -121,43 +121,64 @@ class XYChart extends PureComponent { )} - {onSelectEnd && } + {onSelectEnd && } ); } } +XYChart.displayName = 'EuiXYChart'; XYChart.propTypes = { + /** The initial width of the chart. */ width: PropTypes.number.isRequired, + /** The initial height of the chart. */ height: PropTypes.number.isRequired, - orientation: PropTypes.string, + /** The orientation of the chart. */ + orientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL ]), + /** If the chart animates on data changes. */ + animation: PropTypes.bool, + /** TODO */ stackBy: PropTypes.string, + /** The main x axis scale type. */ xType: PropTypes.string, + /** The main y axis scale type. */ yType: PropTypes.string, + /** Manually specify the domain of x axis. */ xDomain: PropTypes.array, + /** Manually specify the domain of y axis. */ yDomain: PropTypes.array, + /** The horizontal padding between the chart borders and chart elements. */ xPadding: PropTypes.number, + /** The vertical padding between the chart borders and chart elements. */ yPadding: PropTypes.number, + /** TODO */ onHover: PropTypes.func, + /** Activate the brush tool and callback on brush end event. */ onSelectEnd: PropTypes.func, + /** TODO */ truncateLegends: PropTypes.bool, + /** TODO */ errorText: PropTypes.string, + /** Shows the crosshair tooltip on mouse move.*/ showCrosshair: PropTypes.bool, + /** Specify an X or Y axis value to display a crosshair. */ crosshairValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + /** Callback when the crosshair position is updated. */ onCrosshairUpdate: PropTypes.func, + /** Show the default X and Y axis. */ showDefaultAxis: PropTypes.bool, }; XYChart.defaultProps = { + animation: true, xType: 'linear', yType: 'linear', yPadding: 0, xPadding: 0, - truncateLegends: false, - showCrosshair: true, orientation: EuiXYChartUtils.ORIENTATION.VERTICAL, + showCrosshair: true, showDefaultAxis: true, }; -export const EuiXYChart = makeWidthFlexible(XYChart); +export const EuiXYChart = makeVisFlexible(XYChart); From d84f645ac35497d34e001a1664019e24352a37cc Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 20 Jun 2018 19:28:59 +0200 Subject: [PATCH 30/68] Renamed highlight to brush. Add vertical, horizontal and both orientation of Brush. --- src-docs/src/views/xy_chart/complex.js | 118 +++++++----- .../__snapshots__/xy_chart.test.js.snap | 6 +- src/components/xy_chart/brush.js | 173 ++++++++++++++++++ src/components/xy_chart/highlight.js | 139 -------------- .../__snapshots__/area_series.test.js.snap | 6 + .../__snapshots__/line_series.test.js.snap | 6 + src/components/xy_chart/xy_chart.js | 23 ++- src/components/xy_chart/xy_chart.test.js | 2 +- 8 files changed, 274 insertions(+), 199 deletions(-) create mode 100644 src/components/xy_chart/brush.js delete mode 100644 src/components/xy_chart/highlight.js diff --git a/src-docs/src/views/xy_chart/complex.js b/src-docs/src/views/xy_chart/complex.js index 508a02bcf6a5..ac7a89269232 100644 --- a/src-docs/src/views/xy_chart/complex.js +++ b/src-docs/src/views/xy_chart/complex.js @@ -1,64 +1,82 @@ -import React from 'react'; +import React, { Fragment, Component } from 'react'; import { + EuiCodeBlock, + EuiSpacer, EuiXYChart, + EuiXYChartUtils, EuiVerticalBarSeries, EuiAreaSeries, EuiLineSeries, } from '../../../../src/components'; -export default () => { +const barData = []; +for (let i = 0; i < 10; i++) { + const data = []; - const barData = []; - for (let i = 0; i < 10; i++) { - const data = []; + for (let i = 0; i < 20; i++) { + data.push({ x: i, y: Number(Math.random().toFixed(2)) }); + } - for (let i = 0; i < 20; i++) { - data.push({ x: i, y: Number(Math.random().toFixed(2)) }); - } + barData.push(data); +} - barData.push(data); +export default class ComplexDemo extends Component { + state = { + brushOutput: 'Please drag your mouse to select an area' } - - return ( - { - alert('selection ended with an area :) Check console to see it'); - console.log(area); - }} - width={600} - height={200} - > - { - alert('clicked!'); - }} - data={[ - { x: 0, y: 0 }, - { x: 1, y: 2 }, - { x: 2, y: 1 }, - { x: 3, y: 2 }, - { x: 4, y: 1 }, - { x: 10, y: 1 }, - { x: 20, y: 2 }, - ]} - /> - {barData - .slice(0, 1) - .map((data, index) => ( - { + this.setState(() => ({ + brushOutput: JSON.stringify(area, null, 2), + })); + } + render() { + const { brushOutput } = this.state + return ( + + + {brushOutput} + + + + { + alert('clicked!'); + }} + data={[ + { x: 0, y: 0 }, + { x: 1, y: 2 }, + { x: 2, y: 1 }, + { x: 3, y: 2 }, + { x: 4, y: 1 }, + { x: 10, y: 1 }, + { x: 20, y: 2 }, + ]} /> - ))} - - - ); + {barData + .slice(0, 1) + .map((data, index) => ( + + ))} + + + + ); + } }; diff --git a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap index 4fe4d0374efe..7be629b8a635 100644 --- a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap +++ b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap @@ -42,9 +42,9 @@ exports[`EuiXYChart is rendered (empty) 1`] = ` exports[`EuiXYChart passes handler functions 1`] = ` ({ + drawing: true, + ...drawAndRectAreas, + })); + + if (onSelectStart) { + onSelectStart(e); + } + } + + onParentMouseMove(e) { + const { onSelect } = this.props; + const { drawing } = this.state; + const { offsetX, offsetY } = e.nativeEvent; + + if (drawing) { + const drawAndRectAreas = this._getDrawArea(offsetX, offsetY); + this.setState(() => ({ ...drawAndRectAreas })); + + if (onSelect) { + onSelect(e); + } + } + } + + stopDrawing = () => { + // Quickly short-circuit if the user isn't drawing in our component + if (!this.state.drawing) { + return; + } + + const { onBrushEnd } = this.props; + const { x0, y0, x1, y1 } = this.state.drawArea; + const xScale = ScaleUtils.getAttributeScale(this.props, 'x'); + const yScale = ScaleUtils.getAttributeScale(this.props, 'y'); + + // Clear the draw area + this.setState(() => ({ + drawing: false, + ...DEFAULT_AREAS, + })); + // Don't invoke the callback if the selected area was < 5px. + // This is a click not a select + if (Math.abs(x0 - x1) < 5 || Math.abs(y0 - y1) < 5) { + return; + } + + // Compute the corresponding domain drawn + const domainArea = { + startX: xScale.invert(x0 < x1 ? x0 : x1), + endX: xScale.invert(x0 < x1 ? x1 : x0), + startY: yScale.invert(y0 < y1 ? y1 : y0), + endY: yScale.invert(y0 < y1 ? y0 : y1), + }; + + if (onBrushEnd) { + onBrushEnd(domainArea); + } + } + + render() { + const { marginLeft, marginTop, innerWidth, innerHeight, color, opacity } = this.props; + const { rectArea: { x, y, width, height } } = this.state; + + return ( + + + + + ); + } +} + +EuiBrush.displayName = 'EuiBrush'; + +EuiBrush.propTypes = { + /** Specify the brush orientation */ + orientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL, BOTH ]), + /** Callback on brush end event with { begin, end } object returned. */ + onBrushEnd: PropTypes.func.isRequired, + color: PropTypes.string, + opacity: PropTypes.number, +}; + +EuiBrush.defaultProps = { + orientation: HORIZONTAL, + color: 'rgb(0,0, 0)', + opacity: 0.2, +} diff --git a/src/components/xy_chart/highlight.js b/src/components/xy_chart/highlight.js deleted file mode 100644 index bf24a0c4a2ba..000000000000 --- a/src/components/xy_chart/highlight.js +++ /dev/null @@ -1,139 +0,0 @@ -import React from 'react'; -import { ScaleUtils, AbstractSeries } from 'react-vis'; - -export class EuiHighlight extends AbstractSeries { - static displayName = 'EuiHighlightOverlay'; - static defaultProps = { - allow: 'x', - color: 'rgb(0,0, 0)', - opacity: 0.2, - }; - state = { - drawing: false, - drawArea: { top: 0, right: 0, bottom: 0, left: 0 }, - startLoc: 0, - }; - - _getDrawArea(loc) { - const { innerWidth } = this.props; - const { drawArea, startLoc } = this.state; - - if (loc < startLoc) { - return { - ...drawArea, - left: Math.max(loc, 0), - right: startLoc, - }; - } - - return { - ...drawArea, - right: Math.min(loc, innerWidth), - left: startLoc, - }; - } - - onParentMouseDown(e) { - const { marginLeft, innerHeight, onSelectStart } = this.props; - const location = e.nativeEvent.offsetX - marginLeft; - - this.setState({ - drawing: true, - drawArea: { - top: 0, - right: location, - bottom: innerHeight, - left: location, - }, - startLoc: location, - }); - - if (onSelectStart) { - onSelectStart(e); - } - } - - stopDrawing() { - // Quickly short-circuit if the user isn't drawing in our component - if (!this.state.drawing) { - return; - } - - const { onSelectEnd } = this.props; - const { drawArea } = this.state; - const xScale = ScaleUtils.getAttributeScale(this.props, 'x'); - - // Clear the draw area - this.setState({ - drawing: false, - drawArea: { top: 0, right: 0, bottom: 0, left: 0 }, - startLoc: 0, - }); - - // Don't invoke the callback if the selected area was < 5px. - // This is a click not a select - if (Math.abs(drawArea.right - drawArea.left) < 5) { - return; - } - - // Compute the corresponding domain drawn - const domainArea = { - end: xScale.invert(drawArea.right), - begin: xScale.invert(drawArea.left), - }; - - if (onSelectEnd) { - onSelectEnd(domainArea); - } - } - - onParentMouseMove(e) { - e.preventDefault(); - const { marginLeft, onSelect } = this.props; - const { drawing } = this.state; - const loc = e.nativeEvent.offsetX - marginLeft; - - if (drawing) { - const newDrawArea = this._getDrawArea(loc); - this.setState({ drawArea: newDrawArea }); - - if (onSelect) { - onSelect(e); - } - } - } - - render() { - const { marginLeft, marginTop, innerWidth, innerHeight, color, opacity } = this.props; - const { drawArea: { left, right, top, bottom } } = this.state; - - return ( - this.stopDrawing()} - onMouseLeave={() => this.stopDrawing()} - > - - - - ); - } -} diff --git a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap index 6c18140b1f74..d9e472cf5317 100644 --- a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap @@ -15,8 +15,11 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` > )} - {onSelectEnd && } + {showBrush && } ); @@ -154,8 +156,6 @@ XYChart.propTypes = { yPadding: PropTypes.number, /** TODO */ onHover: PropTypes.func, - /** Activate the brush tool and callback on brush end event. */ - onSelectEnd: PropTypes.func, /** TODO */ truncateLegends: PropTypes.bool, /** TODO */ @@ -168,6 +168,12 @@ XYChart.propTypes = { onCrosshairUpdate: PropTypes.func, /** Show the default X and Y axis. */ showDefaultAxis: PropTypes.bool, + /** Enable the brush tool */ + showBrush: PropTypes.bool, + /** Specify the brush orientation */ + brushOrientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL, BOTH ]), + /** Callback on brush end event with { begin, end } object returned. */ + onBrushEnd: PropTypes.func, }; XYChart.defaultProps = { @@ -176,9 +182,12 @@ XYChart.defaultProps = { yType: 'linear', yPadding: 0, xPadding: 0, - orientation: EuiXYChartUtils.ORIENTATION.VERTICAL, + orientation: VERTICAL, showCrosshair: true, showDefaultAxis: true, + showBrush: false, + brushOrientation: HORIZONTAL, + onBrushEnd: () => ({}), }; export const EuiXYChart = makeVisFlexible(XYChart); diff --git a/src/components/xy_chart/xy_chart.test.js b/src/components/xy_chart/xy_chart.test.js index 28715c9933be..f04e8a0f2c00 100644 --- a/src/components/xy_chart/xy_chart.test.js +++ b/src/components/xy_chart/xy_chart.test.js @@ -26,7 +26,7 @@ describe('EuiXYChart', () => { height={200} onHover={() => {}} onMouseLeave={() => {}} - onSelectEnd={() => {}} + onBrushEnd={() => {}} yTicks={[[0, 'zero'], [100, 'one hundred']]} xTicks={[[0, 'zero', 5, 'five'], [10, '10']]} /> From 4408a0858dc719bad7dbebf61e3994ce34d962b9 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 21 Jun 2018 14:51:38 +0200 Subject: [PATCH 31/68] Fix Axis example rotation to a useful one --- src-docs/src/views/xy_chart_axis/simple_axis.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/xy_chart_axis/simple_axis.js b/src-docs/src/views/xy_chart_axis/simple_axis.js index 13d0bb90d3c8..b511a85b3069 100644 --- a/src-docs/src/views/xy_chart_axis/simple_axis.js +++ b/src-docs/src/views/xy_chart_axis/simple_axis.js @@ -33,7 +33,7 @@ export default () => ( title="Top X Axis" titlePosition={EuiXYChartAxisUtils.TITLE_POSITION.END} orientation={EuiXYChartAxisUtils.ORIENTATION.TOP} - tickLabelAngle={-180} + tickLabelAngle={-45} /> ); From e523c42acee9c4ea26348d60d33393e6b43b9257 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 21 Jun 2018 14:58:31 +0200 Subject: [PATCH 32/68] Fix xType and yType propTypes --- src/components/xy_chart/utils/chart_utils.js | 11 +++++++++++ src/components/xy_chart/xy_chart.js | 17 +++++++++++++---- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components/xy_chart/utils/chart_utils.js b/src/components/xy_chart/utils/chart_utils.js index c867d5634f66..c616052edf24 100644 --- a/src/components/xy_chart/utils/chart_utils.js +++ b/src/components/xy_chart/utils/chart_utils.js @@ -4,6 +4,17 @@ const ORIENTATION = { BOTH: 'both', }; +const SCALE_TYPE = { + LINEAR: 'linear', + ORDINAL: 'ordinal', + CATEGORY: 'category', + TIME: 'time', + TIME_UTC: 'time-utc', + LOG: 'log', + LITERA: 'literal' +}; + export const EuiXYChartUtils = { ORIENTATION, + SCALE_TYPE, } diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index 269ef62ae77f..5da029f921eb 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -11,6 +11,15 @@ import StatusText from './status-text'; import { getSeriesChildren } from './utils/series_utils'; import { EuiXYChartUtils } from './utils/chart_utils'; const { HORIZONTAL, VERTICAL, BOTH } = EuiXYChartUtils.ORIENTATION +const { + LINEAR, + ORDINAL, + CATEGORY, + TIME, + TIME_UTC, + LOG, + LITERAL, +} = EuiXYChartUtils.SCALE_TYPE; class XYExtendedPlot extends XYPlot { /** @@ -142,10 +151,10 @@ XYChart.propTypes = { animation: PropTypes.bool, /** TODO */ stackBy: PropTypes.string, - /** The main x axis scale type. */ - xType: PropTypes.string, - /** The main y axis scale type. */ - yType: PropTypes.string, + /** The main x axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md */ + xType: PropTypes.oneOf([ LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL ]), + /** The main y axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md*/ + xType: PropTypes.oneOf([ LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL ]), /** Manually specify the domain of x axis. */ xDomain: PropTypes.array, /** Manually specify the domain of y axis. */ From 5aa901893ca48bb2d6d8977b6d454fc9f343e6be Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 21 Jun 2018 15:00:04 +0200 Subject: [PATCH 33/68] Removed unused functions getTicks and getTicksLabels from default_axis --- src/components/xy_chart/axis/default_axis.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/components/xy_chart/axis/default_axis.js b/src/components/xy_chart/axis/default_axis.js index 22752510cd3e..e41658eb4cd1 100644 --- a/src/components/xy_chart/axis/default_axis.js +++ b/src/components/xy_chart/axis/default_axis.js @@ -6,24 +6,6 @@ import { EuiHorizontalGrid } from './horizontal_grid'; import { EuiVerticalGrid } from './vertical_grid'; import { EuiXYChartUtils } from '../utils/chart_utils'; export class EuiDefaultAxis extends PureComponent { - _getTickLabels(ticks) { - if (!ticks) return; - - return ticks.map(v => { - return v[1]; - }); - } - - _getTicks(ticks) { - if (!ticks) return; - - { - return ticks.map(v => { - return v[0]; - }); - } - } - render() { const { showGridLines, orientation, ...rest } = this.props; From 092f97071baf62445e5aa9b5dbe3858f1b67f38e Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 21 Jun 2018 15:01:45 +0200 Subject: [PATCH 34/68] Removed unneccessary tspan for a better Fragment on tspanTextWrapper --- src/components/xy_chart/utils/text_utils.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/xy_chart/utils/text_utils.js b/src/components/xy_chart/utils/text_utils.js index 669b468cea00..520cce7a8201 100644 --- a/src/components/xy_chart/utils/text_utils.js +++ b/src/components/xy_chart/utils/text_utils.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { Fragment } from 'react' /** * Simplified version of tspan wrapper that takes an array of Strings. @@ -9,7 +9,7 @@ import React from 'react' */ function tspanTextWrapper(texts) { return ( - + { texts.map((piece, i) => { return ( @@ -17,7 +17,7 @@ function tspanTextWrapper(texts) { ) }) } - + ) } From 71216ce7f22e9621c4f4ce47dd2bf05c6916e571 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 22 Jun 2018 12:26:19 +0200 Subject: [PATCH 35/68] Removed showLine from line_series --- .../__snapshots__/line_series.test.js.snap | 2 - src/components/xy_chart/series/line_series.js | 49 ++++++++----------- 2 files changed, 21 insertions(+), 30 deletions(-) diff --git a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap index d1356432caeb..b79629e92333 100644 --- a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap @@ -160,7 +160,6 @@ exports[`EuiLineSeries all props are rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={0} - showLine={true} showLineMarks={true} sizeDomain={Array []} sizeRange={ @@ -2975,7 +2974,6 @@ exports[`EuiLineSeries is rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={0} - showLine={true} showLineMarks={true} sizeDomain={Array []} sizeRange={ diff --git a/src/components/xy_chart/series/line_series.js b/src/components/xy_chart/series/line_series.js index 08fc2e7ac5cc..bb35fd066428 100644 --- a/src/components/xy_chart/series/line_series.js +++ b/src/components/xy_chart/series/line_series.js @@ -11,7 +11,6 @@ export class EuiLineSeries extends AbstractSeries { curve, onClick, onMarkClick, - showLine, showLineMarks, lineSize, lineMarkColor, @@ -22,33 +21,29 @@ export class EuiLineSeries extends AbstractSeries { return ( - {showLine && - - } - {showLine && - + - } + }} + color={color} + /> {showLineMarks && ( Date: Fri, 22 Jun 2018 12:31:40 +0200 Subject: [PATCH 36/68] Renamed on0 to onZero props for axis components --- src/components/xy_chart/axis/default_axis.js | 12 +++++++----- src/components/xy_chart/axis/x_axis.js | 10 +++++----- src/components/xy_chart/axis/y_axis.js | 8 ++++---- .../series/__snapshots__/area_series.test.js.snap | 12 ++++++++---- .../series/__snapshots__/line_series.test.js.snap | 12 ++++++++---- 5 files changed, 32 insertions(+), 22 deletions(-) diff --git a/src/components/xy_chart/axis/default_axis.js b/src/components/xy_chart/axis/default_axis.js index e41658eb4cd1..a641de774a9e 100644 --- a/src/components/xy_chart/axis/default_axis.js +++ b/src/components/xy_chart/axis/default_axis.js @@ -7,7 +7,7 @@ import { EuiVerticalGrid } from './vertical_grid'; import { EuiXYChartUtils } from '../utils/chart_utils'; export class EuiDefaultAxis extends PureComponent { render() { - const { showGridLines, orientation, ...rest } = this.props; + const { showGridLines, orientation, xOnZero, yOnZero, ...rest } = this.props; return ( @@ -16,8 +16,8 @@ export class EuiDefaultAxis extends PureComponent { {showGridLines && orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL && } - - + + ); } @@ -28,13 +28,15 @@ EuiDefaultAxis.displayName = 'EuiDefaultAxis'; EuiDefaultAxis.propTypes = { orientation: PropTypes.string, showGridLines: PropTypes.bool, - yOn0: PropTypes.bool, - xOn0: PropTypes.bool, + yOnZero: PropTypes.bool, + xOnZero: PropTypes.bool, }; EuiDefaultAxis.defaultProps = { orientation: false, showGridLines: true, + xOnZero: false, + yOnZero: false, }; EuiDefaultAxis.requiresSVG = true; diff --git a/src/components/xy_chart/axis/x_axis.js b/src/components/xy_chart/axis/x_axis.js index d282b15745bd..7196f91c620a 100644 --- a/src/components/xy_chart/axis/x_axis.js +++ b/src/components/xy_chart/axis/x_axis.js @@ -15,7 +15,7 @@ export class EuiXAxis extends PureComponent { tickLabelAngle, tickFormat, tickValues, - on0, + onZero, ...rest } = this.props; return ( @@ -23,7 +23,7 @@ export class EuiXAxis extends PureComponent { title={title} position={titlePosition} orientation={orientation} - on0={on0} + on0={onZero} tickSize={tickSize} tickFormat={tickFormat} tickValues={tickValues} @@ -51,7 +51,7 @@ EuiXAxis.propTypes = { ORIENTATION.BOTTOM, ]), /** Fix the axis at zero value */ - on0: PropTypes.bool, + onZero: PropTypes.bool, /** An array of ticks values */ ticks: PropTypes.array, /** The height of the ticks in pixels */ @@ -65,10 +65,10 @@ EuiXAxis.propTypes = { }; EuiXAxis.defaultProps = { - on0: false, + onZero: false, titlePosition: TITLE_POSITION.MIDDLE, orientation: ORIENTATION.BOTTOM, tickSize: 5, -} +}; EuiXAxis.requiresSVG = true; diff --git a/src/components/xy_chart/axis/y_axis.js b/src/components/xy_chart/axis/y_axis.js index 3188278b657e..f02da946ab22 100644 --- a/src/components/xy_chart/axis/y_axis.js +++ b/src/components/xy_chart/axis/y_axis.js @@ -15,7 +15,7 @@ export class EuiYAxis extends PureComponent { tickLabelAngle, tickFormat, tickValues, - on0, + onZero, ...rest } = this.props; return ( @@ -23,7 +23,7 @@ export class EuiYAxis extends PureComponent { title={title} position={titlePosition} orientation={orientation} - on0={on0} + on0={onZero} tickSize={tickSize} tickFormat={tickFormat} tickValues={tickValues} @@ -40,7 +40,7 @@ EuiYAxis.propTypes = { title: PropTypes.string, titlePosition: PropTypes.oneOf([TITLE_POSITION.START, TITLE_POSITION.MIDDLE, TITLE_POSITION.END]), orientation: PropTypes.oneOf([ORIENTATION.LEFT, ORIENTATION.RIGHT]), - on0: PropTypes.bool, + onZero: PropTypes.bool, ticks: PropTypes.array, tickSize: PropTypes.number, tickValues: PropTypes.array, @@ -49,7 +49,7 @@ EuiYAxis.propTypes = { }; EuiYAxis.defaultProps = { - on0: false, + onZero: false, titlePosition: TITLE_POSITION.MIDDLE, orientation: ORIENTATION.LEFT, tickSize: 5, diff --git a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap index d9e472cf5317..a0a5f5a7a71f 100644 --- a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap @@ -450,6 +450,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` 1, ] } + xOnZero={false} xPadding={0} xRange={ Array [ @@ -464,6 +465,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` 15, ] } + yOnZero={false} yPadding={0} yRange={ Array [ @@ -937,7 +939,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` marginLeft={2} marginRight={2} marginTop={2} - on0={false} + onZero={false} opacityDomain={Array []} opacityType="literal" orientation="bottom" @@ -1680,7 +1682,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` marginLeft={2} marginRight={2} marginTop={2} - on0={false} + onZero={false} opacityDomain={Array []} opacityType="literal" orientation="left" @@ -2921,6 +2923,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` 1, ] } + xOnZero={false} xPadding={0} xRange={ Array [ @@ -2935,6 +2938,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` 15, ] } + yOnZero={false} yPadding={0} yRange={ Array [ @@ -3408,7 +3412,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` marginLeft={2} marginRight={2} marginTop={2} - on0={false} + onZero={false} opacityDomain={Array []} opacityType="literal" orientation="bottom" @@ -4151,7 +4155,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` marginLeft={2} marginRight={2} marginTop={2} - on0={false} + onZero={false} opacityDomain={Array []} opacityType="literal" orientation="left" diff --git a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap index b79629e92333..d2ad5ed71ade 100644 --- a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap @@ -787,6 +787,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` 1, ] } + xOnZero={false} xPadding={0} xRange={ Array [ @@ -801,6 +802,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` 15, ] } + yOnZero={false} yPadding={0} yRange={ Array [ @@ -1274,7 +1276,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` marginLeft={2} marginRight={2} marginTop={2} - on0={false} + onZero={false} opacityDomain={Array []} opacityType="literal" orientation="bottom" @@ -2017,7 +2019,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` marginLeft={2} marginRight={2} marginTop={2} - on0={false} + onZero={false} opacityDomain={Array []} opacityType="literal" orientation="left" @@ -3596,6 +3598,7 @@ exports[`EuiLineSeries is rendered 1`] = ` 1, ] } + xOnZero={false} xPadding={0} xRange={ Array [ @@ -3610,6 +3613,7 @@ exports[`EuiLineSeries is rendered 1`] = ` 15, ] } + yOnZero={false} yPadding={0} yRange={ Array [ @@ -4083,7 +4087,7 @@ exports[`EuiLineSeries is rendered 1`] = ` marginLeft={2} marginRight={2} marginTop={2} - on0={false} + onZero={false} opacityDomain={Array []} opacityType="literal" orientation="bottom" @@ -4826,7 +4830,7 @@ exports[`EuiLineSeries is rendered 1`] = ` marginLeft={2} marginRight={2} marginTop={2} - on0={false} + onZero={false} opacityDomain={Array []} opacityType="literal" orientation="left" From 7ffb5a0e31270268dd9f728079437ef1474d52da Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 22 Jun 2018 13:31:43 +0200 Subject: [PATCH 37/68] Renamed EuiBrush to EuiSelectionBrush --- src/components/xy_chart/brush.js | 12 ++++++------ src/components/xy_chart/xy_chart.js | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/xy_chart/brush.js b/src/components/xy_chart/brush.js index b234ed9c664a..c298f66d62e1 100644 --- a/src/components/xy_chart/brush.js +++ b/src/components/xy_chart/brush.js @@ -19,7 +19,7 @@ const DEFAULT_AREAS = { } }; -export class EuiBrush extends AbstractSeries { +export class EuiSelectionBrush extends AbstractSeries { state = { drawing: false, ...DEFAULT_AREAS, @@ -127,7 +127,7 @@ export class EuiBrush extends AbstractSeries { return ( @@ -141,7 +141,7 @@ export class EuiBrush extends AbstractSeries { height={innerHeight} /> )} - {showBrush && } + {showBrush && } ); From 20171ee75eea534463e880de46627af0dedbf214 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 22 Jun 2018 13:33:39 +0200 Subject: [PATCH 38/68] Renamed prop animation to animateData in XYChart --- .../__snapshots__/xy_chart.test.js.snap | 1 + .../__snapshots__/area_series.test.js.snap | 5257 +++++++++---- .../__snapshots__/line_series.test.js.snap | 6847 +++++++++++++---- src/components/xy_chart/xy_chart.js | 8 +- 4 files changed, 9016 insertions(+), 3097 deletions(-) diff --git a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap index 7be629b8a635..a55843cacf67 100644 --- a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap +++ b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap @@ -82,6 +82,7 @@ exports[`EuiXYChart passes handler functions 1`] = ` } > -
+
- + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + + + + + @@ -385,7 +733,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -494,7 +842,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -598,7 +946,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" colorDomain={Array []} colorRange={ @@ -710,7 +1058,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" colorDomain={Array []} colorRange={ @@ -803,81 +1151,344 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` } yType="linear" > - - - - - + - - + > + + + + + + + + + + + @@ -900,7 +1511,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -1008,7 +1619,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="x" attrAxis="y" colorDomain={Array []} @@ -1118,7 +1729,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="x" attrAxis="y" className="" @@ -1212,415 +1823,685 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` } yType="linear" > - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - + + - - 0.3 - + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - + + + @@ -1643,7 +2524,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -1751,7 +2632,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" attrAxis="x" colorDomain={Array []} @@ -1861,7 +2742,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" attrAxis="x" className="" @@ -1955,271 +2836,541 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` } yType="linear" > - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - + + - 14 - + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + - - - + + + @@ -2246,7 +3397,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` _colorValue="#79C7E3" _opacityValue={1} angleDomain={Array []} - animation={null} + animation={true} clusters={ Set { undefined, @@ -2361,7 +3512,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` _colorValue="#79C7E3" _opacityValue={1} angleDomain={Array []} - animation={null} + animation={true} clusters={ Set { undefined, @@ -2490,6 +3641,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` } >
- + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + + + + + @@ -2858,7 +4346,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -2967,7 +4455,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -3071,7 +4559,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" colorDomain={Array []} colorRange={ @@ -3183,7 +4671,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" colorDomain={Array []} colorRange={ @@ -3276,81 +4764,344 @@ exports[`EuiAreaSeries is rendered 1`] = ` } yType="linear" > - - - - - + - - + > + + + + + + + + + + + @@ -3373,7 +5124,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -3481,7 +5232,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="x" attrAxis="y" colorDomain={Array []} @@ -3591,7 +5342,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="x" attrAxis="y" className="" @@ -3685,415 +5436,685 @@ exports[`EuiAreaSeries is rendered 1`] = ` } yType="linear" > - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - + + - 0.2 - + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - + + + @@ -4116,7 +6137,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -4224,7 +6245,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" attrAxis="x" colorDomain={Array []} @@ -4334,7 +6355,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" attrAxis="x" className="" @@ -4428,271 +6449,541 @@ exports[`EuiAreaSeries is rendered 1`] = ` } yType="linear" > - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - + + - 14 - + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + - - - + + + @@ -4719,7 +7010,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` _colorValue="#79C7E3" _opacityValue={1} angleDomain={Array []} - animation={null} + animation={true} clusters={ Set { undefined, @@ -4834,7 +7125,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` _colorValue="#79C7E3" _opacityValue={1} angleDomain={Array []} - animation={null} + animation={true} clusters={ Set { undefined, diff --git a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap index d2ad5ed71ade..3e8f7c6dba4b 100644 --- a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap @@ -14,6 +14,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` } > -
+
- + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + + + + + - - - + + + + + + + + - - - - + > + + + + + + + + @@ -722,7 +1738,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -831,7 +1847,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -935,7 +1951,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" colorDomain={Array []} colorRange={ @@ -1047,7 +2063,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" colorDomain={Array []} colorRange={ @@ -1140,81 +2156,344 @@ exports[`EuiLineSeries all props are rendered 1`] = ` } yType="linear" > - - + - - - - - + yType="linear" + > + + + + + + + + + + @@ -1237,7 +2516,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -1345,7 +2624,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="x" attrAxis="y" colorDomain={Array []} @@ -1455,7 +2734,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="x" attrAxis="y" className="" @@ -1532,432 +2811,702 @@ exports[`EuiLineSeries all props are rendered 1`] = ` 0, 596, ] - } - xType="linear" - yDomain={ - Array [ - 5, - 15, - ] - } - yPadding={0} - yRange={ - Array [ - 196, - 0, - ] - } - yType="linear" - > - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + + - - - 0.9 - - - - - + + - 1.0 - + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + - - - + + + @@ -1980,7 +3529,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -2088,7 +3637,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" attrAxis="x" colorDomain={Array []} @@ -2198,7 +3747,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" attrAxis="x" className="" @@ -2292,271 +3841,541 @@ exports[`EuiLineSeries all props are rendered 1`] = ` } yType="linear" > - - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - + - - - 12 - - - - - + + - 14 - + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + - - - + + + @@ -2583,7 +4402,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` _colorValue="#79C7E3" _opacityValue={1} angleDomain={Array []} - animation={null} + animation={true} clusters={ Set { undefined, @@ -2698,7 +4517,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` _colorValue="#79C7E3" _opacityValue={1} angleDomain={Array []} - animation={null} + animation={true} clusters={ Set { undefined, @@ -2827,6 +4646,7 @@ exports[`EuiLineSeries is rendered 1`] = ` } >
- + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + + + + + - + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + + + + + - - - - + > + + + + + + + + @@ -3533,7 +6357,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -3642,7 +6466,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -3746,7 +6570,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" colorDomain={Array []} colorRange={ @@ -3858,7 +6682,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" colorDomain={Array []} colorRange={ @@ -3951,81 +6775,344 @@ exports[`EuiLineSeries is rendered 1`] = ` } yType="linear" > - - - - + - - - + getAngle={[Function]} + getAngle0={[Function]} + getColor={[Function]} + getColor0={[Function]} + getFill={[Function]} + getFill0={[Function]} + getOpacity={[Function]} + getOpacity0={[Function]} + getRadius={[Function]} + getRadius0={[Function]} + getSize={[Function]} + getSize0={[Function]} + getStroke={[Function]} + getStroke0={[Function]} + getX={[Function]} + getX0={[Function]} + getY={[Function]} + getY0={[Function]} + innerHeight={196} + innerWidth={596} + marginBottom={2} + marginLeft={2} + marginRight={2} + marginTop={2} + opacityDomain={Array []} + opacityType="literal" + radiusDomain={Array []} + sizeDomain={Array []} + sizeRange={ + Array [ + 1, + 10, + ] + } + strokeDomain={Array []} + strokeRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + style={ + Object { + "strokeDasharray": "5 5", + "strokeOpacity": 0.3, + } + } + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + + + + + + + + + @@ -4048,7 +7135,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -4156,7 +7243,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="x" attrAxis="y" colorDomain={Array []} @@ -4266,7 +7353,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="x" attrAxis="y" className="" @@ -4360,415 +7447,685 @@ exports[`EuiLineSeries is rendered 1`] = ` } yType="linear" > - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - + Object { + "x": 0, + "y": 5, + }, + Object { + "x": 1, + "y": 15, + }, + ], + undefined, + ] + } + angleDomain={Array []} + animatedProps={ + Array [ + "xRange", + "yRange", + "xDomain", + "yDomain", + "width", + "height", + "marginLeft", + "marginTop", + "marginRight", + "marginBottom", + "tickSize", + "tickTotal", + "tickSizeInner", + "tickSizeOuter", + ] + } + animation={true} + attr="x" + attrAxis="y" + className="" + colorDomain={Array []} + colorRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + fillDomain={Array []} + fillRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + getAngle={[Function]} + getAngle0={[Function]} + getColor={[Function]} + getColor0={[Function]} + getFill={[Function]} + getFill0={[Function]} + getOpacity={[Function]} + getOpacity0={[Function]} + getRadius={[Function]} + getRadius0={[Function]} + getSize={[Function]} + getSize0={[Function]} + getStroke={[Function]} + getStroke0={[Function]} + getX={[Function]} + getX0={[Function]} + getY={[Function]} + getY0={[Function]} + innerHeight={196} + innerWidth={596} + marginBottom={2} + marginLeft={2} + marginRight={2} + marginTop={2} + on0={false} + opacityDomain={Array []} + opacityType="literal" + orientation="bottom" + position="middle" + radiusDomain={Array []} + sizeDomain={Array []} + sizeRange={ + Array [ + 1, + 10, + ] + } + strokeDomain={Array []} + strokeRange={ + Array [ + "#EF5D28", + "#FF9833", + ] + } + style={Object {}} + tickPadding={8} + tickSize={0} + xDomain={ + Array [ + 0, + 1, + ] + } + xPadding={0} + xRange={ + Array [ + 0, + 596, + ] + } + xType="linear" + yDomain={ + Array [ + 5, + 15, + ] + } + yPadding={0} + yRange={ + Array [ + 196, + 0, + ] + } + yType="linear" + > + + - - - 0.9 - - - - - + + - 1.0 - + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + - - - + + + @@ -4791,7 +8148,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} colorDomain={Array []} colorRange={ Array [ @@ -4899,7 +8256,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" attrAxis="x" colorDomain={Array []} @@ -5009,7 +8366,7 @@ exports[`EuiLineSeries is rendered 1`] = ` ] } angleDomain={Array []} - animation={null} + animation={true} attr="y" attrAxis="x" className="" @@ -5103,271 +8460,541 @@ exports[`EuiLineSeries is rendered 1`] = ` } yType="linear" > - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - + + - - 14 - + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + - - - + + + @@ -5394,7 +9021,7 @@ exports[`EuiLineSeries is rendered 1`] = ` _colorValue="#79C7E3" _opacityValue={1} angleDomain={Array []} - animation={null} + animation={true} clusters={ Set { undefined, @@ -5509,7 +9136,7 @@ exports[`EuiLineSeries is rendered 1`] = ` _colorValue="#79C7E3" _opacityValue={1} angleDomain={Array []} - animation={null} + animation={true} clusters={ Set { undefined, diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index 039e13422603..a60974fd35e3 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -88,7 +88,7 @@ class XYChart extends PureComponent { yDomain, yPadding, xPadding, - animation, + animateData, showDefaultAxis, showCrosshair, showBrush, @@ -115,7 +115,7 @@ class XYChart extends PureComponent { onMouseMove={this._onMouseMove} onMouseLeave={this._onMouseLeave} width={width} - animation={animation} + animation={animateData} height={height} margin={2} xType={xType} @@ -148,7 +148,7 @@ XYChart.propTypes = { /** The orientation of the chart. */ orientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL ]), /** If the chart animates on data changes. */ - animation: PropTypes.bool, + animateData: PropTypes.bool, /** TODO */ stackBy: PropTypes.string, /** The main x axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md */ @@ -186,7 +186,7 @@ XYChart.propTypes = { }; XYChart.defaultProps = { - animation: true, + animateData: true, xType: 'linear', yType: 'linear', yPadding: 0, From fb5431f1cd90038d5cc684eb0ced0e8301698ad2 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 22 Jun 2018 13:39:24 +0200 Subject: [PATCH 39/68] Renamed selection brush props on XYChart --- src-docs/src/views/xy_chart/complex.js | 8 ++++---- .../__snapshots__/xy_chart.test.js.snap | 5 +++-- .../__snapshots__/area_series.test.js.snap | 12 +++++------ .../__snapshots__/line_series.test.js.snap | 12 +++++------ src/components/xy_chart/xy_chart.js | 20 +++++++++---------- 5 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src-docs/src/views/xy_chart/complex.js b/src-docs/src/views/xy_chart/complex.js index ac7a89269232..313f0b3c182c 100644 --- a/src-docs/src/views/xy_chart/complex.js +++ b/src-docs/src/views/xy_chart/complex.js @@ -25,7 +25,7 @@ export default class ComplexDemo extends Component { state = { brushOutput: 'Please drag your mouse to select an area' } - onHandleBrushEnd = (area) => { + handleSelectionBrushEnd = (area) => { this.setState(() => ({ brushOutput: JSON.stringify(area, null, 2), })); @@ -39,9 +39,9 @@ export default class ComplexDemo extends Component { diff --git a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap index a55843cacf67..f591f58618f2 100644 --- a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap +++ b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap @@ -84,13 +84,14 @@ exports[`EuiXYChart passes handler functions 1`] = ` )} - {showBrush && } + {enableSelectionBrush && }
); @@ -178,11 +178,11 @@ XYChart.propTypes = { /** Show the default X and Y axis. */ showDefaultAxis: PropTypes.bool, /** Enable the brush tool */ - showBrush: PropTypes.bool, + enableSelectionBrush: PropTypes.bool, /** Specify the brush orientation */ - brushOrientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL, BOTH ]), + selectionBrushOrientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL, BOTH ]), /** Callback on brush end event with { begin, end } object returned. */ - onBrushEnd: PropTypes.func, + onSelectionBrushEnd: PropTypes.func, }; XYChart.defaultProps = { @@ -194,9 +194,9 @@ XYChart.defaultProps = { orientation: VERTICAL, showCrosshair: true, showDefaultAxis: true, - showBrush: false, - brushOrientation: HORIZONTAL, - onBrushEnd: () => ({}), + enableSelectionBrush: false, + selectionBrushOrientation: HORIZONTAL, + onSelectionBrushEnd: () => ({}), }; export const EuiXYChart = makeVisFlexible(XYChart); From 81a40445f26b49541a696ffc9053caa44bd85c93 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 22 Jun 2018 13:46:30 +0200 Subject: [PATCH 40/68] Fix wrong xy chart and line props on examples --- src-docs/src/views/xy_chart/complex.js | 2 +- src-docs/src/views/xy_chart_line/custom_style_line.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/xy_chart/complex.js b/src-docs/src/views/xy_chart/complex.js index 313f0b3c182c..d1c7784e4b58 100644 --- a/src-docs/src/views/xy_chart/complex.js +++ b/src-docs/src/views/xy_chart/complex.js @@ -39,7 +39,7 @@ export default class ComplexDemo extends Component { From b0ad4950d6ef4bc866714f8cefff2777edbe9e6d Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 25 Jun 2018 14:17:08 +0200 Subject: [PATCH 41/68] Add prop checking for series color --- .../__snapshots__/area_series.test.js.snap | 20 +++++------ .../horizontal_bar_series.test.js.snap | 12 +++---- .../horizontal_rect_series.test.js.snap | 12 +++---- .../__snapshots__/line_series.test.js.snap | 34 +++++++++---------- .../vertical_bar_series.test.js.snap | 12 +++---- .../vertical_rect_series.test.js.snap | 12 +++---- src/components/xy_chart/series/area_series.js | 6 ++-- .../xy_chart/series/area_series.test.js | 3 +- src/components/xy_chart/series/bar_series.js | 5 +-- .../xy_chart/series/horizontal_bar_series.js | 5 +-- .../series/horizontal_bar_series.test.js | 7 ++-- .../xy_chart/series/horizontal_rect_series.js | 5 +-- .../series/horizontal_rect_series.test.js | 7 ++-- src/components/xy_chart/series/line_series.js | 6 ++-- .../xy_chart/series/line_series.test.js | 3 +- .../xy_chart/series/vertical_bar_series.js | 5 +-- .../series/vertical_bar_series.test.js | 7 ++-- .../xy_chart/series/vertical_rect_series.js | 5 +-- .../series/vertical_rect_series.test.js | 7 ++-- src/services/color/index.js | 2 +- src/services/color/visualization_colors.js | 2 ++ src/services/index.js | 1 + 22 files changed, 96 insertions(+), 82 deletions(-) diff --git a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap index 54a4ffb8c0f2..48453c178dd8 100644 --- a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap @@ -87,7 +87,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` undefined, ] } - _colorValue="#ff0000" + _colorValue="#DB1374" _opacityValue={1} angleDomain={Array []} animation={true} @@ -96,7 +96,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` undefined, } } - color="#ff0000" + color="#DB1374" colorDomain={Array []} colorRange={ Array [ @@ -224,7 +224,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` undefined, ] } - _colorValue="#ff0000" + _colorValue="#DB1374" _opacityValue={1} angleDomain={Array []} animation={true} @@ -234,7 +234,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` undefined, } } - color="#ff0000" + color="#DB1374" colorDomain={Array []} colorRange={ Array [ @@ -367,7 +367,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` undefined, ] } - _colorValue="#ff0000" + _colorValue="#DB1374" _opacityValue={1} angleDomain={Array []} animatedProps={ @@ -415,7 +415,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` undefined, } } - color="#ff0000" + color="#DB1374" colorDomain={Array []} colorRange={ Array [ @@ -567,7 +567,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` ] } _animation={0.00002} - _colorValue="#ff0000" + _colorValue="#DB1374" _opacityValue={1} angleDomain={Array []} animation={null} @@ -577,7 +577,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` undefined, } } - color="#ff0000" + color="#DB1374" colorDomain={Array []} colorRange={ Array [ @@ -700,9 +700,9 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` onMouseOver={[Function]} style={ Object { - "fill": "#ff0000", + "fill": "#DB1374", "opacity": 1, - "stroke": "#ff0000", + "stroke": "#DB1374", "strokeWidth": 0, } } diff --git a/src/components/xy_chart/series/__snapshots__/horizontal_bar_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/horizontal_bar_series.test.js.snap index dade74f85cee..7396df1ea96a 100644 --- a/src/components/xy_chart/series/__snapshots__/horizontal_bar_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/horizontal_bar_series.test.js.snap @@ -21,14 +21,14 @@ exports[`EuiHorizontalBarSeries all props are rendered 1`] = ` > { { {}} /> @@ -66,13 +67,13 @@ describe('EuiHorizontalBarSeries', () => { {}} /> {}} /> diff --git a/src/components/xy_chart/series/horizontal_rect_series.js b/src/components/xy_chart/series/horizontal_rect_series.js index 623ee20ee494..85670e4916bb 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.js +++ b/src/components/xy_chart/series/horizontal_rect_series.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { HorizontalRectSeries } from 'react-vis'; +import { VISUALIZATION_COLORS } from '../../../services'; export class EuiHorizontalRectSeries extends HorizontalRectSeries { render() { @@ -37,8 +38,8 @@ EuiHorizontalRectSeries.propTypes = { y: PropTypes.number, y0: PropTypes.number, })).isRequired, - /** Without a color set, a random EUI color palette color will be chosen */ - color: PropTypes.string, + /** An EUI visualization color, the default value is enforced by EuiXYChart */ + color: PropTypes.oneOf(VISUALIZATION_COLORS), onClick: PropTypes.func }; diff --git a/src/components/xy_chart/series/horizontal_rect_series.test.js b/src/components/xy_chart/series/horizontal_rect_series.test.js index 1538d5aefb5c..0d74a3301c6d 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.test.js +++ b/src/components/xy_chart/series/horizontal_rect_series.test.js @@ -5,6 +5,7 @@ import { requiredProps } from '../../../test/required_props'; import { EuiXYChart } from '../xy_chart'; import { EuiHorizontalRectSeries } from './horizontal_rect_series'; +import { VISUALIZATION_COLORS } from '../../../services'; beforeEach(patchRandom); afterEach(unpatchRandom); @@ -46,7 +47,7 @@ describe('EuiHorizontalRectSeries', () => { {}} /> @@ -66,13 +67,13 @@ describe('EuiHorizontalRectSeries', () => { {}} /> {}} /> diff --git a/src/components/xy_chart/series/line_series.js b/src/components/xy_chart/series/line_series.js index bb35fd066428..47cb79b28ae7 100644 --- a/src/components/xy_chart/series/line_series.js +++ b/src/components/xy_chart/series/line_series.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; - import { LineSeries, MarkSeries, AbstractSeries } from 'react-vis'; +import { VISUALIZATION_COLORS } from '../../../services'; export class EuiLineSeries extends AbstractSeries { render() { @@ -79,8 +79,8 @@ EuiLineSeries.propTypes = { PropTypes.number ]), })).isRequired, - /** Without a color set, a random EUI color palette color will be chosen */ - color: PropTypes.string, + /** An EUI visualization color, the default value is enforced by EuiXYChart */ + color: PropTypes.oneOf(VISUALIZATION_COLORS), curve: PropTypes.string, showLineMarks: PropTypes.bool, lineSize: PropTypes.number, diff --git a/src/components/xy_chart/series/line_series.test.js b/src/components/xy_chart/series/line_series.test.js index 9eb7863ef0aa..fd43a81014a0 100644 --- a/src/components/xy_chart/series/line_series.test.js +++ b/src/components/xy_chart/series/line_series.test.js @@ -6,6 +6,7 @@ import { requiredProps } from '../../../test/required_props'; import { EuiXYChart } from '../xy_chart'; import { EuiLineSeries } from './line_series'; +import { VISUALIZATION_COLORS } from '../../../services'; beforeEach(patchRandom); afterEach(unpatchRandom); @@ -30,7 +31,7 @@ describe('EuiLineSeries', () => { { {}} /> @@ -67,13 +68,13 @@ describe('EuiVerticalBarSeries', () => { {}} /> {}} /> diff --git a/src/components/xy_chart/series/vertical_rect_series.js b/src/components/xy_chart/series/vertical_rect_series.js index 37bc50bed85b..2d0326dbdfd5 100644 --- a/src/components/xy_chart/series/vertical_rect_series.js +++ b/src/components/xy_chart/series/vertical_rect_series.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { VerticalRectSeries } from 'react-vis'; +import { VISUALIZATION_COLORS } from '../../../services'; export class EuiVerticalRectSeries extends VerticalRectSeries { render() { @@ -38,8 +39,8 @@ EuiVerticalRectSeries.propTypes = { x: PropTypes.number, y: PropTypes.number, })).isRequired, - /** Without a color set, a random EUI color palette color will be chosen */ - color: PropTypes.string, + /** An EUI visualization color, the default value is enforced by EuiXYChart */ + color: PropTypes.oneOf(VISUALIZATION_COLORS), onClick: PropTypes.func }; diff --git a/src/components/xy_chart/series/vertical_rect_series.test.js b/src/components/xy_chart/series/vertical_rect_series.test.js index c44212074a52..2821e427f079 100644 --- a/src/components/xy_chart/series/vertical_rect_series.test.js +++ b/src/components/xy_chart/series/vertical_rect_series.test.js @@ -6,6 +6,7 @@ import { requiredProps } from '../../../test/required_props'; import { EuiXYChart } from '../xy_chart'; import { EuiVerticalRectSeries } from './vertical_rect_series'; import { benchmarkFunction } from '../../../test/time_execution'; +import { VISUALIZATION_COLORS } from '../../../services'; beforeEach(patchRandom); afterEach(unpatchRandom); @@ -47,7 +48,7 @@ describe('EuiVerticalRectSeries', () => { {}} /> @@ -67,13 +68,13 @@ describe('EuiVerticalRectSeries', () => { {}} /> {}} /> diff --git a/src/services/color/index.js b/src/services/color/index.js index 750249aabcb1..0c4908fe99b4 100644 --- a/src/services/color/index.js +++ b/src/services/color/index.js @@ -2,4 +2,4 @@ export { isColorDark } from './is_color_dark'; export { hexToRgb } from './hex_to_rgb'; export { rgbToHex } from './rgb_to_hex'; export { calculateContrast, calculateLuminance } from './luminance_and_contrast'; -export { VISUALIZATION_COLORS } from './visualization_colors'; +export { VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR } from './visualization_colors'; diff --git a/src/services/color/visualization_colors.js b/src/services/color/visualization_colors.js index b628f4b7c224..0ca8ab243ced 100644 --- a/src/services/color/visualization_colors.js +++ b/src/services/color/visualization_colors.js @@ -14,3 +14,5 @@ export const VISUALIZATION_COLORS = [ '#461A0A', '#920000', ]; + +export const DEFAULT_VISUALIZATION_COLOR = VISUALIZATION_COLORS[1]; diff --git a/src/services/index.js b/src/services/index.js index 0a71e340409d..ade40feeeac0 100644 --- a/src/services/index.js +++ b/src/services/index.js @@ -22,6 +22,7 @@ export { hexToRgb, rgbToHex, VISUALIZATION_COLORS, + DEFAULT_VISUALIZATION_COLOR, } from './color'; export { From d275c08ebbf30910c2e803b445fc2ca9fd418011 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 25 Jun 2018 14:19:30 +0200 Subject: [PATCH 42/68] Fix custom line example after removing showLine props from EuiLineSeries --- src-docs/src/views/xy_chart_line/custom_style_line.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src-docs/src/views/xy_chart_line/custom_style_line.js b/src-docs/src/views/xy_chart_line/custom_style_line.js index 48a0b12f0cc1..4bf72ee4d3ab 100644 --- a/src-docs/src/views/xy_chart_line/custom_style_line.js +++ b/src-docs/src/views/xy_chart_line/custom_style_line.js @@ -22,17 +22,12 @@ export default class extends Component { lineMarkSize: '4', lineSize: '2', lineProps: [ - { - id: `showLine`, - label: 'Show Line', - }, { id: `showLineMarks`, label: 'Show Line Marks', }, ], linePropsIdToSelectedMap: { - showLine: true, showLineMarks: true, }, }; From 1b7b677d10f3b279efd5ad8c7b0863bb00a39505 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 25 Jun 2018 15:49:35 +0200 Subject: [PATCH 43/68] Add basic annotation component --- .../src/views/xy_chart_axis/annotations.js | 51 +++++++ .../views/xy_chart_axis/xy_axis_example.js | 30 +++- src-docs/src/views/xy_chart_line/line.js | 35 ++++- src/components/index.js | 1 + src/components/xy_chart/_index.scss | 3 +- src/components/xy_chart/index.js | 1 + src/components/xy_chart/line_annotation.js | 133 ++++++++++++++++++ src/components/xy_chart/line_annotation.scss | 3 + 8 files changed, 254 insertions(+), 3 deletions(-) create mode 100644 src-docs/src/views/xy_chart_axis/annotations.js create mode 100644 src/components/xy_chart/line_annotation.js create mode 100644 src/components/xy_chart/line_annotation.scss diff --git a/src-docs/src/views/xy_chart_axis/annotations.js b/src-docs/src/views/xy_chart_axis/annotations.js new file mode 100644 index 000000000000..7dbb66ff2118 --- /dev/null +++ b/src-docs/src/views/xy_chart_axis/annotations.js @@ -0,0 +1,51 @@ +import React from 'react'; + +import { + EuiXYChart, + EuiLineSeries, + EuiLineAnnotation, + EuiXYChartUtils, + EuiXYChartAxisUtils, +} from '../../../../src/components'; + +const DATA_A = [ + { x: 0, y: 1 }, + { x: 1, y: 1 }, + { x: 2, y: 2 }, + { x: 3, y: -1 }, + { x: 4, y: null }, + { x: 5, y: 2 }, +]; + +export default () => ( + + + + + + + + + +); diff --git a/src-docs/src/views/xy_chart_axis/xy_axis_example.js b/src-docs/src/views/xy_chart_axis/xy_axis_example.js index b57378115059..04d24bb06154 100644 --- a/src-docs/src/views/xy_chart_axis/xy_axis_example.js +++ b/src-docs/src/views/xy_chart_axis/xy_axis_example.js @@ -1,7 +1,8 @@ import React from 'react'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiXAxis, EuiYAxis } from '../../../../src/components'; +import { EuiCode, EuiXAxis, EuiYAxis, EuiLineAnnotation } from '../../../../src/components'; import SimpleAxisExampleCode from './simple_axis'; +import AnnotationExampleCode from './annotations'; export const XYChartAxisExample = { title: 'Axis', @@ -34,5 +35,32 @@ export const XYChartAxisExample = {
), }, + { + title: 'Annotations', + text: ( +
+

+ EuiLineAnnotation can be used to add annotation lines with optional text + on the chart. +

+
+ ), + props: { EuiLineAnnotation }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./simple_axis'), + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React', + }, + ], + demo: ( +
+ +
+ ), + }, ], }; diff --git a/src-docs/src/views/xy_chart_line/line.js b/src-docs/src/views/xy_chart_line/line.js index 6dc34c377c9f..7dbb66ff2118 100644 --- a/src-docs/src/views/xy_chart_line/line.js +++ b/src-docs/src/views/xy_chart_line/line.js @@ -1,6 +1,12 @@ import React from 'react'; -import { EuiXYChart, EuiLineSeries } from '../../../../src/components'; +import { + EuiXYChart, + EuiLineSeries, + EuiLineAnnotation, + EuiXYChartUtils, + EuiXYChartAxisUtils, +} from '../../../../src/components'; const DATA_A = [ { x: 0, y: 1 }, @@ -14,5 +20,32 @@ const DATA_A = [ export default () => ( + + + + + + ); diff --git a/src/components/index.js b/src/components/index.js index cb5d86f1dbea..62565ba92f12 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -319,4 +319,5 @@ export { EuiYAxis, EuiCrosshairX, EuiCrosshairY, + EuiLineAnnotation, } from './xy_chart'; diff --git a/src/components/xy_chart/_index.scss b/src/components/xy_chart/_index.scss index abd633274265..0d63623b36d3 100644 --- a/src/components/xy_chart/_index.scss +++ b/src/components/xy_chart/_index.scss @@ -1,4 +1,5 @@ @import "reactvis"; @import "legend"; -@import "chart"; \ No newline at end of file +@import "chart"; +@import "line_annotation"; diff --git a/src/components/xy_chart/index.js b/src/components/xy_chart/index.js index 2a105961fc2a..7f2a702d8167 100644 --- a/src/components/xy_chart/index.js +++ b/src/components/xy_chart/index.js @@ -1,4 +1,5 @@ export { EuiXYChart } from './xy_chart'; +export { EuiLineAnnotation } from './line_annotation'; // XY chart data series export * from './series'; diff --git a/src/components/xy_chart/line_annotation.js b/src/components/xy_chart/line_annotation.js new file mode 100644 index 000000000000..3ba05353b8bc --- /dev/null +++ b/src/components/xy_chart/line_annotation.js @@ -0,0 +1,133 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { AbstractSeries, ScaleUtils } from 'react-vis'; +import { EuiXYChartUtils } from './utils/chart_utils'; +import { EuiXYChartAxisUtils } from './utils/axis_utils'; +const { HORIZONTAL, VERTICAL } = EuiXYChartUtils.ORIENTATION; +const { START, MIDDLE, END } = EuiXYChartAxisUtils.TITLE_POSITION; + +/** + * Draw simple line annotation into the chart. Currently it's a work in progress + * but will be extented to add text and tooltips if required. + * The basic usage is for displaying the current time marker. + */ +export class EuiLineAnnotation extends AbstractSeries { + /** + * Get attribute functor. + * @param {string} attr Attribute name + * @returns {*} Functor. + * @protected + */ + _getAttributeFunctor(attr) { + return ScaleUtils.getAttributeFunctor(this.props, attr); + } + /** + * Get the attribute value if it is available. + * @param {string} attr Attribute name. + * @returns {*} Attribute value if available, fallback value or undefined + * otherwise. + * @protected + */ + _getAttributeValue(attr) { + return ScaleUtils.getAttributeValue(this.props, attr); + } + _getTextXY(textPosition, min, max) { + switch (textPosition) { + case END: + return min; + case START: + return max; + case MIDDLE: + return Math.abs((max - min) / 2); + } + } + render() { + const { data, orientation, textPosition, innerHeight, innerWidth, marginLeft, marginTop } = this.props; + const axis = orientation === HORIZONTAL ? 'y' : 'x'; + const scale = this._getAttributeFunctor(axis); + + return ( + + + { + data.map((d, i) => { + const { value } = d; + const position = scale({ [axis] : value }); + return ( + + ) + }) + } + + + { + data + .filter(d => d.text) + .map((d, i) => { + const { value } = d; + let x = 0; + let y = 0; + let rotation = 0; + if (orientation === VERTICAL) { + x = scale({ [axis] : value }); + y = this._getTextXY(textPosition, 0 , innerHeight); + rotation = '-90' + } else { + x = this._getTextXY(textPosition, innerWidth, 0); + y = scale({ [axis] : value }); + } + + return ( + + {d.text} + + ) + }) + } + + + ); + } +} +EuiLineAnnotation.displayName = 'EuiLineAnnotation'; +EuiLineAnnotation.propTypes = { + /** An annotation data Array<{value: string|number, text: string}> */ + data: PropTypes.arrayOf( + PropTypes.shape({ + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + text: PropTypes.string, + }), + ).isRequired, + /** The orientation of the annotation. */ + orientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL ]), + textPosition: PropTypes.oneOf([ START, MIDDLE, END ]) +}; + +EuiLineAnnotation.defaultProps = { + orientation: VERTICAL, + textPosition: START, +}; diff --git a/src/components/xy_chart/line_annotation.scss b/src/components/xy_chart/line_annotation.scss new file mode 100644 index 000000000000..d98c87f90740 --- /dev/null +++ b/src/components/xy_chart/line_annotation.scss @@ -0,0 +1,3 @@ +.euiLineAnnotationText { + font-size: $euiFontSizeXS; +} From c6dc3a0483751977beeced206b6499c7257f76a8 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 26 Jun 2018 18:40:32 +0200 Subject: [PATCH 44/68] WIP fix mouseover behaviours on series --- src-docs/src/views/xy_chart/complex.js | 78 ++++++------ src-docs/src/views/xy_chart/crosshair_sync.js | 2 - .../views/xy_chart_bar/vertical_bar_series.js | 10 +- src/components/xy_chart/brush.js | 103 +++++++++------ src/components/xy_chart/series/area_series.js | 5 +- .../xy_chart/series/horizontal_bar_series.js | 33 +++-- .../xy_chart/series/horizontal_rect_series.js | 33 +++-- src/components/xy_chart/series/line_series.js | 20 +-- .../xy_chart/series/vertical_bar_series.js | 24 +++- .../xy_chart/series/vertical_rect_series.js | 33 +++-- src/components/xy_chart/xy_chart.js | 118 +++++++++++++----- 11 files changed, 278 insertions(+), 181 deletions(-) diff --git a/src-docs/src/views/xy_chart/complex.js b/src-docs/src/views/xy_chart/complex.js index d1c7784e4b58..42b6f6313f08 100644 --- a/src-docs/src/views/xy_chart/complex.js +++ b/src-docs/src/views/xy_chart/complex.js @@ -1,81 +1,87 @@ import React, { Fragment, Component } from 'react'; import { + EuiText, EuiCodeBlock, EuiSpacer, EuiXYChart, - EuiXYChartUtils, EuiVerticalBarSeries, EuiAreaSeries, EuiLineSeries, } from '../../../../src/components'; -const barData = []; -for (let i = 0; i < 10; i++) { - const data = []; - - for (let i = 0; i < 20; i++) { - data.push({ x: i, y: Number(Math.random().toFixed(2)) }); - } - - barData.push(data); +const barSeries = []; +for (let i = 0; i < 2; i++) { + const data = new Array(20).fill(0).map((d, i) => ({ x: i, y: Number((Math.random() * 4).toFixed(2)) })); + barSeries.push(data); } +const lineData = new Array(20).fill(0).map((d, i) => ({ x: i, y: Number((Math.random() * 4).toFixed(2)) })); +const areaData = new Array(20).fill(0).map((d, i) => ({ x: i, y: Number((Math.random() * 4).toFixed(2)) })); export default class ComplexDemo extends Component { state = { - brushOutput: 'Please drag your mouse to select an area' + json: 'Please drag your mouse to select an area or click on an element' } handleSelectionBrushEnd = (area) => { this.setState(() => ({ - brushOutput: JSON.stringify(area, null, 2), + eventName: 'onSelectionBrushEnd', + json: JSON.stringify(area, null, 2), + })); + } + handleOnValueClick = (data) => { + this.setState(() => ({ + eventName: 'onValueClick', + json: JSON.stringify(data, null, 2), + })); + } + handleOnSeriesClick = (series) => () => { + this.setState(() => ({ + eventName: 'onSeriesClick', + json: JSON.stringify({ name: series }), })); } render() { - const { brushOutput } = this.state + const { eventName, json } = this.state return ( - - {brushOutput} - - { - alert('clicked!'); - }} - data={[ - { x: 0, y: 0 }, - { x: 1, y: 2 }, - { x: 2, y: 1 }, - { x: 3, y: 2 }, - { x: 4, y: 1 }, - { x: 10, y: 1 }, - { x: 20, y: 2 }, - ]} + curve="curveMonotoneX" + data={areaData} + onSeriesClick={this.handleOnSeriesClick('EuiAreaSeries')} /> - {barData - .slice(0, 1) + {barSeries .map((data, index) => ( ))} + + { eventName && ( + +

Event: { eventName }

+ + )} + + { json } + ); } diff --git a/src-docs/src/views/xy_chart/crosshair_sync.js b/src-docs/src/views/xy_chart/crosshair_sync.js index a55605d8682d..e2f10281c7af 100644 --- a/src-docs/src/views/xy_chart/crosshair_sync.js +++ b/src-docs/src/views/xy_chart/crosshair_sync.js @@ -22,7 +22,6 @@ export class ExampleCrosshair extends React.Component { @@ -35,7 +34,6 @@ export class ExampleCrosshair extends React.Component {
diff --git a/src-docs/src/views/xy_chart_bar/vertical_bar_series.js b/src-docs/src/views/xy_chart_bar/vertical_bar_series.js index c45fe68c35d1..a30bc8e5547c 100644 --- a/src-docs/src/views/xy_chart_bar/vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/vertical_bar_series.js @@ -3,11 +3,11 @@ import React from 'react'; import { EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; const data = [ - { x: 'A', y: 3 }, - { x: 'B', y: 1 }, - { x: 'C', y: 5 }, - { x: 'D', y: 2 }, - { x: 'E', y: 1 }, + { x: 'A', y: 3, color: 'red' }, + { x: 'B', y: 1, color: 'red' }, + { x: 'C', y: 5, color: 'red' }, + { x: 'D', y: 2, color: 'red' }, + { x: 'E', y: 1, color: 'red' }, ]; export default () => ( diff --git a/src/components/xy_chart/brush.js b/src/components/xy_chart/brush.js index c298f66d62e1..05d415dae2dd 100644 --- a/src/components/xy_chart/brush.js +++ b/src/components/xy_chart/brush.js @@ -5,6 +5,7 @@ import { EuiXYChartUtils } from './utils/chart_utils'; const { HORIZONTAL, VERTICAL, BOTH } = EuiXYChartUtils.ORIENTATION const DEFAULT_AREAS = { + areaSize: 0, drawArea: { x0: 0, x1: 0, @@ -23,7 +24,23 @@ export class EuiSelectionBrush extends AbstractSeries { state = { drawing: false, ...DEFAULT_AREAS, - }; + } + + onParentMouseDown(e) { + this._startDrawing(e); + } + + onParentMouseMove(e) { + this._brushing(e); + } + + onParentMouseUp() { + this._stopDrawing(); + } + + onParentMouseLeave() { + this._stopDrawing(); + } _getDrawArea(offsetX, offsetY, isStartingPoint) { const { orientation, marginTop, marginLeft, innerHeight, innerWidth } = this.props; @@ -40,7 +57,9 @@ export class EuiSelectionBrush extends AbstractSeries { } const x1 = orientation === VERTICAL ? innerWidth : xLocation; const y1 = orientation === HORIZONTAL ? innerHeight : yLocation; + const areaSize = Math.abs(x0 - x1) * Math.abs(y0 - y1); return { + areaSize, drawArea: { x0, x1, @@ -56,8 +75,8 @@ export class EuiSelectionBrush extends AbstractSeries { }; } - onParentMouseDown(e) { - const { onSelectStart } = this.props; + _startDrawing = (e) => { + const { onBrushStart } = this.props; const { offsetX, offsetY } = e.nativeEvent; const drawAndRectAreas = this._getDrawArea(offsetX, offsetY, true); this.setState(() => ({ @@ -65,47 +84,57 @@ export class EuiSelectionBrush extends AbstractSeries { ...drawAndRectAreas, })); - if (onSelectStart) { - onSelectStart(e); + if (onBrushStart) { + onBrushStart(drawAndRectAreas); } } - onParentMouseMove(e) { - const { onSelect } = this.props; + _brushing = (e) => { + const { onBrushing } = this.props; const { drawing } = this.state; const { offsetX, offsetY } = e.nativeEvent; - if (drawing) { const drawAndRectAreas = this._getDrawArea(offsetX, offsetY); - this.setState(() => ({ ...drawAndRectAreas })); + this.setState(() => ({ + ...drawAndRectAreas + })); - if (onSelect) { - onSelect(e); + if (onBrushing) { + onBrushing(drawAndRectAreas); } + } else { + this.setState(() => ({ + drawing: false, + ...DEFAULT_AREAS, + })); } } - stopDrawing = () => { + _stopDrawing = () => { // Quickly short-circuit if the user isn't drawing in our component - if (!this.state.drawing) { + const { drawing } = this.state; + if (!drawing) { return; } - const { onBrushEnd } = this.props; - const { x0, y0, x1, y1 } = this.state.drawArea; - const xScale = ScaleUtils.getAttributeScale(this.props, 'x'); - const yScale = ScaleUtils.getAttributeScale(this.props, 'y'); - // Clear the draw area this.setState(() => ({ drawing: false, ...DEFAULT_AREAS, })); - // Don't invoke the callback if the selected area was < 5px. + + + // Don't invoke the callback if the selected area was < 25 square px. // This is a click not a select - if (Math.abs(x0 - x1) < 5 || Math.abs(y0 - y1) < 5) { + const { areaSize } = this.state; + if (areaSize < 25) { return; } + const { drawArea } = this.state; + const { x0, y0, x1, y1 } = drawArea; + const { onBrushEnd } = this.props; + const xScale = ScaleUtils.getAttributeScale(this.props, 'x'); + const yScale = ScaleUtils.getAttributeScale(this.props, 'y'); // Compute the corresponding domain drawn const domainArea = { @@ -116,33 +145,25 @@ export class EuiSelectionBrush extends AbstractSeries { }; if (onBrushEnd) { - onBrushEnd(domainArea); + onBrushEnd({ + domainArea, + drawArea, + }); } } render() { - const { marginLeft, marginTop, innerWidth, innerHeight, color, opacity } = this.props; + const { marginLeft, marginTop, color, opacity } = this.props; const { rectArea: { x, y, width, height } } = this.state; return ( - - - + ); } } @@ -42,7 +40,8 @@ EuiHorizontalBarSeries.propTypes = { })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: PropTypes.oneOf(VISUALIZATION_COLORS), - onClick: PropTypes.func + /** Callback when clicking on a single bar */ + onValueClick: PropTypes.func }; EuiHorizontalBarSeries.defaultProps = {}; diff --git a/src/components/xy_chart/series/horizontal_rect_series.js b/src/components/xy_chart/series/horizontal_rect_series.js index 85670e4916bb..b5515e8d90a5 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.js +++ b/src/components/xy_chart/series/horizontal_rect_series.js @@ -5,24 +5,22 @@ import { VISUALIZATION_COLORS } from '../../../services'; export class EuiHorizontalRectSeries extends HorizontalRectSeries { render() { - const { name, data, color, onClick, ...rest } = this.props; + const { name, data, color, onValueClick, ...rest } = this.props; return ( - - - + ); } } @@ -40,7 +38,8 @@ EuiHorizontalRectSeries.propTypes = { })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: PropTypes.oneOf(VISUALIZATION_COLORS), - onClick: PropTypes.func + /** Callback when clicking on a single bar */ + onValueClick: PropTypes.func }; EuiHorizontalRectSeries.defaultProps = {}; diff --git a/src/components/xy_chart/series/line_series.js b/src/components/xy_chart/series/line_series.js index 47cb79b28ae7..1167e34f46e1 100644 --- a/src/components/xy_chart/series/line_series.js +++ b/src/components/xy_chart/series/line_series.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { LineSeries, MarkSeries, AbstractSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; @@ -9,7 +9,7 @@ export class EuiLineSeries extends AbstractSeries { data, name, curve, - onClick, + onSeriesClick, onMarkClick, showLineMarks, lineSize, @@ -20,16 +20,17 @@ export class EuiLineSeries extends AbstractSeries { } = this.props; return ( - + @@ -40,7 +41,8 @@ export class EuiLineSeries extends AbstractSeries { data={data} opacity={1} style={{ - strokeWidth: lineSize, + pointerEvents: 'visiblestroke', + strokeWidth: lineSize, }} color={color} /> @@ -54,11 +56,11 @@ export class EuiLineSeries extends AbstractSeries { size={lineMarkSize} stroke={'white'} opacity={1} - onSeriesClick={onMarkClick || onClick} + onSeriesClick={onMarkClick || onSeriesClick} strokeWidth={2} /> )} - + ) } } @@ -86,7 +88,7 @@ EuiLineSeries.propTypes = { lineSize: PropTypes.number, lineMarkColor: PropTypes.string, lineMarkSize: PropTypes.number, - onClick: PropTypes.func, + onSeriesClick: PropTypes.func, onMarkClick: PropTypes.func }; diff --git a/src/components/xy_chart/series/vertical_bar_series.js b/src/components/xy_chart/series/vertical_bar_series.js index 12f141a3bb34..47264e967bd7 100644 --- a/src/components/xy_chart/series/vertical_bar_series.js +++ b/src/components/xy_chart/series/vertical_bar_series.js @@ -4,21 +4,34 @@ import { VerticalBarSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; export class EuiVerticalBarSeries extends VerticalBarSeries { - + state = { + hoverBars: false, + } + _handleOnSeriesOver = () => { + this.setState(() => { hoverBars: true }) + } + _handleOnSeriesOut = () => { + this.setState(() => { hoverBars: false }) + } render() { - const { name, data, color, onClick, ...rest } = this.props; + const { name, data, color, onValueClick, ...rest } = this.props; + const { hoverBars } = this.state const isHighDataVolume = data.length > 80 ? true : false; - + const canHover = hoverBars && onValueClick + console.log('canHover',canHover) return ( 80 ? true : false; return ( - - - + ); } } @@ -41,7 +39,8 @@ EuiVerticalRectSeries.propTypes = { })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: PropTypes.oneOf(VISUALIZATION_COLORS), - onClick: PropTypes.func + /** Callback when clicking on a single rect */ + onValueClick: PropTypes.func }; EuiVerticalRectSeries.defaultProps = {}; diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index 75753883f84c..f9b0a30a17cd 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -10,16 +10,8 @@ import { VISUALIZATION_COLORS } from '../../services'; import StatusText from './status-text'; import { getSeriesChildren } from './utils/series_utils'; import { EuiXYChartUtils } from './utils/chart_utils'; -const { HORIZONTAL, VERTICAL, BOTH } = EuiXYChartUtils.ORIENTATION -const { - LINEAR, - ORDINAL, - CATEGORY, - TIME, - TIME_UTC, - LOG, - LITERAL, -} = EuiXYChartUtils.SCALE_TYPE; +const { HORIZONTAL, VERTICAL, BOTH } = EuiXYChartUtils.ORIENTATION; +const { LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL } = EuiXYChartUtils.SCALE_TYPE; class XYExtendedPlot extends XYPlot { /** @@ -40,6 +32,76 @@ class XYExtendedPlot extends XYPlot { } }); } + + /** + * Trigger onMouseUp handler if it was passed in props. + * @param {Event} event Native event. + * @private + */ + _mouseUpHandler = (event) => { + const { onMouseUp, children } = this.props; + if (onMouseUp) { + super.onMouseUp(event); + } + const seriesChildren = getSeriesChildren(children); + seriesChildren.forEach((child, index) => { + const component = this.refs[`series${index}`]; + if (component && component.onParentMouseUp) { + component.onParentMouseUp(event); + } + }); + } + + render() { + const { + className, + dontCheckIfEmpty, + style, + width, + height, + errorText, + } = this.props; + + if (!dontCheckIfEmpty && this._isPlotEmpty()) { + return ( + + ); + } + const components = this._getClonedChildComponents(); + + return ( +
+ + {components.filter(c => c && c.type.requiresSVG)} + + {this.renderCanvasComponents(components, this.props)} + {components.filter(c => c && !c.type.requiresSVG && !c.type.isCanvas)} +
+ ); + } } class XYChart extends PureComponent { @@ -69,11 +131,6 @@ class XYChart extends PureComponent { return React.cloneElement(child, props); }; - // canShowCrosshair = () => { - // const { crosshairValue, showCrosshair } = this.props; - // const { mouseOver } = this.state; - // return showCrosshair && ( mouseOver || crosshairValue !== undefined) - // } render() { const { @@ -100,10 +157,6 @@ class XYChart extends PureComponent { ...rest } = this.props; - if (!children || errorText) { - return ; - } - this.colorIterator = 0; const Crosshair = orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL ? EuiCrosshairY : EuiCrosshairX; @@ -111,9 +164,7 @@ class XYChart extends PureComponent {
)} - {enableSelectionBrush && } + {enableSelectionBrush && ( + + )}
); @@ -146,15 +202,15 @@ XYChart.propTypes = { /** The initial height of the chart. */ height: PropTypes.number.isRequired, /** The orientation of the chart. */ - orientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL ]), + orientation: PropTypes.oneOf([HORIZONTAL, VERTICAL]), /** If the chart animates on data changes. */ - animateData: PropTypes.bool, + animateData: PropTypes.bool, /** TODO */ stackBy: PropTypes.string, /** The main x axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md */ - xType: PropTypes.oneOf([ LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL ]), + xType: PropTypes.oneOf([LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL]), /** The main y axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md*/ - xType: PropTypes.oneOf([ LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL ]), + xType: PropTypes.oneOf([LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL]), /** Manually specify the domain of x axis. */ xDomain: PropTypes.array, /** Manually specify the domain of y axis. */ @@ -163,11 +219,7 @@ XYChart.propTypes = { xPadding: PropTypes.number, /** The vertical padding between the chart borders and chart elements. */ yPadding: PropTypes.number, - /** TODO */ - onHover: PropTypes.func, - /** TODO */ - truncateLegends: PropTypes.bool, - /** TODO */ + /** Add a text to show an error on the chart */ errorText: PropTypes.string, /** Shows the crosshair tooltip on mouse move.*/ showCrosshair: PropTypes.bool, @@ -180,7 +232,7 @@ XYChart.propTypes = { /** Enable the brush tool */ enableSelectionBrush: PropTypes.bool, /** Specify the brush orientation */ - selectionBrushOrientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL, BOTH ]), + selectionBrushOrientation: PropTypes.oneOf([HORIZONTAL, VERTICAL, BOTH]), /** Callback on brush end event with { begin, end } object returned. */ onSelectionBrushEnd: PropTypes.func, }; From 4c3520e9315d219cc702803da96092d093035c8f Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 26 Jun 2018 19:03:43 +0200 Subject: [PATCH 45/68] Add mouse pointer change on hover --- src/components/xy_chart/series/area_series.js | 38 ++++++++++++------- .../xy_chart/series/horizontal_bar_series.js | 14 +++++++ .../xy_chart/series/horizontal_rect_series.js | 14 +++++++ .../xy_chart/series/vertical_bar_series.js | 23 +++++------ .../xy_chart/series/vertical_rect_series.js | 16 ++++++++ 5 files changed, 81 insertions(+), 24 deletions(-) diff --git a/src/components/xy_chart/series/area_series.js b/src/components/xy_chart/series/area_series.js index 6f9249201d45..887ff6ce504b 100644 --- a/src/components/xy_chart/series/area_series.js +++ b/src/components/xy_chart/series/area_series.js @@ -3,22 +3,34 @@ import PropTypes from 'prop-types'; import { AreaSeries, AbstractSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; export class EuiAreaSeries extends AbstractSeries { + state = { + isMouseOverSeries: false, + } + + _onSeriesMouseOver = () => { + this.setState(() => ({ isMouseOverSeries: true })); + } + + _onSeriesMouseOut = () => { + this.setState(() => ({ isMouseOverSeries: false })); + } + render() { + const { isMouseOverSeries } = this.state; const { name, data, curve, color, onSeriesClick, ...rest } = this.props; return ( - - - + ); } } diff --git a/src/components/xy_chart/series/horizontal_bar_series.js b/src/components/xy_chart/series/horizontal_bar_series.js index 283872f8911a..06b148179e27 100644 --- a/src/components/xy_chart/series/horizontal_bar_series.js +++ b/src/components/xy_chart/series/horizontal_bar_series.js @@ -4,7 +4,20 @@ import { HorizontalBarSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; export class EuiHorizontalBarSeries extends HorizontalBarSeries { + state = { + isMouseOverValue: false, + } + + _onValueMouseOver = () => { + this.setState(() => ({ isMouseOverValue: true })); + } + + _onValueMouseOut = () => { + this.setState(() => ({ isMouseOverValue: false })); + } + render() { + const { isMouseOverValue } = this.state; const { name, data, color, onValueClick, ...rest } = this.props; return ( @@ -17,6 +30,7 @@ export class EuiHorizontalBarSeries extends HorizontalBarSeries { stroke: 'white', rx: 2, ry: 2, + cursor: isMouseOverValue && onValueClick ? 'pointer' : 'default', }} data={data} {...rest} diff --git a/src/components/xy_chart/series/horizontal_rect_series.js b/src/components/xy_chart/series/horizontal_rect_series.js index b5515e8d90a5..0b213e61b49f 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.js +++ b/src/components/xy_chart/series/horizontal_rect_series.js @@ -4,7 +4,20 @@ import { HorizontalRectSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; export class EuiHorizontalRectSeries extends HorizontalRectSeries { + state = { + isMouseOverValue: false, + } + + _onValueMouseOver = () => { + this.setState(() => ({ isMouseOverValue: true })); + } + + _onValueMouseOut = () => { + this.setState(() => ({ isMouseOverValue: false })); + } + render() { + const { isMouseOverValue } = this.state; const { name, data, color, onValueClick, ...rest } = this.props; return ( @@ -17,6 +30,7 @@ export class EuiHorizontalRectSeries extends HorizontalRectSeries { stroke: 'white', rx: 2, ry: 2, + cursor: isMouseOverValue && onValueClick ? 'pointer' : 'default', }} data={data} {...rest} diff --git a/src/components/xy_chart/series/vertical_bar_series.js b/src/components/xy_chart/series/vertical_bar_series.js index 47264e967bd7..7a81e16d1a64 100644 --- a/src/components/xy_chart/series/vertical_bar_series.js +++ b/src/components/xy_chart/series/vertical_bar_series.js @@ -5,33 +5,34 @@ import { VISUALIZATION_COLORS } from '../../../services'; export class EuiVerticalBarSeries extends VerticalBarSeries { state = { - hoverBars: false, + isMouseOverValue: false, } - _handleOnSeriesOver = () => { - this.setState(() => { hoverBars: true }) + + _onValueMouseOver = () => { + this.setState(() => ({ isMouseOverValue: true })); } - _handleOnSeriesOut = () => { - this.setState(() => { hoverBars: false }) + + _onValueMouseOut = () => { + this.setState(() => ({ isMouseOverValue: false })); } + render() { + const { isMouseOverValue } = this.state const { name, data, color, onValueClick, ...rest } = this.props; - const { hoverBars } = this.state const isHighDataVolume = data.length > 80 ? true : false; - const canHover = hoverBars && onValueClick - console.log('canHover',canHover) return ( { + this.setState(() => ({ isMouseOverValue: true })); + } + + _onValueMouseOut = () => { + this.setState(() => ({ isMouseOverValue: false })); + } + render() { + const { isMouseOverValue } = this.state; const { name, data, color, onValueClick, ...rest } = this.props; const isHighDataVolume = data.length > 80 ? true : false; @@ -12,12 +25,15 @@ export class EuiVerticalRectSeries extends VerticalRectSeries { Date: Tue, 26 Jun 2018 19:15:09 +0200 Subject: [PATCH 46/68] Move curves to enum --- .../src/views/xy_chart_line/curved_line.js | 37 +++++++++++++------ src/components/xy_chart/series/area_series.js | 6 ++- src/components/xy_chart/series/line_series.js | 5 ++- src/components/xy_chart/utils/chart_utils.js | 18 ++++++++- 4 files changed, 49 insertions(+), 17 deletions(-) diff --git a/src-docs/src/views/xy_chart_line/curved_line.js b/src-docs/src/views/xy_chart_line/curved_line.js index 07dc833a1107..2c4f2d07c247 100644 --- a/src-docs/src/views/xy_chart_line/curved_line.js +++ b/src-docs/src/views/xy_chart_line/curved_line.js @@ -7,8 +7,23 @@ import { EuiSpacer, EuiXYChart, EuiLineSeries, + EuiXYChartUtils, } from '../../../../src/components'; +const { + LINEAR, + CURVE_CARDINAL, + CURVE_NATURAL, + CURVE_MONOTONE_X, + CURVE_MONOTONE_Y, + CURVE_BASIS, + CURVE_BUNDLE, + CURVE_CATMULL_ROM, + CURVE_STEP, + CURVE_STEP_AFTER, + CURVE_STEP_BEFORE, +} = EuiXYChartUtils.CURVES; + const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }]; export default class extends Component { @@ -16,17 +31,17 @@ export default class extends Component { super(props); this.options = [ - { value: 'linear', text: 'Linear' }, - { value: 'curveCardinal', text: 'Curve Cardinal' }, - { value: 'curveNatural', text: 'Curve Natural' }, - { value: 'curveMonotoneX', text: 'Curve Monotone X' }, - { value: 'curveMonotoneY', text: 'Curve Monotone Y' }, - { value: 'curveBasis', text: 'Curve Basis' }, - { value: 'curveBundle', text: 'Curve Bundle' }, - { value: 'curveCatmullRom', text: 'Curve Catmull Rom' }, - { value: 'curveStep', text: 'Curve Step' }, - { value: 'curveStepAfter', text: 'Curve Step After' }, - { value: 'curveStepBefore', text: 'Curve Step Before' }, + { value: LINEAR, text: 'Linear' }, + { value: CURVE_CARDINAL, text: 'Curve Cardinal' }, + { value: CURVE_NATURAL, text: 'Curve Natural' }, + { value: CURVE_MONOTONE_X, text: 'Curve Monotone X' }, + { value: CURVE_MONOTONE_Y, text: 'Curve Monotone Y' }, + { value: CURVE_BASIS, text: 'Curve Basis' }, + { value: CURVE_BUNDLE, text: 'Curve Bundle' }, + { value: CURVE_CATMULL_ROM, text: 'Curve Catmull Rom' }, + { value: CURVE_STEP, text: 'Curve Step' }, + { value: CURVE_STEP_AFTER, text: 'Curve Step After' }, + { value: CURVE_STEP_BEFORE, text: 'Curve Step Before' }, ]; this.state = { diff --git a/src/components/xy_chart/series/area_series.js b/src/components/xy_chart/series/area_series.js index 887ff6ce504b..85ac262c773b 100644 --- a/src/components/xy_chart/series/area_series.js +++ b/src/components/xy_chart/series/area_series.js @@ -2,6 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { AreaSeries, AbstractSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; +import { CURVES } from '../utils/chart_utils'; + export class EuiAreaSeries extends AbstractSeries { state = { isMouseOverSeries: false, @@ -47,11 +49,11 @@ EuiAreaSeries.propTypes = { ).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: PropTypes.oneOf(VISUALIZATION_COLORS), - curve: PropTypes.string, + curve: PropTypes.oneOf(Object.values(CURVES)), onSeriesClick: PropTypes.func, onMarkClick: PropTypes.func, }; EuiAreaSeries.defaultProps = { - curve: 'linear', + curve: CURVES.LINEAR, }; diff --git a/src/components/xy_chart/series/line_series.js b/src/components/xy_chart/series/line_series.js index 1167e34f46e1..69b7d689b47e 100644 --- a/src/components/xy_chart/series/line_series.js +++ b/src/components/xy_chart/series/line_series.js @@ -2,6 +2,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { LineSeries, MarkSeries, AbstractSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; +import { CURVES } from '../utils/chart_utils'; export class EuiLineSeries extends AbstractSeries { render() { @@ -83,7 +84,7 @@ EuiLineSeries.propTypes = { })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: PropTypes.oneOf(VISUALIZATION_COLORS), - curve: PropTypes.string, + curve: PropTypes.oneOf(Object.values(CURVES)), showLineMarks: PropTypes.bool, lineSize: PropTypes.number, lineMarkColor: PropTypes.string, @@ -93,7 +94,7 @@ EuiLineSeries.propTypes = { }; EuiLineSeries.defaultProps = { - curve: 'linear', + curve: CURVES.LINEAR, showLineMarks: true, lineSize: 2, lineMarkSize: 5 diff --git a/src/components/xy_chart/utils/chart_utils.js b/src/components/xy_chart/utils/chart_utils.js index c616052edf24..cb60e7927c27 100644 --- a/src/components/xy_chart/utils/chart_utils.js +++ b/src/components/xy_chart/utils/chart_utils.js @@ -1,10 +1,10 @@ -const ORIENTATION = { +export const ORIENTATION = { HORIZONTAL: 'horizontal', VERTICAL: 'vertical', BOTH: 'both', }; -const SCALE_TYPE = { +export const SCALE_TYPE = { LINEAR: 'linear', ORDINAL: 'ordinal', CATEGORY: 'category', @@ -13,8 +13,22 @@ const SCALE_TYPE = { LOG: 'log', LITERA: 'literal' }; +export const CURVES = { + 'LINEAR': 'linear', + 'CURVE_CARDINAL': 'curveCardinal', + 'CURVE_NATURAL': 'curveNatural', + 'CURVE_MONOTONE_X': 'curveMonotoneX', + 'CURVE_MONOTONE_Y': 'curveMonotoneY', + 'CURVE_BASIS': 'curveBasis', + 'CURVE_BUNDLE': 'curveBundle', + 'CURVE_CATMULL_ROM': 'curveCatmullRom', + 'CURVE_STEP': 'curveStep', + 'CURVE_STEP_AFTER': 'curveStepAfter', + 'CURVE_STEP_BEFORE': 'curveStepBefore', +} export const EuiXYChartUtils = { ORIENTATION, SCALE_TYPE, + CURVES, } From df79e6d4e129ad003b47922bcfe87fe98f98f2b3 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 26 Jun 2018 22:33:54 +0200 Subject: [PATCH 47/68] Update snapshots --- .../__snapshots__/xy_chart.test.js.snap | 254 +- .../__snapshots__/area_series.test.js.snap | 2266 +++---- .../horizontal_bar_series.test.js.snap | 352 +- .../horizontal_rect_series.test.js.snap | 382 +- .../__snapshots__/line_series.test.js.snap | 5482 +++++++++-------- .../vertical_bar_series.test.js.snap | 344 +- .../vertical_rect_series.test.js.snap | 414 +- src/components/xy_chart/xy_chart.js | 10 +- src/components/xy_chart/xy_chart.test.js | 7 - 9 files changed, 4734 insertions(+), 4777 deletions(-) diff --git a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap index f591f58618f2..088fe1deb457 100644 --- a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap +++ b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap @@ -5,34 +5,40 @@ exports[`EuiXYChart is rendered (empty) 1`] = ` style="width:100%;height:100%" >
- - - Graph not avaliable - + + + Graph not avaliable + +
@@ -42,36 +48,7 @@ exports[`EuiXYChart is rendered (empty) 1`] = ` exports[`EuiXYChart passes handler functions 1`] = `
- -
-
-
-
-
- + + +
diff --git a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap index 48453c178dd8..c6f9a25254a4 100644 --- a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap @@ -35,9 +35,8 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` - - + - - - + - - - - - - + transform="translate(0,0)" + /> + + + + @@ -1544,12 +1546,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} onZero={false} opacityDomain={Array []} opacityType="literal" @@ -1581,7 +1583,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -1594,7 +1596,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -1654,12 +1656,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -1691,7 +1693,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -1704,7 +1706,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -1765,12 +1767,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -1804,7 +1806,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -1817,7 +1819,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -1896,12 +1898,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -1935,7 +1937,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -1948,7 +1950,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -2030,12 +2032,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2069,7 +2071,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -2082,7 +2084,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -2091,19 +2093,19 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` @@ -2165,14 +2167,14 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - height={2} - innerHeight={196} - innerWidth={596} - left={2} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + height={0} + innerHeight={200} + innerWidth={600} + left={0} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2197,8 +2199,8 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` tickPadding={8} tickSize={0} tickTotal={10} - top={198} - width={596} + top={200} + width={600} xDomain={ Array [ 0, @@ -2209,7 +2211,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -2222,7 +2224,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -2260,7 +2262,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` className="rv-xy-plot__axis__tick" key="1" style={Object {}} - transform="translate(59.6, 0)" + transform="translate(60, 0)" > - - + - - - + - - - - - - + transform="translate(0,0)" + /> + + + + @@ -5157,12 +5161,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} onZero={false} opacityDomain={Array []} opacityType="literal" @@ -5194,7 +5198,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -5207,7 +5211,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -5267,12 +5271,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5304,7 +5308,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -5317,7 +5321,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -5378,12 +5382,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5417,7 +5421,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -5430,7 +5434,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -5509,12 +5513,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5548,7 +5552,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -5561,7 +5565,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -5643,12 +5647,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5682,7 +5686,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -5695,7 +5699,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -5704,19 +5708,19 @@ exports[`EuiAreaSeries is rendered 1`] = ` @@ -5778,14 +5782,14 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - height={2} - innerHeight={196} - innerWidth={596} - left={2} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + height={0} + innerHeight={200} + innerWidth={600} + left={0} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5810,8 +5814,8 @@ exports[`EuiAreaSeries is rendered 1`] = ` tickPadding={8} tickSize={0} tickTotal={10} - top={198} - width={596} + top={200} + width={600} xDomain={ Array [ 0, @@ -5822,7 +5826,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -5835,7 +5839,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -5873,7 +5877,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` className="rv-xy-plot__axis__tick" key="1" style={Object {}} - transform="translate(59.6, 0)" + transform="translate(60, 0)" > - - - - - + + + @@ -117,7 +115,7 @@ exports[`EuiHorizontalBarSeries all props are rendered 1`] = ` - - - - - + + + @@ -561,7 +557,7 @@ exports[`EuiHorizontalBarSeries is rendered 1`] = ` - - - - - + + + - - - - - + + + @@ -1002,7 +994,7 @@ exports[`EuiHorizontalBarSeries renders stacked bar chart 1`] = ` > - - - - - + + + @@ -117,7 +115,7 @@ exports[`EuiHorizontalRectSeries all props are rendered 1`] = ` - - - - - + + + @@ -561,7 +557,7 @@ exports[`EuiHorizontalRectSeries is rendered 1`] = ` - - - - - + + + - - - - - + + + @@ -1026,7 +1018,7 @@ exports[`EuiHorizontalRectSeries renders stacked bar chart 1`] = ` > - - + - - - + - - - - - - + + + + + + - - - + - - - - - - + + + + + + - - - + - - - + - - - - - - + } + /> + + + + + @@ -2549,12 +2561,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} onZero={false} opacityDomain={Array []} opacityType="literal" @@ -2586,7 +2598,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -2599,7 +2611,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -2659,12 +2671,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2696,7 +2708,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -2709,7 +2721,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -2770,12 +2782,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2809,7 +2821,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -2822,7 +2834,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -2901,12 +2913,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2940,7 +2952,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -2953,7 +2965,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -3035,12 +3047,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -3074,7 +3086,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -3087,7 +3099,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -3096,19 +3108,19 @@ exports[`EuiLineSeries all props are rendered 1`] = ` @@ -3170,14 +3182,14 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - height={2} - innerHeight={196} - innerWidth={596} - left={2} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + height={0} + innerHeight={200} + innerWidth={600} + left={0} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -3202,8 +3214,8 @@ exports[`EuiLineSeries all props are rendered 1`] = ` tickPadding={8} tickSize={0} tickTotal={10} - top={198} - width={596} + top={200} + width={600} xDomain={ Array [ 0, @@ -3214,7 +3226,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -3227,7 +3239,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -3265,7 +3277,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` className="rv-xy-plot__axis__tick" key="1" style={Object {}} - transform="translate(59.6, 0)" + transform="translate(60, 0)" > - - + + - + - - + - - - - - - + + + + + + - + - - - - - - - - + + + + + + - + - - + - - - + - - - - - - + } + /> + + + + + @@ -7168,12 +7186,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} onZero={false} opacityDomain={Array []} opacityType="literal" @@ -7205,7 +7223,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -7218,7 +7236,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -7278,12 +7296,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7315,7 +7333,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -7328,7 +7346,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -7389,12 +7407,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7428,7 +7446,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -7441,7 +7459,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -7520,12 +7538,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7559,7 +7577,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -7572,7 +7590,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -7654,12 +7672,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={196} - innerWidth={596} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + innerHeight={200} + innerWidth={600} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7693,7 +7711,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -7706,7 +7724,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -7715,19 +7733,19 @@ exports[`EuiLineSeries is rendered 1`] = ` @@ -7789,14 +7807,14 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - height={2} - innerHeight={196} - innerWidth={596} - left={2} - marginBottom={2} - marginLeft={2} - marginRight={2} - marginTop={2} + height={0} + innerHeight={200} + innerWidth={600} + left={0} + marginBottom={0} + marginLeft={0} + marginRight={0} + marginTop={0} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7821,8 +7839,8 @@ exports[`EuiLineSeries is rendered 1`] = ` tickPadding={8} tickSize={0} tickTotal={10} - top={198} - width={596} + top={200} + width={600} xDomain={ Array [ 0, @@ -7833,7 +7851,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 596, + 600, ] } xType="linear" @@ -7846,7 +7864,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 196, + 200, 0, ] } @@ -7884,7 +7902,7 @@ exports[`EuiLineSeries is rendered 1`] = ` className="rv-xy-plot__axis__tick" key="1" style={Object {}} - transform="translate(59.6, 0)" + transform="translate(60, 0)" > @@ -119,7 +119,7 @@ exports[`EuiVerticalBarSeries all props are rendered 1`] = ` > @@ -625,7 +625,7 @@ exports[`EuiVerticalBarSeries is rendered 1`] = ` > @@ -1130,7 +1130,7 @@ exports[`EuiVerticalBarSeries renders stacked bar chart 1`] = ` > - - - - - + + + @@ -141,7 +139,7 @@ exports[`EuiVerticalRectSeries all props are rendered 1`] = ` - - - - - + + + @@ -669,7 +665,7 @@ exports[`EuiVerticalRectSeries is rendered 1`] = ` - - - - - + + + - - - - - + + + @@ -1178,7 +1170,7 @@ exports[`EuiVerticalRectSeries renders stacked vertical histogram 1`] = ` > VISUALIZATION_COLORS.length - 1) this.colorIterator = 0; + if (this.colorIterator > VISUALIZATION_COLORS.length - 1) { + this.colorIterator = 0; + } } return React.cloneElement(child, props); @@ -158,8 +160,8 @@ class XYChart extends PureComponent { } = this.props; this.colorIterator = 0; - const Crosshair = - orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL ? EuiCrosshairY : EuiCrosshairX; + const Crosshair = orientation === HORIZONTAL ? EuiCrosshairY : EuiCrosshairX; + return (
{ ); @@ -24,11 +22,6 @@ describe('EuiXYChart', () => { {}} - onMouseLeave={() => {}} - onBrushEnd={() => {}} - yTicks={[[0, 'zero'], [100, 'one hundred']]} - xTicks={[[0, 'zero', 5, 'five'], [10, '10']]} /> ); From 540d1a3eceb134aa31587f3df4e0d95537edd262 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 27 Jun 2018 12:53:44 +0200 Subject: [PATCH 48/68] Small refactoring of EuiXYChart. Adding some tests for XYChart and DefaultAxis --- src-docs/src/views/xy_chart/empty.js | 2 +- .../__snapshots__/xy_chart.test.js.snap | 194 +--- .../__snapshots__/default_axis.test.js.snap | 1001 +++++++++++++++++ src/components/xy_chart/axis/default_axis.js | 7 +- .../xy_chart/axis/default_axis.test.js | 46 + .../__snapshots__/area_series.test.js.snap | 4 +- .../__snapshots__/line_series.test.js.snap | 4 +- src/components/xy_chart/utils/chart_utils.js | 33 +- src/components/xy_chart/xy_chart.js | 121 +- src/components/xy_chart/xy_chart.test.js | 106 +- 10 files changed, 1310 insertions(+), 208 deletions(-) create mode 100644 src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap create mode 100644 src/components/xy_chart/axis/default_axis.test.js diff --git a/src-docs/src/views/xy_chart/empty.js b/src-docs/src/views/xy_chart/empty.js index b3258caed09f..e9bde5dc9f8f 100644 --- a/src-docs/src/views/xy_chart/empty.js +++ b/src-docs/src/views/xy_chart/empty.js @@ -2,4 +2,4 @@ import React from 'react'; import { EuiXYChart } from '../../../../src/components'; -export default () => ; +export default () => ; diff --git a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap index 088fe1deb457..fe9850c650ae 100644 --- a/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap +++ b/src/components/xy_chart/__snapshots__/xy_chart.test.js.snap @@ -1,172 +1,50 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiXYChart is rendered (empty) 1`] = ` +exports[`EuiXYChart renders an empty chart 1`] = `
+ + +
+ -
-
- - - Graph not avaliable - -
-
-
-
-
-`; - -exports[`EuiXYChart passes handler functions 1`] = ` - -
- + Chart not available +
+
- - -
-
-
- - - Graph not avaliable - -
-
-
- - +

+ ~~Empty Chart~~ +

- +
+
- +
`; diff --git a/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap b/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap new file mode 100644 index 000000000000..975700470eeb --- /dev/null +++ b/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap @@ -0,0 +1,1001 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiDefaultAxis render default axis 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + 1.6 + + + + + + 1.8 + + + + + + 2.0 + + + + + +
+
+
+`; + +exports[`EuiDefaultAxis render rotated 90deg default axis 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + 1.6 + + + + + + 1.8 + + + + + + 2.0 + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/axis/default_axis.js b/src/components/xy_chart/axis/default_axis.js index a641de774a9e..078bf19f6e71 100644 --- a/src/components/xy_chart/axis/default_axis.js +++ b/src/components/xy_chart/axis/default_axis.js @@ -4,7 +4,8 @@ import { EuiXAxis } from './x_axis'; import { EuiYAxis } from './y_axis'; import { EuiHorizontalGrid } from './horizontal_grid'; import { EuiVerticalGrid } from './vertical_grid'; -import { EuiXYChartUtils } from '../utils/chart_utils'; +import { ORIENTATION } from '../utils/chart_utils'; + export class EuiDefaultAxis extends PureComponent { render() { const { showGridLines, orientation, xOnZero, yOnZero, ...rest } = this.props; @@ -12,9 +13,9 @@ export class EuiDefaultAxis extends PureComponent { return ( {showGridLines && - orientation === EuiXYChartUtils.ORIENTATION.VERTICAL && } + orientation === ORIENTATION.VERTICAL && } {showGridLines && - orientation === EuiXYChartUtils.ORIENTATION.HORIZONTAL && } + orientation === ORIENTATION.HORIZONTAL && } diff --git a/src/components/xy_chart/axis/default_axis.test.js b/src/components/xy_chart/axis/default_axis.test.js new file mode 100644 index 000000000000..14e4b04e930f --- /dev/null +++ b/src/components/xy_chart/axis/default_axis.test.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import { EuiXYChart } from '../xy_chart'; +import { EuiLineSeries } from '../series/line_series'; +import { EuiDefaultAxis, EuiXAxis, EuiYAxis, EuiVerticalGrid, EuiHorizontalGrid } from './'; +import { requiredProps } from '../../../test/required_props'; +import { ORIENTATION } from '../utils/chart_utils'; + +describe('EuiDefaultAxis', () => { + test('render default axis', () => { + const data = [ { x:0, y: 1 }, { x:1, y: 2 }]; + const component = mount( + + + + ); + expect(component.find(EuiDefaultAxis)).toHaveLength(1); + expect(component.find(EuiXAxis)).toHaveLength(1); + expect(component.find(EuiYAxis)).toHaveLength(1); + expect(component.find(EuiHorizontalGrid)).toHaveLength(1); + expect(component.find(EuiVerticalGrid)).toHaveLength(0); + expect(component.render()).toMatchSnapshot(); + }); + test('render rotated 90deg default axis', () => { + const data = [ { x:0, y: 1 }, { x:1, y: 2 }]; + const component = mount( + + + + ); + expect(component.find(EuiDefaultAxis)).toHaveLength(1); + expect(component.find(EuiVerticalGrid)).toHaveLength(1); + expect(component.find(EuiHorizontalGrid)).toHaveLength(0); + expect(component.render()).toMatchSnapshot(); + }) +}); diff --git a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap index c6f9a25254a4..f594c1f7876a 100644 --- a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap @@ -18,7 +18,6 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` animation={null} enableSelectionBrush={false} height={200} - onSelectionBrushEnd={[Function]} orientation="vertical" selectionBrushOrientation="horizontal" showCrosshair={true} @@ -35,6 +34,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` +
); } const components = this._getClonedChildComponents(); @@ -104,6 +115,12 @@ class XYExtendedPlot extends XYPlot { } } + +/** + * The root component of any XY chart. + * It renders an react-vis XYPlot including default axis and a valid crosshair. + * You can also enable the Selection Brush. + */ class XYChart extends PureComponent { state = { mouseOver: false, @@ -111,38 +128,64 @@ class XYChart extends PureComponent { colorIterator = 0; _xyPlotRef = React.createRef(); - _renderChildren = (child, i) => { + + /** + * Checks if the plot is empty, looking at existing series and data props. + */ + _isEmptyPlot(children) { + return React.Children + .toArray(children) + .filter(this._isAbstractSeries) + .filter(child => { + return child.props.data && child.props.data.length > 0 + }) + .length === 0 + } + + /** + * Checks if a react child is an AbstractSeries + */ + _isAbstractSeries(child) { const { prototype } = child.type; // Avoid applying chart props to non series children - if (!(prototype instanceof AbstractSeries)) { - return child; - } + return prototype instanceof AbstractSeries + } - const props = { - id: `chart-${i}`, - }; - if (!child.props.color) { - props.color = VISUALIZATION_COLORS[this.colorIterator]; + /** + * Render children adding a valid EUI visualization color if the color prop is not specified. + */ + _renderChildren (children) { + let colorIterator = 0; - this.colorIterator++; - if (this.colorIterator > VISUALIZATION_COLORS.length - 1) { - this.colorIterator = 0; + return React.Children.map(children, (child, i) => { + // Avoid applying color props to non series children + if (!this._isAbstractSeries(child)) { + return child; } - } - return React.cloneElement(child, props); - }; + const props = { + id: `chart-${i}`, + }; + + if (!child.props.color) { + props.color = VISUALIZATION_COLORS[colorIterator % VISUALIZATION_COLORS.length]; + colorIterator++; + } + + return React.cloneElement(child, props); + }); + } render() { const { + children, width, height, xType, yType, stackBy, - errorText, - children, + statusText, xDomain, yDomain, yPadding, @@ -159,14 +202,27 @@ class XYChart extends PureComponent { ...rest } = this.props; - this.colorIterator = 0; + if (this._isEmptyPlot(children)) { + return ( + Chart not available} + body={ + +

{ statusText }

+ + } + /> + ) + } + const Crosshair = orientation === HORIZONTAL ? EuiCrosshairY : EuiCrosshairX; return (
- {React.Children.map(children, this._renderChildren)} + {this._renderChildren(children)} {showDefaultAxis && } {showCrosshair && ( @@ -203,7 +259,7 @@ XYChart.propTypes = { width: PropTypes.number.isRequired, /** The initial height of the chart. */ height: PropTypes.number.isRequired, - /** The orientation of the chart. */ + /** The orientation of the chart. Used by grids and crosshair. */ orientation: PropTypes.oneOf([HORIZONTAL, VERTICAL]), /** If the chart animates on data changes. */ animateData: PropTypes.bool, @@ -221,11 +277,11 @@ XYChart.propTypes = { xPadding: PropTypes.number, /** The vertical padding between the chart borders and chart elements. */ yPadding: PropTypes.number, - /** Add a text to show an error on the chart */ - errorText: PropTypes.string, + /** Add an additional status text above the graph status message*/ + statusText: PropTypes.string, /** Shows the crosshair tooltip on mouse move.*/ showCrosshair: PropTypes.bool, - /** Specify an X or Y axis value to display a crosshair. */ + /** Specify the axis value where to display crosshair based on chart orientation value. */ crosshairValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), /** Callback when the crosshair position is updated. */ onCrosshairUpdate: PropTypes.func, @@ -250,7 +306,6 @@ XYChart.defaultProps = { showDefaultAxis: true, enableSelectionBrush: false, selectionBrushOrientation: HORIZONTAL, - onSelectionBrushEnd: () => ({}), }; export const EuiXYChart = makeVisFlexible(XYChart); diff --git a/src/components/xy_chart/xy_chart.test.js b/src/components/xy_chart/xy_chart.test.js index 15a26bea9426..f1bc6909a64d 100644 --- a/src/components/xy_chart/xy_chart.test.js +++ b/src/components/xy_chart/xy_chart.test.js @@ -1,30 +1,122 @@ import React from 'react'; -import { mount, render } from 'enzyme'; +import { mount } from 'enzyme'; import { EuiXYChart } from './xy_chart'; +import { EuiLineSeries } from './series/line_series'; +import { EuiDefaultAxis } from './axis'; +import { EuiCrosshairX, EuiCrosshairY } from './crosshairs/'; import { requiredProps } from '../../test/required_props'; +import { VISUALIZATION_COLORS } from '../../services'; + +const NOOP = f => f; + +export const XYCHART_PROPS = { + width: 1, + height: 1, + orientation: 'vertical', + animateData: true, + stackBy: 'y', + xType: 'linear', + yType: 'linear', + xDomain: [0, 1], + yDomain: [0, 1], + xPadding: 0, + yPadding: 0, + statusText: '', + showCrosshair: true, + crosshairValue: 0, + onCrosshairUpdate: NOOP, + showDefaultAxis: true, + enableSelectionBrush: true, + selectionBrushOrientation: 'vertical', + onSelectionBrushEnd: NOOP, +}; describe('EuiXYChart', () => { - test('is rendered (empty)', () => { - const component = render( + + test(`renders all props`, () => { + const wrapper = mount(); + const wrapperProps = wrapper.props(); + + expect(wrapper.find(EuiXYChart).length).toBe(1); + Object.keys(XYCHART_PROPS).forEach(propName => { + expect(wrapperProps[propName]).toBe(XYCHART_PROPS[propName]); + }); + }); + + test('renders an empty chart', () => { + const EMPTY_CHART_MESSAGE = '~~Empty Chart~~' + const component = mount( ); - expect(component).toMatchSnapshot(); + expect(component.render().find('.euiText').text()).toBe(EMPTY_CHART_MESSAGE); + expect(component.find(EuiDefaultAxis)).toHaveLength(0); + expect(component.find(EuiCrosshairX)).toHaveLength(0); + expect(component.find(EuiCrosshairY)).toHaveLength(0); + expect(component.render()).toMatchSnapshot(); }); - test('passes handler functions', () => { + test('renders right default colors', () => { + const data = [ { x:0, y: 1 }, { x:1, y: 2 }]; + const series = new Array(VISUALIZATION_COLORS.length * 2) + .fill(0) + .map((color, i) => { + return { name: `series-${i}`, data }; + }); const component = mount( + {...requiredProps} + > + { + series.map((d, i) => ()) + } + ); - expect(component).toMatchSnapshot(); + expect(component.find(EuiLineSeries)).toHaveLength(VISUALIZATION_COLORS.length * 2) + VISUALIZATION_COLORS.forEach((color, i) => { + expect(component.find(EuiLineSeries).at(i).props().color).toBe(color); + expect(component.find(EuiLineSeries).at(i + VISUALIZATION_COLORS.length).props().color).toBe(color); + }) + }); + + test('renders default colors together with existing series colors', () => { + const data = [ { x:0, y: 1 }, { x:1, y: 2 }]; + const AVAILABLE_COLORS = VISUALIZATION_COLORS.length; + const series = new Array(AVAILABLE_COLORS * 2) + .fill(0) + .map((color, i) => { + return { name: `series-${i}`, data }; + }); + series.splice(1, 0, { name: `series-colored`, data, color: VISUALIZATION_COLORS[5] }); + + const component = mount( + + { + series.map((d, i) => ()) + } + + ); + const lineComponents = component.find(EuiLineSeries) + expect(lineComponents).toHaveLength(AVAILABLE_COLORS * 2 + 1) + // check before + expect(lineComponents.at(0).props().color).toBe(VISUALIZATION_COLORS[0]); + // check if the inserted element maintain its own color + expect(lineComponents.at(1).props().color).toBe(VISUALIZATION_COLORS[5]); + // check if the skip maintain the color assignment + expect(lineComponents.at(2).props().color).toBe(VISUALIZATION_COLORS[1]); + expect(lineComponents.at(AVAILABLE_COLORS + 1).props().color).toBe(VISUALIZATION_COLORS[0]); }); }); From 808b3e0c02425c634985b7bdbaa51bccd272a7ff Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 27 Jun 2018 14:46:51 +0200 Subject: [PATCH 49/68] Add axis tests --- .../horizontal_grid.test.js.snap | 107 +++++++ .../__snapshots__/vertical_grid.test.js.snap | 147 +++++++++ .../axis/__snapshots__/x_axis.test.js.snap | 291 ++++++++++++++++++ .../axis/__snapshots__/y_axis.test.js.snap | 191 ++++++++++++ src/components/xy_chart/axis/default_axis.js | 18 +- .../xy_chart/axis/horizontal_grid.js | 3 + .../xy_chart/axis/horizontal_grid.test.js | 32 ++ src/components/xy_chart/axis/vertical_grid.js | 3 + .../xy_chart/axis/vertical_grid.test.js | 32 ++ src/components/xy_chart/axis/x_axis.js | 19 +- src/components/xy_chart/axis/x_axis.test.js | 27 ++ src/components/xy_chart/axis/y_axis.js | 11 +- src/components/xy_chart/axis/y_axis.test.js | 27 ++ src/components/xy_chart/utils/axis_utils.js | 18 +- 14 files changed, 899 insertions(+), 27 deletions(-) create mode 100644 src/components/xy_chart/axis/__snapshots__/horizontal_grid.test.js.snap create mode 100644 src/components/xy_chart/axis/__snapshots__/vertical_grid.test.js.snap create mode 100644 src/components/xy_chart/axis/__snapshots__/x_axis.test.js.snap create mode 100644 src/components/xy_chart/axis/__snapshots__/y_axis.test.js.snap create mode 100644 src/components/xy_chart/axis/horizontal_grid.test.js create mode 100644 src/components/xy_chart/axis/vertical_grid.test.js create mode 100644 src/components/xy_chart/axis/x_axis.test.js create mode 100644 src/components/xy_chart/axis/y_axis.test.js diff --git a/src/components/xy_chart/axis/__snapshots__/horizontal_grid.test.js.snap b/src/components/xy_chart/axis/__snapshots__/horizontal_grid.test.js.snap new file mode 100644 index 000000000000..5ddd55ae050a --- /dev/null +++ b/src/components/xy_chart/axis/__snapshots__/horizontal_grid.test.js.snap @@ -0,0 +1,107 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiHorizontalGrid render the horizontal grid 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/axis/__snapshots__/vertical_grid.test.js.snap b/src/components/xy_chart/axis/__snapshots__/vertical_grid.test.js.snap new file mode 100644 index 000000000000..4c42697c39dc --- /dev/null +++ b/src/components/xy_chart/axis/__snapshots__/vertical_grid.test.js.snap @@ -0,0 +1,147 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiVerticalGrid render the vertical grid 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/axis/__snapshots__/x_axis.test.js.snap b/src/components/xy_chart/axis/__snapshots__/x_axis.test.js.snap new file mode 100644 index 000000000000..70dabd38db28 --- /dev/null +++ b/src/components/xy_chart/axis/__snapshots__/x_axis.test.js.snap @@ -0,0 +1,291 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiXAxis render the x axis 1`] = ` +
+
+
+ + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/axis/__snapshots__/y_axis.test.js.snap b/src/components/xy_chart/axis/__snapshots__/y_axis.test.js.snap new file mode 100644 index 000000000000..f7582a5f0ff4 --- /dev/null +++ b/src/components/xy_chart/axis/__snapshots__/y_axis.test.js.snap @@ -0,0 +1,191 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiYAxis render the y axis 1`] = ` +
+
+
+ + + + + + + + 1.0 + + + + + + 1.2 + + + + + + 1.4 + + + + + + 1.6 + + + + + + 1.8 + + + + + + 2.0 + + + + + + + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/axis/default_axis.js b/src/components/xy_chart/axis/default_axis.js index 078bf19f6e71..77c074e807ae 100644 --- a/src/components/xy_chart/axis/default_axis.js +++ b/src/components/xy_chart/axis/default_axis.js @@ -6,6 +6,11 @@ import { EuiHorizontalGrid } from './horizontal_grid'; import { EuiVerticalGrid } from './vertical_grid'; import { ORIENTATION } from '../utils/chart_utils'; + +/** + * The Default Axis component, with X and Y axis on the bottom and left position respectively, + * and horiznontal or vertical grid depending on the orientation prop. + */ export class EuiDefaultAxis extends PureComponent { render() { const { showGridLines, orientation, xOnZero, yOnZero, ...rest } = this.props; @@ -14,11 +19,12 @@ export class EuiDefaultAxis extends PureComponent { {showGridLines && orientation === ORIENTATION.VERTICAL && } + {showGridLines && orientation === ORIENTATION.HORIZONTAL && } - - + + ); } @@ -27,14 +33,18 @@ export class EuiDefaultAxis extends PureComponent { EuiDefaultAxis.displayName = 'EuiDefaultAxis'; EuiDefaultAxis.propTypes = { + /** The orientation of the chart, used to determine the correct orientation of grids */ orientation: PropTypes.string, + /** Show/Hide the background grids */ showGridLines: PropTypes.bool, - yOnZero: PropTypes.bool, + /** Specify if the x axis lay on 0, otherwise lyed on min x */ xOnZero: PropTypes.bool, + /** Specify if the y axis lay on 0, otherwise layd on min y */ + yOnZero: PropTypes.bool, }; EuiDefaultAxis.defaultProps = { - orientation: false, + orientation: ORIENTATION.VERTICAL, showGridLines: true, xOnZero: false, yOnZero: false, diff --git a/src/components/xy_chart/axis/horizontal_grid.js b/src/components/xy_chart/axis/horizontal_grid.js index 1caa0d5e9ae6..7c06946e393d 100644 --- a/src/components/xy_chart/axis/horizontal_grid.js +++ b/src/components/xy_chart/axis/horizontal_grid.js @@ -1,6 +1,9 @@ import React, { PureComponent } from 'react'; import { HorizontalGridLines } from 'react-vis'; +/** + * Horizontal grid lines aligned with y axis ticks + */ export class EuiHorizontalGrid extends PureComponent { render() { const style = { diff --git a/src/components/xy_chart/axis/horizontal_grid.test.js b/src/components/xy_chart/axis/horizontal_grid.test.js new file mode 100644 index 000000000000..12db91341835 --- /dev/null +++ b/src/components/xy_chart/axis/horizontal_grid.test.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import { EuiXYChart } from '../xy_chart'; +import { EuiLineSeries } from '../series/line_series'; +import { EuiHorizontalGrid } from './'; +import { requiredProps } from '../../../test/required_props'; + +describe('EuiHorizontalGrid', () => { + test('render the horizontal grid', () => { + const data = [ { x:0, y: 1 }, { x:1, y: 2 }]; + const width = 600; + const component = mount( + + + + + ); + const horizontalGridComponent = component.find(EuiHorizontalGrid) + expect(horizontalGridComponent).toHaveLength(1); + const firstLineProps = horizontalGridComponent.find('line').at(0).props(); + expect(firstLineProps.y1).toEqual(firstLineProps.y2); + expect(firstLineProps.x1).toEqual(0); + expect(firstLineProps.x2).toEqual(width); + expect(component.render()).toMatchSnapshot(); + }); +}); diff --git a/src/components/xy_chart/axis/vertical_grid.js b/src/components/xy_chart/axis/vertical_grid.js index 6869f8bc06e6..599069b5298f 100644 --- a/src/components/xy_chart/axis/vertical_grid.js +++ b/src/components/xy_chart/axis/vertical_grid.js @@ -1,6 +1,9 @@ import React, { PureComponent } from 'react'; import { VerticalGridLines } from 'react-vis'; +/** + * Vertical grid lines aligned with x axis ticks + */ export class EuiVerticalGrid extends PureComponent { render() { const style = { diff --git a/src/components/xy_chart/axis/vertical_grid.test.js b/src/components/xy_chart/axis/vertical_grid.test.js new file mode 100644 index 000000000000..7666465b9e81 --- /dev/null +++ b/src/components/xy_chart/axis/vertical_grid.test.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import { EuiXYChart } from '../xy_chart'; +import { EuiLineSeries } from '../series/line_series'; +import { EuiVerticalGrid } from './'; +import { requiredProps } from '../../../test/required_props'; + +describe('EuiVerticalGrid', () => { + test('render the vertical grid', () => { + const data = [ { x:0, y: 1 }, { x:1, y: 2 }]; + const height = 200; + const component = mount( + + + + + ); + const verticalGridComponent = component.find(EuiVerticalGrid) + expect(verticalGridComponent).toHaveLength(1); + const firstLineProps = verticalGridComponent.find('line').at(0).props(); + expect(firstLineProps.x1).toEqual(firstLineProps.x2); + expect(firstLineProps.y1).toEqual(0); + expect(firstLineProps.y2).toEqual(height); + expect(component.render()).toMatchSnapshot(); + }); +}); diff --git a/src/components/xy_chart/axis/x_axis.js b/src/components/xy_chart/axis/x_axis.js index 7196f91c620a..27220605934d 100644 --- a/src/components/xy_chart/axis/x_axis.js +++ b/src/components/xy_chart/axis/x_axis.js @@ -30,26 +30,19 @@ export class EuiXAxis extends PureComponent { tickLabelAngle={tickLabelAngle} {...rest} /> - ) - + ); } } EuiXAxis.displayName = 'EuiXAxis'; EuiXAxis.propTypes = { - title: PropTypes.string, /** The axis title */ + /** The axis title */ + title: PropTypes.string, /** The axis title position */ - titlePosition: PropTypes.oneOf([ - TITLE_POSITION.START, - TITLE_POSITION.MIDDLE, - TITLE_POSITION.END, - ]), + titlePosition: PropTypes.oneOf([TITLE_POSITION.START, TITLE_POSITION.MIDDLE, TITLE_POSITION.END]), /** The axis orientation */ - orientation: PropTypes.oneOf([ - ORIENTATION.TOP, - ORIENTATION.BOTTOM, - ]), + orientation: PropTypes.oneOf([ORIENTATION.TOP, ORIENTATION.BOTTOM]), /** Fix the axis at zero value */ onZero: PropTypes.bool, /** An array of ticks values */ @@ -68,7 +61,7 @@ EuiXAxis.defaultProps = { onZero: false, titlePosition: TITLE_POSITION.MIDDLE, orientation: ORIENTATION.BOTTOM, - tickSize: 5, + tickSize: 0, }; EuiXAxis.requiresSVG = true; diff --git a/src/components/xy_chart/axis/x_axis.test.js b/src/components/xy_chart/axis/x_axis.test.js new file mode 100644 index 000000000000..1e7e48677aa3 --- /dev/null +++ b/src/components/xy_chart/axis/x_axis.test.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import { EuiXYChart } from '../xy_chart'; +import { EuiLineSeries } from '../series/line_series'; +import { EuiXAxis } from './'; +import { requiredProps } from '../../../test/required_props'; + +describe('EuiXAxis', () => { + test('render the x axis', () => { + const data = [ { x:0, y: 1 }, { x:1, y: 2 }]; + const height = 200; + const component = mount( + + + + + ); + expect(component.find(EuiXAxis)).toHaveLength(1); + expect(component.render()).toMatchSnapshot(); + }); +}); diff --git a/src/components/xy_chart/axis/y_axis.js b/src/components/xy_chart/axis/y_axis.js index f02da946ab22..45761adf6946 100644 --- a/src/components/xy_chart/axis/y_axis.js +++ b/src/components/xy_chart/axis/y_axis.js @@ -37,14 +37,23 @@ export class EuiYAxis extends PureComponent { EuiYAxis.displayName = 'EuiYAxis'; EuiYAxis.propTypes = { + /** The axis title */ title: PropTypes.string, + /** The axis title position */ titlePosition: PropTypes.oneOf([TITLE_POSITION.START, TITLE_POSITION.MIDDLE, TITLE_POSITION.END]), + /** The axis orientation */ orientation: PropTypes.oneOf([ORIENTATION.LEFT, ORIENTATION.RIGHT]), + /** Fix the axis at zero value */ onZero: PropTypes.bool, + /** An array of ticks values */ ticks: PropTypes.array, + /** The height of the ticks in pixels */ tickSize: PropTypes.number, + /** TODO */ tickValues: PropTypes.array, + /** A formatter function in the form of function(value, index, scale, tickTotal) */ tickFormat: PropTypes.func, + /** the rotation angle in degree of the tick label */ tickLabelAngle: PropTypes.number, }; @@ -52,7 +61,7 @@ EuiYAxis.defaultProps = { onZero: false, titlePosition: TITLE_POSITION.MIDDLE, orientation: ORIENTATION.LEFT, - tickSize: 5, + tickSize: 0, }; EuiYAxis.requiresSVG = true; diff --git a/src/components/xy_chart/axis/y_axis.test.js b/src/components/xy_chart/axis/y_axis.test.js new file mode 100644 index 000000000000..e35968a75f6b --- /dev/null +++ b/src/components/xy_chart/axis/y_axis.test.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import { EuiXYChart } from '../xy_chart'; +import { EuiLineSeries } from '../series/line_series'; +import { EuiYAxis } from './'; +import { requiredProps } from '../../../test/required_props'; + +describe('EuiYAxis', () => { + test('render the y axis', () => { + const data = [ { x:0, y: 1 }, { x:1, y: 2 }]; + const height = 200; + const component = mount( + + + + + ); + expect(component.find(EuiYAxis)).toHaveLength(1); + expect(component.render()).toMatchSnapshot(); + }); +}); diff --git a/src/components/xy_chart/utils/axis_utils.js b/src/components/xy_chart/utils/axis_utils.js index 3056e7324a3d..3539ad119ec5 100644 --- a/src/components/xy_chart/utils/axis_utils.js +++ b/src/components/xy_chart/utils/axis_utils.js @@ -1,21 +1,21 @@ import { AxisUtils } from 'react-vis'; -const ORIENTATION = AxisUtils.ORIENTATION; +/** + * Axis orientation. Can be top, bottom, left, right. + * See react-vis AxisUtils.ORIENTATION for docs. + */ +export const ORIENTATION = AxisUtils.ORIENTATION; -const TITLE_POSITION = { +/** + * The title position along the axis. + */ +export const TITLE_POSITION = { MIDDLE: 'middle', START: 'start', END: 'end', }; -const GRID_TYPE = { - HORIZONTAL: 'horizontal', - VERTICAL: 'vertical', - BOTH: 'both', -}; - export const EuiXYChartAxisUtils = { TITLE_POSITION, - GRID_TYPE, ORIENTATION, }; From 149ffcd3bbe2ad176c60fb4a9a9dfda82dfbe649 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 27 Jun 2018 15:41:09 +0200 Subject: [PATCH 50/68] Add crosshair tests --- .../__snapshots__/crosshair_x.test.js.snap | 44 ++++ .../__snapshots__/crosshair_y.test.js.snap | 44 ++++ .../xy_chart/crosshairs/crosshair_x.js | 22 +- .../xy_chart/crosshairs/crosshair_x.test.js | 42 +++ .../xy_chart/crosshairs/crosshair_y.js | 249 ++++++++++++++++-- .../xy_chart/crosshairs/crosshair_y.test.js | 43 +++ .../crosshairs/react_vis_crosshair_y.js | 170 ------------ 7 files changed, 409 insertions(+), 205 deletions(-) create mode 100644 src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap create mode 100644 src/components/xy_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap create mode 100644 src/components/xy_chart/crosshairs/crosshair_x.test.js create mode 100644 src/components/xy_chart/crosshairs/crosshair_y.test.js delete mode 100644 src/components/xy_chart/crosshairs/react_vis_crosshair_y.js diff --git a/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap new file mode 100644 index 000000000000..f365b1299bbd --- /dev/null +++ b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiCrosshairX render the X crosshair 1`] = ` +
+
+
+ + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap new file mode 100644 index 000000000000..35756ede713b --- /dev/null +++ b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiCrosshairY render the Y crosshair 1`] = ` +
+
+
+ + + + + + +
+
+
+`; diff --git a/src/components/xy_chart/crosshairs/crosshair_x.js b/src/components/xy_chart/crosshairs/crosshair_x.js index ab6c68062b40..1884fdcd1a87 100644 --- a/src/components/xy_chart/crosshairs/crosshair_x.js +++ b/src/components/xy_chart/crosshairs/crosshair_x.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { AbstractSeries, Crosshair } from 'react-vis'; /** - * The Crosshair used by the XYChart as main tooltip mechanism along X axis. + * The Crosshair used by the XYChart as main tooltip mechanism along X axis (vertical). */ export class EuiCrosshairX extends AbstractSeries { state = { @@ -29,12 +29,12 @@ export class EuiCrosshairX extends AbstractSeries { return null; } - static _computeDataFromXValue(dataSeries, crosshairX) { + static _computeDataFromXValue(dataSeries, crosshairValue) { const filteredAndFlattenDataByX = dataSeries .filter(series => series) // get only cleaned data series .map((series, seriesIndex) => { return series - .filter(dataPoint => dataPoint.x === crosshairX) + .filter(dataPoint => dataPoint.x === crosshairValue) .map(dataPoint => ({ ...dataPoint, originalValues: { ...dataPoint }, seriesIndex })); }) .reduce((acc, val) => acc.concat(val), []); @@ -102,6 +102,10 @@ export class EuiCrosshairX extends AbstractSeries { .map((data, seriesIndex) => { let minDistance = Number.POSITIVE_INFINITY; let value = null; + // TODO to increase the performance, it's better to use a search algorithm like bisect + // starting from the assumption that we will always have the same length for + // for each series and we can assume that the scale x index can reflect more or less + // the position of the mouse inside the array. data.forEach((item) => { let itemXCoords; const xCoord = xScaleFn(item); @@ -148,14 +152,14 @@ export class EuiCrosshairX extends AbstractSeries { : d.y; return { x, y, originalValues: d, seriesIndex: value.seriesIndex }; }); - - if (this.props.onCrosshairUpdate) { - this.props.onCrosshairUpdate(values[0].x); + const { onCrosshairUpdate } = this.props; + if (onCrosshairUpdate) { + onCrosshairUpdate(values[0].x); } - this.setState({ + this.setState(() => ({ values, - }); + })); } render() { @@ -175,7 +179,7 @@ export class EuiCrosshairX extends AbstractSeries { EuiCrosshairX.displayName = 'EuiCrosshairX'; EuiCrosshairX.propTypes = { - ... AbstractSeries.propTypes, + /** The crosshair value used to display this crosshair (doesn't depend on mouse position) */ crosshairValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.number diff --git a/src/components/xy_chart/crosshairs/crosshair_x.test.js b/src/components/xy_chart/crosshairs/crosshair_x.test.js new file mode 100644 index 000000000000..a9feb4284652 --- /dev/null +++ b/src/components/xy_chart/crosshairs/crosshair_x.test.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { mount } from 'enzyme'; + +import { EuiXYChart } from '../xy_chart'; +import { EuiVerticalBarSeries } from '../series/vertical_bar_series'; +import { EuiCrosshairX } from './'; +import { requiredProps } from '../../../test/required_props'; +import { Crosshair } from 'react-vis'; +describe('EuiCrosshairX', () => { + test('render the X crosshair', () => { + const data = [ { x:0, y: 1.5 }, { x:1, y: 2 }]; + const component = mount( + + + + + ); + expect(component.find(EuiCrosshairX)).toHaveLength(1); + // check if the Crosshair component is empty + expect(component.find(Crosshair).children()).toHaveLength(0); + expect(component.render()).toMatchSnapshot(); + expect(component.find('rect')).toHaveLength(2); + + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 0, clientY: 100 } }); + expect(component.find(Crosshair).children()).toHaveLength(1); + const crosshair = component.find('.rv-crosshair') + expect(crosshair).toHaveLength(1); + expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__title__value').text()).toBe('0'); + expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__item__value').text()).toBe('1.5'); + + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 301, clientY: 100 } }); + expect(crosshair).toHaveLength(1); + expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__title__value').text()).toBe('1'); + expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__item__value').text()).toBe('2'); + }); +}); diff --git a/src/components/xy_chart/crosshairs/crosshair_y.js b/src/components/xy_chart/crosshairs/crosshair_y.js index 650a4a2ba961..7643f669c7c3 100644 --- a/src/components/xy_chart/crosshairs/crosshair_y.js +++ b/src/components/xy_chart/crosshairs/crosshair_y.js @@ -1,13 +1,195 @@ -import React from 'react'; -import { AbstractSeries } from 'react-vis'; -import { CrosshairY } from './react_vis_crosshair_y'; +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +// Copyright (c) 2016 - 2017 Uber Technologies, Inc. +// +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { AbstractSeries, ScaleUtils } from 'react-vis'; + +/** + * Format title by detault. + * @param {Array} values List of values. + * @returns {*} Formatted value or undefined. + */ +function defaultTitleFormat(values) { + const value = getFirstNonEmptyValue(values); + if (value) { + return { + title: 'x', + value: value.x + }; + } +} /** - * The Crosshair used by the XYChart as main tooltip mechanism along X axis. + * Format items by default. + * @param {Array} values Array of values. + * @returns {*} Formatted list of items. + */ +function defaultItemsFormat(values) { + return values.map((v, i) => { + if (v) { + return { value: v.y, title: i }; + } + }); +} + +/** + * Get the first non-empty item from an array. + * @param {Array} values Array of values. + * @returns {*} First non-empty value or undefined. + */ +function getFirstNonEmptyValue(values) { + return (values || []).find(v => Boolean(v)); +} + +export class CrosshairY extends PureComponent { + + static get propTypes() { + return { + className: PropTypes.string, + values: PropTypes.array, + series: PropTypes.object, + innerWidth: PropTypes.number, + innerHeight: PropTypes.number, + marginLeft: PropTypes.number, + marginTop: PropTypes.number, + orientation: PropTypes.oneOf(['left', 'right']), + itemsFormat: PropTypes.func, + titleFormat: PropTypes.func, + style: PropTypes.shape({ + line: PropTypes.object, + title: PropTypes.object, + box: PropTypes.object + }) + }; + } + + static get defaultProps() { + return { + titleFormat: defaultTitleFormat, + itemsFormat: defaultItemsFormat, + style: { + line: {}, + title: {}, + box: {} + } + }; + } + + /** + * Render crosshair title. + * @returns {*} Container with the crosshair title. + * @private + */ + _renderCrosshairTitle() { + const { values, titleFormat, style } = this.props; + const titleItem = titleFormat(values); + if (!titleItem) { + return null; + } + return ( +
+ {titleItem.title} + {': '} + {titleItem.value} +
+ ); + } + + /** + * Render crosshair items (title + value for each series). + * @returns {*} Array of React classes with the crosshair values. + * @private + */ + _renderCrosshairItems() { + const { values, itemsFormat } = this.props; + const items = itemsFormat(values); + if (!items) { + return null; + } + return items.filter(i => i).map(function renderValue(item, i) { + return ( +
+ {item.title} + {': '} + {item.value} +
+ ); + }); + } + + render() { + const { + children, + className, + values, + marginTop, + marginLeft, + innerWidth, + style } = this.props; + const value = getFirstNonEmptyValue(values); + if (!value) { + return null; + } + const y = ScaleUtils.getAttributeFunctor(this.props, 'y'); + const innerTop = y(value); + + const left = marginLeft; + const top = marginTop + innerTop; + const innerClassName = `rv-crosshair__inner rv-crosshair__inner--left`; + return ( +
+ +
+ +
+ {children ? + children : +
+
+ {this._renderCrosshairTitle()} + {this._renderCrosshairItems()} +
+
+ } +
+
+ ); + } +} + +CrosshairY.displayName = 'CrosshairY'; + +/** + * The Crosshair used by the XYChart as main tooltip mechanism along Y axis (horizontal). */ export class EuiCrosshairY extends AbstractSeries { state = { - crosshairValues: [], + values: [], } static get requiresSVG() { @@ -19,23 +201,23 @@ export class EuiCrosshairY extends AbstractSeries { } static getDerivedStateFromProps(props) { - const { crosshairY, _allData } = props; + const { crosshairValue, _allData } = props; - if (crosshairY !== undefined) { + if (crosshairValue !== undefined) { return { - crosshairValues: EuiCrosshairY._computeDataFromYValue(_allData, crosshairY), + values: EuiCrosshairY._computeDataFromYValue(_allData, crosshairValue), }; } return null; } - static _computeDataFromYValue(dataSeries, crosshairY) { + static _computeDataFromYValue(dataSeries, crosshairValue) { const filteredAndFlattenDataByY = dataSeries .filter(series => series) // get only cleaned data series - .map(series => { + .map((series, seriesIndex) => { return series - .filter(dataPoint => dataPoint.y === crosshairY) - .map(dataPoint => ({ ...dataPoint, originalValues: { ...dataPoint } })); + .filter(dataPoint => dataPoint.y === crosshairValue) + .map(dataPoint => ({ ...dataPoint, originalValues: { ...dataPoint }, seriesIndex })); }) .reduce((acc, val) => acc.concat(val), []); return filteredAndFlattenDataByY; @@ -50,7 +232,7 @@ export class EuiCrosshairY extends AbstractSeries { this.props.onCrosshairUpdate(null); } this.setState({ - crosshairValues: [] + values: [] }) } @@ -69,9 +251,9 @@ export class EuiCrosshairY extends AbstractSeries { } _itemsFormat = (dataPoints) => { - return dataPoints.map((d, i) => { + return dataPoints.map(d => { return { - title: `series ${i}`, // TODO specify series title or default one + title: `series ${d.seriesIndex}`, // TODO specify series title or default one value: d.x, }; }); @@ -99,9 +281,13 @@ export class EuiCrosshairY extends AbstractSeries { let globalMinDistance = Number.POSITIVE_INFINITY; const nearestYData = dataSeries - .map(data => { + .map((data, seriesIndex) => { let minDistance = Number.POSITIVE_INFINITY; let value = null; + // TODO to increase the performance, it's better to use a search algorithm like bisect + // starting from the assumption that we will always have the same length for + // for each series and we can assume that the scale y index can reflect more or less + // the position of the mouse inside the array. data.forEach((item) => { let itemYCoords; const yCoord = yScaleFn(item); @@ -129,11 +315,13 @@ export class EuiCrosshairY extends AbstractSeries { return { minDistance, value, + seriesIndex, }; }) .filter(d => d); + // filter and map nearest X data per dataseries to get only the nearet onces - const crosshairValues = nearestYData + const values = nearestYData .filter(value => value.minDistance === globalMinDistance) .map(value => { // check if we are on histograms and we need to show the right x and y values @@ -144,23 +332,23 @@ export class EuiCrosshairY extends AbstractSeries { const x = typeof d.x0 === 'number' ? (d.x - d.x0) : d.x; - return { x, y, originalValues: d }; + return { x, y, originalValues: d, seriesIndex: value.seriesIndex }; }); - - if (this.props.onCrosshairUpdate) { - this.props.onCrosshairUpdate(crosshairValues[0].y); + const { onCrosshairUpdate } = this.props; + if (onCrosshairUpdate) { + onCrosshairUpdate(values[0].y); } - this.setState({ - crosshairValues, - }); + this.setState(() => ({ + values, + })); } render() { - const { crosshairValues } = this.state + const { values } = this.state return ( { + test('render the Y crosshair', () => { + const data = [ { x:1.5, y: 0 }, { x:2, y: 1 }]; + const component = mount( + + + + + ); + expect(component.find(EuiCrosshairY)).toHaveLength(1); + // check if the Crosshair component is empty + expect(component.find(CrosshairY).children()).toHaveLength(0); + expect(component.render()).toMatchSnapshot(); + expect(component.find('rect')).toHaveLength(2); + + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 100, clientY: 0 } }); + expect(component.find(CrosshairY).children()).toHaveLength(1); + const crosshair = component.find('.rv-crosshair') + expect(crosshair).toHaveLength(1); + expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__title__value').text()).toBe('1'); + expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__item__value').text()).toBe('2'); + + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 301, clientY: 100 } }); + expect(crosshair).toHaveLength(1); + expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__title__value').text()).toBe('0'); + expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__item__value').text()).toBe('1.5'); + }); +}); diff --git a/src/components/xy_chart/crosshairs/react_vis_crosshair_y.js b/src/components/xy_chart/crosshairs/react_vis_crosshair_y.js deleted file mode 100644 index f2c3f913a4d5..000000000000 --- a/src/components/xy_chart/crosshairs/react_vis_crosshair_y.js +++ /dev/null @@ -1,170 +0,0 @@ -// TODO this is a more or less a copy and paste of crosshair y -// we need to specify the license (if we need to use the uber one) -// we need to find a better name - -import React, { PureComponent } from 'react'; - -import PropTypes from 'prop-types'; - -import { ScaleUtils } from 'react-vis'; - -/** - * Format title by detault. - * @param {Array} values List of values. - * @returns {*} Formatted value or undefined. - */ -function defaultTitleFormat(values) { - const value = getFirstNonEmptyValue(values); - if (value) { - return { - title: 'x', - value: value.x - }; - } -} - -/** - * Format items by default. - * @param {Array} values Array of values. - * @returns {*} Formatted list of items. - */ -function defaultItemsFormat(values) { - return values.map((v, i) => { - if (v) { - return { value: v.y, title: i }; - } - }); -} - -/** - * Get the first non-empty item from an array. - * @param {Array} values Array of values. - * @returns {*} First non-empty value or undefined. - */ -function getFirstNonEmptyValue(values) { - return (values || []).find(v => Boolean(v)); -} - -export class CrosshairY extends PureComponent { - - static get propTypes() { - return { - className: PropTypes.string, - values: PropTypes.array, - series: PropTypes.object, - innerWidth: PropTypes.number, - innerHeight: PropTypes.number, - marginLeft: PropTypes.number, - marginTop: PropTypes.number, - orientation: PropTypes.oneOf(['left', 'right']), - itemsFormat: PropTypes.func, - titleFormat: PropTypes.func, - style: PropTypes.shape({ - line: PropTypes.object, - title: PropTypes.object, - box: PropTypes.object - }) - }; - } - - static get defaultProps() { - return { - titleFormat: defaultTitleFormat, - itemsFormat: defaultItemsFormat, - style: { - line: {}, - title: {}, - box: {} - } - }; - } - - /** - * Render crosshair title. - * @returns {*} Container with the crosshair title. - * @private - */ - _renderCrosshairTitle() { - const { values, titleFormat, style } = this.props; - const titleItem = titleFormat(values); - if (!titleItem) { - return null; - } - return ( -
- {titleItem.title} - {': '} - {titleItem.value} -
- ); - } - - /** - * Render crosshair items (title + value for each series). - * @returns {*} Array of React classes with the crosshair values. - * @private - */ - _renderCrosshairItems() { - const { values, itemsFormat } = this.props; - const items = itemsFormat(values); - if (!items) { - return null; - } - return items.filter(i => i).map(function renderValue(item, i) { - return ( -
- {item.title} - {': '} - {item.value} -
- ); - }); - } - - render() { - const { - children, - className, - values, - marginTop, - marginLeft, - innerWidth, - style } = this.props; - const value = getFirstNonEmptyValue(values); - if (!value) { - return null; - } - const y = ScaleUtils.getAttributeFunctor(this.props, 'y'); - const innerTop = y(value); - - const left = marginLeft; - const top = marginTop + innerTop; - const innerClassName = `rv-crosshair__inner rv-crosshair__inner--left`; - return ( -
- -
- -
- {children ? - children : -
-
- {this._renderCrosshairTitle()} - {this._renderCrosshairItems()} -
-
- } -
-
- ); - } -} - -CrosshairY.displayName = 'CrosshairY'; From d11c7f3c5366d5e5bc12ffb7668e6ac5854eb158 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 27 Jun 2018 16:29:28 +0200 Subject: [PATCH 51/68] Add basic test for selection brush --- .../selection_brush.test.js.snap | 150 ++++++++++++++++++ .../xy_chart/{brush.js => selection_brush.js} | 1 - .../xy_chart/selection_brush.test.js | 46 ++++++ src/components/xy_chart/xy_chart.js | 2 +- 4 files changed, 197 insertions(+), 2 deletions(-) create mode 100644 src/components/xy_chart/__snapshots__/selection_brush.test.js.snap rename src/components/xy_chart/{brush.js => selection_brush.js} (99%) create mode 100644 src/components/xy_chart/selection_brush.test.js diff --git a/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap b/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap new file mode 100644 index 000000000000..aac7ea56dafb --- /dev/null +++ b/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap @@ -0,0 +1,150 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiSelectionBrush renders an horizontal selection brush 1`] = ` + + + + + +`; diff --git a/src/components/xy_chart/brush.js b/src/components/xy_chart/selection_brush.js similarity index 99% rename from src/components/xy_chart/brush.js rename to src/components/xy_chart/selection_brush.js index 05d415dae2dd..26a611b598c0 100644 --- a/src/components/xy_chart/brush.js +++ b/src/components/xy_chart/selection_brush.js @@ -155,7 +155,6 @@ export class EuiSelectionBrush extends AbstractSeries { render() { const { marginLeft, marginTop, color, opacity } = this.props; const { rectArea: { x, y, width, height } } = this.state; - return ( {}; + +describe('EuiSelectionBrush', () => { + + test(`renders an horizontal selection brush`, () => { + const data = [{ x: 0, y: 2 }, { x: 1, y: 4 }]; + const component = mount( + + + + ); + let selectionBrush = component.find(EuiSelectionBrush); + expect(selectionBrush.exists()).toBe(true); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + selectionBrush = component.find(EuiSelectionBrush); + + expect(selectionBrush).toMatchSnapshot(); + expect(selectionBrush.find('rect').at(0).props().x).toBe(50); + expect(selectionBrush.find('rect').at(0).props().y).toBe(0); + expect(selectionBrush.find('rect').at(0).props().width).toBe(50); + expect(selectionBrush.find('rect').at(0).props().height).toBe(200); + component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + selectionBrush = component.find(EuiSelectionBrush); + expect(selectionBrush.find('rect').at(0).props().x).toBe(0); + expect(selectionBrush.find('rect').at(0).props().y).toBe(0); + expect(selectionBrush.find('rect').at(0).props().width).toBe(0); + expect(selectionBrush.find('rect').at(0).props().height).toBe(0); + + }); +}); diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index 8c60c06485ef..cbaf494261d0 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -3,7 +3,7 @@ import { XYPlot, AbstractSeries, makeVisFlexible } from 'react-vis'; import PropTypes from 'prop-types'; import { EuiEmptyPrompt } from '../empty_prompt'; -import { EuiSelectionBrush } from './brush'; +import { EuiSelectionBrush } from './selection_brush'; import { EuiDefaultAxis } from './axis/default_axis'; import { EuiCrosshairX } from './crosshairs/crosshair_x'; import { EuiCrosshairY } from './crosshairs/crosshair_y'; From 01e1bc6eb278acacdd8ec3c83a95cf5e02cd61f8 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 27 Jun 2018 22:12:22 +0200 Subject: [PATCH 52/68] Partial fix brush compute values on ordinal scales --- .../selection_brush.test.js.snap | 298 ++++++++++++++++++ src/components/xy_chart/selection_brush.js | 31 +- .../xy_chart/selection_brush.test.js | 152 +++++++++ 3 files changed, 474 insertions(+), 7 deletions(-) diff --git a/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap b/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap index aac7ea56dafb..6b390c3c2990 100644 --- a/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap +++ b/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap @@ -148,3 +148,301 @@ exports[`EuiSelectionBrush renders an horizontal selection brush 1`] = ` `; + +exports[`EuiSelectionBrush renders an vertical selection brush 1`] = ` + + + + + +`; + +exports[`EuiSelectionBrush renders free form selection brush 1`] = ` + + + + + +`; diff --git a/src/components/xy_chart/selection_brush.js b/src/components/xy_chart/selection_brush.js index 26a611b598c0..4b2b1247eb1c 100644 --- a/src/components/xy_chart/selection_brush.js +++ b/src/components/xy_chart/selection_brush.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ScaleUtils, AbstractSeries } from 'react-vis'; -import { EuiXYChartUtils } from './utils/chart_utils'; -const { HORIZONTAL, VERTICAL, BOTH } = EuiXYChartUtils.ORIENTATION +import { ORIENTATION, SCALE_TYPE } from './utils/chart_utils'; +const { HORIZONTAL, VERTICAL, BOTH } = ORIENTATION; const DEFAULT_AREAS = { areaSize: 0, @@ -75,6 +75,20 @@ export class EuiSelectionBrush extends AbstractSeries { }; } + _getScaledValue(scale, scaleType, value0, value1) { + switch(scaleType) { + case SCALE_TYPE.ORDINAL: + return [0, 0]; + default: + return [ + scale.invert(value0 < value1 ? value0 : value1), + scale.invert(value0 < value1 ? value1 : value0), + ]; + break; + + } + } + _startDrawing = (e) => { const { onBrushStart } = this.props; const { offsetX, offsetY } = e.nativeEvent; @@ -132,16 +146,19 @@ export class EuiSelectionBrush extends AbstractSeries { } const { drawArea } = this.state; const { x0, y0, x1, y1 } = drawArea; - const { onBrushEnd } = this.props; + const { xType, yType, onBrushEnd } = this.props; const xScale = ScaleUtils.getAttributeScale(this.props, 'x'); const yScale = ScaleUtils.getAttributeScale(this.props, 'y'); + const xValues = this._getScaledValue(xScale, xType, x0, x1); + const yValues = this._getScaledValue(yScale, yType, y0, y1); + // Compute the corresponding domain drawn const domainArea = { - startX: xScale.invert(x0 < x1 ? x0 : x1), - endX: xScale.invert(x0 < x1 ? x1 : x0), - startY: yScale.invert(y0 < y1 ? y1 : y0), - endY: yScale.invert(y0 < y1 ? y0 : y1), + startX: xValues[0], + endX: xValues[1], + startY: yValues[1], + endY: yValues[0], }; if (onBrushEnd) { diff --git a/src/components/xy_chart/selection_brush.test.js b/src/components/xy_chart/selection_brush.test.js index 3014e6dc145c..d34990644ea1 100644 --- a/src/components/xy_chart/selection_brush.test.js +++ b/src/components/xy_chart/selection_brush.test.js @@ -4,6 +4,7 @@ import { mount } from 'enzyme'; import { EuiXYChart } from './xy_chart'; import { EuiSelectionBrush } from './selection_brush'; import { EuiVerticalBarSeries } from './series'; +import { ORIENTATION, SCALE_TYPE } from './utils/chart_utils'; const NOOP = () => {}; @@ -43,4 +44,155 @@ describe('EuiSelectionBrush', () => { expect(selectionBrush.find('rect').at(0).props().height).toBe(0); }); + test(`renders an vertical selection brush`, () => { + const data = [{ x: 0, y: 2 }, { x: 1, y: 4 }]; + const component = mount( + + + + ); + let selectionBrush = component.find(EuiSelectionBrush); + expect(selectionBrush.exists()).toBe(true); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + selectionBrush = component.find(EuiSelectionBrush); + + expect(selectionBrush).toMatchSnapshot(); + expect(selectionBrush.find('rect').at(0).props().x).toBe(0); + expect(selectionBrush.find('rect').at(0).props().y).toBe(50); + expect(selectionBrush.find('rect').at(0).props().width).toBe(600); + expect(selectionBrush.find('rect').at(0).props().height).toBe(50); + component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + selectionBrush = component.find(EuiSelectionBrush); + expect(selectionBrush.find('rect').at(0).props().x).toBe(0); + expect(selectionBrush.find('rect').at(0).props().y).toBe(0); + expect(selectionBrush.find('rect').at(0).props().width).toBe(0); + expect(selectionBrush.find('rect').at(0).props().height).toBe(0); + }); + test(`renders free form selection brush`, () => { + const data = [{ x: 0, y: 2 }, { x: 1, y: 4 }]; + const component = mount( + + + + ); + let selectionBrush = component.find(EuiSelectionBrush); + expect(selectionBrush.exists()).toBe(true); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + selectionBrush = component.find(EuiSelectionBrush); + + expect(selectionBrush).toMatchSnapshot(); + expect(selectionBrush.find('rect').at(0).props().x).toBe(50); + expect(selectionBrush.find('rect').at(0).props().y).toBe(50); + expect(selectionBrush.find('rect').at(0).props().width).toBe(50); + expect(selectionBrush.find('rect').at(0).props().height).toBe(50); + component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + selectionBrush = component.find(EuiSelectionBrush); + expect(selectionBrush.find('rect').at(0).props().x).toBe(0); + expect(selectionBrush.find('rect').at(0).props().y).toBe(0); + expect(selectionBrush.find('rect').at(0).props().width).toBe(0); + expect(selectionBrush.find('rect').at(0).props().height).toBe(0); + }); + test(`get onSelectionBrushEnd call on linear x scale`, () => { + const data = [{ x: 0, y: 2 }, { x: 1, y: 4 }]; + const onSelectionBrushEndMock = jest.fn(); + const component = mount( + + + + ); + let selectionBrush = component.find(EuiSelectionBrush); + expect(selectionBrush.exists()).toBe(true); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + selectionBrush = component.find(EuiSelectionBrush); + expect(onSelectionBrushEndMock.mock.calls.length).toBe(1); + const expectedBrush = { + domainArea: { + startX: -0.5, + endX: 1.5, + startY: 2, + endY: 3, + }, + drawArea: { + x0: 0, + x1: 600, + y0: 50, + y1: 100, + } + }; + expect(onSelectionBrushEndMock.mock.calls[0][0]).toEqual(expectedBrush) + }); + test.skip(`get onSelectionBrushEnd call on ordinal x scale`, () => { + const data = [{ x: 0, y: 2 }, { x: 1, y: 4 }]; + const onSelectionBrushEndMock = jest.fn(); + const component = mount( + + + + ); + let selectionBrush = component.find(EuiSelectionBrush); + expect(selectionBrush.exists()).toBe(true); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: 50, offsetY: 50 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + selectionBrush = component.find(EuiSelectionBrush); + expect(onSelectionBrushEndMock.mock.calls.length).toBe(1); + const expectedBrush = { + // TODO update the domain in respect to ordinal scale + domainArea: { + startX: -0.5, + endX: 1.5, + startY: 2, + endY: 3, + }, + drawArea: { + x0: 0, + x1: 600, + y0: 50, + y1: 100, + } + }; + expect(onSelectionBrushEndMock.mock.calls[0][0]).toEqual(expectedBrush) + }); }); From 7360f4881cfa1fe8260a2294502f67a5eaf9a882 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 28 Jun 2018 13:06:46 +0200 Subject: [PATCH 53/68] Updated react-vis to 1.10.0. Moved react-vis scss to eui scss. --- src/components/xy_chart/_chart.scss | 19 --- src/components/xy_chart/_index.scss | 8 +- src/components/xy_chart/_line_annotation.scss | 12 ++ src/components/xy_chart/_reactvis.css | 1 - src/components/xy_chart/_xy_chart.scss | 3 + src/components/xy_chart/line_annotation.js | 118 +++++++-------- src/components/xy_chart/line_annotation.scss | 3 - .../xy_chart/styles/react_vis/legends.scss | 134 ++++++++++++++++++ .../xy_chart/styles/react_vis/plot.scss | 128 +++++++++++++++++ .../styles/react_vis/radial-chart.scss | 6 + .../xy_chart/styles/react_vis/treemap.scss | 22 +++ yarn.lock | 22 ++- 12 files changed, 383 insertions(+), 93 deletions(-) delete mode 100644 src/components/xy_chart/_chart.scss create mode 100644 src/components/xy_chart/_line_annotation.scss delete mode 100644 src/components/xy_chart/_reactvis.css create mode 100644 src/components/xy_chart/_xy_chart.scss delete mode 100644 src/components/xy_chart/line_annotation.scss create mode 100644 src/components/xy_chart/styles/react_vis/legends.scss create mode 100644 src/components/xy_chart/styles/react_vis/plot.scss create mode 100644 src/components/xy_chart/styles/react_vis/radial-chart.scss create mode 100644 src/components/xy_chart/styles/react_vis/treemap.scss diff --git a/src/components/xy_chart/_chart.scss b/src/components/xy_chart/_chart.scss deleted file mode 100644 index cd75098eddda..000000000000 --- a/src/components/xy_chart/_chart.scss +++ /dev/null @@ -1,19 +0,0 @@ -.rv-xy-plot__inner { - overflow: visible; -} - -.euixychart-error-nodata { - position: relative; - border: 2px solid #e2e2e2; - border-radius: 8px; - text-align: center; -} - -.euixychart-error-nodata .euiToastHeader__title { - margin-left: 5px; - font-weight: bold; -} - -.euixychart-error-nodata .euiToastHeader__icon { - margin-top: -5px; -} \ No newline at end of file diff --git a/src/components/xy_chart/_index.scss b/src/components/xy_chart/_index.scss index 0d63623b36d3..cff76a876b80 100644 --- a/src/components/xy_chart/_index.scss +++ b/src/components/xy_chart/_index.scss @@ -1,5 +1,9 @@ -@import "reactvis"; +/* react-vis scss styles copied and pasted from react-vis lib */ +@import "styles/react_vis/plot"; +@import "styles/react_vis/legends"; +@import "styles/react_vis/radial-chart"; +@import "styles/react_vis/treemap"; @import "legend"; -@import "chart"; @import "line_annotation"; +@import "xy_chart"; diff --git a/src/components/xy_chart/_line_annotation.scss b/src/components/xy_chart/_line_annotation.scss new file mode 100644 index 000000000000..85cb88d24c7f --- /dev/null +++ b/src/components/xy_chart/_line_annotation.scss @@ -0,0 +1,12 @@ +.euiLineAnnotations__line { + stroke: red; + stroke-width: 2px; + opacity: 0.3; +} +.euiLineAnnotations__text { + font-size: $euiFontSizeXS; + fill: red; + stroke-width: 0; + opacity: 0.3; + alignment-baseline: text-after-edge; +} diff --git a/src/components/xy_chart/_reactvis.css b/src/components/xy_chart/_reactvis.css deleted file mode 100644 index b2a184bbbb6c..000000000000 --- a/src/components/xy_chart/_reactvis.css +++ /dev/null @@ -1 +0,0 @@ -.react-vis-magic-css-import-rule{display:inherit}.rv-treemap{font-size:12px;position:relative}.rv-treemap__leaf{overflow:hidden;position:absolute}.rv-treemap__leaf--circle{align-items:center;border-radius:100%;display:flex;justify-content:center}.rv-treemap__leaf__content{overflow:hidden;padding:10px;text-overflow:ellipsis}.rv-xy-plot{color:#c3c3c3;position:relative}.rv-xy-plot canvas{pointer-events:none}.rv-xy-plot .rv-xy-canvas{pointer-events:none;position:absolute}.rv-xy-plot__inner{display:block}.rv-xy-plot__axis__line{fill:none;stroke-width:2px;stroke:#e6e6e9}.rv-xy-plot__axis__tick__line{stroke:#e6e6e9}.rv-xy-plot__axis__tick__text{fill:#6b6b76;font-size:11px}.rv-xy-plot__axis__title text{fill:#6b6b76;font-size:11px}.rv-xy-plot__grid-lines__line{stroke:#e6e6e9}.rv-xy-plot__circular-grid-lines__line{fill-opacity:0;stroke:#e6e6e9}.rv-xy-plot__series,.rv-xy-plot__series path{pointer-events:all}.rv-xy-plot__circular-grid-lines__line{fill-opacity:0;stroke:#e6e6e9}.rv-xy-plot__series,.rv-xy-plot__series path{pointer-events:all}.rv-xy-plot__series--line{fill:none;stroke:#000;stroke-width:2px}.rv-crosshair{position:absolute;font-size:11px;pointer-events:none}.rv-crosshair__line{background:#47d3d9;width:1px}.rv-crosshair__inner{position:absolute;text-align:left;top:0}.rv-crosshair__inner__content{border-radius:4px;background:#3a3a48;color:#fff;font-size:12px;padding:7px 10px;box-shadow:0 2px 4px rgba(0,0,0,0.5)}.rv-crosshair__inner--left{right:4px}.rv-crosshair__inner--right{left:4px}.rv-crosshair__title{font-weight:bold;white-space:nowrap}.rv-crosshair__item{white-space:nowrap}.rv-hint{position:absolute;pointer-events:none}.rv-hint__content{border-radius:4px;padding:7px 10px;font-size:12px;background:#3a3a48;box-shadow:0 2px 4px rgba(0,0,0,0.5);color:#fff;text-align:left;white-space:nowrap}.rv-discrete-color-legend{box-sizing:border-box;overflow-y:auto;font-size:12px}.rv-discrete-color-legend.horizontal{white-space:nowrap}.rv-discrete-color-legend-item{color:#3a3a48;border-radius:1px;padding:9px 10px}.rv-discrete-color-legend-item.horizontal{display:inline-block}.rv-discrete-color-legend-item.horizontal .rv-discrete-color-legend-item__title{margin-left:0;display:block}.rv-discrete-color-legend-item__color{background:#dcdcdc;display:inline-block;height:2px;vertical-align:middle;width:14px}.rv-discrete-color-legend-item__title{margin-left:10px}.rv-discrete-color-legend-item.disabled{color:#b8b8b8}.rv-discrete-color-legend-item.clickable{cursor:pointer}.rv-discrete-color-legend-item.clickable:hover{background:#f9f9f9}.rv-search-wrapper{display:flex;flex-direction:column}.rv-search-wrapper__form{flex:0}.rv-search-wrapper__form__input{width:100%;color:#a6a6a5;border:1px solid #e5e5e4;padding:7px 10px;font-size:12px;box-sizing:border-box;border-radius:2px;margin:0 0 9px;outline:0}.rv-search-wrapper__contents{flex:1;overflow:auto}.rv-continuous-color-legend{font-size:12px}.rv-continuous-color-legend .rv-gradient{height:4px;border-radius:2px;margin-bottom:5px}.rv-continuous-size-legend{font-size:12px}.rv-continuous-size-legend .rv-bubbles{text-align:justify;overflow:hidden;margin-bottom:5px;width:100%}.rv-continuous-size-legend .rv-bubble{background:#d8d9dc;display:inline-block;vertical-align:bottom}.rv-continuous-size-legend .rv-spacer{display:inline-block;font-size:0;line-height:0;width:100%}.rv-legend-titles{height:16px;position:relative}.rv-legend-titles__left,.rv-legend-titles__right,.rv-legend-titles__center{position:absolute;white-space:nowrap;overflow:hidden}.rv-legend-titles__center{display:block;text-align:center;width:100%}.rv-legend-titles__right{right:0}.rv-radial-chart .rv-xy-plot__series--label{pointer-events:none} diff --git a/src/components/xy_chart/_xy_chart.scss b/src/components/xy_chart/_xy_chart.scss new file mode 100644 index 000000000000..121a7a16e9cb --- /dev/null +++ b/src/components/xy_chart/_xy_chart.scss @@ -0,0 +1,3 @@ +.rv-xy-plot__inner { + overflow: visible; // TODO fix when adding automatic margin into svg +} diff --git a/src/components/xy_chart/line_annotation.js b/src/components/xy_chart/line_annotation.js index 3ba05353b8bc..1a6e0fe07cc0 100644 --- a/src/components/xy_chart/line_annotation.js +++ b/src/components/xy_chart/line_annotation.js @@ -42,72 +42,64 @@ export class EuiLineAnnotation extends AbstractSeries { } } render() { - const { data, orientation, textPosition, innerHeight, innerWidth, marginLeft, marginTop } = this.props; + const { + data, + orientation, + textPosition, + innerHeight, + innerWidth, + marginLeft, + marginTop, + } = this.props; const axis = orientation === HORIZONTAL ? 'y' : 'x'; const scale = this._getAttributeFunctor(axis); return ( - - - { - data.map((d, i) => { - const { value } = d; - const position = scale({ [axis] : value }); - return ( - - ) - }) - } + + + {data.map((d, i) => { + const { value } = d; + const position = scale({ [axis]: value }); + return ( + + ); + })} - - { - data - .filter(d => d.text) - .map((d, i) => { - const { value } = d; - let x = 0; - let y = 0; - let rotation = 0; - if (orientation === VERTICAL) { - x = scale({ [axis] : value }); - y = this._getTextXY(textPosition, 0 , innerHeight); - rotation = '-90' - } else { - x = this._getTextXY(textPosition, innerWidth, 0); - y = scale({ [axis] : value }); - } + + {data.filter(d => d.text).map((d, i) => { + const { value } = d; + let x = 0; + let y = 0; + let rotation = 0; + if (orientation === VERTICAL) { + x = scale({ [axis]: value }); + y = this._getTextXY(textPosition, 0, innerHeight); + rotation = '-90'; + } else { + x = this._getTextXY(textPosition, innerWidth, 0); + y = scale({ [axis]: value }); + } - return ( - - {d.text} - - ) - }) - } + return ( + + {d.text} + + ); + })} ); @@ -120,11 +112,11 @@ EuiLineAnnotation.propTypes = { PropTypes.shape({ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), text: PropTypes.string, - }), + }) ).isRequired, /** The orientation of the annotation. */ - orientation: PropTypes.oneOf([ HORIZONTAL, VERTICAL ]), - textPosition: PropTypes.oneOf([ START, MIDDLE, END ]) + orientation: PropTypes.oneOf([HORIZONTAL, VERTICAL]), + textPosition: PropTypes.oneOf([START, MIDDLE, END]), }; EuiLineAnnotation.defaultProps = { diff --git a/src/components/xy_chart/line_annotation.scss b/src/components/xy_chart/line_annotation.scss deleted file mode 100644 index d98c87f90740..000000000000 --- a/src/components/xy_chart/line_annotation.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiLineAnnotationText { - font-size: $euiFontSizeXS; -} diff --git a/src/components/xy_chart/styles/react_vis/legends.scss b/src/components/xy_chart/styles/react_vis/legends.scss new file mode 100644 index 000000000000..45e8674dcabd --- /dev/null +++ b/src/components/xy_chart/styles/react_vis/legends.scss @@ -0,0 +1,134 @@ +$rv-legend-enabled-color: #3a3a48; +$rv-legend-disabled-color: #b8b8b8; + +.rv-discrete-color-legend { + box-sizing: border-box; + overflow-y: auto; + font-size: 12px; + + &.horizontal { + white-space: nowrap; + } +} + +.rv-discrete-color-legend-item { + color: $rv-legend-enabled-color; + border-radius: 1px; + padding: 9px 10px; + + &.horizontal { + display: inline-block; + + .rv-discrete-color-legend-item__title { + margin-left: 0; + display: block; + } + } +} + +.rv-discrete-color-legend-item__color { + background: #dcdcdc; + display: inline-block; + height: 2px; + vertical-align: middle; + width: 14px; +} + +.rv-discrete-color-legend-item__title { + margin-left: 10px; +} + +.rv-discrete-color-legend-item.disabled { + color: $rv-legend-disabled-color; +} + +.rv-discrete-color-legend-item.clickable { + cursor: pointer; + + &:hover { + background: #f9f9f9; + } +} + +.rv-search-wrapper { + display: flex; + flex-direction: column; +} + +.rv-search-wrapper__form { + flex: 0; +} + +.rv-search-wrapper__form__input { + width: 100%; + color: #a6a6a5; + border: 1px solid #e5e5e4; + padding: 7px 10px; + font-size: 12px; + box-sizing: border-box; + border-radius: 2px; + margin: 0 0 9px; + outline: 0; +} + +.rv-search-wrapper__contents { + flex: 1; + overflow: auto; +} + +.rv-continuous-color-legend { + font-size: 12px; + + .rv-gradient { + height: 4px; + border-radius: 2px; + margin-bottom: 5px; + } +} + +.rv-continuous-size-legend { + font-size: 12px; + + .rv-bubbles { + text-align: justify; + overflow: hidden; + margin-bottom: 5px; + width: 100%; + } + + .rv-bubble { + background: #d8d9dc; + display: inline-block; + vertical-align: bottom; + } + + .rv-spacer { + display: inline-block; + font-size: 0; + line-height: 0; + width: 100%; + } +} + +.rv-legend-titles { + height: 16px; + position: relative; +} + +.rv-legend-titles__left, +.rv-legend-titles__right, +.rv-legend-titles__center { + position: absolute; + white-space: nowrap; + overflow: hidden; +} + +.rv-legend-titles__center { + display: block; + text-align: center; + width: 100%; +} + +.rv-legend-titles__right { + right: 0; +} diff --git a/src/components/xy_chart/styles/react_vis/plot.scss b/src/components/xy_chart/styles/react_vis/plot.scss new file mode 100644 index 000000000000..8d1f75ca2559 --- /dev/null +++ b/src/components/xy_chart/styles/react_vis/plot.scss @@ -0,0 +1,128 @@ +$rv-xy-plot-axis-font-color: #6b6b76; +$rv-xy-plot-axis-line-color: #e6e6e9; +$rv-xy-plot-axis-font-size: 11px; +$rv-xy-plot-tooltip-background: #3a3a48; +$rv-xy-plot-tooltip-color: #fff; +$rv-xy-plot-tooltip-font-size: 12px; +$rv-xy-plot-tooltip-border-radius: 4px; +$rv-xy-plot-tooltip-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); +$rv-xy-plot-tooltip-padding: 7px 10px; + +.rv-xy-plot { + color: #c3c3c3; + position: relative; + + canvas { + pointer-events: none; + } + + .rv-xy-canvas { + pointer-events: none; + position: absolute; + } +} + +.rv-xy-plot__inner { + display: block; +} + +.rv-xy-plot__axis__line { + fill: none; + stroke-width: 2px; + stroke: $rv-xy-plot-axis-line-color; +} + +.rv-xy-plot__axis__tick__line { + stroke: $rv-xy-plot-axis-line-color; +} + +.rv-xy-plot__axis__tick__text { + fill: $rv-xy-plot-axis-font-color; + font-size: $rv-xy-plot-axis-font-size; +} + +.rv-xy-plot__axis__title { + text { + fill: $rv-xy-plot-axis-font-color; + font-size: $rv-xy-plot-axis-font-size; + } +} + +.rv-xy-plot__grid-lines__line { + stroke: $rv-xy-plot-axis-line-color; +} + +.rv-xy-plot__circular-grid-lines__line { + fill-opacity: 0; + stroke: $rv-xy-plot-axis-line-color; +} + +.rv-xy-plot__series, +.rv-xy-plot__series path { + pointer-events: all; +} + +.rv-xy-plot__series--line { + fill: none; + stroke: #000; + stroke-width: 2px; +} + +.rv-crosshair { + position: absolute; + font-size: 11px; + pointer-events: none; +} + +.rv-crosshair__line { + background: #47d3d9; + width: 1px; +} + +.rv-crosshair__inner { + position: absolute; + text-align: left; + top: 0; +} + +.rv-crosshair__inner__content { + border-radius: $rv-xy-plot-tooltip-border-radius; + background: $rv-xy-plot-tooltip-background; + color: $rv-xy-plot-tooltip-color; + font-size: $rv-xy-plot-tooltip-font-size; + padding: $rv-xy-plot-tooltip-padding; + box-shadow: $rv-xy-plot-tooltip-shadow; +} + +.rv-crosshair__inner--left { + right: 4px; +} + +.rv-crosshair__inner--right { + left: 4px; +} + +.rv-crosshair__title { + font-weight: bold; + white-space: nowrap; +} + +.rv-crosshair__item { + white-space: nowrap; +} + +.rv-hint { + position: absolute; + pointer-events: none; +} + +.rv-hint__content { + border-radius: $rv-xy-plot-tooltip-border-radius; + padding: $rv-xy-plot-tooltip-padding; + font-size: $rv-xy-plot-tooltip-font-size; + background: $rv-xy-plot-tooltip-background; + box-shadow: $rv-xy-plot-tooltip-shadow; + color: $rv-xy-plot-tooltip-color; + text-align: left; + white-space: nowrap; +} diff --git a/src/components/xy_chart/styles/react_vis/radial-chart.scss b/src/components/xy_chart/styles/react_vis/radial-chart.scss new file mode 100644 index 000000000000..854a57d4b67b --- /dev/null +++ b/src/components/xy_chart/styles/react_vis/radial-chart.scss @@ -0,0 +1,6 @@ +.rv-radial-chart { + + .rv-xy-plot__series--label { + pointer-events: none; + } +} diff --git a/src/components/xy_chart/styles/react_vis/treemap.scss b/src/components/xy_chart/styles/react_vis/treemap.scss new file mode 100644 index 000000000000..4626d66ea798 --- /dev/null +++ b/src/components/xy_chart/styles/react_vis/treemap.scss @@ -0,0 +1,22 @@ +.rv-treemap { + font-size: 12px; + position: relative; +} + +.rv-treemap__leaf { + overflow: hidden; + position: absolute; +} + +.rv-treemap__leaf--circle { + align-items: center; + border-radius: 100%; + display: flex; + justify-content: center; +} + +.rv-treemap__leaf__content { + overflow: hidden; + padding: 10px; + text-overflow: ellipsis; +} diff --git a/yarn.lock b/yarn.lock index f74ee29006be..33c855e5f1f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2438,8 +2438,8 @@ d3-color@1, d3-color@^1.0.3: resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.0.tgz#d1ea19db5859c86854586276ec892cf93148459a" d3-contour@^1.1.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.2.0.tgz#de3ea7991bbb652155ee2a803aeafd084be03b63" + version "1.3.0" + resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.3.0.tgz#cfb99098c48c46edd77e15ce123162f9e333e846" dependencies: d3-array "^1.1.1" @@ -4438,6 +4438,10 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" +hoek@4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb" + hoek@4.x.x: version "4.2.0" resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d" @@ -7848,7 +7852,14 @@ prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" -prop-types@^15.5.8, prop-types@^15.6.1: +prop-types@^15.5.8: + version "15.6.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" + dependencies: + loose-envify "^1.3.1" + object-assign "^4.1.1" + +prop-types@^15.6.1: version "15.6.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" dependencies: @@ -8149,8 +8160,8 @@ react-virtualized@^9.18.5: prop-types "^15.6.0" react-vis@^1.9.3: - version "1.9.4" - resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.9.4.tgz#367934fb8fc9bc53026e5d29a3ff810d97f72b03" + version "1.10.0" + resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.10.0.tgz#e6e268d14745d7207bfe4533a0e94451dbb6e4b1" dependencies: d3-array "^1.2.0" d3-collection "^1.0.3" @@ -8166,6 +8177,7 @@ react-vis@^1.9.3: d3-voronoi "^1.1.2" deep-equal "^1.0.1" global "^4.3.1" + hoek "4.2.1" prop-types "^15.5.8" react-motion "^0.5.2" From 2a37b0dd63775dfbb5e9fd0b4840b251bdc9314c Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 28 Jun 2018 15:51:43 +0200 Subject: [PATCH 54/68] Extracted basic styling to scss classes --- .../views/xy_chart_bar/vertical_bar_series.js | 2 +- src/components/xy_chart/_index.scss | 2 + .../__snapshots__/default_axis.test.js.snap | 17 --- .../horizontal_grid.test.js.snap | 6 - .../__snapshots__/vertical_grid.test.js.snap | 11 -- src/components/xy_chart/axis/_grids.scss | 12 ++ src/components/xy_chart/axis/_index.scss | 1 + .../xy_chart/axis/horizontal_grid.js | 6 - src/components/xy_chart/axis/vertical_grid.js | 6 - .../__snapshots__/crosshair_x.test.js.snap | 6 +- .../__snapshots__/crosshair_y.test.js.snap | 6 +- .../__snapshots__/area_series.test.js.snap | 144 +++--------------- .../horizontal_bar_series.test.js.snap | 39 ++--- .../horizontal_rect_series.test.js.snap | 42 ++--- .../__snapshots__/line_series.test.js.snap | 108 ------------- .../vertical_bar_series.test.js.snap | 46 ++---- .../vertical_rect_series.test.js.snap | 46 ++---- .../xy_chart/series/_area_series.scss | 3 + .../xy_chart/series/_bar_series.scss | 27 ++++ src/components/xy_chart/series/_index.scss | 3 + .../xy_chart/series/_rect_series.scss | 27 ++++ src/components/xy_chart/series/area_series.js | 4 +- .../xy_chart/series/horizontal_bar_series.js | 18 ++- .../xy_chart/series/horizontal_rect_series.js | 18 ++- .../xy_chart/series/vertical_bar_series.js | 14 +- .../xy_chart/series/vertical_rect_series.js | 15 +- 26 files changed, 187 insertions(+), 442 deletions(-) create mode 100644 src/components/xy_chart/axis/_grids.scss create mode 100644 src/components/xy_chart/axis/_index.scss create mode 100644 src/components/xy_chart/series/_area_series.scss create mode 100644 src/components/xy_chart/series/_bar_series.scss create mode 100644 src/components/xy_chart/series/_index.scss create mode 100644 src/components/xy_chart/series/_rect_series.scss diff --git a/src-docs/src/views/xy_chart_bar/vertical_bar_series.js b/src-docs/src/views/xy_chart_bar/vertical_bar_series.js index a30bc8e5547c..de58ba3b3a09 100644 --- a/src-docs/src/views/xy_chart_bar/vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/vertical_bar_series.js @@ -12,6 +12,6 @@ const data = [ export default () => ( - + { console.log({ data }) }} /> ); diff --git a/src/components/xy_chart/_index.scss b/src/components/xy_chart/_index.scss index cff76a876b80..1d4238e3d628 100644 --- a/src/components/xy_chart/_index.scss +++ b/src/components/xy_chart/_index.scss @@ -4,6 +4,8 @@ @import "styles/react_vis/radial-chart"; @import "styles/react_vis/treemap"; +@import "series/index"; +@import "axis/index"; @import "legend"; @import "line_annotation"; @import "xy_chart"; diff --git a/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap b/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap index 975700470eeb..9079d07ebb9c 100644 --- a/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap +++ b/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap @@ -53,7 +53,6 @@ exports[`EuiDefaultAxis render default axis 1`] = ` > ) - } } diff --git a/src/components/xy_chart/axis/vertical_grid.js b/src/components/xy_chart/axis/vertical_grid.js index 599069b5298f..d4759ab1597e 100644 --- a/src/components/xy_chart/axis/vertical_grid.js +++ b/src/components/xy_chart/axis/vertical_grid.js @@ -6,17 +6,11 @@ import { VerticalGridLines } from 'react-vis'; */ export class EuiVerticalGrid extends PureComponent { render() { - const style = { - strokeDasharray: '5 5', - strokeOpacity: 0.3, - }; return ( ) - } } diff --git a/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap index f365b1299bbd..301ce4a593d3 100644 --- a/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap +++ b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap @@ -19,19 +19,19 @@ exports[`EuiCrosshairX render the X crosshair 1`] = ` width="600" > 80 ? true : false; + const classes = classNames( + 'euiBarSeries', + isHighDataVolume && 'euiBarSeries--highDataVolume', + isMouseOverValue && onValueClick && 'euiBarSeries--hoverEnabled', + ); return ( diff --git a/src/components/xy_chart/series/horizontal_rect_series.js b/src/components/xy_chart/series/horizontal_rect_series.js index 0b213e61b49f..861f5a311f79 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.js +++ b/src/components/xy_chart/series/horizontal_rect_series.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { HorizontalRectSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; +import classNames from 'classnames'; export class EuiHorizontalRectSeries extends HorizontalRectSeries { state = { @@ -19,19 +20,20 @@ export class EuiHorizontalRectSeries extends HorizontalRectSeries { render() { const { isMouseOverValue } = this.state; const { name, data, color, onValueClick, ...rest } = this.props; - + const isHighDataVolume = data.length > 80 ? true : false; + const classes = classNames( + 'euiRectSeries', + isHighDataVolume && 'euiRectSeries--highDataVolume', + isMouseOverValue && onValueClick && 'euiRectSeries--hoverEnabled', + ); return ( diff --git a/src/components/xy_chart/series/vertical_bar_series.js b/src/components/xy_chart/series/vertical_bar_series.js index 7a81e16d1a64..4b62afa8fe70 100644 --- a/src/components/xy_chart/series/vertical_bar_series.js +++ b/src/components/xy_chart/series/vertical_bar_series.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { VerticalBarSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; +import classNames from 'classnames'; export class EuiVerticalBarSeries extends VerticalBarSeries { state = { @@ -20,20 +21,19 @@ export class EuiVerticalBarSeries extends VerticalBarSeries { const { isMouseOverValue } = this.state const { name, data, color, onValueClick, ...rest } = this.props; const isHighDataVolume = data.length > 80 ? true : false; + const classes = classNames( + 'euiBarSeries', + isHighDataVolume && 'euiBarSeries--highDataVolume', + isMouseOverValue && onValueClick && 'euiBarSeries--hoverEnabled', + ); return ( diff --git a/src/components/xy_chart/series/vertical_rect_series.js b/src/components/xy_chart/series/vertical_rect_series.js index 0dcb4d98e910..a3bf66ac541b 100644 --- a/src/components/xy_chart/series/vertical_rect_series.js +++ b/src/components/xy_chart/series/vertical_rect_series.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { VerticalRectSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; +import classNames from 'classnames'; export class EuiVerticalRectSeries extends VerticalRectSeries { state = { @@ -20,21 +21,19 @@ export class EuiVerticalRectSeries extends VerticalRectSeries { const { isMouseOverValue } = this.state; const { name, data, color, onValueClick, ...rest } = this.props; const isHighDataVolume = data.length > 80 ? true : false; - + const classes = classNames( + 'euiRectSeries', + isHighDataVolume && 'euiRectSeries--highDataVolume', + isMouseOverValue && onValueClick && 'euiRectSeries--hoverEnabled', + ); return ( From 9e7b2ec32edfb45404063b2f2b5c36c1669eda4e Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 28 Jun 2018 17:38:24 +0200 Subject: [PATCH 55/68] Fix some inverted examples --- .../src/views/xy_chart_bar/bar_example.js | 30 +++++++++++++++++++ .../time_series.js | 0 .../xy_chart_histogram/histogram_example.js | 29 ------------------ src-docs/src/views/xy_chart_line/line.js | 30 ------------------- 4 files changed, 30 insertions(+), 59 deletions(-) rename src-docs/src/views/{xy_chart_histogram => xy_chart_bar}/time_series.js (100%) diff --git a/src-docs/src/views/xy_chart_bar/bar_example.js b/src-docs/src/views/xy_chart_bar/bar_example.js index 9116a9a8c37f..339c544cd518 100644 --- a/src-docs/src/views/xy_chart_bar/bar_example.js +++ b/src-docs/src/views/xy_chart_bar/bar_example.js @@ -4,6 +4,7 @@ import VerticalBarSeriesExample from './vertical_bar_series'; import HorizontalBarSeriesExample from './horizontal_bar_series'; import StackedVerticalBarSeriesExample from './stacked_vertical_bar_series'; import StackedHorizontalBarSeriesExample from './stacked_horizontal_bar_series'; +import TimeSeriesExample from './time_series'; import { EuiCode, EuiVerticalBarSeries, EuiHorizontalBarSeries } from '../../../../src/components'; @@ -156,5 +157,34 @@ export const XYChartBarExample = {
), }, + + { + title: 'Time Series', + text: ( +
+

+ Use EuiXYChart with EuiVerticalBarSeries + with the + xType='time'. +

+
+ ), + props: { EuiVerticalBarSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./time_series'), + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React', + }, + ], + demo: ( +
+ +
+ ), + }, ], }; diff --git a/src-docs/src/views/xy_chart_histogram/time_series.js b/src-docs/src/views/xy_chart_bar/time_series.js similarity index 100% rename from src-docs/src/views/xy_chart_histogram/time_series.js rename to src-docs/src/views/xy_chart_bar/time_series.js diff --git a/src-docs/src/views/xy_chart_histogram/histogram_example.js b/src-docs/src/views/xy_chart_histogram/histogram_example.js index 2f5458da0e49..aabbe73499a2 100644 --- a/src-docs/src/views/xy_chart_histogram/histogram_example.js +++ b/src-docs/src/views/xy_chart_histogram/histogram_example.js @@ -4,7 +4,6 @@ import VerticalRectSeriesExample from './vertical_rect_series'; import StackedVerticalRectSeriesExample from './stacked_vertical_rect_series'; import HorizontalRectSeriesExample from './horizontal_rect_series'; import StackedHorizontalRectSeriesExample from './stacked_horizontal_rect_series'; -import TimeSeriesExample from './time_series'; import TimeHistogramSeriesExample from './time_histogram_series'; import { @@ -136,34 +135,6 @@ export const XYChartHistogramExample = {
), }, - { - title: 'Time Series', - text: ( -
-

- Use EuiXYChart with EuiVerticalBarSeries - with the - xType='time'. -

-
- ), - props: { EuiVerticalRectSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./time_series'), - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React', - }, - ], - demo: ( -
- -
- ), - }, { title: 'Time Series Histogram version', text: ( diff --git a/src-docs/src/views/xy_chart_line/line.js b/src-docs/src/views/xy_chart_line/line.js index 7dbb66ff2118..5b341a418a4a 100644 --- a/src-docs/src/views/xy_chart_line/line.js +++ b/src-docs/src/views/xy_chart_line/line.js @@ -3,9 +3,6 @@ import React from 'react'; import { EuiXYChart, EuiLineSeries, - EuiLineAnnotation, - EuiXYChartUtils, - EuiXYChartAxisUtils, } from '../../../../src/components'; const DATA_A = [ @@ -20,32 +17,5 @@ const DATA_A = [ export default () => ( - - - - - - ); From 67a854b4765bfab1554f04e7dd440d09296b051f Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 29 Jun 2018 12:18:31 +0200 Subject: [PATCH 56/68] Refactoring and abstracting BarSeries and HistogramSeries Add a more generic BarSeries and HistogramSeries, controlled by XYChart orientation prop. Fixed Examples to use this convention instead of single Vertical/Horizontal components. Add the default margin to XYChart. --- .../src/views/xy_chart_bar/bar_example.js | 187 ++- .../xy_chart_bar/horizontal_bar_series.js | 11 +- .../views/xy_chart_bar/rotate_bar_series.js | 45 - .../stacked_horizontal_bar_series.js | 22 +- .../stacked_vertical_bar_series.js | 25 +- .../src/views/xy_chart_bar/time_series.js | 46 +- .../views/xy_chart_bar/vertical_bar_series.js | 24 +- .../xy_chart_histogram/histogram_example.js | 156 ++- .../horizontal_rect_series.js | 4 +- .../stacked_horizontal_rect_series.js | 6 +- .../stacked_vertical_rect_series.js | 6 +- .../time_histogram_series.js | 40 +- .../vertical_rect_series.js | 4 +- .../src/views/xy_chart_line/curved_line.js | 2 +- src/components/index.js | 1 + .../selection_brush.test.js.snap | 58 +- .../__snapshots__/default_axis.test.js.snap | 214 +-- .../horizontal_grid.test.js.snap | 48 +- .../__snapshots__/vertical_grid.test.js.snap | 78 +- .../axis/__snapshots__/x_axis.test.js.snap | 38 +- .../axis/__snapshots__/y_axis.test.js.snap | 34 +- .../xy_chart/axis/horizontal_grid.test.js | 2 +- .../xy_chart/axis/vertical_grid.test.js | 2 +- .../__snapshots__/crosshair_x.test.js.snap | 16 +- .../__snapshots__/crosshair_y.test.js.snap | 14 +- .../xy_chart/crosshairs/crosshair_x.test.js | 4 +- src/components/xy_chart/selection_brush.js | 4 +- .../xy_chart/selection_brush.test.js | 51 +- .../__snapshots__/area_series.test.js.snap | 998 +++++++------- .../horizontal_bar_series.test.js.snap | 256 ++-- .../horizontal_rect_series.test.js.snap | 288 ++-- .../__snapshots__/line_series.test.js.snap | 1222 +++++++++-------- .../vertical_bar_series.test.js.snap | 328 ++--- .../vertical_rect_series.test.js.snap | 320 ++--- ...ect_series.scss => _histogram_series.scss} | 6 +- src/components/xy_chart/series/_index.scss | 2 +- src/components/xy_chart/series/area_series.js | 8 +- src/components/xy_chart/series/as_series.js | 19 - src/components/xy_chart/series/bar_series.js | 65 +- .../xy_chart/series/histogram_series.js | 75 + .../xy_chart/series/horizontal_bar_series.js | 2 +- .../xy_chart/series/horizontal_rect_series.js | 8 +- src/components/xy_chart/series/index.js | 1 + src/components/xy_chart/series/line_series.js | 8 +- .../xy_chart/series/vertical_bar_series.js | 2 +- .../xy_chart/series/vertical_rect_series.js | 8 +- src/components/xy_chart/utils/axis_utils.js | 9 +- src/components/xy_chart/utils/chart_utils.js | 30 +- src/components/xy_chart/xy_chart.js | 14 +- 49 files changed, 2482 insertions(+), 2329 deletions(-) delete mode 100644 src-docs/src/views/xy_chart_bar/rotate_bar_series.js rename src/components/xy_chart/series/{_rect_series.scss => _histogram_series.scss} (79%) delete mode 100644 src/components/xy_chart/series/as_series.js create mode 100644 src/components/xy_chart/series/histogram_series.js diff --git a/src-docs/src/views/xy_chart_bar/bar_example.js b/src-docs/src/views/xy_chart_bar/bar_example.js index 339c544cd518..00686b0fe2b1 100644 --- a/src-docs/src/views/xy_chart_bar/bar_example.js +++ b/src-docs/src/views/xy_chart_bar/bar_example.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { GuideSectionTypes } from '../../components'; import VerticalBarSeriesExample from './vertical_bar_series'; import HorizontalBarSeriesExample from './horizontal_bar_series'; @@ -6,30 +6,68 @@ import StackedVerticalBarSeriesExample from './stacked_vertical_bar_series'; import StackedHorizontalBarSeriesExample from './stacked_horizontal_bar_series'; import TimeSeriesExample from './time_series'; -import { EuiCode, EuiVerticalBarSeries, EuiHorizontalBarSeries } from '../../../../src/components'; +import { EuiCallOut, EuiSpacer, EuiLink, EuiCode, EuiBarSeries } from '../../../../src/components'; export const XYChartBarExample = { - title: 'Bar chart', - sections: [ - { - title: 'Vertical Bar Chart', - text: ( -
+ title: 'Bar charts', + intro: ( + +

+ You can use EuiXYChart with EuiBarSeries to + displaying bar charts. +

+ +

+ The EuiXYChart component pass the orientation prop to every component child + to accomodate vertical and horizontal use cases. + The default orientation is vertical. +

+ +

+ You should specify EuiXYChart prop xType="ordinal" + to specify the X Axis scale type since you are creating a Bar Chart (read the quote below).
+ You can use barchart also with other X axis scale types, but this can lead to misinterpretation + of your charts (basically because the bar width doesn't represent a real measure like in the histograms). +

+ +

+ You can configure the Y-Axis scale type yType of EuiXYChart + with the following scales linear,log, + time, time-utc. +

+ + +

- Use EuiXYChart with EuiVerticalBarSeries for - displaying vertical bar charts. + A bar chart or bar graph is a chart or graph that presents categorical data with rectangular + bars with heights or lengths proportional to the values that they represent. + The bars can be plotted vertically or horizontally. [...]

- Specify EuiXYChart prop xType="ordinal" - because we are creating a Bar Chart. + A bar graph shows comparisons among discrete categories. One axis of the chart shows the specific + categories being compared, and the other axis represents a measured value. + Some bar graphs present bars clustered in groups of more than one, + showing the values of more than one measured variable.

-

- The Y-Axis can be configured with linear,log, - time, time-utc. -

-
+ Wikipedia + + + + + ), + sections: [ + { + title: 'Vertical Bar Chart', + text: ( +

+ You can create out-of-the-box vertical bar charts just adding a EuiBarSeries + component into your EuiXYChart. +

), - props: { EuiVerticalBarSeries }, + props: { EuiBarSeries }, source: [ { type: GuideSectionTypes.JS, @@ -40,34 +78,18 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, { title: 'Stacked Vertical Bar Chart', text: ( -
-

- Use EuiXYChart with EuiVerticalBarSeries for - displaying vertical stacked bar charts. Specify EuiXYChart props like - the following: -

-
    -
  • - xType="ordinal" because we are creating a Bar Chart -
    • -
  • - stackBy="y" to stack bars one above the other. If{' '} - stackBy is not specified, bars are clustered together depending on - the X value -
    • -
-
+

+ To display a vertical stacked bar charts specify stackBy="y". + If stackBy is not specified, bars are clustered together depending on + the X value. +

), - props: { EuiVerticalBarSeries }, + props: { EuiBarSeries }, source: [ { type: GuideSectionTypes.JS, @@ -78,31 +100,19 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, { title: 'Horizontal Bar Chart', text: ( -
-

- Use EuiXYChart with EuiHorizontalBarSeries for - displaying horizontal bar charts. -

-

- Specify EuiXYChart prop yType="ordinal" - because we are creating a Bar Chart. -

-

- The X-Axis can be configured with linear,log, - time, time-utc. -

-
+

+ To display an horizontal bar chart specify orientation="horizontal". + Since you are rotating the chart, you also have to invert x and y + values in your data. The y becomes your ordinal/categorial axis and the + x becomes your measure/value axis. +

), - props: { EuiHorizontalBarSeries }, + props: { EuiBarSeries }, source: [ { type: GuideSectionTypes.JS, @@ -113,34 +123,18 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, { title: 'Stacked Horizontal Bar Chart', text: ( -
-

- Use EuiXYChart with EuiHorizontalBarSeries for - displaying horizontal stacked bar charts. Specify EuiXYChart props - like the following: -

-
    -
  • - yType="ordinal" because we are creating a Bar Chart -
    • -
  • - stackBy="x" to stack bars one above the other. If{' '} - stackBy is not specified, bars are clustered together depending on - the Y value -
    • -
-
+

+ To display an horizontal stacked bar charts specify stackBy="x". + If stackBy is not specified, bars are clustered together depending on + the Y value. +

), - props: { EuiHorizontalBarSeries }, + props: { EuiBarSeries }, source: [ { type: GuideSectionTypes.JS, @@ -151,25 +145,18 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, { title: 'Time Series', text: ( -
-

- Use EuiXYChart with EuiVerticalBarSeries - with the - xType='time'. -

-
+

+ Use EuiXYChart with xType='time' + to display a time series bar chart. +

), - props: { EuiVerticalBarSeries }, + props: { EuiBarSeries }, source: [ { type: GuideSectionTypes.JS, @@ -180,11 +167,7 @@ export const XYChartBarExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, ], }; diff --git a/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js b/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js index 31256c30c0a9..990d52062787 100644 --- a/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/horizontal_bar_series.js @@ -1,7 +1,8 @@ import React from 'react'; -import { EuiXYChart, EuiHorizontalBarSeries, EuiXYChartUtils } from '../../../../src/components'; +import { EuiXYChart, EuiBarSeries, EuiXYChartUtils } from '../../../../src/components'; +const { SCALE, ORIENTATION } = EuiXYChartUtils; const data = [ { x: 3, y: 'A' }, { x: 1, y: 'B' }, @@ -12,10 +13,10 @@ const data = [ export default () => ( - + ); diff --git a/src-docs/src/views/xy_chart_bar/rotate_bar_series.js b/src-docs/src/views/xy_chart_bar/rotate_bar_series.js deleted file mode 100644 index 5c20e9e8e1c7..000000000000 --- a/src-docs/src/views/xy_chart_bar/rotate_bar_series.js +++ /dev/null @@ -1,45 +0,0 @@ -import React, { Component } from 'react'; - -import { EuiSwitch, EuiXYChart, EuiSpacer } from '../../../../src/components'; - -export default class extends Component { - constructor(props) { - super(props); - - this.state = { - isHorizontal: false, - }; - } - - onChange = e => { - this.setState({ - isHorizontal: e.target.checked, - }); - }; - - render() { - const { isHorizontal } = this.state; - return ( -
- - - - - {/* - */} - -
- ); - } -} diff --git a/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js b/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js index 25e70c4fbb72..1622eadf6e37 100644 --- a/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/stacked_horizontal_bar_series.js @@ -1,12 +1,15 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { + EuiSpacer, EuiButton, EuiXYChart, - EuiHorizontalBarSeries, + EuiBarSeries, EuiXYChartUtils, } from '../../../../src/components'; +const { ORIENTATION, SCALE } = EuiXYChartUtils; + const dataA = [ { x: 1, y: 'A' }, { x: 2, y: 'B' }, @@ -40,21 +43,22 @@ export default class extends Component { render() { const { stacked } = this.state; return ( -
- + + Toggle stacked + - - + + -
+ ); } } diff --git a/src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js b/src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js index 7797fe2d8e6f..03fdf021bf55 100644 --- a/src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/stacked_vertical_bar_series.js @@ -1,6 +1,14 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; -import { EuiButton, EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; +import { + EuiSpacer, + EuiButton, + EuiXYChart, + EuiBarSeries, + EuiXYChartUtils, +} from '../../../../src/components'; + +const { SCALE } = EuiXYChartUtils; const dataA = [{ x: 0, y: 5 }, { x: 1, y: 4 }, { x: 2, y: 3 }, { x: 3, y: 2 }, { x: 4, y: 1 }]; @@ -24,15 +32,16 @@ export default class extends Component { render() { const { stacked } = this.state; return ( -
- + + Toggle stacked - - - + + + + -
+ ); } } diff --git a/src-docs/src/views/xy_chart_bar/time_series.js b/src-docs/src/views/xy_chart_bar/time_series.js index 1c937817b8ca..189647fc33b9 100644 --- a/src-docs/src/views/xy_chart_bar/time_series.js +++ b/src-docs/src/views/xy_chart_bar/time_series.js @@ -1,48 +1,58 @@ import React, { Component, Fragment } from 'react'; -import { EuiButton, EuiSpacer, EuiXYChart, EuiLineSeries, EuiVerticalBarSeries } from '../../../../src/components'; +import { + EuiButton, + EuiSpacer, + EuiXYChart, + EuiLineSeries, + EuiBarSeries, + EuiXYChartUtils, +} from '../../../../src/components'; +const { SCALE } = EuiXYChartUtils; const timestamp = Date.now(); const ONE_HOUR = 3600000; function randomizeData(size = 24, max = 15) { return new Array(size) .fill(0) - .map( (d,i) => ({ x0: ONE_HOUR * i, x: ONE_HOUR * (i + 1), y: Math.floor(Math.random() * max) })) + .map((d, i) => ({ + x0: ONE_HOUR * i, + x: ONE_HOUR * (i + 1), + y: Math.floor(Math.random() * max), + })) .map(el => ({ x: el.x + timestamp, - y: el.y })); + y: el.y, + })); } function buildData(series) { const max = Math.ceil(Math.random() * 100000); - return new Array(series) - .fill(0) - .map(() => randomizeData(10, max)) + return new Array(series).fill(0).map(() => randomizeData(10, max)); } export default class Example extends Component { state = { series: 4, - data: buildData(4) - } + data: buildData(4), + }; handleRandomize = () => { this.setState({ data: buildData(this.state.series), }); - } + }; render() { const { data } = this.state; return ( - - Randomize data - - + Randomize data - - { data.map((d, i) => ())} - { data.map((d, i) => ())} + + {data.map((d, i) => ( + + ))} + {data.map((d, i) => ( + + ))} ); diff --git a/src-docs/src/views/xy_chart_bar/vertical_bar_series.js b/src-docs/src/views/xy_chart_bar/vertical_bar_series.js index de58ba3b3a09..818258b1b187 100644 --- a/src-docs/src/views/xy_chart_bar/vertical_bar_series.js +++ b/src-docs/src/views/xy_chart_bar/vertical_bar_series.js @@ -1,17 +1,23 @@ import React from 'react'; -import { EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; - +import { EuiXYChart, EuiBarSeries, EuiXYChartUtils } from '../../../../src/components'; +const { SCALE } = EuiXYChartUtils; const data = [ - { x: 'A', y: 3, color: 'red' }, - { x: 'B', y: 1, color: 'red' }, - { x: 'C', y: 5, color: 'red' }, - { x: 'D', y: 2, color: 'red' }, - { x: 'E', y: 1, color: 'red' }, + { x: 'A', y: 3 }, + { x: 'B', y: 1 }, + { x: 'C', y: 5 }, + { x: 'D', y: 2 }, + { x: 'E', y: 1 }, ]; export default () => ( - - { console.log({ data }) }} /> + + { + console.log({ singleBarData }); + }} + /> ); diff --git a/src-docs/src/views/xy_chart_histogram/histogram_example.js b/src-docs/src/views/xy_chart_histogram/histogram_example.js index aabbe73499a2..5bb0786d85c3 100644 --- a/src-docs/src/views/xy_chart_histogram/histogram_example.js +++ b/src-docs/src/views/xy_chart_histogram/histogram_example.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { GuideSectionTypes } from '../../components'; import VerticalRectSeriesExample from './vertical_rect_series'; import StackedVerticalRectSeriesExample from './stacked_vertical_rect_series'; @@ -7,27 +7,65 @@ import StackedHorizontalRectSeriesExample from './stacked_horizontal_rect_series import TimeHistogramSeriesExample from './time_histogram_series'; import { + EuiSpacer, EuiCode, - EuiVerticalRectSeries, - EuiHorizontalRectSeries, + EuiCallOut, + EuiLink, + EuiHistogramSeries, } from '../../../../src/components'; export const XYChartHistogramExample = { - title: 'Histogram', + title: 'Histograms', + intro: ( + +

+ You can use EuiXYChart with EuiHistogramSeries to + displaying histogram charts. +

+ +

+ The EuiXYChart component pass the orientation prop to every component child + to accomodate vertical and horizontal use cases. + The default orientation is vertical. +

+ +

+ You can specify the EuiXYChart prop xType and + yType to one of the following scales: linear,log, + time, time-utc. + The use of ordinal and category is not supported. +

+ + + +

+ A histogram is an accurate representation of the distribution of numerical data. [...] +

+

+ To construct a histogram, the first step is to bin the range of values—that is, + divide the entire range of values into a series of intervals—and then count how many values fall into each interval. + The bins are usually specified as consecutive, non-overlapping intervals of a variable. + The bins (intervals) must be adjacent, and are often (but are not required to be) of equal size +

+ Wikipedia + + + + + ), sections: [ { title: 'Vertical Histogram', text: ( -
-

- Use EuiXYChart with EuiVerticalRectSeries for - displaying vertical histograms. The Y-Axis needs can be configured with{' '} - linear,log, - time, time-utc. The same for X-Axis. -

-
+

+ You can create out-of-the-box vertical histograms just adding a EuiHistogramSeries + component into your EuiXYChart. +

), - props: { EuiVerticalRectSeries }, + props: { EuiHistogramSeries }, source: [ { type: GuideSectionTypes.JS, @@ -38,27 +76,28 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, { title: 'Stacked Vertical Histogram', text: ( -
+

- Use EuiXYChart with EuiVerticalRectSeries for - displaying stacked vedrtical histograms. + Use EuiXYChart with EuiHistogramSeries for + displaying stacked vertical histograms.

Specify stackBy="x" to stack bars together.

-

Note: Is not possible to "cluster" bars by the same X value.

-
+ + ), - props: { EuiVerticalRectSeries }, + props: { EuiHistogramSeries }, source: [ { type: GuideSectionTypes.JS, @@ -69,25 +108,17 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, { title: 'Horizontal Histogram', text: ( -
-

- Use EuiXYChart with EuiHorizontalRectSeries for - displaying horizontal histograms. The Y-Axis needs can be configured as{' '} - linear,log, - time, time-utc. The same for X-Axis. -

-
+

+ You can create horizontal histograms specifing orientation="horizontal". + Since you are rotating the histogram, you also have to invert your data. +

), - props: { EuiHorizontalRectSeries }, + props: { EuiHistogramSeries }, source: [ { type: GuideSectionTypes.JS, @@ -98,27 +129,24 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, { title: 'Stacked Horizontal Histogram', text: ( -
+

- Use EuiXYChart with EuiHorizontalRectSeries to - display stacked horizontal histograms. -

-

- Specify stackBy="x" to stack bars together. + To display an horizontal stacked histograms specify stackBy="x".

-

Note: Is not possible to "cluster" bars by the same Y value.

-
+ + ), - props: { EuiHorizontalRectSeries }, + props: { EuiHistogramSeries }, source: [ { type: GuideSectionTypes.JS, @@ -129,23 +157,17 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, { title: 'Time Series Histogram version', text: ( -
-

- Use EuiXYChart with EuiVerticalRectSeries - with the xType='time' and a moderate number of elements. -

-
+

+ Use EuiXYChart with xType='time' + to display a time series histogram. +

), - props: { EuiVerticalRectSeries }, + props: { EuiHistogramSeries }, source: [ { type: GuideSectionTypes.JS, @@ -156,11 +178,7 @@ export const XYChartHistogramExample = { code: 'This component can only be used from React', }, ], - demo: ( -
- -
- ), + demo: (), }, ], }; diff --git a/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js b/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js index fdf369a76813..e0d81ba0f06b 100644 --- a/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/horizontal_rect_series.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiHorizontalRectSeries, EuiXYChartUtils } from '../../../../src/components'; +import { EuiXYChart, EuiHistogramSeries, EuiXYChartUtils } from '../../../../src/components'; const data = [ { x: 3, y: 0, y0: 1 }, @@ -11,6 +11,6 @@ const data = [ ]; export default () => ( - + ); diff --git a/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js b/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js index bfef45b59aac..65b14e455a52 100644 --- a/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/stacked_horizontal_rect_series.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiHorizontalRectSeries, EuiXYChartUtils } from '../../../../src/components'; +import { EuiXYChart, EuiHistogramSeries, EuiXYChartUtils } from '../../../../src/components'; const dataA = [ { y: 0, y0: 1, x: 1 }, @@ -25,7 +25,7 @@ export default () => ( stackBy="x" orientation={EuiXYChartUtils.ORIENTATION.HORIZONTAL} > - - + + ); diff --git a/src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js b/src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js index 0a00b250dd62..4e1ea5e958f4 100644 --- a/src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/stacked_vertical_rect_series.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiVerticalRectSeries } from '../../../../src/components'; +import { EuiXYChart, EuiHistogramSeries } from '../../../../src/components'; const dataA = [ { x0: 0, x: 1, y: 1 }, @@ -20,7 +20,7 @@ const dataB = [ export default () => ( - - + + ); diff --git a/src-docs/src/views/xy_chart_histogram/time_histogram_series.js b/src-docs/src/views/xy_chart_histogram/time_histogram_series.js index cb118b5421e1..ef678a344b39 100644 --- a/src-docs/src/views/xy_chart_histogram/time_histogram_series.js +++ b/src-docs/src/views/xy_chart_histogram/time_histogram_series.js @@ -1,48 +1,54 @@ import React, { Component, Fragment } from 'react'; -import { EuiButton, EuiSpacer, EuiXYChart, EuiVerticalRectSeries } from '../../../../src/components'; - +import { + EuiButton, + EuiSpacer, + EuiXYChart, + EuiHistogramSeries, + EuiXYChartUtils, +} from '../../../../src/components'; +const { SCALE } = EuiXYChartUtils; const timestamp = Date.now(); const ONE_HOUR = 3600000; + function randomizeData(size = 24, max = 15) { return new Array(size) .fill(0) - .map( (d,i) => ({ x0: ONE_HOUR * i, x: ONE_HOUR * (i + 1), y: Math.floor(Math.random() * max) })) + .map((d, i) => ({ + x0: ONE_HOUR * i, + x: ONE_HOUR * (i + 1), + y: Math.floor(Math.random() * max), + })) .map(el => ({ x0: el.x0 + timestamp, x: el.x + timestamp, - y: el.y })); + y: el.y, + })); } function buildData(series) { const max = Math.ceil(Math.random() * 100000000); - return new Array(series) - .fill(0) - .map(() => randomizeData(100, max)) + return new Array(series).fill(0).map(() => randomizeData(100, max)); } export default class Example extends Component { state = { series: 4, - data: buildData(4) - } + data: buildData(4), + }; handleRandomize = () => { this.setState({ data: buildData(this.state.series), }); - } + }; render() { const { data } = this.state; return ( - - Randomize data - + Randomize data - - { data.map((d, i) => ())} + + {data.map((d, i) => )} ); diff --git a/src-docs/src/views/xy_chart_histogram/vertical_rect_series.js b/src-docs/src/views/xy_chart_histogram/vertical_rect_series.js index 96f04dbe95c3..ab1ca994e4e1 100644 --- a/src-docs/src/views/xy_chart_histogram/vertical_rect_series.js +++ b/src-docs/src/views/xy_chart_histogram/vertical_rect_series.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiXYChart, EuiVerticalRectSeries } from '../../../../src/components'; +import { EuiXYChart, EuiHistogramSeries } from '../../../../src/components'; const data = [ { x0: 0, x: 1, y: 1 }, @@ -12,6 +12,6 @@ const data = [ export default () => ( - + ); diff --git a/src-docs/src/views/xy_chart_line/curved_line.js b/src-docs/src/views/xy_chart_line/curved_line.js index 2c4f2d07c247..22c64c12e31f 100644 --- a/src-docs/src/views/xy_chart_line/curved_line.js +++ b/src-docs/src/views/xy_chart_line/curved_line.js @@ -22,7 +22,7 @@ const { CURVE_STEP, CURVE_STEP_AFTER, CURVE_STEP_BEFORE, -} = EuiXYChartUtils.CURVES; +} = EuiXYChartUtils.CURVE; const DATA_A = [{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: -1 }, { x: 5, y: 2 }]; diff --git a/src/components/index.js b/src/components/index.js index 62565ba92f12..c0268112ce1c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -310,6 +310,7 @@ export { EuiLineSeries, EuiAreaSeries, EuiBarSeries, + EuiHistogramSeries, EuiVerticalBarSeries, EuiHorizontalBarSeries, EuiVerticalRectSeries, diff --git a/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap b/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap index 6b390c3c2990..544da598cfb1 100644 --- a/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap +++ b/src/components/xy_chart/__snapshots__/selection_brush.test.js.snap @@ -69,13 +69,13 @@ exports[`EuiSelectionBrush renders an horizontal selection brush 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key=".3" - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onBrushEnd={[Function]} opacity={0.2} opacityDomain={Array []} @@ -109,7 +109,7 @@ exports[`EuiSelectionBrush renders an horizontal selection brush 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -123,7 +123,7 @@ exports[`EuiSelectionBrush renders an horizontal selection brush 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -135,11 +135,11 @@ exports[`EuiSelectionBrush renders an horizontal selection brush 1`] = ` "pointerEvents": "none", } } - transform="translate(0, 0)" + transform="translate(40, 10)" > @@ -367,13 +367,13 @@ exports[`EuiSelectionBrush renders free form selection brush 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key=".3" - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onBrushEnd={[Function]} opacity={0.2} opacityDomain={Array []} @@ -407,7 +407,7 @@ exports[`EuiSelectionBrush renders free form selection brush 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -421,7 +421,7 @@ exports[`EuiSelectionBrush renders free form selection brush 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -433,7 +433,7 @@ exports[`EuiSelectionBrush renders free form selection brush 1`] = ` "pointerEvents": "none", } } - transform="translate(0, 0)" + transform="translate(40, 10)" > @@ -131,7 +131,7 @@ exports[`EuiDefaultAxis render default axis 1`] = ` @@ -640,7 +640,7 @@ exports[`EuiDefaultAxis render rotated 90deg default axis 1`] = ` @@ -55,7 +55,7 @@ exports[`EuiXAxis render the x axis 1`] = ` { const firstLineProps = horizontalGridComponent.find('line').at(0).props(); expect(firstLineProps.y1).toEqual(firstLineProps.y2); expect(firstLineProps.x1).toEqual(0); - expect(firstLineProps.x2).toEqual(width); + expect(firstLineProps.x2).toEqual(width - 50); // right + left default xychart margin expect(component.render()).toMatchSnapshot(); }); }); diff --git a/src/components/xy_chart/axis/vertical_grid.test.js b/src/components/xy_chart/axis/vertical_grid.test.js index 7666465b9e81..7cad5fc76bc3 100644 --- a/src/components/xy_chart/axis/vertical_grid.test.js +++ b/src/components/xy_chart/axis/vertical_grid.test.js @@ -26,7 +26,7 @@ describe('EuiVerticalGrid', () => { const firstLineProps = verticalGridComponent.find('line').at(0).props(); expect(firstLineProps.x1).toEqual(firstLineProps.x2); expect(firstLineProps.y1).toEqual(0); - expect(firstLineProps.y2).toEqual(height); + expect(firstLineProps.y2).toEqual(height - 50); // top + bottom default xychart margin expect(component.render()).toMatchSnapshot(); }); }); diff --git a/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap index 301ce4a593d3..18d0fe9b84ac 100644 --- a/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap +++ b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap @@ -20,20 +20,20 @@ exports[`EuiCrosshairX render the X crosshair 1`] = ` > diff --git a/src/components/xy_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap index c9bf68872889..7757dd6fb052 100644 --- a/src/components/xy_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap +++ b/src/components/xy_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap @@ -20,21 +20,21 @@ exports[`EuiCrosshairY render the Y crosshair 1`] = ` > diff --git a/src/components/xy_chart/crosshairs/crosshair_x.test.js b/src/components/xy_chart/crosshairs/crosshair_x.test.js index a9feb4284652..247b2d0e29c5 100644 --- a/src/components/xy_chart/crosshairs/crosshair_x.test.js +++ b/src/components/xy_chart/crosshairs/crosshair_x.test.js @@ -27,14 +27,14 @@ describe('EuiCrosshairX', () => { expect(component.render()).toMatchSnapshot(); expect(component.find('rect')).toHaveLength(2); - component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 0, clientY: 100 } }); + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 50, clientY: 100 } }); expect(component.find(Crosshair).children()).toHaveLength(1); const crosshair = component.find('.rv-crosshair') expect(crosshair).toHaveLength(1); expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__title__value').text()).toBe('0'); expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__item__value').text()).toBe('1.5'); - component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 301, clientY: 100 } }); + component.find('rect').at(0).simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); expect(crosshair).toHaveLength(1); expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__title__value').text()).toBe('1'); expect(crosshair.find('.rv-crosshair__inner__content .rv-crosshair__item__value').text()).toBe('2'); diff --git a/src/components/xy_chart/selection_brush.js b/src/components/xy_chart/selection_brush.js index 4b2b1247eb1c..6b86fa7b353a 100644 --- a/src/components/xy_chart/selection_brush.js +++ b/src/components/xy_chart/selection_brush.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ScaleUtils, AbstractSeries } from 'react-vis'; -import { ORIENTATION, SCALE_TYPE } from './utils/chart_utils'; +import { ORIENTATION, SCALE } from './utils/chart_utils'; const { HORIZONTAL, VERTICAL, BOTH } = ORIENTATION; const DEFAULT_AREAS = { @@ -77,7 +77,7 @@ export class EuiSelectionBrush extends AbstractSeries { _getScaledValue(scale, scaleType, value0, value1) { switch(scaleType) { - case SCALE_TYPE.ORDINAL: + case SCALE.ORDINAL: return [0, 0]; default: return [ diff --git a/src/components/xy_chart/selection_brush.test.js b/src/components/xy_chart/selection_brush.test.js index d34990644ea1..786b7a515ac6 100644 --- a/src/components/xy_chart/selection_brush.test.js +++ b/src/components/xy_chart/selection_brush.test.js @@ -4,9 +4,15 @@ import { mount } from 'enzyme'; import { EuiXYChart } from './xy_chart'; import { EuiSelectionBrush } from './selection_brush'; import { EuiVerticalBarSeries } from './series'; -import { ORIENTATION, SCALE_TYPE } from './utils/chart_utils'; +import { ORIENTATION, SCALE } from './utils/chart_utils'; const NOOP = () => {}; +const DEFAULT_MARGINS = { + left: 40, + right: 10, + top: 10, + bottom: 40 +}; describe('EuiSelectionBrush', () => { @@ -24,18 +30,19 @@ describe('EuiSelectionBrush', () => { ); + let selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush.exists()).toBe(true); - component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 50, offsetY: 50 } }); - component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: 50, offsetY: 50 } }); - component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 50, offsetY: DEFAULT_MARGINS.top + 50 } }); + component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 50, offsetY: DEFAULT_MARGINS.top + 50 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 100, offsetY: DEFAULT_MARGINS.top + 100 } }); selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush).toMatchSnapshot(); expect(selectionBrush.find('rect').at(0).props().x).toBe(50); expect(selectionBrush.find('rect').at(0).props().y).toBe(0); expect(selectionBrush.find('rect').at(0).props().width).toBe(50); - expect(selectionBrush.find('rect').at(0).props().height).toBe(200); + expect(selectionBrush.find('rect').at(0).props().height).toBe(200 - DEFAULT_MARGINS.top - DEFAULT_MARGINS.bottom); component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: 100, offsetY: 100 } }); selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush.find('rect').at(0).props().x).toBe(0); @@ -61,17 +68,17 @@ describe('EuiSelectionBrush', () => { ); let selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush.exists()).toBe(true); - component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 50, offsetY: 50 } }); - component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: 50, offsetY: 50 } }); - component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 50, offsetY: DEFAULT_MARGINS.top +50 } }); + component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 50, offsetY: DEFAULT_MARGINS.top +50 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 100, offsetY: DEFAULT_MARGINS.top +100 } }); selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush).toMatchSnapshot(); expect(selectionBrush.find('rect').at(0).props().x).toBe(0); expect(selectionBrush.find('rect').at(0).props().y).toBe(50); - expect(selectionBrush.find('rect').at(0).props().width).toBe(600); + expect(selectionBrush.find('rect').at(0).props().width).toBe(600 - DEFAULT_MARGINS.left - DEFAULT_MARGINS.right); expect(selectionBrush.find('rect').at(0).props().height).toBe(50); - component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 100, offsetY: DEFAULT_MARGINS.top +100 } }); selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush.find('rect').at(0).props().x).toBe(0); expect(selectionBrush.find('rect').at(0).props().y).toBe(0); @@ -95,9 +102,9 @@ describe('EuiSelectionBrush', () => { ); let selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush.exists()).toBe(true); - component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 50, offsetY: 50 } }); - component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: 50, offsetY: 50 } }); - component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 50, offsetY: DEFAULT_MARGINS.top + 50 } }); + component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 50, offsetY: DEFAULT_MARGINS.top + 50 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 100, offsetY: DEFAULT_MARGINS.top + 100 } }); selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush).toMatchSnapshot(); @@ -105,7 +112,7 @@ describe('EuiSelectionBrush', () => { expect(selectionBrush.find('rect').at(0).props().y).toBe(50); expect(selectionBrush.find('rect').at(0).props().width).toBe(50); expect(selectionBrush.find('rect').at(0).props().height).toBe(50); - component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 100, offsetY: DEFAULT_MARGINS.top + 100 } }); selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush.find('rect').at(0).props().x).toBe(0); expect(selectionBrush.find('rect').at(0).props().y).toBe(0); @@ -117,24 +124,24 @@ describe('EuiSelectionBrush', () => { const onSelectionBrushEndMock = jest.fn(); const component = mount( ); let selectionBrush = component.find(EuiSelectionBrush); expect(selectionBrush.exists()).toBe(true); - component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 50, offsetY: 50 } }); - component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: 50, offsetY: 50 } }); - component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: 100, offsetY: 100 } }); - component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: 100, offsetY: 100 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 50, offsetY: DEFAULT_MARGINS.top + 50 } }); + component.find('svg').at(0).simulate('mousedown', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 50, offsetY: DEFAULT_MARGINS.top + 50 } }); + component.find('svg').at(0).simulate('mousemove', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 100, offsetY: DEFAULT_MARGINS.top + 100 } }); + component.find('svg').at(0).simulate('mouseup', { nativeEvent: { offsetX: DEFAULT_MARGINS.left + 100, offsetY: DEFAULT_MARGINS.top + 100 } }); selectionBrush = component.find(EuiSelectionBrush); expect(onSelectionBrushEndMock.mock.calls.length).toBe(1); const expectedBrush = { @@ -165,7 +172,7 @@ describe('EuiSelectionBrush', () => { selectionBrushOrientation={ORIENTATION.VERTICAL} enableSelectionBrush={true} onSelectionBrushEnd={onSelectionBrushEndMock} - xType={SCALE_TYPE.ORDINAL} + xType={SCALE.ORDINAL} > diff --git a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap index 526f4a645fbd..28f6b7ff9f7f 100644 --- a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap @@ -36,7 +36,14 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` className="" dontCheckIfEmpty={true} height={200} - margin={0} + margin={ + Object { + "bottom": 40, + "left": 40, + "right": 10, + "top": 10, + } + } width={600} xPadding={0} xType="linear" @@ -89,6 +96,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` } _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={true} clusters={ @@ -144,15 +152,15 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key=".0:$.0" lineMarkColor="#00ff00" lineMarkSize={13} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} name="test-chart" onClick={[Function]} onMarkClick={[Function]} @@ -186,7 +194,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -199,7 +207,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -225,6 +233,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` } _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={true} className="euiAreaSeries" @@ -282,15 +291,15 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key="test-chart-area" lineMarkColor="#00ff00" lineMarkSize={13} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onClick={[Function]} onMarkClick={[Function]} onSeriesMouseOut={[Function]} @@ -331,7 +340,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -344,7 +353,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -370,6 +379,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` } _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animatedProps={ Array [ @@ -465,14 +475,14 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} lineMarkColor="#00ff00" lineMarkSize={13} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onClick={[Function]} onMarkClick={[Function]} onSeriesMouseOut={[Function]} @@ -513,7 +523,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -526,7 +536,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -572,6 +582,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` _animation={0.00002} _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={null} className="euiAreaSeries" @@ -629,14 +640,14 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} lineMarkColor="#00ff00" lineMarkSize={13} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onClick={[Function]} onMarkClick={[Function]} onSeriesMouseOut={[Function]} @@ -677,7 +688,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -690,7 +701,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -698,7 +709,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` > @@ -770,13 +781,13 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key=".1" - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" orientation="vertical" @@ -807,7 +818,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -821,7 +832,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -879,12 +890,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -912,7 +923,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -925,7 +936,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -985,12 +996,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -1018,7 +1029,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1031,7 +1042,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1091,12 +1102,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -1124,7 +1135,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1137,7 +1148,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1212,12 +1223,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -1245,7 +1256,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1258,7 +1269,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1339,12 +1350,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -1372,7 +1383,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1385,7 +1396,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1393,47 +1404,47 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` > @@ -1494,12 +1505,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onZero={false} opacityDomain={Array []} opacityType="literal" @@ -1531,7 +1542,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1544,7 +1555,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1604,12 +1615,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -1641,7 +1652,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1654,7 +1665,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1715,12 +1726,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -1754,7 +1765,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1767,7 +1778,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1846,12 +1857,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -1885,7 +1896,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1898,7 +1909,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1980,12 +1991,12 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2019,7 +2030,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -2032,7 +2043,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -2041,19 +2052,19 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` @@ -2115,14 +2126,14 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - height={0} - innerHeight={200} - innerWidth={600} - left={0} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + height={40} + innerHeight={150} + innerWidth={550} + left={40} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2147,8 +2158,8 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` tickPadding={8} tickSize={0} tickTotal={10} - top={200} - width={600} + top={160} + width={550} xDomain={ Array [ 0, @@ -2159,7 +2170,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -2172,7 +2183,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -2210,7 +2221,7 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` className="rv-xy-plot__axis__tick" key="1" style={Object {}} - transform="translate(60, 0)" + transform="translate(55, 0)" > @@ -4333,13 +4355,13 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key=".1" - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" orientation="vertical" @@ -4370,7 +4392,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -4384,7 +4406,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -4442,12 +4464,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -4475,7 +4497,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -4488,7 +4510,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -4548,12 +4570,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -4581,7 +4603,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -4594,7 +4616,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -4654,12 +4676,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -4687,7 +4709,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -4700,7 +4722,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -4775,12 +4797,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -4808,7 +4830,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -4821,7 +4843,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -4902,12 +4924,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -4935,7 +4957,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -4948,7 +4970,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -4956,47 +4978,47 @@ exports[`EuiAreaSeries is rendered 1`] = ` > @@ -5057,12 +5079,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onZero={false} opacityDomain={Array []} opacityType="literal" @@ -5094,7 +5116,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5107,7 +5129,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5167,12 +5189,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5204,7 +5226,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5217,7 +5239,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5278,12 +5300,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5317,7 +5339,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5330,7 +5352,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5409,12 +5431,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5448,7 +5470,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5461,7 +5483,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5543,12 +5565,12 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5582,7 +5604,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5595,7 +5617,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5604,19 +5626,19 @@ exports[`EuiAreaSeries is rendered 1`] = ` @@ -5678,14 +5700,14 @@ exports[`EuiAreaSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - height={0} - innerHeight={200} - innerWidth={600} - left={0} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + height={40} + innerHeight={150} + innerWidth={550} + left={40} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -5710,8 +5732,8 @@ exports[`EuiAreaSeries is rendered 1`] = ` tickPadding={8} tickSize={0} tickTotal={10} - top={200} - width={600} + top={160} + width={550} xDomain={ Array [ 0, @@ -5722,7 +5744,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5735,7 +5757,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5773,7 +5795,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` className="rv-xy-plot__axis__tick" key="1" style={Object {}} - transform="translate(60, 0)" + transform="translate(55, 0)" > @@ -110,7 +110,7 @@ exports[`EuiHorizontalBarSeries all props are rendered 1`] = ` @@ -547,7 +547,7 @@ exports[`EuiHorizontalBarSeries is rendered 1`] = ` @@ -979,7 +979,7 @@ exports[`EuiHorizontalBarSeries renders stacked bar chart 1`] = ` > @@ -110,7 +110,7 @@ exports[`EuiHorizontalRectSeries all props are rendered 1`] = ` @@ -547,7 +547,7 @@ exports[`EuiHorizontalRectSeries is rendered 1`] = ` @@ -1000,7 +1000,7 @@ exports[`EuiHorizontalRectSeries renders stacked bar chart 1`] = ` > @@ -731,6 +742,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` } _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={true} className="" @@ -788,13 +800,13 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key="test-chart" - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onClick={[Function]} opacity={1} opacityDomain={Array []} @@ -835,7 +847,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -848,7 +860,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -874,6 +886,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` } _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animatedProps={ Array [ @@ -969,12 +982,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onClick={[Function]} opacity={1} opacityDomain={Array []} @@ -1015,7 +1028,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1028,7 +1041,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1074,6 +1087,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` _animation={0.00004} _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={null} className="" @@ -1131,12 +1145,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onClick={[Function]} opacity={1} opacityDomain={Array []} @@ -1177,7 +1191,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1190,7 +1204,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1198,7 +1212,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` > @@ -1238,6 +1252,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` } _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={true} clusters={ @@ -1293,13 +1308,13 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key="test-chart-mark" - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onClick={[Function]} onSeriesClick={[Function]} opacity={1} @@ -1336,7 +1351,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1349,7 +1364,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1375,6 +1390,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` } _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animatedProps={ Array [ @@ -1468,12 +1484,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onClick={[Function]} onSeriesClick={[Function]} opacity={1} @@ -1510,7 +1526,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1523,7 +1539,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1569,6 +1585,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` _animation={0.00006} _colorValue="#DB1374" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={null} clusters={ @@ -1624,12 +1641,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getY0={[Function]} hasLineMarks={true} id="chart-0" - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onClick={[Function]} onSeriesClick={[Function]} opacity={1} @@ -1666,7 +1683,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -1679,7 +1696,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -1687,11 +1704,11 @@ exports[`EuiLineSeries all props are rendered 1`] = ` > @@ -2507,12 +2524,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onZero={false} opacityDomain={Array []} opacityType="literal" @@ -2544,7 +2561,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -2557,7 +2574,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -2617,12 +2634,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2654,7 +2671,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -2667,7 +2684,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -2728,12 +2745,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2767,7 +2784,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -2780,7 +2797,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -2859,12 +2876,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -2898,7 +2915,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -2911,7 +2928,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -2993,12 +3010,12 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -3032,7 +3049,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -3045,7 +3062,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -3054,19 +3071,19 @@ exports[`EuiLineSeries all props are rendered 1`] = ` @@ -3128,14 +3145,14 @@ exports[`EuiLineSeries all props are rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - height={0} - innerHeight={200} - innerWidth={600} - left={0} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + height={40} + innerHeight={150} + innerWidth={550} + left={40} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -3160,8 +3177,8 @@ exports[`EuiLineSeries all props are rendered 1`] = ` tickPadding={8} tickSize={0} tickTotal={10} - top={200} - width={600} + top={160} + width={550} xDomain={ Array [ 0, @@ -3172,7 +3189,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -3185,7 +3202,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -3223,7 +3240,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` className="rv-xy-plot__axis__tick" key="1" style={Object {}} - transform="translate(60, 0)" + transform="translate(55, 0)" > @@ -5317,6 +5345,7 @@ exports[`EuiLineSeries is rendered 1`] = ` } _colorValue="#00B3A4" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={true} className="" @@ -5373,13 +5402,13 @@ exports[`EuiLineSeries is rendered 1`] = ` getY={[Function]} getY0={[Function]} id="chart-0" - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key="test" - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -5419,7 +5448,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5432,7 +5461,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5458,6 +5487,7 @@ exports[`EuiLineSeries is rendered 1`] = ` } _colorValue="#00B3A4" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animatedProps={ Array [ @@ -5552,12 +5582,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getY={[Function]} getY0={[Function]} id="chart-0" - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -5597,7 +5627,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5610,7 +5640,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5656,6 +5686,7 @@ exports[`EuiLineSeries is rendered 1`] = ` _animation={0.00004} _colorValue="#00B3A4" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={null} className="" @@ -5712,12 +5743,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getY={[Function]} getY0={[Function]} id="chart-0" - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -5757,7 +5788,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5770,7 +5801,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5778,7 +5809,7 @@ exports[`EuiLineSeries is rendered 1`] = ` > @@ -5818,6 +5849,7 @@ exports[`EuiLineSeries is rendered 1`] = ` } _colorValue="#00B3A4" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={true} clusters={ @@ -5872,13 +5904,13 @@ exports[`EuiLineSeries is rendered 1`] = ` getY={[Function]} getY0={[Function]} id="chart-0" - innerHeight={200} - innerWidth={600} + innerHeight={150} + innerWidth={550} key="test-mark" - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -5913,7 +5945,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -5926,7 +5958,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -5952,6 +5984,7 @@ exports[`EuiLineSeries is rendered 1`] = ` } _colorValue="#00B3A4" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animatedProps={ Array [ @@ -6044,12 +6077,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getY={[Function]} getY0={[Function]} id="chart-0" - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -6084,7 +6117,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -6097,7 +6130,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -6143,6 +6176,7 @@ exports[`EuiLineSeries is rendered 1`] = ` _animation={0.00006} _colorValue="#00B3A4" _opacityValue={1} + _orientation="vertical" angleDomain={Array []} animation={null} clusters={ @@ -6197,12 +6231,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getY={[Function]} getY0={[Function]} id="chart-0" - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -6237,7 +6271,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -6250,7 +6284,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -6258,11 +6292,11 @@ exports[`EuiLineSeries is rendered 1`] = ` > @@ -7078,12 +7112,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} onZero={false} opacityDomain={Array []} opacityType="literal" @@ -7115,7 +7149,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -7128,7 +7162,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -7188,12 +7222,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7225,7 +7259,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -7238,7 +7272,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -7299,12 +7333,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7338,7 +7372,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -7351,7 +7385,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -7430,12 +7464,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7469,7 +7503,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -7482,7 +7516,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -7564,12 +7598,12 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - innerHeight={200} - innerWidth={600} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + innerHeight={150} + innerWidth={550} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7603,7 +7637,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -7616,7 +7650,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -7625,19 +7659,19 @@ exports[`EuiLineSeries is rendered 1`] = ` @@ -7699,14 +7733,14 @@ exports[`EuiLineSeries is rendered 1`] = ` getX0={[Function]} getY={[Function]} getY0={[Function]} - height={0} - innerHeight={200} - innerWidth={600} - left={0} - marginBottom={0} - marginLeft={0} - marginRight={0} - marginTop={0} + height={40} + innerHeight={150} + innerWidth={550} + left={40} + marginBottom={40} + marginLeft={40} + marginRight={10} + marginTop={10} on0={false} opacityDomain={Array []} opacityType="literal" @@ -7731,8 +7765,8 @@ exports[`EuiLineSeries is rendered 1`] = ` tickPadding={8} tickSize={0} tickTotal={10} - top={200} - width={600} + top={160} + width={550} xDomain={ Array [ 0, @@ -7743,7 +7777,7 @@ exports[`EuiLineSeries is rendered 1`] = ` xRange={ Array [ 0, - 600, + 550, ] } xType="linear" @@ -7756,7 +7790,7 @@ exports[`EuiLineSeries is rendered 1`] = ` yPadding={0} yRange={ Array [ - 200, + 150, 0, ] } @@ -7794,7 +7828,7 @@ exports[`EuiLineSeries is rendered 1`] = ` className="rv-xy-plot__axis__tick" key="1" style={Object {}} - transform="translate(60, 0)" + transform="translate(55, 0)" > @@ -111,7 +111,7 @@ exports[`EuiVerticalBarSeries all props are rendered 1`] = ` > @@ -609,7 +609,7 @@ exports[`EuiVerticalBarSeries is rendered 1`] = ` > @@ -1108,7 +1108,7 @@ exports[`EuiVerticalBarSeries renders stacked bar chart 1`] = ` > @@ -131,7 +131,7 @@ exports[`EuiVerticalRectSeries all props are rendered 1`] = ` @@ -649,7 +649,7 @@ exports[`EuiVerticalRectSeries is rendered 1`] = ` @@ -1148,7 +1148,7 @@ exports[`EuiVerticalRectSeries renders stacked vertical histogram 1`] = ` > */ data: PropTypes.arrayOf( @@ -51,11 +51,11 @@ EuiAreaSeries.propTypes = { ).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: PropTypes.oneOf(VISUALIZATION_COLORS), - curve: PropTypes.oneOf(Object.values(CURVES)), + curve: PropTypes.oneOf(Object.values(CURVE)), onSeriesClick: PropTypes.func, onMarkClick: PropTypes.func, }; EuiAreaSeries.defaultProps = { - curve: CURVES.LINEAR, + curve: CURVE.LINEAR, }; diff --git a/src/components/xy_chart/series/as_series.js b/src/components/xy_chart/series/as_series.js deleted file mode 100644 index 304e78da241c..000000000000 --- a/src/components/xy_chart/series/as_series.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { AbstractSeries } from 'react-vis'; - -export function asSeries(Component) { - return class AsSeries extends AbstractSeries { - static displayName = `${Component.displayName}AsSeries` || 'asSeriesHOC'; - static propTypes = { - ...Component.propTypes - }; - static defaultProps = { - ...Component.defaultProps - }; - render() { - return ( - - ); - } - } -} diff --git a/src/components/xy_chart/series/bar_series.js b/src/components/xy_chart/series/bar_series.js index 5ca5f83daf30..ef66243ab917 100644 --- a/src/components/xy_chart/series/bar_series.js +++ b/src/components/xy_chart/series/bar_series.js @@ -1,24 +1,45 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { AbstractSeries } from 'react-vis'; -import { EuiVerticalBarSeries } from './vertical_bar_series' -import { EuiHorizontalBarSeries } from './horizontal_bar_series' +import { VerticalBarSeries, HorizontalBarSeries, AbstractSeries } from 'react-vis'; +import { ORIENTATION } from '../utils/chart_utils'; import { VISUALIZATION_COLORS } from '../../../services'; +import classNames from 'classnames'; export class EuiBarSeries extends AbstractSeries { + state = { + isMouseOverValue: false, + } static getParentConfig(attr, props) { - const { isHorizontal } = props; - return isHorizontal - ? EuiHorizontalBarSeries.getParentConfig(attr) - : EuiVerticalBarSeries.getParentConfig(attr); + const { _orientation } = props; + return _orientation === ORIENTATION.HORIZONTAL + ? HorizontalBarSeries.getParentConfig(attr) + : VerticalBarSeries.getParentConfig(attr); + } + _onValueMouseOver = () => { + this.setState(() => ({ isMouseOverValue: true })); + } + + _onValueMouseOut = () => { + this.setState(() => ({ isMouseOverValue: false })); } render() { - const { isHorizontal, data, ...rest } = this.props; - const BarSeriesComponent = isHorizontal ? EuiHorizontalBarSeries : EuiVerticalBarSeries; - // const seriesData = isHorizontal ? rotateDataSeries(data) : data; + const { _orientation, name, data, color, onValueClick, ...rest } = this.props; + const { isMouseOverValue } = this.state; + const isHighDataVolume = data.length > 80 ? true : false; + const classes = classNames( + 'euiBarSeries', + isHighDataVolume && 'euiBarSeries--highDataVolume', + isMouseOverValue && onValueClick && 'euiBarSeries--hoverEnabled', + ); + const BarSeriesComponent = _orientation === ORIENTATION.HORIZONTAL ? HorizontalBarSeries : VerticalBarSeries; return ( @@ -29,10 +50,13 @@ export class EuiBarSeries extends AbstractSeries { EuiBarSeries.displayName = 'EuiBarSeries'; EuiBarSeries.propTypes = { - /** The name used to define the data in tooltips and ledgends */ + /** + * The name used to define the data in tooltips and legends + */ name: PropTypes.string.isRequired, - isHorizontal: PropTypes.bool, - /** Array<{x: number, y: string|number}> */ + /** + * Array<{x: string|number, y: string|number}> depending on XYChart xType scale and yType scale + */ data: PropTypes.arrayOf(PropTypes.shape({ x: PropTypes.oneOfType([ PropTypes.string, @@ -43,11 +67,14 @@ EuiBarSeries.propTypes = { PropTypes.number ]), })).isRequired, - /** An EUI visualization color, the default value is enforced by EuiXYChart */ + /** + * An EUI visualization color, the default value is passed through EuiXYChart + */ color: PropTypes.oneOf(VISUALIZATION_COLORS), - onClick: PropTypes.func + /** + * @private passed via XYChart + */ + _orientation: PropTypes.string, }; -EuiBarSeries.defaultProps = { - isHorizontal: false, -}; +EuiBarSeries.defaultProps = {}; diff --git a/src/components/xy_chart/series/histogram_series.js b/src/components/xy_chart/series/histogram_series.js new file mode 100644 index 000000000000..18a9a02dc3af --- /dev/null +++ b/src/components/xy_chart/series/histogram_series.js @@ -0,0 +1,75 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { VerticalRectSeries, HorizontalRectSeries, AbstractSeries } from 'react-vis'; +import { ORIENTATION } from '../utils/chart_utils'; +import { VISUALIZATION_COLORS } from '../../../services'; +import classNames from 'classnames'; + +export class EuiHistogramSeries extends AbstractSeries { + state = { + isMouseOverValue: false, + } + static getParentConfig(attr, props) { + const { _orientation } = props; + return _orientation === ORIENTATION.HORIZONTAL + ? HorizontalRectSeries.getParentConfig(attr) + : VerticalRectSeries.getParentConfig(attr); + } + _onValueMouseOver = () => { + this.setState(() => ({ isMouseOverValue: true })); + } + + _onValueMouseOut = () => { + this.setState(() => ({ isMouseOverValue: false })); + } + render() { + const { _orientation, name, data, color, onValueClick, ...rest } = this.props; + const { isMouseOverValue } = this.state; + const isHighDataVolume = data.length > 80 ? true : false; + const classes = classNames( + 'euiHistogramSeries', + isHighDataVolume && 'euiHistogramSeries--highDataVolume', + isMouseOverValue && onValueClick && 'euiHistogramSeries--hoverEnabled', + ); + const HistogramSeriesComponent = _orientation === ORIENTATION.HORIZONTAL ? HorizontalRectSeries : VerticalRectSeries; + return ( + + ); + } +} + +EuiHistogramSeries.displayName = 'EuiHistogramSeries'; + +EuiHistogramSeries.propTypes = { + /** The name used to define the data in tooltips and legends */ + name: PropTypes.string.isRequired, + /** Array<{x: number, y: string|number}> */ + data: PropTypes.arrayOf(PropTypes.shape({ + x: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + y: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]), + })).isRequired, + /** An EUI visualization color, the default value is enforced by EuiXYChart */ + color: PropTypes.oneOf(VISUALIZATION_COLORS), + + /** + * @private passed via XYChart + */ + _orientation: PropTypes.string, +}; + +EuiHistogramSeries.defaultProps = {}; diff --git a/src/components/xy_chart/series/horizontal_bar_series.js b/src/components/xy_chart/series/horizontal_bar_series.js index 422dae3d4cef..25f0e0256ca7 100644 --- a/src/components/xy_chart/series/horizontal_bar_series.js +++ b/src/components/xy_chart/series/horizontal_bar_series.js @@ -44,7 +44,7 @@ export class EuiHorizontalBarSeries extends HorizontalBarSeries { EuiHorizontalBarSeries.displayName = 'EuiHorizontalBarSeries'; EuiHorizontalBarSeries.propTypes = { - /** The name used to define the data in tooltips and ledgends */ + /** The name used to define the data in tooltips and legends */ name: PropTypes.string.isRequired, /** Array<{x: number, y: string|number}> */ data: PropTypes.arrayOf(PropTypes.shape({ diff --git a/src/components/xy_chart/series/horizontal_rect_series.js b/src/components/xy_chart/series/horizontal_rect_series.js index 861f5a311f79..cf42b324cffd 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.js +++ b/src/components/xy_chart/series/horizontal_rect_series.js @@ -22,9 +22,9 @@ export class EuiHorizontalRectSeries extends HorizontalRectSeries { const { name, data, color, onValueClick, ...rest } = this.props; const isHighDataVolume = data.length > 80 ? true : false; const classes = classNames( - 'euiRectSeries', - isHighDataVolume && 'euiRectSeries--highDataVolume', - isMouseOverValue && onValueClick && 'euiRectSeries--hoverEnabled', + 'euiHistogramSeries', + isHighDataVolume && 'euiHistogramSeries--highDataVolume', + isMouseOverValue && onValueClick && 'euiHistogramSeries--hoverEnabled', ); return ( */ data: PropTypes.arrayOf(PropTypes.shape({ diff --git a/src/components/xy_chart/series/index.js b/src/components/xy_chart/series/index.js index 410dd7fae86c..4eb1e6c4f76e 100644 --- a/src/components/xy_chart/series/index.js +++ b/src/components/xy_chart/series/index.js @@ -1,6 +1,7 @@ export { EuiLineSeries } from './line_series'; export { EuiAreaSeries } from './area_series'; export { EuiBarSeries } from './bar_series'; +export { EuiHistogramSeries } from './histogram_series'; export { EuiVerticalBarSeries } from './vertical_bar_series'; export { EuiHorizontalBarSeries } from './horizontal_bar_series'; export { EuiVerticalRectSeries } from './vertical_rect_series'; diff --git a/src/components/xy_chart/series/line_series.js b/src/components/xy_chart/series/line_series.js index 69b7d689b47e..5925f5b5d0db 100644 --- a/src/components/xy_chart/series/line_series.js +++ b/src/components/xy_chart/series/line_series.js @@ -2,7 +2,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { LineSeries, MarkSeries, AbstractSeries } from 'react-vis'; import { VISUALIZATION_COLORS } from '../../../services'; -import { CURVES } from '../utils/chart_utils'; +import { CURVE } from '../utils/chart_utils'; export class EuiLineSeries extends AbstractSeries { render() { @@ -69,7 +69,7 @@ export class EuiLineSeries extends AbstractSeries { EuiLineSeries.displayName = 'EuiLineSeries'; EuiLineSeries.propTypes = { - /** The name used to define the data in tooltips and ledgends */ + /** The name used to define the data in tooltips and legends */ name: PropTypes.string.isRequired, /** Array<{x: string|number, y: string|number}> */ data: PropTypes.arrayOf(PropTypes.shape({ @@ -84,7 +84,7 @@ EuiLineSeries.propTypes = { })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: PropTypes.oneOf(VISUALIZATION_COLORS), - curve: PropTypes.oneOf(Object.values(CURVES)), + curve: PropTypes.oneOf(Object.values(CURVE)), showLineMarks: PropTypes.bool, lineSize: PropTypes.number, lineMarkColor: PropTypes.string, @@ -94,7 +94,7 @@ EuiLineSeries.propTypes = { }; EuiLineSeries.defaultProps = { - curve: CURVES.LINEAR, + curve: CURVE.LINEAR, showLineMarks: true, lineSize: 2, lineMarkSize: 5 diff --git a/src/components/xy_chart/series/vertical_bar_series.js b/src/components/xy_chart/series/vertical_bar_series.js index 4b62afa8fe70..a7fee820ced1 100644 --- a/src/components/xy_chart/series/vertical_bar_series.js +++ b/src/components/xy_chart/series/vertical_bar_series.js @@ -44,7 +44,7 @@ export class EuiVerticalBarSeries extends VerticalBarSeries { EuiVerticalBarSeries.displayName = 'EuiVerticalBarSeries'; EuiVerticalBarSeries.propTypes = { - /** The name used to define the data in tooltips and ledgends */ + /** The name used to define the data in tooltips and legends */ name: PropTypes.string.isRequired, /** Array<{x: string|number, y: number}> */ data: PropTypes.arrayOf(PropTypes.shape({ diff --git a/src/components/xy_chart/series/vertical_rect_series.js b/src/components/xy_chart/series/vertical_rect_series.js index a3bf66ac541b..e8fa47be7b4e 100644 --- a/src/components/xy_chart/series/vertical_rect_series.js +++ b/src/components/xy_chart/series/vertical_rect_series.js @@ -22,9 +22,9 @@ export class EuiVerticalRectSeries extends VerticalRectSeries { const { name, data, color, onValueClick, ...rest } = this.props; const isHighDataVolume = data.length > 80 ? true : false; const classes = classNames( - 'euiRectSeries', - isHighDataVolume && 'euiRectSeries--highDataVolume', - isMouseOverValue && onValueClick && 'euiRectSeries--hoverEnabled', + 'euiHistogramSeries', + isHighDataVolume && 'euiHistogramSeries--highDataVolume', + isMouseOverValue && onValueClick && 'euiHistogramSeries--hoverEnabled', ); return ( */ data: PropTypes.arrayOf(PropTypes.shape({ diff --git a/src/components/xy_chart/utils/axis_utils.js b/src/components/xy_chart/utils/axis_utils.js index 3539ad119ec5..abe375135bc7 100644 --- a/src/components/xy_chart/utils/axis_utils.js +++ b/src/components/xy_chart/utils/axis_utils.js @@ -4,7 +4,14 @@ import { AxisUtils } from 'react-vis'; * Axis orientation. Can be top, bottom, left, right. * See react-vis AxisUtils.ORIENTATION for docs. */ -export const ORIENTATION = AxisUtils.ORIENTATION; +export const ORIENTATION = { + TOP: AxisUtils.ORIENTATION.TOP, + LEFT: AxisUtils.ORIENTATION.LEFT, + RIGHT: AxisUtils.ORIENTATION.RIGHT, + BOTTOM: AxisUtils.ORIENTATION.BOTTOM, + HORIZONTAL: AxisUtils.ORIENTATION.HORIZONTAL, + VERTICAL: AxisUtils.ORIENTATION.VERTICAL, +}; /** * The title position along the axis. diff --git a/src/components/xy_chart/utils/chart_utils.js b/src/components/xy_chart/utils/chart_utils.js index 3ed7bace0932..060ab5e10717 100644 --- a/src/components/xy_chart/utils/chart_utils.js +++ b/src/components/xy_chart/utils/chart_utils.js @@ -15,7 +15,7 @@ export const ORIENTATION = { /** * Type of scales used in charts. */ -export const SCALE_TYPE = { +export const SCALE = { /** Continuous scale, that works with numbers. * Similar to [d3.scaleLinear](https://github.com/d3/d3-scale/blob/master/README.md#scaleLinear). */ LINEAR: 'linear', @@ -42,22 +42,22 @@ export const SCALE_TYPE = { * Differnet types of curves that can be used on lines and areas series. * See [d3-shape#curves](https://github.com/d3/d3-shape#curves) */ -export const CURVES = { - 'LINEAR': 'linear', - 'CURVE_CARDINAL': 'curveCardinal', - 'CURVE_NATURAL': 'curveNatural', - 'CURVE_MONOTONE_X': 'curveMonotoneX', - 'CURVE_MONOTONE_Y': 'curveMonotoneY', - 'CURVE_BASIS': 'curveBasis', - 'CURVE_BUNDLE': 'curveBundle', - 'CURVE_CATMULL_ROM': 'curveCatmullRom', - 'CURVE_STEP': 'curveStep', - 'CURVE_STEP_AFTER': 'curveStepAfter', - 'CURVE_STEP_BEFORE': 'curveStepBefore', +export const CURVE = { + LINEAR: 'linear', + CURVE_CARDINAL: 'curveCardinal', + CURVE_NATURAL: 'curveNatural', + CURVE_MONOTONE_X: 'curveMonotoneX', + CURVE_MONOTONE_Y: 'curveMonotoneY', + CURVE_BASIS: 'curveBasis', + CURVE_BUNDLE: 'curveBundle', + CURVE_CATMULL_ROM: 'curveCatmullRom', + CURVE_STEP: 'curveStep', + CURVE_STEP_AFTER: 'curveStepAfter', + CURVE_STEP_BEFORE: 'curveStepBefore', } export const EuiXYChartUtils = { ORIENTATION, - SCALE_TYPE, - CURVES, + SCALE, + CURVE, } diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index cbaf494261d0..f75057ac8f55 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -9,10 +9,16 @@ import { EuiCrosshairX } from './crosshairs/crosshair_x'; import { EuiCrosshairY } from './crosshairs/crosshair_y'; import { VISUALIZATION_COLORS } from '../../services'; import { getSeriesChildren } from './utils/series_utils'; -import { ORIENTATION, SCALE_TYPE } from './utils/chart_utils'; +import { ORIENTATION, SCALE } from './utils/chart_utils'; const { HORIZONTAL, VERTICAL, BOTH } = ORIENTATION; -const { LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL } = SCALE_TYPE; +const { LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL } = SCALE; +const DEFAULT_MARGINS = { + left: 40, + right: 10, + top: 10, + bottom: 40 +}; /** * The extended version of the react-vis XYPlot with the mouseLeave and mouseUp handlers. @@ -167,11 +173,11 @@ class XYChart extends PureComponent { const props = { id: `chart-${i}`, }; - if (!child.props.color) { props.color = VISUALIZATION_COLORS[colorIterator % VISUALIZATION_COLORS.length]; colorIterator++; } + props._orientation = this.props.orientation; return React.cloneElement(child, props); }); @@ -226,7 +232,7 @@ class XYChart extends PureComponent { width={width} animation={animateData} height={height} - margin={0} + margin={DEFAULT_MARGINS} xType={xType} yType={yType} xDomain={xDomain} From 090c061997a1e1ba2f42b88ba4904328969e50e2 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 2 Jul 2018 09:50:30 +0200 Subject: [PATCH 57/68] Fix typo prop in XYChart --- src/components/xy_chart/xy_chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index f75057ac8f55..c035adff86dd 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -274,7 +274,7 @@ XYChart.propTypes = { /** The main x axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md */ xType: PropTypes.oneOf([LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL]), /** The main y axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md*/ - xType: PropTypes.oneOf([LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL]), + yType: PropTypes.oneOf([LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL]), /** Manually specify the domain of x axis. */ xDomain: PropTypes.array, /** Manually specify the domain of y axis. */ From 35bf5332053c69a128893d403860492eac9e3eee Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 2 Jul 2018 09:51:45 +0200 Subject: [PATCH 58/68] Hide orientation props from bars and histograms --- src/components/xy_chart/series/bar_series.js | 2 +- src/components/xy_chart/series/histogram_series.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/xy_chart/series/bar_series.js b/src/components/xy_chart/series/bar_series.js index ef66243ab917..183253700f78 100644 --- a/src/components/xy_chart/series/bar_series.js +++ b/src/components/xy_chart/series/bar_series.js @@ -74,7 +74,7 @@ EuiBarSeries.propTypes = { /** * @private passed via XYChart */ - _orientation: PropTypes.string, + // _orientation: PropTypes.string, }; EuiBarSeries.defaultProps = {}; diff --git a/src/components/xy_chart/series/histogram_series.js b/src/components/xy_chart/series/histogram_series.js index 18a9a02dc3af..6a9521620cc0 100644 --- a/src/components/xy_chart/series/histogram_series.js +++ b/src/components/xy_chart/series/histogram_series.js @@ -69,7 +69,7 @@ EuiHistogramSeries.propTypes = { /** * @private passed via XYChart */ - _orientation: PropTypes.string, + // _orientation: PropTypes.string, }; EuiHistogramSeries.defaultProps = {}; From ac8eab45801da02fbde3b26c7b3ea6ab56812175 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 2 Jul 2018 09:54:28 +0200 Subject: [PATCH 59/68] LineSeries default to sparkline --- .../__snapshots__/default_axis.test.js.snap | 42 +- .../horizontal_grid.test.js.snap | 21 +- .../__snapshots__/vertical_grid.test.js.snap | 21 +- .../axis/__snapshots__/x_axis.test.js.snap | 21 +- .../axis/__snapshots__/y_axis.test.js.snap | 21 +- .../__snapshots__/line_series.test.js.snap | 4991 +++++++---------- src/components/xy_chart/series/line_series.js | 6 +- 7 files changed, 2000 insertions(+), 3123 deletions(-) diff --git a/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap b/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap index e723c785c2d8..cb03e4c76536 100644 --- a/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap +++ b/src/components/xy_chart/axis/__snapshots__/default_axis.test.js.snap @@ -21,32 +21,15 @@ exports[`EuiDefaultAxis render default axis 1`] = ` - - - - - - - - - - - -
diff --git a/src/components/xy_chart/axis/__snapshots__/vertical_grid.test.js.snap b/src/components/xy_chart/axis/__snapshots__/vertical_grid.test.js.snap index f5ebfa5a464b..a000fa143219 100644 --- a/src/components/xy_chart/axis/__snapshots__/vertical_grid.test.js.snap +++ b/src/components/xy_chart/axis/__snapshots__/vertical_grid.test.js.snap @@ -103,32 +103,15 @@ exports[`EuiVerticalGrid render the vertical grid 1`] = ` - - - -
diff --git a/src/components/xy_chart/axis/__snapshots__/x_axis.test.js.snap b/src/components/xy_chart/axis/__snapshots__/x_axis.test.js.snap index d3fb7aa1b4cc..89b45cb7c122 100644 --- a/src/components/xy_chart/axis/__snapshots__/x_axis.test.js.snap +++ b/src/components/xy_chart/axis/__snapshots__/x_axis.test.js.snap @@ -258,32 +258,15 @@ exports[`EuiXAxis render the x axis 1`] = ` - - - - diff --git a/src/components/xy_chart/axis/__snapshots__/y_axis.test.js.snap b/src/components/xy_chart/axis/__snapshots__/y_axis.test.js.snap index 8f2ddb4d8df7..39b1139a3e87 100644 --- a/src/components/xy_chart/axis/__snapshots__/y_axis.test.js.snap +++ b/src/components/xy_chart/axis/__snapshots__/y_axis.test.js.snap @@ -158,32 +158,15 @@ exports[`EuiYAxis render the y axis 1`] = ` - - - - diff --git a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap index 8fe426fd6cf8..af32728a7696 100644 --- a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap @@ -157,7 +157,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` key=".0:$.0" lineMarkColor="#00ff00" lineMarkSize={13} - lineSize={2} + lineSize={1} marginBottom={40} marginLeft={40} marginRight={10} @@ -171,7 +171,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={0} - showLineMarks={true} + showLineMarks={false} sizeDomain={Array []} sizeRange={ Array [ @@ -326,7 +326,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` style={ Object { "pointerEvents": "visiblestroke", - "strokeWidth": 4, + "strokeWidth": 3, } } xDomain={ @@ -506,7 +506,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` style={ Object { "pointerEvents": "visiblestroke", - "strokeWidth": 4, + "strokeWidth": 3, } } xDomain={ @@ -668,7 +668,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` style={ Object { "pointerEvents": "visiblestroke", - "strokeWidth": 4, + "strokeWidth": 3, } } xDomain={ @@ -713,7 +713,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` "pointerEvents": "visiblestroke", "stroke": "white", "strokeDasharray": undefined, - "strokeWidth": 4, + "strokeWidth": 3, } } transform="translate(40,10)" @@ -834,7 +834,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` style={ Object { "pointerEvents": "visiblestroke", - "strokeWidth": 2, + "strokeWidth": 1, } } xDomain={ @@ -1015,7 +1015,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` style={ Object { "pointerEvents": "visiblestroke", - "strokeWidth": 2, + "strokeWidth": 1, } } xDomain={ @@ -1178,7 +1178,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` style={ Object { "pointerEvents": "visiblestroke", - "strokeWidth": 2, + "strokeWidth": 1, } } xDomain={ @@ -1223,7 +1223,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` "pointerEvents": "visiblestroke", "stroke": "#DB1374", "strokeDasharray": undefined, - "strokeWidth": 2, + "strokeWidth": 1, } } transform="translate(40,10)" @@ -1232,7 +1232,117 @@ exports[`EuiLineSeries all props are rendered 1`] = ` - + + - - - + - - - - - - - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - - - - - - - - - - - - - - - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`EuiLineSeries is rendered 1`] = ` - -
- -
- -
- - - + + + + + + + + 0.0 + + + + + + 0.1 + + + + + + 0.2 + + + + + + 0.3 + + + + + + 0.4 + + + + + + 0.5 + + + + + + 0.6 + + + + + + 0.7 + + + + + + 0.8 + + + + + + 0.9 + + + + + + 1.0 + + + + + + + + + + + + - - - - - - - - + > + + + + + + + + + + + 6 + + + + + + 8 + + + + + + 10 + + + + + + 12 + + + + + + 14 + + + + + + + + + + + + + + + + +
+ +
+ +
+ +`; + +exports[`EuiLineSeries is rendered 1`] = ` + +
+ +
+ +
+ + - - - - - - - + } + transform="translate(40,10)" + /> + - + Date: Mon, 2 Jul 2018 16:50:35 +0200 Subject: [PATCH 60/68] Mark as experimental horizontal charts and orientation props --- src-docs/src/views/xy_chart/horizontal.js | 39 +++++++++++++++++++ .../src/views/xy_chart/xy_chart_example.js | 25 ++++++++++++ .../src/views/xy_chart_bar/bar_example.js | 11 ++++-- .../xy_chart_histogram/histogram_example.js | 10 ++++- src/components/xy_chart/series/area_series.js | 24 ++++++++++++ src/components/xy_chart/xy_chart.js | 2 +- 6 files changed, 105 insertions(+), 6 deletions(-) create mode 100644 src-docs/src/views/xy_chart/horizontal.js diff --git a/src-docs/src/views/xy_chart/horizontal.js b/src-docs/src/views/xy_chart/horizontal.js new file mode 100644 index 000000000000..27e7dcdf87a3 --- /dev/null +++ b/src-docs/src/views/xy_chart/horizontal.js @@ -0,0 +1,39 @@ +import React from 'react'; + +import { + EuiXYChart, + EuiAreaSeries, + EuiLineSeries, + EuiXYChartUtils, +} from '../../../../src/components'; +const { ORIENTATION } = EuiXYChartUtils; + +const data = new Array(80).fill(0).map((d, i) => { + const data = { + y: i, + y0: i, + x: Number((Math.random() * 4 +4).toFixed(2)), + x0: 0, + } + return data +}); + +export default function() { + return ( + + + + + ); +}; diff --git a/src-docs/src/views/xy_chart/xy_chart_example.js b/src-docs/src/views/xy_chart/xy_chart_example.js index 72bebc96c362..850432ebba3e 100644 --- a/src-docs/src/views/xy_chart/xy_chart_example.js +++ b/src-docs/src/views/xy_chart/xy_chart_example.js @@ -108,5 +108,30 @@ export const XYChartExample = {
), }, + // TODO include the following example when AreasSeries PR (create vertical areachart) + // will be merged into react-vis and orientation prop semantic will be solved. + // { + // title: 'Horizontal chart', + // text: ( + //
+ //

If just displaying values is enough, then you can let the chart auto label axis

+ //
+ // ), + // source: [ + // { + // type: GuideSectionTypes.JS, + // code: require('!!raw-loader!./horizontal'), + // }, + // { + // type: GuideSectionTypes.HTML, + // code: 'This component can only be used from React', + // }, + // ], + // demo: ( + //
+ // + //
+ // ), + // }, ], }; diff --git a/src-docs/src/views/xy_chart_bar/bar_example.js b/src-docs/src/views/xy_chart_bar/bar_example.js index 00686b0fe2b1..0e37c929d60a 100644 --- a/src-docs/src/views/xy_chart_bar/bar_example.js +++ b/src-docs/src/views/xy_chart_bar/bar_example.js @@ -6,7 +6,7 @@ import StackedVerticalBarSeriesExample from './stacked_vertical_bar_series'; import StackedHorizontalBarSeriesExample from './stacked_horizontal_bar_series'; import TimeSeriesExample from './time_series'; -import { EuiCallOut, EuiSpacer, EuiLink, EuiCode, EuiBarSeries } from '../../../../src/components'; +import { EuiBadge, EuiCallOut, EuiSpacer, EuiLink, EuiCode, EuiBarSeries } from '../../../../src/components'; export const XYChartBarExample = { title: 'Bar charts', @@ -106,7 +106,9 @@ export const XYChartBarExample = { title: 'Horizontal Bar Chart', text: (

- To display an horizontal bar chart specify orientation="horizontal". + + experimental + To display an horizontal bar chart specify orientation="horizontal". Since you are rotating the chart, you also have to invert x and y values in your data. The y becomes your ordinal/categorial axis and the x becomes your measure/value axis. @@ -129,7 +131,10 @@ export const XYChartBarExample = { title: 'Stacked Horizontal Bar Chart', text: (

- To display an horizontal stacked bar charts specify stackBy="x". + + experimental + To display an horizontal stacked bar charts specify stackBy="x" + together with orientation="horizontal". If stackBy is not specified, bars are clustered together depending on the Y value.

diff --git a/src-docs/src/views/xy_chart_histogram/histogram_example.js b/src-docs/src/views/xy_chart_histogram/histogram_example.js index 5bb0786d85c3..f151e40d0921 100644 --- a/src-docs/src/views/xy_chart_histogram/histogram_example.js +++ b/src-docs/src/views/xy_chart_histogram/histogram_example.js @@ -7,6 +7,7 @@ import StackedHorizontalRectSeriesExample from './stacked_horizontal_rect_series import TimeHistogramSeriesExample from './time_histogram_series'; import { + EuiBadge, EuiSpacer, EuiCode, EuiCallOut, @@ -114,7 +115,9 @@ export const XYChartHistogramExample = { title: 'Horizontal Histogram', text: (

- You can create horizontal histograms specifing orientation="horizontal". + + experimental + You can create horizontal histograms specifing orientation="horizontal". Since you are rotating the histogram, you also have to invert your data.

), @@ -136,7 +139,10 @@ export const XYChartHistogramExample = { text: (

- To display an horizontal stacked histograms specify stackBy="x". + + experimental + To display an horizontal stacked histograms specify stackBy="x" + together with orientation="horizontal".

Date: Mon, 2 Jul 2018 16:51:12 +0200 Subject: [PATCH 61/68] Add Range area chart example --- .../src/views/xy_chart_area/area_example.js | 26 +++++++++++++++++++ .../src/views/xy_chart_area/range_area.js | 13 ++++++++++ 2 files changed, 39 insertions(+) create mode 100644 src-docs/src/views/xy_chart_area/range_area.js diff --git a/src-docs/src/views/xy_chart_area/area_example.js b/src-docs/src/views/xy_chart_area/area_example.js index 9239d0204a2b..2d75bbd58e9f 100644 --- a/src-docs/src/views/xy_chart_area/area_example.js +++ b/src-docs/src/views/xy_chart_area/area_example.js @@ -3,6 +3,7 @@ import { GuideSectionTypes } from '../../components'; import AreaSeriesExample from './area'; import StackedAreaSeriesExample from './stacked_area'; import CurvedAreaExample from './curved_area'; +import RangeAreaExample from './range_area'; import { EuiCode, EuiAreaSeries, EuiLink } from '../../../../src/components'; @@ -93,5 +94,30 @@ export const XYChartAreaExample = {
), }, + { + title: 'Range area chart', + text: ( +

+ Each point in the chart is specified by two y values y0 (lower value) and + y (upper value) to display a range area chart. +

+ ), + props: { EuiAreaSeries }, + source: [ + { + type: GuideSectionTypes.JS, + code: require('!!raw-loader!./range_area'), + }, + { + type: GuideSectionTypes.HTML, + code: 'This component can only be used from React', + }, + ], + demo: ( +
+ +
+ ), + }, ], }; diff --git a/src-docs/src/views/xy_chart_area/range_area.js b/src-docs/src/views/xy_chart_area/range_area.js new file mode 100644 index 000000000000..8de9a4df2ed9 --- /dev/null +++ b/src-docs/src/views/xy_chart_area/range_area.js @@ -0,0 +1,13 @@ +import React from 'react'; + +import { EuiXYChart, EuiAreaSeries, EuiLineSeries } from '../../../../src/components'; + +const LINE_DATA = new Array(100).fill(0).map((d, i) => ({ x: i, y: Math.random() * 2 + 8 })) +const AREA_DATA = LINE_DATA.map(({ x, y })=> ({ x, y0: y - Math.random() - 2, y: y + Math.random() + 2 })) + +export default () => ( + + + + +); From e1f03e562de57aed7418edf8aef0b0b45230b6c0 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 2 Jul 2018 16:52:34 +0200 Subject: [PATCH 62/68] Remove use of orientation specific BarSeries on examples --- src-docs/src/views/xy_chart/complex.js | 5 ++--- src-docs/src/views/xy_chart/crosshair_sync.js | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/xy_chart/complex.js b/src-docs/src/views/xy_chart/complex.js index 42b6f6313f08..6bac4133a62d 100644 --- a/src-docs/src/views/xy_chart/complex.js +++ b/src-docs/src/views/xy_chart/complex.js @@ -5,7 +5,7 @@ import { EuiCodeBlock, EuiSpacer, EuiXYChart, - EuiVerticalBarSeries, + EuiBarSeries, EuiAreaSeries, EuiLineSeries, } from '../../../../src/components'; @@ -58,11 +58,10 @@ export default class ComplexDemo extends Component { /> {barSeries .map((data, index) => ( - ))} diff --git a/src-docs/src/views/xy_chart/crosshair_sync.js b/src-docs/src/views/xy_chart/crosshair_sync.js index e2f10281c7af..445b7bf7bf0c 100644 --- a/src-docs/src/views/xy_chart/crosshair_sync.js +++ b/src-docs/src/views/xy_chart/crosshair_sync.js @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiSpacer, EuiXYChart, EuiVerticalBarSeries } from '../../../../src/components'; +import { EuiSpacer, EuiXYChart, EuiBarSeries } from '../../../../src/components'; // eslint-disable-next-line export class ExampleCrosshair extends React.Component { @@ -19,7 +19,7 @@ export class ExampleCrosshair extends React.Component { width={600} height={200} > - @@ -31,7 +31,7 @@ export class ExampleCrosshair extends React.Component { width={600} height={200} > - From 80c6022533f049166c7ae0d09e0f08ab500c7044 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 2 Jul 2018 17:20:28 +0200 Subject: [PATCH 63/68] Rename tspanWrapper into labelWordWrap --- .../src/views/xy_chart_axis/simple_axis.js | 2 +- src/components/xy_chart/utils/text_utils.js | 38 +++++++++++-------- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src-docs/src/views/xy_chart_axis/simple_axis.js b/src-docs/src/views/xy_chart_axis/simple_axis.js index b511a85b3069..f9e688f343b8 100644 --- a/src-docs/src/views/xy_chart_axis/simple_axis.js +++ b/src-docs/src/views/xy_chart_axis/simple_axis.js @@ -12,7 +12,7 @@ import { const DATA = [{ x: 0, y: 5 }, { x: 1, y: 3 }, { x: 2, y: 2 }, { x: 3, y: 3 }]; function xAxisTickFormatter(value) { - return EuiXYChartTextUtils.tspanTextWrapper(['MY VALUE', value]); + return EuiXYChartTextUtils.labelWordWrap(`Axis value is ${value}`, 10); } export default () => ( diff --git a/src/components/xy_chart/utils/text_utils.js b/src/components/xy_chart/utils/text_utils.js index 520cce7a8201..5e10936206fb 100644 --- a/src/components/xy_chart/utils/text_utils.js +++ b/src/components/xy_chart/utils/text_utils.js @@ -1,26 +1,34 @@ -import React, { Fragment } from 'react' +import React, { Fragment } from 'react'; /** - * Simplified version of tspan wrapper that takes an array of Strings. + * Word wrapper that takes a long text and wrap words into lines of the same length. * and return a SVG component composed by tspan tags. + * source: https://j11y.io/snippets/wordwrap-for-javascript/ * @param {Array of Strings} texts - an array of splitted text, one per line - * @return {Object} Returns an Object to use with dangerouslySetInnerHTML - * with the rendered markdown HTML + * @return {Object} Return a Fragment of SVG tspan elements to be used inside axis label formatter. */ -function tspanTextWrapper(texts) { +function labelWordWrap(text, width) { + const pieces = wordWrap(text, width); return ( - { - texts.map((piece, i) => { - return ( - {piece} - ) - }) - } + {pieces.map((piece, i) => { + return ( + + {piece} + + ); + })} - ) + ); } -export const EuiXYChartTextUtils = { - tspanTextWrapper, +function wordWrap(text, width = 75, cut = false) { + if (!text) { + return text; + } + const regex = '.{1,' + width + '}(s|$)' + (cut ? '|.{' + width + '}|.+$' : '|S+?(s|$)'); + return text.match(RegExp(regex, 'g')); } +export const EuiXYChartTextUtils = { + labelWordWrap, +}; From 960fcf3d93ceac4918514db69b2b01a1538fdf31 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 2 Jul 2018 18:14:07 +0200 Subject: [PATCH 64/68] Add colors props type --- src/components/xy_chart/series/area_series.js | 5 +++-- src/components/xy_chart/series/bar_series.js | 5 +++-- .../xy_chart/series/horizontal_bar_series.js | 5 +++-- .../xy_chart/series/horizontal_rect_series.js | 5 +++-- src/components/xy_chart/series/line_series.js | 4 ++-- .../xy_chart/series/vertical_bar_series.js | 5 +++-- .../xy_chart/series/vertical_rect_series.js | 5 +++-- .../xy_chart/utils/visualization_color_type.js | 16 ++++++++++++++++ 8 files changed, 36 insertions(+), 14 deletions(-) create mode 100644 src/components/xy_chart/utils/visualization_color_type.js diff --git a/src/components/xy_chart/series/area_series.js b/src/components/xy_chart/series/area_series.js index 1f8dcc8bb55b..50a118eb58e6 100644 --- a/src/components/xy_chart/series/area_series.js +++ b/src/components/xy_chart/series/area_series.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { AreaSeries, AbstractSeries } from 'react-vis'; -import { VISUALIZATION_COLORS } from '../../../services'; import { CURVE } from '../utils/chart_utils'; +import { VisualizationColorType } from '../utils/visualization_color_type'; + // TODO: needs to send a PR to react-vis for incorporate these changes into AreaSeries class for vertical // area chart visualizations. // class ExtendedAreaSeries extends AreaSeries { @@ -74,7 +75,7 @@ EuiAreaSeries.propTypes = { }) ).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ - color: PropTypes.oneOf(VISUALIZATION_COLORS), + color: VisualizationColorType, curve: PropTypes.oneOf(Object.values(CURVE)), onSeriesClick: PropTypes.func, onMarkClick: PropTypes.func, diff --git a/src/components/xy_chart/series/bar_series.js b/src/components/xy_chart/series/bar_series.js index 183253700f78..630d4bddf58c 100644 --- a/src/components/xy_chart/series/bar_series.js +++ b/src/components/xy_chart/series/bar_series.js @@ -2,9 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { VerticalBarSeries, HorizontalBarSeries, AbstractSeries } from 'react-vis'; import { ORIENTATION } from '../utils/chart_utils'; -import { VISUALIZATION_COLORS } from '../../../services'; import classNames from 'classnames'; +import { VisualizationColorType } from '../utils/visualization_color_type'; + export class EuiBarSeries extends AbstractSeries { state = { isMouseOverValue: false, @@ -70,7 +71,7 @@ EuiBarSeries.propTypes = { /** * An EUI visualization color, the default value is passed through EuiXYChart */ - color: PropTypes.oneOf(VISUALIZATION_COLORS), + color: VisualizationColorType, /** * @private passed via XYChart */ diff --git a/src/components/xy_chart/series/horizontal_bar_series.js b/src/components/xy_chart/series/horizontal_bar_series.js index 25f0e0256ca7..8175e97ebdb9 100644 --- a/src/components/xy_chart/series/horizontal_bar_series.js +++ b/src/components/xy_chart/series/horizontal_bar_series.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { HorizontalBarSeries } from 'react-vis'; -import { VISUALIZATION_COLORS } from '../../../services'; import classNames from 'classnames'; +import { VisualizationColorType } from '../utils/visualization_color_type'; + export class EuiHorizontalBarSeries extends HorizontalBarSeries { state = { isMouseOverValue: false, @@ -55,7 +56,7 @@ EuiHorizontalBarSeries.propTypes = { ]), })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ - color: PropTypes.oneOf(VISUALIZATION_COLORS), + color: VisualizationColorType, /** Callback when clicking on a single bar */ onValueClick: PropTypes.func }; diff --git a/src/components/xy_chart/series/horizontal_rect_series.js b/src/components/xy_chart/series/horizontal_rect_series.js index cf42b324cffd..e4db8e3f0a9d 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.js +++ b/src/components/xy_chart/series/horizontal_rect_series.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { HorizontalRectSeries } from 'react-vis'; -import { VISUALIZATION_COLORS } from '../../../services'; import classNames from 'classnames'; +import { VisualizationColorType } from '../utils/visualization_color_type'; + export class EuiHorizontalRectSeries extends HorizontalRectSeries { state = { isMouseOverValue: false, @@ -53,7 +54,7 @@ EuiHorizontalRectSeries.propTypes = { y0: PropTypes.number, })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ - color: PropTypes.oneOf(VISUALIZATION_COLORS), + color: VisualizationColorType, /** Callback when clicking on a single bar */ onValueClick: PropTypes.func }; diff --git a/src/components/xy_chart/series/line_series.js b/src/components/xy_chart/series/line_series.js index 6c23338fea87..1f88b1580dab 100644 --- a/src/components/xy_chart/series/line_series.js +++ b/src/components/xy_chart/series/line_series.js @@ -1,8 +1,8 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { LineSeries, MarkSeries, AbstractSeries } from 'react-vis'; -import { VISUALIZATION_COLORS } from '../../../services'; import { CURVE } from '../utils/chart_utils'; +import { VisualizationColorType } from '../utils/visualization_color_type'; export class EuiLineSeries extends AbstractSeries { render() { @@ -83,7 +83,7 @@ EuiLineSeries.propTypes = { ]), })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ - color: PropTypes.oneOf(VISUALIZATION_COLORS), + color: VisualizationColorType, curve: PropTypes.oneOf(Object.values(CURVE)), showLineMarks: PropTypes.bool, lineSize: PropTypes.number, diff --git a/src/components/xy_chart/series/vertical_bar_series.js b/src/components/xy_chart/series/vertical_bar_series.js index a7fee820ced1..6abc88409174 100644 --- a/src/components/xy_chart/series/vertical_bar_series.js +++ b/src/components/xy_chart/series/vertical_bar_series.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { VerticalBarSeries } from 'react-vis'; -import { VISUALIZATION_COLORS } from '../../../services'; import classNames from 'classnames'; +import { VisualizationColorType } from '../utils/visualization_color_type'; + export class EuiVerticalBarSeries extends VerticalBarSeries { state = { isMouseOverValue: false, @@ -55,7 +56,7 @@ EuiVerticalBarSeries.propTypes = { y: PropTypes.number, })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ - color: PropTypes.oneOf(VISUALIZATION_COLORS), + color: VisualizationColorType, /** Callback when clicking on a single bar */ onValueClick: PropTypes.func, }; diff --git a/src/components/xy_chart/series/vertical_rect_series.js b/src/components/xy_chart/series/vertical_rect_series.js index e8fa47be7b4e..474c81c44b9e 100644 --- a/src/components/xy_chart/series/vertical_rect_series.js +++ b/src/components/xy_chart/series/vertical_rect_series.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { VerticalRectSeries } from 'react-vis'; -import { VISUALIZATION_COLORS } from '../../../services'; import classNames from 'classnames'; +import { VisualizationColorType } from '../utils/visualization_color_type'; + export class EuiVerticalRectSeries extends VerticalRectSeries { state = { isMouseOverValue: false, @@ -53,7 +54,7 @@ EuiVerticalRectSeries.propTypes = { y: PropTypes.number, })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ - color: PropTypes.oneOf(VISUALIZATION_COLORS), + color: VisualizationColorType, /** Callback when clicking on a single rect */ onValueClick: PropTypes.func }; diff --git a/src/components/xy_chart/utils/visualization_color_type.js b/src/components/xy_chart/utils/visualization_color_type.js new file mode 100644 index 000000000000..a93b62e19623 --- /dev/null +++ b/src/components/xy_chart/utils/visualization_color_type.js @@ -0,0 +1,16 @@ +import { VISUALIZATION_COLORS } from '../../../services'; + +export function VisualizationColorType(props, propName) { + const color = props[propName]; + if (color === undefined) { + return + } + // TODO upgrade this to check all possible color string formats + // using libs like colorjs + 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())) { + console.warn('Prefer safe EUI Visualization Colors.'); + } +}; From 7e0a120f70728b1a50eaaeb3a209ed155748e113 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 2 Jul 2018 18:22:02 +0200 Subject: [PATCH 65/68] Add color type prop test --- src/components/xy_chart/xy_chart.test.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/xy_chart/xy_chart.test.js b/src/components/xy_chart/xy_chart.test.js index f1bc6909a64d..0dee8a01626f 100644 --- a/src/components/xy_chart/xy_chart.test.js +++ b/src/components/xy_chart/xy_chart.test.js @@ -119,4 +119,19 @@ describe('EuiXYChart', () => { expect(lineComponents.at(2).props().color).toBe(VISUALIZATION_COLORS[1]); 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; + + }); }); From 8693b9ac8150aab7d4ce46156c308313211afe49 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 2 Jul 2018 19:02:17 +0200 Subject: [PATCH 66/68] Update tests with props --- .../__snapshots__/area_series.test.js.snap | 3769 +---------------- .../__snapshots__/line_series.test.js.snap | 13 +- src/components/xy_chart/series/area_series.js | 1 - .../xy_chart/series/area_series.test.js | 38 +- src/components/xy_chart/series/bar_series.js | 5 + .../xy_chart/series/horizontal_bar_series.js | 4 +- .../series/horizontal_bar_series.test.js | 27 +- .../xy_chart/series/horizontal_rect_series.js | 4 +- .../series/horizontal_rect_series.test.js | 27 +- src/components/xy_chart/series/line_series.js | 6 +- .../xy_chart/series/line_series.test.js | 32 +- .../xy_chart/series/vertical_bar_series.js | 4 +- .../series/vertical_bar_series.test.js | 24 +- .../xy_chart/series/vertical_rect_series.js | 4 +- .../series/vertical_rect_series.test.js | 27 +- 15 files changed, 281 insertions(+), 3704 deletions(-) diff --git a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap index 28f6b7ff9f7f..2311523c834e 100644 --- a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap @@ -1,3591 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiAreaSeries all props are rendered 1`] = ` - -
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 0.0 - - - - - - 0.1 - - - - - - 0.2 - - - - - - 0.3 - - - - - - 0.4 - - - - - - 0.5 - - - - - - 0.6 - - - - - - 0.7 - - - - - - 0.8 - - - - - - 0.9 - - - - - - 1.0 - - - - - - - - - - - - - - - - - - - - - - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - - 12 - - - - - - 14 - - - - - - - - - - - - - - - - -
- -
- -
- -`; - -exports[`EuiAreaSeries is rendered 1`] = ` + @@ -5039,7 +1466,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -5123,7 +1550,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -5147,7 +1574,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -5233,7 +1660,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -5257,7 +1684,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -5346,7 +1773,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -5370,7 +1797,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -5477,7 +1904,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -5520,7 +1947,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -5611,7 +2038,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -5655,7 +2082,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -5751,7 +2178,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -6052,7 +2479,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -6136,7 +2563,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -6160,7 +2587,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -6246,7 +2673,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -6270,7 +2697,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -6359,7 +2786,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -6383,7 +2810,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -6490,7 +2917,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -6533,7 +2960,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -6624,7 +3051,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -6668,7 +3095,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -6764,7 +3191,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -6784,7 +3211,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` className="rv-xy-plot__axis__tick" key="0" style={Object {}} - transform="translate(0, 135)" + transform="translate(0, 150)" > - 6 + 5 - 8 + 6 - 10 + 7 - 12 + 8 + + + 9 + + + - 14 + 10 @@ -6923,7 +3374,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -7014,7 +3465,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} @@ -7038,7 +3489,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` }, Object { "x": 1, - "y": 15, + "y": 10, }, ], undefined, @@ -7138,7 +3589,7 @@ exports[`EuiAreaSeries is rendered 1`] = ` yDomain={ Array [ 5, - 15, + 10, ] } yPadding={0} diff --git a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap index af32728a7696..d15df150d926 100644 --- a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap @@ -163,8 +163,8 @@ exports[`EuiLineSeries all props are rendered 1`] = ` marginRight={10} marginTop={10} name="test-chart" - onClick={[Function]} - onMarkClick={[Function]} + onSeriesClick={[Function]} + onValueClick={[Function]} opacityDomain={Array []} opacityType="literal" radiusDomain={Array []} @@ -299,7 +299,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` marginLeft={40} marginRight={10} marginTop={10} - onClick={[Function]} + onSeriesClick={[Function]} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -479,7 +479,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` marginLeft={40} marginRight={10} marginTop={10} - onClick={[Function]} + onSeriesClick={[Function]} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -641,7 +641,7 @@ exports[`EuiLineSeries all props are rendered 1`] = ` marginLeft={40} marginRight={10} marginTop={10} - onClick={[Function]} + onSeriesClick={[Function]} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -807,7 +807,6 @@ exports[`EuiLineSeries all props are rendered 1`] = ` marginLeft={40} marginRight={10} marginTop={10} - onClick={[Function]} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -988,7 +987,6 @@ exports[`EuiLineSeries all props are rendered 1`] = ` marginLeft={40} marginRight={10} marginTop={10} - onClick={[Function]} opacity={1} opacityDomain={Array []} opacityType="literal" @@ -1151,7 +1149,6 @@ exports[`EuiLineSeries all props are rendered 1`] = ` marginLeft={40} marginRight={10} marginTop={10} - onClick={[Function]} opacity={1} opacityDomain={Array []} opacityType="literal" diff --git a/src/components/xy_chart/series/area_series.js b/src/components/xy_chart/series/area_series.js index 50a118eb58e6..d4986137b548 100644 --- a/src/components/xy_chart/series/area_series.js +++ b/src/components/xy_chart/series/area_series.js @@ -78,7 +78,6 @@ EuiAreaSeries.propTypes = { color: VisualizationColorType, curve: PropTypes.oneOf(Object.values(CURVE)), onSeriesClick: PropTypes.func, - onMarkClick: PropTypes.func, }; EuiAreaSeries.defaultProps = { diff --git a/src/components/xy_chart/series/area_series.test.js b/src/components/xy_chart/series/area_series.test.js index 85cb9e3523ba..98fe6d1b1480 100644 --- a/src/components/xy_chart/series/area_series.test.js +++ b/src/components/xy_chart/series/area_series.test.js @@ -5,19 +5,27 @@ import { requiredProps } from '../../../test/required_props'; import { EuiXYChart } from '../xy_chart'; import { EuiAreaSeries } from './area_series'; +import { CURVE } from '../utils/chart_utils'; import { benchmarkFunction } from '../../../test/time_execution'; import { VISUALIZATION_COLORS } from '../../../services'; beforeEach(patchRandom); afterEach(unpatchRandom); +const AREA_SERIES_PROPS = { + name: 'name', + data: [{ x: 0, y: 5 }, { x: 1, y: 10 }], + color: VISUALIZATION_COLORS[0], + curve: CURVE.NATURAL, + onSeriesClick: jest.fn(), +}; + describe('EuiAreaSeries', () => { - test('is rendered', () => { + test('all props are rendered', () => { const component = mount( ); @@ -25,24 +33,24 @@ describe('EuiAreaSeries', () => { expect(component).toMatchSnapshot(); }); - test('all props are rendered', () => { + test('call onSeriesClick', () => { + const data = [{ x: 0, y: 5 }, { x: 1, y: 3 }]; + const onSeriesClick = jest.fn(); const component = mount( - + {}} - onMarkClick={() => {}} + onSeriesClick={onSeriesClick} /> ); - - expect(component).toMatchSnapshot(); + component.find('path').at(0).simulate('click'); + expect(onSeriesClick.mock.calls).toHaveLength(1); }); describe('performance', () => { diff --git a/src/components/xy_chart/series/bar_series.js b/src/components/xy_chart/series/bar_series.js index 630d4bddf58c..c33a5c24c2b1 100644 --- a/src/components/xy_chart/series/bar_series.js +++ b/src/components/xy_chart/series/bar_series.js @@ -76,6 +76,11 @@ EuiBarSeries.propTypes = { * @private passed via XYChart */ // _orientation: PropTypes.string, + + /** + * Callback when clicking on a bar. Returns { x, y } object. + */ + onValueClick: PropTypes.func, }; EuiBarSeries.defaultProps = {}; diff --git a/src/components/xy_chart/series/horizontal_bar_series.js b/src/components/xy_chart/series/horizontal_bar_series.js index 8175e97ebdb9..a52702d0cb0f 100644 --- a/src/components/xy_chart/series/horizontal_bar_series.js +++ b/src/components/xy_chart/series/horizontal_bar_series.js @@ -57,7 +57,9 @@ EuiHorizontalBarSeries.propTypes = { })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: VisualizationColorType, - /** Callback when clicking on a single bar */ + /** + * Callback when clicking on a bar. Returns { x, y } object. + */ onValueClick: PropTypes.func }; diff --git a/src/components/xy_chart/series/horizontal_bar_series.test.js b/src/components/xy_chart/series/horizontal_bar_series.test.js index 839580b4893b..c19b6e9e65c4 100644 --- a/src/components/xy_chart/series/horizontal_bar_series.test.js +++ b/src/components/xy_chart/series/horizontal_bar_series.test.js @@ -41,6 +41,27 @@ describe('EuiHorizontalBarSeries', () => { expect(component.render()).toMatchSnapshot(); }); + test('call onValueClick', () => { + const data = [{ x: 0, y: 5 }, { x: 1, y: 3 }]; + const onValueClick = jest.fn(); + const component = mount( + + + + ); + component.find('rect').at(0).simulate('click'); + expect(onValueClick.mock.calls).toHaveLength(1); + expect(onValueClick.mock.calls[0][0]).toEqual(data[0]); + }); + test('all props are rendered', () => { const component = render( @@ -48,7 +69,7 @@ describe('EuiHorizontalBarSeries', () => { name="test-chart" data={[{ x: 0, y: 5 }, { x: 1, y: 15 }]} color={VISUALIZATION_COLORS[2]} - onClick={() => {}} + onSeriesClick={() => {}} /> ); @@ -68,13 +89,13 @@ describe('EuiHorizontalBarSeries', () => { name="test-series-a" data={[{ x: 0, y: 5 }, { x: 1, y: 3 }]} color={VISUALIZATION_COLORS[2]} - onClick={() => {}} + onSeriesClick={() => {}} /> {}} + onSeriesClick={() => {}} /> ); diff --git a/src/components/xy_chart/series/horizontal_rect_series.js b/src/components/xy_chart/series/horizontal_rect_series.js index e4db8e3f0a9d..237a7ea27da7 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.js +++ b/src/components/xy_chart/series/horizontal_rect_series.js @@ -55,7 +55,9 @@ EuiHorizontalRectSeries.propTypes = { })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: VisualizationColorType, - /** Callback when clicking on a single bar */ + /** + * Callback when clicking on a bar. Returns { x, y } object. + */ onValueClick: PropTypes.func }; diff --git a/src/components/xy_chart/series/horizontal_rect_series.test.js b/src/components/xy_chart/series/horizontal_rect_series.test.js index 0d74a3301c6d..2e8389748d4b 100644 --- a/src/components/xy_chart/series/horizontal_rect_series.test.js +++ b/src/components/xy_chart/series/horizontal_rect_series.test.js @@ -48,7 +48,7 @@ describe('EuiHorizontalRectSeries', () => { name="test-chart" data={[{ x: 0, y: 5 }, { x: 1, y: 15 }]} color={VISUALIZATION_COLORS[2]} - onClick={() => {}} + onSeriesClick={() => {}} /> ); @@ -56,6 +56,27 @@ describe('EuiHorizontalRectSeries', () => { expect(component).toMatchSnapshot(); }); + test('call onValueClick', () => { + const data = [{ x: 0, y: 5 }, { x: 1, y: 3 }]; + const onValueClick = jest.fn(); + const component = mount( + + + + ); + component.find('rect').at(0).simulate('click'); + expect(onValueClick.mock.calls).toHaveLength(1); + expect(onValueClick.mock.calls[0][0]).toEqual(data[0]); + }); + test('renders stacked bar chart', () => { const component = render( { name="test-series-a" data={[{ x: 0, y: 5 }, { x: 1, y: 3 }]} color={VISUALIZATION_COLORS[2]} - onClick={() => {}} + onSeriesClick={() => {}} /> {}} + onSeriesClick={() => {}} /> ); diff --git a/src/components/xy_chart/series/line_series.js b/src/components/xy_chart/series/line_series.js index 1f88b1580dab..fff016674beb 100644 --- a/src/components/xy_chart/series/line_series.js +++ b/src/components/xy_chart/series/line_series.js @@ -11,7 +11,7 @@ export class EuiLineSeries extends AbstractSeries { name, curve, onSeriesClick, - onMarkClick, + onValueClick, showLineMarks, lineSize, lineMarkColor, @@ -57,7 +57,7 @@ export class EuiLineSeries extends AbstractSeries { size={lineMarkSize} stroke={'white'} opacity={1} - onSeriesClick={onMarkClick || onSeriesClick} + onValueClick={onValueClick} strokeWidth={2} /> )} @@ -90,7 +90,7 @@ EuiLineSeries.propTypes = { lineMarkColor: PropTypes.string, lineMarkSize: PropTypes.number, onSeriesClick: PropTypes.func, - onMarkClick: PropTypes.func + onValueClick: PropTypes.func }; EuiLineSeries.defaultProps = { diff --git a/src/components/xy_chart/series/line_series.test.js b/src/components/xy_chart/series/line_series.test.js index fd43a81014a0..104725cf33d5 100644 --- a/src/components/xy_chart/series/line_series.test.js +++ b/src/components/xy_chart/series/line_series.test.js @@ -36,8 +36,8 @@ describe('EuiLineSeries', () => { hasLineMarks={true} lineMarkColor="#00ff00" lineMarkSize={13} - onClick={() => {}} - onMarkClick={() => {}} + onSeriesClick={() => {}} + onValueClick={() => {}} /> ); @@ -45,6 +45,34 @@ describe('EuiLineSeries', () => { expect(component).toMatchSnapshot(); }); + test('call onValueClick and onSeriesClick', () => { + const data = [{ x: 0, y: 5 }, { x: 1, y: 3 }]; + const onValueClick = jest.fn(); + const onSeriesClick = jest.fn(); + const component = mount( + + + + ); + component.find('path').at(0).simulate('click'); + expect(onSeriesClick.mock.calls).toHaveLength(1); + component.find('circle').at(0).simulate('click'); + expect(onValueClick.mock.calls).toHaveLength(1); + expect(onValueClick.mock.calls[0][0]).toEqual(data[0]); + // check if onSeriesClick is fired after clicking on marker + expect(onSeriesClick.mock.calls).toHaveLength(1); + }); + describe('performance', () => { it.skip('renders 1000 items in under 1 second', () => { diff --git a/src/components/xy_chart/series/vertical_bar_series.js b/src/components/xy_chart/series/vertical_bar_series.js index 6abc88409174..1bfefae7d773 100644 --- a/src/components/xy_chart/series/vertical_bar_series.js +++ b/src/components/xy_chart/series/vertical_bar_series.js @@ -57,7 +57,9 @@ EuiVerticalBarSeries.propTypes = { })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: VisualizationColorType, - /** Callback when clicking on a single bar */ + /** + * Callback when clicking on a bar. Returns { x, y } object. + */ onValueClick: PropTypes.func, }; diff --git a/src/components/xy_chart/series/vertical_bar_series.test.js b/src/components/xy_chart/series/vertical_bar_series.test.js index a39f17eb8772..1d20aa954b55 100644 --- a/src/components/xy_chart/series/vertical_bar_series.test.js +++ b/src/components/xy_chart/series/vertical_bar_series.test.js @@ -49,7 +49,7 @@ describe('EuiVerticalBarSeries', () => { name="test-chart" data={[{ x: 0, y: 5 }, { x: 1, y: 15 }]} color={VISUALIZATION_COLORS[2]} - onClick={() => {}} + onValueClick={() => {}} /> ); @@ -69,13 +69,11 @@ describe('EuiVerticalBarSeries', () => { name="test-series-a" data={[{ x: 0, y: 5 }, { x: 1, y: 3 }]} color={VISUALIZATION_COLORS[2]} - onClick={() => {}} /> {}} /> ); @@ -83,6 +81,26 @@ describe('EuiVerticalBarSeries', () => { expect(component.find('.rv-xy-plot__series--bar rect')).toHaveLength(4); expect(component).toMatchSnapshot(); }); + test('call onValueClick', () => { + const data = [{ x: 0, y: 5 }, { x: 1, y: 3 }]; + const onValueClick = jest.fn(); + const component = mount( + + + + ); + component.find('rect').at(0).simulate('click'); + expect(onValueClick.mock.calls).toHaveLength(1); + expect(onValueClick.mock.calls[0][0]).toEqual(data[0]); + }); describe.skip('performance', () => { it('renders 1000 items in under 0.5 seconds', () => { diff --git a/src/components/xy_chart/series/vertical_rect_series.js b/src/components/xy_chart/series/vertical_rect_series.js index 474c81c44b9e..b1bc0e392a0b 100644 --- a/src/components/xy_chart/series/vertical_rect_series.js +++ b/src/components/xy_chart/series/vertical_rect_series.js @@ -55,7 +55,9 @@ EuiVerticalRectSeries.propTypes = { })).isRequired, /** An EUI visualization color, the default value is enforced by EuiXYChart */ color: VisualizationColorType, - /** Callback when clicking on a single rect */ + /** + * Callback when clicking on a bar. Returns { x, y } object. + */ onValueClick: PropTypes.func }; diff --git a/src/components/xy_chart/series/vertical_rect_series.test.js b/src/components/xy_chart/series/vertical_rect_series.test.js index 2821e427f079..466043a1ca68 100644 --- a/src/components/xy_chart/series/vertical_rect_series.test.js +++ b/src/components/xy_chart/series/vertical_rect_series.test.js @@ -49,7 +49,7 @@ describe('EuiVerticalRectSeries', () => { name="test-chart" data={[{ x: 0, y: 5 }, { x: 1, y: 15 }]} color={VISUALIZATION_COLORS[2]} - onClick={() => {}} + onSeriesClick={() => {}} /> ); @@ -57,6 +57,27 @@ describe('EuiVerticalRectSeries', () => { expect(component).toMatchSnapshot(); }); + test('call onValueClick', () => { + const data = [{ x: 0, y: 5 }, { x: 1, y: 3 }]; + const onValueClick = jest.fn(); + const component = mount( + + + + ); + component.find('rect').at(0).simulate('click'); + expect(onValueClick.mock.calls).toHaveLength(1); + expect(onValueClick.mock.calls[0][0]).toEqual(data[0]); + }); + test('renders stacked vertical histogram', () => { const component = render( { name="test-series-a" data={[{ x: 0, y: 5 }, { x: 1, y: 3 }]} color={VISUALIZATION_COLORS[2]} - onClick={() => {}} + onValueClick={() => {}} /> {}} + onValueClick={() => {}} /> ); From 7e4b4bf14c0c1cdc8ae537537d185a43810406ef Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 2 Jul 2018 19:21:18 +0200 Subject: [PATCH 67/68] Add onValueClick props to histogram --- src/components/xy_chart/series/histogram_series.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/xy_chart/series/histogram_series.js b/src/components/xy_chart/series/histogram_series.js index 6a9521620cc0..a39f594403c9 100644 --- a/src/components/xy_chart/series/histogram_series.js +++ b/src/components/xy_chart/series/histogram_series.js @@ -70,6 +70,11 @@ EuiHistogramSeries.propTypes = { * @private passed via XYChart */ // _orientation: PropTypes.string, + /** + * Callback when clicking on a bar. Returns { x, y } object. + */ + onValueClick: PropTypes.func, + }; EuiHistogramSeries.defaultProps = {}; From ece087520daf6a25aabe5bf805f03513ffe63270 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 3 Jul 2018 17:40:45 +0200 Subject: [PATCH 68/68] Add series names to crosshair --- .../src/views/xy_chart_bar/time_series.js | 4 +-- .../xy_chart/crosshairs/crosshair_x.js | 31 ++++++++++++++----- .../xy_chart/crosshairs/crosshair_x.test.js | 2 +- .../xy_chart/crosshairs/crosshair_y.js | 26 +++++++++++++--- .../xy_chart/crosshairs/crosshair_y.test.js | 2 +- .../__snapshots__/area_series.test.js.snap | 10 ++++++ .../__snapshots__/line_series.test.js.snap | 20 ++++++++++++ src/components/xy_chart/xy_chart.js | 9 ++++-- 8 files changed, 86 insertions(+), 18 deletions(-) diff --git a/src-docs/src/views/xy_chart_bar/time_series.js b/src-docs/src/views/xy_chart_bar/time_series.js index 189647fc33b9..2b13f1defdcb 100644 --- a/src-docs/src/views/xy_chart_bar/time_series.js +++ b/src-docs/src/views/xy_chart_bar/time_series.js @@ -48,10 +48,10 @@ export default class Example extends Component { {data.map((d, i) => ( - + ))} {data.map((d, i) => ( - + ))} diff --git a/src/components/xy_chart/crosshairs/crosshair_x.js b/src/components/xy_chart/crosshairs/crosshair_x.js index 1884fdcd1a87..3a8671dc7a08 100644 --- a/src/components/xy_chart/crosshairs/crosshair_x.js +++ b/src/components/xy_chart/crosshairs/crosshair_x.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { AbstractSeries, Crosshair } from 'react-vis'; - +import { SCALE } from '../utils/chart_utils'; /** * The Crosshair used by the XYChart as main tooltip mechanism along X axis (vertical). */ @@ -54,13 +54,22 @@ export class EuiCrosshairX extends AbstractSeries { }) } + _formatXValue = (x) => { + const { xType } = this.props; + if (xType === SCALE.TIME || xType === SCALE.TIME_UTC) { + return new Date(x).toISOString(); // TODO add a props for time formatting + } else { + return x + } + } + _titleFormat = (dataPoints = []) => { if (dataPoints.length > 0) { - const [ firstDataPoint ] = dataPoints - const { originalValues } = firstDataPoint + const [ firstDataPoint ] = dataPoints; + const { originalValues } = firstDataPoint; const value = (typeof originalValues.x0 === 'number') - ? `${originalValues.x0} to ${originalValues.x}` - : originalValues.x; + ? `${this._formatXValue(originalValues.x0)} to ${this._formatXValue(originalValues.x)}` + : this._formatXValue(originalValues.x); return { title: 'X Value', value, @@ -69,9 +78,11 @@ export class EuiCrosshairX extends AbstractSeries { } _itemsFormat = (dataPoints) => { + const { seriesNames } = this.props; + return dataPoints.map(d => { return { - title: `series ${d.seriesIndex}`, // TODO specify series title or default one + title: seriesNames[d.seriesIndex], value: d.y, }; }); @@ -179,10 +190,16 @@ export class EuiCrosshairX extends AbstractSeries { EuiCrosshairX.displayName = 'EuiCrosshairX'; EuiCrosshairX.propTypes = { - /** The crosshair value used to display this crosshair (doesn't depend on mouse position) */ + /** + * The crosshair value used to display this crosshair (doesn't depend on mouse position) + */ crosshairValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + /** + * The ordered array of series names + */ + seriesNames: PropTypes.arrayOf(PropTypes.string).isRequired, } EuiCrosshairX.defaultProps = {}; diff --git a/src/components/xy_chart/crosshairs/crosshair_x.test.js b/src/components/xy_chart/crosshairs/crosshair_x.test.js index 247b2d0e29c5..6be14ccd6213 100644 --- a/src/components/xy_chart/crosshairs/crosshair_x.test.js +++ b/src/components/xy_chart/crosshairs/crosshair_x.test.js @@ -17,7 +17,7 @@ describe('EuiCrosshairX', () => { showCrosshair={false} {...requiredProps} > - + ); diff --git a/src/components/xy_chart/crosshairs/crosshair_y.js b/src/components/xy_chart/crosshairs/crosshair_y.js index 7643f669c7c3..ab7354d3686c 100644 --- a/src/components/xy_chart/crosshairs/crosshair_y.js +++ b/src/components/xy_chart/crosshairs/crosshair_y.js @@ -18,10 +18,11 @@ */ // Copyright (c) 2016 - 2017 Uber Technologies, Inc. -// + import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { AbstractSeries, ScaleUtils } from 'react-vis'; +import { SCALE } from '../utils/chart_utils'; /** * Format title by detault. @@ -235,14 +236,22 @@ export class EuiCrosshairY extends AbstractSeries { values: [] }) } + _formatYValue = (y) => { + const { yType } = this.props; + if ( yType === SCALE.TIME || yType === SCALE.TIME_UTC) { + return new Date(y).toISOString(); // TODO add a props for time formatting + } else { + return y + } + } _titleFormat = (dataPoints = []) => { if (dataPoints.length > 0) { const [ firstDataPoint ] = dataPoints const { originalValues } = firstDataPoint const value = (typeof originalValues.y0 === 'number') - ? `${originalValues.y0} to ${originalValues.y}` - : originalValues.y; + ? `${this._formatYValue(originalValues.y0)} to ${this._formatYValue(originalValues.y)}` + : this._formatYValue(originalValues.y); return { title: 'Y Value', value, @@ -251,9 +260,10 @@ export class EuiCrosshairY extends AbstractSeries { } _itemsFormat = (dataPoints) => { + const { seriesNames } = this.props; return dataPoints.map(d => { return { - title: `series ${d.seriesIndex}`, // TODO specify series title or default one + title: seriesNames[d.seriesIndex], value: d.x, }; }); @@ -361,10 +371,16 @@ export class EuiCrosshairY extends AbstractSeries { EuiCrosshairY.displayName = 'EuiCrosshairY'; EuiCrosshairY.propTypes = { - /** The crosshair value used to display this crosshair (doesn't depend on mouse position) */ + /** + * The crosshair value used to display this crosshair (doesn't depend on mouse position) + */ crosshairValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + /** + * The ordered array of series names + */ + seriesNames: PropTypes.arrayOf(PropTypes.string).isRequired, } EuiCrosshairY.defaultProps = {}; diff --git a/src/components/xy_chart/crosshairs/crosshair_y.test.js b/src/components/xy_chart/crosshairs/crosshair_y.test.js index 2babd7f1f7a5..0b74298bdb33 100644 --- a/src/components/xy_chart/crosshairs/crosshair_y.test.js +++ b/src/components/xy_chart/crosshairs/crosshair_y.test.js @@ -18,7 +18,7 @@ describe('EuiCrosshairY', () => { showCrosshair={false} {...requiredProps} > - + ); diff --git a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap index 2311523c834e..35737f402a1f 100644 --- a/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/area_series.test.js.snap @@ -3434,6 +3434,11 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={1} + seriesNames={ + Array [ + "name", + ] + } sizeDomain={Array []} sizeRange={ Array [ @@ -3549,6 +3554,11 @@ exports[`EuiAreaSeries all props are rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={1} + seriesNames={ + Array [ + "name", + ] + } sizeDomain={Array []} sizeRange={ Array [ diff --git a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap index d15df150d926..724bbed719ec 100644 --- a/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap +++ b/src/components/xy_chart/series/__snapshots__/line_series.test.js.snap @@ -3910,6 +3910,11 @@ exports[`EuiLineSeries all props are rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={1} + seriesNames={ + Array [ + "test-chart", + ] + } sizeDomain={Array []} sizeRange={ Array [ @@ -4025,6 +4030,11 @@ exports[`EuiLineSeries all props are rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={1} + seriesNames={ + Array [ + "test-chart", + ] + } sizeDomain={Array []} sizeRange={ Array [ @@ -7992,6 +8002,11 @@ exports[`EuiLineSeries is rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={1} + seriesNames={ + Array [ + "test", + ] + } sizeDomain={Array []} sizeRange={ Array [ @@ -8107,6 +8122,11 @@ exports[`EuiLineSeries is rendered 1`] = ` sameTypeIndex={0} sameTypeTotal={1} seriesIndex={1} + seriesNames={ + Array [ + "test", + ] + } sizeDomain={Array []} sizeRange={ Array [ diff --git a/src/components/xy_chart/xy_chart.js b/src/components/xy_chart/xy_chart.js index bbe6eb8a3a0b..a01288e400f4 100644 --- a/src/components/xy_chart/xy_chart.js +++ b/src/components/xy_chart/xy_chart.js @@ -182,6 +182,11 @@ class XYChart extends PureComponent { return React.cloneElement(child, props); }); } + _getSeriesNames = (children) => { + return React.Children.toArray(children) + .filter(this._isAbstractSeries) + .map(({ props: { name } }) => (name)); + } render() { const { @@ -223,7 +228,7 @@ class XYChart extends PureComponent { } const Crosshair = orientation === HORIZONTAL ? EuiCrosshairY : EuiCrosshairX; - + const seriesNames = this._getSeriesNames(children); return (
} {showCrosshair && ( - + )} {enableSelectionBrush && (