{"_id":"@asnefedov/charts","name":"@asnefedov/charts","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@asnefedov/charts","version":"1.0.0","licenses":[{"type":"MIT","url":"https://consta.design/static/licence_mit.pdf"}],"publishConfig":{"access":"public"},"peerDependencies":{"@antv/g2plot":"^2.4.31"},"dependencies":{"@antv/g2plot":"^2.4.32","@babel/plugin-proposal-object-rest-spread":"^7.20.7","@asnefedov/uikit":"5.16.0"},"_id":"@asnefedov/charts@1.0.0","gitHead":"e14e592008d44ab376ae5b2ba7babc883485dddc","description":"Consta — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/).","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-m+CrLoqy73gUz49I9Q5kzhztswnKQj2yW9JZ3FWbcs0MCuHkHEPkmYfUx43qBbaaN9DxXzeTpaZBnSqVY3lr9w==","shasum":"47303ee61910b48ebf7fb1b68ec2fff2f71de2e7","tarball":"https://registry.npmjs.org/@asnefedov/charts/-/charts-1.0.0.tgz","fileCount":199,"unpackedSize":255196,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBEGPG4Z8I7A9cjLs9jLojzSxobxsLdijJLmOx3kYOTdAiBhFE0vaCoI7k0Qbt0d5mbK4mfK4ogO+fFDeun+TMEYzQ=="}]},"_npmUser":{"name":"asnefedov","email":"nefedovaleksandr196@gmail.com"},"directories":{},"maintainers":[{"name":"asnefedov","email":"nefedovaleksandr196@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/charts_1.0.0_1770626575691_0.045393155369476856"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-09T08:42:55.591Z","1.0.0":"2026-02-09T08:42:55.834Z","modified":"2026-02-09T08:42:56.027Z"},"maintainers":[{"name":"asnefedov","email":"nefedovaleksandr196@gmail.com"}],"description":"Consta — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/).","readme":"# [Дизайн-система Consta](https://consta.design/) | Библиотека графиков\r\n\r\nConsta — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/).\r\n\r\nВ дизайн-систему входит несколько библиотек. **В этом репозитории — библиотека графиков:** линейные, столбчатые, круговые диаграммы и другие компоненты, с помощью которых удобно показывать статистику. Библиотека сделана на основе [G2Plot](https://g2plot.antv.vision/en), добавлена стилизация для Consta.\r\n\r\nВсе библиотеки представлены в виде компонентов и макетов в Figma.\r\n\r\n## Что входит в дизайн-систему\r\n\r\n### Библиотека компонентов\r\n\r\n[Репозиторий](https://github.com/consta-design-system/uikit) | [NPM](https://www.npmjs.com/package/@consta/uikit) | [Документация и стенд](http://uikit.consta.design/) | [Макеты](https://www.figma.com/community/file/853774806786762374)\r\n\r\n### Библиотека графиков\r\n\r\n[В этом репозитории](https://github.com/consta-design-system/charts) | [NPM](https://www.npmjs.com/package/@consta/charts) | [Документация и стенд](http://charts.consta.design/) | [Макеты](https://www.figma.com/community/file/982611119114314434)\r\n\r\n[>> Посмотреть все библиотеки](https://github.com/consta-design-system)\r\n\r\n<hr>\r\n\r\nПодробности — на [сайте дизайн-системы Consta](https://consta.design/)\r\n\r\nСледите за новостями и релизами в [телеграм-канале дизайн-системы](https://t.me/consta_ui_releases)\r\n\r\n# Как использовать\r\n\r\n## Установите пакет\r\n\r\n```sh\r\n# NPM\r\n$ npm i @consta/charts\r\n# Yarn\r\n$ yarn add @consta/charts\r\n```\r\n\r\n## Подключите зависимости\r\n\r\nЧтобы начать работу, установите библиотеку [`@consta/uikit`](https://www.npmjs.com/package/@consta/uikit) и [настройте тему](http://consta.design/libs/portal/theme-themeabout).\r\n\r\n### Можно использовать компоненты\r\n\r\nНапример, так:\r\n\r\n```js\r\nimport { Theme, presetGpnDefault } from '@consta/uikit/Theme';\r\nimport { Pie, PieProps } from '@consta/charts/Pie';\r\nexport const data = [\r\n  { type: 'Option-1', value: 27 },\r\n  { type: 'Option-2', value: 25 },\r\n  { type: 'Option-3', value: 18 },\r\n  { type: 'Option-4', value: 15 },\r\n  { type: 'Option-5', value: 10 },\r\n  { type: 'Option-6', value: 5 },\r\n];\r\nconst MyComponent = () => {\r\n  const options: PieProps = {\r\n    appendPadding: 10,\r\n    data,\r\n    angleField: 'value',\r\n    colorField: 'type',\r\n    radius: 1,\r\n    label: {\r\n      type: 'inner',\r\n      offset: '-50%',\r\n      content: '{value}',\r\n      style: {\r\n        textAlign: 'center',\r\n        fontSize: 14,\r\n      },\r\n    },\r\n  };\r\n  return (\r\n    <Theme preset={presetGpnDefault}>\r\n      <Pie {...options} />\r\n    </Theme>\r\n  );\r\n};\r\n```\r\n\r\n## Документация и стенд\r\n\r\nНа стенде можно посмотреть примеры графиков. Документация — во вкладке у каждого компонента.\r\n\r\n[Вперёд, к стенду](http://consta.design/libs/charts)\r\n\r\n## Разработка\r\n\r\n### Подготовка окружения\r\n\r\nРабочее окружение должно содержать NodeJS и Yarn.\r\n\r\nЧтобы установить зависимости, выполните команду:\r\n\r\n```sh\r\n$ yarn install\r\n```\r\n\r\n### Основные команды\r\n\r\n```sh\r\n# Запуск локального сервера для разработки\r\n$ yarn start\r\n\r\n# Сборка пакета\r\n$ yarn build\r\n\r\n# Сборка стенда\r\n$ yarn stand:build\r\n\r\n# Запуск тестов\r\n$ yarn test\r\n```\r\n\r\n## Контрибьюторам\r\n\r\nБудем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте [инструкцию для контрибьюторов](https://consta.design/libs/portal/contributers-code).\r\n\r\n## Лицензия\r\n\r\nДизайн-систему можно использовать бесплатно, она распространяется на условиях открытой [лицензии MIT](https://consta.design/static/licence_mit.pdf).\r\n","readmeFilename":"README.md","_rev":"1-dac1a1c8143a0b784cbede4198f2ff22"}