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

2
src/visits/ShortUrlVisits.js
View file

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

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

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

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

@ -5,7 +5,7 @@ import { Card } from 'reactstrap';
import * as sinon from 'sinon';
import { ShortUrlsVisitsComponent as ShortUrlsVisits } from '../../src/visits/ShortUrlVisits';
import MutedMessage from '../../src/utils/MuttedMessage';
import { GraphCard } from '../../src/visits/GraphCard';
import GraphCard from '../../src/visits/GraphCard';
import DateInput from '../../src/common/DateInput';
describe('<ShortUrlVisits />', () => {