@ addore/ 图表

主题中的图表 @adecore/ui:行,行和列随时间或每个类别而分出,以多系列的传说,热映射,痕量时间和火花线来分出,并有标记和波段,工具提示,传说和数值表. 沿其容器宽度并取用整像素的图表。 它需要一个制表站和一个屏幕阅读器逐桶读取. d3-scale 财务报告和审定财务报表 d3-shape 做数学.

文档

安装

bun add @adecore/charts

@adecore/ui,反应19, react-dom, (中文(简体) ), i18next 财务报告和审定财务报表 react-i18next 是同伴的依赖关系。 让 Tailwind 扫描旁边的包 @adecore/ui,并添加 charts 应用程序 i18 的命名空间 :

@import "tailwindcss";
@import "@adecore/ui/theme.css";
@source "../node_modules/@adecore/ui/dist";
@source "../node_modules/@adecore/charts/dist";

import { CHARTS_NAMESPACE, CHARTS_RESOURCES } from '@adecore/charts';

for (const [language, words] of Object.entries(CHARTS_RESOURCES)) {
    i18n.addResourceBundle(language, CHARTS_NAMESPACE, words);
}

使用

import { Chart } from '@adecore/charts';

<Chart.Root data={buckets} x="at" xScale="time" label="Events per hour" height={220}>
    <Chart.Grid />
    <Chart.XAxis />
    <Chart.YAxis />
    <Chart.Area value="errors" label="Errors" tone="error" />
    <Chart.Line value="warnings" label="Warnings" tone="needsYou" />
    <Chart.Tooltip />
    <Chart.Legend />
</Chart.Root>

Timeline 绘制一行相叠的一行树的痕量的跨度,每行的长度以一轴为一栏:

import { Timeline } from '@adecore/charts';

<Timeline.Root data={spans} kinds={kinds} label="Spans of GET /orders">
    <Timeline.Legend />
    <Timeline.Axis heading="Span" />
    <Timeline.Rows />
</Timeline.Root>

许可证

FSL-1.1-MIT,见 自由主义。 。 。 .