https://github.com/influxdata/giraffe
A foundation for visualizations in the InfluxDB UI
https://github.com/influxdata/giraffe
Last synced: 2 months ago
JSON representation
A foundation for visualizations in the InfluxDB UI
- Host: GitHub
- URL: https://github.com/influxdata/giraffe
- Owner: influxdata
- License: mit
- Created: 2019-03-28T20:58:30.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-10T21:17:53.000Z (about 1 year ago)
- Last Synced: 2024-04-14T03:04:11.910Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://influxdata.github.io/giraffe/
- Size: 15.5 MB
- Stars: 178
- Watchers: 20
- Forks: 33
- Open Issues: 136
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# Giraffe
[](https://www.influxdata.com/slack)
A React-based visualization library powering the data visualizations in the [InfluxDB 2.0](https://github.com/influxdata/influxdb/) UI.
## Features
There are plenty of terrific visualization libraries in the JavaScript ecosystem.
Giraffe aims to distinguish itself with several features:
- Support for the [Flux](https://www.influxdata.com/products/flux) language
- Easy reactivity and extensibility via React
- Support for mapping groupings of columns to a single visual aesthetic
- A high-level [Grammar of Graphics](http://vita.had.co.nz/papers/layered-grammar.pdf)–style API that can specify a wide variety of visualizations with a few simple concepts
- A [columnar](https://observablehq.com/@mbostock/manipulating-flat-arrays) interface for input data that enables efficient interoperability with Web Workers and [Apache Arrow](https://arrow.apache.org/)
- Self-contained configurations in the style of [Vega-Lite](https://vega.github.io/vega-lite/)
## Demos
[See the visualizations in action using Storybook.](https://influxdata.github.io/giraffe)
## Sample Code
[See a listing of sample projects that render different types of visualizations.](./examples/Listing_of_giraffe_samples.md)
## Getting Started [](#getting-started)
#### Installation
Install [Giraffe](https://www.npmjs.com/package/@influxdata/giraffe) with your package manager:
```
yarn add @influxdata/giraffe
```
or
```
npm install @influxdata/giraffe
```
#### Example
See the [Quick Start Guide](./giraffe/README.md#quick-start) for an example.
## Development
To contribute to Giraffe, see the [contributing guide](./CONTRIBUTING.md).
Looking for details on the configuration? See the [configuration guide](./giraffe/README.md#config).