mirror of
https://github.com/kremalicious/umami.git
synced 2024-11-15 09:45:04 +01:00
checkpoint
This commit is contained in:
parent
cb038a51f3
commit
de509e7ccc
@ -19,6 +19,7 @@ export function NavBar() {
|
||||
const links = [
|
||||
{ label: formatMessage(labels.dashboard), url: '/dashboard' },
|
||||
{ label: formatMessage(labels.realtime), url: '/realtime' },
|
||||
{ label: formatMessage(labels.reports), url: '/reports/funnel' },
|
||||
!cloudMode && { label: formatMessage(labels.settings), url: '/settings' },
|
||||
].filter(n => n);
|
||||
|
||||
|
23
components/layout/ReportsLayout.js
Normal file
23
components/layout/ReportsLayout.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { Column, Row } from 'react-basics';
|
||||
import styles from './ReportsLayout.module.css';
|
||||
|
||||
export function SettingsLayout({ children, filter, header }) {
|
||||
return (
|
||||
<>
|
||||
<Row>{header}</Row>
|
||||
<Row>
|
||||
{filter && (
|
||||
<Column className={styles.filter} defaultSize={12} md={4} lg={3} xl={3}>
|
||||
<h2>Filters</h2>
|
||||
{filter}
|
||||
</Column>
|
||||
)}
|
||||
<Column className={styles.content} defaultSize={12} md={8} lg={9} xl={9}>
|
||||
{children}
|
||||
</Column>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SettingsLayout;
|
23
components/layout/ReportsLayout.module.css
Normal file
23
components/layout/ReportsLayout.module.css
Normal file
@ -0,0 +1,23 @@
|
||||
.filter {
|
||||
margin-top: 30px;
|
||||
min-width: 200px;
|
||||
max-width: 100vw;
|
||||
padding: 10px;
|
||||
background: var(--base50);
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.filter h2 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
@ -15,7 +15,6 @@ export function SettingsLayout({ children }) {
|
||||
const items = [
|
||||
{ key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },
|
||||
{ key: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
|
||||
{ key: 'reports', label: 'Reports', url: '/settings/reports/funnel' },
|
||||
user.isAdmin && { key: 'users', label: formatMessage(labels.users), url: '/settings/users' },
|
||||
{ key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
|
||||
].filter(n => n);
|
||||
|
@ -1,42 +0,0 @@
|
||||
import FunnelGraph from 'funnel-graph-js/dist/js/funnel-graph';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import styles from './FunnelChart.module.css';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default function FunnelChart({ data }) {
|
||||
const { formatMessage, labels, messages } = useMessages();
|
||||
const funnel = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (data && data.length > 0) {
|
||||
funnel.current.innerHTML = '';
|
||||
|
||||
const chartData = {
|
||||
labels: data.map(a => a.url),
|
||||
colors: ['#147af3', '#e0f2ff'],
|
||||
values: data.map(a => a.count),
|
||||
};
|
||||
|
||||
const graph = new FunnelGraph({
|
||||
container: '.funnel',
|
||||
gradientDirection: 'horizontal',
|
||||
data: chartData,
|
||||
displayPercent: true,
|
||||
direction: 'Vertical',
|
||||
width: 1000,
|
||||
height: 350,
|
||||
});
|
||||
|
||||
graph.draw();
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{data?.length > 0 && <div className={classNames(styles.funnel, 'funnel')} ref={funnel} />}
|
||||
{data?.length === 0 && <EmptyPlaceholder message={formatMessage(messages.noResultsFound)} />}
|
||||
</>
|
||||
);
|
||||
}
|
@ -1,7 +0,0 @@
|
||||
.funnel div {
|
||||
color: var(--font-color100) !important;
|
||||
}
|
||||
|
||||
.funnel svg {
|
||||
max-width: 100%;
|
||||
}
|
@ -0,0 +1,28 @@
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } from 'react-basics';
|
||||
|
||||
export function FunnelForm({ onSearch }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
const handleSubmit = () => {};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<FormRow label={formatMessage(labels.website)}>
|
||||
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
|
||||
<TextField />
|
||||
</FormInput>
|
||||
</FormRow>
|
||||
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary" disabled={false}>
|
||||
Save
|
||||
</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunnelForm;
|
23
components/pages/reports/ReportForm.module.css
Normal file
23
components/pages/reports/ReportForm.module.css
Normal file
@ -0,0 +1,23 @@
|
||||
.filter {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.hiddenInput {
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.hiddenInput {
|
||||
visibility: hidden;
|
||||
min-height: 0px;
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
min-height: 0px;
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
.urlFormRow label {
|
||||
min-width: 80px;
|
||||
}
|
186
components/pages/reports/funnel/FunnelChart.js
Normal file
186
components/pages/reports/funnel/FunnelChart.js
Normal file
@ -0,0 +1,186 @@
|
||||
import Chart from 'chart.js/auto';
|
||||
import classNames from 'classnames';
|
||||
import { colord } from 'colord';
|
||||
import HoverTooltip from 'components/common/HoverTooltip';
|
||||
import Legend from 'components/metrics/Legend';
|
||||
import useLocale from 'hooks/useLocale';
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import useTheme from 'hooks/useTheme';
|
||||
import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
|
||||
import { dateFormat } from 'lib/date';
|
||||
import { formatLongNumber } from 'lib/format';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Loading, StatusLight } from 'react-basics';
|
||||
import styles from './FunnelChart.module.css';
|
||||
|
||||
export function FunnelChart({
|
||||
data,
|
||||
animationDuration = DEFAULT_ANIMATION_DURATION,
|
||||
stacked = false,
|
||||
loading = false,
|
||||
onCreate = () => {},
|
||||
onUpdate = () => {},
|
||||
className,
|
||||
}) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const canvas = useRef();
|
||||
const chart = useRef(null);
|
||||
const [tooltip, setTooltip] = useState(null);
|
||||
const { locale } = useLocale();
|
||||
const [theme] = useTheme();
|
||||
|
||||
const datasets = useMemo(() => {
|
||||
const primaryColor = colord(THEME_COLORS[theme].primary);
|
||||
return [
|
||||
{
|
||||
label: formatMessage(labels.uniqueVisitors),
|
||||
data: data,
|
||||
borderWidth: 1,
|
||||
hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
|
||||
backgroundColor: primaryColor.alpha(0.6).toRgbString(),
|
||||
borderColor: primaryColor.alpha(0.9).toRgbString(),
|
||||
hoverBorderColor: primaryColor.toRgbString(),
|
||||
},
|
||||
];
|
||||
}, [data]);
|
||||
|
||||
const colors = useMemo(
|
||||
() => ({
|
||||
text: THEME_COLORS[theme].gray700,
|
||||
line: THEME_COLORS[theme].gray200,
|
||||
}),
|
||||
[theme],
|
||||
);
|
||||
|
||||
const renderYLabel = label => {
|
||||
return +label > 1000 ? formatLongNumber(label) : label;
|
||||
};
|
||||
|
||||
const renderTooltip = useCallback(model => {
|
||||
const { opacity, labelColors, dataPoints } = model.tooltip;
|
||||
|
||||
if (!dataPoints?.length || !opacity) {
|
||||
setTooltip(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setTooltip(
|
||||
<div className={styles.tooltip}>
|
||||
<div>
|
||||
<StatusLight color={labelColors?.[0]?.backgroundColor}>
|
||||
<div className={styles.value}>
|
||||
<div>{dataPoints[0].raw.x}</div>
|
||||
<div>{formatLongNumber(dataPoints[0].raw.y)}</div>
|
||||
</div>
|
||||
</StatusLight>
|
||||
</div>
|
||||
</div>,
|
||||
);
|
||||
}, []);
|
||||
|
||||
const getOptions = useCallback(() => {
|
||||
return {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
duration: animationDuration,
|
||||
resize: {
|
||||
duration: 0,
|
||||
},
|
||||
active: {
|
||||
duration: 0,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
external: renderTooltip,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
border: {
|
||||
color: colors.line,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text,
|
||||
autoSkip: false,
|
||||
maxRotation: 0,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
type: 'linear',
|
||||
min: 0,
|
||||
beginAtZero: true,
|
||||
stacked,
|
||||
grid: {
|
||||
color: colors.line,
|
||||
},
|
||||
border: {
|
||||
color: colors.line,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.text,
|
||||
callback: renderYLabel,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}, [animationDuration, renderTooltip, stacked, colors, locale]);
|
||||
|
||||
const createChart = () => {
|
||||
Chart.defaults.font.family = 'Inter';
|
||||
|
||||
const options = getOptions();
|
||||
|
||||
chart.current = new Chart(canvas.current, {
|
||||
type: 'bar',
|
||||
data: { datasets },
|
||||
options,
|
||||
});
|
||||
|
||||
onCreate(chart.current);
|
||||
};
|
||||
|
||||
const updateChart = () => {
|
||||
setTooltip(null);
|
||||
|
||||
chart.current.data.datasets[0].data = datasets[0].data;
|
||||
chart.current.data.datasets[0].label = datasets[0].label;
|
||||
|
||||
chart.current.options = getOptions();
|
||||
|
||||
onUpdate(chart.current);
|
||||
|
||||
chart.current.update();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (datasets) {
|
||||
if (!chart.current) {
|
||||
createChart();
|
||||
} else {
|
||||
updateChart();
|
||||
}
|
||||
}
|
||||
}, [datasets, theme, animationDuration, locale]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={classNames(styles.chart, className)}>
|
||||
{loading && <Loading position="page" icon="dots" />}
|
||||
<canvas ref={canvas} />
|
||||
</div>
|
||||
<Legend chart={chart.current} />
|
||||
{tooltip && <HoverTooltip tooltip={tooltip} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunnelChart;
|
23
components/pages/reports/funnel/FunnelChart.module.css
Normal file
23
components/pages/reports/funnel/FunnelChart.module.css
Normal file
@ -0,0 +1,23 @@
|
||||
.chart {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tooltip .value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.chart {
|
||||
/*height: 200px;*/
|
||||
}
|
||||
}
|
@ -37,7 +37,11 @@ export function FunnelForm({ onSearch }) {
|
||||
|
||||
const handleAddUrl = () => setUrls([...urls, '']);
|
||||
|
||||
const handleRemoveUrl = i => setUrls(urls.splice(i, 1));
|
||||
const handleRemoveUrl = i => {
|
||||
const nextUrls = [...urls];
|
||||
nextUrls.splice(i, 1);
|
||||
setUrls(nextUrls);
|
||||
};
|
||||
|
||||
const handleWindowChange = value => setWindow(value.target.value);
|
||||
|
||||
@ -103,7 +107,7 @@ export function FunnelForm({ onSearch }) {
|
||||
|
||||
<FormButtons>
|
||||
<SubmitButton variant="primary" disabled={false}>
|
||||
Search
|
||||
Query
|
||||
</SubmitButton>
|
||||
</FormButtons>
|
||||
</Form>
|
@ -18,11 +18,6 @@
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
.urlFormRow {
|
||||
flex-direction: row;
|
||||
gap: 0em;
|
||||
}
|
||||
|
||||
.urlFormRow label {
|
||||
min-width: 80px;
|
||||
}
|
@ -1,17 +1,19 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import Page from 'components/layout/Page';
|
||||
import PageHeader from 'components/layout/PageHeader';
|
||||
import ReportsLayout from 'components/layout/ReportsLayout';
|
||||
import useApi from 'hooks/useApi';
|
||||
import { useState } from 'react';
|
||||
import FunnelChart from './FunnelChart';
|
||||
import FunnelTable from './FunnelTable';
|
||||
import FunnelForm from './FunnelForm';
|
||||
|
||||
import styles from './FunnelPage.module.css';
|
||||
|
||||
export default function FunnelPage() {
|
||||
const { post } = useApi();
|
||||
const { mutate, error, isLoading } = useMutation(data => post('/reports/funnel', data));
|
||||
const [data, setData] = useState();
|
||||
const [data, setData] = useState([{}]);
|
||||
const [formData, setFormData] = useState();
|
||||
|
||||
function handleOnSearch(data) {
|
||||
@ -25,14 +27,12 @@ export default function FunnelPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<ReportsLayout filter={<FunnelForm onSearch={handleOnSearch} />} header={'test'}>
|
||||
<Page>
|
||||
<PageHeader title="Funnel Report"></PageHeader>
|
||||
<FunnelChart data={data} />
|
||||
<FunnelTable data={data} />
|
||||
<div>
|
||||
<h2>Filters</h2>
|
||||
<FunnelForm onSearch={handleOnSearch} />
|
||||
</div>
|
||||
</Page>
|
||||
</ReportsLayout>
|
||||
);
|
||||
}
|
@ -1,13 +1,12 @@
|
||||
import DataTable from 'components/metrics/DataTable';
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import { useState } from 'react';
|
||||
|
||||
export function DevicesTable({ ...props }) {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const { data } = props;
|
||||
|
||||
const tableData =
|
||||
data?.map(a => ({ x: a.url, y: a.count, z: (a.count / data[0].count) * 100 })) || [];
|
||||
data?.map(a => ({ x: a.x, y: a.y, z: Math.floor(a.y / data[0].y) * 100 })) || [];
|
||||
|
||||
return <DataTable data={tableData} title="Url" type="device" />;
|
||||
}
|
@ -80,7 +80,6 @@
|
||||
"dotenv": "^10.0.0",
|
||||
"formik": "^2.2.9",
|
||||
"fs-extra": "^10.0.1",
|
||||
"funnel-graph-js": "^1.3.7",
|
||||
"immer": "^9.0.12",
|
||||
"ipaddr.js": "^2.0.1",
|
||||
"is-ci": "^3.0.1",
|
||||
|
@ -9,7 +9,6 @@ import useConfig from 'hooks/useConfig';
|
||||
import '@fontsource/inter/400.css';
|
||||
import '@fontsource/inter/700.css';
|
||||
import 'react-basics/dist/styles.css';
|
||||
import 'styles/funnelChart.css';
|
||||
import 'styles/variables.css';
|
||||
import 'styles/locale.css';
|
||||
import 'styles/index.css';
|
||||
|
@ -1,16 +1,13 @@
|
||||
import AppLayout from 'components/layout/AppLayout';
|
||||
import SettingsLayout from 'components/layout/SettingsLayout';
|
||||
import FunnelPage from 'components/pages/reports/FunnelPage';
|
||||
import FunnelPage from 'components/pages/reports/funnel/FunnelPage';
|
||||
import useMessages from 'hooks/useMessages';
|
||||
|
||||
export default function DetailsPage() {
|
||||
export default function Funnel() {
|
||||
const { formatMessage, labels } = useMessages();
|
||||
|
||||
return (
|
||||
<AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.reports)}`}>
|
||||
<SettingsLayout>
|
||||
<FunnelPage />
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import AppLayout from 'components/layout/AppLayout';
|
||||
import FunnelPage from 'components/pages/reports/FunnelPage';
|
||||
import FunnelPage from 'components/pages/reports/funnel/FunnelPage';
|
||||
import useMessages from 'hooks/useMessages';
|
||||
import SettingsLayout from 'components/layout/SettingsLayout';
|
||||
|
@ -29,9 +29,8 @@ async function relationalQuery(
|
||||
},
|
||||
): Promise<
|
||||
{
|
||||
level: number;
|
||||
url: string;
|
||||
count: any;
|
||||
x: string;
|
||||
y: number;
|
||||
}[]
|
||||
> {
|
||||
const { windowMinutes, startDate, endDate, urls } = criteria;
|
||||
@ -58,7 +57,7 @@ async function relationalQuery(
|
||||
`,
|
||||
params,
|
||||
).then((a: { [key: string]: number }) => {
|
||||
return urls.map((b, i) => ({ level: i + 1, url: b, count: a[`level${i + 1}`] || 0 }));
|
||||
return urls.map((b, i) => ({ x: b, y: a[`level${i + 1}`] || 0 }));
|
||||
});
|
||||
}
|
||||
|
||||
@ -72,9 +71,8 @@ async function clickhouseQuery(
|
||||
},
|
||||
): Promise<
|
||||
{
|
||||
level: number;
|
||||
url: string;
|
||||
count: number;
|
||||
x: string;
|
||||
y: number;
|
||||
}[]
|
||||
> {
|
||||
const { windowMinutes, startDate, endDate, urls } = criteria;
|
||||
@ -110,9 +108,8 @@ async function clickhouseQuery(
|
||||
params,
|
||||
).then(results => {
|
||||
return urls.map((a, i) => ({
|
||||
level: i + 1,
|
||||
url: a,
|
||||
count: results[i + 1]?.count || 0,
|
||||
x: a,
|
||||
y: results[i + 1]?.count || 0,
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
@ -1,148 +0,0 @@
|
||||
.svg-funnel-js {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.svg-funnel-js svg {
|
||||
display: block;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__labels {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.svg-funnel-js body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.svg-funnel-js {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label {
|
||||
flex: 1 1 0;
|
||||
position: relative;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__value {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
line-height: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #21ffa2;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__percentage {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #9896dc;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding: 8px 24px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(8, 7, 48, 0.8);
|
||||
margin-top: 24px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
cursor: default;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul li {
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
margin: 18px 0;
|
||||
}
|
||||
.svg-funnel-js
|
||||
.svg-funnel-js__labels
|
||||
.svg-funnel-js__label
|
||||
.label__segment-percentages
|
||||
ul
|
||||
li
|
||||
.percentage__list-label {
|
||||
font-weight: bold;
|
||||
color: #05df9d;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label:hover .label__segment-percentages {
|
||||
opacity: 1;
|
||||
}
|
||||
.svg-funnel-js:not(.svg-funnel-js--vertical) {
|
||||
padding-top: 64px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label:not(:first-child) {
|
||||
border-left: 1px solid #9896dc;
|
||||
}
|
||||
.svg-funnel-js.svg-funnel-js--vertical {
|
||||
padding-left: 120px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label {
|
||||
padding-top: 24px;
|
||||
}
|
||||
.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label:not(:first-child) {
|
||||
border-top: 1px solid #9896dc;
|
||||
}
|
||||
.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label .label__segment-percentages {
|
||||
margin-top: 0;
|
||||
margin-left: 106px;
|
||||
width: calc(100% - 106px);
|
||||
}
|
||||
.svg-funnel-js.svg-funnel-js--vertical
|
||||
.svg-funnel-js__label
|
||||
.label__segment-percentages
|
||||
.segment-percentage__list {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__subLabels {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
line-height: 16px;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel:not(:first-child) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel .svg-funnel-js__subLabel--color {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin: 2px 8px 2px 0;
|
||||
}
|
Loading…
Reference in New Issue
Block a user