carbon__charts-react-tests.tsx

import * as React from 'react';
import {
	MeterChartOptions,
	ScaleTypes,
	Statuses,
} from '@carbon/charts/interfaces';
import { LineChart, MeterChart } from './src';

const meterOptions: MeterChartOptions = {
	title: 'Meter Chart - with statuses',
	meter: {
		peak: 80,
		status: {
			ranges: [
				{ range: [0, 50], status: Statuses.SUCCESS },
				{ range: [50, 60], status: Statuses.WARNING },
				{ range: [60, 100], status: Statuses.DANGER },
			],
		},
	},
	height: '100px',
};

class App extends React.Component {
	ref: React.RefObject<LineChart> = React.createRef();

	state = {
		data: [
			{ group: 'Qty', value: 65000 },
			{ group: 'More', value: 29123 },
			{ group: 'Sold', value: 35213 },
			{ group: 'Restocking', value: 51213 },
			{ group: 'Misc', value: 16932 },
		],
	};

	componentDidMount() {
		this.setState({ data: [] });
	}

	render() {
		if (this.ref != null) {
			console.log(this.ref.current.data);
		}

		return (
			<>
				<LineChart
					ref={this.ref}
					data={this.state.data}
					options={{
						title: 'Line (discrete)',
						axes: {
							bottom: {
								title: '2019 Annual Sales Figures',
								mapsTo: 'key',
								scaleType: ScaleTypes.LABELS,
							},
							left: {
								mapsTo: 'value',
								title: 'Conversion rate',
								scaleType: ScaleTypes.LABELS,
							},
						},
						color: {
							scale: {
								'Dataset 1': '#925699',
								'Dataset 2': '#525669',
								'Dataset 3': '#725699',
								'Dataset 4': '#ccc',
							},
						},
						height: '400px',
					}}
				/>
				<MeterChart
					options={meterOptions}
					data={[{ group: 'Dataset 1', value: 56 }]}
				/>
			</>
		);
	}
}