mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Added order control to countries graph
This commit is contained in:
parent
6634fc41c5
commit
368de2b4c7
8 changed files with 119 additions and 34 deletions
|
@ -43,10 +43,7 @@ export class ShortUrlsListComponent extends React.Component {
|
|||
});
|
||||
};
|
||||
handleOrderBy = (orderField, orderDir) => {
|
||||
this.setState({
|
||||
orderDir,
|
||||
orderField: orderDir !== undefined ? orderField : undefined,
|
||||
});
|
||||
this.setState({ orderField, orderDir });
|
||||
this.refreshList({ orderBy: { [orderField]: orderDir } });
|
||||
};
|
||||
orderByColumn = (columnName) => () =>
|
||||
|
|
|
@ -5,39 +5,64 @@ import PropTypes from 'prop-types';
|
|||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
|
||||
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
|
||||
import classNames from 'classnames';
|
||||
import { determineOrderDir } from '../utils/utils';
|
||||
import './SortingDropdown.scss';
|
||||
|
||||
const propTypes = {
|
||||
items: PropTypes.object,
|
||||
items: PropTypes.object.isRequired,
|
||||
orderField: PropTypes.string,
|
||||
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 }) => (
|
||||
<UncontrolledDropdown>
|
||||
<DropdownToggle caret className="btn-block">Order by</DropdownToggle>
|
||||
<DropdownMenu className="sorting-dropdown__menu">
|
||||
{toPairs(items).map(([ fieldKey, fieldValue ]) => (
|
||||
<DropdownItem
|
||||
key={fieldKey}
|
||||
active={orderField === fieldKey}
|
||||
onClick={() => onChange(fieldKey, determineOrderDir(fieldKey, orderField, orderDir))}
|
||||
>
|
||||
{fieldValue}
|
||||
{orderField === fieldKey && (
|
||||
<FontAwesomeIcon
|
||||
icon={orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
|
||||
className="sorting-dropdown__sort-icon"
|
||||
/>
|
||||
)}
|
||||
const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, right }) => {
|
||||
const handleItemClick = (fieldKey) => () => {
|
||||
const newOrderDir = determineOrderDir(fieldKey, orderField, orderDir);
|
||||
|
||||
onChange(newOrderDir ? fieldKey : undefined, newOrderDir);
|
||||
};
|
||||
|
||||
return (
|
||||
<UncontrolledDropdown>
|
||||
<DropdownToggle
|
||||
caret
|
||||
color={isButton ? 'secondary' : 'link'}
|
||||
className={classNames({ 'btn-block': isButton, 'btn-sm sorting-dropdown__paddingless': !isButton })}
|
||||
>
|
||||
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>
|
||||
))}
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
);
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
);
|
||||
};
|
||||
|
||||
SortingDropdown.propTypes = propTypes;
|
||||
SortingDropdown.defaultProps = defaultProps;
|
||||
|
||||
export default SortingDropdown;
|
||||
|
|
|
@ -2,7 +2,15 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.sorting-dropdown__menu--link.sorting-dropdown__menu--link {
|
||||
min-width: 11rem;
|
||||
}
|
||||
|
||||
.sorting-dropdown__sort-icon {
|
||||
margin: 3.5px 0 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sorting-dropdown__paddingless.sorting-dropdown__paddingless {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
49
src/visits/CountriesGraph.js
Normal file
49
src/visits/CountriesGraph.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -6,6 +6,7 @@ import { keys, values } from 'ramda';
|
|||
|
||||
const propTypes = {
|
||||
title: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
isBarChart: PropTypes.bool,
|
||||
stats: PropTypes.object,
|
||||
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} />;
|
||||
};
|
||||
|
||||
const GraphCard = ({ title, isBarChart, stats, matchMedia }) => (
|
||||
const GraphCard = ({ title, children, isBarChart, stats, matchMedia }) => (
|
||||
<Card className="mt-4">
|
||||
<CardHeader>{title}</CardHeader>
|
||||
<CardHeader className="graph-card__header">{children || title}</CardHeader>
|
||||
<CardBody>{renderGraph(title, isBarChart, stats, matchMedia)}</CardBody>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
@ -7,6 +7,7 @@ import { Card } from 'reactstrap';
|
|||
import PropTypes from 'prop-types';
|
||||
import DateInput from '../common/DateInput';
|
||||
import MutedMessage from '../utils/MuttedMessage';
|
||||
import CountriesGraph from './CountriesGraph';
|
||||
import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
|
||||
import {
|
||||
processBrowserStats,
|
||||
|
@ -95,7 +96,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
|
|||
<GraphCard title="Browsers" stats={processBrowserStats(visits)} />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<GraphCard title="Countries" stats={processCountriesStats(visits)} isBarChart />
|
||||
<CountriesGraph stats={processCountriesStats(visits)} />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<GraphCard title="Referrers" stats={processReferrersStats(visits)} isBarChart />
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { DropdownItem } from 'reactstrap';
|
||||
import { values } from 'ramda';
|
||||
import { identity, values } from 'ramda';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
|
||||
import * as sinon from 'sinon';
|
||||
|
@ -15,7 +15,7 @@ describe('<SortingDropdown />', () => {
|
|||
baz: 'Hello World',
|
||||
};
|
||||
const createWrapper = (props) => {
|
||||
wrapper = shallow(<SortingDropdown items={items} {...props} />);
|
||||
wrapper = shallow(<SortingDropdown items={items} onChange={identity} {...props} />);
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
@ -26,8 +26,9 @@ describe('<SortingDropdown />', () => {
|
|||
const wrapper = createWrapper();
|
||||
const dropdownItems = wrapper.find(DropdownItem);
|
||||
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(1).html()).toContain('Bar');
|
||||
expect(dropdownItems.at(secondIndex).html()).toContain('Hello World');
|
||||
|
|
|
@ -7,6 +7,7 @@ import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/Sh
|
|||
import MutedMessage from '../../src/utils/MuttedMessage';
|
||||
import GraphCard from '../../src/visits/GraphCard';
|
||||
import DateInput from '../../src/common/DateInput';
|
||||
import CountriesGraph from '../../src/visits/CountriesGraph';
|
||||
|
||||
describe('<ShortUrlVisits />', () => {
|
||||
let wrapper;
|
||||
|
@ -69,9 +70,11 @@ describe('<ShortUrlVisits />', () => {
|
|||
it('renders all graphics when visits are properly loaded', () => {
|
||||
const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
|
||||
const graphs = wrapper.find(GraphCard);
|
||||
const expectedGraphsCount = 4;
|
||||
const countriesGraphs = wrapper.find(CountriesGraph);
|
||||
const expectedGraphsCount = 3;
|
||||
|
||||
expect(graphs).toHaveLength(expectedGraphsCount);
|
||||
expect(countriesGraphs).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('reloads visits when selected dates change', () => {
|
||||
|
|
Loading…
Reference in a new issue