diff --git a/src/utils/SortingDropdown.js b/src/utils/SortingDropdown.js index 46b6462b..1388c586 100644 --- a/src/utils/SortingDropdown.js +++ b/src/utils/SortingDropdown.js @@ -54,7 +54,7 @@ const SortingDropdown = ({ items, orderField, orderDir, onChange, isButton, righ ))} - onChange()}> + onChange()}> Clear selection diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index f65982d7..e84fd713 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -7,7 +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 SortableBarGraph from './SortableBarGraph'; import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits'; import { processBrowserStats, @@ -96,10 +96,24 @@ export class ShortUrlsVisitsComponent extends React.Component {
- +
- +
); diff --git a/src/visits/CountriesGraph.js b/src/visits/SortableBarGraph.js similarity index 74% rename from src/visits/CountriesGraph.js rename to src/visits/SortableBarGraph.js index f4f276cd..7cf551e0 100644 --- a/src/visits/CountriesGraph.js +++ b/src/visits/SortableBarGraph.js @@ -4,9 +4,11 @@ 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 { +export default class SortableBarGraph extends React.Component { static propTypes = { - stats: PropTypes.any, + stats: PropTypes.object.isRequired, + title: PropTypes.string.isRequired, + sortingItems: PropTypes.object.isRequired, }; state = { @@ -15,31 +17,27 @@ export default class CountriesGraph extends React.Component { }; render() { - const items = { - name: 'Country name', - amount: 'Visits amount', - }; - const { stats } = this.props; + const { stats, sortingItems, title } = this.props; const sortStats = () => { if (!this.state.orderField) { return stats; } - const sortedPairs = sortBy(prop(this.state.orderField === head(keys(items)) ? 0 : 1), toPairs(stats)); + const sortedPairs = sortBy(prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1), toPairs(stats)); return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs)); }; return ( - Countries + {title}
this.setState({ orderField, orderDir })} />
diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js index 8b719bd4..f2f236e3 100644 --- a/test/visits/ShortUrlVisits.test.js +++ b/test/visits/ShortUrlVisits.test.js @@ -7,7 +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'; +import SortableBarGraph from '../../src/visits/SortableBarGraph'; describe('', () => { let wrapper; @@ -70,11 +70,10 @@ describe('', () => { it('renders all graphics when visits are properly loaded', () => { const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); const graphs = wrapper.find(GraphCard); - const countriesGraphs = wrapper.find(CountriesGraph); - const expectedGraphsCount = 3; + const sortableBarGraphs = wrapper.find(SortableBarGraph); + const expectedGraphsCount = 4; - expect(graphs).toHaveLength(expectedGraphsCount); - expect(countriesGraphs).toHaveLength(1); + expect(graphs.length + sortableBarGraphs.length).toEqual(expectedGraphsCount); }); it('reloads visits when selected dates change', () => {