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.

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

Add bar chart to IHME-UI #171

Merged
merged 162 commits into from
Mar 14, 2019
Merged

Add bar chart to IHME-UI #171

merged 162 commits into from
Mar 14, 2019

Conversation

kbeame
Copy link
Collaborator

@kbeame kbeame commented Sep 13, 2018

Apologies for the large pull request.
This pull-request includes the all of the work that Bao did last summer and my updates based on Gabe and Aaron's initial comments on Bao's work. It also includes the update to React 16 necessary to bring it up to date. It also includes my more recent work to make a composition component that is more flexible than how Bao had his set up.
'Stacked' can be anything from a regular bar-chart to a grouped multi bar-chart to a stacked multi bar-chart. Ideally this one component will be able to handle most options one might need, it just depends on how the data is structured.

@kbeame kbeame changed the base branch from feature/bar-chart to master September 13, 2018 18:38
@kbeame kbeame changed the title Updated Stacked composition to allow for just using this component for all options of bars Add bar chart it IHME-UI Sep 13, 2018
@kbeame kbeame changed the title Add bar chart it IHME-UI Add bar chart to IHME-UI Sep 13, 2018
Copy link

@Ryshackleton Ryshackleton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks really good Kat, and I'm excited to try this out in some projects! Thanks for making the effort to get this done.

Most of my comments are re formatting and documentation, but there are a few that relate to things now showing up (legends in the demos) and one typo that could cause problems. Let me know if you have any questions. Good work!

src/ui/bar/demo/app.jsx Outdated Show resolved Hide resolved
src/ui/bar/demo/app.jsx Outdated Show resolved Hide resolved
src/ui/bar/README.md Outdated Show resolved Hide resolved
src/ui/bar/README.md Outdated Show resolved Hide resolved
src/ui/bar/src/bar.jsx Outdated Show resolved Hide resolved
src/utils/bar.js Outdated Show resolved Hide resolved
src/utils/bar.js Outdated Show resolved Hide resolved
src/ui/compositions/stacked/src/stacked.jsx Outdated Show resolved Hide resolved
src/ui/compositions/stacked/demo/app.jsx Outdated Show resolved Hide resolved
src/ui/compositions/stacked/demo/app.jsx Outdated Show resolved Hide resolved
src/ui/bar/demo/app.jsx Outdated Show resolved Hide resolved
src/ui/bar/src/bar.jsx Show resolved Hide resolved
@codecov-io
Copy link

codecov-io commented Sep 21, 2018

Codecov Report

Merging #171 into master will decrease coverage by 2.44%.
The diff coverage is 94.6%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #171      +/-   ##
==========================================
- Coverage   89.17%   86.73%   -2.45%     
==========================================
  Files          74       93      +19     
  Lines        2107     2615     +508     
  Branches      405      510     +105     
==========================================
+ Hits         1879     2268     +389     
- Misses        225      342     +117     
- Partials        3        5       +2
Impacted Files Coverage Δ
src/ui/choropleth/src/feature-layer.jsx 100% <ø> (ø) ⬆️
src/ui/shape/src/scatter.jsx 97.82% <ø> (ø) ⬆️
src/ui/axis/src/axis.jsx 91.8% <ø> (ø) ⬆️
src/ui/tooltip/src/tooltip.jsx 100% <ø> (ø) ⬆️
src/ui/select/src/select-option-label.jsx 80.95% <ø> (ø) ⬆️
src/utils/domain.js 100% <ø> (ø) ⬆️
src/ui/legend/src/legend.jsx 100% <ø> (ø) ⬆️
src/ui/bar/src/stacked-bars.jsx 100% <100%> (ø)
src/ui/bar/index.js 100% <100%> (ø)
src/ui/compositions/choropleth-legend/index.js 100% <100%> (ø) ⬆️
... and 33 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0b8a123...3426e6f. Read the comment docs.

src/ui/bar/README.md Outdated Show resolved Hide resolved
src/ui/bar/src/bar.jsx Outdated Show resolved Hide resolved
src/ui/bar/test/bar.test.js Outdated Show resolved Hide resolved
src/ui/bar/test/bar.test.js Outdated Show resolved Hide resolved
src/ui/bar/test/bar.test.js Outdated Show resolved Hide resolved
src/ui/compositions/stacked/test/stacked.test.js Outdated Show resolved Hide resolved
src/ui/compositions/stacked/test/stacked.test.js Outdated Show resolved Hide resolved
src/ui/compositions/stacked/test/stacked.test.js Outdated Show resolved Hide resolved
src/utils/bar.js Outdated Show resolved Hide resolved
src/utils/bar.js Outdated Show resolved Hide resolved
src/ui/bar/demo/app.jsx Outdated Show resolved Hide resolved
src/ui/bar/demo/index.html Outdated Show resolved Hide resolved
src/ui/bar/src/bars.jsx Outdated Show resolved Hide resolved
src/ui/bar/src/bars.jsx Outdated Show resolved Hide resolved
src/ui/bar/src/multi-bars.jsx Outdated Show resolved Hide resolved
src/ui/compositions/stacked/src/stacked.jsx Outdated Show resolved Hide resolved
src/utils/bar.js Outdated Show resolved Hide resolved
src/utils/bar.js Outdated Show resolved Hide resolved
src/utils/bar.js Outdated Show resolved Hide resolved
src/utils/bar.js Outdated Show resolved Hide resolved
@davschne davschne force-pushed the make-one-barchart-to-rule-them-all branch from 6170173 to e314877 Compare February 25, 2019 22:36
@davschne
Copy link
Contributor

I've refactored the bar-chart components in this PR. The biggest changes are:

  • reorganization of components: Instead of Bars and MultiBars (with stacking/grouping logic spread between the two), we now have Bars, GroupedBars, and StackedBars. Bars is only for normal bar charts (i.e. a single bar for each category). StackedBars and GroupedBars are essentially peers of Bars. They're responsible for stacking and grouping logic respectively. The "composition" component StackedBarChart has been renamed to BarChart, since it can make any of the three types of bar chart.
  • simplified component APIs: Each of these components now expects a flat array for prop data, each element of which will be passed to a Bar. The elements in data can be basically any object, as long as it's possible to obtain the category and value (and subcategory, for stacked and grouped bars) using the eponymous dataAccessors.

@davschne davschne force-pushed the make-one-barchart-to-rule-them-all branch from 393f8fd to 94b792f Compare March 12, 2019 22:01
David Schneider added 25 commits March 14, 2019 12:40
It's a default export, not a named export.
The build:all script was removing output directories, but the individual build scripts ('commonjs', 'es', 'umd') did not.
There's no 'legend-wrapper' class defined in the corresponding style.css, so I can't see a purpose for this div.
This will allow navigation in code editors. It should preserve the existing functionality on GitHub.
There's no need to form a separate data structure for the legend items. We can just use the subcategory names, then supply accessors to translate these names to the appropriate values.
Putting a ResponsiveContainer inside this component is problematic. If a consumer of the component doesn't apply styles correctly, either to the containing element or via style props, the component is likely to render with height and/or width of 0, making the chart invisible. The revised interface requires specifying the chart dimensions (with defaults applied if not specified). While this approach offers a bit less flexibility, I think it makes the sizing easier to understand and consumption of the component far less error-prone.
- Adding Bao Dinh
- Adding everyone's GitHub profile URLs
@davschne davschne force-pushed the make-one-barchart-to-rule-them-all branch from 3426e6f to 4383d68 Compare March 14, 2019 19:49
David Schneider added 2 commits March 14, 2019 13:03
- "preversion" now begins with "npm install." Since we're bundling some dependencies in the UMD build, we want to make sure the packages actually installed in node_modules are up to date with the specified dependencies in package.json and package-lock.json.
- "postversion" now explicitly specifies the URL of the GitHub repo. This should make the script work even if some assumptions (like having a Git remote set up or having a local branch tracking the remote "master") aren't satisfied.
react-dom is not actually a runtime dependency.
@davschne davschne merged commit bff08c8 into master Mar 14, 2019
@davschne davschne deleted the make-one-barchart-to-rule-them-all branch March 14, 2019 21:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants