csb updated for chart demos
Tuğçe Küçükoğlu
parent
ec0aed103f
commit
5cbe0eb5a6
|
|
@ -1,185 +1,17 @@
|
|||
<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>
|
||||
<h5>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"/>
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<Chart type="bar" :data="basicData" :options="basicOptions" />
|
||||
|
|
@ -200,7 +32,6 @@ export default {
|
|||
<Chart type="bar" :data="stackedData" :options="stackedOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
{
|
||||
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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,104 +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>
|
||||
<Chart type="bar" :data="chartData" :options="chartOptions"/>
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chart type="bar" :data="chartData"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -130,13 +45,56 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>`
|
||||
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>`
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,62 +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>
|
||||
<Chart type="doughnut" :data="chartData" />
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName :'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chart type="doughnut" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -75,13 +32,43 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,132 +1,17 @@
|
|||
<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>
|
||||
<h3>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" />
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<Chart type="line" :data="basicData" :options="basicOptions" />
|
||||
|
|
@ -142,7 +27,6 @@ export default {
|
|||
<Chart type="line" :data="lineStylesData" :options="basicOptions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -231,13 +115,126 @@ export default {
|
|||
basicOptions: null
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,62 +1,20 @@
|
|||
<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>
|
||||
<Chart type="pie" :data="chartData" />
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chart type="pie" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -75,13 +33,43 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,70 +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>
|
||||
<Chart type="polarArea" :data="chartData" />
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chart type="polarArea" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -81,13 +30,41 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,69 +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>
|
||||
<Chart type="radar" :data="chartData" />
|
||||
</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">
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<Chart type="radar" :data="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -97,13 +47,58 @@ export default {
|
|||
},
|
||||
}
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
'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>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue