import { Report , ReportFunnel } from '@/services/data/tuples/report-types' ; import { detectFunnels } from '@/services/data/tuples/report-utils' ; import { Subject } from '@/services/data/tuples/subject-types' ; import { Topic } from '@/services/data/tuples/topic-types' ; import { Lang } from '@/widgets/langs' ; import React , { useEffect } from 'react' ; import { useConsoleEventBus } from '../../../../console-event-bus' ; import { ConsoleEventTypes } from '../../../../console-event-bus-types' ; import { Section } from '../settings-widgets/section' ; import { FunnelItem } from './funnel-item' ; import { FunnelDescription , FunnelTable , FunnelTableHeaderCell , NoFunnel } from './widgets' ; const merge = ( existed , detected ) : Array < ReportFunnel > => { return detected . map ( funnel => { const { columnId , type } = funnel ; const exist = existed . find ( funnel => funnel . columnId == columnId && funnel . type === type ) ; if ( exist ) { return exist ; } else { return funnel ; } } ) ; } ; export const FunnelDef = ( props ) => { const { subject , report } = props ; const { fire : fireConsole } = useConsoleEventBus ( ) ; useEffect ( ( ) => { fireConsole ( ConsoleEventTypes . ASK_AVAILABLE_TOPICS , ( availableTopics ) => { const existedFunnels = report . funnels || [ ] ; const detectedFunnels = detectFunnels ( subject , availableTopics ) ; report . funnels = merge ( existedFunnels , detectedFunnels ) ; } ) ; } , [ fireConsole , subject , report ] ) ; const funnels = report . funnels || [ ] ; return < Section title = { Lang . CHART . SECTION_TITLE_FUNNEL_DEFINITION } defaultExpanded = { true } > { funnels . length === 0 ? < NoFunnel > { Lang . CHART . NO_FUNNEL_DETECTED } < /NoFunnel> : < > < FunnelTable > < FunnelTableHeaderCell /> < FunnelTableHeaderCell > { Lang . FUNNEL . COLUMN } < /FunnelTableHeaderCell> < FunnelTableHeaderCell > { Lang . FUNNEL . RANGE } < /FunnelTableHeaderCell> < FunnelTableHeaderCell > { Lang . FUNNEL . ENABLED } < /FunnelTableHeaderCell> { funnels . map ( ( funnel , index ) => { return < FunnelItem key = { funnel . funnelId } subject = { subject } report = { report } funnel = { funnel } index = { index + 1 } />; } ) } < /FunnelTable> < />} < FunnelDescription > { Lang . CHART . FUNNEL_DESCRIPTION } < /FunnelDescription> < FunnelDescription > { Lang . CHART . FUNNEL_INSTANCE_DESCRIPTION } < /FunnelDescription> < /Section>; } ;