claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
88 lines (87 loc) • 2.3 kB
JavaScript
// Network visualization types for ClarityKit
// Predefined layouts for common use cases
export const NetworkLayouts = {
FORCE_DIRECTED: {
name: 'cose',
options: {
animate: true,
animationDuration: 1000,
nodeRepulsion: 400000,
idealEdgeLength: 100,
edgeElasticity: 100,
nestingFactor: 5,
gravity: 80,
numIter: 1000,
randomize: false
}
},
HIERARCHICAL: {
name: 'dagre',
options: {
animate: true,
animationDuration: 1000,
rankDir: 'TB',
nodeSep: 50,
edgeSep: 10,
rankSep: 50
}
},
CIRCULAR: {
name: 'circle',
options: {
animate: true,
animationDuration: 1000,
radius: 200,
startAngle: -Math.PI / 2,
clockwise: true
}
},
GRID: {
name: 'grid',
options: {
animate: true,
animationDuration: 1000,
rows: undefined,
cols: undefined
}
},
RANDOM: {
name: 'random',
options: {
animate: true,
animationDuration: 1000
}
}
};
// Node and edge styling presets
export const NodeStyles = {
SMALL: { size: 20, fontSize: 10 },
MEDIUM: { size: 30, fontSize: 12 },
LARGE: { size: 50, fontSize: 14 },
XLARGE: { size: 80, fontSize: 16 }
};
export const EdgeStyles = {
THIN: { width: 1 },
NORMAL: { width: 2 },
THICK: { width: 4 },
VERY_THICK: { width: 6 }
};
// Color palettes for different themes
export const ColorPalettes = {
CATEGORY_10: [
'#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd',
'#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'
],
PASTEL: [
'#FFB3BA', '#FFDFBA', '#FFFFBA', '#BAFFC9', '#BAE1FF',
'#FFB3FF', '#C9BAFF', '#FFBABA', '#BAFFBA', '#BAFFFF'
],
VIBRANT: [
'#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
'#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9'
],
NORD: [
'#8fbcbb', '#88c0d0', '#81a1c1', '#5e81ac', '#bf616a',
'#d08770', '#ebcb8b', '#a3be8c', '#b48ead', '#2e3440'
]
};