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: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

~~sunburst charts have maxSegments rather than maxBars~~

I think your comments are referring to the wrong part of the code since I updated the files, nm

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-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

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

anncatton · 2026-07-20T15:36:59Z

+| `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`   | Yes      | Chart configuration options                                                                         |
+| `theme.sortByKey`     | `string[]` | No       | Array of keys to sort the data by.                                                                  |


Maybe we can add a line for the customTickValueSize prop I added to the theme.axisBottom object? https://github.com/overture-stack/arranger/pull/1075/changes#diff-121c70166491dfb648797ab0e42d02e7eef8dd876485f6dd280aa14c0a4b402cR27

name: theme.axisBottom.customTickValueSize type: number required: false description: For setting a custom step size for the bottom (X) axis

I also added the suppression label ("Too few") for the Bar Chart rows tooltip, but that is for an irregular use case, not sure if worth mentioning in the docs.

…ocs-charts

… 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

Comment thread docs/charts/03-Guides/01-Usage.md

justincorrigible reviewed Jul 10, 2026

View reviewed changes

Comment thread docs/charts/03-Guides/01-Usage.md

justincorrigible reviewed Jul 10, 2026

View reviewed changes

Comment thread modules/charts/README.md Outdated

justincorrigible reviewed Jul 10, 2026

View reviewed changes

Comment thread modules/charts/README.md Outdated

justincorrigible reviewed Jul 13, 2026

View reviewed changes

Comment thread docs/charts/03-Guides/02-Development.md Outdated

justincorrigible reviewed Jul 13, 2026

View reviewed changes

samrichca added 3 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

update setup

4b26afa

samrichca requested review from MitchellShiell and justincorrigible July 16, 2026 13:51

samrichca added 3 commits July 16, 2026 09:58

update usage example

8db94c9

wip docs

baf3f6e

update example

d6211c5

samrichca and others added 5 commits July 20, 2026 11:03

update usage doc

2e4ff37

docs feedback

013aefe

Update modules/charts/README.md

b512ba0

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

update setup

92a0be8

update usage example

2cbbd40

justincorrigible force-pushed the feat/docs-charts branch from 8db94c9 to 2cbbd40 Compare July 20, 2026 15:03

samrichca requested a review from anncatton July 20, 2026 15:29

anncatton reviewed Jul 20, 2026

View reviewed changes

samrichca added 3 commits July 20, 2026 14:46

ann's feedback

b81f1ae

Merge branch 'main' of github.com:overture-stack/arranger into feat/d…

434e684

…ocs-charts

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

b20b4ae

… 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.

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!

Uh oh!

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!

samrichca Jul 15, 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!

Uh oh!

Uh oh!

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!

4 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

samrichca Jul 15, 2026 •

edited

Loading

justincorrigible Jul 10, 2026 •

edited

Loading