Visualizations Library: Enhance docs (#4946)

getredash · Jul 12, 2020 · 328f0f3 · 328f0f3
1 parent ecb9adf
commit 328f0f3
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 0 deletions.
diff --git a/viz-lib/CHANGELOG.md 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
@@ -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.