Embed Code

Create a html element with an id.

<div id="nutrient-breakdown"></div>
    

Then copy the following code to embed the nutriverse analyser.

Remember to set the first argument to renderNutrientBreakdown to whatever id you set for your html element. Ours is set to "nutrient-breakdown" below.

<link rel="stylesheet" href="https://nutriverse-embed.cube.serviom.me/NutrientBreakdown.css">
<script type="module">
  import { renderNutrientBreakdown } from 'https://nutriverse-embed.cube.serviom.me/NutrientBreakdown.js';
  renderNutrientBreakdown("nutrient-breakdown",  {
    dateOfBirth: "2006-01-02",
    weightKg: 150,
    heightCm: 70,
    foodWeights: [
      {fdcId: 171661, weight: "100g"} // 171661 is oats
    ]
  });
</script>
    

Feel free to change the dateOfBirth, weightKg and heightCm to whatever values you want.

The foodWeights field takes an array of objects with the fdcId of the food you want to analyse and the weight which is a string containing the weight of the food you want to analyse.

Units

Note that weight is a string, because you can specify the units.

Units available are mg, g, kg and t (tons).

  renderNutrientBreakdown("nutrient-breakdown-units",  {
    ...
    foodWeights: [
      {fdcId: 171661, weight: "1kg"} // 171661 = oats
    ]
  });
    

A special unit named sprigs is also available, but because the weight will be different for different kinds of ingredients. You may get a warning when using it with an incompatible food type.

A sprig of oats doesn't really make sense, so you'll see the at the top right.

When you see that warning image, you should check the developer console to see the warnings emitted by the analyser.

  renderNutrientBreakdown("nutrient-breakdown-2",  {
    ...
    foodWeights: [
      {fdcId: 171661, weight: "2 sprigs"} // 171661 = oats
    ]
  });
    

Colours

You can change the colours also if you like

Units available are mg, g, kg and t (tons).

  renderNutrientBreakdown("nutrient-breakdown-units",  {
    ...
    colors: {
      backgroundColor: "#b0deff",
      warning_color: "#b92ff5",
      okay_color: "#73a9ff",
      good_color: "#a8a120",
    }
  });
    

You can also make use of gradient colours by specifying the _end colours.

  renderNutrientBreakdown("nutrient-breakdown-units",  {
    ...
    colors: {
      backgroundColor: "#fff",
      warning_color: "#b92ff5",
      warning_color_end: "#620b87",
      okay_color: "#73a9ff",
      okay_color_end: "#1c3866",
      good_color: "#a8a120",
      good_color_end: "#4a470a",
    }
  });