Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 8c3fcac

Browse files
committedNov 7, 2020
feat(FeedVersionSpanChart): Add chart to compare feed calendar spans.
1 parent 6db4f04 commit 8c3fcac

File tree

3 files changed

+115
-12
lines changed

3 files changed

+115
-12
lines changed
 

‎lib/manager/components/version/FeedVersionDetails.js

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,16 @@ import {BLOCKING_ERROR_TYPES} from '../../util/version'
1919
import VersionDateLabel from './VersionDateLabel'
2020
import VersionRetrievalBadge from './VersionRetrievalBadge'
2121
import VersionSelectorDropdown from './VersionSelectorDropdown'
22+
import FeedVersionSpanChart from './FeedVersionSpanChart'
2223

2324
import type {FeedVersion, GtfsPlusValidation, Bounds, Feed} from '../../../types'
2425
import type {ManagerUserState} from '../../../types/reducers'
2526

2627
type Props = {
28+
comparedVersion: ?FeedVersion,
29+
comparedVersionIndex: ?number,
2730
feedSource: Feed,
31+
feedVersionIndex: number,
2832
gtfsPlusValidation: GtfsPlusValidation,
2933
mergeVersions: typeof versionsActions.mergeVersions,
3034
publishFeedVersion: typeof versionsActions.publishFeedVersion,
@@ -84,7 +88,15 @@ export default class FeedVersionDetails extends Component<Props> {
8488
_onClickPublish = () => this.props.publishFeedVersion(this.props.version)
8589

8690
render () {
87-
const {feedSource, gtfsPlusValidation, user, version} = this.props
91+
const {
92+
comparedVersion,
93+
comparedVersionIndex,
94+
feedSource,
95+
feedVersionIndex,
96+
gtfsPlusValidation,
97+
user,
98+
version
99+
} = this.props
88100
const {validationSummary: summary} = version
89101
// We must check the version ID against the feed source in props (not the
90102
// feed source nested underneath version) because this is the only place the
@@ -158,6 +170,16 @@ export default class FeedVersionDetails extends Component<Props> {
158170
</span>
159171
{' '}
160172
<VersionDateLabel version={version} />
173+
174+
{comparedVersion && (
175+
<FeedVersionSpanChart
176+
activeVersion={version}
177+
activeVersionIndex={feedVersionIndex}
178+
comparedVersion={comparedVersion}
179+
comparedVersionIndex={comparedVersionIndex}
180+
/>
181+
)}
182+
161183
{(hasBlockingIssue || hasGtfsPlusBlockingIssue) &&
162184
isExtensionEnabled('mtc') &&
163185
<div
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
// @flow
2+
3+
import React, { Component } from 'react'
4+
import { Table } from 'react-bootstrap'
5+
import moment from 'moment'
6+
7+
import type { FeedVersion } from '../../../types'
8+
9+
type Props = {
10+
activeVersion: FeedVersion,
11+
activeVersionIndex: number,
12+
comparedVersion: FeedVersion,
13+
comparedVersionIndex: number
14+
}
15+
16+
const FeedSpan = ({ relativeLength, relativeOffset, ...props }) => {
17+
return (
18+
<div {...props} style={{...props.style, height: '1em', position: 'relative'}}>
19+
<div className='label-success' style={{height: '100%', left: `${relativeOffset * 100}%`, position: 'absolute', width: `${relativeLength * 100}%`}} />
20+
</div>
21+
)
22+
}
23+
24+
export default class TripsChart extends Component<Props> {
25+
_renderFeedSpan = () => {
26+
}
27+
28+
render () {
29+
const { activeVersion, comparedVersion, comparedVersionIndex } = this.props
30+
31+
const activeVersionStartDate = moment(activeVersion.validationSummary.startDate)
32+
const activeVersionEndDate = moment(activeVersion.validationSummary.endDate)
33+
const comparedVersionStartDate = moment(comparedVersion.validationSummary.startDate)
34+
const comparedVersionEndDate = moment(comparedVersion.validationSummary.endDate)
35+
36+
const firstDate = moment.min(activeVersionStartDate, comparedVersionStartDate)
37+
const lastDate = moment.max(activeVersionEndDate, comparedVersionEndDate)
38+
39+
const numDays = lastDate.diff(firstDate, 'days')
40+
const activeVersionOffset = activeVersionStartDate.diff(firstDate, 'days')
41+
const activeVersionLength = activeVersionEndDate.diff(activeVersionStartDate, 'days')
42+
const comparedVersionOffset = comparedVersionStartDate.diff(firstDate, 'days')
43+
const comparedVersionLength = comparedVersionEndDate.diff(comparedVersionStartDate, 'days')
44+
/*
45+
const data = dailyTripCounts
46+
.slice(0, maxDaysToShow)
47+
.map((count, index) => [firstDate.clone().add(index, 'days'), count])
48+
const graphHeight = 30
49+
const spacing = 8
50+
const leftMargin = 50
51+
const rightMargin = 50
52+
const bottomMargin = 75
53+
const svgWidth = leftMargin + rightMargin + (data.length * spacing)
54+
const svgHeight = graphHeight + bottomMargin
55+
const maxTrips = Math.max.apply(Math, data.map(d => d[1]))
56+
const yAxisMax = getChartMax(maxTrips)
57+
const rowHeight = 20
58+
59+
const yAxisLabels = [
60+
`Version ${activeVersionIndex}`,
61+
`Version ${comparedVersionIndex}`
62+
]
63+
*/
64+
return (
65+
<Table bordered condensed>
66+
<tbody>
67+
<tr>
68+
<td>This version</td>
69+
<td>{activeVersion.validationSummary.startDate}</td>
70+
<td><FeedSpan relativeLength={activeVersionLength / numDays} relativeOffset={activeVersionOffset / numDays} style={{width: '200px'}} /></td>
71+
<td>{activeVersion.validationSummary.endDate}</td>
72+
</tr>
73+
<tr>
74+
<td>Version {comparedVersionIndex}</td>
75+
<td>{comparedVersion.validationSummary.startDate}</td>
76+
<td><FeedSpan relativeLength={comparedVersionLength / numDays} relativeOffset={comparedVersionOffset / numDays} style={{width: '200px'}} /></td>
77+
<td>{comparedVersion.validationSummary.endDate}</td>
78+
</tr>
79+
</tbody>
80+
</Table>
81+
)
82+
}
83+
}

‎lib/manager/components/version/FeedVersionTabs.js

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import moment from 'moment'
44
import React, {Component} from 'react'
5-
import {Row, Col, Tabs, Tab, ListGroupItem, Label} from 'react-bootstrap'
5+
import {Col, Label as BsLabel, ListGroupItem, Row, Tab, Tabs} from 'react-bootstrap'
66
import numeral from 'numeral'
77

88
import {getComponentMessages, isModuleEnabled} from '../../../common/util/config'
@@ -112,21 +112,19 @@ export default class FeedVersionTabs extends Component<Props> {
112112
return (
113113
<Col xs={2} className='text-center' key={c}>
114114
<div
115-
title={`${summary[c]}` /* do we need this? */}
115+
title={`${summary[c]}`} // FIXME: do we need the title prop?
116116
style={{marginBottom: '0px', fontSize: '200%'}}>
117117
{numeral(summary[c]).format('0a')}
118-
{comparedVersion
119-
? <sup style={{width: 0, display: 'inline-block'}}>
120-
<Label
121-
htmlFor
118+
{comparedVersion && (
119+
<sup style={{width: 0, display: 'inline-block'}}>
120+
<BsLabel
122121
style={{fontSize: '50%', padding: '0 0.2em 0.1em'}}
123122
bsStyle={diff > 0 ? 'success' : (diff < 0 ? 'danger' : 'default')}
124123
title={`Difference compared to Version ${comparedVersionIndex}`}>
125-
{diff === 0 ? '=' : ((diff > 0 ? '+' : '') + numeral(diff).format('0a')) /* refactor */}
126-
</Label>
124+
{diff === 0 ? '=' : ((diff > 0 ? '+' : '') + numeral(diff).format('0a')) /* TODO: refactor */}
125+
</BsLabel>
127126
</sup>
128-
: null}
129-
127+
)}
130128
</div>
131129

132130
<p style={{marginBottom: '0px'}}>{this.messages(c)}</p>
@@ -137,7 +135,7 @@ export default class FeedVersionTabs extends Component<Props> {
137135
<p
138136
title={daysActive}
139137
style={{marginBottom: '0px', fontSize: '200%'}}>
140-
{numeral(daysActive).format('0 a')}
138+
{numeral(daysActive).format('0a')}
141139
</p>
142140
<p style={{marginBottom: '0px'}}>{this.messages('daysActive')}</p>
143141
</Col>

0 commit comments

Comments
 (0)