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

update carbon-charts version/add new demos #2300

Merged
merged 9 commits into from
Jun 21, 2021
Merged

update carbon-charts version/add new demos #2300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0fd4684
update charts version
natashadecoste May 19, 2021
ec08944
fix card
natashadecoste May 19, 2021
42f7919
chore: format
emyarod May 20, 2021
4d30f79
Merge branch 'main' into update-charts
natashadecoste May 25, 2021
9af19bf
Merge branch 'main' into update-charts
natashadecoste May 26, 2021
f9aac58
Merge branch 'main' into update-charts
natashadecoste Jun 1, 2021
bcba41b
Merge branch 'main' into update-charts
natashadecoste Jun 7, 2021
fe71f86
Merge branch 'main' into update-charts
natashadecoste Jun 9, 2021
465d548
Merge branch 'main' into update-charts
natashadecoste Jun 21, 2021
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"gatsby-remark-images": "^3.3.33"
},
"dependencies": {
"@carbon/charts-react": "0.41.62",
"@carbon/charts-react": "0.41.65",
"@carbon/elements": "^10.36.0",
"@carbon/icons": "^10.33.0",
"@carbon/icons-react": "^10.33.0",
Expand Down
3 changes: 2 additions & 1 deletion src/data/data-visualization/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@ export const complexChartDemoGroups = storybookDemoGroups.filter(

export const getDemoGroupByTitle = (title) =>
storybookDemoGroups.find(
(demoGroup) => demoGroup.title.toLowerCase() === title.toLowerCase()
(demoGroup) =>
demoGroup.title.toLowerCase().replace(/\s/g, '') === title.toLowerCase()
);
35 changes: 35 additions & 0 deletions src/pages/data-visualization/chart-types/images/circle-pack.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/pages/data-visualization/chart-types/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,17 @@ appropriate chart type.
</OverviewCard>
</Column>

<Column colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm>
<OverviewCard
title="Circle pack"
href="/data-visualization/complex-charts#circle-packs"
>

![GATSBY_EMPTY_ALT](images/circle-pack.svg)

</OverviewCard>
</Column>

</Row>

## Correlations
Expand Down
20 changes: 20 additions & 0 deletions src/pages/data-visualization/complex-charts/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ go to the
<AnchorLink>Network diagrams</AnchorLink>
<AnchorLink>Parallel coordinates</AnchorLink>
<AnchorLink>Tree maps</AnchorLink>
<AnchorLink>Circle packs</AnchorLink>
<AnchorLink>Geospatial charts</AnchorLink>

</AnchorLinks>
Expand Down Expand Up @@ -333,6 +334,25 @@ country, tourism for that country may fall below its annual average.
</Column>
</Row>

## Circle packs

A circle pack is a hierarchical visualization of data. It’s equivalent to a
Treemap or a Dendrogram—where each node of the tree is represented as a circle
and sub-nodes are represented as circles within a parent. The size of each
circle can also be used to represent an additional arbitrary value, such as
population or file size. Color may also be used to assign categories or to
represent an additional variable. Although they’re not as space efficient,
Circle Packs reveal hierarchical structure better than Treemaps.

For Circle Packs with more than two levels of hierarchy, zoom functionality
allows users to explore the data without compromising the contrast accessibility
of the chart. We advise against disabling the zoom functionality except in cases
such as preview charts, cards that expand to full view with the chart, etc.

<div>
<ChartDemoGroup demoGroup={getDemoGroupByTitle('circlepack')} light={true} />
</div>

## Geospatial charts

### Geographic overlays
Expand Down
18 changes: 9 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1144,18 +1144,18 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"

"@carbon/[email protected].62":
version "0.41.62"
resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.62.tgz#c820b1d72b1894370bd7b8f82006775dbfd70ddf"
integrity sha512-425nf0TlpR1ra85f7cUz0wt29GyxG/wB0J98/Zqig5e1pOcQOoARV/9e7X+w1yZlpXB3BGQ3+W7kkRTy+PKkXQ==
"@carbon/[email protected].65":
version "0.41.65"
resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.65.tgz#fe73ff3c102422c82fdf4e11c1f7c52880b0d00c"
integrity sha512-9Ex7y4fEJNcs57+giQV8Em+7DIcefkdPgc0FXVtRSL4o1VurLlH2vVCB7eW8G2/iKd8irat3ByX66jUfX/FfnA==
dependencies:
"@carbon/charts" "^0.41.62"
"@carbon/charts" "^0.41.65"
"@carbon/telemetry" "0.0.0-alpha.6"

"@carbon/charts@^0.41.62":
version "0.41.62"
resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.62.tgz#9d0f15f83f1be0383b2e108c9060fb79ee63a426"
integrity sha512-vVXbIvRg+L+tpSlyMra+wpqcmH5jAIObxLJxmhCBDYF7QHcBYRkx8n2BjUxsWwIRnGHpTZpNyYUaxDzqN9OqoA==
"@carbon/charts@^0.41.65":
version "0.41.65"
resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.65.tgz#e3bbea58db800c5d7b380a9f5ac43e2fa16aa3fd"
integrity sha512-NX1NCNAMo2ZJf5OMIUxmX9Q4uvlgThA+uJw7IILY4HmQJA3eQYPdKzczQfcwGBHbiaF76T8zOc5SEeaa5awfMA==
dependencies:
"@carbon/colors" "10.15.0"
"@carbon/telemetry" "0.0.0-alpha.6"
Expand Down