Merge pull request #31 from chartshq/feature/CDC-118-layout-breaking-in-certain-situations

Feature/cdc 118 layout breaking in certain situations

Author: adotg

dist/muze.css

@@ -120,7 +120,7 @@
         .dotted-line {
             stroke-dasharray: 2,4;
         }
-
+        
          /* .muze-tooltip-content-container {
             padding-left: 0px;
             padding-right: 0px;

dist/muze.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 };

dist/muze.js.map

@@ -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',

examples/index.html

@@ -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 };

examples/js/sample.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

packages/layout/src/grid-layout/renderer.js

@@ -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
 }