client-ui
client-ui provides all of the core React UI components for geoprocessing
projects, including the building blocks for creating custom UI components
needed by a project. Run the storybook command to explore them
interactively.
Index
Classes
| Class | Description |
|---|---|
| ReportError | - |
Interfaces
Functions
| Function | Description |
|---|---|
| App | - |
| Card | - |
| CardDecorator | Default decorator. Create additional building on StoryLayout for more sophisticated needs |
| ChartLegend | Horizontal stacked bar chart component |
| CheckboxGroup | Controlled checkbox group |
| Circle | Circle with user-defined component inside |
| ClassTable | Table displaying class metrics, one class per table row. Having more than one metric per class may yield unexpected results Returns 0 value in table when faced with a 'missing' metric instead of erroring Handles "class has no value" NaN situation (common when sketch doesn't overlap with a geography) by overwriting with 0 and adding information circle |
| ClassTableStyled | - |
| Collapse | - |
| CollapseGroup | - |
| createReportDecorator | Think of this as a ReportDecorator generator, that allows you to pass in context and override the default The only reason to use this instead of ReportDecorator directly is to pass context |
| DataDownload | Dropdown menu for transforming data to CSV/JSON format and initiating a browser download Defaults to CSV and JSON, and filename will include sketch name from ReportContext (if available) and current timestamp |
| DataDownloadToolbar | Convenience component that creates a Toolbar with Header and DataDownload |
| Dropdown | - |
| DropdownContainer | - |
| DropdownItem | - |
| DropdownTrigger | - |
| EstimateLabel | - |
| FilterSelectTable | Table with customizable filter functions as CheckboxGroup that when selected filter the rows if the function return true. By default only 'some' filter function has to match for it to filter the row |
| FilterSelectTableStyled | - |
| finishTask | Finishes task by hitting the remote cache, updating the hook with the task result and cleaning up |
| GeographySwitcher | - |
| GreenPill | - |
| GroupCircle | Circle with user-defined group colors |
| GroupCircleRow | GroupCircle with layout for use in table row |
| GroupPill | Pill with colors assigned to each group name |
| HorizontalStackedBar | Horizontal stacked bar chart component |
| InfoStatus | - |
| IucnActivitiesCard | - |
| IucnDesignationTable | - |
| IucnLevelCircle | - |
| IucnLevelCircleRow | - |
| IucnLevelPill | - |
| IucnMatrix | - |
| KeySection | - |
| LanguageSwitcher | - |
| LayerToggle | - |
| ObjectiveStatus | - |
| Pill | - |
| PillColumn | - |
| PointyCircle | Circle with pointy top right corner |
| ProgressBar | - |
| ProgressBarWrapper | - |
| RbcsActivitiesCard | - |
| RbcsIcon | - |
| RbcsLearnMore | Describes RBCS and lists minimum level of protection required for each objective |
| RbcsMpaClassPanel | Sketch collection status panel for MPA regulation-based classification |
| RbcsMpaObjectiveStatus | - |
| RbcsNetworkObjectiveStatus | Displays status toward meeting Network objective |
| RbcsZoneClassPanel | Single-sketch status panel for MPA regulation-based classification |
| RbcsZoneRegIcon | - |
| ReportChartFigure | Chart container styled with spacing for layout in report pages |
| ReportDecorator | Decorator that renders a story into ReportStoryLayout. |
| ReportPage | - |
| ReportStoryLayout | Wraps a story to look and behave like a sketch report It also replicates much of the functionality of App.tx like setting text direction and loading ReportContext. The context value can be added to or overridden by passing a value prop Layout includes a language switcher (connected to the report context) and a report width selector The caller must wrap the story in a Translator component to provide translations |
| ReportTableStyled | - |
| ReportTextDirection | Controls text direction for report based on current language |
| ResultsCard | - |
| runTask | Runs task by sending GET request to url with payload and optional flags Task can be aborted using caller-provided AbortSignal |
| SegmentControl | - |
| SimpleButton | A simple button component that accepts any text value so unicode can be used including emojis |
| SimpleButtonStyled | - |
| Skeleton | - |
| SketchAttributesCard | - |
| SketchClassTable | Table displaying sketch class metrics, one table row per sketch |
| SketchClassTableStyled | Style component for SketchClassTable |
| SmallReportTableStyled | - |
| StyledCircle | Default style for Circle |
| StyledPill | - |
| StyledTwoColorPointyCircle | - |
| Table | Table component suited to geoprocessing client reports. Builds on the react-table useTable hook and re-exports its interface, so reference those API docs to suit your needs. |
| TableStyled | - |
| Toolbar | - |
| ToolbarCard | - |
| ToolbarStyled | - |
| Tooltip | - |
| TooltipContainer | - |
| TooltipItem | - |
| TooltipTrigger | - |
| Translator | Loads translations asynchronously using dynamic import abd react-i18next will have translations eventually and update When language changes in context, the i18n instance will be updated and child components will update |
| TwoColorPointyCircle | Two-color reg-based classification circle for collection index value |
| useCheckboxes | Hook to maintain checkbox state |
| useFunction | Runs the given geoprocessing function for the current sketch, as defined by ReportContext During testing, useFunction will look for example output values in SketchContext.exampleOutputs |
| useLanguage | Hook that returns current language from report context, and provides function to change the language Also include language text direction as third parameter |
| useSketchProperties | - |
| VerticalSpacer | - |
| WarningPill | - |
| WatersDiagram | Serves up a translatable SVG image showing nautical boundaries |
Type Aliases
| Type alias | Description |
|---|---|
| Block | Single rectangle block value representing length |
| BlockGroup | Group of blocks with the same color |
| Column | - |
| HorizontalStackedBarRow | One or more BlockGroups forming a single linear stacked row |
| RbcsMpaObjectiveRenderMsgFunction | - |
| RbcsNetworkObjectiveRenderMsgFunction | - |
| RowConfig | - |
| StringOrNumber | - |
| SUPPORTED_FORMAT | - |
| TargetFormatter | Function that given target value for current table row, the table row index, and total number of table rows, returns a function that given target value returns a formatted string or Element. In other words a function that handles the formatting based on where the row is in the table and returns a function handling the remaining formatting. |
References
defaultReportContext
Re-exports defaultReportContext
PartialReportContextValue
Re-exports PartialReportContextValue
ReportContext
Re-exports ReportContext
ReportContextValue
Re-exports ReportContextValue
sampleSketchReportContextValue
Re-exports sampleSketchReportContextValue
TestExampleOutput
Re-exports TestExampleOutput