Ability to define custom metadata + some documentation errors

README.MD

@@ -143,7 +143,7 @@ You can change the report name to a name you want
 Print more data to your report, such as browser name + version, platform name + version and your environment. The values need to meet some predefined data, see [Metadata](#metadata) for more info.
 Data can be passed like below.
 
-> **If you provide the metadata when instantiating `multi-cucumber-html-reporter` the metadata will be added to each feature. If you already have metadata in your JSON then the metadata in the JSON will be leading**
+> **If you provide the metadata when instantiating `multi-cucumber-html-reporter` the metadata will be added to each feature. If you already have metadata in your JSON then the metadata in the JSON will take precedence**
 
 ```js
 metadata:{
@@ -161,6 +161,29 @@ metadata:{
 
 See [metadata](#metadata-1) for more info
 
+### `customMetadata`
+- **Type:** `boolean`
+- **Mandatory:** No
+
+It is possible to provide custom metadata by setting this variable to `true`. Custom metadata will override the regular metadata completely and potentially have strange formatting bugs if too many (10+) variables are used.
+The columns will be in the order defined by the order of the list.
+
+Adding the metadata is done in the same way as with normal metadata. The metadata is formed as a list of key-value pairs to preserve order:
+
+```js
+metadata: [
+        {name: 'Environment v.', value: '12.3'},
+        {name: 'Plugin v.', value: '32.1'},
+        {name: 'Variable set', value: 'Foo'}
+    ]
+```
+
+On the features overview page the custom metadata is shown like:
+![Snapshot - Features overview custom metadata](./docs/images/features-custom-metadata.jpg "Snapshot - Features overview custom metadata")
+
+>**IMPORTANT:**
+> This does not work correctly if features have different sets of metadata. Try to avoid this situation.
+
 ### `customData`
 - **Type:** `object`
 - **Mandatory:** No
@@ -234,7 +257,7 @@ cucumberJSON[0].metadata = metadata;
 ### `metadata.app.name`
 - **Type:** `string`
 
-**e.g.:** The version of the app.
+**e.g.:** The name of the app.
 
 ### `metadata.app.version`
 - **Type:** `string`
@@ -257,7 +280,7 @@ cucumberJSON[0].metadata = metadata;
 ### `metadata.device`
 - **Type:** `string`
 
-**e.g.:** A name that represents the type of device. For example, if you run it on a virtual machine, you can place it here `Vitrual Machine`, or the name of the mobile, like for example `iPhone 7 Plus`.
+**e.g.:** A name that represents the type of device. For example, if you run it on a virtual machine, you can place it here `Virtual Machine`, or the name of the mobile, like for example `iPhone 7 Plus`.
 
 > If no correct value is provided the `?`-icon with the text `not known` is shown
 

lib/generate-report.js

@@ -15,11 +15,13 @@ const INDEX_HTML = 'index.html';
 const FEATURE_FOLDER = 'features';
 const FEATURES_OVERVIEW_INDEX_TEMPLATE = 'features-overview.index.tmpl';
 const CUSTOMDATA_TEMPLATE = 'components/custom-data.tmpl';
-const FEATURES_OVERVIEW_TEMPLATE = 'components/features-overview.tmpl';
+let FEATURES_OVERVIEW_TEMPLATE = 'components/features-overview.tmpl';
+const FEATURES_OVERVIEW_CUSTOM_METADATA_TEMPLATE = 'components/features-overview-custom-metadata.tmpl';
 const FEATURES_OVERVIEW_CHART_TEMPLATE = 'components/features-overview.chart.tmpl';
 const SCENARIOS_OVERVIEW_CHART_TEMPLATE = 'components/scenarios-overview.chart.tmpl';
 const FEATURE_OVERVIEW_INDEX_TEMPLATE = 'feature-overview.index.tmpl';
-const FEATURE_METADATA_OVERVIEW_TEMPLATE = 'components/feature-metadata-overview.tmpl';
+let FEATURE_METADATA_OVERVIEW_TEMPLATE = 'components/feature-metadata-overview.tmpl';
+const FEATURE_CUSTOM_METADATA_OVERVIEW_TEMPLATE = 'components/feature-custom-metadata-overview.tmpl';
 const SCENARIOS_TEMPLATE = 'components/scenarios.tmpl';
 const RESULT_STATUS = {
     passed: 'passed',
@@ -44,6 +46,7 @@ function generateReport(options) {
         throw new Error('An output path for the reports should be defined, no path was provided.');
     }
 
+    const customMetadata = options.customMetadata || false;
     const customData = options.customData || null;
     const disableLog = options.disableLog;
     const openReportInBrowser = options.openReportInBrowser;
@@ -58,6 +61,7 @@ function generateReport(options) {
 
     let suite = {
         app: 0,
+        customMetadata: customMetadata,
         customData: customData,
         browser: 0,
         name: '',
@@ -367,6 +371,9 @@ function generateReport(options) {
     function _createFeaturesOverviewIndexPage(suite) {
         const featuresOverviewIndex = path.resolve(reportPath, INDEX_HTML);
 
+        FEATURES_OVERVIEW_TEMPLATE = suite.customMetadata ? 
+        FEATURES_OVERVIEW_CUSTOM_METADATA_TEMPLATE : FEATURES_OVERVIEW_TEMPLATE;
+
         fs.writeFileSync(
             featuresOverviewIndex,
             _.template(_readTemplateFile(FEATURES_OVERVIEW_INDEX_TEMPLATE))({
@@ -399,6 +406,11 @@ function generateReport(options) {
      * @private
      */
     function _createFeatureIndexPages(suite) {
+
+        // Set custom metadata overview for the feature
+        FEATURE_METADATA_OVERVIEW_TEMPLATE = suite.customMetadata ? 
+        FEATURE_CUSTOM_METADATA_OVERVIEW_TEMPLATE : FEATURE_METADATA_OVERVIEW_TEMPLATE;
+
         suite.features.forEach(feature => {
             const featurePage = path.resolve(reportPath, `${FEATURE_FOLDER}/${feature.id}.html`);
             fs.writeFileSync(