From d424a1a76e11e5f938451738b398c74685e4bb65 Mon Sep 17 00:00:00 2001
From: SauravKanchan <sauravnk30@gmail.com>
Date: Fri, 22 May 2020 12:35:44 +0530
Subject: [PATCH] update charts docs

---
 stories/Charts/CustomSize.svelte   |  6 ++++++
 stories/Charts/Installation.svelte | 21 ++++++++++++++++++---
 stories/Charts/Usage.svelte        |  4 ++++
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 stories/Charts/CustomSize.svelte
 create mode 100644 stories/Charts/Usage.svelte

diff --git a/stories/Charts/CustomSize.svelte b/stories/Charts/CustomSize.svelte
new file mode 100644
index 0000000..f655632
--- /dev/null
+++ b/stories/Charts/CustomSize.svelte
@@ -0,0 +1,6 @@
+<Bar
+  data={data}
+  width={100}
+  height={50}
+  options={{ maintainAspectRatio: false }}
+/>
diff --git a/stories/Charts/Installation.svelte b/stories/Charts/Installation.svelte
index 98da8a8..4b46750 100644
--- a/stories/Charts/Installation.svelte
+++ b/stories/Charts/Installation.svelte
@@ -4,12 +4,22 @@
   import MDBCol from "../../src/MDBCol.svelte";
   import Example from "../Example.svelte";
   import MDBBtn from "../../src/MDBBtn.svelte";
+  import UsageSource from "!!raw-loader!./Usage.svelte";
+  import CustomSizeSource from "!!raw-loader!./CustomSize.svelte";
+  import MDBIcon from "../../src/MDBIcon.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>
+  <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>
+  <MDBBtn color="dark" size="lg" href="https://github.com/SauravKanchan/svelte-chartjs" target="_blank">
+    <MDBIcon fab icon="github" size="2x" class="ml-1"/>
+  </MDBBtn>
+  </h4>
+
+
   <h1 class="h1">Installation</h1>
   <MDBRow>
     <MDBCol>
@@ -19,6 +29,11 @@
       <Example source="yarn add svelte-chartjs" title="yarn"/>
     </MDBCol>
   </MDBRow>
+  <h1 class="h1">Usage</h1>
+  <Example source={UsageSource}/>
+  <Example title="Custom size"
+           source={CustomSizeSource}
+           description="In order for Chart.js to obey the custom size you need to set <code>maintainAspectRatio</code> to false, example:"/>
   <h4 class="h4 mt-5 mb-5">Checkout Examples to see detailed usage</h4>
-  <MDBBtn href="/?path=/story/charts--examples" >Examples</MDBBtn>
+  <MDBBtn href="/?path=/story/charts--examples">Examples</MDBBtn>
 </MDBContainer>
diff --git a/stories/Charts/Usage.svelte b/stories/Charts/Usage.svelte
new file mode 100644
index 0000000..c3fed6c
--- /dev/null
+++ b/stories/Charts/Usage.svelte
@@ -0,0 +1,4 @@
+<script>
+  import Line from "svelte-chartjs/src/Line.svelte"
+</script>
+<Line data={...} />