[WIP] Component | Timeline: Enhancements and fixes

packages/dev/src/examples/xy-components/timeline/index.tsx

@@ -13,7 +13,7 @@ export const transitionComponent: TransitionComponentProps<TimeDataRecord[]> = {
   },
   component: (props) => (
     <VisXYContainer data={props.data}>
-      <VisTimeline x={d => d.timestamp} duration={props.duration}/>
+      <VisTimeline x={d => d.timestamp} duration={props.duration ?? 1000}/>
     </VisXYContainer>
   ),
 }

packages/dev/src/examples/xy-components/timeline/timeline-animation/index.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react'
+import { VisXYContainer, VisTimeline } from '@unovis/react'
+
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+import { TextAlign } from '@unovis/ts'
+
+export const title = 'Animation Tweaking'
+export const subTitle = 'Control enter/exit position'
+
+export const component = (props: ExampleViewerDurationProps): JSX.Element => {
+  const [shouldRenderData, setShouldRenderData] = React.useState(true)
+  const intervalIdRef = React.useRef<NodeJS.Timeout | null>(null)
+  const data = Array(10).fill(0).map((_, i) => ({
+    timestamp: Date.now() + i * 1000 * 60 * 60 * 24,
+    length: 1000 * 60 * 60 * 24,
+    id: i.toString(),
+    type: `Row ${i}`,
+    lineWidth: 5 + Math.random() * 15,
+  }))
+
+  type Datum = typeof data[number]
+
+  useEffect(() => {
+    clearInterval(intervalIdRef.current!)
+    intervalIdRef.current = setInterval(() => {
+      setShouldRenderData(should => !should)
+    }, 2000)
+  }, [])
+
+  return (<>
+    <VisXYContainer<Datum>
+      data={shouldRenderData ? data : []}
+      height={300}
+      duration={1500}
+    >
+      <VisTimeline
+        id={(d) => d.id}
+        lineRow={(d: Datum) => d.type as string}
+        x={(d: Datum) => d.timestamp}
+        rowHeight={undefined}
+        lineWidth={(d) => d.lineWidth}
+        lineCap
+        showEmptySegments
+        showRowLabels
+        rowLabelTextAlign={TextAlign.Left}
+        duration={props.duration}
+        animationLineEnterPosition={[undefined, -110]}
+        animationLineExitPosition={[1000, undefined]}
+      />
+    </VisXYContainer>
+  </>
+  )
+}

packages/dev/src/examples/xy-components/timeline/timeline-arrows/index.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo, useState, useEffect } from 'react'
+import { VisXYContainer, VisTimeline, VisAxis } from '@unovis/react'
+
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+import { Arrangement, TextAlign, TimelineArrow } from '@unovis/ts'
+
+// Icons
+import icon from './icon.svg?raw'
+
+export const title = 'Timeline Arrows'
+export const subTitle = 'Between the lines'
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const generateData = (length: number) => Array(length).fill(0).map((_, i) => ({
+  timestamp: Date.now() + i * 1000 * 60 * 60 * 24 + Math.random() * 1000 * 60 * 60 * 24,
+  length: 1000 * 60 * 60 * 24,
+  id: i.toString(),
+  type: `Row ${i}`,
+  lineWidth: 5 + Math.random() * 15,
+}))
+
+export const component = (props: ExampleViewerDurationProps): JSX.Element => {
+  const lineIconSize = 25
+  const [data, setData] = useState(() => generateData(15))
+
+  useEffect(() => {
+    const interval = setInterval(() => { setData(generateData(12)) }, 6000)
+    return () => clearInterval(interval)
+  }, [])
+
+  type Datum = typeof data[number]
+
+  const arrows = data.map((d, i) => {
+    if (i === data.length - 1) return undefined
+
+    return {
+      id: `arrow-${i}`,
+      xSource: d.timestamp + d.length,
+      xSourceOffsetPx: 12,
+      xTargetOffsetPx: 0,
+      lineSourceId: d.id,
+      lineTargetId: data[i + 1].id,
+      lineSourceMarginPx: (lineIconSize - d.lineWidth) / 2,
+      lineTargetMarginPx: 2,
+    }
+  }).filter(Boolean) as TimelineArrow[]
+
+  const svgDefs = useMemo(() => `${icon}`, [])
+  return (<>
+    <VisXYContainer<Datum>
+      data={data}
+      height={400}
+      svgDefs={svgDefs}
+    >
+      <VisTimeline
+        id={(d) => d.id}
+        lineRow={(d: Datum) => d.type as string}
+        x={(d: Datum) => d.timestamp}
+        rowHeight={40}
+        lineWidth={(d) => d.lineWidth}
+        lineCap
+        showEmptySegments
+        showRowLabels
+        rowLabelTextAlign={TextAlign.Left}
+        duration={props.duration}
+        lineEndIcon={'#circle_check_filled'}
+        lineEndIconSize={lineIconSize}
+        lineStartIconColor={'#fff'}
+        lineEndIconColor={'rgb(38, 86, 201)'}
+        lineEndIconArrangement={Arrangement.Outside}
+        arrows={arrows}
+      />
+      <VisAxis
+        type='x'
+        numTicks={3}
+        tickFormat={(x: number) => new Date(x).toDateString()}
+        duration={props.duration}
+      />
+    </VisXYContainer>
+  </>
+  )
+}

packages/dev/src/examples/xy-components/timeline/timeline-bleed/index.tsx

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react'
+import { VisXYContainer, VisTimeline, VisAxis, VisTooltip, VisCrosshair } from '@unovis/react'
+import { Arrangement } from '@unovis/ts'
+
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+
+// Icons
+import icon from './icon.svg?raw'
+
+export const title = 'Timeline: Bleed'
+export const subTitle = 'Automatic bleed calculation'
+
+export const component = (props: ExampleViewerDurationProps): JSX.Element => {
+  const data = useMemo(() => [
+    { timestamp: 0, duration: 20, row: 'Long Row' },
+    { timestamp: 0, duration: 0, row: 'Empty Row 1' },
+    { timestamp: 10, duration: 0, row: 'Empty Row 1' },
+    { timestamp: 15, duration: 0, row: 'Empty Row 1' },
+    { timestamp: 20, duration: 0, row: 'Empty Row 1' },
+    { timestamp: 18, duration: 0, row: 'Empty Row 2' },
+    { timestamp: 24, duration: 0, row: 'Empty Row 2' },
+    { timestamp: 27, duration: 0, row: 'Empty Row 2' },
+  ], [])
+
+
+  return (<>
+    <VisXYContainer data={data} height={200} svgDefs={icon}>
+      <VisTimeline<typeof data[number]>
+        lineRow={(d) => d.row as string}
+        lineDuration={(d) => d.duration}
+        x={(d) => d.timestamp}
+        rowHeight={50}
+        lineWidth={undefined}
+        showEmptySegments={true}
+        // lineEndIcon={'#circle_check_filled'}
+        lineStartIcon={'#circle_check_filled'}
+        // lineEndIconArrangement={Arrangement.Outside}
+        lineStartIconArrangement={Arrangement.Outside}
+        showRowLabels
+        duration={props.duration}
+        lineCap={true}
+      />
+      <VisAxis type='x' numTicks={3} tickFormat={(x: number) => (new Date(x).getTime()).toString()} duration={props.duration}/>
+      <VisTooltip/>
+    </VisXYContainer>
+  </>
+  )
+}

packages/dev/src/examples/xy-components/timeline/timeline-empty-segments/index.tsx

@@ -1,23 +1,34 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { VisXYContainer, VisTimeline, VisAxis, VisTooltip, VisCrosshair } from '@unovis/react'
 
 import { TimeDataRecord, generateTimeSeries } from '@src/utils/data'
 import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
 
-export const title = 'Timeline: Negative Lengths'
-export const subTitle = 'Generated Data'
+export const title = 'Timeline: Empty Segments'
+export const subTitle = 'Small and Negative Lengths'
 
 export const component = (props: ExampleViewerDurationProps): JSX.Element => {
   const [showEmptySegments, toggleEmptySegments] = React.useState(true)
-  const data = generateTimeSeries(10).map((d, i) => ({
+  const [lineCap, setLineCap] = React.useState(false)
+  const data = useMemo(() => generateTimeSeries(50).map((d, i) => ({
     ...d,
     length: [d.length, 0, -d.length][i % 3],
     type: ['Positive', 'Zero', 'Negative'][i % 3],
-  }))
+  })), [])
+
   return (<>
-    <label>Show empty segments: <input type='checkbox' checked={showEmptySegments} onChange={e => toggleEmptySegments(e.target.checked)}/></label>
+    <div><input type='checkbox' checked={showEmptySegments} onChange={e => toggleEmptySegments(e.target.checked)}/><label>Show empty segments</label></div>
+    <div><input type='checkbox' checked={lineCap} onChange={e => setLineCap(e.target.checked)}/><label>Rounded corners</label></div>
     <VisXYContainer<TimeDataRecord> data={data} height={200}>
-      <VisTimeline x={(d: TimeDataRecord) => d.timestamp} rowHeight={50} showEmptySegments={showEmptySegments} showLabels duration={props.duration}/>
+      <VisTimeline
+        lineRow={(d: TimeDataRecord) => d.type as string}
+        x={(d: TimeDataRecord) => d.timestamp}
+        rowHeight={50}
+        showEmptySegments={showEmptySegments}
+        showRowLabels
+        duration={props.duration}
+        lineCap={lineCap}
+      />
       <VisAxis type='x' numTicks={3} tickFormat={(x: number) => new Date(x).toDateString()} duration={props.duration}/>
       <VisCrosshair template={(d: TimeDataRecord) => `${Intl.DateTimeFormat().format(d.timestamp)}: ${Math.round(d.length / Math.pow(10, 7))}m`}/>
       <VisTooltip/>

packages/dev/src/examples/xy-components/timeline/timeline-label-alignment/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { VisXYContainer, VisTimeline, VisAxis } from '@unovis/react'
+
+import { TimeDataRecord, generateTimeSeries } from '@src/utils/data'
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+import { TextAlign } from '@unovis/ts'
+
+export const title = 'Label Alignment & Style'
+export const subTitle = 'X Domain, auto line width'
+
+export const component = (props: ExampleViewerDurationProps): JSX.Element => {
+  const data = generateTimeSeries(25, 20, 10).map((d, i) => ({
+    ...d,
+    type: `Row ${i}`,
+  }))
+
+  const xDomain = [data[0].timestamp + 100000, data[data.length - 1].timestamp - 10000] as [number, number]
+  return (<>
+    <VisXYContainer<TimeDataRecord>
+      data={data}
+      height={300}
+      xDomain={xDomain}
+      margin={{
+        left: 10,
+        right: 10,
+      }}
+    >
+      <VisTimeline
+        lineRow={(d: TimeDataRecord) => d.type as string}
+        x={(d: TimeDataRecord) => d.timestamp}
+        rowHeight={20}
+        lineWidth={undefined}
+        lineCap
+        showRowLabels
+        rowLabelTextAlign={TextAlign.Left}
+        duration={props.duration}
+        rowLabelStyle={rowLabel => rowLabel.label === 'Row 24'
+          ? ({ fill: 'rgb(237, 116, 128)', cursor: 'pointer', 'text-decoration': 'underline', transform: 'translateX(5px)' })
+          : undefined
+        }
+      />
+      <VisAxis
+        type='x'
+        numTicks={3}
+        tickFormat={(x: number) => new Date(x).toDateString()}
+        duration={props.duration}
+      />
+    </VisXYContainer>
+  </>
+  )
+}

packages/dev/src/examples/xy-components/timeline/timeline-line-icons/index.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react'
+import { VisXYContainer, VisTimeline, VisAxis } from '@unovis/react'
+
+import { generateTimeSeries } from '@src/utils/data'
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+import { Arrangement, TextAlign } from '@unovis/ts'
+
+// Icons
+import icon from './icon.svg?raw'
+
+export const title = 'Line Icons'
+export const subTitle = 'Start / End icons'
+
+export const component = (props: ExampleViewerDurationProps): JSX.Element => {
+  const data = generateTimeSeries(25, 20, 10).map((d, i) => ({
+    ...d,
+    type: `Row ${i}`,
+    lineWidth: 5 + Math.random() * 15,
+  }))
+  type Datum = typeof data[number]
+
+  const svgDefs = useMemo(() => `${icon}`, [])
+  return (<>
+    <VisXYContainer<Datum>
+      data={data}
+      height={300}
+      svgDefs={svgDefs}
+    >
+      <VisTimeline
+        lineRow={(d: Datum) => d.type as string}
+        x={(d: Datum) => d.timestamp}
+        rowHeight={20}
+        lineWidth={(d) => d.lineWidth}
+        lineCap
+        rowLabelTextAlign={TextAlign.Left}
+        duration={props.duration}
+        lineStartIcon={'#circle_pending_filled'}
+        lineEndIcon={'#circle_check_filled'}
+        lineEndIconSize={25}
+        lineStartIconColor={'rgb(38, 86, 201)'}
+        lineEndIconColor={'rgb(38, 86, 201)'}
+        lineEndIconArrangement={Arrangement.Outside}
+        lineStartIconArrangement={Arrangement.Outside}
+        showRowLabels
+      />
+      <VisAxis
+        type='x'
+        numTicks={3}
+        tickFormat={(x: number) => new Date(x).toDateString()}
+        duration={props.duration}
+      />
+    </VisXYContainer>
+  </>
+  )
+}