feat: Added BoardComponent

kantord · Mar 31, 2018 · 99b8e93 · 99b8e93
1 parent 9d59301
commit 99b8e93
Show file tree

Hide file tree

Showing 24 changed files with 302 additions and 31 deletions.
diff --git a/dist/manual_test.html b/dist/manual_test.html
@@ -3,7 +3,7 @@
   <head>
       <title></title>
   </head>
-<body class="typeset">
+<body class="typeset" id="baseline">
 
   <script src="test.js"></script>
 </body>

diff --git a/dist/screenshot.html b/dist/screenshot.html
@@ -6,6 +6,20 @@
 <body class="typeset">
 
   <script src="screenshot_index.js"></script>
+  <style>
+    .ds--column {
+        width: 40%
+        padding-left: 5%;
+        float: left;
+    }
+
+    .ds--columns:after {
+      content: "";
+      display: table;
+      clear: both;
+      overflow: hidden;
+    }
+  </style>
 </body>
 
 

diff --git a/docs/components.md b/docs/components.md
@@ -172,6 +172,14 @@
 </div>
 
 
+<div class="gallery-item"  markdown="1">
+
+### board ([Usage](examples/board))
+![](screenshots/board.png)
+
+</div>
+
+
 <div class="gallery-item"  markdown="1">
 
 ### columns ([Usage](examples/columns))

diff --git a/docs/examples/board.md b/docs/examples/board.md
@@ -0,0 +1,34 @@
+---
+layout: default
+title: How to use board
+---
+
+# How to use board
+Here's an example code regarding the use of board: 
+
+```yaml
+---
+  dashboard "Example": 
+    - 
+      board: 
+        - 
+          rows: 
+            - 
+              pie chart: 
+                columns: 
+                  - 
+                    - "Apples"
+                    - 3
+                  - 
+                    - "Oranges"
+                    - 2
+                  - 
+                    - "Pears"
+                    - 2
+            - 
+              p text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor massa, luctus rhoncus justo vel, cursus placerat ligula. Proin pulvinar ipsum in enim rutrum, quis fermentum ex finibus. Nunc commodo urna tellus, tristique tempor magna tempor eget. Phasellus eu ex lacinia sapien viverra fermentum."
+
+```
+The code above will render a board that looks like this:
+
+![](../screenshots/board.png)
diff --git a/docs/examples/board.yml b/docs/examples/board.yml
@@ -0,0 +1,21 @@
+---
+  dashboard "Example": 
+    - 
+      board: 
+        - 
+          rows: 
+            - 
+              pie chart: 
+                columns: 
+                  - 
+                    - "Apples"
+                    - 3
+                  - 
+                    - "Oranges"
+                    - 2
+                  - 
+                    - "Pears"
+                    - 2
+            - 
+              p text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor massa, luctus rhoncus justo vel, cursus placerat ligula. Proin pulvinar ipsum in enim rutrum, quis fermentum ex finibus. Nunc commodo urna tellus, tristique tempor magna tempor eget. Phasellus eu ex lacinia sapien viverra fermentum."
+
diff --git a/docs/gallery.json b/docs/gallery.json
@@ -17,6 +17,7 @@
 ["Charts","custom axes",{"line chart":[{"attr:axis":{"x":{"label":"Year","type":"timeseries","tick":{"format":"%Y"}},"y":{"label":"Amount consumed (tonnes)"}}},{"data":{"x":"x","xFormat":"%Y","columns":[["x","1999","2001","2002","2004","2007","2008"],["Apples",30,29,25,26,27,10],["Oranges",20,21,22,20,27,19],["Pears",10,9,8,8,7,8]]}}]}]
 ["Charts","area chart",{"area chart":{"columns":[["Apples",30,29,25,26,27,10],["Oranges",20,21,22,20,27,19]]}}]
 ["Charts","step chart",{"step chart":{"columns":[["Apples",30,29,25,26,27,10],["Oranges",20,21,22,20,27,19]]}}]
+["Grid","board",{"board":[{"rows":[{"pie chart":{"columns":[["Apples",3],["Oranges",2],["Pears",2]]}},{"p text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor massa, luctus rhoncus justo vel, cursus placerat ligula. Proin pulvinar ipsum in enim rutrum, quis fermentum ex finibus. Nunc commodo urna tellus, tristique tempor magna tempor eget. Phasellus eu ex lacinia sapien viverra fermentum."}]}]}]
 ["Text","h1 text",{"h1 text":"Lorem ipsum dolor sit amet"}]
 ["Text","h2 text",{"h2 text":"Lorem ipsum dolor sit amet"}]
 ["Text","h3 text",{"h3 text":"Lorem ipsum dolor sit amet"}]

diff --git a/docs/screenshots/board.png b/docs/screenshots/board.png
diff --git a/docs/screenshots/columns.png b/docs/screenshots/columns.png
diff --git a/docs/screenshots/rows.png b/docs/screenshots/rows.png
diff --git a/package.json b/package.json
@@ -99,5 +99,6 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  }
+  },
+  "browserlist": ["last 10 versions"]
 }
diff --git a/src/components/board/Board.js b/src/components/board/Board.js
@@ -0,0 +1,12 @@
+import ContainerComponent from '../container_base.js'
+import Wrapped from '../wrapped'
+import './Board.scss'
+
+const BoardComponent = Wrapped((args, selection) => selection
+  .append('div')
+  .attr('class', 'ds--board')
+)(ContainerComponent({
+  'wrapper_tag': 'div',
+}))
+
+export default BoardComponent
diff --git a/src/components/board/Board.scss b/src/components/board/Board.scss
@@ -0,0 +1,28 @@
+@import "~sassline/assets/sass/sassline-base/_variables.scss";
+@import "~sassline/assets/sass/sassline-base/_mixins.scss";
+
+.ds--board {
+  margin-left: -(map-get($gutterwidths, medium));
+  margin-right: -(map-get($gutterwidths, medium));
+  padding: map-get($gutterwidths, medium);
+
+  >* {
+    >.ds--columns {
+      margin: 0;
+    }
+    >.ds--columns>.ds--column {
+      box-shadow: 2px 1px 2px #00000026;
+      border-radius: 3px;
+    }
+    >.ds--chart {
+      box-shadow: 2px 1px 2px #00000026;
+      border-radius: 3px;
+    }
+  }
+
+  /* Hero pattern
+  http://www.heropatterns.com/ */
+  box-shadow: inset 0 0 10px #00000042;
+  background-color: #dfeaeb;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%2379a9a3' fill-opacity='0.1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
+}
diff --git a/src/components/board/Board.test.js b/src/components/board/Board.test.js
@@ -0,0 +1,31 @@
+import should from 'should' // eslint-disable-line no-unused-vars
+import * as d3 from 'd3'
+import assert from 'assert'
+
+describe('Board component', function() {
+  beforeEach(function () {
+    this.jsdom = require('jsdom-global')()
+  })
+
+  afterEach(function () {
+    this.jsdom()
+  })
+
+  it('integration test', () => {
+    const test_parser = require('../../test_parser.js').default
+    const bind = test_parser({
+      'component': 'root', 'args': { 'title': '', 'state_handler': {} },
+      'data': [
+        {'component': 'board',
+          'args': {'state_handler': {}},
+          'data': [
+            {'component': 'text', 'args': {'tagName': 'h4'}, 'data': 'random'}
+          ]
+        }
+      ]
+    })
+    bind(d3.selection())
+    assert.equal(d3.selection().select('.ds--board').size(), 1)
+  })
+
+})
diff --git a/src/components/board/gallery.json b/src/components/board/gallery.json
@@ -0,0 +1,16 @@
+[
+  {
+    "data": [
+      {
+        "rows": [
+          {"pie chart": {"columns": [["Apples", 3], ["Oranges", 2], ["Pears", 2]]}},
+          {"p text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor massa, luctus rhoncus justo vel, cursus placerat ligula. Proin pulvinar ipsum in enim rutrum, quis fermentum ex finibus. Nunc commodo urna tellus, tristique tempor magna tempor eget. Phasellus eu ex lacinia sapien viverra fermentum."}
+        ]
+      }
+    ],
+    "category": "Grid",
+    "examples": {
+      "board": "board"
+    }
+  }
+]
diff --git a/src/components/board/index.js b/src/components/board/index.js
@@ -0,0 +1,3 @@
+import BoardComponent from './Board.js'
+
+export default BoardComponent
diff --git a/src/components/chart/Chart.js b/src/components/chart/Chart.js
@@ -1,5 +1,8 @@
 import Component from '../base_component.js'
 import { required } from '../../validators'
+import './Chart.scss'
+
+
 /**
  * Creates a visualization
  * @module components/chart
@@ -31,7 +34,8 @@ import { required } from '../../validators'
  */
 const ChartComponent = Component({
   'validators': [required('type')],
-  'init': (args, selection) => selection.append('div'),
+  'init': (args, selection) => selection
+    .append('div').attr('class', 'ds--chart'),
   'render': (args, selection, data, element) => {
     const {bb} = require('billboard.js')
     const configuration = {

diff --git a/src/components/chart/Chart.scss b/src/components/chart/Chart.scss
@@ -0,0 +1,5 @@
+@import "~sassline/assets/sass/sassline-base/_variables.scss";
+
+.ds--chart {
+  background: white;
+}
diff --git a/src/components/columns/Columns.scss b/src/components/columns/Columns.scss
@@ -4,48 +4,75 @@
 .ds--columns {
   display: flex;
   flex-wrap: wrap;
-  margin-left: -(map-get($gutterwidths, medium) / 2);
-  margin-right: -(map-get($gutterwidths, medium) / 2);
+  margin-left: -(map-get($gutterwidths, medium) / 2 - 1rem);
+  margin-right: -(map-get($gutterwidths, medium) / 2 - 1rem);
   box-sizing: border-box;
+  justify-content: space-between;
 
-  &[data-ds--columns="1"] >* {width: (100%/1);}
-  &[data-ds--columns="2"] >* {width: (100%/2);}
-  &[data-ds--columns="3"] >* {width: (100%/2);}
-  &[data-ds--columns="4"] >* {width: (100%/2);}
-  &[data-ds--columns="5"] >* {width: (100%/2);}
-  &[data-ds--columns="6"] >* {width: (100%/2);}
+  &[data-ds--columns="1"] >* {width: calc(100%/1 - ((1rem - 1rem) / 1));}
+  &[data-ds--columns="1"] >* {width: -webkit-calc(100%/1 - ((1rem - 1rem) / 1));}
+  &[data-ds--columns="2"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
+  &[data-ds--columns="2"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
+  &[data-ds--columns="3"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
+  &[data-ds--columns="3"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
+  &[data-ds--columns="4"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
+  &[data-ds--columns="4"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
+  &[data-ds--columns="5"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
+  &[data-ds--columns="5"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
+  &[data-ds--columns="6"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
+  &[data-ds--columns="6"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
 
   @include breakpoint(break-1) {
-    &[data-ds--columns="1"] >* {width: (100%/1);}
-    &[data-ds--columns="2"] >* {width: (100%/2);}
-    &[data-ds--columns="3"] >* {width: (100%/3);}
-    &[data-ds--columns="4"] >* {width: (100%/3);}
-    &[data-ds--columns="5"] >* {width: (100%/3);}
-    &[data-ds--columns="6"] >* {width: (100%/3);}
+    &[data-ds--columns="1"] >* {width: calc(100%/1 - ((1rem - 1rem) / 1));}
+    &[data-ds--columns="1"] >* {width: -webkit-calc(100%/1 - ((1rem - 1rem) / 1));}
+    &[data-ds--columns="2"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
+    &[data-ds--columns="2"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
+    &[data-ds--columns="3"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="3"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="4"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="4"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="5"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="5"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="6"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="6"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
   }
 
   @include breakpoint(break-2) {
-    &[data-ds--columns="1"] >* {width: (100%/1);}
-    &[data-ds--columns="2"] >* {width: (100%/2);}
-    &[data-ds--columns="3"] >* {width: (100%/3);}
-    &[data-ds--columns="4"] >* {width: (100%/4);}
-    &[data-ds--columns="5"] >* {width: (100%/5);}
-    &[data-ds--columns="6"] >* {width: (100%/5);}
+    &[data-ds--columns="1"] >* {width: calc(100%/1 - ((1rem - 1rem) / 1));}
+    &[data-ds--columns="1"] >* {width: -webkit-calc(100%/1 - ((1rem - 1rem) / 1));}
+    &[data-ds--columns="2"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
+    &[data-ds--columns="2"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
+    &[data-ds--columns="3"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="3"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="4"] >* {width: calc(100%/4 - ((4rem - 1rem) / 4));}
+    &[data-ds--columns="4"] >* {width: -webkit-calc(100%/4 - ((4rem - 1rem) / 4));}
+    &[data-ds--columns="5"] >* {width: calc(100%/5 - ((5rem - 1rem) / 5));}
+    &[data-ds--columns="5"] >* {width: -webkit-calc(100%/5 - ((5rem - 1rem) / 5));}
+    &[data-ds--columns="6"] >* {width: calc(100%/5 - ((5rem - 1rem) / 5));}
+    &[data-ds--columns="6"] >* {width: -webkit-calc(100%/5 - ((5rem - 1rem) / 5));}
   }
 
   @include breakpoint(break-3) {
-    &[data-ds--columns="1"] >* {width: (100%/1);}
-    &[data-ds--columns="2"] >* {width: (100%/2);}
-    &[data-ds--columns="3"] >* {width: (100%/3);}
-    &[data-ds--columns="4"] >* {width: (100%/4);}
-    &[data-ds--columns="5"] >* {width: (100%/5);}
-    &[data-ds--columns="6"] >* {width: (100%/6);}
+    &[data-ds--columns="1"] >* {width: calc(100%/1 - ((1rem - 1rem) / 1));}
+    &[data-ds--columns="1"] >* {width: -webkit-calc(100%/1 - ((1rem - 1rem) / 1));}
+    &[data-ds--columns="2"] >* {width: calc(100%/2 - ((2rem - 1rem) / 2));}
+    &[data-ds--columns="2"] >* {width: -webkit-calc(100%/2 - ((2rem - 1rem) / 2));}
+    &[data-ds--columns="3"] >* {width: calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="3"] >* {width: -webkit-calc(100%/3 - ((3rem - 1rem) / 3));}
+    &[data-ds--columns="4"] >* {width: calc(100%/4 - ((4rem - 1rem) / 4));}
+    &[data-ds--columns="4"] >* {width: -webkit-calc(100%/4 - ((4rem - 1rem) / 4));}
+    &[data-ds--columns="5"] >* {width: calc(100%/5 - ((5rem - 1rem) / 5));}
+    &[data-ds--columns="5"] >* {width: -webkit-calc(100%/5 - ((5rem - 1rem) / 5));}
+    &[data-ds--columns="6"] >* {width: calc(100%/6 - ((6rem - 1rem) / 6));}
+    &[data-ds--columns="6"] >* {width: -webkit-calc(100%/6 - ((6rem - 1rem) / 6));}
   }
 
   .ds--column {
     box-sizing: border-box;
-    padding: 0 (map-get($gutterwidths, medium) / 2) map-get($gutterwidths, medium);
+    padding: 0 (map-get($gutterwidths, medium) / 2) map-get($gutterwidths, medium - 1rem);
     overflow-x: hidden;
+    background: white;
+    margin-bottom: 1rem;
 
     h1, h2, h3, h4, h5, h6 {
       white-space: nowrap;

diff --git a/src/components/rows/Rows.js b/src/components/rows/Rows.js
@@ -1,5 +1,6 @@
 import ContainerComponent from '../container_base.js'
 import Wrapped from '../wrapped'
+import './Rows.scss'
 
 /**
  * Useful for grouping elements in a vertical layout. Similar to RootComponent,

diff --git a/src/components/rows/Rows.scss b/src/components/rows/Rows.scss
@@ -0,0 +1,3 @@
+.ds--row {
+    background: white;
+}
diff --git a/src/default_parser.js b/src/default_parser.js
@@ -4,12 +4,14 @@ import TextComponent from './components/text/Text.js'
 import ChartComponent from './components/chart/Chart.js'
 import ColumnsComponent from './components/columns/Columns.js'
 import RowsComponent from './components/rows/Rows.js'
+import BoardComponent from './components/board/Board.js'
 import DropdownComponent from './components/dropdown/Dropdown.js'
 
 const test_parser = parse((component) => ({
   'root': RootComponent,
   'columns': ColumnsComponent,
   'rows': RowsComponent,
+  'board': BoardComponent,
   'text': TextComponent,
   'chart': ChartComponent,
   'dropdown': DropdownComponent,

diff --git a/src/yaml-format/parser.js b/src/yaml-format/parser.js
@@ -15,6 +15,10 @@ const rules = [
     'component': 'rows',
     'data': value.map(parser)
   })],
+  [[/board/], (match, value) => ({
+    'component': 'board',
+    'data': value.map(parser)
+  })],
   [[/([1-9]+) columns/], (match, value) => ({
     'component': 'columns',
     'args': {'columns': match[1] * 1},