duoyun-ui/elements/scatter-chart.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    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;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    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");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    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");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _DuoyunScatterChartElement_symbolSequences, _DuoyunScatterChartElement_tooltipRender, _DuoyunScatterChartElement_onMouseMove, _DuoyunScatterChartElement_onMouseOut;
// https://spectrum.adobe.com/page/scatter-plot/
import { customElement, property } from '@mantou/gem/lib/decorators';
import { html, svg } from '@mantou/gem/lib/element';
import { classMap } from '@mantou/gem/lib/utils';
import { isNullish } from '../lib/types';
import { DuoyunChartBaseElement } from './base/chart';
import { ChartTooltip } from './chart-tooltip';
/**
 * @customElement dy-scatter-chart
 */
let DuoyunScatterChartElement = class DuoyunScatterChartElement extends DuoyunChartBaseElement {
    constructor() {
        super(...arguments);
        _DuoyunScatterChartElement_symbolSequences.set(this, []);
        _DuoyunScatterChartElement_tooltipRender.set(this, (data) => {
            return html `${data.xValue},${data.values[0].value}`;
        });
        _DuoyunScatterChartElement_onMouseMove.set(this, (evt, index, point) => {
            var _a, _b, _c, _d, _e;
            if (this.noData || this.loading)
                return;
            ChartTooltip.open(evt.x, evt.y, {
                render: ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.render) || __classPrivateFieldGet(this, _DuoyunScatterChartElement_tooltipRender, "f"),
                xValue: point[0],
                values: [
                    {
                        value: ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.valueFormatter) === null || _c === void 0 ? void 0 : _c.call(_b, point[1])) || ((_e = (_d = this.yAxi) === null || _d === void 0 ? void 0 : _d.formatter) === null || _e === void 0 ? void 0 : _e.call(_d, point[1], 0)) || String(point[1]),
                        originValue: point[1],
                        color: this.colors[index],
                        label: this.sequences[index].label,
                    },
                ],
            });
        });
        _DuoyunScatterChartElement_onMouseOut.set(this, () => {
            ChartTooltip.close();
        });
        this.willMount = () => {
            this.memo(() => {
                var _a;
                if (!this.contentRect.width)
                    return;
                if (!((_a = this.sequences) === null || _a === void 0 ? void 0 : _a.length))
                    return;
                let xMin = Infinity;
                let xMax = -Infinity;
                let yMin = Infinity;
                let yMax = -Infinity;
                this.sequences.forEach(({ values }) => {
                    values.forEach(([x, y]) => {
                        if (!isNullish(x)) {
                            xMin = Math.min(xMin, x);
                            xMax = Math.max(xMax, x);
                        }
                        if (!isNullish(y)) {
                            yMin = Math.min(yMin, y);
                            yMax = Math.max(yMax, y);
                        }
                    });
                });
                this.initXAxi(xMin, xMax);
                this.initYAxi(yMin, yMax);
                this.initViewBox();
                __classPrivateFieldSet(this, _DuoyunScatterChartElement_symbolSequences, this.sequences.map(({ values }) => {
                    return values.map(([x, y]) => {
                        return isNullish(x) || isNullish(y) ? undefined : this.getStagePoint([x, y]);
                    });
                }), "f");
            }, () => [this.sequences, this.contentRect.width]);
        };
        this.mounted = () => {
            return __classPrivateFieldGet(this, _DuoyunScatterChartElement_onMouseOut, "f");
        };
        this.render = () => {
            if (this.loading)
                return this.renderLoading();
            if (this.noData)
                return this.renderNotData();
            if (!this.contentRect.width || !this.sequences)
                return html ``;
            return html `
      <style>
        .symbol {
          opacity: 0.8;
        }
        .symbol:hover {
          opacity: 1;
          transform-box: fill-box;
          transform-origin: center;
          transform: scale(1.2);
        }
        .disabled {
          pointer-events: none;
        }
      </style>
      ${svg `
        <svg aria-hidden="true" part=${DuoyunChartBaseElement.chart} xmlns="http://www.w3.org/2000/svg" viewBox=${this.viewBox.join(' ')}>
          ${this.renderXAxi({ grid: true })}
          ${this.renderYAxi()}
          ${this.sequences.map(({ label, value, values }, index) => __classPrivateFieldGet(this, _DuoyunScatterChartElement_symbolSequences, "f")[index].map((point, pos) => point
                ? svg `
                    <circle
                      @mousemove=${(evt) => __classPrivateFieldGet(this, _DuoyunScatterChartElement_onMouseMove, "f").call(this, evt, index, values[pos])}
                      @mouseout=${__classPrivateFieldGet(this, _DuoyunScatterChartElement_onMouseOut, "f")}
                      class=${classMap({
                    symbol: true,
                    disabled: !!this.filtersSet.size && !this.filtersSet.has(value !== null && value !== void 0 ? value : label),
                })}
                      fill=${this.colors[index]}
                      r=${this.getSVGPixel(5)}
                      cx=${point[0]}
                      cy=${point[1]}
                    />
                  `
                : ''))}
        </svg>
      `}
    `;
        };
    }
};
_DuoyunScatterChartElement_symbolSequences = new WeakMap(), _DuoyunScatterChartElement_tooltipRender = new WeakMap(), _DuoyunScatterChartElement_onMouseMove = new WeakMap(), _DuoyunScatterChartElement_onMouseOut = new WeakMap();
__decorate([
    property
], DuoyunScatterChartElement.prototype, "sequences", void 0);
DuoyunScatterChartElement = __decorate([
    customElement('dy-scatter-chart')
], DuoyunScatterChartElement);
export { DuoyunScatterChartElement };
//# sourceMappingURL=scatter-chart.js.map