28 lines
5.2 KiB
JSON
28 lines
5.2 KiB
JSON
{
|
|
"name": "chart-line",
|
|
"type": "registry:ui",
|
|
"dependencies": [
|
|
"@unovis/vue",
|
|
"@unovis/ts",
|
|
"@vueuse/core"
|
|
],
|
|
"registryDependencies": [
|
|
"utils",
|
|
"chart"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "ui/chart-line/LineChart.vue",
|
|
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BaseChartProps } from '.'\nimport { cn } from '@/lib/utils'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/registry/new-york/ui/chart'\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { Axis, Line } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { useMounted } from '@vueuse/core'\nimport { type Component, computed, ref } from 'vue'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Render custom tooltip component.\n */\n customTooltip?: Component\n /**\n * Type of curve\n */\n curveType?: CurveType\n}>(), {\n curveType: CurveType.MonotoneX,\n filterOpacity: 0.2,\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n})\n\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\n\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i)\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\n :margin=\"{ left: 20, right: 20 }\"\n :data=\"data\"\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n >\n <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" :custom-tooltip=\"customTooltip\" />\n\n <template v-for=\"(category, i) in categories\" :key=\"category\">\n <VisLine\n :x=\"(d: Data, i: number) => i\"\n :y=\"(d: Data) => d[category]\"\n :curve-type=\"curveType\"\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(--vis-text-color))\"\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(--vis-text-color))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n",
|
|
"type": "registry:ui",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "ui/chart-line/index.ts",
|
|
"content": "export { default as LineChart } from './LineChart.vue'\n\nimport type { Spacing } from '@unovis/ts'\n\ntype KeyOf<T extends Record<string, any>> = Extract<keyof T, string>\n\nexport interface BaseChartProps<T extends Record<string, any>> {\n /**\n * The source data, in which each entry is a dictionary.\n */\n data: T[]\n /**\n * Select the categories from your data. Used to populate the legend and toolip.\n */\n categories: KeyOf<T>[]\n /**\n * Sets the key to map the data to the axis.\n */\n index: KeyOf<T>\n /**\n * Change the default colors.\n */\n colors?: string[]\n /**\n * Margin of each the container\n */\n margin?: Spacing\n /**\n * Change the opacity of the non-selected field\n * @default 0.2\n */\n filterOpacity?: number\n /**\n * Function to format X label\n */\n xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n /**\n * Function to format Y label\n */\n yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string\n /**\n * Controls the visibility of the X axis.\n * @default true\n */\n showXAxis?: boolean\n /**\n * Controls the visibility of the Y axis.\n * @default true\n */\n showYAxis?: boolean\n /**\n * Controls the visibility of tooltip.\n * @default true\n */\n showTooltip?: boolean\n /**\n * Controls the visibility of legend.\n * @default true\n */\n showLegend?: boolean\n /**\n * Controls the visibility of gridline.\n * @default true\n */\n showGridLine?: boolean\n}\n",
|
|
"type": "registry:ui",
|
|
"target": ""
|
|
}
|
|
]
|
|
}
|