fix(condo): DOMA-7004 move chart height to constant & add filters to …

…TicketFeedback chart
open-condo-software · Sep 11, 2023 · 691e018 · 691e018
1 parent 1482618
commit 691e018
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 27 deletions.
diff --git 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<Record<string, unknown>>
 
 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
@@ -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 ? <Skeleton active paragraph={{ rows: 3 }} /> : ticketCardContent}
             </Card>
             <Modal width='big' title={QualityControlTitle} open={isOpen} onCancel={onCancel}>
-                <Row gutter={[0, 40]}>
-                    <Col span={24}>
+                <Row gutter={[24, 40]}>
+                    <Col span={12}>
+                        <DateRangeSearch disabled={ticketsLoading || ticketFeedbackLoading} />
+                    </Col>
+                    <Col span={12}>
                         {SearchInput}
                     </Col>
                     <Col span={24}>
-                        <TicketQualityControlChart data={[data, translations]} loading={isChartLoading} />
+                        <TicketQualityControlChart data={[localData, translations]} loading={ticketFeedbackLoading} />
                     </Col>
                     <Col span={24}>
                         <Table

diff --git a/apps/condo/domains/analytics/components/charts/payment/PaymentByPropertyChart.tsx b/apps/condo/domains/analytics/components/charts/payment/PaymentByPropertyChart.tsx
@@ -6,7 +6,7 @@ import { useLazyQuery } from '@open-condo/next/apollo'
 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 { 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'
@@ -63,7 +63,7 @@ const PaymentByPropertyChart: IPaymentChartCard = ({ data, organizationId }) =>
         <CustomChartView
             viewMode='pie'
             mapperInstance={dataMapper}
-            chartConfig={{ chartOptions: { height: 300 }, animationEnabled: true }}
+            chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: true }}
             data={localData}
             loading={loading}
         />
@@ -85,7 +85,7 @@ const PaymentByPropertyChart: IPaymentChartCard = ({ data, organizationId }) =>
                     <CustomChartView
                         viewMode='pie'
                         mapperInstance={dataMapper}
-                        chartConfig={{ chartOptions: { height: 300 }, animationEnabled: true }}
+                        chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: true }}
                         data={data}
                     />
                 </Col>

diff --git 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 }}
                 />
             </Col>
         </Row>

diff --git 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 }}
                 />
             </Col>
         </Row>

diff --git 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 }) =
         <CustomChartView
             data={localData}
             viewMode='pie'
-            chartConfig={{ chartOptions: { height: 300 }, animationEnabled: true }}
+            chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: true }}
             mapperInstance={dataMapper}
             loading={loading}
         />
@@ -87,7 +87,7 @@ const ResidentByPropertyChart: IResidentChartCard = ({ data, organizationId }) =
                     <CustomChartView
                         data={data}
                         viewMode='pie'
-                        chartConfig={{ chartOptions: { height: 300 }, animationEnabled: true }}
+                        chartConfig={{ chartOptions: { height: CHART_CONTAINER_HEIGHT }, animationEnabled: true }}
                         mapperInstance={dataMapper}
                     />
                 </Col>

diff --git 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 }}
                 />
             </Col>
         </Row>

diff --git 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 }}
                     />
                 </Col>
             </Row>

diff --git 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 }}
                     />
                 </Col>
             </Row>

diff --git 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 }}
                     />
                 </Col>
             </Row>

diff --git 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 }}
         />
     )
 }