-
Notifications
You must be signed in to change notification settings - Fork 77
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: charts (#6790) * chore: import react google charts * feat: create skeleton insights page * fix: regex for route matching for insight page * fix: layout of insights page * feat: dummy endpoint for all encrypted data * feat: queries to get all encrypted submission * fix: encrypted model find params * feat: get and decrypted all submission data * feat: get formfields * feat: generate charts * fix: typing of spacing * feat: create mapping for field to charts * feat: some upgrades to format charts * feat:wordcloud * fix: remove excess divider * fix: prefill rating values in bar chart * feat: add question number to chart title * feat: skeleton for changing chart to table * chore: add gstatic charts to csp policy * fix: rating average counting * feat: table toggle mode * feat: use icon button instead of toggle * feat: dummy date picker * fix: better date range picker styling * feat: date range filtering * fix: do not show rating if no values * fix: filtering by date and styling * fix: increase size of charts * fix: do not display wordcloud if no words * fix: alignment of wordcloud title * fix: typing for submission insights dto * refactor: make code more readable * fix: typing of render array * fix: do not randomize color for rating * feat: fix bar graph colours changing on refocus * feat: fix random word cloud movements on re-render * feat: address MR comments * feat: corrected types and fixed lint comments * feat: update average rating to account for division by 0 * feat: refactored filter function to remove redundant date parsing * feat: set max words for word cloud * fix: fe lint issue * refactor: cleanup constants * feat: add growthbook toggle * fix: flickering pie chart tooltip * fix: ordering of frontend/package.json * chore: add utils * feat: add empty insights field * fix: typeerror on admin submission * refactor: rename insights to charts * feat: add beta badge * refactor: secretkeyverification to common component for results and charts tab * fix: table charts ui * fix: charts secretkeyvewrification component * fix: remove stray space between charts and badge on tab title * fix: remove testing flag * chore: update copy for no charts generted * fix: endday not calculated correctly * feat(be): add limit and reverse chrono sort for submissions query * feat(fe): add forced redirect for email charts * chore: update charts supported field for better visual alignment with secret key section * feat: add marketing prompts for charts * chore: add copy for 1000 chart limit * chore: shorten copy * refactor: create daterangepicker helpers * refactor: use helpers from daterangepicker * feat: add no charts prompt * chore: update language to omit implication of uncertainty * fix: number typo * feat: correctly retrieve based on date range * fix: remove incorrect generic * fix: remove unnecessary comment --------- Co-authored-by: Timothee Groleau <timothee.groleau@gmail.com> Co-authored-by: sebastianwzq <sebastian@open.gov.sg> Co-authored-by: Ken <ken@open.gov.sg> Co-authored-by: tshuli <shuli@open.gov.sg> * fix: omit isVisible property from webhook response (#6907) fix: omit isVisible property * fix(markdown): refine regex to handle newlines after indentation groups (#6917) fix: refine regex to handle newlines after indentation groups * chore: bump version to v6.91.0 --------- Co-authored-by: Foo Chi Fa <59867455+foochifa@users.noreply.github.com> Co-authored-by: Timothee Groleau <timothee.groleau@gmail.com> Co-authored-by: sebastianwzq <sebastian@open.gov.sg> Co-authored-by: tshuli <shuli@open.gov.sg> Co-authored-by: wanlingt <56983748+wanlingt@users.noreply.github.com>
- Loading branch information
6 people
committed
Nov 21, 2023
1 parent
bfefc6d
commit d98f05c
Showing
42 changed files
with
1,599 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { format, isValid } from 'date-fns' | ||
|
|
||
| import { DateString } from '~shared/types' | ||
|
|
||
| import { DateRangeValue } from '~components/Calendar' | ||
|
|
||
| export const dateStringToDatePickerValue = (range: DateString[]) => { | ||
| const [start, end] = range | ||
| // Convert to Date objects | ||
| const startDate = new Date(start) | ||
| const endDate = new Date(end) | ||
| const result: (Date | null)[] = [null, null] | ||
| // Check if dates are valid | ||
| if (isValid(startDate)) { | ||
| result[0] = startDate | ||
| } | ||
| if (isValid(endDate)) { | ||
| result[1] = endDate | ||
| } | ||
| return result as DateRangeValue | ||
| } | ||
|
|
||
| export const datePickerValueToDateString = (range: DateRangeValue) => { | ||
| const [start, end] = range | ||
| const result: DateString[] = [] | ||
| if (start) { | ||
| result.push(format(start, 'yyyy-MM-dd') as DateString) | ||
| } | ||
| if (end) { | ||
| result.push(format(end, 'yyyy-MM-dd') as DateString) | ||
| } | ||
| return result | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export * from './DateRangePicker' | ||
| export * as dateRangePickerHelper from './helpers' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 85 additions & 0 deletions
85
frontend/src/features/admin-form/responses/ChartsPage/ChartsPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { useLocation } from 'react-router-dom' | ||
| import { Box, Container, Divider, Stack } from '@chakra-ui/react' | ||
|
|
||
| import { FormResponseMode } from '~shared/types/form' | ||
|
|
||
| import { ACTIVE_ADMINFORM_RESULTS_ROUTE_REGEX } from '~constants/routes' | ||
| import { useToast } from '~hooks/useToast' | ||
|
|
||
| import { useAdminForm } from '~features/admin-form/common/queries' | ||
|
|
||
| import { SecretKeyVerification } from '../components/SecretKeyVerification' | ||
| import { ResponsesPageSkeleton } from '../ResponsesPage/ResponsesPageSkeleton' | ||
| import { useStorageResponsesContext } from '../ResponsesPage/storage' | ||
|
|
||
| import { ChartsSvgr } from './UnlockedCharts/assets/svgr/ChartsSvgr' | ||
| import { ChartsSupportedFieldsInfoBox } from './UnlockedCharts/components/ChartsSupportedFieldsInfoBox' | ||
| import { EmptyChartsContainer } from './UnlockedCharts/components/EmptyChartsContainer' | ||
| import UnlockedCharts from './UnlockedCharts' | ||
|
|
||
| export const ChartsPage = (): JSX.Element => { | ||
| const { data: form, isLoading } = useAdminForm() | ||
| const { totalResponsesCount, secretKey } = useStorageResponsesContext() | ||
| const { pathname } = useLocation() | ||
|
|
||
| const toast = useToast({ status: 'danger' }) | ||
|
|
||
| if (isLoading) return <ResponsesPageSkeleton /> | ||
|
|
||
| if (!form) { | ||
| toast({ | ||
| description: | ||
| 'There was an error retrieving your form. Please try again later.', | ||
| }) | ||
| return <ResponsesPageSkeleton /> | ||
| } | ||
|
|
||
| // Charts is not available for Email response | ||
| // Since there's no entry to the charts page for Email mode we should | ||
| // forcefully redirect the user to the responses page | ||
| // we need to redirect to one level up, i.e., '../' | ||
| if (form.responseMode === FormResponseMode.Email) { | ||
| /** | ||
| * 0: "/admin/form/<form_id>/results/charts" | ||
| * 1: "<form_id>" | ||
| * 2: "/charts" | ||
| */ | ||
| const match = pathname.match(ACTIVE_ADMINFORM_RESULTS_ROUTE_REGEX) | ||
| const subroute = match?.[2] | ||
| if (subroute) { | ||
| const pathnameWithoutSubroute = pathname.replace(subroute, '') | ||
| window.location.replace(pathnameWithoutSubroute) | ||
| } | ||
| return <></> | ||
| } | ||
|
|
||
| if (totalResponsesCount === 0) { | ||
| return ( | ||
| <EmptyChartsContainer | ||
| title="No charts generated yet." | ||
| subtitle="Charts will be generated when you receive responses on your form." | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| return secretKey ? ( | ||
| <UnlockedCharts /> | ||
| ) : ( | ||
| <> | ||
| <SecretKeyVerification | ||
| hideResponseCount | ||
| heroSvg={<ChartsSvgr />} | ||
| ctaText="View charts" | ||
| label="Enter or upload Secret Key to view charts" | ||
| /> | ||
| <Container p={0} maxW="42.5rem"> | ||
| <Box mt="2rem" mb="0.5rem"> | ||
| <Divider /> | ||
| </Box> | ||
| <Stack> | ||
| <ChartsSupportedFieldsInfoBox /> | ||
| </Stack> | ||
| </Container> | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.