{"id":31948189,"url":"https://github.com/markusbegerow/powerbi-navigation-menu","last_synced_at":"2025-10-14T11:54:47.787Z","repository":{"id":318322225,"uuid":"1070670394","full_name":"markusbegerow/powerbi-navigation-menu","owner":"markusbegerow","description":"Interactive navigation menu visual for Power BI with slide-out filtering and hierarchical data support","archived":false,"fork":false,"pushed_at":"2025-10-06T13:05:52.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-06T15:09:24.178Z","etag":null,"topics":["business-intelligence","d3js","data-visualization","filter","hamburger-menu","navigation","powerbi","powerbi-custom-visuals","powerbi-visuals","typescript"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markusbegerow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-06T09:26:38.000Z","updated_at":"2025-10-06T13:14:07.000Z","dependencies_parsed_at":"2025-10-06T15:09:29.704Z","dependency_job_id":"b3075dd3-c938-4494-9375-cf440ca94249","html_url":"https://github.com/markusbegerow/powerbi-navigation-menu","commit_stats":null,"previous_names":["markusbegerow/powerbi-navigation-menu"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/markusbegerow/powerbi-navigation-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusbegerow%2Fpowerbi-navigation-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusbegerow%2Fpowerbi-navigation-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusbegerow%2Fpowerbi-navigation-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusbegerow%2Fpowerbi-navigation-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markusbegerow","download_url":"https://codeload.github.com/markusbegerow/powerbi-navigation-menu/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markusbegerow%2Fpowerbi-navigation-menu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019043,"owners_count":26086518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["business-intelligence","d3js","data-visualization","filter","hamburger-menu","navigation","powerbi","powerbi-custom-visuals","powerbi-visuals","typescript"],"created_at":"2025-10-14T11:54:46.396Z","updated_at":"2025-10-14T11:54:47.772Z","avatar_url":"https://github.com/markusbegerow.png","language":null,"funding_links":["https://paypal.me/MarkusBegerow?country.x=DE\u0026locale.x=de_DE"],"categories":[],"sub_categories":[],"readme":"# Power BI Navigation Menu Visual\n\n\u003cdiv align=\"center\"\u003e\n\n![Power BI](https://img.shields.io/badge/Power%20BI-Custom%20Visual-F2C811?style=for-the-badge\u0026logo=powerbi\u0026logoColor=black)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.5.4-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![D3.js](https://img.shields.io/badge/D3.js-7.9.0-F9A03C?style=for-the-badge\u0026logo=d3.js\u0026logoColor=white)\n![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)\n\n**A sleek, interactive navigation menu visual for Power BI with slide-out filtering capabilities**\n\n[Features](#features) • [Installation](#installation) • [Usage](#usage) • [Configuration](#configuration) • [Development](#development)\n\n\u003c/div\u003e\n\n---\n\n## Overview\n\nThe **Navigation Menu Visual** is a powerful Power BI custom visual that provides an elegant slide-out menu interface for filtering and navigating your data. With support for both standard and hierarchical data structures, this visual transforms complex filtering operations into an intuitive, user-friendly experience.\n\n## Features\n\n### Core Functionality\n- **Navigation Menu Interface** - Clean, space-saving button that opens a slide-out panel\n- **Interactive Filtering** - Click-to-filter functionality with multi-selection support\n- **Hierarchical Data Support** - Intelligent detection and rendering of parent-child relationships\n- **Collapsible Sections** - Expand/collapse filter categories to manage screen space\n- **Search Functionality** - Built-in search boxes for quick value filtering\n- **Clear Selections** - Individual \"Clear\" buttons for each filter category\n\n### User Experience\n- **Smooth Animations** - Polished slide-in/slide-out transitions\n- **Overlay Background** - Semi-transparent overlay for focus and easy closing\n- **Responsive Design** - Adapts to various screen sizes and orientations\n- **Empty State Handling** - Helpful prompts when no data is available\n\n### Customization Options\n- **Menu Position** - Choose between left or right placement\n- **Custom Colors** - Configurable background and button colors\n- **Adjustable Width** - Set menu panel width to your preference\n- **Overlay Opacity** - Control background overlay transparency\n\n### Technical Features\n- **Power BI API 5.3.0** - Built on the latest Power BI visuals API\n- **TypeScript** - Type-safe, maintainable codebase\n- **D3.js Integration** - Leverages powerful data visualization capabilities\n- **Performance Optimized** - Efficient rendering with up to 1000 data points per category\n\n## Installation\n\n### Option 1: Import Pre-built Visual\n\n1. Download the latest `.pbiviz` file from the releases section\n2. In Power BI Desktop, click on the **\"...\"** in the Visualizations pane\n3. Select **\"Import a visual from a file\"**\n4. Choose the downloaded `.pbiviz` file\n5. The Navigation Menu Visual will appear in your Visualizations pane\n\n### Option 2: Build from Source\n\n```bash\n# Clone the repository\ngit clone https://github.com/markusbegerow/powerbi-navigation-menu.git\ncd powerbi-navigation-menu/NavigationMenuVisual\n\n# Install dependencies\nnpm install\n\n# Build the visual\nnpm run package\n```\n\nThe packaged `.pbiviz` file will be created in the `dist` folder.\n\n## Usage\n\n### Quick Start\n\n1. **Add the Visual** - Click the Navigation Menu icon in the Visualizations pane\n2. **Add Data** - Drag fields into the \"Filters\" data role\n3. **Configure** - Customize appearance in the Format pane\n4. **Interact** - Click the hamburger button to open the filter menu\n\n### Adding Filters\n\n#### Standard Filters\nSimply drag any categorical field to the \"Filters\" field well. Each unique field becomes a collapsible filter section with checkboxes for each value.\n\n#### Hierarchical Filters\nThe visual automatically detects hierarchical relationships when you add multiple levels from the same hierarchy. For example:\n- Category → Subcategory → Product\n- Country → State → City\n\nThe visual will render these as expandable tree structures with parent-child relationships.\n\n### Working with Selections\n\n- **Select/Deselect** - Click any checkbox or label to toggle selection\n- **Multi-Select** - Select multiple values across different categories\n- **Clear Category** - Use the \"Clear\" button to reset a specific category\n- **Clear All** - Deselect all values by using Clear on each category\n- **Search** - Type in the search box to filter visible values\n\n### Opening and Closing the Menu\n\n- **Open** - Click the hamburger button (☰) in the top-left corner\n- **Close** - Click the × button, click the overlay, or click the hamburger again\n\n## Configuration\n\nAccess these settings through the Format pane when the visual is selected.\n\n### Menu Settings\n\n| Setting | Type | Description | Default |\n|---------|------|-------------|---------|\n| **Menu Position** | Enumeration | Position of slide-out panel (Left/Right) | Left |\n| **Menu Width** | Numeric | Width of the menu panel in pixels | 380px |\n| **Background Color** | Color | Background color of the menu panel | #FFFFFF |\n| **Button Color** | Color | Color of the hamburger button | #333333 |\n| **Overlay Opacity** | Numeric | Transparency of background overlay (0-100%) | 50% |\n\n### Data Settings\n\n- **Maximum Values per Category**: 1000 (automatic data reduction)\n- **Supports Highlighting**: Yes\n- **Multi-Selection**: Enabled by default\n\n## Visual Structure\n\n```\nNavigationMenuVisual/\n├── src/\n│   ├── visual.ts          # Main visual logic\n│   └── settings.ts        # Formatting settings model\n├── style/\n│   └── visual.less        # Visual styling\n├── assets/\n│   └── icon.png          # Visual icon\n├── capabilities.json      # Visual capabilities definition\n├── pbiviz.json           # Visual metadata\n├── package.json          # Node dependencies\n└── tsconfig.json         # TypeScript configuration\n```\n\n## Development\n\n### Prerequisites\n\n- Node.js (v14 or higher)\n- npm or yarn\n- Power BI Custom Visuals Tools (`pbiviz`)\n\n### Setup Development Environment\n\n```bash\n# Install Power BI tools globally\nnpm install -g powerbi-visuals-tools\n\n# Navigate to the visual directory\ncd NavigationMenuVisual\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n```\n\nThe visual will be available at `https://localhost:8080/assets/status` and automatically reload on file changes.\n\n### Development Commands\n\n```bash\n# Start development server with live reload\nnpm start\n\n# Build production package\nnpm run package\n\n# Run ESLint\nnpm run lint\n\n# Run pbiviz commands\nnpm run pbiviz\n```\n\n### Testing in Power BI\n\n1. Start the development server with `npm start`\n2. In Power BI Desktop, enable Developer Mode:\n   - File → Options and settings → Options\n   - PREVIEW FEATURES → Developer visual\n3. The developer visual will appear in the Visualizations pane\n4. Add it to your report and start testing\n\n### Project Dependencies\n\n#### Runtime Dependencies\n- `powerbi-visuals-api` (~5.3.0) - Power BI Visuals API\n- `powerbi-visuals-utils-formattingmodel` (6.0.4) - Formatting utilities\n- `d3` (7.9.0) - Data visualization library\n- `@types/d3` (7.4.3) - TypeScript definitions for D3\n\n#### Development Dependencies\n- `typescript` (5.5.4) - TypeScript compiler\n- `eslint` (^9.11.1) - Linting\n- `@typescript-eslint/eslint-plugin` (^8.8.0) - TypeScript ESLint rules\n- `eslint-plugin-powerbi-visuals` (^1.0.0) - Power BI specific linting rules\n\n## Architecture\n\n### Key Components\n\n**Visual Class** (`src/visual.ts`)\n- Main visual implementation\n- Handles data processing and rendering\n- Manages user interactions and selections\n\n**Filter Processing**\n- Automatic hierarchy detection based on field relationships\n- Unique value extraction and sorting\n- Selection state management\n\n**UI Components**\n- Burger button with icon animation\n- Slide-out panel with smooth transitions\n- Collapsible filter sections\n- Search boxes for quick filtering\n- Hierarchical tree rendering for parent-child data\n\n### Data Flow\n\n```\nPower BI Data → processData() → Filter Categories → renderFilters() → DOM\n                                                                        ↓\nUser Interaction → Selection Manager ← toggleSelection() ← Event Handlers\n```\n\n## Browser Support\n\n- Microsoft Edge (Chromium)\n- Google Chrome\n- Mozilla Firefox\n- Safari (latest versions)\n\n## Troubleshooting\n\n### Visual Not Loading\n- Ensure you're using Power BI Desktop (latest version)\n- Check that custom visuals are enabled in your organization settings\n- Verify the `.pbiviz` file is not corrupted\n\n### Filters Not Working\n- Confirm fields are added to the \"Filters\" data role\n- Check that the data contains valid categorical values\n- Ensure relationships between hierarchical fields are properly defined\n\n### Performance Issues\n- Limit the number of unique values per category (\u003c 1000 recommended)\n- Reduce the number of active filter categories\n- Consider using slicers for very large datasets\n\n## Roadmap\n\n- [ ] Multi-language support\n- [ ] Custom icons for categories\n- [ ] Export/import filter configurations\n- [ ] Bookmark integration\n- [ ] Advanced search with regex support\n- [ ] Keyboard navigation\n- [ ] Theme presets (Dark mode, High contrast)\n\n## Contributing\n\nContributions are welcome! Please follow these steps:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\nPlease ensure your code:\n- Follows the existing code style\n- Passes ESLint checks (`npm run lint`)\n- Includes appropriate comments and documentation\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgments\n\n- Built with [Power BI Custom Visuals Tools](https://github.com/Microsoft/PowerBI-visuals-tools)\n- Styled with inspiration from modern UI/UX principles\n- Powered by [D3.js](https://d3js.org/) for data manipulation\n\n## 🙋‍♂️ Get Involved\n\nFor issues, questions, or suggestions:\n- Open an issue on [GitHub](https://github.com/markusbegerow/powerbi-navigation-menu/issues)\n- Check existing issues for solutions\n- Provide detailed reproduction steps for bugs\n\n## ☕ Support the Project\n\nIf you like this project, support further development with a repost or coffee:\n\n\u003ca href=\"https://www.linkedin.com/sharing/share-offsite/?url=https://github.com/MarkusBegerow/powerbi-navigation-menu\" target=\"_blank\"\u003e \u003cimg src=\"https://img.shields.io/badge/💼-Share%20on%20LinkedIn-blue\" /\u003e \u003c/a\u003e\n\n[![Buy Me a Coffee](https://img.shields.io/badge/☕-Buy%20me%20a%20coffee-yellow)](https://paypal.me/MarkusBegerow?country.x=DE\u0026locale.x=de_DE)\n\n## 📬 Contact\n\n- 🧑‍💻 [Markus Begerow](https://linkedin.com/in/markusbegerow)\n- 💾 [GitHub](https://github.com/markusbegerow)\n- ✉️ [Twitter](https://x.com/markusbegerow)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ for the Power BI Community**\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkusbegerow%2Fpowerbi-navigation-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkusbegerow%2Fpowerbi-navigation-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkusbegerow%2Fpowerbi-navigation-menu/lists"}