-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
Dashboard empty states #2068
Dashboard empty states #2068
Changes from 8 commits
5a41616
1d49c88
54bee74
49bd9aa
97c3b49
bcdc580
fbe6ea1
4a32f5c
8b13e28
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
import './DashboardItems.scss' | ||
import { Link } from 'lib/components/Link' | ||
import { useActions, useValues } from 'kea' | ||
import { Dropdown, Menu, Tooltip, Alert } from 'antd' | ||
import { Dropdown, Menu, Tooltip, Alert, Button } from 'antd' | ||
import { combineUrl, router } from 'kea-router' | ||
import { deleteWithUndo, Loading } from 'lib/utils' | ||
import React, { useEffect, useState } from 'react' | ||
|
@@ -133,6 +134,11 @@ export function DashboardItem({ | |
{...longPressProps} | ||
data-attr={'dashboard-item-' + index} | ||
> | ||
{item.is_sample && ( | ||
<div className="sample-dasbhoard-overlay"> | ||
<Button onClick={() => router.actions.push(link)}>Configure</Button> | ||
</div> | ||
)} | ||
<div className={`dashboard-item-container ${className}`}> | ||
<div className="dashboard-item-header" style={{ cursor: inSharedMode ? 'auto' : 'move' }}> | ||
<div className="dashboard-item-title"> | ||
|
@@ -149,6 +155,7 @@ export function DashboardItem({ | |
router.actions.push(link) | ||
} | ||
}} | ||
style={{ fontSize: 16, fontWeight: 'bold' }} | ||
paolodamico marked this conversation as resolved.
Show resolved
Hide resolved
|
||
> | ||
{item.name} | ||
</Link> | ||
|
@@ -307,6 +314,10 @@ export function DashboardItem({ | |
</div> | ||
)} | ||
</div> | ||
{item.description && ( | ||
<div style={{ padding: '0 16px', marginBottom: 16, fontSize: 12 }}>{item.description}</div> | ||
)} | ||
|
||
Comment on lines
+317
to
+320
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This really should allow for editing now IMO, as the descriptions will become irrelevant and confusing when the user updates the dashboard item with some other insight than the initial one. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I agree, I've opened #2075 to tackle this as an improvement to be able to get this in before the code freeze in the meantime. |
||
<div className="dashboard-item-content"> | ||
{Element ? ( | ||
<Alert.ErrorBoundary message="Error rendering graph!"> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { useValues } from 'kea' | ||
import { featureFlagLogic } from 'lib/logic/featureFlagLogic' | ||
import React from 'react' | ||
import imgEmptyLineGraph from 'public/empty-line-graph.svg' | ||
import imgEmptyLineGraphDark from 'public/empty-line-graph-dark.svg' | ||
import { QuestionCircleOutlined } from '@ant-design/icons' | ||
|
||
export function LineGraphEmptyState({ color }: { color: string }): JSX.Element { | ||
const { featureFlags } = useValues(featureFlagLogic) | ||
return ( | ||
<> | ||
{!featureFlags['1694-dashboards'] && ( | ||
<p style={{ textAlign: 'center', paddingTop: '4rem' }}> | ||
We couldn't find any matching events. Try changing dates or pick another action or event. | ||
</p> | ||
)} | ||
{featureFlags['1694-dashboards'] && ( | ||
<div className="text-center" style={{ height: '100%' }}> | ||
<img | ||
src={color === 'white' ? imgEmptyLineGraphDark : imgEmptyLineGraph} | ||
alt="" | ||
style={{ maxHeight: '100%', maxWidth: '80%', opacity: 0.5 }} | ||
/> | ||
<div style={{ textAlign: 'center', fontWeight: 'bold', marginTop: 16 }}> | ||
Seems like there's no data to show this graph yet{' '} | ||
<a | ||
target="_blank" | ||
href="https://posthog.com/docs/features/trends" | ||
style={{ color: color === 'white' ? 'rgba(0, 0, 0, 0.85)' : 'white' }} | ||
> | ||
<QuestionCircleOutlined /> | ||
</a> | ||
</div> | ||
</div> | ||
)} | ||
</> | ||
) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's sort of annoying that this Configure overlay just pops in on hover with no warning. I think it should be clear that this needs configuration before attempting to interact + the overlay should be less surprising and intrusive (also, something like a 200ms transition would do a lot here).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yup agreed, just updated, wdyt? the delay would be great, but I prefer to keep this in CSS to simplify