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

Resize dashboard items #746

Merged
merged 11 commits into from
May 13, 2020
Merged

Resize dashboard items #746

merged 11 commits into from
May 13, 2020

Conversation

mariusandra
Copy link
Collaborator

Changes

Fixes #704. I did use react-grid-layout in the end. This 20kb of gzipped (80kb minified) JS that's used on an internal dashboard page doesn't break the bank, as the minified payload is already about 1MB.

screencast 2020-05-12 12-48-55

With this change, there are 4 layouts, which each can have items rearranged independently: Mobile, Tablet, Desktop, TV (HD resolution).

Please test and see if it works as you think it should.

There's just one bug that I didn't manage to fix yet: when you drag from the title (link), it visits the link after dragging. I'll try to get this fix in as well very soon.

Checklist

  • All querysets/queries filter by Team (if applicable)
  • Backend tests (if applicable)

@mariusandra mariusandra requested a review from timgl May 12, 2020 10:53
@mariusandra mariusandra changed the title 704 resize dashboard items Resize dashboard items May 12, 2020
@timgl timgl temporarily deployed to posthog-704-resize-dash-kpjhqd May 12, 2020 10:54 Inactive
Copy link
Collaborator

@timgl timgl left a comment

Choose a reason for hiding this comment

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

Works great! PS when can I have the colourpicker ;-)

@timgl timgl temporarily deployed to posthog-704-resize-dash-kpjhqd May 12, 2020 15:58 Inactive
@timgl timgl temporarily deployed to posthog-704-resize-dash-kpjhqd May 12, 2020 16:05 Inactive
@mariusandra
Copy link
Collaborator Author

And we have colors!

image

Right now only three: blue, green, purple. Unfortunately with colored backgrounds, we can't really use the default graph colors, so I just added different tones of the background color. I don't know if the end result very aesthetically pleasing or not, but I did my best not to have anything clash horribly.

@timgl
Copy link
Collaborator

timgl commented May 13, 2020

Looks great

@timgl timgl merged commit bc7eabc into master May 13, 2020
@timgl timgl deleted the 704-resize-dashboard-items branch May 13, 2020 10:14
fuziontech added a commit to fuziontech/posthog that referenced this pull request May 14, 2020
* upstream/master:
  Updated Funnels to use antd (PostHog#751)
  Release 1.5.0 (PostHog#762)
  Speed up action/people by prefetching distinct_ids (PostHog#736)
  Fix all time no results (PostHog#725)
  add breakpoint (PostHog#754)
  Add ES Lint (PostHog#719)
  Resize dashboard items (PostHog#746)
  added conditions (PostHog#748)
  fixed undo bug (PostHog#750)
  Event Partitioning (PostHog#733)
  Closes PostHog#714 allow multiple filters with same key (PostHog#738)
  Fix Error404 (PostHog#744)
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.

Order and size DashboardItems
2 participants