<NaviReportBuilder
  @subComponent1="customSubComponent1"
  @subComponent2="customSubComponent2"
  @subComponent3="customSubComponent3"
  @subComponent4="customSubComponent4"
  @subComponent5="customSubComponent5"
  @subComponent6="customSubComponent6"
  @subComponent7="customSubComponent7"
  @subComponent8="customSubComponent8"
  @subComponent9="customSubComponent9"
  @subComponent10="customSubComponent10"
  @subComponent11="customSubComponent11"
  @subComponent12="customSubComponent12"
  @subComponent13="customSubComponent13"
  @subComponent14="customSubComponent14"
  @subComponent15="customSubComponent15"
  ...
  onAction1={{action 'action1'}}
  onAction2={{action 'action2'}}
  onAction3={{action 'action3'}}
  onAction4={{action 'action4'}}
  onAction5={{action 'action5'}}
  onAction6={{action 'action6'}}
  onAction7={{action 'action7'}}
  onAction8={{action 'action8'}}
  onAction9={{action 'action9'}}
  onAction10={{action 'action10'}}
  ...
  as | yield1 yield2 yield3 yield4 yield5 yield6 yield7 yield8 |
>
 ...
 
</NaviReportBuilder>

//goodbricks/app/routes/bricks.js

import Route from '@ember/routing/route';

export default class Bricks extends Route {
    model() {
      return [1,2,3];
    }
}

goodbricks/ 
|-- app
    |-- routes
    |   |-- bricks.js
    |   |-- sets.js
    |-- controllers
    |   |-- bricks.js
    |   |-- sets.js

--> goodbricks/routes/bricks
--> goodbricks/routes/sets

--> goodbricks/controllers/bricks
--> goodbricks/controllers/sets

goodbricks
|-- app
    |-- components
    |   |-- brick-card.js
    |   |-- brick-details.js
    |-- helpers
        |-- brick-name.js

ember-cli-clipboard 
|-- app
    |-- components
    |   |-- copy-button.js
    
    
    

$ ember new goodbricks

$ ember install navi-reports

//goodbricks/app/router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';
import { reportRoutes } from 'navi-reports/router';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {

  this.route('my-sets');
  
  reportRoutes(this, {/* options */});
 
});

export default Router;

goodbricks
|-- app
    |-- routes
        |-- bricks.js
        |-- sets.js

navi-reports
|-- app
    |-- routes
    |   |-- navi-reports
            |-- new.js
            |-- report
                |-- clone.js
                |-- save-as.js
                ...

goodbricks
|-- app
    |-- routes
        |-- bricks.js
        |-- sets.js
        |-- navi-reports
            |-- new.js
            |-- report
                |-- clone.js
                |-- save-as.js
                ...

'use strict';

module.exports = function(environment) {
  let ENV = {
    modulePrefix: 'goodbricks',
    environment,
    rootURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
      },
      EXTEND_PROTOTYPES: {
        // Prevent Ember Data from overriding Date.parse.
        Date: false
      }
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    },
  
  };


  ...
  return ENV;
};

import config from 'goodbricks/config/environment';

module.exports = function(/* environment, appConfig */) {
  return {
    navi: {
      dataSources: [/* { 
      	name: 'example', 
        uri:  'https://data.naviapp.io/v1',
        type: 'fili',
        timeout: 60000
      }*/],
      predefinedIntervalRanges: {
        day: ['P1D', 'P7D', 'P14D'],
        month: ['current/next', 'P1M', 'P3M'],
        year: ['current/next', 'P1Y', 'P2Y']
      },
      FEATURES: {
        enableScheduling: false,
        enablePDFExport: false,
        enabledNotifyIfData: false
      }
    }
  };
};

module.exports = function(/* environment, appConfig */) {
  return {
    ...   
    navi: {
      dataEpoch: '2019-01-01',
      dataSources: [{ 
      	name: 'brickData', 
        uri:  'https://data.goodbricks.io/v1',
        type: 'fili'
      }],
      FEATURES: {
        enableScheduleReports: true
        ...
      }
    }
  };
};

import config from 'ember-get-config';
const dataSources = config.navi.dataSources;

export default class NaviDataAdapter {
  ...
  _buildURLPath(request, options) {
    const { uri } = dataSources.find(d => d.name = options.name);
    ...
    return `${uri}/${namespace}/${table}/${timeGrain}/${dimensions}`;
  }
  ...
} 

  ...

  @service naviNofications;

  @action
  async saveReport(report) {
    await report.save();
      
    this.naviNotifications.add({
      message: 'Report was successfully saved!',
      type: 'success'
    });
  }
  ...

import Service from '@ember/service';
import { assert } from '@ember/debug';

export default class extends Service {


  add(/* options */) {
    assert("NaviNotifications must implement `add`");
  }


  clearMessages() {
    assert("NaviNotifications must implement `clear`");
  }
  
}

$ ember g service navi-notifications

...

import Notification from 'navi-core/services/navi-base-notifications';

export default class FlashMessageService extends Notification {

  @service
  notificationMessages; //ember-cli-notifications

  add(options = {}) {
    const clearDuration = TIMEOUTS[options.timeout];
    const { message, type } = options;

    return this.notificationMessages[type](message, {
      autoClear: true,
      clearDuration
    });
  }

  clearMessages() {
    this.notificationMessages.clearAll();
  }
}

<span>
  </NaviIcon "download"> Export
</span>

goodbricks
|-- app
    |-- components
    |   |-- navi-icon.js
    |-- templates
        |-- components
            |-- navi-icon.hbs

$ ember g component navi-icon

    goodbricks/components/navi-icon

import NaviIcon from 'navi-core/components/navi-icon';

const ICON_MAP = {
  download: 'cloud-download'
  ...
};

export default class extends NaviIcon {
  get normalizedName() {
    return ICON_MAP[this.name];
  }
}

{{!-- goodbricks/app/templates/components/navi-icon.hbs --}}

<i aria-hidden="true" class="d-icons d-{{this.normalizedName}}"></i>

/* global require */

...

const TYPE = 'navi-visualization-manifest';
const REGEX = new RegExp(`^${modulePrefix}/${TYPE}/([a-z-]*)$`);

export default NaviVisualizationService extends Service {

  ...
  
  all() {
  
    const modules = Object.keys(require.entries); //all modules
    
    const owner = getOwner(this);
    
    return modules.filter(module => REGEX.test(module))
                  .map(vis => REGEX.exec(vis)[1])
                  .map(name => owner.lookup(`${TYPE}:${name}`));  
  }
});

$ember g navi-visualization lego-bar-chart

installing navi-visualization
  create app/components/navi-visualizations/lego-bar-chart.js
  create app/components/navi-visualization-config/lego-bar-chart.js
  create app/navi-visualization-manifests/lego-bar-chart.js
  create app/models/lego-bar-chart.js
  create app/templates/components/navi-visualizations/lego-bar-chart.hbs
  create app/templates/components/navi-visualization-config/lego-bar-chart.hbs
installing navi-visualization-test
  create tests/integration/components/navi-visualizations/lego-bar-chart-test.js
  create tests/integration/components/navi-visualization-config/lego-bar-chart-test.js

myaddon
|-- app
    |-- components
        |-- brick-card.js

goodbricks 
|-- app
    |-- components
        |-- brick-card.js

$ ember g component navi-cell-renderers/dimension

import CellComponent from 'navi-core/components/cell-renderers/dimension';

export default class extends CellComponent {
  classNames = ['navi-cell-renderer--lego-dim'];
}