diff --git a/apps/condo/domains/analytics/components/CustomChartView.tsx b/apps/condo/domains/analytics/components/CustomChartView.tsx index 8f307bd81b6..e431491e0cf 100644 --- a/apps/condo/domains/analytics/components/CustomChartView.tsx +++ b/apps/condo/domains/analytics/components/CustomChartView.tsx @@ -14,7 +14,6 @@ import { ChartConfigResult } from './TicketChart' import type { CustomChartViewType, CustomChartMapType } from './CustomChart' import type { BaseSimpleChart } from '@condo/domains/common/components/BaseChart' - type BaseDataType = Array> interface ICustomChartViewProps< @@ -48,6 +47,9 @@ const EMPTY_CONTAINER_STYLE: React.CSSProperties = { alignItems: 'start', } +export const CHART_CONTAINER_HEIGHT = 300 +export const CHART_CONTAINER_BIG_HEIGHT = 350 + const CustomChartView = < DataType extends BaseDataType, diff --git a/apps/condo/domains/analytics/components/Dashboard.tsx b/apps/condo/domains/analytics/components/Dashboard.tsx index 9707a616d5c..c6b9c2a07ee 100644 --- a/apps/condo/domains/analytics/components/Dashboard.tsx +++ b/apps/condo/domains/analytics/components/Dashboard.tsx @@ -242,18 +242,23 @@ const TicketQualityControlDashboard = ({ data, translations, loading, organizati const TicketFeedbackTitle = intl.formatMessage({ id: 'pages.reports.ticketFeedbackCount' }) const [isOpen, setIsOpen] = useState(false) - const [isChartLoading, setIsChartLoading] = useState(true) + const [localData, setLocalData] = useState([]) const [tickets, setTickets] = useState([]) const [ticketsCount, setTicketsCount] = useState(0) const router = useRouter() + const { dateRange, SearchInput: DateRangeSearch } = useDateRangeFilter() const { values, SearchInput } = usePropertyFilter({ organizationId }) const { offset } = useMemo(() => parseQuery(router.query), [router.query]) const currentPageIndex = useMemo(() => getPageIndexFromOffset(offset, MODAL_TABLE_PAGE_SIZE), [offset]) - const { columns } = useTicketQualityTableColumns() + const [loadTicketFeedback, { loading: ticketFeedbackLoading }] = useLazyQuery(GET_OVERVIEW_DASHBOARD_MUTATION, { + onCompleted: (response) => { + setLocalData(get(response, 'result.overview.ticketQualityControlValue.tickets', [])) + }, + }) const [loadAllTickets, { loading: ticketsLoading }] = useLazyQuery(TicketGQL.GET_ALL_OBJS_WITH_COUNT_QUERY, { onCompleted: (response) => { setTickets(response.objs) @@ -263,10 +268,30 @@ const TicketQualityControlDashboard = ({ data, translations, loading, organizati useEffect(() => { if (isOpen) { + loadTicketFeedback({ + variables: { + data: { + dv: 1, + sender: getClientSideSenderInfo(), + where: { + organization: organizationId, + dateFrom: dateRange[0].toISOString(), + dateTo: dateRange[1].toISOString(), + propertyIds: values, + }, + groupBy: { aggregatePeriod: 'day' }, + entities: ['ticketQualityControlValue'], + }, + }, + }) loadAllTickets({ variables: { where: { organization: { id: organizationId }, + AND: [ + { createdAt_gte: dateRange[0].toISOString() }, + { createdAt_lte: dateRange[1].toISOString() }, + ], OR: [ { qualityControlValue_in: QUALITY_CONTROL_VALUES }, { feedbackValue_in: QUALITY_CONTROL_VALUES }, @@ -279,9 +304,7 @@ const TicketQualityControlDashboard = ({ data, translations, loading, organizati }, }) } - - setIsChartLoading(!isOpen) - }, [isOpen, organizationId, loadAllTickets, currentPageIndex, values]) + }, [isOpen, organizationId, loadAllTickets, currentPageIndex, values, dateRange, loadTicketFeedback]) const ticketCardContent = useMemo(() => { const goodKey = get(translations.find(t => t.value === TicketQualityControlValueType.Good), 'key') @@ -351,12 +374,15 @@ const TicketQualityControlDashboard = ({ data, translations, loading, organizati {loading ? : ticketCardContent} - - + + + + + {SearchInput} - + @@ -85,7 +85,7 @@ const PaymentByPropertyChart: IPaymentChartCard = ({ data, organizationId }) => diff --git a/apps/condo/domains/analytics/components/charts/payment/PaymentReceiptChart.tsx b/apps/condo/domains/analytics/components/charts/payment/PaymentReceiptChart.tsx index 2cea99a09e9..d02a7ffc9a3 100644 --- a/apps/condo/domains/analytics/components/charts/payment/PaymentReceiptChart.tsx +++ b/apps/condo/domains/analytics/components/charts/payment/PaymentReceiptChart.tsx @@ -5,7 +5,7 @@ import { Info } from '@open-condo/icons' import { useIntl } from '@open-condo/next/intl' import { Typography, Tooltip, Space } from '@open-condo/ui' -import { CustomChartView } from '@condo/domains/analytics/components/CustomChartView' +import { CustomChartView, CHART_CONTAINER_HEIGHT } from '@condo/domains/analytics/components/CustomChartView' import { PaymentReceiptDataMapper } from './dataMappers' @@ -36,7 +36,7 @@ const PaymentReceiptChart: IPaymentChartCard = ({ data }) => { viewMode='bar' data={data} mapperInstance={dataMapper} - chartConfig={{ chartOptions: { height: 300 }, animationEnabled: true }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: true }} /> diff --git a/apps/condo/domains/analytics/components/charts/payment/PaymentTotalChart.tsx b/apps/condo/domains/analytics/components/charts/payment/PaymentTotalChart.tsx index f2f0ccadfbc..539448354fa 100644 --- a/apps/condo/domains/analytics/components/charts/payment/PaymentTotalChart.tsx +++ b/apps/condo/domains/analytics/components/charts/payment/PaymentTotalChart.tsx @@ -4,7 +4,7 @@ import React, { useMemo } from 'react' import { useIntl } from '@open-condo/next/intl' import { Typography } from '@open-condo/ui' -import { CustomChartView } from '@condo/domains/analytics/components/CustomChartView' +import { CustomChartView, CHART_CONTAINER_HEIGHT } from '@condo/domains/analytics/components/CustomChartView' import { PaymentTotalDataMapper } from './dataMappers' @@ -28,7 +28,7 @@ const PaymentTotalChart: IPaymentChartCard = ({ data }) => { viewMode='bar' data={data} mapperInstance={dataMapper} - chartConfig={{ chartOptions: { height: 300 }, animationEnabled: true }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: true }} /> diff --git a/apps/condo/domains/analytics/components/charts/resident/ResidentByPropertyChart.tsx b/apps/condo/domains/analytics/components/charts/resident/ResidentByPropertyChart.tsx index ebdb28d380b..809203b7dfe 100644 --- a/apps/condo/domains/analytics/components/charts/resident/ResidentByPropertyChart.tsx +++ b/apps/condo/domains/analytics/components/charts/resident/ResidentByPropertyChart.tsx @@ -6,7 +6,7 @@ import { useLazyQuery } from '@open-condo/next/apollo' import { useIntl } from '@open-condo/next/intl' import { Typography, Tooltip } from '@open-condo/ui' -import { CustomChartView } from '@condo/domains/analytics/components/CustomChartView' +import { CustomChartView, CHART_CONTAINER_HEIGHT } from '@condo/domains/analytics/components/CustomChartView' import { CustomListView } from '@condo/domains/analytics/components/CustomListView' import { GET_OVERVIEW_DASHBOARD_MUTATION } from '@condo/domains/analytics/gql' import { usePropertyFilter, useDateRangeFilter } from '@condo/domains/analytics/hooks/useDashboardFilters' @@ -44,7 +44,7 @@ const ResidentByPropertyChart: IResidentChartCard = ({ data, organizationId }) = @@ -87,7 +87,7 @@ const ResidentByPropertyChart: IResidentChartCard = ({ data, organizationId }) = diff --git a/apps/condo/domains/analytics/components/charts/ticket/AllTicketsChart.tsx b/apps/condo/domains/analytics/components/charts/ticket/AllTicketsChart.tsx index ddacfc8edd0..4efe3683dda 100644 --- a/apps/condo/domains/analytics/components/charts/ticket/AllTicketsChart.tsx +++ b/apps/condo/domains/analytics/components/charts/ticket/AllTicketsChart.tsx @@ -4,6 +4,7 @@ import React from 'react' import { useIntl } from '@open-condo/next/intl' import { Typography } from '@open-condo/ui' +import { CHART_CONTAINER_HEIGHT } from '@condo/domains/analytics/components/CustomChartView' import TicketChartView from '@condo/domains/analytics/components/TicketChartView' import { AllTicketChartDataMapper } from './dataMappers' @@ -25,7 +26,7 @@ const AllTicketsChart: ITicketChartCard = ({ data }) => { mainGroup='status' viewMode='line' mapperInstance={AllTicketChartDataMapper} - chartConfig={{ chartOptions: { height: 300 }, animationEnabled: true }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: true }} /> diff --git a/apps/condo/domains/analytics/components/charts/ticket/TicketByCategoryChart.tsx b/apps/condo/domains/analytics/components/charts/ticket/TicketByCategoryChart.tsx index e3ab4997226..31d2a5ceec2 100644 --- a/apps/condo/domains/analytics/components/charts/ticket/TicketByCategoryChart.tsx +++ b/apps/condo/domains/analytics/components/charts/ticket/TicketByCategoryChart.tsx @@ -6,6 +6,7 @@ import { useLazyQuery } from '@open-condo/next/apollo' import { useIntl } from '@open-condo/next/intl' import { Typography } from '@open-condo/ui' +import { CHART_CONTAINER_HEIGHT } from '@condo/domains/analytics/components/CustomChartView' import { CustomListView } from '@condo/domains/analytics/components/CustomListView' import TicketChartView from '@condo/domains/analytics/components/TicketChartView' import { GET_OVERVIEW_DASHBOARD_MUTATION } from '@condo/domains/analytics/gql' @@ -64,7 +65,7 @@ const TicketByCategoryChart: ITicketChartCard = ({ data, organizationId }) => { data={localData} viewMode='bar' mapperInstance={TicketByCategoryDataMapper} - chartConfig={{ chartOptions: { height: 300 }, animationEnabled: true }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: true }} loading={loading} /> ), [localData, loading]) @@ -80,7 +81,7 @@ const TicketByCategoryChart: ITicketChartCard = ({ data, organizationId }) => { data={data} viewMode='bar' mapperInstance={TicketByCategoryDataMapper} - chartConfig={{ chartOptions: { height: 300 }, animationEnabled: true }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: true }} /> diff --git a/apps/condo/domains/analytics/components/charts/ticket/TicketByExecutorChart.tsx b/apps/condo/domains/analytics/components/charts/ticket/TicketByExecutorChart.tsx index 59ad6796917..08d36f4bfbe 100644 --- a/apps/condo/domains/analytics/components/charts/ticket/TicketByExecutorChart.tsx +++ b/apps/condo/domains/analytics/components/charts/ticket/TicketByExecutorChart.tsx @@ -20,6 +20,8 @@ import { getClientSideSenderInfo } from '@condo/domains/common/utils/userid.util import { TicketHorizontalBarDataMapper } from './dataMappers' +import { CHART_CONTAINER_BIG_HEIGHT } from '../../CustomChartView' + import type { ITicketChartCard } from './dataMappers' const mapperInstance = TicketHorizontalBarDataMapper([TicketGroupBy.Status, TicketGroupBy.Executor]) @@ -74,7 +76,7 @@ const TicketByExecutorChart: ITicketChartCard = ({ data, organizationId }) => { viewMode='bar' mapperInstance={mapperInstance} mainGroup='status' - chartConfig={{ chartOptions: { height: 350 }, animationEnabled: true }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_BIG_HEIGHT }, animationEnabled: true }} loading={loading} /> ), [localData, loading]) @@ -93,7 +95,7 @@ const TicketByExecutorChart: ITicketChartCard = ({ data, organizationId }) => { mainGroup='status' mapperInstance={mapperInstance} viewMode='bar' - chartConfig={{ chartOptions: { height: 350 }, animationEnabled: true }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_BIG_HEIGHT }, animationEnabled: true }} /> diff --git a/apps/condo/domains/analytics/components/charts/ticket/TicketByPropertyChart.tsx b/apps/condo/domains/analytics/components/charts/ticket/TicketByPropertyChart.tsx index d964f70a9c4..cc4f80177bd 100644 --- a/apps/condo/domains/analytics/components/charts/ticket/TicketByPropertyChart.tsx +++ b/apps/condo/domains/analytics/components/charts/ticket/TicketByPropertyChart.tsx @@ -7,6 +7,7 @@ import { useLazyQuery } from '@open-condo/next/apollo' import { useIntl } from '@open-condo/next/intl' import { Typography } from '@open-condo/ui' +import { CHART_CONTAINER_BIG_HEIGHT } from '@condo/domains/analytics/components/CustomChartView' import { CustomListView } from '@condo/domains/analytics/components/CustomListView' import TicketChartView from '@condo/domains/analytics/components/TicketChartView' import { GET_OVERVIEW_DASHBOARD_MUTATION } from '@condo/domains/analytics/gql' @@ -69,7 +70,7 @@ const TicketByPropertyChart: ITicketChartCard = ({ data, organizationId }) => { mainGroup='status' mapperInstance={mapperInstance} viewMode='bar' - chartConfig={{ chartOptions: { height: 350 }, animationEnabled: true }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_BIG_HEIGHT }, animationEnabled: true }} loading={loading} /> ), [localData, loading]) @@ -88,7 +89,7 @@ const TicketByPropertyChart: ITicketChartCard = ({ data, organizationId }) => { mainGroup='status' mapperInstance={mapperInstance} viewMode='bar' - chartConfig={{ chartOptions: { height: 350 }, animationEnabled: true }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_BIG_HEIGHT }, animationEnabled: true }} /> diff --git a/apps/condo/domains/analytics/components/charts/ticket/TicketQualityControlChart.tsx b/apps/condo/domains/analytics/components/charts/ticket/TicketQualityControlChart.tsx index a517b23f7c6..b0d06d3e537 100644 --- a/apps/condo/domains/analytics/components/charts/ticket/TicketQualityControlChart.tsx +++ b/apps/condo/domains/analytics/components/charts/ticket/TicketQualityControlChart.tsx @@ -1,5 +1,6 @@ import React from 'react' +import { CHART_CONTAINER_HEIGHT } from '@condo/domains/analytics/components/CustomChartView' import TicketChartView from '@condo/domains/analytics/components/TicketChartView' import { TicketQualityControlDataMapper } from './dataMappers' @@ -13,7 +14,7 @@ const TicketQualityControlChart: ITicketChartCard = ({ data, loading }) => { loading={loading} viewMode='bar' mapperInstance={TicketQualityControlDataMapper} - chartConfig={{ chartOptions: { height: 300 }, animationEnabled: false }} + chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: false }} /> ) }