import { ICON_COLLAPSE_PANEL , ICON_EXPAND_PANEL } from '@/widgets/basic/constants' ; import { Lang } from '@/widgets/langs' ; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ; import { useEffect , useState } from 'react' ; import { v4 } from 'uuid' ; import { AggregateArithmeticLabel } from '../../utils' ; import { Chart } from './chart' ; import { buildChartUsages } from './chart-utils' ; import { InspectionChartsEventBusProvider , useInspectionChartsEventBus } from './inspection-charts-event-bus' ; import { InspectionChartsEventTypes } from './inspection-charts-event-bus-types' ; import { ChartParams } from './types' ; import { UsageSelectionButtons } from './usage-selection-buttons' ; import { ChartGroup , ChartGroupButton , ChartGroupButtons , ChartGroupTitle } from './widgets/widgets' ; const ExpansionButton = ( ) => { const { fire } = useInspectionChartsEventBus ( ) ; const [ expanded , setExpanded ] = useState ( true ) ; const onToggleExpandClicked = ( ) => { fire ( InspectionChartsEventTypes . TOGGLE_PANEL , ! expanded ) ; setExpanded ( ! expanded ) ; } ; return < ChartGroupButton onClick = { onToggleExpandClicked } > < FontAwesomeIcon icon = { expanded ? ICON_COLLAPSE_PANEL : ICON_EXPAND_PANEL } /> < /ChartGroupButton>; } ; const AllCharts = ( props ) => { const { inspection , arithmetic } = props ; const { on , off } = useInspectionChartsEventBus ( ) ; const [ expanded , setExpanded ] = useState ( true ) ; useEffect ( ( ) => { const onTogglePanel = ( visible ) => { setExpanded ( visible ) ; } ; on ( InspectionChartsEventTypes . TOGGLE_PANEL , onTogglePanel ) ; return ( ) => { off ( InspectionChartsEventTypes . TOGGLE_PANEL , onTogglePanel ) ; } ; } , [ on , off ] ) ; if ( ! expanded ) { return null ; } const usages = buildChartUsages ( inspection , arithmetic ) ; return < > { usages . map ( usage => { return < Chart { ... props } usage = { usage } usages = { usages } key = { v4 ( ) } / > ; } ) } < />; } ; export const ArithmeticChart = ( props ) => { const { arithmetic } = props ; return < InspectionChartsEventBusProvider > < ChartGroup > < ChartGroupTitle > < span > { Lang . INDICATOR_WORKBENCH . INSPECTION . VISUALIZATION_LABEL } - { AggregateArithmeticLabel [ arithmetic ] } < /span> < ChartGroupButtons > < UsageSelectionButtons { ... props } / > < ExpansionButton /> < /ChartGroupButtons> < /ChartGroupTitle> < AllCharts { ... props } /> < /ChartGroup> < /InspectionChartsEventBusProvider>; } ;