Power Bi Visualization Expert

Data Relationship -> Recommended Visuals:

Comparison:
- Bar/Column Charts: Comparing categories
- Line Charts: Trends over time
- Scatter Plots: Correlation between measures
- Waterfall Charts: Sequential changes

Composition:
- Pie Charts: Parts of a whole (≤7 categories)
- Stacked Charts: Sub-categories within categories
- Treemap: Hierarchical composition
- Donut Charts: Multiple measures as parts of whole

Distribution:
- Histogram: Distribution of values
- Box Plot: Statistical distribution
- Scatter Plot: Distribution patterns
- Heat Map: Distribution across two dimensions

Relationship:
- Scatter Plot: Correlation analysis
- Bubble Chart: Three-dimensional relationships
- Network Diagram: Complex relationships
- Sankey Diagram: Flow analysis

Page Layout Best Practices:

Information Hierarchy:
1. Most Important: Top-left quadrant
2. Key Metrics: Header area
3. Supporting Details: Lower sections
4. Filters/Controls: Left panel or top

Visual Arrangement:
- Follow Z-pattern reading flow
- Group related visuals together
- Use consistent spacing and alignment
- Maintain visual balance
- Provide clear navigation paths

Executive Dashboard Elements:
✅ Key Performance Indicators (KPIs)
✅ Trend indicators with clear direction
✅ Exception highlighting
✅ Drill-down capabilities
✅ Consistent color scheme
✅ Minimal text, maximum insight

Layout Structure:
- Header: Company logo, report title, last refresh
- KPI Row: 3-5 key metrics with trend indicators
- Main Content: 2-3 key visualizations
- Footer: Data source, refresh info, navigation

Analytical Report Components:
✅ Multiple levels of detail
✅ Interactive filtering options
✅ Comparative analysis capabilities
✅ Drill-through to detailed views
✅ Export and sharing options
✅ Contextual help and tooltips

Navigation Patterns:
- Tab navigation for different views
- Bookmark navigation for scenarios
- Drillthrough for detailed analysis
- Button navigation for guided exploration

Operational Report Features:
✅ Real-time or near real-time data
✅ Exception-based highlighting
✅ Action-oriented design
✅ Mobile-optimized layout
✅ Quick refresh capabilities
✅ Clear status indicators

Design Considerations:
- Minimal cognitive load
- Clear call-to-action elements
- Status-based color coding
- Prioritized information display

Effective Tooltip Patterns:

Default Tooltips:
- Include relevant context
- Show additional metrics
- Format numbers appropriately
- Keep concise and readable

Report Page Tooltips:
- Design dedicated tooltip pages
- 320x240 pixel optimal size
- Complementary information
- Visual consistency with main report
- Test with realistic data

Implementation Tips:
- Use for additional detail, not different perspective
- Ensure fast loading
- Maintain visual brand consistency
- Include help information where needed

Drillthrough Design Patterns:

Transaction-Level Detail:
Source: Summary visual (monthly sales)
Target: Detailed transactions for that month
Filter: Automatically applied based on selection

Broader Context:
Source: Specific item (product ID)
Target: Comprehensive product analysis
Content: Performance, trends, comparisons

Best Practices:
✅ Clear visual indication of drillthrough availability
✅ Consistent styling across drillthrough pages
✅ Back button for easy navigation
✅ Contextual filters properly applied
✅ Hidden drillthrough pages from navigation

Cross-Filtering Optimization:

When to Enable:
✅ Related visuals on same page
✅ Clear logical connections
✅ Enhances user understanding
✅ Reasonable performance impact

When to Disable:
❌ Independent analysis requirements
❌ Performance concerns
❌ Confusing user interactions
❌ Too many visuals on page

Implementation:
- Edit interactions thoughtfully
- Test with realistic data volumes
- Consider mobile experience
- Provide clear visual feedback

Visual Count Recommendations:
- Maximum 6-8 visuals per page
- Consider multiple pages vs crowded single page
- Use tabs or navigation for complex scenarios
- Monitor Performance Analyzer results

Query Optimization:
- Minimize complex DAX in visuals
- Use measures instead of calculated columns
- Avoid high-cardinality filters
- Implement appropriate aggregation levels

Loading Optimization:
- Apply filters early in design process
- Use page-level filters where appropriate
- Consider DirectQuery implications
- Test with realistic data volumes

Mobile Design Principles:

Layout Considerations:
- Portrait orientation primary
- Touch-friendly interaction targets
- Simplified navigation
- Reduced visual density
- Key metrics emphasized

Visual Adaptations:
- Larger fonts and buttons
- Simplified chart types
- Minimal text overlays
- Clear visual hierarchy
- Optimized color contrast

Testing Approach:
- Use mobile layout view in Power BI Desktop
- Test on actual devices
- Verify touch interactions
- Check readability in various conditions

Color Usage Best Practices:

Semantic Colors:
- Green: Positive, growth, success
- Red: Negative, decline, alerts
- Blue: Neutral, informational
- Orange: Warnings, attention needed

Accessibility Considerations:
- Minimum 4.5:1 contrast ratio
- Don't rely solely on color for meaning
- Consider colorblind-friendly palettes
- Test with accessibility tools
- Provide alternative visual cues

Branding Integration:
- Use corporate color schemes consistently
- Maintain professional appearance
- Ensure colors work across visualizations
- Consider printing/export scenarios

Text Guidelines:

Font Recommendations:
- Sans-serif fonts for digital display
- Minimum 10pt font size
- Consistent font hierarchy
- Limited font family usage

Hierarchy Implementation:
- Page titles: 18-24pt, bold
- Section headers: 14-16pt, semi-bold
- Body text: 10-12pt, regular
- Captions: 8-10pt, light

Content Strategy:
- Concise, action-oriented labels
- Clear axis titles and legends
- Meaningful chart titles
- Explanatory subtitles where needed

Custom Visual Selection Criteria:

Evaluation Framework:
✅ Active community support
✅ Regular updates and maintenance
✅ Microsoft certification (preferred)
✅ Clear documentation
✅ Performance characteristics

Implementation Guidelines:
- Test thoroughly with your data
- Consider governance and approval process
- Monitor performance impact
- Plan for maintenance and updates
- Have fallback visualization strategy

Dynamic Visual Enhancement:

Data Bars and Icons:
- Use for quick visual scanning
- Implement consistent scales
- Choose appropriate icon sets
- Consider mobile visibility

Background Colors:
- Heat map style formatting
- Status-based coloring
- Performance indicator backgrounds
- Threshold-based highlighting

Font Formatting:
- Size based on values
- Color based on performance
- Bold for emphasis
- Italics for secondary information

Testing Checklist:

Functionality:
□ All interactions work as expected
□ Filters apply correctly
□ Drillthrough functions properly
□ Export features operational
□ Mobile experience acceptable

Performance:
□ Page load times under 10 seconds
□ Interactions responsive (<3 seconds)
□ No visual rendering errors
□ Appropriate data refresh timing

Usability:
□ Intuitive navigation
□ Clear data interpretation
□ Appropriate level of detail
□ Actionable insights
□ Accessible to target users

Testing Matrix:

Desktop Browsers:
- Chrome (latest)
- Firefox (latest)
- Edge (latest)
- Safari (latest)

Mobile Devices:
- iOS tablets and phones
- Android tablets and phones
- Various screen resolutions
- Touch interaction verification

Power BI Apps:
- Power BI Desktop
- Power BI Service
- Power BI Mobile apps
- Power BI Embedded scenarios

// Complete report theme JSON structure
{
  "name": "Corporate Theme",
  "dataColors": ["#31B6FD", "#4584D3", "#5BD078", "#A5D028", "#F5C040", "#05E0DB", "#3153FD", "#4C45D3", "#5BD0B0", "#54D028", "#D0F540", "#057BE0"],
  "background": "#FFFFFF",
  "foreground": "#F2F2F2",
  "tableAccent": "#5BD078",
  "visualStyles": {
    "*": {
      "*": {
        "*": [
          {
            "wordWrap": true
          }
        ],
        "categoryAxis": [
          {
            "gridlineStyle": "dotted"
          }
        ],
        "filterCard": [
          {
            "$id": "Applied",
            "foregroundColor": { "solid": { "color": "#252423" } }
          },
          {
            "$id": "Available",
            "border": true
          }
        ]
      }
    },
    "scatterChart": {
      "*": {
        "bubbles": [
          {
            "bubbleSize": -10
          }
        ]
      }
    }
  }
}

// Advanced embedded report layout configuration
let models = window["powerbi-client"].models;

let embedConfig = {
  type: "report",
  id: reportId,
  embedUrl: "https://app.powerbi.com/reportEmbed",
  tokenType: models.TokenType.Embed,
  accessToken: "H4...rf",
  settings: {
    layoutType: models.LayoutType.Custom,
    customLayout: {
      pageSize: {
        type: models.PageSizeType.Custom,
        width: 1600,
        height: 1200,
      },
      displayOption: models.DisplayOption.ActualSize,
      pagesLayout: {
        ReportSection1: {
          defaultLayout: {
            displayState: {
              mode: models.VisualContainerDisplayMode.Hidden,
            },
          },
          visualsLayout: {
            VisualContainer1: {
              x: 1,
              y: 1,
              z: 1,
              width: 400,
              height: 300,
              displayState: {
                mode: models.VisualContainerDisplayMode.Visible,
              },
            },
            VisualContainer2: {
              displayState: {
                mode: models.VisualContainerDisplayMode.Visible,
              },
            },
          },
        },
      },
    },
  },
};

// Creating visuals programmatically with custom positioning
const customLayout = {
  x: 20,
  y: 35,
  width: 1600,
  height: 1200,
};

let createVisualResponse = await page.createVisual("areaChart", customLayout, false /* autoFocus */);

// Interface for visual layout configuration
interface IVisualLayout {
  x?: number;
  y?: number;
  z?: number;
  width?: number;
  height?: number;
  displayState?: IVisualContainerDisplayState;
}

// Power BI Report FactBox integration in Business Central
pageextension 50100 SalesInvoicesListPwrBiExt extends "Sales Invoice List"
{
    layout
    {
        addfirst(factboxes)
        {
            part("Power BI Report FactBox"; "Power BI Embedded Report Part")
            {
                ApplicationArea = Basic, Suite;
                Caption = 'Power BI Reports';
            }
        }
    }

    trigger OnAfterGetCurrRecord()
    begin
        // Gets data from Power BI to display data for the selected record
        CurrPage."Power BI Report FactBox".PAGE.SetCurrentListSelection(Rec."No.");
    end;
}