Arranger Charts Docs

code_of_conduct.md

@@ -0,0 +1,132 @@
+# Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+[this email](contact@overture.bio).
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

docs/charts/01-Overview.md

@@ -0,0 +1,11 @@
+# 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.
+
+## Key Features
+
+- Leverages the [Nivo charts](https://github.com/plouc/nivo) library.
+- Integrates with Arranger theming for configuring colour schemes.
+- **ChartsProvider:** React context provider that requests all the data for all charts inside the provider.
+- **Bar chart:** Responsive, horizontal bar chart with configurable colours, tooltips, and sorting.
+- **Sunburst chart:** Responsive sunburst chart showing relationships between broad and specific categories.

docs/charts/02-Setup.md

@@ -0,0 +1,52 @@
+# Setup
+
+For adding Arranger Charts in a React application.
+
+## Prerequisites
+
+- Node 22 or higher
+- React 18
+- Arranger Components 3 (for the data context provider)
+
+## Developer Setup
+
+This guide will walk you through setting up a complete development environment for Arranger Charts, including its complementary services.
+
+### Installation
+
+```bash
+npm i @overture-stack/arranger-charts @overture-stack/arranger-components
+```
+
+### Quick Start
+
+Wrap a charts in required providers: `ArrangerDataProvider`,`ChartsProvider` and `ChartsThemeProvider`.
+
+Chart component is responsive to its parent container's dimensions.
+
+```jsx
+import { ChartsProvider, ChartsThemeProvider, BarChart, SunburstChart } from '@overture-stack/arranger-charts';
+import { ArrangerDataProvider } from '@overture-stack/arranger-components';
+
+function App() {
+	return (
+		<ArrangerDataProvider {...arrangerConfig}>
+			<ChartsProvider>
+				<ChartsThemeProvider>
+					<div height="200px">
+						<BarChart
+							fieldName="gender"
+							maxBars={10}
+							handlers={{ onClick: (data) => console.log(data) }}
+						/>
+					</div>
+				</ChartsThemeProvider>
+			</ChartsProvider>
+		</ArrangerDataProvider>
+	);
+}
+```
+
+### Dependencies
+
+Arranger Charts requires an `ArrangerDataProvider` from `@overture-stack/arranger-components` as a parent component to handle data fetching and SQON state management.

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

@@ -0,0 +1,183 @@
+# Usage
+
+This guide covers how to use Arranger Charts, what components are available, and React props for each component.
+
+## Components
+
+### ChartsProvider
+
+The main provider that manages chart registration and data fetching, and coordinates multiple charts.
+
+#### Props
+
+| Name                    | Type      | Required | Description                            |
+| ----------------------- | --------- | -------- | -------------------------------------- |
+| `debugMode`             | `boolean` | No       | Enable verbose logging for development |
+| `disableIncludeMissing` | `boolean` | No       | Hide properties with "No Data"         |
+| `loadingDelay`          | `number`  | No       | Delay network results by milliseconds  |
+
+#### Example
+
+```jsx
+<ChartsProvider
+	debugMode
+	disableIncludeMissing={false}
+	loadingDelay={250}
+>
+	{/* ChartsThemeProvider */}
+</ChartsProvider>
+```
+
+### ChartsThemeProvider
+
+Provides theme configuration and custom components to all child charts. You can nest multiple `<ChartsThemeProvider>` components under a single `<ChartsProvider>`.
+
+#### Props
+
+| Name                   | Type             | Required | Description                           |
+| ---------------------- | ---------------- | -------- | ------------------------------------- |
+| `colors`               | `string[]`       | No       | Array of hex colors for chart theming |
+| `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              |
+
+#### Example
+
+```jsx
+<ChartsThemeProvider
+	colors={['#ff6b6b', '#4ecdc4', '#45b7d1']}
+	components={{
+		EmptyData: NoDataMessage,
+		ErrorData: CustomError,
+		Loader: CustomSpinner,
+	}}
+>
+	{/* Charts */}
+</ChartsThemeProvider>
+```
+
+### BarChart
+
+Renders a horizontal bar chart for aggregation data.
+
+#### Props
+
+| Name                  | Type       | Required | Description                                                                                         |
+| --------------------- | ---------- | -------- | --------------------------------------------------------------------------------------------------- |
+| `disableTopBarsCount` | `boolean`  | No       | Disables the "Top `bars` of `totalBars`" flag at the top right of charts.                           |
+| `fieldName`           | `string`   | Yes      | GraphQL field name to visualize                                                                     |
+| `handlers`            | `object`   | No       | Event handlers                                                                                      |
+| `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                                                                                      |
+| `theme.sortByKey`     | `string[]` | No       | Array of keys to sort the data by.                                                                  |
+
+#### Example
+
+```jsx
+<BarChart
+	fieldName="primary_site"
+	handlers={{
+		onClick: (data) => {
+			console.log('Clicked', data.label, data.value);
+		},
+	}}
+	maxBars={15}
+	theme={{
+		sortByKey: ['Brain', 'Lung', 'Breast', '__missing__'],
+	}}
+/>
+```
+
+#### Example - Filter on Click
+
+This example shows how to filter data in the `ArrangerDataProvider` based on the bar that the user clicked on. You can use the hook `useArrangerData` to update the SQON when the user clicks on a chart.
+
+```jsx
+import { BarChart, ChartsProvider, ChartsThemeProvider } from '@overture-stack/arranger-charts';
+import { useArrangerData } from '@overture-stack/arranger-components';
+import { useMemo } from 'react';
+
+const fieldName = 'myFieldName';
+
+const App = () => {
+	const { sqon, setSQON } = useArrangerData({ callerName: 'My Field Name' });
+
+	const chartFilters = useMemo(
+		() => ({
+			[fieldName]: chartFilter(fieldName, sqon, setSQON),
+		}),
+		[sqon, setSQON],
+	);
+
+	return (
+		<ChartsProvider>
+			<ChartsThemeProvider>
+				<BarChart
+					fieldName={fieldName}
+					maxBars={maxBars}
+					handlers={{
+						onClick: (config) => chartFilters[fieldName](config.data.key),
+					}}
+				/>
+			</ChartsThemeProvider>
+		</ChartsProvider>
+	);
+};
+```
+
+### SunburstChart
+
+Creates a sunburst chart showing relationships between broad and specific categories.
+
+#### Props
+
+| Name               | Type       | Required | Description                                     |
+| ------------------ | ---------- | -------- | ----------------------------------------------- |
+| `fieldName`        | `string`   | Yes      | GraphQL field name to visualize                 |
+| `maxSegments`      | `number`   | Yes      | Custom fallback components                      |
+| `mapper`           | `function` | Yes      | Maps outer ring values to inner ring categories |
+| `handlers`         | `object`   | No       | Event handlers                                  |
+| `handlers.onClick` | `function` | No       | Callback when clicking a segment                |
+| `theme`            | `object`   | No       | Chart configuration options                     |
+
+```jsx
+<SunburstChart
+	fieldName="primary_diagnosis"
+	maxSegments={12}
+	mapper={(diagnosisCode) => {
+		// Map specific diagnosis codes to broader categories
+		if (diagnosisCode.startsWith('C78')) return 'Metastatic';
+		if (diagnosisCode.startsWith('C50')) return 'Breast Cancer';
+		return 'Other';
+	}}
+	handlers={{
+		onClick: (data) => {
+			console.log('Selected category:', data);
+		},
+	}}
+/>
+```
+
+## Field Types
+
+Charts automatically detect field types from Arranger's extended mapping:
+
+- **Aggregations**: Categorical fields
+- **NumericAggregations**: Numeric fields that require range specifications
+
+For numeric fields, provide ranges:
+
+```jsx
+<BarChart
+	fieldName="age_at_diagnosis"
+	ranges={[
+		{ key: '0-18', from: 0, to: 18 },
+		{ key: '19-65', from: 19, to: 65 },
+		{ key: '65+', from: 65 },
+	]}
+	maxBars={10}
+/>
+```