@redash/viz

@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.