Charts

import { Chart } from '@megafon/ui-lk-vas';

Кольцевая диаграмма

<Chart
      type="doughnut"
      title="Кольцевая диаграмма"
      labels={["Title 1", "Title 2", "Title 3", "Title 4", "Title 5", "Title 6", "Title 7", "Title 8"]}
      datasets={[
          { data: [1200, 300, 150, 300, 200, 50, 100, 100] }
      ]}
  />
  <Chart
      type="doughnut"
      title="Кольцевая диаграмма"
      datasets={[]}
      labels={[]}
  />
<Chart
      type="doughnut"
      title="Расходы"
      labels={["Звонки", "Смс"]}
      datasets={[
          { data: [25, 75], unit: "%" },
      ]}
  />
  <Chart
      type="doughnut"
      title="Страны"
      labels={["Россия"]}
      datasets={[
          { data: [100], unit: "%" },
      ]}
  />

Линейная диаграмма

<Chart
      type="line"
      title="Линейная диаграмма"
      labels={[ "Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс" ]}
      datasets={[
          {
              label: "Dataset 1",
              data: [500, 250, 50, 350, 150, 450, 250],
          },
          {
              label: "Dataset 2",
              data: [150, 600, 550, 1000, 250, 150, 450],
          }
      ]}
  />
  <Chart
      type="line"
      title="Линейная диаграмма"
      labels={[]}
      datasets={[]}
  />
  
<Chart
      type="line"
      title="Способ авторизации"
      labels={[
          "2023-02",
          "2023-03",
          "2023-04",
          "2023-05",
          "2023-06",
          "2023-07",
          "2023-08",
          "2023-09",
          "2023-10",
          "2023-11",
          "2023-12",
          "2024-01",
          "2024-02",
      ]}
      datasets={[
          {
              label: "По СМС",
              data: [12, 15, 16, 19, 25, 26, 35, 34, 33, 35, 38, 35, 38],
          },
          {
              label: "По Звонку",
              data: [8, 11, 11, 12, 16, 17, 19, 20, 22, 21, 24, 24, 23],
          }
      ]}
      scales={{
          skipTicksX: 3,
          skipTicksY: 2,
      }}
  />

Столбчатая диаграмма

<Chart
      type="bar"
      title="Периоды активности пользователей, количество сессий"
      labels={[
          "00:00-09:00",
          "09:00-10:00",
          "10:00-11:00",
          "11:00-12:00",
          "12:00-13:00",
          "13:00-14:00",
          "14:00-15:00",
          "15:00-16:00",
          "16:00-17:00",
          "17:00-18:00",
          "18:00-00:00",
      ]}
      datasets={[
          {
              label: "Сессии",
              data: [340, 25, 50, 220, 240, 230, 190, 170, 160, 140, 130],
          }
      ]}
      scales={{
          skipTicksX: 2,
      }}
      downloadLink="#"
      hideLegend
  />