Tampereen Seutuselvitysraportti osa 2: ikäjaotteluarvojen CSV

frontend/src/employee-frontend/components/reports/TampereRegionalSurvey.tsx

@@ -4,10 +4,14 @@
 
 import orderBy from 'lodash/orderBy'
 import range from 'lodash/range'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
+import styled from 'styled-components'
 
 import { useTranslation } from 'employee-frontend/state/i18n'
-import { RegionalSurveyReportResult } from 'lib-common/generated/api-types/reports'
+import {
+  RegionalSurveyReportAgeStatisticsResult,
+  RegionalSurveyReportResult
+} from 'lib-common/generated/api-types/reports'
 import LocalDate from 'lib-common/local-date'
 import { constantQuery, useQueryResult } from 'lib-common/query'
 import Title from 'lib-components/atoms/Title'
@@ -27,12 +31,25 @@ import { FlexRow } from '../common/styled/containers'
 
 import ReportDownload from './ReportDownload'
 import { FilterLabel, FilterRow } from './common'
-import { tampereRegionalSurveyReport } from './queries'
+import {
+  tampereRegionalSurveyAgeReport,
+  tampereRegionalSurveyMonthlyReport
+} from './queries'
 
 interface ReportQueryParams {
   year: number
 }
 
+interface ReportSelection {
+  monthlyStatistics: boolean
+  ageStatistics: boolean
+}
+
+const emptyReportSelection = {
+  monthlyStatistics: false,
+  ageStatistics: false
+}
+
 export default React.memo(function TampereRegionalSurveyReport() {
   const { i18n } = useTranslation()
   const t = i18n.reports.tampereRegionalSurvey
@@ -52,35 +69,66 @@ export default React.memo(function TampereRegionalSurveyReport() {
     null
   )
 
-  const emptyValue: RegionalSurveyReportResult = {
+  const emptyMonthlyValue: RegionalSurveyReportResult = {
     monthlyCounts: [],
     year: 0
   }
 
-  const reportResult = useQueryResult(
-    activeParams
-      ? tampereRegionalSurveyReport(activeParams)
-      : constantQuery(emptyValue)
+  const emptyAgeValue: RegionalSurveyReportAgeStatisticsResult = {
+    ageStatistics: [],
+    year: 0
+  }
+
+  const [reportSelection, setReportSelection] =
+    useState<ReportSelection>(emptyReportSelection)
+
+  const monthlyStatisticsResult = useQueryResult(
+    activeParams && reportSelection.monthlyStatistics
+      ? tampereRegionalSurveyMonthlyReport(activeParams)
+      : constantQuery(emptyMonthlyValue)
   )
 
-  const fetchResults = () => {
+  const ageStatisticsResult = useQueryResult(
+    activeParams && reportSelection.ageStatistics
+      ? tampereRegionalSurveyAgeReport(activeParams)
+      : constantQuery(emptyAgeValue)
+  )
+
+  const fetchMonthlyResults = useCallback(() => {
     if (selectedYear) {
-      setActiveParams({
-        year: selectedYear
-      })
+      setReportSelection({ ...reportSelection, monthlyStatistics: true })
+      setActiveParams({ year: selectedYear })
     }
-  }
+  }, [selectedYear, reportSelection])
 
-  const sortedReportResult = useMemo(
+  const fetchAgeResults = useCallback(() => {
+    if (selectedYear) {
+      setReportSelection({ ...reportSelection, ageStatistics: true })
+      setActiveParams({ year: selectedYear })
+    }
+  }, [selectedYear, reportSelection])
+
+  const changeYear = useCallback(
+    (newYear: number | null) => {
+      if (selectedYear !== newYear) {
+        setSelectedYear(newYear)
+        setReportSelection(emptyReportSelection)
+      }
+    },
+    [selectedYear]
+  )
+
+  const sortedMonthlyReportResult = useMemo(
     () =>
-      reportResult.map((result) => {
+      monthlyStatisticsResult.map((result) => {
         return {
           year: result.year,
           monthlyCounts: orderBy(result.monthlyCounts, [(r) => r.month])
         }
       }),
-    [reportResult]
+    [monthlyStatisticsResult]
   )
+
   return (
     <Container>
       <ReturnButton label={i18n.common.goBack} />
@@ -93,30 +141,26 @@ export default React.memo(function TampereRegionalSurveyReport() {
               fullWidth
               items={yearOptions}
               selectedItem={selectedYear}
-              onChange={setSelectedYear}
+              onChange={changeYear}
               placeholder={i18n.common.year}
             />
           </FlexRow>
         </FilterRow>
-        <Gap />
-        <FilterRow>
-          <Button
-            primary
-            disabled={!selectedYear}
-            text={i18n.common.search}
-            onClick={fetchResults}
-            data-qa="send-button"
-          />
-        </FilterRow>
         <Gap size="m" />
-
-        {renderResult(sortedReportResult, (result) => {
-          return result.monthlyCounts.length > 0 &&
-            result.year === selectedYear ? (
-            <FixedSpaceColumn spacing="L">
-              <H2>{`${t.reportLabel} ${result.year}`}</H2>
-              <FixedSpaceRow spacing="L">
-                <Label>{t.monthlyReport}</Label>
+        <FixedSpaceColumn spacing="xs">
+          {!!selectedYear && <H2>{`${t.reportLabel} ${selectedYear}`}</H2>}
+          <ReportRow spacing="L" alignItems="center" fullWidth>
+            <ReportLabel>{t.monthlyReport}</ReportLabel>
+            <Button
+              primary
+              disabled={!selectedYear}
+              text={i18n.common.search}
+              onClick={fetchMonthlyResults}
+              data-qa="fetch-monthly-button"
+            />
+            {renderResult(sortedMonthlyReportResult, (result) => {
+              return result.monthlyCounts.length > 0 &&
+                result.year === selectedYear ? (
                 <ReportDownload
                   data={result.monthlyCounts.map((row) => ({
                     ...row,
@@ -159,11 +203,92 @@ export default React.memo(function TampereRegionalSurveyReport() {
                   ]}
                   filename={`${t.reportLabel} ${selectedYear} - ${t.monthlyReport}.csv`}
                 />
-              </FixedSpaceRow>
-            </FixedSpaceColumn>
-          ) : null
-        })}
+              ) : null
+            })}
+          </ReportRow>
+          <ReportRow spacing="L" alignItems="center" fullWidth>
+            <ReportLabel>{t.ageStatisticsReport}</ReportLabel>
+            <Button
+              primary
+              disabled={!selectedYear}
+              text={i18n.common.search}
+              onClick={fetchAgeResults}
+              data-qa="fetch-age-button"
+            />
+            {renderResult(ageStatisticsResult, (result) => {
+              return result.ageStatistics.length > 0 &&
+                result.year === selectedYear ? (
+                <ReportDownload
+                  data={result.ageStatistics}
+                  headers={[
+                    {
+                      label: t.ageStatisticColumns.voucherUnder3Count,
+                      key: 'voucherUnder3Count'
+                    },
+                    {
+                      label: t.ageStatisticColumns.voucherOver3Count,
+                      key: 'voucherOver3Count'
+                    },
+                    {
+                      label: t.ageStatisticColumns.purchasedUnder3Count,
+                      key: 'purchasedUnder3Count'
+                    },
+                    {
+                      label: t.ageStatisticColumns.purchasedOver3Count,
+                      key: 'purchasedOver3Count'
+                    },
+                    {
+                      label: t.ageStatisticColumns.clubUnder3Count,
+                      key: 'clubUnder3Count'
+                    },
+                    {
+                      label: t.ageStatisticColumns.clubOver3Count,
+                      key: 'clubOver3Count'
+                    },
+                    {
+                      label: t.ageStatisticColumns.nonNativeLanguageUnder3Count,
+                      key: 'nonNativeLanguageUnder3Count'
+                    },
+                    {
+                      label: t.ageStatisticColumns.nonNativeLanguageOver3Count,
+                      key: 'nonNativeLanguageOver3Count'
+                    },
+                    {
+                      label: t.ageStatisticColumns.effectiveCareDaysUnder3Count,
+                      key: 'effectiveCareDaysUnder3Count'
+                    },
+                    {
+                      label: t.ageStatisticColumns.effectiveCareDaysOver3Count,
+                      key: 'effectiveCareDaysOver3Count'
+                    },
+                    {
+                      label:
+                        t.ageStatisticColumns
+                          .effectiveFamilyDaycareDaysUnder3Count,
+                      key: 'effectiveFamilyDaycareDaysUnder3Count'
+                    },
+                    {
+                      label:
+                        t.ageStatisticColumns
+                          .effectiveFamilyDaycareDaysOver3Count,
+                      key: 'effectiveFamilyDaycareDaysOver3Count'
+                    }
+                  ]}
+                  filename={`${t.reportLabel} ${selectedYear} - ${t.ageStatisticsReport}.csv`}
+                />
+              ) : null
+            })}
+          </ReportRow>
+        </FixedSpaceColumn>
       </ContentArea>
     </Container>
   )
 })
+
+const ReportLabel = styled(Label)`
+  width: 200px;
+`
+
+const ReportRow = styled(FixedSpaceRow)`
+  min-height: 105px;
+`

frontend/src/employee-frontend/components/reports/queries.ts

@@ -35,7 +35,8 @@ import {
   getPreschoolApplicationReport,
   getServiceVoucherReportForAllUnits,
   getStartingPlacementsReport,
-  getTampereRegionalSurvey,
+  getTampereRegionalSurveyAgeStatistics,
+  getTampereRegionalSurveyMonthlyStatistics,
   getTitaniaErrorsReport,
   getUnitsReport,
   getVardaChildErrorsReport,
@@ -144,4 +145,10 @@ export const startingPlacementsReportQuery = q.query(
   getStartingPlacementsReport
 )
 
-export const tampereRegionalSurveyReport = q.query(getTampereRegionalSurvey)
+export const tampereRegionalSurveyMonthlyReport = q.query(
+  getTampereRegionalSurveyMonthlyStatistics
+)
+
+export const tampereRegionalSurveyAgeReport = q.query(
+  getTampereRegionalSurveyAgeStatistics
+)

frontend/src/employee-frontend/generated/api-clients/reports.ts

@@ -64,6 +64,7 @@ import { PreschoolUnitsReportRow } from 'lib-common/generated/api-types/reports'
 import { PresenceReportRow } from 'lib-common/generated/api-types/reports'
 import { ProviderType } from 'lib-common/generated/api-types/daycare'
 import { RawReportRow } from 'lib-common/generated/api-types/reports'
+import { RegionalSurveyReportAgeStatisticsResult } from 'lib-common/generated/api-types/reports'
 import { RegionalSurveyReportResult } from 'lib-common/generated/api-types/reports'
 import { Report } from 'lib-common/generated/api-types/reports'
 import { ServiceNeedReportRow } from 'lib-common/generated/api-types/reports'
@@ -1061,9 +1062,29 @@ export async function getStartingPlacementsReport(
 
 
 /**
-* Generated from fi.espoo.evaka.reports.TampereRegionalSurvey.getTampereRegionalSurvey
+* Generated from fi.espoo.evaka.reports.TampereRegionalSurvey.getTampereRegionalSurveyAgeStatistics
 */
-export async function getTampereRegionalSurvey(
+export async function getTampereRegionalSurveyAgeStatistics(
+  request: {
+    year: number
+  }
+): Promise<RegionalSurveyReportAgeStatisticsResult> {
+  const params = createUrlSearchParams(
+    ['year', request.year.toString()]
+  )
+  const { data: json } = await client.request<JsonOf<RegionalSurveyReportAgeStatisticsResult>>({
+    url: uri`/employee/reports/tampere-regional-survey/age-statistics`.toString(),
+    method: 'GET',
+    params
+  })
+  return json
+}
+
+
+/**
+* Generated from fi.espoo.evaka.reports.TampereRegionalSurvey.getTampereRegionalSurveyMonthlyStatistics
+*/
+export async function getTampereRegionalSurveyMonthlyStatistics(
   request: {
     year: number
   }
@@ -1072,7 +1093,7 @@ export async function getTampereRegionalSurvey(
     ['year', request.year.toString()]
   )
   const { data: json } = await client.request<JsonOf<RegionalSurveyReportResult>>({
-    url: uri`/employee/reports/tampere-regional-survey/monthly`.toString(),
+    url: uri`/employee/reports/tampere-regional-survey/monthly-statistics`.toString(),
     method: 'GET',
     params
   })

frontend/src/lib-common/generated/api-types/reports.ts

@@ -36,6 +36,24 @@ import { TitaniaErrorsId } from './shared'
 import { UUID } from '../../types'
 import { VoucherValueDecisionId } from './shared'
 
+/**
+* Generated from fi.espoo.evaka.reports.TampereRegionalSurvey.AgeStatisticsResult
+*/
+export interface AgeStatisticsResult {
+  clubOver3Count: number
+  clubUnder3Count: number
+  effectiveCareDaysOver3Count: number
+  effectiveCareDaysUnder3Count: number
+  effectiveFamilyDaycareDaysOver3Count: number
+  effectiveFamilyDaycareDaysUnder3Count: number
+  nonNativeLanguageOver3Count: number
+  nonNativeLanguageUnder3Count: number
+  purchasedOver3Count: number
+  purchasedUnder3Count: number
+  voucherOver3Count: number
+  voucherUnder3Count: number
+}
+
 /**
 * Generated from fi.espoo.evaka.reports.ApplicationsReportRow
 */
@@ -822,6 +840,14 @@ export interface ReferenceCount {
   table: string
 }
 
+/**
+* Generated from fi.espoo.evaka.reports.TampereRegionalSurvey.RegionalSurveyReportAgeStatisticsResult
+*/
+export interface RegionalSurveyReportAgeStatisticsResult {
+  ageStatistics: AgeStatisticsResult[]
+  year: number
+}
+
 /**
 * Generated from fi.espoo.evaka.reports.TampereRegionalSurvey.RegionalSurveyReportMonthlyStatistics
 */