Merge pull request #3053 from influxdata/polish/table-column-measurement

Improve Table Graph Column Width Calculations

ui/src/shared/components/TableGraph.js

@@ -17,6 +17,7 @@ import {
   FIX_FIRST_COLUMN_DEFAULT,
   VERTICAL_TIME_AXIS_DEFAULT,
   calculateTimeColumnWidth,
+  calculateLabelsColumnWidth,
 } from 'src/shared/constants/tableGraph'
 const DEFAULT_SORT = ASCENDING
 
@@ -64,6 +65,7 @@ class TableGraph extends Component {
       sortedTimeVals: [],
       labels: [],
       timeColumnWidth: calculateTimeColumnWidth(props.tableOptions.timeFormat),
+      labelsColumnWidth: calculateLabelsColumnWidth(props.data.labels),
       hoveredColumnIndex: NULL_ARRAY_INDEX,
       hoveredRowIndex: NULL_ARRAY_INDEX,
       sortField: 'time',
@@ -92,6 +94,7 @@ class TableGraph extends Component {
       this.setState({
         timeColumnWidth: calculateTimeColumnWidth(timeFormat),
       })
+      this.multiGridRef.forceUpdateGrids()
     }
 
     if (setDataLabels) {
@@ -119,6 +122,10 @@ class TableGraph extends Component {
       fieldNames
     )
 
+    const processedLabels = verticalTimeAxis
+      ? processedData[0]
+      : processedData.map(row => row[0])
+
     this.setState({
       data,
       labels,
@@ -126,6 +133,10 @@ class TableGraph extends Component {
       sortedTimeVals,
       sortField: sortFieldName,
       sortDirection: direction,
+      labelsColumnWidth: calculateLabelsColumnWidth(
+        processedLabels,
+        fieldNames
+      ),
     })
   }
 
@@ -216,15 +227,28 @@ class TableGraph extends Component {
   calculateColumnWidth = columnSizerWidth => column => {
     const {index} = column
     const {tableOptions: {verticalTimeAxis}} = this.props
-    const {timeColumnWidth, labels} = this.state
+    const {timeColumnWidth, labelsColumnWidth, processedData} = this.state
+    const columnCount = _.get(processedData, ['0', 'length'], 0)
+    const processedLabels = verticalTimeAxis
+      ? processedData[0]
+      : processedData.map(row => row[0])
 
-    if (labels.length > 0) {
-      return verticalTimeAxis && labels[index] === 'time'
-        ? timeColumnWidth
-        : columnSizerWidth
+    const specialColumnWidth = verticalTimeAxis
+      ? timeColumnWidth
+      : labelsColumnWidth
+
+    let adjustedColumnSizerWidth = columnSizerWidth
+
+    if (columnSizerWidth !== specialColumnWidth) {
+      const difference = columnSizerWidth - specialColumnWidth
+      const increment = difference / (columnCount - 1)
+
+      adjustedColumnSizerWidth = columnSizerWidth + increment
     }
 
-    return columnSizerWidth
+    return processedLabels[index] === 'time'
+      ? specialColumnWidth
+      : adjustedColumnSizerWidth
   }
 
   cellRenderer = ({columnIndex, rowIndex, key, parent, style}) => {
@@ -319,20 +343,34 @@ class TableGraph extends Component {
     )
   }
 
+  getMultiGridRef = (r, registerChild) => {
+    this.multiGridRef = r
+    return registerChild(r)
+  }
+
   render() {
     const {
       hoveredColumnIndex,
       hoveredRowIndex,
+      timeColumnWidth,
+      labelsColumnWidth,
       sortField,
       sortDirection,
       processedData,
     } = this.state
-    const {hoverTime, tableOptions, colors} = this.props
+    const {
+      hoverTime,
+      tableOptions,
+      tableOptions: {verticalTimeAxis},
+      colors,
+    } = this.props
     const {fixFirstColumn = FIX_FIRST_COLUMN_DEFAULT} = tableOptions
     const columnCount = _.get(processedData, ['0', 'length'], 0)
     const rowCount = columnCount === 0 ? 0 : processedData.length
 
-    const COLUMN_MIN_WIDTH = 98
+    const COLUMN_MIN_WIDTH = verticalTimeAxis
+      ? labelsColumnWidth
+      : timeColumnWidth
     const COLUMN_MAX_WIDTH = 1000
     const ROW_HEIGHT = 30
 
@@ -353,12 +391,13 @@ class TableGraph extends Component {
             columnMaxWidth={COLUMN_MAX_WIDTH}
             columnMinWidth={COLUMN_MIN_WIDTH}
             width={tableWidth}
+            timeColumnWidth={timeColumnWidth}
           >
-            {({getColumnWidth, registerChild}) => (
+            {({columnWidth, registerChild}) => (
               <MultiGrid
-                ref={registerChild}
+                ref={r => this.getMultiGridRef(r, registerChild)}
                 columnCount={columnCount}
-                columnWidth={this.calculateColumnWidth(getColumnWidth())}
+                columnWidth={this.calculateColumnWidth(columnWidth)}
                 rowCount={rowCount}
                 rowHeight={ROW_HEIGHT}
                 height={tableHeight}
@@ -377,6 +416,7 @@ class TableGraph extends Component {
                 hoverTime={hoverTime}
                 colors={colors}
                 tableOptions={tableOptions}
+                timeColumnWidth={timeColumnWidth}
                 classNameBottomRightGrid="table-graph--scroll-window"
               />
             )}

ui/src/shared/constants/tableGraph.js

@@ -57,3 +57,35 @@ export const calculateTimeColumnWidth = timeFormat => {
 
   return width + CELL_HORIZONTAL_PADDING
 }
+
+export const calculateLabelsColumnWidth = (labels, fieldNames) => {
+  if (!labels) {
+    return
+  }
+  if (fieldNames.length === 1) {
+    const longestLabel = labels.reduce((a, b) => (a.length > b.length ? a : b))
+    const {width} = calculateSize(longestLabel, {
+      font: '"RobotoMono", monospace',
+      fontSize: '13px',
+      fontWeight: 'bold',
+    })
+
+    return width + CELL_HORIZONTAL_PADDING
+  }
+
+  const longestFieldName = fieldNames
+    .map(fieldName => {
+      return fieldName.displayName
+        ? fieldName.displayName
+        : fieldName.internalName
+    })
+    .reduce((a, b) => (a.length > b.length ? a : b))
+
+  const {width} = calculateSize(longestFieldName, {
+    font: '"RobotoMono", monospace',
+    fontSize: '13px',
+    fontWeight: 'bold',
+  })
+
+  return width + CELL_HORIZONTAL_PADDING
+}