-
-
Notifications
You must be signed in to change notification settings - Fork 278
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
c24ca60
commit e16552a
Showing
26 changed files
with
777 additions
and
83 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
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,16 @@ | ||
| import React from 'react'; | ||
|
|
||
| // Icon produced by FontAwesome project: https://github.com/FortAwesome/Font-Awesome/ | ||
| // License: CC-By 4.0 | ||
| export class CalendarIcon extends React.PureComponent { | ||
| render() { | ||
| return ( | ||
| <svg viewBox="0 0 448 512" {...this.props}> | ||
| <path | ||
| fill="currentColor" | ||
| d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z" | ||
| ></path> | ||
| </svg> | ||
| ); | ||
| } | ||
| } |
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,104 @@ | ||
| import React from 'react'; | ||
| import { Bar } from 'react-chartjs-2'; | ||
|
|
||
| import { CHART_COLOURS } from '../../config'; | ||
| import { useTagAPI } from '../../hooks/UseTagAPI'; | ||
| import { formatFilterCountriesData } from '../../utils/countries'; | ||
| import { formatTasksStatsData, formatTimelineTooltip } from '../../utils/formatChartJSData'; | ||
| import { ProjectFilterSelect, DateFilterPicker } from '../projects/filterSelectFields'; | ||
| import { TasksStatsSummary } from './tasksStatsSummary'; | ||
|
|
||
| const TasksStats = ({ query, setQuery, stats }) => { | ||
| const [campaignAPIState] = useTagAPI([], 'campaigns'); | ||
| const [countriesAPIState] = useTagAPI([], 'countries', formatFilterCountriesData); | ||
| const { | ||
| startDate: startDateInQuery, | ||
| endDate: endDateInQuery, | ||
| campaign: campaignInQuery, | ||
| location: countryInQuery, | ||
| } = query; | ||
|
|
||
| const fieldsetStyle = 'bn dib pv0-ns pv2 ph2-ns ph1 mh0 mb1'; | ||
| const titleStyle = 'dib ttu fw5 blue-grey mb1'; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="w-100 cf flex flex-wrap"> | ||
| <DateFilterPicker | ||
| fieldsetName="startDate" | ||
| fieldsetStyle={`${fieldsetStyle} fl`} | ||
| titleStyle={titleStyle} | ||
| selectedValue={startDateInQuery} | ||
| setQueryForChild={setQuery} | ||
| allQueryParamsForChild={query} | ||
| /> | ||
| <DateFilterPicker | ||
| fieldsetName="endDate" | ||
| fieldsetStyle={`${fieldsetStyle} fl`} | ||
| titleStyle={titleStyle} | ||
| selectedValue={endDateInQuery} | ||
| setQueryForChild={setQuery} | ||
| allQueryParamsForChild={query} | ||
| /> | ||
| <div className="w-40-l w-100 fl"> | ||
| <ProjectFilterSelect | ||
| fieldsetName="campaign" | ||
| fieldsetStyle={`${fieldsetStyle} w-50-ns w-100`} | ||
| titleStyle={titleStyle} | ||
| selectedTag={campaignInQuery} | ||
| options={campaignAPIState} | ||
| setQueryForChild={setQuery} | ||
| allQueryParamsForChild={query} | ||
| /> | ||
| <ProjectFilterSelect | ||
| fieldsetName="location" | ||
| fieldsetStyle={`${fieldsetStyle} w-50-ns w-100`} | ||
| titleStyle={titleStyle} | ||
| selectedTag={countryInQuery} | ||
| options={countriesAPIState} | ||
| setQueryForChild={setQuery} | ||
| allQueryParamsForChild={query} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="pt3 pb3 ph2 cf w-100 w-two-thirds-l"> | ||
| <TasksStatsChart stats={stats} /> | ||
| </div> | ||
| <div className="cf w-100"> | ||
| <TasksStatsSummary stats={stats} /> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const TasksStatsChart = ({ stats }) => { | ||
| const options = { | ||
| legend: { position: 'top', align: 'end', labels: { boxWidth: 12 } }, | ||
| tooltips: { | ||
| callbacks: { label: (tooltip, data) => formatTimelineTooltip(tooltip, data, false) }, | ||
| }, | ||
| scales: { | ||
| yAxes: [ | ||
| { | ||
| stacked: true, | ||
| ticks: { | ||
| beginAtZero: true, | ||
| }, | ||
| }, | ||
| ], | ||
| xAxes: [ | ||
| { | ||
| stacked: true, | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
| return ( | ||
| <Bar | ||
| data={formatTasksStatsData(stats, CHART_COLOURS.orange, CHART_COLOURS.red)} | ||
| options={options} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default TasksStats; |
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,41 @@ | ||
| import React from 'react'; | ||
| import { FormattedMessage, FormattedNumber } from 'react-intl'; | ||
|
|
||
| import messages from './messages'; | ||
| import { StatsCardContent } from '../statsCardContent'; | ||
| import { useTotalTasksStats } from '../../hooks/UseTotalTasksStats'; | ||
|
|
||
| export function TasksStatsSummary({ stats }) { | ||
| const totalStats = useTotalTasksStats(stats); | ||
| return ( | ||
| <> | ||
| <div className="pa2 w-25-l w-50-m w-100 fl"> | ||
| <div className="cf pa3 bg-white shadow-4"> | ||
| <StatsCardContent | ||
| label={<FormattedMessage {...messages.tasksMapped} />} | ||
| className="tc" | ||
| value={<FormattedNumber value={totalStats.mapped} />} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="pa2 w-25-l w-50-m w-100 fl"> | ||
| <div className="cf pa3 bg-white shadow-4"> | ||
| <StatsCardContent | ||
| label={<FormattedMessage {...messages.tasksValidated} />} | ||
| className="tc" | ||
| value={<FormattedNumber value={totalStats.validated} />} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="pa2 w-25-l w-100 fl"> | ||
| <div className="cf pa3 bg-white shadow-4"> | ||
| <StatsCardContent | ||
| label={<FormattedMessage {...messages.completedActions} />} | ||
| className="tc" | ||
| value={<FormattedNumber value={totalStats.mapped + totalStats.validated} />} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.