diff --git a/docs/_includes/components/power-bi-wizard.html b/docs/_includes/components/power-bi-wizard.html new file mode 100644 index 000000000..5b8168f30 --- /dev/null +++ b/docs/_includes/components/power-bi-wizard.html @@ -0,0 +1,227 @@ + +
+
+

🚀 Get started with Power BI reports

+

New to Power BI? This wizard will help you set up reports step by step.

+
+ + +
+
+ +
+
+
+
+
+
Step 1 of 4
+
+ +
+

💡 What are you trying to do?

+

Let's start with the basics. What's your goal with Power BI reports?

+ +
+ + + + + +
+ +
+ +
+
+ +
+

⚙️ Set up your data source

+ + + + + + + +
+ + +
+
+ +
+

📥 Download your reports

+ +
+ + + + +
+
📖 Next steps after download:
+
    +
  1. Extract the ZIP file to a folder on your computer
    2. +
  2. Open Power BI Desktop (download from powerbi.microsoft.com)
    3. +
  3. Enable preview features: File → Options → Preview features → Power BI Project (.pbip)
    4. +
  4. Open any .pbip file from the extracted folder
    5. +
+
+
+ +
+ + +
+
+ +
+

🔗 Connect your data

+ +
+ + + + +
+
🔐 Authentication:
+

When prompted, sign in with an account that has access to your data source:

+
    +
  • Storage: Storage Blob Data Reader access or higher
    • +
  • Data Explorer: Viewer access to the Hub database
    • +
+
+ +
+
🎉 You're all set!
+

Once connected, you can publish your reports to the Power BI service to share with your team.

+ 📚 View detailed setup guide +
+
+ +
+ + +
+
+
+ + + +
\ No newline at end of file diff --git a/docs/_includes/head_custom.html b/docs/_includes/head_custom.html index f036a4beb..7cbccc615 100644 --- a/docs/_includes/head_custom.html +++ b/docs/_includes/head_custom.html @@ -28,5 +28,187 @@ event.target.parentElement.classList.toggle('ftk-active'); }); } + + // Power BI Wizard functionality + initPowerBIWizard(); }); + + function initPowerBIWizard() { + const wizard = document.querySelector('.ftk-wizard'); + if (!wizard) return; + + const beginnerBtn = wizard.querySelector('.ftk-wizard-beginner'); + const advancedBtn = wizard.querySelector('.ftk-wizard-advanced'); + const beginnerContent = wizard.querySelector('.ftk-beginner-mode'); + const advancedContent = wizard.querySelector('.ftk-advanced-mode'); + + let currentStep = 1; + const totalSteps = 4; + let selectedPath = ''; + + // Mode switching + if (beginnerBtn && advancedBtn) { + beginnerBtn.addEventListener('click', () => { + setMode('beginner'); + }); + + advancedBtn.addEventListener('click', () => { + setMode('advanced'); + }); + } + + function setMode(mode) { + if (mode === 'beginner') { + beginnerBtn?.classList.add('btn-primary'); + beginnerBtn?.classList.remove('btn'); + advancedBtn?.classList.add('btn'); + advancedBtn?.classList.remove('btn-primary'); + beginnerContent.style.display = 'block'; + advancedContent.style.display = 'none'; + } else { + advancedBtn?.classList.add('btn-primary'); + advancedBtn?.classList.remove('btn'); + beginnerBtn?.classList.add('btn'); + beginnerBtn?.classList.remove('btn-primary'); + beginnerContent.style.display = 'none'; + advancedContent.style.display = 'block'; + } + } + + // Step navigation + const steps = wizard.querySelectorAll('.ftk-wizard-step'); + const nextBtns = wizard.querySelectorAll('.ftk-next'); + const backBtns = wizard.querySelectorAll('.ftk-back'); + const restartBtn = wizard.querySelector('.ftk-restart'); + + // Option selection + const options = wizard.querySelectorAll('input[name="use-case"]'); + options.forEach(option => { + option.addEventListener('change', () => { + selectedPath = option.value; + updateNextButton(); + showPathContent(); + }); + }); + + // Progress tracking + const progressCheckboxes = wizard.querySelectorAll('.ftk-progress-checkbox'); + progressCheckboxes.forEach(checkbox => { + checkbox.addEventListener('change', updateProgress); + }); + + function updateProgress() { + const checked = wizard.querySelectorAll('.ftk-progress-checkbox:checked').length; + const total = progressCheckboxes.length; + const percentage = total > 0 ? (checked / total) * 100 : 0; + + const progressFill = wizard.querySelector('.ftk-progress-fill'); + if (progressFill) { + progressFill.style.width = percentage + '%'; + } + } + + function updateNextButton() { + const currentStepEl = wizard.querySelector('.ftk-wizard-step.ftk-active'); + const nextBtn = currentStepEl?.querySelector('.ftk-next'); + + if (currentStep === 1) { + if (nextBtn) { + nextBtn.disabled = !selectedPath; + } + } else { + if (nextBtn) { + nextBtn.disabled = false; + } + } + } + + function showPathContent() { + // Hide all path-specific content + wizard.querySelectorAll('[class*="ftk-path-"]').forEach(el => { + el.style.display = 'none'; + }); + + // Show content for selected path + if (selectedPath) { + wizard.querySelectorAll(`.ftk-path-${selectedPath}`).forEach(el => { + el.style.display = 'block'; + }); + } + } + + function goToStep(step) { + // Hide all steps + steps.forEach(s => s.classList.remove('ftk-active')); + + // Show target step + const targetStep = wizard.querySelector(`.ftk-step-${step}`); + if (targetStep) { + targetStep.classList.add('ftk-active'); + currentStep = step; + updateStepProgress(); + updateNextButton(); + showPathContent(); + } + } + + function updateStepProgress() { + const progressFill = wizard.querySelector('.ftk-progress-fill'); + const currentStepSpan = wizard.querySelector('.current-step'); + const totalStepsSpan = wizard.querySelector('.total-steps'); + + if (progressFill) { + const percentage = (currentStep / totalSteps) * 100; + progressFill.style.width = percentage + '%'; + } + + if (currentStepSpan) { + currentStepSpan.textContent = currentStep; + } + + if (totalStepsSpan) { + totalStepsSpan.textContent = totalSteps; + } + } + + // Navigation event listeners + nextBtns.forEach(btn => { + btn.addEventListener('click', () => { + if (currentStep < totalSteps) { + goToStep(currentStep + 1); + } + }); + }); + + backBtns.forEach(btn => { + btn.addEventListener('click', () => { + if (currentStep > 1) { + goToStep(currentStep - 1); + } + }); + }); + + if (restartBtn) { + restartBtn.addEventListener('click', () => { + currentStep = 1; + selectedPath = ''; + goToStep(1); + + // Reset form + options.forEach(option => { + option.checked = false; + }); + + progressCheckboxes.forEach(checkbox => { + checkbox.checked = false; + }); + + updateProgress(); + }); + } + + // Initialize + updateStepProgress(); + updateNextButton(); + } diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss index f61531035..fe92efb7b 100644 --- a/docs/_sass/custom/custom.scss +++ b/docs/_sass/custom/custom.scss @@ -102,6 +102,319 @@ a[target='_blank']:hover::after { } } +// Power BI Onboarding Wizard Styles +.ftk-wizard { + border: 1px solid #6f4bb2; + border-radius: 8px; + margin: 2rem 0; + + .ftk-wizard-header { + background: linear-gradient(135deg, #6f4bb2, #8b6ec7); + color: white; + padding: 2rem; + border-radius: 8px 8px 0 0; + text-align: center; + + h3 { + margin: 0 0 0.5rem 0; + color: white; + } + + p { + margin: 0 0 1.5rem 0; + opacity: 0.9; + } + } + + .ftk-wizard-toggle { + display: flex; + gap: 1rem; + justify-content: center; + + button { + min-width: 180px; + + &.btn-primary { + background-color: white; + color: #6f4bb2; + border-color: white; + + &:hover { + background-color: #f8f9fa; + color: #6f4bb2; + } + } + } + } + + .ftk-wizard-content { + padding: 2rem; + } + + .ftk-wizard-progress { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; + + .ftk-progress-bar { + flex: 1; + height: 8px; + background-color: #e9ecef; + border-radius: 4px; + margin-right: 1rem; + overflow: hidden; + + .ftk-progress-fill { + height: 100%; + background: linear-gradient(90deg, #6f4bb2, #8b6ec7); + border-radius: 4px; + transition: width 0.3s ease; + } + } + + .ftk-progress-text { + font-size: 0.875rem; + color: #6c757d; + white-space: nowrap; + } + } + + .ftk-wizard-step { + display: none; + + &.ftk-active { + display: block; + } + + h4 { + margin-top: 0; + color: #6f4bb2; + } + } + + .ftk-wizard-options { + margin: 1.5rem 0; + + .ftk-option { + display: block; + margin-bottom: 1rem; + cursor: pointer; + + input[type="radio"] { + display: none; + } + + .ftk-option-content { + border: 2px solid #e9ecef; + border-radius: 8px; + padding: 1.5rem; + transition: all 0.2s ease; + + &:hover { + border-color: #6f4bb2; + background-color: #6f4bb211; + } + + strong { + display: block; + margin-bottom: 0.5rem; + color: #495057; + } + + p { + margin: 0; + color: #6c757d; + font-size: 0.875rem; + } + } + + input:checked + .ftk-option-content { + border-color: #6f4bb2; + background-color: #6f4bb233; + + strong { + color: #6f4bb2; + } + } + } + } + + .ftk-recommendation { + background: linear-gradient(135deg, #d4edda, #c3e6cb); + border: 1px solid #28a745; + border-radius: 8px; + padding: 1.5rem; + margin-bottom: 1.5rem; + + h5 { + margin: 0 0 0.5rem 0; + color: #155724; + } + + p { + margin: 0; + color: #155724; + } + } + + .ftk-setup-checklist { + margin: 1.5rem 0; + + h6 { + margin-bottom: 1rem; + color: #495057; + } + + .ftk-checklist { + label { + display: block; + margin-bottom: 1.5rem; + + input[type="checkbox"] { + margin-right: 0.5rem; + } + + > span { + font-weight: 500; + } + } + + .ftk-help { + margin-top: 0.5rem; + padding-left: 1.5rem; + + .btn-sm { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + } + + .ftk-details { + margin-top: 0.5rem; + + summary { + cursor: pointer; + font-size: 0.875rem; + color: #6f4bb2; + } + + p { + margin: 0.5rem 0 0 0; + font-size: 0.875rem; + color: #6c757d; + padding-left: 1rem; + } + } + } + } + } + + .ftk-download-section, .ftk-connection-guide { + .ftk-download-help, .ftk-auth-guide { + margin-top: 2rem; + padding-top: 1.5rem; + border-top: 1px solid #e9ecef; + + h6 { + color: #495057; + margin-bottom: 1rem; + } + + ol, ul { + font-size: 0.875rem; + color: #6c757d; + + li { + margin-bottom: 0.5rem; + } + } + + code { + background-color: #f8f9fa; + color: #e83e8c; + padding: 0.125rem 0.25rem; + border-radius: 3px; + font-size: 0.75rem; + } + } + } + + .ftk-parameter { + margin-bottom: 1.5rem; + + strong { + display: block; + margin-bottom: 0.5rem; + color: #6f4bb2; + } + + p { + margin: 0 0 0.5rem 0; + font-size: 0.875rem; + color: #6c757d; + } + + code { + display: block; + background-color: #f8f9fa; + color: #e83e8c; + padding: 0.5rem; + border-radius: 4px; + font-size: 0.875rem; + margin-top: 0.5rem; + } + } + + .ftk-success { + background: linear-gradient(135deg, #d1ecf1, #bee5eb); + border: 1px solid #17a2b8; + border-radius: 8px; + padding: 1.5rem; + margin-top: 2rem; + text-align: center; + + h5 { + margin: 0 0 0.5rem 0; + color: #0c5460; + } + + p { + margin: 0 0 1rem 0; + color: #0c5460; + } + } + + .ftk-wizard-navigation { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 2rem; + padding-top: 1.5rem; + border-top: 1px solid #e9ecef; + + .ftk-back { + margin-right: auto; + } + + .ftk-next, .ftk-restart { + margin-left: auto; + } + + button:disabled { + opacity: 0.5; + cursor: not-allowed; + } + } + + .ftk-advanced-links { + h4 { + margin-top: 0; + color: #6f4bb2; + } + } +} + .ftk-instructions { .ftk-step { .ftk-accordion { diff --git a/docs/power-bi.md b/docs/power-bi.md index a9dae9a1c..b68c7da20 100644 --- a/docs/power-bi.md +++ b/docs/power-bi.md @@ -12,7 +12,7 @@ permalink: /power-bi Accelerate your analytics efforts with simple, targeted reports. Summarize and break costs down, or customize to meet your needs. {: .fs-6 .fw-300 } -Deploy +Get started Documentation --- @@ -65,11 +65,19 @@ FinOps toolkit Power BI reports provide a great starting point for FinOps report FinOps toolkit Power BI reports do not incur any cost beyond the required Power BI licenses and underlying data storage costs.

+ + +## Get started with Power BI reports + +Choose your experience level to get the right guidance for your needs. + +{% include components/power-bi-wizard.html %} + -## Deploy Power BI reports +## Advanced deployment options -Create a new or update an existing FinOps hub instance. +For experienced users who want full control over the setup process.