Allow toggling units in the statistics dialog

src/css/ingame_hud/statistics.scss

@@ -33,18 +33,39 @@
 
             &.displayIcons,
             &.displayDetailed,
+            &.displaySorted,
+            &.displayIterateUnit {
+                background: transparent center center / #{D(15px)} no-repeat;
+            }
+
+            &.displayDetailed {
+                background-image: uiResource("icons/display_list.png");
+            }
+
+            &.displayIcons {
+                background-image: uiResource("icons/display_icons.png");
+                background-size: #{D(11.5px)};
+            }
+
+            &.displayDetailed {
+                @include S(border-top-left-radius, $globalBorderRadius);
+                @include S(border-bottom-left-radius, $globalBorderRadius);
+            }
+
             &.displaySorted {
-                background: uiResource("icons/display_list.png") center center / #{D(15px)} no-repeat;
+                background-image: uiResource("icons/display_sorted.png");
-                &.displayIcons {
+                background-size: #{D(11.5px)};
-                    background-image: uiResource("icons/display_icons.png");
+                margin-right: 5px;
-                    background-size: #{D(11.5px)};
+                @include S(border-top-right-radius, $globalBorderRadius);
-                }
+                @include S(border-bottom-right-radius, $globalBorderRadius);
-                &.displaySorted {
+
-                    background-image: uiResource("icons/display_sorted.png");
+                @include S(padding, 1px, 0);
-                    background-size: #{D(11.5px)};
+            }
-                    margin-right: 4px;
+
-                    @include S(padding, 1px, 0);
+            &.displayIterateUnit {
-                }
+                background-image: uiResource("icons/toggle_unit.png");
+                opacity: 0.8;
+                @include S(padding, 1px, 0);
             }
 
             background-color: #44484a !important;

src/js/game/hud/parts/statistics.js

@@ -4,7 +4,7 @@ import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
 import { enumAnalyticsDataSource } from "../../production_analytics";
 import { BaseHUDPart } from "../base_hud_part";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
-import { enumDisplayMode, HUDShapeStatisticsHandle } from "./statistics_handle";
+import { enumDisplayMode, HUDShapeStatisticsHandle, statisticsUnitsSeconds } from "./statistics_handle";
 import { T } from "../../../translations";
 
 /**
@@ -47,10 +47,12 @@ export class HUDStatistics extends BaseHUDPart {
             this.trackClicks(button, () => this.setDataSource(dataSource));
         }
 
+        const buttonIterateUnit = makeButton(this.filtersDisplayMode, ["displayIterateUnit"]);
         const buttonDisplaySorted = makeButton(this.filtersDisplayMode, ["displaySorted"]);
         const buttonDisplayDetailed = makeButton(this.filtersDisplayMode, ["displayDetailed"]);
         const buttonDisplayIcons = makeButton(this.filtersDisplayMode, ["displayIcons"]);
 
+        this.trackClicks(buttonIterateUnit, () => this.iterateUnit());
         this.trackClicks(buttonDisplaySorted, () => this.toggleSorted());
         this.trackClicks(buttonDisplayIcons, () => this.setDisplayMode(enumDisplayMode.icons));
         this.trackClicks(buttonDisplayDetailed, () => this.setDisplayMode(enumDisplayMode.detailed));
@@ -97,6 +99,17 @@ export class HUDStatistics extends BaseHUDPart {
         this.setSorted(!this.sorted);
     }
 
+    /**
+     * Chooses the next unit
+     */
+    iterateUnit() {
+        const units = Array.from(Object.keys(statisticsUnitsSeconds));
+        const newIndex = (units.indexOf(this.currentUnit) + 1) % units.length;
+        this.currentUnit = units[newIndex];
+
+        this.rerenderPartial();
+    }
+
     initialize() {
         this.domAttach = new DynamicDomAttach(this.root, this.background, {
             attachClass: "visible",
@@ -112,6 +125,8 @@ export class HUDStatistics extends BaseHUDPart {
         /** @type {Object.<string, HUDShapeStatisticsHandle>} */
         this.activeHandles = {};
 
+        this.currentUnit = "second";
+
         this.setSorted(true);
         this.setDataSource(enumAnalyticsDataSource.produced);
         this.setDisplayMode(enumDisplayMode.detailed);
@@ -173,7 +188,7 @@ export class HUDStatistics extends BaseHUDPart {
     rerenderPartial() {
         for (const key in this.activeHandles) {
             const handle = this.activeHandles[key];
-            handle.update(this.displayMode, this.dataSource);
+            handle.update(this.displayMode, this.dataSource, this.currentUnit);
         }
     }
 

src/js/game/hud/parts/statistics_handle.js

@@ -12,6 +12,16 @@ export const enumDisplayMode = {
     detailed: "detailed",
 };
 
+/**
+ * Stores how many seconds one unit is
+ * @type {Object<string, number>}
+ */
+export const statisticsUnitsSeconds = {
+    second: 1,
+    minute: 60,
+    hour: 3600,
+};
+
 /**
  * Simple wrapper for a shape definition within the shape statistics
  */
@@ -64,9 +74,10 @@ export class HUDShapeStatisticsHandle {
      *
      * @param {enumDisplayMode} displayMode
      * @param {enumAnalyticsDataSource} dataSource
+     * @param {string} unit
      * @param {boolean=} forced
      */
-    update(displayMode, dataSource, forced = false) {
+    update(displayMode, dataSource, unit, forced = false) {
         if (!this.element) {
             return;
         }
@@ -89,12 +100,12 @@ export class HUDShapeStatisticsHandle {
             case enumAnalyticsDataSource.delivered:
             case enumAnalyticsDataSource.produced: {
                 let rate =
-                    (this.root.productionAnalytics.getCurrentShapeRate(dataSource, this.definition) /
+                    this.root.productionAnalytics.getCurrentShapeRate(dataSource, this.definition) /
-                        globalConfig.analyticsSliceDurationSeconds) *
+                    globalConfig.analyticsSliceDurationSeconds;
-                    60;
+
-                this.counter.innerText = T.ingame.statistics.shapesPerSecond.replace(
+                this.counter.innerText = T.ingame.statistics.shapesDisplayUnits[unit].replace(
                     "<shapes>",
-                    formatBigNumber(rate / 60)
+                    formatBigNumber(rate * statisticsUnitsSeconds[unit])
                 );
                 break;
             }

translations/base-en.yaml

@@ -380,7 +380,10 @@ ingame:
         noShapesProduced: No shapes have been produced so far.
 
         # Displays the shapes per second, e.g. '523 / s'
-        shapesPerSecond: <shapes> / s
+        shapesDisplayUnits:
+            second: <shapes> / s
+            minute: <shapes> / m
+            hour: <shapes> / h
 
     # Settings menu, when you press "ESC"
     settingsMenu: