A common number formatting utility needs to written and integrated into the component library. It should take a number and format it to a set of platform wide-specifications. It should support multiple platform-wide presets. This number formatter should be a more restrictive interface that just uses d3-format underneath it.

• Determine rules for a few number presets
• Write the number-formats utility - see comment below for architectural details
• Add unit tests

Original context below:
I think we should create a number formatter to ensure consistent display of numbers across our platform. Originally, I was thinking this would be useful for data visualizations, but I think that it would be useful across the platform. I think that this should be a component or something that lives on the platform and can be updated.

It should take a number and format it to a set of platform wide-specifications. It should support multiple platform-wide presets.

There should be some way to indicate the precision - or number of significant digits.

I'm not sure on the technological architectural details, so if someone has an idea on how this should work, please chime in. There may be a tool that we can use with common presets across our projects.

For a basic data visualization preset, use the following guidelines:

• Commas
  • Always use commas for thousands separator
• Numbers and decimal places
  • Use units that will result in showing a maximum of 6 digits
    • Fewer digits is better
  • Lean towards showing 0-1 decimal places.
    • Should reflect the precision of the data
    • Show whole dollars or dollars and cents (e.g. $123 or $1.23)
  • Examples
    • $7.3 million, not $7,300,000
    • 24%, not 23.79%
    • $535,000
• Show units (e.g. dollar sign, percent)

Thoughts? @DingoEatingFuzz

The budget package works, but infinitely runs tests until it eventually exits node with an error.

I spent too long looking into this.

The infinite test looping is caused by the --watch parameter being passed to mocha. Something, somewhere, is changing that is triggering mocha to rerun tests. Not sure what file is changing, so if anyone wants to look into this, this is where to start.

Also, there is a separate issue:
There is an UnhandledPromiseRejectionWarning being thrown by the request test. This appears to be a mocha issue:
mochajs/mocha#3009

Story Card Request

Project: Housing
Card Title: Change in rental affordability

API Details

Include all API calls that will need to be made, including all params and the possible
values for the params. The more specific the better! This will help prevent back and forth
and ultimately make for a quicker turnaround.

If you do not have an API yet, it can be added later, but it is mandatory before a frontend
developer works on this ticket.

Client-side Calculations

If the data from the API is not pre-calculated, please include all formulas here.
e.g., affordable = rent < monthlyIncome * 0.3

Data Sources

All cards should trace back to their data origins. Include public links to those origins
So card developers can embed the links in the card.

Wireframes

Include a detailed description and/or image that describes your story or visualization using
the data described above. This can be as detailed as a wireframe, or as simple as a description
such as a bar chart that shows variable A on the X-axis and variable B on the Y-axis.

Once you have a wireframe, Include an embedded image of the card design by pasting an image from
your clipboard or using the image uploader tool under this text box. This is mandatory before a
front-end developer works on this ticket.

Also include a link to a Figma design if you have one.

Sounds like folks were having issues with older versions of yarn (I overheard one who had 0.7.2 and was having problems).

The README indicates that we run npm install at the top level, then when we want to work with one of the sub-packages (such as the homelesness project) we just run npm run build.

However, in trying to get npm run build to work in e.g. the homelesness project, eslint is throwing a ton of errors such as:

error  'prop-types' should be listed in the project's dependencies. Run \'npm i -S prop-types\' to add it

When we run npm i -S prop-types at the package level (e.g. /packages/homelesness/) it throws off a ton of "unmet dependency" warnings, such that it appears we need to run npm install at the package level as well before going further.

Does this match others' experience as well? If so, the README should be reformulated. One suggestion is to break it up into two sections (with separate, task-oriented instructions for each): "Do This Before Working With Any Package", then "Do This Before Working With One Specific Package". And if there's a scenario in which someone will be coding at the global level, then provide instructions to that scenario as well.

Alter the build for component lib to output webpack modules so we can import from the package index directly.

Story Card Request

Project: Housing
Card Title: Housing Ranking Component

API Details

tktk

Client-side Calculations

tktk

Data Sources

tktk

Wireframes

tkt

https://www.figma.com/proto/Sx4NhVdMgKdKKjPV6IEWIX7i/Dan-Test-Wireframe

Story Card Request

Project: Housing
Card Title: Median Home Price Median Income Ratio - TBD

API Details

Include all API calls that will need to be made, including all params and the possible
values for the params. The more specific the better! This will help prevent back and forth
and ultimately make for a quicker turnaround.

If you do not have an API yet, it can be added later, but it is mandatory before a frontend
developer works on this ticket.

Client-side Calculations

If the data from the API is not pre-calculated, please include all formulas here.
e.g., affordable = rent < monthlyIncome * 0.3

Data Sources

All cards should trace back to their data origins. Include public links to those origins
So card developers can embed the links in the card.

Wireframes

Include a detailed description and/or image that describes your story or visualization using
the data described above. This can be as detailed as a wireframe, or as simple as a description
such as a bar chart that shows variable A on the X-axis and variable B on the Y-axis.

Once you have a wireframe, Include an embedded image of the card design by pasting an image from
your clipboard or using the image uploader tool under this text box. This is mandatory before a
front-end developer works on this ticket.

Also include a link to a Figma design if you have one.

Our component library needs a data table.

The data table should have the following properties:
Ability to sort
Ability to filter
Show a default number of rows, but able to expand the number of rows
Categories for columns, similar to "STATISTICAL +/-" in the picture below

Should look kind of like this, but follow the style guide:

Civic-Style-Guide-v1.0.pdf

Todo:

• Add any needed dependencies
• Write the DataTable component
• Add unit tests
• Update the DataTable story

Amongst the debug spew emitted during the use of yarn start is this warning:

Deprecated include of L.Mixin.Events: this property will be removed in future releases, please inherit from L.Evented instead. Error
    at checkDeprecatedMixinEvents (/Users/mike/code/HackOregon/civic/node_modules/leaflet/src/core/Class.js:123:47)
    at Function.Class.extend (/Users/mike/code/HackOregon/civic/node_modules/leaflet/src/core/Class.js:51:3)
    at /Users/mike/code/HackOregon/civic/packages/housing/src/externals/leafletPattern.js:14:21
    at Object.<anonymous> (/Users/mike/code/HackOregon/civic/packages/housing/src/externals/leafletPattern.js:10:2)
    at Module._compile (module.js:570:32)
    at loader (/Users/mike/code/HackOregon/civic/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/mike/code/HackOregon/civic/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mike/code/HackOregon/civic/packages/housing/src/components/CrossHatch/leafletCrosshatch.js:2:1)
    at Module._compile (module.js:570:32)
    at loader (/Users/mike/code/HackOregon/civic/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/mike/code/HackOregon/civic/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mike/code/HackOregon/civic/packages/housing/src/components/CrossHatch/CrossHatch.test.js:4:1)
    at Module._compile (module.js:570:32)
    at loader (/Users/mike/code/HackOregon/civic/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/mike/code/HackOregon/civic/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at /Users/mike/code/HackOregon/civic/node_modules/mocha/lib/mocha.js:231:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/mike/code/HackOregon/civic/node_modules/mocha/lib/mocha.js:228:14)
    at Mocha.run (/Users/mike/code/HackOregon/civic/node_modules/mocha/lib/mocha.js:514:10)
    at loadAndRun (/Users/mike/code/HackOregon/civic/node_modules/mocha/bin/_mocha:437:22)
    at rerun (/Users/mike/code/HackOregon/civic/node_modules/mocha/bin/_mocha:465:5)
    at /Users/mike/code/HackOregon/civic/node_modules/mocha/bin/_mocha:473:7
    at StatWatcher.<anonymous> (/Users/mike/code/HackOregon/civic/node_modules/mocha/lib/utils.js:193:9)
    at emitTwo (events.js:106:13)
    at StatWatcher.emit (events.js:191:7)
    at StatWatcher._handle.onchange (fs.js:1501:10)

Repro steps:

cd civic
nvm use
yarn bootstrap
cd packages/housing
yarn start

(I also requested the page in Chrome from http://localhost:3000/, but not sure that's necessary to spawn this warning)

Will we need to create build files for each package (project repo) with one over-arching script to iterate over each one to deploy to aws or will it need to be done at the root level?

Windows support

At current devs who had windows systems couldn't install and run civic successfully. It looked like a dependency issue when yarn build was called but there's also an issue with node management.

possible solutions for node management in windows environments:

https://github.com/coreybutler/nvm-windows

There is a reserved space on our AWS container service for the civic platform deployment.

Since as of 10/22/17 - we're no longer doing server-side rendering, should we host assets and all the app needs on S3?

When performing the initial npm install from the top of the civic repo, the following warning is thrown:

$ npm install
npm WARN prefer global [email protected] should be installed with -g

Story Card Request

Project: Housing
Card Title: Homelessness Counts by Region

API Details

Include all API calls that will need to be made, including all params and the possible
values for the params. The more specific the better! This will help prevent back and forth
and ultimately make for a quicker turnaround.

If you do not have an API yet, it can be added later, but it is mandatory before a frontend
developer works on this ticket.

Client-side Calculations

If the data from the API is not pre-calculated, please include all formulas here.
e.g., affordable = rent < monthlyIncome * 0.3

Data Sources

All cards should trace back to their data origins. Include public links to those origins
So card developers can embed the links in the card.

Wireframes

Include a detailed description and/or image that describes your story or visualization using
the data described above. This can be as detailed as a wireframe, or as simple as a description
such as a bar chart that shows variable A on the X-axis and variable B on the Y-axis.

Once you have a wireframe, Include an embedded image of the card design by pasting an image from
your clipboard or using the image uploader tool under this text box. This is mandatory before a
front-end developer works on this ticket.

Also include a link to a Figma design if you have one.

https://www.figma.com/proto/Sx4NhVdMgKdKKjPV6IEWIX7i/Housing-Card-Wireframes?scaling=contain&node-id=69%3A308

When I browse to the "Hack Oregon Storybook" hyperlink in the readme for this package, it returns a variety of errors:
https://github.com/hackoregon/civic/tree/platform-revamp/packages/component-library

first time I received a "socket" error, subsequent attempts returned a 404.

Link points to https://hackoregon.github.io/civic/

Budget builds but many components and styles are broken

This list is a work in progress, but may be of use for #44 #48 #49 #50 #62

Determine should be passed in props, vs. what should be standardized across our data visualization components.

Props:

• data
• title
• axis labels
• tick labels (non-numerical)
• data labels
• number formatting option (see #67)
• domain for axes

Not props (things that are standardized):

• styling (from common VictoryTheme)
• axes and gridlines
• numerical axis, tick, and tick label spacing and formatting
• bar width
• scatterplot size
• pie slice
• color

Feel free to chime in if you have opinions or ideas.

It appears that - at least for me - when the built budget package is launched, the test suite loops infinitely. I'm seeing the same set of "0 passing", "14 passing" output over and over - no end in sight until I hit Ctrl-C.

Repro

cd packages/budget
npm install
npm run build
npm run start

Expected behaviour:

• the app starts and the terminal stops running commands

Actual behaviour:

• the app starts, it can be accessed in the browser
• the terminal appears to be infinitely looping through the test suite

Emergency response dies when trying to start the dev server:

yarn start v0.27.5
$ npm-run-all --parallel test:watch start:dev
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn babel-node ENOENT
    at exports._errnoException (util.js:1020:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:367:16)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:504:3
error Command failed with exit code 1.
ERROR: "start:dev" exited with 1.
error Command failed with exit code 1.

When performing the initial npm install from the top of the civic repo, the following warning is thrown:

$ npm install
npm WARN deprecated [email protected]: Use uuid module instead

Per @MikeTheCanuck, the emergency response project is causing errors when you start the project using yarn start. May be related to the dev-dependency issues discussed in closed PR #20.

Story Card Request

Project: Transportation
Card Title: The End of Free Transit

Description / Wireframe

Portland once had free transit throughout downtown, the legendary "Fareless Square." But that all ended [when?], during the massive re-working of Trimet's fare structure that removed zones and switches to a flat rate ticket.

What was the impact of this policy change?

Visualization ideas:

• map with graduated icons or hex-bin, showing change in ridership before vs after.
• line chart with all lines as individual series, focusing on change in ridership before vs. after

Include a detailed description and/or image that describes your story or visualization using
the data described above. This can be as detailed as a wireframe, or as simple as a description
such as a bar chart that shows variable A on the X-axis and variable B on the Y-axis.

If you have a wireframe, include an embedded image of the card design by pasting an image from
your clipboard or using the image uploader tool under this text box. This is mandatory before a
front-end developer works on this ticket.

Also include a link to a Figma design if you have one.

Context

TBD

Why is this important? This information will be used to prioritize and contextualize story cards.

Data Details (APIs)

Trimet Ridership Census

Include all API calls that will need to be made, including all params and the possible
values for the params. The more specific the better! This will help prevent back and forth
and ultimately make for a quicker turnaround.

If you do not have an API yet, it can be added later, but it is mandatory before a frontend
developer works on this ticket.

Client-side Calculations

If the data from the API is not pre-calculated, please include all formulas here.
e.g., affordable = rent < monthlyIncome * 0.3

Data Sources

All cards should trace back to their data origins. Include public links to those origins.
In addition, any calculations on the source data should be described.

Story Card Request

Project: Transportation Systems
Card Title: What Kind of Network is Trimet (alt The Shape of the Trimet Network)

Description / Wireframe

A network graph showing transit stops as nodes and vehicle trips from one stop to another as edges. This could be colored by type (max, frequent service, non-frequent service), by neighborhood, by equity index, etc. Edge weights could include number of trips, number of people, total delay time, geographic distance, etc.

Standard network summary statistics using OSMnx could be provided and used to describe the "character" of the network relationships. Example - centrality, betweenness, loops...

Include a detailed description and/or image that describes your story or visualization using
the data described above. This can be as detailed as a wireframe, or as simple as a description
such as a bar chart that shows variable A on the X-axis and variable B on the Y-axis.

If you have a wireframe, include an embedded image of the card design by pasting an image from
your clipboard or using the image uploader tool under this text box. This is mandatory before a
front-end developer works on this ticket.

Also include a link to a Figma design if you have one.

Context

The design and shape of a transit network is an important part of understanding how it serves users, and what type of service has been prioritized. Hub and spoke vs. grid networks, backbone service vs. expansive coverage, etc.

The network graph format enables a discussion of the connections between places and travel patterns that is not necessarily geographically-bounded.

Why is this important? This information will be used to prioritize and contextualize story cards.

Data Details (APIs)

Trimet congestion with number of passengers.

Include all API calls that will need to be made, including all params and the possible
values for the params. The more specific the better! This will help prevent back and forth
and ultimately make for a quicker turnaround.

If you do not have an API yet, it can be added later, but it is mandatory before a frontend
developer works on this ticket.

Client-side Calculations

If the data from the API is not pre-calculated, please include all formulas here.
e.g., affordable = rent < monthlyIncome * 0.3

Data Sources

All cards should trace back to their data origins. Include public links to those origins.
In addition, any calculations on the source data should be described.

We are moving from Recharts to VictoryCharts.

The existing BarChart component needs to be converted to the VictoryCharts equivalent: https://formidable.com/open-source/victory/docs/victory-bar/

The purpose of having our components wrap VictoryCharts is to prescribe stylistic choices, such as colors, line weight, spacing, etc.

Todo:

• Add VictoryCharts as a dependency
• Rewrite the BarChart component
• Add unit tests
• Update the BarChart story

The basic bar chart should look like this, and have all of the components shown in this chart.

Shown with common tooltip component:

Generally, I'm expecting that the color and font styling will be inherited from a common VictoryTheme, so don't worry about the color and font for this issue.

In addition to what is shown, BarChart should have the following features:

• Accessibility description
• Responsive

Need to develop a plan and standard to route to project pages and components/cards.

Need a unique link to specific "card"/component when a user clicks the share button.

Should the routing pattern be something like:
civicpdx.org/homlessness/unsheltered
civicpdx.org/emergency-response/response-time

We are moving from leaflet to using mapbox, react-map-gl and deck.gl

This map will be the basic map for our visualization to be built on.
MORE DETAILS ON MAP TILES, DEFAULTS, ETC

Todo:

• Add necessary dependencies
• Write the ReactMap component
• Add unit tests
• Update the ReactMap story

Per Michael's final comment on #37:

Looks like running yarn build for the component-library package should have worked, but babel wasn't found:

yarn run v1.3.2
$ BABEL_ENV=esm npm run build:esm && BABEL_ENV=cjs npm run build:cjs

> @hackoregon/[email protected] build:esm /Users/mike/code/trash-repos/civic/packages/component-library
> babel src --out-dir es --copy-files --no-comments

sh: babel: command not found

What we do in other packages is use npx babel-cli <command> and include babel-cli as a dev dependency so npx doesn't fetch the package every time.

It must work from the root because babel is accessible from that context.

Story Card Request

Project: Transportation
Card Title: How has ridership changed throughout Tri-Met's service area over time?

Description / Wireframe

Data Details (APIs)

• see above, from ridership API

About this data

How did we calculate this

• TBD

See the source

• TBD

When performing the initial npm install from the top of the civic repo, the following warning is thrown:

$ npm install
npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! 

A common tooltip component needs to be written to integrate with our barchart (#44), scatterplot (#49), line chart (#48), and pie / doughnut chart (#50)

https://formidable.com/open-source/victory/guides/tooltips/

The tooltip should highlight the selected data point and show more detailed information.
Examples:

Todo:
Add VictoryCharts as a dependency
Write the VictoryTooltip component
Add unit tests
Update the VictoryTooltip story

How to work on individual packages within the monorepo?

After npm install has completed the lerna bootstrap command, the following warning is displayed after the large tree of dependencies is displayed:

> lerna bootstrap

lerna info version 2.5.1
lerna info Bootstrapping 9 packages
lerna info lifecycle preinstall
lerna info Installing external dependencies
lerna info hoist Installing hoisted dependencies into root
lerna info hoist Pruning hoisted dependencies
lerna info hoist Finished pruning hoisted dependencies
lerna info hoist Finished installing in root
lerna info Symlinking packages and binaries
lerna info lifecycle postinstall
lerna info lifecycle prepublish
lerna info lifecycle prepare
lerna success Bootstrapped 9 packages
civic@ /Users/mike/code/HackOregon/civic
├─┬ @hackoregon/[email protected] 
.
.
.
npm WARN [email protected] requires a peer of postcss@^6.0.0 but none was installed.

Per Michael's final comment on #37:

Just bare in mind that under working conditions, running yarn build from the component-library package should work. Potentially yarn build should also be incorporated in yarn bootstrap... We should also be striving for simplicity of setup. ...Once we work all the kinks out, we should make sure to update the README.

We should create a common VictoryTheme for our data visualization components to match this style:

@danieltomasku

We are moving from Recharts to VictoryCharts. See also issue #44.

The existing ScatterPlot component needs to be converted to the VictoryCharts equivalent: https://formidable.com/open-source/victory/docs/victory-bar/

The purpose of having our components wrap VictoryCharts is to prescribe stylistic choices, such as colors, line weight, spacing, etc.

Todo:

• Add VictoryCharts as a dependency
• Rewrite the ScatterPlot component
• Add unit tests
• Update the ScatterPlot story

The basic scatterplot should look like this, and have all of the components shown in this chart.

Generally, I'm expecting that the color and font styling will be inherited from a common VictoryTheme, so don't worry about the color and font for this issue.

In addition to what is shown, Scatterplot should have the following features:

• Accessibility description
• Responsive

Homelessness builds but does not properly render the components (no data?)

We are moving from Recharts to VictoryCharts. See also issue #44.

The existing LineChart component needs to be converted to the VictoryCharts equivalent: https://formidable.com/open-source/victory/docs/victory-bar/

The purpose of having our components wrap VictoryCharts is to prescribe stylistic choices, such as colors, line weight, spacing, etc.

Todo:

• Add VictoryCharts as a dependency
• Rewrite the LineChart component
• Add unit tests
• Update the LineChart story

The basic line chart should look like this, and have all of the components shown in this chart.

Shown with common tooltip component:

Generally, I'm expecting that the color and font styling will be inherited from a common VictoryTheme, so don't worry about the color and font for this issue.

In addition to what is shown, BarChart should have the following features:

• Accessibility description
• Responsive

Story Card Request

Transportation:
Trimet Congestion Dashboard:

API Details!

From the Trimet Congestion Data, not on an API
use the init_cyclic-moving data
variables required:
-vehicle
-time of day
-gps location
lookup which route the vehicle was serving from the init_tripsh

Client-side Calculations

Need to calculate vehicle speed per segment
Need to rank vehicle speeds into color codes

Data Sources

init_cyclic
init_tripsh

Wireframes

I would like a geographical map, that shows all the bus routes that is colored by travel speed, that I can scroll throughout the time of day. Could show 1 day, or showing an average of a larger timeframe like a week or a month, weekdays, weekends.

Link to photo example: https://docs.google.com/presentation/d/1QJ5SfxQwRlPaHuzACUmBwOEiuwwTC1P24jDz4SmKxms/edit?usp=sharing Slide 14 and 15 of the slidedeck.

A tool like Google Analytics will help us understand our overall traffic numbers as well as details on traffic patterns and behavioral patterns.

Which tool to use is an open question. Google Analytics is the de facto free standard, but there's something to be said about handing this data over to a third party as well as collecting more data than we're using just because we can.

Original

Would like to add google analytics and get help with seo so that we can track civic usage for reporting and be able to show up in search engines quickly.

We are moving from Recharts to VictoryCharts. See also issue #44.

The existing pie chart component needs to be converted to the VictoryCharts equivalent: https://formidable.com/open-source/victory/docs/victory-bar/

The purpose of having our components wrap VictoryCharts is to prescribe stylistic choices, such as colors, line weight, spacing, etc.

Our existing pie component was used in:
http://housing.civicpdx.org
http://emergency-response.civicpdx.org

The pie chart component in VictoryCharts should replicate the functionality of these components.

Todo:

• Add VictoryCharts as a dependency
• Rewrite the Pie component
• Add unit tests
• Update the Pie story
• Review all packages that already use the Pie component for regressions

The basic pie chart should look like:

Generally, I'm expecting that the color and font styling will be inherited from a common VictoryTheme, so don't worry about the color and font for this issue.

In addition to what is shown, the pie chart should have the following features:

• Accessibility description
• Responsive

At the end of the npm install sequence, the following two warnings are displayed:

npm WARN civic@ No repository field.
npm WARN civic@ No license field.

When performing the initial npm install from the top of the civic repo, the following warning is thrown when the script runs lerna bootstrap:

> lerna bootstrap

lerna info version 2.5.1
lerna info Bootstrapping 9 packages
lerna info lifecycle preinstall
lerna WARN EHOIST_PKG_VERSION "@hackoregon/civic-homelessness" package depends on recharts@^0.20.1, which differs from the hoisted recharts@^0.22.1.

Story Card Request

Project: Housing
Card Title: Change in Home Prices 2000-2016

API Details

Include all API calls that will need to be made, including all params and the possible
values for the params. The more specific the better! This will help prevent back and forth
and ultimately make for a quicker turnaround.

If you do not have an API yet, it can be added later, but it is mandatory before a frontend
developer works on this ticket.

Client-side Calculations

If the data from the API is not pre-calculated, please include all formulas here.
e.g., affordable = rent < monthlyIncome * 0.3

Data Sources

All cards should trace back to their data origins. Include public links to those origins
So card developers can embed the links in the card.

Wireframes

Include a detailed description and/or image that describes your story or visualization using
the data described above. This can be as detailed as a wireframe, or as simple as a description
such as a bar chart that shows variable A on the X-axis and variable B on the Y-axis.

Once you have a wireframe, Include an embedded image of the card design by pasting an image from
your clipboard or using the image uploader tool under this text box. This is mandatory before a
front-end developer works on this ticket.

Also include a link to a Figma design if you have one.

https://www.figma.com/proto/Sx4NhVdMgKdKKjPV6IEWIX7i/Housing-Card-Wireframes?scaling=contain&node-id=69%3A196

Given we hope to continue to support this code in the future AND
Given that future support will depend on newly-onboarded volunteers with no tribal knowledge of this monorepo's contents
We need clear documentation of the purpose and intended production usage of each Package in the repo.

e.g. package "budget" is the front-end web application for the 2017 season's Budget project (http://budget.civicpdx.org/)

Q: what purpose do "civic-babel-presets", "civic-logger", "civic-scripts", "component-library", "platform", "webpacker" each serve? And are they still actively necessary to support either http://civicpdx.org/ or any of the 2017 project sites?

Story Card Request

Project: Housing
Card Title: Housing Policy Inventory

API Details

Include all API calls that will need to be made, including all params and the possible
values for the params. The more specific the better! This will help prevent back and forth
and ultimately make for a quicker turnaround.

If you do not have an API yet, it can be added later, but it is mandatory before a frontend
developer works on this ticket.

Client-side Calculations

If the data from the API is not pre-calculated, please include all formulas here.
e.g., affordable = rent < monthlyIncome * 0.3

Data Sources

All cards should trace back to their data origins. Include public links to those origins
So card developers can embed the links in the card.

Wireframes

Include a detailed description and/or image that describes your story or visualization using
the data described above. This can be as detailed as a wireframe, or as simple as a description
such as a bar chart that shows variable A on the X-axis and variable B on the Y-axis.

Once you have a wireframe, Include an embedded image of the card design by pasting an image from
your clipboard or using the image uploader tool under this text box. This is mandatory before a
front-end developer works on this ticket.

Also include a link to a Figma design if you have one.

See #5

How to properly set up individual packages with civic webpacker/platform?

When performing the initial npm install from the top of the civic repo, the following warning is thrown:

$ npm install
npm WARN deprecated [email protected]: babili has been renamed to babel-minify. Please update to babel-preset-minify

There are now six similar ERROR conditions when running yarn start in the homelesness package (details below).

Repro steps

cd civic
git checkout master
git pull
nvm use
yarn bootstrap
cd packages/homelesness
yarn start

Tail end of console output from this sequence:

ERROR in ./src/components/Definition/index.js
Module not found: Error: Can't resolve '@hackoregon/component-library' in '/Users/mike/code/HackOregon/civic/packages/homelesness/src/components/Definition'
 @ ./src/components/Definition/index.js 19:24-64
 @ ./src/components/CardCollection/index.js
 @ ./src/index.js
 @ ./src/client.dev.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true leaflet ./src/client.dev

ERROR in ./src/components/Migration/index.js
Module not found: Error: Can't resolve '@hackoregon/component-library' in '/Users/mike/code/HackOregon/civic/packages/homelesness/src/components/Migration'
 @ ./src/components/Migration/index.js 19:24-64
 @ ./src/components/CardCollection/index.js
 @ ./src/index.js
 @ ./src/client.dev.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true leaflet ./src/client.dev

ERROR in ./src/components/HomelessPopulation/index.js
Module not found: Error: Can't resolve '@hackoregon/component-library' in '/Users/mike/code/HackOregon/civic/packages/homelesness/src/components/HomelessPopulation'
 @ ./src/components/HomelessPopulation/index.js 24:24-64
 @ ./src/components/CardCollection/index.js
 @ ./src/index.js
 @ ./src/client.dev.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true leaflet ./src/client.dev

ERROR in ./src/components/UnaccompaniedYouth/index.js
Module not found: Error: Can't resolve '@hackoregon/component-library' in '/Users/mike/code/HackOregon/civic/packages/homelesness/src/components/UnaccompaniedYouth'
 @ ./src/components/UnaccompaniedYouth/index.js 11:24-64
 @ ./src/components/CardCollection/index.js
 @ ./src/index.js
 @ ./src/client.dev.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true leaflet ./src/client.dev

ERROR in ./src/components/Women/index.js
Module not found: Error: Can't resolve '@hackoregon/component-library' in '/Users/mike/code/HackOregon/civic/packages/homelesness/src/components/Women'
 @ ./src/components/Women/index.js 18:24-64
 @ ./src/components/CardCollection/index.js
 @ ./src/index.js
 @ ./src/client.dev.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true leaflet ./src/client.dev

ERROR in ./src/components/Services211/index.js
Module not found: Error: Can't resolve '@hackoregon/component-library' in '/Users/mike/code/HackOregon/civic/packages/homelesness/src/components/Services211'
 @ ./src/components/Services211/index.js 19:24-64
 @ ./src/components/CardCollection/index.js
 @ ./src/index.js
 @ ./src/client.dev.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true leaflet ./src/client.dev