"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StackedBarChart = StackedBarChart;
var _charts = require("@elastic/charts");
var _eui = require("@elastic/eui");
var _lodash = require("lodash");
var _react = _interopRequireWildcard(require("react"));
var _use_kibana_timezone_setting = require("../../hooks/use_kibana_timezone_setting");
var _use_profiling_charts_theme = require("../../hooks/use_profiling_charts_theme");
var _as_percentage = require("../../utils/formatters/as_percentage");
var _subchart = require("../subchart");
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.
 */

// 2 * padding (16px)
const MAX_TOOLTIP_WIDTH = 224;
function StackedBarChart({
  height,
  asPercentages,
  onBrushEnd,
  charts,
  showFrames,
  onClick
}) {
  const chartsbyCategoryMap = (0, _react.useMemo)(() => {
    return (0, _lodash.keyBy)(charts, 'Category');
  }, [charts]);
  const timeZone = (0, _use_kibana_timezone_setting.useKibanaTimeZoneSetting)();
  const [highlightedSample, setHighlightedSample] = (0, _react.useState)();
  const {
    chartsBaseTheme,
    chartsTheme
  } = (0, _use_profiling_charts_theme.useProfilingChartsTheme)();
  function CustomTooltipWithSubChart() {
    if (!highlightedSample) {
      return null;
    }
    const highlightedSubchart = chartsbyCategoryMap[highlightedSample.Category];
    if (!highlightedSubchart) {
      return null;
    }
    return /*#__PURE__*/_react.default.createElement(_charts.TooltipContainer, null, /*#__PURE__*/_react.default.createElement(_eui.EuiPanel, null, /*#__PURE__*/_react.default.createElement(_subchart.SubChart, {
      index: highlightedSubchart.Index,
      color: highlightedSubchart.Color,
      category: highlightedSubchart.Category,
      label: highlightedSubchart.Label,
      data: highlightedSubchart.Series,
      percentage: highlightedSubchart.Percentage,
      sample: highlightedSample,
      showFrames: showFrames
      /* we don't show metadata in tooltips */,
      metadata: [],
      height: 128,
      width: MAX_TOOLTIP_WIDTH,
      showAxes: false,
      onShowMoreClick: null,
      padTitle: false
    })));
  }
  return /*#__PURE__*/_react.default.createElement(_charts.Chart, {
    size: {
      height
    }
  }, /*#__PURE__*/_react.default.createElement(_charts.Settings, {
    showLegend: false,
    brushAxis: _charts.BrushAxis.X,
    onBrushEnd: brushEvent => {
      const rangeFrom = new Date(brushEvent.x[0]).toISOString();
      const rangeTo = new Date(brushEvent.x[1]).toISOString();
      onBrushEnd({
        rangeFrom,
        rangeTo
      });
    },
    baseTheme: chartsBaseTheme,
    theme: chartsTheme,
    onElementOver: events => {
      const [value] = events[0];
      setHighlightedSample(value.datum);
    },
    onElementClick: onClick ? elements => {
      const [value] = elements[0];
      const sample = value.datum;
      onClick(sample.Category);
    } : undefined,
    onElementOut: () => {
      setHighlightedSample(undefined);
    }
  }), /*#__PURE__*/_react.default.createElement(_charts.Tooltip, {
    customTooltip: CustomTooltipWithSubChart
  }), charts.map(chart => /*#__PURE__*/_react.default.createElement(_charts.HistogramBarSeries, {
    key: chart.Category,
    id: chart.Category,
    name: chart.Label,
    data: chart.Series,
    color: chart.Color,
    xAccessor: 'Timestamp',
    yAccessors: ['Count'],
    stackMode: asPercentages ? _charts.StackMode.Percentage : undefined,
    xScaleType: _charts.ScaleType.Time,
    timeZone: timeZone
  })), /*#__PURE__*/_react.default.createElement(_charts.Axis, {
    id: "bottom-axis",
    position: "bottom",
    tickFormat: (0, _charts.timeFormatter)('YYYY-MM-DD HH:mm:ss')
  }), /*#__PURE__*/_react.default.createElement(_charts.Axis, {
    id: "left-axis",
    position: "left",
    gridLine: {
      visible: true
    },
    tickFormat: d => asPercentages ? (0, _as_percentage.asPercentage)(d) : d.toFixed(0)
  }));
}