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

feat(insights): add area chart (closes #7372) #12869

Merged
merged 9 commits into from Nov 24, 2022
Merged

feat(insights): add area chart (closes #7372) #12869

merged 9 commits into from Nov 24, 2022

Conversation

thmsobrmlr
Copy link
Contributor

@thmsobrmlr thmsobrmlr commented Nov 18, 2022

Problem

Users have been asking for an area chart. The main use case for this when you want to see the composition of a metric, while also having the total value as reference e.g. breakdown of revenue by customer over time.

Changes

  • Added the area chart
    • Refactored the <LineChart /> component to use line segments instead of splitting the data into two parts for incomplete data
    • Added storybook stories for it
    • Re-created the pinstripe pattern we're using for funnels with canvas api

Screenshot 2022-11-24 at 00 34 53

How did you test this code?

  • Tested various edge cases e.g. values below 0

@posthog-bot
Copy link
Contributor

Hey @thmsobrmlr! 👋
This pull request seems to contain no description. Please add useful context, rationale, and/or any other information that will help make sense of this change now and in the distant Mars-based future.

@thmsobrmlr thmsobrmlr force-pushed the area-charts branch 2 times, most recently from 8866b4d to b94b61d Compare November 22, 2022 10:28
@thmsobrmlr thmsobrmlr changed the title feat(insights): add area chart feat(insights): add area chart (closes #7372) Nov 24, 2022
@thmsobrmlr thmsobrmlr marked this pull request as ready for review November 24, 2022 00:38
Copy link
Collaborator

@mariusandra mariusandra left a comment

Choose a reason for hiding this comment

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

Looks very nice!

frontend/src/scenes/insights/InsightDisplayConfig.tsx Outdated Show resolved Hide resolved
@mariusandra mariusandra added the release-1.42.0 To be cherry-picked into `release-1.42.0` label Nov 24, 2022
@thmsobrmlr thmsobrmlr merged commit eaba0bd into master Nov 24, 2022
@thmsobrmlr thmsobrmlr deleted the area-charts branch November 24, 2022 11:17
@neilkakkar neilkakkar removed the release-1.42.0 To be cherry-picked into `release-1.42.0` label Nov 28, 2022
@neilkakkar
Copy link
Collaborator

picked!

neilkakkar pushed a commit that referenced this pull request Nov 30, 2022
* add area chart display type

* refactor(line-graph): use chartjs scriptable to dash lines for incomplete data

* add initial implementation of stacked area chart

* implement missing data for area charts

* fix icon

* add storybook examples

* disable compare to previous for area charts

* improve comments

* refactor show compare filter
@pauldambra pauldambra added the highlight ⭐ Release highlight label Dec 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
highlight ⭐ Release highlight
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants