adminforth 2.22.0-next.29 → 2.22.0-next.30

package/dist/spa/src/afcl/TreeMapChart.vue

@@ -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>

package/dist/spa/src/afcl/index.ts

@@ -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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.22.0-next.29",
+  "version": "2.22.0-next.30",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",