@ulgaal/react-timeseries

React timeseries charts library

A react-based library to display timeseries data, inspired by react-timeseries-charts, but using a different foundation. The goals of the project are:

• function based components and hooks
• keep the same basic layout (container, multiple rows, multiple vertical axes)
• remove obsolete external dependencies (no pond) or refresh them (d3-*)
• support both aligned and unaligned timeseries
• do not overly transform the component tree to keep intuitive mapping between declared and rendered components
• strip un-necessary concepts (brush & co) and move them to chart types
• provide well-defined extensibility API for charts, horizontal and vertical axes
• provide plugable data sources with a built-in PromQL datasource

Check our storybook for lots of interactive examples and documentation !

Table of Contents

• Demo and samples
• Contributing

Installing

npm install @ulgaal/react-timeseries

# or if you use yarn

yarn add @ulgaal/react-timeseries

Usage

// ES6
import { Source } from "@ulgaal/react-timeseries";

const MyComponent = () => (
  <div>
    Hover over <Source tip="Here is the tip">these words</Source> to get a tip
  </div>
);

Documentation

• Reference documentation provides a component-level autogenerated doc
• Overview provides a conceptual overview of what the library can do and how to do it.
• Annotated source provides a groc-generated annotated view of the source code.

Demo and samples

Be sure to check the storybook as it contains many samples, complete with source-code, documentation and interactive panels to tweak all possible aspects of tooltips and sticky-notes.

Contributing

This guide provides info on various ways you can contribute to this project.