@iqual/nuxt-icms 1.4.9 → 1.5.0

package/components/ui/chart/interface.ts

@@ -1,64 +0,0 @@
-import type { Spacing } from '@unovis/ts'
-
-type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
-
-export interface BaseChartProps<T extends Record<string, any>> {
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOf<T>[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOf<T>
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Margin of each the container
-   */
-  margin?: Spacing
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
-}

package/components/ui/chart-area/AreaChart.vue

@@ -1,141 +0,0 @@
-<script setup lang="ts" generic="T extends Record<string, any>">
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import type { Component } from 'vue'
-import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
-import { cn } from '@/lib/utils'
-import { Area, Axis, CurveType, Line } from '@unovis/ts'
-
-import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
-import { useMounted } from '@vueuse/core'
-import { useId } from 'radix-vue'
-import { computed, ref } from 'vue'
-
-const props = withDefaults(defineProps<BaseChartProps<T> & {
-  /**
-   * Render custom tooltip component.
-   */
-  customTooltip?: Component
-  /**
-   * Type of curve
-   */
-  curveType?: CurveType
-  /**
-   * Controls the visibility of gradient.
-   * @default true
-   */
-  showGradiant?: boolean
-}>(), {
-  curveType: CurveType.MonotoneX,
-  filterOpacity: 0.2,
-  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
-  showXAxis: true,
-  showYAxis: true,
-  showTooltip: true,
-  showLegend: true,
-  showGridLine: true,
-  showGradiant: true,
-})
-
-const emits = defineEmits<{
-  legendItemClick: [d: BulletLegendItemInterface, i: number]
-}>()
-
-type KeyOfT = Extract<keyof T, string>
-type Data = typeof props.data[number]
-
-const chartRef = useId()
-
-const index = computed(() => props.index as KeyOfT)
-const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
-
-const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
-  name: category,
-  color: colors.value[i],
-  inactive: false,
-})))
-
-const isMounted = useMounted()
-
-function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  emits('legendItemClick', d, i)
-}
-</script>
-
-<template>
-  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
-    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
-
-    <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
-      <svg width="0" height="0">
-        <defs>
-          <linearGradient v-for="(color, i) in colors" :id="`${chartRef}-color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
-            <template v-if="showGradiant">
-              <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
-              <stop offset="95%" :stop-color="color" stop-opacity="0" />
-            </template>
-            <template v-else>
-              <stop offset="0%" :stop-color="color" />
-            </template>
-          </linearGradient>
-        </defs>
-      </svg>
-
-      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
-
-      <template v-for="(category, i) in categories" :key="category">
-        <VisArea
-          :x="(d: Data, i: number) => i"
-          :y="(d: Data) => d[category]"
-          color="auto"
-          :curve-type="curveType"
-          :attributes="{
-            [Area.selectors.area]: {
-              fill: `url(#${chartRef}-color-${i})`,
-            },
-          }"
-          :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
-        />
-      </template>
-
-      <template v-for="(category, i) in categories" :key="category">
-        <VisLine
-          :x="(d: Data, i: number) => i"
-          :y="(d: Data) => d[category]"
-          :color="colors[i]"
-          :curve-type="curveType"
-          :attributes="{
-            [Line.selectors.line]: {
-              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
-            },
-          }"
-        />
-      </template>
-
-      <VisAxis
-        v-if="showXAxis"
-        type="x"
-        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
-        :grid-line="false"
-        :tick-line="false"
-        tick-text-color="hsl(var(--vis-text-color))"
-      />
-      <VisAxis
-        v-if="showYAxis"
-        type="y"
-        :tick-line="false"
-        :tick-format="yFormatter"
-        :domain-line="false"
-        :grid-line="showGridLine"
-        :attributes="{
-          [Axis.selectors.grid]: {
-            class: 'text-muted',
-          },
-        }"
-        tick-text-color="hsl(var(--vis-text-color))"
-      />
-
-      <slot />
-    </VisXYContainer>
-  </div>
-</template>

package/components/ui/chart-area/index.ts

@@ -1,66 +0,0 @@
-export { default as AreaChart } from './AreaChart.vue'
-
-import type { Spacing } from '@unovis/ts'
-
-type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
-
-export interface BaseChartProps<T extends Record<string, any>> {
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOf<T>[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOf<T>
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Margin of each the container
-   */
-  margin?: Spacing
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
-}

package/components/ui/chart-bar/BarChart.vue

@@ -1,116 +0,0 @@
-<script setup lang="ts" generic="T extends Record<string, any>">
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import type { Component } from 'vue'
-import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
-import { cn } from '@/lib/utils'
-import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
-import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { useMounted } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-const props = withDefaults(defineProps<BaseChartProps<T> & {
-  /**
-   * Render custom tooltip component.
-   */
-  customTooltip?: Component
-  /**
-   * Change the type of the chart
-   * @default "grouped"
-   */
-  type?: 'stacked' | 'grouped'
-  /**
-   * Rounded bar corners
-   * @default 0
-   */
-  roundedCorners?: number
-}>(), {
-  type: 'grouped',
-  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
-  filterOpacity: 0.2,
-  roundedCorners: 0,
-  showXAxis: true,
-  showYAxis: true,
-  showTooltip: true,
-  showLegend: true,
-  showGridLine: true,
-})
-const emits = defineEmits<{
-  legendItemClick: [d: BulletLegendItemInterface, i: number]
-}>()
-
-type KeyOfT = Extract<keyof T, string>
-type Data = typeof props.data[number]
-
-const index = computed(() => props.index as KeyOfT)
-const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
-const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
-  name: category,
-  color: colors.value[i],
-  inactive: false,
-})))
-
-const isMounted = useMounted()
-
-function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  emits('legendItemClick', d, i)
-}
-
-const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
-const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)
-</script>
-
-<template>
-  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
-    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
-
-    <VisXYContainer
-      :data="data"
-      :style="{ height: isMounted ? '100%' : 'auto' }"
-      :margin="margin"
-    >
-      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :custom-tooltip="customTooltip" :index="index" />
-
-      <VisBarComponent
-        :x="(d: Data, i: number) => i"
-        :y="categories.map(category => (d: Data) => d[category]) "
-        :color="colors"
-        :rounded-corners="roundedCorners"
-        :bar-padding="0.05"
-        :attributes="{
-          [selectorsBar]: {
-            opacity: (d: Data, i:number) => {
-              const pos = i % categories.length
-              return legendItems[pos]?.inactive ? filterOpacity : 1
-            },
-          },
-        }"
-      />
-
-      <VisAxis
-        v-if="showXAxis"
-        type="x"
-        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
-        :grid-line="false"
-        :tick-line="false"
-        tick-text-color="hsl(var(--vis-text-color))"
-      />
-      <VisAxis
-        v-if="showYAxis"
-        type="y"
-        :tick-line="false"
-        :tick-format="yFormatter"
-        :domain-line="false"
-        :grid-line="showGridLine"
-        :attributes="{
-          [Axis.selectors.grid]: {
-            class: 'text-muted',
-          },
-        }"
-        tick-text-color="hsl(var(--vis-text-color))"
-      />
-
-      <slot />
-    </VisXYContainer>
-  </div>
-</template>

package/components/ui/chart-bar/index.ts

@@ -1,66 +0,0 @@
-export { default as BarChart } from './BarChart.vue'
-
-import type { Spacing } from '@unovis/ts'
-
-type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
-
-export interface BaseChartProps<T extends Record<string, any>> {
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOf<T>[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOf<T>
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Margin of each the container
-   */
-  margin?: Spacing
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean
-}

package/components/ui/chart-donut/DonutChart.vue

@@ -1,101 +0,0 @@
-<script setup lang="ts" generic="T extends Record<string, any>">
-import type { Component } from 'vue'
-import type { BaseChartProps } from '.'
-import { ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'
-import { cn } from '@/lib/utils'
-import { Donut } from '@unovis/ts'
-import { VisDonut, VisSingleContainer } from '@unovis/vue'
-import { useMounted } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
-  /**
-   * Sets the name of the key containing the quantitative chart values.
-   */
-  category: KeyOfT
-  /**
-   * Change the type of the chart
-   * @default "donut"
-   */
-  type?: 'donut' | 'pie'
-  /**
-   * Function to sort the segment
-   */
-  sortFunction?: (a: any, b: any) => number | undefined
-  /**
-   * Controls the formatting for the label.
-   */
-  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
-  /**
-   * Render custom tooltip component.
-   */
-  customTooltip?: Component
-}>(), {
-  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
-  sortFunction: () => undefined,
-  valueFormatter: (tick: number) => `${tick}`,
-  type: 'donut',
-  filterOpacity: 0.2,
-  showTooltip: true,
-  showLegend: true,
-})
-
-type KeyOfT = Extract<keyof T, string>
-type Data = typeof props.data[number]
-
-const category = computed(() => props.category as KeyOfT)
-const index = computed(() => props.index as KeyOfT)
-
-const isMounted = useMounted()
-const activeSegmentKey = ref<string>()
-const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))
-const legendItems = computed(() => props.data.map((item, i) => ({
-  name: item[props.index],
-  color: colors.value[i],
-  inactive: false,
-})))
-
-const totalValue = computed(() => props.data.reduce((prev, curr) => {
-  return prev + curr[props.category]
-}, 0))
-</script>
-
-<template>
-  <div :class="cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')">
-    <VisSingleContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
-      <ChartSingleTooltip
-        :selector="Donut.selectors.segment"
-        :index="category"
-        :items="legendItems"
-        :value-formatter="valueFormatter"
-        :custom-tooltip="customTooltip"
-      />
-
-      <VisDonut
-        :value="(d: Data) => d[category]"
-        :sort-function="sortFunction"
-        :color="colors"
-        :arc-width="type === 'donut' ? 20 : 0"
-        :show-background="false"
-        :central-label="type === 'donut' ? valueFormatter(totalValue) : ''"
-        :events="{
-          [Donut.selectors.segment]: {
-            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {
-              if (d?.data?.[index] === activeSegmentKey) {
-                activeSegmentKey = undefined
-                elements.forEach(el => el.style.opacity = '1')
-              }
-              else {
-                activeSegmentKey = d?.data?.[index]
-                elements.forEach(el => el.style.opacity = `${filterOpacity}`)
-                elements[i].style.opacity = '1'
-              }
-            },
-          },
-        }"
-      />
-
-      <slot />
-    </VisSingleContainer>
-  </div>
-</template>

package/components/ui/chart-donut/index.ts

@@ -1,39 +0,0 @@
-export { default as DonutChart } from './DonutChart.vue'
-
-import type { Spacing } from '@unovis/ts'
-
-type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
-
-export interface BaseChartProps<T extends Record<string, any>> {
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[]
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOf<T>
-  /**
-   * Change the default colors.
-   */
-  colors?: string[]
-  /**
-   * Margin of each the container
-   */
-  margin?: Spacing
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean
-}

package/components/ui/chart-line/LineChart.vue

@@ -1,107 +0,0 @@
-<script setup lang="ts" generic="T extends Record<string, any>">
-import type { BulletLegendItemInterface } from '@unovis/ts'
-import type { Component } from 'vue'
-import type { BaseChartProps } from '.'
-import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
-import { cn } from '@/lib/utils'
-import { Axis, CurveType, Line } from '@unovis/ts'
-
-import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
-import { useMounted } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-const props = withDefaults(defineProps<BaseChartProps<T> & {
-  /**
-   * Render custom tooltip component.
-   */
-  customTooltip?: Component
-  /**
-   * Type of curve
-   */
-  curveType?: CurveType
-}>(), {
-  curveType: CurveType.MonotoneX,
-  filterOpacity: 0.2,
-  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
-  showXAxis: true,
-  showYAxis: true,
-  showTooltip: true,
-  showLegend: true,
-  showGridLine: true,
-})
-
-const emits = defineEmits<{
-  legendItemClick: [d: BulletLegendItemInterface, i: number]
-}>()
-
-type KeyOfT = Extract<keyof T, string>
-type Data = typeof props.data[number]
-
-const index = computed(() => props.index as KeyOfT)
-const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
-
-const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
-  name: category,
-  color: colors.value[i],
-  inactive: false,
-})))
-
-const isMounted = useMounted()
-
-function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  emits('legendItemClick', d, i)
-}
-</script>
-
-<template>
-  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
-    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
-
-    <VisXYContainer
-      :margin="{ left: 20, right: 20 }"
-      :data="data"
-      :style="{ height: isMounted ? '100%' : 'auto' }"
-    >
-      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
-
-      <template v-for="(category, i) in categories" :key="category">
-        <VisLine
-          :x="(d: Data, i: number) => i"
-          :y="(d: Data) => d[category]"
-          :curve-type="curveType"
-          :color="colors[i]"
-          :attributes="{
-            [Line.selectors.line]: {
-              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
-            },
-          }"
-        />
-      </template>
-
-      <VisAxis
-        v-if="showXAxis"
-        type="x"
-        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
-        :grid-line="false"
-        :tick-line="false"
-        tick-text-color="hsl(var(--vis-text-color))"
-      />
-      <VisAxis
-        v-if="showYAxis"
-        type="y"
-        :tick-line="false"
-        :tick-format="yFormatter"
-        :domain-line="false"
-        :grid-line="showGridLine"
-        :attributes="{
-          [Axis.selectors.grid]: {
-            class: 'text-muted',
-          },
-        }"
-        tick-text-color="hsl(var(--vis-text-color))"
-      />
-
-      <slot />
-    </VisXYContainer>
-  </div>
-</template>