WIP table typing

ui/src/dashboards/utils/tableGraph.ts

@@ -26,8 +26,7 @@ interface SortedLabel {
 interface TransformTableDataReturnType {
   transformedData: DbData[][]
   sortedTimeVals: DbData[]
-  columnWidths: {[x: string]: number}
-  totalWidths: number
+  columnWidths: ColumnWidths
 }
 
 const calculateTimeColumnWidth = (timeFormat: string): number => {
@@ -225,7 +224,7 @@ export const transformTableData = (
   const filteredData = filterTableColumns(sortedData, fieldOptions)
   const orderedData = orderTableColumns(filteredData, fieldOptions)
   const transformedData = verticalTimeAxis ? orderedData : _.unzip(orderedData)
-  const {widths: columnWidths, totalWidths} = calculateColumnWidths(
+  const columnWidths = calculateColumnWidths(
     transformedData,
     fieldOptions,
     timeFormat,
@@ -233,5 +232,5 @@ export const transformTableData = (
     decimalPlaces
   )
 
-  return {transformedData, sortedTimeVals, columnWidths, totalWidths}
+  return {transformedData, sortedTimeVals, columnWidths}
 }

ui/src/shared/components/TableGraph.tsx

@@ -38,6 +38,12 @@ import {
   DbData,
 } from 'src/types/dashboard'
 
+interface Label {
+  label: string
+  seriesIndex: number
+  responseIndex: number
+}
+
 interface Props {
   data: TimeSeriesServerResponse
   tableOptions: TableOptions
@@ -54,8 +60,8 @@ interface Props {
 interface State {
   data: DbData[][]
   transformedData: DbData[][]
-  sortedTimeVals: number[]
-  sortedLabels: string[]
+  sortedTimeVals: DbData[]
+  sortedLabels: Label[]
   hoveredColumnIndex: number
   hoveredRowIndex: number
   timeColumnWidth: number
@@ -76,9 +82,9 @@ class TableGraph extends Component<Props, State> {
   constructor(props) {
     super(props)
 
-    const sortField = _.get(
+    const sortField: string = _.get(
       this.props,
-      ['tableOptions', 'sortBy', 'internalName'],
+      'tableOptions.sortBy.internalName',
       DEFAULT_TIME_FIELD.internalName
     )
     this.state = {
@@ -174,12 +180,13 @@ class TableGraph extends Component<Props, State> {
   }
 
   public componentDidMount() {
-    const sortField = _.get(
+    const sortField: string = _.get(
       this.props,
       ['tableOptions', 'sortBy', 'internalName'],
       DEFAULT_TIME_FIELD.internalName
     )
-    const sort = {field: sortField, direction: DEFAULT_SORT_DIRECTION}
+
+    const sort: Sort = {field: sortField, direction: DEFAULT_SORT_DIRECTION}
     const {
       data,
       tableOptions,
@@ -195,13 +202,7 @@ class TableGraph extends Component<Props, State> {
     if (!_.isEqual(computedFieldOptions, fieldOptions)) {
       this.handleUpdateFieldOptions(computedFieldOptions)
     }
-
-    const {
-      transformedData,
-      sortedTimeVals,
-      columnWidths,
-      totalWidths,
-    } = transformTableData(
+    const {transformedData, sortedTimeVals, columnWidths} = transformTableData(
       result.data,
       sort,
       computedFieldOptions,
@@ -219,7 +220,7 @@ class TableGraph extends Component<Props, State> {
     this.setState({
       transformedData,
       sortedTimeVals,
-      columnWidths,
+      columnWidths: columnWidths.widths,
       data: result.data,
       sortedLabels,
       totalColumnWidths: totalWidths,

ui/src/utils/groupByTimeSeriesTransform.ts

@@ -4,11 +4,36 @@ 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 {}
+interface Result {
+  statement_id: number
+  series: Series[]
+  responseIndex: number
+  isGroupBy: boolean
+}
+
+interface Series {
+  name: string
+  columns: string[]
+  values: DbData[][]
+  isGroupBy: boolean
+  responseIndex: number
+  seriesIndex: number
+}
+
+interface Cells {
+  isGroupBy: boolean[]
+  seriesIndex: number[]
+  responseIndex: number[]
+  label: string[]
+  value: DbData[]
+  time: DbData[]
+}
+
+interface Label {
+  label: string
+  seriesIndex: number
+  responseIndex: number
+}
 
 const flattenGroupBySeries = (results, responseIndex, tags) => {
   if (_.isEmpty(results)) {
@@ -50,7 +75,10 @@ const flattenGroupBySeries = (results, responseIndex, tags) => {
   return flattenedSeries
 }
 
-const constructResults = (raw: TimeSeriesServerResponse, isTable: boolean) => {
+const constructResults = (
+  raw: TimeSeriesServerResponse,
+  isTable: boolean
+): Result[] => {
   return _.flatten(
     map(raw, (response, index) => {
       const results = _.get(response, 'response.results', [])
@@ -73,7 +101,7 @@ const constructResults = (raw: TimeSeriesServerResponse, isTable: boolean) => {
   )
 }
 
-const constructSerieses = results => {
+const constructSerieses = (results: Result[]): Series[] => {
   return reduce(
     results,
     (acc, {series = [], responseIndex}) => {
@@ -90,7 +118,9 @@ const constructSerieses = results => {
   )
 }
 
-const constructCells = serieses => {
+const constructCells = (
+  serieses: Series[]
+): {cells: Cells; sortedLabels: Label[]; seriesLabels: Label[]} => {
   let cellIndex = 0
   let labels = []
   const seriesLabels = []
@@ -168,10 +198,10 @@ const constructCells = serieses => {
 }
 
 const insertGroupByValues = (
-  serieses,
-  seriesLabels,
-  labelsToValueIndex,
-  sortedLabels
+  serieses: Series[],
+  seriesLabels: Label[],
+  labelsToValueIndex: {[x: string]: number},
+  sortedLabels: Label[]
 ) => {
   const dashArray = Array(sortedLabels.length).fill('-')
   const timeSeries = []
@@ -263,11 +293,10 @@ const constructTimeSeries = (serieses, cells, sortedLabels, seriesLabels) => {
 export const groupByTimeSeriesTransform = (
   raw: TimeSeriesServerResponse,
   isTable: boolean
-): {sortedLabels: string[]; sortedTimeSeries: DbData[][]} => {
+): {sortedLabels: Label[]; sortedTimeSeries: DbData[][]} => {
   const results = constructResults(raw, isTable)
   const serieses = constructSerieses(results)
   const {cells, sortedLabels, seriesLabels} = constructCells(serieses)
-
   const sortedTimeSeries = constructTimeSeries(
     serieses,
     cells,

ui/src/utils/timeSeriesTransformers.ts

@@ -2,11 +2,40 @@ import {map, reduce} from 'fast.js'
 import {groupByTimeSeriesTransform} from 'src/utils/groupByTimeSeriesTransform'
 
 import {TimeSeriesServerResponse} from 'src/types/series'
+import {DbData} from '../types/dashboard'
+
+interface Label {
+  label: string
+  seriesIndex: number
+  responseIndex: number
+}
+
+interface TimeSeries {
+  time: DbData[]
+  values: DbData[]
+}
+
+interface TimeSeriesToDyGraphReturnType {
+  labels: string[]
+  timeSeries: TimeSeries[]
+  dygraphSeries: DygraphSeries
+}
+
+interface TimeSeriesToTableGraphReturnType {
+  data: DbData[][]
+  sortedLabels: Label[]
+}
+
+interface DygraphSeries {
+  [x: string]: {
+    axis: string
+  }
+}
 
 export const timeSeriesToDygraph = (
   raw: TimeSeriesServerResponse,
   isInDataExplorer: boolean
-) => {
+): TimeSeriesToDyGraphReturnType => {
   const isTable = false
   const {sortedLabels, sortedTimeSeries} = groupByTimeSeriesTransform(
     raw,
@@ -25,7 +54,6 @@ export const timeSeriesToDygraph = (
     },
     {}
   )
-
   return {
     labels: ['time', ...map(sortedLabels, ({label}) => label)],
     timeSeries: map(sortedTimeSeries, ({time, values}) => [
@@ -36,7 +64,9 @@ export const timeSeriesToDygraph = (
   }
 }
 
-export const timeSeriesToTableGraph = (raw: TimeSeriesServerResponse) => {
+export const timeSeriesToTableGraph = (
+  raw: TimeSeriesServerResponse
+): TimeSeriesToTableGraphReturnType => {
   const isTable = true
   const {sortedLabels, sortedTimeSeries} = groupByTimeSeriesTransform(
     raw,