Merge branch 'release/v1.0.3'

chartshq · Oct 2, 2018 · ed92245 · ed92245
2 parents 52f284a + b7959ef
commit ed92245
Show file tree

Hide file tree

Showing 24 changed files with 787 additions and 997 deletions.
diff --git a/dist/muze.css b/dist/muze.css
diff --git a/dist/muze.js b/dist/muze.js
diff --git a/dist/muze.js.map b/dist/muze.js.map
diff --git a/examples/index.html b/examples/index.html
@@ -120,7 +120,7 @@
         .dotted-line {
             stroke-dasharray: 2,4;
         }
-
+        
          /* .muze-tooltip-content-container {
             padding-left: 0px;
             padding-right: 0px;

diff --git a/examples/js/sample.js b/examples/js/sample.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/layout/src/grid-layout/renderer.js b/packages/layout/src/grid-layout/renderer.js
@@ -17,7 +17,7 @@ function renderTable (mount, className, rowData) {
     const table = makeElement(mount, 'table', ['layout'], `${className}-table`);
     const body = makeElement(table, 'tbody', ['layout'], `${className}-body`);
     const rows = makeElement(body, 'tr', rowData, `${className}-tr`);
-    const cells = makeElement(rows, 'td', (d, i) => d.filter(e => e !== null).map(e =>
+    const cells = makeElement(rows, 'td', (d, i) => d.filter(e => e !== null && e.config().show).map(e =>
                                 ({ placeholder: e, rowIndex: i })), `${className}-td`, {}, key => key.placeholder.id);
 
     return { table, body, rows, cells };

diff --git a/packages/muze-legend/src/legend/defaults.js b/packages/muze-legend/src/legend/defaults.js
@@ -31,7 +31,8 @@ export const LEGEND_TITLE = {
 
 export const DEFAULT_CONFIG = {
     classPrefix: 'muze',
-
+    borderStyle: 'solid',
+    borderColor: 'rgba(0,0,0,0)',
     formatter: {
         bounds: {
             lower: 'less than',

diff --git a/packages/muze-legend/src/legend/legend-helper.js b/packages/muze-legend/src/legend/legend-helper.js
@@ -50,19 +50,22 @@ export const getInterpolatedData = (domain, steps) => {
  * @param {*} measurement
  * @param {*} classPrefix
  */
-export const titleCreator = (container, title, measurement, config) =>
-                makeElement(container, 'div', [1], `${config.classPrefix}-legend-title`)
-                                .style(WIDTH, '100%')
-                                .style(HEIGHT, `${measurement.height}px`)
-                                .style('padding-left', `${measurement.padding}px`)
-                                .style('padding-right', `${measurement.padding}px`)
-                                .style('border-bottom-width', `${measurement.border}px`)
-                                .style('text-align', title.orientation instanceof Function ?
-                                        title.orientation(config.position) : title.orientation)
-                                .text(title.text)
-                                .node();
+export const titleCreator = (container, title, measurement, config) => {
+    const titleContainer = makeElement(container, 'table', [1], `${config.classPrefix}-legend-title`)
+            .style(WIDTH, `${measurement.width}px`)
+            .style(HEIGHT, `${measurement.height}px`)
+            .style('border-bottom', `${measurement.border}px ${config.borderStyle} ${config.borderColor}`)
+            .style('text-align', title.orientation instanceof Function ?
+                    title.orientation(config.position) : title.orientation);
+    return makeElement(titleContainer, 'td', [1], `${config.classPrefix}-legend-title-text`)
+                    .style(WIDTH, `${measurement.width}px`)
+                    .style(HEIGHT, '100%')
+                    .style('padding', `${measurement.padding}px`)
+                    .text(title.text)
+                    .node();
+};
 
-/**
+                                /**
  *
  *
  * @param {*} data
@@ -180,7 +183,6 @@ export const computeItemSpaces = (config, measures, data) => {
         itemSpaces.push(itemSpace);
         iconSpaces.push(iconSpace);
     });
-
     itemSpaces.forEach((itemSpace, i) => {
         if (align === 'horizontal') {
             itemSpace.height = totalHeight;
@@ -194,7 +196,7 @@ export const computeItemSpaces = (config, measures, data) => {
                 itemSpaces[i].width = maxIconWidth;
                 labelSpaces[i].width = maxIconWidth;
             }
-            totalWidth = Math.max(totalWidth + itemSpaces[i].width, titleWidth);
+            totalWidth = Math.max(totalWidth + itemSpaces[i].width);
         } else {
             itemSpace.width = Math.max(totalWidth, maxWidth);
             if (textOrientation === TOP || textOrientation === BOTTOM) {
@@ -205,10 +207,11 @@ export const computeItemSpaces = (config, measures, data) => {
                 iconSpaces[i].width = maxIconWidth;
                 itemSpaces[i].width = labelSpaces[i].width + maxIconWidth;
                 labelSpaces[i].width = maxItemSpaces.width - maxIconWidth;
-                totalWidth = Math.max(totalWidth, itemSpace.width, titleWidth) + effPadding;
+                totalWidth = Math.max(totalWidth, itemSpace.width) + effPadding;
             }
         }
     });
+    totalWidth = Math.max(totalWidth, titleWidth);
     totalHeight += titleHeight + effPadding;
 
     return { totalHeight, totalWidth, itemSpaces, iconSpaces, maxItemSpaces, maxIconWidth };

diff --git a/packages/muze-legend/src/legend/simple-legend.js b/packages/muze-legend/src/legend/simple-legend.js
@@ -186,8 +186,8 @@ export default class SimpleLegend {
         this.data(this.dataFromScale(this.scale()));
         // Get space occupied by title
         const titleSpace = this.getTitleSpace();
-        const titleHeight = titleSpace.height > 0 ? titleSpace.height * 1.25 : 0;
-        const titleWidth = titleSpace.width;
+        const titleHeight = titleSpace.height > 0 ? titleSpace.height + effPadding : 0;
+        const titleWidth = titleSpace.width + effPadding;
 
         // Get space occupied by labels
         const labelSpaces = this.getLabelSpaces(effPadding, align);
@@ -233,11 +233,15 @@ export default class SimpleLegend {
      * @memberof Legend
      */
     renderTitle (container) {
-        const { titleSpaces, border, padding } = this.measurement();
+        const { titleSpaces, border, padding, width } = this.measurement();
+        const { borderStyle, borderColor } = this.config();
         return titleCreator(container, this.title(), {
             height: titleSpaces.height,
+            width,
             border,
-            padding
+            padding,
+            borderStyle,
+            borderColor
         }, this.config());
     }
 
@@ -251,7 +255,9 @@ export default class SimpleLegend {
     render () {
         const firebolt = this.firebolt();
         const {
-            classPrefix
+            classPrefix,
+            borderStyle,
+            borderColor
         } = this.config();
         const {
            maxWidth,
@@ -269,7 +275,7 @@ export default class SimpleLegend {
         legendContainer.style('width', `${Math.min(maxWidth, width) - margin * 2}px`)
                         .style('height', `${Math.min(maxHeight, height) - margin * 2}px`)
                         .style('margin', `${margin}px`)
-                        .style('border-width', `${border}px`);
+                        .style('border', `${border}px ${borderStyle} ${borderColor}`);
         this.legendContainer(legendContainer.node());
 
         // create title

diff --git a/packages/muze-legend/src/styles.scss b/packages/muze-legend/src/styles.scss
@@ -8,13 +8,11 @@ $prefix: muze-;
     height: 100px;
     float: none !important;
     display: inline-block;
-    border: solid rgba(0, 0, 0, 0);
 
 }
 
 .#{$prefix}legend-title {
-    border-bottom: solid rgba(0,0,0,0);
-    display: block;
+    display: table;
     align-items: center;
     float: left;
     text-align: left;
@@ -23,6 +21,11 @@ $prefix: muze-;
     fill:#5F5F5F;
     font-weight:600;
 }
+
+.#{$prefix}legend-title-text {
+    display: table-cell;
+    vertical-align: middle;
+}
 .#{$prefix}legend-overflow {
     text-align: center
 }

diff --git a/packages/muze/npm/dist/muze.css b/packages/muze/npm/dist/muze.css
diff --git a/packages/muze/npm/dist/muze.js b/packages/muze/npm/dist/muze.js
diff --git a/packages/muze/npm/dist/muze.js.map b/packages/muze/npm/dist/muze.js.map
diff --git a/packages/muze/npm/package.json b/packages/muze/npm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "muze",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Composable visualisation library for web with a data-first approach",
   "homepage": "https://www.charts.com/muze",
   "license": "MIT",

diff --git a/packages/muze/package.json b/packages/muze/package.json
@@ -1,7 +1,7 @@
 {
   "name": "muze",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Composable visualisation library for web with a data-first approach",
   "homepage": "https://www.charts.com/muze",
   "license": "MIT",

diff --git a/packages/muze/src/canvas/layout-maker.js b/packages/muze/src/canvas/layout-maker.js
@@ -1,122 +1,36 @@
-import { cellRegistry } from '@chartshq/visual-cell';
 import { mergeRecursive } from 'muze-utils';
 import { arrangeComponents } from './component-resolver';
 import { createHeaders } from './title-maker';
 import { createLegend, getLegendSpace } from './legend-maker';
 import { TOP, BOTTOM, LEFT, RIGHT } from '../constants';
 
-const BlankCell = cellRegistry().get().BlankCell;
-
-const createBlankCell = () => new BlankCell();
-
-/**
- *
- *
- * @param {*} canvases
- * @returns
- */
-const getMaxRows = (rows) => {
-    const maxRows = [0, 0];
-
-    maxRows[0] = Math.max(maxRows[0], rows[0].length ? rows[0][0].length : 0);
-    maxRows[1] = Math.max(maxRows[1], rows[1].length ? rows[1][0].length : 0);
-    return maxRows;
-};
-
-/**
- *
- *
- * @param {*} arr
- * @param {*} value
- */
-const fillArray = (arr, value) => arr.map(() => value());
-
-/**
- *
- *
- * @param {*} rows
- * @param {*} columns
- * @param {*} blankCellCreator
- * @returns
- */
-const blankMatrixCreator = (rows, columns, blankCellCreator) => {
-    const arr = [];
-
-    for (let i = 0; i < rows; i++) {
-        let array = new Array(columns).fill([]);
-        array = fillArray(array, blankCellCreator);
-        arr.push(array);
-    }
-    return arr;
-};
-
-/**
- *
- *
- * @param {*} rowMatrices
- * @param {*} maxRows
- */
-const blankCellCreator = (rowMatrices, maxRows) => rowMatrices.map((rowMatrix, rowMatrixIndex) => {
-    if (rowMatrix.length === 0 && maxRows[rowMatrixIndex] > 0) {
-        const numberOfRows = Math.max(rowMatrices[0].length, rowMatrices[1].length);
-        return blankMatrixCreator(numberOfRows, maxRows[rowMatrixIndex], createBlankCell);
-    }
-    if (rowMatrix.length > 0) {
-        if (rowMatrix[0] && rowMatrix[0].length <= maxRows[rowMatrixIndex]) {
-            return rowMatrix.map((row) => {
-                let arr = new Array(maxRows[rowMatrixIndex] - rowMatrix[0].length).fill(1);
-                arr = fillArray(arr, createBlankCell);
-                return [...arr, ...row];
-            });
-        }
-        return blankMatrixCreator(rowMatrix.length, maxRows[rowMatrixIndex], createBlankCell);
-    }
-    return rowMatrix;
-});
-
 /**
  *
  *
  * @param {*} context
  * @returns
  */
 export const prepareLayout = (layout, components, config, measurement) => {
-    let topL;
-    let topR;
-    let bottomL;
-    let bottomR;
     const {
         rows,
         columns,
         values,
         cornerMatrices
     } = components;
-    const {
-        showHeaders
-    } = config;
-    const maxRows = getMaxRows(rows);
+
     const {
         topLeft,
         topRight,
         bottomLeft,
         bottomRight
     } = cornerMatrices;
 
-    if (!showHeaders) {
-        const colLengths = [columns[0].length, columns[1].length];
-        // Create blank cells for corener matrices
-        [topL, topR] = blankCellCreator([new Array(colLengths[0]), new Array(colLengths[0])], maxRows);
-        [bottomL, bottomR] = blankCellCreator([new Array(colLengths[1]), new Array(colLengths[1])], maxRows);
-    } else {
-        [topL, topR, bottomL, bottomR] = [topLeft, topRight, bottomLeft, bottomRight];
-    }
-
     layout.measurement(measurement)
                     .config(config)
                     .matrices({
-                        top: [topL, columns[0], topR],
+                        top: [topLeft, columns[0], topRight],
                         center: [rows[0], values, rows[1]],
-                        bottom: [bottomL, columns[1], bottomR]
+                        bottom: [bottomLeft, columns[1], bottomRight]
                     })
                     .triggerReflow();
 };

diff --git a/packages/muze/src/defaults.js b/packages/muze/src/defaults.js
@@ -7,27 +7,27 @@ export const DEFAULT_CONFIG = {
         position: 'right',
         color: {
             show: true,
-            padding: 2,
-            margin: 2,
+            padding: 1,
+            margin: 3,
             border: 1,
-            height: 30,
-            width: 30
+            height: 20,
+            width: 20
         },
         shape: {
             show: true,
-            padding: 2,
-            margin: 2,
+            padding: 1,
+            margin: 3,
             border: 1,
-            height: 30,
-            width: 30
+            height: 20,
+            width: 20
         },
         size: {
             show: true,
-            padding: 2,
-            margin: 2,
+            padding: 1,
+            margin: 3,
             border: 1,
-            height: 30,
-            width: 30
+            height: 20,
+            width: 20
         }
     },
     showHeaders: false,

diff --git a/packages/muze/src/muze.scss b/packages/muze/src/muze.scss
@@ -7,7 +7,7 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     line-height: 1.42857143;
     color: #333;
-    background-color: #fff;
+    background-color: transparent;
     margin: 0;
 
     * {

diff --git a/packages/visual-group/src/group-helper/cell-creator.js b/packages/visual-group/src/group-helper/cell-creator.js
@@ -123,13 +123,14 @@ const createAxisCells = (selection, axes, axisIndex, cells) =>
     }, '')).map((axis) => {
         if (axis && axis[axisIndex]) {
             const axisInst = axis[axisIndex];
-            const { orientation } = axisInst.config();
+            const { orientation, show } = axisInst.config();
 
             return new cells.AxisCell().source(axisInst).config({
-                isOffset: orientation === AxisOrientation.LEFT || orientation === AxisOrientation.TOP
+                isOffset: orientation === AxisOrientation.LEFT || orientation === AxisOrientation.TOP,
+                show
             });
         }
-        return new cells.BlankCell();
+        return new cells.BlankCell().config({ show: false });
     });
 
 /**

diff --git a/packages/visual-group/src/group-helper/group-utils.js b/packages/visual-group/src/group-helper/group-utils.js
@@ -132,8 +132,9 @@ export const getHeaderText = (headers, index, rowLength) => {
  * @return
  */
 export const headerCreator = (fields, fieldHeaders, TextCell, labelManager) => {
-    const headers = fields.length > 0 ? fields[0].map((label, i) => new TextCell({ type: HEADER }, { labelManager })
-                    .source(getHeaderText(fieldHeaders, i, fields[0].length))) : [];
+    const headers = fields.length > 0 ? fields[0].map((cell, i) => new TextCell({ type: HEADER }, { labelManager })
+                    .source(getHeaderText(fieldHeaders, i, fields[0].length))
+                    .config({ show: cell.config().show })) : [];
     return headers;
 };