Add chartjs installation

package.json

@@ -51,7 +51,7 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^5.1.2",
     "svelte": "^3.22.2",
-    "svelte-chartsjs": "^1.0.3",
+    "svelte-chartjs": "^1.0.0",
     "svelte-loader": "^2.13.6"
   },
   "dependencies": {

stories/Charts/Bar.svelte

@@ -1,7 +1,7 @@
 <script>
 
   import {MDBRow, MDBCol} from "mdbsvelte";
-  import Bar from "svelte-chartsjs/src/Bar.svelte"
+  import Bar from "svelte-chartjs/src/Bar.svelte"
 
 
   let data = {

stories/Charts/Basic.svelte

@@ -1,7 +1,7 @@
 <script>
 
   import {MDBRow, MDBCol} from "mdbsvelte";
-  import Line from "svelte-chartsjs/src/Line.svelte"
+  import Line from "svelte-chartjs/src/Line.svelte"
 
   let dataLine = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],

stories/Charts/BubbleChart.svelte

@@ -1,7 +1,7 @@
 <script>
 
   import {MDBRow, MDBCol} from "mdbsvelte";
-  import Bubble from "svelte-chartsjs/src/Bubble.svelte"
+  import Bubble from "svelte-chartjs/src/Bubble.svelte"
 
   let data = {
     labels: 'Bubble',

stories/Charts/DoughnutChart.svelte

@@ -1,7 +1,7 @@
 <script>
 
   import {MDBRow, MDBCol} from "mdbsvelte";
-  import Doughnut from "svelte-chartsjs/src/Doughnut.svelte"
+  import Doughnut from "svelte-chartjs/src/Doughnut.svelte"
 
   let data = {
     labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],

stories/Charts/HorizontalBar.svelte

@@ -1,7 +1,7 @@
 <script>
 
   import {MDBRow, MDBCol} from "mdbsvelte";
-  import HorizontalBar from "svelte-chartsjs/src/HorizontalBar.svelte"
+  import HorizontalBar from "svelte-chartjs/src/HorizontalBar.svelte"
 
   let data = {
     labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Purple', 'Grey'],

stories/Charts/Installation.svelte

@@ -0,0 +1,24 @@
+<script>
+  import MDBContainer from "../../src/MDBContainer.svelte";
+  import MDBRow from "../../src/MDBRow.svelte";
+  import MDBCol from "../../src/MDBCol.svelte";
+  import Example from "../Example.svelte";
+  import MDBBtn from "../../src/MDBBtn.svelte";
+
+</script>
+<MDBContainer>
+  <h1 class="primary-heading text-center">svelte-chartjs</h1>
+  <h4 class="text-center h4 m-5">This package is separate from mdbsvelte. It's a wrapper of <a href="https://www.chartjs.org/"
+                                                                                       target="_blank">chart.js</a></h4>
+  <h1 class="h1">Installation</h1>
+  <MDBRow>
+    <MDBCol>
+      <Example source="npm i svelte-chartjs" title="npm"/>
+    </MDBCol>
+    <MDBCol>
+      <Example source="yarn add svelte-chartjs" title="yarn"/>
+    </MDBCol>
+  </MDBRow>
+  <h4 class="h4 mt-5 mb-5">Checkout Examples to see detailed usage</h4>
+  <MDBBtn href="/?path=/story/charts--examples" >Examples</MDBBtn>
+</MDBContainer>

stories/Charts/PieChart.svelte

@@ -1,7 +1,7 @@
 <script>
 
   import {MDBRow, MDBCol} from "mdbsvelte";
-  import Pie from "svelte-chartsjs/src/Pie.svelte"
+  import Pie from "svelte-chartjs/src/Pie.svelte"
 
   let data = {
     labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],

stories/Charts/PolarChart.svelte

@@ -1,7 +1,7 @@
 <script>
 
   import {MDBRow, MDBCol} from "mdbsvelte";
-  import Polar from "svelte-chartsjs/src/Polar.svelte"
+  import Polar from "svelte-chartjs/src/Polar.svelte"
 
   let data = {
     datasets: [

stories/Charts/Radar.svelte

@@ -1,7 +1,7 @@
 <script>
 
   import {MDBRow, MDBCol} from "mdbsvelte";
-  import Radar from "svelte-chartsjs/src/Radar.svelte"
+  import Radar from "svelte-chartjs/src/Radar.svelte"
 
   let dataRadar= {
     labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],

stories/Charts/ScatterChart.svelte

@@ -1,7 +1,7 @@
 <script>
 
   import {MDBRow, MDBCol} from "mdbsvelte";
-  import Scatter from "svelte-chartsjs/src/Scatter.svelte"
+  import Scatter from "svelte-chartjs/src/Scatter.svelte"
 
   let data = {
     labels: ['Scatter'],

stories/index.stories.js

@@ -23,7 +23,8 @@ import Tables from './Tables/Index.svelte';
 import DataTable from './DataTable/Index.svelte';
 import Modal from './Modals/Index.svelte';
 import Breadcrumb from './Breadcrumb/Index.svelte';
-import Chart from './Charts/Index.svelte';
+import ChartInstallation from './Charts/Installation.svelte';
+import ChartUsage from './Charts/Index.svelte';
 
 const story = Component => () => ({
   Component
@@ -70,4 +71,5 @@ storiesOf('Content', module)
   .add('Icons List', story(Icon));
 
 storiesOf('Charts', module)
-  .add('Chart', story(Chart));
+  .add('Installation', story(ChartInstallation))
+  .add('Examples', story(ChartUsage));