chartly-charts
Version:
Modern themed charts for React applications
610 lines (596 loc) • 39 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var recharts = require('recharts');
var react = require('react');
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var themes = {
neomorphism: {
colors: {
primary: '#6366f1',
secondary: '#8b5cf6',
accent: '#06b6d4',
background: '#f1f5f9',
surface: '#e2e8f0',
text: '#334155',
textSecondary: '#64748b',
grid: '#cbd5e1',
tooltip: '#ffffff',
gradientStart: '#6366f1',
gradientEnd: '#8b5cf6',
},
shadows: {
small: '4px 4px 8px #d1d5db, -4px -4px 8px #ffffff',
medium: '8px 8px 16px #d1d5db, -8px -8px 16px #ffffff',
large: '12px 12px 24px #d1d5db, -12px -12px 24px #ffffff',
},
gradients: {
primary: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
secondary: 'linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)',
surface: 'linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%)',
},
blur: '10px',
borderRadius: {
small: 8,
medium: 12,
large: 20,
},
},
glassmorphism: {
colors: {
primary: '#3b82f6',
secondary: '#8b5cf6',
accent: '#06b6d4',
background: 'rgba(17, 24, 39, 0.8)',
surface: 'rgba(31, 41, 55, 0.6)',
text: '#f9fafb',
textSecondary: '#d1d5db',
grid: 'rgba(156, 163, 175, 0.3)',
tooltip: 'rgba(31, 41, 55, 0.95)',
gradientStart: '#3b82f6',
gradientEnd: '#8b5cf6',
},
shadows: {
small: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
medium: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
large: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
},
gradients: {
primary: 'linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%)',
secondary: 'linear-gradient(135deg, rgba(6, 182, 212, 0.8) 0%, rgba(8, 145, 178, 0.8) 100%)',
surface: 'linear-gradient(145deg, rgba(31, 41, 55, 0.6) 0%, rgba(17, 24, 39, 0.8) 100%)',
},
blur: '20px',
borderRadius: {
small: 8,
medium: 16,
large: 24,
},
},
techno: {
colors: {
primary: '#00ff88',
secondary: '#00ccff',
accent: '#ff0080',
background: '#0a0a0a',
surface: '#1a1a1a',
text: '#00ff88',
textSecondary: '#888888',
grid: '#333333',
tooltip: '#000000',
gradientStart: '#00ff88',
gradientEnd: '#00ccff',
},
shadows: {
small: '0 0 10px rgba(0, 255, 136, 0.3)',
medium: '0 0 20px rgba(0, 255, 136, 0.4), 0 0 40px rgba(0, 204, 255, 0.2)',
large: '0 0 30px rgba(0, 255, 136, 0.5), 0 0 60px rgba(0, 204, 255, 0.3), 0 0 90px rgba(255, 0, 128, 0.1)',
},
gradients: {
primary: 'linear-gradient(135deg, #00ff88 0%, #00ccff 100%)',
secondary: 'linear-gradient(135deg, #00ccff 0%, #ff0080 100%)',
surface: 'linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%)',
},
blur: '15px',
borderRadius: {
small: 4,
medium: 8,
large: 12,
},
animations: {
glow: '0 0 20px currentColor',
pulse: 'pulse 2s infinite',
},
},
cyberpunk: {
colors: {
primary: '#ff073a',
secondary: '#39ff14',
accent: '#ffff00',
background: '#0d0208',
surface: '#1a0b13',
text: '#ff073a',
textSecondary: '#ff6b9d',
grid: '#ff073a40',
tooltip: '#0d0208',
gradientStart: '#ff073a',
gradientEnd: '#39ff14',
},
shadows: {
small: '0 0 15px rgba(255, 7, 58, 0.4), inset 0 0 15px rgba(57, 255, 20, 0.1)',
medium: '0 0 25px rgba(255, 7, 58, 0.6), 0 0 50px rgba(57, 255, 20, 0.3), inset 0 0 25px rgba(255, 255, 0, 0.1)',
large: '0 0 40px rgba(255, 7, 58, 0.8), 0 0 80px rgba(57, 255, 20, 0.4), 0 0 120px rgba(255, 255, 0, 0.2)',
},
gradients: {
primary: 'linear-gradient(135deg, #ff073a 0%, #39ff14 50%, #ffff00 100%)',
secondary: 'linear-gradient(135deg, #39ff14 0%, #ff073a 100%)',
surface: 'linear-gradient(145deg, #1a0b13 0%, #0d0208 100%)',
},
blur: '12px',
borderRadius: {
small: 2,
medium: 4,
large: 8,
},
animations: {
glow: '0 0 30px currentColor, 0 0 60px currentColor',
pulse: 'pulse 1.5s infinite',
},
},
ocean: {
colors: {
primary: '#0ea5e9',
secondary: '#06b6d4',
accent: '#67e8f9',
background: '#0c4a6e',
surface: '#0369a1',
text: '#e0f2fe',
textSecondary: '#bae6fd',
grid: '#0284c7',
tooltip: '#0c4a6e',
gradientStart: '#0ea5e9',
gradientEnd: '#06b6d4',
},
shadows: {
small: '0 4px 14px 0 rgba(6, 182, 212, 0.3)',
medium: '0 8px 28px 0 rgba(14, 165, 233, 0.4), 0 0 40px rgba(103, 232, 249, 0.2)',
large: '0 12px 42px 0 rgba(6, 182, 212, 0.5), 0 0 60px rgba(14, 165, 233, 0.3)',
},
gradients: {
primary: 'linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #67e8f9 100%)',
secondary: 'linear-gradient(135deg, #06b6d4 0%, #0284c7 100%)',
surface: 'linear-gradient(145deg, #0369a1 0%, #0c4a6e 100%)',
},
blur: '16px',
borderRadius: {
small: 12,
medium: 20,
large: 32,
},
},
sunset: {
colors: {
primary: '#f97316',
secondary: '#ec4899',
accent: '#fbbf24',
background: '#451a03',
surface: '#7c2d12',
text: '#fed7aa',
textSecondary: '#fdba74',
grid: '#ea580c',
tooltip: '#451a03',
gradientStart: '#f97316',
gradientEnd: '#ec4899',
},
shadows: {
small: '0 4px 14px 0 rgba(249, 115, 22, 0.4)',
medium: '0 8px 28px 0 rgba(236, 72, 153, 0.4), 0 0 40px rgba(251, 191, 36, 0.3)',
large: '0 12px 42px 0 rgba(249, 115, 22, 0.6), 0 0 60px rgba(236, 72, 153, 0.4)',
},
gradients: {
primary: 'linear-gradient(135deg, #f97316 0%, #ec4899 50%, #fbbf24 100%)',
secondary: 'linear-gradient(135deg, #ec4899 0%, #f97316 100%)',
surface: 'linear-gradient(145deg, #7c2d12 0%, #451a03 100%)',
},
blur: '14px',
borderRadius: {
small: 10,
medium: 16,
large: 28,
},
},
darkMode: {
colors: {
primary: '#8b5cf6',
secondary: '#a78bfa',
accent: '#06b6d4',
background: '#0f0f23',
surface: '#1a1a2e',
text: '#e2e8f0',
textSecondary: '#94a3b8',
grid: '#374151',
tooltip: '#1a1a2e',
gradientStart: '#8b5cf6',
gradientEnd: '#a78bfa',
},
shadows: {
small: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(139, 92, 246, 0.1)',
medium: '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(139, 92, 246, 0.2)',
large: '0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(139, 92, 246, 0.3)',
},
gradients: {
primary: 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)',
secondary: 'linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)',
surface: 'linear-gradient(145deg, #1a1a2e 0%, #0f0f23 100%)',
},
blur: '12px',
borderRadius: {
small: 8,
medium: 14,
large: 22,
},
},
};
var ChartThemeContext = react.createContext(null);
var useChartTheme = function () {
var context = react.useContext(ChartThemeContext);
if (!context) {
throw new Error('useChartTheme must be used within a ChartThemeProvider');
}
return context;
};
var ChartThemeProvider = function (_a) {
var children = _a.children, themeName = _a.theme;
var theme = themes[themeName] || themes.neomorphism;
return (jsxRuntime.jsx(ChartThemeContext.Provider, __assign({ value: { theme: theme, themeName: themeName } }, { children: children })));
};
var LineChartInner = function (_a) {
var data = _a.data, _b = _a.rounded, rounded = _b === void 0 ? false : _b, _c = _a.glow, glow = _c === void 0 ? false : _c, _d = _a.shadow, shadow = _d === void 0 ? "medium" : _d, _e = _a.tooltip, tooltip = _e === void 0 ? true : _e, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _f = _a.showGrid, showGrid = _f === void 0 ? true : _f, _g = _a.gridStyle, gridStyle = _g === void 0 ? "solid" : _g, _h = _a.legend, legend = _h === void 0 ? false : _h, _j = _a.legendPosition, legendPosition = _j === void 0 ? "bottom" : _j, _k = _a.width, width = _k === void 0 ? 600 : _k, _l = _a.height, height = _l === void 0 ? 400 : _l, _m = _a.responsive, responsive = _m === void 0 ? true : _m, _o = _a.dataKey, dataKey = _o === void 0 ? "value" : _o, _p = _a.strokeWidth, strokeWidth = _p === void 0 ? 3 : _p, _q = _a.className, className = _q === void 0 ? "" : _q;
var _r = useChartTheme(), theme = _r.theme, themeName = _r.themeName;
console.log("LineChart rendering with data:", data);
console.log("Theme:", themeName, theme);
var chartContainerStyle = {
background: themeName === "glassmorphism"
? theme.gradients.surface
: theme.colors.surface,
borderRadius: rounded ? theme.borderRadius.medium : 0,
boxShadow: shadow ? theme.shadows[shadow] : "none",
backdropFilter: themeName === "glassmorphism" ? "blur(".concat(theme.blur, ")") : "none",
border: themeName === "glassmorphism"
? "1px solid rgba(255, 255, 255, 0.1)"
: "none",
padding: "20px",
filter: glow && themeName === "techno"
? "drop-shadow(0 0 20px rgba(0, 255, 136, 0.3))"
: "none",
width: width !== null && width !== void 0 ? width : "100%",
height: "".concat(height, "px"),
};
var gridStrokeDasharray = {
solid: "0",
dashed: "5 5",
dotted: "2 2",
};
var CustomTooltip = function (_a) {
var active = _a.active, payload = _a.payload, label = _a.label;
if (active && payload && payload.length) {
return (jsxRuntime.jsxs("div", __assign({ style: {
background: themeName === "glassmorphism"
? "rgba(31, 41, 55, 0.95)"
: theme.colors.tooltip,
backdropFilter: themeName === "glassmorphism" ? "blur(10px)" : "none",
border: themeName === "glassmorphism"
? "1px solid rgba(255, 255, 255, 0.1)"
: "1px solid ".concat(theme.colors.grid),
borderRadius: theme.borderRadius.small,
padding: "12px",
boxShadow: theme.shadows.small,
color: theme.colors.text,
} }, { children: [jsxRuntime.jsx("p", __assign({ style: { margin: 0, fontWeight: 600 } }, { children: "".concat(xAxisLabel || "X", ": ").concat(label) })), payload.map(function (entry, index) { return (jsxRuntime.jsx("p", __assign({ style: { margin: "4px 0 0 0", color: entry.color } }, { children: "".concat(yAxisLabel || "Value", ": ").concat(entry.value) }), index)); })] })));
}
return null;
};
return (jsxRuntime.jsx("div", __assign({ style: chartContainerStyle, className: className }, { children: responsive ? (jsxRuntime.jsx(recharts.ResponsiveContainer, __assign({ width: "100%", height: "100%" }, { children: jsxRuntime.jsxs(recharts.LineChart, __assign({ data: data, margin: { top: 10, right: 20, left: 10, bottom: 5 } }, { children: [showGrid && (jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: gridStrokeDasharray[gridStyle], stroke: theme.colors.grid, strokeOpacity: themeName === "glassmorphism" ? 0.3 : 0.5 })), jsxRuntime.jsx(recharts.XAxis, { dataKey: "name", tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: xAxisLabel
? {
value: xAxisLabel,
position: "insideBottom",
offset: -10,
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), jsxRuntime.jsx(recharts.YAxis, { tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: yAxisLabel
? {
value: yAxisLabel,
angle: -90,
position: "insideLeft",
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), tooltip && jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(CustomTooltip, {}) }), legend && (jsxRuntime.jsx(recharts.Legend, { verticalAlign: legendPosition === "top" || legendPosition === "bottom"
? legendPosition
: "bottom", align: legendPosition === "left" || legendPosition === "right"
? legendPosition
: "center", wrapperStyle: {
color: theme.colors.text,
paddingTop: "20px",
} })), jsxRuntime.jsx(recharts.Line, { type: "monotone", dataKey: dataKey, stroke: theme.colors.primary, strokeWidth: strokeWidth, dot: { fill: theme.colors.primary, strokeWidth: 2, r: 4 }, activeDot: {
r: 6,
fill: theme.colors.accent,
stroke: theme.colors.primary,
strokeWidth: 2,
filter: glow && themeName === "techno"
? "drop-shadow(0 0 8px currentColor)"
: "none",
}, style: {
filter: glow && themeName === "techno"
? "drop-shadow(0 0 4px currentColor)"
: "none",
} })] })) }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(recharts.LineChart, __assign({ data: data, margin: { top: 10, right: 20, left: 10, bottom: 5 } }, { children: [showGrid && (jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: gridStrokeDasharray[gridStyle], stroke: theme.colors.grid, strokeOpacity: themeName === "glassmorphism" ? 0.3 : 0.5 })), jsxRuntime.jsx(recharts.XAxis, { dataKey: "name", tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: xAxisLabel
? {
value: xAxisLabel,
position: "insideBottom",
offset: -10,
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), jsxRuntime.jsx(recharts.YAxis, { tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: yAxisLabel
? {
value: yAxisLabel,
angle: -90,
position: "insideLeft",
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), tooltip && jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(CustomTooltip, {}) }), legend && (jsxRuntime.jsx(recharts.Legend, { verticalAlign: legendPosition === "top" || legendPosition === "bottom"
? legendPosition
: "bottom", align: legendPosition === "left" || legendPosition === "right"
? legendPosition
: "center", wrapperStyle: {
color: theme.colors.text,
paddingTop: "20px",
} })), jsxRuntime.jsx(recharts.Line, { type: "monotone", dataKey: dataKey, stroke: theme.colors.primary, strokeWidth: strokeWidth, dot: { fill: theme.colors.primary, strokeWidth: 2, r: 4 }, activeDot: {
r: 6,
fill: theme.colors.accent,
stroke: theme.colors.primary,
strokeWidth: 2,
filter: glow && themeName === "techno"
? "drop-shadow(0 0 8px currentColor)"
: "none",
}, style: {
filter: glow && themeName === "techno"
? "drop-shadow(0 0 4px currentColor)"
: "none",
} })] })) })) })));
};
var ChartlyLine = function (_a) {
var _b = _a.theme, theme = _b === void 0 ? "neomorphism" : _b, props = __rest(_a, ["theme"]);
return (jsxRuntime.jsx(ChartThemeProvider, __assign({ theme: theme }, { children: jsxRuntime.jsx(LineChartInner, __assign({}, props)) })));
};
var BarChartInner = function (_a) {
var data = _a.data, _b = _a.rounded, rounded = _b === void 0 ? false : _b, _c = _a.glow, glow = _c === void 0 ? false : _c, _d = _a.shadow, shadow = _d === void 0 ? "medium" : _d, _e = _a.tooltip, tooltip = _e === void 0 ? true : _e, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _f = _a.showGrid, showGrid = _f === void 0 ? true : _f, _g = _a.gridStyle, gridStyle = _g === void 0 ? "solid" : _g, _h = _a.legend, legend = _h === void 0 ? false : _h, _j = _a.legendPosition, legendPosition = _j === void 0 ? "bottom" : _j, _k = _a.width, width = _k === void 0 ? 600 : _k, _l = _a.height, height = _l === void 0 ? 400 : _l, _m = _a.responsive, responsive = _m === void 0 ? true : _m, _o = _a.dataKey, dataKey = _o === void 0 ? "value" : _o, _p = _a.className, className = _p === void 0 ? "" : _p, _q = _a.barRadius, barRadius = _q === void 0 ? 0 : _q;
var _r = useChartTheme(), theme = _r.theme, themeName = _r.themeName;
console.log("BarChart rendering with data:", data);
console.log("Theme:", themeName, theme);
var chartContainerStyle = {
background: themeName === "glassmorphism"
? theme.gradients.surface
: theme.colors.surface,
borderRadius: rounded ? theme.borderRadius.medium : 0,
boxShadow: shadow ? theme.shadows[shadow] : "none",
backdropFilter: themeName === "glassmorphism" ? "blur(".concat(theme.blur, ")") : "none",
border: themeName === "glassmorphism"
? "1px solid rgba(255, 255, 255, 0.1)"
: "none",
padding: "20px",
filter: glow && themeName === "techno"
? "drop-shadow(0 0 20px rgba(0, 255, 136, 0.3))"
: "none",
width: width !== null && width !== void 0 ? width : "100%",
height: "".concat(height, "px"),
};
var gridStrokeDasharray = {
solid: "0",
dashed: "5 5",
dotted: "2 2",
};
var CustomTooltip = function (_a) {
var active = _a.active, payload = _a.payload, label = _a.label;
if (active && payload && payload.length) {
return (jsxRuntime.jsxs("div", __assign({ style: {
background: themeName === "glassmorphism"
? "rgba(31, 41, 55, 0.95)"
: theme.colors.tooltip,
backdropFilter: themeName === "glassmorphism" ? "blur(10px)" : "none",
border: themeName === "glassmorphism"
? "1px solid rgba(255, 255, 255, 0.1)"
: "1px solid ".concat(theme.colors.grid),
borderRadius: theme.borderRadius.small,
padding: "12px",
boxShadow: theme.shadows.small,
color: theme.colors.text,
} }, { children: [jsxRuntime.jsx("p", __assign({ style: { margin: 0, fontWeight: 600 } }, { children: "".concat(xAxisLabel || "X", ": ").concat(label) })), payload.map(function (entry, index) { return (jsxRuntime.jsx("p", __assign({ style: { margin: "4px 0 0 0", color: entry.color } }, { children: "".concat(yAxisLabel || "Value", ": ").concat(entry.value) }), index)); })] })));
}
return null;
};
return (jsxRuntime.jsx("div", __assign({ style: chartContainerStyle, className: className }, { children: responsive ? (jsxRuntime.jsx(recharts.ResponsiveContainer, __assign({ width: "100%", height: "100%" }, { children: jsxRuntime.jsxs(recharts.BarChart, __assign({ data: data, margin: { top: 5, right: 30, left: 20, bottom: 5 } }, { children: [showGrid && (jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: gridStrokeDasharray[gridStyle], stroke: theme.colors.grid, strokeOpacity: themeName === "glassmorphism" ? 0.3 : 0.5 })), jsxRuntime.jsx(recharts.XAxis, { dataKey: "name", tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: xAxisLabel
? {
value: xAxisLabel,
position: "insideBottom",
offset: -10,
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), jsxRuntime.jsx(recharts.YAxis, { tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: yAxisLabel
? {
value: yAxisLabel,
angle: -90,
position: "insideLeft",
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), tooltip && jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(CustomTooltip, {}) }), legend && (jsxRuntime.jsx(recharts.Legend, { verticalAlign: legendPosition === "top" || legendPosition === "bottom"
? legendPosition
: "bottom", align: legendPosition === "left" || legendPosition === "right"
? legendPosition
: "center", wrapperStyle: { color: theme.colors.text, paddingTop: "20px" } })), jsxRuntime.jsx(recharts.Bar, { dataKey: dataKey, fill: theme.colors.primary, radius: barRadius > 0 ? [barRadius, barRadius, 0, 0] : 0, style: {
filter: glow && themeName === "techno"
? "drop-shadow(0 0 8px currentColor)"
: "none",
} })] })) }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(recharts.BarChart, __assign({ data: data, margin: { top: 5, right: 30, left: 20, bottom: 5 } }, { children: [showGrid && (jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: gridStrokeDasharray[gridStyle], stroke: theme.colors.grid, strokeOpacity: themeName === "glassmorphism" ? 0.3 : 0.5 })), jsxRuntime.jsx(recharts.XAxis, { dataKey: "name", tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: xAxisLabel
? {
value: xAxisLabel,
position: "insideBottom",
offset: -10,
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), jsxRuntime.jsx(recharts.YAxis, { tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: yAxisLabel
? {
value: yAxisLabel,
angle: -90,
position: "insideLeft",
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), tooltip && jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(CustomTooltip, {}) }), legend && (jsxRuntime.jsx(recharts.Legend, { verticalAlign: legendPosition === "top" || legendPosition === "bottom"
? legendPosition
: "bottom", align: legendPosition === "left" || legendPosition === "right"
? legendPosition
: "center", wrapperStyle: { color: theme.colors.text, paddingTop: "20px" } })), jsxRuntime.jsx(recharts.Bar, { dataKey: dataKey, fill: theme.colors.primary, radius: barRadius > 0 ? [barRadius, barRadius, 0, 0] : 0, style: {
filter: glow && themeName === "techno"
? "drop-shadow(0 0 8px currentColor)"
: "none",
} })] })) })) })));
};
var ChartlyBar = function (_a) {
var _b = _a.theme, theme = _b === void 0 ? "neomorphism" : _b, props = __rest(_a, ["theme"]);
return (jsxRuntime.jsx(ChartThemeProvider, __assign({ theme: theme }, { children: jsxRuntime.jsx(BarChartInner, __assign({}, props)) })));
};
var AreaChartInner = function (_a) {
var data = _a.data, _b = _a.rounded, rounded = _b === void 0 ? false : _b, _c = _a.glow, glow = _c === void 0 ? false : _c, _d = _a.shadow, shadow = _d === void 0 ? "medium" : _d, _e = _a.tooltip, tooltip = _e === void 0 ? true : _e, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _f = _a.showGrid, showGrid = _f === void 0 ? true : _f, _g = _a.gridStyle, gridStyle = _g === void 0 ? "solid" : _g, _h = _a.legend, legend = _h === void 0 ? false : _h, customLegend = _a.customLegend, _j = _a.legendPosition, legendPosition = _j === void 0 ? "bottom" : _j, _k = _a.width, width = _k === void 0 ? 600 : _k, _l = _a.height, height = _l === void 0 ? 400 : _l, _m = _a.responsive, responsive = _m === void 0 ? true : _m, _o = _a.dataKey, dataKey = _o === void 0 ? "value" : _o, _p = _a.className, className = _p === void 0 ? "" : _p, _q = _a.fillOpacity, fillOpacity = _q === void 0 ? 0.6 : _q, _r = _a.curveType, curveType = _r === void 0 ? "monotone" : _r, onPointClick = _a.onPointClick, onPointHover = _a.onPointHover;
var _s = useChartTheme(), theme = _s.theme, themeName = _s.themeName;
console.log("AreaChart rendering with data:", data);
console.log("Theme:", themeName, theme);
var chartContainerStyle = {
background: themeName === "glassmorphism"
? theme.gradients.surface
: theme.colors.surface,
borderRadius: rounded ? theme.borderRadius.medium : 0,
boxShadow: shadow ? theme.shadows[shadow] : "none",
backdropFilter: themeName === "glassmorphism" ? "blur(".concat(theme.blur, ")") : "none",
border: themeName === "glassmorphism"
? "1px solid rgba(255, 255, 255, 0.1)"
: "none",
padding: "20px",
filter: glow && themeName === "techno"
? "drop-shadow(0 0 20px rgba(0, 255, 136, 0.3))"
: "none",
width: width !== null && width !== void 0 ? width : "100%",
height: "".concat(height, "px"),
};
var gridStrokeDasharray = {
solid: "0",
dashed: "5 5",
dotted: "2 2",
};
var CustomTooltip = function (_a) {
var active = _a.active, payload = _a.payload, label = _a.label;
if (active && payload && payload.length) {
return (jsxRuntime.jsxs("div", __assign({ style: {
background: themeName === "glassmorphism"
? "rgba(31, 41, 55, 0.95)"
: theme.colors.tooltip,
backdropFilter: themeName === "glassmorphism" ? "blur(10px)" : "none",
border: themeName === "glassmorphism"
? "1px solid rgba(255, 255, 255, 0.1)"
: "1px solid ".concat(theme.colors.grid),
borderRadius: theme.borderRadius.small,
padding: "12px",
boxShadow: theme.shadows.small,
color: theme.colors.text,
} }, { children: [jsxRuntime.jsx("p", __assign({ style: { margin: 0, fontWeight: 600 } }, { children: "".concat(xAxisLabel || "X", ": ").concat(label) })), payload.map(function (entry, index) { return (jsxRuntime.jsx("p", __assign({ style: { margin: "4px 0 0 0", color: entry.color } }, { children: "".concat(yAxisLabel || "Value", ": ").concat(entry.value) }), index)); })] })));
}
return null;
};
return (jsxRuntime.jsx("div", __assign({ style: chartContainerStyle, className: className }, { children: responsive ? (jsxRuntime.jsx(recharts.ResponsiveContainer, __assign({ width: "100%", height: "100%" }, { children: jsxRuntime.jsxs(recharts.AreaChart, __assign({ data: data, margin: { top: 5, right: 30, left: 20, bottom: 5 } }, { children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("linearGradient", __assign({ id: "colorGradient-".concat(themeName), x1: "0", y1: "0", x2: "0", y2: "1" }, { children: [jsxRuntime.jsx("stop", { offset: "5%", stopColor: theme.colors.primary, stopOpacity: fillOpacity }), jsxRuntime.jsx("stop", { offset: "95%", stopColor: theme.colors.secondary, stopOpacity: 0.1 })] })) }), showGrid && (jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: gridStrokeDasharray[gridStyle], stroke: theme.colors.grid, strokeOpacity: themeName === "glassmorphism" ? 0.3 : 0.5 })), jsxRuntime.jsx(recharts.XAxis, { dataKey: "name", tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: xAxisLabel
? {
value: xAxisLabel,
position: "insideBottom",
offset: -5,
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), jsxRuntime.jsx(recharts.YAxis, { tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: yAxisLabel
? {
value: yAxisLabel,
angle: -90,
position: "insideLeft",
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), tooltip && jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(CustomTooltip, {}) }), legend && (jsxRuntime.jsx(recharts.Legend, { content: customLegend ? customLegend : undefined, verticalAlign: legendPosition === "top" || legendPosition === "bottom"
? legendPosition
: "bottom", align: legendPosition === "left" || legendPosition === "right"
? legendPosition
: "center", wrapperStyle: { color: theme.colors.text, paddingTop: "20px" } })), jsxRuntime.jsx(recharts.Area, { type: "monotone", dataKey: dataKey, stroke: theme.colors.primary, fillOpacity: 1, fill: "url(#colorGradient-".concat(themeName, ")"), strokeWidth: 2, style: {
filter: glow && themeName === "techno"
? "drop-shadow(0 0 8px currentColor)"
: "none",
} })] })) }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(recharts.AreaChart, __assign({ data: data, margin: { top: 5, right: 30, left: 20, bottom: 5 } }, { children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("linearGradient", __assign({ id: "colorGradient-".concat(themeName), x1: "0", y1: "0", x2: "0", y2: "1" }, { children: [jsxRuntime.jsx("stop", { offset: "5%", stopColor: theme.colors.primary, stopOpacity: fillOpacity }), jsxRuntime.jsx("stop", { offset: "95%", stopColor: theme.colors.secondary, stopOpacity: 0.1 })] })) }), showGrid && (jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: gridStrokeDasharray[gridStyle], stroke: theme.colors.grid, strokeOpacity: themeName === "glassmorphism" ? 0.3 : 0.5 })), jsxRuntime.jsx(recharts.XAxis, { dataKey: "name", tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: xAxisLabel
? {
value: xAxisLabel,
position: "insideBottom",
offset: -5,
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), jsxRuntime.jsx(recharts.YAxis, { tick: { fill: theme.colors.textSecondary, fontSize: 12 }, axisLine: { stroke: theme.colors.grid }, tickLine: { stroke: theme.colors.grid }, label: yAxisLabel
? {
value: yAxisLabel,
angle: -90,
position: "insideLeft",
style: { textAnchor: "middle", fill: theme.colors.text },
}
: undefined }), tooltip && jsxRuntime.jsx(recharts.Tooltip, { content: jsxRuntime.jsx(CustomTooltip, {}) }), legend && (jsxRuntime.jsx(recharts.Legend, { verticalAlign: legendPosition === "top" || legendPosition === "bottom"
? legendPosition
: "bottom", align: legendPosition === "left" || legendPosition === "right"
? legendPosition
: "center", wrapperStyle: { color: theme.colors.text, paddingTop: "20px" } })), jsxRuntime.jsx(recharts.Area, { type: curveType || "monotone", dataKey: dataKey, stroke: theme.colors.primary, fillOpacity: 1, fill: "url(#colorGradient-".concat(themeName, ")"), strokeWidth: 2, style: {
filter: glow && themeName === "techno"
? "drop-shadow(0 0 8px currentColor)"
: "none",
}, onClick: function (data) { return onPointClick === null || onPointClick === void 0 ? void 0 : onPointClick(data); }, onMouseOver: function (data) { return onPointHover === null || onPointHover === void 0 ? void 0 : onPointHover(data); } })] })) })) })));
};
var ChartlyArea = function (_a) {
var _b = _a.theme, theme = _b === void 0 ? "neomorphism" : _b, props = __rest(_a, ["theme"]);
return (jsxRuntime.jsx(ChartThemeProvider, __assign({ theme: theme }, { children: jsxRuntime.jsx(AreaChartInner, __assign({}, props)) })));
};
exports.ChartlyArea = ChartlyArea;
exports.ChartlyBar = ChartlyBar;
exports.ChartlyLine = ChartlyLine;
//# sourceMappingURL=index.js.map