@fluentui/chart-web-components 0.0.0 → 0.0.1-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/CHANGELOG.md +12 -2
  2. package/package.json +2 -2
  3. package/dist/chart-web-components.d.ts +0 -213
  4. package/dist/chart-web-components.js +0 -7088
  5. package/dist/chart-web-components.min.js +0 -106
  6. package/dist/dts/donut-chart/define.d.ts +0 -1
  7. package/dist/dts/donut-chart/donut-chart.bench.d.ts +0 -3
  8. package/dist/dts/donut-chart/donut-chart.d.ts +0 -40
  9. package/dist/dts/donut-chart/donut-chart.definition.d.ts +0 -7
  10. package/dist/dts/donut-chart/donut-chart.options.d.ts +0 -38
  11. package/dist/dts/donut-chart/donut-chart.styles.d.ts +0 -6
  12. package/dist/dts/donut-chart/donut-chart.template.d.ts +0 -12
  13. package/dist/dts/donut-chart/index.d.ts +0 -4
  14. package/dist/dts/helpers.tests.d.ts +0 -30
  15. package/dist/dts/horizontal-bar-chart/define.d.ts +0 -1
  16. package/dist/dts/horizontal-bar-chart/horizontal-bar-chart.bench.d.ts +0 -3
  17. package/dist/dts/horizontal-bar-chart/horizontal-bar-chart.d.ts +0 -46
  18. package/dist/dts/horizontal-bar-chart/horizontal-bar-chart.definition.d.ts +0 -9
  19. package/dist/dts/horizontal-bar-chart/horizontal-bar-chart.options.d.ts +0 -40
  20. package/dist/dts/horizontal-bar-chart/horizontal-bar-chart.styles.d.ts +0 -7
  21. package/dist/dts/horizontal-bar-chart/horizontal-bar-chart.template.d.ts +0 -12
  22. package/dist/dts/horizontal-bar-chart/index.d.ts +0 -4
  23. package/dist/dts/index-rollup.d.ts +0 -2
  24. package/dist/dts/index.d.ts +0 -2
  25. package/dist/dts/utils/benchmark-wrapper.d.ts +0 -2
  26. package/dist/dts/utils/chart-helpers.d.ts +0 -37
  27. package/dist/esm/donut-chart/define.js +0 -4
  28. package/dist/esm/donut-chart/define.js.map +0 -1
  29. package/dist/esm/donut-chart/donut-chart.bench.js +0 -10
  30. package/dist/esm/donut-chart/donut-chart.bench.js.map +0 -1
  31. package/dist/esm/donut-chart/donut-chart.definition.js +0 -18
  32. package/dist/esm/donut-chart/donut-chart.definition.js.map +0 -1
  33. package/dist/esm/donut-chart/donut-chart.js +0 -227
  34. package/dist/esm/donut-chart/donut-chart.js.map +0 -1
  35. package/dist/esm/donut-chart/donut-chart.options.js +0 -2
  36. package/dist/esm/donut-chart/donut-chart.options.js.map +0 -1
  37. package/dist/esm/donut-chart/donut-chart.styles.js +0 -133
  38. package/dist/esm/donut-chart/donut-chart.styles.js.map +0 -1
  39. package/dist/esm/donut-chart/donut-chart.template.js +0 -57
  40. package/dist/esm/donut-chart/donut-chart.template.js.map +0 -1
  41. package/dist/esm/donut-chart/index.js +0 -5
  42. package/dist/esm/donut-chart/index.js.map +0 -1
  43. package/dist/esm/helpers.tests.js +0 -73
  44. package/dist/esm/helpers.tests.js.map +0 -1
  45. package/dist/esm/horizontal-bar-chart/define.js +0 -4
  46. package/dist/esm/horizontal-bar-chart/define.js.map +0 -1
  47. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.bench.js +0 -10
  48. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.bench.js.map +0 -1
  49. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.definition.js +0 -20
  50. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.definition.js.map +0 -1
  51. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.js +0 -412
  52. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.js.map +0 -1
  53. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.options.js +0 -7
  54. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.options.js.map +0 -1
  55. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.styles.js +0 -163
  56. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.styles.js.map +0 -1
  57. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.template.js +0 -53
  58. package/dist/esm/horizontal-bar-chart/horizontal-bar-chart.template.js.map +0 -1
  59. package/dist/esm/horizontal-bar-chart/index.js +0 -5
  60. package/dist/esm/horizontal-bar-chart/index.js.map +0 -1
  61. package/dist/esm/index-rollup.js +0 -3
  62. package/dist/esm/index-rollup.js.map +0 -1
  63. package/dist/esm/index.js +0 -3
  64. package/dist/esm/index.js.map +0 -1
  65. package/dist/esm/utils/benchmark-wrapper.js +0 -18
  66. package/dist/esm/utils/benchmark-wrapper.js.map +0 -1
  67. package/dist/esm/utils/chart-helpers.js +0 -160
  68. package/dist/esm/utils/chart-helpers.js.map +0 -1
@@ -1,2 +0,0 @@
1
- declare const wrappedTests: {};
2
- export { wrappedTests as tests };
@@ -1,37 +0,0 @@
1
- import type { ValueConverter } from '@microsoft/fast-element';
2
- export declare const jsonConverter: ValueConverter;
3
- export declare const validateChartPropsArray: (obj: any, objName: string) => void;
4
- export declare const validateChartProps: (obj: any, objName: string) => void;
5
- export declare const DataVizPalette: {
6
- color1: string;
7
- color2: string;
8
- color3: string;
9
- color4: string;
10
- color5: string;
11
- color6: string;
12
- color7: string;
13
- color8: string;
14
- color9: string;
15
- color10: string;
16
- color11: string;
17
- color12: string;
18
- color13: string;
19
- color14: string;
20
- color15: string;
21
- color16: string;
22
- color17: string;
23
- color18: string;
24
- color19: string;
25
- info: string;
26
- disabled: string;
27
- highError: string;
28
- error: string;
29
- warning: string;
30
- success: string;
31
- highSuccess: string;
32
- };
33
- export declare const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
34
- export declare const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
35
- export declare const getRTL: (rootNode: HTMLElement) => boolean;
36
- export declare const SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
37
- export declare const wrapText: (text: SVGTextElement, width: number) => void;
@@ -1,4 +0,0 @@
1
- import { FluentDesignSystem } from '@fluentui/web-components';
2
- import { definition } from './donut-chart.definition.js';
3
- definition.define(FluentDesignSystem.registry);
4
- //# sourceMappingURL=define.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/donut-chart/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
@@ -1,10 +0,0 @@
1
- import { FluentDesignSystem } from '@fluentui/web-components';
2
- import { definition } from './donut-chart.definition.js';
3
- definition.define(FluentDesignSystem.registry);
4
- const itemRenderer = () => {
5
- const donutChart = document.createElement('fluent-donut-chart');
6
- return donutChart;
7
- };
8
- export default itemRenderer;
9
- export { tests } from '../utils/benchmark-wrapper.js';
10
- //# sourceMappingURL=donut-chart.bench.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"donut-chart.bench.js","sourceRoot":"","sources":["../../../src/donut-chart/donut-chart.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
@@ -1,18 +0,0 @@
1
- import { FluentDesignSystem } from '@fluentui/web-components';
2
- import { DonutChart } from './donut-chart.js';
3
- import { styles } from './donut-chart.styles.js';
4
- import { template } from './donut-chart.template.js';
5
- /**
6
- * @public
7
- * @remarks
8
- * HTML Element: `<fluent-donut-chart>`
9
- */
10
- export const definition = DonutChart.compose({
11
- name: `${FluentDesignSystem.prefix}-donut-chart`,
12
- template,
13
- styles,
14
- shadowOptions: {
15
- delegatesFocus: true,
16
- },
17
- });
18
- //# sourceMappingURL=donut-chart.definition.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"donut-chart.definition.js","sourceRoot":"","sources":["../../../src/donut-chart/donut-chart.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,cAAc;IAChD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
@@ -1,227 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
3
- import { arc as d3Arc, pie as d3Pie } from 'd3-shape';
4
- import { getColorFromToken, getNextColor, getRTL, jsonConverter, SVG_NAMESPACE_URI, validateChartProps, wrapText, } from '../utils/chart-helpers.js';
5
- export class DonutChart extends FASTElement {
6
- activeLegendChanged(oldValue, newValue) {
7
- var _a, _b;
8
- if (newValue === '') {
9
- (_a = this._arcs) === null || _a === void 0 ? void 0 : _a.forEach(arc => arc.classList.remove('inactive'));
10
- }
11
- else {
12
- (_b = this._arcs) === null || _b === void 0 ? void 0 : _b.forEach(arc => {
13
- if (arc.getAttribute('data-id') === newValue) {
14
- arc.classList.remove('inactive');
15
- }
16
- else {
17
- arc.classList.add('inactive');
18
- }
19
- });
20
- }
21
- this._updateTextInsideDonut();
22
- }
23
- tooltipPropsChanged(oldValue, newValue) {
24
- this._updateTextInsideDonut();
25
- }
26
- constructor() {
27
- super();
28
- this.height = 200;
29
- this.width = 200;
30
- this.hideLegends = false;
31
- this.hideTooltip = false;
32
- this.innerRadius = 1;
33
- this.legends = [];
34
- this.activeLegend = '';
35
- this.isLegendSelected = false;
36
- this.tooltipProps = {
37
- isVisible: false,
38
- legend: '',
39
- yValue: '',
40
- color: '',
41
- xPos: 0,
42
- yPos: 0,
43
- };
44
- this.elementInternals = this.attachInternals();
45
- this._arcs = [];
46
- this._isRTL = false;
47
- this.elementInternals.role = 'region';
48
- }
49
- handleLegendMouseoverAndFocus(legendTitle) {
50
- if (this.isLegendSelected) {
51
- return;
52
- }
53
- this.activeLegend = legendTitle;
54
- }
55
- handleLegendMouseoutAndBlur() {
56
- if (this.isLegendSelected) {
57
- return;
58
- }
59
- this.activeLegend = '';
60
- }
61
- handleLegendClick(legendTitle) {
62
- if (this.isLegendSelected && this.activeLegend === legendTitle) {
63
- this.activeLegend = '';
64
- this.isLegendSelected = false;
65
- }
66
- else {
67
- this.activeLegend = legendTitle;
68
- this.isLegendSelected = true;
69
- }
70
- }
71
- connectedCallback() {
72
- super.connectedCallback();
73
- validateChartProps(this.data, 'data');
74
- this.data.chartData.forEach((dataPoint, index) => {
75
- if (dataPoint.color) {
76
- dataPoint.color = getColorFromToken(dataPoint.color);
77
- }
78
- else {
79
- dataPoint.color = getNextColor(index);
80
- }
81
- });
82
- this.legends = this._getLegends();
83
- this._isRTL = getRTL(this);
84
- this.elementInternals.ariaLabel =
85
- this.data.chartTitle || `Donut chart with ${this.data.chartData.length} segments.`;
86
- this._render();
87
- }
88
- _render() {
89
- const pie = d3Pie()
90
- .value(d => d.data)
91
- .padAngle(0.02);
92
- const arc = d3Arc()
93
- .innerRadius(this.innerRadius)
94
- .outerRadius((Math.min(this.height, this.width) - 20) / 2);
95
- pie(this.data.chartData).forEach(arcDatum => {
96
- const arcGroup = document.createElementNS(SVG_NAMESPACE_URI, 'g');
97
- this.group.appendChild(arcGroup);
98
- const pathOutline = document.createElementNS(SVG_NAMESPACE_URI, 'path');
99
- arcGroup.appendChild(pathOutline);
100
- pathOutline.classList.add('arc-outline');
101
- pathOutline.setAttribute('d', arc(arcDatum));
102
- const path = document.createElementNS(SVG_NAMESPACE_URI, 'path');
103
- arcGroup.appendChild(path);
104
- this._arcs.push(path);
105
- path.classList.add('arc');
106
- path.setAttribute('d', arc(arcDatum));
107
- path.setAttribute('fill', arcDatum.data.color);
108
- path.setAttribute('data-id', arcDatum.data.legend);
109
- path.setAttribute('tabindex', '0');
110
- path.setAttribute('aria-label', `${arcDatum.data.legend}, ${arcDatum.data.data}.`);
111
- path.setAttribute('role', 'img');
112
- path.addEventListener('mouseover', event => {
113
- if (this.activeLegend !== '' && this.activeLegend !== arcDatum.data.legend) {
114
- return;
115
- }
116
- const bounds = this.getBoundingClientRect();
117
- this.tooltipProps = {
118
- isVisible: true,
119
- legend: arcDatum.data.legend,
120
- yValue: `${arcDatum.data.data}`,
121
- color: arcDatum.data.color,
122
- xPos: this._isRTL ? bounds.right - event.clientX : event.clientX - bounds.left,
123
- yPos: event.clientY - bounds.top - 85,
124
- };
125
- });
126
- path.addEventListener('focus', event => {
127
- if (this.activeLegend !== '' && this.activeLegend !== arcDatum.data.legend) {
128
- return;
129
- }
130
- const rootBounds = this.getBoundingClientRect();
131
- const arcBounds = path.getBoundingClientRect();
132
- this.tooltipProps = {
133
- isVisible: true,
134
- legend: arcDatum.data.legend,
135
- yValue: `${arcDatum.data.data}`,
136
- color: arcDatum.data.color,
137
- xPos: this._isRTL
138
- ? rootBounds.right - arcBounds.left - arcBounds.width / 2
139
- : arcBounds.left + arcBounds.width / 2 - rootBounds.left,
140
- yPos: arcBounds.top - rootBounds.top - 85,
141
- };
142
- });
143
- path.addEventListener('blur', event => {
144
- this.tooltipProps = { isVisible: false, legend: '', yValue: '', color: '', xPos: 0, yPos: 0 };
145
- });
146
- });
147
- this.addEventListener('mouseleave', () => {
148
- this.tooltipProps = { isVisible: false, legend: '', yValue: '', color: '', xPos: 0, yPos: 0 };
149
- });
150
- if (this.valueInsideDonut) {
151
- this._textInsideDonut = document.createElementNS(SVG_NAMESPACE_URI, 'text');
152
- this.group.appendChild(this._textInsideDonut);
153
- this._textInsideDonut.classList.add('text-inside-donut');
154
- this._textInsideDonut.setAttribute('x', '0');
155
- this._textInsideDonut.setAttribute('y', '0');
156
- this._textInsideDonut.setAttribute('text-anchor', 'middle');
157
- this._textInsideDonut.setAttribute('dominant-baseline', 'middle');
158
- this._updateTextInsideDonut();
159
- }
160
- }
161
- _getLegends() {
162
- return this.data.chartData.map((d, index) => ({
163
- title: d.legend,
164
- color: d.color,
165
- }));
166
- }
167
- _getTextInsideDonut(valueInsideDonut) {
168
- var _a;
169
- let textInsideDonut = valueInsideDonut;
170
- if (valueInsideDonut && (this.activeLegend !== '' || this.tooltipProps.isVisible)) {
171
- const highlightedDataPoint = this.data.chartData.find(dataPoint => dataPoint.legend === this.activeLegend ||
172
- (this.tooltipProps.isVisible && dataPoint.legend === this.tooltipProps.legend));
173
- textInsideDonut = (_a = highlightedDataPoint.yAxisCalloutData) !== null && _a !== void 0 ? _a : highlightedDataPoint.data.toLocaleString();
174
- }
175
- return textInsideDonut;
176
- }
177
- _updateTextInsideDonut() {
178
- if (!this._textInsideDonut || !this.valueInsideDonut) {
179
- return;
180
- }
181
- this._textInsideDonut.textContent = this._getTextInsideDonut(this.valueInsideDonut);
182
- const lineHeight = this._textInsideDonut.getBoundingClientRect().height;
183
- wrapText(this._textInsideDonut, 2 * this.innerRadius);
184
- const lines = this._textInsideDonut.getElementsByTagName('tspan');
185
- const start = -1 * Math.trunc((lines.length - 1) / 2);
186
- for (let i = 0; i < lines.length; i++) {
187
- lines[i].setAttribute('dy', `${(start + i) * lineHeight}`);
188
- }
189
- }
190
- }
191
- __decorate([
192
- attr({ converter: nullableNumberConverter })
193
- ], DonutChart.prototype, "height", void 0);
194
- __decorate([
195
- attr({ converter: nullableNumberConverter })
196
- ], DonutChart.prototype, "width", void 0);
197
- __decorate([
198
- attr({ attribute: 'hide-legends', mode: 'boolean' })
199
- ], DonutChart.prototype, "hideLegends", void 0);
200
- __decorate([
201
- attr({ attribute: 'hide-tooltip', mode: 'boolean' })
202
- ], DonutChart.prototype, "hideTooltip", void 0);
203
- __decorate([
204
- attr({ converter: jsonConverter })
205
- ], DonutChart.prototype, "data", void 0);
206
- __decorate([
207
- attr({ attribute: 'inner-radius', converter: nullableNumberConverter })
208
- ], DonutChart.prototype, "innerRadius", void 0);
209
- __decorate([
210
- attr({ attribute: 'value-inside-donut' })
211
- ], DonutChart.prototype, "valueInsideDonut", void 0);
212
- __decorate([
213
- attr({ attribute: 'legend-list-label' })
214
- ], DonutChart.prototype, "legendListLabel", void 0);
215
- __decorate([
216
- observable
217
- ], DonutChart.prototype, "legends", void 0);
218
- __decorate([
219
- observable
220
- ], DonutChart.prototype, "activeLegend", void 0);
221
- __decorate([
222
- observable
223
- ], DonutChart.prototype, "isLegendSelected", void 0);
224
- __decorate([
225
- observable
226
- ], DonutChart.prototype, "tooltipProps", void 0);
227
- //# sourceMappingURL=donut-chart.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"donut-chart.js","sourceRoot":"","sources":["../../../src/donut-chart/donut-chart.ts"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=donut-chart.options.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"donut-chart.options.js","sourceRoot":"","sources":["../../../src/donut-chart/donut-chart.options.ts"],"names":[],"mappings":""}
@@ -1,133 +0,0 @@
1
- import { css } from '@microsoft/fast-element';
2
- import { borderRadiusMedium, colorNeutralBackground1, colorNeutralForeground1, colorNeutralShadowAmbient, colorNeutralShadowKey, colorStrokeFocus1, colorStrokeFocus2, colorTransparentStroke, display, forcedColorsStylesheetBehavior, spacingHorizontalL, spacingHorizontalNone, spacingHorizontalS, spacingVerticalL, spacingVerticalMNudge, spacingVerticalNone, spacingVerticalS, strokeWidthThickest, strokeWidthThin, typographyBody1Styles, typographyCaption1Styles, typographyTitle2Styles, typographyTitle3Styles, } from '@fluentui/web-components';
3
- /**
4
- * Styles for the DonutChart component.
5
- *
6
- * @public
7
- */
8
- export const styles = css `
9
- ${display('inline-block')}
10
-
11
- :host {
12
- ${typographyBody1Styles}
13
- align-items: center;
14
- flex-direction: column;
15
- width: 100%;
16
- height: 100%;
17
- position: relative;
18
- }
19
-
20
- .chart {
21
- box-sizing: content-box;
22
- overflow: visible;
23
- display: block;
24
- }
25
-
26
- .arc.inactive {
27
- opacity: 0.1;
28
- }
29
-
30
- .arc:focus {
31
- outline: none;
32
- stroke-width: ${strokeWidthThin};
33
- stroke: ${colorStrokeFocus1};
34
- }
35
-
36
- .arc-outline {
37
- fill: none;
38
- }
39
-
40
- .arc-outline:has(+ .arc:focus) {
41
- stroke-width: ${strokeWidthThickest};
42
- stroke: ${colorStrokeFocus2};
43
- }
44
-
45
- .text-inside-donut {
46
- ${typographyTitle3Styles}
47
- fill: ${colorNeutralForeground1};
48
- }
49
-
50
- .legend-container {
51
- padding-top: ${spacingVerticalL};
52
- white-space: nowrap;
53
- width: 100%;
54
- align-items: center;
55
- margin: -${spacingVerticalS} ${spacingHorizontalNone} ${spacingVerticalNone} -${spacingHorizontalS};
56
- flex-wrap: wrap;
57
- display: flex;
58
- }
59
-
60
- .legend {
61
- display: flex;
62
- align-items: center;
63
- cursor: pointer;
64
- border: none;
65
- padding: ${spacingHorizontalS};
66
- background: none;
67
- text-transform: capitalize;
68
- }
69
-
70
- .legend-rect {
71
- width: 12px;
72
- height: 12px;
73
- margin-inline-end: ${spacingHorizontalS};
74
- border: ${strokeWidthThin} solid;
75
- }
76
-
77
- .legend-text {
78
- ${typographyCaption1Styles}
79
- color: ${colorNeutralForeground1};
80
- }
81
-
82
- .legend.inactive .legend-rect {
83
- background-color: transparent !important;
84
- }
85
-
86
- .legend.inactive .legend-text {
87
- opacity: 0.67;
88
- }
89
-
90
- .tooltip {
91
- display: grid;
92
- overflow: hidden;
93
- padding: ${spacingVerticalMNudge} ${spacingHorizontalL};
94
- background-color: ${colorNeutralBackground1};
95
- background-blend-mode: normal, luminosity;
96
- border-radius: ${borderRadiusMedium};
97
- border: 1px solid ${colorTransparentStroke};
98
- filter: drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 8px 16px ${colorNeutralShadowKey});
99
- position: absolute;
100
- z-index: 1;
101
- pointer-events: none;
102
- }
103
-
104
- .tooltip-body {
105
- padding-inline-start: ${spacingHorizontalS};
106
- color: ${colorNeutralForeground1};
107
- border-inline-start: 4px solid;
108
- }
109
-
110
- .tooltip-legend-text {
111
- ${typographyCaption1Styles}
112
- }
113
-
114
- .tooltip-content-y {
115
- ${typographyTitle2Styles}
116
- }
117
- `.withBehaviors(forcedColorsStylesheetBehavior(css `
118
- .text-inside-donut {
119
- fill: CanvasText;
120
- }
121
-
122
- .legend-rect,
123
- .tooltip-body {
124
- forced-color-adjust: none;
125
- }
126
-
127
- .tooltip-legend-text,
128
- .tooltip-content-y {
129
- forced-color-adjust: auto;
130
- color: CanvasText;
131
- }
132
- `));
133
- //# sourceMappingURL=donut-chart.styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"donut-chart.styles.js","sourceRoot":"","sources":["../../../src/donut-chart/donut-chart.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,yBAAyB,EACzB,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,EACtB,OAAO,EACP,8BAA8B,EAC9B,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,qBAAqB,EACrB,wBAAwB,EACxB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,0BAA0B,CAAC;AAElC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,cAAc,CAAC;;;MAGrB,qBAAqB;;;;;;;;;;;;;;;;;;;;oBAoBP,eAAe;cACrB,iBAAiB;;;;;;;;oBAQX,mBAAmB;cACzB,iBAAiB;;;;MAIzB,sBAAsB;YAChB,uBAAuB;;;;mBAIhB,gBAAgB;;;;eAIpB,gBAAgB,IAAI,qBAAqB,IAAI,mBAAmB,KAAK,kBAAkB;;;;;;;;;;eAUvF,kBAAkB;;;;;;;;yBAQR,kBAAkB;cAC7B,eAAe;;;;MAIvB,wBAAwB;aACjB,uBAAuB;;;;;;;;;;;;;;eAcrB,qBAAqB,IAAI,kBAAkB;wBAClC,uBAAuB;;qBAE1B,kBAAkB;wBACf,sBAAsB;kCACZ,yBAAyB,4BAA4B,qBAAqB;;;;;;;4BAOhF,kBAAkB;aACjC,uBAAuB;;;;;MAK9B,wBAAwB;;;;MAIxB,sBAAsB;;CAE3B,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;GAejC,CAAC,CACH,CAAC"}
@@ -1,57 +0,0 @@
1
- import { html, ref, repeat, when } from '@microsoft/fast-element';
2
- /**
3
- * Generates a template for the DonutChart component.
4
- *
5
- * @public
6
- */
7
- export function donutChartTemplate() {
8
- return html `
9
- <template>
10
- <div ${ref('chartWrapper')}>
11
- <svg class="chart" width="${x => x.width}" height="${x => x.height}">
12
- <g ${ref('group')} transform="translate(${x => x.width / 2}, ${x => x.height / 2})"></g>
13
- </svg>
14
- </div>
15
- ${when(x => !x.hideLegends, html `
16
- <div class="legend-container" role="listbox" aria-label="${x => x.legendListLabel}">
17
- ${repeat(x => x.legends, html ` <button
18
- class="legend${(x, c) => c.parent.activeLegend === '' || c.parent.activeLegend === x.title ? '' : ' inactive'}"
19
- role="option"
20
- aria-setsize="${(x, c) => c.length}"
21
- aria-posinset="${(x, c) => c.index + 1}"
22
- aria-selected="${(x, c) => x.title === c.parent.activeLegend}"
23
- @mouseover="${(x, c) => c.parent.handleLegendMouseoverAndFocus(x.title)}"
24
- @mouseout="${(x, c) => c.parent.handleLegendMouseoutAndBlur()}"
25
- @focus="${(x, c) => c.parent.handleLegendMouseoverAndFocus(x.title)}"
26
- @blur="${(x, c) => c.parent.handleLegendMouseoutAndBlur()}"
27
- @click="${(x, c) => c.parent.handleLegendClick(x.title)}"
28
- >
29
- <div
30
- class="legend-rect"
31
- style="background-color: ${x => x.color}; border-color: ${x => x.color};"
32
- ></div>
33
- <div class="legend-text">${x => x.title}</div>
34
- </button>`)}
35
- </div>
36
- `)}
37
- ${when(x => !x.hideTooltip && x.tooltipProps.isVisible, html `
38
- <div
39
- class="tooltip"
40
- style="inset-inline-start: ${x => x.tooltipProps.xPos}px; top: ${x => x.tooltipProps.yPos}px"
41
- >
42
- <div class="tooltip-body" style="border-color: ${x => x.tooltipProps.color};">
43
- <div class="tooltip-legend-text">${x => x.tooltipProps.legend}</div>
44
- <div class="tooltip-content-y" style="color: ${x => x.tooltipProps.color};">
45
- ${x => x.tooltipProps.yValue}
46
- </div>
47
- </div>
48
- </div>
49
- `)}
50
- </template>
51
- `;
52
- }
53
- /**
54
- * @internal
55
- */
56
- export const template = donutChartTemplate();
57
- //# sourceMappingURL=donut-chart.template.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"donut-chart.template.js","sourceRoot":"","sources":["../../../src/donut-chart/donut-chart.template.ts"],"names":[],"mappings":"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"}
@@ -1,5 +0,0 @@
1
- export { definition as DonutChartDefinition } from './donut-chart.definition.js';
2
- export { DonutChart } from './donut-chart.js';
3
- export { styles as DonutChartStyles } from './donut-chart.styles.js';
4
- export { template as DonutChartTemplate } from './donut-chart.template.js';
5
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/donut-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
@@ -1,73 +0,0 @@
1
- import qs from 'qs';
2
- import { expect as baseExpect } from '@playwright/test';
3
- /**
4
- * Returns a formatted URL for a given Storybook fixture.
5
- *
6
- * @param id - the Storybook fixture ID
7
- * @param args - Story args
8
- * @returns - the local URL for the Storybook fixture iframe
9
- */
10
- export function fixtureURL(id = 'debug--blank', args) {
11
- const params = { id };
12
- if (args) {
13
- params.args = qs
14
- .stringify(args, {
15
- allowDots: true,
16
- delimiter: ';',
17
- format: 'RFC1738',
18
- encode: false,
19
- })
20
- .replace(/=/g, ':')
21
- .replace(/\//g, '--');
22
- }
23
- const url = qs.stringify(params, {
24
- addQueryPrefix: true,
25
- format: 'RFC1738',
26
- encode: false,
27
- });
28
- return url;
29
- }
30
- /**
31
- * Evaluate whether an element has the given state or not on its `elementInternals` property.
32
- *
33
- * @param locator - The Playwright locator for the element.
34
- * @param state - The name of the state.
35
- * @param expected - Whether the given state is expected to exist.
36
- * @param has - Whether the element is expected to have or not have the given state, defaults to `true`.
37
- */
38
- async function toHaveCustomState(locator, state, options) {
39
- const assertionName = 'toHaveCustomState';
40
- let pass;
41
- let matcherResult;
42
- const expected = !this.isNot;
43
- try {
44
- baseExpect(await locator.evaluate((el, state) => el.matches(`:state(${state})`), state, options)).toEqual(true);
45
- pass = true;
46
- }
47
- catch (err) {
48
- matcherResult = err.matcherResult;
49
- pass = false;
50
- }
51
- const message = pass
52
- ? () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
53
- '\n\n' +
54
- `Locator: ${locator}\n` +
55
- `Expected: ${this.isNot ? 'not' : ''}${this.utils.printExpected(expected)}\n` +
56
- (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : '')
57
- : () => this.utils.matcherHint(assertionName, undefined, undefined, { isNot: this.isNot }) +
58
- '\n\n' +
59
- `Locator: ${locator}\n` +
60
- `Expected: ${this.utils.printExpected(expected)}\n` +
61
- (matcherResult ? `Received: ${this.utils.printReceived(matcherResult.actual)}` : '');
62
- return {
63
- name: assertionName,
64
- message,
65
- pass,
66
- expected,
67
- actual: matcherResult === null || matcherResult === void 0 ? void 0 : matcherResult.actual,
68
- };
69
- }
70
- export const expect = baseExpect.extend({
71
- toHaveCustomState,
72
- });
73
- //# sourceMappingURL=helpers.tests.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"helpers.tests.js","sourceRoot":"","sources":["../../src/helpers.tests.ts"],"names":[],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- import { FluentDesignSystem } from '@fluentui/web-components';
2
- import { definition } from './horizontal-bar-chart.definition.js';
3
- definition.define(FluentDesignSystem.registry);
4
- //# sourceMappingURL=define.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/horizontal-bar-chart/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
@@ -1,10 +0,0 @@
1
- import { FluentDesignSystem } from '@fluentui/web-components';
2
- import { definition } from './horizontal-bar-chart.definition.js';
3
- definition.define(FluentDesignSystem.registry);
4
- const itemRenderer = () => {
5
- const horizontalbarchart = document.createElement('fluent-horizontal-bar-chart');
6
- return horizontalbarchart;
7
- };
8
- export default itemRenderer;
9
- export { tests } from '../utils/benchmark-wrapper.js';
10
- //# sourceMappingURL=horizontal-bar-chart.bench.js.map