funuicss
Version:
React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting b
38 lines (37 loc) • 2.71 kB
JavaScript
"use strict";
'use client';
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var recharts_1 = require("recharts");
var getCssVar = function (varName) {
var _a;
if (typeof window === 'undefined')
return '';
return ((_a = getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '';
};
var resolveStrokeColor = function (color) {
if (!color)
return getCssVar('primary') || '#8884d8';
if (color.startsWith('#'))
return color;
return getCssVar(color) || color;
};
var Lines = function (_a) {
var data = _a.data, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? true : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? false : _e, funcss = _a.funcss, _f = _a.curveType, curveType = _f === void 0 ? 'monotone' : _f;
return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", className: funcss },
react_1.default.createElement(recharts_1.AreaChart, { data: data },
react_1.default.createElement("defs", null,
react_1.default.createElement("linearGradient", { id: "colorUv", x1: "0", y1: "0", x2: "0", y2: "1" },
react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(fromColor || 'primary'), stopOpacity: 0.8 }),
react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(toColor || 'primary200'), stopOpacity: 0 }))),
showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
showXAxis && react_1.default.createElement(recharts_1.XAxis, { dataKey: "label", angle: 45 }),
showYAxis && react_1.default.createElement(recharts_1.YAxis, null),
react_1.default.createElement(recharts_1.Tooltip, null),
showLegend && react_1.default.createElement(recharts_1.Legend, null),
series.map(function (s, index) { return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey, type: curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: "url(#colorUv)", fillOpacity: 1, strokeWidth: s.strokeWidth || 2, dot: s.dot !== false ? { r: 4 } : false, activeDot: { r: 8 } })); }))));
};
exports.default = Lines;