Prevent time column from truncating text when time axis is vertical

ui/src/shared/components/TableGraph.js

@@ -17,6 +17,7 @@ import {
   ASCENDING,
   DESCENDING,
   FIX_FIRST_COLUMN_DEFAULT,
+  calculateTimeColumnWidth,
 } from 'src/shared/constants/tableGraph'
 const DEFAULT_SORT = ASCENDING
 
@@ -33,6 +34,7 @@ class TableGraph extends Component {
       sortByColumnIndex: NULL_COLUMN_INDEX,
       clickToSortFieldIndex: NULL_COLUMN_INDEX,
       clicktoSortDirection: DEFAULT_SORT,
+      timeColumnWidth: calculateTimeColumnWidth(props.tableOptions.timeFormat),
     }
   }
 
@@ -43,7 +45,7 @@ class TableGraph extends Component {
       clicktoSortDirection,
       sortByColumnIndex,
     } = this.state
-    const {tableOptions: {sortBy: {internalName}}} = nextProps
+    const {tableOptions: {sortBy: {internalName}, timeFormat}} = nextProps
     if (
       sortByColumnIndex === NULL_COLUMN_INDEX ||
       _.get(this.props, ['tableOptions', 'sortBy', 'internalName'], '') !==
@@ -60,6 +62,7 @@ class TableGraph extends Component {
         sortByColumnIndex: newSortByColumnIndex,
         clickToSortFieldIndex: NULL_COLUMN_INDEX,
         clicktoSortDirection: DEFAULT_SORT,
+        timeColumnWidth: calculateTimeColumnWidth(timeFormat),
       })
       return
     }
@@ -74,6 +77,7 @@ class TableGraph extends Component {
     this.setState({
       data: sortedData,
       unzippedData: _.unzip(sortedData),
+      timeColumnWidth: calculateTimeColumnWidth(timeFormat),
     })
   }
 
@@ -147,6 +151,19 @@ class TableGraph extends Component {
     })
   }
 
+  calculateColumnWidth = columnSizerWidth => column => {
+    const {index} = column
+    const {tableOptions, tableOptions: {verticalTimeAxis}} = this.props
+    const {timeColumnWidth} = this.state
+    const columnNames = _.get(tableOptions, 'columnNames', [
+      TIME_COLUMN_DEFAULT,
+    ])
+
+    return verticalTimeAxis && columnNames[index].internalName === 'time'
+      ? timeColumnWidth
+      : columnSizerWidth
+  }
+
   cellRenderer = ({columnIndex, rowIndex, key, parent, style}) => {
     const {hoveredColumnIndex, hoveredRowIndex} = this.state
     const {tableOptions, colors} = this.props
@@ -245,7 +262,7 @@ class TableGraph extends Component {
     const columnCount = _.get(data, ['0', 'length'], 0)
     const rowCount = data.length
     const COLUMN_MIN_WIDTH = 98
-    const COLUMN_MAX_WIDTH = 500
+    const COLUMN_MAX_WIDTH = 1000
     const ROW_HEIGHT = 30
     const tableWidth = _.get(this, ['gridContainer', 'clientWidth'], 0)
     const tableHeight = _.get(this, ['gridContainer', 'clientHeight'], 0)
@@ -277,7 +294,7 @@ class TableGraph extends Component {
               <MultiGrid
                 ref={registerChild}
                 columnCount={columnCount}
-                columnWidth={getColumnWidth}
+                columnWidth={this.calculateColumnWidth(getColumnWidth())}
                 rowCount={rowCount}
                 rowHeight={ROW_HEIGHT}
                 height={tableHeight}

ui/src/shared/constants/tableGraph.js

@@ -1,3 +1,6 @@
+import calculateSize from 'calculate-size'
+import _ from 'lodash'
+
 export const NULL_COLUMN_INDEX = -1
 export const NULL_ROW_INDEX = -1
 
@@ -12,6 +15,8 @@ export const ASCENDING = 'asc'
 export const DESCENDING = 'desc'
 export const FIX_FIRST_COLUMN_DEFAULT = true
 
+export const CELL_HORIZONTAL_PADDING = 18
+
 export const FORMAT_OPTIONS = [
   {text: TIME_FORMAT_DEFAULT},
   {text: 'MM/DD/YYYY HH:mm'},
@@ -32,3 +37,19 @@ export const DEFAULT_TABLE_OPTIONS = {
   columnNames: [TIME_COLUMN_DEFAULT],
   fixFirstColumn: FIX_FIRST_COLUMN_DEFAULT,
 }
+
+export const calculateTimeColumnWidth = timeFormat => {
+  // Force usage of longest format names for ideal measurement
+  timeFormat = _.replace(timeFormat, 'MMMM', 'September')
+  timeFormat = _.replace(timeFormat, 'dddd', 'Wednesday')
+  timeFormat = _.replace(timeFormat, 'A', 'AM')
+  timeFormat = _.replace(timeFormat, 'h', '00')
+
+  const {width} = calculateSize(timeFormat, {
+    font: '"RobotoMono", monospace',
+    fontSize: '13px',
+    fontWeight: 'bold',
+  })
+
+  return width + CELL_HORIZONTAL_PADDING
+}