# Class DrilldownBreadcrumbs
DrilldownBreadcrumbs
component from the @sisense/sdk-ui-vue
package.
This component provides a way to display and interact with the drilldown path in data visualization components,
allowing users to navigate through different levels of data drilldowns. It includes functionalities to clear selections
or slice through the drilldown selections for a more intuitive data exploration experience.
# Example
Here's how to use the DrilldownBreadcrumbs
component:
<template>
<DrilldownBreadcrumbs
:clearDrilldownSelections="clearSelections"
:currentDimension="currentDimension"
:sliceDrilldownSelections="sliceSelections"
:filtersDisplayValues="filtersDisplayValues"
/>
</template>
<script>
import { ref } from 'vue';
import DrilldownBreadcrumbs from './DrilldownBreadcrumbs.vue';
export default {
components: { DrilldownBreadcrumbs },
setup() {
const clearSelections = () => {};
const currentDimension = ref({<current dimension object>});
const sliceSelections = (index) => { <logic to slice selections up to index> };
const filtersDisplayValues = ref({<object mapping filter values to display values>});
return { clearSelections, currentDimension, sliceSelections, filtersDisplayValues };
}
};
</script>
# Properties
# Widget
# clearDrilldownSelections
readonly
clearDrilldownSelections?: () =>void
Callback function that is evaluated when the close (X) button is clicked
# Returns
void
# currentDimension
readonly
currentDimension?:Attribute
Currently selected drilldown dimension
# filtersDisplayValues
readonly
filtersDisplayValues?:string
[][]
List of drilldown filters formatted to be displayed as breadcrumbs
# sliceDrilldownSelections
readonly
sliceDrilldownSelections?: (i
) =>void
Callback function that is evaluated when a breadcrumb is clicked
# Parameters
Parameter | Type |
---|---|
i | number |
# Returns
void