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

Apex charts #817

Merged
merged 33 commits into from
Nov 9, 2020
Merged

Apex charts #817

merged 33 commits into from
Nov 9, 2020

Conversation

aptkingston
Copy link
Member

Apex charts have arrived!

This PR adds a selection of configurable chart components, courtesy of Apex Charts. There are bar, line, pie, donut and candlestick charts, as well as subsets of all of these (stacked / multiple data series). Charts require a data source which can be a table, view or even a relationship.

This is still a WIP and I'd appreciate any testing. The more types of data we test, the more bugs we'll be able to fix. There's also a few things we need to decide, such as how large we want to cap data sets when displaying them (apex charts does not have great performance so we're going to have to limit data sets in the worst case to a few hundred values).

pr1

Features
All charts have quite a few configurable settings, all set to sensible defaults. There are some options which are unique to each type of chart.

  • Animations for all charts
  • X and Y axis labels
  • Graph titles
  • Formatting of Y axis (thousands, millions)
  • Support for time series data
  • Configurable curves
  • On-chart data labels
  • Legends
  • Super robust (hopefully no more crashes when using charts no matter how hard you try to break it)
  • Multiple data series for most charts
    multiple series

Relationships
Charts can use a relationship column as a data source. Here's an example displaying a single users expenditure, based on the sale records linked to a particular user on their details page.

pr2

@aptkingston aptkingston self-assigned this Nov 4, 2020
@aptkingston aptkingston marked this pull request as draft November 4, 2020 15:57
@aptkingston aptkingston changed the title Apex charts WIP: Apex charts Nov 4, 2020
@joebudi
Copy link
Contributor

joebudi commented Nov 4, 2020

So much beauty in one PR! From a UI perspective, it looks beautiful.

Copy link
Member

@shogunpurple shogunpurple left a comment

Choose a reason for hiding this comment

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

Looking good so far! Great work 👌

@aptkingston
Copy link
Member Author

Could do with some opinions on colours. Because all charts support multiple colours we can't really let users pick each individual colour, so I think we have 3 options:

  • Use default apex chart colours
  • We pick a sensible set of colours different from apex charts default and they can't be changed
  • We pick a few different colour palettes and users can pick between them (I'm thinking we use something like the gradient names and associated colours from certain gradients). It might be hard to do this because there needs to be a balance of enough contrast within each palette, but enough differences between each palette

Any thoughts?

@joebudi
Copy link
Contributor

joebudi commented Nov 5, 2020

@aptkingston How many palettes does Apex provide? It would be good to see them. Charts are usually more tint-focused than gradient if that makes sense. Happy to Budi up with this.

@aptkingston
Copy link
Member Author

Didn't realise apex actually has palettes built in so that makes life much easier! I've added the 10 palette options they provide and here they are:
palette

@aptkingston aptkingston changed the title WIP: Apex charts Apex charts Nov 5, 2020
@aptkingston aptkingston marked this pull request as ready for review November 5, 2020 20:19
@mike12345567
Copy link
Collaborator

mike12345567 commented Nov 6, 2020

This looks incredible, love it so much! 🔥

@aptkingston aptkingston merged commit 65b3667 into master Nov 9, 2020
@aptkingston aptkingston deleted the apex-charts branch November 9, 2020 08:48
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.

4 participants