Adding chart placeholder

README.md

@@ -36,6 +36,15 @@ ember install ember-content-placeholders
 
 ![rendered example](https://i.imgur.com/NBb6ZB7.png)
 
+
+```hbs
+{{#content-placeholders as |placeholder|}}
+  {{placeholder.chart}}
+{{/content-placeholders}}
+```
+
+![rendered example](https://i.imgur.com/n6Lv6Cn.png)
+
 ### Available components and properties
 
 * root `content-placeholders`
@@ -58,9 +67,12 @@ ember install ember-content-placeholders
 
 * yield `placeholder.nav`
 
+* yield `placeholder.chart`
+  * Number `columns` (default: 15)
+
+
 **TO DO:**
 - `placeholder.list`
-- `placeholder.chart`
 - `placeholder.table`
 
 ### Customization

addon/components/content-placeholders-chart.js

@@ -0,0 +1,15 @@
+import layout from '../templates/components/content-placeholders-chart';
+import { computed, get } from '@ember/object';
+import ContentPlaceholersBase from './content-placeholders-base';
+
+export default ContentPlaceholersBase.extend({
+  className: 'ember-content-placeholders-chart',
+  classNameBindings: ['className'],
+
+  columns: 15,
+  layout,
+
+  columnsArray: computed('columns', function() {
+    return Array.apply(null, Array(get(this, 'columns')));
+  }),
+});

addon/templates/components/content-placeholders-chart.hbs

@@ -0,0 +1,7 @@
+<div class="{{className}}__yaxis"></div>
+<div class="{{className}}__data">
+  {{#each columnsArray}}
+    <div class="{{className}}__data__column" data-test-ember-content-placeholders-chart-column></div>
+  {{/each}}
+</div>
+<div class="{{className}}__xaxis"></div>

addon/templates/components/content-placeholders.hbs

@@ -27,5 +27,12 @@
       animated=animated
       centered=centered
     )
+
+    chart=(
+      component 'content-placeholders-chart'
+      rounded=rounded
+      animated=animated
+      centered=centered
+    )
   )
 }}

app/components/content-placeholders-chart.js

@@ -0,0 +1 @@
+export { default } from 'ember-content-placeholders/components/content-placeholders-chart';

app/styles/ember-content-placeholders.scss

@@ -122,6 +122,58 @@ $ember-content-placeholders-spacing: 10px !default;
   }
 }
 
+.ember-content-placeholders-chart {
+  height: 120px;
+
+  &__yaxis, &__xaxis {
+    @include ember-content-placeholders;
+    height: 100%;
+    margin-right: 15px;
+    width: $ember-content-placeholders-spacing;
+    background: $ember-content-placeholders-primary-color;
+    float: left;
+  }
+
+  &__xaxis {
+    height: 10%;
+    width: 100%;
+    border-radius: 0 $ember-content-placeholders-border-radius $ember-content-placeholders-border-radius 0 !important;
+  }
+
+  &__yaxis {
+    border-radius: $ember-content-placeholders-border-radius $ember-content-placeholders-border-radius 0 0 !important;
+  }
+
+  &__data {
+    display: flex;
+    height: 100%;
+    align-items: flex-end;
+
+    &__column {
+      @include ember-content-placeholders;
+      width: 2 * $ember-content-placeholders-spacing;
+      margin-right: 1.2 * $ember-content-placeholders-spacing;
+      margin-bottom: 5px;
+
+      &:nth-child(4n + 1) {
+        height: 70%;
+      }
+
+      &:nth-child(4n + 2) {
+        height: 90%;
+      }
+
+      &:nth-child(4n + 3) {
+        height: 60%;
+      }
+
+      &:nth-child(4n + 4) {
+        height: 75%;
+      }
+    }
+  }
+}
+
 .ember-content-placeholders-img {
   @include ember-content-placeholders;
   @include ember-content-placeholders-spacing;

tests/dummy/app/templates/application.hbs

@@ -24,4 +24,10 @@
       {{placeholder.heading img=true}}
     {{/content-placeholders}}
   </div>
+
+  <div class="panel">
+    {{#content-placeholders rounded=true as |placeholder|}}
+      {{placeholder.chart}}
+    {{/content-placeholders}}
+  </div>
 </div>

tests/integration/components/content-placeholders-chart-test.js

@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | content-placeholders-chart', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders correct number of columns in a chart', async function(assert) {
+    await this.render(hbs`
+    {{content-placeholders-chart columns=20}}
+  `);
+
+    assert.equal(this.$('[data-test-ember-content-placeholders-chart-column]').length, 20, 'it renders a 20 column chart');
+  });
+});