@elastic/eui 12.2.0 → 12.4.0

package/src/components/series_chart/series/vertical_rect_series.test.js

@@ -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(
-      <EuiSeriesChart width={600} height={200} {...requiredProps}>
-        <EuiVerticalRectSeries
-          name="test-chart"
-          data={[{ x: 0, y: 5 }, { x: 1, y: 15 }]}
-        />
-      </EuiSeriesChart>
-    );
-
-    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(
-      <EuiSeriesChart width={600} height={200}>
-        <EuiVerticalRectSeries
-          name="test-chart"
-          data={[{ x: 0, y: 5 }, { x: 1, y: 15 }]}
-          color={VISUALIZATION_COLORS[2]}
-          onSeriesClick={() => {}}
-        />
-      </EuiSeriesChart>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('call onValueClick', () => {
-    const data = [{ x: 0, y: 5 }, { x: 1, y: 3 }];
-    const onValueClick = jest.fn();
-    const component = mount(
-      <EuiSeriesChart width={600} height={200}>
-        <EuiVerticalRectSeries
-          name="test-series-a"
-          data={data}
-          color={VISUALIZATION_COLORS[2]}
-          onValueClick={onValueClick}
-        />
-      </EuiSeriesChart>
-    );
-    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(
-      <EuiSeriesChart width={600} height={200} xType="ordinal" stackBy="y">
-        <EuiVerticalRectSeries
-          name="test-series-a"
-          data={[{ x: 0, y: 5 }, { x: 1, y: 3 }]}
-          color={VISUALIZATION_COLORS[2]}
-          onValueClick={() => {}}
-        />
-        <EuiVerticalRectSeries
-          name="test-series-b"
-          data={[{ x: 0, y: 2 }, { x: 1, y: 7 }]}
-          color={VISUALIZATION_COLORS[1]}
-          onValueClick={() => {}}
-        />
-      </EuiSeriesChart>
-    );
-    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(
-          <EuiSeriesChart
-            width={600}
-            height={200}
-            yTicks={yTicks}
-            xTicks={xTicks}>
-            <EuiVerticalRectSeries name="barchart" data={data} />
-          </EuiSeriesChart>
-        );
-      }
-
-      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(
-          <EuiSeriesChart
-            width={600}
-            height={200}
-            yTicks={yTicks}
-            xTicks={xTicks}>
-            {linesData.map((data, index) => (
-              <EuiVerticalRectSeries
-                key={index}
-                name={`barchart-${index}`}
-                data={data}
-              />
-            ))}
-          </EuiSeriesChart>
-        );
-      }
-
-      const runtime = benchmarkFunction(renderChart);
-      // as of 2018-05-011 / git 00cfbb94d2fcb08aeeed2bb8f4ed0b94eb08307b
-      // this is ~1750 on a MacBookPro
-      expect(runtime).toBeLessThan(3000);
-    });
-  });
-});

package/src/components/series_chart/series_chart.js

@@ -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 (
-        <EuiEmptyPrompt
-          className="euiSeriesChartContainer__emptyPrompt"
-          iconType="visualizeApp"
-          title={<span>Chart not available</span>}
-          body={<p>{statusText}</p>}
-        />
-      );
-    }
-
-    const Crosshair =
-      orientation === HORIZONTAL ? EuiCrosshairY : EuiCrosshairX;
-    const seriesNames = this._getSeriesNames(children);
-    const classes = classNames(className, 'euiSeriesChartContainer');
-    return (
-      <div className={classes} {...rest}>
-        <XYPlot
-          ref={this._xyPlotRef}
-          dontCheckIfEmpty
-          width={width}
-          animation={animateData}
-          height={height}
-          margin={margins}
-          xType={xType}
-          yType={yType}
-          xDomain={xDomain}
-          yDomain={yDomain}
-          stackBy={stackBy}
-          yPadding={yPadding}
-          xPadding={xPadding}
-          style={{ width: '100%', height: '100%' }}>
-          {this._renderChildren(children)}
-          {showDefaultAxis && <EuiDefaultAxis orientation={orientation} />}
-          {showCrosshair && (
-            <Crosshair
-              seriesNames={seriesNames}
-              crosshairValue={crosshairValue}
-              onCrosshairUpdate={onCrosshairUpdate}
-              xCrosshairFormat={xCrosshairFormat}
-              yCrosshairFormat={yCrosshairFormat}
-            />
-          )}
-
-          {enableSelectionBrush && (
-            <EuiSelectionBrush
-              onBrushEnd={onSelectionBrushEnd}
-              orientation={selectionBrushOrientation}
-            />
-          )}
-        </XYPlot>
-      </div>
-    );
-  }
-}
-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);

package/src/components/series_chart/series_chart.test.js

@@ -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(
-      <EuiSeriesChart {...XYCHART_PROPS} {...requiredProps} />
-    );
-    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(
-      <EuiSeriesChart
-        width={600}
-        height={200}
-        statusText={EMPTY_CHART_MESSAGE}
-        {...requiredProps}
-      />
-    );
-
-    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(
-      <EuiSeriesChart width={600} height={200} {...requiredProps}>
-        {series.map((d, i) => (
-          <EuiLineSeries key={`series-a-${i}`} {...d} />
-        ))}
-      </EuiSeriesChart>
-    );
-
-    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(
-      <EuiSeriesChart width={600} height={200} {...requiredProps}>
-        {series.map((d, i) => (
-          <EuiLineSeries key={`series-a-${i}`} {...d} />
-        ))}
-      </EuiSeriesChart>
-    );
-    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]
-    );
-  });
-});

package/src/components/series_chart/status-text.js

@@ -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 (
-    <div className="euixychart-error-nodata" style={{ width, height }}>
-      <div
-        style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          color: 'rgb(53, 129, 255)',
-        }}>
-        <div className="euiToastHeader--withBody">
-          <EuiIcon
-            className="euiToastHeader__icon"
-            type="visualizeApp"
-            color="subdued"
-            size="m"
-            aria-hidden="true"
-          />
-          <span className="euiToastHeader__title">Graph not avaliable</span>
-        </div>
-        {text && <EuiText size="s">{text}</EuiText>}
-      </div>
-    </div>
-  );
-}
-
-StatusText.propTypes = {
-  text: PropTypes.string,
-};
-
-export default StatusText;

package/src/components/series_chart/tooltip.js

@@ -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};
-// `;
-
-// <TooltipElm>
-//     <Header>{header || moment(x).format('MMMM Do YYYY, HH:mm')}</Header>
-//     <Legends>
-//     {tooltipPoints.map((point, i) => (
-//         <LegendContainer key={i}>
-//         <LegendGray fontSize={fontSize.tiny} radius={units.half} color={point.color} text={point.text} />
-//         <Value>{point.value}</Value>
-//       </LegendContainer>
-//     ))}
-//   </Legends>
-//   </TooltipElm>;
-
-export default function Tooltip({ tooltipPoints, x, y, ...props }) {
-  if (tooltipPoints.length === 0) {
-    return null;
-  }
-  return <Hint {...props} value={{ x, y }} />;
-}
-
-Tooltip.propTypes = {
-  header: PropTypes.string,
-  tooltipPoints: PropTypes.array.isRequired,
-  x: PropTypes.number,
-  y: PropTypes.number,
-};
-
-Tooltip.defaultProps = {};