sigma-ui/__generated/registry-schemes/style-system/css/chart-area.json

CLI for SIGMA-UI components.

{
  "name": "chart-area",
  "dependencies": [
    "@unovis/vue",
    "@unovis/ts",
    "@vueuse/core"
  ],
  "registryDependencies": [],
  "files": [
    {
      "name": "AreaChart.vue",
      "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { type BulletLegendItemInterface, CurveType } from '@unovis/ts';\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue';\nimport { Area, Axis, Line } from '@unovis/ts';\nimport { type Component, computed, ref } from 'vue';\nimport { useMounted } from '@vueuse/core';\nimport { useId } from 'reka-ui';\nimport type { BaseChartProps } from '.';\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@ui/registry/css/ui/chart';\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   * Controls the visibility of gradient.\n   * @default true\n   */\n  showGradiant?: boolean;\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  showGradiant: 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 chartRef = useId();\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\n    class=\"sigma-ui-area-chart\"\n    :class=\"$attrs.class\"\n  >\n    <ChartLegend\n      v-if=\"showLegend\"\n      v-model:items=\"legendItems\"\n      @legend-item-click=\"handleLegendItemClick\"\n    />\n\n    <VisXYContainer\n      :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n      :margin=\"{ left: 20, right: 20 }\"\n      :data=\"data\"\n    >\n      <svg\n        width=\"0\"\n        height=\"0\"\n      >\n        <defs>\n          <linearGradient\n            v-for=\"(color, i) in colors\"\n            :id=\"`${chartRef}-color-${i}`\"\n            :key=\"i\"\n            x1=\"0\"\n            y1=\"0\"\n            x2=\"0\"\n            y2=\"1\"\n          >\n            <template v-if=\"showGradiant\">\n              <stop\n                offset=\"5%\"\n                :stop-color=\"color\"\n                stop-opacity=\"0.4\"\n              />\n              <stop\n                offset=\"95%\"\n                :stop-color=\"color\"\n                stop-opacity=\"0\"\n              />\n            </template>\n            <template v-else>\n              <stop\n                offset=\"0%\"\n                :stop-color=\"color\"\n              />\n            </template>\n          </linearGradient>\n        </defs>\n      </svg>\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        <VisArea\n          :x=\"(d: Data, i: number) => i\"\n          :y=\"(d: Data) => d[category]\"\n          color=\"auto\"\n          :curve-type=\"curveType\"\n          :attributes=\"{\n            [Area.selectors.area]: {\n              fill: `url(#${chartRef}-color-${i})`,\n            },\n          }\"\n          :opacity=\"legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1\"\n        />\n      </template>\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          :color=\"colors[i]\"\n          :curve-type=\"curveType\"\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\n<style>\n.sigma-ui-area-chart {\n  display: flex;\n  width: 100%;\n  height: 400px;\n  flex-direction: column;\n  align-items: flex-end;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as AreaChart } from './AreaChart.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"
}