Кастомизация

Кастомизация

Библиотека surf-charts предоставляет возможность изменить любую часть чартов. Снизу приведён пример кастомизации компонента VerticalChart из библиотеки.

Данный блок нужен только для понимания общей концепции кастомизации, за полной информацией перейдите к странице конкретного чарта.

Так или иначе, все компоненты предоставляет широкие возможности для кастомизации, что позволяет легко адаптировать их под ваши нужды. Основные параметры и возможности кастомизации VerticalChart перечислены ниже.

Пропсы компонента

Пример использования

import { VerticalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 120 },
  { label: 'February', value: 80 },
  { label: 'March', value: 150 },
  { label: 'April', value: 110 },
  { label: 'May', value: 140 }
];
 
<VerticalChart
  label='Sales'
  tooltipPostfix='K'
  maxBars={5}
  data={data}
  styling={{
    labelClass: 'text-lg font-bold text-green-500',
    beforeClass: 'before:bg-bar-hover'
  }}
/>;

Результат

Стилизация

Пропс styling в компонентах surf-charts обеспечивает детальный контроль над внешним видом различных элементов чарта. Ниже описано, как вы можете использовать эти свойства для тонкой настройки визуального представления ваших чартов.

labelClass

Этот параметр управляет стилем текста заголовка в верхней части чарта. Вы можете применить любые классы TailwindCSS или пользовательские классы CSS, чтобы настроить размер, цвет, вес и другие свойства шрифта.

Пример

<VerticalChart
  label='Monthly Sales'
  styling={{
    labelClass: 'text-xl font-semibold text-blue-700'
  }}
/>

beforeClass

Это свойство позволяет применять стили к псевдоэлементу before столбиков на чарте. Это полезно для добавления декоративных эффектов, таких как фоновые цвета или градиенты, перед основным содержимым столбиков.

<VerticalChart
  data={data}
  styling={{
    beforeClass: 'before:bg-gradient-to-r before:from-pink-400 before:to-red-600'
  }}
/>

tooltipClass

Настраивает внешний вид всплывающих подсказок, которые появляются при наведении курсора на столбики. Это может включать форматирование текста, цвета фона, границы и многое другое.

<VerticalChart
  data={data}
  styling={{
    tooltipClass: 'bg-black text-white p-2 rounded-lg shadow-lg'
  }}
/>

barClass

Настраивает внешний вид каждого столбца на графике. Это может включать цвета фона, границы и многое другое.

<VerticalChart
  data={data}
  styling={{
    barClass: 'bg-black p-2 h-8'
  }}
/>

titleClass

Настраивает внешний вид каждого заголовка столбца на графике. Это может включать форматирование текста и многое другое.

<VerticalChart
  data={data}
  styling={{
    titleClass: 'text-green-500 text-lg font-semibold'
  }}
/>

valuesLineOuter, valuesLineInner и valuesLineLabels

Настраивает внешний вид линии значений и ее метки. Вы можете изменить шрифт, отступы и так далее. Если вы хотите полностью скрыть эту строку, вы можете добавить display: none; через класс к valuesLineOuter.

<VerticalChart
  data={data}
  styling={{
    valuesLineOuter: 'pr-4';
    valuesLineInner: 'shrink';
    valuesLineLabels: 'font-semibold max-w-24';
  }}
/>

gridWrapper и gridLine

Настраивает внешний вид и расположение сетки линий значений.

<VerticalChart
  data={data}
  styling={{
    gridWrapper: 'visible'
  }}
/>

Result

Дополнительная кастомизация

Библиотека surf-charts предлагает мощные возможности настройки, позволяющие создавать индивидуальные визуализации. Используя пропс styling наряду с другими пропсами компонентов, вы можете адаптировать внешний вид чартов в соответствии с вашими уникальными потребностями в дизайне.

За более конкретными деталями настройки или расширенными шаблонами использования обращайтесь к документации каждого отдельного компонента в библиотеке surf-charts.

Продвинутый пример

import { VerticalChart } from '@surf/charts';
 
const salesData = [
  { label: 'June', value: 90 },
  { label: 'July', value: 130 },
  { label: 'August', value: 100 },
  { label: 'September', value: 115 },
  { label: 'October', value: 125 }
];
 
<VerticalChart
  label='Quarterly Sales'
  tooltipPostfix='K'
  colorScheme='light'
  maxBars={4}
  sort='asc'
  noDataContent='Sales data is unavailable'
  noLabelContent='No Sales Label'
  className='shadow-md rounded-lg border border-gray-300'
  data={salesData}
  styling={{
    labelClass: 'text-2xl font-bold text-gray-800 mb-4',
    beforeClass: 'before:bg-blue-500 before:opacity-75',
    tooltipClass: 'bg-gray-900 text-white p-2 rounded-lg',
    barClass: 'h-8 border border-white',
    titleClass: 'font-semibold'
  }}
/>;