diff --git a/packages/cbioportal-clinical-timeline/src/TickAxis.tsx b/packages/cbioportal-clinical-timeline/src/TickAxis.tsx index 29562534102..93cf24e2a68 100644 --- a/packages/cbioportal-clinical-timeline/src/TickAxis.tsx +++ b/packages/cbioportal-clinical-timeline/src/TickAxis.tsx @@ -79,6 +79,8 @@ const TickAxis: React.FunctionComponent = observer(function({ startPoint = tick.start; } + var startDate = new Date('01/01/1960'); + const majorTickPosition = store.getPosition({ start: startPoint, }); @@ -98,17 +100,12 @@ const TickAxis: React.FunctionComponent = observer(function({ let majorLabel: string = ''; - if (count < 0) { - majorLabel = `${count}${unit}`; - } - - if (count === 0) { - majorLabel = '0'; - } - - if (count > 0) { - majorLabel = `${count}${unit}`; - } + startDate.setMonth(startDate.getMonth() + count); + majorLabel = + startDate.getMonth() + + 1 + + '/' + + startDate.getFullYear(); content = ( <> @@ -165,13 +162,29 @@ const TickAxis: React.FunctionComponent = observer(function({ : `${count + 1}${unit}`; minorLabel = count === -1 - ? `-${minorCount}m` - : `${majorLabel} ${minorCount}m`; + ? startDate.getMonth() + + minorCount + + 1 + + '/' + + startDate.getFullYear() + : startDate.getMonth() + + minorCount + + 1 + + '/' + + startDate.getFullYear(); } else { minorLabel = count === 0 - ? `${minorCount}m` - : `${majorLabel} ${minorCount}m`; + ? startDate.getMonth() + + minorCount + + 1 + + '/' + + startDate.getFullYear() + : startDate.getMonth() + + minorCount + + 1 + + '/' + + startDate.getFullYear(); } } diff --git a/packages/cbioportal-clinical-timeline/src/Timeline.tsx b/packages/cbioportal-clinical-timeline/src/Timeline.tsx index 72ad76c0c0a..ace809d6a79 100644 --- a/packages/cbioportal-clinical-timeline/src/Timeline.tsx +++ b/packages/cbioportal-clinical-timeline/src/Timeline.tsx @@ -281,6 +281,7 @@ const Timeline: React.FunctionComponent = observer(function({ }: ITimelineProps) { const tracks = store.data; const SCROLLBAR_PADDING = 15; + var dateType = false; let height = TICK_AXIS_HEIGHT + _.sumBy(tracks, t => { @@ -354,6 +355,17 @@ const Timeline: React.FunctionComponent = observer(function({ className={'tl-timeline-wrapper'} id={store.uniqueId} > +
+ +
{store.zoomBounds && ( diff --git a/packages/cbioportal-clinical-timeline/src/lib/helpers.ts b/packages/cbioportal-clinical-timeline/src/lib/helpers.ts index 6a44235f159..01fbda73176 100644 --- a/packages/cbioportal-clinical-timeline/src/lib/helpers.ts +++ b/packages/cbioportal-clinical-timeline/src/lib/helpers.ts @@ -201,6 +201,9 @@ export function sortNestedTracks(tracks: TimelineTrackSpecification[]) { } export function formatDate(dayCount: number) { + var startDate = new Date('01/01/1960'); + startDate.setDate(startDate.getDate() + dayCount); + let negative = dayCount < 0; dayCount = Math.abs(dayCount); @@ -218,7 +221,13 @@ export function formatDate(dayCount: number) { arr.push(`${days} day${days === 1 ? '' : 's'}`); const formattedDate = arr.join(', '); - return `${negative ? '-' : ''}${formattedDate}`; + return ( + startDate.getDate() + + '/' + + (startDate.getMonth() + 1) + + '/' + + startDate.getFullYear() + ); } function getAllDescendantData(