Added order control to countries graph

This commit is contained in:
Alejandro Celaya 2018-10-28 22:54:08 +01:00
parent 6634fc41c5
commit 368de2b4c7
8 changed files with 119 additions and 34 deletions

View file

@ -43,10 +43,7 @@ export class ShortUrlsListComponent extends React.Component {
}); });
}; };
handleOrderBy = (orderField, orderDir) => { handleOrderBy = (orderField, orderDir) => {
this.setState({ this.setState({ orderField, orderDir });
orderDir,
orderField: orderDir !== undefined ? orderField : undefined,
});
this.refreshList({ orderBy: { [orderField]: orderDir } }); this.refreshList({ orderBy: { [orderField]: orderDir } });
}; };
orderByColumn = (columnName) => () => orderByColumn = (columnName) => () =>

View file

@ -5,39 +5,64 @@ import PropTypes from 'prop-types';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp'; import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown'; import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
import classNames from 'classnames';
import { determineOrderDir } from '../utils/utils'; import { determineOrderDir } from '../utils/utils';
import './SortingDropdown.scss'; import './SortingDropdown.scss';
const propTypes = { const propTypes = {
items: PropTypes.object, items: PropTypes.object.isRequired,
orderField: PropTypes.string, orderField: PropTypes.string,
orderDir: PropTypes.oneOf([ 'ASC', 'DESC' ]), orderDir: PropTypes.oneOf([ 'ASC', 'DESC' ]),
onChange: PropTypes.func, onChange: PropTypes.func.isRequired,
isButton: PropTypes.bool,
right: PropTypes.bool,
};
const defaultProps = {
isButton: true,
right: false,
}; };
const SortingDropdown = ({ items, orderField, orderDir, onChange }) => ( const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, right }) => {
<UncontrolledDropdown> const handleItemClick = (fieldKey) => () => {
<DropdownToggle caret className="btn-block">Order by</DropdownToggle> const newOrderDir = determineOrderDir(fieldKey, orderField, orderDir);
<DropdownMenu className="sorting-dropdown__menu">
{toPairs(items).map(([ fieldKey, fieldValue ]) => ( onChange(newOrderDir ? fieldKey : undefined, newOrderDir);
<DropdownItem };
key={fieldKey}
active={orderField === fieldKey} return (
onClick={() => onChange(fieldKey, determineOrderDir(fieldKey, orderField, orderDir))} <UncontrolledDropdown>
> <DropdownToggle
{fieldValue} caret
{orderField === fieldKey && ( color={isButton ? 'secondary' : 'link'}
<FontAwesomeIcon className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
icon={orderDir === 'ASC' ? caretUpIcon : caretDownIcon} >
className="sorting-dropdown__sort-icon" Order by
/> </DropdownToggle>
)} <DropdownMenu
right={right}
className={classNames('sorting-dropdown__menu', { 'sorting-dropdown__menu--link': !isButton })}
>
{toPairs(items).map(([ fieldKey, fieldValue ]) => (
<DropdownItem key={fieldKey} active={orderField === fieldKey} onClick={handleItemClick(fieldKey)}>
{fieldValue}
{orderField === fieldKey && (
<FontAwesomeIcon
icon={orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
className="sorting-dropdown__sort-icon"
/>
)}
</DropdownItem>
))}
<DropdownItem divider />
<DropdownItem onClick={() => onChange()}>
<i>Clear selection</i>
</DropdownItem> </DropdownItem>
))} </DropdownMenu>
</DropdownMenu> </UncontrolledDropdown>
</UncontrolledDropdown> );
); };
SortingDropdown.propTypes = propTypes; SortingDropdown.propTypes = propTypes;
SortingDropdown.defaultProps = defaultProps;
export default SortingDropdown; export default SortingDropdown;

View file

@ -2,7 +2,15 @@
width: 100%; width: 100%;
} }
.sorting-dropdown__menu--link.sorting-dropdown__menu--link {
min-width: 11rem;
}
.sorting-dropdown__sort-icon { .sorting-dropdown__sort-icon {
margin: 3.5px 0 0; margin: 3.5px 0 0;
float: right; float: right;
} }
.sorting-dropdown__paddingless.sorting-dropdown__paddingless {
padding: 0;
}

View file

@ -0,0 +1,49 @@
import React from 'react';
import PropTypes from 'prop-types';
import { fromPairs, head, keys, prop, reverse, sortBy, toPairs } from 'ramda';
import SortingDropdown from '../utils/SortingDropdown';
import GraphCard from './GraphCard';
export default class CountriesGraph extends React.Component {
static propTypes = {
stats: PropTypes.any,
};
state = {
orderField: undefined,
orderDir: undefined,
};
render() {
const items = {
name: 'Country name',
amount: 'Visits amount',
};
const { stats } = this.props;
const sortStats = () => {
if (!this.state.orderField) {
return stats;
}
const sortedPairs = sortBy(prop(this.state.orderField === head(keys(items)) ? 0 : 1), toPairs(stats));
return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs));
};
return (
<GraphCard stats={sortStats()} isBarChart>
Countries
<div className="float-right">
<SortingDropdown
isButton={false}
right
orderField={this.state.orderField}
orderDir={this.state.orderDir}
items={items}
onChange={(orderField, orderDir) => this.setState({ orderField, orderDir })}
/>
</div>
</GraphCard>
);
}
}

View file

@ -6,6 +6,7 @@ import { keys, values } from 'ramda';
const propTypes = { const propTypes = {
title: PropTypes.string, title: PropTypes.string,
children: PropTypes.node,
isBarChart: PropTypes.bool, isBarChart: PropTypes.bool,
stats: PropTypes.object, stats: PropTypes.object,
matchMedia: PropTypes.func, matchMedia: PropTypes.func,
@ -80,9 +81,9 @@ const renderGraph = (title, isBarChart, stats, matchMedia) => {
return <Component data={generateGraphData(title, isBarChart, labels, data)} options={options} height={null} />; return <Component data={generateGraphData(title, isBarChart, labels, data)} options={options} height={null} />;
}; };
const GraphCard = ({ title, isBarChart, stats, matchMedia }) => ( const GraphCard = ({ title, children, isBarChart, stats, matchMedia }) => (
<Card className="mt-4"> <Card className="mt-4">
<CardHeader>{title}</CardHeader> <CardHeader className="graph-card__header">{children || title}</CardHeader>
<CardBody>{renderGraph(title, isBarChart, stats, matchMedia)}</CardBody> <CardBody>{renderGraph(title, isBarChart, stats, matchMedia)}</CardBody>
</Card> </Card>
); );

View file

@ -7,6 +7,7 @@ import { Card } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import DateInput from '../common/DateInput'; import DateInput from '../common/DateInput';
import MutedMessage from '../utils/MuttedMessage'; import MutedMessage from '../utils/MuttedMessage';
import CountriesGraph from './CountriesGraph';
import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits'; import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
import { import {
processBrowserStats, processBrowserStats,
@ -95,7 +96,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
<GraphCard title="Browsers" stats={processBrowserStats(visits)} /> <GraphCard title="Browsers" stats={processBrowserStats(visits)} />
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<GraphCard title="Countries" stats={processCountriesStats(visits)} isBarChart /> <CountriesGraph stats={processCountriesStats(visits)} />
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<GraphCard title="Referrers" stats={processReferrersStats(visits)} isBarChart /> <GraphCard title="Referrers" stats={processReferrersStats(visits)} isBarChart />

View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { DropdownItem } from 'reactstrap'; import { DropdownItem } from 'reactstrap';
import { values } from 'ramda'; import { identity, values } from 'ramda';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown'; import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
import * as sinon from 'sinon'; import * as sinon from 'sinon';
@ -15,7 +15,7 @@ describe('<SortingDropdown />', () => {
baz: 'Hello World', baz: 'Hello World',
}; };
const createWrapper = (props) => { const createWrapper = (props) => {
wrapper = shallow(<SortingDropdown items={items} {...props} />); wrapper = shallow(<SortingDropdown items={items} onChange={identity} {...props} />);
return wrapper; return wrapper;
}; };
@ -26,8 +26,9 @@ describe('<SortingDropdown />', () => {
const wrapper = createWrapper(); const wrapper = createWrapper();
const dropdownItems = wrapper.find(DropdownItem); const dropdownItems = wrapper.find(DropdownItem);
const secondIndex = 2; const secondIndex = 2;
const clearItemsCount = 2;
expect(dropdownItems).toHaveLength(values(items).length); expect(dropdownItems).toHaveLength(values(items).length + clearItemsCount);
expect(dropdownItems.at(0).html()).toContain('Foo'); expect(dropdownItems.at(0).html()).toContain('Foo');
expect(dropdownItems.at(1).html()).toContain('Bar'); expect(dropdownItems.at(1).html()).toContain('Bar');
expect(dropdownItems.at(secondIndex).html()).toContain('Hello World'); expect(dropdownItems.at(secondIndex).html()).toContain('Hello World');

View file

@ -7,6 +7,7 @@ import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/Sh
import MutedMessage from '../../src/utils/MuttedMessage'; import MutedMessage from '../../src/utils/MuttedMessage';
import GraphCard from '../../src/visits/GraphCard'; import GraphCard from '../../src/visits/GraphCard';
import DateInput from '../../src/common/DateInput'; import DateInput from '../../src/common/DateInput';
import CountriesGraph from '../../src/visits/CountriesGraph';
describe('<ShortUrlVisits />', () => { describe('<ShortUrlVisits />', () => {
let wrapper; let wrapper;
@ -69,9 +70,11 @@ describe('<ShortUrlVisits />', () => {
it('renders all graphics when visits are properly loaded', () => { it('renders all graphics when visits are properly loaded', () => {
const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
const graphs = wrapper.find(GraphCard); const graphs = wrapper.find(GraphCard);
const expectedGraphsCount = 4; const countriesGraphs = wrapper.find(CountriesGraph);
const expectedGraphsCount = 3;
expect(graphs).toHaveLength(expectedGraphsCount); expect(graphs).toHaveLength(expectedGraphsCount);
expect(countriesGraphs).toHaveLength(1);
}); });
it('reloads visits when selected dates change', () => { it('reloads visits when selected dates change', () => {