@redash/viz
v0.1.1
Published
Redash visualizations
Downloads
622
Readme
@redash/viz
@redash/viz
is a library containing the visualizations used by Redash.
Installation
Required libraries:
- react (
>=16.8.0
) - react-dom (
>=16.8.0
) - antd (
>=3.19.0 < 4
)
Using npm:
npm install @redash/viz
Using yarn:
yarn add @redash/viz
Usage
You can check our live example or follow the code below:
import React, { useState } from "react";
import { Renderer, Editor } from "@redash/viz";
const exampleData = {
columns: [
{ type: null, name: "Country" },
{ type: null, name: "Amount" },
],
rows: [
{ Amount: 37.620000000000005, Country: "Argentina" },
{ Amount: 37.620000000000005, Country: "Australia" },
{ Amount: 42.62, Country: "Austria" },
{ Amount: 37.62, Country: "Belgium" },
{ Amount: 190.09999999999997, Country: "Brazil" },
{ Amount: 303.9599999999999, Country: "Canada" },
{ Amount: 46.62, Country: "Chile" },
{ Amount: 90.24000000000001, Country: "Czech Republic" },
{ Amount: 37.620000000000005, Country: "Denmark" },
{ Amount: 41.620000000000005, Country: "Finland" },
{ Amount: 195.09999999999994, Country: "France" },
],
};
function Example() {
const [options, setOptions] = useState({ countRows: true });
return (
<div>
<Editor
type="COUNTER"
visualizationName="Example Visualization"
options={options}
data={exampleData}
onChange={setOptions}
/>
<Renderer type="COUNTER" visualizationName="Example Visualization" options={options} data={exampleData} />
</div>
);
}
Available Types
- Chart:
CHART
- Cohort:
COHORT
- Counter:
COUNTER
- Details View:
DETAILS
- Funnel:
FUNNEL
- Map (Choropleth):
CHOROPLETH
- Map (Markers):
MAP
- Pivot Table:
PIVOT
- Sankey:
SANKEY
- Sunburst Sequence:
SUNBURST_SEQUENCE
- Table:
TABLE
- Word Cloud:
WORD_CLOUD
License
BSD-2-Clause.