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

Chart doc added

pull/12/head
Merve Özçifçi 2019-04-02 15:44:35 +03:00
parent 4162751f4f
commit 3cc5b49af0
16 changed files with 827 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/chart/BarChartDemo.vue
View File

@ -20,10 +20,14 @@
<h3>Stacked</h3> <h3>Stacked</h3>
<Chart type="bar" :data="stackedData" :options="stackedOptions"/> <Chart type="bar" :data="stackedData" :options="stackedOptions"/>
</div> </div>
<BarChartDoc/>
</div> </div>
</template> </template>
<script> <script>
import BarChartDoc from './BarChartDoc';
export default { export default {
data() { data() {
return { return {
@ -155,6 +159,9 @@ export default {
} }
} }
} }
},
components: {
'BarChartDoc': BarChartDoc
} }
} }
</script> </script>

181
src/views/chart/BarChartDoc.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;BarChart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;h3 class=&quot;vertical&quot;&gt;Vertical&lt;/h3&gt;
&lt;Chart type=&quot;bar&quot; :data=&quot;basicData&quot; /&gt;
&lt;h3&gt;Horizontal&lt;/h3&gt;
&lt;Chart type=&quot;horizontalBar&quot; :data=&quot;basicData&quot; /&gt;
&lt;h3&gt;Multi Axis&lt;/h3&gt;
&lt;Chart type=&quot;bar&quot; :data=&quot;multiAxisData&quot; :options=&quot;multiAxisOptions&quot;/&gt;
&lt;h3&gt;Stacked&lt;/h3&gt;
&lt;Chart type=&quot;bar&quot; :data=&quot;stackedData&quot; :options=&quot;stackedOptions&quot;/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
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
}]
}
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>

9
src/views/chart/ChartDemo.vue
View File

@ -7,13 +7,13 @@
</div> </div>
</div> </div>
<div class="content-section implementation"> <ChartDoc/>
</div>
</div> </div>
</template> </template>
<script> <script>
import ChartDoc from './ChartDoc';
export default { export default {
data() { data() {
return { return {
@ -36,6 +36,9 @@ export default {
] ]
} }
} }
},
components: {
'ChartDoc': ChartDoc
} }
} }
</script> </script>

138
src/views/chart/ChartDoc.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<div class="content-section documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
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>
<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>
<CodeHighlight>
&lt;Chart type=&quot;bar&quot; :data=&quot;basicData&quot; /&gt;
</CodeHighlight>
<CodeHighlight lang="js">
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]
}
]
}
}
}
}
</CodeHighlight>
<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>
<CodeHighlight>
&lt;Chart type=&quot;line&quot; :data=&quot;data&quot; :options=&quot;options&quot; /&gt;
</CodeHighlight>
<CodeHighlight lang="js">
options: {
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
}
}]
}
}
</CodeHighlight>
<h3>Properties</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>string</td>
<td>null</td>
<td>Type of the chart.</td>
</tr>
<tr>
<td>data</td>
<td>any</td>
<td>null</td>
<td>Data to display.</td>
</tr>
<tr>
<td>options</td>
<td>any</td>
<td>null</td>
<td>Options to customize the chart.</td>
</tr>
<tr>
<td>width</td>
<td>string</td>
<td>null</td>
<td>Width of the chart in non-responsive mode.</td>
</tr>
<tr>
<td>height</td>
<td>string</td>
<td>null</td>
<td>Height of the chart in non-responsive mode.</td>
</tr>
</tbody>
</table>
</div>
<h3>Methods</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>refresh</td>
<td>-</td>
<td>Redraws the graph.</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

7
src/views/chart/ComboChartDemo.vue
View File

@ -10,10 +10,14 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Chart type="bar" :data="chartData" :options="chartOptions"/> <Chart type="bar" :data="chartData" :options="chartOptions"/>
</div> </div>
<ComboChartDoc/>
</div> </div>
</template> </template>
<script> <script>
import ComboChartDoc from './ComboChartDoc';
export default { export default {
data() { data() {
return { return {
@ -76,6 +80,9 @@ export default {
} }
} }
} }
},
components: {
'ComboChartDoc': ComboChartDoc
} }
} }
</script> </script>

95
src/views/chart/ComboChartDoc.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;Combo Chart&lt;/h1&gt;
&lt;p&gt;Different chart types can be combined in the same graph.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;Chart type=&quot;bar&quot; :data=&quot;chartData&quot; :options=&quot;chartOptions&quot;/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
chartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: '#AA5493',
borderWidth: 2,
fill: false,
data: [
50,
25,
12,
48,
56,
76,
42
]
},
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#2f4860',
data: [
21,
84,
24,
75,
37,
65,
34
],
borderColor: 'white',
borderWidth: 2
},
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#00bb7e',
data: [
41,
52,
24,
74,
23,
21,
32
]
}]
},
chartOptions: {
responsive: true,
title: {
display: true,
text: 'Combo Bar Line Chart'
},
tooltips: {
mode: 'index',
intersect: true
}
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>

7
src/views/chart/DoughnutChartDemo.vue
View File

@ -10,10 +10,14 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Chart type="doughnut" :data="chartData" /> <Chart type="doughnut" :data="chartData" />
</div> </div>
<DoughnutChartDoc/>
</div> </div>
</template> </template>
<script> <script>
import DoughnutChartDoc from './DoughnutChartDoc';
export default { export default {
data() { data() {
return { return {
@ -36,6 +40,9 @@ export default {
] ]
} }
} }
},
components: {
'DoughnutChartDoc': DoughnutChartDoc
} }
} }
</script> </script>

53
src/views/chart/DoughnutChartDoc.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;DoughnutChart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;Chart type=&quot;doughnut&quot; :data=&quot;chartData&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
chartData: {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>

7
src/views/chart/LineChartDemo.vue
View File

@ -17,10 +17,14 @@
<h3>Line Styles</h3> <h3>Line Styles</h3>
<Chart type="line" :data="lineStylesData" /> <Chart type="line" :data="lineStylesData" />
</div> </div>
<LineChartDoc/>
</div> </div>
</template> </template>
<script> <script>
import LineChartDoc from './LineChartDoc';
export default { export default {
data() { data() {
return { return {
@ -108,6 +112,9 @@ export default {
] ]
} }
} }
},
components: {
'LineChartDoc': LineChartDoc
} }
} }
</script> </script>

131
src/views/chart/LineChartDoc.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;Line Chart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt;
&lt;Chart type=&quot;line&quot; :data=&quot;basicData&quot; /&gt;
&lt;h3&gt;Multi Axis&lt;/h3&gt;
&lt;Chart type=&quot;line&quot; :data=&quot;multiAxisData&quot; :options=&quot;multiAxisOptions&quot; /&gt;
&lt;h3&gt;Line Styles&lt;/h3&gt;
&lt;Chart type=&quot;line&quot; :data=&quot;lineStylesData&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
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'
}
]
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>

7
src/views/chart/PieChartDemo.vue
View File

@ -10,10 +10,14 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Chart type="pie" :data="chartData" /> <Chart type="pie" :data="chartData" />
</div> </div>
<PieChartDoc/>
</div> </div>
</template> </template>
<script> <script>
import PieChartDoc from './PieChartDoc';
export default { export default {
data() { data() {
return { return {
@ -36,6 +40,9 @@ export default {
] ]
} }
} }
},
components: {
'PieChartDoc': PieChartDoc
} }
} }
</script> </script>

53
src/views/chart/PieChartDoc.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;Pie Chart&lt;/h1&gt;
&lt;p&gt;A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;Chart type=&quot;pie&quot; :data=&quot;chartData&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
chartData: {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>

7
src/views/chart/PolarAreaChartDemo.vue
View File

@ -10,10 +10,14 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Chart type="polarArea" :data="chartData" /> <Chart type="polarArea" :data="chartData" />
</div> </div>
<PolarAreaChartDoc/>
</div> </div>
</template> </template>
<script> <script>
import PolarAreaChartDoc from './PolarAreaChartDoc';
export default { export default {
data() { data() {
return { return {
@ -44,6 +48,9 @@ export default {
] ]
} }
} }
},
components: {
'PolarAreaChartDoc': PolarAreaChartDoc
} }
} }
</script> </script>

61
src/views/chart/PolarAreaChartDoc.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;Polar Area Chart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;Chart type=&quot;polarArea&quot; :data=&quot;chartData&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
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"
]
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>

7
src/views/chart/RadarChartDemo.vue
View File

@ -10,10 +10,14 @@
<div class="content-section implementation"> <div class="content-section implementation">
<Chart type="radar" :data="chartData" /> <Chart type="radar" :data="chartData" />
</div> </div>
<RadarChartDoc/>
</div> </div>
</template> </template>
<script> <script>
import RadarChartDoc from './RadarChartDoc';
export default { export default {
data() { data() {
return { return {
@ -43,6 +47,9 @@ export default {
] ]
} }
} }
},
components: {
'RadarChartDoc': RadarChartDoc
} }
} }
</script> </script>

60
src/views/chart/RadarChartDoc.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;template&gt;
&lt;div&gt;
&lt;div class=&quot;content-section introduction&quot;&gt;
&lt;div class=&quot;feature-intro&quot;&gt;
&lt;h1&gt;Radar Chart&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;content-section implementation&quot;&gt;
&lt;Chart type=&quot;radar&quot; :data=&quot;chartData&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
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]
}
]
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>