"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Chart_exports = {};
__export(Chart_exports, {
  default: () => Chart_default
});
module.exports = __toCommonJS(Chart_exports);
var import_react = __toESM(require("react"));
var import_react_chartjs_2 = require("react-chartjs-2");
var import_color = __toESM(require("color"));
var import_styled_components = require("styled-components");
var import_chartjs_adapter_moment = require("chartjs-adapter-moment");
var import_utils = require("./utils");
const getConfig = (variant, options) => {
  const config = {
    small: {
      gradient: { alpha: 0.3 },
      scales: { y: { display: false }, x: { display: false, type: "time" } }
    },
    default: {
      gradient: { alpha: 0.1 },
      scales: {
        y: {
          display: true,
          grid: {
            color: options.gridColor,
            borderDash: [4, 4],
            tickWidth: 0,
            tickLength: 18,
            // This is an hack to don't render a duplicate axis
            borderWidth: 0
          },
          ticks: { callback: import_utils.valueFormatter, labelOffset: -3 }
        },
        x: {
          display: true,
          grid: {
            color: options.gridColor,
            borderDash: [4, 4],
            tickWidth: 0,
            tickLength: 15,
            // Don't render a duplicate axis
            borderWidth: 0
          },
          // always display first/last ticks
          bounds: "ticks",
          type: "time",
          // control how the tickers on the x-axis are formatted
          time: options.timeOptions
        }
      }
    }
  };
  return config[variant];
};
const defaultValue = {
  variant: "default",
  valueKey: "value",
  timeOptions: { unit: "month", displayFormats: { month: "MMM." } }
};
var Chart_default = ({
  data,
  color,
  variant = defaultValue.variant,
  valueKey = defaultValue.valueKey,
  timeOptions = defaultValue.timeOptions,
  ...chartProps
}) => {
  const theme = (0, import_styled_components.useTheme)();
  const config = (0, import_react.useMemo)(
    () => getConfig(variant, { gridColor: theme.colors.neutral.c40, timeOptions }),
    [variant, theme.colors.neutral.c40, timeOptions]
  );
  (0, import_react.useEffect)(() => {
    import_react_chartjs_2.defaults.font = import_utils.fontConfig;
  }, []);
  const chartData = (0, import_react.useMemo)(
    () => ({
      datasets: [
        {
          borderColor: color,
          borderWidth: 2,
          fill: "start",
          backgroundColor: (context) => {
            const chart = context.chart;
            const { ctx, chartArea } = chart;
            if (!chartArea)
              return null;
            const gradient = ctx.createLinearGradient(0, 0, 0, chartArea.height / 1.2);
            gradient.addColorStop(0, (0, import_color.default)(color).alpha(config.gradient.alpha).string());
            gradient.addColorStop(1, (0, import_color.default)(color).alpha(0).string());
            return gradient;
          },
          // prevent points rendering
          pointRadius: 0,
          pointHitRadius: 0,
          data: data.map(({ date: x, [`${valueKey}`]: y }) => ({ x, y }))
        }
      ]
    }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [color, data, valueKey, variant]
  );
  const options = (0, import_react.useMemo)(
    () => ({
      // Responsive options use the parent element to create the canvas
      responsive: true,
      maintainAspectRatio: false,
      plugins: { tooltips: { enabled: false }, legend: { display: false } },
      animation: false,
      elements: {
        points: { radius: 0 },
        line: {
          // Bezier curve tension of the line. Set to 0 to draw straightlines.
          tension: 0.2
        }
      },
      scales: config.scales
    }),
    [config.scales]
  );
  return /* @__PURE__ */ import_react.default.createElement(import_react_chartjs_2.Line, { data: chartData, options, ...chartProps, redraw: true });
};
//# sourceMappingURL=index.js.map
