"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CanaryStatusChart = CanaryStatusChart;

var _dayjs = _interopRequireDefault(require("dayjs"));

var _recharts = require("recharts");

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["data"],
    _excluded2 = ["tickFormatter"],
    _excluded3 = ["tickFormatter"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

// @TODO: duration should be formatted properly, not just by ms
var formatDuration = function formatDuration(duration) {
  return "".concat(duration, "ms");
};

var getFill = function getFill(entry) {
  return entry.status ? "#2cbd27" : "#df1a1a";
};

function CanaryStatusChart(_ref) {
  var data = _ref.data,
      rest = _objectWithoutProperties(_ref, _excluded);

  data = data || [];
  var timeRange = 0;

  if (data.length > 0) {
    timeRange = (new Date(data[0].time) - new Date(data[data.length - 1].time)) / 1000 / 60;
  } // @TODO: date should be formatted properly depending on selection, not just by DD/MM


  var formatDate = function formatDate(date) {
    return (0, _dayjs.default)(date).format("HH:mm");
  };

  if (timeRange > 60 * 24 * 30) {
    formatDate = function formatDate(date) {
      return (0, _dayjs.default)(date).format("MMM DD");
    };
  } else if (timeRange > 60 * 24) {
    formatDate = function formatDate(date) {
      return (0, _dayjs.default)(date).format("MMM DD HH:mm");
    };
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.ResponsiveContainer, _objectSpread(_objectSpread({
    width: "100%",
    height: "100%"
  }, rest), {}, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_recharts.ScatterChart, {
      margin: {
        top: 12,
        right: 0,
        bottom: 0,
        left: -20
      },
      data: data,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.YAxis, {
        tickSize: 0,
        tick: /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomYTick, {
          tickFormatter: formatDuration
        }),
        stroke: "rgba(200, 200, 200, 1)",
        tickMargin: 4,
        tickFormatter: formatDuration,
        fontSize: 12,
        padding: {},
        dataKey: "duration",
        name: "Latency"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.XAxis, {
        tickSize: 0,
        tick: /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomXTick, {
          tickFormatter: formatDate
        }),
        stroke: "rgba(200, 200, 200, 1)",
        tickMargin: 4,
        tickFormatter: formatDate,
        fontSize: 12,
        reversed: true // type="number"
        ,
        allowDuplicatedCategory: false // scale="time"
        ,
        dataKey: "time",
        name: "Time"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.CartesianGrid, {
        stroke: "rgba(230, 230, 230, 1)",
        strokeWidth: 1,
        strokeDasharray: "8 8"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Tooltip, {
        animationDuration: 0,
        cursor: {
          stroke: "rgba(0, 0, 0, 0.12)"
        },
        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomTooltip, {})
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Scatter, {
        name: "Check Statuses",
        data: data,
        fill: "rgba(0, 255, 0, 1)",
        children: data.map(function (entry) {
          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_recharts.Cell, {
            fill: getFill(entry)
          }, "cell-".concat(entry.time));
        })
      })]
    })
  }));
}

function CustomXTick(_ref2) {
  var _ref2$tickFormatter = _ref2.tickFormatter,
      tickFormatter = _ref2$tickFormatter === void 0 ? function (value) {
    return value;
  } : _ref2$tickFormatter,
      rest = _objectWithoutProperties(_ref2, _excluded2);

  var x = rest.x,
      y = rest.y,
      payload = rest.payload,
      _rest$fontSize = rest.fontSize,
      fontSize = _rest$fontSize === void 0 ? 12 : _rest$fontSize;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
    transform: "translate(".concat(x, ",").concat(y, ")"),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
      x: 0,
      y: 0,
      dy: 16,
      textAnchor: "middle",
      fill: "#666",
      fontSize: fontSize,
      children: tickFormatter(payload.value)
    })
  });
}

function CustomYTick(_ref3) {
  var _ref3$tickFormatter = _ref3.tickFormatter,
      tickFormatter = _ref3$tickFormatter === void 0 ? function (value) {
    return value;
  } : _ref3$tickFormatter,
      rest = _objectWithoutProperties(_ref3, _excluded3);

  var x = rest.x,
      y = rest.y,
      payload = rest.payload,
      _rest$fontSize2 = rest.fontSize,
      fontSize = _rest$fontSize2 === void 0 ? 12 : _rest$fontSize2;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
    transform: "translate(".concat(x, ",").concat(y, ")"),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
      x: -36,
      y: 0,
      dy: 3,
      textAnchor: "start",
      fill: "#666",
      fontSize: fontSize,
      children: tickFormatter(payload.value)
    })
  });
}

var CustomTooltip = function CustomTooltip(_ref4) {
  var active = _ref4.active,
      payload = _ref4.payload;

  if (active && payload && payload.length) {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "flex flex-col bg-white p-3 border rounded-sm text-xs",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
        className: "",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
          className: "text-gray-500",
          children: [payload[0].name, ": "]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "ml-1 text-gray-700",
          children: payload[0].value
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
        className: "",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
          className: "text-gray-500",
          children: [payload[1].name, ": "]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "ml-1 text-gray-700",
          children: formatDuration(payload[1].value)
        })]
      })]
    });
  }

  return null;
};