vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add select event to Chart and updated docs

pull/12/head
cagataycivici 2019-05-23 15:41:45 +03:00
parent ec6e5c727d
commit 048c2563e7
3 changed files with 76 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/styles/app.scss
View File

@ -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;
}

17
src/components/chart/Chart.vue
View File

@ -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();
}
}
}
}

61
src/views/chart/ChartDoc.vue
View File

@ -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>