Skip to content

Commit a611b8c

Browse files
juandjarajuandjara
authored
Merge pull request #525 from CartoDB/juandjara-patch-2
Update documentation for LegendWidget
2 parents 90280e3 + 67e0708 commit a611b8c

File tree

1 file changed

+29
-15
lines changed

1 file changed

+29
-15
lines changed

‎app/content/react/library-reference/widgets.md‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -396,11 +396,10 @@ Renders a `<LegendWidget />` component. The widget can display a switch to show
396396
| Param | Type | Default | Description |
397397
| ------------------------- | ------------------- | ------------- | --------------------------------------------------- |
398398
| props | `Object` | | |
399-
| [props.className] | `string` | | (optional) Material-UI withStyle class for styling. |
399+
| [props.title] | `string` | | (optional) Title for the expanded widget. |
400400
| [props.customLegendTypes] | `Object.<string, function>` | | (optional) Object with custom legend types and the components to be used with these types. |
401-
| [props.customLayerOptions] | `Object.<string, function>` | | (optional) Object with custom layer options and the components to be used with these options. |
402401
| [props.initialCollapsed] | `bool` | `false` | (optional) Indicates whether the widget is initially collapsed or not. |
403-
| [props.layerOrder] | `Array<string>` | `[]` | Array of layer identifiers. Defines the order of layers in the legend. |
402+
| [props.layerOrder] | `Array<string>` | `[]` | (optional) Array of layer identifiers. Defines the order of layers in the legend. |
404403
{{%/ tableWrapper %}}
405404

406405
You can control the legend options through the following properties that must be added to the `layerAttributes` property for the layer in the store:
@@ -410,21 +409,36 @@ You can control the legend options through the following properties that must be
410409
| ------------- | -------------- | ------------- | -------------------------------------------------------------- |
411410
| title | `string` | | Layer title |
412411
| visible | `boolean` | `true` | Indicates whether the layer is visible by default or not. |
412+
| switchable | `boolean` | `true` | Indicates whether the layer can be hide/shown |
413413
| opacity | `Number` | `1` | Initial opacity for the layer. |
414414
| showOpacityControl | `boolean` | `true` | Indicates whether the opacity control is shown or not. |
415-
| options | `Array` | | Array of keys from the `customLayerOptions` passed to `LegendWidget`. Indicates which of the `customLayerOptions` components to render in the legend for this layer |
416-
| switchable | `boolean` | `true` | Indicates whether the layer can be hide/shown |
417-
| legend | `Object` | | Legend properties. Define an empty object `legend: {}` if you just want layer switching capabilities. |
418-
| legend.type | `string` | | Legend type. Must be one of the types defined in the LEGEND_TYPES enum |
419-
| legend.attr | `string` | | Attribute used for styling the layer |
420-
| legend.colors | `Array` or `string` | | Array of colors (RGB arrays) or CARTO colors palette (string). Used for `LEGEND_TYPES.CATEGORY`, `LEGEND_TYPES.BINS` and `LEGEND_TYPES.CONTINUOUS_RAMP` |
421-
| legend.labels | `Array` | | - Array of `strings` for labels when using `LEGEND_TYPES.CATEGORY` and `LEGEND_TYPES.ICON`. |
422-
| | | | - Array of `numbers` for `LEGEND_TYPES.BINS` and `LEGEND_TYPES.CONTINUOUS_RAMP`. Since v1.3, it also accepts an array of `{ value: number; label: string }` to format the values. The first and last elements will be used for the labels and the intermediate elements will be used for defining the bins/intervals (for bins ramps) or the colors that we are interpolating (for continuous ramps). |
415+
| collapsed | `boolean` | `false` | Indicates whether the legend component is collapsed or not. |
416+
| collapsible | `boolean` | `true` | Indicates whether the legend component is collapsible or not. |
417+
| helperText | `string` | | (optional) Note to show below the legend to add additional explanations. It accepts an html string to show rich text |
418+
| minZoom | `number` | | (optional) min zoom at which layer is displayed, to add zoom level indications to note. |
419+
| maxZoom | `number` | | (optional) max zoom at which layer is displayed, to add zoom level indications to note. |
420+
| legend | `Object` or `Array` | | Legend properties. A layer can have one legend or many. Define an empty object `legend: {}` if you just want layer switching capabilities. If `legend` object is not defined, this layer will not be shown in the legend widget. |
421+
{{%/ tableWrapper %}}
422+
423+
Each `legend` object can define these properties that will be picked up depending on the legend `type`. For more information, check [the type definition file for `LegendWidgetUI`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/widgets/legend/LegendWidgetUI.d.ts)
424+
425+
{{% tableWrapper tab="true" %}}
426+
| Param | Type | Default | Description |
427+
| ------------- | -------------- | ------------- | -------------------------------------------------------------- |
428+
| type | `string` | | Legend type. Must be one of the types defined in the `LEGEND_TYPES` enum |
429+
| attr | `string` | | (optional) subtitle to show below the legend item toggle when expanded |
430+
| select | `Object` | | Configuration object for the options selector |
431+
| select.label | `string` | | Label to show above the select field |
432+
| select.value | `any` | | `value` prop of the currently selected `option` for the selector |
433+
| select.options | `{ label: string; value: any }[]` | | Group of options for the selector. For each option, the selector will display the `label` field and use the `value` field when selected |
434+
| colors | `Array` or `string` | | Array of colors (RGB arrays) or CARTO colors palette (string). Used for `LEGEND_TYPES.CATEGORY`, `LEGEND_TYPES.BINS` and `LEGEND_TYPES.CONTINUOUS_RAMP` |
435+
| labels | `Array` | | - Array of `strings` for labels when using `LEGEND_TYPES.CATEGORY` and `LEGEND_TYPES.ICON`. |
436+
| | | | - Array of `numbers` for `LEGEND_TYPES.BINS` and `LEGEND_TYPES.CONTINUOUS_RAMP`. Since v1.3, it also accepts an array of `{ value: number; label: string }` to format the values. The first and last elements will be used for the labels and the intermediate elements will be used for defining the bins/intervals (for bins ramps) or the colors that we are interpolating (for continuous ramps). |
423437
| | | | - Array of `[min, max]` numbers for `LEGEND_TYPES.PROPORTION`. |
424-
| legend.icons | `Array` | | Array of string with icons URLs. Used for `LEGEND_TYPES.ICON`. |
425-
| legend.note | `string` | | Note to show below th legend to add additional explanations. |
426-
| legend.collapsed | `boolean` | `false` | Indicates whether the legend component is collapsed or not. |
427-
| legend.collapsible | `boolean` | `true` | Indicates whether the legend component is collapsible or not. |
438+
| icons | `Array` | | Array of string with icons URLs. Used for `LEGEND_TYPES.ICON`. |
439+
| isStrokeColor | `boolean` | | Used in `LEGEND_TYPES.CATEGORY` to indicate if the dots should only show a color border |
440+
| customMarkers | `string` or `string[]` | | Used in `LEGEND_TYPES.CATEGORY` to show custom markers instead of color dots. When only a `string` is passed, it will be used as the same marker for all the categories. |
441+
| maskedMarkers | `boolean` | | Used in `LEGEND_TYPES.CATEGORY` to apply the colors in the config to the custom marker(s), using the marker(s) as mask images. |
428442
{{%/ tableWrapper %}}
429443

430444

0 commit comments

Comments
 (0)