Console 1791 rpm wrong scale

.changeset/young-terms-smell.md

@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+fix: correct RPM chart Y-axis scale to match actual values

packages/web/app/src/components/target/insights/List.tsx → packages/web/app/src/components/target/insights/list.tsx

@@ -23,7 +23,7 @@ import {
   PaginationState,
   useReactTable,
 } from '@tanstack/react-table';
-import { OperationsFallback } from './Fallback';
+import { OperationsFallback } from './fallback';
 
 interface Operation {
   id: string;

packages/web/app/src/components/target/insights/Stats.tsx → packages/web/app/src/components/target/insights/stats.tsx

@@ -22,7 +22,7 @@ import { createAdaptiveTimeFormatter } from '@/lib/date-time';
 import {
   formatDuration,
   formatNumber,
-  formatThroughput,
+  formatRpm,
   toDecimal,
   useFormattedDuration,
   useFormattedNumber,
@@ -31,7 +31,7 @@ import {
 import { pick } from '@/lib/object';
 import { useChartStyles } from '@/lib/utils';
 import { useRouter } from '@tanstack/react-router';
-import { OperationsFallback } from './Fallback';
+import { OperationsFallback } from './fallback';
 import { resolutionToMilliseconds } from './utils';
 
 const Stats_GeneralOperationsStatsQuery = graphql(`
@@ -947,8 +947,7 @@ function RpmOverTimeStats({
   const { requestsOverTime: requests = [] } =
     useFragment(RpmOverTimeStats_OperationStatsFragment, operationStats) ?? {};
 
-  const interval = resolutionToMilliseconds(resolution, period);
-  const windowInM = interval / (60 * 1000);
+  const windowInM = resolutionToMilliseconds(resolution, period) / (60 * 1000);
   const rpmOverTime = useMemo(() => {
     if (requests.length) {
       return requests.map<[string, number]>(node => [
@@ -1005,7 +1004,7 @@ function RpmOverTimeStats({
                   boundaryGap: false,
                   min: 0,
                   axisLabel: {
-                    formatter: (value: number) => formatThroughput(value * 10, interval),
+                    formatter: (value: number) => formatRpm(value),
                   },
                   splitLine: {
                     lineStyle: {

packages/web/app/src/lib/hooks/index.ts

@@ -2,7 +2,7 @@ export { useClipboard } from './use-clipboard';
 export { toDecimal, useDecimal } from './use-decimal';
 export { formatDuration, useFormattedDuration } from './use-formatted-duration';
 export { formatNumber, useFormattedNumber } from './use-formatted-number';
-export { formatThroughput, useFormattedThroughput } from './use-formatted-throughput';
+export { formatRpm, formatThroughput, useFormattedThroughput } from './use-formatted-throughput';
 export { useLocalStorageJson } from './use-local-storage-json';
 export { useLocalStorage } from './use-local-storage';
 export { useNotifications } from './use-notifications';

packages/web/app/src/lib/hooks/use-formatted-throughput.ts

@@ -2,10 +2,7 @@ import React from 'react';
 import { toDecimal } from './use-decimal';
 import { formatNumber } from './use-formatted-number';
 
-export function formatThroughput(requests: number, window: number) {
-  const distance = window / (60 * 1000);
-  const rpm = requests / distance;
-
+export function formatRpm(rpm: number) {
   if (rpm >= 1000) {
     return formatNumber(rpm);
   }
@@ -21,6 +18,11 @@ export function formatThroughput(requests: number, window: number) {
   return toDecimal(rpm, 4);
 }
 
+export function formatThroughput(requests: number, window: number) {
+  const distance = window / (60 * 1000);
+  return formatRpm(requests / distance);
+}
+
 export function useFormattedThroughput({
   requests,
   window,

packages/web/app/src/pages/target-insights-operation.tsx

@@ -4,7 +4,7 @@ import { useQuery } from 'urql';
 import { Section } from '@/components/common';
 import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
 import { Page, TargetLayout } from '@/components/layouts/target';
-import { OperationsStats } from '@/components/target/insights/Stats';
+import { OperationsStats } from '@/components/target/insights/stats';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { DateRangePicker, presetLast1Day } from '@/components/ui/date-range-picker';

packages/web/app/src/pages/target-insights.tsx

@@ -8,9 +8,9 @@ import type { SavedFilterView } from '@/components/base/insights-filters';
 import { InsightsFilters } from '@/components/base/insights-filters';
 import { TriggerButton } from '@/components/base/trigger-button';
 import { Page, TargetLayout } from '@/components/layouts/target';
-import { OperationsList } from '@/components/target/insights/List';
+import { OperationsList } from '@/components/target/insights/list';
 import { SaveFilterButton } from '@/components/target/insights/save-filter-button';
-import { OperationsStats } from '@/components/target/insights/Stats';
+import { OperationsStats } from '@/components/target/insights/stats';
 import { DateRangePicker, presetLast7Days } from '@/components/ui/date-range-picker';
 import { EmptyList } from '@/components/ui/empty-list';
 import { Meta } from '@/components/ui/meta';