Dashboard

components.dashboard-tile.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['DashboardTile'],
  classNameBindings: ['columnClass', 'emphasisClass'],
  columnClass: 'col-2_sm-4',
  defaultWidth: null,

  didRender() {
    this.adaptTileSize();
  },
  emphasisClass: Ember.computed('data.emphasis', function() {
    return 'emphasis-' + this.get('data.emphasis').toString();
  }),
  
  observeDefaultWidth: Ember.observer('defaultWidth', function() { 
    this.adaptTileSize();
  }),
  
  adaptTileSize() {

    this.set('columnClass', '');

    let tileWidth = this.get('defaultWidth');
    let valueWidth = this.$('.DashboardTile-value').width();

    if (this.get('data.next') || this.get('data.skip')) {
      	this.set('data.superSize', false);
     
        let targetData = this.get('data.skip') ? this.get('data.skip') : this.get('data');
        if (valueWidth >= tileWidth) targetData.superSize = true;
    } else if (valueWidth >= tileWidth) {
      this.set('columnClass', 'col-4_sm-8');
    } else {
      this.set('columnClass', 'col-2_sm-4');
    }
    console.log(`${this.get('data.title')}: tileWidth: ${tileWidth}, valueWidth: ${valueWidth}`);
  }
});

components.next-dashboard.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['Dashboard']
});

components.tile-group.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['TileGroup'],
  
  defaultWidth: null,

  init() {
    this._super(...arguments);
    this.debounceResize = () => {
      Ember.run.debounce(this, this.measureDefaultWidth, 200);
  	};
  	$(window).on('resize', this.debounceResize);
 	},

  didRender() {
    this.measureDefaultWidth();
  },

  didReceiveAttrs() {
    let previous;
    this.get('data.tiles').forEach((tile) => {
      if (previous && previous.emphasis === 1 && tile.emphasis === 1 && !tile.skip) {
        previous.next = tile;
        tile.skip = previous;
      } else {
        delete tile.skip;
      }
      previous = tile;
    })
  },

  measureDefaultWidth() {
    let tilePadding = 8;
    let colPadding = 8;
    this.set('defaultWidth', this.$('#measure').width() - (2 * tilePadding) - (2 * colPadding));
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  dashData: {
   title: "Dashboard Title",
   tileGroups: [
     {
       title: "TileGroup 1 Title",
       tiles: [
         {
           	emphasis: 2,
          	title: "Te leveren very long title demo",
          	value: 123,
           	unit: 'Artikelen'
         },
         {
         		emphasis: 2,
          	title: "Geleverd",
          	value: 4567,
           	unit: 'Artikelen'
         },
         {
         		emphasis: 1,
          	title: "Te factureren",
          	value: 12345678999,
         		unit: 'euro'
         },
         {
         		emphasis: 1,
          	title: "Gefactureerd",
          	value: 4567
         }
       ]
     },
     {
       title: "TileGroup 2 Title",
       tiles: [
         {
           	emphasis: 1,
          	title: "In bestelling",
          	value: 123
         },
         {
         		emphasis: 1,
          	title: "Voorraad",
          	value: 4567
         },
         {
         		emphasis: 2,
          	title: "Economische voorraad",
          	value: 1234567
         },
         {
         		emphasis: 1,
          	title: "Gereserveerd",
          	value: 4567
         }
       ]
     }
   ]
  }
});

styles.app.css

* {
 box-sizing: border-box; 
}
body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.Dashboard {
  border: 1px solid silver;
  border-radius: 2px;
  padding: 16px;
}
.Dashboard-title {
  color: rgb(76, 133, 255);
	line-height: 1;
  margin-bottom: 8px;
  font-size: 20px;
}
.TileGroup {
  border: 1px solid silver;
  border-radius: 2px;
  padding: 16px 16px 0 16px;
}
.TileGroup:not(:last-child) {
	margin-bottom: 16px;
}
.TileGroup-title {
  color: rgb(76, 133, 255);
  line-height: 1;
  font-size: 16px;
  margin-bottom: 8px;
}
.TileGroup-tiles {
  /*background: rgba(0,0,0,0.02);*/
}

.DashboardTile-title {
	color: rgb(76, 133, 255);
}
.DashboardTile-value {
  color: black;
	display: inline-block;
}
.DashboardTile-unit {
	color: silver;
}

/* 1 */
.DashboardTile.emphasis-1 .DashboardTile-inner {
 	 height: 64px;
}
.DashboardTile.emphasis-1:not(:last-child) {
  margin-bottom: 16px;
}
.DashboardTile.emphasis-1 .DashboardTile-title {
 		font-size: 11px; 
}
.DashboardTile.emphasis-1 .DashboardTile-value {
 		font-size: 20px; 
}
.DashboardTile.emphasis-1 .DashboardTile-unit {
 		font-size: 10px; 
}

/* 2 */
.DashboardTile.emphasis-2 {
 	 height: 160px;
}
.DashboardTile.emphasis-2 .DashboardTile-title {
 		font-size: 14px;
}
.DashboardTile.emphasis-2 .DashboardTile-value {
 	font-size: 50px; 
}

.DashboardTile-inner {
  border: 1px solid silver;
  border-radius: 2px;
  padding: 8px;
  height: 100%;
}
small {
	color: silver; 
	font-size: 8px;
  height: 0;
  top: 8px;
  left: -8px;
  display: block;
  position: relative;
}

#measure {
  background: lime;
  height: 0;
  padding: 0;
}

templates.application.hbs

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gridlex/2.2.2/gridlex.min.css">
<h1>Dashboard prototype</h1>
<ul>
	<li><b>emphasis level</b></li>
  <li><i>`Tile` heeft ‘emphasis’ van 1 of 2</i></li>
  <li><b>viewport size</b></li>
  <li><i>Default 4 kolommen per `Tile`, grotere viewport 2 kolommen per `Tile`. Waneer de `Tiles` binnen een `TileGroup` samen breder zijn dan 12 kolommen, wrappen de overlopende `Tiles` naar de volgende regel.</i></li>
  <li><b>value width</b></li>
  <li><i>Zolang een `Tile` een waarde heeft ‘breder’ dan de `Tile` zelf, claimt de `Tile` 2 keer zijn normale breedte.</i></li>
</ul>
{{next-dashboard data=dashData}}

templates.components.dashboard-tile.hbs

<div class="DashboardTile-inner">
{{#if data.title}}
	<div class="DashboardTile-title">{{data.title}}</div>
{{/if}}
{{#if data.value}}
  <div class="DashboardTile-value">{{data.value}}</div>
{{/if}}
{{#if data.unit}}
  <div class="DashboardTile-unit">{{data.unit}}</div>
{{/if}}
{{!--<small class="">{{emphasis}}</small>--}}
</div>

templates.components.next-dashboard.hbs

{{#if data.title}}
	<div class="Dashboard-title">{{data.title}}</div>
{{/if}}
{{#each data.tileGroups as |tileGroup|}}
	{{tile-group data=tileGroup}}
{{/each}}

templates.components.tile-group.hbs

  <div class="TileGroup-title">{{data.title}}</div>
  <div class="TileGroup-tiles grid">
    {{#each data.tiles as |tile|}}
      {{#if tile.next}}
{{!--        <div class="col-2_sm-4{{if tile.superSize " col-4_sm-8"}}{{if tile.next.superSize " col-4_sm-8"}}">--}}
        <div class="{{if tile.superSize "col-4_sm-8" "col-2_sm-4"}}">
        	{{dashboard-tile data=tile defaultWidth=defaultWidth}}
        	{{dashboard-tile data=tile.next defaultWidth=defaultWidth}}
        </div>
      {{else if tile.skip}}
      {{!-- skip --}}
      {{else}}
        {{dashboard-tile data=tile defaultWidth=defaultWidth}}
      {{/if}}
    {{/each}}
  </div>
  <div class="grid"><div id="measure" class="col-2_sm-4">{{!--{{defaultWidth}}--}}</div></div>

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {
  }
}