jprdonnelly/redash
1
0
Fork 0
mirror of https://github.com/getredash/redash.git synced 2025-12-19 17:37:19 -05:00
Code Issues Projects Releases Wiki Activity

Visualizations Library: Enhance docs (#4946)

Browse Source
This commit is contained in:
Gabriel Dutra
2020-07-12 12:36:03 -03:00
committed by GitHub
parent ecb9adf903
commit 328f0f3f0c
2 changed files with 101 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
viz-lib/CHANGELOG.md Normal file
View File

@@ -0,0 +1,5 @@
# Change Log
## v0.1.0 - 2020-05-05
- Created the library from Redash codebase

96
viz-lib/README.md
View File

@@ -26,6 +26,8 @@ yarn add @redash/viz
## Usage
### Basic Usage
You can check [our live example](https://codesandbox.io/s/redashviz-v9odv) or follow the code below:
```jsx
@@ -85,6 +87,100 @@ function Example() {
- 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:
```js
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](https://github.com/getredash/redash/blob/fc246aafc445bdfc3ad2b82560141ef51f8753a9/viz-lib/src/visualizations/visualizationsSettings.js#L6-L33) |
Example:
```jsx
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:
```jsx
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.