Refactor donut-chart web component (#33149)

microsoft · Oct 30, 2024 · 415c165 · 415c165
1 parent c14c048
commit 415c165
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 219 deletions.
diff --git a/packages/web-components/src/donut-chart/donut-chart.options.ts b/packages/web-components/src/donut-chart/donut-chart.options.ts
@@ -38,3 +38,8 @@ export interface ChartProps {
    */
   chartData: ChartDataPoint[];
 }
+
+export type Legend = {
+  title: string;
+  color: string;
+};
diff --git a/packages/web-components/src/donut-chart/donut-chart.styles.ts b/packages/web-components/src/donut-chart/donut-chart.styles.ts
@@ -47,6 +47,10 @@ export const styles = css`
     display: block;
   }
 
+  .arc.inactive {
+    opacity: 0.1;
+  }
+
   .arc:focus {
     outline: none;
     stroke-width: 1px;
@@ -99,6 +103,14 @@ export const styles = css`
     color: ${colorNeutralForeground1};
   }
 
+  .legend.inactive .legendRect {
+    background-color: transparent !important;
+  }
+
+  .legend.inactive .legendText {
+    opacity: 0.67;
+  }
+
   .calloutContentRoot {
     display: grid;
     overflow: hidden;
@@ -109,7 +121,6 @@ export const styles = css`
     border: 1px solid ${colorTransparentStroke};
     filter: drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 8px 16px ${colorNeutralShadowKey});
     position: absolute;
-    opacity: 0;
     z-index: 1;
     pointer-events: none;
   }

diff --git a/packages/web-components/src/donut-chart/donut-chart.template.ts b/packages/web-components/src/donut-chart/donut-chart.template.ts
@@ -1,13 +1,64 @@
-import { ElementViewTemplate, html, ref, slotted } from '@microsoft/fast-element';
+import { children, ElementViewTemplate, html, ref, repeat, when } from '@microsoft/fast-element';
 import type { DonutChart } from './donut-chart.js';
+import { Legend } from './donut-chart.options.js';
 
 /**
  * Generates a template for the DonutChart component.
  *
  * @public
  */
 export function donutChartTemplate<T extends DonutChart>(): ElementViewTemplate<T> {
-  return html<T>``;
+  return html<T>`
+    <div ${ref('rootDiv')} class="root">
+      <div ${ref('chartWrapper')}>
+        <svg class="chart" width="${x => x.width}" height="${x => x.height}" aria-label="${x => x.data.chartTitle}">
+          <g ${ref('group')} transform="translate(${x => x.width / 2}, ${x => x.height / 2})"></g>
+        </svg>
+      </div>
+      ${when(
+        x => !x.hideLegends,
+        html<T>`
+          <div class="legendContainer" role="listbox" aria-label="Legends">
+            ${repeat(
+              x => x.legends,
+              html<Legend, T>` <button
+                class="legend${(x, c) =>
+                  c.parent.activeLegend === '' || c.parent.activeLegend === x.title ? '' : ' inactive'}"
+                role="option"
+                aria-setsize="${(x, c) => c.length}"
+                aria-posinset="${(x, c) => c.index + 1}"
+                aria-selected="${(x, c) => x.title === c.parent.activeLegend}"
+                @mouseover="${(x, c) => c.parent.handleLegendMouseoverAndFocus(x.title)}"
+                @mouseout="${(x, c) => c.parent.handleLegendMouseoutAndBlur()}"
+                @focus="${(x, c) => c.parent.handleLegendMouseoverAndFocus(x.title)}"
+                @blur="${(x, c) => c.parent.handleLegendMouseoutAndBlur()}"
+                @click="${(x, c) => c.parent.handleLegendClick(x.title)}"
+              >
+                <div class="legendRect" style="background-color: ${x => x.color}; border-color: ${x => x.color};"></div>
+                <div class="legendText">${x => x.title}</div>
+              </button>`,
+            )}
+          </div>
+        `,
+      )}
+      ${when(
+        x => !x.hideTooltip && x.tooltipProps.isVisible,
+        html<T>`
+          <div
+            class="calloutContentRoot"
+            style="left: ${x => x.tooltipProps.xPos}px; top: ${x => x.tooltipProps.yPos}px"
+          >
+            <div class="calloutBlockContainer" style="border-color: ${x => x.tooltipProps.color};">
+              <div class="calloutLegendText">${x => x.tooltipProps.legend}</div>
+              <div class="calloutContentY" style="color: ${x => x.tooltipProps.color};">
+                ${x => x.tooltipProps.yValue}
+              </div>
+            </div>
+          </div>
+        `,
+      )}
+    </div>
+  `;
 }
 
 /**