light-chart/adapt/index.js

Charts for mobile visualization.

import Renderer from './renderer';
import F2 from '../src';
import Theme from './theme';

function strLen(str) {
    let len = 0;
    for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
            len++;
        } else {
            len += 2;
        }
    }
    return len;
}
// 由于GCanvas不支持 measureText 方法，故用此方法 mock
F2.Util.measureText = function(text, font) {
    let fontSize = 12;
    if (font) {
        fontSize = parseInt(font.split(' ')[3], 10);
    }
    fontSize /= 2;
    if (process.env.RUNTIME === "miniapp") {
        fontSize *= __base__.config.env.dpr;
    }
    return {
        width: strLen(text) * fontSize
    };
};

F2.Util.createEvent = function(event, chart) {
    const pixelRatio = chart.get('pixelRatio') || 1;
    const type = event.type;
    let x = 0;
    let y = 0;
    const touches = event.changedTouches;
    if (touches && touches.length > 0) {
        x = touches[0].pageX;
        y = touches[0].pageY;
    }

    return {
        type,
        chart,
        x: x * pixelRatio,
        y: y * pixelRatio
    };
};

//小程序中图例的标记太小
function compare(a, b) {
    return a - b;
}

function _isScaleExist(scales, compareScale) {
    let flag = false;
    F2.Util.each(scales, scale => {
        const scaleValues = [].concat(scale.values);
        const compareScaleValues = [].concat(compareScale.values);
        if (scale.type === compareScale.type &&
            scale.field === compareScale.field &&
            scaleValues.sort(compare).toString() === compareScaleValues.sort(compare).toString()) {
            flag = true;
            return;
        }
    });

    return flag;
}

F2.Chart.prototype.getLegendItems = function() {
    if (this.get('legendItems')) {
        return this.get('legendItems');
    }
    const legendItems = {};
    const scales = [];

    const geoms = this.get('geoms');
    F2.Util.each(geoms, geom => {
        const colorAttr = geom.getAttr('color');
        if (colorAttr) {
            const scale = colorAttr.getScale('color');
            if (scale.type !== 'identity' && !_isScaleExist(scales, scale)) {
                scales.push(scale);

                const field = scale.field;
                const ticks = scale.getTicks();
                const items = [];
                F2.Util.each(ticks, tick => {
                    const text = tick.text;
                    const name = text;
                    const scaleValue = tick.value;
                    const value = scale.invert(scaleValue);
                    const color = colorAttr.mapping(value).join('') || Global.defaultColor;

                    const radius = 3 * (process.env.RUNTIME === 'miniapp' ? __base__.config.env.dpr : 1);

                    const marker = {
                        fill: color,
                        radius: radius,
                        symbol: 'circle',
                        stroke: '#fff'
                    };

                    items.push({
                        name, // for display
                        dataValue: value, // the origin value
                        checked: true,
                        marker
                    });
                });

                legendItems[field] = items;
            }
        }
    });

    this.set('legendItems', legendItems);

    return legendItems;
}


//兼容小程序：支持柱状图圆角
F2.G.Shape.Rect.prototype.isAdjusted = false;
F2.G.Shape.Rect.prototype.createPath = function(context) {
    const self = this;
    const attrs = self.get('attrs');
    const { x, y, width, height } = attrs;

    context.beginPath();
    if (process.env.RUNTIME === "miniapp" && typeof attrs.radius == 'object' && !this.isAdjusted) {
        var newarr = [];
        var originRadius = attrs.radius;
        newarr = originRadius.map((r) => {
            return r * __base__.config.env.dpr;
        })
        attrs.radius = newarr;
        self.isAdjusted = true;
    }

    let radius = attrs.radius;
    if (!radius || !(width * height)) {
        context.rect(x, y, width, height);
    } else {
        radius = F2.Util.parsePadding(radius);
        context.moveTo(x + radius[0], y);
        context.lineTo(x + width - radius[1], y);
        context.arc(x + width - radius[1], y + radius[1], radius[1], -Math.PI / 2, 0, false);
        context.lineTo(x + width, y + height - radius[2]);
        context.arc(x + width - radius[2], y + height - radius[2], radius[2], 0, Math.PI / 2, false);
        context.lineTo(x + radius[3], y + height);
        context.arc(x + radius[3], y + height - radius[3], radius[3], Math.PI / 2, Math.PI, false);
        context.lineTo(x, y + radius[0]);
        context.arc(x + radius[0], y + radius[0], radius[0], Math.PI, Math.PI * 3 / 2, false);
        context.closePath();
    }
}


//兼容小程序：文字lineHeight调整
F2.G.Shape.Text.prototype._getSpaceingY = function() {
    const attrs = this._attrs.attrs;
    var lineHeight = attrs.lineHeight;
    const fontSize = attrs.fontSize * 1;
    if (process.env.RUNTIME === "miniapp") {
        lineHeight *= __base__.config.env.dpr;
    }
    return lineHeight ? (lineHeight - fontSize) : fontSize * 0.14;
}


//167043【Light小程序】【图表库】支持在小程序项目中使用light-chart：chart.clear()
F2.Chart.plugins._plugins[0].clearInner = function(chart) {
    const tooltipController = chart.get('tooltipController');
    tooltipController.unBindEvents = function() {
        if (!this._tooltipCfg) return;
        const cfg = this._tooltipCfg;
        const { triggerOn, triggerOff, alwaysShow } = cfg;
        const showMethod = F2.Util.getWrapBehavior(this, 'handleShowEvent');
        const hideMethod = F2.Util.getWrapBehavior(this, 'handleHideEvent');

        triggerOn && this._handleEvent(triggerOn, showMethod, 'unBind');
        triggerOff && this._handleEvent(triggerOff, hideMethod, 'unBind');

        if (!alwaysShow) {
            const docMethod = F2.Util.getWrapBehavior(this, 'handleDocEvent');
            F2.Util.isBrowser && F2.Util.removeEventListener(document, 'touchstart', docMethod);
        }

    }
    tooltipController.clear();
}


if (process.env.RUNTIME !== "web") {
    // F2.Global.setTheme(require("./theme"));
    F2.Global.setTheme(Theme);
}
F2.Renderer = Renderer;

export default F2;