kea-react
Version:
Componentes comunes de react
176 lines (175 loc) • 6.83 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var 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 function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __values = (this && this.__values) || function (o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m) return m.call(o);
return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
};
Object.defineProperty(exports, "__esModule", { value: true });
var chartjs = require("chart.js");
var React = require("react");
var colors = [
[54, 162, 235],
[255, 99, 132],
[255, 206, 86],
[75, 192, 192],
[153, 102, 255],
[255, 159, 64]
];
/**Obtiene los colores de una gráfica */
function getChartColors(count) {
var ret = [];
for (var i = 0; i < count; i++) {
ret.push(colors[i % colors.length]);
}
return ret;
}
function toCssColor(alpha, color) {
return "rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", " + alpha + ")";
}
function getPieChartData(data) {
var colorPorSerie = data.type == "bar" || data.type == "line";
var cantColores = colorPorSerie ? data.series.length : data.series.map(function (x) { return x.values.length; }).reduce(function (a, b) { return Math.max(a, b); }, 0);
var colors = getChartColors(cantColores);
var backgroundColors = colors.map(function (x) { return toCssColor(0.5, x); });
var foreColors = colors.map(function (x) { return toCssColor(1, x); });
var type = data.type == "bar" ? "bar" : data.type;
if (data.series.map(function (x) { return x.values.length; }).filter(function (x) { return x != data.labels.length; }).length > 0) {
throw "La cantidad de labels debe de ser igual a la cantidad de valores en todas las series";
}
var options = type == "bar" || type == "line" ?
{
legend: {
display: false
},
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0,
// OR //
beginAtZero: true // minimum value will be 0.
}
}]
}
} : undefined;
var getSeriesData = function (serie, index) {
return {
data: serie.values,
backgroundColor: serie.colors || (colorPorSerie ? backgroundColors[index] : backgroundColors),
hoverBackgroundColor: serie.colors || (colorPorSerie ? backgroundColors[index] : backgroundColors),
pointHoverBackgroundColor: backgroundColors[0],
pointHoverBorderColor: foreColors[0],
pointBackgroundColor: backgroundColors[0]
};
};
return ({
responsive: true,
type: type,
data: {
labels: data.labels,
datasets: data.series.map(getSeriesData)
},
options: options
});
}
/**Una gráfica que soporta varias series y varios tipos de gráficas*/
var Chart = /** @class */ (function (_super) {
__extends(Chart, _super);
function Chart() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onCanvasInit = function (canvas) {
_this.canvas = canvas;
if (canvas)
_this.updateChartData(_this.props);
else
_this.destroyChart();
};
return _this;
}
Chart.prototype.destroyChart = function () {
if (this.chart != null) {
this.chart.destroy();
}
this.chart = null;
};
Chart.prototype.updateChartData = function (props) {
var chartData = getPieChartData(props.value);
this.destroyChart();
this.chart = new chartjs(this.canvas, chartData);
};
Chart.prototype.componentWillUpdate = function (props) {
this.updateChartData(props);
};
Chart.prototype.render = function () {
return (React.createElement("div", { style: this.props.style },
React.createElement("canvas", { ref: this.onCanvasInit })));
};
return Chart;
}(React.PureComponent));
exports.Chart = Chart;
/**Gráfica que soporta sólo una serie de información */
var SimpleChart = /** @class */ (function (_super) {
__extends(SimpleChart, _super);
function SimpleChart() {
return _super !== null && _super.apply(this, arguments) || this;
}
SimpleChart.prototype.render = function () {
var data = {
type: this.props.type || "doughnut",
labels: this.props.values.map(function (x) { return x.label; }),
series: [
{
values: this.props.values.map(function (x) { return x.value; }),
colors: this.props.colors
}
]
};
return (React.createElement(Chart, { value: data }));
};
return SimpleChart;
}(React.PureComponent));
exports.SimpleChart = SimpleChart;
/**Una gráfica que devuelve la cantidad de elemento repetidos */
var HistogramChart = /** @class */ (function (_super) {
__extends(HistogramChart, _super);
function HistogramChart() {
return _super !== null && _super.apply(this, arguments) || this;
}
HistogramChart.prototype.render = function () {
var data = new Map();
try {
//Acumulamos las frecuencias:
for (var _a = __values(this.props.values), _b = _a.next(); !_b.done; _b = _a.next()) {
var id = _b.value;
data.set(id, (data.get(id) || 0) + 1);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
}
finally { if (e_1) throw e_1.error; }
}
var values = Array.from(data.keys()).sort(this.props.sort).map(function (key) { return ({ label: "" + key, value: data.get(key) }); });
return (React.createElement(SimpleChart, { type: "bar", values: values }));
var e_1, _c;
};
return HistogramChart;
}(React.PureComponent));
exports.HistogramChart = HistogramChart;