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

package/package.json

@@ -1,107 +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 9006 -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.25.0",
-    "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"
-    }
-  ]
-}
+	"name": "@carbon/charts-react",
+	"version": "0.59.0-beta.0",
+	"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"
+	},
+	"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.59.0-beta.0",
+		"@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"
+		}
+	],
+	"gitHead": "0149f808eb1b1c704804c137449cb4be3d47db75"
+}

package/rollup.config.js

@@ -0,0 +1,18 @@
+import { terser } from 'rollup-plugin-terser';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+
+export default {
+	input: './dist/index.js',
+	output: {
+		file: './dist/bundle.js',
+		format: 'umd',
+		name: 'ChartsReact',
+		globals: {
+			'@carbon/charts': 'Charts',
+			react: 'React',
+		},
+	},
+	plugins: [terser(), resolve(), commonjs()],
+	external: ['react', 'react-dom', '@carbon/charts'],
+};

package/src/alluvial-chart.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { AlluvialChart as AC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, AlluvialChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type AlluvialChartProps = ChartConfig<AlluvialChartOptions>;
+
+export default class AlluvialChart extends BaseChart<AlluvialChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: AlluvialChartProps;
+	chart!: AC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new AC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/area-chart-stacked.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StackedAreaChart as SAC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import {
+	ChartConfig,
+	StackedAreaChartOptions,
+} from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type StackedAreaChartProps = ChartConfig<StackedAreaChartOptions>;
+
+export default class StackedAreaChart extends BaseChart<StackedAreaChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: StackedAreaChartProps;
+	chart!: SAC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new SAC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/area-chart.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { AreaChart as AC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, AreaChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type AreaChartProps = ChartConfig<AreaChartOptions>;
+
+export default class AreaChart extends BaseChart<AreaChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: AreaChartProps;
+	chart!: AC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new AC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/bar-chart-grouped.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { GroupedBarChart as GBC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, BarChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type GroupedBarChartProps = ChartConfig<BarChartOptions>;
+
+export default class GroupedBarChart extends BaseChart<BarChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: GroupedBarChartProps;
+	chart!: GBC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new GBC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/bar-chart-simple.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { SimpleBarChart as SBC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, BarChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type SimpleBarChartProps = ChartConfig<BarChartOptions>;
+
+export default class SimpleBarChart extends BaseChart<BarChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: SimpleBarChartProps;
+	chart!: SBC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new SBC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/bar-chart-stacked.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StackedBarChart as SBC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, StackedBarChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type StackedBarChartProps = ChartConfig<StackedBarChartOptions>;
+
+export default class StackedBarChart extends BaseChart<StackedBarChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: StackedBarChartProps;
+	chart!: SBC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new SBC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/base-chart.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Chart as BaseChartType } from '@carbon/charts/chart';
+import { ChartTabularData, BaseChartOptions } from '@carbon/charts/interfaces';
+
+type Props<Options> = { options?: Options; data?: ChartTabularData };
+
+export default class BaseChart<
+	Options = BaseChartOptions
+> extends React.Component<Props<Options>> {
+	data: ChartTabularData | [];
+	options: Options | {};
+	props!: Props<Options>;
+	chart!: BaseChartType;
+
+	constructor(props: Props<Options>) {
+		super(props);
+
+		const { options, data } = props;
+
+		if (!options) {
+			console.error('Missing options!');
+		}
+
+		if (!data) {
+			console.error('Missing data!');
+		}
+
+		this.data = props.data || [];
+		this.options = props.options || {};
+
+		Object.assign(this, this.chart);
+	}
+
+	shouldComponentUpdate(nextProps: Props<Options>) {
+		return (
+			this.props.data !== nextProps.data ||
+			this.props.options !== nextProps.options
+		);
+	}
+
+	componentDidUpdate() {
+		this.chart.model.setData(this.props.data);
+		this.chart.model.setOptions(this.props.options);
+	}
+}

package/src/boxplot-chart.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BoxplotChart as BC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, BoxplotChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type BoxplotChartProps = ChartConfig<BoxplotChartOptions>;
+
+export default class BoxplotChart extends BaseChart<BoxplotChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: BoxplotChartProps;
+	chart!: BC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new BC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/bubble-chart.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BubbleChart as BC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, BubbleChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type BubbleChartProps = ChartConfig<BubbleChartOptions>;
+
+export default class BubbleChart extends BaseChart<BubbleChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: BubbleChartProps;
+	chart!: BC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new BC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/bullet-chart.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BulletChart as BC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, BulletChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type BulletChartProps = ChartConfig<BulletChartOptions>;
+
+export default class BulletChart extends BaseChart<BulletChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: BulletChartProps;
+	chart!: BC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new BC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/circle-pack-chart.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { CirclePackChart as CPC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, CirclePackChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type CirclePackChartProps = ChartConfig<CirclePackChartOptions>;
+
+export default class CirclePackChart extends BaseChart<CirclePackChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: CirclePackChartProps;
+	chart!: CPC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new CPC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}

package/src/combo-chart.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ComboChart as CC } from '@carbon/charts';
+import BaseChart from './base-chart';
+import { ChartConfig, ComboChartOptions } from '@carbon/charts/interfaces';
+import { hasChartBeenInitialized } from './utils';
+
+type ComboChartProps = ChartConfig<ComboChartOptions>;
+
+export default class ComboChart extends BaseChart<ComboChartOptions> {
+	chartRef!: HTMLDivElement;
+	props!: ComboChartProps;
+	chart!: CC;
+
+	componentDidMount() {
+		if (hasChartBeenInitialized(this.chartRef) === false) {
+			this.chart = new CC(this.chartRef, {
+				data: this.props.data,
+				options: this.props.options,
+			});
+		}
+	}
+
+	render() {
+		return (
+			<div
+				ref={(chartRef) => (this.chartRef = chartRef!)}
+				className="chart-holder"></div>
+		);
+	}
+}