"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColorRangeLegend = void 0;
var _react = _interopRequireWildcard(require("react"));
var _d = _interopRequireDefault(require("d3"));
var _eui = require("@elastic/eui");
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.
 */

const COLOR_RANGE_RESOLUTION = 10;
/**
 * Component to render a legend for color ranges to be used for color coding
 * table cells and visualizations.
 *
 * This current version supports normalized value ranges (0-1) only.
 *
 * @param props ColorRangeLegendProps
 */
const ColorRangeLegend = ({
  colorRange,
  justifyTicks = false,
  showTicks = true,
  title,
  width = 250
}) => {
  const d3Container = (0, _react.useRef)(null);
  const scale = _d.default.range(COLOR_RANGE_RESOLUTION + 1).map(d => ({
    offset: d / COLOR_RANGE_RESOLUTION * 100,
    stopColor: colorRange(d / COLOR_RANGE_RESOLUTION)
  }));
  (0, _react.useEffect)(() => {
    if (d3Container.current === null) {
      return;
    }
    const wrapperHeight = 32;
    const wrapperWidth = width;

    // top: 2        — adjust vertical alignment with title text
    // bottom: 20    — room for axis ticks and labels
    // left/right: 1 — room for first and last axis tick
    // when justifyTicks is enabled, the left margin is increased to not cut off the first tick label
    const margin = {
      top: 2,
      bottom: 20,
      left: justifyTicks || !showTicks ? 1 : 4,
      right: 1
    };
    const legendWidth = wrapperWidth - margin.left - margin.right;
    const legendHeight = wrapperHeight - margin.top - margin.bottom;

    // remove, then redraw the legend
    _d.default.select(d3Container.current).selectAll('*').remove();
    const wrapper = _d.default.select(d3Container.current).classed('colorRangeLegend', true).attr('width', wrapperWidth).attr('height', wrapperHeight).append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    // append gradient bar
    const gradient = wrapper.append('defs').append('linearGradient').attr('id', 'colorRangeGradient').attr('x1', '0%').attr('y1', '0%').attr('x2', '100%').attr('y2', '0%').attr('spreadMethod', 'pad');
    scale.forEach(function (d) {
      gradient.append('stop').attr('offset', `${d.offset}%`).attr('stop-color', d.stopColor).attr('stop-opacity', 1);
    });
    wrapper.append('rect').attr('x1', 0).attr('y1', 0).attr('width', legendWidth).attr('height', legendHeight).style('fill', 'url(#colorRangeGradient)');
    const axisScale = _d.default.scale.linear().domain([0, 1]).range([0, legendWidth]);

    // Using this formatter ensures we get e.g. `0` and not `0.0`, but still `0.1`, `0.2` etc.
    const tickFormat = _d.default.format('');
    const legendAxis = _d.default.svg.axis().scale(axisScale).orient('bottom').tickFormat(tickFormat).tickSize(legendHeight + 4).ticks(legendWidth / 40);
    wrapper.append('g').attr('class', 'legend axis').attr('transform', 'translate(0, 0)').call(legendAxis);

    // Adjust the alignment of the first and last tick text
    // so that the tick labels don't overflow the color range.
    if (justifyTicks || !showTicks) {
      const text = wrapper.selectAll('text')[0];
      if (text.length > 1) {
        _d.default.select(text[0]).style('text-anchor', 'start');
        _d.default.select(text[text.length - 1]).style('text-anchor', 'end');
      }
    }
    if (!showTicks) {
      wrapper.selectAll('.axis line').style('display', 'none');
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(scale), d3Container.current]);
  if (title === undefined) {
    return /*#__PURE__*/_react.default.createElement("svg", {
      ref: d3Container
    });
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
    size: "xs",
    color: "subdued"
  }, /*#__PURE__*/_react.default.createElement("p", null, title)), /*#__PURE__*/_react.default.createElement("svg", {
    ref: d3Container
  }));
};
exports.ColorRangeLegend = ColorRangeLegend;