react-sleek
Version:
React Sleek Component Library
91 lines (90 loc) • 3.75 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var typestyle_1 = require("typestyle");
var ChartUtils_1 = require("../ChartUtils");
var csx_1 = require("csx");
var LineChart = /** @class */ (function (_super) {
__extends(LineChart, _super);
function LineChart(props) {
var _this = _super.call(this, props) || this;
// set state
_this.state = {
yAxisLines: ChartUtils_1.default.getYAxisData(props.data),
};
// binding
_this.renderSerie = _this.renderSerie.bind(_this);
_this.drawPoint = _this.drawPoint.bind(_this);
return _this;
}
LineChart.prototype.renderSerie = function (serie, index) {
var path = "M " + this.getSvgX(serie.points[0].x) + " " + this.getSvgY(serie.points[0].y) + " ";
path += serie.points.map(this.drawPoint);
return React.createElement("path", { key: "chart_serie_" + index, d: path, fillOpacity: 0, style: serie.pathStyle });
};
LineChart.prototype.renderAxisLine = function (axisLineValue, index) {
return React.createElement("div", { key: "chart_axisline_" + index }, axisLineValue);
};
LineChart.prototype.render = function () {
var chartContainerStyle = typestyle_1.style({
width: csx_1.px(this.props.width),
height: csx_1.px(this.props.height),
});
var chartAxisStyle = typestyle_1.style({
width: csx_1.px(50),
});
var chartStyle = typestyle_1.style({
width: csx_1.px(this.props.width),
height: csx_1.px(this.props.height),
});
return (React.createElement("div", { className: typestyle_1.classes(styles.chartContainer, chartContainerStyle) },
React.createElement("div", { className: typestyle_1.classes(styles.chartAxis, chartAxisStyle) }, this.state.yAxisLines.map(this.renderAxisLine)),
React.createElement("svg", { viewBox: "0 0 " + this.props.width + " " + this.props.height, className: typestyle_1.classes(styles.chartBase, chartStyle) }, this.props.data.map(this.renderSerie))));
};
LineChart.prototype.getSvgX = function (x) {
return (x / ChartUtils_1.default.getMaxX(this.props.data)) * this.props.width;
};
LineChart.prototype.getSvgY = function (y) {
return this.props.height - (y / this.state.yAxisLines[0]) * this.props.height;
};
LineChart.prototype.drawPoint = function (point) {
return "L " + this.getSvgX(point.x) + " " + this.getSvgY(point.y) + " ";
};
LineChart.defaultProps = {
width: 600,
height: 200,
};
return LineChart;
}(React.PureComponent));
exports.default = LineChart;
var styles = {
chartContainer: typestyle_1.style({
position: 'relative',
}),
chartAxis: typestyle_1.style({
position: 'absolute',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
left: 0,
top: 0,
bottom: 0,
fontSize: csx_1.px(10),
}),
chartBase: typestyle_1.style({
userSelect: 'none',
}),
};