mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Moved helper functions in GraphCard outside of component function

Browse source
This commit is contained in:
Alejandro Celaya 2018-10-19 19:04:22 +02:00
parent 4c1a044fd3
commit 812e391e34
4 changed files with 45 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/visits/GraphCard.js
View file

@ -10,8 +10,7 @@ const propTypes = {
stats: PropTypes.object, stats: PropTypes.object,
}; };
export function GraphCard({ title, isBarChart, stats }) { const generateGraphData = (title, isBarChart, stats) => ({
const generateGraphData = (stats) => ({
labels: keys(stats), labels: keys(stats),
datasets: [ datasets: [
{ {
@ -31,7 +30,8 @@ export function GraphCard({ title, isBarChart, stats }) {
}, },
], ],
}); });
const renderGraph = () => {
const renderGraph = (title, isBarChart, stats) => {
const Component = isBarChart ? HorizontalBar : Doughnut; const Component = isBarChart ? HorizontalBar : Doughnut;
const options = { const options = {
legend: isBarChart ? { display: false } : { position: 'right' }, legend: isBarChart ? { display: false } : { position: 'right' },
@ -44,15 +44,16 @@ export function GraphCard({ title, isBarChart, stats }) {
} : null, } : null,
}; };
return <Component data={generateGraphData(stats)} options={options} />; return <Component data={generateGraphData(title, isBarChart, stats)} options={options} />;
}; };
return ( const GraphCard = ({ title, isBarChart, stats }) => (
<Card className="mt-4"> <Card className="mt-4">
<CardHeader>{title}</CardHeader> <CardHeader>{title}</CardHeader>
<CardBody>{renderGraph()}</CardBody> <CardBody>{renderGraph(title, isBarChart, stats)}</CardBody>
</Card> </Card>
); );
}
GraphCard.propTypes = propTypes; GraphCard.propTypes = propTypes;
export default GraphCard;

2
src/visits/ShortUrlVisits.js
View file

@ -15,7 +15,7 @@ import {
processReferrersStats, processReferrersStats,
} from './services/VisitsParser'; } from './services/VisitsParser';
import { VisitsHeader } from './VisitsHeader'; import { VisitsHeader } from './VisitsHeader';
import { GraphCard } from './GraphCard'; import GraphCard from './GraphCard';
import { getShortUrlDetail, shortUrlDetailType } from './reducers/shortUrlDetail'; import { getShortUrlDetail, shortUrlDetailType } from './reducers/shortUrlDetail';
import './ShortUrlVisits.scss'; import './ShortUrlVisits.scss';

2
test/visits/GraphCard.test.js
View file

@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { Doughnut, HorizontalBar } from 'react-chartjs-2'; import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import { keys, values } from 'ramda'; import { keys, values } from 'ramda';
import { GraphCard } from '../../src/visits/GraphCard'; import GraphCard from '../../src/visits/GraphCard';
describe('<GraphCard />', () => { describe('<GraphCard />', () => {
let wrapper; let wrapper;

2
test/visits/ShortUrlVisits.test.js
View file

@ -5,7 +5,7 @@ import { Card } from 'reactstrap';
import * as sinon from 'sinon'; import * as sinon from 'sinon';
import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/ShortUrlVisits'; import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/ShortUrlVisits';
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';
describe('<ShortUrlVisits />', () => { describe('<ShortUrlVisits />', () => {