KoPKB/My-KOPKB
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

first init

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-06-08 11:37:14 +08:00
commit 94ecbe5887
1058 changed files with 87732 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fe/src/docs/pages/chart.vue
+235
View File
@@ -0,0 +1,235 @@
<script lang="ts" setup>
import { Chart, getColor } from "@/components/ui/chart";
import {
Preview,
SectionTitle,
SectionContent,
InstallPackage,
PreviewCode,
} from "@/components/docs";
</script>
<template>
<div id="preview" class="-mt-20">
<Preview>
<template #preview>
<Chart class="max-w-100" :config="{
type: 'bar',
data: {
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
datasets: [
{
label: 'Html Template',
maxBarThickness: 12,
data: [
60, 150, 30, 200, 180, 50, 180, 120, 230, 180, 250, 270,
],
backgroundColor: () => getColor('--color-foreground', 0.3),
borderColor: () => getColor('--color-foreground'),
borderWidth: 1,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
},
}" />
</template>
<template #code>
<PreviewCode>
{{`
<Chart class="max-w-100" :config="{
type: 'bar',
data: {
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
datasets: [
{
label: 'Html Template',
maxBarThickness: 12,
data: [
60, 150, 30, 200, 180, 50, 180, 120, 230, 180, 250, 270,
],
backgroundColor: () => getColor('--color-foreground', 0.3),
borderColor: () => getColor('--color-foreground'),
borderWidth: 1,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
},
}" />
` }}
</PreviewCode>
</template>
</Preview>
</div>
<div id="installation">
<SectionTitle>Installation</SectionTitle>
<SectionContent>Install the following dependencies:</SectionContent>
<InstallPackage>add chart.js</InstallPackage>
<SectionContent>
Copy and paste the following code into your project.
</SectionContent>
<PreviewCode title="components/ui/chart/Chart.vue">
{{`
<script lang="ts" setup generic="TType extends ChartType">
import ChartJs from "chart.js/auto";
import { ref, onMounted } from "vue";
import { cn } from "@mykopkb/core/utils/cn";
import { chart } from "@mykopkb/core/styles/chart.styles";
import type { ChartType, ChartConfiguration } from "chart.js";
const {
class: className,
config,
getRef,
...props
} = defineProps<{
class?: string;
config: ChartConfiguration<TType>;
getRef?: (chart: ChartJs<TType>) => void;
}>();
const chartRef = ref<
| (HTMLCanvasElement & {
instance?: ChartJs<TType>;
})
| null
>(null);
onMounted(() => {
if (chartRef.value && !chartRef.value.instance) {
chartRef.value.instance = new ChartJs(chartRef.value, config);
getRef?.(chartRef.value.instance);
}
});
</script>
<template>
<canvas :class="cn(chart, className)" ref="chartRef" v-bind="props" />
</template>
` }}
</PreviewCode>
<PreviewCode title="components/ui/chart/index.ts">
{{ `
export { default as Chart } from "./Chart.vue";
export { getColor } from "./utils";
` }}
</PreviewCode>
<SectionContent>
Update the import paths to match your project setup.
</SectionContent>
</div>
<div id="usage">
<SectionTitle>Usage</SectionTitle>
<PreviewCode>
{{ `
import { Chart, getColor } from "@/components/ui/chart";
` }}
</PreviewCode>
<PreviewCode>
{{`
<Chart class="max-w-100" :config="{
type: 'bar',
data: {
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
datasets: [
{
label: 'Html Template',
maxBarThickness: 12,
data: [
60, 150, 30, 200, 180, 50, 180, 120, 230, 180, 250, 270,
],
backgroundColor: () => getColor('--color-foreground', 0.3),
borderColor: () => getColor('--color-foreground'),
borderWidth: 1,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},
},
}" />
` }}
</PreviewCode>
</div>
</template>