UNPKG

8.4 kBJavaScriptView Raw
1var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3 if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4 else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5 return c > 3 && r && Object.defineProperty(target, key, r), r;
6};
7var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8 if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10 return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11};
12var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
13 if (kind === "m") throw new TypeError("Private method is not writable");
14 if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
15 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
16 return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
17};
18var _DuoyunDonutChartElement_outside, _DuoyunDonutChartElement_inside, _DuoyunDonutChartElement_paths, _DuoyunDonutChartElement_tooltipRender, _DuoyunDonutChartElement_onMouseMove, _DuoyunDonutChartElement_onMouseOut;
19// https://spectrum.adobe.com/page/donut-chart/
20import { adoptedStyle, customElement, attribute, property } from '@mantou/gem/lib/decorators';
21import { html, svg } from '@mantou/gem/lib/element';
22import { createCSSSheet, css } from '@mantou/gem/lib/utils';
23import { theme } from '../lib/theme';
24import { DuoyunChartBaseElement } from './base/chart';
25import { ChartTooltip } from './chart-tooltip';
26const style = createCSSSheet(css `
27 .path {
28 stroke: ${theme.backgroundColor};
29 }
30 .path:hover {
31 filter: brightness(1.05);
32 }
33`);
34/**
35 * @customElement dy-donut-chart
36 */
37let DuoyunDonutChartElement = class DuoyunDonutChartElement extends DuoyunChartBaseElement {
38 constructor() {
39 super(...arguments);
40 this.stageWidth = 300;
41 this.stageHeight = 300;
42 _DuoyunDonutChartElement_outside.set(this, 140);
43 _DuoyunDonutChartElement_inside.set(this, 115);
44 _DuoyunDonutChartElement_paths.set(this, void 0);
45 _DuoyunDonutChartElement_tooltipRender.set(this, (data) => {
46 return html `${data.values[0].label},${data.values[0].value}`;
47 });
48 _DuoyunDonutChartElement_onMouseMove.set(this, (evt, index) => {
49 var _a, _b, _c;
50 if (this.noData || this.loading)
51 return;
52 const { label, value } = this.sequences[index];
53 ChartTooltip.open(evt.x, evt.y, {
54 render: ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.render) || __classPrivateFieldGet(this, _DuoyunDonutChartElement_tooltipRender, "f"),
55 values: [
56 {
57 value: ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.valueFormatter) === null || _c === void 0 ? void 0 : _c.call(_b, value)) || String(value),
58 originValue: value,
59 color: this.colors[index],
60 label: label,
61 },
62 ],
63 });
64 });
65 _DuoyunDonutChartElement_onMouseOut.set(this, () => {
66 ChartTooltip.close();
67 });
68 this.willMount = () => {
69 this.memo(() => {
70 var _a, _b;
71 const total = (_a = this.sequences) === null || _a === void 0 ? void 0 : _a.reduce((p, c) => p + c.value, 0);
72 const accumulateSequences = (_b = this.sequences) === null || _b === void 0 ? void 0 : _b.map((_, index) => this.sequences.slice(0, index + 1).reduce((p, c) => p + c.value, 0));
73 const thetaList = accumulateSequences === null || accumulateSequences === void 0 ? void 0 : accumulateSequences.map((v, index, arr, prev = arr[index - 1] || 0) => [prev, v].map((e) => (e / total) * 2 * Math.PI));
74 __classPrivateFieldSet(this, _DuoyunDonutChartElement_paths, thetaList === null || thetaList === void 0 ? void 0 : thetaList.map(([start, stop]) => {
75 const insideStartPoint = this.polarToCartesian([__classPrivateFieldGet(this, _DuoyunDonutChartElement_inside, "f"), start]).join(' ');
76 const insideStopPoint = this.polarToCartesian([__classPrivateFieldGet(this, _DuoyunDonutChartElement_inside, "f"), stop]).join(' ');
77 const outsideStartPoint = this.polarToCartesian([__classPrivateFieldGet(this, _DuoyunDonutChartElement_outside, "f"), stop]).join(' ');
78 const outsideStopPoint = this.polarToCartesian([__classPrivateFieldGet(this, _DuoyunDonutChartElement_outside, "f"), start]).join(' ');
79 return (`M${insideStartPoint}A${__classPrivateFieldGet(this, _DuoyunDonutChartElement_inside, "f")} ${__classPrivateFieldGet(this, _DuoyunDonutChartElement_inside, "f")} 0 0 1 ${insideStopPoint}` +
80 `L${outsideStartPoint}A${__classPrivateFieldGet(this, _DuoyunDonutChartElement_outside, "f")} ${__classPrivateFieldGet(this, _DuoyunDonutChartElement_outside, "f")} 0 0 0 ${outsideStopPoint}`);
81 }), "f");
82 }, () => [this.sequences]);
83 };
84 this.mounted = () => {
85 return __classPrivateFieldGet(this, _DuoyunDonutChartElement_onMouseOut, "f");
86 };
87 this.render = () => {
88 var _a;
89 if (!this.contentRect.width)
90 return html ``;
91 return html `
92 ${svg `
93 <svg aria-hidden="true" part=${DuoyunChartBaseElement.chart} xmlns="http://www.w3.org/2000/svg" viewBox="-150 -150 300 300">
94 ${(_a = __classPrivateFieldGet(this, _DuoyunDonutChartElement_paths, "f")) === null || _a === void 0 ? void 0 : _a.map((d, index) => svg `
95 <path
96 class="path"
97 @pointermove=${(evt) => __classPrivateFieldGet(this, _DuoyunDonutChartElement_onMouseMove, "f").call(this, evt, index)}
98 @pointerout=${__classPrivateFieldGet(this, _DuoyunDonutChartElement_onMouseOut, "f")}
99 @click=${() => this.indexclick(index)}
100 d=${d}
101 fill=${this.colors[index]}
102 stroke-width=${this.getSVGPixel(1)}
103 />
104 `)}
105 <text
106 x=${0}
107 y=${this.label ? -this.getSVGPixel(4) : 0}
108 font-size=${this.getSVGPixel(24)}
109 font-weight="bold"
110 fill="currentColor"
111 text-anchor="middle"
112 dominant-baseline="middle">
113 ${this.total}
114 </text>
115 <text
116 x=${0}
117 y=${this.total ? this.getSVGPixel(14) : 0}
118 font-size=${this.getSVGPixel(12)}
119 fill="currentColor"
120 text-anchor="middle"
121 dominant-baseline="middle">
122 ${this.label}
123 </text>
124 </svg>
125 `}
126 `;
127 };
128 }
129};
130_DuoyunDonutChartElement_outside = new WeakMap(), _DuoyunDonutChartElement_inside = new WeakMap(), _DuoyunDonutChartElement_paths = new WeakMap(), _DuoyunDonutChartElement_tooltipRender = new WeakMap(), _DuoyunDonutChartElement_onMouseMove = new WeakMap(), _DuoyunDonutChartElement_onMouseOut = new WeakMap();
131__decorate([
132 attribute
133], DuoyunDonutChartElement.prototype, "label", void 0);
134__decorate([
135 attribute
136], DuoyunDonutChartElement.prototype, "total", void 0);
137__decorate([
138 property
139], DuoyunDonutChartElement.prototype, "sequences", void 0);
140DuoyunDonutChartElement = __decorate([
141 customElement('dy-donut-chart'),
142 adoptedStyle(style)
143], DuoyunDonutChartElement);
144export { DuoyunDonutChartElement };
145//# sourceMappingURL=donut-chart.js.map
\No newline at end of file