This commit is contained in:
DmitriyB
2023-02-06 11:27:55 +05:00
parent 2c66dcf588
commit bb1fa6b6c6
81 changed files with 6860 additions and 40 deletions
@@ -0,0 +1,147 @@
import './AnalyticsDashboard.css'
import { PieChartComp } from './PieChartComp/PieChartComp'
export const AnalyticsDashboard = () => {
return (
<div className="analytics__container">
<div className="graph__container">
<div className="graph__row_1">
<div className="graph__row_item">
<span className="graph__title title_1">Конверсия менеджеров в брони</span>
<div className="graph__bar_row">
<p className="graph__caption">К.Н. Федоров</p>
<div className="bar__container">
<div className="graph__bar_width_container">
<div className="graph__bar_1"></div>
</div>
</div>
<p className="graph__procentage">45%</p>
</div>
<div className="graph__bar_row">
<p className="graph__caption">И.Ф. Яковлева</p>
<div className="bar__container">
<div className="graph__bar_width_container">
<div className="graph__bar_2"></div>
</div>
</div>
<p className="graph__procentage">30%</p>
</div>
<div className="graph__bar_row">
<p className="graph__caption">А.М. Ташева</p>
<div className="bar__container">
<div className="graph__bar_width_container">
<div className="graph__bar_3"></div>
</div>
</div>
<p className="graph__procentage">28%</p>
</div>
<div className="graph__bar_row">
<p className="graph__caption">А.А. Фетисов</p>
<div className="bar__container">
<div className="graph__bar_width_container">
<div className="graph__bar_4"></div>
</div>
</div>
<p className="graph__procentage">5%</p>
</div>
</div>
<div className="graph__row_item">
<span className="graph__title title_2">Популярные типы квартир, %</span>
<div className="chart__container">
<PieChartComp />
<div className="legend__container">
<div className="legend__row">
<div className="legend__point color"></div>
<p className="legend__caption">Студии</p>
</div>
<div className="legend__row">
<div className="legend__point color1"></div>
<p className="legend__caption">1-к. квартиры</p>
</div>
<div className="legend__row">
<div className="legend__point color2"></div>
<p className="legend__caption">2-к. квартиры</p>
</div>
<div className="legend__row">
<div className="legend__point color3"></div>
<p className="legend__caption">3-к. квартиры</p>
</div>
<div className="legend__row">
<div className="legend__point color4"></div>
<p className="legend__caption">4-к. квартиры</p>
</div>
</div>
</div>
</div>
<div className="graph__row_item">
<span className="graph__title">Воронка продаж</span>
<div className="sales__container">
<div className="sales__row">
<div className="background__row">
<div className="sales__bar">Сеансы</div>
</div>
<div className="sales__procentage"></div>
</div>
<div className="sales__row">
<div className="background__row">
<div className="sales__bar sales_bar_width">В избранное</div>
</div>
<div className="sales__procentage">93,47%</div>
</div>
<div className="sales__row">
<div className="background__row">
<div className="sales__bar sales_bar_width1">Брони</div>
</div>
<div className="sales__procentage">45,68%</div>
</div>
<div className="sales__row">
<div className="background__row">
<div className="sales__bar sales_bar_width3">Продажи</div>
</div>
<div className="sales__procentage">29,13%</div>
</div>
</div>
</div>
</div>
<div className="graph__row_2">
<div className=" graph__row_item_s">
<span className="graph__title_s">Среднее время сеанса, мин.</span>
<div className="graph__color_elem">
12:45
</div>
</div>
<div className="graph__row_item_s">
<span className="graph__title_s">Сформировано коммерческих предложений, шт</span>
<div className="graph__color_elem">
856
</div>
</div>
<div className=" graph__row_item_s">
<span className="graph__title_s">Конверсия из сеанса в продажу, %</span>
<div className="graph__color_elem">
12,44
</div>
</div>
<div className="graph__row_item_s">
<span className="graph__title_s">Продано через Graff.estate, млн.руб.</span>
<div className="graph__color_elem">
134,5
</div>
</div>
<div className=" graph__row_mobile graph__row_item_l">
<div className="graph__text">Полученный отчет позволяет сделать процесс демонстрации жилого комплекса еще эффективнее.</div>
</div>
</div>
</div>
<div className="main-block_subblock">
<div className="graph__text_mobile">Полученный отчет позволяет сделать процесс демонстрации жилого комплекса еще эффективнее.</div>
</div>
</div>
)
}