jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - funnels - check for table and funnel

Browse source
This commit is contained in:
Shekar Siri 2022-05-10 19:25:08 +02:00
parent 9ecb4c369e
commit 34425b8b02
4 changed files with 18 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -33,6 +33,7 @@ function WidgetChart(props: Props) {
const isTableWidget = metric.metricType === 'table' && metric.viewType === 'table';
const isPieChart = metric.metricType === 'table' && metric.viewType === 'pieChart';
const isFunnel = metric.metricType === 'funnel';
const onChartClick = (event: any) => {
if (event) {
@ -82,7 +83,7 @@ function WidgetChart(props: Props) {
const renderChart = () => {
const { metricType, viewType } = metric;
if (metricType === 'funnel') {
if (isFunnel) {
return <FunnelWidget metric={metric} />
}
@ -136,7 +137,7 @@ function WidgetChart(props: Props) {
return <div>Unknown</div>;
}
return useObserver(() => (
<Loader loading={loading} size="small" style={{ height: `${isOverviewWidget ? 100 : 240}px` }}>
<Loader loading={!isFunnel && loading} size="small" style={{ height: `${isOverviewWidget ? 100 : 240}px` }}>
{renderChart()}
</Loader>
));

9
frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
View file

@ -27,6 +27,7 @@ function WidgetForm(props: Props) {
const timeseriesOptions = metricOf.filter(i => i.type === 'timeseries');
const tableOptions = metricOf.filter(i => i.type === 'table');
const isTable = metric.metricType === 'table';
const isFunnel = metric.metricType === 'funnel';
const _issueOptions = [{ text: 'All', value: 'all' }].concat(issueOptions);
const canAddToDashboard = metric.exists() && dashboards.length > 0;
const canAddSeries = metric.series.length < 3;
@ -87,7 +88,7 @@ function WidgetForm(props: Props) {
}
return useObserver(() => (
<div className="p-4">
<div className="p-6">
<div className="form-group">
<label className="font-medium">Metric Type</label>
<div className="flex items-center">
@ -152,8 +153,8 @@ function WidgetForm(props: Props) {
<div className="form-group">
<div className="font-medium items-center py-2">
{`${isTable ? 'Filter by' : 'Chart Series'}`}
{!isTable && (
{`${(isTable || isFunnel) ? 'Filter by' : 'Chart Series'}`}
{!isTable && !isFunnel && (
<Button
className="ml-2"
primary plain size="small"
@ -163,7 +164,7 @@ function WidgetForm(props: Props) {
)}
</div>
{metric.series.length > 0 && metric.series.slice(0, isTable ? 1 : metric.series.length).map((series: any, index: number) => (
{metric.series.length > 0 && metric.series.slice(0, (isTable || isFunnel) ? 1 : metric.series.length).map((series: any, index: number) => (
<div className="mb-2">
<FilterSeries
hideHeader={ isTable }

2
frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
View file

@ -40,7 +40,7 @@ function WidgetView(props: Props) {
<div className="relative pb-10">
<BackLink onClick={onBackHandler} vertical className="absolute" style={{ left: '-50px', top: '0px' }} />
<div className="bg-white rounded border">
<div className="p-4 flex justify-between items-center">
<div className="px-6 py-4 flex justify-between items-center">
<h1 className="mb-0 text-2xl">
<WidgetName
name={widget.name}

19
frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
View file

@ -10,16 +10,7 @@ interface Props {
function FunnelBar(props: Props) {
const { filter } = props;
const { completed, dropped } = filter;
const calculatePercentage = (completed: number, dropped: number) => {
const total = completed + dropped;
if (total === 0) {
return 0;
}
return Math.round((completed / total) * 100);
}
const completedPercentage = calculatePercentage(completed, dropped);
console.log('completedPercentage', completedPercentage)
return (
<div className="w-full mb-4">
@ -61,4 +52,12 @@ function FunnelBar(props: Props) {
);
}
export default FunnelBar;
export default FunnelBar;
const calculatePercentage = (completed: number, dropped: number) => {
const total = completed + dropped;
if (total === 0) {
return 0;
}
return Math.round((completed / total) * 100);
}