33 lines
1.0 KiB
Vue
33 lines
1.0 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { provideChartContext } from './interface';
|
|
|
|
const props = defineProps({
|
|
config: { type: Object, required: false, default: () => ({}) },
|
|
class: { type: [String, Array, Object], required: false },
|
|
cursor: { type: Boolean, default: true },
|
|
id: { type: String, required: false },
|
|
});
|
|
|
|
// Provide context (even if empty) so descendants can attempt to read series config.
|
|
const ctx = provideChartContext(props.config, props.id);
|
|
const chartDomId = computed(() => `chart-${ctx.id}`);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
data-chart-container
|
|
:data-chart="chartDomId"
|
|
:class="['relative w-full flex flex-col', props.class]"
|
|
:style="{
|
|
// Default color variables; series components can override via inline style or CSS theme logic.
|
|
'--vis-primary-color': 'hsl(var(--primary))',
|
|
'--vis-secondary-color': 'hsl(var(--secondary))',
|
|
'--vis-crosshair-line-stroke-width': props.cursor ? '1px' : '0px',
|
|
'--vis-font-family': 'var(--font-sans)',
|
|
}"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</template>
|