From cb718f16942e2db002ff2071d2c1f525a6acd264 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 1 Jan 2019 22:36:31 +0300
Subject: [PATCH] Implemented Chart Component

---
 src/AppMenu.vue                        |   5 +
 src/router.js                          |  25 ++++
 src/views/chart/BarChartDemo.vue       | 160 +++++++++++++++++++++++++
 src/views/chart/ComboChartDemo.vue     |   6 +-
 src/views/chart/DoughnutChartDemo.vue  |  41 +++++++
 src/views/chart/LineChartDemo.vue      | 113 +++++++++++++++++
 src/views/chart/PieChartDemo.vue       |   6 +-
 src/views/chart/PolarAreaChartDemo.vue |  49 ++++++++
 src/views/chart/RadarChartDemo.vue     |  48 ++++++++
 9 files changed, 447 insertions(+), 6 deletions(-)
 create mode 100644 src/views/chart/BarChartDemo.vue
 create mode 100644 src/views/chart/DoughnutChartDemo.vue
 create mode 100644 src/views/chart/LineChartDemo.vue
 create mode 100644 src/views/chart/PolarAreaChartDemo.vue
 create mode 100644 src/views/chart/RadarChartDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 41f8dcb91..5a18aaecc 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -109,6 +109,11 @@
                 <div>
                     <router-link to="/chart">&#9679; ChartModel</router-link>
                     <router-link to="/chart/pie">&#9679; Pie</router-link>
+                    <router-link to="/chart/doughnut">&#9679; Doughnut</router-link>
+                    <router-link to="/chart/bar">&#9679; Bar</router-link>
+                    <router-link to="/chart/line">&#9679; Line</router-link>
+                    <router-link to="/chart/polararea">&#9679; PolarArea</router-link>
+                    <router-link to="/chart/radar">&#9679; Radar</router-link>
                     <router-link to="/chart/combo">&#9679; Combo</router-link>
                 </div>
             </div>
diff --git a/src/router.js b/src/router.js
index 0542cee88..c0176fbca 100644
--- a/src/router.js
+++ b/src/router.js
@@ -31,16 +31,41 @@ export default new Router({
         name: 'chart',
         component: () => import('./views/chart/ChartDemo.vue')
     },
+    {
+        path: '/chart/bar',
+        name: 'barchart',
+        component: () => import('./views/chart/BarChartDemo.vue')
+    },
     {
         path: '/chart/combo',
         name: 'combochart',
         component: () => import('./views/chart/ComboChartDemo.vue')
     },
+    {
+        path: '/chart/doughnut',
+        name: 'doughnutchart',
+        component: () => import('./views/chart/DoughnutChartDemo.vue')
+    },
+    {
+        path: '/chart/line',
+        name: 'linechart',
+        component: () => import('./views/chart/LineChartDemo.vue')
+    },
     {
         path: '/chart/pie',
         name: 'piechart',
         component: () => import('./views/chart/PieChartDemo.vue')
     },
+    {
+        path: '/chart/polararea',
+        name: 'polarareachart',
+        component: () => import('./views/chart/PolarAreaChartDemo.vue')
+    },
+    {
+        path: '/chart/radar',
+        name: 'radarchart',
+        component: () => import('./views/chart/RadarChartDemo.vue')
+    },
     {
         path: '/checkbox',
         name: 'checkbox',
diff --git a/src/views/chart/BarChartDemo.vue b/src/views/chart/BarChartDemo.vue
new file mode 100644
index 000000000..73484f85e
--- /dev/null
+++ b/src/views/chart/BarChartDemo.vue
@@ -0,0 +1,160 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>BarChart</h1>
+                <p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="vertical">Vertical</h3>
+            <Chart type="bar" :data="basicData" />
+
+            <h3>Horizontal</h3>
+            <Chart type="horizontalBar" :data="basicData" />
+
+            <h3>Multi Axis</h3>
+            <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
+
+            <h3>Stacked</h3>
+            <Chart type="bar" :data="stackedData" :options="stackedOptions"/>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            basicData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                    {
+                        label: 'My First dataset',
+                        backgroundColor: '#42A5F5',
+                        data: [65, 59, 80, 81, 56, 55, 40]
+                    },
+                    {
+                        label: 'My Second dataset',
+                        backgroundColor: '#9CCC65',
+                        data: [28, 48, 40, 19, 86, 27, 90]
+                    }
+                ]    
+            },
+            multiAxisData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    label: 'Dataset 1',
+                    backgroundColor: [
+                        '#EC407A',
+                        '#AB47BC',
+                        '#42A5F5',
+                        '#7E57C2',
+                        '#66BB6A',
+                        '#FFCA28',
+                        '#26A69A'
+                    ],
+                    yAxisID: 'y-axis-1',
+                    data: [65, 59, 80, 81, 56, 55, 10]
+                }, {
+                    label: 'Dataset 2',
+                    backgroundColor: '#78909C',
+                    yAxisID: 'y-axis-2',
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }]
+            },
+            multiAxisOptions: {
+                responsive: true,
+                tooltips: {
+                    mode: 'index',
+                    intersect: true
+                },
+                scales: {
+                    yAxes: [{
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        id: 'y-axis-1',
+                        ticks: {
+                            min: 0,
+                            max: 100
+                        }
+                    }, 
+                    {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        id: 'y-axis-2',
+                        gridLines: {
+                            drawOnChartArea: false
+                        },
+                        ticks: {
+                            min: 0,
+                            max: 100
+                        }
+                    }]
+                }
+            },
+            stackedData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    type: 'bar',
+                    label: 'Dataset 1',
+                    backgroundColor: '#66BB6A',
+                    data: [
+                        50,
+                        25,
+                        12,
+                        48,
+                        90,
+                        76,
+                        42
+                    ]
+                }, {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: '#FFCA28',
+                    data: [
+                        21,
+                        84,
+                        24,
+                        75,
+                        37,
+                        65,
+                        34
+                    ]
+                }, {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: '#42A5F5',
+                    data: [
+                        41,
+                        52,
+                        24,
+                        74,
+                        23,
+                        21,
+                        32
+                    ]
+                }]
+            },
+            stackedOptions: {
+                tooltips: {
+                    mode: 'index',
+                    intersect: false
+                },
+                responsive: true,
+                scales: {
+                    xAxes: [{
+                        stacked: true,
+                    }],
+                    yAxes: [{
+                        stacked: true
+                    }]
+                }
+            }
+        }
+    }
+}
+</script>
diff --git a/src/views/chart/ComboChartDemo.vue b/src/views/chart/ComboChartDemo.vue
index 17e86ec3c..092b4abee 100644
--- a/src/views/chart/ComboChartDemo.vue
+++ b/src/views/chart/ComboChartDemo.vue
@@ -2,13 +2,13 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>ComboChart</h1>
+                <h1>Combo Chart</h1>
                 <p>Different chart types can be combined in the same graph.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <Chart type="bar" :data="chartModel" :options="chartOptions"/>
+            <Chart type="bar" :data="chartData" :options="chartOptions"/>
         </div>
     </div>
 </template>
@@ -17,7 +17,7 @@
 export default {
     data() {
         return {
-            chartModel: {
+            chartData: {
                 labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                 datasets: [{
                     type: 'line',
diff --git a/src/views/chart/DoughnutChartDemo.vue b/src/views/chart/DoughnutChartDemo.vue
new file mode 100644
index 000000000..f5173dbe0
--- /dev/null
+++ b/src/views/chart/DoughnutChartDemo.vue
@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>DoughnutChart</h1>
+                <p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Chart type="doughnut" :data="chartData" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: {
+                labels: ['A','B','C'],
+                datasets: [
+                    {
+                        data: [300, 50, 100],
+                        backgroundColor: [
+                            "#FF6384",
+                            "#36A2EB",
+                            "#FFCE56"
+                        ],
+                        hoverBackgroundColor: [
+                            "#FF6384",
+                            "#36A2EB",
+                            "#FFCE56"
+                        ]
+                    }
+                ]    
+            }
+        }
+    }
+}
+</script>
diff --git a/src/views/chart/LineChartDemo.vue b/src/views/chart/LineChartDemo.vue
new file mode 100644
index 000000000..83bc293b6
--- /dev/null
+++ b/src/views/chart/LineChartDemo.vue
@@ -0,0 +1,113 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Line Chart</h1>
+                <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <Chart type="line" :data="basicData" />
+
+            <h3>Multi Axis</h3>
+            <Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
+
+            <h3>Line Styles</h3>
+            <Chart type="line" :data="lineStylesData" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            basicData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                    {
+                        label: 'First Dataset',
+                        data: [65, 59, 80, 81, 56, 55, 40],
+                        fill: false,
+                        backgroundColor: '#2f4860',
+                        borderColor: '#2f4860'
+                    },
+                    {
+                        label: 'Second Dataset',
+                        data: [28, 48, 40, 19, 86, 27, 90],
+                        fill: false,
+                        backgroundColor: '#00bb7e',
+                        borderColor: '#00bb7e'
+                    }
+                ]
+            },
+            multiAxisData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    label: 'Dataset 1',
+                    fill: false,
+                    backgroundColor: '#2f4860',
+                    borderColor: '#2f4860',
+                    yAxisID: 'y-axis-1',
+                    data: [65, 59, 80, 81, 56, 55, 10]
+                }, {
+                    label: 'Dataset 2',
+                    fill: false,
+                    backgroundColor: '#00bb7e',
+                    borderColor: '#00bb7e',
+                    yAxisID: 'y-axis-2',
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }]
+            },
+            multiAxisOptions: {
+                responsive: true,
+                hoverMode: 'index',
+                stacked: false,
+                scales: {
+                    yAxes: [{
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        id: 'y-axis-1',
+                    }, {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        id: 'y-axis-2',
+                        gridLines: {
+                            drawOnChartArea: false
+                        }
+                    }]
+                }
+            },
+            lineStylesData: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [
+                    {
+                        label: 'First Dataset',
+                        data: [65, 59, 80, 81, 56, 55, 40],
+                        fill: false,
+                        borderColor: '#42A5F5'
+                    },
+                    {
+                        label: 'Second Dataset',
+                        data: [28, 48, 40, 19, 86, 27, 90],
+                        fill: false,
+                        borderDash: [5, 5],
+                        borderColor: '#66BB6A'
+                    },
+                    {
+                        label: 'Third Dataset',
+                        data: [12, 51, 62, 33, 21, 62, 45],
+                        fill: true,
+                        borderColor: '#FFA726',
+                        backgroundColor: '#FFCC80'
+                    }
+                ]   
+            }
+        }
+    }
+}
+</script>
diff --git a/src/views/chart/PieChartDemo.vue b/src/views/chart/PieChartDemo.vue
index b144938ab..d53778063 100644
--- a/src/views/chart/PieChartDemo.vue
+++ b/src/views/chart/PieChartDemo.vue
@@ -2,13 +2,13 @@
     <div>
         <div class="content-section introduction">
             <div class="feature-intro">
-                <h1>PieChart</h1>
+                <h1>Pie Chart</h1>
                 <p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <Chart type="pie" :data="chartModel" />
+            <Chart type="pie" :data="chartData" />
         </div>
     </div>
 </template>
@@ -17,7 +17,7 @@
 export default {
     data() {
         return {
-            chartModel: {
+            chartData: {
                 labels: ['A','B','C'],
                 datasets: [
                     {
diff --git a/src/views/chart/PolarAreaChartDemo.vue b/src/views/chart/PolarAreaChartDemo.vue
new file mode 100644
index 000000000..d04cc1810
--- /dev/null
+++ b/src/views/chart/PolarAreaChartDemo.vue
@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Polar Area Chart</h1>
+                <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Chart type="polarArea" :data="chartData" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: {
+                datasets: [{
+                    data: [
+                        11,
+                        16,
+                        7,
+                        3,
+                        14
+                    ],
+                    backgroundColor: [
+                        "#FF6384",
+                        "#4BC0C0",
+                        "#FFCE56",
+                        "#E7E9ED",
+                        "#36A2EB"
+                    ],
+                    label: 'My dataset'
+                }],
+                labels: [
+                    "Red",
+                    "Green",
+                    "Yellow",
+                    "Grey",
+                    "Blue"
+                ]
+            }
+        }
+    }
+}
+</script>
diff --git a/src/views/chart/RadarChartDemo.vue b/src/views/chart/RadarChartDemo.vue
new file mode 100644
index 000000000..9fcfd4d90
--- /dev/null
+++ b/src/views/chart/RadarChartDemo.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Radar Chart</h1>
+                <p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Chart type="radar" :data="chartData" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            chartData: {
+                labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+                datasets: [
+                    {
+                        label: 'My First dataset',
+                        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)',
+                        data: [65, 59, 90, 81, 56, 55, 40]
+                    },
+                    {
+                        label: 'My Second dataset',
+                        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)',
+                        data: [28, 48, 40, 19, 96, 27, 100]
+                    }
+                ]
+            }
+        }
+    }
+}
+</script>