sigma-ui/__generated/registry-schemes/style-system/tailwind/chart-line.json

CLI for SIGMA-UI components.

{
  "name": "chart-line",
  "dependencies": [
    "@unovis/vue",
    "@unovis/ts",
    "@vueuse/core"
  ],
  "registryDependencies": [],
  "files": [
    {
      "name": "LineChart.vue",
      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/tailwind/ui/chart';\nimport { cn } from '@ui/utils';\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\n      v-if=\"showLegend\"\n      v-model:items=\"legendItems\"\n      @legend-item-click=\"handleLegendItemClick\"\n    />\n\n    <VisXYContainer\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n    >\n      <ChartCrosshair\n        v-if=\"showTooltip\"\n        :colors=\"colors\"\n        :items=\"legendItems\"\n        :index=\"index\"\n        :custom-tooltip=\"customTooltip\"\n      />\n\n      <template\n        v-for=\"(category, i) in categories\"\n        :key=\"category\"\n      >\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"
    },
    {
      "name": "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": "components:ui"
}