lucid-ui
Version:
A UI component library from AppNexus.
138 lines • 5.15 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getGroup = exports.lucidXAxis = void 0;
var lodash_1 = __importDefault(require("lodash"));
var d3Array = __importStar(require("d3-array"));
var react_dom_1 = __importDefault(require("react-dom"));
var getGroup = function (selection, className) {
var xAxisGroup = selection.select("." + className);
if (xAxisGroup.empty()) {
return selection.append('g').classed(className, true);
}
return xAxisGroup;
};
exports.getGroup = getGroup;
var getGroups = function (selection, className, dataset) {
var selectionGroup = selection.selectAll("." + className);
if (selectionGroup.empty()) {
var xAxisGroup = selectionGroup.data(dataset).order();
return xAxisGroup.enter().append('g').classed(className, true);
}
return selectionGroup;
};
var getTickObj = function (selection) {
var data = selection.selectAll('.innerDiv');
if (data.empty()) {
data = selection
.selectAll('foreignObject')
.append('xhtml:div')
.attr('tabindex', 0)
.style('position', 'fixed')
.style('transform', 'translate(0px, -50px)')
.classed('innerDiv', true);
}
return data;
};
var getTickRender = function (selection, containerWidth) {
var tickRender = selection.selectAll('.tickRender');
if (!tickRender.empty()) {
tickRender.remove();
}
return selection
.append('xhtml:div')
.style('width', containerWidth + "px")
.attr('id', function (d) { return d; })
.classed('tickRender', true);
};
var getLines = function (selection, xScale, tickSize) {
var lines = selection.selectAll('line');
if (lines.empty()) {
return selection
.append('line')
.attr('x1', 0)
.attr('x2', 0)
.attr('y1', 0)
.attr('y2', -tickSize || 5);
}
return lines;
};
var getForeignObject = function (selection) {
var fO = selection.selectAll('foreignObject');
if (fO.empty()) {
return selection
.append('foreignObject')
.style('overflow', 'visible')
.style('display', 'flex')
.attr('x', 0)
.attr('y', 0)
.attr('height', 1)
.attr('width', 1);
}
return fO;
};
var lucidXAxis = function (selection, _a) {
var xScale = _a.xScale, tickSize = _a.tickSize, xAxisRenderProp = _a.xAxisRenderProp, dataIsCentered = _a.dataIsCentered, data = _a.data;
var range = xScale.range();
var domain = xScale.domain();
var rMin = Number(d3Array.min(range)) || 0;
var rMax = Number(d3Array.max(range)) || 0;
var domainLength = dataIsCentered ? domain.length - 1 : domain.length;
var axisGroup = getGroup(selection, 'axis');
axisGroup
.append('line')
.attr('stroke', 'black')
.attr('x1', rMin)
.attr('x2', rMax)
.attr('y1', 0)
.attr('y2', 0);
axisGroup
.append('line')
.attr('stroke', 'black')
.attr('x1', rMin)
.attr('x2', rMax)
.attr('y1', -tickSize)
.attr('y2', -tickSize);
var xLines = getGroups(axisGroup, 'xLines', domain);
var xLine = xLines.attr('transform', function (d) { return "translate( " + xScale(d) + ", 0)"; });
getLines(xLine, xScale, tickSize);
getForeignObject(xLine);
if (!xAxisRenderProp) {
xLine.append('text').text(function (d) { return d; });
}
else {
var tickObj = getTickObj(xLine);
var tickRender = getTickRender(tickObj, (rMax - rMin) / domainLength);
tickRender.html(function (xValue, num, node) {
if (xValue !== '' && !lodash_1.default.isNil(xValue)) {
var subData = lodash_1.default.find(data, { x: xValue }) || { y: 0, ref: undefined };
react_dom_1.default.render(xAxisRenderProp({ x: xValue, y: subData.y, ref: subData.ref }), node[0]);
}
else
return xValue;
});
}
};
exports.lucidXAxis = lucidXAxis;
//# sourceMappingURL=d3-helpers.js.map