watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-17 02:55:38 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Funnel form.

Browse source
This commit is contained in:
Brian Cao 2023-05-11 16:42:58 -07:00
parent dd2db308ee
commit 1130bca195
19 changed files with 460 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

43
components/pages/reports/FunnelChart.js Normal file
View file

@ -0,0 +1,43 @@
import FunnelGraph from 'funnel-graph-js/dist/js/funnel-graph';
import { useEffect, useRef } from 'react';
export default function FunnelChart() {
const funnel = useRef(null);
useEffect(() => {
funnel.current.innerHTML = '';
const data = {
labels: ['Cv Sent', '1st Interview', '2nd Interview', '3rd Interview', 'Offer'],
subLabels: ['Cv Sent', '1st Interview', '2nd Interview', '3rd Interview', 'Offer'],
colors: [
['#FFB178', '#FF78B1', '#FF3C8E'],
['#FFB178', '#FF78B1', '#FF3C8E'],
['#A0BBFF', '#EC77FF'],
['#A0F9FF', '#7795FF'],
['#FFB178', '#FF78B1', '#FF3C8E'],
],
values: [[3500], [3300], [2000], [600], [330]],
};
const graph = new FunnelGraph({
container: '.funnel',
gradientDirection: 'horizontal',
data: data,
displayPercent: true,
direction: 'Vertical',
width: 1000,
height: 350,
subLabelValue: 'values',
});
graph.draw();
}, []);
return (
<div>
FunnelChart
<div className="funnel" ref={funnel} />
</div>
);
}