From dfb4aead95c33457ddc68c6d7d70609903a20752 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Fri, 13 Aug 2021 15:19:58 -0400 Subject: [PATCH 1/6] docs(dataviz): add histogram --- package.json | 2 +- .../data-visualization/chart-types/index.mdx | 2 +- yarn.lock | 18 +++++++++--------- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index aa823204a70..8167f81f0c6 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "gatsby-remark-images": "^3.3.33" }, "dependencies": { - "@carbon/charts-react": "0.41.101", + "@carbon/charts-react": "0.42.1", "@carbon/elements": "^10.40.0", "@carbon/icons": "^10.37.0", "@carbon/icons-react": "^10.37.0", diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index 0696d5f0f97..44ddeb1a818 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -130,7 +130,7 @@ appropriate chart type. ![GATSBY_EMPTY_ALT](images/histogram.svg) diff --git a/yarn.lock b/yarn.lock index e5704e394a8..4532be492e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1144,19 +1144,19 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@carbon/charts-react@0.41.101": - version "0.41.101" - resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.101.tgz#7ac2ac5666dd22cd7458cab05323eb04f0f2e8b3" - integrity sha512-+mho+cliPvnA9izBgftNitUScFdsq2FRy67a4oHSHgVFVLxIjGiI0W5DoBH5hlK1dhBIjpjd/JIxVRzJZgozBQ== +"@carbon/charts-react@0.42.1": + version "0.42.1" + resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.42.1.tgz#17b12e1fbefbdaddd805f0e740f8e4850acadcaf" + integrity sha512-1GLksHYOqMfD6xPfjbanpcsm4RTd0xzyhDc4yOVVXVPRjcdOhf493VL0kwXXD8iZ8/IkLduuCNEqZkW+LKWrqQ== dependencies: - "@carbon/charts" "^0.41.101" + "@carbon/charts" "^0.42.1" "@carbon/icons-react" "^10.32.0" "@carbon/telemetry" "0.0.0-alpha.6" -"@carbon/charts@^0.41.101": - version "0.41.101" - resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.101.tgz#eece1fdb8879dd74bbd45dd67e9bd9a65578798e" - integrity sha512-T2srw+wmMSxxY+b9EdaXjpzR1nqratnh4N3qLqwW6/yhTLAqnlfIcyNssQulEc6rp7AlqOHCTd32V1HV+Dougg== +"@carbon/charts@^0.42.1": + version "0.42.1" + resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.42.1.tgz#eddfb3482dde883be0d7a5a5652d6b987564bfca" + integrity sha512-SJYsUuj8TlOrcHYg1sH0AzDrbjrVs1Jim2zu4DRLIs6yTXAqj4ihOC0kU57vF6o/ms7z+UamejvmhXLjrxaFGw== dependencies: "@carbon/colors" "10.29.0" "@carbon/telemetry" "0.0.0-alpha.6" From 750abfe9c9cd80b613fe8fb54c448feef153aa0f Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Thu, 19 Aug 2021 14:14:25 -0400 Subject: [PATCH 2/6] docs(dataviz): add network diagram demos & tree diagram card --- .../chart-types/images/network-diagram.svg | 67 ++++++++++ .../chart-types/images/treediagram.svg | 117 +++++++++++++----- .../data-visualization/chart-types/index.mdx | 13 +- .../complex-charts/index.mdx | 28 ++++- 4 files changed, 190 insertions(+), 35 deletions(-) create mode 100644 src/pages/data-visualization/chart-types/images/network-diagram.svg diff --git a/src/pages/data-visualization/chart-types/images/network-diagram.svg b/src/pages/data-visualization/chart-types/images/network-diagram.svg new file mode 100644 index 00000000000..f13ae8bcd2f --- /dev/null +++ b/src/pages/data-visualization/chart-types/images/network-diagram.svg @@ -0,0 +1,67 @@ + + + network-diagram + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/data-visualization/chart-types/images/treediagram.svg b/src/pages/data-visualization/chart-types/images/treediagram.svg index 98c2cdd6e98..7b271293de1 100644 --- a/src/pages/data-visualization/chart-types/images/treediagram.svg +++ b/src/pages/data-visualization/chart-types/images/treediagram.svg @@ -1,29 +1,90 @@ - - - Group 6treediagram - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - + + tree-diagram + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index 44ddeb1a818..da878d04a75 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -302,11 +302,22 @@ appropriate chart type. + + +![GATSBY_EMPTY_ALT](images/network-diagram.svg) + + + + + + ![GATSBY_EMPTY_ALT](images/treediagram.svg) diff --git a/src/pages/data-visualization/complex-charts/index.mdx b/src/pages/data-visualization/complex-charts/index.mdx index da5e7b7a82b..bd40436b5a5 100755 --- a/src/pages/data-visualization/complex-charts/index.mdx +++ b/src/pages/data-visualization/complex-charts/index.mdx @@ -177,12 +177,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 + + From 1a3b9b1766d30fbf22a094a17cd0886d0e0f5ea9 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Fri, 20 Aug 2021 12:29:22 -0400 Subject: [PATCH 3/6] update icon --- .../chart-types/images/network-diagram.svg | 100 +++++++++--------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/src/pages/data-visualization/chart-types/images/network-diagram.svg b/src/pages/data-visualization/chart-types/images/network-diagram.svg index f13ae8bcd2f..f73eb974dbd 100644 --- a/src/pages/data-visualization/chart-types/images/network-diagram.svg +++ b/src/pages/data-visualization/chart-types/images/network-diagram.svg @@ -2,66 +2,66 @@ network-diagram - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - - + + + + - - - + + + - - - + + + - - - + + + - - - - + + + + \ No newline at end of file From f20161c00412cf25869dcea5f9a066d54bb60a3a Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Fri, 20 Aug 2021 15:14:00 -0400 Subject: [PATCH 4/6] update game --- .../chart-types/images/network-diagram.svg | 104 +++++++++--------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/src/pages/data-visualization/chart-types/images/network-diagram.svg b/src/pages/data-visualization/chart-types/images/network-diagram.svg index f73eb974dbd..15dbddee89d 100644 --- a/src/pages/data-visualization/chart-types/images/network-diagram.svg +++ b/src/pages/data-visualization/chart-types/images/network-diagram.svg @@ -1,67 +1,67 @@ - network-diagram - - - - - - - - - - - - - - - - - - - + network-diagram copy + + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - - + + + + - - - + + + - - - + + + - - - + + + - - - - + + + + \ No newline at end of file From 5cf3bd16b7481152e5e5d1f3dfde62f215652b1c Mon Sep 17 00:00:00 2001 From: theiliad Date: Mon, 13 Sep 2021 16:23:18 -0400 Subject: [PATCH 5/6] update charts to 0.48.4 --- package.json | 2 +- yarn.lock | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index d125b631926..a84c15d6d25 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 3e17230eae2..e250e7897a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1081,19 +1081,19 @@ "@babel/helper-validator-identifier" "^7.14.9" to-fast-properties "^2.0.0" -"@carbon/charts-react@0.48.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/charts-react@0.48.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" From b706e3f527858cc4095ec3f93df524b3fd94511e Mon Sep 17 00:00:00 2001 From: theiliad Date: Mon, 13 Sep 2021 16:32:36 -0400 Subject: [PATCH 6/6] remove unnecessary card --- src/pages/data-visualization/chart-types/index.mdx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/pages/data-visualization/chart-types/index.mdx b/src/pages/data-visualization/chart-types/index.mdx index e399634ee30..4f2c25e1387 100644 --- a/src/pages/data-visualization/chart-types/index.mdx +++ b/src/pages/data-visualization/chart-types/index.mdx @@ -314,17 +314,6 @@ appropriate chart type. - - - -![GATSBY_EMPTY_ALT](images/networkdiagram.svg) - - - -