@carbon/charts-react 0.59.0-beta.0 → 1.0.3
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/CHANGELOG.md +61 -275
- package/LICENSE.md +201 -0
- package/README.md +5 -1
- package/{dist/alluvial-chart.d.ts → alluvial-chart.d.ts} +0 -0
- package/{dist/alluvial-chart.js → alluvial-chart.js} +0 -0
- package/{dist/area-chart-stacked.d.ts → area-chart-stacked.d.ts} +0 -0
- package/{dist/area-chart-stacked.js → area-chart-stacked.js} +0 -0
- package/{dist/area-chart.d.ts → area-chart.d.ts} +0 -0
- package/{dist/area-chart.js → area-chart.js} +0 -0
- package/{dist/bar-chart-grouped.d.ts → bar-chart-grouped.d.ts} +0 -0
- package/{dist/bar-chart-grouped.js → bar-chart-grouped.js} +0 -0
- package/{dist/bar-chart-simple.d.ts → bar-chart-simple.d.ts} +0 -0
- package/{dist/bar-chart-simple.js → bar-chart-simple.js} +0 -0
- package/{dist/bar-chart-stacked.d.ts → bar-chart-stacked.d.ts} +0 -0
- package/{dist/bar-chart-stacked.js → bar-chart-stacked.js} +0 -0
- package/{dist/base-chart.d.ts → base-chart.d.ts} +0 -0
- package/{dist/base-chart.js → base-chart.js} +0 -0
- package/{dist/boxplot-chart.d.ts → boxplot-chart.d.ts} +0 -0
- package/{dist/boxplot-chart.js → boxplot-chart.js} +0 -0
- package/{dist/bubble-chart.d.ts → bubble-chart.d.ts} +0 -0
- package/{dist/bubble-chart.js → bubble-chart.js} +0 -0
- package/{dist/bullet-chart.d.ts → bullet-chart.d.ts} +0 -0
- package/{dist/bullet-chart.js → bullet-chart.js} +0 -0
- package/{dist/bundle.js → bundle.js} +0 -0
- package/{dist/circle-pack-chart.d.ts → circle-pack-chart.d.ts} +0 -0
- package/{dist/circle-pack-chart.js → circle-pack-chart.js} +0 -0
- package/{dist/combo-chart.d.ts → combo-chart.d.ts} +0 -0
- package/{dist/combo-chart.js → combo-chart.js} +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNode.d.ts +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNode.js +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNodeColumn.d.ts +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNodeColumn.js +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNodeLabel.d.ts +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNodeLabel.js +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNodeSubtitle.d.ts +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNodeSubtitle.js +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNodeTitle.d.ts +0 -0
- package/{dist/diagrams → diagrams}/CardNode/CardNodeTitle.js +0 -0
- package/{dist/diagrams → diagrams}/CardNode/index.d.ts +0 -0
- package/{dist/diagrams → diagrams}/CardNode/index.js +0 -0
- package/{dist/diagrams → diagrams}/Edge/Edge.d.ts +0 -0
- package/{dist/diagrams → diagrams}/Edge/Edge.js +0 -0
- package/{dist/diagrams → diagrams}/Edge/index.d.ts +0 -0
- package/{dist/diagrams → diagrams}/Edge/index.js +0 -0
- package/{dist/diagrams → diagrams}/Marker/Marker.d.ts +0 -0
- package/{dist/diagrams → diagrams}/Marker/Marker.js +0 -0
- package/{dist/diagrams → diagrams}/Marker/index.d.ts +0 -0
- package/{dist/diagrams → diagrams}/Marker/index.js +0 -0
- package/{dist/diagrams → diagrams}/ShapeNode/ShapeNode.d.ts +0 -0
- package/{dist/diagrams → diagrams}/ShapeNode/ShapeNode.js +0 -0
- package/{dist/diagrams → diagrams}/ShapeNode/index.d.ts +0 -0
- package/{dist/diagrams → diagrams}/ShapeNode/index.js +0 -0
- package/{dist/diagrams → diagrams}/configs.d.ts +0 -0
- package/{dist/diagrams → diagrams}/configs.js +0 -0
- package/{dist/donut-chart.d.ts → donut-chart.d.ts} +0 -0
- package/{dist/donut-chart.js → donut-chart.js} +0 -0
- package/{dist/gauge-chart.d.ts → gauge-chart.d.ts} +0 -0
- package/{dist/gauge-chart.js → gauge-chart.js} +0 -0
- package/{dist/heatmap-chart.d.ts → heatmap-chart.d.ts} +0 -0
- package/{dist/heatmap-chart.js → heatmap-chart.js} +0 -0
- package/{dist/histogram-chart.d.ts → histogram-chart.d.ts} +0 -0
- package/{dist/histogram-chart.js → histogram-chart.js} +0 -0
- package/{dist/index.d.ts → index.d.ts} +0 -0
- package/{dist/index.js → index.js} +0 -0
- package/{dist/line-chart.d.ts → line-chart.d.ts} +0 -0
- package/{dist/line-chart.js → line-chart.js} +0 -0
- package/{dist/lollipop-chart.d.ts → lollipop-chart.d.ts} +0 -0
- package/{dist/lollipop-chart.js → lollipop-chart.js} +0 -0
- package/{dist/meter-chart.d.ts → meter-chart.d.ts} +0 -0
- package/{dist/meter-chart.js → meter-chart.js} +0 -0
- package/package.json +106 -106
- package/{dist/pie-chart.d.ts → pie-chart.d.ts} +0 -0
- package/{dist/pie-chart.js → pie-chart.js} +0 -0
- package/{dist/radar-chart.d.ts → radar-chart.d.ts} +0 -0
- package/{dist/radar-chart.js → radar-chart.js} +0 -0
- package/{dist/scatter-chart.d.ts → scatter-chart.d.ts} +0 -0
- package/{dist/scatter-chart.js → scatter-chart.js} +0 -0
- package/{dist/tree-chart.d.ts → tree-chart.d.ts} +0 -0
- package/{dist/tree-chart.js → tree-chart.js} +0 -0
- package/{dist/treemap-chart.d.ts → treemap-chart.d.ts} +0 -0
- package/{dist/treemap-chart.js → treemap-chart.js} +0 -0
- package/{dist/utils.d.ts → utils.d.ts} +0 -0
- package/{dist/utils.js → utils.js} +0 -0
- package/{dist/wordcloud-chart.d.ts → wordcloud-chart.d.ts} +0 -0
- package/{dist/wordcloud-chart.js → wordcloud-chart.js} +0 -0
- package/.babelrc +0 -4
- package/.prettierignore +0 -1
- package/.storybook/addons.js +0 -2
- package/.storybook/assets/logo.svg +0 -1
- package/.storybook/assets/share.png +0 -0
- package/.storybook/assets/welcome.png +0 -0
- package/.storybook/config.js +0 -22
- package/.storybook/main.js +0 -24
- package/.storybook/manager-head.html +0 -42
- package/.storybook/preview-head.html +0 -10
- package/build.sh +0 -20
- package/carbon.yml +0 -275
- package/carbon__charts-react-tests.tsx +0 -83
- package/demo/bundle/favicon.ico +0 -0
- package/demo/bundle/index.html +0 -22
- package/demo/bundle/logo.svg +0 -1
- package/demo/bundle/main.4a87b5852cddf04c8e9a.bundle.js +0 -1
- package/demo/bundle/runtime~main.6b70b35614cf83eab770.bundle.js +0 -1
- package/demo/bundle/sb_dll/storybook_ui-manifest.json +0 -1
- package/demo/bundle/sb_dll/storybook_ui_dll.LICENCE +0 -113
- package/demo/bundle/sb_dll/storybook_ui_dll.js +0 -2
- package/demo/bundle/share.png +0 -0
- package/demo/bundle/vendors~main.9ceec0efe2f3ef413ade.bundle.js +0 -111
- package/demo/bundle/welcome.png +0 -0
- package/dist/CHANGELOG.md +0 -2150
- package/dist/README.md +0 -56
- package/dist/package.json +0 -107
- package/helpers/commons.js +0 -30
- package/rollup.config.js +0 -18
- package/src/alluvial-chart.tsx +0 -30
- package/src/area-chart-stacked.tsx +0 -33
- package/src/area-chart.tsx +0 -30
- package/src/bar-chart-grouped.tsx +0 -30
- package/src/bar-chart-simple.tsx +0 -30
- package/src/bar-chart-stacked.tsx +0 -30
- package/src/base-chart.tsx +0 -45
- package/src/boxplot-chart.tsx +0 -30
- package/src/bubble-chart.tsx +0 -30
- package/src/bullet-chart.tsx +0 -30
- package/src/circle-pack-chart.tsx +0 -30
- package/src/combo-chart.tsx +0 -30
- package/src/diagrams/CardNode/CardNode.tsx +0 -121
- package/src/diagrams/CardNode/CardNodeColumn.tsx +0 -38
- package/src/diagrams/CardNode/CardNodeLabel.tsx +0 -32
- package/src/diagrams/CardNode/CardNodeSubtitle.tsx +0 -32
- package/src/diagrams/CardNode/CardNodeTitle.tsx +0 -32
- package/src/diagrams/CardNode/index.tsx +0 -13
- package/src/diagrams/Edge/Edge.tsx +0 -137
- package/src/diagrams/Edge/index.tsx +0 -2
- package/src/diagrams/Marker/Marker.tsx +0 -121
- package/src/diagrams/Marker/index.tsx +0 -9
- package/src/diagrams/ShapeNode/ShapeNode.tsx +0 -153
- package/src/diagrams/ShapeNode/index.tsx +0 -2
- package/src/diagrams/configs.ts +0 -1
- package/src/donut-chart.tsx +0 -30
- package/src/gauge-chart.tsx +0 -30
- package/src/heatmap-chart.tsx +0 -30
- package/src/histogram-chart.tsx +0 -30
- package/src/index.ts +0 -51
- package/src/line-chart.tsx +0 -30
- package/src/lollipop-chart.tsx +0 -30
- package/src/meter-chart.tsx +0 -30
- package/src/pie-chart.tsx +0 -30
- package/src/radar-chart.tsx +0 -30
- package/src/scatter-chart.tsx +0 -30
- package/src/tree-chart.tsx +0 -30
- package/src/treemap-chart.tsx +0 -30
- package/src/utils.ts +0 -7
- package/src/wordcloud-chart.tsx +0 -30
- package/stories/0_intro.stories.js +0 -60
- package/stories/1_gettingStarted.stories.js +0 -74
- package/stories/1_gettingStarted_content.js +0 -121
- package/stories/all.stories.js +0 -110
- package/stories/diagrams/0_Diagrams.stories.js +0 -259
- package/stories/diagrams/CardNode.stories.js +0 -106
- package/stories/diagrams/Edge.stories.js +0 -94
- package/stories/diagrams/Marker.stories.js +0 -95
- package/stories/diagrams/ShapeNode.stories.js +0 -42
- package/tsconfig.json +0 -20
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/.babelrc
DELETED
package/.prettierignore
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
dist/
|
package/.storybook/addons.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
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
|
package/.storybook/config.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { configure } from '@storybook/react';
|
|
2
|
-
import { withOptions } from '@storybook/addon-options';
|
|
3
|
-
|
|
4
|
-
withOptions({
|
|
5
|
-
name: 'Carbon Charts - React',
|
|
6
|
-
panelPosition: 'bottom',
|
|
7
|
-
showDownPanel: true,
|
|
8
|
-
showAddonPanel: true,
|
|
9
|
-
sortStoriesByKind: true,
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
// load global styles
|
|
13
|
-
require('!style-loader!css-loader!@carbon/charts/demo/styles.css');
|
|
14
|
-
|
|
15
|
-
const req = require.context('../', true, /.stories.js$/);
|
|
16
|
-
function loadStories() {
|
|
17
|
-
req.keys().forEach((filename) => {
|
|
18
|
-
req(filename);
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
configure(loadStories, module);
|
package/.storybook/main.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
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
|
-
};
|
|
@@ -1,42 +0,0 @@
|
|
|
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>
|
|
@@ -1,10 +0,0 @@
|
|
|
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
|
-
/>
|
package/build.sh
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
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
DELETED
|
@@ -1,275 +0,0 @@
|
|
|
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
|
|
@@ -1,83 +0,0 @@
|
|
|
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
|
-
}
|
package/demo/bundle/favicon.ico
DELETED
|
Binary file
|
package/demo/bundle/index.html
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
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>
|
package/demo/bundle/logo.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
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>
|
|
@@ -1 +0,0 @@
|
|
|
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]]]);
|
|
@@ -1 +0,0 @@
|
|
|
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()}([]);
|