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

csb updated for chart demos

pull/1055/head
Tuğçe Küçükoğlu 2021-03-19 10:40:29 +03:00
parent ec0aed103f
commit 5cbe0eb5a6
8 changed files with 529 additions and 662 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

353
src/views/chart/BarChartDoc.vue
View File

@ -1,204 +1,35 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto"/>
</div>
<pre v-code><code><template v-pre>
&lt;h5&gt;Vertical&lt;/h3&gt;
&lt;Chart type="bar" :data="basicData" /&gt;
&lt;h3&gt;Horizontal&lt;/h3&gt;
&lt;Chart type="horizontalBar" :data="basicData" /&gt;
&lt;h3&gt;Multi Axis&lt;/h3&gt;
&lt;Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/&gt;
&lt;h3&gt;Stacked&lt;/h3&gt;
&lt;Chart type="bar" :data="stackedData" :options="stackedOptions"/&gt;
</template>
</code></pre>
<pre v-code.script><code>
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: '#FFA726',
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: '#42A5F5',
data: [
50,
25,
12,
48,
90,
76,
42
]
},
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#66BB6A',
data: [
21,
84,
24,
75,
37,
65,
34
]
},
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#FFA726',
data: [
41,
52,
24,
74,
23,
21,
32
]
}
]
},
stackedOptions: {
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="BarChartDemo" :sources="sources" />
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Vertical</h5>
<Chart type="bar" :data="basicData" :options="basicOptions" />
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<div class="card">
<h5>Vertical</h5>
<Chart type="bar" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Horizontal</h5>
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Horizontal</h5>
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
</div>
<div class="card">
<h5>Stacked</h5>
<Chart type="bar" :data="stackedData" :options="stackedOptions" />
</div>
<div class="card">
<h5>Stacked</h5>
<Chart type="bar" :data="stackedData" :options="stackedOptions" />
</div>
</div>
</template>
@ -305,13 +136,147 @@ export default {
basicOptions: null
}
}
}`
}
<\\/script>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div class="card">
<h5>Vertical</h5>
<Chart type="bar" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Horizontal</h5>
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
</div>
<div class="card">
<h5>Stacked</h5>
<Chart type="bar" :data="stackedData" :options="stackedOptions" />
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const basicData = ref({
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: '#FFA726',
data: [28, 48, 40, 19, 86, 27, 90]
}
]
});
const multiAxisData = ref({
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]
}]
});
const multiAxisOptions = ref({
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
}
}]
}
});
const stackedData = ref({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
type: 'bar',
label: 'Dataset 1',
backgroundColor: '#42A5F5',
data: [50,25,12,48,90,76,42]
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#66BB6A',
data: [21,84,24,75,37,65,34]
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#FFA726',
data: [41,52,24,74,23,21,32]
}]
});
const stackedOptions = ref({
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
});
const basicOptions = ref(null);
return { basicData, multiAxisData, multiAxisOptions, stackedData, stackedOptions, basicOptions }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

150
src/views/chart/ComboChartDoc.vue
View File

@ -1,103 +1,18 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto"/>
</div>
<pre v-code><code><template v-pre>
&lt;Chart type="bar" :data="chartData" :options="chartOptions"/&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
chartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: '#42A5F5',
borderWidth: 2,
fill: false,
data: [
50,
25,
12,
48,
56,
76,
42
]
},
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#66BB6A',
data: [
21,
84,
24,
75,
37,
65,
34
],
borderColor: 'white',
borderWidth: 2
},
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#FFA726',
data: [
41,
52,
24,
74,
23,
21,
32
]
}]
},
chartOptions: {
responsive: true,
title: {
display: true,
text: 'Combo Bar Line Chart'
},
tooltips: {
mode: 'index',
intersect: true
}
}
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="ComboChartDemo" :sources="sources" />
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Chart type="bar" :data="chartData"/>
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Chart type="bar" :data="chartData"/>
</div>
</template>
@ -130,13 +45,56 @@ export default {
}
}
}
}`
}
<\\/script>`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Chart type="bar" :data="chartData"/>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const chartData = ref({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: '#42A5F5',
borderWidth: 2,
fill: false,
data: [50,25,12,48,56,76,42]
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#66BB6A',
data: [21,84,24,75,37,65,34],
borderColor: 'white',
borderWidth: 2
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#FFA726',
data: [41,52,24,74,23,21,32]
}]
});
return { chartData }
}
}
<\\/script>`
}
}
}
},
components: {
LiveEditor
}
}
</script>

95
src/views/chart/DoughnutChartDoc.vue
View File

@ -1,61 +1,18 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code><code><template v-pre>
&lt;Chart type="doughnut" :data="chartData" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
chartData: {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#42A5F5",
"#66BB6A",
"#FFA726"
],
hoverBackgroundColor: [
"#64B5F6",
"#81C784",
"#FFB74D"
]
}
]
}
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="DoughnutChartDemo" :sources="sources" />
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Chart type="doughnut" :data="chartData" />
</div>
</div>
'options-api': {
tabName :'Source',
content: `
<template>
<div class="card">
<Chart type="doughnut" :data="chartData" />
</div>
</template>
@ -75,13 +32,43 @@ export default {
}
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName :'Composition API',
content: `
<template>
<div class="card">
<Chart type="doughnut" :data="chartData" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const chartData = ref({
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ["#FF6384","#36A2EB","#FFCE56"],
hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]
}
]
});
return { chartData }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

271
src/views/chart/LineChartDoc.vue
View File

@ -1,146 +1,30 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code><code><template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;Chart type="line" :data="basicData" /&gt;
&lt;h3&gt;Multi Axis&lt;/h3&gt;
&lt;Chart type="line" :data="multiAxisData" :options="multiAxisOptions" /&gt;
&lt;h3&gt;Line Styles&lt;/h3&gt;
&lt;Chart type="line" :data="lineStylesData" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
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,
borderColor: '#42A5F5'
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
borderColor: '#FFA726'
}
]
},
multiAxisData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Dataset 1',
fill: false,
borderColor: '#42A5F5',
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: 'rgba(255,167,38,0.2)'
}
]
}
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="LineChartDemo" :sources="sources" />
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Chart type="line" :data="basicData" :options="basicOptions" />
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<div class="card">
<h5>Basic</h5>
<Chart type="line" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
</div>
<div class="card">
<h5>Line Styles</h5>
<Chart type="line" :data="lineStylesData" :options="basicOptions" />
</div>
<div class="card">
<h5>Line Styles</h5>
<Chart type="line" :data="lineStylesData" :options="basicOptions" />
</div>
</div>
</template>
@ -231,13 +115,126 @@ export default {
basicOptions: null
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<div class="card">
<h5>Basic</h5>
<Chart type="line" :data="basicData" :options="basicOptions" />
</div>
<div class="card">
<h5>Multi Axis</h5>
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
</div>
<div class="card">
<h5>Line Styles</h5>
<Chart type="line" :data="lineStylesData" :options="basicOptions" />
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const basicData = ref({
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,
borderColor: '#FFA726'
}
]
});
const multiAxisData = ref({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
fill: false,
borderColor: '#42A5F5',
yAxisID: 'y-axis-1',
data: [65, 59, 80, 81, 56, 55, 10]
}, {
label: 'Dataset 2',
fill: false,
borderColor: '#00bb7e',
yAxisID: 'y-axis-2',
data: [28, 48, 40, 19, 86, 27, 90]
}]
});
const multiAxisOptions = ref({
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
}
}]
}
});
const lineStylesData = ref({
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: 'rgba(255,167,38,0.2)'
}
]
});
const basicOptions = ref(null);
return { basicData, multiAxisData, multiAxisOptions, lineStylesData, basicOptions }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

96
src/views/chart/PieChartDoc.vue
View File

@ -1,61 +1,19 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code><code><template v-pre>
&lt;Chart type="pie" :data="chartData" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
chartData: {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#42A5F5",
"#66BB6A",
"#FFA726"
],
hoverBackgroundColor: [
"#64B5F6",
"#81C784",
"#FFB74D"
]
}
]
}
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="PieChartDemo" :sources="sources" />
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Chart type="pie" :data="chartData" />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Chart type="pie" :data="chartData" />
</div>
</template>
@ -75,13 +33,43 @@ export default {
}
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Chart type="pie" :data="chartData" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const chartData = ref({
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: ["#42A5F5","#66BB6A","#FFA726"],
hoverBackgroundColor: ["#64B5F6","#81C784","#FFB74D"]
}
]
});
return { chartData }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

101
src/views/chart/PolarAreaChartDoc.vue
View File

@ -1,69 +1,18 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code><code><template v-pre>
&lt;Chart type="polarArea" :data="chartData" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
export default {
data() {
return {
chartData: {
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#42A5F5",
"#66BB6A",
"#FFA726",
"#26C6DA",
"#7E57C2"
],
label: 'My dataset'
}],
labels: [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
]
}
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="PolarAreaChartDemo" :sources="sources" />
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Chart type="polarArea" :data="chartData" />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Chart type="polarArea" :data="chartData" />
</div>
</template>
@ -81,13 +30,41 @@ export default {
}
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Chart type="polarArea" :data="chartData" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const chartData = ref({
datasets: [{
data: [11,16,7,3,14],
backgroundColor: ["#42A5F5","#66BB6A","#FFA726","#26C6DA","#7E57C2"],
label: 'My dataset'
}],
labels: ["Red","Green","Yellow","Grey","Blue"]
});
return { chartData }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

117
src/views/chart/RadarChartDoc.vue
View File

@ -1,68 +1,18 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Source">
<div class="p-d-flex">
<LiveEditor name="ChartDemo" :sources="sources" class="p-ml-auto" />
</div>
<pre v-code><code><template v-pre>
&lt;Chart type="radar" :data="chartData" /&gt;
</template>
</code></pre>
<pre v-code.script><code>
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]
}
]
}
}
}
}
</code></pre>
</TabPanel>
</TabView>
</div>
<AppDoc name="RadarChartDemo" :sources="sources" />
</template>
<script>
import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
sources: {
'template': {
content: `<template>
<div class="layout-content">
<div class="content-section implementation">
<div class="card">
<Chart type="radar" :data="chartData" />
</div>
</div>
'options-api': {
tabName: 'Source',
content: `
<template>
<div class="card">
<Chart type="radar" :data="chartData" />
</div>
</template>
@ -97,13 +47,58 @@ export default {
},
}
}
}`
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div class="card">
<Chart type="radar" :data="chartData" />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const chartData = ref({
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]
}
]
});
return { chartData }
}
}
<\\/script>
`
}
}
}
},
components: {
LiveEditor
}
}
</script>

8
src/views/liveeditor/LiveEditor.vue
View File

@ -97,7 +97,8 @@ export default {
'@babel/cli': dependencies['@babel/cli'],
'core-js': dependencies['core-js'],
'vue-router': dependencies['vue-router'],
'quill': dependencies['quill']
'quill': dependencies['quill'],
'chart.js': dependencies['chart.js']
},
devDependencies: {
'@vue/cli-plugin-babel': dependencies['@vue/cli-plugin-babel'],
@ -182,9 +183,6 @@ ${services[this.service]}
extDependencies['@fullcalendar/interaction'] = "5.4.0";
extDependencies['@fullcalendar/timegrid'] = "5.4.0";
}
if(name === 'ChartDemo') {
extDependencies['chart.js'] = "2.7.3";
}
element += `import ${name} from "./${name}.vue"`;
@ -206,6 +204,7 @@ import Calendar from 'primevue/calendar';
import Card from 'primevue/card';
import CascadeSelect from 'primevue/cascadeselect';
import Carousel from 'primevue/carousel';
import Chart from 'primevue/chart';
import Checkbox from 'primevue/checkbox';
import Chip from 'primevue/chip';
import Chips from 'primevue/chips';
@ -306,6 +305,7 @@ app.component('Calendar', Calendar);
app.component('Card', Card);
app.component('Carousel', Carousel);
app.component('CascadeSelect', CascadeSelect);
app.component('Chart', Chart);
app.component('Checkbox', Checkbox);
app.component('Chip', Chip);
app.component('Chips', Chips);