Merge branch 'next' of github.com:devforth/adminforth into next

Author: yaroslav8765

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

@@ -2120,8 +2120,87 @@ import { PieChart } from '@/afcl'
   </div>
 </div>
 
+## Treemap Chart
+
+This example is based on the ApexCharts treemap demo “color range”.
+
+<div class="split-screen" >
+  <div >
+
+```ts
+import { TreeMapChart } from '@/afcl'
+
+const deltaToColor = (delta: number) => {
+  if (delta < -10) return '#B91C1C' // bright red
+  if (delta < 0) return '#EF4444'   // red
+  if (delta <= 10) return '#22C55E' // green
+  return '#15803D'                 // very green
+}
+
+const formatDelta = (delta: number) => (delta > 0 ? `+${delta}%` : `${delta}%`)
+
+const data = [
+  { x: 'New Delhi', value: 218, delta: 12 },
+  { x: 'Kolkata', value: 149, delta: -4 },
+  { x: 'Mumbai', value: 184, delta: -14 },
+  { x: 'Ahmedabad', value: 55, delta: 6 },
+  { x: 'Bangalore', value: 84, delta: 9 },
+  { x: 'Pune', value: 31, delta: -2 },
+  { x: 'Chennai', value: 70, delta: 0 }
+]
+
+// Optional: precompute per-point color using delta
+const dataWithColors = data.map((item) => ({
+  ...item,
+  fillColor: deltaToColor(item.delta),
+}))
+
+const series = [
+  { name: 'Desktops', fieldName: 'value' },
+]
+```
+
+```html
+<TreeMapChart
+  :data="dataWithColors"
+  :series="series"
+  :options="{
+    chart: { height: 350 },
+    dataLabels: {
+      formatter: (text, { seriesIndex, dataPointIndex, w }) => {
+        const point = w?.config?.series?.[seriesIndex]?.data?.[dataPointIndex]
+        if (!point) return text
+        return `${text} ${formatDelta(point.delta)}`
+      },
+    },
+    plotOptions: {
+      treemap: {
+        distributed: false,
+        enableShades: false,
+      },
+    },
+    tooltip: {
+      y: {
+        formatter: (value, { seriesIndex, dataPointIndex, w }) => {
+          const point = w?.config?.series?.[seriesIndex]?.data?.[dataPointIndex]
+          if (!point) return value
+          return `${point.value} (${formatDelta(point.delta)})`
+        },
+      },
+    },
+  }"
+/>
+```
+
+  </div>
+  <div>
+  ![Treemap Chart](image-28.png)
+  </div>
+</div>
+
 ## Mixed Chart
 
+
 ```ts
 import { MixedChart } from '@/afcl'
 ```

adminforth/documentation/docs/tutorial/03-Customization/image-28.png

@@ -0,0 +1,136 @@
+<template>
+  <div class="afcl-treemap -mb-2" ref="chart"></div>
+</template>
+
+<script setup lang="ts">
+import ApexCharts, { type ApexOptions } from 'apexcharts';
+import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+
+const chart: Ref<HTMLDivElement | null> = ref(null);
+
+const props = defineProps<{
+  data: {
+    x: string,
+    [key: string]: any,
+  }[],
+  series: {
+    name: string,
+    fieldName: string,
+  }[],
+  options?: ApexOptions,
+}>();
+
+const optionsBase: ApexOptions = {
+  chart: {
+    height: 350,
+    type: 'treemap',
+    fontFamily: 'Inter, sans-serif',
+    toolbar: {
+      show: false,
+    },
+  },
+  legend: {
+    show: false,
+  },
+  dataLabels: {
+    enabled: true,
+    style: {
+      fontFamily: 'Inter, sans-serif',
+      colors: ['#FFFFFF'],
+    },
+  },
+  plotOptions: {
+    treemap: {
+      distributed: true,
+      enableShades: false,
+    },
+  },
+};
+
+const options = 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 nextOptions: ApexOptions = {
+    ...optionsBase,
+    series: props.series.map((s) => ({
+      name: s.name,
+      data: (props.data ?? []).map((item: any) => {
+        const { x, y: _ignoredY, ...rest } = item ?? {};
+        return {
+          x,
+          y: item?.[s.fieldName],
+          ...rest,
+        };
+      }),
+    })),
+  };
+
+  function mergeOptions(target: any, source: any) {
+    if (!source) {
+      return;
+    }
+    for (const key in source) {
+      if (typeof source[key] === 'object' && !Array.isArray(source[key])) {
+        if (!target[key]) {
+          target[key] = {};
+        }
+        mergeOptions(target[key], source[key]);
+      } else {
+        target[key] = source[key];
+      }
+    }
+  }
+
+  mergeOptions(nextOptions, props.options);
+  return nextOptions;
+});
+
+let apexChart: ApexCharts | null = null;
+
+watch(() => [options.value, chart.value], (value) => {
+  if (!value || !chart.value) {
+    return;
+  }
+
+  if (apexChart) {
+    apexChart.updateOptions(options.value);
+  } else {
+    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart.render();
+  }
+});
+
+onUnmounted(() => {
+  if (apexChart) {
+    apexChart.destroy();
+  }
+});
+</script>
+
+<style lang="scss">
+:root {
+  --afcl-treemap-text: #FFFFFF;
+}
+
+[data-theme='dark'] {
+  --afcl-treemap-text: #FFFFFF;
+}
+
+.afcl-treemap {
+  .apexcharts-datalabel {
+    fill: var(--afcl-treemap-text);
+  }
+
+  .apexcharts-legend-text {
+    color: var(--afcl-treemap-text) !important;
+  }
+}
+</style>

adminforth/spa/src/afcl/TreeMapChart.vue

@@ -12,6 +12,7 @@ export { default as Dropzone } from './Dropzone.vue';
 export { default as AreaChart } from './AreaChart.vue';
 export { default as BarChart } from './BarChart.vue';
 export { default as PieChart } from './PieChart.vue';
+export { default as TreeMapChart } from './TreeMapChart.vue';
 export { default as Table } from './Table.vue';
 export { default as ProgressBar } from './ProgressBar.vue';
 export { default as Spinner } from './Spinner.vue';

adminforth/spa/src/afcl/index.ts

@@ -224,6 +224,15 @@
         >
         </Table>
 
+        <div class="w-full">
+          <p class="text-sm font-semibold text-lightPrimary dark:text-darkPrimary mb-2">TreeMapChart (value + delta)</p>
+          <TreeMapChart
+            :data="treemapData"
+            :series="treemapSeries"
+            :options="treemapOptions"
+          />
+        </div>
+
         <Spinner class="w-10 h-10" />
     </div>
 
@@ -336,6 +345,7 @@ import { Toggle } from '@/afcl';
 import { Modal } from '@/afcl';
 import { IconSearchOutline } from '@iconify-prerendered/vue-flowbite'
 import { DatePicker } from '@/afcl';
+import { TreeMapChart } from '@/afcl';
 import CustomRangePicker from "@/components/CustomRangePicker.vue";
 import Toast from '@/components/Toast.vue';
 import { useAdminforth } from '@/adminforth';
@@ -358,6 +368,55 @@ const selected = ref(null)
 const selected2 = ref([])
 const valueStart = ref()
 
+const deltaToColor = (delta: number) => {
+  if (delta < -10) return '#B91C1C' // bright red
+  if (delta < 0) return '#EF4444'   // red
+  if (delta <= 10) return '#22C55E' // green
+  return '#15803D'                 // very green
+}
+
+const formatDelta = (delta: number) => (delta > 0 ? `+${delta}%` : `${delta}%`)
+
+const treemapData = [
+  { x: 'New Delhi', value: 218, delta: 12 },
+  { x: 'Kolkata', value: 149, delta: -4 },
+  { x: 'Mumbai', value: 184, delta: -14 },
+  { x: 'Ahmedabad', value: 55, delta: 6 },
+  { x: 'Bangalore', value: 84, delta: 9 },
+  { x: 'Pune', value: 31, delta: -2 },
+].map((item) => ({
+  ...item,
+  fillColor: deltaToColor(item.delta),
+}))
+
+const treemapSeries = [
+  { name: 'Value', fieldName: 'value' },
+]
+
+const treemapOptions: any = {
+  chart: { height: 350 },
+  dataLabels: {
+    formatter: (text: string, { seriesIndex, dataPointIndex, w }: any) => {
+      const point = w?.config?.series?.[seriesIndex]?.data?.[dataPointIndex]
+      return `${text} ${formatDelta(point.delta)}`
+    },
+  },
+  plotOptions: {
+    treemap: {
+      distributed: false,
+      enableShades: false,
+    },
+  },
+  tooltip: {
+    y: {
+      formatter: (value: any, { seriesIndex, dataPointIndex, w }: any) => {
+        const point = w?.config?.series?.[seriesIndex]?.data?.[dataPointIndex]
+        return `${point.value} (${formatDelta(point.delta)})`
+      },
+    },
+  },
+}
+
 
 watch(valueStart, (newVal) => {
   console.log('New start value:', newVal);