diff --git a/viz-lib/CHANGELOG.md b/viz-lib/CHANGELOG.md new file mode 100644 index 0000000000..e468b426f2 --- /dev/null +++ b/viz-lib/CHANGELOG.md @@ -0,0 +1,5 @@ +# Change Log + +## v0.1.0 - 2020-05-05 + +- Created the library from Redash codebase diff --git a/viz-lib/README.md b/viz-lib/README.md index 2e4cce905a..e1e0742d95 100644 --- a/viz-lib/README.md +++ b/viz-lib/README.md @@ -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 ; + }; +} + +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 ; +} +``` + ## License BSD-2-Clause.