Add charts doc

mdbootstrap · May 21, 2020 · daa6647 · daa6647
1 parent e9c5a48
commit daa6647
Show file tree

Hide file tree

Showing 13 changed files with 654 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^5.1.2",
     "svelte": "^3.22.2",
+    "svelte-chartsjs": "^1.0.3",
     "svelte-loader": "^2.13.6"
   },
   "dependencies": {

diff --git a/stories/Charts/Bar.svelte b/stories/Charts/Bar.svelte
@@ -0,0 +1,66 @@
+<script>
+
+  import {MDBRow, MDBCol} from "mdbsvelte";
+  import Bar from "svelte-chartsjs/src/Bar.svelte"
+
+
+  let data = {
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [
+      {
+        label: "% of Votes",
+        data: [12, 19, 3, 5, 2, 3],
+        backgroundColor: [
+          "rgba(255, 134,159,0.4)",
+          "rgba(98,  182, 239,0.4)",
+          "rgba(255, 218, 128,0.4)",
+          "rgba(113, 205, 205,0.4)",
+          "rgba(170, 128, 252,0.4)",
+          "rgba(255, 177, 101,0.4)"
+        ],
+        borderWidth: 2,
+        borderColor: [
+          "rgba(255, 134, 159, 1)",
+          "rgba(98,  182, 239, 1)",
+          "rgba(255, 218, 128, 1)",
+          "rgba(113, 205, 205, 1)",
+          "rgba(170, 128, 252, 1)",
+          "rgba(255, 177, 101, 1)"
+        ]
+      }
+    ]
+  };
+
+  let options = {
+    responsive: true,
+    scales: {
+      xAxes: [
+        {
+          barPercentage: 1,
+          gridLines: {
+            display: true,
+            color: "rgba(0, 0, 0, 0.1)"
+          }
+        }
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: true,
+            color: "rgba(0, 0, 0, 0.1)"
+          },
+          ticks: {
+            beginAtZero: true
+          }
+        }
+      ]
+    }
+  }
+
+
+</script>
+<MDBRow>
+  <MDBCol md="8" class="mx-auto">
+    <Bar {data} {options} />
+  </MDBCol>
+</MDBRow>
diff --git a/stories/Charts/Basic.svelte b/stories/Charts/Basic.svelte
@@ -0,0 +1,60 @@
+<script>
+
+  import {MDBRow, MDBCol} from "mdbsvelte";
+  import Line from "svelte-chartsjs/src/Line.svelte"
+
+  let dataLine = {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "My First dataset",
+        fill: true,
+        lineTension: 0.3,
+        backgroundColor: "rgba(225, 204,230, .3)",
+        borderColor: "rgb(205, 130, 158)",
+        borderCapStyle: "butt",
+        borderDash: [],
+        borderDashOffset: 0.0,
+        borderJoinStyle: "miter",
+        pointBorderColor: "rgb(205, 130,1 58)",
+        pointBackgroundColor: "rgb(255, 255, 255)",
+        pointBorderWidth: 10,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "rgb(0, 0, 0)",
+        pointHoverBorderColor: "rgba(220, 220, 220,1)",
+        pointHoverBorderWidth: 2,
+        pointRadius: 1,
+        pointHitRadius: 10,
+        data: [65, 59, 80, 81, 56, 55, 40]
+      },
+      {
+        label: "My Second dataset",
+        fill: true,
+        lineTension: 0.3,
+        backgroundColor: "rgba(184, 185, 210, .3)",
+        borderColor: "rgb(35, 26, 136)",
+        borderCapStyle: "butt",
+        borderDash: [],
+        borderDashOffset: 0.0,
+        borderJoinStyle: "miter",
+        pointBorderColor: "rgb(35, 26, 136)",
+        pointBackgroundColor: "rgb(255, 255, 255)",
+        pointBorderWidth: 10,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "rgb(0, 0, 0)",
+        pointHoverBorderColor: "rgba(220, 220, 220, 1)",
+        pointHoverBorderWidth: 2,
+        pointRadius: 1,
+        pointHitRadius: 10,
+        data: [28, 48, 40, 19, 86, 27, 90]
+      }
+    ]
+  };
+
+
+</script>
+<MDBRow>
+  <MDBCol md="8" class="mx-auto">
+    <Line data={dataLine} options={{ responsive: true }}/>
+  </MDBCol>
+</MDBRow>
diff --git a/stories/Charts/BubbleChart.svelte b/stories/Charts/BubbleChart.svelte
@@ -0,0 +1,58 @@
+<script>
+
+  import {MDBRow, MDBCol} from "mdbsvelte";
+  import Bubble from "svelte-chartsjs/src/Bubble.svelte"
+
+  let data = {
+    labels: 'Bubble',
+    datasets: [
+      {
+        label: 'John',
+        data: [
+          {
+            x: 3,
+            y: 7,
+            r: 10
+          }
+        ],
+        backgroundColor: '#ff6384',
+        hoverBackgroundColor: '#ff6384'
+      },
+      {
+        label: 'Peter',
+        data: [
+          {
+            x: 3.2,
+            y: 7,
+            r: 10
+          }
+        ],
+        backgroundColor: '#44e4ee',
+        hoverBackgroundColor: '#44e4ee'
+      },
+      {
+        label: 'Donald',
+        data: [
+          {
+            x: 3.4,
+            y: 7,
+            r: 10
+          }
+        ],
+        backgroundColor: '#62088A',
+        hoverBackgroundColor: '#62088A'
+      }
+    ]
+  };
+
+  let options = {
+    responsive: true
+  }
+
+
+</script>
+<MDBRow>
+  <MDBCol md="8" class="mx-auto">
+    <Bubble {data} {options}/>
+  </MDBCol>
+</MDBRow>
diff --git a/stories/Charts/DoughnutChart.svelte b/stories/Charts/DoughnutChart.svelte
@@ -0,0 +1,33 @@
+<script>
+
+  import {MDBRow, MDBCol} from "mdbsvelte";
+  import Doughnut from "svelte-chartsjs/src/Doughnut.svelte"
+
+  let data = {
+    labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
+    datasets: [
+      {
+        data: [300, 50, 100, 40, 120],
+        backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
+        hoverBackgroundColor: [
+          "#FF5A5E",
+          "#5AD3D1",
+          "#FFC870",
+          "#A8B3C5",
+          "#616774"
+        ]
+      }
+    ]
+  };
+
+  let options = {
+    responsive: true
+  }
+
+
+</script>
+<MDBRow>
+  <MDBCol md="8" class="mx-auto">
+    <Doughnut {data} {options}/>
+  </MDBCol>
+</MDBRow>
diff --git a/stories/Charts/HorizontalBar.svelte b/stories/Charts/HorizontalBar.svelte
@@ -0,0 +1,46 @@
+<script>
+
+  import {MDBRow, MDBCol} from "mdbsvelte";
+  import HorizontalBar from "svelte-chartsjs/src/HorizontalBar.svelte"
+
+  let data = {
+    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Purple', 'Grey'],
+    datasets: [
+      {
+        label: 'My First Dataset',
+        data: [22, 33, 55, 12, 86, 23, 14],
+        fill: false,
+        backgroundColor: [
+          'rgba(255, 99, 132, 0.2)',
+          'rgba(255, 159, 64, 0.2)',
+          'rgba(255, 205, 86, 0.2)',
+          'rgba(75, 192, 192, 0.2)',
+          'rgba(54, 162, 235, 0.2)',
+          'rgba(153, 102, 255, 0.2)',
+          'rgba(201, 203, 207, 0.2)'
+        ],
+        borderColor: [
+          'rgb(255, 99, 132)',
+          'rgb(255, 159, 64)',
+          'rgb(255, 205, 86)',
+          'rgb(75, 192, 192)',
+          'rgb(54, 162, 235)',
+          'rgb(153, 102, 255)',
+          'rgb(201, 203, 207)'
+        ],
+        borderWidth: 1
+      }
+    ]
+  };
+
+  let options = {
+    responsive: true
+  }
+
+
+</script>
+<MDBRow>
+  <MDBCol md="8" class="mx-auto">
+    <HorizontalBar {data} {options}/>
+  </MDBCol>
+</MDBRow>
diff --git a/stories/Charts/Index.svelte b/stories/Charts/Index.svelte
@@ -0,0 +1,51 @@
+<script>
+  import Basic from "./Basic.svelte";
+  import BasicSource from "!!raw-loader!./Basic.svelte";
+  import RadarSource from "!!raw-loader!./Radar.svelte";
+  import HorizontalBarSource from "!!raw-loader!./HorizontalBar.svelte";
+  import PolarChartSource from "!!raw-loader!./PolarChart.svelte";
+  import BarSource from "!!raw-loader!./Bar.svelte";
+  import PieChartSource from "!!raw-loader!./PieChart.svelte";
+  import DoughnutChartSource from "!!raw-loader!./DoughnutChart.svelte";
+  import BubbleChartSource from "!!raw-loader!./BubbleChart.svelte";
+  import ScatterChartSource from "!!raw-loader!./ScatterChart.svelte";
+  import Example from "../Example.svelte";
+  import Title from "../Title.svelte";
+  import Radar from "./Radar.svelte";
+  import Bar from "./Bar.svelte";
+  import HorizontalBar from "./HorizontalBar.svelte";
+  import PolarChart from "./PolarChart.svelte";
+  import PieChart from "./PieChart.svelte";
+  import DoughnutChart from "./DoughnutChart.svelte";
+  import BubbleChart from "./BubbleChart.svelte";
+  import ScatterChart from "./ScatterChart.svelte";
+</script>
+<Title title="Chart">
+</Title>
+<Example source={BasicSource} title="Line Chart">
+  <Basic/>
+</Example>
+<Example source={RadarSource} title="Radar Chart">
+  <Radar />
+</Example>
+<Example source={BarSource} title="Bar Chart">
+  <Bar />
+</Example>
+<Example source={HorizontalBarSource} title="HorizontalBar Chart">
+  <HorizontalBar />
+</Example>
+<Example title="Polar Chart" source={PolarChartSource}>
+  <PolarChart />
+</Example>
+<Example title="Pie Chart" source={PieChartSource}>
+  <PieChart />
+</Example>
+<Example title="Doughnut Chart" source={DoughnutChartSource}>
+  <DoughnutChart />
+</Example>
+<Example title="Bubble Chart" source={BubbleChartSource}>
+  <BubbleChart />
+</Example>
+<Example title="Scatter Chart" source={ScatterChartSource}>
+  <ScatterChart />
+</Example>