From 7f9beb140c509cef7360db3732910d68175f83a9 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Fri, 11 May 2018 14:05:44 -0700 Subject: [PATCH] WIP table typing --- ui/src/dashboards/utils/tableGraph.ts | 7 ++- ui/src/shared/components/TableGraph.tsx | 29 +++++------ ui/src/utils/groupByTimeSeriesTransform.ts | 57 ++++++++++++++++------ ui/src/utils/timeSeriesTransformers.ts | 36 ++++++++++++-- 4 files changed, 94 insertions(+), 35 deletions(-) diff --git a/ui/src/dashboards/utils/tableGraph.ts b/ui/src/dashboards/utils/tableGraph.ts index 7da9fcb0eb..2739c0d618 100644 --- a/ui/src/dashboards/utils/tableGraph.ts +++ b/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} } diff --git a/ui/src/shared/components/TableGraph.tsx b/ui/src/shared/components/TableGraph.tsx index a8521ecd3f..ce96e3215d 100644 --- a/ui/src/shared/components/TableGraph.tsx +++ b/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 { 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 { } 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 { 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 { this.setState({ transformedData, sortedTimeVals, - columnWidths, + columnWidths: columnWidths.widths, data: result.data, sortedLabels, totalColumnWidths: totalWidths, diff --git a/ui/src/utils/groupByTimeSeriesTransform.ts b/ui/src/utils/groupByTimeSeriesTransform.ts index 783b32b04a..5fd3f790f7 100644 --- a/ui/src/utils/groupByTimeSeriesTransform.ts +++ b/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, diff --git a/ui/src/utils/timeSeriesTransformers.ts b/ui/src/utils/timeSeriesTransformers.ts index a094ad326a..a31d7d40e0 100644 --- a/ui/src/utils/timeSeriesTransformers.ts +++ b/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,