diff --git a/packages/manager/.changeset/pr-11317-upcoming-features-1732533936298.md b/packages/manager/.changeset/pr-11317-upcoming-features-1732533936298.md new file mode 100644 index 00000000000..45112c15a2c --- /dev/null +++ b/packages/manager/.changeset/pr-11317-upcoming-features-1732533936298.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Modify `generate12HoursTicks` method in AreaChart `utils.ts`, Remove breakpoint condition in `MetricsDisplay.tsx`, modify `legendHeight` and `xAxisTickCount` in `CloudPulseLineGraph.tsx` ([#11317](https://github.com/linode/manager/pull/11317)) diff --git a/packages/manager/src/components/AreaChart/AreaChart.tsx b/packages/manager/src/components/AreaChart/AreaChart.tsx index 3a5c014453c..1ebe751e78f 100644 --- a/packages/manager/src/components/AreaChart/AreaChart.tsx +++ b/packages/manager/src/components/AreaChart/AreaChart.tsx @@ -64,7 +64,7 @@ interface YAxisProps { /** * The formatter function for the y-axis tick. */ - tickFormat: () => string; + tickFormat: (value: number) => string; } export interface AreaChartProps { diff --git a/packages/manager/src/components/AreaChart/utils.ts b/packages/manager/src/components/AreaChart/utils.ts index 8777ca93bc1..0bbcb638a0b 100644 --- a/packages/manager/src/components/AreaChart/utils.ts +++ b/packages/manager/src/components/AreaChart/utils.ts @@ -57,6 +57,10 @@ export const generate12HourTicks = ( const startTime = data[0].timestamp; const endTime = data[data.length - 1].timestamp; + if (tickCount === 1) { + return [(startTime + endTime) / 2]; + } + // Calculate duration in hours const duration = DateTime.fromMillis(endTime, { zone: timezone }).diff( DateTime.fromMillis(startTime, { zone: timezone }), diff --git a/packages/manager/src/features/CloudPulse/Utils/unitConversion.ts b/packages/manager/src/features/CloudPulse/Utils/unitConversion.ts index 7dfccb8d7bb..a22a473c7e7 100644 --- a/packages/manager/src/features/CloudPulse/Utils/unitConversion.ts +++ b/packages/manager/src/features/CloudPulse/Utils/unitConversion.ts @@ -166,7 +166,7 @@ export const convertValueToUnit = (value: number, maxUnit: string) => { if (convertingValue === 1) { return roundTo(value); } - return value / convertingValue; + return roundTo(value / convertingValue); }; /** diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 76cb91b9cf5..d983bb332fb 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { AreaChart } from 'src/components/AreaChart/AreaChart'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; +import { roundTo } from 'src/utilities/roundTo'; import type { AreaChartProps } from 'src/components/AreaChart/AreaChart'; @@ -38,9 +39,20 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { ) : ( `${roundTo(value, 3)}`, + }} fillOpacity={0.5} legendHeight="150px" - xAxisTickCount={isSmallScreen ? undefined : 7} /> )} {rest.data.length === 0 && (