ze-react-component-library/lib/components/Chart/common-option.js

ZeroETP React Component Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.getChartDataset = exports.tooltipFormatter = void 0;

var _zeroetpApiSdk = require("zeroetp-api-sdk");

var _util = require("../../util");

var tooltipFormatter = function tooltipFormatter(_a) {
  var params = _a.params,
      properties = _a.properties,
      defaultName = _a.defaultName;
  var res = "";

  if (!params) {
    return res;
  }

  var data = params instanceof Array ? params : [params];
  data.slice(0, 1).forEach(function (d) {
    var _a;

    var name = d.name || defaultName;

    if ((_a = d === null || d === void 0 ? void 0 : d.data) === null || _a === void 0 ? void 0 : _a.labelName) {
      name = ("" + d.data.labelName).replace("\n", "<br />");
    }

    var itemTip = name ? "" + name : "";

    if (itemTip.length > 0) {
      itemTip += "<br />";
    }

    properties.forEach(function (property, index) {
      var _a, _b, _c;

      var v = (_a = d === null || d === void 0 ? void 0 : d.data) === null || _a === void 0 ? void 0 : _a[property.name];
      var displayV = (0, _util.formatWithProperty)(property, v); // 内置字段处理

      if (property.name.startsWith('@@')) {
        if (property.name === '@@value') {
          itemTip = ((_b = data[index] || d) === null || _b === void 0 ? void 0 : _b.marker) + "\n          " + name + (property.unit ? "(" + property.unit + ")" : "") + " <span style=\"float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900\">" + displayV + "</span><br />";
        }
      } else {
        itemTip = "" + itemTip + ((_c = data[index] || d) === null || _c === void 0 ? void 0 : _c.marker) + property.name + "\n        " + (property.unit ? "(" + property.unit + ")" : "") + " <span style=\"float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900\">" + displayV + "</span><br />";
      }
    });
    res = "" + res + itemTip;
  });
  return res;
};

exports.tooltipFormatter = tooltipFormatter;

var getChartDataset = function getChartDataset(apiResult, useNameAsDimension) {
  var dataset = {
    source: [],
    dimensions: []
  };

  if ((apiResult === null || apiResult === void 0 ? void 0 : apiResult.result) && (apiResult === null || apiResult === void 0 ? void 0 : apiResult.columnProperties)) {
    // dataset source
    dataset.source = (0, _util.formatResultName)(apiResult); // dataset dimensions

    dataset.dimensions = apiResult.columnProperties.map(function (property) {
      if (useNameAsDimension && property.type === "object" && property.schema) {
        var nameProp = (0, _zeroetpApiSdk.getNameProperty)(property.schema);

        if (nameProp) {
          return "" + property.name;
        }
      }

      return property.name;
    });
  }

  return dataset;
}; // 这里填上所有图表默认的option


exports.getChartDataset = getChartDataset;

var _default = function _default(apiResult, isMobile, useNameAsDimension, // 主要给地图用，地图的话，dimension要设置为geo entity的name
theme, name) {
  var _a, _b, _c, _d;

  if (isMobile === void 0) {
    isMobile = false;
  }

  if (useNameAsDimension === void 0) {
    useNameAsDimension = false;
  }

  if (theme === void 0) {
    theme = "light";
  }

  var textColor = theme === "dark" ? "#fff" : "#000";
  var option = {
    legend: {
      show: ((_a = apiResult.columnProperties) === null || _a === void 0 ? void 0 : _a.filter(function (f) {
        return f.primal_type === "number";
      }).length) > 1,
      type: "scroll",
      padding: [0, 40],
      textStyle: {
        color: textColor
      }
    },
    toolbox: {
      show: !isMobile,
      feature: {
        saveAsImage: {
          title: "下载图片",
          name: (0, _util.getExportFileName)(name, "")
        }
      }
    },
    tooltip: {
      confine: true,
      trigger: "axis",
      extraCssText: "white-space: unset;"
    },
    barMaxWidth: 48,
    grid: {
      left: "1%",
      right: "12%",
      bottom: 0,
      containLabel: true
    },
    animation: false,
    textStyle: {
      color: textColor
    }
  }; // dataset

  option.dataset = getChartDataset(apiResult, useNameAsDimension);

  if ((apiResult === null || apiResult === void 0 ? void 0 : apiResult.result) && (apiResult === null || apiResult === void 0 ? void 0 : apiResult.columnProperties)) {
    // values
    var measurementProps_1 = apiResult.columnProperties.slice((_d = (_c = (_b = apiResult.logicform) === null || _b === void 0 ? void 0 : _b.groupby) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0); // tooltip formatter

    if (!Array.isArray(option.tooltip)) {
      option.tooltip.formatter = function (params) {
        return tooltipFormatter({
          params: params,
          properties: measurementProps_1
        });
      };
    }
  }

  return option;
};

exports.default = _default;