feat(charts): Create chart web components - Donut and Horizontal Bar Chart

change/@fluentui-web-components-a2072109-cb0f-486e-9cbe-81ebc19d21c4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(charts): Create web components for donut chart and horizontal bar chart.",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/package.json

@@ -78,7 +78,6 @@
     "clean": "node ./scripts/clean dist",
     "generate-api": "api-extractor run --local",
     "build": "yarn compile && yarn rollup -c && yarn generate-api",
-    "lint": "eslint . --ext .ts",
     "lint:fix": "eslint . --ext .ts --fix",
     "format": "prettier -w src/**/*.{ts,html} --ignore-path ../../.prettierignore",
     "format:check": "yarn format -c",
@@ -100,7 +99,9 @@
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "1.0.0-alpha.16",
     "tabbable": "^6.2.0",
-    "tslib": "^2.1.0"
+    "tslib": "^2.1.0",
+    "@types/d3": "^7.0.0",
+    "d3": "^7.0.0"
   },
   "peerDependencies": {
     "@microsoft/fast-element": "^2.0.0-beta.26 || ^2.0.0"

packages/web-components/src/donut-chart/define.ts

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './donut-chart.definition.js';
+
+definition.define(FluentDesignSystem.registry);

packages/web-components/src/donut-chart/donut-chart.bench.ts

@@ -0,0 +1,12 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './donut-chart.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const donutChart = document.createElement('fluent-donut-chart');
+  return donutChart;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

packages/web-components/src/donut-chart/donut-chart.definition.ts

@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { DonutChart } from './donut-chart.js';
+import { styles } from './donut-chart.styles.js';
+import { template } from './donut-chart.template.js';
+
+/**
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-donut-chart>`
+ */
+export const definition = DonutChart.compose({
+  name: `${FluentDesignSystem.prefix}-donut-chart`,
+  template,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true,
+  },
+});

packages/web-components/src/donut-chart/donut-chart.options.ts

@@ -0,0 +1,40 @@
+export interface IChartDataPoint {
+  /**
+   * Legend text for the datapoint in the chart
+   */
+  legend?: string;
+
+  /**
+   * data the datapoint in the chart
+   */
+  data?: number;
+
+  /**
+   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.
+   */
+  color?: string;
+
+  /**
+   * Callout data for x axis
+   * This is an optional prop, If haven;t given legend will take
+   */
+  xAxisCalloutData?: string;
+
+  /**
+   * Callout data for y axis
+   * This is an optional prop, If haven't given data will take
+   */
+  yAxisCalloutData?: string;
+}
+
+export interface IChartProps {
+  /**
+   * chart title for the chart
+   */
+  chartTitle?: string;
+
+  /**
+   * data for the points in the chart
+   */
+  chartData?: IChartDataPoint[];
+}

packages/web-components/src/donut-chart/donut-chart.stories.ts

@@ -0,0 +1,42 @@
+import { html } from '@microsoft/fast-element';
+import type { Meta, Story, StoryArgs } from '../helpers.stories.js';
+import { renderComponent } from '../helpers.stories.js';
+import { DonutChart as FluentDonutChart } from './donut-chart.js';
+import { IChartDataPoint, IChartProps } from './donut-chart.options.js';
+
+const points: IChartDataPoint[] = [
+  {
+    legend: 'first',
+    data: 20000,
+    color: '#0099BC',
+  },
+  {
+    legend: 'second',
+    data: 39000,
+    color: '#77004D',
+  },
+];
+
+const data: IChartProps = {
+  chartTitle: 'Donut chart basic example',
+  chartData: points,
+};
+
+const storyTemplate = html<StoryArgs<FluentDonutChart>>`
+  <fluent-donut-chart data="${JSON.stringify(data)}" value-inside-donut="35,000" inner-radius="55">
+  </fluent-donut-chart>
+`;
+
+export default {
+  title: 'Components/DonutChart',
+} as Meta<FluentDonutChart>;
+
+export const Basic: Story<FluentDonutChart> = renderComponent(storyTemplate).bind({});
+
+export const RTL: Story<FluentDonutChart> = renderComponent(html<StoryArgs<FluentDonutChart>>`
+  <div style="display: flex; flex-direction: column; gap: 1rem;" dir="rtl">
+    <div>
+      <fluent-donut-chart data="${JSON.stringify(data)}" inner-radius="55"> </fluent-donut-chart>
+    </div>
+  </div>
+`);

packages/web-components/src/donut-chart/donut-chart.styles.ts

@@ -0,0 +1,112 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../utils/display.js';
+import {
+  borderRadiusMedium,
+  colorNeutralBackground1,
+  colorNeutralForeground1,
+  colorNeutralForeground2,
+  colorNeutralShadowAmbient,
+  colorNeutralShadowKey,
+  colorTransparentStroke,
+  spacingHorizontalL,
+  spacingHorizontalS,
+  spacingVerticalL,
+  spacingVerticalMNudge,
+} from '../theme/design-tokens.js';
+import { typographyBody1Styles, typographyCaption1Styles, typographyTitle2Styles } from '../styles/index.js';
+
+/**
+ * Styles for the DonutChart component.
+ *
+ * @public
+ */
+export const styles = css`
+  ${display('inline-block')}
+
+  .root {
+    ${typographyBody1Styles}
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .chart {
+    box-sizing: content-box;
+    overflow: visible;
+    alignment-adjust: center;
+    display: block;
+  }
+
+  .legendContainer {
+    padding-top: ${spacingVerticalL};
+
+    white-space: nowrap;
+    width: 100%;
+    align-items: center;
+    margin: -8px 0 0 -8px;
+
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .insideDonutString {
+    ${typographyTitle2Styles}
+    fill: ${colorNeutralForeground1};
+  }
+
+  .legend {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    border: none;
+    padding: ${spacingHorizontalS};
+    background: none;
+    text-transform: capitalize;
+  }
+
+  .legendRect {
+    width: 12px;
+    height: 12px;
+    margin-right: ${spacingHorizontalS};
+    border: 1px solid;
+  }
+
+  .legendText {
+    ${typographyCaption1Styles}
+    color: ${colorNeutralForeground1};
+  }
+
+  .calloutContentRoot {
+    display: grid;
+    overflow: hidden;
+    padding: ${spacingVerticalMNudge} ${spacingHorizontalL};
+    background-color: ${colorNeutralBackground1};
+    background-blend-mode: normal, luminosity;
+
+    border-radius: ${borderRadiusMedium};
+    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;
+  }
+
+  .calloutBlockContainer {
+    padding-left: ${spacingHorizontalS};
+    color: ${colorNeutralForeground2};
+  }
+
+  .calloutLegendText {
+    ${typographyCaption1Styles}
+    color: ${colorNeutralForeground2};
+  }
+
+  .calloutContentY {
+    ${typographyTitle2Styles}
+  }
+`;

packages/web-components/src/donut-chart/donut-chart.template.ts

@@ -0,0 +1,16 @@
+import { ElementViewTemplate, html, ref, slotted } from '@microsoft/fast-element';
+import type { DonutChart } from './donut-chart.js';
+
+/**
+ * Generates a template for the DonutChart component.
+ *
+ * @public
+ */
+export function donutChartTemplate<T extends DonutChart>(): ElementViewTemplate<T> {
+  return html<T>``;
+}
+
+/**
+ * @internal
+ */
+export const template: ElementViewTemplate<DonutChart> = donutChartTemplate();