@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/sa/coverage/coverage.ts

@@ -0,0 +1,406 @@
+import { LightningElement, api, track } from 'lwc';
+import { ProductArea, FeatureArea, RoadmapFeature } from './types';
+
+export default class coverage extends LightningElement {
+
+    // get the inputs from the config
+    _portfolio: any;
+    _covered: any;
+    _selected: any;
+
+    // hold the coverage data
+    portfolioData: ProductArea[] = [];
+    roadmapData: RoadmapFeature[] = [];
+    totalProductAreas: number = 0;
+    totalFeatureAreas: number = 0;
+    paCoverageCount: number = 0;
+    faCoverageCount: number = 0;
+    paCoveragePct: number = 0;
+    faCoveragePct: number = 0;
+
+    // used to check if the chartjs script loaded
+    scriptLoaded = false;
+
+    // holds the chartjs components 
+    donutChart: any;
+    barChart: any;
+    @track productAreaTitle: string = '';
+    @track featureAreaTitle: string = '';
+
+    // chart settings
+    xlightCloudBlue: string = '#eaf5fe';
+    lightCloudBlue: string = '#90d0fe';
+    medCloudBlue: string = '#0d9dda';
+    inactiveBg: string = '#dbdbdb';
+    inactiveHover: string = '#d3d3d3';
+    selectedPA: ProductArea | undefined;
+
+    constructor() {
+        super();
+    }
+
+    /// this function fires when a component is inserted into the DOM
+    /// we use this function to collect initial data and set up the page:
+    /// gets product and feature json data
+    /// gets roadmap feature data
+    /// adds the chartjs library 
+    async connectedCallback() {
+        
+    }
+
+    setupCharts() {
+        if (this._covered && this._portfolio) {
+            try {
+                
+                this.portfolioData = [...this._portfolio] as ProductArea[];
+                this.portfolioData.sort((a, b) => a.name.localeCompare(b.name));
+                this.roadmapData = [...this._covered] as RoadmapFeature[];
+    
+                this.totalProductAreas = this.portfolioData.length;
+                this.totalFeatureAreas = this.portfolioData.reduce((total, productArea) => {
+                    return total + productArea.feature_areas.length;
+                }, 0);
+
+                // now update the coverage values in the portfolio data
+                this.paCoverageCount = this.portfolioData.filter(pa => pa.covered == true).length;
+                this.paCoveragePct = this.paCoverageCount / this.totalProductAreas * 100;
+    
+                // add the chartsjs library to the dom
+                var script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
+                document.head.appendChild(script);
+                script.onload = () => {
+                    this.scriptLoaded = true;
+                    this.registerCenterLabelPlugin();
+                    this.initializeProductAreaChart();
+                    this.initializeFeatureAreaChart();
+                    this.updateSelectedProductArea(this.donutChart);
+                };
+                
+            } catch (error: any) {
+                console.error("An error occurred getting the portfolio data:", error?.message || String(error));
+            }
+        }
+    }
+
+    /// set up the donut chart for product areas
+    initializeProductAreaChart() {
+
+        // Data for the donut chart
+        const dataDonut = {
+            labels: this.portfolioData.map(area => area.name),
+            datasets: [{
+                data: Array.from({ length: this.totalProductAreas }, () => 100/this.totalProductAreas),
+                backgroundColor: this.portfolioData.map(area => area.covered ? area.colors.light : this.inactiveBg),
+                hoverBackgroundColor: this.portfolioData.map(area => area.covered ? area.colors.xlight : this.inactiveHover),
+                hoverOffset: 10,
+                cutout: "25%"
+            }]
+        };
+
+        // options for donut chart
+        const optionsDonut = {
+            responsive: true,
+            maintainAspectRatio: false,
+            autoPadding: false,
+            hover: false,
+            layout: {
+                padding: {
+                    bottom: 15
+                }
+            },
+            plugins: {
+                legend: {
+                    display: true,
+                    position: "left",
+                    onClick: () => {}
+                },
+                title: {
+                    display: false,
+                    anchor: 'center',
+                    clamp: true,
+                    align: 'center',
+                    fullSize: true,
+                    font: {
+                        family: "Salesforce Sans",
+                        size: 15,
+                        weight: 'normal'
+                    } 
+                },
+                tooltip: {
+                    enabled: true,
+                    label: {
+                        display: false
+                    },
+                    callbacks: {
+                        title: function(context: any) {
+                            return context.label;
+                        },
+                        label: function(context: any) {
+                            return '';
+                        }
+                    }
+                }
+            }
+        };
+        
+        // config for donut
+        const configDonut = {
+            type: 'doughnut',
+            data: dataDonut,
+            options: optionsDonut
+        };
+
+        // Create the Donut chart
+        const chartCanvas = this.template.querySelector("#chartCanvas") as HTMLCanvasElement;
+        if (chartCanvas) {
+            this.donutChart = new (window as any).Chart(chartCanvas, configDonut);
+        } 
+    }
+
+    // set up the plugin to place the % at the center of the donut
+    registerCenterLabelPlugin() {
+        (window as any).Chart.register({
+            id: 'center-label',
+            afterDatasetsDraw: function(chart: any) {
+                if (chart.config.type == 'doughnut') {
+                    var text = chart.config.options.plugins.title.text;
+                    const ctx = chart.ctx;
+                    ctx.save();
+                    const x = chart.getDatasetMeta(0).data[0].x;
+                    const y = chart.getDatasetMeta(0).data[0].y;
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    ctx.font = '18px Salesforce Sans';
+                    ctx.fillText(text, x, y); 
+                }
+            }
+        });
+    }
+
+    // build the datasets for the bar chart when All Product Areas is selected
+    getFeatureAreaChartForEntirePortfolio() {
+        return {
+            labels: this.portfolioData.map(pa => pa.name),     
+            datasets: [{
+                data: this.portfolioData.map(pa => pa.feature_area_coverage),
+                backgroundColor: this.portfolioData.map(pa => (pa.covered) ? pa.colors.light : this.inactiveBg)
+            }]            
+        }; 
+    }
+
+    // build the datasets for the bar chart when one Prod Area is selected
+    getFeatureAreaChartForSelectedProductArea() {
+        if (!this.selectedPA) {
+            return this.getFeatureAreaChartForEntirePortfolio();
+        }
+
+        let dataVal = 100/this.selectedPA.feature_areas.length;
+        return {
+            labels: [`${this.selectedPA.feature_areas_covered} of ${this.selectedPA.feature_areas.length}`],     
+            datasets: this.selectedPA.feature_areas.map(fa => ({
+                data: [dataVal],
+                label: fa.name,
+                backgroundColor: (fa.covered) ? this.selectedPA!.colors.light : this.inactiveBg,
+                borderWidth: 2,
+                borderColor: 'white'
+            }))
+       };
+    }
+
+    // set up the bar chart for feature area coverage
+    initializeFeatureAreaChart() {
+
+        // options for feature bar
+        const optionsBar = {
+            indexAxis: 'y',
+            hover: false,
+            scales: {
+                x: {
+                    display: true,
+                    begingAtZero: true,
+                    min: 0,
+                    max: 100,
+                    stacked: true,
+                    ticks: {
+                        // forces step size to be 50 units
+                        stepSize: 25,
+                        callback: function (value: any) {
+                            return value + '%'; // Appending '%' to the tick value
+                        }
+                    }
+                },
+                y: {
+                    stacked: true,
+                    display: true,
+                    begingAtZero: true,
+                    grouped: false
+                }
+            },
+            plugins: {
+                legend: {
+                    display: false
+                },
+                title: {
+                    display: false,
+                    text: `${this.faCoveragePct.toFixed(0)}% of all feature areas are in this roadmap`,
+                    fullSize: true,
+                    align: 'end',
+                    font: {
+                        family: "Salesforce Sans",
+                        size: 16,
+                        weight: 'normal'
+                    } 
+                }
+                ,tooltip: {
+                    enabled: true,
+                    label: {
+                        display: false
+                    },
+                    callbacks: {
+                        title: function(context: any) {
+                            if (context[0].label.includes(' of ')){
+                                return context[0].dataset.label;
+                            } else {
+                                return context.label;
+                            }
+                        },
+                        label: function(context: any) {
+                            if (context.dataset.label) {
+                                return ''; 
+                            } else {
+                                return `${context.formattedValue}%`;
+                            }
+                        }
+                    }
+                }
+            }
+        };
+
+        // config for features bar
+        const configBar = {
+            type: 'bar',
+            data: this.getFeatureAreaChartForEntirePortfolio(),
+            options: optionsBar
+        };
+
+        const barCanvas = this.template.querySelector("#barCanvas") as HTMLCanvasElement;
+        if (barCanvas) {
+            this.featureAreaTitle = `${this.faCoveragePct.toFixed(0)}% of all feature areas are in this roadmap`;
+            this.barChart = new (window as any).Chart(barCanvas, configBar);
+        }
+
+    }
+
+    // handle product area selection change event
+    updateSelectedProductArea(chart: any) {
+
+        // reset the Donut chart
+        if (chart.getActiveElements().length > 0) {
+            chart.setActiveElements([]);
+            chart.tooltip.setActiveElements([]);
+        }
+
+        // now lets mimic a hover based on the selected product area
+        // first get the selected product area
+        let selectedIndex = -1;
+        selectedIndex = chart.config.data.labels.indexOf(this._selected) as number;
+
+        // check if there is a selection
+        if (selectedIndex != -1) {      
+            // hide the center value
+            chart.config.options.plugins.title.text = '';
+
+            // now lets set the active settings on the selected prod area
+            this.selectedPA = this.portfolioData.find(area => area.name === this._selected);
+            if (this.selectedPA) {
+
+                // update the non active items 
+                chart.config.data.datasets[0].backgroundColor = this.portfolioData.map(area => area.covered ? area.colors.xlight : this.inactiveBg);
+                chart.config.data.datasets[0].backgroundColor[selectedIndex] = this.selectedPA.colors.light;   
+                chart.legend.legendItems[selectedIndex].fillStyle = this.selectedPA.colors.light;
+
+                // update the selected offset and tooltip
+                chart.setActiveElements([
+                    { 
+                        datasetIndex: 0, 
+                        index: selectedIndex 
+                    }
+                ]);
+                chart.tooltip.setActiveElements([
+                    { 
+                        datasetIndex: 0, 
+                        index: selectedIndex 
+                    }
+                ]);
+            }
+
+        } else {
+            // show the center value
+            chart.config.options.plugins.title.text = `${this.paCoveragePct.toFixed(0)}%`;
+            // update the all the items to active 
+            chart.config.data.datasets[0].backgroundColor = this.portfolioData.map(area => area.covered ? area.colors.light : this.inactiveBg);
+        }
+
+        // now update the donut chart and the bar chart
+        chart.update(); 
+        this.updateSelectedFeatureArea(this.barChart);
+    }
+
+    // update the bar chart when product area selection changes
+    updateSelectedFeatureArea(chart: any) {
+
+        // reset the chart
+        if (chart.getActiveElements().length > 0) {
+            chart.setActiveElements([]);
+            chart.tooltip.setActiveElements([]);
+        }  
+        
+        // check if there is a product area selected
+        if (this.selectedPA && this._selected != '') { 
+            chart.config.data = this.getFeatureAreaChartForSelectedProductArea();
+        } else {
+            chart.config.data = this.getFeatureAreaChartForEntirePortfolio();
+        }
+
+        // always update the bar
+        chart.update();
+        
+    }
+
+    /// Below is the getters and setters for inputs
+    @api
+    set portfolio(value: any) {
+        if(this._portfolio !== value && value.length > 0) {
+            this._portfolio = [...value];
+            this.setupCharts();
+        }
+    }
+    get portfolio() {
+        return this._portfolio;
+    }
+
+    @api
+    set covered(value: any) {
+        if(this._covered !== value && value.length > 0) {
+            this._covered = [...value];
+            this.setupCharts();
+        }
+    }
+    get covered() {
+        return this._covered;
+    }
+
+    @api
+    set selected(value: any) {
+        if(this._selected !== value) {
+            this._selected = value;
+            if (this.scriptLoaded) {
+                this.updateSelectedProductArea(this.donutChart);
+            }     
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
+}

package/src/modules/sa/coverage/types.d.ts

@@ -0,0 +1,26 @@
+export type ProductArea = {
+    name: string;
+    colors: Colors;
+    covered: boolean;
+    feature_areas_covered: number;
+    feature_area_coverage: number;
+    feature_areas: FeatureArea[];
+};
+
+export type FeatureArea = {
+    name: string;
+    covered: boolean;
+    productArea: string;
+    activeColor: string;
+    inactiveColor: string;
+    features: string[];
+}
+
+export type Colors = {
+    xlight: string;
+    light: string;
+}
+
+export type RoadmapFeature = {
+    [key: string]: any;
+};

package/src/modules/sa/expandableSection/expandableSection.css

@@ -0,0 +1,24 @@
+@import 'tds/reset';
+
+.section-title {
+    display: flex;
+    align-items: center;
+}
+
+.section-content {
+    display: none;
+}
+
+.is-open .section-content {
+    padding-top: 0.5rem;
+    display: block;
+}
+
+.icon {
+    transform: rotate(-90deg);
+    transition: transform 300ms;
+}
+
+.is-open .icon {
+    transform: rotate(0deg);
+}

package/src/modules/sa/expandableSection/expandableSection.html

@@ -0,0 +1,20 @@
+<template>
+    <div class={sectionClass}>
+        <h3 class="section-title">
+            <tds-button-icon
+                size="small"
+                aria-label="Expand/Collapse"
+                variant="bare"
+                aria-controls="expand"
+                aria-expanded={_isOpen}
+                onclick={handleExpandClick}
+            >
+                <tds-icon class="icon" size="small" symbol="switch"></tds-icon>
+            </tds-button-icon>
+            <slot name="title"></slot>
+        </h3>
+        <div aria-hidden={isClosed} class="section-content" id="expand">
+            <slot></slot>
+        </div>
+    </div>
+</template>

package/src/modules/sa/expandableSection/expandableSection.stories.ts

@@ -0,0 +1,37 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'sa/sa-expandable-section',
+    parameters: {
+        modules: ['/modules/sa-expandable-section.js']
+    }
+};
+
+export const Base = () =>
+    html`
+        <sa-expandable-section>
+            <span slot="title">Section Title</span>
+            <p>
+                Aenean eu leo quam. Pellentesque ornare sem lacinia quam
+                venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo,
+                tortor mauris condimentum nibh, ut fermentum massa justo sit
+                amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
+                elit. Nullam quis risus eget urna mollis ornare vel eu leo.
+                Nulla vitae elit libero, a pharetra augue.
+            </p>
+        </sa-expandable-section>
+    `;
+
+export const Open = () => html`
+    <sa-expandable-section is-open="false">
+        <span slot="title">Section Title</span>
+        <p>
+            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
+            vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+            condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
+            ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus
+            eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a
+            pharetra augue.
+        </p>
+    </sa-expandable-section>
+`;

package/src/modules/sa/expandableSection/expandableSection.ts

@@ -0,0 +1,24 @@
+import { LightningElement, api } from 'lwc';
+
+export default class ExpandableSection extends LightningElement {
+    @api
+    get isOpen() {
+        return this._isOpen;
+    }
+    set isOpen(value) {
+        this._isOpen = value;
+    }
+    _isOpen = false;
+
+    handleExpandClick() {
+        this._isOpen = !this._isOpen;
+    }
+
+    get sectionClass() {
+        return `section ${this._isOpen ? 'is-open' : ''}`;
+    }
+
+    get isClosed() {
+        return !this._isOpen;
+    }
+}