forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-12 18:43:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added custom responsive legend to doughnut charts

Browse Source
This commit is contained in:
Alejandro Celaya
2020-06-06 11:58:25 +02:00
parent 770cc59448
commit 949e0da105
3 changed files with 94 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
test/visits/helpers/DefaultChart.js → test/visits/helpers/DefaultChart.test.js
View File

@@ -17,13 +17,14 @@ describe('<DefaultChart />', () => {
wrapper = shallow(<DefaultChart title="The chart" stats={stats} />);
const doughnut = wrapper.find(Doughnut);
const horizontal = wrapper.find(HorizontalBar);
const cols = wrapper.find('.col-sm-12');
expect(doughnut).toHaveLength(1);
expect(horizontal).toHaveLength(0);
const { labels, datasets } = doughnut.prop('data');
const [{ title, data, backgroundColor, borderColor }] = datasets;
const { legend, scales } = doughnut.prop('options');
const { legend, legendCallback, scales } = doughnut.prop('options');
expect(title).toEqual('The chart');
expect(labels).toEqual(keys(stats));
@@ -43,24 +44,28 @@ describe('<DefaultChart />', () => {
'#463730',
]);
expect(borderColor).toEqual('white');
expect(legend).toEqual({ position: 'right' });
expect(legend).toEqual({ display: false });
expect(typeof legendCallback).toEqual('function');
expect(scales).toBeUndefined();
expect(cols).toHaveLength(2);
});
it('renders HorizontalBar when is not a bar chart', () => {
wrapper = shallow(<DefaultChart isBarChart title="The chart" stats={stats} />);
const doughnut = wrapper.find(Doughnut);
const horizontal = wrapper.find(HorizontalBar);
const cols = wrapper.find('.col-sm-12');
expect(doughnut).toHaveLength(0);
expect(horizontal).toHaveLength(1);
const { datasets: [{ backgroundColor, borderColor }] } = horizontal.prop('data');
const { legend, scales } = horizontal.prop('options');
const { legend, legendCallback, scales } = horizontal.prop('options');
expect(backgroundColor).toEqual('rgba(70, 150, 229, 0.4)');
expect(borderColor).toEqual('rgba(70, 150, 229, 1)');
expect(legend).toEqual({ display: false });
expect(legendCallback).toEqual(false);
expect(scales).toEqual({
xAxes: [
{
@@ -70,6 +75,7 @@ describe('<DefaultChart />', () => {
],
yAxes: [{ stacked: true }],
});
expect(cols).toHaveLength(1);
});
it.each([