Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

LG-4620: ChartCard and Header components #2550

Merged
merged 30 commits into from
Nov 22, 2024
Merged

LG-4620: ChartCard and Header components #2550

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
e690783
Add BaseHeader
tsck Nov 8, 2024
3758bbd
Change package name to BaseHeader
tsck Nov 8, 2024
ead54a1
Fix BaseHeader names
tsck Nov 8, 2024
9887996
Add BaseHeader tests
tsck Nov 8, 2024
69750a4
Add Header component
tsck Nov 8, 2024
b11645e
Add Header tests
tsck Nov 8, 2024
2e4ca63
Add collapsible state
tsck Nov 8, 2024
4ebe6c5
Updating
tsck Nov 14, 2024
3427bc1
Working state
tsck Nov 14, 2024
ff8d20a
Remove all inputs for slot prop
tsck Nov 18, 2024
215c193
WIP
tsck Nov 18, 2024
8a977d7
Revert "WIP"
tsck Nov 19, 2024
eac05d0
Add context around animation choice
tsck Nov 19, 2024
91efd2a
Bring props more inline w/ ExpandableCard
tsck Nov 19, 2024
7df0a8a
Fix BaseHeader test
tsck Nov 19, 2024
01715bc
Remove base dep from Header
tsck Nov 19, 2024
fb116ec
Remove base dep from ChartCard
tsck Nov 19, 2024
2a4b3cc
Remove BaseHeader completely
tsck Nov 19, 2024
46525bd
Accessibility and tests
tsck Nov 20, 2024
44ff882
Update READMEs
tsck Nov 20, 2024
82d60a6
Changeset
tsck Nov 20, 2024
2715b66
Remove card removal option from storybook
tsck Nov 20, 2024
34d098f
Remove forgotten default
tsck Nov 20, 2024
9aa3101
Correct deps
tsck Nov 20, 2024
ce8968a
Correct deps take 2
tsck Nov 20, 2024
51fc083
Merge branch 'main' of github.com:mongodb/leafygreen-ui into LG-4620/…
tsck Nov 21, 2024
e0b9ce1
CR changes
tsck Nov 22, 2024
a61d79d
Merge branch 'main' of github.com:mongodb/leafygreen-ui into LG-4620/…
tsck Nov 22, 2024
fd0bb1f
Utilize cx
tsck Nov 22, 2024
78c8b34
Merge branch 'main' of github.com:mongodb/leafygreen-ui into LG-4620/…
tsck Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/early-parents-guess.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lg-charts/core': minor
---

Adds both `Header` and `ChartCard` components.
106 changes: 79 additions & 27 deletions charts/core/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@ yarn add @lg-charts/core
npm install @lg-charts/core
```

## Basic Example
## Basic Chart Example

```js
import { Chart, Line, Grid, XAxis, YAxis } from '@lg-charts/core';

<Chart>
<Header title="My Chart" />
<Grid vertical={false}>
<XAxis type="time" />
<YAxis type="value" formatter={(value) => `${value}GB`} />
Expand All @@ -50,6 +51,31 @@ import { Chart, Line, Grid, XAxis, YAxis } from '@lg-charts/core';
</Chart>;
```

## Grouped Charts

```js
import { ChartCard, Chart, Line, XAxis, YAxis } from '@lg-charts/core';

<ChartCard title="My Group of Charts">
<Chart>
<XAxis type="time" />
<YAxis type="value" formatter={(value) => `${value}GB`} />
<Line
name="Series 1"
data={seriesData}
/>
</Chart>
<Chart>
<XAxis type="time" />
<YAxis type="value" formatter={(value) => `${value}GB`} />
<Line
name="Series 1"
data={seriesData}
/>
</Chart>
<ChartCard>;
```

## Parent Components

### `Chart`
Expand All @@ -58,66 +84,92 @@ Chart container component.

#### Props

| Name | Description | Type | Default |
| -------------- | ------------------------------------------------------- | ---------- | ------- |
| `onChartReady` | Callback to be called when chart is finished rendering. | () => void | |
| Name | Description | Type | Default |
| -------------- | ------------------------------------------------------- | ------------ | ------- |
| `onChartReady` | Callback to be called when chart is finished rendering. | `() => void` | |
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Made some drive-by style changes in the README, mostly to use backticks on some code that wasn't previously formatted


## Child Components

### `ChartCard`

Expandable card component for visually wrapping multiple charts.

#### Props

| Name | Description | Type | Default |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- |
| `title` | The title to display in the chart header. | `string` | |
| `defaultOpen` _(optional)_ | Defines the default state of the card. | `boolean` | `true` |
| `isOpen` _(optional)_ | Forces the card state. | `boolean` | |
| `onToggleButtonClick` _(optional)_ | Callback fired when a user clicks the open/close toggle button. | `(event: MouseEventHandler<HTMLButtonElement>) => void` | |
| `headerContent` _(optional)_ | Content that will be rendered to the right of the title. Useful for adding components such as `IconButton`'s that control functionality in the chart. | `React.ReactNode` | |

### `Line`

Component that takes in data points and renders a single line on the chart.

#### Props

| Name | Description | Type | Default |
| ------ | ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- | ------- |
| `name` | Unique name used to identify the series. **Important note:** If two lines have the same name, only one will be rendered. | string | |
| `data` | Data array of tuples that represent x and y coordinates in the series. | Array<[string \| number \| Date, string \| number \| Date]> | |
| Name | Description | Type | Default |
| ------ | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ------- |
| `name` | Unique name used to identify the series. **Important note:** If two lines have the same name, only one will be rendered. | `string` | |
| `data` | Data array of tuples that represent x and y coordinates in the series. | `Array<[string \| number \| Date, string \| number \| Date]>` | |

### `Header`

Component for rendering a header in a chart.

#### Props

| Name | Description | Type | Default |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- |
| `title` | The title to display in the chart header. | `string` | |
| `showDivider` _(optional)_ | When true, renders a dividing line on top of header. Useful when stacking charts, such as in a `ChartGroup`. | `boolean` | |
| `headerContent` _(optional)_ | Content that will be rendered to the right of the title. Useful for adding components such as `IconButton`'s that control functionality in the chart. | `React.ReactNode` | |
shaneeza marked this conversation as resolved.
Show resolved Hide resolved

### `Grid`

Component that displays grid lines on the chart.

#### Props

| Name | Description | Type | Default |
| ------------ | --------------------------- | ------- | ------- |
| `horizontal` | Show horizontal grid lines. | boolean | true |
| `vertical` | Show vertical grid lines. | boolean | true |
| Name | Description | Type | Default |
| ------------------------- | --------------------------- | --------- | ------- |
| `horizontal` _(optional)_ | Show horizontal grid lines. | `boolean` | `true` |
| `vertical` _(optional)_ | Show vertical grid lines. | `boolean` | `true` |

### `XAxis`

Renders an x-axis.

#### Props

| Name | Description | Type | Default |
| ------------------------ | --------------------------------------------- | ---------------------------------------- | ------- |
| `type` | Type of axis. | 'category' \| 'value' \| 'time' \| 'log' | |
| `label` _(optional)_ | Label name to be rendered on the axis. | string | |
| `formatter` _(optional)_ | Callback function for formatting tick values. | (value: string, index: number) => string | |
| Name | Description | Type | Default |
| ------------------------ | --------------------------------------------- | ------------------------------------------ | ------- |
| `type` | Type of axis. | `'category' \| 'value' \| 'time' \| 'log'` | |
| `label` _(optional)_ | Label name to be rendered on the axis. | `string` | |
| `formatter` _(optional)_ | Callback function for formatting tick values. | `(value: string, index: number) => string` | |

### `YAxis`

Renders a y-axis.

#### Props

| Name | Description | Type | Default |
| ------------------------ | --------------------------------------------- | ---------------------------------------- | ------- |
| `type` | Type of axis. | 'category' \| 'value' \| 'time' \| 'log' | |
| `label` _(optional)_ | Label name to be rendered on the axis. | string | |
| `formatter` _(optional)_ | Callback function for formatting tick values. | (value: string, index: number) => string | |
| Name | Description | Type | Default |
| ------------------------ | --------------------------------------------- | ------------------------------------------ | ------- |
| `type` | Type of axis. | `'category' \| 'value' \| 'time' \| 'log'` | |
| `label` _(optional)_ | Label name to be rendered on the axis. | `string` | |
| `formatter` _(optional)_ | Callback function for formatting tick values. | `(value: string, index: number) => string` | |

### `Tooltip`

Renders a tooltip onto the chart.

#### Props

| Name | Description | Type | Default |
| ----------------------------- | --------------------------------------------------- | ----------------------------------- | ------- |
| `sortDirection` _(optional)_ | What direction to sort tooltip values in. | 'asc' \| 'desc' | 'desc' |
| `sortKey` _(optional)_ | Whether to sort by name or value. | 'name' \| 'value' | 'value' |
| `valueFormatter` _(optional)_ | Callback function for formatting each value string. | (value: number \| string) => string | |
| Name | Description | Type | Default |
| ----------------------------- | --------------------------------------------------- | ------------------------------------- | --------- |
| `sortDirection` _(optional)_ | What direction to sort tooltip values in. | `'asc' \| 'desc'` | `'desc'` |
| `sortKey` _(optional)_ | Whether to sort by name or value. | `'name' \| 'value'` | `'value'` |
| `valueFormatter` _(optional)_ | Callback function for formatting each value string. | `(value: number \| string) => string` | |
5 changes: 5 additions & 0 deletions charts/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,18 @@
},
"dependencies": {
"@leafygreen-ui/emotion": "^4.0.7",
"@leafygreen-ui/hooks": "^8.2.1",
"@leafygreen-ui/icon": "^12.7.0",
"@leafygreen-ui/icon-button": "^15.0.23",
"@leafygreen-ui/lib": "13.7.0",
"@leafygreen-ui/tokens": "^2.11.0",
"@leafygreen-ui/typography": "^19.3.0",
"@lg-tools/storybook-utils": "^0.1.1",
"echarts": "^5.5.1",
"lodash.debounce": "^4.0.8"
},
"peerDependencies": {
"@leafygreen-ui/combobox": "^9.1.6",
"@leafygreen-ui/leafygreen-provider": "^3.1.12"
},
"devDependencies": {
Expand Down
Loading
Loading