diff --git a/ui/src/dashboards/utils/tableGraph.ts b/ui/src/dashboards/utils/tableGraph.ts
index 30f79d47eb..7da9fcb0eb 100644
--- a/ui/src/dashboards/utils/tableGraph.ts
+++ b/ui/src/dashboards/utils/tableGraph.ts
@@ -12,6 +12,24 @@ import {
   DecimalPlaces,
 } from 'src/types/dashboard'
 
+interface ColumnWidths {
+  totalWidths: number
+  widths: {[x: string]: number}
+}
+
+interface SortedLabel {
+  label: string
+  responseIndex: number
+  seriesIndex: number
+}
+
+interface TransformTableDataReturnType {
+  transformedData: DbData[][]
+  sortedTimeVals: DbData[]
+  columnWidths: {[x: string]: number}
+  totalWidths: number
+}
+
 const calculateTimeColumnWidth = (timeFormat: string): number => {
   // Force usage of longest format names for ideal measurement
   timeFormat = _.replace(timeFormat, 'MMMM', 'September')
@@ -29,10 +47,6 @@ const calculateTimeColumnWidth = (timeFormat: string): number => {
   return width + CELL_HORIZONTAL_PADDING
 }
 
-interface ColumnWidths {
-  totalWidths: number
-  widths: {[x: string]: number}
-}
 const updateMaxWidths = (
   row: DbData[],
   maxColumnWidths: ColumnWidths,
@@ -79,7 +93,6 @@ const updateMaxWidths = (
             fontWeight: 'bold',
           }).width + CELL_HORIZONTAL_PADDING
 
-      const {widths: maxWidths} = maxColumnWidths
       const maxWidth = _.get(maxWidths, `${columnLabel}`, 0)
 
       if (isTopRow || currentWidth > maxWidth) {
@@ -93,11 +106,6 @@ const updateMaxWidths = (
   return maxWidths
 }
 
-interface SortedLabel {
-  label: string
-  responseIndex: number
-  seriesIndex: number
-}
 export const computeFieldOptions = (
   existingFieldOptions: FieldOption[],
   sortedLabels: SortedLabel[]
@@ -189,12 +197,20 @@ export const orderTableColumns = (
   return orderedData[0].length ? orderedData : [[]]
 }
 
-interface TransformTableDataReturnType {
-  transformedData: DbData[][]
-  sortedTimeVals: number[]
-  columnWidths: ColumnWidths
-  totalWidths: number
+export const sortTableData = (
+  data: DbData[][],
+  sort: Sort
+): {sortedData: DbData[][]; sortedTimeVals: DbData[]} => {
+  const sortIndex = _.indexOf(data[0], sort.field)
+  const dataValues = _.drop(data, 1)
+  const sortedData = [
+    data[0],
+    ..._.orderBy<DbData[]>(dataValues, sortIndex, [sort.direction]),
+  ]
+  const sortedTimeVals = map(sortedData, r => r[0])
+  return {sortedData, sortedTimeVals}
 }
+
 export const transformTableData = (
   data: DbData[][],
   sort: Sort,
@@ -204,12 +220,8 @@ export const transformTableData = (
   decimalPlaces: DecimalPlaces
 ): TransformTableDataReturnType => {
   const {verticalTimeAxis} = tableOptions
-  const sortIndex = _.indexOf(data[0], sort.field)
-  const sortedData = [
-    data[0],
-    ..._.orderBy(_.drop(data, 1), sortIndex, [sort.direction]),
-  ]
-  const sortedTimeVals = map(sortedData, r => r[0])
+
+  const {sortedData, sortedTimeVals} = sortTableData(data, sort)
   const filteredData = filterTableColumns(sortedData, fieldOptions)
   const orderedData = orderTableColumns(filteredData, fieldOptions)
   const transformedData = verticalTimeAxis ? orderedData : _.unzip(orderedData)
@@ -220,5 +232,6 @@ export const transformTableData = (
     verticalTimeAxis,
     decimalPlaces
   )
+
   return {transformedData, sortedTimeVals, columnWidths, totalWidths}
 }
diff --git a/ui/src/utils/groupByTimeSeriesTransform.js b/ui/src/utils/groupByTimeSeriesTransform.ts
similarity index 92%
rename from ui/src/utils/groupByTimeSeriesTransform.js
rename to ui/src/utils/groupByTimeSeriesTransform.ts
index f3ae47bd04..783b32b04a 100644
--- a/ui/src/utils/groupByTimeSeriesTransform.js
+++ b/ui/src/utils/groupByTimeSeriesTransform.ts
@@ -1,6 +1,14 @@
 import _ from 'lodash'
-import {shiftDate} from 'shared/query/helpers'
+import {shiftDate} from 'src/shared/query/helpers'
 import {map, reduce, forEach, concat, clone} from 'fast.js'
+import {TimeSeriesServerResponse} from 'src/types/series'
+import {DbData} from '../types/dashboard'
+
+// interface Results {}
+// interface Serieses {}
+// interface Cells {}
+// interface sortedLabels {}
+// interface seriesLabels {}
 
 const flattenGroupBySeries = (results, responseIndex, tags) => {
   if (_.isEmpty(results)) {
@@ -42,7 +50,7 @@ const flattenGroupBySeries = (results, responseIndex, tags) => {
   return flattenedSeries
 }
 
-const constructResults = (raw, isTable) => {
+const constructResults = (raw: TimeSeriesServerResponse, isTable: boolean) => {
   return _.flatten(
     map(raw, (response, index) => {
       const results = _.get(response, 'response.results', [])
@@ -252,7 +260,10 @@ const constructTimeSeries = (serieses, cells, sortedLabels, seriesLabels) => {
   return _.sortBy(timeSeries, 'time')
 }
 
-export const groupByTimeSeriesTransform = (raw, isTable) => {
+export const groupByTimeSeriesTransform = (
+  raw: TimeSeriesServerResponse,
+  isTable: boolean
+): {sortedLabels: string[]; sortedTimeSeries: DbData[][]} => {
   const results = constructResults(raw, isTable)
   const serieses = constructSerieses(results)
   const {cells, sortedLabels, seriesLabels} = constructCells(serieses)