duoyun-ui/elements/bar-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 __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 __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 _DuoyunBarChartElement_stackSequences;
import { customElement, property, adoptedStyle } from '@mantou/gem/lib/decorators';
import { html, svg } from '@mantou/gem/lib/element';
import { css, createCSSSheet } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { DuoyunChartBaseElement } from './base/chart';
import { ChartTooltip } from './chart-tooltip';
const style = createCSSSheet(css `
  .serie:hover .rect {
    fill: ${theme.hoverBackgroundColor};
    opacity: 0.2;
  }
  .bar:hover {
    filter: brightness(1.05);
  }
`);
/**
 * @customElement dy-bar-chart
 */
let DuoyunBarChartElement = class DuoyunBarChartElement extends DuoyunChartBaseElement {
    constructor() {
        super(...arguments);
        this.gutter = 0;
        this.stack = false;
        this.xAxi = {
            formatter: (v) => { var _a; return ((_a = this.series) === null || _a === void 0 ? void 0 : _a[Number(v) - 1]) || ''; },
        };
        _DuoyunBarChartElement_stackSequences.set(this, void 0);
        this.onMouseMove = (index, evt, sort, seqIndex = -1) => {
            var _a, _b, _c, _d, _e;
            let values = (_a = this.sequences) === null || _a === void 0 ? void 0 : _a.map(({ values, label }, i) => {
                var _a, _b;
                return {
                    label,
                    value: ((_b = (_a = this.yAxi) === null || _a === void 0 ? void 0 : _a.formatter) === null || _b === void 0 ? void 0 : _b.call(_a, values[index], 0)) || String(values[index]),
                    color: this.colors[i],
                    originValue: values[index],
                    highlight: seqIndex === i,
                };
            });
            if (this.stack) {
                values = values === null || values === void 0 ? void 0 : values.reverse();
            }
            if ((_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.filter) {
                values = values === null || values === void 0 ? void 0 : values.filter(this.tooltip.filter);
            }
            if (sort) {
                values = values === null || values === void 0 ? void 0 : values.sort((a, b) => {
                    const an = Number(a.originValue);
                    const bn = Number(b.originValue);
                    if (isNaN(an))
                        return 1;
                    if (isNaN(bn))
                        return -1;
                    return an > bn ? -1 : 1;
                });
            }
            ChartTooltip.open(evt.x, evt.y, {
                render: (_c = this.tooltip) === null || _c === void 0 ? void 0 : _c.render,
                xValue: index,
                title: ((_e = (_d = this.tooltip) === null || _d === void 0 ? void 0 : _d.titleFormatter) === null || _e === void 0 ? void 0 : _e.call(_d, this.series[index])) || String(this.series[index]),
                values: values,
            });
        };
        this.onMouseOut = () => {
            ChartTooltip.close();
        };
        this.willMount = () => {
            this.memo(() => {
                var _a, _b;
                if (!this.contentRect.width)
                    return;
                if (!((_a = this.sequences) === null || _a === void 0 ? void 0 : _a.length))
                    return;
                if (!((_b = this.series) === null || _b === void 0 ? void 0 : _b.length))
                    return;
                const seqs = this.sequences.map((e) => e.values);
                __classPrivateFieldSet(this, _DuoyunBarChartElement_stackSequences, seqs.map((_, index) => this.mergeNumberValues(seqs.slice(0, index + 1))), "f");
                const xMin = 0;
                const xMax = this.series.length;
                let yMin = Infinity;
                let yMax = -Infinity;
                (this.stack ? __classPrivateFieldGet(this, _DuoyunBarChartElement_stackSequences, "f") : seqs).forEach((values) => {
                    values.forEach((y) => {
                        yMin = Math.min(yMin, y !== null && y !== void 0 ? y : Infinity);
                        yMax = Math.max(yMax, y !== null && y !== void 0 ? y : -Infinity);
                    });
                });
                this.xStep = xMax;
                this.initXAxi(xMin, xMax);
                this.initYAxi(yMin, yMax);
                this.initViewBox();
            }, () => [this.sequences, this.contentRect.width]);
        };
        this.render = () => {
            if (this.loading)
                return this.renderLoading();
            if (this.noData)
                return this.renderNotData();
            if (!this.contentRect.width || !this.sequences || !this.series)
                return html ``;
            return html `
      ${svg `
        <svg aria-hidden="true" part=${DuoyunChartBaseElement.chart} xmlns="http://www.w3.org/2000/svg" viewBox=${this.viewBox.join(' ')}>
          ${this.renderXAxi({ centerLabel: true })}
          ${this.renderYAxi()}
          ${this.series.map((_value, i, _, width = 1) => svg `
              <g class="serie" @click=${() => this.indexclick(i)} @pointerout=${this.onMouseOut}>
                <rect
                  @pointermove=${(evt) => this.onMouseMove(i, evt, false)}
                  class="rect"
                  fill="transparent"
                  x=${(i + 0.5 - width / 2) / this.xAxiUnit}
                  y=${0}
                  width=${width / this.xAxiUnit}
                  height=${this.stageHeight}
                />
                ${this.sequences.map(({ values }, index, sequences, value = values[i], total = 0.6, height = (value || 0) - this.yAxiMin, seqWidth = this.stack ? total : (total - this.gutter * (sequences.length - 1)) / sequences.length, offsetX = this.stack ? 0 : index * (this.gutter + seqWidth), offsetY = this.stack
                ? (__classPrivateFieldGet(this, _DuoyunBarChartElement_stackSequences, "f")[index - 1] ? __classPrivateFieldGet(this, _DuoyunBarChartElement_stackSequences, "f")[index - 1][i] : 0) - this.yAxiMin
                : 0) => svg `
                    <rect
                      @pointermove=${(evt) => this.onMouseMove(i, evt, false, index)}
                      class="bar"
                      fill=${this.colors[index]}
                      x=${(i + (1 - total) / 2 + offsetX) / this.xAxiUnit}
                      y=${this.stageHeight - (height + offsetY) / this.yAxiUnit}
                      width=${seqWidth / this.xAxiUnit}
                      height=${height / this.yAxiUnit}
                    />
                  `)}
              </g>
            `)}
          ${this.renderMarkLines()}
        </svg>
      `}
    `;
        };
    }
};
_DuoyunBarChartElement_stackSequences = new WeakMap();
__decorate([
    property
], DuoyunBarChartElement.prototype, "series", void 0);
__decorate([
    property
], DuoyunBarChartElement.prototype, "gutter", void 0);
__decorate([
    property
], DuoyunBarChartElement.prototype, "stack", void 0);
__decorate([
    property
], DuoyunBarChartElement.prototype, "sequences", void 0);
DuoyunBarChartElement = __decorate([
    customElement('dy-bar-chart'),
    adoptedStyle(style)
], DuoyunBarChartElement);
export { DuoyunBarChartElement };
//# sourceMappingURL=bar-chart.js.map