hackoregon / component-library Goto Github PK

Next generation of issue #33, renamed to better fit the component description.

Need an info panel to display neighborhood data when a neighborhood is clicked on the leaflet map.

The housing team needs a component that takes geojson and renders a leaflet map.

We'll be building this, but I wanted to make an issue first to make sure we aren't duplicating effort across teams!

Ultimately it will fit into a page that looks like this:

So you can expect it to require geojson and provide hover and click events for points and regions.

Prototype reference: https://invis.io/T99ULMFYA

Platform Hero:
A vanilla Hero section for the Platform home page. Accepts html content. Markup should only include .Hero div for maximum flexibility in content.

Collection Hero:
Hero section for a Collection page. Markup should include .Hero .Container .Content divs for normalization.

• Featured Tag
• Normalized h1 for dynamic Collection Title
• ShareLink component (currently labeled as StoryLink) that copies collection link to clipboard.
• Accepts a dynamic background-image built by teams.

Card Hero
Hero section for a Collection page. Markup should include .Hero .Container .Content divs for normalization.

• Normalized h1 for dynamic Card Title
• ShareLink component (currently labeled as StoryLink) that copies card link to clipboard.
• Displays dynamic background-image associated with its parent Collection Hero.
• View in Collection link that routes back to the Card's parent Collection.

Part of the map component (issue #2 ) requires a tooltip that opens when clicking a neighborhood. Expect that the tooltip contents will be unique depending on the project.

Slider controller to change year, stay's sticky to follow the user as they scroll down to other sections.

Can likely use slider already in the component library

need to clarify what the "play over time" button does

Add an optional label as a prop.

The budget team MVP includes an interactive Sankey diagram (or similar), for visualizing time series data:

Featured Card: Delta sankey diagram (or similar visualization)
Function: Represent the City of Portland’s budget data over a period of 10 years (data permitting), so users can quickly understand basic facts about the budget (service areas, general spending, changes over time)
Components:
Visualization of budget data over time (e.g. a sankey diagram)
Ability to manipulate a slider through the diagram, so they can land on each year. A pop-up box (or similar) will appear when users stop the slider on a particular year. The pop-up box will show budget data for that year, specifically total dollar amount and percent of total budget for each service area.
Some contextualizing text about the diagram (to be written later)

Based on discussion with @dsdemaria, we want to create generic, styled select component using react-select

To use these components in project repos, the plan is to require this as an npm dependency, yes?

If so, the package name will have to change and it will need to be published. Housing front-end is ready to put their site together. In the interim, we can use some npm link shenanigans, but we'll want to get this public soon.

Chart displays monetary value - size of circles relative to other values. When circle is clicked monetary value is displayed to the left of the chart with a text description.

see (https://bl.ocks.org/mbostock/07ec62d9957a29a30e71cad962ff2efd)
and (http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0) as examples

Prototype for reference is here - https://projects.invisionapp.com/d/main#/console/9943843/212434100/preview

Transitions are limited over at InVision, but as long as that's editable via css, should be good.

The underline sticks out to the left of the text. Should be aligned to under it.

copied from Pete's issue

try and fetch leaflet data from backend and wrap in a higher order react component (provider)

Looking into how to visualize this - a dot matrix chart with custom icons

dot matrix visualization example (https://arpitnarechania.github.io/d3-dotmatrix/)

The Leaflet map component tooltip (#33) will require a composed component with the existing Pie/Donut Visualization plus a legend.

We can look to the existing BarChart component for an example of a simple legend via Recharts.
Recharts Legend General Component API: http://recharts.org/#/en-US/api/Legend