@attivio/suit/es/components/LineBarChart.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

var _class3, _temp;

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

import React from 'react';
import ReactHighcharts from 'react-highcharts';

import ObjectUtils from '../util/ObjectUtils';

export var Point = function Point(x, y) {
  _classCallCheck(this, Point);

  this.x = x;
  this.y = y;
};

export var ChartDataSource = function ChartDataSource(name, type, values) {
  var color = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
  var valueSuffix = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
  var right = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;

  _classCallCheck(this, ChartDataSource);

  this.name = name;
  this.type = type;
  this.values = values;
  this.color = color;
  this.valueSuffix = valueSuffix;
  this.right = right;
};

/**
 * Component to display a chart with one or more series of data points.
 */
var LineBarChart = (_temp = _class3 = function (_React$Component) {
  _inherits(LineBarChart, _React$Component);

  LineBarChart.getDatasourceType = function getDatasourceType(type) {
    switch (type) {
      case 'SPLINE':
        return 'spline';
      case 'AREA':
        return 'area';
      case 'BAR':
        return 'column';
      case 'LINE':
      default:
        return 'line';
    }
  };

  function LineBarChart(props) {
    _classCallCheck(this, LineBarChart);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    ReactHighcharts.Highcharts.setOptions({
      lang: {
        thousandsSep: ','
      }
    });
    return _this;
  }

  LineBarChart.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    return !ObjectUtils.deepEquals(this.props.dataSources, nextProps.dataSources);
  };

  LineBarChart.prototype.getDatasourceColor = function getDatasourceColor(color, index) {
    if (color) {
      return color;
    }
    if (this.props.entityColors && this.props.entityColors.size > 0) {
      var colorArray = Array.from(this.props.entityColors.values());
      var realIndex = index % colorArray.length; // In case we need to wrap around
      return colorArray[realIndex];
    }
    return '#000'; // Default to black
  };

  LineBarChart.prototype.render = function render() {
    var _this2 = this;

    var series = this.props.dataSources.map(function (source, index) {
      var color = _this2.getDatasourceColor(source.color, index);
      var data = source.values.map(function (value) {
        return {
          x: value.x,
          y: value.y
        };
      });
      var seriesInfo = {
        type: LineBarChart.getDatasourceType(source.type),
        name: source.name,
        data: data,
        color: color,
        tooltip: {
          valueSuffix: source.valueSuffix
        },
        yAxis: source.opposite ? 1 : 0,
        stacking: 'normal'
      };
      if (_this2.props.barsSideBySide) {
        seriesInfo.stacking = 'null';
      }
      return seriesInfo;
    });

    var plotOptions = {
      area: {
        lineWidth: 2,
        marker: {
          radius: 2
        }
      },
      line: {
        lineWidth: 3,
        marker: {
          enabled: false
        }
      },
      spline: {
        lineWidth: 3,
        marker: {
          enabled: false
        }
      },
      column: {
        cursor: 'pointer',
        pointPlacement: 'between',
        pointPadding: 0,
        groupPadding: 0,
        grouping: false,
        borderWidth: 1
      }
    };

    var yAxes = [{
      title: {
        text: this.props.yAxisLabel,
        color: '#000'
      },
      labels: {
        format: this.props.yAxisLabelValueFormat ? this.props.yAxisLabelValueFormat : '{value}'
      }
    }];
    if (this.props.yAxis2Label) {
      yAxes.push({
        title: {
          text: this.props.yAxis2Label,
          color: '#000'
        },
        labels: {
          format: this.props.yAxis2LabelValueFormat ? this.props.yAxis2LabelValueFormat : '{value}'
        },
        opposite: true
      });
    }

    var config = {
      chart: {
        backgroundColor: null,
        borderWidth: null,
        shadow: false,
        height: this.props.height
      },
      plotOptions: plotOptions,
      yAxis: yAxes,
      legend: {
        backgroundColor: '#fff',
        reversed: true,
        itemStyle: {
          'font-size': '.8em'
        }
      },
      tooltip: {
        shared: true
      },
      title: {
        text: ''
      },
      series: series,
      credits: {
        enabled: false
      }
    };
    return React.createElement(ReactHighcharts, { config: config });
  };

  return LineBarChart;
}(React.Component), _class3.defaultProps = {
  height: 185,
  yAxisLabelValueFormat: null,
  yAxis2Label: null,
  yAxis2LabelValueFormat: null,
  barsSideBySide: false,
  entityColors: new Map()
}, _class3.displayName = 'LineBarChart', _temp);
export { LineBarChart as default };


LineBarChart.ChartDataSource = ChartDataSource;
LineBarChart.Point = Point;