Create a second template based on a first template using extends

Warning

Rework pending, no delivery date. The Front App SDK (ReactJS) and the Front API SDK (NodeJS) are both being replaced. This page documents the current release, remains accurate, and is maintained until the replacement ships. Code written against it keeps working.

The platform provides a simple way to create templates that not only leverage most of the options from an initial one and but also receive modifications done to the latter automatically.

Simply add the extends element to your template:

"rechartsBarWithBiggerSize": {
    "extends": "rechartsBar",
    "options": {
        "barSize": 10,
        "barCategoryGap": 5
    }
}

Using extends, the options of your second template will merge with the options of the first, so when you use the second template, the options will be as follows:

"options": {
    "barGap": 3,
    "barSize": 10,
    "barCategoryGap": 5
    "margin": {
         "left": 20,
         "right": 20,
         "top": 40,
         "bottom": 35
    }
}

This will also work if you only want to retrieve the options from rechartsBar for example, but for another component. Simply specify which component in the following example:

"rechartsBarWithBiggerSize": {
    "component": "recharts.line",
    "extends": "rechartsBar",
    "options": {
        "barSize": 10,
        "barCategoryGap": 5
    }
}

The merged options above will apply to recharts.line as soon as you use the rechartsBarWithBiggerSize component.

Warning

There must be at least one component (keyword component or a component used as a template) defined if you use the extends. The example below will not work because neither rechartsBar nor rechartsBarWithBiggerSize have any component assigned:

{
    "rechartsBar": {
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                 "left": 20,
                 "right": 20,
                 "top": 40,
                 "bottom": 35
            }
        }
    },
    "rechartsBarWithBiggerSize": {
        "extends": "rechartsBar",
        "options": {
            "barSize": 10,
            "barCategoryGap": 5
        }
    }
}

Instead, this is the correct configuration:

{
    "rechartsBar": {
        "component": "recharts.bar", // define component that will be used here
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                 "left": 20,
                 "right": 20,
                 "top": 40,
                 "bottom": 35
            }
        }
    },
    "rechartsBarWithBiggerSize": {
        "extends": "rechartsBar",
        "options": {
            "barSize": 10,
            "barCategoryGap": 5
        }
    }
}

{
    "recharts.bar": { // recharts.bar is a component so it will work
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                 "left": 20,
                 "right": 20,
                 "top": 40,
                 "bottom": 35
            }
        }
    },
    "rechartsBarWithBiggerSize": {
        "extends": "recharts.bar",
        "options": {
            "barSize": 10,
            "barCategoryGap": 5
        }
    }
}

Note : If you are using a chart family, you don't need to specify the extends, by default the children gets the same options as the parent.

For example:

{
    "recharts": {
        "options": {
            "barGap": 3,
            "barSize": 6,
            "margin": {
                "left": 20,
                "right": 20,
                "top": 40,
                "bottom": 35
            }
        }
    },
    "recharts.bar": {
      "options": {
        "barGap": 1
      }
    }
}

Here, recharts.bar gets the options from recharts and modifies the barGap property. The options for recharts.bar will then be:

{
  "recharts.bar": {
        "options": {
            "barGap": 1, // On garde la définition de recharts.bar
            "barSize": 6,
            "margin": {
                "left": 20,
                "right": 20,
                "top": 40,
                "bottom": 35
            }
        }
    }
}

Create a second template based on a first template using extends#

Create a second template based on a first template using extends