Improvement - VueUiTreemap - Add home icon on breadcrumbs

Author: graphieros

package.json

@@ -107,4 +107,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.13"
   }
-}
+}

src/atoms/BaseIcon.vue

@@ -178,7 +178,8 @@ const icons = computed(() => {
         chartFunnel: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 9 18 C 10 19 11 18 11 18 L 12 10 L 18 5 L 18 3 C 18 3 18 2 17 2 L 3 2 C 3 2 2 2 2 3 L 2 5 L 8 10 L 9 18 M 4 4 C 7 6 13 6 16 4"/>`,
         chartHistoryPlot: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 4 4 A 1 1 0 0 0 6 4 A 1 1 0 0 0 4 4 M 12 2 A 1 1 0 0 0 12 4 A 1 1 0 0 0 12 2 M 17 7 A 1 1 0 0 0 17 9 A 1 1 0 0 0 17 7 M 12 14 A 1 1 0 0 0 12 16 A 1 1 0 0 0 12 14 M 5 12 A 1 1 0 0 0 5 14 A 1 1 0 0 0 5 12 M 6 4 L 11 3 M 12.84 3.582 L 16.267 7.265 M 16.625 8.953 L 12.763 14.297 M 10.999 14.732 L 5.987 13.326 M 1 1 L 1 19 L 19 19"/>`,
         chartTableSparkline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 1 L 7 1 L 7 5 L 1 5 L 1 1 M 1 8 L 7 8 L 7 12 L 1 12 L 1 8 M 1 15 L 7 15 L 7 19 L 1 19 L 1 15 M 9 3 C 9.3333 2.3333 9.261 1.027 10 1 C 11 2 10.139 4.975 11.421 5.009 C 12.231 5.009 12 3 13 3 C 14 4 14.053 4.03 14 4 C 16 4 16 1 17 1 C 18 1 18 3 19 3 M 9 12 C 9.3333 11 9.126 9.531 10 9 C 11 9 11 11 11.759 11.084 C 12.771 10.915 12.231 8.012 13.21 8.012 C 14.29 7.945 14 12 15 12 C 16 12 16 10 17 10 C 18 10 18 11 19 11 M 9 16 C 9.6667 17 9.734 18.981 10.645 19.048 C 11.691 18.609 11.117 14.965 12 15 C 13 15 12.636 17.158 13.682 17.293 C 15 17 14 15 15 15 C 16 15 16 19 17 19 C 18 19 18 15 19 15" />`,
-        chartCirclePack: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 10 7 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 7 M 5 5 A 1 1 0 0 0 7.716 8.039 A 1 1 0 0 0 5 5 M 13 4 A 1 1 0 0 0 11.354 7.322 A 1 1 0 0 0 13 4 M 8.506 12.628 A 1 1 0 0 0 5.05 16.755 A 1 1 0 0 0 8.506 12.628 M 14.965 6.988 A 1 1 0 0 0 13.535 9.758 A 1 1 0 0 0 14.965 6.988 M 16 11 A 1 1 0 0 0 13.084 14.742 A 1 1 0 0 0 16 11"/>`
+        chartCirclePack: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 10 7 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 7 M 5 5 A 1 1 0 0 0 7.716 8.039 A 1 1 0 0 0 5 5 M 13 4 A 1 1 0 0 0 11.354 7.322 A 1 1 0 0 0 13 4 M 8.506 12.628 A 1 1 0 0 0 5.05 16.755 A 1 1 0 0 0 8.506 12.628 M 14.965 6.988 A 1 1 0 0 0 13.535 9.758 A 1 1 0 0 0 14.965 6.988 M 16 11 A 1 1 0 0 0 13.084 14.742 A 1 1 0 0 0 16 11"/>`,
+        home: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 6 L 10 2 L 18 6 M 4 7 L 4 17 C 4 18 4 18 5 18 L 8 18 L 8 12 L 12 12 L 12 18 L 15 18 C 16 18 16 18 16 17 L 16 7 M 8 18 L 12 18"/>`
     }
 });
 

src/components/vue-ui-treemap.vue

@@ -38,6 +38,7 @@ import PackageVersion from '../atoms/PackageVersion.vue';
 import PenAndPaper from '../atoms/PenAndPaper.vue';
 import { useUserOptionState } from '../useUserOptionState';
 import { useChartAccessibility } from '../useChartAccessibility';
+import BaseIcon from '../atoms/BaseIcon.vue';
 
 const { vue_ui_treemap: DEFAULT_CONFIG } = useConfig()
 
@@ -721,8 +722,15 @@ defineExpose({
                     class="vue-ui-treemap-crumb-unit"
                 >
                     <span class="vue-ui-treemap-crumb-unit-label">
-                        <slot name="breadcrumb-label" v-bind="{crumb}">
-                            {{ crumb.label }}
+                        <slot name="breadcrumb-label" v-bind="{ crumb, isRoot: i === 0 }">
+                            <template v-if="i === 0">
+                                <div style="width: 24px; display:flex; align-items:center">
+                                    <BaseIcon name="home" :stroke="FINAL_CONFIG.style.chart.color"/>
+                                </div>
+                            </template>
+                            <template v-else>
+                                {{ crumb.label }}
+                            </template>
                         </slot>
                     </span>
 

types/vue-data-ui.d.ts

@@ -1151,7 +1151,8 @@ declare module "vue-data-ui" {
         | "unstack"
         | "vueDataUi"
         | "zoomMinus"
-        | "zoomPlus";
+        | "zoomPlus"
+        | "home";
 
     export const VueUiIcon: DefineComponent<{
         name: VueUiIconName;