react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
171 lines (161 loc) • 6.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var UndrawCharts = function UndrawCharts(props) {
return _react2.default.createElement(
"svg",
{
style: { height: props.height, width: '100%' },
className: props.class,
id: "065133f1-0c7b-47ed-9e2f-c288956210ed",
"data-name": "Layer 1",
xmlnsXlink: "http://www.w3.org/1999/xlink",
viewBox: "0 0 884 612"
},
_react2.default.createElement(
"defs",
null,
_react2.default.createElement(
"linearGradient",
{
id: "b9919503-a474-45e1-b036-765a035e174e",
x1: 442,
y1: 612,
x2: 442,
gradientUnits: "userSpaceOnUse"
},
_react2.default.createElement("stop", { offset: 0, stopColor: "gray", stopOpacity: 0.25 }),
_react2.default.createElement("stop", { offset: 0.54, stopColor: "gray", stopOpacity: 0.12 }),
_react2.default.createElement("stop", { offset: 1, stopColor: "gray", stopOpacity: 0.1 })
),
_react2.default.createElement("linearGradient", {
id: "d77fd9f8-d5e5-4f04-90d1-c6bbf7709bc3",
x1: 844.74,
y1: 532,
x2: 844.74,
y2: 314,
xlinkHref: "#b9919503-a474-45e1-b036-765a035e174e"
}),
_react2.default.createElement("linearGradient", {
id: "24926ec8-71e4-4374-a303-d4b954cac4d9",
x1: 735.74,
y1: 531.99,
x2: 735.74,
y2: 387.27,
xlinkHref: "#b9919503-a474-45e1-b036-765a035e174e"
}),
_react2.default.createElement("linearGradient", {
id: "8c28d63e-5ee4-4ce7-a6bc-0d098832b513",
x1: 738.74,
y1: 438.26,
x2: 738.74,
y2: 314.01,
xlinkHref: "#b9919503-a474-45e1-b036-765a035e174e"
})
),
_react2.default.createElement(
"title",
null,
"charts"
),
_react2.default.createElement("rect", {
width: 884,
height: 612,
fill: "url(#b9919503-a474-45e1-b036-765a035e174e)"
}),
_react2.default.createElement("rect", { x: 11, y: 9, width: 865, height: 576, fill: "#fff" }),
_react2.default.createElement("rect", { x: 11, y: 9, width: 865, height: 57, fill: "#bdbdbd" }),
_react2.default.createElement("circle", { cx: 51.91, cy: 37.5, r: 14, fill: "#ff5252" }),
_react2.default.createElement("circle", { cx: 92, cy: 37.5, r: 14, fill: "#ff0" }),
_react2.default.createElement("circle", { cx: 132.09, cy: 37.5, r: 14, fill: "#69f0ae" }),
_react2.default.createElement("rect", { x: 92, y: 125, width: 147, height: 17, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 92, y: 153, width: 147, height: 17, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 92, y: 181, width: 245, height: 17, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 92, y: 209, width: 291, height: 17, fill: "#e0e0e0" }),
_react2.default.createElement("rect", { x: 104, y: 315, width: 44, height: 206, fill: "#f5f5f5" }),
_react2.default.createElement("rect", { x: 177, y: 315, width: 44, height: 206, fill: "#f5f5f5" }),
_react2.default.createElement("rect", { x: 250, y: 315, width: 44, height: 206, fill: "#f5f5f5" }),
_react2.default.createElement("rect", { x: 323, y: 315, width: 44, height: 206, fill: "#f5f5f5" }),
_react2.default.createElement("rect", { x: 104, y: 418, width: 44, height: 103, fill: "#2196f3" }),
_react2.default.createElement(
"g",
{ opacity: 0.4 },
_react2.default.createElement("rect", { x: 104, y: 375, width: 44, height: 45, fill: "#2196f3" })
),
_react2.default.createElement("rect", { x: 177, y: 440.36, width: 44, height: 80.64, fill: "#69f0ae" }),
_react2.default.createElement("rect", {
x: 177,
y: 388,
width: 44,
height: 52.36,
fill: "#69f0ae",
opacity: 0.4
}),
_react2.default.createElement("rect", { x: 250, y: 403, width: 44, height: 118, fill: props.primaryColor }),
_react2.default.createElement("rect", { x: 250, y: 362, width: 44, height: 41, fill: props.primaryColor, opacity: 0.4 }),
_react2.default.createElement("rect", { x: 323, y: 444, width: 44, height: 77, fill: "#ff0" }),
_react2.default.createElement("rect", { x: 323, y: 420, width: 44, height: 24, fill: "#ff0", opacity: 0.4 }),
_react2.default.createElement("path", {
d: "M790.5,314H790V532h.52a109,109,0,0,0,0-218Z",
transform: "translate(-158 -144)",
fill: "url(#d77fd9f8-d5e5-4f04-90d1-c6bbf7709bc3)"
}),
_react2.default.createElement("path", {
d: "M687.5,387.27A109.05,109.05,0,0,0,790,532V438.26Z",
transform: "translate(-158 -144)",
fill: "url(#24926ec8-71e4-4374-a303-d4b954cac4d9)"
}),
_react2.default.createElement("path", {
d: "M790,314A109,109,0,0,0,687.5,387.27l102.48,51Z",
transform: "translate(-158 -144)",
fill: "url(#8c28d63e-5ee4-4ce7-a6bc-0d098832b513)"
}),
_react2.default.createElement("path", {
d: "M790.5,319H790V527h.5a104,104,0,0,0,0-208Z",
transform: "translate(-158 -144)",
fill: props.primaryColor
}),
_react2.default.createElement("path", {
d: "M692.22,388.91A104.05,104.05,0,0,0,790,527V437.56Z",
transform: "translate(-158 -144)",
fill: "#2196f3"
}),
_react2.default.createElement("path", {
d: "M790,319a104,104,0,0,0-97.78,69.9L790,437.56Z",
transform: "translate(-158 -144)",
fill: "#69f0ae"
}),
_react2.default.createElement("rect", { x: 524, y: 410, width: 13, height: 14, fill: "#2196f3" }),
_react2.default.createElement("rect", { x: 632, y: 410, width: 13, height: 14, fill: "#7c4dff" }),
_react2.default.createElement("rect", { x: 740, y: 410, width: 13, height: 14, fill: "#69f0ae" }),
_react2.default.createElement("rect", { x: 541, y: 413, width: 45, height: 8, fill: "#f5f5f5" }),
_react2.default.createElement("rect", { x: 650, y: 413, width: 45, height: 8, fill: "#f5f5f5" }),
_react2.default.createElement("rect", { x: 759, y: 413, width: 45, height: 8, fill: "#f5f5f5" })
);
};
UndrawCharts.propTypes = {
/**
* Hex color
*/
primaryColor: _propTypes2.default.string,
/**
* percentage
*/
height: _propTypes2.default.string,
/**
* custom class for svg
*/
class: _propTypes2.default.string
};
UndrawCharts.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
exports.default = UndrawCharts;