/*
|
* Licensed to the Apache Software Foundation (ASF) under one
|
* or more contributor license agreements. See the NOTICE file
|
* distributed with this work for additional information
|
* regarding copyright ownership. The ASF licenses this file
|
* to you under the Apache License, Version 2.0 (the
|
* "License"); you may not use this file except in compliance
|
* with the License. You may obtain a copy of the License at
|
*
|
* http://www.apache.org/licenses/LICENSE-2.0
|
*
|
* Unless required by applicable law or agreed to in writing,
|
* software distributed under the License is distributed on an
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
* KIND, either express or implied. See the License for the
|
* specific language governing permissions and limitations
|
* under the License.
|
*/
|
|
import * as zrUtil from 'zrender/src/core/util';
|
import * as graphic from '../../util/graphic';
|
import {createTextStyle} from '../../label/labelStyle';
|
import Model from '../../model/Model';
|
import AxisView from './AxisView';
|
import AxisBuilder from './AxisBuilder';
|
import { AngleAxisModel } from '../../coord/polar/AxisModel';
|
import GlobalModel from '../../model/Global';
|
import Polar from '../../coord/polar/Polar';
|
import AngleAxis from '../../coord/polar/AngleAxis';
|
import { ZRTextAlign, ZRTextVerticalAlign, ColorString } from '../../util/types';
|
import { getECData } from '../../util/innerStore';
|
import OrdinalScale from '../../scale/Ordinal';
|
|
const elementList = [
|
'axisLine',
|
'axisLabel',
|
'axisTick',
|
'minorTick',
|
'splitLine',
|
'minorSplitLine',
|
'splitArea'
|
] as const;
|
|
function getAxisLineShape(polar: Polar, rExtent: number[], angle: number) {
|
rExtent[1] > rExtent[0] && (rExtent = rExtent.slice().reverse());
|
const start = polar.coordToPoint([rExtent[0], angle]);
|
const end = polar.coordToPoint([rExtent[1], angle]);
|
|
return {
|
x1: start[0],
|
y1: start[1],
|
x2: end[0],
|
y2: end[1]
|
};
|
}
|
|
function getRadiusIdx(polar: Polar) {
|
const radiusAxis = polar.getRadiusAxis();
|
return radiusAxis.inverse ? 0 : 1;
|
}
|
|
// Remove the last tick which will overlap the first tick
|
function fixAngleOverlap(list: TickCoord[]) {
|
const firstItem = list[0];
|
const lastItem = list[list.length - 1];
|
if (firstItem
|
&& lastItem
|
&& Math.abs(Math.abs(firstItem.coord - lastItem.coord) - 360) < 1e-4
|
) {
|
list.pop();
|
}
|
}
|
|
type TickCoord = ReturnType<AngleAxis['getTicksCoords']>[number];
|
type TickLabel = ReturnType<AngleAxis['getViewLabels']>[number] & {
|
coord: number
|
};
|
|
class AngleAxisView extends AxisView {
|
|
static readonly type = 'angleAxis';
|
readonly type = AngleAxisView.type;
|
|
axisPointerClass = 'PolarAxisPointer';
|
|
render(angleAxisModel: AngleAxisModel, ecModel: GlobalModel) {
|
this.group.removeAll();
|
if (!angleAxisModel.get('show')) {
|
return;
|
}
|
|
const angleAxis = angleAxisModel.axis;
|
const polar = angleAxis.polar;
|
const radiusExtent = polar.getRadiusAxis().getExtent();
|
|
const ticksAngles = angleAxis.getTicksCoords();
|
const minorTickAngles = angleAxis.getMinorTicksCoords();
|
|
const labels = zrUtil.map(angleAxis.getViewLabels(), function (labelItem: TickLabel) {
|
labelItem = zrUtil.clone(labelItem);
|
const scale = angleAxis.scale;
|
const tickValue = scale.type === 'ordinal'
|
? (scale as OrdinalScale).getRawOrdinalNumber(labelItem.tickValue)
|
: labelItem.tickValue;
|
labelItem.coord = angleAxis.dataToCoord(tickValue);
|
return labelItem;
|
});
|
|
fixAngleOverlap(labels);
|
fixAngleOverlap(ticksAngles);
|
|
zrUtil.each(elementList, function (name) {
|
if (angleAxisModel.get([name, 'show'])
|
&& (!angleAxis.scale.isBlank() || name === 'axisLine')
|
) {
|
angelAxisElementsBuilders[name](
|
this.group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels
|
);
|
}
|
}, this);
|
}
|
|
}
|
|
interface AngleAxisElementBuilder {
|
(
|
group: graphic.Group,
|
angleAxisModel: AngleAxisModel,
|
polar: Polar,
|
ticksAngles: TickCoord[],
|
minorTickAngles: TickCoord[][],
|
radiusExtent: number[],
|
labels?: TickLabel[]
|
): void
|
}
|
|
const angelAxisElementsBuilders: Record<typeof elementList[number], AngleAxisElementBuilder> = {
|
|
axisLine(group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
|
const lineStyleModel = angleAxisModel.getModel(['axisLine', 'lineStyle']);
|
|
// extent id of the axis radius (r0 and r)
|
const rId = getRadiusIdx(polar);
|
const r0Id = rId ? 0 : 1;
|
|
let shape;
|
if (radiusExtent[r0Id] === 0) {
|
shape = new graphic.Circle({
|
shape: {
|
cx: polar.cx,
|
cy: polar.cy,
|
r: radiusExtent[rId]
|
},
|
style: lineStyleModel.getLineStyle(),
|
z2: 1,
|
silent: true
|
});
|
}
|
else {
|
shape = new graphic.Ring({
|
shape: {
|
cx: polar.cx,
|
cy: polar.cy,
|
r: radiusExtent[rId],
|
r0: radiusExtent[r0Id]
|
},
|
style: lineStyleModel.getLineStyle(),
|
z2: 1,
|
silent: true
|
});
|
}
|
shape.style.fill = null;
|
group.add(shape);
|
},
|
|
axisTick(group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
|
const tickModel = angleAxisModel.getModel('axisTick');
|
|
const tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
|
const radius = radiusExtent[getRadiusIdx(polar)];
|
|
const lines = zrUtil.map(ticksAngles, function (tickAngleItem) {
|
return new graphic.Line({
|
shape: getAxisLineShape(polar, [radius, radius + tickLen], tickAngleItem.coord)
|
});
|
});
|
group.add(graphic.mergePath(
|
lines, {
|
style: zrUtil.defaults(
|
tickModel.getModel('lineStyle').getLineStyle(),
|
{
|
stroke: angleAxisModel.get(['axisLine', 'lineStyle', 'color'])
|
}
|
)
|
}
|
));
|
},
|
|
minorTick(group, angleAxisModel, polar, tickAngles, minorTickAngles, radiusExtent) {
|
if (!minorTickAngles.length) {
|
return;
|
}
|
|
const tickModel = angleAxisModel.getModel('axisTick');
|
const minorTickModel = angleAxisModel.getModel('minorTick');
|
|
const tickLen = (tickModel.get('inside') ? -1 : 1) * minorTickModel.get('length');
|
const radius = radiusExtent[getRadiusIdx(polar)];
|
|
const lines = [];
|
|
for (let i = 0; i < minorTickAngles.length; i++) {
|
for (let k = 0; k < minorTickAngles[i].length; k++) {
|
lines.push(new graphic.Line({
|
shape: getAxisLineShape(polar, [radius, radius + tickLen], minorTickAngles[i][k].coord)
|
}));
|
}
|
}
|
|
group.add(graphic.mergePath(
|
lines, {
|
style: zrUtil.defaults(
|
minorTickModel.getModel('lineStyle').getLineStyle(),
|
zrUtil.defaults(
|
tickModel.getLineStyle(), {
|
stroke: angleAxisModel.get(['axisLine', 'lineStyle', 'color'])
|
}
|
)
|
)
|
}
|
));
|
},
|
|
axisLabel(group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels) {
|
const rawCategoryData = angleAxisModel.getCategories(true);
|
|
const commonLabelModel = angleAxisModel.getModel('axisLabel');
|
|
const labelMargin = commonLabelModel.get('margin');
|
const triggerEvent = angleAxisModel.get('triggerEvent');
|
|
// Use length of ticksAngles because it may remove the last tick to avoid overlapping
|
zrUtil.each(labels, function (labelItem, idx) {
|
let labelModel = commonLabelModel;
|
const tickValue = labelItem.tickValue;
|
|
const r = radiusExtent[getRadiusIdx(polar)];
|
const p = polar.coordToPoint([r + labelMargin, labelItem.coord]);
|
const cx = polar.cx;
|
const cy = polar.cy;
|
|
const labelTextAlign: ZRTextAlign = Math.abs(p[0] - cx) / r < 0.3
|
? 'center' : (p[0] > cx ? 'left' : 'right');
|
const labelTextVerticalAlign: ZRTextVerticalAlign = Math.abs(p[1] - cy) / r < 0.3
|
? 'middle' : (p[1] > cy ? 'top' : 'bottom');
|
|
if (rawCategoryData && rawCategoryData[tickValue]) {
|
const rawCategoryItem = rawCategoryData[tickValue];
|
if (zrUtil.isObject(rawCategoryItem) && rawCategoryItem.textStyle) {
|
labelModel = new Model(
|
rawCategoryItem.textStyle, commonLabelModel, commonLabelModel.ecModel
|
);
|
}
|
}
|
|
const textEl = new graphic.Text({
|
silent: AxisBuilder.isLabelSilent(angleAxisModel),
|
style: createTextStyle(labelModel, {
|
x: p[0],
|
y: p[1],
|
fill: labelModel.getTextColor()
|
|| angleAxisModel.get(['axisLine', 'lineStyle', 'color']) as ColorString,
|
text: labelItem.formattedLabel,
|
align: labelTextAlign,
|
verticalAlign: labelTextVerticalAlign
|
})
|
});
|
group.add(textEl);
|
|
// Pack data for mouse event
|
if (triggerEvent) {
|
const eventData = AxisBuilder.makeAxisEventDataBase(angleAxisModel);
|
eventData.targetType = 'axisLabel';
|
eventData.value = labelItem.rawLabel;
|
getECData(textEl).eventData = eventData;
|
}
|
|
}, this);
|
},
|
|
splitLine(group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
|
const splitLineModel = angleAxisModel.getModel('splitLine');
|
const lineStyleModel = splitLineModel.getModel('lineStyle');
|
let lineColors = lineStyleModel.get('color');
|
let lineCount = 0;
|
|
lineColors = lineColors instanceof Array ? lineColors : [lineColors];
|
|
const splitLines: graphic.Line[][] = [];
|
|
for (let i = 0; i < ticksAngles.length; i++) {
|
const colorIndex = (lineCount++) % lineColors.length;
|
splitLines[colorIndex] = splitLines[colorIndex] || [];
|
splitLines[colorIndex].push(new graphic.Line({
|
shape: getAxisLineShape(polar, radiusExtent, ticksAngles[i].coord)
|
}));
|
}
|
|
// Simple optimization
|
// Batching the lines if color are the same
|
for (let i = 0; i < splitLines.length; i++) {
|
group.add(graphic.mergePath(splitLines[i], {
|
style: zrUtil.defaults({
|
stroke: lineColors[i % lineColors.length]
|
}, lineStyleModel.getLineStyle()),
|
silent: true,
|
z: angleAxisModel.get('z')
|
}));
|
}
|
},
|
|
minorSplitLine(group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
|
if (!minorTickAngles.length) {
|
return;
|
}
|
|
const minorSplitLineModel = angleAxisModel.getModel('minorSplitLine');
|
const lineStyleModel = minorSplitLineModel.getModel('lineStyle');
|
|
const lines = [];
|
|
for (let i = 0; i < minorTickAngles.length; i++) {
|
for (let k = 0; k < minorTickAngles[i].length; k++) {
|
lines.push(new graphic.Line({
|
shape: getAxisLineShape(polar, radiusExtent, minorTickAngles[i][k].coord)
|
}));
|
}
|
}
|
|
group.add(graphic.mergePath(lines, {
|
style: lineStyleModel.getLineStyle(),
|
silent: true,
|
z: angleAxisModel.get('z')
|
}));
|
},
|
|
splitArea(group, angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
|
if (!ticksAngles.length) {
|
return;
|
}
|
|
const splitAreaModel = angleAxisModel.getModel('splitArea');
|
const areaStyleModel = splitAreaModel.getModel('areaStyle');
|
let areaColors = areaStyleModel.get('color');
|
let lineCount = 0;
|
|
areaColors = areaColors instanceof Array ? areaColors : [areaColors];
|
|
const splitAreas: graphic.Sector[][] = [];
|
|
const RADIAN = Math.PI / 180;
|
let prevAngle = -ticksAngles[0].coord * RADIAN;
|
const r0 = Math.min(radiusExtent[0], radiusExtent[1]);
|
const r1 = Math.max(radiusExtent[0], radiusExtent[1]);
|
|
const clockwise = angleAxisModel.get('clockwise');
|
|
for (let i = 1, len = ticksAngles.length; i <= len; i++) {
|
const coord = i === len ? ticksAngles[0].coord : ticksAngles[i].coord;
|
const colorIndex = (lineCount++) % areaColors.length;
|
splitAreas[colorIndex] = splitAreas[colorIndex] || [];
|
splitAreas[colorIndex].push(new graphic.Sector({
|
shape: {
|
cx: polar.cx,
|
cy: polar.cy,
|
r0: r0,
|
r: r1,
|
startAngle: prevAngle,
|
endAngle: -coord * RADIAN,
|
clockwise: clockwise
|
},
|
silent: true
|
}));
|
prevAngle = -coord * RADIAN;
|
}
|
|
// Simple optimization
|
// Batching the lines if color are the same
|
for (let i = 0; i < splitAreas.length; i++) {
|
group.add(graphic.mergePath(splitAreas[i], {
|
style: zrUtil.defaults({
|
fill: areaColors[i % areaColors.length]
|
}, areaStyleModel.getAreaStyle()),
|
silent: true
|
}));
|
}
|
}
|
};
|
|
export default AngleAxisView;
|
