23 lines
4.6 KiB
JSON
23 lines
4.6 KiB
JSON
{
|
|
"name": "chart-area",
|
|
"dependencies": [
|
|
"@unovis/vue",
|
|
"@unovis/ts",
|
|
"@vueuse/core"
|
|
],
|
|
"registryDependencies": [
|
|
"chart",
|
|
"utils"
|
|
],
|
|
"files": [
|
|
{
|
|
"name": "AreaChart.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<{\n data: any[]\n categories: string[]\n index: string\n colors?: string[]\n filterOpacity?: number\n xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n showXAxis?: boolean\n showYAxis?: boolean\n showTooltip?: boolean\n showLegend?: boolean\n showGridLine?: boolean\n showGradiant?: boolean\n}>(), {\n colors: () => defaultColors,\n filterOpacity: 0.2,\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n showGradiant: true,\n})\n\ntype Data = typeof props.data[number]\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: props.colors[i],\n inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n // do something when clicked on legend\n}\n</script>\n\n<template>\n <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n <svg width=\"0\" height=\"0\">\n <defs>\n <linearGradient v-for=\"(color, i) in colors\" :id=\"`color-${i}`\" :key=\"i\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <template v-if=\"showGradiant\">\n <stop offset=\"5%\" :stop-color=\"color\" stop-opacity=\"0.4\" />\n <stop offset=\"95%\" :stop-color=\"color\" stop-opacity=\"0\" />\n </template>\n <template v-else>\n <stop offset=\"0%\" :stop-color=\"color\" />\n </template>\n </linearGradient>\n </defs>\n </svg>\n\n <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" />\n\n <template v-for=\"(category, i) in categories\" :key=\"category\">\n <VisArea\n :x=\"(d: Data, i: number) => i\"\n :y=\"(d: Data) => d[category]\"\n color=\"auto\"\n :attributes=\"{\n [Area.selectors.area]: {\n fill: `url(#color-${i})`,\n },\n }\"\n :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n />\n\n <VisLine\n :x=\"(d: Data, i: number) => i\"\n :y=\"(d: Data) => d[category]\"\n :color=\"colors[i]\"\n :attributes=\"{\n [Line.selectors.line]: {\n opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,\n },\n }\"\n />\n </template>\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n </VisXYContainer>\n </div>\n</template>\n\n<style>\n:root {\n --vis-tooltip-background-color: none;\n --vis-tooltip-border-color: none;\n --vis-tooltip-text-color: none;\n --vis-tooltip-shadow-color: none;\n --vis-tooltip-backdrop-filter: none;\n --vis-tooltip-padding: none;\n}\n</style>\n"
|
|
},
|
|
{
|
|
"name": "index.ts",
|
|
"content": "export { default as AreaChart } from './AreaChart.vue'\n"
|
|
}
|
|
],
|
|
"type": "components:ui"
|
|
} |