Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

updated some popovers

This commit is contained in:
Nate Kelley 2025-03-03 22:40:54 -07:00
parent dbebb662ea
commit 96391210d5
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
3 changed files with 32 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
View File

@ -1,20 +1,19 @@
import { AppMaterialIcons } from '@/components/ui'; import { AlertWarning } from '@/components/ui/icons';
import { AppPopover } from '@/components/ui/tooltip';
import type { PopoverProps } from 'antd';
import { createStyles } from 'antd-style'; import { createStyles } from 'antd-style';
import React from 'react'; import React from 'react';
import { cn } from '@/lib/classMerge';
import { Popover } from '@/components/ui/tooltip/Popover';
export const WarningIcon: React.FC<{ export const WarningIcon: React.FC<{
rowCountThreshold?: number; rowCountThreshold?: number;
rowCount: number; rowCount: number;
placement?: PopoverProps['placement'];
warningText?: string; warningText?: string;
}> = React.memo( }> = React.memo(
({ ({
rowCount, rowCount,
rowCountThreshold = 35, rowCountThreshold = 35,
warningText = 'Data labels will be hidden if there are too many.', warningText = 'Data labels will be hidden if there are too many.'
placement = 'left'
}) => { }) => {
const { styles, cx } = useStyles(); const { styles, cx } = useStyles();
@ -22,12 +21,14 @@ export const WarningIcon: React.FC<{
return null; return null;
} }
return ( return (
<AppPopover <Popover
placement={placement} side="left"
trigger="click" align="center"
content={<div className="max-w-[200px] p-2">{warningText}</div>}> content={<div className="max-w-[200px]">{warningText}</div>}>
<AppMaterialIcons className={cx(styles.warningIcon, 'cursor-pointer')} icon="warning" /> <div className={cn(styles.warningIcon, 'cursor-pointer')}>
</AppPopover> <AlertWarning />
</div>
</Popover>
); );
} }
); );

32
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditShowDataLabels.tsx
View File

@ -1,30 +1,20 @@
import React from 'react'; import React from 'react';
import { LabelAndInput } from '../Common'; import { LabelAndInput } from '../Common';
import { Switch } from 'antd'; import { AppSwitch } from '@/components/ui/switch/AppSwitch';
import { AppPopover } from '@/components/ui/tooltip';
import { AppMaterialIcons } from '@/components/ui';
import { WarningIcon } from '../Common/WarningIcon'; import { WarningIcon } from '../Common/WarningIcon';
export const EditShowDataLabels: React.FC<{ export const EditShowDataLabels: React.FC<{
showDataLabels: boolean; showDataLabels: boolean;
rowCount: number; rowCount: number;
onUpdateColumnSettingConfig: (v: boolean) => void; onUpdateColumnSettingConfig: (v: boolean) => void;
}> = React.memo( }> = React.memo(({ showDataLabels, rowCount, onUpdateColumnSettingConfig }) => {
({ showDataLabels, rowCount, onUpdateColumnSettingConfig }) => { return (
return ( <LabelAndInput label={'Data labels'}>
<LabelAndInput label={'Data labels'}> <div className="flex justify-end space-x-2">
<div className="flex justify-end space-x-2"> <WarningIcon rowCount={rowCount} />
<WarningIcon rowCount={rowCount} /> <AppSwitch defaultChecked={showDataLabels} onCheckedChange={onUpdateColumnSettingConfig} />
<Switch </div>
defaultChecked={showDataLabels} </LabelAndInput>
onChange={(v) => onUpdateColumnSettingConfig(v)} );
/> });
</div>
</LabelAndInput>
);
},
() => {
return true;
}
);
EditShowDataLabels.displayName = 'EditShowDataLabels'; EditShowDataLabels.displayName = 'EditShowDataLabels';

18
web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnPopover.tsx
View File

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { AppPopover } from '@/components/ui'; import { Popover } from '@/components/ui/tooltip/Popover';
import { ChartEncodes, IColumnLabelFormat } from '@/components/ui/charts'; import type { ChartEncodes, IColumnLabelFormat } from '@/components/ui/charts';
import { SelectAxisDropdownContent } from './SelectAxisColumnContent'; import { SelectAxisDropdownContent } from './SelectAxisColumnContent';
import { ColumnMetaData, IBusterMetricChartConfig } from '@/api/asset_interfaces'; import { type IBusterMetricChartConfig } from '@/api/asset_interfaces';
import { SelectAxisContainerId } from './config'; import type { SelectAxisContainerId } from './config';
interface SelectAxisColumnPopoverProps { interface SelectAxisColumnPopoverProps {
columnLabelFormat: IColumnLabelFormat; columnLabelFormat: IColumnLabelFormat;
@ -21,16 +21,14 @@ interface SelectAxisColumnPopoverProps {
export const SelectAxisColumnPopover = React.memo( export const SelectAxisColumnPopover = React.memo(
({ children, ...props }: SelectAxisColumnPopoverProps) => { ({ children, ...props }: SelectAxisColumnPopoverProps) => {
return ( return (
<AppPopover <Popover
trigger="click" side="left"
performant align="end"
destroyTooltipOnHide
placement="leftBottom"
content={ content={
<SelectAxisDropdownContent {...props} className="w-full max-w-[315px] min-w-[315px]" /> <SelectAxisDropdownContent {...props} className="w-full max-w-[315px] min-w-[315px]" />
}> }>
{children} {children}
</AppPopover> </Popover>
); );
} }
); );