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

83
src/visits/GraphCard.js
View file

@ -10,49 +10,50 @@ 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: [ {
{ title,
title, data: values(stats),
data: values(stats), backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [ '#97BBCD',
'#97BBCD', '#DCDCDC',
'#DCDCDC', '#F7464A',
'#F7464A', '#46BFBD',
'#46BFBD', '#FDB45C',
'#FDB45C', '#949FB1',
'#949FB1', '#4D5360',
'#4D5360', ],
], borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white', borderWidth: 2,
borderWidth: 2, },
}, ],
], });
});
const renderGraph = () => {
const Component = isBarChart ? HorizontalBar : Doughnut;
const options = {
legend: isBarChart ? { display: false } : { position: 'right' },
scales: isBarChart ? {
xAxes: [
{
ticks: { beginAtZero: true },
},
],
} : null,
};
return <Component data={generateGraphData(stats)} options={options} />; const renderGraph = (title, isBarChart, stats) => {
const Component = isBarChart ? HorizontalBar : Doughnut;
const options = {
legend: isBarChart ? { display: false } : { position: 'right' },
scales: isBarChart ? {
xAxes: [
{
ticks: { beginAtZero: true },
},
],
} : null,
}; };
return ( return <Component data={generateGraphData(title, isBarChart, stats)} options={options} />;
<Card className="mt-4"> };
<CardHeader>{title}</CardHeader>
<CardBody>{renderGraph()}</CardBody> const GraphCard = ({ title, isBarChart, stats }) => (
</Card> <Card className="mt-4">
); <CardHeader>{title}</CardHeader>
} <CardBody>{renderGraph(title, isBarChart, stats)}</CardBody>
</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 />', () => {