chart

1<script setup lang="ts">
2import { computed, toRefs, useId } from 'vue';
3import { provideChartContext } from '../../context';
4import { chartContainerVariants } from '../../styles/chart-container';
5import SChartStyle from '../chart-style/chart-style.vue';
6import type { ChartContainerProps, ChartContainerSlots } from './types';
7 
8defineOptions({
9  name: 'SChartContainer'
10});
11 
12const props = withDefaults(defineProps<ChartContainerProps>(), {
13  cursor: true
14});
15 
16defineSlots<ChartContainerSlots>();
17 
18const { config } = toRefs(props);
19const uniqueId = useId();
20 
21const chartId = computed(() => `chart-${props.id ?? uniqueId.replace(/:/g, '')}`);
22 
23const cls = computed(() => chartContainerVariants(undefined, props.class));
24 
25const containerStyle = computed(() => ({
26  '--vis-tooltip-padding': '0px',
27  '--vis-tooltip-background-color': 'transparent',
28  '--vis-tooltip-border-color': 'transparent',
29  '--vis-tooltip-text-color': 'none',
30  '--vis-tooltip-shadow-color': 'none',
31  '--vis-tooltip-backdrop-filter': 'none',
32  '--vis-crosshair-circle-stroke-color': '#0000',
33  '--vis-crosshair-line-stroke-width': props.cursor ? '1px' : '0px',
34  '--vis-font-family': 'var(--font-sans)'
35}));
36 
37provideChartContext({ id: chartId.value, config });
38</script>
39 
40<template>
41  <div data-slot="chart" :data-chart="chartId" :class="cls" :style="containerStyle">
42    <slot :id="chartId" :config="config" />
43    <SChartStyle :id="chartId" />
44  </div>
45</template>