feat: Add storage unit selection for actions and packages, allowing toggling between GB-Hours and GB-Months (#2)

Author: wechuli

README.md

@@ -25,6 +25,7 @@ The GitHub Reports Visualizer transforms complex GitHub billing CSV data into in
 - **Cost Center**: Analyze costs by business units
 - **Repository**: Smart repository filtering - shows all repos by default, automatically filters by selected organization
 - **Cost vs Quantity**: Toggle between cost analysis ($) and usage volume for Actions, Storage, and Packages
+- **Storage Units**: Switch between GB-Hours and GB-Months for storage-related services (Actions Storage, Packages)
 
 ### 📈 Interactive Visualizations
 
@@ -133,8 +134,9 @@ The parser automatically detects column names in various formats, making it comp
    - Choose repository to see repo-specific analysis
    - Filter by cost center for business unit insights
 5. **Toggle Breakdown**: Switch between Cost ($) and Usage Volume views for Actions, Storage, and Packages
-6. **Analyze Trends**: View complete historical data with no date limitations
-7. **Export Insights**: All charts and data remain in your browser for analysis
+6. **Choose Storage Units**: For storage services (Actions Storage, Packages), toggle between GB-Hours and GB-Months (1 month ≈ 730 hours)
+7. **Analyze Trends**: View complete historical data with no date limitations
+8. **Export Insights**: All charts and data remain in your browser for analysis
 
 ## 🏗️ Project Structure
 

src/app/page.tsx

@@ -40,6 +40,12 @@ export default function Home() {
     copilot: "quantity",
     codespaces: "quantity",
   });
+  const [storageUnit, setStorageUnit] = useState<
+    Record<string, "gb-hours" | "gb-months">
+  >({
+    actionsStorage: "gb-hours",
+    packages: "gb-hours",
+  });
 
   const handleDataLoaded = (report: GitHubBillingReport) => {
     setBillingData(report.data);
@@ -74,6 +80,16 @@ export default function Home() {
     []
   );
 
+  const handleStorageUnitChange = useCallback(
+    (serviceType: string, newUnit: "gb-hours" | "gb-months") => {
+      setStorageUnit((prev) => ({
+        ...prev,
+        [serviceType]: newUnit,
+      }));
+    },
+    []
+  );
+
   // Memoized breakdown change handlers to prevent re-renders
   const handleActionsMinutesBreakdownChange = useCallback(
     (newBreakdown: "cost" | "quantity") => {
@@ -96,6 +112,20 @@ export default function Home() {
     [handleBreakdownChange]
   );
 
+  const handleActionsStorageUnitChange = useCallback(
+    (newUnit: "gb-hours" | "gb-months") => {
+      handleStorageUnitChange("actionsStorage", newUnit);
+    },
+    [handleStorageUnitChange]
+  );
+
+  const handlePackagesUnitChange = useCallback(
+    (newUnit: "gb-hours" | "gb-months") => {
+      handleStorageUnitChange("packages", newUnit);
+    },
+    [handleStorageUnitChange]
+  );
+
   // Create tabs based on available data
   const createTabs = () => {
     if (!categorizedData || !filteredData) {
@@ -164,13 +194,15 @@ export default function Home() {
                 handleFiltersChange("actionsStorage", filtered)
               }
               onBreakdownChange={handleActionsStorageBreakdownChange}
+              onStorageUnitChange={handleActionsStorageUnitChange}
               serviceType="actionsStorage"
             />
             <ServiceChart
               data={filteredData.actionsStorage}
               title="GitHub Actions Storage"
               serviceType="actionsStorage"
               breakdown={breakdown.actionsStorage}
+              storageUnit={storageUnit.actionsStorage}
             />
           </div>
         ),
@@ -186,13 +218,15 @@ export default function Home() {
                 handleFiltersChange("packages", filtered)
               }
               onBreakdownChange={handlePackagesBreakdownChange}
+              onStorageUnitChange={handlePackagesUnitChange}
               serviceType="packages"
             />
             <ServiceChart
               data={filteredData.packages}
               title="GitHub Packages"
               serviceType="packages"
               breakdown={breakdown.packages}
+              storageUnit={storageUnit.packages}
             />
           </div>
         ),

src/components/charts/ServiceChart.tsx

@@ -28,6 +28,7 @@ interface ServiceChartProps {
   useSkuAnalysis?: boolean; // Override to use SKU-based analysis instead of repository-based
   breakdown?: "cost" | "quantity"; // Whether to breakdown by cost or quantity
   hasMultipleOrganizations?: boolean; // Whether to show organization breakdown charts
+  storageUnit?: "gb-hours" | "gb-months"; // Unit for displaying storage data
 }
 
 const COLORS = [
@@ -44,12 +45,21 @@ const COLORS = [
   "#64748b",
 ];
 
+// Conversion constant: 1 month ≈ 730 hours (average)
+const HOURS_PER_MONTH = 730;
+
+// Convert GB-hours to GB-months
+function convertToGBMonths(gbHours: number): number {
+  return gbHours / HOURS_PER_MONTH;
+}
+
 export function ServiceChart({
   data,
   title,
   serviceType,
   useSkuAnalysis = false,
   breakdown = "quantity",
+  storageUnit = "gb-hours",
 }: ServiceChartProps) {
   if (!data || data.length === 0) {
     return (
@@ -84,6 +94,7 @@ export function ServiceChart({
         title={title}
         serviceType={serviceType}
         breakdown={breakdown}
+        storageUnit={storageUnit}
       />
     );
   }
@@ -117,6 +128,7 @@ export function ServiceChart({
         serviceType={serviceType}
         breakdown={breakdown}
         hasMultipleOrganizations={hasMultipleOrganizations}
+        storageUnit={storageUnit}
       />
     );
   } else {
@@ -126,6 +138,7 @@ export function ServiceChart({
         title={title}
         serviceType={serviceType}
         breakdown={breakdown}
+        storageUnit={storageUnit}
       />
     );
   }
@@ -136,6 +149,7 @@ function RepositorySpecificChart({
   title,
   serviceType,
   breakdown = "quantity",
+  storageUnit = "gb-hours",
 }: ServiceChartProps) {
   const repository = data[0]?.repository || "Unknown Repository";
 
@@ -187,6 +201,10 @@ function RepositorySpecificChart({
     if (serviceType === "actionsMinutes") {
       return `${value.toLocaleString()} min`;
     } else if (serviceType === "actionsStorage" || serviceType === "packages") {
+      if (storageUnit === "gb-months") {
+        const gbMonths = convertToGBMonths(value);
+        return `${gbMonths.toLocaleString(undefined, { maximumFractionDigits: 2 })} GB·mo`;
+      }
       return `${value.toLocaleString()} GB·h`;
     } else if (serviceType === "copilot") {
       return `${value.toFixed(2)} users`;
@@ -682,6 +700,7 @@ function RepositoryBasedChart({
   serviceType,
   breakdown = "quantity",
   hasMultipleOrganizations = false,
+  storageUnit = "gb-hours",
 }: ServiceChartProps) {
   // Get top 10 repositories by the selected breakdown metric
   const repoTotals = data.reduce((acc, item) => {
@@ -832,6 +851,10 @@ function RepositoryBasedChart({
     if (serviceType === "actionsMinutes") {
       return `${value.toLocaleString()} min`;
     } else if (serviceType === "actionsStorage" || serviceType === "packages") {
+      if (storageUnit === "gb-months") {
+        const gbMonths = convertToGBMonths(value);
+        return `${gbMonths.toLocaleString(undefined, { maximumFractionDigits: 2 })} GB·mo`;
+      }
       return `${value.toLocaleString()} GB·h`;
     } else if (serviceType === "copilot") {
       return `${value.toFixed(2)} users`;
@@ -1084,6 +1107,7 @@ function SKUBasedChart({
   title,
   serviceType,
   breakdown = "quantity",
+  storageUnit = "gb-hours",
 }: ServiceChartProps) {
   // Check if we have multiple organizations to show organization breakdown
   const organizations = Array.from(
@@ -1163,6 +1187,10 @@ function SKUBasedChart({
     if (serviceType === "actionsMinutes") {
       return `${value.toLocaleString()} min`;
     } else if (serviceType === "actionsStorage" || serviceType === "packages") {
+      if (storageUnit === "gb-months") {
+        const gbMonths = convertToGBMonths(value);
+        return `${gbMonths.toLocaleString(undefined, { maximumFractionDigits: 2 })} GB·mo`;
+      }
       return `${value.toLocaleString()} GB·h`;
     } else if (serviceType === "copilot") {
       return `${value.toFixed(2)} users`;

src/components/ui/DataFilters.tsx

@@ -5,6 +5,7 @@ interface DataFiltersProps {
   data: ServiceData[];
   onFiltersChange: (filteredData: ServiceData[]) => void;
   onBreakdownChange?: (breakdown: "cost" | "quantity") => void;
+  onStorageUnitChange?: (unit: "gb-hours" | "gb-months") => void;
   serviceType?:
     | "actionsMinutes"
     | "actionsStorage"
@@ -22,12 +23,14 @@ interface FilterState {
   costCenter: string;
   repository: string;
   breakdown: "cost" | "quantity";
+  storageUnit: "gb-hours" | "gb-months";
 }
 
 export function DataFilters({
   data,
   onFiltersChange,
   onBreakdownChange,
+  onStorageUnitChange,
   serviceType,
 }: DataFiltersProps) {
   const [filters, setFilters] = useState<FilterState>({
@@ -36,6 +39,7 @@ export function DataFilters({
     costCenter: "",
     repository: "",
     breakdown: "quantity",
+    storageUnit: "gb-hours",
   });
 
   // Get unique values for dropdowns
@@ -129,6 +133,20 @@ export function DataFilters({
     }
   }, []); // Only run on mount
 
+  // Notify parent of storage unit changes
+  useEffect(() => {
+    if (onStorageUnitChange) {
+      onStorageUnitChange(filters.storageUnit);
+    }
+  }, [filters.storageUnit]);
+
+  // Notify parent of initial storage unit on mount
+  useEffect(() => {
+    if (onStorageUnitChange) {
+      onStorageUnitChange(filters.storageUnit);
+    }
+  }, []); // Only run on mount
+
   const handleFilterChange = (
     key: string,
     value: string | { start: string; end: string }
@@ -156,6 +174,7 @@ export function DataFilters({
       costCenter: "",
       repository: "",
       breakdown: "quantity",
+      storageUnit: "gb-hours",
     });
   };
 
@@ -172,6 +191,18 @@ export function DataFilters({
     serviceType === "actionsStorage" ||
     serviceType === "packages";
 
+  // Show storage unit selector for storage-related services
+  const showStorageUnitSelector =
+    serviceType === "actionsStorage" || serviceType === "packages";
+
+  // Calculate grid columns based on visible filters
+  const gridCols =
+    showBreakdownSelector && showStorageUnitSelector
+      ? "lg:grid-cols-6"
+      : showBreakdownSelector
+      ? "lg:grid-cols-5"
+      : "lg:grid-cols-4";
+
   return (
     <div className="bg-gray-800/30 rounded-lg p-6 mb-6">
       <div className="flex items-center justify-between mb-4">
@@ -186,11 +217,7 @@ export function DataFilters({
         )}
       </div>
 
-      <div
-        className={`grid grid-cols-1 md:grid-cols-2 ${
-          showBreakdownSelector ? "lg:grid-cols-5" : "lg:grid-cols-4"
-        } gap-4`}
-      >
+      <div className={`grid grid-cols-1 md:grid-cols-2 ${gridCols} gap-4`}>
         {/* Date Range */}
         <div className="space-y-2">
           <label className="text-sm text-gray-400">Date Range</label>
@@ -298,6 +325,26 @@ export function DataFilters({
             </select>
           </div>
         )}
+
+        {/* Storage Unit Selector */}
+        {showStorageUnitSelector && (
+          <div className="space-y-2">
+            <label className="text-sm text-gray-400">Storage Unit</label>
+            <select
+              value={filters.storageUnit}
+              onChange={(e) =>
+                handleFilterChange(
+                  "storageUnit",
+                  e.target.value as "gb-hours" | "gb-months"
+                )
+              }
+              className="w-full px-3 py-2 bg-gray-700/50 border border-gray-600 rounded-md text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            >
+              <option value="gb-hours">GB-Hours</option>
+              <option value="gb-months">GB-Months</option>
+            </select>
+          </div>
+        )}
       </div>
     </div>
   );