aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
271 lines (268 loc) • 6.95 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../../lib/utilsComprehensive.js';
import styles from './ChartElementStyles.module.css.js';
const createChartElementStyles = (theme = 'glass', colorScheme = ['var(--glass-color-primary)', 'var(--glass-color-danger)', 'var(--glass-color-success)', 'var(--glass-color-warning)', '#8b5cf6']) => {
const baseStyles = {
line: {
strokeWidth: 2,
strokeLinecap: 'round',
strokeLinejoin: 'round',
fill: 'none'
},
area: {
strokeWidth: 2,
fillOpacity: 0.3,
strokeLinecap: 'round',
strokeLinejoin: 'round'
},
bar: {
strokeWidth: 0,
rx: 4,
ry: 4
},
pie: {
strokeWidth: 2,
stroke: theme === 'glass' ? 'rgba(var(--glass-color-white) / var(--glass-opacity-20))' : theme === 'dark' ? '#333333' : 'var(--glass-white)'
},
scatter: {
r: 4,
strokeWidth: 2,
fillOpacity: 0.8
},
axis: {
line: {
stroke: theme === 'dark' ? '#555555' : '#cccccc',
strokeWidth: 1
},
text: {
fontSize: '12px',
fontWeight: 400,
fill: theme === 'dark' ? '#cccccc' : '#666666'
},
tick: {
stroke: theme === 'dark' ? '#555555' : '#cccccc',
strokeWidth: 1
}
},
dataPoint: {
r: 3,
strokeWidth: 2,
fillOpacity: 0.9,
cursor: 'pointer'
},
gradient: {
start: 'var(--glass-color-primary, 0.2)',
end: 'var(--glass-color-primary, 0.05)',
stops: [{
offset: '0%',
color: 'var(--glass-color-primary, 0.2)'
}, {
offset: '100%',
color: 'var(--glass-color-primary, 0.05)'
}]
}
};
// Apply theme-specific color adjustments
if (theme === 'glass') {
baseStyles.line.stroke = colorScheme[0];
baseStyles.area.fill = `url(#area-gradient-${theme})`;
baseStyles.bar.fill = colorScheme[0];
baseStyles.pie.fill = colorScheme[0];
baseStyles.scatter.fill = colorScheme[0];
baseStyles.scatter.stroke = 'var(--glass-border-hover)';
baseStyles.dataPoint.stroke = 'var(--glass-border-hover)';
} else if (theme === 'dark') {
baseStyles.line.stroke = colorScheme[0];
baseStyles.area.fill = colorScheme[0];
baseStyles.bar.fill = colorScheme[0];
baseStyles.pie.fill = colorScheme[0];
baseStyles.scatter.fill = colorScheme[0];
baseStyles.scatter.stroke = 'var(--glass-white)';
baseStyles.dataPoint.stroke = 'var(--glass-white)';
} else {
baseStyles.line.stroke = colorScheme[0];
baseStyles.area.fill = colorScheme[0];
baseStyles.bar.fill = colorScheme[0];
baseStyles.pie.fill = colorScheme[0];
baseStyles.scatter.fill = colorScheme[0];
baseStyles.scatter.stroke = 'var(--glass-white)';
baseStyles.dataPoint.stroke = 'var(--glass-white)';
}
return baseStyles;
};
// Toolbar primitives
const ChartToolbar = ({
className,
...props
}) => jsx("div", {
className: cn(styles.toolbar, className),
...props
});
const ChartTypeSelector = ({
className,
...props
}) => jsx("div", {
className: cn(styles.typeSelector, className),
...props
});
const TypeButton = ({
$active,
className,
...props
}) => jsx("button", {
className: cn(styles.typeButton, $active && styles.typeButtonActive, className),
...props
});
const ToolbarButton = ({
className,
...props
}) => jsx("button", {
className: cn(styles.toolbarButton, className),
...props
});
const EnhancedExportButton = ({
className,
children,
...props
}) => jsxs("button", {
className: cn(styles.toolbarButton, styles.toolbarButtonExport, className),
...props,
children: [jsx("span", {
"aria-hidden": "true",
role: "img",
children: "\uD83D\uDCE5"
}), children]
});
const ChartLegend = /*#__PURE__*/forwardRef(({
$position,
$glassEffect,
className,
style,
...props
}, ref) => {
const layoutStyle = {
...(style || {})
};
switch ($position) {
case 'top':
layoutStyle.marginBottom = 'var(--aura-space-4)';
layoutStyle.marginTop = '0';
layoutStyle.justifyContent = 'center';
break;
case 'bottom':
layoutStyle.marginTop = 'var(--aura-space-4)';
layoutStyle.justifyContent = 'center';
break;
case 'left':
layoutStyle.flexDirection = 'column';
layoutStyle.marginRight = 'var(--aura-space-4)';
break;
case 'right':
layoutStyle.flexDirection = 'column';
layoutStyle.marginLeft = 'var(--aura-space-4)';
break;
default:
layoutStyle.marginTop = layoutStyle.marginTop || 'var(--aura-space-4)';
break;
}
return jsx("div", {
ref: ref,
className: cn(styles.legend, $glassEffect && styles.legendGlass, className),
style: layoutStyle,
...props
});
});
ChartLegend.displayName = 'ChartLegend';
const LegendItem = ({
$active = true,
className,
...props
}) => jsx("div", {
className: cn(styles.legendItem, !$active && styles.legendInactive, className),
...props
});
const LegendColor = ({
$color,
$active = true,
className,
style,
...props
}) => jsx("div", {
className: cn(styles.legendColor, className),
style: {
background: $color || '#6366f1',
opacity: $active ? 1 : 0.5,
...style
},
...props
});
const LegendLabel = ({
$active = true,
className,
style,
...props
}) => jsx("span", {
className: cn(styles.legendLabel, className),
style: {
opacity: $active ? 1 : 0.6,
...style
},
...props
});
const getColorPalette = (theme = 'glass') => {
if (theme === 'glass') {
return ['var(--glass-color-primary)',
// Blue
'var(--glass-color-danger)',
// Red
'var(--glass-color-success)',
// Green
'var(--glass-color-warning)',
// Yellow
'#8b5cf6',
// Purple
'#ec4899',
// Pink
'#06b6d4',
// Cyan
'#84cc16' // Lime
];
} else if (theme === 'dark') {
return ['var(--glass-color-primary-light)',
// Light blue
'var(--glass-color-danger-light)',
// Light red
'var(--glass-color-success-light)',
// Light green
'var(--glass-color-warning-light)',
// Light yellow
'#a78bfa',
// Light purple
'#f472b6',
// Light pink
'#22d3ee',
// Light cyan
'#a3e635' // Light lime
];
} else {
return ['var(--glass-color-primary-dark)',
// Dark blue
'var(--glass-color-danger-dark)',
// Dark red
'var(--glass-color-success-dark)',
// Dark green
'var(--glass-color-warning-dark)',
// Dark yellow
'#7c3aed',
// Dark purple
'#db2777',
// Dark pink
'#0891b2',
// Dark cyan
'#65a30d' // Dark lime
];
}
};
export { ChartLegend, ChartToolbar, ChartTypeSelector, EnhancedExportButton, LegendColor, LegendItem, LegendLabel, ToolbarButton, TypeButton, createChartElementStyles, getColorPalette };
//# sourceMappingURL=ChartElementStyles.js.map