diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d21b32eb427..e82551219148 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,15 +1,28 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `EuiSuggestItem` component ([#2090](https://github.com/elastic/eui/pull/2090)) +- Added support for negated or clauses to `EuiSearchBar` ([#2140](https://github.com/elastic/eui/pull/2140)) +- Added `transition` utility services to help create timeouts that account for CSS transition durations and delays ([#2136](https://github.com/elastic/eui/pull/2136)) + **Bug fixes** +- Fixed `EuiComboBox`'s padding on the right ([#2135](https://github.com/elastic/eui/pull/2135)) +- Fixed `EuiAccordion` to correctly account for changing computed height of child elements ([#2136](https://github.com/elastic/eui/pull/2136)) - Fixed some `EuiFlyout` sizing ([#2125](https://github.com/elastic/eui/pull/2125)) +**Breaking changes** + +- Removed `EuiSeriesChart` and related components. Please look to [Elastic Charts](https://github.com/elastic/elastic-charts) for a replacement. ([#2135](https://github.com/elastic/eui/pull/2108)) +- Removed `eui_k6_theme` related Sass and JSON files ([#2135](https://github.com/elastic/eui/pull/2108)) +- Removed no longer used Sass mixins and variables in `EuiForm`, `EuiCallOut`, and `EuiRange` components ([#2135](https://github.com/elastic/eui/pull/2108)) + ## [`12.4.0`](https://github.com/elastic/eui/tree/v12.4.0) - Centered the square of the `popout` glyph in the artboard ([#2120](https://github.com/elastic/eui/pull/2120)) - Added `useInnerText` and `EuiInnerText` component utilities for retrieving text content of elements ([#2100](https://github.com/elastic/eui/pull/2100)) - Converted `EuiRangeHightlight`, `EuiRangeLabel`, `EuiRangeLevels`, `EuiRangeSlider`, `EuiRangeThumb`, `EuiRangeTicks`, `EuiRangeTrack`, and `EuiRangeWrapper` to TypeScript ([#2124](https://github.com/elastic/eui/pull/2124)) - Converted `EuiAccordion` to TypeScript ([#2128](https://github.com/elastic/eui/pull/2128)) +- Exported `prettyDuration` and `commonDurationRanges` for pretty printing date ranges outside `EuiSuperDatePicker` ([#2132](https://github.com/elastic/eui/pull/2132)) **Bug fixes** @@ -51,6 +64,14 @@ - Removed `logoXpack`from `EuiIcon` types ([#2111](https://github.com/elastic/eui/pull/2111)) +## [`12.2.1`](https://github.com/elastic/eui/tree/v12.2.1) + +**Note: this release is a backport containing changes originally made in `12.4.0`** + +**Bug fixes** + +- Fixed a nearly infinite `requestAnimationFrame` loop caused by `focus` state changes in nested `EuiPopover` components ([#2110](https://github.com/elastic/eui/pull/2110)) + ## [`12.2.0`](https://github.com/elastic/eui/tree/v12.2.0) - Made `aria-label` attribute equal to `title` of the the selection checkbox in table items (for each row) in `EuiBasicTable` ([#2043](https://github.com/elastic/eui/pull/2043)) diff --git a/package.json b/package.json index 8b9bc85d960f..f21820140f6e 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,6 @@ "react-input-autosize": "^2.2.1", "react-is": "~16.3.0", "react-virtualized": "^9.18.5", - "react-vis": "1.10.2", "resize-observer-polyfill": "^1.5.0", "tabbable": "^1.1.0", "uuid": "^3.1.0" diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js index eb8d9aed0874..a790afb330e6 100644 --- a/src-docs/src/components/guide_section/guide_section.js +++ b/src-docs/src/components/guide_section/guide_section.js @@ -372,10 +372,6 @@ export class GuideSection extends Component { /(from )'(..\/)+src\/services(\/?';)/, "from '@elastic/eui/lib/services';" ) - .replace( - /(from )'(..\/)+src\/experimental(\/?';)/, - "from '@elastic/eui/lib/experimental';" - ) .replace(/(from )'(..\/)+src\/components\/.*?';/, "from '@elastic/eui';"); return ( diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js index edf5b2752c84..1daf8058f15d 100644 --- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js +++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js @@ -16,14 +16,6 @@ export class GuideThemeSelector extends Component { text: 'Dark', value: 'dark', }, - { - text: 'K6', - value: 'k6', - }, - { - text: 'K6 dark', - value: 'k6_dark', - }, ]; this.state = { diff --git a/src-docs/src/index.js b/src-docs/src/index.js index b2d80f529435..3d2ce04c2890 100644 --- a/src-docs/src/index.js +++ b/src-docs/src/index.js @@ -15,17 +15,11 @@ import { registerTheme } from './services'; import Routes from './routes'; import themeLight from './theme_light.scss'; import themeDark from './theme_dark.scss'; -import themeK6Light from './theme_k6_light.scss'; -import themeK6Dark from './theme_k6_dark.scss'; registerTheme('light', [themeLight]); registerTheme('dark', [themeDark]); -registerTheme('k6', [themeK6Light]); - -registerTheme('k6_dark', [themeK6Dark]); - // Set up app const store = configureStore(); diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 1cb118d3e5e1..f3c8c27dfbc3 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -29,6 +29,8 @@ import { ColorPaletteExample } from './views/color_palette/color_palette_example import { IsColorDarkExample } from './views/is_color_dark/is_color_dark_example'; +import { PrettyDurationExample } from './views/pretty_duration/pretty_duration_example'; + import { UtilityClassesExample } from './views/utility_classes/utility_classes_example'; // Component examples @@ -158,6 +160,8 @@ import { StatExample } from './views/stat/stat_example'; import { StepsExample } from './views/steps/steps_example'; +// import { SuggestExample } from './views/suggest/suggest_example'; + import { TableExample } from './views/tables/tables_example'; import { TabsExample } from './views/tabs/tabs_example'; @@ -174,18 +178,6 @@ import { ToggleExample } from './views/toggle/toggle_example'; import { WindowEventExample } from './views/window_event/window_event_example'; -import { XYChartExample } from './views/series_chart/series_chart_example'; - -import { XYChartAxisExample } from './views/series_chart_axis/series_axis_example'; - -import { XYChartBarExample } from './views/series_chart_bar/bar_example'; - -import { XYChartHistogramExample } from './views/series_chart_histogram/histogram_example'; - -import { XYChartAreaExample } from './views/series_chart_area/area_example'; - -import { XYChartLineExample } from './views/series_chart_line/line_example'; - import { Changelog } from './views/package/changelog'; import { I18nTokens } from './views/package/i18n_tokens'; @@ -347,17 +339,7 @@ const navigation = [ RangeControlExample, SearchBarExample, SelectableExample, - ].map(example => createExample(example)), - }, - { - name: 'Charts (deprecated)', - items: [ - XYChartExample, - XYChartAxisExample, - XYChartLineExample, - XYChartAreaExample, - XYChartBarExample, - XYChartHistogramExample, + // SuggestExample, ].map(example => createExample(example)), }, { @@ -376,6 +358,7 @@ const navigation = [ InnerTextExample, I18nExample, IsColorDarkExample, + PrettyDurationExample, MutationObserverExample, OutsideClickDetectorExample, PortalExample, diff --git a/src-docs/src/theme_k6_dark.scss b/src-docs/src/theme_k6_dark.scss deleted file mode 100644 index 99e708a00f1b..000000000000 --- a/src-docs/src/theme_k6_dark.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import '../../src/theme_k6_dark'; -@import './components/guide_components'; -@import './views/header/global_filter_group'; diff --git a/src-docs/src/theme_k6_light.scss b/src-docs/src/theme_k6_light.scss deleted file mode 100644 index 544617f335da..000000000000 --- a/src-docs/src/theme_k6_light.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import '../../src/theme_k6_light'; -@import './components/guide_components'; -@import './views/header/global_filter_group'; diff --git a/src-docs/src/views/accordion/accordion_multiple.js b/src-docs/src/views/accordion/accordion_multiple.js index b43246cda476..23890a99b82b 100644 --- a/src-docs/src/views/accordion/accordion_multiple.js +++ b/src-docs/src/views/accordion/accordion_multiple.js @@ -30,5 +30,31 @@ export default () => (

The content inside can be of any height.

+ + + + + +

+ This content area will grow to accomodate when the accordion below + opens +

+ + + + +

The content inside can be of any height.

+

The content inside can be of any height.

+

The content inside can be of any height.

+

The content inside can be of any height.

+

The content inside can be of any height.

+

The content inside can be of any height.

+ + + + ); diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js index 61b63648da86..275e99c1390a 100644 --- a/src-docs/src/views/card/card.js +++ b/src-docs/src/views/card/card.js @@ -7,7 +7,7 @@ import { EuiFlexItem, } from '../../../../src/components'; -const icons = ['Beats', 'Cloud', 'Xpack', 'Kibana']; +const icons = ['Beats', 'Cloud', 'Logging', 'Kibana']; const cardNodes = icons.map(function(item, index) { return ( diff --git a/src-docs/src/views/color_palette/color_palette_example.js b/src-docs/src/views/color_palette/color_palette_example.js index cfa0bc72494c..6084e66f22f1 100644 --- a/src-docs/src/views/color_palette/color_palette_example.js +++ b/src-docs/src/views/color_palette/color_palette_example.js @@ -14,10 +14,6 @@ import ColorPaletteCustom from './color_palette_custom'; const colorPaletteCustomSource = require('!!raw-loader!./color_palette_custom'); const colorPaletteCustomHtml = renderToHtml(ColorPaletteCustom); -import ColorPaletteHistogram from './color_palette_histogram'; -const colorPaletteHistogramSource = require('!!raw-loader!./color_palette_histogram'); -const colorPaletteHistogramHtml = renderToHtml(ColorPaletteHistogram); - export const ColorPaletteExample = { title: 'Color Palettes', sections: [ @@ -83,26 +79,5 @@ export const ColorPaletteExample = { ), demo: , }, - { - title: 'Usage examples', - source: [ - { - type: GuideSectionTypes.JS, - code: colorPaletteHistogramSource, - }, - { - type: GuideSectionTypes.HTML, - code: colorPaletteHistogramHtml, - }, - ], - text: ( -

- Apply the colors from eui_palettes.js or the{' '} - colorPalette - service to the color prop of EUI chart components. -

- ), - demo: , - }, ], }; diff --git a/src-docs/src/views/color_palette/color_palette_histogram.js b/src-docs/src/views/color_palette/color_palette_histogram.js deleted file mode 100644 index c525ffefdb3e..000000000000 --- a/src-docs/src/views/color_palette/color_palette_histogram.js +++ /dev/null @@ -1,84 +0,0 @@ -import React, { Component, Fragment } from 'react'; - -import { EuiSpacer } from '../../../../src/components'; -import { - EuiSeriesChart, - EuiHistogramSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; -import { colorPalette, palettes } from '../../../../src/services/color'; - -const { SCALE } = EuiSeriesChartUtils; -const timestamp = Date.now(); -const ONE_HOUR = 3600000; -const margins = { - top: 10, - left: 80, - right: 0, - bottom: 20, -}; -const qualColors = palettes.euiPaletteColorBlind.colors; -const quantColors = colorPalette('#FFFF6D', '#1EA593', 6); - -function randomizeData(size = 24, max = 8) { - 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() * 1000000); - return new Array(series).fill(0).map(() => randomizeData(20, max)); -} -export default class Example extends Component { - state = { - series: 6, - data: buildData(6), - }; - render() { - const { data } = this.state; - return ( - - - {data.map((d, i) => ( - - ))} - - - - {data.map((d, i) => ( - - ))} - - - ); - } -} diff --git a/src-docs/src/views/pretty_duration/pretty_duration.js b/src-docs/src/views/pretty_duration/pretty_duration.js new file mode 100644 index 000000000000..791a3bfaf2f5 --- /dev/null +++ b/src-docs/src/views/pretty_duration/pretty_duration.js @@ -0,0 +1,77 @@ +import React, { Fragment } from 'react'; + +import { + EuiSpacer, + EuiCodeBlock, + EuiText, + prettyDuration, +} from '../../../../src/components'; + +const examples = [ + { + start: '2018-01-17T18:57:57.149Z', + end: '2018-01-17T20:00:00.000Z', + quickRanges: [], + dateFormat: 'MMMM Do YYYY, HH:mm:ss.SSS', + }, + { + start: '2018-01-17T18:57:57.149Z', + end: '2018-01-17T20:00:00.000Z', + quickRanges: [], + dateFormat: 'MMMM Do YYYY @ HH:mm:ss.SSS', + }, + { + start: '2018-01-17T18:57:57.149Z', + end: 'now-2h', + quickRanges: [], + dateFormat: 'MMMM Do YYYY @ HH:mm:ss.SSS', + }, + { + start: 'now-17m', + end: 'now', + quickRanges: [], + dateFormat: 'MMMM Do YYYY @ HH:mm:ss.SSS', + }, + { + start: 'now-17m', + end: 'now-1m', + quickRanges: [], + dateFormat: 'MMMM Do YYYY @ HH:mm:ss.SSS', + }, + { + start: 'now-15m', + end: 'now', + quickRanges: [ + { + start: 'now-15m', + end: 'now', + label: 'quick range 15 minutes custom display', + }, + ], + dateFormat: 'MMMM Do YYYY, HH:mm:ss.SSS', + }, +]; + +export default function prettyDurationExample() { + return ( + + {examples.map(({ start, end, quickRanges, dateFormat }, idx) => ( +
+ + prettyDuration('{start}', '{end}',{' '} + {JSON.stringify(quickRanges)}, ' + {dateFormat}') + + + + + +

{prettyDuration(start, end, quickRanges, dateFormat)}

+ + + +
+ ))} + + ); +} diff --git a/src-docs/src/views/pretty_duration/pretty_duration_example.js b/src-docs/src/views/pretty_duration/pretty_duration_example.js new file mode 100644 index 000000000000..e28292a2f12d --- /dev/null +++ b/src-docs/src/views/pretty_duration/pretty_duration_example.js @@ -0,0 +1,71 @@ +import React, { Fragment } from 'react'; + +import { renderToHtml } from '../../services'; + +import { GuideSectionTypes } from '../../components'; + +import { + EuiAccordion, + EuiCode, + EuiCodeBlock, + EuiSpacer, + commonDurationRanges, +} from '../../../../src/components'; + +import PrettyDuration from './pretty_duration'; +const prettyDurationSource = require('!!raw-loader!./pretty_duration'); +const prettyDurationHtml = renderToHtml(PrettyDuration); + +export const PrettyDurationExample = { + title: 'Pretty Duration', + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: prettyDurationSource, + }, + { + type: GuideSectionTypes.HTML, + code: prettyDurationHtml, + }, + ], + text: ( + +

+ Use prettyDuration to convert a start and end + date string to a human-friendly format. +

+ +

+ Start and end values for the duration are passed as the first and + second arguments, respectively. These can be timestamps ( + 2018-01-17T18:57:57.149Z) or relative times ( + now-15m). +

+ +

+ An array of quick range values is passed as the third argument. + These are used to pretty format custom ranges. EUI exports + commonDurationRanges which can be passed here. +

+ + + + {JSON.stringify(commonDurationRanges, null, 2)} + + + + + +

+ The output date/time format is specified by the fourth argument. +

+ + ), + demo: , + }, + ], +}; diff --git a/src-docs/src/views/series_chart/complex.js b/src-docs/src/views/series_chart/complex.js deleted file mode 100644 index 0451a1f371d9..000000000000 --- a/src-docs/src/views/series_chart/complex.js +++ /dev/null @@ -1,89 +0,0 @@ -import React, { Fragment, Component } from 'react'; - -import { - EuiSeriesChart, - EuiBarSeries, - EuiAreaSeries, - EuiLineSeries, -} from '../../../../src/experimental'; -import { EuiText, EuiCodeBlock, EuiSpacer } from '../../../../src/components'; - -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 = { - json: 'Please drag your mouse to select an area or click on an element', - }; - handleSelectionBrushEnd = area => { - this.setState(() => ({ - 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 { eventName, json } = this.state; - return ( - - - - {barSeries.map((data, index) => ( - - ))} - - - - {eventName && ( - -

- Event: {eventName} -

- - )} - {json} - - ); - } -} diff --git a/src-docs/src/views/series_chart/crosshair_sync.js b/src-docs/src/views/series_chart/crosshair_sync.js deleted file mode 100644 index 1ac09e9fc336..000000000000 --- a/src-docs/src/views/series_chart/crosshair_sync.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; - -import { EuiSpacer } from '../../../../src/components'; -import { EuiSeriesChart, EuiBarSeries } from '../../../../src/experimental'; - -// eslint-disable-next-line -export class ExampleCrosshair extends React.Component { - state = { - crosshairValue: 2, - }; - _updateCrosshairLocation = crosshairValue => { - this.setState({ crosshairValue }); - }; - render() { - return ( -
- - - - - - - -
- ); - } -} diff --git a/src-docs/src/views/series_chart/empty.js b/src-docs/src/views/series_chart/empty.js deleted file mode 100644 index 3e08fb70fd52..000000000000 --- a/src-docs/src/views/series_chart/empty.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -import { EuiSeriesChart } from '../../../../src/experimental'; - -export default () => ( - -); diff --git a/src-docs/src/views/series_chart/horizontal.js b/src-docs/src/views/series_chart/horizontal.js deleted file mode 100644 index 27b2214bb3fd..000000000000 --- a/src-docs/src/views/series_chart/horizontal.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiAreaSeries, - EuiLineSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; -const { ORIENTATION } = EuiSeriesChartUtils; - -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/series_chart/multi_axis.js b/src-docs/src/views/series_chart/multi_axis.js deleted file mode 100644 index cd24058d6b0c..000000000000 --- a/src-docs/src/views/series_chart/multi_axis.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiLineSeries, - EuiXAxis, - EuiYAxis, - EuiSeriesChartAxisUtils, -} from '../../../../src/experimental'; -import { VISUALIZATION_COLORS } from '../../../../src/services'; - -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]; -const DATA_C_DOMAIN = [15, 80]; - -export default () => ( - - - - - - - - - -); diff --git a/src-docs/src/views/series_chart/responsive_chart.js b/src-docs/src/views/series_chart/responsive_chart.js deleted file mode 100644 index 8cd9810dc5e0..000000000000 --- a/src-docs/src/views/series_chart/responsive_chart.js +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; - -import { EuiSeriesChart, EuiLineSeries } from '../../../../src/experimental'; -import { - EuiButton, - EuiPage, - EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiPageHeader, - EuiPageHeaderSection, - EuiPageSideBar, - EuiTitle, -} 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: 3 }, - { x: 5, y: 2 }, -]; - -export default class Example extends React.Component { - state = { - sideBarVisible: true, - }; - onClick = () => { - this.setState(prevState => ({ sideBarVisible: !prevState.sideBarVisible })); - }; - render() { - const { sideBarVisible } = this.state; - return ( - - {sideBarVisible && Side bar} - - - - -

Page title

- - - - Toggle Sidebar - - - - - - -

Chart title

- - - - Chart abilities - - - - - - - - - - - ); - } -} diff --git a/src-docs/src/views/series_chart/series_chart_example.js b/src-docs/src/views/series_chart/series_chart_example.js deleted file mode 100644 index 604b70165f68..000000000000 --- a/src-docs/src/views/series_chart/series_chart_example.js +++ /dev/null @@ -1,172 +0,0 @@ -import React, { Fragment } from 'react'; -import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiCallOut, EuiSpacer } from '../../../../src/components'; -import { EuiSeriesChart } from '../../../../src/experimental'; -import ComplexChartExampleCode from './complex'; -import EmptyExampleCode from './empty'; -import MultiAxisChartExampleCode from './multi_axis'; -import ResponsiveChartExample from './responsive_chart'; -import { ExampleCrosshair } from './crosshair_sync'; - -export const XYChartExample = { - title: 'General', - intro: ( - - -

- This component will be replaced in the near future and managed outside - of EUI. We do not recommend using it at this time and it will be - removed by June 2019. -

- - - - - ), - sections: [ - { - title: 'Complex example', - text: ( -
-

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

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

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

-
- ), - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./empty'), - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React', - }, - ], - demo: , - }, - { - title: 'Keep cross-hair in sync', - text: ( -
-

- When displayed side-by-side with other charts, we need to be able to - keep them in sync -

-
- ), - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./crosshair_sync'), - }, - { - type: GuideSectionTypes.HTML, - 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 -

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

- You can omit width and/or{' '} - height - prop and the chart takes the full width and/or height of it's - parent. -

-

- The parent container needs to have computed a height and/or width. -

-
- ), - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./responsive_chart'), - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React', - }, - ], - demo: , - }, - // 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/series_chart_area/area.js b/src-docs/src/views/series_chart_area/area.js deleted file mode 100644 index 772eeec31cb5..000000000000 --- a/src-docs/src/views/series_chart_area/area.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import { EuiSeriesChart, EuiAreaSeries } from '../../../../src/experimental'; - -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/series_chart_area/area_example.js b/src-docs/src/views/series_chart_area/area_example.js deleted file mode 100644 index fe81e9586848..000000000000 --- a/src-docs/src/views/series_chart_area/area_example.js +++ /dev/null @@ -1,131 +0,0 @@ -import React, { Fragment } from 'react'; -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, - EuiLink, - EuiCallOut, - EuiSpacer, -} from '../../../../src/components'; -import { EuiAreaSeries } from '../../../../src/experimental'; - -export const XYChartAreaExample = { - title: 'Area chart', - intro: ( - - -

- This component will be replaced in the near future and managed outside - of EUI. We do not recommend using it at this time and it will be - removed by June 2019. -

- - - - - ), - sections: [ - { - title: 'Area Series', - text: ( -
-

- Use EuiAreaSeries to display area charts. -

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

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

-
- ), - props: { EuiAreaSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./stacked_area'), - }, - { - type: GuideSectionTypes.HTML, - 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 - - for available values (the bundle curve does not work with area - chart). -

-
- ), - props: { EuiAreaSeries }, - source: [ - { - type: GuideSectionTypes.JS, - code: require('!!raw-loader!./curved_area'), - }, - { - type: GuideSectionTypes.HTML, - code: 'This component can only be used from React', - }, - ], - demo: , - }, - { - 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/series_chart_area/curved_area.js b/src-docs/src/views/series_chart_area/curved_area.js deleted file mode 100644 index 5af3b069d191..000000000000 --- a/src-docs/src/views/series_chart_area/curved_area.js +++ /dev/null @@ -1,85 +0,0 @@ -import React, { Component, Fragment } from 'react'; - -import { - EuiForm, - EuiFormRow, - EuiSelect, - EuiSpacer, -} from '../../../../src/components'; - -import { EuiSeriesChart, EuiAreaSeries } from '../../../../src/experimental'; - -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/series_chart_area/range_area.js b/src-docs/src/views/series_chart_area/range_area.js deleted file mode 100644 index e26c3daf95d0..000000000000 --- a/src-docs/src/views/series_chart_area/range_area.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiAreaSeries, - EuiLineSeries, -} from '../../../../src/experimental'; - -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 () => ( - - - - -); diff --git a/src-docs/src/views/series_chart_area/stacked_area.js b/src-docs/src/views/series_chart_area/stacked_area.js deleted file mode 100644 index 0cd4a4c60097..000000000000 --- a/src-docs/src/views/series_chart_area/stacked_area.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { EuiSeriesChart, EuiAreaSeries } from '../../../../src/experimental'; - -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/series_chart_axis/annotations.js b/src-docs/src/views/series_chart_axis/annotations.js deleted file mode 100644 index b51635b421d4..000000000000 --- a/src-docs/src/views/series_chart_axis/annotations.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiLineSeries, - EuiLineAnnotation, - EuiSeriesChartUtils, - EuiSeriesChartAxisUtils, -} from '../../../../src/experimental'; - -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/series_chart_axis/series_axis_example.js b/src-docs/src/views/series_chart_axis/series_axis_example.js deleted file mode 100644 index 93c5f53f7501..000000000000 --- a/src-docs/src/views/series_chart_axis/series_axis_example.js +++ /dev/null @@ -1,77 +0,0 @@ -import React, { Fragment } from 'react'; -import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiCallOut, EuiSpacer } from '../../../../src/components'; -import { - EuiXAxis, - EuiYAxis, - EuiLineAnnotation, -} from '../../../../src/experimental'; -import SimpleAxisExampleCode from './simple_axis'; -import AnnotationExampleCode from './annotations'; - -export const XYChartAxisExample = { - title: 'Axis', - intro: ( - - -

- This component will be replaced in the near future and managed outside - of EUI. We do not recommend using it at this time and it will be - removed by June 2019. -

- - - - - ), - 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: , - }, - { - 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/series_chart_axis/simple_axis.js b/src-docs/src/views/series_chart_axis/simple_axis.js deleted file mode 100644 index 723db22d6710..000000000000 --- a/src-docs/src/views/series_chart_axis/simple_axis.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; - -import { - EuiLineSeries, - EuiXAxis, - EuiYAxis, - EuiSeriesChart, - EuiSeriesChartAxisUtils, - EuiSeriesChartTextUtils, -} from '../../../../src/experimental'; - -const DATA = [{ x: 0, y: 5 }, { x: 1, y: 3 }, { x: 2, y: 2 }, { x: 3, y: 3 }]; - -function xAxisTickFormatter(value) { - return EuiSeriesChartTextUtils.labelWordWrap(`Axis value is ${value}`, 10); -} - -export default () => ( - - - - - - - -); diff --git a/src-docs/src/views/series_chart_bar/bar_example.js b/src-docs/src/views/series_chart_bar/bar_example.js deleted file mode 100644 index 9414ac37adb7..000000000000 --- a/src-docs/src/views/series_chart_bar/bar_example.js +++ /dev/null @@ -1,206 +0,0 @@ -import React, { Fragment } 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 TimeSeriesExample from './time_series'; - -import { - EuiBadge, - EuiCallOut, - EuiSpacer, - EuiLink, - EuiCode, -} from '../../../../src/components'; -import { EuiBarSeries } from '../../../../src/experimental'; - -export const XYChartBarExample = { - title: 'Bar charts', - intro: ( - - -

- This component will be replaced in the near future and managed outside - of EUI. We do not recommend using it at this time and it will be - removed by June 2019. -

- - - -

- You can use EuiSeriesChart with{' '} - EuiBarSeries to displaying bar charts. -

- -

- The EuiSeriesChart component pass the{' '} - orientation prop to every component child to - accomodate vertical and horizontal{' '} - use cases. The default orientation is vertical. -

- -

- You should specify EuiSeriesChart 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{' '} - EuiSeriesChart - with the following scales linear, - log,time,{' '} - time-utc. -

- - - -

- 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. [...] -

-

- 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. -

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

- You can create out-of-the-box vertical bar charts just adding a{' '} - EuiBarSeries - component into your EuiSeriesChart. -

- ), - props: { EuiBarSeries }, - 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: ( -

- 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: { EuiBarSeries }, - 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: ( -

- 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. -

- ), - props: { EuiBarSeries }, - 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: ( -

- 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. -

- ), - props: { EuiBarSeries }, - 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: 'Time Series', - text: ( -

- Use EuiSeriesChart with{' '} - xType='time' - to display a time series bar chart. -

- ), - props: { EuiBarSeries }, - 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/series_chart_bar/horizontal_bar_series.js b/src-docs/src/views/series_chart_bar/horizontal_bar_series.js deleted file mode 100644 index 61bc838a078d..000000000000 --- a/src-docs/src/views/series_chart_bar/horizontal_bar_series.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiBarSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; - -const { SCALE, ORIENTATION } = EuiSeriesChartUtils; -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/series_chart_bar/stacked_horizontal_bar_series.js b/src-docs/src/views/series_chart_bar/stacked_horizontal_bar_series.js deleted file mode 100644 index 3609725e4cce..000000000000 --- a/src-docs/src/views/series_chart_bar/stacked_horizontal_bar_series.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { Component, Fragment } from 'react'; - -import { EuiSpacer, EuiButton } from '../../../../src/components'; -import { - EuiSeriesChart, - EuiBarSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; - -const { ORIENTATION, SCALE } = EuiSeriesChartUtils; - -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); - - this.state = { - stacked: true, - }; - } - - onSwitchStacked = () => { - this.setState({ - stacked: !this.state.stacked, - }); - }; - - render() { - const { stacked } = this.state; - return ( - - - Toggle stacked - - - - - - - - ); - } -} diff --git a/src-docs/src/views/series_chart_bar/stacked_vertical_bar_series.js b/src-docs/src/views/series_chart_bar/stacked_vertical_bar_series.js deleted file mode 100644 index cf1b29c225d3..000000000000 --- a/src-docs/src/views/series_chart_bar/stacked_vertical_bar_series.js +++ /dev/null @@ -1,63 +0,0 @@ -import React, { Component, Fragment } from 'react'; - -import { EuiSpacer, EuiButton } from '../../../../src/components'; - -import { - EuiSeriesChart, - EuiBarSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; - -const { SCALE } = EuiSeriesChartUtils; - -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 }, -]; - -export default class extends Component { - constructor(props) { - super(props); - - this.state = { - stacked: true, - }; - } - - onSwitchStacked = () => { - this.setState({ - stacked: !this.state.stacked, - }); - }; - - render() { - const { stacked } = this.state; - return ( - - - Toggle stacked - - - - - - - - ); - } -} diff --git a/src-docs/src/views/series_chart_bar/time_series.js b/src-docs/src/views/series_chart_bar/time_series.js deleted file mode 100644 index 57af2c23af54..000000000000 --- a/src-docs/src/views/series_chart_bar/time_series.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { Component, Fragment } from 'react'; - -import { EuiButton, EuiSpacer } from '../../../../src/components'; -import { - EuiSeriesChart, - EuiLineSeries, - EuiBarSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; - -const { SCALE } = EuiSeriesChartUtils; -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) => ( - - ))} - - - ); - } -} diff --git a/src-docs/src/views/series_chart_bar/vertical_bar_series.js b/src-docs/src/views/series_chart_bar/vertical_bar_series.js deleted file mode 100644 index 2fd575557e51..000000000000 --- a/src-docs/src/views/series_chart_bar/vertical_bar_series.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiBarSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; -const { SCALE } = EuiSeriesChartUtils; -const data = [ - { x: 'A', y: 3 }, - { x: 'B', y: 1 }, - { x: 'C', y: 5 }, - { x: 'D', y: 2 }, - { x: 'E', y: 1 }, -]; - -export default () => ( - - { - console.log({ singleBarData }); - }} - /> - -); diff --git a/src-docs/src/views/series_chart_histogram/format_crosshair_times.js b/src-docs/src/views/series_chart_histogram/format_crosshair_times.js deleted file mode 100644 index 3d040fd2d63c..000000000000 --- a/src-docs/src/views/series_chart_histogram/format_crosshair_times.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { - EuiSeriesChart, - EuiHistogramSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; - -const { SCALE } = EuiSeriesChartUtils; -let timeseriesX = Date.now(); -const HOUR = 1000 * 60 * 60; - -const histogramData = new Array(1000).fill(0).map(() => { - const x0 = timeseriesX; - timeseriesX += HOUR; - const x = timeseriesX; - const y = Math.floor(Math.random() * 100); - return { x0, x, y }; -}); - -export const FormatCrosshairTimesExample = () => ( -
- - - -
-); diff --git a/src-docs/src/views/series_chart_histogram/histogram_example.js b/src-docs/src/views/series_chart_histogram/histogram_example.js deleted file mode 100644 index 66182404ddf0..000000000000 --- a/src-docs/src/views/series_chart_histogram/histogram_example.js +++ /dev/null @@ -1,232 +0,0 @@ -import React, { Fragment } 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 TimeHistogramSeriesExample from './time_histogram_series'; -import { FormatCrosshairTimesExample } from './format_crosshair_times'; - -import { - EuiBadge, - EuiSpacer, - EuiCode, - EuiCallOut, - EuiLink, -} from '../../../../src/components'; -import { EuiHistogramSeries } from '../../../../src/experimental'; - -export const XYChartHistogramExample = { - title: 'Histograms', - intro: ( - - -

- This component will be replaced in the near future and managed outside - of EUI. We do not recommend using it at this time and it will be - removed by June 2019. -

- - - -

- You can use EuiSeriesChart with{' '} - EuiHistogramSeries to displaying histogram charts. -

- -

- The EuiSeriesChart 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 EuiSeriesChart 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: ( -

- You can create out-of-the-box vertical histograms just adding a{' '} - EuiHistogramSeries - component into your EuiSeriesChart. -

- ), - props: { EuiHistogramSeries }, - 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 EuiSeriesChart with{' '} - EuiHistogramSeries for displaying stacked - vertical histograms. -

-

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

- - - ), - props: { EuiHistogramSeries }, - 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: ( -

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

- ), - props: { EuiHistogramSeries }, - 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: ( - -

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

- - - ), - props: { EuiHistogramSeries }, - 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: , - }, - { - title: 'Custom crosshair time format', - text: ( -
-

- Specify a custom formatting string to change the locality or format - of the time string on the x crosshair. -

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

- Use EuiSeriesChart with{' '} - xType='time' - to display a time series histogram. -

- ), - props: { EuiHistogramSeries }, - 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/series_chart_histogram/horizontal_rect_series.js b/src-docs/src/views/series_chart_histogram/horizontal_rect_series.js deleted file mode 100644 index a703e5ad5e25..000000000000 --- a/src-docs/src/views/series_chart_histogram/horizontal_rect_series.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiHistogramSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; - -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/series_chart_histogram/stacked_horizontal_rect_series.js b/src-docs/src/views/series_chart_histogram/stacked_horizontal_rect_series.js deleted file mode 100644 index da7f45b52f5c..000000000000 --- a/src-docs/src/views/series_chart_histogram/stacked_horizontal_rect_series.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiHistogramSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; - -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/series_chart_histogram/stacked_vertical_rect_series.js b/src-docs/src/views/series_chart_histogram/stacked_vertical_rect_series.js deleted file mode 100644 index 844b07a7989c..000000000000 --- a/src-docs/src/views/series_chart_histogram/stacked_vertical_rect_series.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiHistogramSeries, -} from '../../../../src/experimental'; - -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-docs/src/views/series_chart_histogram/time_histogram_series.js b/src-docs/src/views/series_chart_histogram/time_histogram_series.js deleted file mode 100644 index 034a6f124aa9..000000000000 --- a/src-docs/src/views/series_chart_histogram/time_histogram_series.js +++ /dev/null @@ -1,68 +0,0 @@ -import React, { Component, Fragment } from 'react'; - -import { EuiButton, EuiSpacer } from '../../../../src/components'; -import { - EuiSeriesChart, - EuiHistogramSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; - -const { SCALE } = EuiSeriesChartUtils; -const timestamp = Date.now(); -const ONE_HOUR = 3600000; -const margins = { - top: 10, - left: 80, - right: 0, - bottom: 20, -}; - -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/series_chart_histogram/vertical_rect_series.js b/src-docs/src/views/series_chart_histogram/vertical_rect_series.js deleted file mode 100644 index d603b4492666..000000000000 --- a/src-docs/src/views/series_chart_histogram/vertical_rect_series.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -import { - EuiSeriesChart, - EuiHistogramSeries, -} from '../../../../src/experimental'; - -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-docs/src/views/series_chart_line/curved_line.js b/src-docs/src/views/series_chart_line/curved_line.js deleted file mode 100644 index 8c482955ca8a..000000000000 --- a/src-docs/src/views/series_chart_line/curved_line.js +++ /dev/null @@ -1,91 +0,0 @@ -import React, { Component, Fragment } from 'react'; - -import { - EuiForm, - EuiFormRow, - EuiSelect, - EuiSpacer, -} from '../../../../src/components'; -import { - EuiSeriesChart, - EuiLineSeries, - EuiSeriesChartUtils, -} from '../../../../src/experimental'; - -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, -} = EuiSeriesChartUtils.CURVE; - -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: 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 = { - value: this.options[0].value, - }; - } - - onChange = e => { - this.setState({ - value: e.target.value, - }); - }; - - render() { - return ( - - - - - - - - - - - - - - ); - } -} diff --git a/src-docs/src/views/series_chart_line/custom_domain_line.js b/src-docs/src/views/series_chart_line/custom_domain_line.js deleted file mode 100644 index 16e154e0bc07..000000000000 --- a/src-docs/src/views/series_chart_line/custom_domain_line.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import { EuiSeriesChart, EuiLineSeries } from '../../../../src/experimental'; - -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/series_chart_line/custom_style_line.js b/src-docs/src/views/series_chart_line/custom_style_line.js deleted file mode 100644 index 471dd7ea316d..000000000000 --- a/src-docs/src/views/series_chart_line/custom_style_line.js +++ /dev/null @@ -1,114 +0,0 @@ -import React, { Component, Fragment } from 'react'; - -import { - EuiForm, - EuiFormRow, - EuiRange, - EuiSpacer, - EuiCheckboxGroup, -} from '../../../../src/components'; -import { EuiSeriesChart, EuiLineSeries } from '../../../../src/experimental'; - -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: 'showLineMarks', - label: 'Show Line Marks', - }, - ], - linePropsIdToSelectedMap: { - 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: { showLineMarks }, - lineSize, - lineMarkSize, - } = this.state; - return ( - - - - - - - - - - - - - - - - - - ); - } -} diff --git a/src-docs/src/views/series_chart_line/line.js b/src-docs/src/views/series_chart_line/line.js deleted file mode 100644 index ca962ad8e093..000000000000 --- a/src-docs/src/views/series_chart_line/line.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import { EuiSeriesChart, EuiLineSeries } from '../../../../src/experimental'; - -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/series_chart_line/line_example.js b/src-docs/src/views/series_chart_line/line_example.js deleted file mode 100644 index 1bb751b87f5e..000000000000 --- a/src-docs/src/views/series_chart_line/line_example.js +++ /dev/null @@ -1,168 +0,0 @@ -import React, { Fragment } 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, - EuiLink, - EuiCallOut, - EuiSpacer, -} from '../../../../src/components'; -import { EuiLineSeries } from '../../../../src/experimental'; - -export const XYChartLineExample = { - title: 'Line chart', - intro: ( - - -

- This component will be replaced in the near future and managed outside - of EUI. We do not recommend using it at this time and it will be - removed by June 2019. -

- - - - - ), - sections: [ - { - title: 'Line chart', - text: ( -
-

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

-
- ), - props: { EuiLineSeries }, - 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 EuiLineSeries to display line charts. Specify{' '} - xDomain and/or yDomain - props to use custom domains. -

-
- ), - props: { EuiLineSeries }, - 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 EuiLineSeries to display a - milti-line chart. -

-
- ), - props: { EuiLineSeries }, - 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: { EuiLineSeries }, - 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 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: { EuiLineSeries }, - 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/series_chart_line/multi_line.js b/src-docs/src/views/series_chart_line/multi_line.js deleted file mode 100644 index 14b2768029ad..000000000000 --- a/src-docs/src/views/series_chart_line/multi_line.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -import { EuiSeriesChart, EuiLineSeries } from '../../../../src/experimental'; - -const DATA_A = [ - { x: 0, y: 1 }, - { x: 1.5, 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/suggest/suggest.js b/src-docs/src/views/suggest/suggest.js new file mode 100644 index 000000000000..3c4c903427b3 --- /dev/null +++ b/src-docs/src/views/suggest/suggest.js @@ -0,0 +1,3 @@ +import React from 'react'; + +export default () =>
; diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js new file mode 100644 index 000000000000..b884f78846b6 --- /dev/null +++ b/src-docs/src/views/suggest/suggest_example.js @@ -0,0 +1,81 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { GuideSectionTypes } from '../../components'; + +import { EuiCode, EuiSuggestItem } from '../../../../src/components'; + +import Suggest from './suggest'; +const suggestSource = require('!!raw-loader!./suggest'); +const suggestHtml = renderToHtml(Suggest); + +import SuggestItem from './suggest_item'; +const suggestItemSource = require('!!raw-loader!./suggest_item'); +const suggestItemHtml = renderToHtml(SuggestItem); +const suggestItemSnippet = [ + ` +`, + ``, +]; + +export const SuggestExample = { + title: 'Suggest', + sections: [ + { + source: [ + { + type: GuideSectionTypes.JS, + code: suggestSource, + }, + { + type: GuideSectionTypes.HTML, + code: suggestHtml, + }, + ], + text: ( +
+

+ EuiSuggest description goes here. +

+
+ ), + }, + { + title: 'Suggest Item', + source: [ + { + type: GuideSectionTypes.JS, + code: suggestItemSource, + }, + { + type: GuideSectionTypes.HTML, + code: suggestItemHtml, + }, + ], + text: ( +
+

+ EuiSuggestItem is a list item component to + display suggestions when typing queries in{' '} + EuiSuggestInput. Use{' '} + labelDisplay to set whether the{' '} + label has a fixed width or not. +

+
+ ), + props: { EuiSuggestItem }, + snippet: suggestItemSnippet, + demo: , + }, + ], +}; diff --git a/src-docs/src/views/suggest/suggest_item.js b/src-docs/src/views/suggest/suggest_item.js new file mode 100644 index 000000000000..b3c90b187535 --- /dev/null +++ b/src-docs/src/views/suggest/suggest_item.js @@ -0,0 +1,71 @@ +import React from 'react'; + +import { EuiSuggestItem, EuiSpacer } from '../../../../src/components'; + +const shortDescription = 'This is the description'; + +const sampleItems = [ + { + type: { iconType: 'kqlField', color: 'tint4' }, + label: 'Field sample', + description: shortDescription, + }, + { + type: { iconType: 'kqlValue', color: 'tint0' }, + label: 'Value sample', + description: shortDescription, + }, + { + type: { iconType: 'kqlSelector', color: 'tint3' }, + label: 'Conjunction sample', + description: shortDescription, + }, + { + type: { iconType: 'kqlOperand', color: 'tint1' }, + label: 'Operator sample', + description: shortDescription, + }, + { + type: { iconType: 'search', color: 'tint8' }, + label: 'Recent search', + }, + { + type: { iconType: 'save', color: 'tint5' }, + label: 'Saved query', + }, +]; + +const typeObj = { iconType: 'kqlValue', color: 'tint0' }; + +const longLabel = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut quam eget augue pulvinar.'; + +export default () => ( +
+ {sampleItems.map((item, index) => ( + + ))} + + + + + +
+); diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap index 120e8bb7edb0..612606f13234 100644 --- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap +++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap @@ -85,6 +85,9 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = ` { + const isChildStyleMutation = records.find((record: MutationRecord) => { + return record.attributeName + ? MUTATION_ATTRIBUTE_FILTER.indexOf(record.attributeName) > -1 + : false; + }); + if (isChildStyleMutation) { + getDurationAndPerformOnFrame(records, this.setChildContentHeight); + } else { + this.setChildContentHeight(); + } + }; + componentDidMount() { this.setChildContentHeight(); } @@ -178,8 +194,12 @@ export class EuiAccordion extends Component< }} id={id}> + observerOptions={{ + childList: true, + subtree: true, + attributeFilter: MUTATION_ATTRIBUTE_FILTER, + }} + onMutation={this.onMutation}> {mutationRef => (
{ diff --git a/src/components/call_out/_variables.scss b/src/components/call_out/_variables.scss index c0b9111ff268..4ea867964f58 100644 --- a/src/components/call_out/_variables.scss +++ b/src/components/call_out/_variables.scss @@ -4,11 +4,4 @@ $euiCallOutTypes: ( success: $euiColorSecondary, warning: $euiColorWarning, danger: $euiColorDanger, -); - -//** DEPRECATED **// -//** DEPRECATED **// -//** DEPRECATED **// -//** DEPRECATED **// - -$callOutTypes: $euiCallOutTypes; +); \ No newline at end of file diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index 5dc6d58d95dd..73aff373e4e7 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -1,3 +1,5 @@ +@import '../form/form_control_layout/mixins'; + .euiComboBox { @include euiFormControlSize(auto, $includeAlternates: true); position: relative; @@ -18,17 +20,16 @@ @include euiFormControlWithIcon($isIconOptional: true); @include euiFormControlSize(auto, $includeAlternates: true); padding: $euiSizeXS $euiSizeS; - // sass-lint:disable-block mixins-before-declarations - @include euiFormControlLayoutPadding(1); /* 2 */ - display: flex; /* 1 */ - &.euiComboBox__inputWrap-isClearable { - @include euiFormControlLayoutPadding(2); /* 2 */ - } + // sass-lint:disable-block mixins-before-declarations + // to override the padding added above + @include euiFormControlLayoutPadding(1); /* 2 */ &:not(.euiComboBox__inputWrap--noWrap) { - padding: $euiSizeXS; + padding-top: $euiSizeXS; + padding-bottom: $euiSizeXS; + padding-left: $euiSizeXS; height: auto; /* 3 */ flex-wrap: wrap; /* 1 */ align-content: flex-start; @@ -37,6 +38,10 @@ cursor: text; } } + + &.euiComboBox__inputWrap-isClearable { + @include euiFormControlLayoutPadding(2); /* 2 */ + } } /** diff --git a/src/components/date_picker/index.d.ts b/src/components/date_picker/index.d.ts index 2647f4e48919..ff810cec0beb 100644 --- a/src/components/date_picker/index.d.ts +++ b/src/components/date_picker/index.d.ts @@ -86,4 +86,19 @@ declare module '@elastic/eui' { export const ReactDatePicker: typeof _ReactDatePicker; export const ReactDatePickerProps: _ReactDatePickerProps; + + interface DurationRange { + start: string; + end: string; + label: string; + } + + export const commonDurationRanges: DurationRange[]; + + export function prettyDuration( + timeFrom: string, + timeTo: string, + quickRanges: DurationRange[], + dateFormat: string + ): string; } diff --git a/src/components/date_picker/index.js b/src/components/date_picker/index.js index 4cd12a69bf69..69a0ec433e7d 100644 --- a/src/components/date_picker/index.js +++ b/src/components/date_picker/index.js @@ -2,4 +2,9 @@ export { EuiDatePicker } from './date_picker'; export { EuiDatePickerRange } from './date_picker_range'; -export { EuiSuperDatePicker, EuiSuperUpdateButton } from './super_date_picker'; +export { + EuiSuperDatePicker, + EuiSuperUpdateButton, + prettyDuration, + commonDurationRanges, +} from './super_date_picker'; diff --git a/src/components/date_picker/super_date_picker/index.js b/src/components/date_picker/super_date_picker/index.js index 148086735d83..978ec874cc60 100644 --- a/src/components/date_picker/super_date_picker/index.js +++ b/src/components/date_picker/super_date_picker/index.js @@ -1,3 +1,5 @@ export { EuiSuperDatePicker } from './super_date_picker'; export { EuiSuperUpdateButton } from './super_update_button'; + +export { prettyDuration, commonDurationRanges } from './pretty_duration'; diff --git a/src/components/date_picker/super_date_picker/pretty_duration.js b/src/components/date_picker/super_date_picker/pretty_duration.js index 86c6ac9a1e19..bbc05bede461 100644 --- a/src/components/date_picker/super_date_picker/pretty_duration.js +++ b/src/components/date_picker/super_date_picker/pretty_duration.js @@ -6,6 +6,17 @@ import { parseRelativeParts } from './relative_utils'; const ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ'; +export const commonDurationRanges = [ + { start: 'now/d', end: 'now/d', label: 'Today' }, + { start: 'now/w', end: 'now/w', label: 'This week' }, + { start: 'now/M', end: 'now/M', label: 'This month' }, + { start: 'now/y', end: 'now/y', label: 'This year' }, + { start: 'now-1d/d', end: 'now-1d/d', label: 'Yesterday' }, + { start: 'now/w', end: 'now', label: 'Week to date' }, + { start: 'now/M', end: 'now', label: 'Month to date' }, + { start: 'now/y', end: 'now', label: 'Year to date' }, +]; + function cantLookup(timeFrom, timeTo, dateFormat) { const displayFrom = formatTimeString(timeFrom, dateFormat); const displayTo = formatTimeString(timeTo, dateFormat, true); diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js index a2c0f75d0ecb..45e0527fd8bc 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.js +++ b/src/components/date_picker/super_date_picker/super_date_picker.js @@ -6,7 +6,11 @@ import { recentlyUsedRangeShape, quickSelectPanelShape, } from './types'; -import { prettyDuration, showPrettyDuration } from './pretty_duration'; +import { + prettyDuration, + showPrettyDuration, + commonDurationRanges, +} from './pretty_duration'; import { prettyInterval } from './pretty_interval'; import dateMath from '@elastic/datemath'; @@ -20,6 +24,8 @@ import { EuiFormControlLayout } from '../../form'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { AsyncInterval } from './async_interval'; +export { prettyDuration, commonDurationRanges }; + function isRangeInvalid(start, end) { if (start === 'now' && end === 'now') { return true; @@ -105,16 +111,7 @@ export class EuiSuperDatePicker extends Component { end: 'now', isPaused: true, refreshInterval: 0, - commonlyUsedRanges: [ - { start: 'now/d', end: 'now/d', label: 'Today' }, - { start: 'now/w', end: 'now/w', label: 'This week' }, - { start: 'now/M', end: 'now/M', label: 'This month' }, - { start: 'now/y', end: 'now/y', label: 'This year' }, - { start: 'now-1d/d', end: 'now-1d/d', label: 'Yesterday' }, - { start: 'now/w', end: 'now', label: 'Week to date' }, - { start: 'now/M', end: 'now', label: 'Month to date' }, - { start: 'now/y', end: 'now', label: 'Year to date' }, - ], + commonlyUsedRanges: commonDurationRanges, dateFormat: 'MMM D, YYYY @ HH:mm:ss.SSS', recentlyUsedRanges: [], showUpdateButton: true, diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss index a9ef3a839694..04aa42687142 100644 --- a/src/components/form/_mixins.scss +++ b/src/components/form/_mixins.scss @@ -245,22 +245,4 @@ @mixin euiCustomControlFocused { @include euiFocusRing; border-color: $euiColorPrimary; -} - - -// Deprecated mixins below. This was changed in Nov. 2018 - -@mixin euiCustomControl--selected($type: null) { // sass-lint:disable-line mixin-name-format - @include euiCustomControlSelected($type); - @warn '@mixin euiCustomControl--selected is deprecated, please use euiCustomControlSelected instead'; -} - -@mixin euiCustomControl--disabled($type: null) { // sass-lint:disable-line mixin-name-format - @include euiCustomControlDisabled($type); - @warn '@mixin euiCustomControl--disabled is deprecated, please use euiCustomControlDisabled instead'; -} - -@mixin euiCustomControl--focused { // sass-lint:disable-line mixin-name-format - @include euiCustomControlFocused; - @warn '@mixin euiCustomControl--focused is deprecated, please use euiCustomControlFocused instead'; -} +} \ No newline at end of file diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss index 0c0b58f8dc43..eae29dabd118 100644 --- a/src/components/form/_variables.scss +++ b/src/components/form/_variables.scss @@ -21,24 +21,4 @@ $euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !default; $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade $euiFormControlDisabledColor: $euiColorMediumShade !default; $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8); -$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%); - -//** DEPRECATED **// -//** DEPRECATED **// -//** DEPRECATED **// -//** DEPRECATED **// - -@if variable-exists(euiFormControlHeight--compressed) { - $euiFormControlCompressedHeight: $euiFormControlHeightCompressed !global; - @warn '`$euiFormControlHeightCompressed` is deprecated. Please use `$euiFormControlCompressedHeight` instead'; -} - -@if variable-exists(euiFormControlPadding--compressed) { - $euiFormControlCompressedPadding: $euiFormControlPaddingCompressed !global; - @warn '`$euiFormControlPaddingCompressed` is deprecated. Please use `$euiFormControlCompressedPadding` instead'; -} - -@if variable-exists(euiFormBorderColorDisabled) { - $euiFormBorderDisabledColor: $euiFormBorderColorDisabled !global; - @warn '`$euiFormBorderColorDisabled` is deprecated. Please use `$euiFormBorderDisabledColor` instead'; -} +$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%); \ No newline at end of file diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/components/form/form_control_layout/_mixins.scss index 5bc62f7828cd..8a174285f9a2 100644 --- a/src/components/form/form_control_layout/_mixins.scss +++ b/src/components/form/form_control_layout/_mixins.scss @@ -31,11 +31,4 @@ stroke: $euiColorEmptyShade; stroke-width: 2px; // increase thickness of icon at such a small size } -} - -// Deprecated mixins below. This was changed in Nov. 2018 - -@mixin euiFormControlLayout__padding($numOfIcons, $side: 'right') { // sass-lint:disable-line mixin-name-format - @include euiFormControlLayoutPadding($numOfIcons, $side: 'right'); - @warn '@mixin euiFormControlLayout__padding is deprecated, please use euiFormControlLayoutPadding instead'; -} +} \ No newline at end of file diff --git a/src/components/form/range/_mixins.scss b/src/components/form/range/_mixins.scss index 9103408d8f05..293e64a42548 100644 --- a/src/components/form/range/_mixins.scss +++ b/src/components/form/range/_mixins.scss @@ -26,21 +26,4 @@ &::-webkit-slider-thumb { @content; } &::-moz-range-thumb { @content; } &::-ms-thumb { @content; } -} - -// Deprecated mixins below. This was changed in Nov. 2018 - -@mixin euiRange__trackSize { // sass-lint:disable-line mixin-name-format - @include euiRangeTrackSize; - @warn '@mixin euiRange__trackSize is deprecated, please use euiRangeTrackSize instead'; -} - -@mixin euiRange__track__perBrowser { // sass-lint:disable-line mixin-name-format - @include euiRangeTrackPerBrowser; - @warn '@mixin euiRange__track__perBrowser is deprecated, please use euiRangeTrackPerBrowser instead'; -} - -@mixin euiRange__thumb__perBrowser { // sass-lint:disable-line mixin-name-format - @include euiRangeThumbPerBrowser; - @warn '@mixin euiRange__thumb__perBrowser is deprecated, please use euiRangeThumbPerBrowser instead'; -} +} \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index 2e93265dd771..32923f19c17b 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -50,6 +50,8 @@ export { EuiDatePickerRange, EuiSuperDatePicker, EuiSuperUpdateButton, + prettyDuration, + commonDurationRanges, } from './date_picker'; export { EuiDelayHide } from './delay_hide'; @@ -232,6 +234,8 @@ export { EuiStat } from './stat'; export { EuiStep, EuiSteps, EuiSubSteps, EuiStepsHorizontal } from './steps'; +export { EuiSuggestItem } from './suggest_item'; + export { EuiTable, EuiTableBody, diff --git a/src/components/index.scss b/src/components/index.scss index 9ea1003a31ae..c39303f57986 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -51,6 +51,7 @@ @import 'selectable/index'; @import 'stat/index'; @import 'steps/index'; +@import 'suggest_item/index'; @import 'table/index'; @import 'tabs/index'; @import 'title/index'; @@ -58,5 +59,4 @@ @import 'token/index'; @import 'toggle/index'; @import 'tool_tip/index'; -@import 'text/index'; -@import 'series_chart/index'; +@import 'text/index'; \ No newline at end of file diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 01d39744cc53..ba6838e09483 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -3,7 +3,12 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import tabbable from 'tabbable'; -import { cascadingMenuKeyCodes } from '../../services'; +import { + cascadingMenuKeyCodes, + getTransitionTimings, + getWaitDuration, + performOnFrame, +} from '../../services'; import { EuiFocusTrap } from '../focus_trap'; @@ -84,8 +89,6 @@ const DEFAULT_POPOVER_STYLES = { left: 50, }; -const GROUP_NUMERIC = /^([\d.]+)/; - function getElementFromInitialFocus(initialFocus) { const initialFocusType = typeof initialFocus; if (initialFocusType === 'string') @@ -94,22 +97,6 @@ function getElementFromInitialFocus(initialFocus) { return initialFocus; } -function getTransitionTimings(element) { - const computedStyle = window.getComputedStyle(element); - - const computedDuration = computedStyle.getPropertyValue( - 'transition-duration' - ); - let durationMatch = computedDuration.match(GROUP_NUMERIC); - durationMatch = durationMatch ? parseFloat(durationMatch[1]) * 1000 : 0; - - const computedDelay = computedStyle.getPropertyValue('transition-delay'); - let delayMatch = computedDelay.match(GROUP_NUMERIC); - delayMatch = delayMatch ? parseFloat(delayMatch[1]) * 1000 : 0; - - return { durationMatch, delayMatch }; -} - export class EuiPopover extends Component { static getDerivedStateFromProps(nextProps, prevState) { if (prevState.prevProps.isOpen && !nextProps.isOpen) { @@ -278,33 +265,10 @@ export class EuiPopover extends Component { } onMutation = records => { - const waitDuration = records.reduce((waitDuration, record) => { - // only check for CSS transition values for ELEMENT nodes - if (record.target.nodeType === document.ELEMENT_NODE) { - const { durationMatch, delayMatch } = getTransitionTimings( - record.target - ); - waitDuration = Math.max(waitDuration, durationMatch + delayMatch); - } - - return waitDuration; - }, 0); + const waitDuration = getWaitDuration(records); this.positionPopoverFixed(); - if (waitDuration > 0) { - const startTime = Date.now(); - const endTime = startTime + waitDuration; - - const onFrame = () => { - this.positionPopoverFixed(); - - if (endTime > Date.now()) { - requestAnimationFrame(onFrame); - } - }; - - requestAnimationFrame(onFrame); - } + performOnFrame(waitDuration, this.positionPopoverFixed); }; positionPopover = allowEnforcePosition => { diff --git a/src/components/search_bar/query/ast.js b/src/components/search_bar/query/ast.js index 67a7e3e343a0..7f8106fd8f2e 100644 --- a/src/components/search_bar/query/ast.js +++ b/src/components/search_bar/query/ast.js @@ -89,6 +89,9 @@ const Group = Object.freeze({ must: value => { return { type: Group.TYPE, value, match: Match.MUST }; }, + mustNot: value => { + return { type: Group.TYPE, value, match: Match.MUST_NOT }; + }, }); const Field = Object.freeze({ diff --git a/src/components/search_bar/query/default_syntax.js b/src/components/search_bar/query/default_syntax.js index 62fe947dd3dd..bc12e1e28711 100644 --- a/src/components/search_bar/query/default_syntax.js +++ b/src/components/search_bar/query/default_syntax.js @@ -22,18 +22,22 @@ Clauses } Clause - = IsClause + = GroupClause + / IsClause / FieldClause / TermClause - / GroupClause -GroupClause +SubGroupClause = "(" head:Clause tail:( space? orWord space? clause:Clause { return clause } )* ")" { - return AST.Group.must([head, ...tail]); + return [head, ...tail]; } +GroupClause + = space? "-" group:SubGroupClause { return AST.Group.mustNot(group) } + / space? group:SubGroupClause { return AST.Group.must(group) } + TermClause = space? "-" value:termValue { return AST.Term.mustNot(value); } / space? value:termValue { return AST.Term.must(value); } diff --git a/src/components/search_bar/query/default_syntax.test.js b/src/components/search_bar/query/default_syntax.test.js index c1d7e961d643..fb77e6165c05 100644 --- a/src/components/search_bar/query/default_syntax.test.js +++ b/src/components/search_bar/query/default_syntax.test.js @@ -1083,6 +1083,42 @@ describe('defaultSyntax', () => { expect(nameClauseB.value).toBe('susan'); }); + test('negated OR clause', () => { + const query = '-(name:john OR name:susan)'; + const schema = { + strict: true, + fields: { + name: { + type: 'string', + }, + }, + }; + const ast = defaultSyntax.parse(query, { schema }); + + expect(ast).toBeDefined(); + expect(ast.clauses).toHaveLength(1); + + const groupClauses = ast.getGroupClauses(); + expect(groupClauses).toHaveLength(1); + + const [groupClause] = groupClauses; + expect(groupClause).toBeDefined(); + expect(AST.Group.isInstance(groupClause)).toBe(true); + expect(AST.Match.isMustClause(groupClause)).toBe(false); + + const [nameClauseA, nameClauseB] = groupClause.value; + + expect(AST.Field.isInstance(nameClauseA)).toBe(true); + expect(AST.Match.isMustClause(nameClauseA)).toBe(true); + expect(nameClauseA.field).toBe('name'); + expect(nameClauseA.value).toBe('john'); + + expect(AST.Field.isInstance(nameClauseB)).toBe(true); + expect(AST.Match.isMustClause(nameClauseB)).toBe(true); + expect(nameClauseB.field).toBe('name'); + expect(nameClauseB.value).toBe('susan'); + }); + test('or term parsing and printing', () => { const query = '"or"'; const ast = defaultSyntax.parse(query); diff --git a/src/components/search_bar/query/execute_ast.js b/src/components/search_bar/query/execute_ast.js index 03e6e20aa183..cb47597ab057 100644 --- a/src/components/search_bar/query/execute_ast.js +++ b/src/components/search_bar/query/execute_ast.js @@ -148,7 +148,7 @@ export const createFilter = ( } throw new Error(`Unknown query clause type in group, [${clause.type}]`); }); - return matchesGroup; + return AST.Match.isMustClause(clause) ? matchesGroup : !matchesGroup; }); return isGroupMatch; diff --git a/src/components/search_bar/query/execute_ast.test.js b/src/components/search_bar/query/execute_ast.test.js index f448d5402067..5be44c2d11d0 100644 --- a/src/components/search_bar/query/execute_ast.test.js +++ b/src/components/search_bar/query/execute_ast.test.js @@ -365,6 +365,27 @@ describe('execute ast', () => { expect(names).toContain('foo bar'); }); + test('negated OR clause', () => { + const items = [ + { name: 'john doe', age: 9 }, + { name: 'foo', age: 6 }, + { name: 'foo bar', age: 7 }, + { name: 'bar', age: 8 }, + ]; + const result = executeAst( + AST.create([ + AST.Group.mustNot([ + AST.Field.must.eq('name', 'john doe'), + AST.Field.must.eq('name', 'foo'), + ]), + ]), + items + ); + expect(result).toHaveLength(1); + const names = result.map(item => item.name); + expect(names).toContain('bar'); + }); + describe('array field values', () => { describe('eq operator', () => { test('full match', () => { diff --git a/src/components/series_chart/__snapshots__/selection_brush.test.js.snap b/src/components/series_chart/__snapshots__/selection_brush.test.js.snap deleted file mode 100644 index 544da598cfb1..000000000000 --- a/src/components/series_chart/__snapshots__/selection_brush.test.js.snap +++ /dev/null @@ -1,448 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -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/series_chart/__snapshots__/series_chart.test.js.snap b/src/components/series_chart/__snapshots__/series_chart.test.js.snap deleted file mode 100644 index 3681bbb08dec..000000000000 --- a/src/components/series_chart/__snapshots__/series_chart.test.js.snap +++ /dev/null @@ -1,42 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiSeriesChart renders an empty chart 1`] = ` -
-
- -
- - - Chart not available - -
-
-

- ~~Empty Chart~~ -

-
- -
-
-`; diff --git a/src/components/series_chart/_index.scss b/src/components/series_chart/_index.scss deleted file mode 100644 index c7bc5640ed95..000000000000 --- a/src/components/series_chart/_index.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* react-vis scss styles copied and pasted from react-vis lib */ -.euiSeriesChartContainer { - @import "styles/react_vis/plot"; - @import "styles/react_vis/legends"; - @import "styles/react_vis/radial-chart"; - @import "styles/react_vis/treemap"; - @import "styles/react_vis/overrides"; -} - -@import "series/index"; -@import "legend"; -@import "line_annotation"; -@import "series_chart"; diff --git a/src/components/series_chart/_legend.scss b/src/components/series_chart/_legend.scss deleted file mode 100644 index 3285468000fa..000000000000 --- a/src/components/series_chart/_legend.scss +++ /dev/null @@ -1,58 +0,0 @@ -.euiLegendTitle { - @include euiTitle; - @include euiFontSizeL; -} - -.euiLegendContainer { - display: flex; - align-items: center; - justify-content: flex-end; -} - -.euiLegendContent { - white-space: nowrap; - color: gray; - display: flex; -} - -.euiLegendTruncatedLabel { - display: inline-block; -} -.euiLegendSeriesValue { - margin-left: 5px; - display: inline-block; - color: black; -} -.euiLegendMoreSeriesContainer { - @include euiFontSizeS; - color: gray; -} - -.euiLegendItemContainer { - display: flex; - align-items: center; - color: gray; - cursor: pointer; - user-select: none; - margin-right: 4px; - opacity: 1; - @include euiFontSizeM; - &:last-of-type { - margin-right: 0; - } -} - -.euiLegendItemIndicator { - border-radius: 100%; - width: 8px; - height: 8px; - margin-right: 4px; -} - -.euiTitle--small { - // @include euiFontSizeM; -} - -.euiTitle--large { - // @include euiFontSizeXL; -} diff --git a/src/components/series_chart/_line_annotation.scss b/src/components/series_chart/_line_annotation.scss deleted file mode 100644 index 85cb88d24c7f..000000000000 --- a/src/components/series_chart/_line_annotation.scss +++ /dev/null @@ -1,12 +0,0 @@ -.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/series_chart/_series_chart.scss b/src/components/series_chart/_series_chart.scss deleted file mode 100644 index 3ccd2cc7f361..000000000000 --- a/src/components/series_chart/_series_chart.scss +++ /dev/null @@ -1,8 +0,0 @@ -.euiSeriesChartContainer__emptyPrompt { - // Center the empty prompt within the series container - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} diff --git a/src/components/series_chart/axis/__snapshots__/default_axis.test.js.snap b/src/components/series_chart/axis/__snapshots__/default_axis.test.js.snap deleted file mode 100644 index 47b143e63f89..000000000000 --- a/src/components/series_chart/axis/__snapshots__/default_axis.test.js.snap +++ /dev/null @@ -1,952 +0,0 @@ -// 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/series_chart/axis/__snapshots__/horizontal_grid.test.js.snap b/src/components/series_chart/axis/__snapshots__/horizontal_grid.test.js.snap deleted file mode 100644 index feac8a7b12e1..000000000000 --- a/src/components/series_chart/axis/__snapshots__/horizontal_grid.test.js.snap +++ /dev/null @@ -1,85 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiHorizontalGrid render the horizontal grid 1`] = ` -
-
-
- - - - - - - - - - - - -
-
-
-`; diff --git a/src/components/series_chart/axis/__snapshots__/vertical_grid.test.js.snap b/src/components/series_chart/axis/__snapshots__/vertical_grid.test.js.snap deleted file mode 100644 index 4e2054c0d975..000000000000 --- a/src/components/series_chart/axis/__snapshots__/vertical_grid.test.js.snap +++ /dev/null @@ -1,120 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiVerticalGrid render the vertical grid 1`] = ` -
-
-
- - - - - - - - - - - - - - - - - -
-
-
-`; diff --git a/src/components/series_chart/axis/__snapshots__/x_axis.test.js.snap b/src/components/series_chart/axis/__snapshots__/x_axis.test.js.snap deleted file mode 100644 index b280780d3767..000000000000 --- a/src/components/series_chart/axis/__snapshots__/x_axis.test.js.snap +++ /dev/null @@ -1,275 +0,0 @@ -// 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/series_chart/axis/__snapshots__/y_axis.test.js.snap b/src/components/series_chart/axis/__snapshots__/y_axis.test.js.snap deleted file mode 100644 index ff74ab492a96..000000000000 --- a/src/components/series_chart/axis/__snapshots__/y_axis.test.js.snap +++ /dev/null @@ -1,175 +0,0 @@ -// 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/series_chart/axis/default_axis.js b/src/components/series_chart/axis/default_axis.js deleted file mode 100644 index 608cbc7ab236..000000000000 --- a/src/components/series_chart/axis/default_axis.js +++ /dev/null @@ -1,60 +0,0 @@ -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 { 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; - - return ( - - {showGridLines && orientation === ORIENTATION.VERTICAL && ( - - )} - - {showGridLines && orientation === ORIENTATION.HORIZONTAL && ( - - )} - - - - - ); - } -} - -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, - /** 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: ORIENTATION.VERTICAL, - showGridLines: true, - xOnZero: false, - yOnZero: false, -}; - -EuiDefaultAxis.requiresSVG = true; diff --git a/src/components/series_chart/axis/default_axis.test.js b/src/components/series_chart/axis/default_axis.test.js deleted file mode 100644 index 3191cf1ec94d..000000000000 --- a/src/components/series_chart/axis/default_axis.test.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; - -import { EuiSeriesChart } from '../series_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/series_chart/axis/horizontal_grid.js b/src/components/series_chart/axis/horizontal_grid.js deleted file mode 100644 index f02d33ee185b..000000000000 --- a/src/components/series_chart/axis/horizontal_grid.js +++ /dev/null @@ -1,15 +0,0 @@ -import React, { PureComponent } from 'react'; -import { HorizontalGridLines } from 'react-vis'; - -/** - * Horizontal grid lines aligned with y axis ticks - */ -export class EuiHorizontalGrid extends PureComponent { - render() { - return ; - } -} - -EuiHorizontalGrid.displayName = 'EuiHorizontalGrid'; - -EuiHorizontalGrid.requiresSVG = true; diff --git a/src/components/series_chart/axis/horizontal_grid.test.js b/src/components/series_chart/axis/horizontal_grid.test.js deleted file mode 100644 index 80098cbadaad..000000000000 --- a/src/components/series_chart/axis/horizontal_grid.test.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; - -import { EuiSeriesChart } from '../series_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 - 50); // right + left default xychart margin - expect(component.render()).toMatchSnapshot(); - }); -}); diff --git a/src/components/series_chart/axis/index.js b/src/components/series_chart/axis/index.js deleted file mode 100644 index ea6034fb57d7..000000000000 --- a/src/components/series_chart/axis/index.js +++ /dev/null @@ -1,5 +0,0 @@ -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/series_chart/axis/vertical_grid.js b/src/components/series_chart/axis/vertical_grid.js deleted file mode 100644 index 816d0f1b1871..000000000000 --- a/src/components/series_chart/axis/vertical_grid.js +++ /dev/null @@ -1,15 +0,0 @@ -import React, { PureComponent } from 'react'; -import { VerticalGridLines } from 'react-vis'; - -/** - * Vertical grid lines aligned with x axis ticks - */ -export class EuiVerticalGrid extends PureComponent { - render() { - return ; - } -} - -EuiVerticalGrid.displayName = 'EuiVerticalGrid'; - -EuiVerticalGrid.requiresSVG = true; diff --git a/src/components/series_chart/axis/vertical_grid.test.js b/src/components/series_chart/axis/vertical_grid.test.js deleted file mode 100644 index 8eb4c26cbdf6..000000000000 --- a/src/components/series_chart/axis/vertical_grid.test.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; - -import { EuiSeriesChart } from '../series_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 - 50); // top + bottom default xychart margin - expect(component.render()).toMatchSnapshot(); - }); -}); diff --git a/src/components/series_chart/axis/x_axis.js b/src/components/series_chart/axis/x_axis.js deleted file mode 100644 index c214a9bb7c94..000000000000 --- a/src/components/series_chart/axis/x_axis.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import { XAxis } from 'react-vis'; -import { EuiSeriesChartAxisUtils } from '../utils/axis_utils'; - -const { TITLE_POSITION, ORIENTATION } = EuiSeriesChartAxisUtils; - -export class EuiXAxis extends PureComponent { - render() { - const { - title, - titlePosition, - orientation, - tickSize, - tickLabelAngle, - tickFormat, - tickValues, - onZero, - ...rest - } = this.props; - return ( - - ); - } -} - -EuiXAxis.displayName = 'EuiXAxis'; - -EuiXAxis.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.TOP, ORIENTATION.BOTTOM]), - /** 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, -}; - -EuiXAxis.defaultProps = { - onZero: false, - titlePosition: TITLE_POSITION.MIDDLE, - orientation: ORIENTATION.BOTTOM, - tickSize: 0, -}; - -EuiXAxis.requiresSVG = true; diff --git a/src/components/series_chart/axis/x_axis.test.js b/src/components/series_chart/axis/x_axis.test.js deleted file mode 100644 index 1c1b22d128e0..000000000000 --- a/src/components/series_chart/axis/x_axis.test.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; - -import { EuiSeriesChart } from '../series_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/series_chart/axis/y_axis.js b/src/components/series_chart/axis/y_axis.js deleted file mode 100644 index 40f32ffd780d..000000000000 --- a/src/components/series_chart/axis/y_axis.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import { YAxis } from 'react-vis'; -import { EuiSeriesChartAxisUtils } from '../utils/axis_utils'; - -const { TITLE_POSITION, ORIENTATION } = EuiSeriesChartAxisUtils; - -export class EuiYAxis extends PureComponent { - render() { - const { - title, - titlePosition, - orientation, - tickSize, - tickLabelAngle, - tickFormat, - tickValues, - onZero, - ...rest - } = this.props; - return ( - - ); - } -} - -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, -}; - -EuiYAxis.defaultProps = { - onZero: false, - titlePosition: TITLE_POSITION.MIDDLE, - orientation: ORIENTATION.LEFT, - tickSize: 0, -}; - -EuiYAxis.requiresSVG = true; diff --git a/src/components/series_chart/axis/y_axis.test.js b/src/components/series_chart/axis/y_axis.test.js deleted file mode 100644 index 32477847666b..000000000000 --- a/src/components/series_chart/axis/y_axis.test.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; - -import { EuiSeriesChart } from '../series_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/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap deleted file mode 100644 index 7f2cd1b9cb31..000000000000 --- a/src/components/series_chart/crosshairs/__snapshots__/crosshair_x.test.js.snap +++ /dev/null @@ -1,45 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiCrosshairX render the X crosshair 1`] = ` -
-
-
- - - - - - -
-
-
-`; diff --git a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap b/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap deleted file mode 100644 index f21208a28081..000000000000 --- a/src/components/series_chart/crosshairs/__snapshots__/crosshair_y.test.js.snap +++ /dev/null @@ -1,45 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiCrosshairY render the Y crosshair 1`] = ` -
-
-
- - - - - - -
-
-
-`; diff --git a/src/components/series_chart/crosshairs/crosshair_x.js b/src/components/series_chart/crosshairs/crosshair_x.js deleted file mode 100644 index 3d40d1fb7284..000000000000 --- a/src/components/series_chart/crosshairs/crosshair_x.js +++ /dev/null @@ -1,211 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { AbstractSeries, Crosshair } from 'react-vis'; -import { SCALE } from '../utils/chart_utils'; -import moment from 'moment'; -/** - * The Crosshair used by the XYChart as main tooltip mechanism along X axis (vertical). - */ -export class EuiCrosshairX extends AbstractSeries { - state = { - values: [], - }; - - static get requiresSVG() { - return false; - } - - static get isCanvas() { - return false; - } - - static getDerivedStateFromProps(props) { - const { crosshairValue, _allData } = props; - - if (crosshairValue !== undefined) { - return { - values: EuiCrosshairX._computeDataFromXValue(_allData, crosshairValue), - }; - } - return null; - } - - static _computeDataFromXValue(dataSeries, crosshairValue) { - const filteredAndFlattenDataByX = dataSeries - .filter(series => series) // get only cleaned data series - .map((series, seriesIndex) => { - return series - .filter(dataPoint => dataPoint.x === crosshairValue) - .map(dataPoint => ({ - ...dataPoint, - originalValues: { ...dataPoint }, - seriesIndex, - })); - }) - .reduce((acc, val) => acc.concat(val), []); - return filteredAndFlattenDataByX; - } - - onParentMouseMove(event) { - this._handleNearestX(event); - } - - onParentMouseLeave() { - if (this.props.onCrosshairUpdate) { - this.props.onCrosshairUpdate(null); - } - this.setState({ - values: [], - }); - } - - _formatXValue = x => { - const { xType, xCrosshairFormat } = this.props; - if (xType === SCALE.TIME || xType === SCALE.TIME_UTC) { - return xCrosshairFormat - ? moment(x).format(xCrosshairFormat) - : new Date(x).toISOString(); - } else { - return x; - } - }; - - _titleFormat = (dataPoints = []) => { - if (dataPoints.length > 0) { - const [firstDataPoint] = dataPoints; - const { originalValues } = firstDataPoint; - const value = - typeof originalValues.x0 === 'number' - ? `${this._formatXValue(originalValues.x0)} to ${this._formatXValue( - originalValues.x - )}` - : this._formatXValue(originalValues.x); - return { - title: 'X Value', - value, - }; - } - }; - - _itemsFormat = dataPoints => { - const { seriesNames } = this.props; - - return dataPoints.map(d => { - return { - title: seriesNames[d.seriesIndex], - 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 - 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 - let globalMinDistance = Number.POSITIVE_INFINITY; - - const nearestXData = dataSeries - .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); - // 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, - seriesIndex, - }; - }) - .filter(d => d); - - // filter and map nearest X data per dataseries to get only the nearet onces - 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 - 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, seriesIndex: value.seriesIndex }; - }); - const { onCrosshairUpdate } = this.props; - if (onCrosshairUpdate) { - onCrosshairUpdate(values[0].x); - } - - this.setState(() => ({ - values, - })); - } - - render() { - const { values } = this.state; - return ( - - ); - } -} - -EuiCrosshairX.displayName = 'EuiCrosshairX'; - -EuiCrosshairX.propTypes = { - /** - * 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, - xCrosshairFormat: PropTypes.string, -}; -EuiCrosshairX.defaultProps = {}; diff --git a/src/components/series_chart/crosshairs/crosshair_x.test.js b/src/components/series_chart/crosshairs/crosshair_x.test.js deleted file mode 100644 index 41302bb1a31b..000000000000 --- a/src/components/series_chart/crosshairs/crosshair_x.test.js +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import moment from 'moment'; -import { EuiSeriesChart } from '../series_chart'; -import { EuiVerticalBarSeries } from '../series/vertical_bar_series'; -import { EuiCrosshairX } from './'; -import { requiredProps } from '../../../test/required_props'; -import { Crosshair } from 'react-vis'; -import { EuiHistogramSeries } from '../series'; -import { EuiSeriesChartUtils } from '../utils'; - -const { SCALE } = EuiSeriesChartUtils; - -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: 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: 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'); - }); - - test('x crosshair formats ISO string by default', () => { - const openRange = 1074199386000; - const closeRange = 1074210186000; - const data = [ - { x0: 1074188586000, x: openRange, y: 1.5 }, - { x0: 1074199386000, x: closeRange, y: 2 }, - ]; - const startRangeString = new Date(openRange).toISOString(); - const endRangeString = new Date(closeRange).toISOString(); - const component = mount( - - - - ); - component - .find('rect') - .at(0) - .simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); - const crosshair = component.find('.rv-crosshair'); - expect(crosshair).toHaveLength(1); - expect(crosshair.text()).toContain( - `${startRangeString} to ${endRangeString}` - ); - }); - - test('x crosshair adheres to custom formatting', () => { - const openRange = 1074199386000; - const closeRange = 1074210186000; - const data = [ - { x0: 1074188586000, x: openRange, y: 1.5 }, - { x0: 1074199386000, x: closeRange, y: 2 }, - ]; - const momentFormat = 'YYYY-MM-DD hh:mmZ'; - const startRangeString = moment(openRange).format(momentFormat); - const endRangeString = moment(closeRange).format(momentFormat); - const component = mount( - - - - ); - component - .find('rect') - .at(0) - .simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); - const crosshair = component.find('.rv-crosshair'); - expect(crosshair).toHaveLength(1); - expect(crosshair.text()).toContain( - `${startRangeString} to ${endRangeString}` - ); - }); -}); diff --git a/src/components/series_chart/crosshairs/crosshair_y.js b/src/components/series_chart/crosshairs/crosshair_y.js deleted file mode 100644 index 79815d3d56df..000000000000 --- a/src/components/series_chart/crosshairs/crosshair_y.js +++ /dev/null @@ -1,393 +0,0 @@ -/* - * 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'; -import { SCALE } from '../utils/chart_utils'; -import moment from 'moment'; - -/** - * 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'; - -/** - * The Crosshair used by the XYChart as main tooltip mechanism along Y axis (horizontal). - */ -export class EuiCrosshairY extends AbstractSeries { - state = { - values: [], - }; - - static get requiresSVG() { - return false; - } - - static get isCanvas() { - return false; - } - - static getDerivedStateFromProps(props) { - const { crosshairValue, _allData } = props; - - if (crosshairValue !== undefined) { - return { - values: EuiCrosshairY._computeDataFromYValue(_allData, crosshairValue), - }; - } - return null; - } - - static _computeDataFromYValue(dataSeries, crosshairValue) { - const filteredAndFlattenDataByY = dataSeries - .filter(series => series) // get only cleaned data series - .map((series, seriesIndex) => { - return series - .filter(dataPoint => dataPoint.y === crosshairValue) - .map(dataPoint => ({ - ...dataPoint, - originalValues: { ...dataPoint }, - seriesIndex, - })); - }) - .reduce((acc, val) => acc.concat(val), []); - return filteredAndFlattenDataByY; - } - - onParentMouseMove(event) { - this._handleNearestY(event); - } - - onParentMouseLeave() { - if (this.props.onCrosshairUpdate) { - this.props.onCrosshairUpdate(null); - } - this.setState({ - values: [], - }); - } - _formatYValue = y => { - const { yType, yCrosshairFormat } = this.props; - if (yType === SCALE.TIME || yType === SCALE.TIME_UTC) { - return yCrosshairFormat - ? moment(y).format(yCrosshairFormat) - : new Date(y).toISOString(); - } else { - return y; - } - }; - - _titleFormat = (dataPoints = []) => { - if (dataPoints.length > 0) { - const [firstDataPoint] = dataPoints; - const { originalValues } = firstDataPoint; - const value = - typeof originalValues.y0 === 'number' - ? `${this._formatYValue(originalValues.y0)} to ${this._formatYValue( - originalValues.y - )}` - : this._formatYValue(originalValues.y); - return { - title: 'Y Value', - value, - }; - } - }; - - _itemsFormat = dataPoints => { - const { seriesNames } = this.props; - return dataPoints.map(d => { - return { - title: seriesNames[d.seriesIndex], - 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, 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); - // 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({ y: 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, - seriesIndex, - }; - }) - .filter(d => d); - - // filter and map nearest X data per dataseries to get only the nearet onces - 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 - 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, seriesIndex: value.seriesIndex }; - }); - const { onCrosshairUpdate } = this.props; - if (onCrosshairUpdate) { - onCrosshairUpdate(values[0].y); - } - - this.setState(() => ({ - values, - })); - } - - render() { - const { values } = this.state; - return ( - - ); - } -} - -EuiCrosshairY.displayName = 'EuiCrosshairY'; - -EuiCrosshairY.propTypes = { - /** - * 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, - yCrosshairFormat: PropTypes.string, -}; -EuiCrosshairY.defaultProps = {}; diff --git a/src/components/series_chart/crosshairs/crosshair_y.test.js b/src/components/series_chart/crosshairs/crosshair_y.test.js deleted file mode 100644 index e2e860d076d1..000000000000 --- a/src/components/series_chart/crosshairs/crosshair_y.test.js +++ /dev/null @@ -1,132 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import moment from 'moment'; -import { EuiSeriesChart } from '../series_chart'; -import { EuiHorizontalBarSeries } from '../series/horizontal_bar_series'; -import { EuiCrosshairY } from './'; -import { CrosshairY } from './crosshair_y'; -import { requiredProps } from '../../../test/required_props'; -import { EuiHistogramSeries } from '../series'; -import { EuiSeriesChartUtils } from '../utils'; - -const { SCALE } = EuiSeriesChartUtils; - -describe('EuiCrosshairY', () => { - 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'); - }); - - test('y crosshair formats ISO string by default', () => { - const openRange = 1074188586000; - const closeRange = 1074199386000; - const data = [ - { y0: openRange, y: 1074199386000, x: 1.5 }, - { y0: closeRange, y: 1074210186000, x: 2 }, - ]; - const startRangeString = new Date(openRange).toISOString(); - const endRangeString = new Date(closeRange).toISOString(); - const component = mount( - - - - ); - component - .find('rect') - .at(0) - .simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); - const crosshair = component.find('.rv-crosshair'); - expect(crosshair).toHaveLength(1); - expect(crosshair.text()).toContain( - `${startRangeString} to ${endRangeString}` - ); - }); - - test('y crosshair formats ISO string by default', () => { - const openRange = 1074188586000; - const closeRange = 1074199386000; - const data = [ - { y0: openRange, y: 1074199386000, x: 1.5 }, - { y0: closeRange, y: 1074210186000, x: 2 }, - ]; - const momentFormat = 'YYYY-MM-DD hh:mmZ'; - const startRangeString = moment(openRange).format(momentFormat); - const endRangeString = moment(closeRange).format(momentFormat); - const component = mount( - - - - ); - component - .find('rect') - .at(0) - .simulate('mousemove', { nativeEvent: { clientX: 351, clientY: 100 } }); - const crosshair = component.find('.rv-crosshair'); - expect(crosshair).toHaveLength(1); - expect(crosshair.text()).toContain( - `${startRangeString} to ${endRangeString}` - ); - }); -}); diff --git a/src/components/series_chart/crosshairs/index.js b/src/components/series_chart/crosshairs/index.js deleted file mode 100644 index 7eb5f347a4c1..000000000000 --- a/src/components/series_chart/crosshairs/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { EuiCrosshairX } from './crosshair_x'; -export { EuiCrosshairY } from './crosshair_y'; diff --git a/src/components/series_chart/index.js b/src/components/series_chart/index.js deleted file mode 100644 index d32c20eab598..000000000000 --- a/src/components/series_chart/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export { EuiSeriesChart } from './series_chart'; -export { EuiLineAnnotation } from './line_annotation'; - -// 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/series_chart/legend.js b/src/components/series_chart/legend.js deleted file mode 100644 index 614028c577fd..000000000000 --- a/src/components/series_chart/legend.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import LegendItem from './legend_item'; - -const Title = ({ children }) => ( -
{children}
-); -const Container = ({ children }) => ( -
{children}
-); -const LegendContent = ({ children }) => ( -
{children}
-); -const TruncatedLabel = ({ children }) => ( -
{children}
-); -const SeriesValue = ({ children }) => ( -
{children}
-); -const MoreSeriesContainer = ({ children }) => ( -
{children}
-); - -function MoreSeries({ hiddenSeries }) { - if (hiddenSeries <= 0) { - return null; - } - - return (+{hiddenSeries}); -} - -export default function Legends({ - chartTitle, - truncateLegends, - series, - hiddenSeries, - clickLegend, - seriesVisibility, -}) { - return ( -
- {chartTitle} - - {series - .filter(serie => !serie.isEmpty) - .map((serie, i) => { - const text = ( - - {truncateLegends ? ( - - {serie.title} - - ) : ( - serie.title - )} - {serie.legendValue && ( - {serie.legendValue} - )} - - ); - return ( - clickLegend(i)} - disabled={seriesVisibility[i]} - text={text} - color={serie.color} - /> - ); - })} - - -
- ); -} diff --git a/src/components/series_chart/legend_item.js b/src/components/series_chart/legend_item.js deleted file mode 100644 index e5253cd17869..000000000000 --- a/src/components/series_chart/legend_item.js +++ /dev/null @@ -1,46 +0,0 @@ -import React, { PureComponent } from 'react'; - -const Container = ({ children, disabled }) => ( -
- {children} -
-); - -const Indicator = ({ children, color }) => ( - - {children} - -); - -export default class Legend extends PureComponent { - render() { - const { - onClick, - color, - text, - fontSize, - radius, - disabled = false, - className, - } = this.props; - - return ( - - - {text} - - ); - } -} diff --git a/src/components/series_chart/line_annotation.js b/src/components/series_chart/line_annotation.js deleted file mode 100644 index 0b0a66723443..000000000000 --- a/src/components/series_chart/line_annotation.js +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { AbstractSeries, ScaleUtils } from 'react-vis'; -import { EuiSeriesChartUtils } from './utils/chart_utils'; -import { EuiSeriesChartAxisUtils } from './utils/axis_utils'; -const { HORIZONTAL, VERTICAL } = EuiSeriesChartUtils.ORIENTATION; -const { START, MIDDLE, END } = EuiSeriesChartAxisUtils.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/series_chart/selection_brush.js b/src/components/series_chart/selection_brush.js deleted file mode 100644 index 323cb2fea1cd..000000000000 --- a/src/components/series_chart/selection_brush.js +++ /dev/null @@ -1,221 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { ScaleUtils, AbstractSeries } from 'react-vis'; -import { ORIENTATION, SCALE } from './utils/chart_utils'; -const { HORIZONTAL, VERTICAL, BOTH } = ORIENTATION; - -const DEFAULT_AREAS = { - areaSize: 0, - drawArea: { - x0: 0, - x1: 0, - y0: 0, - y1: 0, - }, - rectArea: { - x: 0, - y: 0, - width: 0, - height: 0, - }, -}; - -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; - const yLocation = offsetY - marginTop; - const xLocation = offsetX - marginLeft; - let x0; - let y0; - if (isStartingPoint) { - x0 = orientation === VERTICAL ? 0 : xLocation; - y0 = orientation === HORIZONTAL ? 0 : yLocation; - } else { - x0 = this.state.drawArea.x0; - y0 = this.state.drawArea.y0; - } - 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, - y0, - y1, - }, - rectArea: { - x: x0 < x1 ? x0 : x1, - y: y0 < y1 ? y0 : y1, - width: x0 < x1 ? x1 - x0 : x0 - x1, - height: y0 < y1 ? y1 - y0 : y0 - y1, - }, - }; - } - - _getScaledValue(scale, scaleType, value0, value1) { - switch (scaleType) { - case SCALE.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; - const drawAndRectAreas = this._getDrawArea(offsetX, offsetY, true); - this.setState(() => ({ - drawing: true, - ...drawAndRectAreas, - })); - - if (onBrushStart) { - onBrushStart(drawAndRectAreas); - } - }; - - _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, - })); - - if (onBrushing) { - onBrushing(drawAndRectAreas); - } - } else { - this.setState(() => ({ - drawing: false, - ...DEFAULT_AREAS, - })); - } - }; - - _stopDrawing = () => { - // Quickly short-circuit if the user isn't drawing in our component - const { drawing } = this.state; - if (!drawing) { - return; - } - - // Clear the draw area - this.setState(() => ({ - drawing: false, - ...DEFAULT_AREAS, - })); - - // Don't invoke the callback if the selected area was < 25 square px. - // This is a click not a select - const { areaSize } = this.state; - if (areaSize < 25) { - return; - } - const { drawArea } = this.state; - const { x0, y0, x1, y1 } = drawArea; - 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: xValues[0], - endX: xValues[1], - startY: yValues[1], - endY: yValues[0], - }; - - if (onBrushEnd) { - onBrushEnd({ - domainArea, - drawArea, - }); - } - }; - - render() { - const { marginLeft, marginTop, color, opacity } = this.props; - const { - rectArea: { x, y, width, height }, - } = this.state; - return ( - - - - ); - } -} - -EuiSelectionBrush.displayName = 'EuiSelectionBrush'; - -EuiSelectionBrush.propTypes = { - /** Specify the brush orientation */ - orientation: PropTypes.oneOf([HORIZONTAL, VERTICAL, BOTH]), - /** Callback on brush start event. */ - onBrushStart: PropTypes.func, - /** Callback on every mouse move event. */ - onBrushing: PropTypes.func, - /** Callback on brush end event. */ - onBrushEnd: PropTypes.func.isRequired, - /** The color of the brush rectangle */ - color: PropTypes.string, - /** The opacity of the brush rectangle*/ - opacity: PropTypes.number, -}; - -EuiSelectionBrush.defaultProps = { - orientation: HORIZONTAL, - color: 'black', - opacity: 0.2, -}; diff --git a/src/components/series_chart/selection_brush.test.js b/src/components/series_chart/selection_brush.test.js deleted file mode 100644 index 28eb0cac9b9c..000000000000 --- a/src/components/series_chart/selection_brush.test.js +++ /dev/null @@ -1,453 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; - -import { EuiSeriesChart } from './series_chart'; -import { EuiSelectionBrush } from './selection_brush'; -import { EuiVerticalBarSeries } from './series'; -import { ORIENTATION, SCALE } from './utils/chart_utils'; - -const NOOP = () => {}; -const DEFAULT_MARGINS = { - left: 40, - right: 10, - top: 10, - bottom: 40, -}; - -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: 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 - 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); - 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 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: 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 - 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: 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); - 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: 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(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: 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); - 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: 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 = { - 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); - }); -}); diff --git a/src/components/series_chart/series/__snapshots__/area_series.test.js.snap b/src/components/series_chart/series/__snapshots__/area_series.test.js.snap deleted file mode 100644 index f91b6f2193f8..000000000000 --- a/src/components/series_chart/series/__snapshots__/area_series.test.js.snap +++ /dev/null @@ -1,4151 +0,0 @@ -// 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 - - - - - - - - - - - - - - - - - - - - - - - - - - - 5 - - - - - - 6 - - - - - - 7 - - - - - - 8 - - - - - - 9 - - - - - - 10 - - - - - - - - - - - - - - - - -
- -
- -
- -`; diff --git a/src/components/series_chart/series/__snapshots__/horizontal_bar_series.test.js.snap b/src/components/series_chart/series/__snapshots__/horizontal_bar_series.test.js.snap deleted file mode 100644 index e67056678471..000000000000 --- a/src/components/series_chart/series/__snapshots__/horizontal_bar_series.test.js.snap +++ /dev/null @@ -1,1150 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiHorizontalBarSeries 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 - - - - - - 5 - - - - - - 10 - - - - - - 15 - - - - - - 20 - - - - - -
-
-
-`; - -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 - - - - - -
-
-
-`; - -exports[`EuiHorizontalBarSeries renders stacked bar chart 1`] = ` -
-
-
- - - - - - - - - - - - - - - - - - - - - - - 0 - - - - - - 1 - - - - - - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - -
-
-
-`; diff --git a/src/components/series_chart/series/__snapshots__/horizontal_rect_series.test.js.snap b/src/components/series_chart/series/__snapshots__/horizontal_rect_series.test.js.snap deleted file mode 100644 index d23051b186f0..000000000000 --- a/src/components/series_chart/series/__snapshots__/horizontal_rect_series.test.js.snap +++ /dev/null @@ -1,1231 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -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 - - - - - -
-
-
-`; - -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 - - - - - -
-
-
-`; - -exports[`EuiHorizontalRectSeries renders stacked bar chart 1`] = ` -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - 0 - - - - - - 1 - - - - - - - - - - - 3 - - - - - - 4 - - - - - - 5 - - - - - - 6 - - - - - - 7 - - - - - - 8 - - - - - - 9 - - - - - - 10 - - - - - -
-
-
-`; diff --git a/src/components/series_chart/series/__snapshots__/line_series.test.js.snap b/src/components/series_chart/series/__snapshots__/line_series.test.js.snap deleted file mode 100644 index 5fef54fa7e24..000000000000 --- a/src/components/series_chart/series/__snapshots__/line_series.test.js.snap +++ /dev/null @@ -1,8234 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -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 - - - - - - - - - - - - - - - - -
- -
- -
- -`; diff --git a/src/components/series_chart/series/__snapshots__/vertical_bar_series.test.js.snap b/src/components/series_chart/series/__snapshots__/vertical_bar_series.test.js.snap deleted file mode 100644 index 7805ce7545a2..000000000000 --- a/src/components/series_chart/series/__snapshots__/vertical_bar_series.test.js.snap +++ /dev/null @@ -1,1299 +0,0 @@ -// 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 - - - - - -
-
-
-`; - -exports[`EuiVerticalBarSeries renders stacked bar chart 1`] = ` -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - 0 - - - - - - 1 - - - - - - - - - - - 0 - - - - - - 2 - - - - - - 4 - - - - - - 6 - - - - - - 8 - - - - - - 10 - - - - - -
-
-
-`; diff --git a/src/components/series_chart/series/__snapshots__/vertical_rect_series.test.js.snap b/src/components/series_chart/series/__snapshots__/vertical_rect_series.test.js.snap deleted file mode 100644 index 9ae783f9375c..000000000000 --- a/src/components/series_chart/series/__snapshots__/vertical_rect_series.test.js.snap +++ /dev/null @@ -1,1339 +0,0 @@ -// 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/series_chart/series/_area_series.scss b/src/components/series_chart/series/_area_series.scss deleted file mode 100644 index 49eaa94b2863..000000000000 --- a/src/components/series_chart/series/_area_series.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiAreaSeries { - stroke-width: 0 !important; -} diff --git a/src/components/series_chart/series/_bar_series.scss b/src/components/series_chart/series/_bar_series.scss deleted file mode 100644 index edebd5d9f3f1..000000000000 --- a/src/components/series_chart/series/_bar_series.scss +++ /dev/null @@ -1,27 +0,0 @@ -// NOTE: opacity, stroke and fill are style by code inside react-vis -// we can overwrite and add !important for force svg styled component -// or overwrite style by code. - -.euiBarSeries { - rect { - stroke-width: 1; - stroke: white !important; - rx: 2; - ry: 2; - } -} - -.euiBarSeries--highDataVolume { - rect { - stroke-width: 0; - rx: 0; - ry: 0; - } -} -.euiBarSeries--hoverEnabled { - rect{ - &:hover { - cursor: pointer; - } - } -} diff --git a/src/components/series_chart/series/_histogram_series.scss b/src/components/series_chart/series/_histogram_series.scss deleted file mode 100644 index 9118a97865b6..000000000000 --- a/src/components/series_chart/series/_histogram_series.scss +++ /dev/null @@ -1,27 +0,0 @@ -// NOTE: opacity, stroke and fill are style by code inside react-vis -// we can overwrite and add !important for force svg styled component -// or overwrite style by code. - -.euiHistogramSeries { - rect { - stroke-width: 1; - stroke: white !important; - rx: 2; - ry: 2; - } -} - -.euiHistogramSeries--highDataVolume { - rect { - stroke-width: 0; - rx: 0; - ry: 0; - } -} -.euiHistogramSeries--hoverEnabled { - rect{ - &:hover { - cursor: pointer; - } - } -} diff --git a/src/components/series_chart/series/_index.scss b/src/components/series_chart/series/_index.scss deleted file mode 100644 index d497bbbf7411..000000000000 --- a/src/components/series_chart/series/_index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "area_series"; -@import "bar_series"; -@import "histogram_series"; diff --git a/src/components/series_chart/series/area_series.js b/src/components/series_chart/series/area_series.js deleted file mode 100644 index 67adfd1d95ca..000000000000 --- a/src/components/series_chart/series/area_series.js +++ /dev/null @@ -1,112 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { AreaSeries, AbstractSeries, LineSeries } from 'react-vis'; -import { CURVE } from '../utils/chart_utils'; - -// 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 { -// _renderArea(data, x, y0, y, curve, getNull) { -// const x0 = this._getAttr0Functor('x'); -// let area = d3Area(); -// if (curve !== null) { -// if (typeof curve === 'string' && curves[curve]) { -// area = area.curve(curves[curve]); -// } else if (typeof curve === 'function') { -// area = area.curve(curve); -// } -// } -// console.log(Object.getPrototypeOf(this)) -// area = area.defined(getNull); -// area = area -// .x1(x) -// .x0(x0) // this is required for displaying vertical area charts. -// .y0(y0) -// .y1(y); -// return area(data); -// } -// } - -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, - lineSize, - onSeriesClick, - fillOpacity, - ...rest - } = this.props; - return ( - - - - - ); - } -} -EuiAreaSeries.displayName = 'EuiAreaSeries'; -EuiAreaSeries.propTypes = { - /** 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({ - x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - }) - ).isRequired, - /** See eui_palettes.js or colorPalette service for recommended colors */ - color: PropTypes.string, - curve: PropTypes.oneOf(Object.values(CURVE)), - onSeriesClick: PropTypes.func, - lineSize: PropTypes.number, - fillOpacity: PropTypes.number, -}; - -EuiAreaSeries.defaultProps = { - curve: CURVE.LINEAR, - lineSize: 1, - fillOpacity: 1, -}; diff --git a/src/components/series_chart/series/area_series.test.js b/src/components/series_chart/series/area_series.test.js deleted file mode 100644 index 9340713d9aea..000000000000 --- a/src/components/series_chart/series/area_series.test.js +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react'; -import { mount, render } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../../test/patch_random'; -import { requiredProps } from '../../../test/required_props'; - -import { EuiSeriesChart } from '../series_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('all props are rendered', () => { - const component = mount( - - - - ); - - expect(component).toMatchSnapshot(); - }); - - test('call onSeriesClick', () => { - const data = [{ x: 0, y: 5 }, { x: 1, y: 3 }]; - const onSeriesClick = jest.fn(); - const component = mount( - - - - ); - component - .find('path') - .at(0) - .simulate('click'); - expect(onSeriesClick.mock.calls).toHaveLength(1); - }); - - describe('performance', () => { - it.skip('renders 1000 items in under 1 second', () => { - 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 ~150ms on a MacBookPro - expect(runtime).toBeLessThan(1000); - }); - - 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 ~2150 on a MacBookPro - expect(runtime).toBeLessThan(3000); - }); - }); -}); diff --git a/src/components/series_chart/series/bar_series.js b/src/components/series_chart/series/bar_series.js deleted file mode 100644 index 45f4f2ff284e..000000000000 --- a/src/components/series_chart/series/bar_series.js +++ /dev/null @@ -1,92 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { - VerticalBarSeries, - HorizontalBarSeries, - AbstractSeries, -} from 'react-vis'; -import { ORIENTATION } from '../utils/chart_utils'; -import classNames from 'classnames'; - -export class EuiBarSeries extends AbstractSeries { - state = { - isMouseOverValue: false, - }; - static getParentConfig(attr, props) { - 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 { - _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 ( - - ); - } -} - -EuiBarSeries.displayName = 'EuiBarSeries'; - -EuiBarSeries.propTypes = { - /** - * The name used to define the data in tooltips and legends - */ - name: PropTypes.string.isRequired, - /** - * 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, PropTypes.number]), - y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - }) - ).isRequired, - /** See eui_palettes.js or colorPalette service for recommended colors */ - color: PropTypes.string, - /** - * @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/series_chart/series/histogram_series.js b/src/components/series_chart/series/histogram_series.js deleted file mode 100644 index 5f8d7a381c7b..000000000000 --- a/src/components/series_chart/series/histogram_series.js +++ /dev/null @@ -1,88 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { - VerticalRectSeries, - HorizontalRectSeries, - AbstractSeries, -} from 'react-vis'; -import { ORIENTATION } from '../utils/chart_utils'; -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, - /** See eui_palettes.js or colorPalette service for recommended colors */ - color: PropTypes.string, - - /** - * @private passed via XYChart - */ - // _orientation: PropTypes.string, - /** - * Callback when clicking on a bar. Returns { x, y } object. - */ - onValueClick: PropTypes.func, -}; - -EuiHistogramSeries.defaultProps = {}; diff --git a/src/components/series_chart/series/horizontal_bar_series.js b/src/components/series_chart/series/horizontal_bar_series.js deleted file mode 100644 index 935432d2fa12..000000000000 --- a/src/components/series_chart/series/horizontal_bar_series.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { HorizontalBarSeries } from 'react-vis'; -import classNames from 'classnames'; - -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; - const isHighDataVolume = data.length > 80 ? true : false; - const classes = classNames( - 'euiBarSeries', - isHighDataVolume && 'euiBarSeries--highDataVolume', - isMouseOverValue && onValueClick && 'euiBarSeries--hoverEnabled' - ); - return ( - - ); - } -} - -EuiHorizontalBarSeries.displayName = 'EuiHorizontalBarSeries'; - -EuiHorizontalBarSeries.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.number, - y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - }) - ).isRequired, - /** See eui_palettes.js or colorPalette service for recommended colors */ - color: PropTypes.string, - /** - * Callback when clicking on a bar. Returns { x, y } object. - */ - onValueClick: PropTypes.func, -}; - -EuiHorizontalBarSeries.defaultProps = {}; diff --git a/src/components/series_chart/series/horizontal_bar_series.test.js b/src/components/series_chart/series/horizontal_bar_series.test.js deleted file mode 100644 index c4898c05a570..000000000000 --- a/src/components/series_chart/series/horizontal_bar_series.test.js +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import { render, mount } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../../test/patch_random'; -import { requiredProps } from '../../../test/required_props'; - -import { EuiSeriesChart } from '../series_chart'; -import { EuiHorizontalBarSeries } from './horizontal_bar_series'; -import { VISUALIZATION_COLORS } from '../../../services'; - -beforeEach(patchRandom); -afterEach(unpatchRandom); - -describe('EuiHorizontalBarSeries', () => { - 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('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( - - {}} - /> - - ); - - 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/series_chart/series/horizontal_rect_series.js b/src/components/series_chart/series/horizontal_rect_series.js deleted file mode 100644 index 1616d564a4b5..000000000000 --- a/src/components/series_chart/series/horizontal_rect_series.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { HorizontalRectSeries } from 'react-vis'; -import classNames from 'classnames'; - -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; - const isHighDataVolume = data.length > 80 ? true : false; - const classes = classNames( - 'euiHistogramSeries', - isHighDataVolume && 'euiHistogramSeries--highDataVolume', - isMouseOverValue && onValueClick && 'euiHistogramSeries--hoverEnabled' - ); - return ( - - ); - } -} - -EuiHorizontalRectSeries.displayName = 'EuiHorizontalRectSeries'; - -EuiHorizontalRectSeries.propTypes = { - /** The name used to define the data in tooltips and legends */ - name: PropTypes.string.isRequired, - /** Array<{x: number, y: number, y0: number}> */ - data: PropTypes.arrayOf( - PropTypes.shape({ - x: PropTypes.number, - y: PropTypes.number, - y0: PropTypes.number, - }) - ).isRequired, - /** See eui_palettes.js or colorPalette service for recommended colors */ - color: PropTypes.string, - /** - * Callback when clicking on a bar. Returns { x, y } object. - */ - onValueClick: PropTypes.func, -}; - -EuiHorizontalRectSeries.defaultProps = {}; diff --git a/src/components/series_chart/series/horizontal_rect_series.test.js b/src/components/series_chart/series/horizontal_rect_series.test.js deleted file mode 100644 index 6f274ab66c48..000000000000 --- a/src/components/series_chart/series/horizontal_rect_series.test.js +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import { render, mount } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../../test/patch_random'; -import { requiredProps } from '../../../test/required_props'; - -import { EuiSeriesChart } from '../series_chart'; -import { EuiHorizontalRectSeries } from './horizontal_rect_series'; -import { VISUALIZATION_COLORS } from '../../../services'; - -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('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( - - {}} - /> - {}} - /> - - ); - 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/series_chart/series/index.js b/src/components/series_chart/series/index.js deleted file mode 100644 index 4eb1e6c4f76e..000000000000 --- a/src/components/series_chart/series/index.js +++ /dev/null @@ -1,8 +0,0 @@ -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'; -export { EuiHorizontalRectSeries } from './horizontal_rect_series'; diff --git a/src/components/series_chart/series/line_series.js b/src/components/series_chart/series/line_series.js deleted file mode 100644 index 7208cddf53ba..000000000000 --- a/src/components/series_chart/series/line_series.js +++ /dev/null @@ -1,99 +0,0 @@ -import React, { Fragment } from 'react'; -import PropTypes from 'prop-types'; -import { LineSeries, MarkSeries, AbstractSeries } from 'react-vis'; -import { CURVE } from '../utils/chart_utils'; - -export class EuiLineSeries extends AbstractSeries { - render() { - const { - data, - name, - curve, - onSeriesClick, - onValueClick, - showLineMarks, - lineSize, - lineMarkColor, - lineMarkSize, - color, - borderOpacity, - ...rest - } = this.props; - - return ( - - - - - {showLineMarks && ( - - )} - - ); - } -} - -EuiLineSeries.displayName = 'EuiLineSeries'; - -EuiLineSeries.propTypes = { - /** 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({ - x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - }) - ).isRequired, - /** See eui_palettes.js or colorPalette service for recommended colors */ - color: PropTypes.string, - curve: PropTypes.oneOf(Object.values(CURVE)), - showLineMarks: PropTypes.bool, - lineSize: PropTypes.number, - lineMarkColor: PropTypes.string, - lineMarkSize: PropTypes.number, - onSeriesClick: PropTypes.func, - onValueClick: PropTypes.func, - borderOpacity: PropTypes.number, -}; - -EuiLineSeries.defaultProps = { - curve: CURVE.LINEAR, - showLineMarks: false, - lineSize: 1, - lineMarkSize: 0, - borderOpacity: 1, -}; diff --git a/src/components/series_chart/series/line_series.test.js b/src/components/series_chart/series/line_series.test.js deleted file mode 100644 index e785193ffcdc..000000000000 --- a/src/components/series_chart/series/line_series.test.js +++ /dev/null @@ -1,151 +0,0 @@ -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 { EuiSeriesChart } from '../series_chart'; -import { EuiLineSeries } from './line_series'; -import { VISUALIZATION_COLORS } from '../../../services'; - -beforeEach(patchRandom); -afterEach(unpatchRandom); - -describe('EuiLineSeries', () => { - test('is rendered', () => { - const component = mount( - - - - ); - - expect(component).toMatchSnapshot(); - }); - - test('all props are rendered', () => { - const component = mount( - - {}} - onValueClick={() => {}} - /> - - ); - - 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', () => { - 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 ~120ms on a MacBookPro - expect(runtime).toBeLessThan(1000); - }); - - 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 ~1700ms on a MacBookPro - expect(runtime).toBeLessThan(3000); - }); - }); -}); diff --git a/src/components/series_chart/series/vertical_bar_series.js b/src/components/series_chart/series/vertical_bar_series.js deleted file mode 100644 index 81c0e02af40b..000000000000 --- a/src/components/series_chart/series/vertical_bar_series.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { VerticalBarSeries } from 'react-vis'; -import classNames from 'classnames'; - -export class EuiVerticalBarSeries extends VerticalBarSeries { - 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; - const isHighDataVolume = data.length > 80 ? true : false; - const classes = classNames( - 'euiBarSeries', - isHighDataVolume && 'euiBarSeries--highDataVolume', - isMouseOverValue && onValueClick && 'euiBarSeries--hoverEnabled' - ); - return ( - - ); - } -} - -EuiVerticalBarSeries.displayName = 'EuiVerticalBarSeries'; - -EuiVerticalBarSeries.propTypes = { - /** 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({ - x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - y: PropTypes.number, - }) - ).isRequired, - /** See eui_palettes.js or colorPalette service for recommended colors */ - color: PropTypes.string, - /** - * Callback when clicking on a bar. Returns { x, y } object. - */ - onValueClick: PropTypes.func, -}; - -EuiVerticalBarSeries.defaultProps = {}; diff --git a/src/components/series_chart/series/vertical_bar_series.test.js b/src/components/series_chart/series/vertical_bar_series.test.js deleted file mode 100644 index 09ae1a6e4b6d..000000000000 --- a/src/components/series_chart/series/vertical_bar_series.test.js +++ /dev/null @@ -1,179 +0,0 @@ -import React from 'react'; -import { render, mount } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../../test/patch_random'; -import { requiredProps } from '../../../test/required_props'; - -import { EuiSeriesChart } from '../series_chart'; -import { EuiVerticalBarSeries } from './vertical_bar_series'; -import { benchmarkFunction } from '../../../test/time_execution'; -import { VISUALIZATION_COLORS } from '../../../services'; - -beforeEach(patchRandom); -afterEach(unpatchRandom); - -describe('EuiVerticalBarSeries', () => { - 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(); - }); - 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', () => { - 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('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); - }); - }); -}); diff --git a/src/components/series_chart/series/vertical_rect_series.js b/src/components/series_chart/series/vertical_rect_series.js deleted file mode 100644 index e01a9308d089..000000000000 --- a/src/components/series_chart/series/vertical_rect_series.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { VerticalRectSeries } from 'react-vis'; -import classNames from 'classnames'; - -export class EuiVerticalRectSeries extends VerticalRectSeries { - 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; - const isHighDataVolume = data.length > 80 ? true : false; - const classes = classNames( - 'euiHistogramSeries', - isHighDataVolume && 'euiHistogramSeries--highDataVolume', - isMouseOverValue && onValueClick && 'euiHistogramSeries--hoverEnabled' - ); - return ( - - ); - } -} - -EuiVerticalRectSeries.displayName = 'EuiVerticalRectSeries'; - -EuiVerticalRectSeries.propTypes = { - /** The name used to define the data in tooltips and legends */ - name: PropTypes.string.isRequired, - /** Array<{x0: number, x: number, y: number}> */ - data: PropTypes.arrayOf( - PropTypes.shape({ - x0: PropTypes.number, - x: PropTypes.number, - y: PropTypes.number, - }) - ).isRequired, - /** See eui_palettes.js or colorPalette service for recommended colors */ - color: PropTypes.string, - /** - * Callback when clicking on a bar. Returns { x, y } object. - */ - onValueClick: PropTypes.func, -}; - -EuiVerticalRectSeries.defaultProps = {}; diff --git a/src/components/series_chart/series/vertical_rect_series.test.js b/src/components/series_chart/series/vertical_rect_series.test.js deleted file mode 100644 index 3cdee2228404..000000000000 --- a/src/components/series_chart/series/vertical_rect_series.test.js +++ /dev/null @@ -1,183 +0,0 @@ -import React from 'react'; -import { render, mount } from 'enzyme'; -import { patchRandom, unpatchRandom } from '../../../test/patch_random'; -import { requiredProps } from '../../../test/required_props'; - -import { EuiSeriesChart } from '../series_chart'; -import { EuiVerticalRectSeries } from './vertical_rect_series'; -import { benchmarkFunction } from '../../../test/time_execution'; -import { VISUALIZATION_COLORS } from '../../../services'; - -beforeEach(patchRandom); -afterEach(unpatchRandom); - -describe('EuiVerticalRectSeries', () => { - 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('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( - - {}} - /> - {}} - /> - - ); - expect(component.find('.rv-xy-plot__series')).toHaveLength(2); - expect(component.find('.rv-xy-plot__series--rect rect')).toHaveLength(4); - - 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); - }); - }); -}); diff --git a/src/components/series_chart/series_chart.js b/src/components/series_chart/series_chart.js deleted file mode 100644 index 80023f6e928b..000000000000 --- a/src/components/series_chart/series_chart.js +++ /dev/null @@ -1,249 +0,0 @@ -import React, { PureComponent } from 'react'; -import classNames from 'classnames'; -import { AbstractSeries, XYPlot } from 'react-vis'; -import { makeFlexible } from './utils/flexible'; -import PropTypes from 'prop-types'; -import { EuiEmptyPrompt } from '../empty_prompt'; -import { EuiSelectionBrush } from './selection_brush'; -import { EuiDefaultAxis } from './axis/default_axis'; -import { EuiCrosshairX } from './crosshairs/crosshair_x'; -import { EuiCrosshairY } from './crosshairs/crosshair_y'; -import { VISUALIZATION_COLORS } from '../../services'; -import { ORIENTATION, SCALE } from './utils/chart_utils'; -const { HORIZONTAL, VERTICAL, BOTH } = ORIENTATION; -const { LINEAR, ORDINAL, CATEGORY, TIME, TIME_UTC, LOG, LITERAL } = SCALE; - -const DEFAULT_MARGINS = { - left: 40, - right: 10, - top: 10, - bottom: 40, -}; - -/** - * 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, - }; - colorIterator = 0; - _xyPlotRef = React.createRef(); - - /** - * 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 - return prototype instanceof AbstractSeries; - } - - /** - * Render children adding a valid EUI visualization color if the color prop is not specified. - */ - _renderChildren(children) { - let colorIterator = 0; - - return React.Children.map(children, (child, i) => { - // Avoid applying color props to non series children - if (!this._isAbstractSeries(child)) { - return child; - } - - 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); - }); - } - _getSeriesNames = children => { - return React.Children.toArray(children) - .filter(this._isAbstractSeries) - .map(({ props: { name } }) => name); - }; - - render() { - const { - children, - width, - height, - margins, - xType, - xCrosshairFormat, - yCrosshairFormat, - yType, - stackBy, - statusText, - xDomain, - yDomain, - yPadding, - xPadding, - animateData, - showDefaultAxis, - showCrosshair, - enableSelectionBrush, - selectionBrushOrientation, - onSelectionBrushEnd, - orientation, - crosshairValue, - onCrosshairUpdate, - className, - ...rest - } = this.props; - - if (this._isEmptyPlot(children)) { - return ( - Chart not available} - body={

{statusText}

} - /> - ); - } - - const Crosshair = - orientation === HORIZONTAL ? EuiCrosshairY : EuiCrosshairX; - const seriesNames = this._getSeriesNames(children); - const classes = classNames(className, 'euiSeriesChartContainer'); - return ( -
- - {this._renderChildren(children)} - {showDefaultAxis && } - {showCrosshair && ( - - )} - - {enableSelectionBrush && ( - - )} - -
- ); - } -} -XYChart.displayName = 'EuiSeriesChart'; - -XYChart.propTypes = { - /** The initial width of the chart. */ - width: PropTypes.number.isRequired, - /** The initial height of the chart. */ - height: PropTypes.number.isRequired, - /** **experimental** The orientation of the chart. */ - orientation: PropTypes.oneOf([HORIZONTAL, VERTICAL]), - /** If the chart animates on data changes. */ - 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, - ]), - /** The formatting string for the X-axis. */ - xCrosshairFormat: PropTypes.string, - /** The formatting string for the Y-axis. */ - yCrosshairFormat: PropTypes.string, - /** The main y axis scale type. See https://github.com/uber/react-vis/blob/master/docs/scales-and-data.md*/ - 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. */ - 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, - /** Add an additional status text above the graph status message*/ - statusText: PropTypes.string, - /** Shows the crosshair tooltip on mouse move.*/ - showCrosshair: PropTypes.bool, - /** 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, - /** Show the default X and Y axis. */ - showDefaultAxis: PropTypes.bool, - /** Enable the brush tool */ - enableSelectionBrush: PropTypes.bool, - /** Specify the brush orientation */ - selectionBrushOrientation: PropTypes.oneOf([HORIZONTAL, VERTICAL, BOTH]), - /** Callback on brush end event with { begin, end } object returned. */ - onSelectionBrushEnd: PropTypes.func, -}; - -XYChart.defaultProps = { - animateData: true, - xType: 'linear', - yType: 'linear', - yPadding: 0, - xPadding: 0, - orientation: VERTICAL, - showCrosshair: true, - showDefaultAxis: true, - enableSelectionBrush: false, - selectionBrushOrientation: HORIZONTAL, - margins: DEFAULT_MARGINS, -}; - -export const EuiSeriesChart = makeFlexible(XYChart); diff --git a/src/components/series_chart/series_chart.test.js b/src/components/series_chart/series_chart.test.js deleted file mode 100644 index 48dd27382598..000000000000 --- a/src/components/series_chart/series_chart.test.js +++ /dev/null @@ -1,136 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; - -import { EuiSeriesChart } from './series_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('EuiSeriesChart', () => { - test('renders all props', () => { - const wrapper = mount( - - ); - const wrapperProps = wrapper.props(); - - expect(wrapper.find(EuiSeriesChart).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 - .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('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( - - {series.map((d, i) => ( - - ))} - - ); - - 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] - ); - }); -}); diff --git a/src/components/series_chart/status-text.js b/src/components/series_chart/status-text.js deleted file mode 100644 index 4d6656d4d240..000000000000 --- a/src/components/series_chart/status-text.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { EuiText } from '../text'; -import { EuiIcon } from '../icon'; - -function StatusText({ width, height, text }) { - return ( -
-
-
-
- {text && {text}} -
-
- ); -} - -StatusText.propTypes = { - text: PropTypes.string, -}; - -export default StatusText; diff --git a/src/components/series_chart/styles/react_vis/legends.scss b/src/components/series_chart/styles/react_vis/legends.scss deleted file mode 100644 index 45e8674dcabd..000000000000 --- a/src/components/series_chart/styles/react_vis/legends.scss +++ /dev/null @@ -1,134 +0,0 @@ -$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/series_chart/styles/react_vis/overrides.scss b/src/components/series_chart/styles/react_vis/overrides.scss deleted file mode 100644 index 48e8994f984c..000000000000 --- a/src/components/series_chart/styles/react_vis/overrides.scss +++ /dev/null @@ -1,17 +0,0 @@ -.rv-xy-plot { - width: 100% !important; // this because react-vis fix the width of the container in px - height: 100% !important; // avoid a correct computation of the component size -} - -// NOTE: the current implementation of react-vis doesn't supports -// adding classes to grid lines but only a style prop is supported. -// We can overwrite here the original react-vis class or overwrite -// togheter with all other scss properties. - -.rv-xy-plot__grid-lines__line { - - stroke-dasharray: 5 5; - stroke-opacity: 0.3; - // support a clean mouse over when grids is above elements - pointer-events: none; -} diff --git a/src/components/series_chart/styles/react_vis/plot.scss b/src/components/series_chart/styles/react_vis/plot.scss deleted file mode 100644 index e9896ac213a6..000000000000 --- a/src/components/series_chart/styles/react_vis/plot.scss +++ /dev/null @@ -1,128 +0,0 @@ -$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: $euiColorInk; - 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/series_chart/styles/react_vis/radial-chart.scss b/src/components/series_chart/styles/react_vis/radial-chart.scss deleted file mode 100644 index 854a57d4b67b..000000000000 --- a/src/components/series_chart/styles/react_vis/radial-chart.scss +++ /dev/null @@ -1,6 +0,0 @@ -.rv-radial-chart { - - .rv-xy-plot__series--label { - pointer-events: none; - } -} diff --git a/src/components/series_chart/styles/react_vis/treemap.scss b/src/components/series_chart/styles/react_vis/treemap.scss deleted file mode 100644 index 4626d66ea798..000000000000 --- a/src/components/series_chart/styles/react_vis/treemap.scss +++ /dev/null @@ -1,22 +0,0 @@ -.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/src/components/series_chart/tooltip.js b/src/components/series_chart/tooltip.js deleted file mode 100644 index cb3a473616ce..000000000000 --- a/src/components/series_chart/tooltip.js +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react'; -import { Hint } from 'react-vis'; -import PropTypes from 'prop-types'; -// import { -// colors, -// unit, -// units, -// px, -// borderRadius, -// fontSize, -// fontSizes -// } from '../../variables'; -// import Legend from '../../Legend/Legend'; - -// const TooltipElm = styled.div` -// margin: 0 ${px(unit)}; -// transform: translateY(-50%); -// border: 1px solid ${colors.gray4}; -// background: ${colors.white}; -// border-radius: ${borderRadius}; -// font-size: ${fontSize}; -// color: ${colors.black}; -// `; - -// const Header = styled.div` -// background: ${colors.gray5}; -// border-bottom: 1px solid ${colors.gray4}; -// border-radius: ${borderRadius} ${borderRadius} 0 0; -// padding: ${px(units.half)}; -// color: ${colors.gray3}; -// `; - -// const Legends = styled.div` -// display: flex; -// flex-direction: column; -// padding: ${px(units.half)}; -// padding: ${px(units.quarter)} ${px(unit)} ${px(units.quarter)} -// ${px(units.half)}; -// font-size: ${fontSizes.small}; -// `; - -// const LegendContainer = styled.div` -// display: flex; -// align-items: center; -// margin: ${px(units.quarter)} 0; -// justify-content: space-between; -// `; - -// const LegendGray = styled(Legend)` -// color: ${colors.gray3}; -// `; - -// const Value = styled.div` -// color: ${colors.gray2}; -// font-size: ${fontSize}; -// `; - -// -//
{header || moment(x).format('MMMM Do YYYY, HH:mm')}
-// -// {tooltipPoints.map((point, i) => ( -// -// -// {point.value} -// -// ))} -// -// ; - -export default function Tooltip({ tooltipPoints, x, y, ...props }) { - if (tooltipPoints.length === 0) { - return null; - } - return ; -} - -Tooltip.propTypes = { - header: PropTypes.string, - tooltipPoints: PropTypes.array.isRequired, - x: PropTypes.number, - y: PropTypes.number, -}; - -Tooltip.defaultProps = {}; diff --git a/src/components/series_chart/utils/axis_utils.js b/src/components/series_chart/utils/axis_utils.js deleted file mode 100644 index 663055119656..000000000000 --- a/src/components/series_chart/utils/axis_utils.js +++ /dev/null @@ -1,28 +0,0 @@ -import { AxisUtils } from 'react-vis'; - -/** - * Axis orientation. Can be top, bottom, left, right. - * See react-vis AxisUtils.ORIENTATION for docs. - */ -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. - */ -export const TITLE_POSITION = { - MIDDLE: 'middle', - START: 'start', - END: 'end', -}; - -export const EuiSeriesChartAxisUtils = { - TITLE_POSITION, - ORIENTATION, -}; diff --git a/src/components/series_chart/utils/chart_utils.js b/src/components/series_chart/utils/chart_utils.js deleted file mode 100644 index a8a1c0894c91..000000000000 --- a/src/components/series_chart/utils/chart_utils.js +++ /dev/null @@ -1,60 +0,0 @@ -/** - * Used to describe orientation. - */ -export const ORIENTATION = { - /** The main measure/value is along Y axis. Standard chart orientation. */ - VERTICAL: 'vertical', - /** The main measure/value is along X axis. Rotated 90 deg. */ - HORIZONTAL: 'horizontal', - /** Along both axis axis */ - BOTH: 'both', -}; - -/** - * Type of scales used in charts. - */ -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', - /** Ordinal scale, works with numbers and strings. - * Similar to [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales).*/ - ORDINAL: 'ordinal', - /** Categorical scale, each new value gets the next value from the range. - * Similar to d3.scale.category\[Number\], but works with other values besides colors. */ - CATEGORY: 'category', - /** Time scale. Similar to [d3.scaleTime](https://github.com/d3/d3-scale/blob/master/README.md#time-scales). */ - TIME: 'time', - /** Time UTC scale. Similar to [d3.scaleUtc](https://github.com/d3/d3-scale/blob/master/README.md#scaleUtc).*/ - TIME_UTC: 'time-utc', - /** Log scale. Similar to [d3.scaleLog](https://github.com/d3/d3-scale/blob/master/README.md#log-scales). */ - LOG: 'log', - /** Returns exactly the value that was given to it. - * Similar to [d3.scaleIdentity](https://github.com/d3/d3-scale#scaleIdentity), except that it does NOT coerce data into numbers. - * This is useful for precisely specifying properties in the data, eg color can be specified directly on the data. */ - LITERAL: 'literal', -}; - -/** - * 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 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 EuiSeriesChartUtils = { - ORIENTATION, - SCALE, - CURVE, -}; diff --git a/src/components/series_chart/utils/flexible.js b/src/components/series_chart/utils/flexible.js deleted file mode 100644 index c3fd02a31344..000000000000 --- a/src/components/series_chart/utils/flexible.js +++ /dev/null @@ -1,43 +0,0 @@ -import React, { PureComponent } from 'react'; -import ResizeObserver from 'resize-observer-polyfill'; - -export function makeFlexible(WrappedComponent) { - return class FlexibleEuiSeriesChart extends PureComponent { - constructor(props) { - super(props); - this.state = { - height: 0, - width: 0, - }; - this.containerRef = React.createRef(); - this.ro = new ResizeObserver(this.onResize); - } - - componentDidMount() { - this.ro.observe(this.containerRef.current); - } - - componentWillUnmount() { - this.ro.unobserve(this.containerRef.current); - } - - onResize = entries => { - entries.forEach(entry => { - const { width, height } = entry.contentRect; - const notifyWidth = this.state.width !== width; - const notifyHeight = this.state.height !== height; - if (notifyWidth || notifyHeight) { - this.setState({ width, height }); - } - }); - }; - - render() { - return ( -
- -
- ); - } - }; -} diff --git a/src/components/series_chart/utils/index.js b/src/components/series_chart/utils/index.js deleted file mode 100644 index 268fc831e848..000000000000 --- a/src/components/series_chart/utils/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { EuiSeriesChartUtils } from './chart_utils'; -export { EuiSeriesChartAxisUtils } from './axis_utils'; -export { EuiSeriesChartTextUtils } from './text_utils'; diff --git a/src/components/series_chart/utils/series_utils.js b/src/components/series_chart/utils/series_utils.js deleted file mode 100644 index ae8b3e1f944a..000000000000 --- a/src/components/series_chart/utils/series_utils.js +++ /dev/null @@ -1,34 +0,0 @@ -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) - ); -} - -export function rotateDataSeries(data) { - return data.map(d => { - return { - x: d.y, - y: d.x, - x0: d.y0, - y0: d.x0, - }; - }); -} diff --git a/src/components/series_chart/utils/text_utils.js b/src/components/series_chart/utils/text_utils.js deleted file mode 100644 index e8d03cbf2964..000000000000 --- a/src/components/series_chart/utils/text_utils.js +++ /dev/null @@ -1,34 +0,0 @@ -import React, { Fragment } from 'react'; - -/** - * 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} Return a Fragment of SVG tspan elements to be used inside axis label formatter. - */ -function labelWordWrap(text, width) { - const pieces = wordWrap(text, width); - return ( - - {pieces.map((piece, i) => { - return ( - - {piece} - - ); - })} - - ); -} - -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 EuiSeriesChartTextUtils = { - labelWordWrap, -}; diff --git a/src/components/series_chart/utils/visualization_color_type.js b/src/components/series_chart/utils/visualization_color_type.js deleted file mode 100644 index 46a6d7d1431f..000000000000 --- a/src/components/series_chart/utils/visualization_color_type.js +++ /dev/null @@ -1,16 +0,0 @@ -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' - ); - } -} diff --git a/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap new file mode 100644 index 000000000000..a3068051a5f8 --- /dev/null +++ b/src/components/suggest_item/__snapshots__/suggest_item.test.js.snap @@ -0,0 +1,86 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiSuggestItem is rendered 1`] = ` +
+ + + + + Test label + + +
+`; + +exports[`props item with no description has expanded label is rendered 1`] = ` +
+ + + + + This is the description + + +
+`; + +exports[`props labelDisplay as expand is rendered 1`] = ` +
+ + + + + This is the description + + + This is the description + +
+`; diff --git a/src/components/suggest_item/_index.scss b/src/components/suggest_item/_index.scss new file mode 100644 index 000000000000..c4dd928bb4e1 --- /dev/null +++ b/src/components/suggest_item/_index.scss @@ -0,0 +1,3 @@ +@import 'variables'; + +@import 'suggest_item'; diff --git a/src/components/suggest_item/_suggest_item.scss b/src/components/suggest_item/_suggest_item.scss new file mode 100644 index 000000000000..9f063b258899 --- /dev/null +++ b/src/components/suggest_item/_suggest_item.scss @@ -0,0 +1,68 @@ +.euiSuggestItem { + display: flex; + flex-grow: 1; + align-items: center; + font-size: $euiFontSizeXS; + white-space: nowrap; + + @each $name, $color in $itemColors { + .euiSuggestItem__type--#{$name} { + $backgroundColor: tintOrShade($color, 90%, 50%); + background-color: $backgroundColor; + color: makeHighContrastColor($color, $backgroundColor); + } + } + + .euiSuggestItem__label, + .euiSuggestItem__type, + .euiSuggestItem__description { + flex-grow: 0; + display: flex; + flex-direction: column; + } + + .euiSuggestItem__type { + position: relative; + flex-shrink: 0; + flex-basis: auto; + width: $euiSizeXL; + height: $euiSizeXL; + text-align: center; + overflow: hidden; + padding: $euiSizeXS; + justify-content: center; + align-items: center; + } + + .euiSuggestItem__label { + flex-basis: 50%; + min-width: 50%; + font-family: $euiCodeFontFamily; + overflow: hidden; + text-overflow: ellipsis; + padding: $euiSizeXS $euiSizeS; + color: $euiTextColor; + + &.euiSuggestItem__labelDisplay--expand { + flex-basis: auto; + flex-shrink: 1; + } + } + + .euiSuggestItem__description, + .euiSuggestItem__label { + @include euiTextTruncate; + display: block; + } + + .euiSuggestItem__description { + color: $euiColorDarkShade; + flex-basis: auto; + padding-top: $euiSizeXS * .5; + + &:empty { + flex-grow: 0; + margin-left: 0; + } + } +} diff --git a/src/components/suggest_item/_variables.scss b/src/components/suggest_item/_variables.scss new file mode 100644 index 000000000000..d90fa21260d6 --- /dev/null +++ b/src/components/suggest_item/_variables.scss @@ -0,0 +1,11 @@ +$itemColors: ( + tint0: $euiColorVis0, + tint1: $euiColorVis1, + tint2: $euiColorVis2, + tint3: $euiColorVis3, + tint4: $euiColorVis5, + tint5: $euiColorVis7, + tint6: $euiColorVis8, + tint7: $euiColorVis9, + tint8: $euiColorDarkShade, +); diff --git a/src/components/suggest_item/index.js b/src/components/suggest_item/index.js new file mode 100644 index 000000000000..fde821765792 --- /dev/null +++ b/src/components/suggest_item/index.js @@ -0,0 +1 @@ +export { EuiSuggestItem } from './suggest_item'; diff --git a/src/components/suggest_item/suggest_item.js b/src/components/suggest_item/suggest_item.js new file mode 100644 index 000000000000..0d396023414e --- /dev/null +++ b/src/components/suggest_item/suggest_item.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { EuiIcon, IconPropType } from '../icon'; + +const colorToClassNameMap = { + tint0: 'euiSuggestItem__type--tint0', + tint1: 'euiSuggestItem__type--tint1', + tint2: 'euiSuggestItem__type--tint2', + tint3: 'euiSuggestItem__type--tint3', + tint4: 'euiSuggestItem__type--tint4', + tint5: 'euiSuggestItem__type--tint5', + tint6: 'euiSuggestItem__type--tint6', + tint7: 'euiSuggestItem__type--tint7', + tint8: 'euiSuggestItem__type--tint8', + tint9: 'euiSuggestItem__type--tint9', +}; + +export const COLORS = Object.keys(colorToClassNameMap); + +const labelDisplayToClassMap = { + fixed: 'euiSuggestItem__labelDisplay--fixed', + expand: 'euiSuggestItem__labelDisplay--expand', +}; + +export const DISPLAYS = Object.keys(labelDisplayToClassMap); + +export const EuiSuggestItem = ({ + className, + label, + type, + labelDisplay, + description, + ...rest +}) => { + const classes = classNames('euiSuggestItem', className); + + let colorClass = ''; + + const labelDisplayClass = classNames( + 'euiSuggestItem__label', + labelDisplayToClassMap[labelDisplay], + { + 'euiSuggestItem__labelDisplay--expand': !description, + } + ); + + if (type && type.color) { + if (COLORS.indexOf(type.color) > -1) { + colorClass = colorToClassNameMap[type.color]; + } + } + + return ( +
+ + + + {label} + {description} +
+ ); +}; + +EuiSuggestItem.propTypes = { + className: PropTypes.string, + /** + * Takes 'iconType' for EuiIcon and 'color'. 'color' can be tint1 through tint9. + */ + type: PropTypes.shape({ + iconType: IconPropType.isRequired, + color: PropTypes.oneOfType([PropTypes.oneOf(COLORS), PropTypes.string]) + .isRequired, + }).isRequired, + /** + * Label or primary text. + */ + label: PropTypes.string.isRequired, + /** + * Description or secondary text (optional). + */ + description: PropTypes.string, + /** + * Label display is 'fixed' by default. Label will increase its width beyond 50% if needed with 'expand'. + */ + labelDisplay: PropTypes.oneOf(DISPLAYS), +}; + +EuiSuggestItem.defaultProps = { + labelDisplay: 'fixed', +}; diff --git a/src/components/suggest_item/suggest_item.test.js b/src/components/suggest_item/suggest_item.test.js new file mode 100644 index 000000000000..e6fe26649913 --- /dev/null +++ b/src/components/suggest_item/suggest_item.test.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiSuggestItem } from './suggest_item'; + +const TYPE = { + iconType: 'search', + color: 'tint1', +}; + +describe('EuiSuggestItem', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); +}); + +describe('props', () => { + const sampleItem = { + type: { iconType: 'kqlValue', color: 'tint2' }, + label: 'Charles de Gaulle International Airport', + description: 'This is the description', + }; + + describe('labelDisplay as expand', () => { + test('is rendered', () => { + const component = render( + + ); + expect(component).toMatchSnapshot(); + }); + }); + + describe('item with no description has expanded label', () => { + test('is rendered', () => { + const component = render( + + ); + expect(component).toMatchSnapshot(); + }); + }); +}); diff --git a/src/components/table/_mixins.scss b/src/components/table/_mixins.scss index eddb2c94bb3c..0bd10b89acc4 100644 --- a/src/components/table/_mixins.scss +++ b/src/components/table/_mixins.scss @@ -15,11 +15,4 @@ background-size: $euiTableActionsAreaWidth 100%; background-position-x: right; background-repeat: no-repeat; -} - -// Deprecated mixins below. This was changed in Nov. 2018 - -@mixin euiTableActionsBackground--mobile { // sass-lint:disable-line mixin-name-format - @include euiTableActionsBackgroundMobile; - @warn '@mixin euiTableActionsBackground--mobile is deprecated, please use euiTableActionsBackgroundMobile instead'; } \ No newline at end of file diff --git a/src/experimental/index.js b/src/experimental/index.js deleted file mode 100644 index 7f18ac1e8c2c..000000000000 --- a/src/experimental/index.js +++ /dev/null @@ -1,20 +0,0 @@ -export { - EuiSeriesChart, - EuiSeriesChartUtils, - EuiSeriesChartAxisUtils, - EuiSeriesChartTextUtils, - EuiLineSeries, - EuiAreaSeries, - EuiBarSeries, - EuiHistogramSeries, - EuiVerticalBarSeries, - EuiHorizontalBarSeries, - EuiVerticalRectSeries, - EuiHorizontalRectSeries, - EuiDefaultAxis, - EuiXAxis, - EuiYAxis, - EuiCrosshairX, - EuiCrosshairY, - EuiLineAnnotation, -} from '../components/series_chart'; diff --git a/src/global_styling/mixins/_responsive.scss b/src/global_styling/mixins/_responsive.scss index a6e320d96f25..910c26d27a2a 100644 --- a/src/global_styling/mixins/_responsive.scss +++ b/src/global_styling/mixins/_responsive.scss @@ -1,5 +1,4 @@ // This file makes use of double quotes to format errors with nested single quotes -// This file makes use of warn tags to properly announce deprecation // The indentation linting freaks out on comments above else statements and is disabled. // sass-lint:disable quotes, no-warn, indentation diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss index e472f2772f79..cfde781f5850 100644 --- a/src/global_styling/mixins/_shadow.scss +++ b/src/global_styling/mixins/_shadow.scss @@ -94,21 +94,4 @@ transparentize(red, 0) calc(100% - #{$hideHeight}), transparentize(red, .9) 100% ); -} - -//** DEPRECATED **// -//** DEPRECATED **// -//** DEPRECATED **// -//** DEPRECATED **// - -@mixin euiOverflowShadowTop { - box-shadow: 0 ($euiSize * -1) $euiSize (-$euiSize / 2) $euiColorEmptyShade; - z-index: 2; - @warn '`euiOverflowShadowTop()` is deprecated. Please use `euiOverflowShadow()` on a wrapping element instead.'; -} - -@mixin euiOverflowShadowBottom { - box-shadow: 0 $euiSize $euiSize (-$euiSize / 2) $euiColorEmptyShade; - z-index: 2; - @warn '`euiOverflowShadowBottom()` is deprecated. Please use `euiOverflowShadow()` on a wrapping element instead.'; -} +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 248f098c94f5..56b803a7ab91 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,6 @@ import * as Packages from '../packages'; export * from './components'; -export * from './experimental'; export * from './services'; export * from './utils'; diff --git a/src/services/index.ts b/src/services/index.ts index 41a42e877cad..d019a56af201 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -59,4 +59,11 @@ export { export { calculatePopoverPosition, findPopoverPosition } from './popover'; +export { + getDurationAndPerformOnFrame, + getTransitionTimings, + getWaitDuration, + performOnFrame, +} from './transition'; + export { EuiWindowEvent } from './window_event'; diff --git a/src/services/transition/index.ts b/src/services/transition/index.ts new file mode 100644 index 000000000000..aa31b0535275 --- /dev/null +++ b/src/services/transition/index.ts @@ -0,0 +1,6 @@ +export { + getDurationAndPerformOnFrame, + getTransitionTimings, + getWaitDuration, + performOnFrame, +} from './transition'; diff --git a/src/services/transition/transition.ts b/src/services/transition/transition.ts new file mode 100644 index 000000000000..fb7b69d098dc --- /dev/null +++ b/src/services/transition/transition.ts @@ -0,0 +1,71 @@ +const GROUP_NUMERIC = /^([\d.]+)(s|ms)/; + +function getMilliseconds(value: string, unit: string) { + // Given the regex match and capture groups, we can assume `unit` to be either 's' or 'ms' + const multiplier = unit === 's' ? 1000 : 1; + return parseFloat(value) * multiplier; +} +// Find CSS `transition-duration` and `transition-delay` intervals +// and return the value of each computed property in 'ms' +export const getTransitionTimings = (element: Element) => { + const computedStyle = window.getComputedStyle(element); + + const computedDuration = computedStyle.getPropertyValue( + 'transition-duration' + ); + const durationMatchArray = computedDuration.match(GROUP_NUMERIC); + const durationMatch = durationMatchArray + ? getMilliseconds(durationMatchArray[1], durationMatchArray[2]) + : 0; + + const computedDelay = computedStyle.getPropertyValue('transition-delay'); + const delayMatchArray = computedDelay.match(GROUP_NUMERIC); + const delayMatch = delayMatchArray + ? getMilliseconds(delayMatchArray[1], delayMatchArray[2]) + : 0; + + return { durationMatch, delayMatch }; +}; + +function isElementNode(element: Node): element is Element { + return element.nodeType === document.ELEMENT_NODE; +} +// Uses `getTransitionTimings` to find the total transition time for +// all elements targeted by a MutationObserver callback +export const getWaitDuration = (records: MutationRecord[]) => { + return records.reduce((waitDuration, record) => { + // only check for CSS transition values for ELEMENT nodes + if (isElementNode(record.target)) { + const { durationMatch, delayMatch } = getTransitionTimings(record.target); + waitDuration = Math.max(waitDuration, durationMatch + delayMatch); + } + + return waitDuration; + }, 0); +}; + +// Uses `requestAnimationFrame` to perform a given callback after a specified waiting period +export const performOnFrame = (waitDuration: number, toPerform: () => void) => { + if (waitDuration > 0) { + const startTime = Date.now(); + const endTime = startTime + waitDuration; + + const onFrame = () => { + toPerform(); + + if (endTime > Date.now()) { + requestAnimationFrame(onFrame); + } + }; + + requestAnimationFrame(onFrame); + } +}; + +// Convenience method for combining the result of 'getWaitDuration' directly with 'performOnFrame' +export const getDurationAndPerformOnFrame = ( + records: MutationRecord[], + toPerform: () => void +) => { + performOnFrame(getWaitDuration(records), toPerform); +}; diff --git a/src/theme_k6_dark.scss b/src/theme_k6_dark.scss deleted file mode 100644 index d0e06e223f94..000000000000 --- a/src/theme_k6_dark.scss +++ /dev/null @@ -1,12 +0,0 @@ -// These are variable overwrites used only for this theme. -@import 'themes/k6/k6_globals'; -@import 'themes/k6/k6_colors_dark'; - -// Global styling -@import 'global_styling/index'; - -// Components -@import 'components/index'; - -// Packages -@import '../packages/index'; diff --git a/src/theme_k6_light.scss b/src/theme_k6_light.scss deleted file mode 100644 index 73d6d9643d06..000000000000 --- a/src/theme_k6_light.scss +++ /dev/null @@ -1,12 +0,0 @@ -// These are variable overwrites used only for this theme -@import 'themes/k6/k6_globals'; -@import 'themes/k6/k6_colors_light'; - -// Global styling -@import 'global_styling/index'; - -// Components -@import 'components/index'; - -// Packages -@import '../packages/index'; diff --git a/src/themes/k6/k6_colors_dark.scss b/src/themes/k6/k6_colors_dark.scss deleted file mode 100644 index de71af5fb6a7..000000000000 --- a/src/themes/k6/k6_colors_dark.scss +++ /dev/null @@ -1,47 +0,0 @@ -// Dark theme overides - -$euiColorEmptyShade: #222; -$euiColorLightestShade: #242424; -$euiColorLightShade: #333; -$euiColorMediumShade: #444; -$euiColorDarkShade: #8A8A8A; -$euiColorDarkestShade: #F5F5F5; -$euiColorFullShade: #FFF; -$euiColorMediumShade: #494E51; -$euiColorPrimary: #4DA1C0; -$euiColorWarning: #C06C4C; -$euiColorDanger: #BF4D4D; -$euiTextColor: #DDD; - -$euiFocusBackgroundColor: #191919; -$euiShadowColor: #000; -$euiShadowColorLarge: #000; -$euiModalBorderColor: $euiColorLightShade; -$euiFlyoutBorderColor: $euiColorLightShade; - -// Code - -$euiCodeBlockBackgroundColor: #2B2B2D; -$euiCodeBlockColor: #CDD3D8; -$euiCodeBlockSelectedBackgroundColor: #3E4451; -$euiCodeBlockCommentColor: #656565; -$euiCodeBlockSelectorTagColor: #C792EA; -$euiCodeBlockStringColor: #C3E88D; -$euiCodeBlockNumberColor: #F77669; -$euiCodeBlockKeywordColor: #C792EA; -$euiCodeBlockFunctionTitleColor: #75A5FF; -$euiCodeBlockTagColor: #ABB2BF; -$euiCodeBlockNameColor: #E06C75; -$euiCodeBlockTypeColor: #DA4939; -$euiCodeBlockAttributeColor: #80CBBF; -$euiCodeBlockSymbolColor: #C792EA; -$euiCodeBlockParamsColor: #EEFFF7; -$euiCodeBlockMetaColor: #75A5FF; -$euiCodeBlockTitleColor: #75A5FF; -$euiCodeBlockSectionColor: #FFC66D; -$euiCodeBlockAdditionBackgroundColor: #144212; -$euiCodeBlockAdditionColor: #E6E1DC; -$euiCodeBlockDeletionBackgroundColor: #600; -$euiCodeBlockDeletionColor: #E6E1DC; -$euiCodeBlockSelectorClassColor: #FFCB68; -$euiCodeBlockSelectorIdColor: #F77669; diff --git a/src/themes/k6/k6_colors_light.scss b/src/themes/k6/k6_colors_light.scss deleted file mode 100644 index 20accdc4926d..000000000000 --- a/src/themes/k6/k6_colors_light.scss +++ /dev/null @@ -1 +0,0 @@ -$euiTextColor: #2D2D2D; diff --git a/src/themes/k6/k6_globals.scss b/src/themes/k6/k6_globals.scss deleted file mode 100644 index 7a23d6cc0b03..000000000000 --- a/src/themes/k6/k6_globals.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Font families -$euiFontFamily: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; - -$euiTextScale: 2.28571429, 1.71428571, 1.28571429, 1.14285714, 1, 1, .85714286; - -$euiFontSize: 14px; // 5th position in scale - -$euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7); // 12px -$euiFontSizeS: $euiFontSize * nth($euiTextScale, 6); // 14px -$euiFontSizeM: $euiFontSize * nth($euiTextScale, 4); // 16px -$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3); // 18px -$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2); // 24px -$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1); // 32px - -// Make titles bold. -$euiFontWeightLight: 600; -$euiFontWeightMedium: 600; - -// Ensure non-small tabs actually have a larger font size -$euiTabFontSize: $euiFontSizeM; -$euiTabFontSizeS: $euiFontSizeS; diff --git a/wiki/component-development.md b/wiki/component-development.md index e3fdc5d18a0e..1a5b74198de2 100644 --- a/wiki/component-development.md +++ b/wiki/component-development.md @@ -50,13 +50,13 @@ Refer to the [testing guide](testing.md) for guidelines on writing and designing ### Testing the component with Kibana -1. In the `eui` folder, run `yarn link` to create the `@elastic/eui` link package. +Note that `yarn link` currently does not work with Kibana. You'll need to manually pack and insert it into Kibana to test locally. -2. In the `kibana` folder (and potentially the `x-pack` sub-folder as well, if you are working in x-pack code), run `yarn link @elastic/eui` to install the link package you just created. - -3. Start up the Kibana server. - -4. Back in the `eui` folder, run `yarn build`. Repeat (just) this step any time you make changes to your EUI component. +1. In the `eui` folder, run `npm pack`. This will create a `.tgz` file in your EUI directory. At this point you can move it anywhere. +2. In Kibana you have two choices: + * Point your `package.json` files in Kibana to that file: `"@elastic/eui": "/path/to/elastic-eui-xx.x.x.tgz"` and run `yarn kbn bootstrap`. + * Alternatively (and often easier), you can run `yarn kbn bootstrap` in Kibana first, then just unpack the `.tgz` file and paste its contents into an empty `/kibana/node_modules/@elastic/eui` folder. This method avoids having to edit all the various `package.json` files in Kibana if you need to run functional tests. +3. Regardless of the method you decide run Kibana with `FORCE_DLL_CREATION=true node scripts/kibana --dev` to make sure it doesn't use a previously cached version of EUI. ## Principles diff --git a/wiki/consuming.md b/wiki/consuming.md index f2d3b90abfbf..dff5e4969ab0 100644 --- a/wiki/consuming.md +++ b/wiki/consuming.md @@ -78,7 +78,7 @@ The Sass variables are also made available for consumption as json files. This e import * as React from 'react'; import * as ReactDOM from 'react-dom'; import styled, { ThemeProvider } from 'styled-components'; -import * as euiVars from '@elastic/eui/dist/eui_theme_k6_light.json'; +import * as euiVars from '@elastic/eui/dist/eui_theme_light.json'; const CustomComponent = styled.div` color: ${props => props.theme.euiColorPrimary}; diff --git a/wiki/theming.md b/wiki/theming.md index b552d70ea9bc..905609571f7b 100644 --- a/wiki/theming.md +++ b/wiki/theming.md @@ -5,11 +5,10 @@ variables. Currently we maintain the following themes: * theme_light (the default EUI theme) * theme_dark (the same theme in dark) -* theme_k6_light (a Kibana specific theme for 6.x Kibana) -* theme_k6_dark (the same theme in dark) Each of these themes (outside of the default theme_light one) simply include variable overwrites that adjust colors and sizing to fit the needs of that theme. + ## How to create and test a theme #### Set up your Sass diff --git a/yarn.lock b/yarn.lock index 73a0e3ab6e4a..4ea8d442f83d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4026,103 +4026,6 @@ cyclist@~0.2.2: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640" integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA= -d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0: - version "1.2.1" - resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc" - integrity sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw== - -d3-collection@1, d3-collection@^1.0.3: - version "1.0.4" - resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2" - integrity sha1-NC39EoN8kJdPM/HMCnha6lcNzcI= - -d3-color@1, d3-color@^1.0.3: - version "1.2.0" - resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.2.0.tgz#d1ea19db5859c86854586276ec892cf93148459a" - integrity sha512-dmL9Zr/v39aSSMnLOTd58in2RbregCg4UtGyUArvEKTTN6S3HKEy+ziBWVYo9PTzRyVW+pUBHUtRKz0HYX+SQg== - -d3-contour@^1.1.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-1.3.0.tgz#cfb99098c48c46edd77e15ce123162f9e333e846" - integrity sha512-6zccxidQRtcydx0lWqHawdW1UcBzKZTxv0cW90Dlx98pY/L7GjQJmftH1tWopYFDaLCoXU0ECg9x/z2EuFT8tg== - dependencies: - d3-array "^1.1.1" - -d3-format@1, d3-format@^1.2.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.3.0.tgz#a3ac44269a2011cdb87c7b5693040c18cddfff11" - integrity sha512-ycfLEIzHVZC3rOvuBOKVyQXSiUyCDjeAPIj9n/wugrr+s5AcTQC2Bz6aKkubG7rQaQF0SGW/OV4UEJB9nfioFg== - -d3-geo@^1.6.4: - version "1.10.0" - resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.10.0.tgz#2972d18014f1e38fc1f8bb6d545377bdfb00c9ab" - integrity sha512-VK/buVGgexthTTqGRNXQ/LSo3EbOFu4p2Pjud5drSIaEnOaF2moc8A3P7WEljEO1JEBEwbpAJjFWMuJiUtoBcw== - dependencies: - d3-array "1" - -d3-hierarchy@^1.1.4: - version "1.1.6" - resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.6.tgz#842c1372090f870b7ea013ebae5c0c8d9f56229c" - integrity sha512-nn4bhBnwWnMSoZgkBXD7vRyZ0xVUsNMQRKytWYHhP1I4qHw+qzApCTgSQTZqMdf4XXZbTMqA59hFusga+THA/g== - -d3-interpolate@1, d3-interpolate@^1.1.4: - version "1.2.0" - resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.2.0.tgz#40d81bd8e959ff021c5ea7545bc79b8d22331c41" - integrity sha512-zLvTk8CREPFfc/2XglPQriAsXkzoRDAyBzndtKJWrZmHw7kmOWHNS11e40kPTd/oGk8P5mFJW5uBbcFQ+ybxyA== - dependencies: - d3-color "1" - -d3-path@1: - version "1.0.5" - resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.5.tgz#241eb1849bd9e9e8021c0d0a799f8a0e8e441764" - integrity sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q= - -d3-sankey@^0.7.1: - version "0.7.1" - resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.7.1.tgz#d229832268fc69a7fec84803e96c2256a614c521" - integrity sha1-0imDImj8aaf+yEgD6WwiVqYUxSE= - dependencies: - d3-array "1" - d3-collection "1" - d3-shape "^1.2.0" - -d3-scale@^1.0.5: - version "1.0.7" - resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d" - integrity sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw== - dependencies: - d3-array "^1.2.0" - d3-collection "1" - d3-color "1" - d3-format "1" - d3-interpolate "1" - d3-time "1" - d3-time-format "2" - -d3-shape@^1.1.0, d3-shape@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777" - integrity sha1-RdAVOPBkuv0F6j1tLLdI/YxB93c= - dependencies: - d3-path "1" - -d3-time-format@2: - version "2.1.1" - resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.1.tgz#85b7cdfbc9ffca187f14d3c456ffda268081bb31" - integrity sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw== - dependencies: - d3-time "1" - -d3-time@1: - version "1.0.8" - resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.8.tgz#dbd2d6007bf416fe67a76d17947b784bffea1e84" - integrity sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ== - -d3-voronoi@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c" - integrity sha1-Fodmfo8TotFYyAwUgMWinLDYlzw= - d@1: version "1.0.0" resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f" @@ -6339,7 +6242,7 @@ global-modules-path@^2.3.0: resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.3.0.tgz#b0e2bac6beac39745f7db5c59d26a36a0b94f7dc" integrity sha512-HchvMJNYh9dGSCy8pOQ2O8u/hoXaL+0XhnrwH0RyLiSXMMTl9W3N6KUU73+JFOg5PGjtzl6VZzUQsnrpm7Szag== -global@^4.3.1, global@~4.3.0: +global@~4.3.0: version "4.3.2" resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f" integrity sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8= @@ -6788,11 +6691,6 @@ hoek@2.x.x: resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" integrity sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0= -hoek@4.2.1: - version "4.2.1" - resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb" - integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA== - hoek@4.x.x: version "4.2.0" resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d" @@ -11787,7 +11685,7 @@ raf-schd@^4.0.0: resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.0.tgz#9855756c5045ff4ed4516e14a47719387c3c907b" integrity sha512-m7zq0JkIrECzw9mO5Zcq6jN4KayE34yoIS9hJoiZNXyOAT06PPA8PrR+WtJIeFW09YjUfNkMMN9lrmAt6BURCA== -raf@^3.1.0, raf@^3.4.0: +raf@^3.4.0: version "3.4.0" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575" integrity sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw== @@ -11977,15 +11875,6 @@ react-lifecycles-compat@^3.0.0: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-motion@^0.5.2: - version "0.5.2" - resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316" - integrity sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ== - dependencies: - performance-now "^0.2.0" - prop-types "^15.5.8" - raf "^3.1.0" - react-redux@^5.0.6: version "5.0.6" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946" @@ -12059,29 +11948,6 @@ react-virtualized@^9.18.5: loose-envify "^1.3.0" prop-types "^15.6.0" -react-vis@1.10.2: - version "1.10.2" - resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.10.2.tgz#7520bd31bb2f81a8faef49cc285f678fd0795242" - integrity sha512-Xd39x49JvvtAYBFZ6pkyItBUv3bT3CEW0dcAOXyYTCsM9uGRq90umF8LKHb28pOaWv3KiCXfK+hDAjNtIKkgHg== - dependencies: - d3-array "^1.2.0" - d3-collection "^1.0.3" - d3-color "^1.0.3" - d3-contour "^1.1.0" - d3-format "^1.2.0" - d3-geo "^1.6.4" - d3-hierarchy "^1.1.4" - d3-interpolate "^1.1.4" - d3-sankey "^0.7.1" - d3-scale "^1.0.5" - d3-shape "^1.1.0" - 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" - react@^16.8.0: version "16.8.2" resolved "https://registry.yarnpkg.com/react/-/react-16.8.2.tgz#83064596feaa98d9c2857c4deae1848b542c9c0c"