jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fix card creator visibility in grid, fix table exporter visiblility in grid

Browse source
This commit is contained in:
nick-delirium 2024-12-27 14:12:41 +01:00
parent 592ae5ac4d
commit 16d75a6a1b
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
4 changed files with 75 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx
View file

@ -213,7 +213,7 @@ function CategoryTab({ tab, inCards }: { tab: string; inCards?: boolean }) {
}
const AddCardSection = observer(
({ inCards }: { inCards?: boolean }) => {
({ inCards, handleOpenChange }: { inCards?: boolean, handleOpenChange?: (isOpen: boolean) => void }) => {
const { showModal } = useModal();
const { metricStore, dashboardStore, projectsStore } = useStore();
const [tab, setTab] = React.useState('product_analytics');
@ -238,6 +238,7 @@ const AddCardSection = observer(
},
}
);
handleOpenChange?.(false);
};
return (
<div

82
frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
View file

@ -37,35 +37,14 @@ function DashboardWidgetGrid(props: Props) {
id={props.id}
>
{list?.map((item: any, index: any) => (
<div
<GridItem
key={item.widgetId}
className={cn('col-span-' + item.config.col, 'group relative pl-6 pr-4 py-4 hover:bg-active-blue w-full rounded-xl')}
>
<WidgetWrapperNew
index={index}
widget={item}
moveListItem={(dragIndex: any, hoverIndex: any) =>
dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
}
dashboardId={dashboardId}
siteId={siteId}
grid="other"
showMenu={true}
isSaved={true}
/>
<div
className={cn(
'invisible group-hover:visible ',
'absolute -left-2 top-1/2 -translate-y-1/2',
)}
>
<Popover arrow={false} overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }} content={<AddCardSection />} trigger={'click'}>
<Tooltip title="Add Card">
<Button icon={<PlusOutlined size={14} />} shape={'circle'} size={'small'} />
</Tooltip>
</Popover>
</div>
</div>
item={item}
index={index}
dashboard={dashboard}
dashboardId={dashboardId}
siteId={siteId}
/>
))}
</div>
)}
@ -73,4 +52,51 @@ function DashboardWidgetGrid(props: Props) {
);
}
function GridItem({ item, index, dashboard, dashboardId, siteId }: any) {
const [popoverOpen, setPopoverOpen] = React.useState(false);
const handleOpenChange = (open: boolean) => {
setPopoverOpen(open);
};
return (
<div
key={item.widgetId}
className={cn('col-span-' + item.config.col, 'group relative pl-6 pr-4 py-4 hover:bg-active-blue w-full rounded-xl')}
>
<WidgetWrapperNew
index={index}
widget={item}
moveListItem={(dragIndex: any, hoverIndex: any) =>
dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
}
dashboardId={dashboardId}
siteId={siteId}
grid="other"
showMenu={true}
isSaved={true}
/>
<div
className={cn(
'invisible group-hover:visible ',
'absolute -left-2 top-1/2 -translate-y-1/2',
)}
>
<Popover
open={popoverOpen}
onOpenChange={handleOpenChange}
arrow={false}
overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }}
content={<AddCardSection handleOpenChange={handleOpenChange} />}
trigger={'click'}
>
<Tooltip title="Add Card">
<Button icon={<PlusOutlined size={14} />} shape={'circle'} size={'small'} />
</Tooltip>
</Popover>
</div>
</div>
)
}
export default observer(DashboardWidgetGrid);

1
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -522,6 +522,7 @@ function WidgetChart(props: Props) {
{renderChart()}
{showTable ? (
<WidgetDatatable
inBuilder={props.isPreview}
defaultOpen={true}
isTableView={_metric.viewType === 'table'}
data={data}

27
frontend/app/components/Dashboard/components/WidgetDatatable/WidgetDatatable.tsx
View file

@ -29,6 +29,7 @@ interface Props {
setEnabledRows: (rows: string[]) => void;
defaultOpen?: boolean;
metric: { name: string; viewType: string };
inBuilder?: boolean;
}
function WidgetDatatable(props: Props) {
@ -117,14 +118,20 @@ function WidgetDatatable(props: Props) {
return (
<div className={cn('relative -mx-4 px-2', showTable ? '' : '')}>
{!isTableOnlyMode && (
<div className='flex gap-2'>
<Divider style={{ borderColor: showTable ? '#efefef' : 'transparent', borderStyle: 'dashed'}} variant="dashed">
<div className="flex gap-2">
<Divider
style={{
borderColor: showTable ? '#efefef' : 'transparent',
borderStyle: 'dashed',
}}
variant="dashed"
>
<Button
icon={showTable ? <EyeOff size={16} /> : <Eye size={16} />}
size={'small'}
type={'default'}
onClick={() => setShowTable(!showTable)}
className='btn-show-hide-table'
className="btn-show-hide-table"
>
{showTable ? 'Hide Table' : 'Show Table'}
</Button>
@ -132,7 +139,7 @@ function WidgetDatatable(props: Props) {
</div>
)}
{(showTable || isTableOnlyMode) ? (
{showTable || isTableOnlyMode ? (
<div className={'relative pb-2'}>
<Table
columns={tableProps}
@ -142,11 +149,13 @@ function WidgetDatatable(props: Props) {
size={'small'}
scroll={{ x: 'max-content' }}
/>
<TableExporter
tableData={tableData}
tableColumns={tableProps}
filename={props.metric.name}
/>
{props.inBuilder ? (
<TableExporter
tableData={tableData}
tableColumns={tableProps}
filename={props.metric.name}
/>
) : null}
</div>
) : null}
</div>