diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx index e4fe08fa4..37f7fb980 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx @@ -4,6 +4,7 @@ import {CARD_LIST, CARD_CATEGORIES, CardType} from './ExampleCards'; import {useStore} from 'App/mstore'; import Option from './Option'; import CardsLibrary from "Components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary"; +import {FUNNEL} from "App/constants/card"; interface SelectCardProps { onClose: (refresh?: boolean) => void; @@ -20,22 +21,33 @@ const SelectCard: React.FC = (props: SelectCardProps) => { const dashboardId = window.location.pathname.split('/')[3]; const [libraryQuery, setLibraryQuery] = React.useState(''); - const handleCardSelection = (card: string) => { - console.log('card', card); const selectedCard = CARD_LIST.find((c) => c.key === card) as CardType; - metricStore.merge({ + + const cardData: any = { metricType: selectedCard.cardType, name: selectedCard.title, metricOf: selectedCard.metricOf, - }); + }; + + if (selectedCard.cardType === FUNNEL) { + cardData.series = [] + cardData.series.filter = [] + } + + metricStore.merge(cardData); + metricStore.instance.resetDefaults(); onCard(); }; const cardItems = useMemo(() => { return CARD_LIST.filter((card) => card.category === selected).map((card) => (
- +
)); }, [selected]); @@ -58,11 +70,6 @@ const SelectCard: React.FC = (props: SelectCardProps) => { return ( <> - {/*
*/} -
{dashboardId ? (isLibrary ? "Add Card" : "Create Card") : "Select a template to create a card"} @@ -77,7 +84,6 @@ const SelectCard: React.FC = (props: SelectCardProps) => { setLibraryQuery(value)} onChange={(value) => setLibraryQuery(value.target.value)} style={{width: 200}} /> @@ -86,32 +92,17 @@ const SelectCard: React.FC = (props: SelectCardProps) => { {!isLibrary && } - {isLibrary ? : + + {isLibrary ? + : } ); }; -// interface HeaderProps { -// selectedCount?: number, -// onAdd?: () => void; -// title?: string; -// } -// -// const Header: React.FC = ({title = '', selectedCount = 0, onAdd = () => null}) => ( -//
-//
{title}
-//
-// {selectedCount > 0 ? ( -// -// ) : ''} -//
-//
-// ); - interface CategorySelectorProps { setSelected?: React.Dispatch>; selected?: string; diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx index 066c0bbf9..e87a4dd54 100644 --- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx +++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx @@ -105,6 +105,7 @@ function FilterSeries(props: Props) { } const onChangeEventsOrder = (_: any, {name, value}: any) => { + console.log(name, value) series.filter.updateKey(name, value); observeChanges(); }; @@ -129,7 +130,7 @@ function FilterSeries(props: Props) { )} {expandable && !expanded && ( - + setExpanded(!expanded)}/>
-
+
diff --git a/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx new file mode 100644 index 000000000..6f7f8a0b6 --- /dev/null +++ b/frontend/app/components/shared/Filters/FilterList/EventsOrder.tsx @@ -0,0 +1,55 @@ +import {observer} from "mobx-react-lite"; +import {Tooltip} from "UI"; +import {Segmented} from "antd"; +import React from "react"; + +const EventsOrder = observer((props: { + onChange: (e: any, v: any) => void, + filter: any, +}) => { + const {filter, onChange} = props; + const eventsOrderSupport = filter.eventsOrderSupport; + const options = [ + { + name: 'eventsOrder', + label: 'THEN', + value: 'then', + disabled: eventsOrderSupport && !eventsOrderSupport.includes('then'), + }, + { + name: 'eventsOrder', + label: 'AND', + value: 'and', + disabled: eventsOrderSupport && !eventsOrderSupport.includes('and'), + }, + { + name: 'eventsOrder', + label: 'OR', + value: 'or', + disabled: eventsOrderSupport && !eventsOrderSupport.includes('or'), + }, + ]; + + return
+
+ +
Events Order
+ +
+ + onChange(null, options.find((i) => i.value === v))} + value={filter.eventsOrder} + options={options} + /> +
; +}); + +export default EventsOrder; diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx index efd8dbd5a..c02d49d00 100644 --- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx +++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx @@ -1,12 +1,11 @@ -import {Segmented} from 'antd'; +import {Space} from 'antd'; import {List} from 'immutable'; import {GripHorizontal} from 'lucide-react'; import {observer} from 'mobx-react-lite'; import React, {useEffect} from 'react'; -import {Tooltip} from 'UI'; - import FilterItem from '../FilterItem'; +import EventsOrder from "Shared/Filters/FilterList/EventsOrder"; interface Props { filter?: any; // event/filter @@ -38,7 +37,6 @@ function FilterList(props: Props) { } = props; const filters = List(filter.filters); - const eventsOrderSupport = filter.eventsOrderSupport; const hasEvents = filters.filter((i: any) => i.isEvent).size > 0; const hasFilters = filters.filter((i: any) => !i.isEvent).size > 0; @@ -111,25 +109,6 @@ function FilterList(props: Props) { [draggedInd, hoveredItem, filters, props.onFilterMove] ); - const eventOrderItems = [ - { - label: 'THEN', - value: 'then', - disabled: eventsOrderSupport && !eventsOrderSupport.includes('then'), - - }, - { - label: 'AND', - value: 'and', - disabled: eventsOrderSupport && !eventsOrderSupport.includes('and'), - }, - { - label: 'OR', - value: 'or', - disabled: eventsOrderSupport && !eventsOrderSupport.includes('or'), - }, - ]; - const eventsNum = filters.filter((i: any) => i.isEvent).size return (
@@ -137,37 +116,16 @@ function FilterList(props: Props) { <>
- {filter.eventsHeader} + {filter.eventsHeader || 'EVENTS'}
- {!hideEventsOrder && ( -
-
- -
Events Order
- -
- - props.onChangeEventsOrder( - null, - eventOrderItems.find((i) => i.value === v) - ) - } - value={filter.eventsOrder} - options={eventOrderItems} - /> - {actions && actions.map((action, index) => ( -
{action}
- ))} -
- )} + + {!hideEventsOrder && } + {actions && actions.map((action, index) => ( +
{action}
+ ))} +
{filters.map((filter: any, filterIndex: number) => @@ -263,50 +221,3 @@ function FilterList(props: Props) { } export default observer(FilterList); - - -function EventsOrder(props: { - onChange: (e: any, v: any) => void, - filter: any, - eventsOrderSupport: any -}) { - const {filter, eventsOrderSupport, onChange} = props; - const options = [ - { - label: 'THEN', - value: 'then', - disabled: eventsOrderSupport && !eventsOrderSupport.includes('then'), - }, - { - label: 'AND', - value: 'and', - disabled: eventsOrderSupport && !eventsOrderSupport.includes('and'), - }, - { - label: 'OR', - value: 'or', - disabled: eventsOrderSupport && !eventsOrderSupport.includes('or'), - }, - ]; - - return
-
- -
Events Order
- -
- - onChange(null, options.find((i) => i.value === v))} - value={filter.eventsOrder} - options={options} - /> -
; -} diff --git a/frontend/app/mstore/types/filter.ts b/frontend/app/mstore/types/filter.ts index 8b77e4f5f..a1a4009fb 100644 --- a/frontend/app/mstore/types/filter.ts +++ b/frontend/app/mstore/types/filter.ts @@ -1,9 +1,13 @@ -import { makeAutoObservable, runInAction, observable, action } from "mobx" +import {makeAutoObservable, runInAction, observable, action} from "mobx" import FilterItem from "./filterItem" -import { filtersMap, conditionalFiltersMap } from 'Types/filter/newFilter'; +import {filtersMap, conditionalFiltersMap} from 'Types/filter/newFilter'; +import {FilterKey} from "Types/filter/filterType"; export default class Filter { - public static get ID_KEY():string { return "filterId" } + public static get ID_KEY(): string { + return "filterId" + } + filterId: string = '' name: string = '' filters: FilterItem[] = [] @@ -70,7 +74,7 @@ export default class Filter { fromJson(json: any) { this.name = json.name this.filters = json.filters.map((i: Record) => - new FilterItem(undefined, this.isConditional, this.isMobile).fromJson(i) + new FilterItem(undefined, this.isConditional, this.isMobile).fromJson(i) ); this.eventsOrder = json.eventsOrder return this @@ -79,7 +83,7 @@ export default class Filter { fromData(data) { this.name = data.name this.filters = data.filters.map((i: Record) => - new FilterItem(undefined, this.isConditional, this.isMobile).fromData(i) + new FilterItem(undefined, this.isConditional, this.isMobile).fromData(i) ) this.eventsOrder = data.eventsOrder return this @@ -121,4 +125,10 @@ export default class Filter { removeExcludeFilter(index: number) { this.excludes.splice(index, 1) } + + addFunnelDefaultFilters() { + this.filters = [] + this.addFilter({...filtersMap[FilterKey.CLICK], value: [''], operator: 'onAny'}) + this.addFilter({...filtersMap[FilterKey.CLICK], value: [''], operator: 'onAny'}) + } } diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index e33d8b61e..90606c99f 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -265,6 +265,16 @@ export default class Widget { }); } + resetDefaults() { + if (this.metricType === FUNNEL) { + this.series = []; + this.series.push(new FilterSeries()); + this.series[0].filter.addFunnelDefaultFilters(); + this.series[0].filter.eventsOrder = 'then'; + this.series[0].filter.eventsOrderSupport = ['then']; + } + } + exists() { return this.metricId !== undefined; }