picasso.js - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

CHANGELOG.md

@@ -6,2 +6,20 @@ # Change Log
 
+<a name="0.15.0"></a>
+# [0.15.0](https://github.com/qlik-oss/picasso.js/compare/v0.14.0...v0.15.0) (2018-10-09)
+
+
+### Bug Fixes
+
+* **box:** add logic for minWidthPx ([#225](https://github.com/qlik-oss/picasso.js/issues/225)) ([567941e](https://github.com/qlik-oss/picasso.js/commit/567941e))
+
+
+### Features
+
+* **line:** add layer sort option ([#228](https://github.com/qlik-oss/picasso.js/issues/228)) ([b7d7e79](https://github.com/qlik-oss/picasso.js/commit/b7d7e79)), closes [#220](https://github.com/qlik-oss/picasso.js/issues/220)
+* **range-brush:** add keys to dom elements ([#226](https://github.com/qlik-oss/picasso.js/issues/226)) ([f152ef6](https://github.com/qlik-oss/picasso.js/commit/f152ef6))
+
+
+
+
+
 <a name="0.14.0"></a>
@@ -8,0 +26,0 @@ # [0.14.0](https://github.com/qlik-oss/picasso.js/compare/v0.13.3...v0.14.0) (2018-10-01)

package.json

 {
   "name": "picasso.js",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "A charting library streamlined for building visualizations for the Qlik Sense Analytics platform.",
@@ -51,5 +51,5 @@ "license": "MIT",
     "preact": "^8.3.1",
-    "test-utils": "^0.14.0"
+    "test-utils": "^0.15.0"
   },
-  "gitHead": "870210812cd0c5a8947fd3c98f7dca32022c55a8"
+  "gitHead": "6aa941299ac55be39194bcf107979a7df60cd0ab"
 }

src/about.js

@@ -1,1 +0,1 @@
-export default { version: '0.14.0' };
+export default { version: '0.15.0' };

src/core/chart-components/box/__tests__/box-shapes.spec.js

@@ -1,2 +0,7 @@
-import { box, verticalLine, horizontalLine } from '../box-shapes';
+import {
+  box,
+  verticalLine,
+  horizontalLine,
+  getBoxWidth
+} from '../box-shapes';
 
@@ -234,2 +239,37 @@ describe('box shapes', () => {
   });
+
+  describe('getBoxWidth', () => {
+    let item;
+    let avaialbleWidth;
+    let bandwidth;
+
+    beforeEach(() => {
+      avaialbleWidth = 100;
+      bandwidth = 0.1;
+      item = {
+        box: {
+          width: 0.5,
+          maxWidthPx: NaN,
+          minWidthPx: NaN
+        }
+      };
+    });
+
+    it('width is between min and max pixel width', () => {
+      const w = getBoxWidth(bandwidth, item, avaialbleWidth);
+      expect(w).to.equal(0.05);
+    });
+
+    it('width is less than min width', () => {
+      item.box.minWidthPx = 0.1 * avaialbleWidth;
+      const w = getBoxWidth(bandwidth, item, avaialbleWidth);
+      expect(w).to.equal(0.1);
+    });
+
+    it('width is larger than max width', () => {
+      item.box.maxWidthPx = 0.01 * avaialbleWidth;
+      const w = getBoxWidth(bandwidth, item, avaialbleWidth);
+      expect(w).to.equal(0.01);
+    });
+  });
 });

src/core/chart-components/box/box-shapes.js

@@ -111,2 +111,7 @@ import extend from 'extend';
 
+export function getBoxWidth(bandwidth, item, maxMajorWidth) {
+  const boxWidth = Math.min(bandwidth * item.box.width, isNaN(item.box.maxWidthPx) ? maxMajorWidth : item.box.maxWidthPx / maxMajorWidth);
+  return isNaN(item.box.minWidthPx) ? boxWidth : Math.max(item.box.minWidthPx / maxMajorWidth, boxWidth);
+}
+
 export function buildShapes({
@@ -162,3 +167,3 @@ width,
     const maxMajorWidth = flipXY ? height : width;
-    const boxWidth = Math.min(bandwidth * item.box.width, isNaN(item.box.maxWidthPx) ? maxMajorWidth : item.box.maxWidthPx / maxMajorWidth);
+    const boxWidth = getBoxWidth(bandwidth, item, maxMajorWidth);
     const boxPadding = (bandwidth - boxWidth) / 2;
@@ -165,0 +170,0 @@ const boxCenter = boxPadding + item.major + (boxWidth / 2);

src/core/chart-components/line/__tests__/line.spec.js

@@ -321,2 +321,41 @@ import componentFactoryFixture from '../../../../../test/helpers/component-factory-fixture';
   });
+
+  describe('layer order', () => {
+    let config;
+    beforeEach(() => {
+      config = {
+        data: [2.1, 2.2, 2.3, 1.1, 1.2, 1.3, 3.1, 3.2, 3.3],
+        settings: {
+          coordinates: {
+            major(d, i) { return i; },
+            minor(d) { return d.datum.value; },
+            layerId(d) { return 10 - Math.round(d.datum.value); }
+          },
+          layers: {
+            line: {
+              stroke: d => ['red', 'green', 'blue'][Math.round(d.datum.value) - 1]
+            }
+          }
+        }
+      };
+
+      componentFixture.mocks().theme.style.returns({});
+    });
+
+    it('should be sorted by median by default', () => {
+      componentFixture.simulateCreate(component, config);
+      rendered = componentFixture.simulateRender(opts);
+      const order = rendered.map(layer => layer.stroke);
+      expect(order).to.eql(['red', 'green', 'blue']);
+    });
+
+    it('should be sorted by custom sorting function', () => {
+      config.settings.layers.sort = (a, b) => b.data[0].value - a.data[0].value;
+
+      componentFixture.simulateCreate(component, config);
+      rendered = componentFixture.simulateRender(opts);
+      const order = rendered.map(layer => layer.stroke);
+      expect(order).to.eql(['blue', 'green', 'red']);
+    });
+  });
 });

src/core/chart-components/line/index.js

@@ -11,5 +11,6 @@ import component from './line';
  */
+const type = 'line';
 
 export default function line(picasso) {
-  picasso.component('line', component);
+  picasso.component(type, component);
 }

src/core/chart-components/line/line.js

@@ -30,2 +30,12 @@ import extend from 'extend';
 /**
+ * @callback component--line~layerSort
+ * @param {object} a
+ * @param {string} a.id
+ * @param {Array<datum-extract>} a.data
+ * @param {object} b
+ * @param {string} b.id
+ * @param {Array<datum-extract>} b.data
+ */
+
+/**
  * @typedef {object}
@@ -62,2 +72,5 @@ * @alias component--line-settings
     /**
+     * @type {component--line~layerSort=} */
+    sort: undefined,
+    /**
      * @typedef {object} */
@@ -225,3 +238,4 @@ line: {
     defaults: {
-      curve: SETTINGS.layers.curve, show: SETTINGS.layers.show
+      curve: SETTINGS.layers.curve,
+      show: SETTINGS.layers.show
     },
@@ -271,2 +285,7 @@ settings: {
 
+    // layerObj.points = [];
+    layerObj.datum = layerObj.data;
+    layerObj.data = [];
+    layerObj.id = layer.id;
+
     const values = [];
@@ -289,2 +308,3 @@ const points = [];
       points.push(point);
+      layerObj.data.push(point.data);
     }
@@ -334,3 +354,12 @@
 
-    visibleLayers.sort((a, b) => a.median - b.median);
+    if (this.stngs.layers && this.stngs.layers.sort) {
+      const sortable = visibleLayers.map(v => ({
+        id: v.layerObj.id,
+        data: v.layerObj.data
+      }));
+      sortable.sort(this.stngs.layers.sort).map(s => s.id);
+      visibleLayers.sort((a, b) => sortable.indexOf(b.layerObj.id) - sortable.indexOf(a.layerObj.id));
+    } else {
+      visibleLayers.sort((a, b) => a.median - b.median);
+    }
 
@@ -337,0 +366,0 @@ // generate visuals

src/core/math/narrow-phase-collision.js

@@ -37,2 +37,3 @@ /* eslint no-use-before-define: ["error", { "functions": false }] */
    * Circle muse have a radius greater then 0.
+   * @private
    * @param {object} circle
@@ -65,2 +66,3 @@ * @param {number} circle.cx - center x-coordinate
    * Rectangle must have a width and height greather then 0.
+   * @private
    * @param {object} circle
@@ -104,2 +106,3 @@ * @param {number} circle.cx - center x-coordinate
    * Line must have a length greater then 0.
+   * @private
    * @param {object} circle
@@ -136,2 +139,3 @@ * @param {number} circle.cx - center x-coordinate
    * Both circles muse have a radius greater then 0.
+   * @private
    * @param {object} circle
@@ -164,2 +168,3 @@ * @param {number} circle.cx - center x-coordinate
    * Polygon must contain at least 2 vertices
+   * @private
    * @param {object} circle
@@ -207,2 +212,3 @@ * @param {number} circle.cx - center x-coordinate
    * Polygon must contain at least 2 vertices
+   * @private
    * @param {object} polygon
@@ -246,2 +252,3 @@ * @param {Array} polygon.vertices - Array of vertices
    * Line must have length greater then 0.
+   * @private
    * @param {object} polygon
@@ -287,2 +294,3 @@ * @param {Array} polygon.vertices - Array of vertices
    * Rectangle must width and height greater then 0.
+   * @private
    * @param {object} polygon
@@ -328,2 +336,3 @@ * @param {Array} polygon.vertices - Array of vertices
    * Both rectangles must have a width and height greather then 0.
+   * @private
    * @param {object} rect
@@ -355,2 +364,3 @@ * @param {number} rect.x - x-coordinate
    * Rectangle must have a width and height greather then 0.
+   * @private
    * @param {object} rect
@@ -379,2 +389,3 @@ * @param {number} rect.x - x-coordinate
    * Line must have length greater then 0.
+   * @private
    * @param {object} rect
@@ -415,2 +426,3 @@ * @param {number} rect.x - x-coordinate
    * Both lines must have length greater then 0.
+   * @private
    * @param {object} line
@@ -481,2 +493,3 @@ * @param {number} line.x1 - x-coordinate
    * Line must have length greater then 0.
+   * @private
    * @param {object} line
@@ -483,0 +496,0 @@ * @param {number} line.x1 - x-coordinate

src/web/components/brush-range/__tests__/brush-area-dir.spec.js

@@ -93,2 +93,3 @@ import elementMock from 'test-utils/mocks/element-mock';
             'data-value': 0,
+            'data-key': 'brush-area-dir-edge-0',
             style: {
@@ -136,2 +137,3 @@ cursor: 'ew-resize',
             'data-value': 100,
+            'data-key': 'brush-area-dir-edge-0',
             style: {
@@ -183,2 +185,3 @@ cursor: 'ew-resize',
               'data-idx': 0,
+              'data-key': 'brush-area-dir-bubble-0',
               style: {
@@ -228,2 +231,3 @@ position: 'relative',
               'data-idx': 0,
+              'data-key': 'brush-area-dir-bubble-0',
               style: {
@@ -281,2 +285,3 @@ position: 'relative',
             'data-value': 0,
+            'data-key': 'brush-area-dir-edge-0',
             style: {
@@ -324,2 +329,3 @@ cursor: 'ns-resize',
             'data-value': 150,
+            'data-key': 'brush-area-dir-edge-0',
             style: {
@@ -371,2 +377,3 @@ cursor: 'ns-resize',
               'data-idx': 0,
+              'data-key': 'brush-area-dir-bubble-0',
               style: {
@@ -416,2 +423,3 @@ position: 'relative',
               'data-idx': 0,
+              'data-key': 'brush-area-dir-bubble-0',
               style: {
@@ -418,0 +426,0 @@ position: 'relative',

src/web/components/brush-range/__tests__/brush-range.spec.js

@@ -154,2 +154,3 @@ import elementMock from 'test-utils/mocks/element-mock';
             'data-value': 0,
+            'data-key': 'brush-range-edge--1',
             style: rootEdgeStyle
@@ -186,2 +187,3 @@ },
             'data-value': 1,
+            'data-key': 'brush-range-edge--1',
             style: rootEdgeStyle
@@ -212,2 +214,3 @@ },
               'data-idx': -1,
+              'data-key': 'brush-range-bubble--1',
               style: bubbleStyle
@@ -235,2 +238,3 @@ },
               'data-idx': -1,
+              'data-key': 'brush-range-bubble--1',
               style: bubbleStyle
@@ -282,2 +286,3 @@ },
             'data-value': 0,
+            'data-key': 'brush-range-edge--1',
             style: rootEdgeStyle
@@ -314,2 +319,3 @@ },
             'data-value': 1,
+            'data-key': 'brush-range-edge--1',
             style: rootEdgeStyle
@@ -340,2 +346,3 @@ },
               'data-idx': -1,
+              'data-key': 'brush-range-bubble--1',
               style: bubbleStyle
@@ -363,2 +370,3 @@ },
               'data-idx': -1,
+              'data-key': 'brush-range-bubble--1',
               style: bubbleStyle
@@ -403,2 +411,3 @@ },
             'data-value': 0,
+            'data-key': 'brush-range-edge--1',
             style: rootEdgeStyle
@@ -438,2 +447,3 @@ },
             'data-value': 1,
+            'data-key': 'brush-range-edge--1',
             style: rootEdgeStyle
@@ -467,2 +477,3 @@ },
               'data-idx': -1,
+              'data-key': 'brush-range-bubble--1',
               style: bubbleStyle
@@ -492,2 +503,3 @@ },
               'data-idx': -1,
+              'data-key': 'brush-range-bubble--1',
               style: bubbleStyle
@@ -494,0 +506,0 @@ },

src/web/components/brush-range/brush-area-dir.js

@@ -177,3 +177,5 @@ import {
     };
-    this.state = {};
+    this.state = {
+      key: this.settings.key || 'brush-area-dir'
+    };
   },
@@ -180,0 +182,0 @@ beforeRender(opts) {

src/web/components/brush-range/brush-range-node-builder.js

@@ -9,3 +9,3 @@ import extend from 'extend';
 function buildLine({
-  h, isVertical, value, pos, align, borderHit, state
+  h, isVertical, value, pos, align, borderHit, state, idx
 }) {
@@ -44,2 +44,3 @@ const isAlignStart = align !== 'end';
     'data-value': value,
+    'data-key': [state.key, 'edge', idx].join('-'),
     style: {
@@ -101,2 +102,3 @@ cursor: isVertical ? 'ns-resize' : 'ew-resize',
     h('div', {
+      'data-key': [state.key, 'bubble', idx].join('-'),
       'data-other-value': otherValue,
@@ -212,3 +214,4 @@ 'data-idx': idx,
     align: 'start',
-    state
+    state,
+    idx
   }));
@@ -223,3 +226,4 @@
     align: 'end',
-    state
+    state,
+    idx
   }));
@@ -226,0 +230,0 @@

src/web/components/brush-range/brush-range.js

@@ -219,3 +219,5 @@ import {
   created() {
-    this.state = {};
+    this.state = {
+      key: this.settings.key || 'brush-range'
+    };
   },
@@ -222,0 +224,0 @@ beforeRender(opts) {

No alert changes

Improved metrics

Total package byte prevSize

5888306

increased by0.22%

Lines of code

78568

increased by0.26%

No dependency changes