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

Implemented Chart Component

pull/12/head
cagataycivici 2019-01-01 22:36:31 +03:00
parent 0b674c25e7
commit cb718f1694
9 changed files with 447 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/AppMenu.vue
View File

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

25
src/router.js
View File

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

160
src/views/chart/BarChartDemo.vue Normal file
View File

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

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

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

41
src/views/chart/DoughnutChartDemo.vue Normal file
View File

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

113
src/views/chart/LineChartDemo.vue Normal file
View File

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

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

@ -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: [
{

49
src/views/chart/PolarAreaChartDemo.vue Normal file
View File

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

48
src/views/chart/RadarChartDemo.vue Normal file
View File

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