From 048c2563e7b7078e108bed72ab0c2165041c2432 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 23 May 2019 15:41:45 +0300
Subject: [PATCH] Add select event to Chart and updated docs

---
 src/assets/styles/app.scss     |  4 +--
 src/components/chart/Chart.vue | 17 +++++++++-
 src/views/chart/ChartDoc.vue   | 61 ++++++++++++++++++++++++++++++++--
 3 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index af39fb25b..0c2e4b5f8 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -674,14 +674,14 @@ body {
 
             th {
                 background-color: #d6dade;
-                padding: 8px 14px;
+                padding: 10px 14px;
                 text-align: left;
                 border: solid 1px #d6dade;
             }
 
             tbody{
                 td {
-                    padding: 8px 14px;
+                    padding: 10px 14px;
                     border: 1px solid #eaecee;
                 }
 
diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
index c47874ba4..0b246b3da 100644
--- a/src/components/chart/Chart.vue
+++ b/src/components/chart/Chart.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-chart">
-        <canvas ref="canvas" :width="width" :height="height"></canvas>
+        <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)"></canvas>
     </div>
 </template>
 
@@ -60,6 +60,21 @@ export default {
                 this.chart.destroy();
                 this.initChart();
             }
+        },
+        onCanvasClick(event) {
+            if (this.chart) {
+                const element = this.chart.getElementAtEvent(event);
+                const dataset = this.chart.getDatasetAtEvent(event);
+
+                if (element && element[0] && dataset) {
+                    this.emit('select', {originalEvent: event, element: element[0], dataset: dataset});
+                }
+            }
+        },
+        generateLegend() {
+            if (this.chart) {
+                return this.chart.generateLegend();
+            }
         }
     }
 }
diff --git a/src/views/chart/ChartDoc.vue b/src/views/chart/ChartDoc.vue
index 2a4eed2b1..0cb53c6b1 100644
--- a/src/views/chart/ChartDoc.vue
+++ b/src/views/chart/ChartDoc.vue
@@ -12,10 +12,10 @@ import Chart from 'primevue/chart';
 </CodeHighlight>
 
 		<h3>Chart Types</h3>
-		<p>Chart type is defined using the <i>type</i> property. Currently there are 6 options available; "pie", "doughtnut", "line", "bar", "radar" and "polarArea".</p>
+		<p>Chart type is defined using the <i>type</i> property. Currently there are 6 options available; <b>pie</b>, <b>doughtnut</b>, <b>line</b>, <b>bar</b>, <b>radar</b> and <b>polarArea</b>.</p>
 
 		<h3>Data</h3>
-		<p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart.</p>
+		<p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart.  For more information refer to the <a href="https://www.chartjs.org/">charts.js</a> documentation.</p>
 <CodeHighlight>
 &lt;Chart type="bar" :data="basicData" /&gt;
 </CodeHighlight>
@@ -46,7 +46,7 @@ export default {
 
 		<h3>Options</h3>
 		<p>While a series can be customized per dataset, general chart options are defined with options property.
-			Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.</p>
+			Example below adds a title and customizes the legend position of the chart. For all available options refer to the <a href="https://www.chartjs.org/">charts.js</a> documentation.</p>
 <CodeHighlight>
 &lt;Chart type="line" :data="data" :options="options" /&gt;
 </CodeHighlight>
@@ -78,6 +78,7 @@ options: {
 </CodeHighlight>
 
 		<h3>Properties</h3>
+        <p>Any attribute such as style and class are passed to the main container element. Following is the additional property to configure the component.</p>
 		<div class="doc-tablewrapper">
 			<table class="doc-table">
 				<thead>
@@ -138,9 +139,63 @@ options: {
                         <td>refresh</td>
                         <td>-</td>
                         <td>Redraws the graph.</td>
+                    </tr>
+                    <tr>
+                        <td>reinit</td>
+                        <td>-</td>
+                        <td>Destroys the graph first and then creates it again.</td>
+                    </tr>
+                    <tr>
+                        <td>generateLegend</td>
+                        <td>-</td>
+                        <td>Returns an HTML string of a legend for that chart. The legend is generated from the legendCallback in the options.</td>
                     </tr>
 				</tbody>
 			</table>
 		</div>
+
+        <h3>Events</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>select</td>
+                        <td>
+                            event: original event<br>
+                            event.dataset: Selected dataset<br>
+                            event.element: Selected element<br>
+                            event.element._datasetIndex = Index of the dataset in data<br>
+                            event.element._index = Index of the data in dataset
+                        </td>
+                        <td>Callback to invoke when a tab gets expanded.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h3>Styling</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-chart</td>
+                        <td>Container element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 	</div>
 </template>
\ No newline at end of file