@carbon/charts-react 0.57.1 → 0.58.0-latest-carbon-v11-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +4 -0
- package/.prettierignore +1 -0
- package/.storybook/addons.js +2 -0
- package/.storybook/assets/logo.svg +1 -0
- package/.storybook/assets/share.png +0 -0
- package/.storybook/assets/welcome.png +0 -0
- package/.storybook/config.js +24 -0
- package/.storybook/main.js +24 -0
- package/.storybook/manager-head.html +42 -0
- package/.storybook/preview-head.html +10 -0
- package/.storybook/theme.js +46 -0
- package/CHANGELOG.md +0 -16
- package/build.sh +20 -0
- package/carbon.yml +275 -0
- package/carbon__charts-react-tests.tsx +83 -0
- package/demo/bundle/favicon.ico +0 -0
- package/demo/bundle/index.html +22 -0
- package/demo/bundle/logo.svg +1 -0
- package/demo/bundle/main.4a87b5852cddf04c8e9a.bundle.js +1 -0
- package/demo/bundle/runtime~main.6b70b35614cf83eab770.bundle.js +1 -0
- package/demo/bundle/sb_dll/storybook_ui-manifest.json +1 -0
- package/demo/bundle/sb_dll/storybook_ui_dll.LICENCE +113 -0
- package/demo/bundle/sb_dll/storybook_ui_dll.js +2 -0
- package/demo/bundle/share.png +0 -0
- package/demo/bundle/vendors~main.9ceec0efe2f3ef413ade.bundle.js +111 -0
- package/demo/bundle/welcome.png +0 -0
- package/dist/CHANGELOG.md +2115 -0
- package/dist/README.md +56 -0
- package/{alluvial-chart.d.ts → dist/alluvial-chart.d.ts} +0 -0
- package/{alluvial-chart.js → dist/alluvial-chart.js} +0 -0
- package/{area-chart-stacked.d.ts → dist/area-chart-stacked.d.ts} +0 -0
- package/{area-chart-stacked.js → dist/area-chart-stacked.js} +0 -0
- package/{area-chart.d.ts → dist/area-chart.d.ts} +0 -0
- package/{area-chart.js → dist/area-chart.js} +0 -0
- package/{bar-chart-grouped.d.ts → dist/bar-chart-grouped.d.ts} +0 -0
- package/{bar-chart-grouped.js → dist/bar-chart-grouped.js} +0 -0
- package/{bar-chart-simple.d.ts → dist/bar-chart-simple.d.ts} +0 -0
- package/{bar-chart-simple.js → dist/bar-chart-simple.js} +0 -0
- package/{bar-chart-stacked.d.ts → dist/bar-chart-stacked.d.ts} +0 -0
- package/{bar-chart-stacked.js → dist/bar-chart-stacked.js} +0 -0
- package/{base-chart.d.ts → dist/base-chart.d.ts} +0 -0
- package/{base-chart.js → dist/base-chart.js} +0 -0
- package/{boxplot-chart.d.ts → dist/boxplot-chart.d.ts} +0 -0
- package/{boxplot-chart.js → dist/boxplot-chart.js} +0 -0
- package/{bubble-chart.d.ts → dist/bubble-chart.d.ts} +0 -0
- package/{bubble-chart.js → dist/bubble-chart.js} +0 -0
- package/{bullet-chart.d.ts → dist/bullet-chart.d.ts} +0 -0
- package/{bullet-chart.js → dist/bullet-chart.js} +0 -0
- package/{bundle.js → dist/bundle.js} +0 -0
- package/{circle-pack-chart.d.ts → dist/circle-pack-chart.d.ts} +0 -0
- package/{circle-pack-chart.js → dist/circle-pack-chart.js} +0 -0
- package/{combo-chart.d.ts → dist/combo-chart.d.ts} +0 -0
- package/{combo-chart.js → dist/combo-chart.js} +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNode.d.ts +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNode.js +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNodeColumn.d.ts +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNodeColumn.js +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNodeLabel.d.ts +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNodeLabel.js +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNodeSubtitle.d.ts +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNodeSubtitle.js +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNodeTitle.d.ts +0 -0
- package/{diagrams → dist/diagrams}/CardNode/CardNodeTitle.js +0 -0
- package/{diagrams → dist/diagrams}/CardNode/index.d.ts +0 -0
- package/{diagrams → dist/diagrams}/CardNode/index.js +0 -0
- package/{diagrams → dist/diagrams}/Edge/Edge.d.ts +0 -0
- package/{diagrams → dist/diagrams}/Edge/Edge.js +0 -0
- package/{diagrams → dist/diagrams}/Edge/index.d.ts +0 -0
- package/{diagrams → dist/diagrams}/Edge/index.js +0 -0
- package/{diagrams → dist/diagrams}/Marker/Marker.d.ts +0 -0
- package/{diagrams → dist/diagrams}/Marker/Marker.js +0 -0
- package/{diagrams → dist/diagrams}/Marker/index.d.ts +0 -0
- package/{diagrams → dist/diagrams}/Marker/index.js +0 -0
- package/{diagrams → dist/diagrams}/ShapeNode/ShapeNode.d.ts +0 -0
- package/{diagrams → dist/diagrams}/ShapeNode/ShapeNode.js +0 -0
- package/{diagrams → dist/diagrams}/ShapeNode/index.d.ts +0 -0
- package/{diagrams → dist/diagrams}/ShapeNode/index.js +0 -0
- package/{donut-chart.d.ts → dist/donut-chart.d.ts} +0 -0
- package/{donut-chart.js → dist/donut-chart.js} +0 -0
- package/{gauge-chart.d.ts → dist/gauge-chart.d.ts} +0 -0
- package/{gauge-chart.js → dist/gauge-chart.js} +0 -0
- package/{heatmap-chart.d.ts → dist/heatmap-chart.d.ts} +0 -0
- package/{heatmap-chart.js → dist/heatmap-chart.js} +0 -0
- package/{histogram-chart.d.ts → dist/histogram-chart.d.ts} +0 -0
- package/{histogram-chart.js → dist/histogram-chart.js} +0 -0
- package/{index.d.ts → dist/index.d.ts} +0 -0
- package/{index.js → dist/index.js} +0 -0
- package/{line-chart.d.ts → dist/line-chart.d.ts} +0 -0
- package/{line-chart.js → dist/line-chart.js} +0 -0
- package/{lollipop-chart.d.ts → dist/lollipop-chart.d.ts} +0 -0
- package/{lollipop-chart.js → dist/lollipop-chart.js} +0 -0
- package/{meter-chart.d.ts → dist/meter-chart.d.ts} +0 -0
- package/{meter-chart.js → dist/meter-chart.js} +0 -0
- package/dist/package.json +107 -0
- package/{pie-chart.d.ts → dist/pie-chart.d.ts} +0 -0
- package/{pie-chart.js → dist/pie-chart.js} +0 -0
- package/{radar-chart.d.ts → dist/radar-chart.d.ts} +0 -0
- package/{radar-chart.js → dist/radar-chart.js} +0 -0
- package/{scatter-chart.d.ts → dist/scatter-chart.d.ts} +0 -0
- package/{scatter-chart.js → dist/scatter-chart.js} +0 -0
- package/{tree-chart.d.ts → dist/tree-chart.d.ts} +0 -0
- package/{tree-chart.js → dist/tree-chart.js} +0 -0
- package/{treemap-chart.d.ts → dist/treemap-chart.d.ts} +0 -0
- package/{treemap-chart.js → dist/treemap-chart.js} +0 -0
- package/{wordcloud-chart.d.ts → dist/wordcloud-chart.d.ts} +0 -0
- package/{wordcloud-chart.js → dist/wordcloud-chart.js} +0 -0
- package/helpers/commons.js +30 -0
- package/package.json +106 -106
- package/rollup.config.js +18 -0
- package/src/alluvial-chart.tsx +27 -0
- package/src/area-chart-stacked.tsx +30 -0
- package/src/area-chart.tsx +27 -0
- package/src/bar-chart-grouped.tsx +27 -0
- package/src/bar-chart-simple.tsx +27 -0
- package/src/bar-chart-stacked.tsx +27 -0
- package/src/base-chart.tsx +45 -0
- package/src/boxplot-chart.tsx +27 -0
- package/src/bubble-chart.tsx +27 -0
- package/src/bullet-chart.tsx +27 -0
- package/src/circle-pack-chart.tsx +27 -0
- package/src/combo-chart.tsx +27 -0
- package/src/diagrams/CardNode/CardNode.tsx +122 -0
- package/src/diagrams/CardNode/CardNodeColumn.tsx +39 -0
- package/src/diagrams/CardNode/CardNodeLabel.tsx +33 -0
- package/src/diagrams/CardNode/CardNodeSubtitle.tsx +33 -0
- package/src/diagrams/CardNode/CardNodeTitle.tsx +33 -0
- package/src/diagrams/CardNode/index.tsx +13 -0
- package/src/diagrams/Edge/Edge.tsx +139 -0
- package/src/diagrams/Edge/index.tsx +2 -0
- package/src/diagrams/Marker/Marker.tsx +123 -0
- package/src/diagrams/Marker/index.tsx +9 -0
- package/src/diagrams/ShapeNode/ShapeNode.tsx +155 -0
- package/src/diagrams/ShapeNode/index.tsx +2 -0
- package/src/donut-chart.tsx +27 -0
- package/src/gauge-chart.tsx +27 -0
- package/src/heatmap-chart.tsx +27 -0
- package/src/histogram-chart.tsx +27 -0
- package/src/index.ts +51 -0
- package/src/line-chart.tsx +27 -0
- package/src/lollipop-chart.tsx +27 -0
- package/src/meter-chart.tsx +27 -0
- package/src/pie-chart.tsx +27 -0
- package/src/radar-chart.tsx +27 -0
- package/src/scatter-chart.tsx +27 -0
- package/src/tree-chart.tsx +27 -0
- package/src/treemap-chart.tsx +27 -0
- package/src/wordcloud-chart.tsx +27 -0
- package/stories/0_intro.stories.js +60 -0
- package/stories/1_gettingStarted.stories.js +76 -0
- package/stories/1_gettingStarted_content.js +121 -0
- package/stories/all.stories.js +99 -0
- package/stories/diagrams/0_Diagrams.stories.js +259 -0
- package/stories/diagrams/CardNode.stories.js +106 -0
- package/stories/diagrams/Edge.stories.js +94 -0
- package/stories/diagrams/Marker.stories.js +95 -0
- package/stories/diagrams/ShapeNode.stories.js +42 -0
- package/tsconfig.json +20 -0
- package/LICENSE.md +0 -201
package/.babelrc
ADDED
package/.prettierignore
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
dist/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800"><defs><path id="a" d="M402.002 65H736v557.94H402.002z"/><path id="c" d="M65 295.764h106.706v247.479H65z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#FF75B8" d="M251.796 197.647l-50.559-67.093c-54.285 40.138-96.035 96.261-118.296 161.416l80.408 24.584c16.993-48.006 48.15-89.316 88.447-118.907"/><path fill="#00B4FF" d="M400.5 651.997c-100.162 0-186.649-58.553-227.099-143.297l-74.88 38.153C152.885 658.814 267.679 735.997 400.5 735.997c98.515 0 187.111-42.46 248.489-110.078l-61.441-57.295c-46.038 51.185-112.784 83.373-187.048 83.373"/><path fill="#FF3A54" d="M398 149.017V65.022c-72.221.528-139.018 23.859-193.532 63.173l50.572 67.11c40.011-28.415 88.693-45.421 141.301-46.274l1.659-.014z"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#9639FF" d="M652 400.497c0 63.196-23.309 120.949-61.799 165.129l61.46 57.314C704.138 563.732 736 485.836 736 400.497 736 215.706 586.603 65.81 402.002 65v84.001C540.211 149.81 652 262.098 652 400.497" mask="url(#b)"/><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#007F7A" d="M149 400.497c0-28.027 4.584-54.983 13.044-80.159l-80.373-24.574C70.852 328.718 65 363.924 65 400.497c0 51.047 11.401 99.432 31.795 142.746l74.911-38.17C157.126 473.227 149 437.811 149 400.497" mask="url(#d)"/></g></svg>
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { configure } from '@storybook/react';
|
|
2
|
+
import { withOptions } from '@storybook/addon-options';
|
|
3
|
+
import theme from './theme';
|
|
4
|
+
|
|
5
|
+
withOptions({
|
|
6
|
+
name: 'Carbon Charts - React',
|
|
7
|
+
panelPosition: 'bottom',
|
|
8
|
+
showDownPanel: true,
|
|
9
|
+
showAddonPanel: true,
|
|
10
|
+
sortStoriesByKind: true,
|
|
11
|
+
theme,
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
// load global styles
|
|
15
|
+
require('!style-loader!css-loader!@carbon/charts/demo/styles.css');
|
|
16
|
+
|
|
17
|
+
const req = require.context('../', true, /.stories.js$/);
|
|
18
|
+
function loadStories() {
|
|
19
|
+
req.keys().forEach((filename) => {
|
|
20
|
+
req(filename);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
configure(loadStories, module);
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
const path = require('path');
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
addons: ['@storybook/preset-typescript'],
|
|
5
|
+
webpackFinal: async (config, { configType }) => {
|
|
6
|
+
config.module.rules.push({
|
|
7
|
+
test: /\.scss$/,
|
|
8
|
+
use: [
|
|
9
|
+
'style-loader',
|
|
10
|
+
'css-loader',
|
|
11
|
+
{
|
|
12
|
+
loader: 'sass-loader',
|
|
13
|
+
options: {
|
|
14
|
+
sassOptions: {
|
|
15
|
+
includePaths: [path.resolve(__dirname + '../../core/src')],
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
],
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
return config;
|
|
23
|
+
},
|
|
24
|
+
};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<meta
|
|
2
|
+
name="keywords"
|
|
3
|
+
content="IBM, design, system, Carbon, design system, data visualization, charts, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, react"
|
|
4
|
+
/>
|
|
5
|
+
|
|
6
|
+
<meta
|
|
7
|
+
name="description"
|
|
8
|
+
content="This is the React version of Carbon Charts, an implementation of Carbon Design System's data-visualization patterns."
|
|
9
|
+
/>
|
|
10
|
+
|
|
11
|
+
<!-- Open Graph -->
|
|
12
|
+
<meta property="og:title" content="Carbon Charts - React" />
|
|
13
|
+
<meta property="og:site_name" content="Carbon Charts" />
|
|
14
|
+
<meta
|
|
15
|
+
property="og:description"
|
|
16
|
+
content="This is the React version of Carbon Charts, an implementation of Carbon Design System's data-visualization patterns."
|
|
17
|
+
/>
|
|
18
|
+
<meta
|
|
19
|
+
property="og:image"
|
|
20
|
+
content="https://charts.carbondesignsystem.com/react/share.png"
|
|
21
|
+
/>
|
|
22
|
+
<meta property="og:url" content="http://charts.carbondesignsystem.com/react" />
|
|
23
|
+
|
|
24
|
+
<!-- Favicon -->
|
|
25
|
+
<link rel="icon" href="logo.svg" />
|
|
26
|
+
|
|
27
|
+
<!-- Social -->
|
|
28
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
29
|
+
<meta name="twitter:image:alt" content="Carbon Charts - React" />
|
|
30
|
+
<meta
|
|
31
|
+
name="twitter:image"
|
|
32
|
+
content="https://charts.carbondesignsystem.com/react/share.png"
|
|
33
|
+
/>
|
|
34
|
+
<meta name="twitter:site" content="@_carbondesign" />
|
|
35
|
+
|
|
36
|
+
<!-- Storybook override -->
|
|
37
|
+
<script>
|
|
38
|
+
setTimeout(function () {
|
|
39
|
+
document.querySelector('div.sidebar-header > div > a').innerHTML =
|
|
40
|
+
'Carbon Charts - React';
|
|
41
|
+
}, 1000);
|
|
42
|
+
</script>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<link
|
|
2
|
+
rel="preconnect"
|
|
3
|
+
crossorigin="anonymous"
|
|
4
|
+
href="https://fonts.gstatic.com"
|
|
5
|
+
/>
|
|
6
|
+
<link
|
|
7
|
+
href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap"
|
|
8
|
+
rel="stylesheet"
|
|
9
|
+
crossorigin="anonymous"
|
|
10
|
+
/>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { create } from '@storybook/theming';
|
|
2
|
+
import { g10, g100 } from '@carbon/themes';
|
|
3
|
+
|
|
4
|
+
const {
|
|
5
|
+
field01,
|
|
6
|
+
interactive01,
|
|
7
|
+
text01,
|
|
8
|
+
text04,
|
|
9
|
+
ui01,
|
|
10
|
+
ui03,
|
|
11
|
+
ui04,
|
|
12
|
+
uiBackground,
|
|
13
|
+
} = g10;
|
|
14
|
+
const { uiBackground: secondaryColor } = g100;
|
|
15
|
+
|
|
16
|
+
export default create({
|
|
17
|
+
base: 'light',
|
|
18
|
+
|
|
19
|
+
colorPrimary: interactive01,
|
|
20
|
+
colorSecondary: secondaryColor,
|
|
21
|
+
|
|
22
|
+
// UI
|
|
23
|
+
appBg: ui01,
|
|
24
|
+
appContentBg: uiBackground,
|
|
25
|
+
appBorderColor: ui04,
|
|
26
|
+
appBorderRadius: 0,
|
|
27
|
+
|
|
28
|
+
// Typography
|
|
29
|
+
fontBase: '"IBM Plex Sans", sans-serif',
|
|
30
|
+
fontCode: '"IBM Plex Mono", monospace',
|
|
31
|
+
|
|
32
|
+
// Text colors
|
|
33
|
+
textColor: text01,
|
|
34
|
+
textInverseColor: text04,
|
|
35
|
+
|
|
36
|
+
// Toolbar default and active colors
|
|
37
|
+
barTextColor: text01,
|
|
38
|
+
barSelectedColor: interactive01,
|
|
39
|
+
barBg: uiBackground,
|
|
40
|
+
|
|
41
|
+
// Form colors
|
|
42
|
+
inputBg: field01,
|
|
43
|
+
inputBorder: ui03,
|
|
44
|
+
inputTextColor: text01,
|
|
45
|
+
inputBorderRadius: 0,
|
|
46
|
+
});
|
package/CHANGELOG.md
CHANGED
|
@@ -3,22 +3,6 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [0.57.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.57.0...v0.57.1) (2022-05-06)
|
|
7
|
-
|
|
8
|
-
**Note:** Version bump only for package @carbon/charts-react
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
# [0.57.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.56.0...v0.57.0) (2022-04-11)
|
|
15
|
-
|
|
16
|
-
**Note:** Version bump only for package @carbon/charts-react
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
6
|
# [0.56.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.55.1...v0.56.0) (2022-03-28)
|
|
23
7
|
|
|
24
8
|
**Note:** Version bump only for package @carbon/charts-react
|
package/build.sh
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
#!/usr/bin/env bash
|
|
2
|
+
|
|
3
|
+
set -e
|
|
4
|
+
|
|
5
|
+
rm -rf dist
|
|
6
|
+
|
|
7
|
+
echo "linking local packages (non-lerna)"
|
|
8
|
+
# we run this outside of lerna, since lerna seems to have issues with correctly linking to the dist
|
|
9
|
+
rm -f node_modules/@carbon/charts
|
|
10
|
+
ln -sf $(pwd)/../core/dist node_modules/@carbon/charts
|
|
11
|
+
|
|
12
|
+
echo "compiling ts to js"
|
|
13
|
+
tsc
|
|
14
|
+
|
|
15
|
+
echo "bundling..."
|
|
16
|
+
rollup -c
|
|
17
|
+
|
|
18
|
+
echo "copying metadata"
|
|
19
|
+
cp *.md dist/
|
|
20
|
+
cp package.json dist/
|
package/carbon.yml
ADDED
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
|
|
2
|
+
library:
|
|
3
|
+
id: carbon-charts-react
|
|
4
|
+
name: Carbon Charts React
|
|
5
|
+
description: React implementation of Carbon Charts
|
|
6
|
+
inherits: carbon-charts
|
|
7
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
|
|
8
|
+
demoLinks:
|
|
9
|
+
- type: storybook
|
|
10
|
+
name: Storybook
|
|
11
|
+
action: link
|
|
12
|
+
url: https://charts.carbondesignsystem.com/react
|
|
13
|
+
assets:
|
|
14
|
+
alluvial:
|
|
15
|
+
status: stable
|
|
16
|
+
framework: react
|
|
17
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#alluvialsankey-diagrams
|
|
18
|
+
demoLinks:
|
|
19
|
+
- type: storybook
|
|
20
|
+
name: Storybook
|
|
21
|
+
action: link
|
|
22
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/complex-charts-alluvial
|
|
23
|
+
area-simple:
|
|
24
|
+
status: stable
|
|
25
|
+
framework: react
|
|
26
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#area-(simple)
|
|
27
|
+
demoLinks:
|
|
28
|
+
- type: storybook
|
|
29
|
+
name: Storybook
|
|
30
|
+
action: link
|
|
31
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-area-simple
|
|
32
|
+
area-stacked:
|
|
33
|
+
status: stable
|
|
34
|
+
framework: react
|
|
35
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#area-(stacked)
|
|
36
|
+
demoLinks:
|
|
37
|
+
- type: storybook
|
|
38
|
+
name: Storybook
|
|
39
|
+
action: link
|
|
40
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-area-stacked
|
|
41
|
+
bar-floating:
|
|
42
|
+
status: stable
|
|
43
|
+
framework: react
|
|
44
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(floating)
|
|
45
|
+
demoLinks:
|
|
46
|
+
- type: storybook
|
|
47
|
+
name: Storybook
|
|
48
|
+
action: link
|
|
49
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-bar-floating
|
|
50
|
+
bar-grouped:
|
|
51
|
+
status: stable
|
|
52
|
+
framework: react
|
|
53
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(grouped)
|
|
54
|
+
demoLinks:
|
|
55
|
+
- type: storybook
|
|
56
|
+
name: Storybook
|
|
57
|
+
action: link
|
|
58
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-bar-grouped
|
|
59
|
+
bar-simple:
|
|
60
|
+
status: stable
|
|
61
|
+
framework: react
|
|
62
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bar-(simple)
|
|
63
|
+
demoLinks:
|
|
64
|
+
- type: storybook
|
|
65
|
+
name: Storybook
|
|
66
|
+
action: link
|
|
67
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-bar-simple
|
|
68
|
+
bar-stacked:
|
|
69
|
+
status: stable
|
|
70
|
+
framework: react
|
|
71
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#bar-(stacked)
|
|
72
|
+
demoLinks:
|
|
73
|
+
- type: storybook
|
|
74
|
+
name: Storybook
|
|
75
|
+
action: link
|
|
76
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-bar-stacked
|
|
77
|
+
boxplot:
|
|
78
|
+
status: stable
|
|
79
|
+
framework: react
|
|
80
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#boxplot
|
|
81
|
+
demoLinks:
|
|
82
|
+
- type: storybook
|
|
83
|
+
name: Storybook
|
|
84
|
+
action: link
|
|
85
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-boxplot
|
|
86
|
+
bubble:
|
|
87
|
+
status: stable
|
|
88
|
+
framework: react
|
|
89
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#bubble
|
|
90
|
+
demoLinks:
|
|
91
|
+
- type: storybook
|
|
92
|
+
name: Storybook
|
|
93
|
+
action: link
|
|
94
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-bubble
|
|
95
|
+
bullet:
|
|
96
|
+
status: stable
|
|
97
|
+
framework: react
|
|
98
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#bullet
|
|
99
|
+
demoLinks:
|
|
100
|
+
- type: storybook
|
|
101
|
+
name: Storybook
|
|
102
|
+
action: link
|
|
103
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-bullet
|
|
104
|
+
circle-pack:
|
|
105
|
+
status: stable
|
|
106
|
+
framework: react
|
|
107
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#circle-packs
|
|
108
|
+
demoLinks:
|
|
109
|
+
- type: storybook
|
|
110
|
+
name: Storybook
|
|
111
|
+
action: link
|
|
112
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/complex-charts-circle-pack
|
|
113
|
+
combo:
|
|
114
|
+
status: stable
|
|
115
|
+
framework: react
|
|
116
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
|
|
117
|
+
demoLinks:
|
|
118
|
+
- type: storybook
|
|
119
|
+
name: Storybook
|
|
120
|
+
action: link
|
|
121
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-combo
|
|
122
|
+
donut:
|
|
123
|
+
status: stable
|
|
124
|
+
framework: react
|
|
125
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#donut
|
|
126
|
+
demoLinks:
|
|
127
|
+
- type: storybook
|
|
128
|
+
name: Storybook
|
|
129
|
+
action: link
|
|
130
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-donut
|
|
131
|
+
gauge:
|
|
132
|
+
status: stable
|
|
133
|
+
framework: react
|
|
134
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#gauge
|
|
135
|
+
demoLinks:
|
|
136
|
+
- type: storybook
|
|
137
|
+
name: Storybook
|
|
138
|
+
action: link
|
|
139
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-gauge
|
|
140
|
+
heatmap:
|
|
141
|
+
status: stable
|
|
142
|
+
framework: react
|
|
143
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#heat-maps
|
|
144
|
+
demoLinks:
|
|
145
|
+
- type: storybook
|
|
146
|
+
name: Storybook
|
|
147
|
+
action: link
|
|
148
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/complex-charts-heatmap
|
|
149
|
+
histogram:
|
|
150
|
+
status: stable
|
|
151
|
+
framework: react
|
|
152
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#histogram
|
|
153
|
+
demoLinks:
|
|
154
|
+
- type: storybook
|
|
155
|
+
name: Storybook
|
|
156
|
+
action: link
|
|
157
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-histogram
|
|
158
|
+
line:
|
|
159
|
+
status: stable
|
|
160
|
+
framework: react
|
|
161
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#line
|
|
162
|
+
demoLinks:
|
|
163
|
+
- type: storybook
|
|
164
|
+
name: Storybook
|
|
165
|
+
action: link
|
|
166
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-line
|
|
167
|
+
lollipop:
|
|
168
|
+
status: stable
|
|
169
|
+
framework: react
|
|
170
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#lollipop
|
|
171
|
+
demoLinks:
|
|
172
|
+
- type: storybook
|
|
173
|
+
name: Storybook
|
|
174
|
+
action: link
|
|
175
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-lollipop
|
|
176
|
+
meter:
|
|
177
|
+
status: stable
|
|
178
|
+
framework: react
|
|
179
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#meter
|
|
180
|
+
demoLinks:
|
|
181
|
+
- type: storybook
|
|
182
|
+
name: Storybook
|
|
183
|
+
action: link
|
|
184
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-meter
|
|
185
|
+
meter-proportional:
|
|
186
|
+
status: stable
|
|
187
|
+
framework: react
|
|
188
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts/#meter
|
|
189
|
+
demoLinks:
|
|
190
|
+
- type: storybook
|
|
191
|
+
name: Storybook
|
|
192
|
+
action: link
|
|
193
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-meter-proportional
|
|
194
|
+
network-diagram:
|
|
195
|
+
status: stable
|
|
196
|
+
framework: react
|
|
197
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#network-diagrams
|
|
198
|
+
demoLinks:
|
|
199
|
+
- type: storybook
|
|
200
|
+
name: Storybook
|
|
201
|
+
action: link
|
|
202
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/diagrams
|
|
203
|
+
pie:
|
|
204
|
+
status: stable
|
|
205
|
+
framework: react
|
|
206
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#pie
|
|
207
|
+
demoLinks:
|
|
208
|
+
- type: storybook
|
|
209
|
+
name: Storybook
|
|
210
|
+
action: link
|
|
211
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-pie
|
|
212
|
+
radar:
|
|
213
|
+
status: stable
|
|
214
|
+
framework: react
|
|
215
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#radar
|
|
216
|
+
demoLinks:
|
|
217
|
+
- type: storybook
|
|
218
|
+
name: Storybook
|
|
219
|
+
action: link
|
|
220
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-radar
|
|
221
|
+
scatter:
|
|
222
|
+
name: Scatter
|
|
223
|
+
status: stable
|
|
224
|
+
framework: react
|
|
225
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#scatter
|
|
226
|
+
demoLinks:
|
|
227
|
+
- type: storybook
|
|
228
|
+
name: Storybook
|
|
229
|
+
action: link
|
|
230
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-scatter
|
|
231
|
+
sparkline:
|
|
232
|
+
status: stable
|
|
233
|
+
framework: react
|
|
234
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
|
|
235
|
+
demoLinks:
|
|
236
|
+
- type: storybook
|
|
237
|
+
name: Storybook
|
|
238
|
+
action: link
|
|
239
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-sparkline
|
|
240
|
+
step:
|
|
241
|
+
status: stable
|
|
242
|
+
framework: react
|
|
243
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/getting-started
|
|
244
|
+
demoLinks:
|
|
245
|
+
- type: storybook
|
|
246
|
+
name: Storybook
|
|
247
|
+
action: link
|
|
248
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-step
|
|
249
|
+
tree:
|
|
250
|
+
status: stable
|
|
251
|
+
framework: react
|
|
252
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-diagrams
|
|
253
|
+
demoLinks:
|
|
254
|
+
- type: storybook
|
|
255
|
+
name: Storybook
|
|
256
|
+
action: link
|
|
257
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/complex-charts-tree
|
|
258
|
+
treemap:
|
|
259
|
+
status: stable
|
|
260
|
+
framework: react
|
|
261
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/complex-charts#tree-maps
|
|
262
|
+
demoLinks:
|
|
263
|
+
- type: storybook
|
|
264
|
+
name: Storybook
|
|
265
|
+
action: link
|
|
266
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/complex-charts-treemap
|
|
267
|
+
word-cloud:
|
|
268
|
+
status: stable
|
|
269
|
+
framework: react
|
|
270
|
+
externalDocsUrl: https://www.carbondesignsystem.com/data-visualization/simple-charts#word-cloud
|
|
271
|
+
demoLinks:
|
|
272
|
+
- type: storybook
|
|
273
|
+
name: Storybook
|
|
274
|
+
action: link
|
|
275
|
+
url: https://charts.carbondesignsystem.com/react/?path=/story/simple-charts-word-cloud
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
MeterChartOptions,
|
|
4
|
+
ScaleTypes,
|
|
5
|
+
Statuses,
|
|
6
|
+
} from '@carbon/charts/interfaces';
|
|
7
|
+
import { LineChart, MeterChart } from './src';
|
|
8
|
+
|
|
9
|
+
const meterOptions: MeterChartOptions = {
|
|
10
|
+
title: 'Meter Chart - with statuses',
|
|
11
|
+
meter: {
|
|
12
|
+
peak: 80,
|
|
13
|
+
status: {
|
|
14
|
+
ranges: [
|
|
15
|
+
{ range: [0, 50], status: Statuses.SUCCESS },
|
|
16
|
+
{ range: [50, 60], status: Statuses.WARNING },
|
|
17
|
+
{ range: [60, 100], status: Statuses.DANGER },
|
|
18
|
+
],
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
height: '100px',
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
class App extends React.Component {
|
|
25
|
+
ref: React.RefObject<LineChart> = React.createRef();
|
|
26
|
+
|
|
27
|
+
state = {
|
|
28
|
+
data: [
|
|
29
|
+
{ group: 'Qty', value: 65000 },
|
|
30
|
+
{ group: 'More', value: 29123 },
|
|
31
|
+
{ group: 'Sold', value: 35213 },
|
|
32
|
+
{ group: 'Restocking', value: 51213 },
|
|
33
|
+
{ group: 'Misc', value: 16932 },
|
|
34
|
+
],
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
componentDidMount() {
|
|
38
|
+
this.setState({ data: [] });
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
render() {
|
|
42
|
+
if (this.ref != null) {
|
|
43
|
+
console.log(this.ref.current.data);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<>
|
|
48
|
+
<LineChart
|
|
49
|
+
ref={this.ref}
|
|
50
|
+
data={this.state.data}
|
|
51
|
+
options={{
|
|
52
|
+
title: 'Line (discrete)',
|
|
53
|
+
axes: {
|
|
54
|
+
bottom: {
|
|
55
|
+
title: '2019 Annual Sales Figures',
|
|
56
|
+
mapsTo: 'key',
|
|
57
|
+
scaleType: ScaleTypes.LABELS,
|
|
58
|
+
},
|
|
59
|
+
left: {
|
|
60
|
+
mapsTo: 'value',
|
|
61
|
+
title: 'Conversion rate',
|
|
62
|
+
scaleType: ScaleTypes.LABELS,
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
color: {
|
|
66
|
+
scale: {
|
|
67
|
+
'Dataset 1': '#925699',
|
|
68
|
+
'Dataset 2': '#525669',
|
|
69
|
+
'Dataset 3': '#725699',
|
|
70
|
+
'Dataset 4': '#ccc',
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
height: '400px',
|
|
74
|
+
}}
|
|
75
|
+
/>
|
|
76
|
+
<MeterChart
|
|
77
|
+
options={meterOptions}
|
|
78
|
+
data={[{ group: 'Dataset 1', value: 56 }]}
|
|
79
|
+
/>
|
|
80
|
+
</>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>html, body {
|
|
2
|
+
overflow: hidden;
|
|
3
|
+
height: 100%;
|
|
4
|
+
width: 100%;
|
|
5
|
+
margin: 0;
|
|
6
|
+
padding: 0;
|
|
7
|
+
}</style><script>/* globals window */
|
|
8
|
+
/* eslint-disable no-underscore-dangle */
|
|
9
|
+
try {
|
|
10
|
+
if (window.top !== window) {
|
|
11
|
+
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
|
12
|
+
}
|
|
13
|
+
} catch (e) {
|
|
14
|
+
// eslint-disable-next-line no-console
|
|
15
|
+
console.warn('unable to connect to top frame for connecting dev tools');
|
|
16
|
+
}</script><meta name="keywords" content="IBM, design, system, Carbon, design system, data visualization, charts, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, react"><meta name="description" content="This is the React version of Carbon Charts, an implementation of Carbon Design System's data-visualization patterns."><meta property="og:title" content="Carbon Charts - React"><meta property="og:site_name" content="Carbon Charts"><meta property="og:description" content="This is the React version of Carbon Charts, an implementation of Carbon Design System's data-visualization patterns."><meta property="og:image" content="https://charts.carbondesignsystem.com/react/share.png"><meta property="og:url" content="http://charts.carbondesignsystem.com/react"><link rel="icon" href="logo.svg"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image:alt" content="Carbon Charts - React"><meta name="twitter:image" content="https://charts.carbondesignsystem.com/react/share.png"><meta name="twitter:site" content="@_carbondesign"><script>setTimeout(function () {
|
|
17
|
+
document.querySelector('div.sidebar-header > div > a').innerHTML =
|
|
18
|
+
'Carbon Charts - React';
|
|
19
|
+
}, 1000);</script><style>#root[hidden],
|
|
20
|
+
#docs-root[hidden] {
|
|
21
|
+
display: none !important;
|
|
22
|
+
}</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.6b70b35614cf83eab770.bundle.js"></script><script src="vendors~main.9ceec0efe2f3ef413ade.bundle.js"></script><script src="main.4a87b5852cddf04c8e9a.bundle.js"></script></body></html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800"><defs><path id="a" d="M402.002 65H736v557.94H402.002z"/><path id="c" d="M65 295.764h106.706v247.479H65z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#FF75B8" d="M251.796 197.647l-50.559-67.093c-54.285 40.138-96.035 96.261-118.296 161.416l80.408 24.584c16.993-48.006 48.15-89.316 88.447-118.907"/><path fill="#00B4FF" d="M400.5 651.997c-100.162 0-186.649-58.553-227.099-143.297l-74.88 38.153C152.885 658.814 267.679 735.997 400.5 735.997c98.515 0 187.111-42.46 248.489-110.078l-61.441-57.295c-46.038 51.185-112.784 83.373-187.048 83.373"/><path fill="#FF3A54" d="M398 149.017V65.022c-72.221.528-139.018 23.859-193.532 63.173l50.572 67.11c40.011-28.415 88.693-45.421 141.301-46.274l1.659-.014z"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#9639FF" d="M652 400.497c0 63.196-23.309 120.949-61.799 165.129l61.46 57.314C704.138 563.732 736 485.836 736 400.497 736 215.706 586.603 65.81 402.002 65v84.001C540.211 149.81 652 262.098 652 400.497" mask="url(#b)"/><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#007F7A" d="M149 400.497c0-28.027 4.584-54.983 13.044-80.159l-80.373-24.574C70.852 328.718 65 363.924 65 400.497c0 51.047 11.401 99.432 31.795 142.746l74.911-38.17C157.126 473.227 149 437.811 149 400.497" mask="url(#d)"/></g></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1248:function(n,o,c){"use strict";c.r(o);c(1249),c(1356)},453:function(n,o,c){c(454),c(597),n.exports=c(1248)},516:function(n,o){}},[[453,1,2]]]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(e){function r(r){for(var n,l,f=r[0],i=r[1],a=r[2],c=0,s=[];c<f.length;c++)l=f[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,f=1;f<t.length;f++){var i=t[f];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="";var f=window.webpackJsonp=window.webpackJsonp||[],i=f.push.bind(f);f.push=r,f=f.slice();for(var a=0;a<f.length;a++)r(f[a]);var p=i;t()}([]);
|