analysis-evolution

Example

<cr-component id="component" name="analysis-evolution"></cr-component>
<script>
  const component = document.querySelector("#component");
  component.init({
    proposalId: 74700,
    selectedperiod: "YTD",
  });
</script>

Schema

{
 "type": "object",
 "properties": {
  "proposalId": {
   "type": "integer",
   "minimum": 1,
   "description": "Proposal identifier"
  },
  "proposal": {
   "type": "object",
   "description": "In case you want to use an already created proposal"
  },
  "nav": {
   "type": "array",
   "items": {
    "type": "object",
    "properties": {
     "date": {
      "type": "string"
     },
     "valuation": {
      "type": "number"
     }
    }
   },
   "description": "NAV of your portfolio",
   "minItems": 1
  },
  "assets": {
   "type": "array",
   "uniqueItems": true,
   "items": {
    "type": "object",
    "additionalProperties": false,
    "required": [
     "date",
     "value"
    ],
    "properties": {
     "date": {
      "type": "string"
     },
     "value": {
      "type": "number",
      "minimum": 0,
      "default": 0
     }
    }
   },
   "description": "Assets under management for the portfolio at the end of each business day"
  },
  "flows": {
   "type": "array",
   "uniqueItems": true,
   "minItems": 1,
   "items": {
    "type": "object",
    "additionalProperties": false,
    "required": [
     "date",
     "value"
    ],
    "properties": {
     "date": {
      "type": "string"
     },
     "value": {
      "type": "number",
      "default": 0
     }
    }
   },
   "description": "Inflows and outflows for the portfolio at the end of each specific day. First flow must match with first assets. Flows dates must be contained in assets dates"
  },
  "period": {
   "type": "string",
   "default": "SI",
   "description": "A period must be one of 1W,2W,1M,3M,6M,YTD,1Y,3Y,5Y,10Y,SI or a string containig two valid dates like 20211012-20220812"
  }
 },
 "additionalProperties": true,
 "oneOf": [
  {
   "required": [
    "proposal"
   ],
   "prohibited": [
    "proposalId",
    "assets",
    "flows",
    "nav"
   ]
  },
  {
   "required": [
    "proposalId"
   ],
   "prohibited": [
    "proposal",
    "assets",
    "flows",
    "nav"
   ]
  },
  {
   "required": [
    "assets",
    "flows"
   ],
   "prohibited": [
    "proposal",
    "proposalId",
    "nav"
   ]
  },
  {
   "required": [
    "nav",
    "flows"
   ],
   "prohibited": [
    "proposal",
    "proposalId",
    "assets"
   ]
  }
 ]
}

Complete Schema

{}

CSS Variables

--color-inflow: var(--color-green-6);
--color-outflow: var(--color-red-6);

Locales

{
 "myPortfolio": "My portfolio",
 "title": "Portfolio evolution",
 "inflow": "Inflow",
 "outflow": "Outflow"
}