origam 2.3.0 → 2.5.0

package/dist/src/components/Chart/OrigamChart.vue

@@ -0,0 +1,882 @@
+<template>
+	<origam-chart-cartesian
+			v-if="isCartesianType"
+			v-bind="cartesianProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-cartesian>
+
+	<origam-chart-polar
+			v-else-if="isPolarType"
+			v-bind="polarProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-polar>
+
+	<origam-chart-radar
+			v-else-if="isRadarType"
+			v-bind="radarProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-radar>
+
+	<origam-chart-gauge
+			v-else-if="isGaugeType"
+			v-bind="gaugeProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-gauge>
+
+	<origam-chart-pyramid
+			v-else-if="isPyramidType"
+			v-bind="pyramidProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-pyramid>
+
+	<origam-chart-honeycomb
+			v-else-if="isHoneycombType"
+			v-bind="honeycombProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-honeycomb>
+
+	<origam-chart-treemap
+			v-else-if="isTreemapType"
+			v-bind="treemapProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-treemap>
+
+	<origam-chart-sankey
+			v-else-if="isSankeyType"
+			v-bind="sankeyProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-sankey>
+
+	<origam-chart-word-cloud
+			v-else-if="isWordCloudType"
+			v-bind="wordCloudProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-word-cloud>
+
+	<origam-chart-heatmap
+			v-else-if="isHeatmapType"
+			v-bind="heatmapProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-heatmap>
+
+	<origam-chart-sunburst
+			v-else-if="isSunburstType"
+			v-bind="sunburstProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-sunburst>
+
+	<origam-chart-box-plot
+			v-else-if="isBoxPlotType"
+			v-bind="boxPlotProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-box-plot>
+
+	<origam-chart-pictorial
+			v-else-if="isPictorialType"
+			v-bind="pictorialProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-pictorial>
+
+	<origam-chart-candlestick
+			v-else-if="isCandlestickType"
+			v-bind="candlestickProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-candlestick>
+
+	<origam-chart-streamgraph
+			v-else-if="isStreamgraphType"
+			v-bind="streamgraphProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-streamgraph>
+
+	<origam-chart-variwide
+			v-else-if="isVariwideType"
+			v-bind="variwideProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-variwide>
+
+	<origam-chart-polar-bar
+			v-else-if="isPolarBarType"
+			v-bind="polarBarProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-polar-bar>
+
+	<origam-chart-bullet
+			v-else-if="isBulletType"
+			v-bind="bulletProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-bullet>
+
+	<origam-chart-pareto
+			v-else-if="isParetoType"
+			v-bind="paretoProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-pareto>
+
+	<origam-chart-map
+			v-else-if="isMapType"
+			v-bind="mapProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-map>
+
+	<origam-chart-sparkline
+			v-else-if="isSparklineType"
+			v-bind="sparklineProps"
+			:data-cy="dataCyAttr"
+			@point-click="onPointClick"
+			@legend-click="onLegendClick"
+			@series-toggle="onSeriesToggle"
+	>
+		<template
+				v-for="(_, name) in $slots"
+				#[name]="slotBindings"
+		>
+			<slot
+					:name="name"
+					v-bind="slotBindings ?? {}"
+			/>
+		</template>
+	</origam-chart-sparkline>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import OrigamChartCartesian from "./OrigamChartCartesian.vue";
+import OrigamChartGauge from "./OrigamChartGauge.vue";
+import OrigamChartHoneycomb from "./OrigamChartHoneycomb.vue";
+import OrigamChartPolar from "./OrigamChartPolar.vue";
+import OrigamChartPyramid from "./OrigamChartPyramid.vue";
+import OrigamChartRadar from "./OrigamChartRadar.vue";
+import OrigamChartBoxPlot from "./OrigamChartBoxPlot.vue";
+import OrigamChartCandlestick from "./OrigamChartCandlestick.vue";
+import OrigamChartHeatmap from "./OrigamChartHeatmap.vue";
+import OrigamChartPictorial from "./OrigamChartPictorial.vue";
+import OrigamChartSankey from "./OrigamChartSankey.vue";
+import OrigamChartStreamgraph from "./OrigamChartStreamgraph.vue";
+import OrigamChartBullet from "./OrigamChartBullet.vue";
+import OrigamChartMap from "./OrigamChartMap.vue";
+import OrigamChartPareto from "./OrigamChartPareto.vue";
+import OrigamChartSparkline from "./OrigamChartSparkline.vue";
+import OrigamChartPolarBar from "./OrigamChartPolarBar.vue";
+import OrigamChartVariwide from "./OrigamChartVariwide.vue";
+import OrigamChartSunburst from "./OrigamChartSunburst.vue";
+import OrigamChartTreemap from "./OrigamChartTreemap.vue";
+import OrigamChartWordCloud from "./OrigamChartWordCloud.vue";
+import {
+  CHART_CARTESIAN_KIND,
+  CHART_POLAR_KIND,
+  CHART_PYRAMID_KIND,
+  CHART_TYPE
+} from "../../enums";
+defineOptions({
+  name: "OrigamChart"
+});
+const props = defineProps({
+  type: { type: null, required: false, default: "line" },
+  series: { type: Array, required: true },
+  categories: { type: Array, required: false, default: () => [] },
+  title: { type: String, required: false, default: void 0 },
+  subtitle: { type: String, required: false, default: void 0 },
+  showLegend: { type: Boolean, required: false, default: true },
+  legendPosition: { type: String, required: false, default: "bottom" },
+  showTooltip: { type: Boolean, required: false, default: true },
+  showGrid: { type: Boolean, required: false, default: true },
+  showAxis: { type: Boolean, required: false, default: true },
+  animated: { type: Boolean, required: false, default: true },
+  animationDuration: { type: Number, required: false, default: 600 },
+  stacked: { type: Boolean, required: false, default: false },
+  stacking: { type: null, required: false },
+  donutHoleSize: { type: Number, required: false, default: 0.6 },
+  colorScheme: { type: Array, required: false, default: () => [] },
+  xAxisFormat: { type: Function, required: false, default: void 0 },
+  yAxisFormat: { type: Function, required: false, default: void 0 },
+  aspectRatio: { type: String, required: false, default: void 0 },
+  smoothing: { type: String, required: false, default: "none" },
+  yMin: { type: Number, required: false, default: void 0 },
+  yMax: { type: Number, required: false, default: void 0 },
+  gaugeMin: { type: Number, required: false, default: 0 },
+  gaugeMax: { type: Number, required: false, default: 100 },
+  gaugeUnit: { type: String, required: false, default: "" },
+  plotBands: { type: Array, required: false },
+  plotLines: { type: Array, required: false },
+  annotations: { type: Array, required: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  height: { type: [Number, String], required: false, default: 300 },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
+});
+const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+const CARTESIAN_TYPES = Object.values(CHART_CARTESIAN_KIND);
+const POLAR_TYPES = Object.values(CHART_POLAR_KIND);
+const PYRAMID_TYPES = Object.values(CHART_PYRAMID_KIND);
+const isCartesianType = computed(() => CARTESIAN_TYPES.includes(props.type));
+const isPolarType = computed(() => POLAR_TYPES.includes(props.type));
+const isRadarType = computed(() => props.type === CHART_TYPE.RADAR);
+const isGaugeType = computed(() => props.type === CHART_TYPE.GAUGE);
+const isPyramidType = computed(() => PYRAMID_TYPES.includes(props.type));
+const isHoneycombType = computed(() => props.type === CHART_TYPE.HONEYCOMB);
+const isTreemapType = computed(() => props.type === CHART_TYPE.TREEMAP);
+const isSankeyType = computed(() => props.type === CHART_TYPE.SANKEY);
+const isWordCloudType = computed(() => props.type === CHART_TYPE.WORD_CLOUD);
+const isHeatmapType = computed(() => props.type === CHART_TYPE.HEATMAP);
+const isSunburstType = computed(() => props.type === CHART_TYPE.SUNBURST);
+const isBoxPlotType = computed(() => props.type === CHART_TYPE.BOX_PLOT);
+const isPictorialType = computed(() => props.type === CHART_TYPE.PICTORIAL);
+const isCandlestickType = computed(() => props.type === CHART_TYPE.CANDLESTICK);
+const isStreamgraphType = computed(() => props.type === CHART_TYPE.STREAMGRAPH);
+const isVariwideType = computed(() => props.type === CHART_TYPE.VARIWIDE);
+const isPolarBarType = computed(() => props.type === CHART_TYPE.POLAR_BAR);
+const isBulletType = computed(() => props.type === CHART_TYPE.BULLET);
+const isParetoType = computed(() => props.type === CHART_TYPE.PARETO);
+const isMapType = computed(() => props.type === CHART_TYPE.MAP);
+const isSparklineType = computed(() => props.type === CHART_TYPE.SPARKLINE);
+const dataCyAttr = computed(() => `origam-chart origam-chart--${props.type}`);
+const cartesianProps = computed(() => ({
+  type: props.type,
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  showGrid: props.showGrid,
+  showAxis: props.showAxis,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  stacked: props.stacked,
+  stacking: props.stacking,
+  colorScheme: props.colorScheme,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat,
+  aspectRatio: props.aspectRatio,
+  smoothing: props.smoothing,
+  yMin: props.yMin,
+  yMax: props.yMax,
+  plotBands: props.plotBands,
+  plotLines: props.plotLines,
+  annotations: props.annotations,
+  secondaryYAxis: props.secondaryYAxis,
+  drilldown: props.drilldown
+}));
+const polarProps = computed(() => ({
+  type: props.type,
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  donutHoleSize: props.donutHoleSize,
+  colorScheme: props.colorScheme,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat,
+  aspectRatio: props.aspectRatio,
+  drilldown: props.drilldown
+}));
+const radarProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio
+}));
+const gaugeProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: false,
+  legendPosition: props.legendPosition,
+  showTooltip: false,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  gaugeMin: props.gaugeMin,
+  gaugeMax: props.gaugeMax,
+  gaugeUnit: props.gaugeUnit
+}));
+const pyramidProps = computed(() => ({
+  type: props.type,
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat
+}));
+const honeycombProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat
+}));
+const treemapProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  yAxisFormat: props.yAxisFormat
+}));
+const sankeyProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat
+}));
+const wordCloudProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  yAxisFormat: props.yAxisFormat
+}));
+const heatmapProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  showAxis: props.showAxis,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat
+}));
+const sunburstProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  yAxisFormat: props.yAxisFormat
+}));
+const boxPlotProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  showAxis: props.showAxis,
+  showGrid: props.showGrid,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat,
+  yMin: props.yMin,
+  yMax: props.yMax
+}));
+const pictorialProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  showAxis: props.showAxis,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat
+}));
+const candlestickProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  showAxis: props.showAxis,
+  showGrid: props.showGrid,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat,
+  yMin: props.yMin,
+  yMax: props.yMax
+}));
+const streamgraphProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  showAxis: props.showAxis,
+  showGrid: props.showGrid,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat
+}));
+const variwideProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  showAxis: props.showAxis,
+  showGrid: props.showGrid,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat,
+  yMin: props.yMin,
+  yMax: props.yMax
+}));
+const polarBarProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  colorScheme: props.colorScheme,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat
+}));
+const bulletProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  categories: props.categories,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  showAxis: props.showAxis,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat
+}));
+const paretoProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  showAxis: props.showAxis,
+  showGrid: props.showGrid,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  aspectRatio: props.aspectRatio,
+  xAxisFormat: props.xAxisFormat,
+  yAxisFormat: props.yAxisFormat
+}));
+const mapProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  title: props.title,
+  subtitle: props.subtitle,
+  showLegend: props.showLegend,
+  legendPosition: props.legendPosition,
+  showTooltip: props.showTooltip,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  aspectRatio: props.aspectRatio,
+  yAxisFormat: props.yAxisFormat
+}));
+const sparklineProps = computed(() => ({
+  series: seriesWithVisibility.value,
+  height: props.height,
+  width: props.width,
+  animated: props.animated,
+  animationDuration: props.animationDuration,
+  aspectRatio: props.aspectRatio
+}));
+const onPointClick = (point, originalEvent) => {
+  emit("point-click", point, originalEvent);
+};
+const onLegendClick = (series, index) => {
+  emit("legend-click", series, index);
+};
+const hiddenSeries = ref(/* @__PURE__ */ new Set());
+const seriesWithVisibility = computed(
+  () => props.series.map((s) => ({
+    ...s,
+    visible: !hiddenSeries.value.has(s.name)
+  }))
+);
+const onSeriesToggle = (series, visible) => {
+  if (visible) hiddenSeries.value.delete(series.name);
+  else hiddenSeries.value.add(series.name);
+  emit("series-toggle", series, visible);
+};
+</script>