import { FieldType } from 'muze-utils';
import { PointLayer } from '../point';
import { defaultConfig } from './default-config';
import * as PROPS from '../../enums/props';
import { ENCODING } from '../../enums/constants';
import drawTicks from './renderer';
import './styles.scss';
import { getAxesScales, getLayerColor, positionPoints, getIndividualClassName } from '../../helpers';
/**
* This layer is used to create small lines. The orientation of the line is determined by the positional
* encoding properties x0 and y0. The mark type of the layer is ```tick```.
*
* @public
*
* @class
* @module TickLayer
* @extends BaseLayer
*/
export default class TickLayer extends PointLayer {
/**
*
*
* @static
*
* @memberof TickLayer
*/
static defaultConfig () {
return defaultConfig;
}
/**
*
*
* @static
*
* @memberof TickLayer
*/
static formalName () {
return 'tick';
}
/**
*
*
* @static
*
* @memberof TickLayer
*/
static drawFn () {
return drawTicks;
}
/**
*
*
*
* @memberof TickLayer
*/
elemType () {
return 'path';
}
/**
* Generates an array of objects containing x, y, width and height of the points from the data
* @param {Array.<Array>} data Data Array
* @param {Object} encoding Config
* @param {Object} axes Axes object
* @return {Array.<Object>} Array of points
*/
translatePoints (data, encoding, axes, config = {}) {
let points = [];
const {
xAxis,
yAxis
} = getAxesScales(axes);
const fieldsConfig = this.data().getFieldsConfig();
const {
xField,
yField,
x0Field,
y0Field,
xFieldType,
yFieldType
} = this.encodingFieldsInf();
const isXDim = xFieldType === FieldType.DIMENSION;
const isYDim = yFieldType === FieldType.DIMENSION;
const key = isXDim ? ENCODING.X : (isYDim ? ENCODING.Y : null);
const colorEncoding = encoding.color;
const colorField = colorEncoding && colorEncoding.field;
const colorFieldIndex = fieldsConfig[colorField] && fieldsConfig[colorField].index;
const measurement = this._store.get(PROPS.MEASUREMENT);
const colorAxis = axes.color;
const { x: offsetX, y: offsetY } = config.offset;
const { x: xSpan, y: ySpan } = config.span;
for (let i = 0, len = data.length; i < len; i++) {
let xPx;
let x0Px;
let y0Px;
let yPx;
const d = data[i];
const row = d._data;
if (xField) {
xPx = xAxis.getScaleValue(d.x) + offsetX;
x0Px = xPx + xSpan;
}
if (yField) {
yPx = yAxis.getScaleValue(d.y) + offsetY;
y0Px = yPx !== null ? yPx + ySpan : null;
}
if (!xField) {
xPx = 0;
x0Px = measurement.width;
if (!isNaN(yPx)) {
yPx += ySpan / 2;
y0Px = yPx;
}
}
if (!yField) {
yPx = 0;
y0Px = measurement.height;
x0Px = xPx += xSpan / 2;
}
if (x0Field) {
x0Px = xAxis.getScaleValue(d.x0) + xSpan;
yPx += ySpan / 2;
y0Px -= ySpan / 2;
}
if (y0Field) {
y0Px = yAxis.getScaleValue(d.y0) + ySpan;
xPx += xSpan / 2;
x0Px -= xSpan / 2;
}
const style = {};
const meta = {};
const { color, rawColor } = getLayerColor({ datum: d, index: i },
{ colorEncoding, colorAxis, colorFieldIndex });
style.stroke = color;
meta.stateColor = {};
meta.originalColor = rawColor;
meta.colorTransform = {};
if (!isNaN(xPx) && !isNaN(yPx)) {
const point = {
enter: {},
update: {
x: xPx,
y: yPx,
x0: x0Px,
y0: y0Px
},
style,
_data: row,
_id: d._id,
source: row,
rowId: d._id,
meta
};
point.className = getIndividualClassName(d, i, data, this);
points.push(point);
this.cachePoint(d[key], point);
}
}
points = positionPoints(this, points);
return points;
}
getMeasurementConfig (offsetX, offsetY, widthSpan, heightSpan) {
return {
offset: {
x: (offsetX || 0),
y: (offsetY || 0)
},
span: {
x: widthSpan,
y: heightSpan
}
};
}
}