sparkling-universe
Example
<div class="universe">
<cr-component id="universe" name="sparkling-universe" loading></cr-component>
</div>
<div class="container">
<cr-component id="asset-search" class="asset-search" name="asset-search"></cr-component>
<cr-component id="input-slider" name="input-slider"></cr-component>
</div>
<script>
const categoryStates = [
{
value: "favourite",
visuals: [
{ name: "opacity", value: 1 },
{ name: "size", value: 200 },
],
},
{
value: "enabled",
visuals: [
{ name: "opacity", value: 1 },
{ name: "size", value: 40 },
],
},
{
value: "disabled",
visuals: [{ name: "opacity", value: 0 }],
},
];
const universeData = {
filter: {
symbolType: "FundClass",
alive: true,
countryRegistration: "ES",
investible: true,
},
intro: {
enabled: true,
},
background: {
primaryColor: "#0a4763",
secondaryColor: "#28072d",
},
position: {
horizontal: 50,
},
motion: {
automatic: {
enabled: true,
xAxisSpeed: 0,
yAxisSpeed: 0.0005,
zAxisSpeed: 0,
},
manual: {
enabled: true,
xAxisLocked: false,
yAxisLocked: false,
},
},
state: {
particle: {
default: {
opacity: 1,
},
},
},
behaviors: [
{
id: "assetSearchHover",
sender: {
event: "asset-search-hover",
},
inputFormat: {
actionField: "symbolId",
},
action: "focusParticle",
},
{
id: "assetSearchEmpty",
sender: {
event: "asset-search-empty",
},
action: "resetFocus",
},
{
id: "inputSlider",
sender: {
event: "input-slider-change",
},
inputFormat: {
valueField: {
name: "index",
from: 0,
to: 3,
},
},
property: "volatility",
visuals: [
{
name: "opacity",
from: 0,
to: 1,
},
{
name: "size",
from: 1,
to: 100,
},
],
},
],
};
setTimeout(() => {
const universe = document.querySelector("#universe");
universe.init(universeData);
}, 1000);
const assetSearch = document.getElementById("asset-search");
assetSearch.init({
filter: {
symbolType: "FundClass",
currency: "EUR",
alive: true,
countryRegistration: "ES",
},
isInputEnabled: true,
});
assetSearch.addEventListener("change", (e) => {
portfolioPositions.addPosition({ id: Number(e.detail.symbolId), amount: 1000 });
});
const inputSlider = document.getElementById("input-slider");
inputSlider.init({
selectedValue: 2,
steps: [
{
text: "Menos de 3",
value: 1,
},
{
text: "Entre 3 y 6",
value: 2,
},
{
text: "Entre 6 y 10",
value: 3,
},
{
text: "Más de 10",
value: 4,
},
],
});
const inputCategories = document.getElementById("input-categories");
inputCategories.init();
</script>
<style>
body {
margin: 0;
}
.universe {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.container {
position: relative;
background-color: black;
z-index: 1;
margin: 50px;
width: 650px;
padding: 20px;
}
</style>
Schema
{
"type": "object",
"required": [
"filter"
],
"properties": {
"filter": {
"type": "object",
"description": "Filter the available universe.",
"additionalProperties": false,
"nullable": true,
"properties": {
"symbolType": {
"anyOf": [
{
"enum": [
"Bond",
"Bond Index",
"CurrencyPair",
"ETF Listing",
"Forward",
"FundClass",
"Future",
"Future Continuation",
"Interest Rate",
"Mandate",
"Stock",
"Stock Index",
"Swap"
]
},
{
"type": "array",
"uniqueItems": true,
"minItems": 1,
"items": {
"enum": [
"Bond",
"Bond Index",
"CurrencyPair",
"ETF Listing",
"Forward",
"FundClass",
"Future",
"Future Continuation",
"Interest Rate",
"Mandate",
"Stock",
"Stock Index",
"Swap"
]
}
}
]
},
"countryRegistration": {
"anyOf": [
{
"enum": [
"AF",
"AL",
"DZ",
"AD",
"AO",
"AG",
"AR",
"AM",
"AU",
"AT",
"AZ",
"BS",
"BH",
"BD",
"BB",
"BY",
"BE",
"BZ",
"BJ",
"BT",
"BO",
"BA",
"BW",
"BR",
"BN",
"BG",
"BF",
"MM",
"BI",
"CV",
"KH",
"CM",
"CA",
"CF",
"TD",
"CL",
"CN",
"CO",
"KM",
"CG",
"CR",
"CI",
"HR",
"CU",
"CY",
"CZ",
"CD",
"DK",
"DJ",
"DM",
"DO",
"TL",
"EC",
"EG",
"SV",
"GQ",
"ER",
"EE",
"ET",
"FJ",
"FI",
"FR",
"GA",
"GM",
"GE",
"DE",
"GH",
"GR",
"GD",
"GT",
"GN",
"GW",
"GY",
"HT",
"HN",
"HK",
"HU",
"IS",
"IN",
"ID",
"IR",
"IQ",
"IE",
"IL",
"IT",
"JM",
"JP",
"JO",
"KZ",
"KE",
"KI",
"KW",
"KG",
"LA",
"LV",
"LB",
"LS",
"LR",
"LY",
"LI",
"LT",
"LU",
"MG",
"MW",
"MY",
"MV",
"ML",
"MT",
"MH",
"MR",
"MU",
"MX",
"FM",
"MD",
"MC",
"MN",
"ME",
"MA",
"MZ",
"NA",
"NR",
"NP",
"NL",
"NZ",
"NI",
"NE",
"NG",
"KP",
"MK",
"NO",
"OM",
"PK",
"PW",
"PS",
"PA",
"PG",
"PY",
"PE",
"PH",
"PL",
"PT",
"PR",
"QA",
"RO",
"RU",
"RW",
"KN",
"LC",
"VC",
"WS",
"SM",
"ST",
"SA",
"SN",
"RS",
"SC",
"SL",
"SG",
"SK",
"SI",
"SB",
"SO",
"ZA",
"KR",
"SS",
"ES",
"LK",
"SD",
"SR",
"SZ",
"SE",
"CH",
"SY",
"TW",
"TJ",
"TZ",
"TH",
"TG",
"TO",
"TT",
"TN",
"TR",
"TM",
"TV",
"UG",
"UA",
"AE",
"GB",
"US",
"UY",
"UZ",
"VU",
"VE",
"VN",
"YE",
"ZM",
"ZW"
]
},
{
"type": "array",
"uniqueItems": true,
"minItems": 1,
"items": {
"enum": [
"AF",
"AL",
"DZ",
"AD",
"AO",
"AG",
"AR",
"AM",
"AU",
"AT",
"AZ",
"BS",
"BH",
"BD",
"BB",
"BY",
"BE",
"BZ",
"BJ",
"BT",
"BO",
"BA",
"BW",
"BR",
"BN",
"BG",
"BF",
"MM",
"BI",
"CV",
"KH",
"CM",
"CA",
"CF",
"TD",
"CL",
"CN",
"CO",
"KM",
"CG",
"CR",
"CI",
"HR",
"CU",
"CY",
"CZ",
"CD",
"DK",
"DJ",
"DM",
"DO",
"TL",
"EC",
"EG",
"SV",
"GQ",
"ER",
"EE",
"ET",
"FJ",
"FI",
"FR",
"GA",
"GM",
"GE",
"DE",
"GH",
"GR",
"GD",
"GT",
"GN",
"GW",
"GY",
"HT",
"HN",
"HK",
"HU",
"IS",
"IN",
"ID",
"IR",
"IQ",
"IE",
"IL",
"IT",
"JM",
"JP",
"JO",
"KZ",
"KE",
"KI",
"KW",
"KG",
"LA",
"LV",
"LB",
"LS",
"LR",
"LY",
"LI",
"LT",
"LU",
"MG",
"MW",
"MY",
"MV",
"ML",
"MT",
"MH",
"MR",
"MU",
"MX",
"FM",
"MD",
"MC",
"MN",
"ME",
"MA",
"MZ",
"NA",
"NR",
"NP",
"NL",
"NZ",
"NI",
"NE",
"NG",
"KP",
"MK",
"NO",
"OM",
"PK",
"PW",
"PS",
"PA",
"PG",
"PY",
"PE",
"PH",
"PL",
"PT",
"PR",
"QA",
"RO",
"RU",
"RW",
"KN",
"LC",
"VC",
"WS",
"SM",
"ST",
"SA",
"SN",
"RS",
"SC",
"SL",
"SG",
"SK",
"SI",
"SB",
"SO",
"ZA",
"KR",
"SS",
"ES",
"LK",
"SD",
"SR",
"SZ",
"SE",
"CH",
"SY",
"TW",
"TJ",
"TZ",
"TH",
"TG",
"TO",
"TT",
"TN",
"TR",
"TM",
"TV",
"UG",
"UA",
"AE",
"GB",
"US",
"UY",
"UZ",
"VU",
"VE",
"VN",
"YE",
"ZM",
"ZW"
]
}
}
]
},
"currency": {
"anyOf": [
{
"type": "string",
"minLength": 3,
"maxLength": 3
},
{
"type": "array",
"items": {
"type": "string",
"minLength": 3,
"maxLength": 3
},
"minItems": 1
}
]
},
"investible": {
"type": "boolean",
"default": false
},
"alive": {
"type": "boolean"
},
"paysDividends": {
"type": "boolean"
},
"regions": {
"anyOf": [
{
"enum": [
"Europe",
"North America",
"Asia Pacific",
"Emerging Markets",
"Global"
]
},
{
"type": "array",
"uniqueItems": true,
"minItems": 1,
"items": {
"enum": [
"Europe",
"North America",
"Asia Pacific",
"Emerging Markets",
"Global"
]
}
}
]
},
"riskFamilies": {
"anyOf": [
{
"enum": [
"Money Market",
"Fixed Income",
"Balanced",
"Equity",
"Commodities",
"Alternative",
"Forex"
]
},
{
"type": "array",
"uniqueItems": true,
"minItems": 1,
"items": {
"enum": [
"Money Market",
"Fixed Income",
"Balanced",
"Equity",
"Commodities",
"Alternative",
"Forex"
]
}
}
]
},
"sectors": {
"anyOf": [
{
"enum": [
"Energy",
"Materials",
"Industrials",
"Consumer Discretionary",
"Consumer Staples",
"Health Care",
"Financials",
"Information Technology",
"Communication Services",
"Utilities",
"Real Estate",
"No sector"
]
},
{
"type": "array",
"uniqueItems": true,
"minItems": 1,
"items": {
"enum": [
"Energy",
"Materials",
"Industrials",
"Consumer Discretionary",
"Consumer Staples",
"Health Care",
"Financials",
"Information Technology",
"Communication Services",
"Utilities",
"Real Estate",
"No sector"
]
}
}
]
}
}
},
"background": {
"anyOf": [
{
"type": "string"
},
{
"type": "object",
"properties": {
"primaryColor": {
"type": "string"
},
"secondaryColor": {
"type": "string"
}
},
"default": {
"primaryColor": "#0a4763",
"secondaryColor": "#28072d"
}
}
],
"default": {
"primaryColor": "#0a4763",
"secondaryColor": "#28072d"
},
"description": "Configure the background color of the universe. If the value is a string, the color is solid. If it is an object, the background is a gradient."
},
"intro": {
"type": "object",
"properties": {
"enabled": {
"type": "boolean",
"default": true
}
},
"default": {},
"description": "Enable or disable the intro animation."
},
"position": {
"type": "object",
"properties": {
"horizontal": {
"type": "integer",
"minimum": -100,
"maximum": 100,
"default": 0
},
"vertical": {
"type": "integer",
"minimum": -100,
"maximum": 100,
"default": 0
}
},
"default": {},
"description": "Ubicate the universe horizontally and vertically."
},
"motion": {
"type": "object",
"properties": {
"automatic": {
"type": "object",
"properties": {
"enabled": {
"type": "boolean",
"default": true
},
"xAxisSpeed": {
"type": "number",
"default": 0
},
"yAxisSpeed": {
"type": "number",
"default": 0.00075
},
"zAxisSpeed": {
"type": "number",
"default": 0
}
},
"default": {}
},
"manual": {
"type": "object",
"properties": {
"enabled": {
"type": "boolean",
"default": true
},
"xAxisLocked": {
"type": "boolean",
"default": false
},
"yAxisLocked": {
"type": "boolean",
"default": false
}
},
"default": {}
}
},
"default": {},
"description": "Configure the motion automatic and manual of the universe."
},
"state": {
"type": "object",
"properties": {
"particle": {
"type": "object",
"properties": {
"default": {
"type": "object",
"properties": {
"size": {
"type": "integer",
"default": 40
},
"color": {
"type": "string",
"default": "#fff"
},
"opacity": {
"type": "number",
"minimum": 0,
"maximum": 1,
"default": 1
},
"pulse": {
"type": "boolean",
"default": false
}
},
"default": {}
},
"hover": {
"type": "object",
"properties": {
"size": {
"type": "integer",
"default": 80
},
"color": {
"type": "string",
"default": "#51a4bd"
},
"opacity": {
"type": "number",
"minimum": 0,
"maximum": 1,
"default": 1
},
"pulse": {
"type": "boolean",
"default": false
}
},
"default": {}
}
},
"default": {}
}
},
"default": {},
"description": "Set the state of the particles."
},
"palette": {
"type": "array",
"items": {
"type": "string"
},
"minItems": 1,
"description": "List of particles colors available to use in the loading animation"
}
},
"additionalProperties": true
}Complete Schema
{}Public functions
-
upsertBehaviors(behaviors)
Insert or update a list of behaviors
Params
- {array} behaviors
-
deleteBehaviors(ids)
Delete a list of behaviors
Params
- {array} ids - Behaviors ids
-
dispatchBehavior(id, data)
Executes a behavior given an id with the data passed by parameter
Params
- {number} id - Behavior Id
- {object} data - Data required to execute the behavior
-
setState(param0)
Configure the color, size, opacity and pulse of all particles. If a property is not passed it takes the default value.
Params
- {object} param0 - Object with color, size, opacity and pulse properties
-
focusParticle(id)
Zoom to the selected particle
Params
- {number} id - Particle id
-
resetFocus()
Unzoom
-
resetParticle(id)
Reset color, size, opacity and pulse to the default values of the selected particle
Params
- {number} id - Particle id
-
playLoading(ids, params)
Play loading animation depending on params.mode
Params
- {array} ids - Particle ids affected by the animation
- {object} params - Object with mode and message properties. Mode determines the animation type and message the message showed during the animation.
-
clean()
Clean the component to remove everything in memory.
Locales
{
"currency": "Currency",
"category": "Category"
}