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

package/dist/README.md

@@ -1,56 +0,0 @@
-# `@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/dist/package.json

@@ -1,107 +0,0 @@
-{
-  "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

@@ -1,30 +0,0 @@
-// 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',
-];

package/rollup.config.js

@@ -1,18 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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>
-		);
-	}
-}