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

docs(dataviz): add network diagram demos & tree diagram card #2502

Merged
merged 8 commits into from
Sep 15, 2021
Merged

docs(dataviz): add network diagram demos & tree diagram card #2502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dfb4aea
docs(dataviz): add histogram
theiliad Aug 13, 2021
b412c71
Merge branch 'main' of github.com:carbon-design-system/carbon-website…
theiliad Aug 19, 2021
750abfe
docs(dataviz): add network diagram demos & tree diagram card
theiliad Aug 19, 2021
1a3b9b1
update icon
theiliad Aug 20, 2021
f20161c
update game
theiliad Aug 20, 2021
223f10e
Merge branch 'main' of github.com:carbon-design-system/carbon-website…
theiliad Sep 13, 2021
5cf3bd1
update charts to 0.48.4
theiliad Sep 13, 2021
b706e3f
remove unnecessary card
theiliad Sep 13, 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 @@ -44,7 +44,7 @@
"@carbon/icons-react": "^10.38.0"
},
"dependencies": {
"@carbon/charts-react": "0.48.0",
"@carbon/charts-react": "0.48.4",
"@carbon/elements": "^10.42.0",
"@carbon/icons": "^10.38.0",
"@carbon/icons-react": "^10.38.0",
Expand Down
67 changes: 67 additions & 0 deletions src/pages/data-visualization/chart-types/images/network-diagram.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.
4 changes: 2 additions & 2 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 @@ -302,14 +302,14 @@ appropriate chart type.

</OverviewCard>
</Column>

<Column colMax={3} colXl={3} colLg={4} colMd={4} colSm={2} noGutterSm >
<OverviewCard
title="Network diagram"
href="/data-visualization/complex-charts#network-diagrams"
tag="Design only"
>

![GATSBY_EMPTY_ALT](images/networkdiagram.svg)
![GATSBY_EMPTY_ALT](images/network-diagram.svg)

</OverviewCard>
</Column>
Expand Down
28 changes: 22 additions & 6 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 @@ -178,12 +178,28 @@ it easier for users to understand complex connections at a glance. These
diagrams are especially useful for isolating problems or when designing a new
system.

The example below illustrates a swimlane graph with expandable nodes developed
by the Security team. In products like QRadar these diagrams are often paired
with side and filter panels. However, a simplified version of the component is
available in the
[carbon-charts repository](https://github.com/carbon-design-system/carbon-charts/pull/435)
for IBM designers to adapt.
### Building blocks

Carbon Charts offers building blocks for network diagrams in the form of
**React** & **Angular** components.

Note that Carbon Charts does not provide layouts for diagrams. You can utilize
these components alongside graphing libraries (such as elkjs), or by composing
your own layouts.

**Getting started guides:**

- [React](https://carbon-design-system.github.io/carbon-charts/react/?path=/story/diagrams--start-here)
- [Angular](https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/diagrams--start-here)

Here's an example using elkjs in react

<iframe
src="https://codesandbox.io/embed/carbon-charts-react-elkjs-diagram-b9xyp?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="carbon-charts-react-elkjs-diagram"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

<Row>
<Column colLg={12} colMd={8} colSm={4} >
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 @@ -1081,19 +1081,19 @@
"@babel/helper-validator-identifier" "^7.14.9"
to-fast-properties "^2.0.0"

"@carbon/[email protected].0":
version "0.48.0"
resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.48.0.tgz#034d5ba8e8e18c6a14c9f2ceb0de0e7a2f77348c"
integrity sha512-3schxAeQCU7HXa/GkGohlPbjUWzJOTttXGpebziETKvTxQgUUdXsvPzduq+taNmpiHx2T4xLMVhDSSGzKCBqOQ==
"@carbon/[email protected].4":
version "0.48.4"
resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.48.4.tgz#b4518d27c6c8e044564d300fa609189b0d73d230"
integrity sha512-ucpk4uXxmp/vdzJli3A6EzPL6P5Tbp6tD1utFrn8JKAQhtzye+EmuP/LlCSayLm3G/pcAizDntMsoHzjDjVJiQ==
dependencies:
"@carbon/charts" "^0.48.0"
"@carbon/charts" "^0.48.4"
"@carbon/icons-react" "^10.32.0"
"@carbon/telemetry" "0.0.0-alpha.6"

"@carbon/charts@^0.48.0":
version "0.48.0"
resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.48.0.tgz#0ff963d0e410656f4300256e259e3adc731f5399"
integrity sha512-TbWxDx0phwAngnja08rpg2+lWzZkoayHPfXYjpl1uCCM+zaRKxsqdXLWnLF/1IsaCniT18CHA7XkLf/50ChKzg==
"@carbon/charts@^0.48.4":
version "0.48.4"
resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.48.4.tgz#d98deef52ee4d15c19188f7fc6cbba88f04189d8"
integrity sha512-jga2T+RHHCMnyhte8e7B/85w4UcmVrA/iJs4KczstiCUDixgYZUcupCC/4lg89m1J10dkgNEHrYNr9FiV2ZRgw==
dependencies:
"@carbon/colors" "10.29.0"
"@carbon/telemetry" "0.0.0-alpha.6"
Expand Down