Single Bar HBC NM Variant (#33116)

microsoft · Oct 24, 2024 · 17ffa27 · 17ffa27
1 parent ce231ed
commit 17ffa27
Show file tree

Hide file tree

Showing 3 changed files with 177 additions and 16 deletions.
diff --git a/packages/web-components/src/horizontalbarchart/horizontalbarchart.options.ts b/packages/web-components/src/horizontalbarchart/horizontalbarchart.options.ts
@@ -1,6 +1,7 @@
 export enum Variant {
   PartToWhole = 'part-to-whole',
   AbsoluteScale = 'absolute-scale',
+  SingleBar = 'single-bar',
 }
 
 export interface ChartDataPoint {
@@ -14,6 +15,11 @@ export interface ChartDataPoint {
    */
   data?: number;
 
+  /**
+   * total length of bar
+   */
+  total?: number;
+
   /**
    * onClick action for each datapoint in the chart
    */

diff --git a/packages/web-components/src/horizontalbarchart/horizontalbarchart.stories.ts b/packages/web-components/src/horizontalbarchart/horizontalbarchart.stories.ts
@@ -11,7 +11,7 @@ const singleBarHBCData = [
       {
         legend: 'one',
         data: 1543,
-        y: 15000,
+        total: 15000,
         color: '#637cef',
       },
     ],
@@ -22,7 +22,7 @@ const singleBarHBCData = [
       {
         legend: 'two',
         data: 800,
-        y: 15000,
+        total: 15000,
         color: '#e3008c',
       },
     ],
@@ -33,7 +33,7 @@ const singleBarHBCData = [
       {
         legend: 'three',
         data: 8888,
-        y: 15000,
+        total: 15000,
         color: '#2aa0a4',
       },
     ],
@@ -44,7 +44,7 @@ const singleBarHBCData = [
       {
         legend: 'four',
         data: 15888,
-        y: 15000,
+        total: 15000,
         color: '#9373c0',
       },
     ],
@@ -55,7 +55,7 @@ const singleBarHBCData = [
       {
         legend: 'five',
         data: 11444,
-        y: 15000,
+        total: 15000,
         color: '#13a10e',
       },
     ],
@@ -66,7 +66,7 @@ const singleBarHBCData = [
       {
         legend: 'six',
         data: 14000,
-        y: 15000,
+        total: 15000,
         color: '#3a96dd',
       },
     ],
@@ -77,7 +77,7 @@ const singleBarHBCData = [
       {
         legend: 'seven',
         data: 9855,
-        y: 15000,
+        total: 15000,
         color: '#ca5010',
       },
     ],
@@ -88,7 +88,98 @@ const singleBarHBCData = [
       {
         legend: 'eight',
         data: 4250,
-        y: 15000,
+        total: 15000,
+        color: '#57811b',
+      },
+    ],
+  },
+];
+
+const singleBarNMVariantData = [
+  {
+    chartTitle: 'one',
+    chartData: [
+      {
+        legend: 'one',
+        data: 1543,
+        total: 15000,
+        color: '#637cef',
+      },
+    ],
+  },
+  {
+    chartTitle: 'two',
+    chartData: [
+      {
+        legend: 'two',
+        data: 800,
+        total: 15000,
+        color: '#e3008c',
+      },
+    ],
+  },
+  {
+    chartTitle: 'three',
+    chartData: [
+      {
+        legend: 'three',
+        data: 8888,
+        total: 15000,
+        color: '#2aa0a4',
+      },
+    ],
+  },
+  {
+    chartTitle: 'four',
+    chartData: [
+      {
+        legend: 'four',
+        data: 15888,
+        total: 15000,
+        color: '#9373c0',
+      },
+    ],
+  },
+  {
+    chartTitle: 'five',
+    chartData: [
+      {
+        legend: 'five',
+        data: 11444,
+        total: 15000,
+        color: '#13a10e',
+      },
+    ],
+  },
+  {
+    chartTitle: 'six',
+    chartData: [
+      {
+        legend: 'six',
+        data: 14000,
+        total: 15000,
+        color: '#3a96dd',
+      },
+    ],
+  },
+  {
+    chartTitle: 'seven',
+    chartData: [
+      {
+        legend: 'seven',
+        data: 9855,
+        total: 15000,
+        color: '#ca5010',
+      },
+    ],
+  },
+  {
+    chartTitle: 'eight',
+    chartData: [
+      {
+        legend: 'eight',
+        data: 4250,
+        total: 15000,
         color: '#57811b',
       },
     ],
@@ -179,6 +270,20 @@ const data: IChartProps[] = [
   },
 ];
 
+const singlePointData = [
+  {
+    chartTitle: 'one',
+    chartData: [
+      {
+        legend: 'one',
+        data: 1543,
+        total: 15000,
+        color: '#637cef',
+      },
+    ],
+  },
+];
+
 const storyTemplate = html<StoryArgs<FluentHorizontalBarChart>>`
   <fluent-horizontalbarchart data="${JSON.stringify(data)}"> </fluent-horizontalbarchart>
 `;
@@ -196,11 +301,25 @@ export const singleBarHBC: Story<FluentHorizontalBarChart> = renderComponent(htm
   </div>
 `);
 
-export const HBCNMVariant: Story<FluentHorizontalBarChart> = renderComponent(html<StoryArgs<FluentHorizontalBarChart>>`
+export const singleBarNMVariant: Story<FluentHorizontalBarChart> = renderComponent(html<
+  StoryArgs<FluentHorizontalBarChart>
+>`
   <div>
-    <fluent-horizontalbarchart style="width: 100%" variant="part-to-whole" data="${JSON.stringify(singleBarHBCData)}">
+    <fluent-horizontalbarchart
+      style="width: 100%"
+      variant="single-bar"
+      data="${JSON.stringify(singleBarNMVariantData)}"
+    >
     </fluent-horizontalbarchart>
+  </div>
+`);
 
+export const singleDataPoint: Story<FluentHorizontalBarChart> = renderComponent(html<
+  StoryArgs<FluentHorizontalBarChart>
+>`
+  <div>
+    <fluent-horizontalbarchart style="width: 100%" variant="single-bar" data="${JSON.stringify(singlePointData)}">
+    </fluent-horizontalbarchart>
   </div>
 `);
 

diff --git a/packages/web-components/src/horizontalbarchart/horizontalbarchart.ts b/packages/web-components/src/horizontalbarchart/horizontalbarchart.ts
@@ -77,8 +77,11 @@ export class HorizontalBarChart extends FASTElement {
     const uniqueLegendsMap = new Map();
 
     // Iterate through all chart points and populate the map
-    this.data.forEach(dataSeries => {
-      dataSeries.chartData!.forEach(point => {
+    for (const dataSeries of this.data) {
+      for (const point of dataSeries.chartData!) {
+        if ((point as any).placeholder === true) {
+          continue;
+        }
         // Check if the legend is already in the map
         if (!uniqueLegendsMap.has(point.legend)) {
           uniqueLegendsMap.set(point.legend, {
@@ -87,15 +90,46 @@ export class HorizontalBarChart extends FASTElement {
             color: point.color,
           });
         }
-      });
-    });
+      }
+    }
 
     // Convert the map values back to an array
     this.uniqueLegends = Array.from(uniqueLegendsMap.values());
   }
 
+  private _hydrateData() {
+    this.data!.forEach(({ chartTitle, chartData }) => {
+      if (chartData!.length === 1) {
+        const pointData = chartData![0];
+        const newEntry = {
+          legend: '',
+          data: pointData.total! - pointData.data! > 0 ? pointData.total! - pointData.data! : 0,
+          y: pointData.total!,
+          color: '#edebe9',
+          placeholder: true,
+        };
+        chartData!.push(newEntry);
+      }
+    });
+  }
+
+  private calculateBarSpacing(): number {
+    //todo: replace 650 with width of svg or div.
+    const svgWidth = 650;
+    let barSpacing = 0;
+    const MARGIN_WIDTH_IN_PX = 3;
+    if (svgWidth) {
+      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+      barSpacing = currentBarSpacing;
+    }
+    return barSpacing;
+  }
+
   render() {
     // Array to hold references to the buttons
+    if (this.variant === Variant.SingleBar) {
+      this._hydrateData();
+    }
     const legendButtonRefs: any = [];
     const div = d3Select(this.shadowRoot as any).append('div');
     div
@@ -120,7 +154,6 @@ export class HorizontalBarChart extends FASTElement {
     const legendContainer = document.createElement('div');
     div.node()!.appendChild(legendContainer);
     legendContainer.classList.add('legendcontainer');
-
     this.uniqueLegends?.forEach((d, index) => {
       const button = document.createElement('button');
       legendContainer.appendChild(button);
@@ -206,7 +239,7 @@ export class HorizontalBarChart extends FASTElement {
     const noOfBars =
       data.chartData?.reduce((count: number, point: ChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||
       1;
-    const barSpacingInPercent = 1;
+    const barSpacingInPercent = this.calculateBarSpacing();
     const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);
     // calculating starting point of each bar and it's range
     const startingPoint: number[] = [];
@@ -340,6 +373,9 @@ export class HorizontalBarChart extends FASTElement {
       .append('g')
       .each(createBars)
       .on('mouseover', function (event, d) {
+        if (d && d.hasOwnProperty('placeholder') && (d as any).placeholder === true) {
+          return;
+        }
         const tooltipHTML = `
         <div class="tooltipline" style="border-left:4px solid ${d.color};">
             <div class="tooltiplegend">${d.legend}</div>