docs: Readme and Changelog update

xidedix · xidedix · commit 434812886694 · 2020-05-28T15:20:12.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,33 @@
 ### [@coreui/react-chartjs](https://coreui.io/) changelog
 
+##### `1.0.0-alpha.4`
+BREAKING CHANGE:
+- `<CCharts>` component has been deprecated and will be removed in v1.0.0
+- use `<CChart type="...">` instead   
+or one of following types:   
+  `<CChartBar>`  
+  `<CChartHorizontalBar>`  
+  `<CChartLine>`  
+  `<CChartDoughnut>`  
+  `<CChartRadar>`  
+  `<CChartPie>`  
+  `<CChartPolarArea>`  
+
+sample import:
+```jsx
+import {
+  CChart,
+  CChartBar,
+  CChartHorizontalBar,
+  CChartLine,
+  CChartDoughnut,
+  CChartRadar,
+  CChartPie,
+  CChartPolarArea
+} from '@coreui/react-chartjs';
+```
+
+
 ##### `1.0.0-alpha.0`
 - initial version
 
@@ -9,56 +37,3 @@ npm install @coreui/react
 npm install @coreui/react-chartjs 
 ```
 
-import: 
-```jsx
-import { CCharts } from '@coreui/react-chartjs';
-```
-
-usage:
-```jsx
-...
-class CoreUICharts extends Component {
-...
-render() {
-    return (
-      <CCharts
-        type="radar"
-        datasets={[
-          {
-            label: '2019',
-            backgroundColor: 'rgba(179,181,198,0.2)',
-            borderColor: 'rgba(179,181,198,1)',
-            pointBackgroundColor: 'rgba(179,181,198,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(179,181,198,1)',
-            tooltipLabelColor: 'rgba(179,181,198,1)',
-            data: [65, 59, 90, 81, 56, 55, 40]
-          },
-          {
-            label: '2020',
-            backgroundColor: 'rgba(255,99,132,0.2)',
-            borderColor: 'rgba(255,99,132,1)',
-            pointBackgroundColor: 'rgba(255,99,132,1)',
-            pointBorderColor: '#fff',
-            pointHoverBackgroundColor: '#fff',
-            pointHoverBorderColor: 'rgba(255,99,132,1)',
-            tooltipLabelColor: 'rgba(255,99,132,1)',
-            data: [28, 48, 40, 19, 96, 27, 100]
-          }
-        ]}
-        options={{
-          aspectRatio: 1.5,
-          tooltips: {
-            enabled: true
-          }
-        }}
-        labels={[
-          'Eating', 'Drinking', 'Sleeping', 'Designing',
-          'Coding', 'Cycling', 'Running'
-        ]}
-      />
-    )
-}
-...
-```
diff --git a/README.md b/README.md
@@ -14,8 +14,29 @@ npm install @coreui/react-chartjs
 
 ##### import: 
 ```jsx
-import { CCharts } from '@coreui/react-chartjs';
+import { CChart } from '@coreui/react-chartjs';
 ```
+or 
+```js
+import {
+  CChart,
+  CChartBar,
+  CChartHorizontalBar,
+  CChartLine,
+  CChartDoughnut,
+  CChartRadar,
+  CChartPie,
+  CChartPolarArea,
+} from '@coreui/react-chartjs'
+```
+
+props:  
+- `innerRef` object | func | string
+- `datasets` array  
+- `labels` array | string  
+- `options` object  
+- `plugins` array  
+- `type` string: `bar` | `horizontalBar` | `line` | `doughnut` | `radar` | `pie` | `polarArea`
 
 ##### usage:
 ```jsx
@@ -24,7 +45,7 @@ class CoreUICharts extends Component {
 ...
 render() {
     return (
-      <CCharts
+      <CChart
         type="radar"
         datasets={[
           {
