change(ui): add icons to category names for metrics
This commit is contained in:
sylenien
parent
7d6d9d50ff
commit
8cd9d989ed
7 changed files with 52 additions and 28 deletions
|
|
@ -13,6 +13,15 @@ interface IWiProps {
|
|||
selectedWidgetIds: string[]
|
||||
}
|
||||
|
||||
const ICONS: Record<string, string | null> = {
|
||||
errors: 'errors-icon',
|
||||
performance: 'performance-icon',
|
||||
resources: 'resources-icon',
|
||||
overview: null,
|
||||
custom: null,
|
||||
'web vitals': 'web-vitals-icon',
|
||||
}
|
||||
|
||||
export function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }: IWiProps) {
|
||||
const selectedCategoryWidgetsCount = useObserver(() => {
|
||||
return category.widgets.filter((widget: any) => selectedWidgetIds.includes(widget.metricId)).length;
|
||||
|
|
@ -22,7 +31,11 @@ export function WidgetCategoryItem({ category, isSelected, onClick, selectedWidg
|
|||
className={cn("rounded p-4 border cursor-pointer hover:bg-active-blue", { 'bg-active-blue border-blue':isSelected, 'bg-white': !isSelected })}
|
||||
onClick={() => onClick(category)}
|
||||
>
|
||||
<div className="font-medium text-lg mb-2 capitalize">{category.name}</div>
|
||||
<div className="font-medium text-lg mb-2 capitalize flex items-center">
|
||||
{/* @ts-ignore */}
|
||||
{ICONS[category.name] && <Icon name={ICONS[category.name]} size={18} className="mr-2" />}
|
||||
{category.name}
|
||||
</div>
|
||||
<div className="mb-2 text-sm leading-tight">{category.description}</div>
|
||||
{selectedCategoryWidgetsCount > 0 && (
|
||||
<div className="flex items-center">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ interface IProps extends RouteComponentProps {
|
|||
function AddPredefinedMetric({ categories, history, siteId, title, description }: IProps) {
|
||||
const { dashboardStore } = useStore();
|
||||
const { hideModal } = useModal();
|
||||
const [allCheck, setAllCheck] = React.useState(false);
|
||||
const [activeCategory, setActiveCategory] = React.useState<Record<string, any>>();
|
||||
|
||||
const scrollContainer = React.useRef<HTMLDivElement>(null);
|
||||
|
|
@ -43,7 +42,6 @@ function AddPredefinedMetric({ categories, history, siteId, title, description }
|
|||
|
||||
const handleWidgetCategoryClick = (category: any) => {
|
||||
setActiveCategory(category);
|
||||
setAllCheck(false);
|
||||
};
|
||||
|
||||
const onSave = () => {
|
||||
|
|
@ -66,15 +64,6 @@ function AddPredefinedMetric({ categories, history, siteId, title, description }
|
|||
hideModal();
|
||||
};
|
||||
|
||||
const toggleAllMetrics = ({ target: { checked } }: any) => {
|
||||
setAllCheck(checked);
|
||||
if (checked) {
|
||||
dashboardStore.selectWidgetsByCategory(activeCategory.name);
|
||||
} else {
|
||||
dashboardStore.removeSelectedWidgetByCategory(activeCategory);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '85vw', width: 1200 }}>
|
||||
<div className="border-l shadow h-screen" style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%' }}>
|
||||
|
|
@ -97,13 +86,15 @@ function AddPredefinedMetric({ categories, history, siteId, title, description }
|
|||
>
|
||||
{activeCategory &&
|
||||
categories.map((category) => (
|
||||
<WidgetCategoryItem
|
||||
key={category.name}
|
||||
onClick={handleWidgetCategoryClick}
|
||||
category={category}
|
||||
isSelected={activeCategory.name === category.name}
|
||||
selectedWidgetIds={selectedWidgetIds}
|
||||
/>
|
||||
<React.Fragment key={category.name}>
|
||||
<WidgetCategoryItem
|
||||
key={category.name}
|
||||
onClick={handleWidgetCategoryClick}
|
||||
category={category}
|
||||
isSelected={activeCategory.name === category.name}
|
||||
selectedWidgetIds={selectedWidgetIds}
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,14 +105,16 @@ function AddPredefinedMetric({ categories, history, siteId, title, description }
|
|||
>
|
||||
{activeCategory &&
|
||||
activeCategory.widgets.map((metric: any) => (
|
||||
<WidgetWrapper
|
||||
key={metric.metricId}
|
||||
widget={metric}
|
||||
active={selectedWidgetIds.includes(metric.metricId)}
|
||||
isTemplate={true}
|
||||
isWidget={metric.metricType === 'predefined'}
|
||||
onClick={() => dashboardStore.toggleWidgetSelection(metric)}
|
||||
/>
|
||||
<React.Fragment key={metric.metricId}>
|
||||
<WidgetWrapper
|
||||
key={metric.metricId}
|
||||
widget={metric}
|
||||
active={selectedWidgetIds.includes(metric.metricId)}
|
||||
isTemplate={true}
|
||||
isWidget={metric.metricType === 'predefined'}
|
||||
onClick={() => dashboardStore.toggleWidgetSelection(metric)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
4
frontend/app/svg/icons/errors-icon.svg
Normal file
4
frontend/app/svg/icons/errors-icon.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 279 B |
4
frontend/app/svg/icons/performance-icon.svg
Normal file
4
frontend/app/svg/icons/performance-icon.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
|
||||
<path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 815 B |
3
frontend/app/svg/icons/resources-icon.svg
Normal file
3
frontend/app/svg/icons/resources-icon.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 323 B |
3
frontend/app/svg/icons/web-vitals.svg
Normal file
3
frontend/app/svg/icons/web-vitals.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 302 B |
Loading…
Add table
Reference in a new issue