Product analytics refinements (#3002)
* Various UX, UI and Functional Improvements in Dashboards & Cards - Depth filter of Sankey chart data in frontend - Dashboard & Cards empty state view updates - Disabled save image feature on cards * Fixed empty views and headers * Various improvements across dashboards and cards.
This commit is contained in:
Sudheer Salavadi
GitHub
parent
da923f13b9
commit
1b3a3dfc21
25 changed files with 320 additions and 526 deletions
|
|
@ -67,6 +67,11 @@ function ORBarChart(props: BarChartProps) {
|
|||
...defaultOptions.tooltip,
|
||||
formatter: customTooltipFormatter(chartUuid.current),
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: false },
|
||||
},
|
||||
},
|
||||
xAxis,
|
||||
yAxis,
|
||||
dataset: datasets,
|
||||
|
|
|
|||
|
|
@ -59,6 +59,11 @@ function ColumnChart(props: ColumnChartProps) {
|
|||
.filter((s: any) => !s._hideInLegend)
|
||||
.map((s: any) => s.name),
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: false },
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
...defaultOptions.grid,
|
||||
left: 40,
|
||||
|
|
|
|||
|
|
@ -76,6 +76,11 @@ function ORLineChart(props: Props) {
|
|||
...defaultOptions.tooltip,
|
||||
formatter: customTooltipFormatter(chartUuid.current),
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: false },
|
||||
},
|
||||
},
|
||||
dataset: datasets,
|
||||
series,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -58,6 +58,11 @@ function PieChart(props: PieChartProps) {
|
|||
left: 10,
|
||||
right: 10,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: false },
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
...defaultOptions.legend,
|
||||
type: 'plain',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ import React from 'react';
|
|||
import { echarts, defaultOptions } from './init';
|
||||
import { SankeyChart } from 'echarts/charts';
|
||||
import { sankeyTooltip, getEventPriority, getNodeName } from './sankeyUtils';
|
||||
import { boxShadow } from 'html2canvas/dist/types/css/property-descriptors/box-shadow';
|
||||
import { NoContent } from 'App/components/ui';
|
||||
import {InfoCircleOutlined} from '@ant-design/icons';
|
||||
echarts.use([SankeyChart]);
|
||||
|
||||
interface SankeyNode {
|
||||
|
|
@ -35,18 +36,43 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
const { data, height = 240, onChartClick } = props;
|
||||
const chartRef = React.useRef<HTMLDivElement>(null);
|
||||
|
||||
if (data.nodes.length === 0 || data.links.length === 0) {
|
||||
return (
|
||||
<NoContent
|
||||
style={{ minHeight: height }}
|
||||
title={
|
||||
<div className="flex items-center relative">
|
||||
<InfoCircleOutlined className='hidden md:inline-block mr-1' />
|
||||
Set a start or end point to visualize the journey. If set, try adjusting filters.
|
||||
</div>
|
||||
|
||||
}
|
||||
show={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!chartRef.current) return;
|
||||
|
||||
const chart = echarts.init(chartRef.current);
|
||||
|
||||
|
||||
const nodeValues = new Array(data.nodes.length).fill(0);
|
||||
const maxDepth = 4;
|
||||
const filteredNodes = data.nodes.filter((n) => (n.depth ?? 0) <= maxDepth);
|
||||
const filteredLinks = data.links.filter((l) => {
|
||||
const sourceNode = data.nodes.find((n) => n.id === l.source);
|
||||
const targetNode = data.nodes.find((n) => n.id === l.target);
|
||||
return (sourceNode?.depth ?? 0) <= maxDepth && (targetNode?.depth ?? 0) <= maxDepth;
|
||||
});
|
||||
|
||||
|
||||
const echartNodes = data.nodes.map((n) => {
|
||||
|
||||
const nodeValues = new Array(filteredNodes.length).fill(0);
|
||||
|
||||
|
||||
const echartNodes = filteredNodes
|
||||
.map((n) => {
|
||||
let computedName = getNodeName(n.eventType || 'Minor Paths', n.name);
|
||||
|
||||
if (computedName === 'Other') {
|
||||
computedName = 'Minor Paths';
|
||||
}
|
||||
|
|
@ -72,9 +98,11 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
return (a.depth as number) - (b.depth as number);
|
||||
}
|
||||
});
|
||||
console.log('EChart Nodes:', echartNodes);
|
||||
|
||||
|
||||
const echartLinks = data.links.map((l) => ({
|
||||
|
||||
const echartLinks = filteredLinks.map((l) => ({
|
||||
source: echartNodes.findIndex((n) => n.id === l.source),
|
||||
target: echartNodes.findIndex((n) => n.id === l.target),
|
||||
value: l.sessionsCount,
|
||||
|
|
@ -100,8 +128,8 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: { show: false }
|
||||
}
|
||||
saveAsImage: { show: false },
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -121,7 +149,7 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
tooltip: {
|
||||
formatter: sankeyTooltip(echartNodes, nodeValues),
|
||||
},
|
||||
nodeAlign: 'right',
|
||||
nodeAlign: 'jusitfy',
|
||||
nodeWidth: 40,
|
||||
nodeGap: 8,
|
||||
lineStyle: {
|
||||
|
|
@ -139,7 +167,6 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
|
||||
chart.setOption(option);
|
||||
|
||||
|
||||
function getUpstreamNodes(nodeIdx: number, visited = new Set<number>()) {
|
||||
if (visited.has(nodeIdx)) return;
|
||||
visited.add(nodeIdx);
|
||||
|
|
@ -151,7 +178,6 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
return visited;
|
||||
}
|
||||
|
||||
|
||||
function getDownstreamNodes(nodeIdx: number, visited = new Set<number>()) {
|
||||
if (visited.has(nodeIdx)) return;
|
||||
visited.add(nodeIdx);
|
||||
|
|
@ -163,18 +189,15 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
return visited;
|
||||
}
|
||||
|
||||
|
||||
function getConnectedChain(nodeIdx: number): Set<number> {
|
||||
const upstream = getUpstreamNodes(nodeIdx) || new Set<number>();
|
||||
const downstream = getDownstreamNodes(nodeIdx) || new Set<number>();
|
||||
return new Set<number>([...upstream, ...downstream]);
|
||||
}
|
||||
|
||||
|
||||
const originalNodes = [...echartNodes];
|
||||
const originalLinks = [...echartLinks];
|
||||
|
||||
|
||||
chart.on('mouseover', function (params: any) {
|
||||
if (params.dataType === 'node') {
|
||||
const hoveredIndex = params.dataIndex;
|
||||
|
|
@ -182,9 +205,9 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
|
||||
const updatedNodes = echartNodes.map((node, idx) => {
|
||||
const baseOpacity = connectedChain.has(idx) ? 1 : 0.35;
|
||||
|
||||
const extraStyle = idx === hoveredIndex
|
||||
? {borderColor: '#000000', borderWidth:1, borderType: 'dotted' }
|
||||
const extraStyle =
|
||||
idx === hoveredIndex
|
||||
? { borderColor: '#000000', borderWidth: 1, borderType: 'dotted' }
|
||||
: {};
|
||||
return {
|
||||
...node,
|
||||
|
|
@ -196,12 +219,12 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
};
|
||||
});
|
||||
|
||||
|
||||
const updatedLinks = echartLinks.map((link) => ({
|
||||
...link,
|
||||
lineStyle: {
|
||||
...link.lineStyle,
|
||||
opacity: (connectedChain.has(link.source) && connectedChain.has(link.target))
|
||||
opacity:
|
||||
connectedChain.has(link.source) && connectedChain.has(link.target)
|
||||
? 0.5
|
||||
: 0.1,
|
||||
},
|
||||
|
|
@ -236,16 +259,17 @@ const EChartsSankey: React.FC<Props> = (props) => {
|
|||
if (!onChartClick) return;
|
||||
if (params.dataType === 'node') {
|
||||
const nodeIndex = params.dataIndex;
|
||||
const node = data.nodes[nodeIndex];
|
||||
// Use filteredNodes here.
|
||||
const node = filteredNodes[nodeIndex];
|
||||
onChartClick([{ node }]);
|
||||
} else if (params.dataType === 'edge') {
|
||||
const linkIndex = params.dataIndex;
|
||||
const link = data.links[linkIndex];
|
||||
// Use filteredLinks here.
|
||||
const link = filteredLinks[linkIndex];
|
||||
onChartClick([{ link }]);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const ro = new ResizeObserver(() => chart.resize());
|
||||
ro.observe(chartRef.current);
|
||||
|
||||
|
|
|
|||
|
|
@ -44,11 +44,11 @@ function CardSessionsByList({ list, selected, paginated, onClickHandler = () =>
|
|||
key={row.name}
|
||||
onClick={(e) => onClickHandler(e, row)}
|
||||
style={{
|
||||
borderBottom: index === data.length - 1 ? 'none' : '1px dotted rgba(0, 0, 0, 0.05)',
|
||||
borderBottom: index === data.length - 1 ? 'none' : 'none',
|
||||
padding: '4px 10px',
|
||||
lineHeight: '1px'
|
||||
}}
|
||||
className={cn('rounded', selected === row.name ? 'bg-active-blue' : '')}
|
||||
className={cn('rounded-lg border-b-0 hover:bg-active-blue cursor-pointer', selected === row.name ? 'bg-active-blue' : '')}
|
||||
>
|
||||
<List.Item.Meta
|
||||
className="m-0"
|
||||
|
|
@ -56,7 +56,7 @@ function CardSessionsByList({ list, selected, paginated, onClickHandler = () =>
|
|||
title={(
|
||||
<div className="m-0">
|
||||
<div className="flex justify-between m-0 p-0">
|
||||
<Typography.Text ellipsis={true}>{row.displayName}</Typography.Text>
|
||||
<Typography.Text ellipsis={true} className='w-[95%]'>{row.displayName}</Typography.Text>
|
||||
<Typography.Text type="secondary"> {row.sessionCount}</Typography.Text>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ import React from 'react';
|
|||
import { useStore } from 'App/mstore';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import ClickMapRenderer from 'App/components/Session/Player/ClickMapRenderer';
|
||||
import { NoContent, Icon } from 'App/components/ui';
|
||||
import { NoContent } from 'App/components/ui';
|
||||
import {InfoCircleOutlined} from '@ant-design/icons';
|
||||
|
||||
function ClickMapCard() {
|
||||
const [customSession, setCustomSession] = React.useState<any>(null);
|
||||
|
|
@ -63,8 +64,8 @@ function ClickMapCard() {
|
|||
style={{ minHeight: 220 }}
|
||||
title={
|
||||
<div className="flex items-center relative">
|
||||
<Icon name="info-circle" className="mr-2" size="14" />
|
||||
No data available for the selected period.
|
||||
<InfoCircleOutlined className='hidden md:inline-block mr-1' />
|
||||
Set a start point to visualize the heatmap. If set, try adjusting filters.
|
||||
</div>
|
||||
}
|
||||
show={true}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ function ListWithIcons({ list = [] }: Props) {
|
|||
title={(
|
||||
<div className="m-0">
|
||||
<div className="flex justify-between m-0 p-0">
|
||||
<Typography.Text>{row.name}</Typography.Text>
|
||||
<Typography.Text className='w-[95%]'>{row.name}</Typography.Text>
|
||||
<Typography.Text type="secondary"> {row.value}</Typography.Text>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,15 @@ import BackButton from 'Shared/Breadcrumb/BackButton';
|
|||
import { withSiteId } from 'App/routes';
|
||||
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
||||
import { PageTitle, confirm } from 'UI';
|
||||
import { Tooltip } from 'antd';
|
||||
import { Tooltip, Popover, Button } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import SelectDateRange from 'Shared/SelectDateRange';
|
||||
import { useStore } from 'App/mstore';
|
||||
import DashboardOptions from '../DashboardOptions';
|
||||
import withModal from 'App/components/Modal/withModal';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import DashboardEditModal from '../DashboardEditModal';
|
||||
import AddCardSection from '../AddCardSection/AddCardSection';
|
||||
|
||||
interface IProps {
|
||||
siteId: string;
|
||||
|
|
@ -63,14 +65,13 @@ function DashboardHeader(props: Props) {
|
|||
title={
|
||||
// @ts-ignore
|
||||
<Tooltip
|
||||
delay={0}
|
||||
title="Double click to edit"
|
||||
title="Click to edit"
|
||||
placement="bottom"
|
||||
>
|
||||
{dashboard?.name}
|
||||
<div className='text-2xl h-8 flex items-center p-2 rounded-lg cursor-pointer select-none ps-2 hover:bg-teal/10'> {dashboard?.name}</div>
|
||||
</Tooltip>
|
||||
}
|
||||
onDoubleClick={() => onEdit(true)}
|
||||
onClick={() => onEdit(true)}
|
||||
className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dashed hover:border-gray-medium cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -78,6 +79,17 @@ function DashboardHeader(props: Props) {
|
|||
className="flex items-center gap-2"
|
||||
style={{ flex: 1, justifyContent: 'end' }}
|
||||
>
|
||||
|
||||
<Popover
|
||||
trigger="click"
|
||||
content={<AddCardSection />}
|
||||
overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }}
|
||||
>
|
||||
<Button type="primary" icon={<PlusOutlined />} size="middle">
|
||||
Add Card
|
||||
</Button>
|
||||
</Popover>
|
||||
|
||||
<SelectDateRange
|
||||
style={{ width: '300px' }}
|
||||
period={period}
|
||||
|
|
@ -85,6 +97,7 @@ function DashboardHeader(props: Props) {
|
|||
right={true}
|
||||
isAnt={true}
|
||||
useButtonStyle={true}
|
||||
className='h-full'
|
||||
/>
|
||||
|
||||
<DashboardOptions
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ function DashboardList() {
|
|||
<Typography.Text className="my-2 text-lg font-medium">
|
||||
No matching results
|
||||
</Typography.Text>
|
||||
<div className="mb-2 text-lg text-gray-500 mt-2 leading-normal">
|
||||
<div className="mb-2 text-lg text-gray-500 my-3 leading-normal">
|
||||
Try adjusting your search criteria or creating a new dashboard.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -188,14 +188,13 @@ function DashboardList() {
|
|||
) : (
|
||||
<div className="text-center">
|
||||
<div>
|
||||
<Typography.Text className="my-2 text-xl font-medium">
|
||||
Create your first dashboard.
|
||||
<Typography.Text className="my-2 text-lg font-medium">
|
||||
Create and organize your insights
|
||||
</Typography.Text>
|
||||
<div className="mb-2 text-lg text-gray-500 mt-2 leading-normal">
|
||||
Organize your product and technical insights as cards in dashboards
|
||||
to see the bigger picture.
|
||||
<div className="mb-2 text-lg text-gray-500 leading-normal">
|
||||
Build dashboards to track key metrics and monitor performance in one place.
|
||||
</div>
|
||||
<div className="my-4">
|
||||
<div className="my-4 mb-10">
|
||||
<CreateDashboardButton />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ function DashboardOptions(props: Props) {
|
|||
|
||||
return (
|
||||
<Dropdown menu={menu}>
|
||||
<Button id={'ignore-prop'} icon={<EllipsisVertical size={16} />} />
|
||||
<Button type='text' id={'ignore-prop'} icon={<EllipsisVertical size={16} />} />
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ function GridItem({ item, index, dashboard, dashboardId, siteId }: any) {
|
|||
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')}
|
||||
className={cn('col-span-' + item.config.col, 'group relative p-2 hover:bg-active-blue w-full rounded-xl')}
|
||||
>
|
||||
<WidgetWrapperNew
|
||||
index={index}
|
||||
|
|
@ -77,7 +77,7 @@ function GridItem({ item, index, dashboard, dashboardId, siteId }: any) {
|
|||
/>
|
||||
<div
|
||||
className={cn(
|
||||
'invisible group-hover:visible ',
|
||||
'invisible group-hover:visible hidden',
|
||||
'absolute -left-2 top-1/2 -translate-y-1/2',
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -25,16 +25,23 @@ const options = [
|
|||
key: 'web_analytics',
|
||||
label: 'Web Analytics',
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
function MetricViewHeader() {
|
||||
const { metricStore } = useStore();
|
||||
const filter = metricStore.filter;
|
||||
const cardsLength = metricStore.filteredCards.length;
|
||||
|
||||
// Determine if a filter is active (search query or metric type other than 'all')
|
||||
const isFilterActive = filter.query !== '' || (filter.type && filter.type !== 'all');
|
||||
// Show header if there are cards or if a filter is active
|
||||
const showHeader = cardsLength > 0 || isFilterActive;
|
||||
|
||||
useEffect(() => {
|
||||
metricStore.updateKey('sort', { by: 'desc' });
|
||||
}, [metricStore]);
|
||||
const handleMenuClick = ({ key }) => {
|
||||
|
||||
const handleMenuClick = ({ key }: { key: string }) => {
|
||||
metricStore.updateKey('filter', { ...filter, type: key });
|
||||
};
|
||||
|
||||
|
|
@ -51,15 +58,20 @@ function MetricViewHeader() {
|
|||
<div className="flex items-center justify-between pr-4">
|
||||
<div className="flex items-center gap-2 ps-4">
|
||||
<PageTitle title="Cards" className="cursor-default" />
|
||||
|
||||
{showHeader && (
|
||||
<Space>
|
||||
<Dropdown overlay={menu} trigger={['click']} className="">
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<Button type="text" size="small" className="mt-1">
|
||||
{options.find(opt => opt.key === filter.type)?.label || 'Select Type'}
|
||||
{options.find((opt) => opt.key === filter.type)?.label || 'Select Type'}
|
||||
<DownOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showHeader && (
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<Popover
|
||||
arrow={false}
|
||||
|
|
@ -67,11 +79,7 @@ function MetricViewHeader() {
|
|||
content={<AddCardSection fit inCards />}
|
||||
trigger="click"
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
className="btn-create-card"
|
||||
>
|
||||
<Button type="primary" icon={<PlusOutlined />} className="btn-create-card">
|
||||
Create Card
|
||||
</Button>
|
||||
</Popover>
|
||||
|
|
@ -79,10 +87,10 @@ function MetricViewHeader() {
|
|||
<MetricsSearch />
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(MetricViewHeader);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import { observer } from 'mobx-react-lite';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { NoContent, Loader } from 'UI';
|
||||
import { NoContent, Loader, Pagination } from 'UI';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { sliceListPerPage } from 'App/utils';
|
||||
import GridView from './GridView';
|
||||
import ListView from './ListView';
|
||||
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
|
||||
import AddCardSection from '../AddCardSection/AddCardSection';
|
||||
import { Popover, Button } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
function MetricsList({
|
||||
siteId,
|
||||
|
|
@ -33,30 +36,28 @@ function MetricsList({
|
|||
(i) => !existingCardIds?.includes(parseInt(i.metricId))
|
||||
)
|
||||
: metricStore.filteredCards,
|
||||
[metricStore.filteredCards]
|
||||
[metricStore.filteredCards, existingCardIds, onSelectionChange]
|
||||
);
|
||||
const loading = metricStore.isLoading;
|
||||
|
||||
useEffect(() => {
|
||||
void metricStore.fetchList();
|
||||
}, []);
|
||||
}, [metricStore]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!onSelectionChange) {
|
||||
return;
|
||||
}
|
||||
if (!onSelectionChange) return;
|
||||
onSelectionChange(selectedMetrics);
|
||||
}, [selectedMetrics]);
|
||||
}, [selectedMetrics, onSelectionChange]);
|
||||
|
||||
const toggleMetricSelection = (id: any) => {
|
||||
if (Array.isArray(id)) {
|
||||
setSelectedMetrics(id);
|
||||
return
|
||||
return;
|
||||
}
|
||||
if (selectedMetrics.includes(id)) {
|
||||
setSelectedMetrics((prev) => prev.filter((i: number) => i !== id));
|
||||
setSelectedMetrics((prev: number[]) => prev.filter((i) => i !== id));
|
||||
} else {
|
||||
setSelectedMetrics((prev) => [...prev, id]);
|
||||
setSelectedMetrics((prev: number[]) => [...prev, id]);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -64,30 +65,57 @@ function MetricsList({
|
|||
|
||||
useEffect(() => {
|
||||
metricStore.updateKey('sessionsPage', 1);
|
||||
}, []);
|
||||
}, [metricStore]);
|
||||
|
||||
const showOwn = metricStore.filter.showMine;
|
||||
const toggleOwn = () => {
|
||||
metricStore.updateKey('showMine', !showOwn);
|
||||
}
|
||||
};
|
||||
|
||||
// Define dimensions for the empty state illustration
|
||||
const isFiltered =
|
||||
metricsSearch !== '' || (metricStore.filter.type && metricStore.filter.type !== 'all');
|
||||
|
||||
const searchImageDimensions = { width: 60, height: 'auto' };
|
||||
const defaultImageDimensions = { width: 600, height: 'auto' };
|
||||
const emptyImage = isFiltered ? ICONS.NO_RESULTS : ICONS.NO_CARDS;
|
||||
const imageDimensions = isFiltered ? searchImageDimensions : defaultImageDimensions;
|
||||
|
||||
|
||||
return (
|
||||
<Loader loading={loading}>
|
||||
<NoContent
|
||||
show={length === 0}
|
||||
title={
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<AnimatedSVG name={ICONS.NO_CARDS} size={60} />
|
||||
<div className="text-center mt-4 text-lg font-medium">
|
||||
{metricsSearch !== ''
|
||||
<AnimatedSVG name={emptyImage} size={imageDimensions.width} />
|
||||
<div className="text-center mt-3 text-lg font-medium">
|
||||
{isFiltered
|
||||
? 'No matching results'
|
||||
: "You haven't created any cards yet"}
|
||||
: 'Unlock insights with data cards'}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
subtext={
|
||||
metricsSearch !== ''
|
||||
? ''
|
||||
: 'Utilize cards to visualize key user interactions or product performance metrics.'
|
||||
isFiltered ? (
|
||||
''
|
||||
) : (
|
||||
<div className="flex flex-col items-center">
|
||||
<div>
|
||||
Create and customize cards to analyze trends and user behavior effectively.
|
||||
</div>
|
||||
<Popover
|
||||
arrow={false}
|
||||
overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }}
|
||||
content={<AddCardSection fit inCards />}
|
||||
trigger="click"
|
||||
>
|
||||
<Button type="primary" icon={<PlusOutlined />} className="btn-create-card mt-3">
|
||||
Create Card
|
||||
</Button>
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
>
|
||||
{listView ? (
|
||||
|
|
@ -102,8 +130,12 @@ function MetricsList({
|
|||
allSelected={cards.length === selectedMetrics.length}
|
||||
showOwn={showOwn}
|
||||
toggleOwn={toggleOwn}
|
||||
toggleAll={({ target: { checked, name } }) =>
|
||||
setSelectedMetrics(checked ? cards.map((i: any) => i.metricId).slice(0, 30 - existingCardIds!.length) : [])
|
||||
toggleAll={({ target: { checked } }) =>
|
||||
setSelectedMetrics(
|
||||
checked
|
||||
? cards.map((i: any) => i.metricId).slice(0, 30 - (existingCardIds?.length || 0))
|
||||
: []
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
|
|
@ -115,14 +147,16 @@ function MetricsList({
|
|||
toggleSelection={toggleMetricSelection}
|
||||
/>
|
||||
<div className="w-full flex items-center justify-between py-4 px-6 border-t">
|
||||
<div className="">
|
||||
<div>
|
||||
Showing{' '}
|
||||
<span className="font-medium">{Math.min(cards.length, metricStore.pageSize)}</span> out
|
||||
of <span className="font-medium">{cards.length}</span> cards
|
||||
<span className="font-medium">
|
||||
{Math.min(cards.length, metricStore.pageSize)}
|
||||
</span>{' '}
|
||||
out of <span className="font-medium">{cards.length}</span> cards
|
||||
</div>
|
||||
<Pagination
|
||||
page={metricStore.page}
|
||||
total={lenth}
|
||||
total={length}
|
||||
onPageChange={(page) => metricStore.updateKey('page', page)}
|
||||
limit={metricStore.pageSize}
|
||||
debounceRequest={100}
|
||||
|
|
|
|||
|
|
@ -71,13 +71,7 @@ const FilterSection = observer(({ layout, metric, excludeFilterKeys, excludeCate
|
|||
React.useEffect(() => {
|
||||
const defaultSeriesCollapseState: Record<number, boolean> = {};
|
||||
metric.series.forEach((s: any) => {
|
||||
defaultSeriesCollapseState[s.seriesId] = defaultSeriesCollapseState[
|
||||
s.seriesId
|
||||
]
|
||||
? defaultSeriesCollapseState[s.seriesId]
|
||||
: allOpen
|
||||
? false
|
||||
: defaultClosed.current;
|
||||
defaultSeriesCollapseState[s.seriesId] = isTable ? false : (allOpen ? false : defaultClosed.current);
|
||||
});
|
||||
setSeriesCollapseState(defaultSeriesCollapseState);
|
||||
}, [metric.series]);
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ function WidgetName(props: Props) {
|
|||
/>
|
||||
) : (
|
||||
// @ts-ignore
|
||||
<Tooltip delay={200} title="Click to edit" disabled={!canEdit}>
|
||||
<Tooltip mouseEnterDelay={1} title="Click to edit" disabled={!canEdit}>
|
||||
<div
|
||||
onClick={() => setEditing(true)}
|
||||
className={cn(
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ function WidgetPreview(props: Props) {
|
|||
<div
|
||||
className={cn(className, 'bg-white rounded-xl border shadow-sm mt-0')}
|
||||
>
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b">
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b justify-between flex-wrap">
|
||||
<WidgetDateRange
|
||||
label=""
|
||||
hasGranularSettings={hasGranularSettings}
|
||||
|
|
@ -37,10 +37,8 @@ function WidgetPreview(props: Props) {
|
|||
hasComparison={hasComparison}
|
||||
presetComparison={presetComparison}
|
||||
/>
|
||||
<div className="ml-auto">
|
||||
<WidgetOptions />
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-4">
|
||||
<WidgetWrapper
|
||||
widget={metric}
|
||||
|
|
|
|||
|
|
@ -166,7 +166,10 @@ function WidgetSessions(props: Props) {
|
|||
{hasFilters && <Tooltip title='Clear Drilldown' placement='top'><Button type='text' size='small' onClick={clearFilters}><UndoOutlined /></Button></Tooltip>}
|
||||
</div>
|
||||
|
||||
{hasFilters && widget.metricType === 'table' && <div className="py-2"><Tag closable onClose={clearFilters}>{filterText}</Tag></div>}
|
||||
{hasFilters && widget.metricType === 'table' &&
|
||||
<div className="py-2">
|
||||
<Tag closable onClose={clearFilters} className='truncate max-w-44 rounded-lg'>{filterText}</Tag>
|
||||
</div>}
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ function WidgetView(props: Props) {
|
|||
const [initialInstance, setInitialInstance] = useState();
|
||||
const isClickMap = widget.metricType === HEATMAP;
|
||||
|
||||
|
||||
React.useEffect(() => {
|
||||
if (metricId && metricId !== 'create') {
|
||||
metricStore.fetch(metricId, dashboardStore.period).catch((e) => {
|
||||
|
|
@ -81,6 +82,13 @@ function WidgetView(props: Props) {
|
|||
}
|
||||
}, []);
|
||||
|
||||
|
||||
React.useEffect(() => {
|
||||
if (metricNotFound) {
|
||||
history.replace(withSiteId('/metrics', siteId));
|
||||
}
|
||||
}, [metricNotFound, history, siteId]);
|
||||
|
||||
const undoChanges = () => {
|
||||
const w = new Widget();
|
||||
metricStore.merge(w.fromJson(initialInstance), false);
|
||||
|
|
@ -149,15 +157,7 @@ function WidgetView(props: Props) {
|
|||
{ label: widget.name },
|
||||
]}
|
||||
/>
|
||||
<NoContent
|
||||
show={metricNotFound}
|
||||
title={
|
||||
<div className="flex flex-col items-center justify-between">
|
||||
<AnimatedSVG name={ICONS.EMPTY_STATE} size={60} />
|
||||
<div className="mt-4">Metric not found!</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
||||
<Space direction="vertical" className="w-full" size={14}>
|
||||
<WidgetViewHeader
|
||||
onSave={onSave}
|
||||
|
|
@ -188,7 +188,9 @@ function WidgetView(props: Props) {
|
|||
value: 'flex-row-reverse',
|
||||
icon: (
|
||||
<Tooltip title="Reversed Horizontal Layout">
|
||||
<div className={'rotate-180'}><LayoutPanelLeft size={16} /></div>
|
||||
<div className={'rotate-180'}>
|
||||
<LayoutPanelLeft size={16} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
|
@ -216,10 +218,8 @@ function WidgetView(props: Props) {
|
|||
{widget.metricType === RETENTION && <CardUserList />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</Space>
|
||||
</NoContent>
|
||||
{/* </NoContent> */}
|
||||
</div>
|
||||
</Loader>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -106,8 +106,11 @@ function WidgetWrapperNew(props: Props & RouteComponentProps) {
|
|||
style={{
|
||||
userSelect: 'none',
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
borderColor:
|
||||
(canDrop && isOver) || active ? '#394EFF' : isPreview ? 'transparent' : '#EEEEEE'
|
||||
borderColor: (canDrop && isOver)
|
||||
? '#454545'
|
||||
: isPreview ? 'transparent' : '#EEEEEE',
|
||||
borderStyle: (canDrop && isOver) ? 'dashed' : 'solid',
|
||||
cursor: isDragging ? 'grabbing' : 'grab'
|
||||
}}
|
||||
ref={dragDropRef}
|
||||
onClick={props.onClick ? props.onClick : () => null}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const ICONS_SVGS = {
|
|||
[ICONS.NO_ANNOUNCEMENTS]: require('../../../svg/ghost.svg').default,
|
||||
[ICONS.NO_ALERTS]: require('../../../svg/ghost.svg').default,
|
||||
[ICONS.NO_NOTES]: require('../../../svg/ghost.svg').default,
|
||||
[ICONS.NO_CARDS]: require('../../../svg/ghost.svg').default,
|
||||
[ICONS.NO_CARDS]: require('../../../svg/ca-no-cards.svg').default,
|
||||
[ICONS.NO_RECORDINGS]: require('../../../svg/ghost.svg').default,
|
||||
[ICONS.NO_SEARCH_RESULTS]: require('../../../svg/ghost.svg').default,
|
||||
[ICONS.NO_DASHBOARDS]: require('../../../svg/ca-no-dashboards.svg').default,
|
||||
|
|
@ -63,10 +63,12 @@ const ICONS_SVGS = {
|
|||
interface Props {
|
||||
name: string;
|
||||
size?: number;
|
||||
disableSize?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function AnimatedSVG(props: Props): JSX.Element | null {
|
||||
const {name, size = 24} = props;
|
||||
const {name, size = 24, disableSize, className} = props;
|
||||
|
||||
// @ts-ignore
|
||||
const SvgIcon = ICONS_SVGS[name];
|
||||
|
|
@ -74,8 +76,8 @@ function AnimatedSVG(props: Props): JSX.Element | null {
|
|||
if (!SvgIcon) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <img src={SvgIcon} style={{width: size + 'px'}} alt={name}/>;
|
||||
const style = disableSize ? {} : { width: size + 'px' };
|
||||
return <img src={SvgIcon} style={style} className={className} alt={name} />;
|
||||
}
|
||||
|
||||
export default AnimatedSVG;
|
||||
|
|
@ -29,6 +29,7 @@ interface Props {
|
|||
comparison?: boolean;
|
||||
updateInstComparison?: (range: [start: string, end?: string] | null) => void;
|
||||
[x: string]: any;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function SelectDateRange(props: Props) {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ function PageTitle({ title, actionButton = null, subTitle = '', className = '',
|
|||
return (
|
||||
<div>
|
||||
<div className='flex items-center'>
|
||||
<h1 className={cn("text-2xl capitalize-first mt-.5 cursor-pointer")} onDoubleClick={onDoubleClick} onClick={onClick}>
|
||||
<h1 className={cn("text-2xl capitalize-first mt-.5")} onDoubleClick={onDoubleClick} onClick={onClick}>
|
||||
{title}
|
||||
</h1>
|
||||
{ actionButton && <div className="ml-2">{actionButton}</div> }
|
||||
|
|
|
|||
|
|
@ -1,59 +1,19 @@
|
|||
<svg width="210" height="200" viewBox="0 0 210 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_709_505)">
|
||||
<rect width="210" height="200" fill="white"/>
|
||||
<path d="M193.327 49.5606C193.901 47.6139 194.625 45.8509 195.357 44.0737L195.379 44.0193C196.305 41.771 197.243 39.495 197.861 36.8441L197.863 36.8364L197.864 36.8286C197.924 36.5278 197.99 36.2274 198.057 35.9175C198.066 35.8802 198.074 35.8428 198.082 35.8052C198.089 35.7952 198.095 35.7854 198.102 35.7757C198.289 35.4973 198.413 35.3128 198.575 35.1821C198.716 35.0692 198.907 34.9834 199.286 35.0336L199.29 35.0341C200.733 35.2121 202.21 35.3371 203.676 35.4611C204.784 35.5549 205.886 35.6481 206.96 35.7632L206.961 35.7633C207.217 35.7903 207.482 35.8662 207.778 35.9696C207.839 35.9909 207.904 36.0145 207.972 36.0395C207.203 36.868 206.433 37.696 205.662 38.5246C203.611 40.728 201.556 42.9364 199.527 45.1737C198.553 46.2484 197.297 47.0051 195.955 47.8135L195.898 47.8477C195.04 48.3648 194.15 48.9045 193.327 49.5606Z" fill="#FDF9F3" stroke="black"/>
|
||||
<path d="M194.13 27.9848C194.527 27.7779 194.916 27.5628 195.314 27.3559C195.942 26.8015 196.571 26.2472 197.2 25.6928L197.142 25.7424C197.994 25.3866 198.838 25.0308 199.881 24.5923C199.881 25.6348 199.881 26.5037 199.881 27.3725C199.467 28.9115 199.045 30.4505 198.632 31.9895C198.325 32.4942 198.019 33.0073 197.655 33.6196C194.842 33.0404 192.078 32.5274 189.53 31.3524C191.143 30.1775 192.641 29.077 194.139 27.9848H194.13Z" fill="#FDF9F3"/>
|
||||
<path d="M195.808 39.3259L195.809 39.325C196.005 38.6314 196.304 37.9462 196.587 37.2979C196.693 37.0546 196.797 36.8165 196.893 36.5851C196.952 36.2907 197.017 35.9958 197.081 35.7013C197.093 35.6441 197.106 35.5869 197.118 35.5298C197.152 35.1223 197.037 34.9631 196.91 34.8603C196.724 34.7101 196.427 34.6132 195.965 34.4922L195.808 39.3259ZM195.808 39.3259C195.186 41.5385 194.592 43.7611 193.998 45.978C193.684 47.1541 193.369 48.3287 193.052 49.4993M195.808 39.3259L190.895 41.8786M190.895 41.8786L190.895 41.8786C191.409 44.24 191.904 46.6066 192.418 49.0688C192.519 49.5518 192.621 50.0385 192.724 50.5296C192.843 50.2902 192.914 50.0202 192.995 49.7123C193.013 49.6432 193.032 49.5722 193.052 49.4993M190.895 41.8786C190.612 40.5778 190.289 39.0293 189.959 37.4454C189.606 35.7546 189.245 34.0233 188.915 32.5094M190.895 41.8786L188.915 32.5094M193.052 49.4993L193.534 49.6303M193.052 49.4993C193.052 49.4993 193.052 49.4993 193.052 49.4994L193.534 49.6303M193.534 49.6303C193.853 48.456 194.168 47.2796 194.483 46.1026C195.075 43.8879 195.668 41.671 196.29 39.4612L192.866 51.2077C193.234 50.79 193.359 50.3047 193.479 49.8404C193.497 49.7698 193.515 49.6997 193.534 49.6303ZM188.915 32.5094C189.053 32.5593 189.194 32.6054 189.336 32.6445C191.536 33.2814 193.741 33.9115 195.964 34.4922L188.915 32.5094Z" fill="#FDF9F3" stroke="black"/>
|
||||
<path d="M208.867 35.8287C208.246 35.6301 207.642 35.3323 207.013 35.2661C204.465 34.993 201.9 34.8524 199.351 34.5379C198.35 34.4055 198.027 34.993 197.614 35.6053C197.721 34.48 196.977 34.24 196.091 34.0084C193.874 33.4292 191.673 32.8003 189.472 32.1632C189.05 32.0474 188.644 31.8653 188.222 31.6916C188.198 31.6916 188.164 31.6667 188.14 31.6585C188.09 31.6419 188.04 31.6171 187.991 31.6005C188.76 30.5083 192.053 28.5887 194.13 27.9764C192.633 29.0686 191.135 30.1608 189.521 31.344C192.07 32.519 194.834 33.032 197.647 33.6112C198.011 32.9906 198.317 32.4859 198.623 31.9812V33.9504C202.082 34.2483 205.325 34.5214 209.065 34.8441C207.295 32.8169 205.913 31.2117 204.506 29.6395C203.141 28.1171 202.239 26.1891 200.634 24.6667C200.319 25.7754 200.096 26.5698 199.873 27.3641V24.5839C198.838 25.0142 197.986 25.37 197.134 25.7341C197.994 24.526 199.153 23.7565 200.808 23.1938C200.981 23.4586 201.172 23.7896 201.403 24.0792C204.043 27.3145 206.682 30.5414 209.33 33.7684C210.273 34.9103 210.249 35.0344 208.867 35.8287V35.8287Z" fill="black"/>
|
||||
<path d="M199.872 27.3642C200.096 26.5699 200.319 25.7838 200.634 24.675C202.239 26.1975 203.141 28.1254 204.506 29.6479C205.921 31.22 207.295 32.8253 209.065 34.8525C205.325 34.5298 202.082 34.2567 198.623 33.9588C198.623 33.1314 198.623 32.5605 198.623 31.9895C199.037 30.4505 199.459 28.9115 199.872 27.3725V27.3642Z" fill="#FDF9F3"/>
|
||||
<ellipse opacity="0.1" cx="94.8863" cy="90.3937" rx="94.8863" ry="90.3937" transform="matrix(0.996522 0.0833268 0.181643 0.983364 0.242188 -0.217407)" fill="url(#paint0_linear_709_505)"/>
|
||||
<ellipse opacity="0.05" cx="71.718" cy="84.2783" rx="71.718" ry="84.2783" transform="matrix(0.996522 0.0833268 0.181643 0.983364 26.1909 17.2076)" fill="#122AF5"/>
|
||||
<path d="M21 195C51.4017 185.19 129.364 171.456 198 195" stroke="black"/>
|
||||
<g clip-path="url(#clip1_709_505)">
|
||||
<path d="M193.669 44.38C189.29 45.4531 185.548 48.0665 182.279 51.1343C179.347 53.8865 176.303 57.4215 176.228 61.7013C176.153 65.9811 179.197 69.2131 182.516 71.3214C186.358 73.7706 183.513 92.5633 187.131 95.4039C190.749 98.2445 193.668 101.666 194.928 106.059C196.276 110.756 195.49 115.768 193.718 120.237C189.988 129.63 182.003 136.056 175.753 143.643C169.503 151.231 164.512 161.495 168.38 171.191C168.679 171.923 169.864 171.62 169.577 170.862C166.122 161.886 170.388 152.317 175.953 145.259C181.517 138.202 188.915 132.117 193.169 123.86C196.999 116.412 198.134 107.473 193.119 100.302C190.898 97.1209 187.867 94.6086 184.648 92.5002C180.905 90.051 183.364 71.435 180.245 68.1526C178.411 66.221 177.189 63.6581 177.538 60.9438C177.887 58.2295 179.409 56.0706 181.119 54.1895C184.574 50.3642 188.991 46.9934 194.043 45.8193C194.942 45.6046 194.567 44.2033 193.657 44.4179L193.669 44.38Z" fill="#231F20"/>
|
||||
<path d="M110.893 158.786H89.5967V148.257L112.203 142.74L110.893 158.786Z" fill="white" stroke="#231F20" stroke-width="1.26248" stroke-miterlimit="10"/>
|
||||
<path d="M110.992 185.185C110.992 185.185 78.7302 187.609 74.0892 182.685C69.4483 177.761 89.5965 158.786 89.5965 158.786H110.88L110.992 185.185Z" fill="white"/>
|
||||
<path d="M111.454 185.614C111.317 185.791 110.843 185.854 110.905 185.829H110.78L110.518 185.879C108.41 186.182 104.829 186.435 102.671 186.637C94.1627 187.078 85.6668 187.684 77.2457 185.803C73.0663 184.882 70.7708 182.294 72.5298 177.938C76.0979 169.959 82.8223 163.988 89.1725 158.344C89.1725 158.344 89.3471 158.18 89.3596 158.168H89.6091H111.516C111.566 167.321 111.516 176.511 111.467 185.614H111.454ZM110.543 184.755C110.406 176.057 110.294 167.447 110.269 158.799L110.893 159.43H89.6091L90.0333 159.266C86.7646 163.104 73.3532 177.105 75.1248 181.587C75.6862 182.256 77.0336 182.698 78.0067 182.963C80.5268 183.632 83.2714 183.91 86.0036 184.149C92.8528 184.68 99.914 184.654 106.788 184.629C107.911 184.591 109.72 184.617 110.83 184.579C110.993 184.553 110.593 184.604 110.543 184.781V184.755Z" fill="#231F20"/>
|
||||
<path d="M130.019 137.602C130.019 137.602 128.397 151.969 124.217 158.66H107.912L109.346 144.129" fill="white"/>
|
||||
<path d="M130.019 137.602C130.019 137.602 128.397 151.969 124.217 158.66H107.912L109.346 144.129" stroke="#231F20" stroke-width="1.26248" stroke-miterlimit="10"/>
|
||||
<path d="M107.912 158.66L122.034 158.799C165.263 179.062 148.42 184.566 148.42 184.566C148.42 184.566 107.7 192.09 104.381 179.642C104.381 179.642 99.9147 175.047 107.899 158.66" fill="white"/>
|
||||
<path d="M107.911 158.029L122.034 158.168H122.171L122.296 158.231C130.243 161.74 152.3 171.007 152.998 180.652C152.998 183.228 150.965 185.223 148.669 185.917C144.777 186.586 140.909 187.066 136.992 187.445C128.633 188.076 106.838 190.02 103.782 179.819C100.426 174.428 104.43 164.543 107.35 158.395L108.473 158.95C106.913 162.22 105.503 165.591 104.58 169.101C103.881 172.37 102.996 176.347 104.917 179.301C105.491 181.069 106.838 182.395 108.522 183.253C117.318 186.99 127.436 185.538 136.743 184.856C140.573 184.44 144.428 183.91 148.183 183.228L148.008 183.266C148.569 183.064 149.268 182.622 149.655 182.167C154.383 175.602 126.687 162.17 121.759 159.367C123.156 159.518 107.574 159.253 107.886 159.291V158.029H107.911Z" fill="#231F20"/>
|
||||
<path d="M138.926 128.196C139.9 107.34 139.588 41.2617 96.5963 39.4311C80.59 38.7494 65.1326 46.6399 57.2728 60.9817C56.0003 63.3046 54.8775 65.8675 54.0042 68.6954C52.7317 72.8111 52.6444 77.2298 53.7422 81.396C57.2728 94.8541 66.8417 130.86 70.9961 141.781C70.9961 141.781 72.88 158.66 132.876 136.554C136.356 135.279 138.739 131.984 138.914 128.196H138.926Z" fill="white"/>
|
||||
<path d="M138.29 128.158C139.276 102.681 136.394 61.4614 113.401 46.2864C97.1825 36.0981 73.7406 41.9939 62.3378 57.0301C56.7112 64.4661 53.1058 74.1367 56.4243 83.3529C60.2169 97.9093 64.0719 112.453 68.1265 126.934C69.5113 131.883 71.0459 136.806 72.6303 141.604C73.1667 143.245 75.0007 144.444 76.635 145.05C79.3547 146.161 82.5609 146.426 85.4927 146.477C92.4792 146.553 99.6652 145.227 106.464 143.662C114.137 141.856 121.847 139.508 129.32 136.933L131.591 136.175C135.246 135.291 138.128 132.034 138.302 128.184L138.29 128.158ZM139.587 128.221C139.488 132.628 136.294 136.529 132.127 137.677L129.869 138.498C122.396 141.288 114.711 143.864 107.001 145.884C100.052 147.689 92.6912 149.229 85.4803 149.33C81.7126 149.381 77.7578 149.027 74.2895 147.449C72.0564 146.313 69.9355 144.659 69.3991 141.957L69.4989 142.361C65.9682 132.83 63.2735 123.197 60.3916 113.501C57.622 103.83 55.0021 94.1345 52.4071 84.426C50.8102 79.3508 50.2488 73.6317 51.8831 68.4429C54.9023 58.2926 61.7889 49.4678 70.7464 44.0518C83.9707 36.0729 101.998 34.7725 115.148 43.5342C139.388 60.6282 140.423 101.091 139.575 128.209L139.587 128.221Z" fill="#231F20"/>
|
||||
<path d="M126.762 58.3936C126.762 58.3936 91.8551 52.5862 55.8252 89.2613L126.762 58.3936Z" fill="white"/>
|
||||
<path d="M126.662 59.0122C121.772 59.6308 116.906 59.1511 112.041 60.0222L109.621 60.3757C94.2755 63.1405 79.8037 70.2609 67.5525 79.9442C63.8347 82.7216 59.6928 86.5848 56.2744 89.7158L55.3887 88.8194C57.784 86.4712 60.1294 84.0599 62.5996 81.7874C75.7491 69.9579 91.7554 61.0448 109.184 57.8886C111.592 57.5098 114.299 57.1059 116.719 56.9417C120.075 56.7776 123.531 56.4115 126.85 57.7623L126.65 59.0122H126.662Z" fill="#231F20"/>
|
||||
<path d="M136.144 84.7416C136.144 84.7416 99.6895 89.034 63.3228 116.758L136.144 84.7416Z" fill="white"/>
|
||||
<path d="M136.144 84.7416C136.144 84.7416 99.6895 89.034 63.3228 116.758" stroke="#231F20" stroke-width="1.26248" stroke-miterlimit="10"/>
|
||||
<path d="M109.346 58.0527C109.346 58.0527 119.177 75.4876 120.125 88.2639L109.346 58.0527Z" fill="white"/>
|
||||
<path d="M109.346 58.0527C109.346 58.0527 119.177 75.4876 120.125 88.2639" stroke="#231F20" stroke-width="1.26248" stroke-miterlimit="10"/>
|
||||
<path d="M166.472 74.4902C166.472 74.4902 171.675 59.7318 183.714 70.0337C195.753 80.3355 179.172 94.3996 172.223 89.2613" fill="white"/>
|
||||
<path d="M165.886 74.2756C167.857 68.0642 173.296 63.2667 179.896 66.1578C184.2 68.2031 188.467 71.839 189.091 76.9521C190.301 85.0951 179.122 94.8036 171.849 89.7663L172.585 88.7436C179.659 92.4427 190.014 81.5475 185.797 74.4523C183.015 69.6802 175.679 64.6681 170.764 69.5034C169.192 70.8543 167.969 72.748 167.058 74.6796L165.886 74.2503V74.2756Z" fill="#231F20"/>
|
||||
<path d="M157.29 101.899C152.624 103.464 147.783 104.398 142.88 104.79C126.25 106.128 88.5362 107.138 122.782 84.4638C122.782 84.4638 156.828 60.1863 166.26 74.6417C168.406 77.9242 169.965 80.7521 171.113 83.1761C174.07 89.4506 170.864 96.7099 163.952 99.4495C161.956 100.245 159.71 101.078 157.277 101.886L157.29 101.899Z" fill="white"/>
|
||||
<path d="M157.589 102.808C151.301 104.878 144.639 105.61 138.077 105.838C129.93 106.052 121.497 106.532 113.512 104.272C112.851 104.032 111.766 103.616 111.142 103.25C100.251 96.6594 122.695 83.5422 127.835 79.982C136.281 74.8563 145.313 69.7433 155.393 68.8091C161.145 68.3293 165.985 70.6649 168.655 75.9926C171.25 80.386 174.481 85.3349 173.109 90.6752C172.198 94.7152 169.329 97.9976 165.773 99.7904C163.69 100.826 159.785 101.962 157.577 102.808H157.589ZM157.003 101.002C159.548 99.9166 163.503 98.8183 165.811 97.3285C170.289 94.5132 172.435 88.5417 169.99 83.719C168.156 80.285 166.447 76.5607 163.752 73.7327C158.862 69.6675 151.875 71.5865 146.324 73.3414C137.216 76.5102 128.683 81.5223 120.674 87.0014C116.095 90.246 102.945 99.3737 113.949 102.972C121.697 105.282 129.98 104.815 138.015 104.411C144.49 104.045 150.902 103.174 157.015 101.002H157.003Z" fill="#231F20"/>
|
||||
<path d="M104.393 40.5547C104.393 40.5547 84.4067 34.6842 55.251 65.2615" stroke="#231F20" stroke-width="1.26248" stroke-miterlimit="10"/>
|
||||
<path d="M74.0896 44.4684C74.0896 44.4684 42.1143 24.6222 20.6561 48.9376C6.78307 64.6555 12.7589 75.0078 18.7223 80.3734C23.9372 85.0572 31.722 85.8021 37.3486 81.6359C41.8773 78.2903 45.7198 71.536 44.6843 58.0527C44.6843 58.0527 52.5316 40.7188 69.9227 46.9934" fill="white"/>
|
||||
<path d="M73.7653 45.0113C59.1687 37.1081 39.3073 34.1918 25.9084 45.8571C18.2608 52.5988 9.75234 64.1884 15.853 74.4902C19.7953 81.5475 28.9151 85.5622 36.0761 80.8405C40.767 77.8484 42.9128 72.2051 43.6738 66.7638C44.0731 63.8601 44.1354 60.8807 44.0481 57.9138C46.9799 51.9928 52.1074 47.006 58.5823 45.4531C62.4498 44.6073 66.4046 45.1501 70.1224 46.4126L69.6982 47.5994C62.5746 44.8976 54.6899 46.501 49.5 52.2705C47.8158 54.0633 46.3187 56.1464 45.2333 58.3305L45.2832 58.0148V58.0275C46.3437 66.8396 45.4703 77.6212 37.5607 83.1382C26.0955 91.2307 10.4385 80.1461 10.6381 66.928C10.7005 61.3225 13.2206 56.2852 16.4019 51.917C22.0409 43.8624 30.6492 37.6889 40.4052 36.1991C52.2571 34.2928 64.2713 37.8782 74.414 43.9508L73.7653 45.0239V45.0113Z" fill="#231F20"/>
|
||||
<path d="M120 86.5C118.5 73 110 60 110 59.5C112 57.9 121.833 57.8333 126.5 58C128.9 60.8 133.167 72.1667 135 77.5C132.6 77.1 124 83.3333 120 86.5Z" fill="#5BC3C8" stroke="black"/>
|
||||
</g>
|
||||
<path d="M22.1606 171.207C23.7658 171.282 24.8911 171.29 26.0081 171.406C27.2493 171.538 27.845 172.407 28.1181 173.524C28.3663 174.517 28.5566 175.526 29.1937 176.478C29.2268 176.089 29.3261 175.692 29.2682 175.311C29.0531 173.723 28.7552 172.142 28.5484 170.554C28.2339 168.154 28.3911 167.988 30.89 167.856C32.6276 167.757 33.0248 167.98 33.4798 169.71C33.9018 171.331 34.1666 172.994 34.5059 174.641C34.6134 175.154 34.7375 175.659 34.8947 176.337C35.7387 176.379 36.5331 176.42 37.468 176.461C37.5756 173.185 35.6063 170.413 36.2517 167.186C37.8239 166.648 39.4373 166.921 40.9846 167.087C44.3274 167.434 47.662 167.881 50.9634 168.477C52.337 168.725 53.6278 169.436 55.324 170.082C53.1148 172.531 51.2034 174.649 49.019 177.074C50.0367 177.305 50.74 177.438 51.4268 177.611C53.785 178.215 56.2176 178.646 58.4931 179.498C62.051 180.83 63.0688 184.992 60.5534 187.896C59.3784 189.253 57.9304 190.503 56.3666 191.38C53.3133 193.101 50.1195 194.359 46.4209 194.284C41.3901 194.185 36.351 194.532 31.312 194.681C26.9514 194.805 22.8639 193.597 18.8178 192.149C16.8071 191.43 14.7385 190.784 13.1664 189.245C12.248 188.343 11.3047 187.417 10.5848 186.357C9.26923 184.421 9.80706 182.005 11.8425 180.83C13.4147 179.92 15.1357 179.266 16.9643 178.422C16.9064 177.942 16.8568 177.355 16.774 176.776C16.5589 175.278 16.774 174.922 18.2055 174.418C19.9431 173.805 20.605 173.954 21.3001 175.245C21.6807 175.957 21.9537 176.734 22.3178 177.587C23.9809 176.768 22.8556 175.642 22.8143 174.765C22.7729 173.731 22.4502 172.713 22.1523 171.224L22.1606 171.207ZM11.5612 185.729C11.6522 185.969 11.6771 186.2 11.8012 186.357C13.3319 188.318 15.2185 189.758 17.5601 190.726C22.9467 192.944 28.507 194.053 34.3238 193.846C38.6016 193.688 42.8712 193.316 47.149 193.324C50.5166 193.324 53.4292 192.116 56.2093 190.536C57.6408 189.725 58.8075 188.443 60.0155 187.284C60.6113 186.713 60.9836 185.944 60.5285 185.042C47.2897 190.718 26.306 191.016 11.5695 185.729H11.5612ZM36.9468 188.31C39.6607 188.749 39.8842 188.649 40.8605 186.44C41.2908 185.464 41.6052 184.438 42.0355 183.461C42.2754 182.915 42.5568 182.344 42.9622 181.922C46.0651 178.662 49.201 175.444 52.3122 172.2C52.6018 171.894 52.8252 171.53 53.2223 170.992C47.7365 170.405 42.5981 169.238 37.1371 168.907C37.3357 170.148 37.4184 171.058 37.6253 171.935C38.3203 174.815 39.0733 177.686 39.7518 180.565C39.8593 181.029 39.8014 181.6 39.6194 182.047C38.7671 184.148 37.8487 186.217 36.9468 188.31V188.31ZM41.4397 188.112C41.7293 188.178 41.9445 188.277 42.1596 188.269C46.8263 188.045 51.4351 187.433 55.9032 186.043C57.2685 185.621 58.6254 184.992 59.8169 184.206C61.356 183.205 61.2567 182.022 59.7177 180.971C59.3453 180.714 58.915 180.541 58.5013 180.342C55.6467 178.968 52.5687 178.439 49.4658 177.992C48.5308 177.86 47.8854 178.182 47.2317 178.82C44.6088 181.401 42.2175 184.132 41.4314 188.103L41.4397 188.112ZM30.7741 185.422C30.6418 182.758 29.806 178.803 28.9703 177.529C29.1193 178.968 29.2103 180.003 29.3261 181.037C29.4337 182.022 29.6571 183.015 29.624 183.991C29.6075 184.479 29.2186 185.249 28.8297 185.373C27.7788 185.712 26.637 185.778 25.4869 185.969C25.1145 184.479 24.8166 183.155 24.4443 181.856C24.1051 180.656 24.3947 179.167 22.5991 177.951C22.7067 179.06 22.715 179.688 22.8391 180.301C23.1121 181.724 23.4845 183.13 23.7327 184.554C23.9561 185.878 23.6996 186.208 22.4005 186.366C21.4242 186.49 20.4478 186.515 19.4301 186.589C18.7185 184.214 18.0234 181.906 17.3036 179.531C15.2681 179.928 13.4395 180.458 11.917 181.674C10.5766 182.75 10.56 183.941 12.008 184.81C13.2988 185.588 14.7385 186.233 16.1948 186.589C22.6074 188.161 29.1358 188.658 35.8711 188.567C36.6075 186.804 37.2612 185.025 38.0969 183.337C39.156 181.186 38.7588 179.242 37.5591 177.206C36.7399 177.256 35.9373 177.305 35.0106 177.363C35.1264 178.282 35.2174 178.952 35.3002 179.63C35.4491 180.996 35.6477 182.361 35.7222 183.726C35.7884 185.042 35.4657 185.356 34.1666 185.406C33.0413 185.447 31.9077 185.414 30.7824 185.414L30.7741 185.422ZM34.994 184.338C34.481 178.844 33.8605 173.665 32.2056 168.609C31.5437 168.684 31.1713 168.717 30.8072 168.775C30.377 168.849 29.955 168.957 29.3427 169.089C30.1039 174.26 30.8403 179.283 31.585 184.33H35.0023L34.994 184.338ZM28.9703 184.338C28.4491 180.847 28.0188 177.62 27.4727 174.409C27.15 172.548 26.6122 172.208 24.6677 172.208C24.2292 172.208 23.7824 172.266 23.1039 172.316C24.0802 176.602 25.0318 180.739 25.9916 184.959C27.1004 184.727 27.8947 184.562 28.9703 184.338V184.338ZM17.5187 175.75C17.9159 179.059 18.8509 182.278 20.0093 185.571C21.0849 185.464 21.962 185.373 23.1121 185.257C22.4088 182.32 21.8213 179.581 21.0932 176.883C20.4726 174.591 20.001 174.467 17.5187 175.758V175.75ZM52.5273 170.206C52.5521 170.049 52.5769 169.892 52.6018 169.734C47.9019 168.435 43.0615 168.104 38.2376 167.6C38.2127 167.782 38.1796 167.964 38.1548 168.137C42.9456 168.824 47.7365 169.511 52.5273 170.198V170.206Z" fill="black"/>
|
||||
<path d="M11.5615 185.729C26.298 191.008 47.2817 190.718 60.5205 185.042C60.9756 185.944 60.6116 186.713 60.0075 187.284C58.7995 188.442 57.6245 189.725 56.2014 190.536C53.4212 192.108 50.5086 193.324 47.141 193.324C42.8632 193.324 38.5936 193.697 34.3158 193.846C28.499 194.052 22.9387 192.944 17.5521 190.726C15.2105 189.758 13.3239 188.327 11.7932 186.357C11.6691 186.2 11.6442 185.977 11.5532 185.729H11.5615Z" fill="white"/>
|
||||
<path d="M36.9468 188.31C37.8487 186.217 38.7671 184.148 39.6194 182.047C39.8014 181.6 39.8593 181.029 39.7518 180.565C39.0733 177.678 38.312 174.815 37.6253 171.935C37.4101 171.058 37.3274 170.148 37.1371 168.907C42.5981 169.238 47.7365 170.405 53.2223 170.992C52.8252 171.53 52.6018 171.894 52.3122 172.2C49.201 175.444 46.0568 178.662 42.9622 181.922C42.5568 182.344 42.2754 182.915 42.0355 183.461C41.6052 184.438 41.2908 185.464 40.8605 186.44C39.8842 188.649 39.6607 188.749 36.9468 188.31V188.31Z" fill="white"/>
|
||||
<path d="M41.4399 188.111C42.226 184.14 44.609 181.409 47.2402 178.828C47.8856 178.191 48.531 177.868 49.4743 178C52.5772 178.447 55.6552 178.968 58.5098 180.35C58.9235 180.549 59.3538 180.723 59.7261 180.979C61.2652 182.03 61.3645 183.213 59.8254 184.214C58.6257 184.992 57.277 185.621 55.9117 186.051C51.4436 187.441 46.8265 188.054 42.1681 188.277C41.9529 188.285 41.7295 188.186 41.4482 188.12L41.4399 188.111Z" fill="white"/>
|
||||
<path d="M30.7658 185.422C31.8828 185.422 33.0164 185.456 34.15 185.414C35.4573 185.365 35.78 185.042 35.7055 183.735C35.6311 182.361 35.4325 181.004 35.2836 179.639C35.2091 178.96 35.1181 178.29 34.994 177.372C35.9207 177.314 36.715 177.264 37.5424 177.214C38.7422 179.25 39.1394 181.186 38.0803 183.346C37.2446 185.034 36.5992 186.821 35.8545 188.575C29.1192 188.666 22.5908 188.17 16.1782 186.597C14.7219 186.242 13.2822 185.596 11.9914 184.818C10.5351 183.941 10.5599 182.75 11.9004 181.682C13.4229 180.466 15.2515 179.945 17.2869 179.539C17.9985 181.914 18.6936 184.223 19.4134 186.597C20.4312 186.523 21.4158 186.49 22.3839 186.374C23.6747 186.217 23.9395 185.886 23.7161 184.562C23.4761 183.13 23.1038 181.732 22.8225 180.309C22.7066 179.705 22.6901 179.076 22.5825 177.959C24.378 179.175 24.0884 180.656 24.4277 181.865C24.8 183.172 25.0979 184.496 25.4702 185.977C26.6204 185.795 27.7622 185.729 28.813 185.381C29.2019 185.257 29.5908 184.487 29.6074 183.999C29.6405 183.023 29.4171 182.03 29.3095 181.045C29.1937 180.011 29.0944 178.977 28.9537 177.537C29.7977 178.811 30.6334 182.766 30.7575 185.431L30.7658 185.422Z" fill="white"/>
|
||||
<path d="M34.9858 184.338H31.5685C30.8238 179.291 30.0874 174.269 29.3262 169.097C29.9385 168.965 30.3605 168.857 30.7907 168.783C31.1548 168.716 31.5271 168.692 32.1891 168.617C33.8439 173.673 34.4645 178.853 34.9775 184.347L34.9858 184.338Z" fill="#F0C3BA"/>
|
||||
<path d="M28.9622 184.338C27.8865 184.562 27.0922 184.727 25.9834 184.959C25.0153 180.739 24.0721 176.602 23.0957 172.316C23.7742 172.266 24.221 172.208 24.6595 172.208C26.604 172.208 27.1418 172.547 27.4645 174.409C28.0189 177.62 28.4409 180.847 28.9622 184.338V184.338Z" fill="#F9E6A6"/>
|
||||
<path d="M17.5186 175.75C20.0008 174.459 20.4725 174.583 21.0931 176.875C21.8212 179.572 22.4169 182.311 23.112 185.249C21.9619 185.364 21.0848 185.456 20.0091 185.563C18.8424 182.278 17.9157 179.051 17.5186 175.741V175.75Z" fill="#C8E2E2"/>
|
||||
<svg width="480" height="201" viewBox="0 0 480 201" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2300_19075)">
|
||||
<path d="M0 7.1117C0 3.24571 3.13401 0.111694 7 0.111694H473C476.866 0.111694 480 3.2457 480 7.11169V193.112C480 196.978 476.866 200.112 473 200.112H7.00001C3.13401 200.112 0 196.978 0 193.112V7.1117Z" fill="#EAE4FF" fill-opacity="0.2"/>
|
||||
<line opacity="0.5" x1="240.25" y1="0.116821" x2="240.25" y2="200.112" stroke="#E2E4F6" stroke-width="0.5"/>
|
||||
<path d="M240.54 86.5731L243.432 109.922L266.532 105.457L245.219 115.422L256.604 136.011L240.54 118.821L224.477 136.011L235.862 115.422L214.549 105.457L237.649 109.922L240.54 86.5731Z" fill="url(#paint0_radial_2300_19075)"/>
|
||||
<path d="M0 87.3805L4.44444 90.0277C8.88889 92.675 17.7778 97.9695 26.6667 97.1031C35.5556 96.2367 44.4444 89.2094 53.3333 89.0697C62.2222 88.93 71.1111 95.678 80 96.5298C88.8889 97.3816 97.7778 92.3373 106.667 91.9313C115.556 91.5252 124.444 95.7575 133.333 99.193C142.222 102.628 151.111 105.267 160 105.376C168.889 105.485 177.778 103.063 186.667 102.252C195.556 101.441 204.444 102.239 213.333 104.996C222.222 107.753 231.111 112.469 240 114.122C248.889 115.774 257.778 114.364 266.667 113.388C275.556 112.412 284.444 111.87 293.333 106.877C302.222 101.884 311.111 92.4385 320 93.8907C328.889 95.343 337.778 107.693 346.667 106.861C355.556 106.029 364.444 92.0165 373.333 87.3232C382.222 82.6299 391.111 87.2561 400 91.0168C408.889 94.7775 417.778 97.6726 426.667 98.2269C435.556 98.7812 444.444 96.9946 453.333 94.6317C462.222 92.2688 471.111 89.3296 475.556 87.86L480 86.3904" stroke="#E0DFFF" stroke-opacity="0.7" stroke-dasharray="2 2"/>
|
||||
<path d="M480 87.3805L475.556 90.0277C471.111 92.675 462.222 97.9695 453.333 97.1031C444.444 96.2367 435.556 89.2094 426.667 89.0697C417.778 88.93 408.889 95.678 400 96.5298C391.111 97.3816 382.222 92.3373 373.333 91.9313C364.444 91.5252 355.556 95.7575 346.667 99.193C337.778 102.628 328.889 105.267 320 105.376C311.111 105.485 302.222 103.063 293.333 102.252C284.444 101.441 275.556 102.239 266.667 104.996C257.778 107.753 248.889 112.469 240 114.122C231.111 115.774 222.222 114.364 213.333 113.388C204.444 112.412 195.556 111.87 186.667 106.877C177.778 101.884 168.889 92.4385 160 93.8907C151.111 95.343 142.222 107.693 133.333 106.861C124.444 106.029 115.556 92.0165 106.667 87.3232C97.7778 82.6299 88.8889 87.2561 80 91.0168C71.1111 94.7775 62.2222 97.6726 53.3333 98.2269C44.4444 98.7812 35.5555 96.9946 26.6666 94.6317C17.7777 92.2688 8.88889 89.3296 4.44444 87.86L-4.21269e-06 86.3904" stroke="#E0DFFF" stroke-width="2"/>
|
||||
<circle cx="240.54" cy="113.902" r="5.315" fill="#394EFF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_709_505" x1="94.8863" y1="0" x2="94.8863" y2="180.787" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#009490"/>
|
||||
<stop offset="1" stop-color="#009490" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_709_505">
|
||||
<rect width="210" height="200" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_709_505">
|
||||
<rect width="212" height="177" fill="white" transform="translate(-2 11)"/>
|
||||
<radialGradient id="paint0_radial_2300_19075" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(240.54 113.902) rotate(90) scale(27.3289)">
|
||||
<stop stop-color="#FFC12F"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_2300_19075">
|
||||
<path d="M0 7.1117C0 3.24571 3.13401 0.111694 7 0.111694H473C476.866 0.111694 480 3.2457 480 7.11169V193.112C480 196.978 476.866 200.112 473 200.112H7.00001C3.13401 200.112 0 196.978 0 193.112V7.1117Z" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 286 KiB After Width: | Height: | Size: 6.2 KiB |
Loading…
Add table
Reference in a new issue