@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 (>=4.0.0)

Using npm:

npm install @redash/viz

Using yarn:

yarn add @redash/viz

Usage

Basic 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

Column Types

Types used for the columns property in the data object. Currently used to determine the default column view for the Table Visualization. This field is not mandatory and can receive a null value.

Example:

const data = {
  columns: [
    { type: "string", name: "Country" },
    { type: "float", name: "Amount" },
  ],
  rows: [],
};

Available types:

• integer
• float
• boolean
• string
• datetime
• date

Customizable Settings

| Option | Description | Type | Default | | -------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | dateFormat | Date Format | string | "DD/MM/YYYY" | | dateTimeFormat | DateTime Format | string | "DD/MM/YYYY HH:mm" | | integerFormat | Integer Format | string | "0,0" | | floatFormat | Float Format | string | "0,0.00" | | booleanValues | Boolean names | Array [string, string] (correspond to false and true values) | ["false", "true"] | | tableCellMaxJSONSize | Max json size that will be parsed and rendered in a Table Cell | integer | 50000 | | allowCustomJSVisualization | Whether to allow the Custom chart type | boolean | false | | hidePlotlyModeBar | Whether to hide the Plotly Mode Bar on charts | boolean | false | | choroplethAvailableMaps | Configure the JSONs used for Choropleth maps (Note: Choropleth won't work without this setting) | Object (see example below) | {} | | HelpTriggerComponent | Component used to render helper links on the Editor | React component with title and href props | Renders a tooltip with a link |

Example:

import React from "react";
import { Renderer, Editor, updateVisualizationsSettings } from "@redash/viz";

import countriesDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/countries.geo.json";
import subdivJapanDataUrl from "@redash/viz/lib/visualizations/choropleth/maps/japan.prefectures.geo.json";

function wrapComponentWithSettings(WrappedComponent) {
  return function VisualizationComponent(props) {
    updateVisualizationsSettings({
      choroplethAvailableMaps: {
        countries: {
          name: "Countries",
          url: countriesDataUrl,
        },
        subdiv_japan: {
          name: "Japan/Prefectures",
          url: subdivJapanDataUrl,
        },
      },
      dateFormat: "YYYY/MM/DD",
      booleanValues: ["False", "True"],
      hidePlotlyModeBar: true,
    });

    return <WrappedComponent {...props} />;
  };
}

export const ConfiguredRenderer = wrapComponentWithSettings(Renderer);
export const ConfiguredEditor = wrapComponentWithSettings(Editor);

Specific File Imports

There is a transpiled only build aimed for specific file imports.

Note: Currently requires Less.

Usage:

import React from "react";
import JsonViewInteractive from "@redash/viz/lib/components/json-view-interactive/JsonViewInteractive";

const example = { list: ["value1", "value2", "value3"], obj: { prop: "value" } };

export default function App() {
  return <JsonViewInteractive value={example} />;
}

License

BSD-2-Clause.