Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(transit-vehicle-overlay): Add optional per-vehicle color #458

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(transit-vehicle-overlay): Add optional per-vehicle color #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 167 additions & 0 deletions __snapshots__/storybook.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211322,6 +211322,89 @@ exports[`Storyshots StopsOverlay No Min Zoom 2`] = `
</div>
`;

exports[`Storyshots TransitVehicleOverlay Transit Vehicle Overlay Custom Route Color Only 1`] = `
<IntlProvider
defaultFormats={Object {}}
defaultLocale="en-US"
fallbackOnEmptyString={true}
formats={Object {}}
locale="en-US"
messages={Object {}}
onError={[Function]}
textComponent={Symbol(react.fragment)}
>
<ForwardRef(styled__StoryMapContainer)>
<BaseMap
center={
Array [
45.523,
-122.671,
]
}
zoom={8}
>
<TransitVehicleOverlay
vehicles={
Array [
Object {
"bearing": 120,
"blockID": 9061,
"delay": 56,
"direction": 0,
"expires": 1586768489109,
"extraBlockID": null,
"garage": "RUBY",
"inCongestion": null,
"lastLocID": 8354,
"lastStopSeq": 16,
"lat": 45.517888,
"loadPercentage": null,
"locationInScheduleDay": 93505,
"lon": -122.4645561,
"messageCode": 1030,
"newTrip": false,
"nextLocID": 8355,
"nextStopSeq": 17,
"offRoute": false,
"routeColor": "#084C8D",
"routeNumber": 100,
"serviceDate": 1586674800000,
"signMessage": "Blue to E 197th",
"signMessageLong": "MAX Blue Line to Ruby Junction/E 197th Ave",
"source": "tab",
"time": 1586768249379,
"tripID": "9803461",
"type": "rail",
"vehicleID": 208,
},
]
}
/>
</BaseMap>
</ForwardRef(styled__StoryMapContainer)>
</IntlProvider>
`;

exports[`Storyshots TransitVehicleOverlay Transit Vehicle Overlay Custom Route Color Only 2`] = `
.c0 {
height: 90vh;
}

<div
className="c0"
>
<div
style={
Object {
"height": "100%",
"position": "relative",
"width": "100%",
}
}
/>
</div>
`;

exports[`Storyshots TransitVehicleOverlay Transit Vehicle Overlay Example 1`] = `
<IntlProvider
defaultFormats={Object {}}
Expand Down Expand Up @@ -211354,6 +211437,7 @@ exports[`Storyshots TransitVehicleOverlay Transit Vehicle Overlay Example 1`] =
"expires": 1586768489109,
"extraBlockID": null,
"garage": "RUBY",
"highlightColor": "#3F9AFF",
"inCongestion": null,
"lastLocID": 8354,
"lastStopSeq": 16,
Expand All @@ -211366,6 +211450,7 @@ exports[`Storyshots TransitVehicleOverlay Transit Vehicle Overlay Example 1`] =
"nextLocID": 8355,
"nextStopSeq": 17,
"offRoute": false,
"routeColor": "#084C8D",
"routeNumber": 100,
"serviceDate": 1586674800000,
"signMessage": "Blue to E 197th",
Expand Down Expand Up @@ -211404,6 +211489,88 @@ exports[`Storyshots TransitVehicleOverlay Transit Vehicle Overlay Example 2`] =
</div>
`;

exports[`Storyshots TransitVehicleOverlay Transit Vehicle Overlay No Custom Color Example 1`] = `
<IntlProvider
defaultFormats={Object {}}
defaultLocale="en-US"
fallbackOnEmptyString={true}
formats={Object {}}
locale="en-US"
messages={Object {}}
onError={[Function]}
textComponent={Symbol(react.fragment)}
>
<ForwardRef(styled__StoryMapContainer)>
<BaseMap
center={
Array [
45.523,
-122.671,
]
}
zoom={8}
>
<TransitVehicleOverlay
vehicles={
Array [
Object {
"bearing": 120,
"blockID": 9061,
"delay": 56,
"direction": 0,
"expires": 1586768489109,
"extraBlockID": null,
"garage": "RUBY",
"inCongestion": null,
"lastLocID": 8354,
"lastStopSeq": 16,
"lat": 45.517888,
"loadPercentage": null,
"locationInScheduleDay": 93505,
"lon": -122.4645561,
"messageCode": 1030,
"newTrip": false,
"nextLocID": 8355,
"nextStopSeq": 17,
"offRoute": false,
"routeNumber": 100,
"serviceDate": 1586674800000,
"signMessage": "Blue to E 197th",
"signMessageLong": "MAX Blue Line to Ruby Junction/E 197th Ave",
"source": "tab",
"time": 1586768249379,
"tripID": "9803461",
"type": "rail",
"vehicleID": 208,
},
]
}
/>
</BaseMap>
</ForwardRef(styled__StoryMapContainer)>
</IntlProvider>
`;

exports[`Storyshots TransitVehicleOverlay Transit Vehicle Overlay No Custom Color Example 2`] = `
.c0 {
height: 90vh;
}

<div
className="c0"
>
<div
style={
Object {
"height": "100%",
"position": "relative",
"width": "100%",
}
}
/>
</div>
`;

exports[`Storyshots TransitiveOverlay Bike Only Itinerary 1`] = `
<IntlProvider
defaultFormats={Object {}}
Expand Down
69 changes: 69 additions & 0 deletions packages/transit-vehicle-overlay/__mocks__/tm_all.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,75 @@
"resultSet": {
"queryTime": 1586768277859,
"vehicle": [
{
"routeNumber": 100,
"blockID": 9061,
"tripID": "9803461",
"type": "rail",
"signMessage": "Blue to E 197th",
"signMessageLong": "MAX Blue Line to Ruby Junction/E 197th Ave",
"lat": 45.517888,
"lon": -122.4645561,
"bearing": 120,
"vehicleID": 208,
"time": 1586768249379,
"routeColor": "#084C8D",
"highlightColor": "#3F9AFF",

"expires": 1586768489109,
"serviceDate": 1586674800000,
"locationInScheduleDay": 93505,
"loadPercentage": null,
"inCongestion": null,
"newTrip": false,
"delay": 56,
"direction": 0,

"nextLocID": 8355,
"lastLocID": 8354,
"lastStopSeq": 16,
"nextStopSeq": 17,
"source": "tab",
"garage": "RUBY",
"messageCode": 1030,
"extraBlockID": null,

"offRoute": false
},
{
"routeNumber": 100,
"blockID": 9061,
"tripID": "9803461",
"type": "rail",
"signMessage": "Blue to E 197th",
"signMessageLong": "MAX Blue Line to Ruby Junction/E 197th Ave",
"lat": 45.517888,
"lon": -122.4645561,
"bearing": 120,
"vehicleID": 208,
"time": 1586768249379,
"routeColor": "#084C8D",

"expires": 1586768489109,
"serviceDate": 1586674800000,
"locationInScheduleDay": 93505,
"loadPercentage": null,
"inCongestion": null,
"newTrip": false,
"delay": 56,
"direction": 0,

"nextLocID": 8355,
"lastLocID": 8354,
"lastStopSeq": 16,
"nextStopSeq": 17,
"source": "tab",
"garage": "RUBY",
"messageCode": 1030,
"extraBlockID": null,

"offRoute": false
},
{
"routeNumber": 100,
"blockID": 9061,
Expand Down
10 changes: 7 additions & 3 deletions packages/transit-vehicle-overlay/src/TransitIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,14 @@ import React from "react";
import { Bus, Streetcar, Ferry } from "@opentripplanner/icons";
import styled, { css } from "styled-components";

const rounded = css<{ rotate?: number; routeColor?: string }>`
background: #eee;
const rounded = css<{
highlightColor?: string;
rotate?: number;
routeColor?: string;
}>`
background: ${props => props.routeColor || "#eeeeee"}aa;
&:hover {
background: ${props => props.routeColor || "#9999ee"}aa;
background: ${props => props.highlightColor || "#9999ee"}aa;
cursor: cell;
}
transition: all 0.1s ease-in-out;
Expand Down
13 changes: 12 additions & 1 deletion packages/transit-vehicle-overlay/src/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,19 @@ export const TransitVehicleOverlayExample = () => {
);
};

export const TransitVehicleOverlayCustomRouteColorOnly = () => {
return (
<TransitVehicleOverlay vehicles={[vehicleData.resultSet.vehicle[1]]} />
);
};
export const TransitVehicleOverlayNoCustomColorExample = () => {
return (
<TransitVehicleOverlay vehicles={[vehicleData.resultSet.vehicle[2]]} />
);
};

export default {
title: "TransitVehicleOverlay",
component: TransitVehicleOverlayExample,
component: TransitVehicleOverlay,
decorators: [withMap(PORTLAND, 8)]
};
21 changes: 20 additions & 1 deletion packages/transit-vehicle-overlay/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,15 @@ const TransitVehicleOverlay = ({

const Tooltip = TooltipSlot || VehicleTooltip;

// Check if possibleColor is a string in format `#000` or `#000000`
const isValidColor = possibleColor => {
if (typeof possibleColor !== "string") {
return false;
}

return /^#[A-Fa-f0-9]{3}(?:[A-Fa-f0-9]{3})?$/.test(possibleColor);
};

return (
<>
{validVehicles.map(vehicle => {
Expand All @@ -54,7 +63,17 @@ const TransitVehicleOverlay = ({
tooltipContents={<Tooltip vehicle={vehicle} />}
>
{/* @ts-expect-error We know the icon is set dynamically */}
<Icon rotate={vehicle.heading} routeColor={color} />
<Icon
highlightColor={
isValidColor(vehicle.highlightColor)
? vehicle.highlightColor
: null
}
rotate={vehicle.heading}
routeColor={
isValidColor(vehicle.routeColor) ? vehicle.routeColor : color
}
/>
</MarkerWithPopup>
);
})}
Expand Down
2 changes: 2 additions & 0 deletions packages/types/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,8 @@ export type TransitVehicle = {
routeShortName?: string;
routeLongName?: string;
routeType?: string;
highlightColor?: string;
routeColor?: string;

status?: string;
reportDate?: string;
Expand Down