docs(@clayui/charts): adds chart documentation

packages/clay-charts/docs/charts.mdx

@@ -2,11 +2,19 @@
 title: 'Chart'
 description: 'Charts is a React wrapper around the Billboard.js library with a few additional charts provided.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/charts/'
+packageStatus: 'Deprecated'
 packageNpm: '@clayui/charts'
+packageUse: "import Chart from '@clayui/charts';"
 storybookPath: 'design-system-charts-react-billboard'
+packageTypes:
+    [
+        'clay-charts/src/index.tsx',
+        'clay-charts/src/GeoMap.tsx',
+        'clay-charts/src/Predictive.tsx',
+    ]
 ---
 
-<div class="clay-site-alert alert alert-warning">
+<div className="clay-site-alert alert alert-warning">
 	Charts in its current state will be deprecated soon in favor of a wrapper
 	around [Recharts](https://recharts.org/). See examples of charts built with
 	recharts on&nbsp;
@@ -15,6 +23,156 @@ storybookPath: 'design-system-charts-react-billboard'
 
 ## Basic
 
+```jsx preview
+import {Provider} from '@clayui/core';
+import Chart from '@clayui/charts';
+import React, {useState} from 'react';
+
+import '@clayui/css/lib/css/atlas.css';
+
+export default function App() {
+	const [active, setActive] = useState(false);
+
+	const COLUMNS = [
+		['data1', 100, 20, 30],
+		['data2', 20, 70, 100],
+	];
+	const COLUMNS_2 = [
+		['data1', 10, 50, 60],
+		['data2', 70, 30, 10],
+	];
+
+	return (
+		<Provider spritemap="/public/icons.svg">
+			<div className="p-4">
+				<button onClick={() => setActive((val) => !val)}>
+					Change Data
+				</button>
+
+				<Chart
+					data={{
+						columns: active ? COLUMNS : COLUMNS_2,
+						type: 'bar',
+					}}
+				/>
+			</div>
+		</Provider>
+	);
+}
+```
+
 ## GeoMap
 
+```jsx preview geo
+import {Provider} from '@clayui/core';
+import Chart from '@clayui/charts';
+import React from 'react';
+import mapData from './map.json';
+
+import '@clayui/css/lib/css/atlas.css';
+
+export default function App() {
+	return (
+		<Provider spritemap="/public/icons.svg">
+			<div className="p-4" style={{height: 380}}>
+				<Chart
+					color={{
+						range: {
+							max: '#0065e4',
+							min: '#b1d4ff',
+						},
+						selected: '#4b9bff',
+						value: 'gdp_md_est',
+					}}
+					data={{
+						...mapData,
+						type: 'geo-map',
+					}}
+				/>
+			</div>
+		</Provider>
+	);
+}
+```
+
 ## Predictive
+
+```jsx preview
+import {Provider} from '@clayui/core';
+import Chart from '@clayui/charts';
+import React from 'react';
+
+import '@clayui/css/lib/css/atlas.css';
+
+export default function App() {
+	return (
+		<Provider spritemap="/public/icons.svg">
+			<div className="p-4" style={{height: 380}}>
+				<Chart
+					axis={{
+						x: {
+							type: 'timeseries',
+						},
+					}}
+					data={{
+						columns: [
+							[
+								'x',
+								'2018-01-01',
+								'2018-02-01',
+								'2018-03-01',
+								'2018-04-01',
+								'2018-05-01',
+								'2018-06-01',
+								'2018-07-01',
+								'2018-08-01',
+								'2018-09-01',
+								'2018-10-01',
+								'2018-11-01',
+								'2018-12-01',
+							],
+							[
+								'product1',
+								130,
+								340,
+								200,
+								100,
+								40,
+								300,
+								{high: 240, low: 140, mid: 180},
+								{high: 380, low: 300, mid: 350},
+								{high: 480, low: 320, mid: 400},
+								{high: 260, low: 100, mid: 200},
+								{high: 140, low: 100, mid: 120},
+								{high: 180, low: 80, mid: 100},
+							],
+							[
+								'product2',
+								210,
+								180,
+								30,
+								90,
+								40,
+								120,
+								{high: 260, low: 180, mid: 240},
+								{high: 460, low: 360, mid: 420},
+								{high: 180, low: 80, mid: 120},
+								{high: 120, low: 60, mid: 80},
+								{high: 80, low: 10, mid: 20},
+								{high: 100, low: 20, mid: 60},
+							],
+						],
+						type: 'predictive',
+						types: {
+							product1: 'area-line-range',
+							product2: 'area-spline-range',
+						},
+						x: 'x',
+					}}
+					predictionDate="2018-06-01"
+				/>
+			</div>
+		</Provider>
+	);
+}
+```

www/app/_components/Sandpack.server.tsx

@@ -12,14 +12,30 @@ import styles from './sandpack.module.css';
 type Props = {
 	language: string;
 	children: any;
+	geo?: any;
 };
 
-export async function Sandpack({language, children}: Props) {
+export async function Sandpack({language, children, geo}: Props) {
 	const file = await fs.readFile(
 		process.cwd() + '/node_modules/@clayui/css/lib/images/icons/icons.svg',
 		'utf-8'
 	);
 
+	const files: Record<string, any> = {
+		'/public/icons.svg': file,
+		'/App.js': {
+			active: true,
+			code: children,
+		},
+	};
+
+	if (geo) {
+		files['/map.json'] = await fs.readFile(
+			process.cwd() + '/map.json',
+			'utf-8'
+		);
+	}
+
 	return (
 		<SandpackProvider
 			className={classNames('mb-4', styles.code_editor_open)}
@@ -42,6 +58,7 @@ export async function Sandpack({language, children}: Props) {
 					'@clayui/breadcrumb': 'latest',
 					'@clayui/card': 'latest',
 					'@clayui/color-picker': 'latest',
+					'@clayui/charts': 'latest',
 					'@clayui/date-picker': 'latest',
 					'@clayui/empty-state': 'latest',
 					'@clayui/link': 'latest',
@@ -67,13 +84,7 @@ export async function Sandpack({language, children}: Props) {
 					'@clayui/upper-toolbar': 'latest',
 				},
 			}}
-			files={{
-				'/public/icons.svg': file,
-				'/App.js': {
-					active: true,
-					code: children,
-				},
-			}}
+			files={files}
 			options={{
 				experimental_enableServiceWorker: true,
 			}}

www/data.ts

@@ -131,6 +131,7 @@ const PATHS = [
 	'toolbar',
 	'tooltip',
 	'upper-toolbar',
+	'charts',
 ];
 
 export const ComponentDocumentsCollection =