"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AreaChartComponent = exports.AreaChartBaseComponent = exports.AreaChartBase = exports.AreaChart = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _charts = require("@elastic/charts");
var _fp = require("lodash/fp");
var _eui = require("@elastic/eui");
var _utils = require("../utils");
var _chart_place_holder = require("./chart_place_holder");
var _kibana = require("../../lib/kibana");
var _common = require("./common");
var _actions = require("../visualization_actions/actions");
var _hover_visibility_container = require("../hover_visibility_container");
var _utils2 = require("../visualization_actions/utils");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

// custom series styles: https://ela.st/areachart-styling
const getSeriesLineStyle = () => {
  return {
    area: {
      opacity: 0.04,
      visible: true
    },
    line: {
      strokeWidth: 1,
      visible: true
    },
    point: {
      visible: false,
      radius: 0.2,
      strokeWidth: 1,
      opacity: 1
    }
  };
};
const checkIfAllTheDataInTheSeriesAreValid = series => !!(0, _fp.get)('value.length', series) && (0, _fp.get)('value', series).every(({
  x,
  y
}) => !(0, _fp.isNull)(x) && (0, _fp.isNumber)(y) && y > 0);
const checkIfAnyValidSeriesExist = data => Array.isArray(data) && data.some(checkIfAllTheDataInTheSeriesAreValid);
const axisStyle = {
  tickLine: {
    visible: false
  },
  tickLabel: {
    padding: 3
  }
};

// https://ela.st/multi-areaseries
const AreaChartBaseComponent = ({
  data,
  ...chartConfigs
}) => {
  const themes = (0, _common.useThemes)();
  const timeZone = (0, _kibana.useTimeZone)();
  const xTickFormatter = (0, _fp.get)('configs.axis.xTickFormatter', chartConfigs);
  const yTickFormatter = (0, _fp.get)('configs.axis.yTickFormatter', chartConfigs);
  const xAxisId = `group-${data[0].key}-x`;
  const yAxisId = `group-${data[0].key}-y`;
  const settings = {
    ..._common.chartDefaultSettings,
    ...themes,
    ...(0, _fp.get)('configs.settings', chartConfigs)
  };
  return chartConfigs.width && chartConfigs.height ? /*#__PURE__*/_react.default.createElement("div", {
    style: {
      height: chartConfigs.height,
      width: chartConfigs.width,
      position: 'relative'
    }
  }, /*#__PURE__*/_react.default.createElement(_charts.Chart, null, /*#__PURE__*/_react.default.createElement(_charts.Settings, settings), data.map(series => {
    const seriesKey = series.key;
    return checkIfAllTheDataInTheSeriesAreValid(series) ? /*#__PURE__*/_react.default.createElement(_charts.AreaSeries, {
      id: seriesKey,
      key: seriesKey,
      name: series.key.replace('Histogram', ''),
      data: series.value || [],
      xScaleType: (0, _fp.getOr)(_charts.ScaleType.Linear, 'configs.series.xScaleType', chartConfigs),
      yScaleType: (0, _fp.getOr)(_charts.ScaleType.Linear, 'configs.series.yScaleType', chartConfigs),
      timeZone: timeZone,
      xAccessor: "x",
      yAccessors: ['y'],
      areaSeriesStyle: getSeriesLineStyle(),
      color: series.color ? series.color : undefined
    }) : null;
  }), /*#__PURE__*/_react.default.createElement(_charts.Axis, {
    id: xAxisId,
    position: _charts.Position.Bottom,
    showOverlappingTicks: false,
    tickFormat: xTickFormatter,
    style: axisStyle
  }), /*#__PURE__*/_react.default.createElement(_charts.Axis, {
    id: yAxisId,
    position: _charts.Position.Left,
    style: axisStyle,
    tickFormat: yTickFormatter
  }))) : null;
};
exports.AreaChartBaseComponent = AreaChartBaseComponent;
AreaChartBaseComponent.displayName = 'AreaChartBaseComponent';
const AreaChartBase = /*#__PURE__*/_react.default.memo(AreaChartBaseComponent);
exports.AreaChartBase = AreaChartBase;
AreaChartBase.displayName = 'AreaChartBase';
const AreaChartComponent = ({
  areaChart,
  configs,
  visualizationActionsOptions
}) => {
  const {
    ref: measureRef,
    width,
    height
  } = (0, _utils.useThrottledResizeObserver)();
  const customHeight = (0, _fp.get)('customHeight', configs);
  const customWidth = (0, _fp.get)('customWidth', configs);
  const chartHeight = (0, _common.getChartHeight)(customHeight, height);
  const chartWidth = (0, _common.getChartWidth)(customWidth, width);
  const isValidSeriesExist = (0, _react.useMemo)(() => checkIfAnyValidSeriesExist(areaChart), [areaChart]);
  return /*#__PURE__*/_react.default.createElement(_common.Wrapper, null, /*#__PURE__*/_react.default.createElement(_hover_visibility_container.HoverVisibilityContainer, {
    targetClassNames: [_utils2.VISUALIZATION_ACTIONS_BUTTON_CLASS]
  }, isValidSeriesExist && areaChart && /*#__PURE__*/_react.default.createElement(_common.ChartWrapper, {
    gutterSize: "none"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: true
  }, /*#__PURE__*/_react.default.createElement(_common.WrappedByAutoSizer, {
    ref: measureRef,
    height: chartHeight
  }, /*#__PURE__*/_react.default.createElement(AreaChartBase, {
    data: areaChart,
    height: chartHeight,
    width: chartWidth,
    configs: configs
  })))), !isValidSeriesExist && /*#__PURE__*/_react.default.createElement(_chart_place_holder.ChartPlaceHolder, {
    height: chartHeight,
    width: chartWidth,
    data: areaChart
  }), visualizationActionsOptions != null && /*#__PURE__*/_react.default.createElement(_actions.VisualizationActions, (0, _extends2.default)({}, visualizationActionsOptions, {
    className: "viz-actions"
  }))));
};
exports.AreaChartComponent = AreaChartComponent;
const AreaChart = /*#__PURE__*/_react.default.memo(AreaChartComponent);
exports.AreaChart = AreaChart;