estate-solution/src/components/Analytics/AnalyticsDashboard/AnalyticsDashboard.js

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>

    )
}