@jetlinks-web/components 2.6.1 → 2.6.3

package/es/EditTable/components/Search/sort.js

@@ -42,7 +42,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onDesc": "setup-const"
 } */
 import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744096039592"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744102451215"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { class: "jetlinks-table-sort-content" };
 const _hoisted_2 = { class: "jetlinks-table-sort-title" };
 const _hoisted_3 = { class: "table-sort-body" };

package/es/FlameGraph/FlameGraph.js

@@ -0,0 +1,123 @@
+/* Analyzed bindings: {
+  "data": "props",
+  "showSearch": "props",
+  "showInvert": "props",
+  "fieldNames": "props",
+  "request": "props",
+  "flamegraph": "setup-maybe-ref",
+  "d3": "setup-const",
+  "onMounted": "setup-const",
+  "watch": "setup-const",
+  "ref": "setup-const",
+  "computed": "setup-const",
+  "props": "setup-reactive-const",
+  "inverted": "setup-ref",
+  "chart": "setup-maybe-ref",
+  "search": "setup-const",
+  "formatData": "setup-ref",
+  "invert": "setup-const"
+} */
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "j-flame-graph" };
+const _hoisted_2 = /*#__PURE__*/ _createElementVNode("div", { id: "j-flame-graph" }, null, -1 /* HOISTED */);
+import { flamegraph } from 'd3-flame-graph';
+import * as d3 from 'd3';
+import { onMounted, watch, ref, computed } from 'vue';
+const __sfc_main__ = Object.assign({
+    name: 'JFlameGraph',
+}, {
+    props: {
+        data: {
+            type: Object,
+        },
+        showSearch: {
+            type: Boolean,
+            default: true
+        },
+        showInvert: {
+            type: Boolean,
+            default: true
+        },
+        fieldNames: {
+            type: Object,
+            default: () => ({
+                name: 'className',
+                value: 'samples',
+                children: 'children'
+            })
+        },
+        request: {
+            type: Function,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        const inverted = ref(false);
+        const chart = flamegraph()
+            .setColorMapper(function (d, originalColor) {
+            return d.highlight ? "#E600E6" : originalColor;
+        })
+            .setSearchHandler(function (searchResults, searchSum, totalValue) {
+            console.log(searchResults, searchSum, totalValue);
+        });
+        const search = (val) => {
+            chart.search(val);
+        };
+        const formatData = computed(() => {
+            return (val) => {
+                function formatDataFn(newVal) {
+                    newVal.name = newVal[props.fieldNames.name];
+                    newVal.value = newVal[props.fieldNames.value];
+                    if (newVal[props.fieldNames.children] || newVal.children) {
+                        newVal[props.fieldNames.children || 'children'].forEach(item => {
+                            formatDataFn(item);
+                        });
+                    }
+                }
+                formatDataFn(val);
+                return val;
+            };
+        });
+        const invert = () => {
+            inverted.value = !inverted.value;
+            chart.inverted(inverted.value);
+            d3.select('#flame-graph')
+                .datum(formatData.value(props.data))
+                .call(chart);
+        };
+        onMounted(() => {
+            watch(() => props.data, (newVal, oldVal) => {
+                if (newVal) {
+                    d3.select('#flame-graph')
+                        .datum(formatData.value(newVal))
+                        .call(chart);
+                }
+            }, { immediate: true });
+        });
+        return (_ctx, _cache) => {
+            const _component_a_input_search = _resolveComponent("a-input-search");
+            const _component_a_button = _resolveComponent("a-button");
+            const _component_a_space = _resolveComponent("a-space");
+            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                _createVNode(_component_a_space, null, {
+                    default: _withCtx(() => [
+                        _createVNode(_component_a_input_search, {
+                            class: "j-flame-graph-search",
+                            placeholder: "请输入",
+                            onSearch: search
+                        }),
+                        _createVNode(_component_a_button, { onClick: invert }, {
+                            default: _withCtx(() => [
+                                _createTextVNode("反转")
+                            ]),
+                            _: 1 /* STABLE */
+                        })
+                    ]),
+                    _: 1 /* STABLE */
+                }),
+                _hoisted_2
+            ]));
+        };
+    }
+});
+export default __sfc_main__;

package/es/FlameGraph/index.js

@@ -1,4 +1,4 @@
-import FlameGraph from './index.js';
+import FlameGraph from './FlameGraph.js';
 FlameGraph.install = function (app) {
   app.component(FlameGraph.name, FlameGraph);
 };

package/es/FlameGraph/style/index.css

@@ -0,0 +1,33 @@
+.j-flame-graph {
+  position: relative;
+  /* 修改矩形块样式 */
+}
+.j-flame-graph .d3-flame-graph {
+  margin-top: 40px;
+}
+.j-flame-graph .d3-flame-graph rect {
+  stroke: #fff;
+  stroke-width: 1px;
+}
+.j-flame-graph .d3-flame-graph text {
+  font-size: 18px;
+  fill: #333;
+}
+.j-flame-graph .frame {
+  cursor: pointer;
+}
+.j-flame-graph .frame:hover {
+  fill: #E600E6;
+}
+.j-flame-graph .frame:hover rect {
+  fill: #ffffe0;
+}
+.j-flame-graph .frame div {
+  color: #000;
+}
+.j-flame-graph .j-flame-graph-search {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 200px;
+}

package/es/FlameGraph/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/FlameGraph/style/index.less

@@ -0,0 +1,43 @@
+.j-flame-graph {
+  position: relative;
+
+  .d3-flame-graph {
+    margin-top: 40px;
+  }
+  /* 修改矩形块样式 */
+  .d3-flame-graph {
+    rect {
+      stroke: #fff;
+      stroke-width: 1px;
+    }
+
+    text {
+      font-size: 18px;
+      fill: #333;
+    }
+  }
+
+  .frame {
+    cursor: pointer;
+  }
+  .frame:hover {
+    fill: #E600E6;
+  }
+  .frame:hover rect {
+    fill: #ffffe0;
+  }
+  .frame div {
+    color: #000
+  }
+
+  .j-flame-graph-search {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 200px;
+  }
+}
+
+
+
+

package/es/FullPage/FullPage.js

@@ -9,7 +9,7 @@
 } */
 import { defineComponent as _defineComponent } from 'vue';
 import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744096037379"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744102448790"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { class: "full-page-warp-content" };
 import { ref, inject } from 'vue';
 import { useElementBounding } from '@vueuse/core';

package/es/Search/Advanced/SaveHistory.js

@@ -23,7 +23,7 @@
 } */
 import { defineComponent as _defineComponent } from 'vue';
 import { unref as _unref, createVNode as _createVNode, withCtx as _withCtx, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744096039413"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744102451099"), n = n(), _popScopeId(), n);
 const _hoisted_1 = {
     key: 0,
     style: { "width": "240px" }

package/es/Search/Item.js

@@ -80,7 +80,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
 } */
 import { defineComponent as _defineComponent } from 'vue';
 import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, createVNode as _createVNode, Fragment as _Fragment, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744096038621"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744102450324"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { class: "JSearch-item" };
 const _hoisted_2 = {
     key: 0,

package/es/style/index.css

@@ -5177,3 +5177,36 @@ span.ant-radio + * {
   color: #fff;
   background-color: #1890ff;
 }
+.j-flame-graph {
+  position: relative;
+  /* 修改矩形块样式 */
+}
+.j-flame-graph .d3-flame-graph {
+  margin-top: 40px;
+}
+.j-flame-graph .d3-flame-graph rect {
+  stroke: #fff;
+  stroke-width: 1px;
+}
+.j-flame-graph .d3-flame-graph text {
+  font-size: 18px;
+  fill: #333;
+}
+.j-flame-graph .frame {
+  cursor: pointer;
+}
+.j-flame-graph .frame:hover {
+  fill: #E600E6;
+}
+.j-flame-graph .frame:hover rect {
+  fill: #ffffe0;
+}
+.j-flame-graph .frame div {
+  color: #000;
+}
+.j-flame-graph .j-flame-graph-search {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 200px;
+}

package/es/style/index.less

@@ -11,3 +11,4 @@
 @import '../Scrollbar/style/index.less';
 @import '../Title/style/index.less';
 @import '../RadioButton/style/index.less';
+@import '../FlameGraph/style/index.less';

package/lib/EditTable/components/Search/sort.js

@@ -42,7 +42,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "onDesc": "setup-const"
 } */
 import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744096039577"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744102451232"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { class: "jetlinks-table-sort-content" };
 const _hoisted_2 = { class: "jetlinks-table-sort-title" };
 const _hoisted_3 = { class: "table-sort-body" };

package/lib/FlameGraph/FlameGraph.js

@@ -0,0 +1,123 @@
+/* Analyzed bindings: {
+  "data": "props",
+  "showSearch": "props",
+  "showInvert": "props",
+  "fieldNames": "props",
+  "request": "props",
+  "flamegraph": "setup-maybe-ref",
+  "d3": "setup-const",
+  "onMounted": "setup-const",
+  "watch": "setup-const",
+  "ref": "setup-const",
+  "computed": "setup-const",
+  "props": "setup-reactive-const",
+  "inverted": "setup-ref",
+  "chart": "setup-maybe-ref",
+  "search": "setup-const",
+  "formatData": "setup-ref",
+  "invert": "setup-const"
+} */
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, createTextVNode as _createTextVNode, withCtx as _withCtx, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = { class: "j-flame-graph" };
+const _hoisted_2 = /*#__PURE__*/ _createElementVNode("div", { id: "j-flame-graph" }, null, -1 /* HOISTED */);
+import { flamegraph } from 'd3-flame-graph';
+import * as d3 from 'd3';
+import { onMounted, watch, ref, computed } from 'vue';
+const __sfc_main__ = Object.assign({
+    name: 'JFlameGraph',
+}, {
+    props: {
+        data: {
+            type: Object,
+        },
+        showSearch: {
+            type: Boolean,
+            default: true
+        },
+        showInvert: {
+            type: Boolean,
+            default: true
+        },
+        fieldNames: {
+            type: Object,
+            default: () => ({
+                name: 'className',
+                value: 'samples',
+                children: 'children'
+            })
+        },
+        request: {
+            type: Function,
+        }
+    },
+    setup(__props) {
+        const props = __props;
+        const inverted = ref(false);
+        const chart = flamegraph()
+            .setColorMapper(function (d, originalColor) {
+            return d.highlight ? "#E600E6" : originalColor;
+        })
+            .setSearchHandler(function (searchResults, searchSum, totalValue) {
+            console.log(searchResults, searchSum, totalValue);
+        });
+        const search = (val) => {
+            chart.search(val);
+        };
+        const formatData = computed(() => {
+            return (val) => {
+                function formatDataFn(newVal) {
+                    newVal.name = newVal[props.fieldNames.name];
+                    newVal.value = newVal[props.fieldNames.value];
+                    if (newVal[props.fieldNames.children] || newVal.children) {
+                        newVal[props.fieldNames.children || 'children'].forEach(item => {
+                            formatDataFn(item);
+                        });
+                    }
+                }
+                formatDataFn(val);
+                return val;
+            };
+        });
+        const invert = () => {
+            inverted.value = !inverted.value;
+            chart.inverted(inverted.value);
+            d3.select('#flame-graph')
+                .datum(formatData.value(props.data))
+                .call(chart);
+        };
+        onMounted(() => {
+            watch(() => props.data, (newVal, oldVal) => {
+                if (newVal) {
+                    d3.select('#flame-graph')
+                        .datum(formatData.value(newVal))
+                        .call(chart);
+                }
+            }, { immediate: true });
+        });
+        return (_ctx, _cache) => {
+            const _component_a_input_search = _resolveComponent("a-input-search");
+            const _component_a_button = _resolveComponent("a-button");
+            const _component_a_space = _resolveComponent("a-space");
+            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+                _createVNode(_component_a_space, null, {
+                    default: _withCtx(() => [
+                        _createVNode(_component_a_input_search, {
+                            class: "j-flame-graph-search",
+                            placeholder: "请输入",
+                            onSearch: search
+                        }),
+                        _createVNode(_component_a_button, { onClick: invert }, {
+                            default: _withCtx(() => [
+                                _createTextVNode("反转")
+                            ]),
+                            _: 1 /* STABLE */
+                        })
+                    ]),
+                    _: 1 /* STABLE */
+                }),
+                _hoisted_2
+            ]));
+        };
+    }
+});
+export default __sfc_main__;

package/lib/FlameGraph/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _index = _interopRequireDefault(require("./index.js"));
-_index.default.install = function (app) {
-  app.component(_index.default.name, _index.default);
+var _FlameGraph = _interopRequireDefault(require("./FlameGraph.js"));
+_FlameGraph.default.install = function (app) {
+  app.component(_FlameGraph.default.name, _FlameGraph.default);
 };
-var _default = exports.default = _index.default;
+var _default = exports.default = _FlameGraph.default;

package/lib/FlameGraph/style/index.css

@@ -0,0 +1,33 @@
+.j-flame-graph {
+  position: relative;
+  /* 修改矩形块样式 */
+}
+.j-flame-graph .d3-flame-graph {
+  margin-top: 40px;
+}
+.j-flame-graph .d3-flame-graph rect {
+  stroke: #fff;
+  stroke-width: 1px;
+}
+.j-flame-graph .d3-flame-graph text {
+  font-size: 18px;
+  fill: #333;
+}
+.j-flame-graph .frame {
+  cursor: pointer;
+}
+.j-flame-graph .frame:hover {
+  fill: #E600E6;
+}
+.j-flame-graph .frame:hover rect {
+  fill: #ffffe0;
+}
+.j-flame-graph .frame div {
+  color: #000;
+}
+.j-flame-graph .j-flame-graph-search {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 200px;
+}

package/lib/FlameGraph/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.less");

package/lib/FlameGraph/style/index.less

@@ -0,0 +1,43 @@
+.j-flame-graph {
+  position: relative;
+
+  .d3-flame-graph {
+    margin-top: 40px;
+  }
+  /* 修改矩形块样式 */
+  .d3-flame-graph {
+    rect {
+      stroke: #fff;
+      stroke-width: 1px;
+    }
+
+    text {
+      font-size: 18px;
+      fill: #333;
+    }
+  }
+
+  .frame {
+    cursor: pointer;
+  }
+  .frame:hover {
+    fill: #E600E6;
+  }
+  .frame:hover rect {
+    fill: #ffffe0;
+  }
+  .frame div {
+    color: #000
+  }
+
+  .j-flame-graph-search {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 200px;
+  }
+}
+
+
+
+

package/lib/FullPage/FullPage.js

@@ -9,7 +9,7 @@
 } */
 import { defineComponent as _defineComponent } from 'vue';
 import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744096037386"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744102448784"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { class: "full-page-warp-content" };
 import { ref, inject } from 'vue';
 import { useElementBounding } from '@vueuse/core';

package/lib/Search/Advanced/SaveHistory.js

@@ -23,7 +23,7 @@
 } */
 import { defineComponent as _defineComponent } from 'vue';
 import { unref as _unref, createVNode as _createVNode, withCtx as _withCtx, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744096039397"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744102451112"), n = n(), _popScopeId(), n);
 const _hoisted_1 = {
     key: 0,
     style: { "width": "240px" }

package/lib/Search/Item.js

@@ -80,7 +80,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
 } */
 import { defineComponent as _defineComponent } from 'vue';
 import { unref as _unref, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, createVNode as _createVNode, Fragment as _Fragment, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = n => (_pushScopeId("data-v-1744096038571"), n = n(), _popScopeId(), n);
+const _withScopeId = n => (_pushScopeId("data-v-1744102450404"), n = n(), _popScopeId(), n);
 const _hoisted_1 = { class: "JSearch-item" };
 const _hoisted_2 = {
     key: 0,

package/lib/style/components.less

@@ -3,6 +3,7 @@
 @import "../DragModal/style/index-pure.less";
 @import "../EditTable/style/index-pure.less";
 @import "../Ellipsis/style/index-pure.less";
+@import "../FlameGraph/style/index-pure.less";
 @import "../MonacoEditor/style/index-pure.less";
 @import "../RadioButton/style/index-pure.less";
 @import "../Scrollbar/style/index-pure.less";

package/lib/style/index.css

@@ -5177,3 +5177,36 @@ span.ant-radio + * {
   color: #fff;
   background-color: #1890ff;
 }
+.j-flame-graph {
+  position: relative;
+  /* 修改矩形块样式 */
+}
+.j-flame-graph .d3-flame-graph {
+  margin-top: 40px;
+}
+.j-flame-graph .d3-flame-graph rect {
+  stroke: #fff;
+  stroke-width: 1px;
+}
+.j-flame-graph .d3-flame-graph text {
+  font-size: 18px;
+  fill: #333;
+}
+.j-flame-graph .frame {
+  cursor: pointer;
+}
+.j-flame-graph .frame:hover {
+  fill: #E600E6;
+}
+.j-flame-graph .frame:hover rect {
+  fill: #ffffe0;
+}
+.j-flame-graph .frame div {
+  color: #000;
+}
+.j-flame-graph .j-flame-graph-search {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 200px;
+}

package/lib/style/index.less

@@ -11,3 +11,4 @@
 @import '../Scrollbar/style/index.less';
 @import '../Title/style/index.less';
 @import '../RadioButton/style/index.less';
+@import '../FlameGraph/style/index.less';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetlinks-web/components",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -158,9 +158,9 @@
     "webpack-dev-server": "^4.0.0",
     "webpack-merge": "^5.0.0",
     "webpackbar": "^5.0.2",
+    "@jetlinks-web/hooks": "^1.0.25",
     "@jetlinks-web/constants": "^1.0.9",
-    "@jetlinks-web/utils": "^1.2.8",
-    "@jetlinks-web/hooks": "^1.0.25"
+    "@jetlinks-web/utils": "^1.2.8"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",