import { Report , ReportIndicator , ReportIndicatorArithmetic } from '@/services/data/tuples/report-types' ; import { Subject } from '@/services/data/tuples/subject-types' ; import { AlertLabel } from '@/widgets/alert/widgets' ; import { ICON_ADD } from '@/widgets/basic/constants' ; import { ButtonInk } from '@/widgets/basic/types' ; import { useForceUpdate } from '@/widgets/basic/utils' ; import { useEventBus } from '@/widgets/events/event-bus' ; import { EventTypes } from '@/widgets/events/types' ; import { Lang } from '@/widgets/langs' ; import { ChartHelper } from '@/widgets/report/chart-utils' ; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ; import React from 'react' ; import { v4 } from 'uuid' ; import { useReportEditEventBus } from '../report-edit-event-bus' ; import { ReportEditEventTypes } from '../report-edit-event-bus-types' ; import { useChartType } from '../settings-effect/use-chart-type' ; import { Section } from '../settings-widgets/section' ; import { IndicatorEditor } from './indicator' ; import { AddIndicatorButton , AddIndicatorContainer } from './widgets' ; export const IndicatorsSection = ( props ) => { const { subject , report } = props ; const { chart : { type } } = report ; const { fire : fireGlobal } = useEventBus ( ) ; const { fire } = useReportEditEventBus ( ) ; const forceUpdate = useForceUpdate ( ) ; useChartType ( { report } ) ; const onDelete = ( indicator ) => { const index = report . indicators . indexOf ( indicator ) ; if ( index !== - 1 ) { report . indicators . splice ( index , 1 ) ; const chartUtils = ChartHelper [ type ] ; chartUtils . defendIndicatorMaxCount ( report ) ; fire ( ReportEditEventTypes . INDICATOR_REMOVED , report , indicator ) ; forceUpdate ( ) ; } } ; const onAddIndicatorClicked = ( ) => { const chartUtils = ChartHelper [ type ] ; if ( ! chartUtils . canAppendIndicators ( report ) ) { fireGlobal ( EventTypes . SHOW_ALERT , < AlertLabel > { Lang . CHART . CAN_NOT_ADD_INDICATOR } < /AlertLabel>); } else { const indicator = { columnId : '' , name : '' , arithmetic : ReportIndicatorArithmetic . NONE } ; report . indicators . push ( indicator ) ; fire ( ReportEditEventTypes . INDICATOR_ADDED , report , indicator ) ; forceUpdate ( ) ; } } ; /** defend */ const chartUtils = ChartHelper [ type ] ; if ( ! chartUtils . shouldHasIndicator ( ) ) { return null ; } chartUtils . defend ( report ) ; const canAddIndicator = chartUtils . canAppendIndicators ( report ) ; return < Section title = { Lang . CHART . SECTION_TITLE_INDICATORS } defaultExpanded = { true } > { report . indicators . map ( ( indicator , indicatorIndex ) => { if ( indicatorIndex >= chartUtils . getMaxIndicatorCount ( ) ) { return null ; } return < IndicatorEditor subject = { subject } report = { report } indicator = { indicator } onDelete = { onDelete } key = { v4 ( ) } / > ; } ) } { canAddIndicator ? < AddIndicatorContainer > < AddIndicatorButton ink = { ButtonInk . PRIMARY } onClick = { onAddIndicatorClicked } > < FontAwesomeIcon icon = { ICON_ADD } /> < span > { Lang . CHART . ADD_INDICATOR } < /span> < /AddIndicatorButton> < /AddIndicatorContainer> : null } < /Section>; } ;