@kiwicom/orbit-components/es/Slider/components/Histogram/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

import * as React from "react";
import cx from "clsx";
import Loading from "../../../Loading";
const Histogram = ({
  data,
  value,
  min,
  loading = false,
  loadingText,
  step
}) => {
  const maxValue = !!data && Math.max(...data);
  const highlightFrom = Array.isArray(value) ? value[0] : 0;
  const highlightTo = Array.isArray(value) ? value[value.length - 1] : value;
  return /*#__PURE__*/React.createElement("div", {
    className: "h-1300 flex items-end justify-start gap-px overflow-hidden pb-[3px]",
    role: "presentation"
  }, loading ? /*#__PURE__*/React.createElement("div", {
    className: "flex size-full items-center justify-center"
  }, /*#__PURE__*/React.createElement(Loading, {
    type: "inlineLoader",
    text: loadingText
  })) : data && data.map((column, index) => {
    const properIndex = (index + min) * step;
    const active = properIndex >= highlightFrom && properIndex <= highlightTo;
    const height = maxValue ? `${(column / maxValue * 100).toFixed(2)}%` : 0;
    return /*#__PURE__*/React.createElement("div", {
      key: encodeURIComponent(properIndex.toString()),
      className: cx("relative flex-auto rounded-[1px]", active ? "bg-blue-normal" : "bg-blue-light-active"),
      style: {
        height
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "absolute bottom-[-3px] h-px w-full rounded-[1px] bg-inherit"
    }));
  }));
};
export default Histogram;