Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-06-30 10:13:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated storage bar sections

Browse source
This commit is contained in:
myung03 2024-06-26 17:46:43 -07:00
parent 6fa4e593c4
commit beaafd9918
2 changed files with 14 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
interface/app/$libraryId/overview/LibraryStats.tsx
View file

@ -115,7 +115,7 @@ const LibraryStats = () => {
}
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);
// 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 colors = [
'#6D90B9', // Gray
'#3A7ECC', // Slightly Darker Blue 400
'#AAAAAA', // Gray
'#004C99', // Tailwind Blue 700
'#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
@ -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 (
<Card className="flex h-[220px] w-[750px] shrink-0 flex-col bg-app-box/50">
<div className="flex overflow-hidden p-4">

46
interface/app/$libraryId/overview/StorageBar.tsx
View file

@ -44,27 +44,24 @@ const StorageBar: React.FC<StorageBarProps> = ({ sections, totalSpace }) => {
return `${pixvalue.toFixed(2)}px`;
};
const usedSpace = sections.reduce((acc, section) => acc + section.value, 0);
const unusedSpace = totalSpace - usedSpace;
const nonSystemSections = sections.filter((section) => section.name !== 'System Data');
const systemSection = sections.find((section) => section.name === 'System Data');
// Sort sections by value from smallest to largest
const sortedSections = sections.sort((a, b) => a.value - b.value);
return (
<div className="w-auto p-3">
<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 isHovered = hoveredSectionIndex === index;
return (
<Tooltip
key={index}
label={`${humanizedValue.value} ${humanizedValue.unit}`}
label={section.tooltip} // Swapped with the tooltip from the second Tooltip component
position="top"
>
<div
className={`relative h-full`}
className="relative h-full"
style={{
width: getPercentage(section.value),
minWidth: '2px', // Ensure very small sections are visible
@ -79,35 +76,14 @@ const StorageBar: React.FC<StorageBarProps> = ({ sections, totalSpace }) => {
</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 className={`mt-6 flex flex-wrap ${isDark ? 'text-ink-dull' : 'text-gray-800'}`}>
{sections.map((section, index) => (
<Tooltip key={index} label={section.tooltip} position="top">
{sortedSections.map((section, index) => (
<Tooltip
key={index}
label={`${humanizeSize(section.value).value} ${humanizeSize(section.value).unit}`}
position="top"
>
<div
className="mb-2 mr-8 flex items-center"
onMouseEnter={() => setHoveredSectionIndex(index)}