1 | var __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 | };
|
7 | var __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 | };
|
12 | var __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 | };
|
18 | var _DuoyunDonutChartElement_outside, _DuoyunDonutChartElement_inside, _DuoyunDonutChartElement_paths, _DuoyunDonutChartElement_tooltipRender, _DuoyunDonutChartElement_onMouseMove, _DuoyunDonutChartElement_onMouseOut;
|
19 |
|
20 | import { adoptedStyle, customElement, attribute, property } from '@mantou/gem/lib/decorators';
|
21 | import { html, svg } from '@mantou/gem/lib/element';
|
22 | import { createCSSSheet, css } from '@mantou/gem/lib/utils';
|
23 | import { theme } from '../lib/theme';
|
24 | import { DuoyunChartBaseElement } from './base/chart';
|
25 | import { ChartTooltip } from './chart-tooltip';
|
26 | const style = createCSSSheet(css `
|
27 | .path {
|
28 | stroke: ${theme.backgroundColor};
|
29 | }
|
30 | .path:hover {
|
31 | filter: brightness(1.05);
|
32 | }
|
33 | `);
|
34 |
|
35 |
|
36 |
|
37 | let 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);
|
140 | DuoyunDonutChartElement = __decorate([
|
141 | customElement('dy-donut-chart'),
|
142 | adoptedStyle(style)
|
143 | ], DuoyunDonutChartElement);
|
144 | export { DuoyunDonutChartElement };
|
145 |
|
\ | No newline at end of file |