diff --git a/packages/analytics/analytics-metric-provider/sandbox/App.vue b/packages/analytics/analytics-metric-provider/sandbox/App.vue
index 28892618db..9abd213f98 100644
--- a/packages/analytics/analytics-metric-provider/sandbox/App.vue
+++ b/packages/analytics/analytics-metric-provider/sandbox/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <select v-model="timeframeSelection">
+    <select v-model="timeRangeSelection">
       <option value="">
         None
       </option>
@@ -67,7 +67,7 @@
   <div>
     <SandboxBridgeInjector :query-bridge="timeframeProviderBridge">
       <MetricsProvider
-        v-slot="{ timeframe }"
+        v-slot="{ timeRange }"
         v-bind="timeframeProviderProps"
       >
         <div>
@@ -78,41 +78,43 @@
             Randomize Data
           </button>
         </div>
-        <div>Provider timeframe text: {{ timeframe.display }}</div>
+        <div>Provider timeframe text: {{ timeRange.type }}</div>
         <table style="width: 50%">
-          <tr>
-            <th>Name</th>
-            <th>Traffic</th>
-            <th>Errors</th>
-            <th>Latency</th>
-          </tr>
-          <tr>
-            <td>Blah</td>
-            <td>
-              <MetricsConsumer
-                v-slot="{ cardValues }"
-                lookup-key="blah😀😀"
-              >
-                {{ cardValues.trafficCard.currentValue }}
-              </MetricsConsumer>
-            </td>
-            <td>
-              <MetricsConsumer
-                v-slot="{ cardValues }"
-                lookup-key="blah😀😀"
-              >
-                {{ cardValues.errorRateFormatted }}
-              </MetricsConsumer>
-            </td>
-            <td>
-              <MetricsConsumer
-                v-slot="{ cardValues }"
-                lookup-key="blah😀😀"
-              >
-                {{ cardValues.latencyCard.currentValue }}
-              </MetricsConsumer>
-            </td>
-          </tr>
+          <tbody>
+            <tr>
+              <th>Name</th>
+              <th>Traffic</th>
+              <th>Errors</th>
+              <th>Latency</th>
+            </tr>
+            <tr>
+              <td>Blah</td>
+              <td>
+                <MetricsConsumer
+                  v-slot="{ cardValues }"
+                  lookup-key="blah😀😀"
+                >
+                  {{ cardValues.trafficCard.currentValue }}
+                </MetricsConsumer>
+              </td>
+              <td>
+                <MetricsConsumer
+                  v-slot="{ cardValues }"
+                  lookup-key="blah😀😀"
+                >
+                  {{ cardValues.errorRateFormatted }}
+                </MetricsConsumer>
+              </td>
+              <td>
+                <MetricsConsumer
+                  v-slot="{ cardValues }"
+                  lookup-key="blah😀😀"
+                >
+                  {{ cardValues.latencyCard.currentValue }}
+                </MetricsConsumer>
+              </td>
+            </tr>
+          </tbody>
         </table>
       </MetricsProvider>
     </SandboxBridgeInjector>
@@ -134,13 +136,13 @@ import MetricsProvider from '../src/components/MetricsProvider.vue'
 import type { MockOptions } from '../src/mockExploreResponse'
 import { mockExploreResponse } from '../src/mockExploreResponse'
 import axios from 'axios'
-import type {
-  AnalyticsBridge,
-  DatasourceAwareQuery,
-  ExploreFilter,
-  ExploreQuery,
+import type { TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
+import {
+  type AbsoluteTimeRangeV4,
+  type AnalyticsBridge,
+  type DatasourceAwareQuery,
+  type ExploreQuery,
 } from '@kong-ui-public/analytics-utilities'
-import { Timeframe, TimePeriods } from '@kong-ui-public/analytics-utilities'
 import { MetricCardSize } from '../src/enums'
 import SandboxBridgeInjector from './SandboxBridgeInjector.vue'
 
@@ -149,19 +151,12 @@ const refreshInterval = 60 * 1000
 // Need to have a local proxy running forwarding traffic to konnect api to hit real data.
 const USE_REAL_DATA = false
 
-const timeframeSelection = ref('15m')
-const custom1hourTimeframe = new Timeframe({
-  key: 'custom',
-  timeframeText: 'Custom Timeframe',
-  display: 'Custom Timeframe',
-  startCustom: new Date('2023-01-01T00:00:00Z'),
-  endCustom: new Date('2023-01-01T01:00:00Z'),
-  isRelative: false,
-  timeframeLength: () => 3600000, // 1 hour in milliseconds,
-  defaultResponseGranularity: 'minutely',
-  dataGranularity: 'minutely',
-  allowedTiers: ['free', 'pro', 'enterprise'],
-})
+const timeRangeSelection = ref('15m')
+const custom1hourTimeframe: AbsoluteTimeRangeV4 = {
+  type: 'absolute',
+  start: new Date(Date.now() - 3600 * 1000),
+  end: new Date(),
+}
 
 const makeQueryBridge = (opts?: MockOptions): AnalyticsBridge => {
 
@@ -201,9 +196,30 @@ const makeQueryBridge = (opts?: MockOptions): AnalyticsBridge => {
   }
 }
 
-const overrideTimeframe = computed(() => {
-  if (timeframeSelection.value) {
-    return TimePeriods.get(timeframeSelection.value)
+const overrideTimeRange = computed<TimeRangeV4 | undefined>(() => {
+  if (timeRangeSelection.value) {
+    switch (timeRangeSelection.value) {
+      case '15m':
+        return {
+          type: 'absolute',
+          start: new Date(Date.now() - 15 * 60 * 1000),
+          end: new Date(),
+        }
+      case '6h':
+        return {
+          type: 'absolute',
+          start: new Date(Date.now() - 6 * 60 * 60 * 1000),
+          end: new Date(),
+        }
+      case '24h':
+        return {
+          type: 'absolute',
+          start: new Date(Date.now() - 24 * 60 * 60 * 1000),
+          end: new Date(),
+        }
+      default:
+        return undefined
+    }
   }
 
   return undefined
@@ -212,7 +228,7 @@ const overrideTimeframe = computed(() => {
 // Query stats for an entire org, no grouping or filtering.
 const globalProviderProps = computed(() => ({
   refreshInterval,
-  overrideTimeframe: overrideTimeframe.value,
+  overrideTimeRange: overrideTimeRange.value,
   longCardTitles: false,
   description: 'Generic Description',
 }))
@@ -223,29 +239,29 @@ const globalBridge = makeQueryBridge()
 const globalProviderPropsCustomTimeframe = computed(() => ({
   ...globalProviderProps.value,
   // 1 hour timeframe
-  overrideTimeframe: custom1hourTimeframe,
+  overrideTimeRange: custom1hourTimeframe,
 }))
 
 const oneHourBridge = makeQueryBridge({
-  timeFrame: custom1hourTimeframe,
+  timeRange: custom1hourTimeframe,
 })
 
 // Query stats for an entire org, but also apply a filter.
 const filteredProviderProps = computed(() => ({
   refreshInterval,
-  overrideTimeframe: overrideTimeframe.value,
+  overrideTimeRange: overrideTimeRange.value,
   additionalFilter: [{
     dimension: 'application',
     type: 'in',
     values: ['app1'],
-  } as ExploreFilter],
+  }],
   containerTitle: 'Analytics',
 }))
 
 // Query stats for a single entity, no grouping.
 const singleProviderProps = computed(() => ({
   refreshInterval,
-  overrideTimeframe: overrideTimeframe.value,
+  overrideTimeRange: overrideTimeRange.value,
   dimension: 'route',
   filterValue: 'blah',
 }))
@@ -255,7 +271,7 @@ const singleProviderBridge = makeQueryBridge({ dimensionNames: ['blah'] })
 const multiProviderProps = computed(() => ({
   refreshInterval,
   dimension: 'route',
-  overrideTimeframe: overrideTimeframe.value,
+  overrideTimeRange: overrideTimeRange.value,
 }))
 const multiProviderBridge = makeQueryBridge({ dimensionNames: ['blah😀😀', 'arrgh'] })
 
@@ -269,7 +285,7 @@ const randomizeData = () => {
 const timeframeProviderProps = computed(() => ({
   refreshInterval,
   dimension: 'route',
-  overrideTimeframe: overrideTimeframe.value,
+  overrideTimeRange: overrideTimeRange.value,
   additionalFilter: [{ dimension: 'control_plane', operator: '=', value: '' + filterCounter.value }],
 }))
 
diff --git a/packages/analytics/analytics-metric-provider/src/components/MetricsProvider.cy.ts b/packages/analytics/analytics-metric-provider/src/components/MetricsProvider.cy.ts
index 167384eb47..f1e696635c 100644
--- a/packages/analytics/analytics-metric-provider/src/components/MetricsProvider.cy.ts
+++ b/packages/analytics/analytics-metric-provider/src/components/MetricsProvider.cy.ts
@@ -1,6 +1,5 @@
 import MetricsTestHarness from './MetricsTestHarness.vue'
 import { ref } from 'vue'
-import { Timeframe } from '@kong-ui-public/analytics-utilities'
 import type {
   AdvancedDatasourceQuery,
   AnalyticsBridge,
@@ -8,6 +7,7 @@ import type {
   DatasourceAwareQuery,
   ExploreFilterAll,
   ExploreResultV4,
+  TimeRangeV4,
 } from '@kong-ui-public/analytics-utilities'
 import type { MockOptions } from '../mockExploreResponse'
 import { mockExploreResponse } from '../mockExploreResponse'
@@ -15,43 +15,23 @@ import { INJECT_QUERY_PROVIDER } from '../constants'
 import { createPinia, setActivePinia } from 'pinia'
 
 
-const custom1DayTimeframe = new Timeframe({
-  key: 'custom',
-  timeframeText: 'Custom Timeframe',
-  display: 'Custom Timeframe',
-  startCustom: new Date('2023-01-01T00:00:00Z'),
-  endCustom: new Date('2023-01-02T00:00:00Z'),
-  isRelative: false,
-  timeframeLength: () => 86400000, // 1 day in milliseconds
-  defaultResponseGranularity: 'minutely',
-  dataGranularity: 'minutely',
-  allowedTiers: ['free', 'pro', 'enterprise'],
-})
-const custom10Minuteframe = new Timeframe({
-  key: 'custom',
-  timeframeText: 'Custom Timeframe',
-  display: 'Custom Timeframe',
-  startCustom: new Date('2023-01-01T00:00:00Z'),
-  endCustom: new Date('2023-01-01T00:10:00Z'),
-  isRelative: false,
-  timeframeLength: () => 600000, // 10 minutes in milliseconds
-  defaultResponseGranularity: 'minutely',
-  dataGranularity: 'minutely',
-  allowedTiers: ['free', 'pro', 'enterprise'],
-})
-const custom1hourTimeframe = new Timeframe({
-  key: 'custom',
-  timeframeText: 'Custom Timeframe',
-  display: 'Custom Timeframe',
-  startCustom: new Date('2023-01-01T00:00:00Z'),
-  endCustom: new Date('2023-01-01T01:00:00Z'),
-  isRelative: false,
-  timeframeLength: () => 3600000, // 1 hour in milliseconds,
-  defaultResponseGranularity: 'minutely',
-  dataGranularity: 'minutely',
-  allowedTiers: ['free', 'pro', 'enterprise'],
-})
+const custom1DayTimeRange: TimeRangeV4 = {
+  type: 'absolute',
+  start: new Date('2023-01-01T00:00:00Z'),
+  end: new Date('2023-01-02T00:00:00Z'),
+}
 
+const custom10MinuteTimeRange: TimeRangeV4 = {
+  type: 'absolute',
+  start: new Date('2023-01-01T00:00:00Z'),
+  end: new Date('2023-01-01T00:10:00Z'),
+
+}
+const custom1hourTimeRange: TimeRangeV4 = {
+  type: 'absolute',
+  start: new Date('2023-01-01T00:00:00Z'),
+  end: new Date('2023-01-01T01:00:00Z'),
+}
 
 describe('<AnalyticsMetricProvider />', () => {
 
@@ -547,13 +527,13 @@ describe('<AnalyticsMetricProvider />', () => {
 
   it('1 day custom time frame', () => {
     const queryBridge = makeQueryBridge({
-      timeFrame: custom1DayTimeframe,
+      timeRange: custom1DayTimeRange,
     })
 
     cy.mount(MetricsTestHarness, {
       props: {
         render: 'global',
-        overrideTimeframe: custom1DayTimeframe,
+        overrideTimeRange: custom1DayTimeRange,
       },
       global: {
         provide: {
@@ -565,16 +545,15 @@ describe('<AnalyticsMetricProvider />', () => {
     cy.get('.metricscard-trend-range').first().should('contain', 'vs previous day')
   })
 
-
   it('1 hour custom time frame', () => {
     const queryBridge = makeQueryBridge({
-      timeFrame: custom1hourTimeframe,
+      timeRange: custom1hourTimeRange,
     })
 
     cy.mount(MetricsTestHarness, {
       props: {
         render: 'global',
-        overrideTimeframe: custom1hourTimeframe,
+        overrideTimeRange: custom1hourTimeRange,
       },
       global: {
         provide: {
@@ -588,13 +567,13 @@ describe('<AnalyticsMetricProvider />', () => {
 
   it('10 min custom time frame', () => {
     const queryBridge = makeQueryBridge({
-      timeFrame: custom10Minuteframe,
+      timeRange: custom10MinuteTimeRange,
     })
 
     cy.mount(MetricsTestHarness, {
       props: {
         render: 'global',
-        overrideTimeframe: custom10Minuteframe,
+        overrideTimeRange: custom10MinuteTimeRange,
       },
       global: {
         provide: {
diff --git a/packages/analytics/analytics-metric-provider/src/components/MetricsProvider.vue b/packages/analytics/analytics-metric-provider/src/components/MetricsProvider.vue
index 51c833ba27..51dc54db4c 100644
--- a/packages/analytics/analytics-metric-provider/src/components/MetricsProvider.vue
+++ b/packages/analytics/analytics-metric-provider/src/components/MetricsProvider.vue
@@ -1,7 +1,7 @@
 <template>
   <slot
     :has-trend-access="hasTrendAccess"
-    :timeframe="timeframe"
+    :time-range="timeRange"
   />
 </template>
 <script setup lang="ts">
@@ -11,19 +11,18 @@ import {
   queryableExploreDimensions,
   type FilterableExploreDimensions,
   type QueryDatasource,
-  type Timeframe,
   type ExploreFilterAll,
+  type RelativeTimeRangeValuesV4,
+  type TimeRangeV4,
 } from '@kong-ui-public/analytics-utilities'
-import { TimePeriods, TimeframeKeys } from '@kong-ui-public/analytics-utilities'
 import { METRICS_PROVIDER_KEY, defaultFetcherDefs } from './metricsProviderUtil'
 import { INJECT_QUERY_PROVIDER, DEFAULT_REFRESH_INTERVAL } from '../constants'
 import { useAnalyticsConfigStore } from '@kong-ui-public/analytics-config-store'
 
 const props = withDefaults(defineProps<{
   datasource?: QueryDatasource
-  maxTimeframe?: TimeframeKeys
-  overrideTimeframe?: Timeframe
-  tz?: string
+  maxTimeRange?: RelativeTimeRangeValuesV4
+  overrideTimeRange?: TimeRangeV4
   dimension?: FilterableExploreDimensions
   filterValue?: string
   additionalFilter?: ExploreFilterAll[]
@@ -37,9 +36,8 @@ const props = withDefaults(defineProps<{
   refreshCounter?: number
 }>(), {
   datasource: undefined,
-  maxTimeframe: TimeframeKeys.THIRTY_DAY,
-  overrideTimeframe: undefined,
-  tz: undefined,
+  maxTimeRange: '30d',
+  overrideTimeRange: undefined,
   dimension: undefined,
   filterValue: undefined,
   additionalFilter: undefined,
@@ -79,15 +77,6 @@ const hasTrendAccess = computed<boolean>(() => true)
 // Don't attempt to issue a query until we know what we can query for.
 const queryReady = computed(() => !analyticsConfigStore.loading && props.queryReady)
 
-const tz = computed(() => {
-  if (props.tz) {
-    return props.tz
-  }
-
-  return (new Intl.DateTimeFormat()).resolvedOptions().timeZone
-})
-
-
 const resolvedDatasource = computed<QueryDatasource>(() => {
   if (props.datasource) {
     return props.datasource
@@ -100,8 +89,17 @@ const resolvedDatasource = computed<QueryDatasource>(() => {
 // If they do need to change, then the `useMetricCardGoldenSignals` composable, and dependencies,
 // needs to be reactive as well.  Ideally, this would be the case; we don't have any guarantee that the
 // tier data has finished loading by the time the component mounts, for example.
-const timeframe = computed<Timeframe>(() => {
-  return props.overrideTimeframe || TimePeriods.get(TimeframeKeys.SEVEN_DAY)!
+const timeRange = computed<TimeRangeV4>(() => {
+  const overrideTimeRange = props.overrideTimeRange
+  if (overrideTimeRange && !overrideTimeRange.tz) {
+    overrideTimeRange.tz = (new Intl.DateTimeFormat()).resolvedOptions().timeZone
+  }
+
+  return overrideTimeRange || {
+    type: 'relative',
+    time_range: '7d',
+    tz: (new Intl.DateTimeFormat()).resolvedOptions().timeZone,
+  }
 })
 
 const averageLatencies = computed<boolean>(() => {
@@ -122,8 +120,7 @@ const {
   dimensionFilterValue: props.filterValue,
   additionalFilter: toRef(props, 'additionalFilter'),
   queryReady,
-  timeframe,
-  tz,
+  timeRange,
   hasTrendAccess,
   refreshInterval: props.refreshInterval,
   queryFn,
diff --git a/packages/analytics/analytics-metric-provider/src/components/MetricsTestHarness.vue b/packages/analytics/analytics-metric-provider/src/components/MetricsTestHarness.vue
index 8a43f49619..7d5bb8b86f 100644
--- a/packages/analytics/analytics-metric-provider/src/components/MetricsTestHarness.vue
+++ b/packages/analytics/analytics-metric-provider/src/components/MetricsTestHarness.vue
@@ -47,7 +47,7 @@
 import MetricsConsumer from './MetricsConsumer.vue'
 import MetricsProvider from './MetricsProvider.vue'
 import { MetricCardSize } from '../enums'
-import type { ExploreFilterAll, FilterableExploreDimensions, QueryDatasource, Timeframe } from '@kong-ui-public/analytics-utilities'
+import type { ExploreFilterAll, FilterableExploreDimensions, QueryDatasource, TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
@@ -60,7 +60,7 @@ const props = withDefaults(defineProps<{
   containerTitle?: string
   description?: string
   percentileLatency?: boolean
-  overrideTimeframe?: Timeframe
+  overrideTimeRange?: TimeRangeV4
 }>(), {
   refreshInterval: 60 * 1000,
   queryReady: true,
@@ -70,7 +70,7 @@ const props = withDefaults(defineProps<{
   containerTitle: undefined,
   description: undefined,
   percentileLatency: undefined,
-  overrideTimeframe: undefined,
+  overrideTimeRange: undefined,
 })
 
 // Query stats for an entire org, no grouping or filtering.
diff --git a/packages/analytics/analytics-metric-provider/src/components/metricsProviderUtil.ts b/packages/analytics/analytics-metric-provider/src/components/metricsProviderUtil.ts
index ff34bde7f5..254d16882e 100644
--- a/packages/analytics/analytics-metric-provider/src/components/metricsProviderUtil.ts
+++ b/packages/analytics/analytics-metric-provider/src/components/metricsProviderUtil.ts
@@ -4,7 +4,7 @@ import {
   type ExploreFilterAll,
   type FilterableExploreDimensions,
   type QueryDatasource, stripUnknownFilters,
-  type Timeframe,
+  type TimeRangeV4,
 } from '@kong-ui-public/analytics-utilities'
 import composables from '../composables'
 import type { MetricFetcherOptions } from '../types'
@@ -32,8 +32,7 @@ interface FetcherOptions {
   dimensionFilterValue?: string
   additionalFilter: Ref<ExploreFilterAll[] | undefined>
   queryReady: Ref<boolean>
-  timeframe: Ref<Timeframe>
-  tz: Ref<string>
+  timeRange: Ref<TimeRangeV4>
   hasTrendAccess: Ref<boolean>
   refreshInterval: number
   queryFn: AnalyticsBridge['queryFn']
@@ -49,8 +48,7 @@ export const defaultFetcherDefs = (opts: FetcherOptions) => {
     dimensionFilterValue,
     additionalFilter,
     queryReady,
-    timeframe,
-    tz,
+    timeRange,
     hasTrendAccess,
     refreshInterval,
     abortController,
@@ -100,8 +98,7 @@ export const defaultFetcherDefs = (opts: FetcherOptions) => {
 
     filter,
     queryReady,
-    timeframe,
-    tz,
+    timeRange,
 
     // Traffic and error rate cards can't query trend if multiple entities are expected.
     withTrend: computed<boolean>(() => hasTrendAccess.value && !multiEntityQuery),
@@ -125,8 +122,7 @@ export const defaultFetcherDefs = (opts: FetcherOptions) => {
 
     filter,
     queryReady,
-    timeframe,
-    tz,
+    timeRange,
 
     // Don't query latency trends in the multi-entity case: it's possible, but wasteful.
     withTrend: computed<boolean>(() => hasTrendAccess.value && !multiEntityQuery),
diff --git a/packages/analytics/analytics-metric-provider/src/composables/useMetricFetcher.spec.ts b/packages/analytics/analytics-metric-provider/src/composables/useMetricFetcher.spec.ts
index 315a795a00..d0ae5bdba2 100644
--- a/packages/analytics/analytics-metric-provider/src/composables/useMetricFetcher.spec.ts
+++ b/packages/analytics/analytics-metric-provider/src/composables/useMetricFetcher.spec.ts
@@ -2,49 +2,39 @@ import { vi, describe, expect } from 'vitest'
 import useMetricFetcher, { buildDeltaMapping, DEFAULT_KEY } from './useMetricFetcher'
 import { ref } from 'vue'
 import type { ExploreResultV4 } from '@kong-ui-public/analytics-utilities'
-import {
-  DeltaQueryTime,
-  TimeframeKeys,
-  TimePeriods,
-  UnaryQueryTime,
-  Timeframe,
-} from '@kong-ui-public/analytics-utilities'
 import type { MetricFetcherOptions } from '../types'
 import composables from '.'
-
-// Stub `addDays` from `date-fns` here to avoid a dependency just for unit testing.
-const addDays = (date: Date, amount: number) => {
-  const newDate = new Date(date)
-  newDate.setDate(newDate.getDate() + amount)
-  return newDate
-}
+import { addDays } from '../mockExploreResponse'
 
 const CHART_REFRESH_INTERVAL_MS = 30 * 1000
 
-const timePeriod = TimePeriods.get(TimeframeKeys.ONE_DAY) as Timeframe
-const deltaQueryTime = new DeltaQueryTime(timePeriod)
-const unaryQueryTime = new UnaryQueryTime(timePeriod)
+const timeRange = {
+  start: addDays(new Date(), -1),
+  end: new Date(),
+}
+
+const deltaStart = addDays(timeRange.start, -1)
 
 const EXPLORE_RESULT_TREND: ExploreResultV4 = {
   data: [
     {
       version: 'v1',
-      timestamp: deltaQueryTime.startDate().toISOString(),
+      timestamp: deltaStart.toISOString(),
       event: {
         request_count: 10,
       },
     },
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: timeRange.start.toISOString(),
       event: {
         request_count: 20,
       },
     },
   ],
   meta: {
-    start_ms: deltaQueryTime.startMs(),
-    end_ms: deltaQueryTime.endMs(),
+    start_ms: deltaStart.getTime(),
+    end_ms: timeRange.end.getTime(),
     granularity_ms: 86400000,
     query_id: '',
     metric_names: [
@@ -61,15 +51,15 @@ const EXPLORE_RESULT_NO_TREND: ExploreResultV4 = {
   data: [
     {
       version: 'v1',
-      timestamp: unaryQueryTime.startDate().toISOString(),
+      timestamp: timeRange.start.toISOString(),
       event: {
         request_count: 20,
       },
     },
   ],
   meta: {
-    start_ms: unaryQueryTime.startMs(),
-    end_ms: unaryQueryTime.endMs(),
+    start_ms: timeRange.start.getTime(),
+    end_ms: timeRange.end.getTime(),
     granularity_ms: 86400000,
     query_id: '',
     metric_names: [
@@ -86,15 +76,15 @@ const EXPLORE_RESULT_PREVIOUS_DATA_ONLY: ExploreResultV4 = {
   data: [
     {
       version: 'v1',
-      timestamp: deltaQueryTime.startDate().toISOString(),
+      timestamp: deltaStart.toISOString(),
       event: {
         request_count: 10,
       },
     },
   ],
   meta: {
-    start_ms: deltaQueryTime.startMs(),
-    end_ms: deltaQueryTime.endMs(),
+    start_ms: deltaStart.getTime(),
+    end_ms: timeRange.end.getTime(),
     granularity_ms: 86400000,
     query_id: '',
     metric_names: [
@@ -111,15 +101,15 @@ const EXPLORE_RESULT_CURRENT_DATA_ONLY: ExploreResultV4 = {
   data: [
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: timeRange.start.toISOString(),
       event: {
         request_count: 20,
       },
     },
   ],
   meta: {
-    start_ms: deltaQueryTime.startMs(),
-    end_ms: deltaQueryTime.endMs(),
+    start_ms: deltaStart.getTime(),
+    end_ms: timeRange.end.getTime(),
     granularity_ms: 86400000,
     query_id: '',
     metric_names: [
@@ -135,8 +125,8 @@ const EXPLORE_RESULT_CURRENT_DATA_ONLY: ExploreResultV4 = {
 const EXPLORE_RESULT_NO_RECORDS: ExploreResultV4 = {
   data: [],
   meta: {
-    start_ms: deltaQueryTime.startMs(),
-    end_ms: deltaQueryTime.endMs(),
+    start_ms: deltaStart.getTime(),
+    end_ms: timeRange.start.getTime(),
     granularity_ms: 86400000,
     query_id: '',
     metric_names: [
@@ -153,7 +143,7 @@ const EXPLORE_RESULT_CURRENT_DATA_MULTI_DIMENSION: ExploreResultV4 = {
   data: [
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: addDays(deltaStart, 1).toISOString(),
       event: {
         route: 'route1',
         request_count: 20,
@@ -162,7 +152,7 @@ const EXPLORE_RESULT_CURRENT_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: addDays(deltaStart, 1).toISOString(),
       event: {
         route: 'route1',
         request_count: 10,
@@ -171,7 +161,7 @@ const EXPLORE_RESULT_CURRENT_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: addDays(deltaStart, 1).toISOString(),
       event: {
         route: 'route2',
         request_count: 20,
@@ -180,7 +170,7 @@ const EXPLORE_RESULT_CURRENT_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: addDays(deltaStart, 1).toISOString(),
       event: {
         route: 'route2',
         request_count: 10,
@@ -189,8 +179,8 @@ const EXPLORE_RESULT_CURRENT_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
   ],
   meta: {
-    start_ms: deltaQueryTime.startMs(),
-    end_ms: deltaQueryTime.endMs(),
+    start_ms: deltaStart.getTime(),
+    end_ms: timeRange.end.getTime(),
     granularity_ms: 86400000,
     query_id: '',
     metric_names: [
@@ -215,7 +205,7 @@ const EXPLORE_RESULT_TREND_DATA_MULTI_DIMENSION: ExploreResultV4 = {
   data: [
     {
       version: 'v1',
-      timestamp: deltaQueryTime.startDate().toISOString(),
+      timestamp: deltaStart.toISOString(),
       event: {
         request_count: 20,
         route: 'route1',
@@ -224,7 +214,7 @@ const EXPLORE_RESULT_TREND_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: deltaQueryTime.startDate().toISOString(),
+      timestamp: deltaStart.toISOString(),
       event: {
         request_count: 10,
         route: 'route1',
@@ -233,7 +223,7 @@ const EXPLORE_RESULT_TREND_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: deltaQueryTime.startDate().toISOString(),
+      timestamp: deltaStart.toISOString(),
       event: {
         request_count: 25,
         route: 'route2',
@@ -242,7 +232,7 @@ const EXPLORE_RESULT_TREND_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: deltaQueryTime.startDate().toISOString(),
+      timestamp: deltaStart.toISOString(),
       event: {
         request_count: 15,
         route: 'route2',
@@ -251,7 +241,7 @@ const EXPLORE_RESULT_TREND_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: addDays(deltaStart, 1).toISOString(),
       event: {
         request_count: 40,
         route: 'route1',
@@ -260,7 +250,7 @@ const EXPLORE_RESULT_TREND_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: addDays(deltaStart, 1).toISOString(),
       event: {
         request_count: 20,
         route: 'route1',
@@ -269,7 +259,7 @@ const EXPLORE_RESULT_TREND_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: addDays(deltaStart, 1).toISOString(),
       event: {
         request_count: 45,
         route: 'route2',
@@ -278,7 +268,7 @@ const EXPLORE_RESULT_TREND_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
     {
       version: 'v1',
-      timestamp: addDays(deltaQueryTime.startDate(), 1).toISOString(),
+      timestamp: addDays(deltaStart, 1).toISOString(),
       event: {
         request_count: 25,
         route: 'route2',
@@ -287,8 +277,8 @@ const EXPLORE_RESULT_TREND_DATA_MULTI_DIMENSION: ExploreResultV4 = {
     },
   ],
   meta: {
-    start_ms: deltaQueryTime.startMs(),
-    end_ms: deltaQueryTime.endMs(),
+    start_ms: deltaStart.getTime(),
+    end_ms: timeRange.end.getTime(),
     granularity_ms: 86400000,
     query_id: '',
     metric_names: [
@@ -320,7 +310,10 @@ describe('useMetricFetcher', () => {
       metrics: [
         'request_count',
       ],
-      timeframe: ref(TimePeriods.get(TimeframeKeys.ONE_DAY) as Timeframe),
+      timeRange: ref({
+        type: 'relative',
+        time_range: '24h',
+      }),
       loading: ref(true),
       hasError: ref(false),
       withTrend: ref(true),
@@ -355,7 +348,10 @@ describe('useMetricFetcher', () => {
       metrics: [
         'request_count',
       ],
-      timeframe: ref(TimePeriods.get(TimeframeKeys.ONE_DAY) as Timeframe),
+      timeRange: ref({
+        type: 'relative',
+        time_range: '24h',
+      }),
       loading: ref(true),
       hasError: ref(false),
       withTrend: ref(true),
@@ -385,7 +381,10 @@ describe('useMetricFetcher', () => {
       metrics: [
         'request_count',
       ],
-      timeframe: ref(TimePeriods.get(TimeframeKeys.ONE_DAY) as Timeframe),
+      timeRange: ref({
+        type: 'relative',
+        time_range: '24h',
+      }),
       loading: ref(true),
       hasError: ref(false),
       withTrend: ref(true),
@@ -414,7 +413,10 @@ describe('useMetricFetcher', () => {
         'request_count',
       ],
       filterValues: ['test-org-uuid'],
-      timeframe: ref(TimePeriods.get(TimeframeKeys.ONE_DAY) as Timeframe),
+      timeRange: ref({
+        type: 'relative',
+        time_range: '24h',
+      }),
       loading: ref(true),
       hasError: ref(false),
       withTrend: ref(false),
@@ -442,19 +444,11 @@ describe('useMetricFetcher', () => {
         'request_count',
       ],
       filterValues: ['test-org-uuid'],
-      timeframe: ref(new Timeframe({
-        key: 'custom',
-        timeframeText: 'custom',
-        display: 'custom',
-        // Note -- these values don't matter, just the `withTrend` value and the value in the response.
-        startCustom: new Date('2024-01-01T00:00:00Z'),
-        endCustom: new Date('2024-01-02T00:00:00Z'),
-        timeframeLength: () => 0,
-        defaultResponseGranularity: 'daily',
-        dataGranularity: 'daily',
-        isRelative: false,
-        allowedTiers: ['free', 'plus', 'enterprise'],
-      })),
+      timeRange: ref({
+        type: 'absolute',
+        start: new Date('2024-01-01T00:00:00Z'),
+        end: new Date('2024-01-02T00:00:00Z'),
+      }),
       loading: ref(true),
       hasError: ref(false),
       withTrend: ref(true),
@@ -477,19 +471,11 @@ describe('useMetricFetcher', () => {
         'request_count',
       ],
       filterValues: ['test-org-uuid'],
-      timeframe: ref(new Timeframe({
-        key: 'custom',
-        timeframeText: 'custom',
-        display: 'custom',
-        // Note -- these values don't matter, just the `withTrend` value and the value in the response.
-        startCustom: new Date('2024-01-01T00:00:00Z'),
-        endCustom: new Date('2024-01-02T00:00:00Z'),
-        timeframeLength: () => 0,
-        defaultResponseGranularity: 'daily',
-        dataGranularity: 'daily',
-        isRelative: false,
-        allowedTiers: ['free', 'plus', 'enterprise'],
-      })),
+      timeRange: ref({
+        type: 'absolute',
+        start: new Date('2024-01-01T00:00:00Z'),
+        end: new Date('2024-01-02T00:00:00Z'),
+      }),
       loading: ref(true),
       hasError: ref(false),
       withTrend: ref(false),
@@ -541,6 +527,8 @@ describe('buildDeltaMapping', () => {
   it('can get metric data when there is only current data', () => {
     const trafficData = buildDeltaMapping(EXPLORE_RESULT_CURRENT_DATA_ONLY, true)
 
+    console.log(trafficData)
+
     const expected = {
       current: {
         [DEFAULT_KEY]: {
diff --git a/packages/analytics/analytics-metric-provider/src/composables/useMetricFetcher.ts b/packages/analytics/analytics-metric-provider/src/composables/useMetricFetcher.ts
index b36d3f750a..9885df5413 100644
--- a/packages/analytics/analytics-metric-provider/src/composables/useMetricFetcher.ts
+++ b/packages/analytics/analytics-metric-provider/src/composables/useMetricFetcher.ts
@@ -103,7 +103,7 @@ export default function useMetricFetcher(opts: MetricFetcherOptions): FetcherRes
     ],
     granularity: opts.withTrend.value ? 'trend' : undefined,
     ...(opts.filter.value?.length ? { filters: opts.filter.value } : {}),
-    time_range: opts.timeframe.value.v4Query(opts.tz.value),
+    time_range: opts.timeRange.value,
   } as ExploreQuery))
 
   const cacheKey: Ref<string | null> = computed(() => {
@@ -115,7 +115,7 @@ export default function useMetricFetcher(opts: MetricFetcherOptions): FetcherRes
     // need to have some uniqueness in the cache key to avoid collisions.
     // this was happening when there are multiple providers on the same page with the same dimensions and metrics.
     // For example the singleProvider and multiProvider that appear in the test harness.
-    return `metric-fetcher-${opts.timeframe.value.cacheKey()}-${opts.dimensions?.join('-')}-${opts.metrics.value?.join('-')}-${additionalFilterKey}-${opts.refreshCounter.value}`
+    return `metric-fetcher-${JSON.stringify(opts.timeRange.value)}-${opts.dimensions?.join('-')}-${opts.metrics.value?.join('-')}-${additionalFilterKey}-${opts.refreshCounter.value}`
   })
 
   const { response: raw, error: metricError, isValidating: isMetricDataValidating } = composables.useRequest<ExploreResultV4>(
@@ -147,7 +147,7 @@ export default function useMetricFetcher(opts: MetricFetcherOptions): FetcherRes
   // If one of our relative timeframes, we display the requested time frame (if user has trend access); otherwise fall back to one day
   // Else, we have a Custom start and end datetime coming from v-calendar, so we display "vs previous X days"
   const trendRange = computed<string>(() => {
-    if (opts.timeframe.value.key === 'custom') {
+    if (opts.timeRange.value.type === 'absolute') {
       if (!raw.value?.meta?.start_ms) {
         return ''
       }
@@ -178,7 +178,7 @@ export default function useMetricFetcher(opts: MetricFetcherOptions): FetcherRes
     } else {
       return opts.withTrend.value
         // @ts-ignore - dynamic i18n key
-        ? i18n.t(`trendRange.${opts.timeframe.value.key}`)
+        ? i18n.t(`trendRange.${opts.timeRange.value.time_range}`)
         // If we're unable to query with a trend, we can't render a meaningful trend range description.
         : ''
     }
diff --git a/packages/analytics/analytics-metric-provider/src/mockExploreResponse.ts b/packages/analytics/analytics-metric-provider/src/mockExploreResponse.ts
index 9f1d197ed8..6abcf9cf95 100644
--- a/packages/analytics/analytics-metric-provider/src/mockExploreResponse.ts
+++ b/packages/analytics/analytics-metric-provider/src/mockExploreResponse.ts
@@ -1,23 +1,27 @@
 import type { CyHttpMessages } from 'cypress/types/net-stubbing'
 import { ALL_STATUS_CODE_GROUPS } from './constants'
 import type {
+  AbsoluteTimeRangeV4,
   Display,
   ExploreQuery,
   ExploreResultV4,
   GroupByResult,
   QueryResponseMeta,
-  Timeframe,
 } from '@kong-ui-public/analytics-utilities'
-import { DeltaQueryTime, TimeframeKeys, TimePeriods, UnaryQueryTime } from '@kong-ui-public/analytics-utilities'
 
 // Replicate date-fns `fromUnixTime` here to avoid a dependency.
 const fromUnixTimeMs = (t: number) => new Date(t)
 
+export const addDays = (date: Date, amount: number) => {
+  const newDate = new Date(date)
+  newDate.setDate(newDate.getDate() + amount)
+  return newDate
+}
 export interface MockOptions {
   dimensionNames?: string[]
   injectErrors?: 'latency' | 'traffic' | 'all'
   deterministic?: boolean
-  timeFrame?: Timeframe
+  timeRange?: AbsoluteTimeRangeV4
 }
 
 export const mockExploreResponseFromCypress = (
@@ -42,12 +46,37 @@ export const mockExploreResponse = (
   body: ExploreQuery,
   opts?: MockOptions,
 ) => {
-  const timeframe = opts?.timeFrame || TimePeriods.get(TimeframeKeys.ONE_DAY)!
-  const defaultQueryTime = body.granularity === 'trend' ? new DeltaQueryTime(timeframe) : new UnaryQueryTime(timeframe)
-  const end = defaultQueryTime.endMs()
-  const start = defaultQueryTime.startMs()
+  const timeRange = opts?.timeRange && {
+    start: opts.timeRange.start,
+    end: opts.timeRange.end,
+  } || body.time_range?.type === 'absolute'
+    ? {
+      // @ts-ignore - already asserted time range is absolute above
+      start: new Date(body.time_range.start),
+      // @ts-ignore - already asserted time range is absolute above
+      end: new Date(body.time_range.end),
+    }
+    : {
+      start: new Date(Date.now() - 3600 * 1000 * 24),
+      end: new Date(),
+    }
+
+  const timeRangeMs = timeRange.end.getTime() - timeRange.start.getTime()
+  const defaultQueryTime = body.granularity === 'trend'
+    ? {
+      start: new Date(timeRange.start.getTime() - timeRangeMs),
+      end: timeRange.end,
+      granularity: timeRange.end.getTime() - timeRange.start.getTime(),
+    }
+    : {
+      start: timeRange.start,
+      end: timeRange.end,
+      granularity: timeRange.end.getTime() - timeRange.start.getTime(),
+    }
+  const end = defaultQueryTime.end.getTime()
+  const start = defaultQueryTime.start.getTime()
 
-  const granularity = defaultQueryTime.granularityMs()
+  const granularity = defaultQueryTime.granularity
 
   const numRecords = body.granularity === 'trend' ? 2 : 1
 
diff --git a/packages/analytics/analytics-metric-provider/src/types/fetcher-types.ts b/packages/analytics/analytics-metric-provider/src/types/fetcher-types.ts
index db7fab92e0..5e79ee0bf4 100644
--- a/packages/analytics/analytics-metric-provider/src/types/fetcher-types.ts
+++ b/packages/analytics/analytics-metric-provider/src/types/fetcher-types.ts
@@ -1,7 +1,7 @@
 import type {
-  Timeframe,
   ExploreAggregations, QueryableExploreDimensions, AnalyticsBridge, QueryDatasource,
   ExploreFilterAll,
+  TimeRangeV4,
 } from '@kong-ui-public/analytics-utilities'
 import type { Ref } from 'vue'
 
@@ -10,8 +10,7 @@ export interface MetricFetcherOptions {
   metrics: Ref<ExploreAggregations[]>
   dimensions?: QueryableExploreDimensions[]
   filter: Ref<ExploreFilterAll[] | undefined>
-  timeframe: Ref<Timeframe>
-  tz: Ref<string>
+  timeRange: Ref<TimeRangeV4>
   refreshInterval: number
   withTrend: Ref<boolean>
   queryReady: Ref<boolean>
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
index 47bce632f3..657fd99257 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
@@ -200,11 +200,13 @@ describe('<DashboardRenderer />', () => {
   })
 
   it('Changing the timeframe changes the query', () => {
-    const oneDayTimeframe: Timeframe = TimePeriods.get(TimeframeKeys.ONE_DAY)!
     const props = {
       context: {
         filters: [],
-        timeSpec: oneDayTimeframe.v4Query(),
+        timeSpec: {
+          type: 'relative',
+          time_range: '24h',
+        },
       },
       modelValue: summaryDashboardConfig,
     }
@@ -230,13 +232,13 @@ describe('<DashboardRenderer />', () => {
         time_range: { time_range: '24h' },
       } })).then(() => {
         cy.get('@fetcher').invoke('resetHistory').then(() => {
-
-          const sevenDayTimeframe: Timeframe = TimePeriods.get(TimeframeKeys.SEVEN_DAY)!
-
           wrapper.setProps({
             context: {
               filters: [],
-              timeSpec: sevenDayTimeframe.v4Query(),
+              timeSpec: {
+                type: 'relative',
+                time_range: '7d',
+              },
             },
           }).then(() => {
             // Two more queries for the metric cards, three for the charts
diff --git a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
index 4fb1bcf7b2..f2853b55de 100644
--- a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
@@ -9,8 +9,8 @@
 import type { RendererProps } from '../types'
 import type { MetricCardOptions } from '@kong-ui-public/analytics-utilities'
 import { MetricsProvider, MetricsConsumer } from '@kong-ui-public/analytics-metric-provider'
-import { computed, type Ref } from 'vue'
-import { type ExploreFilterAll, Timeframe, TimePeriods } from '@kong-ui-public/analytics-utilities'
+import { computed } from 'vue'
+import type { ExploreFilterAll } from '@kong-ui-public/analytics-utilities'
 
 // Unlike AnalyticsChart, the metric card package doesn't currently expose its options
 // in a convenient interface.
@@ -18,35 +18,6 @@ type ProviderProps = InstanceType<typeof MetricsProvider>['$props']
 
 const props = defineProps<RendererProps<MetricCardOptions>>()
 
-const overrideTimeframe: Ref<Timeframe> = computed(() => {
-  // Convert the timeframe to a v4 timespec.
-  // Ideally, metric cards would natively support timespecs, but for right now,
-  // we're sticking with this interface.
-  const timeSpec = props.context.timeSpec
-  if (timeSpec.type === 'absolute') {
-    return new Timeframe({
-      key: 'custom',
-      timeframeText: 'custom',
-      display: 'custom',
-      startCustom: timeSpec.start,
-      endCustom: timeSpec.end,
-      timeframeLength: () => timeSpec.end.getTime() - timeSpec.start.getTime(),
-      defaultResponseGranularity: 'daily',
-      dataGranularity: 'daily',
-      isRelative: false,
-      allowedTiers: ['free', 'plus', 'enterprise'],
-    })
-  }
-
-  const relativePeriod = TimePeriods.get(timeSpec.time_range)
-  if (!relativePeriod) {
-    // Should never happen; if it does, at least make it clear what the problem is.
-    throw new Error('Unknown time range')
-  }
-
-  return relativePeriod
-})
-
 const options = computed<ProviderProps>(() => {
   const datasource = props.query?.datasource
   if (datasource && datasource !== 'api_usage' && datasource !== 'basic') {
@@ -54,7 +25,7 @@ const options = computed<ProviderProps>(() => {
   }
   return {
     datasource: props.query?.datasource,
-    overrideTimeframe: overrideTimeframe.value,
+    overrideTimeRange: props.context.timeSpec,
     tz: props.context.tz,
     additionalFilter: props.context.filters as ExploreFilterAll[], // TODO: Decide how to handle metric card filters.
     longCardTitles: props.chartOptions.long_card_titles,