feat: add MixedChart component to components library

adminforth/documentation/docs/tutorial/03-Customization/14-afcl.md

@@ -1612,4 +1612,53 @@ import { PieChart } from '@/afcl'
   </div>
 </div>
 
+## Mixed Chart
+
+```ts
+import { MixedChart } from '@/afcl'
+```
+
+### Basic
+
+<div class="split-screen" >
+
+  <div>
+  ```html
+  <MixedChart
+    :data="[
+      { x: '02 Jun 2025', avgPrice: 100, listedPrice: 100, unlistedPrice: 100},
+      { x: '03 Jun 2025', avgPrice: 280, listedPrice: 130, unlistedPrice: 200},
+      { x: '04 Jun 2025', avgPrice: 150, listedPrice: 90, unlistedPrice: 60},
+      { x: '05 Jun 2025', avgPrice: 100, listedPrice: 100, unlistedPrice: 100},
+      { x: '06 Jun 2025', avgPrice: 200, listedPrice: 290, unlistedPrice: 180},
+      { x: '07 Jun 2025', avgPrice: 100, listedPrice: 100, unlistedPrice: 100},
+    ]"
+    :series="[
+      { name: $t('Avg Price'), fieldName: 'avgPrice', type: 'line', color: COLORS[0] },
+      { name: $t('Listed Price'), fieldName: 'listedPrice', type: 'column', color: COLORS[1] },
+      { name: $t('Unlisted Price'), fieldName: 'unlistedPrice', type: 'area', color: COLORS[2] },
+
+    ]"
+    :options="{
+      chart: {
+        height: 350,
+      },
+      stroke: {
+        width: [6, 0, 6],  // Line: 6px, Column: 0px (no border), Area: 6px
+      },
+      fill: {
+        opacity: [1, 0.85, 0.25], // Line: 1, Column: 0.85, Area: 0.25
+      },
+    }"
+  />
+  ```
+</div>
+  <div>
+    ![Mixed Chart](image-91.png)
+  </div>
+</div>
+
+
+
+
 

adminforth/spa/src/afcl/MixedChart.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="-mb-2" ref="chart"></div>
+</template>
+
+<script setup lang="ts">
+import ApexCharts, { type ApexOptions } from 'apexcharts';
+import { ref, onUnmounted, watch, computed } from 'vue';
+
+const props = defineProps<{
+  data: {
+    x: string,
+    [key: string]: any,
+  }[],
+  series: {
+    name: string,
+    fieldName: string,
+    color?: string,
+    type: 'column' | 'area' | 'line',
+  }[],
+  options?: ApexOptions,
+}>();
+
+const chart = ref<HTMLElement | null>(null);
+
+const optionsBase = {
+  chart: {
+    height: 250,
+    type: 'line',
+    stacked: false,
+    fontFamily: "Inter, sans-serif",
+    toolbar: {
+      show: false,
+    }
+  },
+  stroke: {
+    curve: 'smooth',
+  },
+  grid: {
+    show: false,
+    strokeDashArray: 4,
+    padding: {
+      left: 3,
+      right: 3,
+      top: 3,
+      bottom: 3
+    },
+  },
+  xaxis: {
+    categories: [],
+    labels: {
+      show: false,
+    },
+    axisBorder: {
+      show: false,
+    },
+    axisTicks: {
+      show: false,
+    },
+  },
+  yaxis: {
+    show: false,
+  },
+};
+
+const chartOptions = computed(() => {
+  if (props.data?.length > 0) {
+    props.series.forEach((s) => {
+      if (props.data[0][s.fieldName] === undefined) {
+        throw new Error(`Field ${s.fieldName} not found even in first data point ${JSON.stringify(props.data[0])}, something is wrong`);
+      }
+    });
+  }
+
+  const options = {
+    ...optionsBase,
+    series: props.series.map((s) => ({
+      name: s.name,
+      type: s.type,
+      color: s.color,
+      data: props.data?.map((item) => item[s.fieldName]) ?? [],
+    })),
+    labels: props.data?.map((item) => item.x) ?? [],
+  };
+
+  function mergeOptions(options: any, newOptions: any) {
+    if (!newOptions) {
+      return;
+    }
+    for (const key in newOptions) {
+      if (typeof newOptions[key] === 'object' && !Array.isArray(newOptions[key])) {
+        if (!options[key]) {
+          options[key] = {};
+        }
+        mergeOptions(options[key], newOptions[key]);
+      } else {
+        options[key] = newOptions[key];
+      }
+    }
+  }
+  mergeOptions(options, props.options);
+
+  return options;
+});
+
+let apexChart: ApexCharts | null = null;
+
+
+watch(() => [chartOptions.value, chart.value], ([newOptions, newRef]) => {
+  if (!newOptions || !newRef) {
+    return;
+  }
+
+  if (apexChart) {
+    apexChart.updateOptions(newOptions);
+  } else if (chart.value) {
+    apexChart = new ApexCharts(chart.value, newOptions);
+    apexChart.render();
+  }
+}, { deep: true });
+
+onUnmounted(() => {
+  if (apexChart) {
+    apexChart.destroy();
+  }
+});
+</script>

adminforth/spa/src/afcl/index.ts

@@ -17,5 +17,6 @@ export { default as ProgressBar } from './ProgressBar.vue';
 export { default as Spinner } from './Spinner.vue';
 export { default as Skeleton } from './Skeleton.vue';
 export { default as Dialog } from './Dialog.vue';
+export { default as MixedChart } from './MixedChart.vue';