'use client';
'use strict';

var _tslib = require('../_virtual/_tslib.js');
var index = require('../external/classnames/index.js');
var React = require('react');
var reactVirtualizedAutoSizer_esm = require('../external/react-virtualized-auto-sizer/dist/react-virtualized-auto-sizer.esm.js');
var areaChart_module = require('./area-chart.module.css.js');
var chartComponents = require('./chart-components.js');
var Area = require('../external/recharts/es6/cartesian/Area.js');
var Dot = require('../external/recharts/es6/shape/Dot.js');
var AreaChart$1 = require('../external/recharts/es6/chart/AreaChart.js');
var CartesianGrid = require('../external/recharts/es6/cartesian/CartesianGrid.js');
var XAxis = require('../external/recharts/es6/cartesian/XAxis.js');
var YAxis = require('../external/recharts/es6/cartesian/YAxis.js');
var Tooltip = require('../external/recharts/es6/component/Tooltip.js');
var Legend = require('../external/recharts/es6/component/Legend.js');

var AreaChart = React.forwardRef(function AreaChart(_a, ref) {
    var className = _a.className, categories = _a.categories, _b = _a.colors, colors = _b === void 0 ? chartComponents.DEFAULT_COLORS : _b, dark = _a.dark, data = _a.data, index$1 = _a.index, otherProps = _tslib.__rest(_a, ["className", "categories", "colors", "dark", "data", "index"]);
    var colorMap = chartComponents.createColorMap({ categories: categories, colors: colors });
    var areas = categories.map(function (category, index) {
        var color = colors[index % colors.length];
        return (React.createElement(Area.Area, { key: index, type: "monotone", activeDot: function (props) {
                var cx = props.cx, cy = props.cy, stroke = props.stroke, strokeLinecap = props.strokeLinecap, strokeLinejoin = props.strokeLinejoin, strokeWidth = props.strokeWidth;
                return (React.createElement(Dot.Dot, { className: areaChart_module.dot, cx: cx, cy: cy, r: 5, fill: color, stroke: stroke, strokeLinecap: strokeLinecap, strokeLinejoin: strokeLinejoin, strokeWidth: strokeWidth }));
            }, dataKey: category, fill: "url(#".concat(color, ")"), isAnimationActive: false, stackId: "a", stroke: color, strokeLinejoin: "round", strokeLinecap: "round", strokeWidth: 2 }));
    });
    return (React.createElement("div", _tslib.__assign({ className: index(className, areaChart_module.root), ref: ref }, otherProps, { style: _tslib.__assign(_tslib.__assign({}, otherProps.style), { minHeight: 200, minWidth: 300 }) }),
        React.createElement(reactVirtualizedAutoSizer_esm, null, function (_a) {
            var _b;
            var height = _a.height, width = _a.width;
            return (React.createElement(AreaChart$1.AreaChart, { className: index((_b = {}, _b[areaChart_module.dark] = dark, _b)), data: data, height: height, width: width },
                React.createElement(CartesianGrid.CartesianGrid, { className: areaChart_module.grid, horizontal: true, vertical: false, strokeWidth: 1 }),
                React.createElement(XAxis.XAxis, { axisLine: false, tickLine: false, padding: { left: 20, right: 20 }, dataKey: index$1 }),
                React.createElement(YAxis.YAxis, { axisLine: false, tickLine: false, width: 30 }),
                React.createElement(Tooltip.Tooltip, { content: function (_a) {
                        var active = _a.active, payload = _a.payload, label = _a.label;
                        return (React.createElement(chartComponents.ChartTooltip, { active: active, colorMap: colorMap, dark: dark, label: label, payload: payload }));
                    }, cursor: { stroke: "#D1D5DB", strokeWidth: 1 }, isAnimationActive: false }),
                React.createElement(Legend.Legend, { content: function (_a) {
                        var payload = _a.payload;
                        return React.createElement(chartComponents.ChartLegend, { colorMap: colorMap, dark: dark, payload: payload });
                    }, verticalAlign: "bottom" }),
                categories.map(function (category) {
                    return (React.createElement("defs", { key: category },
                        React.createElement("linearGradient", { style: { color: colorMap.get(category) }, id: colorMap.get(category), x1: "0", x2: "0", y1: "0", y2: "1" },
                            React.createElement("stop", { offset: "5%", stopColor: "currentColor", stopOpacity: 0.7 }),
                            React.createElement("stop", { offset: "98%", stopColor: "currentColor", stopOpacity: 0.1 }))));
                }),
                areas));
        })));
});

exports.AreaChart = AreaChart;
//# sourceMappingURL=area-chart.js.map
