Component | Timeline: Update row label grouping and formatting

- Introduce a dedicated TimelineRowLabel type to encapsulate label data, including formatted labels.
- Added the `rowLabelStyle` config option.
- Update the `groupBy` utility to pass the index to the accessor.

Author: rokotyan

packages/ts/src/components/timeline/config.ts

@@ -4,6 +4,7 @@ import { XYComponentConfigInterface, XYComponentDefaultConfig } from 'core/xy-co
 import { WithOptional } from 'types/misc'
 import { ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'
 import { TextAlign, Arrangement } from 'types'
+import type { TimelineRowLabel } from 'components/timeline/types'
 
 export interface TimelineConfigInterface<Datum> extends WithOptional<XYComponentConfigInterface<Datum>, 'y'> {
   // Items (Lines)
@@ -63,6 +64,8 @@ export interface TimelineConfigInterface<Datum> extends WithOptional<XYComponent
 
   /** Show row labels when set to `true`. Default: `false`. Falls back to deprecated `showLabels` */
   showRowLabels?: boolean;
+  /** Row label style as an object with the `{ [property-name]: value }` format. Default: `undefined` */
+  rowLabelStyle?: GenericAccessor<Record<string, string>, TimelineRowLabel<Datum>>;
   /** Row label formatter function. Default: `undefined` */
   rowLabelFormatter?: (key: string) => string;
   /** Fixed label width in pixels. Labels longer than the specified value will be trimmed. Default: `undefined`. Falls back to deprecated `labelWidth`. */
@@ -112,6 +115,7 @@ export const TimelineDefaultConfig: TimelineConfigInterface<unknown> = {
 
   showRowLabels: undefined,
   rowLabelFormatter: undefined,
+  rowLabelStyle: undefined,
   rowLabelWidth: undefined,
   rowMaxLabelWidth: undefined,
   rowLabelTextAlign: TextAlign.Right,

packages/ts/src/components/timeline/index.ts

@@ -7,11 +7,11 @@ import { drag, D3DragEvent } from 'd3-drag'
 import { XYComponentCore } from 'core/xy-component'
 
 // Utils
-import { isNumber, unique, arrayOfIndices, getMin, getMax, getString, getNumber, getValue } from 'utils/data'
+import { isNumber, arrayOfIndices, getMin, getMax, getString, getNumber, getValue, groupBy } from 'utils/data'
 import { smartTransition } from 'utils/d3'
 import { getColor } from 'utils/color'
 import { textAlignToAnchor, trimSVGText } from 'utils/text'
-import { guid } from 'utils'
+import { guid, isStringSvg, sanitizeSvgString } from 'utils'
 
 // Types
 import { TextAlign, Spacing, Arrangement } from 'types'
@@ -22,6 +22,9 @@ import { TimelineDefaultConfig, TimelineConfigInterface } from './config'
 // Styles
 import * as s from './style'
 
+// Local Types
+import type { TimelineRowLabel } from './types'
+
 export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfigInterface<Datum>> {
   static selectors = s
   protected _defaultConfig = TimelineDefaultConfig as TimelineConfigInterface<Datum>
@@ -97,8 +100,8 @@ export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfigInterf
     if (config.showRowLabels ?? config.showLabels) {
       if (config.rowLabelWidth ?? config.labelWidth) this._labelWidth = (config.rowLabelWidth ?? config.labelWidth) + this._labelMargin
       else {
-        const recordLabels = this._getRecordLabels(data)
-        const longestLabel = recordLabels.reduce((acc, val) => acc.length > val.length ? acc : val, '')
+        const rowLabels = this._getRowLabels(data)
+        const longestLabel = rowLabels.reduce((longestLabel, l) => longestLabel.length > l.formattedLabel.length ? longestLabel : l.formattedLabel, '')
         const label = this._labelsGroup.append('text')
           .attr('class', s.label)
           .text(longestLabel)
@@ -127,14 +130,13 @@ export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfigInterf
     const yRange = this.yScale.range()
     const yStart = Math.min(...yRange)
     const yHeight = Math.abs(yRange[1] - yRange[0])
-    const recordLabels = this._getRecordLabels(data)
-    const recordLabelsUnique = unique(recordLabels)
-    const numUniqueRecords = recordLabelsUnique.length
-    const rowHeight = config.rowHeight || (yHeight / numUniqueRecords)
+    const rowLabels = this._getRowLabels(data)
+    const numRowLabels = rowLabels.length
+    const rowHeight = config.rowHeight || (yHeight / numRowLabels)
 
     // Ordinal scale to handle records on the same type
     const ordinalScale: ScaleOrdinal<string, number> = scaleOrdinal()
-    ordinalScale.range(arrayOfIndices(numUniqueRecords))
+    ordinalScale.range(arrayOfIndices(numRowLabels))
 
     // Invisible Background rect to track events
     this._background
@@ -144,7 +146,7 @@ export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfigInterf
 
     // Labels
     const labels = this._labelsGroup.selectAll<SVGTextElement, string>(`.${s.label}`)
-      .data((config.showRowLabels ?? config.showLabels) ? recordLabelsUnique : [])
+      .data((config.showRowLabels ?? config.showLabels) ? rowLabels : [])
 
     const labelsEnter = labels.enter().append('text')
       .attr('class', s.label)
@@ -155,20 +157,27 @@ export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfigInterf
 
     labelsEnter.merge(labels)
       .attr('x', xRange[0] - labelOffset)
-      .attr('y', (label, i) => yStart + (ordinalScale(label) + 0.5) * rowHeight)
-      .text(label => label)
-      .style('text-anchor', textAlignToAnchor(config.rowLabelTextAlign as TextAlign))
+      .attr('y', (l, i) => yStart + (ordinalScale(l.label) + 0.5) * rowHeight)
+      .text(l => l.formattedLabel)
       .each((label, i, els) => {
-        trimSVGText(select(els[i]), (config.rowLabelWidth ?? config.labelWidth) || (config.rowMaxLabelWidth ?? config.maxLabelWidth))
+        const labelSelection = select(els[i])
+        trimSVGText(labelSelection, (config.rowLabelWidth ?? config.labelWidth) || (config.rowMaxLabelWidth ?? config.maxLabelWidth))
+
+        // Apply custom label style if it has been provided
+        const customStyle = getValue(label, config.rowLabelStyle)
+        for (const [prop, value] of Object.entries(customStyle)) {
+          labelSelection.style(prop, value)
+        }
       })
+      .style('text-anchor', textAlignToAnchor(config.rowLabelTextAlign as TextAlign))
 
     labels.exit().remove()
 
     // Row background rects
     const xStart = xRange[0]
     const timelineWidth = xRange[1] - xRange[0]
-    const numRows = Math.max(Math.floor(yHeight / rowHeight), numUniqueRecords)
-    const recordTypes: (string | undefined)[] = Array(numRows).fill(null).map((_, i) => recordLabelsUnique[i])
+    const numRows = Math.max(Math.floor(yHeight / rowHeight), numRowLabels)
+    const recordTypes = Array(numRows).fill(null).map((_, i) => rowLabels[i])
     const rects = this._rowsGroup.selectAll<SVGRectElement, number>(`.${s.row}`)
       .data(recordTypes)
 
@@ -199,9 +208,6 @@ export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfigInterf
 
     linesEnter.append('rect')
       .attr('class', s.line)
-      .classed(s.rowOdd, config.alternatingRowColors
-        ? (d, i) => !(recordLabelsUnique.indexOf(this._getRecordKey(d, i)) % 2)
-        : null)
       .style('fill', (d, i) => getColor(d, config.color, ordinalScale(this._getRecordKey(d, i))))
       .call(this._positionLines.bind(this), rowHeight)
 
@@ -384,8 +390,16 @@ export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfigInterf
     return getString(d, this.config.lineRow ?? this.config.type) || `__${i}`
   }
 
-  private _getRecordLabels (data: Datum[]): string[] {
-    return data.map((d, i) => getString(d, this.config.lineRow ?? this.config.type) || `${i + 1}`)
+  private _getRowLabels (data: Datum[]): TimelineRowLabel<Datum>[] {
+    const grouped = groupBy(data, (d, i) => getString(d, this.config.lineRow ?? this.config.type) || `${i + 1}`)
+
+    const rowLabels: TimelineRowLabel<Datum>[] = Object.entries(grouped).map(([key, items]) => ({
+      label: key,
+      formattedLabel: this.config.rowLabelFormatter?.(key) ?? key,
+      data: items,
+    }))
+
+    return rowLabels
   }
 
   // Override the default XYComponent getXDataExtent method to take into account line lengths
@@ -396,3 +410,7 @@ export class Timeline<Datum> extends XYComponentCore<Datum, TimelineConfigInterf
     return [min, max]
   }
 }
+function sanitizeSvg (key: string): any {
+  throw new Error('Function not implemented.')
+}
+

packages/ts/src/components/timeline/types.ts

@@ -0,0 +1,5 @@
+export type TimelineRowLabel<D> = {
+  label: string;
+  formattedLabel: string;
+  data: D[];
+}

packages/ts/src/utils/data.ts

@@ -144,9 +144,9 @@ export const omit = <T extends Record<string | number | symbol, unknown>>(obj: T
   return obj
 }
 
-export const groupBy = <T extends Record<string | number, any>> (arr: T[], accessor: (a: T) => string | number): Record<string | number, T[]> => {
+export const groupBy = <T extends Record<string | number, any>> (arr: T[], accessor: (a: T, index: number) => string | number): Record<string | number, T[]> => {
   return arr.reduce(
-    (grouped, v, i, a, k = accessor(v)) => (((grouped[k] || (grouped[k] = [])).push(v), grouped)),
+    (grouped, v, i, a, k = accessor(v, i)) => (((grouped[k] || (grouped[k] = [])).push(v), grouped)),
     {} as Record<string | number, T[]>
   )
 }