Arranger Charts Docs by samrichca · Pull Request #1083 · overture-stack/arranger

samrichca · 2026-07-10T16:56:45Z

Summary

Issues

#(issue number)
#(issue number)

Description of Changes

Readiness Checklist

Self Review
- I have performed a self review of code
- I have run the application locally and manually tested the feature
- I have checked all updates to correct typos and misspellings
Formatting
- Code follows the project style guide
- Autmated code formatters (ie. Prettier) have been run
Local Testing
- Successfully built all packages locally
- Successfully ran all test suites, all unit and integration tests pass
Updated Tests
- Unit and integration tests have been added that describe the bug that was fixed or the features that were added
Documentation
- All new environment variables added to .env.schema file and documented in the README
- All changes to server HTTP endpoints have open-api documentation
- All new functions exported from their module have TSDoc comment documentation

justincorrigible · 2026-07-10T17:04:53Z

good call adding this! however, it belongs at the Overture-stack org level, so we can relocate it there. I'll put that in the roadmap, and we can leave it here for now 👍

scratch that. this file can be removed, we already point at a code of conduct in the overture docs site from the CONTRIBUTING.md in this repo

MitchellShiell · 2026-07-10T17:07:44Z

+
+### BarChart
+
+Renders a horizontal bar chart for aggregation data.


If introducing a visual component please include a screenshot of the component.

MitchellShiell · 2026-07-10T17:08:31Z

+# Overview
+
+**Arranger Charts** is a plugin for Arranger UIs for adding interactive aggregated data charts to React applications. It currently supports Bar and Sunburst charts. Arranger Charts also uses a React context provider to request data from Arranger Server for all charts on the page. Interacting with the charts can update the filters for data requested from Arranger Server.
+


Please include a screen shot of the charts within a discovery page

MitchellShiell · 2026-07-10T17:12:27Z

+
+## Developer Setup
+
+This guide will walk you through setting up a complete development environment for Arranger Charts, including its complementary services.


This statement seems out of place given the context of the page

MitchellShiell · 2026-07-10T17:13:21Z

+npm i @overture-stack/arranger-charts @overture-stack/arranger-components
+```
+
+### Quick Start


Not really a quick start more of an implementation guide which is great, should think about how we can flesh this out a bit more, "building a discovery page"

Co-authored-by: Mitchell Shiell <59712867+MitchellShiell@users.noreply.github.com>

justincorrigible · 2026-07-10T22:44:30Z

+| `debugMode`             | `boolean` | No       | Enable verbose logging for development |
+| `disableIncludeMissing` | `boolean` | No       | Hide properties with "No Data"         |
+| `loadingDelay`          | `number`  | No       | Delay network results by milliseconds  |


while debugMode and loadingDelay are correctly marked as optional, the type actually requires them in Provider.tsx:22-26. they need to be made optional there

sorry, should I do that on this PR or make a new issue/PR?

justincorrigible · 2026-07-10T22:46:10Z

+| `components`           | `object`         | No       | Custom fallback components            |
+| `components.EmptyData` | `ReactComponent` | No       | Custom empty state component          |
+| `components.ErrorData` | `ReactComponent` | No       | Custom error component                |
+| `components.Loader`    | `ReactComponent` | No       | Custom loading component              |


i think components.TooltipComp could also go here, but maybe not worth adding? 🤔
not sure what the right call is here.

TooltipComp never gets used :/

justincorrigible · 2026-07-10T22:52:53Z

+| `handlers.onClick`    | `function` | No       | Callback when clicking a bar segment                                                                |
+| `maxBars`             | `number`   | Yes      | Maximum number of bars to display                                                                   |
+| `ranges`              | `Range[]`  | No       | For numeric fields, specify value ranges. A `Range` is `{ key: string, from: number, to: number }`. |
+| `theme`               | `object`   | No       | Event handlers                                                                                      |


the description here seems like missed copy/pasta, and this is a required property at BarChart.tsx:23-30

justincorrigible · 2026-07-10T22:53:35Z

+
+	const chartFilters = useMemo(
+		() => ({
+			[fieldName]: chartFilter(fieldName, sqon, setSQON),


chartFilter is not shown as imported... if this is something consumers are expected to implement themselves, a comment here may help identify that

I decided to remove this example because there's a fair bit of additional code involved and it's really specific to OHCRN.

justincorrigible · 2026-07-10T22:55:42Z

+			<ChartsThemeProvider>
+				<BarChart
+					fieldName={fieldName}
+					maxBars={maxBars}


maxBars wasn't defined anywhere. this could be shown as commented with a comment if BarChart has a default

justincorrigible · 2026-07-10T22:56:57Z

+		[sqon, setSQON],
+	);
+
+	return (


the other examples in this doc are wrapped in <ArrangerDataProvider>
may be worth adding it here too as it's needed and for consistency

justincorrigible · 2026-07-10T22:58:24Z

+| Name               | Type       | Required | Description                                     |
+| ------------------ | ---------- | -------- | ----------------------------------------------- |
+| `fieldName`        | `string`   | Yes      | GraphQL field name to visualize                 |
+| `maxSegments`      | `number`   | Yes      | Custom fallback components                      |


the description doesn't seem accurate. it used to say "Maximum number of segments to display".
copy pasta from components @ ChartsThemeProvider?

justincorrigible · 2026-07-10T22:58:57Z

 # Arranger Charts

-A React chart library for visualizing Arranger aggregation.
+!TODO Rename to README.md


probably not needed anymore?

justincorrigible · 2026-07-10T23:00:00Z

-    - `Loader`: Custom loading component
-    - `ErrorData`: Custom error component
-    - `EmptyData`: Custom empty state component
+- Node 22 or above


line 80 states v24+ (which i like)

justincorrigible · 2026-07-13T12:39:47Z

@@ -0,0 +1,46 @@
+# Development
+
+This guide covers how to develop or contribute to Arranger Charts. For using Arranger Charts in a React application, see !TODO LINK TO GUIDES/USAGE.


this link can be added now 👍

justincorrigible · 2026-07-13T12:43:16Z

+```bash
+# in your local Arranger folder
+cd modules/charts
+npm link
+cd ../..
+cd modules/components
+npm link
+```


note to self @justincorrigible: make this a batch/make command

… into feat/docs-charts

wip docs

4e496fc

justincorrigible reviewed Jul 10, 2026

View reviewed changes

MitchellShiell reviewed Jul 10, 2026

View reviewed changes

update example

9e61254

MitchellShiell reviewed Jul 10, 2026

View reviewed changes

Comment thread modules/charts/README.md Outdated

update usage doc

d587a07

MitchellShiell reviewed Jul 10, 2026

View reviewed changes

samrichca and others added 2 commits July 10, 2026 14:12

Update modules/charts/README.md

c57a508

Co-authored-by: Mitchell Shiell <59712867+MitchellShiell@users.noreply.github.com>

Merge branch 'main' into feat/docs-charts

f2a2c55

justincorrigible reviewed Jul 10, 2026

View reviewed changes

justincorrigible reviewed Jul 13, 2026

View reviewed changes

samrichca added 2 commits July 15, 2026 15:02

docs feedback

74272ea

Merge branch 'feat/docs-charts' of github.com:overture-stack/arranger…

702e907

… into feat/docs-charts


		### BarChart

		Renders a horizontal bar chart for aggregation data.

		# Overview

		Arranger Charts is a plugin for Arranger UIs for adding interactive aggregated data charts to React applications. It currently supports Bar and Sunburst charts. Arranger Charts also uses a React context provider to request data from Arranger Server for all charts on the page. Interacting with the charts can update the filters for data requested from Arranger Server.


		## Developer Setup

		This guide will walk you through setting up a complete development environment for Arranger Charts, including its complementary services.

		@@ -0,0 +1,46 @@
		# Development

		This guide covers how to develop or contribute to Arranger Charts. For using Arranger Charts in a React application, see !TODO LINK TO GUIDES/USAGE.

Uh oh!

Conversation

samrichca commented Jul 10, 2026

Summary

Issues

Description of Changes

Readiness Checklist

Uh oh!

justincorrigible Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justincorrigible Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justincorrigible Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justincorrigible Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justincorrigible Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justincorrigible Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

justincorrigible Jul 10, 2026 •

edited

Loading

justincorrigible Jul 13, 2026 •

edited

Loading

justincorrigible Jul 10, 2026 •

edited

Loading

justincorrigible Jul 10, 2026 •

edited

Loading

justincorrigible Jul 10, 2026 •

edited

Loading

justincorrigible Jul 10, 2026 •

edited

Loading