{filter.label}
{filter.operator}
{filter.value.map((value: any, index: number) => (
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelTable.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelTable.tsx
new file mode 100644
index 000000000..c5c5bb9a2
--- /dev/null
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelTable.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { Table } from 'antd';
+import type { TableProps } from 'antd';
+import Widget from 'App/mstore/types/widget';
+import Funnel from 'App/mstore/types/funnel';
+import { ItemMenu } from 'UI';
+import { EllipsisVertical } from 'lucide-react';
+import { exportAntCsv } from '../../../utils';
+
+interface Props {
+ metric?: Widget;
+ data: { funnel: Funnel };
+ compData: { funnel: Funnel };
+}
+
+function FunnelTable(props: Props) {
+ const tableData = [
+ {
+ conversion: props.data.funnel.totalConversionsPercentage,
+ },
+ ];
+ const tableProps: TableProps['columns'] = [
+ {
+ title: 'Conversion %',
+ dataIndex: 'conversion',
+ key: 'conversion',
+ fixed: 'left',
+ width: 140,
+ render: (text: string, _, index) => (
+
+
Overall {index > 0 ? '(previous)' : ''}
+
{text}%
+
+ ),
+ },
+ ];
+
+ React.useEffect(() => {
+ const funnel = props.data.funnel;
+ funnel.stages.forEach((st, ind) => {
+ const title = `${st.label} ${st.operator} ${st.value.join(' or ')}`;
+ const wrappedTitle =
+ title.length > 40 ? title.slice(0, 40) + '...' : title;
+ tableProps.push({
+ title: wrappedTitle,
+ dataIndex: 'st_' + ind,
+ key: 'st_' + ind,
+ ellipsis: true,
+ width: 120,
+ });
+ tableData[0]['st_' + ind] = st.count;
+ });
+ if (props.compData) {
+ tableData.push({
+ conversion: props.compData.funnel.totalConversionsPercentage,
+ })
+ const compFunnel = props.compData.funnel;
+ compFunnel.stages.forEach((st, ind) => {
+ tableData[1]['st_' + ind] = st.count;
+ });
+ }
+ }, [props.data]);
+
+ return (
+
+
+
(
+ index > 0 ? 'opacity-70' : ''
+ )}
+ />
+
+
+
+ );
+}
+
+export function TableExporter({
+ tableData,
+ tableColumns,
+ filename,
+ top,
+ right,
+}: {
+ tableData: any;
+ tableColumns: any;
+ filename: string;
+ top?: string;
+ right?: string;
+}) {
+ const onClick = () => exportAntCsv(tableColumns, tableData, filename);
+ return (
+
+ }
+ />
+
+ );
+}
+
+export default FunnelTable;
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index a44335318..3ca5d1d78 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -82,7 +82,7 @@ function FunnelWidget(props: Props) {
}
show={!stages || stages.length === 0}
>
-
+
{!isWidget &&
shownStages.map((stage: any, index: any) => (
{
}
const base64 = base64Url.replace("-", "+").replace("_", "/");
return JSON.parse(atob(base64));
-};
\ No newline at end of file
+};
+
+function saveAsFile(blob: Blob, filename: string) {
+ const url = window.URL.createObjectURL(blob);
+ const a = document.createElement('a');
+
+ a.href = url;
+ a.download = filename;
+ a.click();
+ window.URL.revokeObjectURL(url);
+}
+
+export function exportAntCsv(tableColumns, tableData, filename = 'table.csv') {
+ console.log(tableColumns, tableData)
+ const headers = tableColumns.map(col => col.title).join(',');
+ const rows = tableData.map(row => {
+ return tableColumns
+ .map(col => {
+ const value = col.dataIndex ? row[col.dataIndex] : '';
+ return typeof value === 'string' ? `"${value.replace(/"/g, '""')}"` : value;
+ })
+ .join(',');
+ });
+
+ const csvContent = [headers, ...rows].join('\n');
+ console.log(csvContent)
+ // const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+
+ // saveAsFile(blob, filename);
+}
\ No newline at end of file