duoyun-ui/elements/statistic.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 _DuoyunStatisticElement_instances, _DuoyunStatisticElement_neutral_get, _DuoyunStatisticElement_type_get;
import { adoptedStyle, customElement, attribute, boolattribute, numattribute } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, classMap } from '@mantou/gem/lib/utils';
import { parseDuration } from '../lib/time';
import { theme } from '../lib/theme';
import { formatBandwidth, formatDecimal, formatPercentage, formatTraffic, formatCurrency } from '../lib/number';
import './placeholder';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: block;
    font-size: 0.875em;
    line-height: 1.2;
  }
  .title {
    margin-block-end: 1em;
  }
  .values {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: bold;
  }
  .value {
    display: flex;
    align-items: baseline;
    gap: 0.3em;
  }
  .number {
    font-size: 2em;
  }
  .positive {
    color: ${theme.positiveColor};
  }
  .negative {
    color: ${theme.negativeColor};
  }
`);
export const formatFnMap = {
    bandwidth: formatBandwidth,
    traffic: formatTraffic,
    decimal: formatDecimal,
    percentage: formatPercentage,
    currency: formatCurrency,
    duration: parseDuration,
};
/**
 * @customElement dy-statistic
 * @attr loading
 */
let DuoyunStatisticElement = class DuoyunStatisticElement extends GemElement {
    constructor() {
        super();
        _DuoyunStatisticElement_instances.add(this);
        this.render = () => {
            const { number, unit } = formatFnMap[__classPrivateFieldGet(this, _DuoyunStatisticElement_instances, "a", _DuoyunStatisticElement_type_get)](this.value);
            const diffValue = this.prevValue !== 0 && this.value === 0
                ? Infinity
                : Number((((this.value - this.prevValue) / this.prevValue) * 100).toFixed(2));
            const [positive, negative] = __classPrivateFieldGet(this, _DuoyunStatisticElement_instances, "a", _DuoyunStatisticElement_neutral_get) === 'positive' ? [diffValue > 0, diffValue < 0] : [diffValue < 0, diffValue > 0];
            return html `
      <div class="title">${this.loading ? html `<dy-placeholder width="5em"></dy-placeholder>` : this.text}</div>
      <div class="values">
        <div class="value">
          <span class="number">${this.loading ? html `<dy-placeholder width="6em"></dy-placeholder>` : number}</span>
          <span class="unit">${this.loading ? '' : unit}</span>
        </div>
        ${this.loading || !this.hasAttribute('prev-value')
                ? ''
                : html `<span class=${classMap({ positive, negative })}>
              ${isNaN(diffValue) ? '-' : diffValue === Infinity ? '∞' : diffValue}%
            </span>`}
      </div>
    `;
        };
        this.internals.role = 'group';
    }
};
_DuoyunStatisticElement_instances = new WeakSet(), _DuoyunStatisticElement_neutral_get = function _DuoyunStatisticElement_neutral_get() {
    return this.neutral || 'positive';
}, _DuoyunStatisticElement_type_get = function _DuoyunStatisticElement_type_get() {
    return this.type || 'decimal';
};
__decorate([
    attribute
], DuoyunStatisticElement.prototype, "neutral", void 0);
__decorate([
    attribute
], DuoyunStatisticElement.prototype, "type", void 0);
__decorate([
    attribute
], DuoyunStatisticElement.prototype, "text", void 0);
__decorate([
    boolattribute
], DuoyunStatisticElement.prototype, "loading", void 0);
__decorate([
    numattribute
], DuoyunStatisticElement.prototype, "value", void 0);
__decorate([
    numattribute
], DuoyunStatisticElement.prototype, "prevValue", void 0);
DuoyunStatisticElement = __decorate([
    customElement('dy-statistic'),
    adoptedStyle(style)
], DuoyunStatisticElement);
export { DuoyunStatisticElement };
//# sourceMappingURL=statistic.js.map