-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
81c32bf
commit d012546
Showing
16 changed files
with
322 additions
and
54 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
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
40 changes: 40 additions & 0 deletions
40
src/Components/ContactNosiness/Components/ContactNoisinessChartView.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,40 @@ | ||
| import React from "react"; | ||
| import { useTheme } from "../../../Themes"; | ||
| import { createHtmlLegendPlugin } from "../../ContactEventStats/Components/htmlLegendPlugin"; | ||
| import { NoisinessDataset } from "../../TriggerNoisiness/TiggerNoisinessChart"; | ||
| import { Bar } from "react-chartjs-2"; | ||
| import { triggerEventsChartOptions } from "../../../helpers/getChartOptions"; | ||
| import { ChartOptions } from "chart.js"; | ||
| import EditIcon from "@skbkontur/react-icons/Edit"; | ||
|
|
||
| export const ContactNoisinessChartView: React.FC<{ | ||
| datasets: NoisinessDataset[]; | ||
| onEditClick: (label: string) => void; | ||
| }> = ({ datasets, onEditClick }) => { | ||
| const theme = useTheme(); | ||
|
|
||
| const htmlLegendPlugin = createHtmlLegendPlugin(true, null, EditIcon, onEditClick); | ||
|
|
||
| const data = { | ||
| labels: [""], | ||
| datasets, | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <div id="trigger-events-legend-container" /> | ||
| <Bar | ||
| data={data} | ||
| plugins={[htmlLegendPlugin]} | ||
| options={ | ||
| triggerEventsChartOptions( | ||
| "Contacts", | ||
| "Number of Events", | ||
| theme.chartGridLinesColor | ||
| ) as ChartOptions<"bar"> | ||
| } | ||
| style={{ maxHeight: "305px" }} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
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,96 @@ | ||
| import React, { useEffect, FC, useState } from "react"; | ||
| import { useLazyGetContactNoisinessQuery } from "../../services/ContactApi"; | ||
| import { getUnixTime, subDays, subHours } from "date-fns"; | ||
| import transformPageFromHumanToProgrammer from "../../logic/transformPageFromHumanToProgrammer"; | ||
| import { NoisinessDataset } from "../TriggerNoisiness/TiggerNoisinessChart"; | ||
| import { getColor } from "../Tag/Tag"; | ||
| import { Paging } from "@skbkontur/react-ui/components/Paging"; | ||
| import { Flexbox } from "../Flexbox/FlexBox"; | ||
| import { TimeRangeSelector } from "../TriggerNoisiness/Components/TimeRangeSelector"; | ||
| import { Spinner } from "@skbkontur/react-ui/components/Spinner"; | ||
| import { Contact } from "../../Domain/Contact"; | ||
| import { useModal } from "../../hooks/useModal"; | ||
| import { ContactNoisinessChartView } from "./Components/ContactNoisinessChartView"; | ||
| import ContactEditModal from "../ContactEditModal/ContactEditModal"; | ||
| import classNames from "classnames/bind"; | ||
|
|
||
| import styles from "../../../local_modules/styles/mixins.less"; | ||
|
|
||
| const cn = classNames.bind(styles); | ||
|
|
||
| export const ContactNoisinessChart: FC = () => { | ||
| const [page, setPage] = useState(1); | ||
| const maxDate = new Date(); | ||
| const minDate = subDays(new Date(), 7); | ||
| const [fromTime, setFromTime] = useState<Date | null>(subHours(maxDate, 1)); | ||
| const [untilTime, setUntilTime] = useState<Date | null>(maxDate); | ||
| const [trigger, result] = useLazyGetContactNoisinessQuery(); | ||
| const { data: contacts, isLoading, isFetching } = result; | ||
| const [datasets, setDatasets] = useState<NoisinessDataset[]>([]); | ||
| const [contact, setContact] = useState<Contact | null>(null); | ||
| const { isModalOpen, closeModal, openModal } = useModal(); | ||
| const pageCount = Math.ceil((contacts?.total ?? 0) / (contacts?.size ?? 1)); | ||
|
|
||
| const handleEditClick = (label: string) => { | ||
| const foundContact = contacts?.list.find((c) => c.name === label || c.value === label); | ||
| if (foundContact) { | ||
| setContact(foundContact); | ||
| openModal(); | ||
| } | ||
| }; | ||
|
|
||
| const fetchEvents = () => | ||
| trigger({ | ||
| from: fromTime && getUnixTime(fromTime), | ||
| to: untilTime && getUnixTime(untilTime), | ||
| page: transformPageFromHumanToProgrammer(page), | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (contacts?.list) { | ||
| setDatasets( | ||
| contacts.list.map(({ name, events_count, id, value }) => ({ | ||
| label: name ?? value, | ||
| data: [events_count], | ||
| backgroundColor: getColor(id).backgroundColor, | ||
| })) | ||
| ); | ||
| } | ||
| }, [contacts]); | ||
|
|
||
| useEffect(() => { | ||
| fetchEvents(); | ||
| }, [page]); | ||
|
|
||
| return ( | ||
| <> | ||
| {isLoading || isFetching ? ( | ||
| <Spinner className={cn("noisinessSpinner")} /> | ||
| ) : ( | ||
| <Flexbox direction="column" gap={18}> | ||
| {isModalOpen && ( | ||
| <ContactEditModal showOwner contactInfo={contact} onCancel={closeModal} /> | ||
| )} | ||
| <ContactNoisinessChartView datasets={datasets} onEditClick={handleEditClick} /> | ||
| <Flexbox direction="row" justify="space-between"> | ||
| <TimeRangeSelector | ||
| fromTime={fromTime} | ||
| untilTime={untilTime} | ||
| setFromTime={setFromTime} | ||
| setUntilTime={setUntilTime} | ||
| minDate={minDate} | ||
| maxDate={maxDate} | ||
| onApply={fetchEvents} | ||
| /> | ||
| <Paging | ||
| activePage={page} | ||
| pagesCount={pageCount} | ||
| onPageChange={setPage} | ||
| withoutNavigationHint | ||
| /> | ||
| </Flexbox> | ||
| </Flexbox> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
4 changes: 2 additions & 2 deletions
4
...ents/ResourceIDBadge/ResourceIDBadge.less → ...mponents/ResourceBadge/ResourceBadge.less
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
4 changes: 2 additions & 2 deletions
4
...nents/ResourceIDBadge/ResourceIDBadge.tsx → ...omponents/ResourceBadge/ResourceBadge.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
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
Oops, something went wrong.