left bar filters - color code [low priority] #28
Milestone
Comments
yochannah
changed the title
AdrianBZG
added a commit
that referenced
this issue
Feb 4, 2019
AdrianBZG
pushed a commit
that referenced
this issue
Sep 3, 2020
## What I did I display the gene lengths in a pie and bar chart. The mathematical logic was lifted straight out from the v1 app. The chart section is now predominantly mobile responsive, with some minor edge cases that will need ironing out. Some minor restyling was required: - I didn't use the pie chart label ticks because it was overcrowding the screen. It also did not work well with responsiveness. - I added a brush to the bar graph. This will help when the graph displays many buckets, or the screen is mobile sized. Squashed commits: * Prepare workspace for ch story 434 * Install victory charting library * Render pie chart from query summary * Use color blind friendly color palette * Install nivo charting library * Style Pie Chart * Place pie chart svgs to the left of the page * Add a label below the Pie chart * Install and set up refactor to Chartjs * Render pie chart using chartjs * Place pie chart in its correct location * Add colors to pie chart * Add patterns to pie chart colors * Add patterns to pie chart colors * Set font color manually since it won't accept css vars * Set wrapper around PieChart story * Uninstall unused packages * Remove unused props from PieChart * Rename file * Render Bar chart * Remove Y axis labels * Style Title and Subtitle * Fix wrong name for component * Place pie and bar chart in their section * Hack the Charts in place just for now * Install recharts * Render Donut using recharts * Display a tooltip when hovering over pie slices * Add colors to Pie chart slices * Display a label for the Pie chart * Add gene length count to Pie Chart legend * Readjust cy coordinate of PieChart * Format tooltip label text * Make PieChart container mobile responsive * Prep space for Bar chart story * Render Bar chart using recharts * Display cartesian grid for y axis only * Display x axis ticks * Display bar chart with colors * Style Bar chart tick text * Display stats below bar chart * Display a tooltip when hovering over bar chart * Drill down into bar charts using a brush * Make BarChart responsive * Make the charts responsive within the chart section * Uninstall unused packages
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
lower priority - can we color-code the left filter sidebar, perhaps with a thick left border, the same as the pie chart segments for consistency?
E.g. in the screenshot below, H. sapiens could have an orange left-border, and D. melanogaster would have purple:
If this is very time consuming then leave it for later, but if it's a quick addition it would be nice.
The text was updated successfully, but these errors were encountered: