@carbon/charts-react 0.58.1 → 0.59.0-beta.0

package/dist/README.md

@@ -0,0 +1,56 @@
+# `@carbon/charts-react`
+
+> Carbon Charting React Wrappers
+
+**[Storybook demos](https://carbon-design-system.github.io/carbon-charts/react)**
+
+**[Storybook demo sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data)**
+
+## Getting started
+
+Run the following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install -S @carbon/charts @carbon/charts-react d3
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
+instead:
+
+```bash
+yarn add @carbon/charts @carbon/charts-react d3
+```
+
+**Note:** you'd also need to install `carbon-components` if you're not using a
+bundled version of the library.
+
+## Step-by-step instructions
+
+Read
+[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--react)
+
+## Codesandbox examples
+
+[Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts/react).
+
+**When opening the link above**, click on the **Edit on Codesandbox** button for
+each demo to see an isolated project showing you how to reproduce the demo.
+
+## Charting data & options
+
+Although we will definitely introduce new models in the future as we start
+shipping new components such as maps, Data and options follow the same model in
+all charts, with minor exceptions and differences in specific components.
+
+For instance in the case of a donut chart you're able to pass in an additional
+field called `center` in your options configuring the donut center.
+
+For instructions on using the **tabular data format**, see
+[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-tutorials--tabular-data-format)
+
+There are also additional options available depending on the chart type being
+used,
+[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
+
+Customizable options (specific to chart type) can be found
+[here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)

package/{diagrams → dist/diagrams}/CardNode/CardNode.js

@@ -7,10 +7,9 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
 var classnames_1 = __importDefault(require("classnames"));
-// @ts-ignore
-var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
-var prefix = settings_1.default.prefix;
-var namespace = prefix + "--cc--card-node";
+// Carbon Prefix
+var configs_1 = require("../configs");
+var namespace = configs_1.carbonPrefix + "--cc--card-node";
 var CardNode = function (_a) {
     var _b;
     var _c = _a.as, as = _c === void 0 ? 'div' : _c, children = _a.children, className = _a.className, color = _a.color, _d = _a.href, href = _d === void 0 ? null : _d, _e = _a.onMouseEnter, onMouseEnter = _e === void 0 ? null : _e, _f = _a.onMouseOver, onMouseOver = _f === void 0 ? null : _f, _g = _a.onMouseOut, onMouseOut = _g === void 0 ? null : _g, _h = _a.onMouseLeave, onMouseLeave = _h === void 0 ? null : _h, _j = _a.onMouseMove, onMouseMove = _j === void 0 ? null : _j, _k = _a.onClick, onClick = _k === void 0 ? null : _k, _l = _a.position, position = _l === void 0 ? 'static' : _l, stacked = _a.stacked;

package/{diagrams → dist/diagrams}/CardNode/CardNodeColumn.js

@@ -8,10 +8,9 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
 var classnames_1 = __importDefault(require("classnames"));
-// @ts-ignore
-var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
-var prefix = settings_1.default.prefix;
-var namespace = prefix + "--cc--card-node";
+// Carbon Prefix
+var configs_1 = require("../configs");
+var namespace = configs_1.carbonPrefix + "--cc--card-node";
 var CardNodeColumn = function (_a) {
     var _b;
     var children = _a.children, className = _a.className, farsideColumn = _a.farsideColumn;

package/{diagrams → dist/diagrams}/CardNode/CardNodeLabel.js

@@ -8,10 +8,9 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
 var classnames_1 = __importDefault(require("classnames"));
-// @ts-ignore
-var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
-var prefix = settings_1.default.prefix;
-var namespace = prefix + "--cc--card-node";
+// Carbon Prefix
+var configs_1 = require("../configs");
+var namespace = configs_1.carbonPrefix + "--cc--card-node";
 var CardNodeLabel = function (_a) {
     var _b;
     var children = _a.children, className = _a.className;

package/{diagrams → dist/diagrams}/CardNode/CardNodeSubtitle.js

@@ -8,10 +8,9 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
 var classnames_1 = __importDefault(require("classnames"));
-// @ts-ignore
-var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
-var prefix = settings_1.default.prefix;
-var namespace = prefix + "--cc--card-node";
+// Carbon Prefix
+var configs_1 = require("../configs");
+var namespace = configs_1.carbonPrefix + "--cc--card-node";
 var CardNodeSubtitle = function (_a) {
     var _b;
     var children = _a.children, className = _a.className;

package/{diagrams → dist/diagrams}/CardNode/CardNodeTitle.js

@@ -8,10 +8,9 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
 var classnames_1 = __importDefault(require("classnames"));
-// @ts-ignore
-var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
-var prefix = settings_1.default.prefix;
-var namespace = prefix + "--cc--card-node";
+// Carbon Prefix
+var configs_1 = require("../configs");
+var namespace = configs_1.carbonPrefix + "--cc--card-node";
 var CardNodeTitle = function (_a) {
     var _b;
     var children = _a.children, className = _a.className;

package/{diagrams → dist/diagrams}/Edge/Edge.js

@@ -5,16 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
-// @ts-ignore
-var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
+// Carbon Prefix
+var configs_1 = require("../configs");
 // @ts-ignore
 var classnames_1 = __importDefault(require("classnames"));
 var buildPaths_1 = require("@carbon/charts/components/diagrams/buildPaths");
-var prefix = settings_1.default.prefix;
 var Edge = function (_a) {
     var _b;
     var className = _a.className, color = _a.color, markerEnd = _a.markerEnd, markerStart = _a.markerStart, _c = _a.onMouseEnter, onMouseEnter = _c === void 0 ? null : _c, _d = _a.onMouseOver, onMouseOver = _d === void 0 ? null : _d, _e = _a.onMouseOut, onMouseOut = _e === void 0 ? null : _e, _f = _a.onMouseLeave, onMouseLeave = _f === void 0 ? null : _f, _g = _a.onMouseMove, onMouseMove = _g === void 0 ? null : _g, path = _a.path, source = _a.source, target = _a.target, _h = _a.variant, variant = _h === void 0 ? null : _h;
-    var namespace = prefix + "--cc--edge";
+    var namespace = configs_1.carbonPrefix + "--cc--edge";
     var pathClasses = classnames_1.default(namespace, (_b = {},
         _b[namespace + "--" + variant] = variant,
         _b[className] = className,

package/{diagrams → dist/diagrams}/Marker/Marker.js

@@ -30,14 +30,13 @@ var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 // @ts-ignore
 var classnames_1 = __importDefault(require("classnames"));
-// @ts-ignore
-var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
+// Carbon Prefix
+var configs_1 = require("../configs");
 var markerDefinitions_1 = require("@carbon/charts/components/diagrams/markerDefinitions");
-var prefix = settings_1.default.prefix;
 var Marker = function (_a) {
     var _b;
     var className = _a.className, color = _a.color, d = _a.d, id = _a.id, _c = _a.orient, orient = _c === void 0 ? 'auto' : _c, height = _a.height, width = _a.width, _d = _a.position, position = _d === void 0 ? 'end' : _d, refX = _a.refX, refY = _a.refY;
-    var namespace = prefix + "--cc--marker";
+    var namespace = configs_1.carbonPrefix + "--cc--marker";
     var classes = classnames_1.default(namespace, (_b = {},
         _b[className] = className,
         _b));

package/{diagrams → dist/diagrams}/ShapeNode/ShapeNode.js

@@ -5,15 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
-// @ts-ignore
-var settings_1 = __importDefault(require("carbon-components/src/globals/js/settings"));
+// Carbon Prefix
+var configs_1 = require("../configs");
 // @ts-ignore
 var classnames_1 = __importDefault(require("classnames"));
-var prefix = settings_1.default.prefix;
 var ShapeNode = function (_a) {
     var _b;
     var _c = _a.as, as = _c === void 0 ? 'div' : _c, className = _a.className, _d = _a.href, href = _d === void 0 ? null : _d, _e = _a.onClick, onClick = _e === void 0 ? null : _e, _f = _a.onMouseEnter, onMouseEnter = _f === void 0 ? null : _f, _g = _a.onMouseOver, onMouseOver = _g === void 0 ? null : _g, _h = _a.onMouseOut, onMouseOut = _h === void 0 ? null : _h, _j = _a.onMouseLeave, onMouseLeave = _j === void 0 ? null : _j, _k = _a.onMouseMove, onMouseMove = _k === void 0 ? null : _k, _l = _a.position, position = _l === void 0 ? 'fixed' : _l, _m = _a.bodyPosition, bodyPosition = _m === void 0 ? 'absolute' : _m, renderIcon = _a.renderIcon, _o = _a.size, size = _o === void 0 ? 48 : _o, stacked = _a.stacked, _p = _a.shape, shape = _p === void 0 ? 'circle' : _p, subtitle = _a.subtitle, title = _a.title;
-    var namespace = prefix + "--cc--shape-node";
+    var namespace = configs_1.carbonPrefix + "--cc--shape-node";
     var Component = 'div';
     if (href) {
         Component = 'a';

package/dist/diagrams/configs.d.ts

@@ -0,0 +1 @@
+export declare const carbonPrefix = "cds";

package/dist/diagrams/configs.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.carbonPrefix = void 0;
+exports.carbonPrefix = 'cds';

package/dist/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@carbon/charts-react",
+  "version": "0.58.1",
+  "description": "Carbon charting components for React",
+  "main": "./bundle.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "scripts": {
+    "start": "yarn run storybook",
+    "build": "bash build.sh",
+    "format": "prettier . --write \"**/*.{scss,css,js,ts,tsx,md}\"",
+    "storybook": "start-storybook -p 9007 -c .storybook -s ./.storybook/assets",
+    "demo:build": "yarn build && build-storybook -o demo/bundle --quiet -s ./.storybook/assets",
+    "clean": "rm -rf dist demo/bundle",
+    "postinstall": "carbon-telemetry collect --install"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:carbon-design-system/carbon-charts.git",
+    "homepage": "https://carbon-design-system.github.io/carbon-charts/react/"
+  },
+  "license": "Apache-2.0",
+  "author": "IBM",
+  "keywords": [
+    "carbon",
+    "charts",
+    "react",
+    "dataviz",
+    "data-visualization",
+    "visualizations",
+    "d3",
+    "svg",
+    "component",
+    "components",
+    "css",
+    "html",
+    "ibm",
+    "typescript",
+    "javascript",
+    "js",
+    "library",
+    "pattern",
+    "patterns",
+    "sass",
+    "scss"
+  ],
+  "bugs": {
+    "url": "https://github.com/carbon-design-system/carbon-charts/issues"
+  },
+  "homepage": "https://github.com/carbon-design-system/carbon-charts#readme",
+  "dependencies": {
+    "@carbon/charts": "^0.58.1",
+    "@carbon/icons-react": "^10.49.0",
+    "@carbon/telemetry": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-knobs": "5.3.12",
+    "@storybook/addon-options": "5.3.12",
+    "@storybook/react": "5.3.12",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
+    "babel-cli": "6.26.0",
+    "babel-core": "6.26.0",
+    "babel-loader": "7.1.2",
+    "babel-plugin-external-helpers": "6.22.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-plugin-transform-react-jsx": "6.24.1",
+    "babel-preset-env": "1.6.1",
+    "babel-preset-react": "6.24.1",
+    "base64-inline-loader": "1.1.0",
+    "css-loader": "0.28.7",
+    "img-loader": "2.0.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "rollup": "1.27.10",
+    "rollup-plugin-commonjs": "10.1.0",
+    "rollup-plugin-node-resolve": "5.2.0",
+    "rollup-plugin-terser": "5.1.2",
+    "sass": "1.49.9",
+    "sass-loader": "8.0.0",
+    "style-loader": "0.19.0",
+    "typescript": "4.1.2",
+    "url-loader": "0.6.2"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "access": "public"
+  },
+  "maintainers": [
+    {
+      "name": "Eliad Moosavi",
+      "email": "iliadm@ca.ibm.com",
+      "url": "https://github.com/theiliad"
+    }
+  ],
+  "contributors": [
+    {
+      "name": "Eliad Moosavi",
+      "email": "iliadm@ca.ibm.com",
+      "url": "https://github.com/theiliad"
+    }
+  ]
+}

package/helpers/commons.js

@@ -0,0 +1,30 @@
+// Function to be used to randomize a value
+export const randomizeValue = (currentVal) => {
+	const firstTry = Math.max(
+		0.5 * currentVal,
+		currentVal * Math.random() * (Math.random() * 5)
+	);
+	const result =
+		currentVal > 0
+			? Math.min(2 * currentVal, firstTry)
+			: Math.max(2 * currentVal, firstTry);
+
+	return Math.floor(result);
+};
+
+export const colors = [
+	'#6e32c9',
+	'#1191e6',
+	'#006161',
+	'#a11950',
+	'#fb4b53',
+	'#570408',
+	'#198038',
+	'#003d73',
+	'#ee538b',
+	'#b28600',
+	'#009c98',
+	'#002b50',
+	'#8a3800',
+	'#a66efa',
+];