<template>
    <DocComponent
        title="Vue Chart Component"
        header="Chart"
        description="Chart components are based on Chart.js, an open source HTML5 based charting library."
        :componentDocs="docs"
        :apiDocs="['Chart']"
        :ptTabComponent="ptComponent"
        :themingDocs="themingDoc"
    />
</template>

<script>
import AccessibilityDoc from '@/doc/chart/AccessibilityDoc.vue';
import BasicDoc from '@/doc/chart/BasicDoc.vue';
import ChartJSDoc from '@/doc/chart/ChartJSDoc.vue';
import ComboDoc from '@/doc/chart/ComboDoc.vue';
import DoughnutDoc from '@/doc/chart/DoughnutDoc.vue';
import HorizontalBarDoc from '@/doc/chart/HorizontalBarDoc.vue';
import ImportDoc from '@/doc/chart/ImportDoc.vue';
import LineDoc from '@/doc/chart/LineDoc.vue';
import LineStylesDoc from '@/doc/chart/LineStylesDoc.vue';
import MultiAxisDoc from '@/doc/chart/MultiAxisDoc.vue';
import PieChartDoc from '@/doc/chart/PieChartDoc.vue';
import PolarAreaDoc from '@/doc/chart/PolarAreaDoc.vue';
import RadarDoc from '@/doc/chart/RadarDoc.vue';
import StackedBarDoc from '@/doc/chart/StackedBarDoc.vue';
import VerticalBarDoc from '@/doc/chart/VerticalBarDoc.vue';
import PTComponent from '@/doc/chart/pt/index.vue';
import ThemingDoc from '@/doc/chart/theming/index.vue';

export default {
    data() {
        return {
            docs: [
                {
                    id: 'import',
                    label: 'Import',
                    component: ImportDoc
                },
                {
                    id: 'chartjs',
                    label: 'Chart.js',
                    component: ChartJSDoc
                },
                {
                    id: 'basic',
                    label: 'Basic',
                    component: BasicDoc
                },
                {
                    id: 'pie',
                    label: 'Pie',
                    component: PieChartDoc
                },
                {
                    id: 'doughnut',
                    label: 'Doughnut',
                    component: DoughnutDoc
                },
                {
                    id: 'vertical',
                    label: 'Vertical Bar',
                    component: VerticalBarDoc
                },
                {
                    id: 'horizontal',
                    label: 'Horizontal Bar',
                    component: HorizontalBarDoc
                },
                {
                    id: 'stacked',
                    label: 'Stacked Bar',
                    component: StackedBarDoc
                },
                {
                    id: 'line',
                    label: 'Line',
                    component: LineDoc
                },
                {
                    id: 'multiaxis',
                    label: 'Multi Axis',
                    component: MultiAxisDoc
                },
                {
                    id: 'linestyles',
                    label: 'Line Styles',
                    component: LineStylesDoc
                },
                {
                    id: 'polararea',
                    label: 'Polar Area',
                    component: PolarAreaDoc
                },
                {
                    id: 'radar',
                    label: 'Radar',
                    component: RadarDoc
                },
                {
                    id: 'combo',
                    label: 'Combo',
                    component: ComboDoc
                },
                {
                    id: 'accessibility',
                    label: 'Accessibility',
                    component: AccessibilityDoc
                }
            ],
            ptComponent: PTComponent,
            themingDoc: ThemingDoc
        };
    }
};
</script>