mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 09:53:30 +00:00
updated storage bar sections
This commit is contained in:
parent
6fa4e593c4
commit
beaafd9918
|
@ -115,7 +115,7 @@ const LibraryStats = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const { statistics } = stats.data;
|
const { statistics } = stats.data;
|
||||||
const totalSpace = Number(statistics.total_local_bytes_capacity);
|
const totalSpace = Number(statistics.total_library_bytes);
|
||||||
const totalUsedSpace = Number(statistics.total_local_bytes_used);
|
const totalUsedSpace = Number(statistics.total_local_bytes_used);
|
||||||
|
|
||||||
// Define the major categories and aggregate the "Other" category
|
// Define the major categories and aggregate the "Other" category
|
||||||
|
@ -146,11 +146,11 @@ const LibraryStats = () => {
|
||||||
|
|
||||||
const sections: Section[] = Object.entries(aggregatedData).map(([name, data], index) => {
|
const sections: Section[] = Object.entries(aggregatedData).map(([name, data], index) => {
|
||||||
const colors = [
|
const colors = [
|
||||||
|
'#6D90B9', // Gray
|
||||||
'#3A7ECC', // Slightly Darker Blue 400
|
'#3A7ECC', // Slightly Darker Blue 400
|
||||||
'#AAAAAA', // Gray
|
|
||||||
'#004C99', // Tailwind Blue 700
|
'#004C99', // Tailwind Blue 700
|
||||||
'#2563EB', // Tailwind Blue 500
|
'#2563EB', // Tailwind Blue 500
|
||||||
'#00274D' // Dark Navy Blue,
|
'#004C99' // Dark Navy Blue,
|
||||||
];
|
];
|
||||||
|
|
||||||
const color = colors[index % colors.length] || '#8F8F8F'; // Use a default color if colors array is empty
|
const color = colors[index % colors.length] || '#8F8F8F'; // Use a default color if colors array is empty
|
||||||
|
@ -162,14 +162,6 @@ const LibraryStats = () => {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add System Data section
|
|
||||||
sections.push({
|
|
||||||
name: 'System Data',
|
|
||||||
value: systemDataBytes,
|
|
||||||
color: '#2F3038', // Gray for System Data
|
|
||||||
tooltip: 'System data that exists outside of your Spacedrive library'
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="flex h-[220px] w-[750px] shrink-0 flex-col bg-app-box/50">
|
<Card className="flex h-[220px] w-[750px] shrink-0 flex-col bg-app-box/50">
|
||||||
<div className="flex overflow-hidden p-4">
|
<div className="flex overflow-hidden p-4">
|
||||||
|
|
|
@ -44,27 +44,24 @@ const StorageBar: React.FC<StorageBarProps> = ({ sections, totalSpace }) => {
|
||||||
return `${pixvalue.toFixed(2)}px`;
|
return `${pixvalue.toFixed(2)}px`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const usedSpace = sections.reduce((acc, section) => acc + section.value, 0);
|
// Sort sections by value from smallest to largest
|
||||||
const unusedSpace = totalSpace - usedSpace;
|
const sortedSections = sections.sort((a, b) => a.value - b.value);
|
||||||
|
|
||||||
const nonSystemSections = sections.filter((section) => section.name !== 'System Data');
|
|
||||||
const systemSection = sections.find((section) => section.name === 'System Data');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-auto p-3">
|
<div className="w-auto p-3">
|
||||||
<div className="relative mt-1 flex h-6 overflow-hidden rounded">
|
<div className="relative mt-1 flex h-6 overflow-hidden rounded">
|
||||||
{nonSystemSections.map((section, index) => {
|
{sortedSections.map((section, index) => {
|
||||||
const humanizedValue = humanizeSize(section.value);
|
const humanizedValue = humanizeSize(section.value);
|
||||||
const isHovered = hoveredSectionIndex === index;
|
const isHovered = hoveredSectionIndex === index;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
key={index}
|
key={index}
|
||||||
label={`${humanizedValue.value} ${humanizedValue.unit}`}
|
label={section.tooltip} // Swapped with the tooltip from the second Tooltip component
|
||||||
position="top"
|
position="top"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`relative h-full`}
|
className="relative h-full"
|
||||||
style={{
|
style={{
|
||||||
width: getPercentage(section.value),
|
width: getPercentage(section.value),
|
||||||
minWidth: '2px', // Ensure very small sections are visible
|
minWidth: '2px', // Ensure very small sections are visible
|
||||||
|
@ -79,35 +76,14 @@ const StorageBar: React.FC<StorageBarProps> = ({ sections, totalSpace }) => {
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{unusedSpace > 0 && (
|
|
||||||
<div
|
|
||||||
className="relative h-full"
|
|
||||||
style={{
|
|
||||||
width: getPercentage(unusedSpace),
|
|
||||||
backgroundColor: isDark ? '#1C1D25' : '#D3D3D3'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{systemSection && (
|
|
||||||
<Tooltip
|
|
||||||
label={`${humanizeSize(systemSection.value).value} ${humanizeSize(systemSection.value).unit}`}
|
|
||||||
position="top"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="relative h-full rounded-r"
|
|
||||||
style={{
|
|
||||||
width: getPercentage(systemSection.value),
|
|
||||||
minWidth: '2px',
|
|
||||||
backgroundColor: systemSection.color,
|
|
||||||
transition: 'background-color 0.3s ease-in-out'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className={`mt-6 flex flex-wrap ${isDark ? 'text-ink-dull' : 'text-gray-800'}`}>
|
<div className={`mt-6 flex flex-wrap ${isDark ? 'text-ink-dull' : 'text-gray-800'}`}>
|
||||||
{sections.map((section, index) => (
|
{sortedSections.map((section, index) => (
|
||||||
<Tooltip key={index} label={section.tooltip} position="top">
|
<Tooltip
|
||||||
|
key={index}
|
||||||
|
label={`${humanizeSize(section.value).value} ${humanizeSize(section.value).unit}`}
|
||||||
|
position="top"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
className="mb-2 mr-8 flex items-center"
|
className="mb-2 mr-8 flex items-center"
|
||||||
onMouseEnter={() => setHoveredSectionIndex(index)}
|
onMouseEnter={() => setHoveredSectionIndex(index)}
|
||||||
|
|
Loading…
Reference in a new issue