vap-visual - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

_components/Axis/index.d.ts

 export { XBandDrawer } from './XBandDrawer';
 export { XDateDrawer } from './XDateDrawer';
 export { XFixNumberDrawer } from './XFixNumberDrawer';
+export { YBandDrawer } from './YBandDrawer';
 export { YNumberDrawer } from './YNumberDrawer';
 export { YPercentDrawer } from './YPercentDrawer';

_components/Axis/index.js

@@ -9,2 +9,4 @@ "use strict";
 Object.defineProperty(exports, "XFixNumberDrawer", { enumerable: true, get: function () { return XFixNumberDrawer_1.XFixNumberDrawer; } });
+var YBandDrawer_1 = require("./YBandDrawer");
+Object.defineProperty(exports, "YBandDrawer", { enumerable: true, get: function () { return YBandDrawer_1.YBandDrawer; } });
 var YNumberDrawer_1 = require("./YNumberDrawer");
@@ -11,0 +13,0 @@ Object.defineProperty(exports, "YNumberDrawer", { enumerable: true, get: function () { return YNumberDrawer_1.YNumberDrawer; } });

_components/AxisUtil.d.ts

@@ -10,3 +10,4 @@ import { Axis } from '../interface';
     Y_NUMBER = "Y_NUMBER",
-    Y_FILL_PERCENT = "Y_FILL_PERCENT"
+    Y_FILL_PERCENT = "Y_FILL_PERCENT",
+    Y_BAND = "Y_BAND"
 }
@@ -13,0 +14,0 @@ interface AxisOptions {

_components/AxisUtil.js

@@ -33,2 +33,3 @@ "use strict";
     Y_TYPE["Y_FILL_PERCENT"] = "Y_FILL_PERCENT";
+    Y_TYPE["Y_BAND"] = "Y_BAND";
 })(Y_TYPE = exports.Y_TYPE || (exports.Y_TYPE = {}));
@@ -62,2 +63,6 @@ ;
     Y_FILL_PERCENT: { DEFAULT: { show: true, mode: 'common', width: 60, tickWidth: 0, tickNumber: 4 }, SUPPORT: ['common', 'coord', 'rotate'] },
+    /**
+     * 类目 X轴 Band 默认参数
+    */
+    Y_BAND: { DEFAULT: { show: true, mode: 'common', width: 16, tickWidth: 0, arrow: false }, SUPPORT: ['common', 'inside', 'rotate'] },
 };
@@ -120,9 +125,2 @@ ;
     // 默认 xDrawer yDrawer 参数构造
-    /**
-     * TODO
-     *
-     * XBandDrawer  data = item['data'];
-     *
-     *
-    */
     switch (option.xType) {
@@ -138,3 +136,3 @@ case X_TYPE.X_BAND:
         //     break;
-        case 'X_FIX_NUMBER':
+        case X_TYPE.X_FIX_NUMBER:
             new Axis_1.XFixNumberDrawer(visual, xAxis, yAxis);
@@ -153,15 +151,6 @@ break;
             break;
+        case Y_TYPE.Y_BAND:
+            new Axis_1.YBandDrawer(visual, xAxis, yAxis);
+            break;
     }
-    // switch (YTYPE) {
-    //     case 'Y_NUMBER':
-    //         yDrawer = new YNumberDrawer(container, xAxis, yAxis, layout, y.field, y.format);
-    //         break;
-    //     case 'Y_FILL_PERCENT':
-    //         // constructor(container: d3.Selection<any, any, any, any>, xAxis: Axis, yAxis: Axis, layout: Layout, labelField: string) {
-    //         yDrawer = new YPercentDrawer(container, xAxis, yAxis, layout, '__p1');
-    //         break;
-    //     default:
-    //         yDrawer = new YNumberDrawer(container, xAxis, yAxis, layout, y.field, y.format);
-    //         break;
-    // }
 };

_components/DefUtil.js

@@ -105,1 +105,10 @@ "use strict";
 };
+// <filter id="metaballs">
+// <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
+// <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 50 -10" result="contrast"></feColorMatrix>
+// <feBlend in="SourceGraphic" in2="contrast"></feBlend>
+// </filter>
+// 1 0 0 0 0
+// 0 1 0 0 0
+// 0 0 1 0 0
+// 0 0 0 50 -10

Distribution/HeatMap/index.d.ts

@@ -0,19 +1,17 @@
+import * as d3 from 'd3';
 import { Visual } from '../../Visual';
-import { PercentileOpts } from '../interface';
+import { HeatMapOpts } from '../interface';
 /**
  * 百分位图
- * Data类型参考
- * [
- *      { age:12, number:20 },
- *      { age:18, number:50 },
- *      { age:45, number:80 },
- *      { age:90, number:99 },
- * ]
  *
 */
-export declare class HeatMap extends Visual<PercentileOpts> {
+export declare class HeatMap extends Visual<HeatMapOpts> {
     init(): void;
     events(): void;
     sort(arr: any): any;
-    update(): void;
+    update(): d3.Selection<Element | Window | Document | SVGRectElement | d3.EnterElement, {
+        field: string;
+        value: any;
+        data: any;
+    }, Element | Window | Document | SVGGElement | d3.EnterElement, any>;
 }

Distribution/HeatMap/index.js

@@ -17,2 +17,3 @@ "use strict";
 exports.HeatMap = void 0;
+var d3 = require("d3");
 var _components_1 = require("../../_components");
@@ -23,9 +24,2 @@ var Visual_1 = require("../../Visual");
  * 百分位图
- * Data类型参考
- * [
- *      { age:12, number:20 },
- *      { age:18, number:50 },
- *      { age:45, number:80 },
- *      { age:90, number:99 },
- * ]
  *
@@ -39,4 +33,40 @@ */
     HeatMap.prototype.init = function () {
+        console.debug('-------------------- HeatMap : init --------------------');
+        var defs = this.state.SVG.append('defs');
+        defs.html("<filter id=\"metaballs\">\n            <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"1\" result=\"blur\"></feGaussianBlur>\n            <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"\n             0 0 0 0 0 \n             0 0 0 0 0 \n             0 0 1 0 0  \n             0 0 0 -120 -20\" result=\"contrast\"></feColorMatrix>\n            <feBlend in=\"SourceGraphic\" in2=\"contrast\"></feBlend>\n        </filter>");
+        this.ROOT.attr('class', "_heatmap");
+        _components_1.AxisUtil.CreateAxis(this, {
+            xType: _components_1.AxisUtil.X_TYPE.X_BAND,
+            yType: _components_1.AxisUtil.Y_TYPE.Y_BAND,
+        });
     };
     HeatMap.prototype.events = function () {
+        var _this = this;
+        // 提示
+        if (this.props.tip !== null) {
+            Event.on(EVENT_ITEM_HOVER + "." + this.id, function (state, d, i) {
+                var data = d.data, value = d.value;
+                if (typeof _this.props.tip === 'function') {
+                    _components_1.ToolTip.show(_this.props.tip(d, i));
+                    return;
+                }
+                _components_1.ToolTip.show("<div class=\"_tip\">\n                    <h2><span>" + _this.state.FormatLabel(data[_this.props.labelField], data) + "</span></h2>\n                    <p class=\"_item\"><span class=\"_label\">" + _this.props.valueLabel[i] + "  :  </span><span class=\"_value\">" + _this.state.FormatValue(value) + "</span></p>\n                </div>");
+            });
+        }
+        // 点击事件
+        if (this.props.onClick) {
+            Event.on(EVENT_ITEM_CLICK + "." + this.id, function (state, d, i) {
+                var data = d.data;
+                _this.props.onClick(data, i);
+            });
+        }
+        // porps 参数被改变
+        Event.on(EVENT_OPTION_CHANGED + "." + this.id, function (state, conf, mustUpdate) {
+            console.debug("-------------------- HeatMap : Event : setOption --------------------");
+            if (mustUpdate) {
+                console.warn("-------------------- HeatMap : Updata / setOption --------------------");
+                // this.ROOT.classed('_root_selected', this.state.SELECTED ? true : false);
+                _this.update();
+            }
+        });
     };
@@ -47,2 +77,25 @@ HeatMap.prototype.sort = function (arr) {
     HeatMap.prototype.update = function () {
+        var _a = this.state, DATA = _a.DATA, xAxis = _a.xAxis, yAxis = _a.yAxis, LAYOUT = _a.LAYOUT;
+        var valueField = this.props.valueField;
+        var total = d3.max(DATA.map(function (item) { return d3.max(valueField.map(function (field) { return item[field]; })); }));
+        var xUnit = xAxis.scale.bandwidth();
+        var yUnit = yAxis.scale.bandwidth();
+        var group = this.ROOT.selectAll('g._group')
+            .data(DATA)
+            .join("g")
+            .attr('class', '_group')
+            .attr('transform', function (d, i) { return "translate(" + (LAYOUT.x + xAxis.margin + xUnit * i) + "," + (LAYOUT.y + LAYOUT.h - yAxis.margin) + ")"; });
+        var rects = group.selectAll('rect')
+            .data(function (d) { return valueField.map(function (field) { return ({
+            field: field,
+            value: d[field] || 0,
+            data: d,
+        }); }); })
+            .join('rect')
+            .attr('x', 0)
+            .attr('y', function (d, i) { return -(i + 1) * yUnit; })
+            .attr('width', xUnit)
+            .attr('height', yUnit)
+            .attr('fill', function (d) { return d3.interpolateReds(d.value / total); });
+        return rects;
     };
@@ -49,0 +102,0 @@ return HeatMap;

Distribution/interface.d.ts

@@ -35,1 +35,41 @@ import { VisualOpts } from '../interface';
 }
+/**
+ * data 格式一
+ *    [
+ *        { name:"aaa", count1:1, count2:2, count3:3, count4:4, count5:5 },
+ *        { name:"bbb", count1:1, count2:2, count3:3, count4:4, count5:5 },
+ *        { name:"ccc", count1:1, count2:2, count3:3, count4:4, count5:5 },
+ *    ]
+ *
+ * data 格式二
+ *    [
+ *        { source:'aa', target: 'bb', count: 1 },
+ *        { source:'bb', target: 'aa', count: 2 },
+ *        { source:'aa', target: 'cc', count: 1 },
+ *    ]
+ *
+*/
+export interface HeatMapOpts extends VisualOpts {
+    /**
+     * 维度，需要传多个
+    */
+    valueField: string[];
+    /**
+     * 值的字段
+    */
+    valueLabel: string[];
+}
+export interface CrossHeatMapOpts extends VisualOpts {
+    /**
+     * 值的字段
+    */
+    targetField: string;
+    /**
+     * 维度，需要传多个
+    */
+    valueField: string;
+    /**
+     * 值的字段
+    */
+    valueLabel: string;
+}

index.d.ts

@@ -8,4 +8,6 @@ export { Bar } from './Bars/Bar';
 export { Percentile } from './Distribution/Percentile';
+export { HeatMap } from './Distribution/HeatMap';
+export { CrossHeatMap } from './Distribution/CrossHeatMap';
 export { DateTrend } from './Trend/DateTrend';
 export { Histogram } from './Trend/Histogram';
 export { Hours } from './Bars/Hours';

index.js

@@ -17,2 +17,6 @@ "use strict";
 Object.defineProperty(exports, "Percentile", { enumerable: true, get: function () { return Percentile_1.Percentile; } });
+var HeatMap_1 = require("./Distribution/HeatMap");
+Object.defineProperty(exports, "HeatMap", { enumerable: true, get: function () { return HeatMap_1.HeatMap; } });
+var CrossHeatMap_1 = require("./Distribution/CrossHeatMap");
+Object.defineProperty(exports, "CrossHeatMap", { enumerable: true, get: function () { return CrossHeatMap_1.CrossHeatMap; } });
 var DateTrend_1 = require("./Trend/DateTrend");
@@ -19,0 +23,0 @@ Object.defineProperty(exports, "DateTrend", { enumerable: true, get: function () { return DateTrend_1.DateTrend; } });

package.json

@@ -1,1 +0,1 @@
-{"name":"vap-visual","version":"0.3.2","description":"vap-visual - A Visual FrameWork base on  d3","main":"index.js","author":"Xiang da"}
+{"name":"vap-visual","version":"0.3.3","description":"vap-visual - A Visual FrameWork base on  d3","main":"index.js","author":"Xiang da"}

react/index.d.ts

@@ -9,3 +9,5 @@ export { Bar } from './Bar';
 export { DateTrend } from './DateTrend';
+export { HeatMap } from './HeatMap';
+export { CrossHeatMap } from './CrossHeatMap';
 export { Histogram } from './Histogram';
 export { Hours } from './Hours';

react/index.js

@@ -19,2 +19,6 @@ "use strict";
 Object.defineProperty(exports, "DateTrend", { enumerable: true, get: function () { return DateTrend_1.DateTrend; } });
+var HeatMap_1 = require("./HeatMap");
+Object.defineProperty(exports, "HeatMap", { enumerable: true, get: function () { return HeatMap_1.HeatMap; } });
+var CrossHeatMap_1 = require("./CrossHeatMap");
+Object.defineProperty(exports, "CrossHeatMap", { enumerable: true, get: function () { return CrossHeatMap_1.CrossHeatMap; } });
 var Histogram_1 = require("./Histogram");
@@ -21,0 +25,0 @@ Object.defineProperty(exports, "Histogram", { enumerable: true, get: function () { return Histogram_1.Histogram; } });

Trend/interface.d.ts

@@ -65,2 +65,31 @@ import { VisualOpts } from '../interface';
 }
+export interface DateGrowthOpts extends VisualOpts {
+    /**
+     * 开始日期,不传时，取最小的
+    */
+    start?: string;
+    /**
+     * 结束日期,说明，当结束日期不传时，默认以 设置为 start 的月底。
+    */
+    end?: string;
+    /**
+     * 频率
+     * day: 日期趋势 （默认）
+     * month: 月趋势
+    */
+    frequency?: 'day' | 'month';
+    /**
+     * 值的字段，必传，支持一个或多个
+    */
+    valueField: string;
+    /**
+     * 值的描述，必传，支持一个或多个
+    */
+    valueLabel: string;
+    /**
+     * 数据里面本身的格式（默认为YYYY-MM-DD）
+     * 说明：展示格式默认为 YYYY-MM-DD 可以通过 labelFormat 修改
+    */
+    dateFormat?: string;
+}
 export declare type HISTOGRAM_STACK_MODE = STACK_MODE | 'percent';
@@ -67,0 +96,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

562643

increased by8.23%

Number of package files

210

increased by5.53%

Lines of code

12968

increased by7.92%

No dependency changes