creative-infographics
Version:
This is a library of interactive infographics react components for challenging data visualization.
303 lines (256 loc) • 14.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _lodash = _interopRequireDefault(require("lodash"));
var _randomcolor = _interopRequireDefault(require("randomcolor"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var FlowerGraph = function FlowerGraph(perms) {
// hover state for dataGroup
var _useState = (0, _react.useState)(-1),
_useState2 = _slicedToArray(_useState, 2),
hoverDataI = _useState2[0],
setHoverDataI = _useState2[1]; // Main Data
var _useState3 = (0, _react.useState)(perms.data),
_useState4 = _slicedToArray(_useState3, 2),
mainData = _useState4[0],
setMainData = _useState4[1]; //Check hover state on DataGroup
var checkHover = function checkHover(index) {
return hoverDataI !== -1 && index !== hoverDataI;
}; // colors for dataGroup
var _useState5 = (0, _react.useState)([]),
_useState6 = _slicedToArray(_useState5, 2),
dataGroupColors = _useState6[0],
setDataGroupColors = _useState6[1];
(0, _react.useEffect)(function () {
// Generate Random colors for dataGroup
setDataGroupColors((0, _randomcolor["default"])(_objectSpread({
luminosity: perms.luminosity,
count: dataGroup.length
}, perms.tint ? {
hue: perms.tint
} : {})));
}, [perms.luminosity, perms.tint]);
(0, _react.useEffect)(function () {
if (perms.shuffleData) {
setMainData(_lodash["default"].shuffle(perms.data));
}
}, [perms.shuffleData]); // Get Sorting Group
var dataGroup = _lodash["default"].orderBy(_lodash["default"].map(_lodash["default"].countBy(_lodash["default"].flatten(mainData.map(function (d) {
return d[perms.term];
}))), function (value, key) {
return {
Name: key,
count: value
};
}), ["count"], ["desc"]); // Map Colors with data groups
dataGroup = _lodash["default"].map(dataGroup, function (d, i) {
return _objectSpread({}, d, {
color: dataGroupColors[i]
});
}); // to find maximum occurrence of term in data
var maxCount = Math.max.apply(Math, _toConsumableArray(dataGroup.map(function (g) {
return g.count;
}))); // averageRadius : to find radius of genre circle from it's count
var averageRadius = function averageRadius(c, max, p) {
return Math.round(p * c / max < 2 ? 2 : p * c / max);
}; // Count total radius of avg radius of each
var allRadiusSum = _lodash["default"].sum(dataGroup.map(function (_ref) {
var count = _ref.count;
return averageRadius(count, maxCount, 20);
})); //count previous genres radius to left space on left
var sumTillIndex = function sumTillIndex(index) {
return _lodash["default"].sum(_lodash["default"].map(dataGroup.slice(0, index + 1), function (g) {
return averageRadius(g.count, maxCount, 20);
}));
}; // :::::::::::::::
/// Element Renders Functions
// :::::::::::::::
// Data Group Print
var renderGroupList = function renderGroupList() {
return dataGroup.map(function (data, index) {
return _react["default"].createElement("g", {
key: "__" + index
}, _react["default"].createElement("text", {
x: 100 + 15 * index,
y: 150,
transform: "rotate(-45 ".concat(15 * index, " ", 45, ")"),
fill: perms.luminosity == "bright" ? "#e5e5e5" : "#333333",
fontSize: perms.fontSize,
opacity: checkHover(index) ? perms.fadingOpacity : 1,
onMouseMove: function onMouseMove() {
return setHoverDataI(index);
},
onMouseLeave: function onMouseLeave() {
return setHoverDataI(-1);
}
}, ("0" + data.count).slice(-2) + " : " + data.Name), _react["default"].createElement("circle", {
cx: 20 + 15 * index + 120,
cy: 55,
fill: data.color,
r: 5,
opacity: checkHover(index) ? perms.fadingOpacity : 1,
onMouseMove: function onMouseMove() {
return setHoverDataI(index);
},
onMouseLeave: function onMouseLeave() {
return setHoverDataI(-1);
}
}));
});
}; // Data Group flower root Print
var renderGroupListRoots = function renderGroupListRoots() {
return dataGroup.map(function (data, index) {
return _react["default"].createElement("circle", {
key: "___" + index,
cx: perms.flowerX - allRadiusSum + sumTillIndex(index) * 1.8,
cy: perms.flowerY,
fill: data.color,
r: averageRadius(data.count, maxCount, 20),
opacity: checkHover(index) ? perms.fadingOpacity : 1,
onMouseMove: function onMouseMove() {
return setHoverDataI(index);
},
onMouseLeave: function onMouseLeave() {
return setHoverDataI(-1);
}
});
});
}; // Render connection
var renderConnection = function renderConnection(dataChunk, degree, offDegree, radius, cirX, cirY) {
return dataChunk.map(function (data, dataI, allData) {
return data[perms.term].map(function (dataG, dataGI) {
return dataGroup.map(function (g, gI) {
// find this group match with group list
if (dataG == g.Name) {
// find this group circle radius
var gRadius = averageRadius(g.count, maxCount, 20); // find random position for connecting line within this genres radius
var randomToleranceX = Math.floor(Math.random() * gRadius) - gRadius / 2;
var randomToleranceY = Math.floor(Math.random() * gRadius) - gRadius / 2;
return _react["default"].createElement("g", {
key: "_" + dataI + "_" + dataGI + "_" + gI
}, _react["default"].createElement("path", {
d: "M ".concat(perms.flowerX - allRadiusSum + randomToleranceX + sumTillIndex(gI) * 1.8, ",").concat(perms.flowerY + randomToleranceY, "\n C ").concat(cirX, ",").concat(cirY, ",\n ").concat(Math.cos((degree / allData.length * dataI + offDegree) * Math.PI / 180.0) * (radius - 20) + cirX, ",\n ").concat(Math.sin((degree / allData.length * dataI + offDegree) * Math.PI / 180.0) * (radius - 20) + cirY, ",\n ").concat(Math.cos((degree / allData.length * dataI + offDegree) * Math.PI / 180.0) * (radius - 5 * dataGI) + cirX, ",\n ").concat(Math.sin((degree / allData.length * dataI + offDegree) * Math.PI / 180.0) * (radius - 5 * dataGI) + cirY, ","),
stroke: g.color,
fill: "transparent",
strokeWidth: 0.5,
opacity: checkHover(gI) ? perms.fadingOpacity : 1
}), _react["default"].createElement("circle", {
fill: g.color,
r: 2,
cx: Math.cos((degree / allData.length * dataI + offDegree) * Math.PI / 180.0) * (radius - 5 * dataGI) + cirX,
cy: Math.sin((degree / allData.length * dataI + offDegree) * Math.PI / 180.0) * (radius - 5 * dataGI) + cirY,
opacity: checkHover(gI) ? perms.fadingOpacity : 1,
onMouseMove: function onMouseMove() {
return setHoverDataI(gI);
},
onMouseLeave: function onMouseLeave() {
return setHoverDataI(-1);
}
}));
}
});
});
});
}; // Labels and Indicator
var renderDataLabels = function renderDataLabels() {
// split data based on number of leafs
var splitData = _lodash["default"].chunk(mainData, Math.ceil(mainData.length / perms.leafs));
return splitData.map(function (chunkData, i) {
// finding position of a leaf circle based radius of flower and total number of leafs
var cirX = Math.cos((perms.flowerDeg / perms.leafs * i + perms.flowerOffDeg) * Math.PI / 180.0) * perms.flowerR + perms.flowerX;
var cirY = Math.sin((perms.flowerDeg / perms.leafs * i + perms.flowerOffDeg) * Math.PI / 180.0) * perms.flowerR + perms.flowerY;
var degree = perms.leafsDeg;
var offDegree = perms.flowerOffDeg + (perms.leafsDeg - 45) + perms.flowerDeg / perms.leafs * i + 5; // each data of chunk of data
return _react["default"].createElement("g", {
key: "_" + i
}, // Renders Connection
renderConnection(chunkData, degree, offDegree, perms.leafsR, cirX, cirY), chunkData.map(function (data, eachDataI, allData) {
return _react["default"].createElement("g", {
key: i + "_" + eachDataI
}, _react["default"].createElement("text", {
x: cirX + perms.leafsR + 8,
y: cirY + 2,
fill: perms.luminosity == "bright" ? "#e5e5e5" : "#333333",
fontSize: perms.fontSize,
transform: "rotate(".concat(degree / allData.length * eachDataI + offDegree, " ").concat(cirX, " ").concat(cirY, ")"),
opacity: hoverDataI == -1 || data[perms.term].includes(dataGroup[hoverDataI].Name) ? 1 : perms.fadingOpacity
}, data[perms.label].length > 18 ? data[perms.label].substr(0, 15) + " .." : data[perms.label]), _react["default"].createElement("line", {
x1: Math.cos((degree / allData.length * eachDataI + offDegree) * Math.PI / 180.0) * (perms.leafsR + 3) + cirX,
y1: Math.sin((degree / allData.length * eachDataI + offDegree) * Math.PI / 180.0) * (perms.leafsR + 3) + cirY,
x2: Math.cos((degree / allData.length * eachDataI + offDegree) * Math.PI / 180.0) * (perms.leafsR + 8) + cirX,
y2: Math.sin((degree / allData.length * eachDataI + offDegree) * Math.PI / 180.0) * (perms.leafsR + 8) + cirY,
stroke: "red",
strokeWidth: 0.5,
opacity: hoverDataI == -1 || data[perms.term].includes(dataGroup[hoverDataI].Name) ? 1 : perms.fadingOpacity
}));
}));
});
};
return _react["default"].createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "100%",
height: "100%",
style: {
position: "relative"
},
viewBox: "0 0 ".concat(600, " ", 700)
}, renderGroupList(), _react["default"].createElement("g", {
transform: "rotate(".concat(perms.flowerRotation, ", 300, 400)")
}, renderDataLabels(), renderGroupListRoots()));
};
FlowerGraph.propTypes = {
data: _propTypes["default"].arrayOf(_propTypes["default"].object.isRequired),
term: _propTypes["default"].string.isRequired,
label: _propTypes["default"].string.isRequired,
width: _propTypes["default"].number.isRequired,
height: _propTypes["default"].number.isRequired,
fontSize: _propTypes["default"].number.isRequired,
fadingOpacity: _propTypes["default"].number.isRequired,
flowerX: _propTypes["default"].number.isRequired,
flowerY: _propTypes["default"].number.isRequired,
flowerR: _propTypes["default"].number.isRequired,
flowerRotation: _propTypes["default"].number.isRequired,
flowerDeg: _propTypes["default"].number.isRequired,
flowerOffDeg: _propTypes["default"].number.isRequired,
leafs: _propTypes["default"].number.isRequired,
leafsR: _propTypes["default"].number.isRequired,
leafsDeg: _propTypes["default"].number.isRequired,
luminosity: _propTypes["default"].oneOf(["bright", "dark"]),
tint: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].bool]).isRequired,
shuffleData: _propTypes["default"].bool
};
FlowerGraph.defaultProps = {
width: 600,
height: 700,
fontSize: 6,
fadingOpacity: 0.02,
flowerX: 300,
flowerY: 400,
flowerR: 195,
flowerRotation: 0,
flowerDeg: 360,
flowerOffDeg: 50,
leafs: 5,
leafsR: 55,
leafsDeg: 270,
luminosity: "bright",
tint: false,
shuffleData: true
};
var _default = FlowerGraph;
exports["default"] = _default;