@next-bricks/data-view 1.6.1 → 1.7.0

package/dist/chunks/{modern-style-treemap.d59d18bc.js.map → modern-style-treemap.4b2c0feb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chunks/modern-style-treemap.d59d18bc.js","mappings":"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","sources":["webpack:///./src/modern-style-treemap/index.tsx","webpack:///./src/data-view-variables.shadow.css","webpack:///../../node_modules/css-loader/dist/runtime/getUrl.js","webpack:///../../node_modules/classnames/index.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateGetter.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateMethodInitSpec.js"],"sourcesContent":["import React, { MouseEvent, CSSProperties, useMemo, useState } from \"react\";\nimport { createDecorators, EventEmitter } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport type { UseBrickConf } from \"@next-core/types\";\nimport { ReactUseMultipleBricks } from \"@next-core/react-runtime\";\nimport {\n  treemap,\n  hierarchy,\n  treemapBinary,\n  treemapDice,\n  treemapResquarify,\n  treemapSlice,\n  treemapSliceDice,\n  treemapSquarify,\n} from \"d3-hierarchy\";\nimport variablesStyleText from \"../data-view-variables.shadow.css\";\nimport styleText from \"./modern-style-treemap.shadow.css\";\nimport { useResizeObserver } from \"../hooks/index.js\";\nimport { debounceByAnimationFrame } from \"@next-shared/general/debounceByAnimationFrame\";\nimport { keyBy } from \"lodash\";\nimport classNames from \"classnames\";\n\nconst { defineElement, property, event } = createDecorators();\n\nenum TailTypes {\n  treemapBinary = \"treemapBinary\",\n  treemapDice = \"treemapDice\",\n  treemapResquarify = \"treemapResquarify\",\n  treemapSlice = \"treemapSlice\",\n  treemapSliceDice = \"treemapSliceDice\",\n  treemapSquarify = \"treemapSquarify\",\n}\n\ntype TreemapData = {\n  name: string;\n  value?: number;\n  children?: TreemapData[];\n};\n\ninterface ModernStyleTreemapProps {\n  data: TreemapData;\n  tail?: TailTypes;\n  leafUseBrick?: { useBrick: UseBrickConf };\n  leafContainerStyle?: CSSProperties;\n  tooltipUseBrick?: { useBrick: UseBrickConf };\n  tooltipStyle?: CSSProperties;\n  handleClick?: (value: TreemapData) => void;\n}\n\n/**\n * 现代风树图\n * @author nlicroshan\n * @category big-screen-content\n */\n@defineElement(\"data-view.modern-style-treemap\", {\n  styleTexts: [variablesStyleText, styleText],\n})\nclass ModernStyleTreemap\n  extends ReactNextElement\n  implements ModernStyleTreemapProps\n{\n  /**\n   * @kind TreemapData\n   * @required true\n   * @default -\n   * @description 数据\n   */\n  @property({\n    attribute: false,\n  })\n  accessor data: TreemapData;\n\n  /**\n   * @kind TailTypes\n   * @required false\n   * @default treemapSquarify\n   * @description 平铺方法\n   */\n  @property({\n    attribute: false,\n  })\n  accessor tail: TailTypes = TailTypes[\"treemapSquarify\"];\n\n  /**\n   * @kind { useBrick: UseBrickConf }\n   * @required false\n   * @default -\n   * @description 叶子节点useBrick\n   */\n  @property({\n    attribute: false,\n  })\n  accessor leafUseBrick: { useBrick: UseBrickConf };\n\n  /**\n   * @kind CSSProperties\n   * @required false\n   * @default -\n   * @description 叶子节点容器样式\n   */\n  @property({\n    attribute: false,\n  })\n  accessor leafContainerStyle: CSSProperties;\n\n  /**\n   * @kind { useBrick: UseBrickConf }\n   * @required false\n   * @default -\n   * @description tooltip useBrick\n   */\n  @property({\n    attribute: false,\n  })\n  accessor tooltipUseBrick: { useBrick: UseBrickConf };\n\n  /**\n   * @kind CSSProperties\n   * @required false\n   * @default -\n   * @description tooltip容器样式\n   */\n  @property({\n    attribute: false,\n  })\n  accessor tooltipStyle: CSSProperties;\n\n  /**\n   * @detail\n   * @description 点击事件\n   */\n  @event({ type: \"treemap.click\" })\n  accessor #onClickEvent!: EventEmitter<TreemapData>;\n\n  #handleClick = (value: TreemapData) => {\n    this.#onClickEvent.emit(value);\n  };\n\n  render() {\n    return (\n      <ModernStyleTreemapElement\n        data={this.data}\n        tail={this.tail}\n        leafUseBrick={this.leafUseBrick}\n        leafContainerStyle={this.leafContainerStyle}\n        tooltipUseBrick={this.tooltipUseBrick}\n        tooltipStyle={this.tooltipStyle}\n        handleClick={this.#handleClick}\n      />\n    );\n  }\n}\n\nconst tailMap = {\n  [TailTypes[\"treemapBinary\"]]: treemapBinary,\n  [TailTypes[\"treemapDice\"]]: treemapDice,\n  [TailTypes[\"treemapResquarify\"]]: treemapResquarify,\n  [TailTypes[\"treemapSlice\"]]: treemapSlice,\n  [TailTypes[\"treemapSliceDice\"]]: treemapSliceDice,\n  [TailTypes[\"treemapSquarify\"]]: treemapSquarify,\n};\n\nfunction ModernStyleTreemapElement(\n  props: ModernStyleTreemapProps\n): React.ReactElement {\n  const {\n    data,\n    tail,\n    leafUseBrick,\n    leafContainerStyle,\n    tooltipUseBrick,\n    tooltipStyle,\n    handleClick,\n  } = props;\n\n  const [\n    wrapperRef,\n    { clientWidth: wrapperWidth, clientHeight: wrapperHeight },\n  ] = useResizeObserver<HTMLDivElement>();\n  const [tooltipRef, { clientHeight: tooltipHeight }] =\n    useResizeObserver<HTMLDivElement>();\n  const [mouseData, setMouseData] = useState<{\n    clientX: number;\n    clientY: number;\n    name?: string;\n  }>({ clientX: 0, clientY: 0 });\n  const [tooltipPosition, setTooltipPosition] = useState<string>();\n\n  const tooltipTransform = useMemo(() => {\n    if (!wrapperRef.current) return undefined;\n    const wrapperClientRect = wrapperRef.current.getBoundingClientRect();\n    // 缩放比例\n    const widthScale = wrapperClientRect.width / wrapperRef.current.clientWidth;\n    const heightScale =\n      wrapperClientRect.height / wrapperRef.current.clientHeight;\n    // 缩放后的偏移\n    let scaledLeft, placement;\n    const left = mouseData.clientX - wrapperClientRect.left;\n    let scaledTop = mouseData.clientY - wrapperClientRect.top;\n    const right = wrapperClientRect.right - mouseData.clientX;\n    const bottom = wrapperClientRect.bottom - mouseData.clientY;\n    // 处理边界问题\n    const { width, height } = tooltipRef.current.getBoundingClientRect();\n    scaledLeft = left + 16;\n    if (right < width) {\n      scaledLeft = left - width - 16;\n      placement = \"right\";\n    }\n    if (left < width) {\n      placement = \"left\";\n    }\n    if (bottom < height / 2 || scaledTop < height / 2) {\n      const topOrBottom = bottom < height / 2 ? \"bottom\" : \"top\";\n      scaledTop =\n        bottom < height / 2\n          ? scaledTop - height / 2 - 16\n          : scaledTop + height / 2 + 16;\n      if (placement === \"left\" && left - width / 2 < 0) {\n        placement = `${topOrBottom}-left`;\n        scaledLeft = left;\n      } else if (placement === \"right\" && right - width / 2 < 0) {\n        placement = `${topOrBottom}-right`;\n        scaledLeft = left - width;\n      } else {\n        placement = topOrBottom;\n        scaledLeft = left - width / 2;\n      }\n    }\n    setTooltipPosition(placement);\n    // 实际偏移\n    return {\n      left: `${scaledLeft / widthScale}px`,\n      top: `${scaledTop / heightScale - tooltipHeight / 2}px`,\n    };\n  }, [\n    wrapperRef,\n    mouseData.clientX,\n    mouseData.clientY,\n    tooltipRef,\n    tooltipHeight,\n  ]);\n\n  const hierarchyNode = useMemo(() => {\n    return hierarchy(data)\n      .sum((d) => d.value)\n      .sort((a, b) => b.value - a.value);\n  }, [data]);\n\n  const tm = useMemo(() => {\n    return treemap<TreemapData>()\n      .tile(tailMap[tail])\n      .size([wrapperWidth, wrapperHeight])\n      .padding(1)\n      .round(true);\n  }, [tail, wrapperWidth, wrapperHeight]);\n\n  const [leaves, leavesMap] = useMemo(() => {\n    // 这里只要hierarchyNode不变化，即使tm更新了，root、leaves还是同一个对象\n    const root = tm(hierarchyNode);\n    // 这里使用解构让leaves里面每个node变成新对象\n    const _leaves = root.leaves().map((v: any) => ({ ...v }));\n    return [_leaves, keyBy(_leaves, \"data.name\")];\n  }, [tm, hierarchyNode]);\n\n  const leavesNode = useMemo(() => {\n    return leaves.map((d) => {\n      const top = d.y0,\n        left = d.x0,\n        width = d.x1 - d.x0,\n        height = d.y1 - d.y0;\n\n      return (\n        <div\n          key={d.data.name}\n          className=\"treemap-leaf\"\n          data-leaf-id={d.data.name}\n          style={{\n            ...leafContainerStyle,\n            top: 0,\n            left: 0,\n            transform: `translate(${left}px, ${top}px)`,\n            width,\n            height,\n          }}\n          onClick={() => handleClick?.(d.data)}\n        >\n          {leafUseBrick?.useBrick && (\n            <ReactUseMultipleBricks useBrick={leafUseBrick.useBrick} data={d} />\n          )}\n        </div>\n      );\n    });\n  }, [handleClick, leafContainerStyle, leafUseBrick.useBrick, leaves]);\n\n  const curTooltipData = useMemo(() => {\n    return { ...leavesMap[mouseData.name] };\n  }, [leavesMap, mouseData.name]);\n\n  const handleMouseMove = useMemo(() => {\n    return debounceByAnimationFrame((e: MouseEvent<HTMLDivElement>) => {\n      const curLeaf = (e.target as HTMLDivElement).closest(\".treemap-leaf\");\n      const curName = curLeaf?.getAttribute(\"data-leaf-id\");\n      setMouseData((pre) => {\n        return {\n          clientX: e.clientX,\n          clientY: e.clientY,\n          name: curLeaf ? curName : pre.name,\n        };\n      });\n    });\n  }, []);\n\n  return (\n    <div className=\"wrapper\">\n      <div\n        className=\"treemap\"\n        ref={wrapperRef}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={() => {\n          tooltipRef.current.style.visibility = \"visible\";\n        }}\n        onMouseLeave={() => {\n          tooltipRef.current.style.visibility = \"hidden\";\n        }}\n      >\n        {leavesNode}\n      </div>\n      <div\n        className={classNames(\"tooltip\", {\n          bottom: tooltipPosition === \"bottom\",\n          bottomRight: tooltipPosition === \"bottom-right\",\n          bottomLeft: tooltipPosition === \"bottom-left\",\n          topLeft: tooltipPosition === \"top-left\",\n          topRight: tooltipPosition === \"top-right\",\n          top: tooltipPosition === \"top\",\n          right: tooltipPosition === \"right\",\n        })}\n        style={{\n          ...tooltipStyle,\n          ...tooltipTransform,\n        }}\n        ref={tooltipRef}\n      >\n        {tooltipUseBrick?.useBrick && (\n          <ReactUseMultipleBricks\n            useBrick={tooltipUseBrick.useBrick}\n            data={curTooltipData}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport { ModernStyleTreemap };\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{--palette-rgba-white-1:rgba(255,255,255,10%);--palette-rgba-white-2:rgba(255,255,255,20%);--palette-rgba-white-3:rgba(255,255,255,30%);--palette-rgba-white-4:rgba(255,255,255,40%);--palette-rgba-white-5:rgba(255,255,255,50%);--palette-rgba-white-6:rgba(255,255,255,60%);--palette-rgba-white-7:rgba(255,255,255,70%);--palette-rgba-white-8:rgba(255,255,255,80%);--palette-rgba-white-9:rgba(255,255,255,90%);--palette-rgba-white-10:rgba(255,255,255,100%);--palette-rgba-gray-1:rgba(0,0,0,10%);--palette-rgba-gray-2:rgba(0,0,0,20%);--palette-rgba-gray-3:rgba(0,0,0,30%);--palette-rgba-gray-4:rgba(0,0,0,40%);--palette-rgba-gray-5:rgba(0,0,0,50%);--palette-rgba-gray-6:rgba(0,0,0,60%);--palette-rgba-gray-7:rgba(0,0,0,70%);--palette-rgba-gray-8:rgba(0,0,0,80%);--palette-rgba-gray-9:rgba(0,0,0,90%);--palette-rgba-gray-10:rgba(0,0,0,100%);--palette-rgba-blue-gray-2:rgba(101,106,134,20%);--palette-rgba-blue-gray-3:rgba(101,106,134,30%);--palette-rgba-blue-gray-8:rgba(101,106,134,80%);--palette-tech-blue-4-channel:67,127,255;--palette-tech-blue-4:rgb(var(--palette-tech-blue-4-channel));--palette-tech-blue-6-channel:51,102,255;--palette-tech-blue-6:rgb(var(--palette-tech-blue-6-channel));--palette-tech-blue-8-channel:40,69,159;--palette-tech-blue-8:rgb(var(--palette-tech-blue-8-channel));--palette-sea-green-4-channel:131,245,225;--palette-sea-green-4:rgb(var(--palette-sea-green-4-channel));--palette-green-6-channel:81,235,73;--palette-green-6:rgb(var(--palette-green-6-channel));--palette-green-2:rgba(var(--palette-green-6-channel),20%);--palette-lotus-pink-7-channel:204,0,102;--palette-lotus-pink-7:rgb(var(--palette-lotus-pink-7-channel));--palette-red-6-channel:242,39,39;--palette-red-6:rgb(var(--palette-red-6-channel));--palette-red-2:rgba(var(--palette-red-6-channel),20%);--color-fill-global-bg:#0f1014;--color-fill-bg-container-1:var(--palette-rgba-white-1);--color-fill-bg-container-2:var(--palette-rgba-blue-gray-2);--color-fill-bg-container-3:var(--palette-rgba-blue-gray-8);--color-fill-bg-base-1:var(--palette-rgba-blue-gray-2);--color-fill-bg-base-2:rgba(15,16,20,0%);--color-fill-bg-base-3:rgba(0,0,0,20%);--color-fill-bg-base-4:rgba(40,46,58,100%);--color-fill-bg-base-5:rgba(19,25,47,80%);--color-fill-bg-base-6:var(--palette-rgba-blue-gray-3);--color-brand:var(--palette-tech-blue-6);--color-brand-hover:var(--palette-tech-blue-4);--color-brand-active:var(--palette-tech-blue-8);--color-contrast-1:var(--palette-sea-green-4);--color-error:var(--palette-red-6);--color-error-bg:var(--palette-red-2);--color-success:var(--palette-green-6);--color-success-bg:var(--palette-green-2);--color-header-text-big:var(--palette-rgba-white-10);--color-header-text:var(--palette-rgba-white-10);--color-normal-text:var(--palette-rgba-white-10);--color-strong-text:var(--palette-rgba-white-9);--color-auxiliary-text:var(--palette-rgba-white-8);--color-secondary-text:var(--palette-rgba-white-6);--color-disabled-text:var(--palette-rgba-white-4);--color-border-divider-line:var(--palette-rgba-white-1);--color-text-divider-line-1:var(--palette-rgba-white-2);--color-text-divider-line-2:var(--palette-rgba-white-2);--small-border-radius:2px;--medius-border-radius:5px;--larger-border-radius:12px;--container-border-radius:9999px;--no-border-radius:0px;--mask-bg:var(--palette-rgba-gray-7);--title-font-size-larger:30px;--title-font-size-strong:22px;--title-font-size:18px;--normal-font-size:14px;--auxiliary-font-size:16px;--auxiliary-font-size-small:12px;--overview-data-font-size:34px;--statistics-data-font-size:28px;--normal-data-font-size-larger:20px;--normal-data-font-size:16px;--chart-legend-font-size:12px;--chart-tooltips-font-size-1:12px;--chart-tooltips-font-size-2:12px;--chart-axis-x-font-size:12px;--chart-axis-x-font-size-larger:14px;--chart-axis-y-font-size:12px;--chart-axis-y-font-size-larger:14px;--font-weight-600:600;--font-weight-500:500;--font-weight-400:400;--text-shadow:0px 1px 4px #2863ee;--border-width-base:1px;--border-width-double-base:2px;--border-width-tribble-base:3px;--punctate-width-base:1px;--paragraph-width-base:1px;--button-text-color:#40d0db}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","\"use strict\";\n\nmodule.exports = function (url, options) {\n  if (!options) {\n    options = {};\n  }\n  if (!url) {\n    return url;\n  }\n  url = String(url.__esModule ? url.default : url);\n\n  // If url is already wrapped in quotes, remove them\n  if (/^['\"].*['\"]$/.test(url)) {\n    url = url.slice(1, -1);\n  }\n  if (options.hash) {\n    url += options.hash;\n  }\n\n  // Should url be wrapped?\n  // See https://drafts.csswg.org/css-values-3/#urls\n  if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n    return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n  }\n  return url;\n};","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import assertClassBrand from \"./assertClassBrand.js\";\nexport default function _classPrivateGetter(s, r, a) {\n  return a(assertClassBrand(s, r));\n}","import checkPrivateRedeclaration from \"./checkPrivateRedeclaration.js\";\nexport default function _classPrivateMethodInitSpec(obj, privateSet) {\n  checkPrivateRedeclaration(obj, privateSet);\n  privateSet.add(obj);\n}"],"names":["defineElement","property","event","createDecorators","TailTypes","_ModernStyleTreemap","_A","WeakMap","_B","_C","_D","_E","_F","_G","_ModernStyleTreemap_brand","WeakSet","_handleClick","ModernStyleTreemap","ReactNextElement","constructor","arguments","_classPrivateMethodInitSpec","_classPrivateFieldInitSpec","_init_data","_init_extra_data","_init_tail","_init_extra_tail","_init_leafUseBrick","_init_extra_leafUseBrick","_init_leafContainerStyle","_init_extra_leafContainerStyle","_init_tooltipUseBrick","_init_extra_tooltipUseBrick","_init_tooltipStyle","_init_extra_tooltipStyle","_init_onClickEvent","_init_extra_onClickEvent","value","_classPrivateGetter","this","_get_onClickEvent","emit","data","_classPrivateFieldGet","v","_classPrivateFieldSet","tail","leafUseBrick","leafContainerStyle","tooltipUseBrick","tooltipStyle","render","React","ModernStyleTreemapElement","handleClick","_ModernStyleTreemap2","e","_set_onClickEvent","c","_initClass","_applyDecs","styleTexts","variablesStyleText","styleText","attribute","type","o","_","has","_checkInRHS","tailMap","treemapBinary","treemapDice","treemapResquarify","treemapSlice","treemapSliceDice","treemapSquarify","props","wrapperRef","clientWidth","wrapperWidth","clientHeight","wrapperHeight","useResizeObserver","tooltipRef","tooltipHeight","mouseData","setMouseData","useState","clientX","clientY","tooltipPosition","setTooltipPosition","tooltipTransform","useMemo","current","wrapperClientRect","getBoundingClientRect","widthScale","width","heightScale","height","scaledLeft","placement","left","scaledTop","top","right","bottom","topOrBottom","hierarchyNode","hierarchy","sum","d","sort","a","b","tm","treemap","tile","size","padding","round","leaves","leavesMap","_leaves","map","keyBy","leavesNode","y0","x0","x1","y1","key","name","className","style","transform","onClick","useBrick","ReactUseMultipleBricks","curTooltipData","handleMouseMove","debounceByAnimationFrame","curLeaf","target","closest","curName","getAttribute","pre","ref","onMouseMove","onMouseEnter","visibility","onMouseLeave","classNames","bottomRight","bottomLeft","topLeft","topRight","___CSS_LOADER_EXPORT___","push","module","id","toString","exports","url","options","String","__esModule","default","test","slice","hash","needQuotes","concat","replace","hasOwn","hasOwnProperty","classes","i","length","arg","appendClass","parseValue","Array","isArray","apply","Object","prototype","includes","call","newClass","s","r","obj","privateSet","add"],"sourceRoot":""}
+{"version":3,"file":"chunks/modern-style-treemap.4b2c0feb.js","mappings":"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","sources":["webpack:///./src/modern-style-treemap/index.tsx","webpack:///./src/data-view-variables.shadow.css","webpack:///../../node_modules/css-loader/dist/runtime/getUrl.js","webpack:///../../node_modules/classnames/index.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateGetter.js","webpack:///../../node_modules/@babel/runtime/helpers/esm/classPrivateMethodInitSpec.js"],"sourcesContent":["import React, { MouseEvent, CSSProperties, useMemo, useState } from \"react\";\nimport { createDecorators, EventEmitter } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport type { UseBrickConf } from \"@next-core/types\";\nimport { ReactUseMultipleBricks } from \"@next-core/react-runtime\";\nimport {\n  treemap,\n  hierarchy,\n  treemapBinary,\n  treemapDice,\n  treemapResquarify,\n  treemapSlice,\n  treemapSliceDice,\n  treemapSquarify,\n} from \"d3-hierarchy\";\nimport variablesStyleText from \"../data-view-variables.shadow.css\";\nimport styleText from \"./modern-style-treemap.shadow.css\";\nimport { useResizeObserver } from \"../hooks/index.js\";\nimport { debounceByAnimationFrame } from \"@next-shared/general/debounceByAnimationFrame\";\nimport { keyBy } from \"lodash\";\nimport classNames from \"classnames\";\n\nconst { defineElement, property, event } = createDecorators();\n\nenum TailTypes {\n  treemapBinary = \"treemapBinary\",\n  treemapDice = \"treemapDice\",\n  treemapResquarify = \"treemapResquarify\",\n  treemapSlice = \"treemapSlice\",\n  treemapSliceDice = \"treemapSliceDice\",\n  treemapSquarify = \"treemapSquarify\",\n}\n\ntype TreemapData = {\n  name: string;\n  value?: number;\n  children?: TreemapData[];\n};\n\ninterface ModernStyleTreemapProps {\n  data: TreemapData;\n  tail?: TailTypes;\n  leafUseBrick?: { useBrick: UseBrickConf };\n  leafContainerStyle?: CSSProperties;\n  tooltipUseBrick?: { useBrick: UseBrickConf };\n  tooltipStyle?: CSSProperties;\n  handleClick?: (value: TreemapData) => void;\n}\n\n/**\n * 现代风树图\n * @author nlicroshan\n * @category big-screen-content\n */\n@defineElement(\"data-view.modern-style-treemap\", {\n  styleTexts: [variablesStyleText, styleText],\n})\nclass ModernStyleTreemap\n  extends ReactNextElement\n  implements ModernStyleTreemapProps\n{\n  /**\n   * @kind TreemapData\n   * @required true\n   * @default -\n   * @description 数据\n   */\n  @property({\n    attribute: false,\n  })\n  accessor data: TreemapData;\n\n  /**\n   * @kind TailTypes\n   * @required false\n   * @default treemapSquarify\n   * @description 平铺方法\n   */\n  @property({\n    attribute: false,\n  })\n  accessor tail: TailTypes = TailTypes[\"treemapSquarify\"];\n\n  /**\n   * @kind { useBrick: UseBrickConf }\n   * @required false\n   * @default -\n   * @description 叶子节点useBrick\n   */\n  @property({\n    attribute: false,\n  })\n  accessor leafUseBrick: { useBrick: UseBrickConf };\n\n  /**\n   * @kind CSSProperties\n   * @required false\n   * @default -\n   * @description 叶子节点容器样式\n   */\n  @property({\n    attribute: false,\n  })\n  accessor leafContainerStyle: CSSProperties;\n\n  /**\n   * @kind { useBrick: UseBrickConf }\n   * @required false\n   * @default -\n   * @description tooltip useBrick\n   */\n  @property({\n    attribute: false,\n  })\n  accessor tooltipUseBrick: { useBrick: UseBrickConf };\n\n  /**\n   * @kind CSSProperties\n   * @required false\n   * @default -\n   * @description tooltip容器样式\n   */\n  @property({\n    attribute: false,\n  })\n  accessor tooltipStyle: CSSProperties;\n\n  /**\n   * @detail\n   * @description 点击事件\n   */\n  @event({ type: \"treemap.click\" })\n  accessor #onClickEvent!: EventEmitter<TreemapData>;\n\n  #handleClick = (value: TreemapData) => {\n    this.#onClickEvent.emit(value);\n  };\n\n  render() {\n    return (\n      <ModernStyleTreemapElement\n        data={this.data}\n        tail={this.tail}\n        leafUseBrick={this.leafUseBrick}\n        leafContainerStyle={this.leafContainerStyle}\n        tooltipUseBrick={this.tooltipUseBrick}\n        tooltipStyle={this.tooltipStyle}\n        handleClick={this.#handleClick}\n      />\n    );\n  }\n}\n\nconst tailMap = {\n  [TailTypes[\"treemapBinary\"]]: treemapBinary,\n  [TailTypes[\"treemapDice\"]]: treemapDice,\n  [TailTypes[\"treemapResquarify\"]]: treemapResquarify,\n  [TailTypes[\"treemapSlice\"]]: treemapSlice,\n  [TailTypes[\"treemapSliceDice\"]]: treemapSliceDice,\n  [TailTypes[\"treemapSquarify\"]]: treemapSquarify,\n};\n\nfunction ModernStyleTreemapElement(\n  props: ModernStyleTreemapProps\n): React.ReactElement {\n  const {\n    data,\n    tail,\n    leafUseBrick,\n    leafContainerStyle,\n    tooltipUseBrick,\n    tooltipStyle,\n    handleClick,\n  } = props;\n\n  const [\n    wrapperRef,\n    { clientWidth: wrapperWidth, clientHeight: wrapperHeight },\n  ] = useResizeObserver<HTMLDivElement>();\n  const [tooltipRef, { clientHeight: tooltipHeight }] =\n    useResizeObserver<HTMLDivElement>();\n  const [mouseData, setMouseData] = useState<{\n    clientX: number;\n    clientY: number;\n    name?: string;\n  }>({ clientX: 0, clientY: 0 });\n  const [tooltipPosition, setTooltipPosition] = useState<string>();\n\n  const tooltipTransform = useMemo(() => {\n    if (!wrapperRef.current) return undefined;\n    const wrapperClientRect = wrapperRef.current.getBoundingClientRect();\n    // 缩放比例\n    const widthScale = wrapperClientRect.width / wrapperRef.current.clientWidth;\n    const heightScale =\n      wrapperClientRect.height / wrapperRef.current.clientHeight;\n    // 缩放后的偏移\n    let scaledLeft, placement;\n    const left = mouseData.clientX - wrapperClientRect.left;\n    let scaledTop = mouseData.clientY - wrapperClientRect.top;\n    const right = wrapperClientRect.right - mouseData.clientX;\n    const bottom = wrapperClientRect.bottom - mouseData.clientY;\n    // 处理边界问题\n    const { width, height } = tooltipRef.current.getBoundingClientRect();\n    scaledLeft = left + 16;\n    if (right < width) {\n      scaledLeft = left - width - 16;\n      placement = \"right\";\n    }\n    if (left < width) {\n      placement = \"left\";\n    }\n    if (bottom < height / 2 || scaledTop < height / 2) {\n      const topOrBottom = bottom < height / 2 ? \"bottom\" : \"top\";\n      scaledTop =\n        bottom < height / 2\n          ? scaledTop - height / 2 - 16\n          : scaledTop + height / 2 + 16;\n      if (placement === \"left\" && left - width / 2 < 0) {\n        placement = `${topOrBottom}-left`;\n        scaledLeft = left;\n      } else if (placement === \"right\" && right - width / 2 < 0) {\n        placement = `${topOrBottom}-right`;\n        scaledLeft = left - width;\n      } else {\n        placement = topOrBottom;\n        scaledLeft = left - width / 2;\n      }\n    }\n    setTooltipPosition(placement);\n    // 实际偏移\n    return {\n      left: `${scaledLeft / widthScale}px`,\n      top: `${scaledTop / heightScale - tooltipHeight / 2}px`,\n    };\n  }, [\n    wrapperRef,\n    mouseData.clientX,\n    mouseData.clientY,\n    tooltipRef,\n    tooltipHeight,\n  ]);\n\n  const hierarchyNode = useMemo(() => {\n    return hierarchy(data)\n      .sum((d) => d.value)\n      .sort((a, b) => b.value - a.value);\n  }, [data]);\n\n  const tm = useMemo(() => {\n    return treemap<TreemapData>()\n      .tile(tailMap[tail])\n      .size([wrapperWidth, wrapperHeight])\n      .padding(1)\n      .round(true);\n  }, [tail, wrapperWidth, wrapperHeight]);\n\n  const [leaves, leavesMap] = useMemo(() => {\n    // 这里只要hierarchyNode不变化，即使tm更新了，root、leaves还是同一个对象\n    const root = tm(hierarchyNode);\n    // 这里使用解构让leaves里面每个node变成新对象\n    const _leaves = root.leaves().map((v: any) => ({ ...v }));\n    return [_leaves, keyBy(_leaves, \"data.name\")];\n  }, [tm, hierarchyNode]);\n\n  const leavesNode = useMemo(() => {\n    return leaves.map((d) => {\n      const top = d.y0,\n        left = d.x0,\n        width = d.x1 - d.x0,\n        height = d.y1 - d.y0;\n\n      return (\n        <div\n          key={d.data.name}\n          className=\"treemap-leaf\"\n          data-leaf-id={d.data.name}\n          style={{\n            ...leafContainerStyle,\n            top: 0,\n            left: 0,\n            transform: `translate(${left}px, ${top}px)`,\n            width,\n            height,\n          }}\n          onClick={() => handleClick?.(d.data)}\n        >\n          {leafUseBrick?.useBrick && (\n            <ReactUseMultipleBricks useBrick={leafUseBrick.useBrick} data={d} />\n          )}\n        </div>\n      );\n    });\n  }, [handleClick, leafContainerStyle, leafUseBrick.useBrick, leaves]);\n\n  const curTooltipData = useMemo(() => {\n    return { ...leavesMap[mouseData.name] };\n  }, [leavesMap, mouseData.name]);\n\n  const handleMouseMove = useMemo(() => {\n    return debounceByAnimationFrame((e: MouseEvent<HTMLDivElement>) => {\n      const curLeaf = (e.target as HTMLDivElement).closest(\".treemap-leaf\");\n      const curName = curLeaf?.getAttribute(\"data-leaf-id\");\n      setMouseData((pre) => {\n        return {\n          clientX: e.clientX,\n          clientY: e.clientY,\n          name: curLeaf ? curName : pre.name,\n        };\n      });\n    });\n  }, []);\n\n  return (\n    <div className=\"wrapper\">\n      <div\n        className=\"treemap\"\n        ref={wrapperRef}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={() => {\n          tooltipRef.current.style.visibility = \"visible\";\n        }}\n        onMouseLeave={() => {\n          tooltipRef.current.style.visibility = \"hidden\";\n        }}\n      >\n        {leavesNode}\n      </div>\n      <div\n        className={classNames(\"tooltip\", {\n          bottom: tooltipPosition === \"bottom\",\n          bottomRight: tooltipPosition === \"bottom-right\",\n          bottomLeft: tooltipPosition === \"bottom-left\",\n          topLeft: tooltipPosition === \"top-left\",\n          topRight: tooltipPosition === \"top-right\",\n          top: tooltipPosition === \"top\",\n          right: tooltipPosition === \"right\",\n        })}\n        style={{\n          ...tooltipStyle,\n          ...tooltipTransform,\n        }}\n        ref={tooltipRef}\n      >\n        {tooltipUseBrick?.useBrick && (\n          <ReactUseMultipleBricks\n            useBrick={tooltipUseBrick.useBrick}\n            data={curTooltipData}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport { ModernStyleTreemap };\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{--palette-rgba-white-1:rgba(255,255,255,10%);--palette-rgba-white-2:rgba(255,255,255,20%);--palette-rgba-white-3:rgba(255,255,255,30%);--palette-rgba-white-4:rgba(255,255,255,40%);--palette-rgba-white-5:rgba(255,255,255,50%);--palette-rgba-white-6:rgba(255,255,255,60%);--palette-rgba-white-7:rgba(255,255,255,70%);--palette-rgba-white-8:rgba(255,255,255,80%);--palette-rgba-white-9:rgba(255,255,255,90%);--palette-rgba-white-10:rgba(255,255,255,100%);--palette-rgba-gray-1:rgba(0,0,0,10%);--palette-rgba-gray-2:rgba(0,0,0,20%);--palette-rgba-gray-3:rgba(0,0,0,30%);--palette-rgba-gray-4:rgba(0,0,0,40%);--palette-rgba-gray-5:rgba(0,0,0,50%);--palette-rgba-gray-6:rgba(0,0,0,60%);--palette-rgba-gray-7:rgba(0,0,0,70%);--palette-rgba-gray-8:rgba(0,0,0,80%);--palette-rgba-gray-9:rgba(0,0,0,90%);--palette-rgba-gray-10:rgba(0,0,0,100%);--palette-rgba-blue-gray-2:rgba(101,106,134,20%);--palette-rgba-blue-gray-3:rgba(101,106,134,30%);--palette-rgba-blue-gray-8:rgba(101,106,134,80%);--palette-tech-blue-4-channel:67,127,255;--palette-tech-blue-4:rgb(var(--palette-tech-blue-4-channel));--palette-tech-blue-6-channel:51,102,255;--palette-tech-blue-6:rgb(var(--palette-tech-blue-6-channel));--palette-tech-blue-8-channel:40,69,159;--palette-tech-blue-8:rgb(var(--palette-tech-blue-8-channel));--palette-sea-green-4-channel:131,245,225;--palette-sea-green-4:rgb(var(--palette-sea-green-4-channel));--palette-green-6-channel:81,235,73;--palette-green-6:rgb(var(--palette-green-6-channel));--palette-green-2:rgba(var(--palette-green-6-channel),20%);--palette-lotus-pink-7-channel:204,0,102;--palette-lotus-pink-7:rgb(var(--palette-lotus-pink-7-channel));--palette-red-6-channel:242,39,39;--palette-red-6:rgb(var(--palette-red-6-channel));--palette-red-2:rgba(var(--palette-red-6-channel),20%);--color-fill-global-bg:#0f1014;--color-fill-bg-container-1:var(--palette-rgba-white-1);--color-fill-bg-container-2:var(--palette-rgba-blue-gray-2);--color-fill-bg-container-3:var(--palette-rgba-blue-gray-8);--color-fill-bg-base-1:var(--palette-rgba-blue-gray-2);--color-fill-bg-base-2:rgba(15,16,20,0%);--color-fill-bg-base-3:rgba(0,0,0,20%);--color-fill-bg-base-4:rgba(40,46,58,100%);--color-fill-bg-base-5:rgba(19,25,47,80%);--color-fill-bg-base-6:var(--palette-rgba-blue-gray-3);--color-brand:var(--palette-tech-blue-6);--color-brand-hover:var(--palette-tech-blue-4);--color-brand-active:var(--palette-tech-blue-8);--color-contrast-1:var(--palette-sea-green-4);--color-error:var(--palette-red-6);--color-error-bg:var(--palette-red-2);--color-success:var(--palette-green-6);--color-success-bg:var(--palette-green-2);--color-header-text-big:var(--palette-rgba-white-10);--color-header-text:var(--palette-rgba-white-10);--color-normal-text:var(--palette-rgba-white-10);--color-strong-text:var(--palette-rgba-white-9);--color-auxiliary-text:var(--palette-rgba-white-8);--color-secondary-text:var(--palette-rgba-white-6);--color-disabled-text:var(--palette-rgba-white-4);--color-border-divider-line:var(--palette-rgba-white-1);--color-text-divider-line-1:var(--palette-rgba-white-2);--color-text-divider-line-2:var(--palette-rgba-white-2);--small-border-radius:2px;--medius-border-radius:5px;--larger-border-radius:12px;--container-border-radius:9999px;--no-border-radius:0px;--mask-bg:var(--palette-rgba-gray-7);--title-font-size-larger:30px;--title-font-size-strong:22px;--title-font-size:18px;--normal-font-size:14px;--auxiliary-font-size:16px;--auxiliary-font-size-small:12px;--overview-data-font-size:34px;--statistics-data-font-size:28px;--normal-data-font-size-larger:20px;--normal-data-font-size:16px;--chart-legend-font-size:12px;--chart-tooltips-font-size-1:12px;--chart-tooltips-font-size-2:12px;--chart-axis-x-font-size:12px;--chart-axis-x-font-size-larger:14px;--chart-axis-y-font-size:12px;--chart-axis-y-font-size-larger:14px;--font-weight-600:600;--font-weight-500:500;--font-weight-400:400;--text-shadow:0px 1px 4px #2863ee;--border-width-base:1px;--border-width-double-base:2px;--border-width-tribble-base:3px;--punctate-width-base:1px;--paragraph-width-base:1px;--button-text-color:#40d0db}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","\"use strict\";\n\nmodule.exports = function (url, options) {\n  if (!options) {\n    options = {};\n  }\n  if (!url) {\n    return url;\n  }\n  url = String(url.__esModule ? url.default : url);\n\n  // If url is already wrapped in quotes, remove them\n  if (/^['\"].*['\"]$/.test(url)) {\n    url = url.slice(1, -1);\n  }\n  if (options.hash) {\n    url += options.hash;\n  }\n\n  // Should url be wrapped?\n  // See https://drafts.csswg.org/css-values-3/#urls\n  if (/[\"'() \\t\\n]|(%20)/.test(url) || options.needQuotes) {\n    return \"\\\"\".concat(url.replace(/\"/g, '\\\\\"').replace(/\\n/g, \"\\\\n\"), \"\\\"\");\n  }\n  return url;\n};","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import assertClassBrand from \"./assertClassBrand.js\";\nexport default function _classPrivateGetter(s, r, a) {\n  return a(assertClassBrand(s, r));\n}","import checkPrivateRedeclaration from \"./checkPrivateRedeclaration.js\";\nexport default function _classPrivateMethodInitSpec(obj, privateSet) {\n  checkPrivateRedeclaration(obj, privateSet);\n  privateSet.add(obj);\n}"],"names":["defineElement","property","event","createDecorators","TailTypes","_ModernStyleTreemap","_A","WeakMap","_B","_C","_D","_E","_F","_G","_ModernStyleTreemap_brand","WeakSet","_handleClick","ModernStyleTreemap","ReactNextElement","constructor","arguments","_classPrivateMethodInitSpec","_classPrivateFieldInitSpec","_init_data","_init_extra_data","_init_tail","_init_extra_tail","_init_leafUseBrick","_init_extra_leafUseBrick","_init_leafContainerStyle","_init_extra_leafContainerStyle","_init_tooltipUseBrick","_init_extra_tooltipUseBrick","_init_tooltipStyle","_init_extra_tooltipStyle","_init_onClickEvent","_init_extra_onClickEvent","value","_classPrivateGetter","this","_get_onClickEvent","emit","data","_classPrivateFieldGet","v","_classPrivateFieldSet","tail","leafUseBrick","leafContainerStyle","tooltipUseBrick","tooltipStyle","render","React","ModernStyleTreemapElement","handleClick","_ModernStyleTreemap2","e","_set_onClickEvent","c","_initClass","_applyDecs","styleTexts","variablesStyleText","styleText","attribute","type","o","_","has","_checkInRHS","tailMap","treemapBinary","treemapDice","treemapResquarify","treemapSlice","treemapSliceDice","treemapSquarify","props","wrapperRef","clientWidth","wrapperWidth","clientHeight","wrapperHeight","useResizeObserver","tooltipRef","tooltipHeight","mouseData","setMouseData","useState","clientX","clientY","tooltipPosition","setTooltipPosition","tooltipTransform","useMemo","current","wrapperClientRect","getBoundingClientRect","widthScale","width","heightScale","height","scaledLeft","placement","left","scaledTop","top","right","bottom","topOrBottom","hierarchyNode","hierarchy","sum","d","sort","a","b","tm","treemap","tile","size","padding","round","leaves","leavesMap","_leaves","map","keyBy","leavesNode","y0","x0","x1","y1","key","name","className","style","transform","onClick","useBrick","ReactUseMultipleBricks","curTooltipData","handleMouseMove","debounceByAnimationFrame","curLeaf","target","closest","curName","getAttribute","pre","ref","onMouseMove","onMouseEnter","visibility","onMouseLeave","classNames","bottomRight","bottomLeft","topLeft","topRight","___CSS_LOADER_EXPORT___","push","module","id","toString","exports","url","options","String","__esModule","default","test","slice","hash","needQuotes","concat","replace","hasOwn","hasOwnProperty","classes","i","length","arg","appendClass","parseValue","Array","isArray","apply","Object","prototype","includes","call","newClass","s","r","obj","privateSet","add"],"sourceRoot":""}

package/dist/chunks/{progress-bar-list.3b337de3.js → progress-bar-list.ddeaf614.js}

@@ -1,2 +1,2 @@
-"use strict";(globalThis.webpackChunk_next_bricks_data_view=globalThis.webpackChunk_next_bricks_data_view||[]).push([[4255],{6837:(e,t,a)=>{a.d(t,{Z:()=>d,w:()=>c});var r=a(18769),n=a(99126);const i=new Map,o=new n.A((e=>{e.forEach((e=>{var t;const{target:a}=e;null===(t=i.get(a))||void 0===t||t.forEach((t=>t(e)))}))})),s=(e,t)=>{i.has(e)||(i.set(e,new Set),o.observe(e)),i.get(e).add(t)},l=(e,t)=>{i.has(e)&&(i.get(e).delete(t),0===i.get(e).size&&(o.unobserve(e),i.delete(e)))};function c(e){const{targetRef:t,onResize:a}=e||{},n=(0,r.useRef)(),i=null!=t?t:n,[o,c]=(0,r.useState)({clientWidth:0,clientHeight:0}),d=(0,r.useCallback)((e=>{const{target:t}=e,{clientWidth:r=0,clientHeight:n=0}=t;c((t=>t.clientWidth===r&&t.clientHeight===n?t:(null==a||a(e),{clientWidth:r,clientHeight:n})))}),[a]);return(0,r.useEffect)((()=>{if("object"!=typeof i||null===i||!(i.current instanceof Element))throw new Error("ResizeObserver must observe an Element");const e=i.current;return s(e,d),()=>{l(e,d)}}),[d,i]),[i,{...o}]}function d(e){const t=(0,r.useRef)();return(0,r.useEffect)((()=>{t.current=e})),t.current}},17245:(e,t,a)=>{a.r(t),a.d(t,{ProgressBarList:()=>v,ProgressBarListComponent:()=>y});var r,n=a(70918),i=a(86121),o=a(70829),s=a(62740),l=a(18769),c=a.n(l),d=a(10300),u=a(24295),h=(a(44291),a(2216)),p=a(72445),m=a(6837);let g,f,b;const{defineElement:x,property:w}=(0,d.createDecorators)();let v;var E=new WeakMap;class k extends u.ReactNextElement{constructor(){super(...arguments),(0,n.A)(this,E,f(this)),b(this)}get dataSource(){return(0,o.A)(E,this)}set dataSource(e){(0,i.A)(E,this,e)}render(){return c().createElement(y,{dataSource:this.dataSource})}}function y(e){const{dataSource:t=[]}=e,[a,r]=(0,l.useState)(),[n,i]=(0,l.useState)([]),[o,{clientWidth:s}]=(0,m.w)();return(0,l.useEffect)((()=>{o.current&&r(s-225)}),[s]),(0,l.useEffect)((()=>{if(a&&t.length){const e=(0,p.maxBy)(t,"count");i(t.map((t=>({...t,width:a*t.count/e.count}))))}}),[t,a]),c().createElement("div",{className:"container",ref:o},n.map(((e,t)=>c().createElement("div",{className:"outermostContainer",key:t},c().createElement("div",{className:"titleText"},e.title),c().createElement("div",{className:"innerBarContainer"},c().createElement("div",{className:"barContainer",style:{width:e.width,left:-e.width,background:e.barBackground||"linear-gradient( 90deg, rgba(66,130,237,0) 0%, #4282ED 100%)"}},c().createElement("div",{className:"smallLoop",style:{background:e.loopBackground||"#4282ED"}}),c().createElement("div",{style:{border:`1px solid ${e.loopBackground||"#4282ED"}`},className:"bigLoop"})),c().createElement("div",{className:"barBgContent",style:{width:a}})),c().createElement("div",{className:"countText"},e.count)))))}r=k,({e:[f,b],c:[v,g]}=(0,s.A)(r,[x("data-view.progress-bar-list",{styleTexts:[h.A]})],[[w({attribute:!1}),1,"dataSource"]],0,void 0,u.ReactNextElement)),g()},2216:(e,t,a)=>{a.d(t,{A:()=>s});var r=a(36758),n=a.n(r),i=a(40935),o=a.n(i)()(n());o.push([e.id,":host{display:flex}:host([hidden]){display:none}.countText{width:100px;margin-left:9px;color:#8fabbf;font-size:12px;word-break:break-all}.barBgContent{position:absolute;background:rgba(83,105,128,0.15);top:8px;height:6px}.bigLoop{position:absolute;right:-7.5px;top:-8px;border-radius:50%;width:20px;height:20px;animation:scale 2s infinite}.smallLoop{width:8px;height:8px;border-radius:50%;position:absolute;right:-1px;top:-1px}.barContainer{position:absolute;min-width:14px;top:8px;animation:move 2s linear forwards;height:6px}.container{width:100%;min-width:300px;display:grid}.outermostContainer{display:flex;align-items:center;flex-flow:row wrap;min-height:22px}.titleText{width:100px;text-align:end;color:#8fabbf;font-size:12px;margin-right:9px;word-break:break-all}.innerBarContainer{position:relative;overflow-y:auto;overflow-x:hidden;min-height:22px;flex:1 1 0}@keyframes move{to{left:0%}}@keyframes scale{from{transform:scale(0.5)}to{transform:scale(1)}}",""]);const s=o.toString()}}]);
-//# sourceMappingURL=progress-bar-list.3b337de3.js.map
+"use strict";(globalThis.webpackChunk_next_bricks_data_view=globalThis.webpackChunk_next_bricks_data_view||[]).push([[4255],{6837:(e,t,a)=>{a.d(t,{Z:()=>d,w:()=>c});var r=a(18769),n=a(99126);const i=new Map,o=new n.A((e=>{e.forEach((e=>{var t;const{target:a}=e;null===(t=i.get(a))||void 0===t||t.forEach((t=>t(e)))}))})),s=(e,t)=>{i.has(e)||(i.set(e,new Set),o.observe(e)),i.get(e).add(t)},l=(e,t)=>{i.has(e)&&(i.get(e).delete(t),0===i.get(e).size&&(o.unobserve(e),i.delete(e)))};function c(e){const{targetRef:t,onResize:a}=e||{},n=(0,r.useRef)(),i=null!=t?t:n,[o,c]=(0,r.useState)({clientWidth:0,clientHeight:0}),d=(0,r.useCallback)((e=>{const{target:t}=e,{clientWidth:r=0,clientHeight:n=0}=t;c((t=>t.clientWidth===r&&t.clientHeight===n?t:(null==a||a(e),{clientWidth:r,clientHeight:n})))}),[a]);return(0,r.useEffect)((()=>{if("object"!=typeof i||null===i||!(i.current instanceof Element))throw new Error("ResizeObserver must observe an Element");const e=i.current;return s(e,d),()=>{l(e,d)}}),[d,i]),[i,{...o}]}function d(e){const t=(0,r.useRef)();return(0,r.useEffect)((()=>{t.current=e})),t.current}},17245:(e,t,a)=>{a.r(t),a.d(t,{ProgressBarList:()=>v,ProgressBarListComponent:()=>y});var r,n=a(70918),i=a(86121),o=a(70829),s=a(62740),l=a(18769),c=a.n(l),d=a(10300),u=a(24295),h=(a(44291),a(2216)),p=a(72445),m=a(6837);let g,f,b;const{defineElement:x,property:w}=(0,d.createDecorators)();let v;var E=new WeakMap;class k extends u.ReactNextElement{constructor(){super(...arguments),(0,n.A)(this,E,f(this)),b(this)}get dataSource(){return(0,o.A)(E,this)}set dataSource(e){(0,i.A)(E,this,e)}render(){return c().createElement(y,{dataSource:this.dataSource})}}function y(e){const{dataSource:t=[]}=e,[a,r]=(0,l.useState)(),[n,i]=(0,l.useState)([]),[o,{clientWidth:s}]=(0,m.w)();return(0,l.useEffect)((()=>{o.current&&r(s-225)}),[s]),(0,l.useEffect)((()=>{if(a&&t.length){const e=(0,p.maxBy)(t,"count");i(t.map((t=>({...t,width:a*t.count/e.count}))))}}),[t,a]),c().createElement("div",{className:"container",ref:o},n.map(((e,t)=>c().createElement("div",{className:"outermostContainer",key:t},c().createElement("div",{className:"titleText"},e.title),c().createElement("div",{className:"innerBarContainer"},c().createElement("div",{className:"barContainer",style:{width:e.width,left:-e.width,background:e.barBackground||"linear-gradient( 90deg, rgba(66,130,237,0) 0%, #4282ED 100%)"}},c().createElement("div",{className:"smallLoop",style:{background:e.loopBackground||"#4282ED"}}),c().createElement("div",{style:{border:`1px solid ${e.loopBackground||"#4282ED"}`},className:"bigLoop"})),c().createElement("div",{className:"barBgContent",style:{width:a}})),c().createElement("div",{className:"countText"},e.count)))))}r=k,({e:[f,b],c:[v,g]}=(0,s.A)(r,[x("data-view.progress-bar-list",{styleTexts:[h.A]})],[[w({attribute:!1}),1,"dataSource"]],0,void 0,u.ReactNextElement)),g()},2216:(e,t,a)=>{a.d(t,{A:()=>s});var r=a(36758),n=a.n(r),i=a(40935),o=a.n(i)()(n());o.push([e.id,":host{display:flex}:host([hidden]){display:none}.countText{width:100px;margin-left:9px;color:#8fabbf;font-size:12px;word-break:break-all}.barBgContent{position:absolute;background:rgba(83,105,128,0.15);top:8px;height:6px}.bigLoop{position:absolute;right:-7.5px;top:-8px;border-radius:50%;width:20px;height:20px;animation:scale 2s infinite}.smallLoop{width:8px;height:8px;border-radius:50%;position:absolute;right:-1px;top:-1px}.barContainer{position:absolute;min-width:14px;top:8px;animation:move 2s linear forwards;height:6px}.container{width:100%;min-width:300px;display:grid}.outermostContainer{display:flex;align-items:center;flex-flow:row wrap;min-height:22px}.titleText{width:100px;text-align:right;color:#8fabbf;font-size:12px;margin-right:9px;word-break:break-all}.innerBarContainer{position:relative;overflow-y:auto;overflow-x:hidden;min-height:22px;flex:1 1 0}@keyframes move{to{left:0%}}@keyframes scale{from{transform:scale(0.5)}to{transform:scale(1)}}",""]);const s=o.toString()}}]);
+//# sourceMappingURL=progress-bar-list.ddeaf614.js.map

package/dist/chunks/{progress-bar-list.3b337de3.js.map → progress-bar-list.ddeaf614.js.map}

@@ -1 +1 @@
-{"version":3,"file":"chunks/progress-bar-list.3b337de3.js","mappings":"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","sources":["webpack:///./src/hooks/useResizeObserver/resizeObserverUtil.ts","webpack:///./src/hooks/useResizeObserver/index.ts","webpack:///./src/hooks/usePrevious/index.ts","webpack:///./src/progress-bar-list/index.tsx","webpack:///./src/progress-bar-list/styles.shadow.css"],"sourcesContent":["import ResizeObserver from \"resize-observer-polyfill\";\n\nexport type ResizeCallback = (entry: ResizeObserverEntry) => void;\n\nconst elementListeners = new Map<Element, Set<ResizeCallback>>();\n\nexport const elementListeners_only_for_test =\n  process.env.NODE_ENV === \"test\"\n    ? elementListeners\n    : /* istanbul ignore next */ null;\n\nconst resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {\n  entries.forEach((entry) => {\n    const { target } = entry;\n    elementListeners.get(target)?.forEach((callback) => callback(entry));\n  });\n};\n\nconst resizeObserver: ResizeObserver = new (ResizeObserver as any)(resizeObserverCallback);\n\nexport const observe = (element: Element, callback: ResizeCallback): void => {\n  if (!elementListeners.has(element)) {\n    elementListeners.set(element, new Set());\n    resizeObserver.observe(element);\n  }\n\n  elementListeners.get(element).add(callback);\n};\n\nexport const unobserve = (element: Element, callback: ResizeCallback): void => {\n  if (elementListeners.has(element)) {\n    elementListeners.get(element).delete(callback);\n\n    if (elementListeners.get(element).size === 0) {\n      resizeObserver.unobserve(element);\n      elementListeners.delete(element);\n    }\n  }\n};\n","import {\n  useState,\n  useCallback,\n  useRef,\n  type RefObject,\n  useEffect,\n} from \"react\";\nimport { observe, unobserve } from \"./resizeObserverUtil.js\";\n\ninterface ElementSize {\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport interface ResizeObserveProps<T extends Element = Element> {\n  targetRef?: RefObject<T>;\n  onResize?: (size: ResizeObserverEntry) => void;\n}\n\nexport function useResizeObserver<T extends Element = Element>(\n  props?: ResizeObserveProps<T>\n): [RefObject<T>, ElementSize] {\n  const {\n    targetRef,\n    onResize,\n  } = props || {};\n\n  const localRef = useRef<T>();\n  const ref = targetRef ?? localRef;\n  const [size, setSize] = useState<ElementSize>({ clientWidth: 0, clientHeight: 0 });\n\n  const handleResize = useCallback(\n    (entry: ResizeObserverEntry) => {\n      const { target } = entry;\n      const { clientWidth = 0, clientHeight = 0 } = target;\n\n      setSize((prev) => {\n        // skip if same size\n        if (prev.clientWidth === clientWidth && prev.clientHeight === clientHeight) {\n          return prev;\n        }\n\n        onResize?.(entry);\n\n        return { clientWidth, clientHeight };\n      });\n    },\n    [onResize]\n  );\n\n  useEffect(() => {\n    if (\n      typeof ref !== \"object\" ||\n      ref === null ||\n      !(ref.current instanceof Element)\n    ) {\n      throw new Error(\"ResizeObserver must observe an Element\");\n    }\n\n    const element = ref.current;\n    observe(element, handleResize);\n\n    return () => {\n      unobserve(element, handleResize);\n    };\n  }, [handleResize, ref]);\n\n  return [ref, { ...size }];\n}\n","import {useRef, useEffect} from 'react';\nexport  function usePrevious<T>(data?: T):T|undefined{\n    const ref = useRef<T>();\n    useEffect(()=>{\n        ref.current = data\n    })\n    return ref.current;\n}\n","import React, { useEffect, useState, CSSProperties } from \"react\";\nimport { createDecorators } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport \"@next-core/theme\";\nimport styleText from \"./styles.shadow.css\";\n\nimport { maxBy } from \"lodash\";\nimport { useResizeObserver } from \"../hooks/index.js\";\n\nconst { defineElement, property } = createDecorators();\n\n/**\n * 构件 `data-view.progress-bar-list`\n */\nexport\n@defineElement(\"data-view.progress-bar-list\", {\n  styleTexts: [styleText],\n})\nclass ProgressBarList extends ReactNextElement {\n  /**\n   * @default\n   * @required\n   * @description 数据\n   */\n  @property({\n    attribute: false,\n  })\n  accessor dataSource: Data[];\n  render() {\n    return <ProgressBarListComponent dataSource={this.dataSource} />;\n  }\n}\n\nexport interface ProgressBarListProps {\n  dataSource: Data[];\n  // Define props here.\n}\ninterface Data {\n  title: string;\n  count: number;\n  loopBackground?: CSSProperties[\"background\"];\n  barBackground?: CSSProperties[\"background\"];\n}\nexport function ProgressBarListComponent(props: ProgressBarListProps) {\n  const { dataSource = [] } = props;\n  const [barWidth, setBarWidth] = useState<number>();\n  const [list, setList] = useState<(Data & { width: number })[]>([]);\n  const [containerRef, { clientWidth }] = useResizeObserver<HTMLDivElement>();\n  useEffect(() => {\n    const element = containerRef.current;\n    if (element) {\n      setBarWidth(clientWidth - 225);\n    }\n  }, [clientWidth]);\n  useEffect(() => {\n    if (barWidth && dataSource.length) {\n      const maxData = maxBy(dataSource, \"count\");\n      setList(\n        dataSource.map((i) => ({\n          ...i,\n          width: (barWidth * i.count) / maxData.count,\n        }))\n      );\n    }\n  }, [dataSource, barWidth]);\n  return (\n    <div className=\"container\" ref={containerRef}>\n      {list.map((i, index) => (\n        <div className=\"outermostContainer\" key={index}>\n          <div className=\"titleText\">{i.title}</div>\n          <div className=\"innerBarContainer\">\n            <div\n              className=\"barContainer\"\n              style={{\n                width: i.width,\n                left: -i.width,\n                background:\n                  i.barBackground ||\n                  \"linear-gradient( 90deg, rgba(66,130,237,0) 0%, #4282ED 100%)\",\n              }}\n            >\n              <div\n                className=\"smallLoop\"\n                style={{\n                  background: i.loopBackground || \"#4282ED\",\n                }}\n              ></div>\n\n              <div\n                style={{\n                  border: `1px solid ${i.loopBackground || \"#4282ED\"}`,\n                }}\n                className=\"bigLoop\"\n              ></div>\n            </div>\n            <div\n              className=\"barBgContent\"\n              style={{\n                width: barWidth,\n              }}\n            ></div>\n          </div>\n\n          <div className=\"countText\">{i.count}</div>\n        </div>\n      ))}\n    </div>\n  );\n}\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{display:flex}:host([hidden]){display:none}.countText{width:100px;margin-left:9px;color:#8fabbf;font-size:12px;word-break:break-all}.barBgContent{position:absolute;background:rgba(83,105,128,0.15);top:8px;height:6px}.bigLoop{position:absolute;right:-7.5px;top:-8px;border-radius:50%;width:20px;height:20px;animation:scale 2s infinite}.smallLoop{width:8px;height:8px;border-radius:50%;position:absolute;right:-1px;top:-1px}.barContainer{position:absolute;min-width:14px;top:8px;animation:move 2s linear forwards;height:6px}.container{width:100%;min-width:300px;display:grid}.outermostContainer{display:flex;align-items:center;flex-flow:row wrap;min-height:22px}.titleText{width:100px;text-align:end;color:#8fabbf;font-size:12px;margin-right:9px;word-break:break-all}.innerBarContainer{position:relative;overflow-y:auto;overflow-x:hidden;min-height:22px;flex:1 1 0}@keyframes move{to{left:0%}}@keyframes scale{from{transform:scale(0.5)}to{transform:scale(1)}}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n"],"names":["elementListeners","Map","resizeObserver","ResizeObserver","entries","forEach","entry","_elementListeners$get","target","get","callback","observe","element","has","set","Set","add","unobserve","delete","size","useResizeObserver","props","targetRef","onResize","localRef","useRef","ref","setSize","useState","clientWidth","clientHeight","handleResize","useCallback","prev","useEffect","current","Element","Error","usePrevious","data","defineElement","property","createDecorators","_ProgressBarList","_A","WeakMap","ProgressBarList","ReactNextElement","constructor","arguments","_classPrivateFieldInitSpec","_init_dataSource","_init_extra_dataSource","dataSource","_classPrivateFieldGet","v","_classPrivateFieldSet","render","React","ProgressBarListComponent","this","barWidth","setBarWidth","list","setList","containerRef","length","maxData","maxBy","map","i","width","count","className","index","key","title","style","left","background","barBackground","loopBackground","border","_ProgressBarList2","e","c","_initClass","_applyDecs","styleTexts","styleText","attribute","___CSS_LOADER_EXPORT___","push","module","id","toString"],"sourceRoot":""}
+{"version":3,"file":"chunks/progress-bar-list.ddeaf614.js","mappings":"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","sources":["webpack:///./src/hooks/useResizeObserver/resizeObserverUtil.ts","webpack:///./src/hooks/useResizeObserver/index.ts","webpack:///./src/hooks/usePrevious/index.ts","webpack:///./src/progress-bar-list/index.tsx","webpack:///./src/progress-bar-list/styles.shadow.css"],"sourcesContent":["import ResizeObserver from \"resize-observer-polyfill\";\n\nexport type ResizeCallback = (entry: ResizeObserverEntry) => void;\n\nconst elementListeners = new Map<Element, Set<ResizeCallback>>();\n\nexport const elementListeners_only_for_test =\n  process.env.NODE_ENV === \"test\"\n    ? elementListeners\n    : /* istanbul ignore next */ null;\n\nconst resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {\n  entries.forEach((entry) => {\n    const { target } = entry;\n    elementListeners.get(target)?.forEach((callback) => callback(entry));\n  });\n};\n\nconst resizeObserver: ResizeObserver = new (ResizeObserver as any)(resizeObserverCallback);\n\nexport const observe = (element: Element, callback: ResizeCallback): void => {\n  if (!elementListeners.has(element)) {\n    elementListeners.set(element, new Set());\n    resizeObserver.observe(element);\n  }\n\n  elementListeners.get(element).add(callback);\n};\n\nexport const unobserve = (element: Element, callback: ResizeCallback): void => {\n  if (elementListeners.has(element)) {\n    elementListeners.get(element).delete(callback);\n\n    if (elementListeners.get(element).size === 0) {\n      resizeObserver.unobserve(element);\n      elementListeners.delete(element);\n    }\n  }\n};\n","import {\n  useState,\n  useCallback,\n  useRef,\n  type RefObject,\n  useEffect,\n} from \"react\";\nimport { observe, unobserve } from \"./resizeObserverUtil.js\";\n\ninterface ElementSize {\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport interface ResizeObserveProps<T extends Element = Element> {\n  targetRef?: RefObject<T>;\n  onResize?: (size: ResizeObserverEntry) => void;\n}\n\nexport function useResizeObserver<T extends Element = Element>(\n  props?: ResizeObserveProps<T>\n): [RefObject<T>, ElementSize] {\n  const {\n    targetRef,\n    onResize,\n  } = props || {};\n\n  const localRef = useRef<T>();\n  const ref = targetRef ?? localRef;\n  const [size, setSize] = useState<ElementSize>({ clientWidth: 0, clientHeight: 0 });\n\n  const handleResize = useCallback(\n    (entry: ResizeObserverEntry) => {\n      const { target } = entry;\n      const { clientWidth = 0, clientHeight = 0 } = target;\n\n      setSize((prev) => {\n        // skip if same size\n        if (prev.clientWidth === clientWidth && prev.clientHeight === clientHeight) {\n          return prev;\n        }\n\n        onResize?.(entry);\n\n        return { clientWidth, clientHeight };\n      });\n    },\n    [onResize]\n  );\n\n  useEffect(() => {\n    if (\n      typeof ref !== \"object\" ||\n      ref === null ||\n      !(ref.current instanceof Element)\n    ) {\n      throw new Error(\"ResizeObserver must observe an Element\");\n    }\n\n    const element = ref.current;\n    observe(element, handleResize);\n\n    return () => {\n      unobserve(element, handleResize);\n    };\n  }, [handleResize, ref]);\n\n  return [ref, { ...size }];\n}\n","import {useRef, useEffect} from 'react';\nexport  function usePrevious<T>(data?: T):T|undefined{\n    const ref = useRef<T>();\n    useEffect(()=>{\n        ref.current = data\n    })\n    return ref.current;\n}\n","import React, { useEffect, useState, CSSProperties } from \"react\";\nimport { createDecorators } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport \"@next-core/theme\";\nimport styleText from \"./styles.shadow.css\";\n\nimport { maxBy } from \"lodash\";\nimport { useResizeObserver } from \"../hooks/index.js\";\n\nconst { defineElement, property } = createDecorators();\n\n/**\n * 构件 `data-view.progress-bar-list`\n */\nexport\n@defineElement(\"data-view.progress-bar-list\", {\n  styleTexts: [styleText],\n})\nclass ProgressBarList extends ReactNextElement {\n  /**\n   * @default\n   * @required\n   * @description 数据\n   */\n  @property({\n    attribute: false,\n  })\n  accessor dataSource: Data[];\n  render() {\n    return <ProgressBarListComponent dataSource={this.dataSource} />;\n  }\n}\n\nexport interface ProgressBarListProps {\n  dataSource: Data[];\n  // Define props here.\n}\ninterface Data {\n  title: string;\n  count: number;\n  loopBackground?: CSSProperties[\"background\"];\n  barBackground?: CSSProperties[\"background\"];\n}\nexport function ProgressBarListComponent(props: ProgressBarListProps) {\n  const { dataSource = [] } = props;\n  const [barWidth, setBarWidth] = useState<number>();\n  const [list, setList] = useState<(Data & { width: number })[]>([]);\n  const [containerRef, { clientWidth }] = useResizeObserver<HTMLDivElement>();\n  useEffect(() => {\n    const element = containerRef.current;\n    if (element) {\n      setBarWidth(clientWidth - 225);\n    }\n  }, [clientWidth]);\n  useEffect(() => {\n    if (barWidth && dataSource.length) {\n      const maxData = maxBy(dataSource, \"count\");\n      setList(\n        dataSource.map((i) => ({\n          ...i,\n          width: (barWidth * i.count) / maxData.count,\n        }))\n      );\n    }\n  }, [dataSource, barWidth]);\n  return (\n    <div className=\"container\" ref={containerRef}>\n      {list.map((i, index) => (\n        <div className=\"outermostContainer\" key={index}>\n          <div className=\"titleText\">{i.title}</div>\n          <div className=\"innerBarContainer\">\n            <div\n              className=\"barContainer\"\n              style={{\n                width: i.width,\n                left: -i.width,\n                background:\n                  i.barBackground ||\n                  \"linear-gradient( 90deg, rgba(66,130,237,0) 0%, #4282ED 100%)\",\n              }}\n            >\n              <div\n                className=\"smallLoop\"\n                style={{\n                  background: i.loopBackground || \"#4282ED\",\n                }}\n              ></div>\n\n              <div\n                style={{\n                  border: `1px solid ${i.loopBackground || \"#4282ED\"}`,\n                }}\n                className=\"bigLoop\"\n              ></div>\n            </div>\n            <div\n              className=\"barBgContent\"\n              style={{\n                width: barWidth,\n              }}\n            ></div>\n          </div>\n\n          <div className=\"countText\">{i.count}</div>\n        </div>\n      ))}\n    </div>\n  );\n}\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{display:flex}:host([hidden]){display:none}.countText{width:100px;margin-left:9px;color:#8fabbf;font-size:12px;word-break:break-all}.barBgContent{position:absolute;background:rgba(83,105,128,0.15);top:8px;height:6px}.bigLoop{position:absolute;right:-7.5px;top:-8px;border-radius:50%;width:20px;height:20px;animation:scale 2s infinite}.smallLoop{width:8px;height:8px;border-radius:50%;position:absolute;right:-1px;top:-1px}.barContainer{position:absolute;min-width:14px;top:8px;animation:move 2s linear forwards;height:6px}.container{width:100%;min-width:300px;display:grid}.outermostContainer{display:flex;align-items:center;flex-flow:row wrap;min-height:22px}.titleText{width:100px;text-align:right;color:#8fabbf;font-size:12px;margin-right:9px;word-break:break-all}.innerBarContainer{position:relative;overflow-y:auto;overflow-x:hidden;min-height:22px;flex:1 1 0}@keyframes move{to{left:0%}}@keyframes scale{from{transform:scale(0.5)}to{transform:scale(1)}}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n"],"names":["elementListeners","Map","resizeObserver","ResizeObserver","entries","forEach","entry","_elementListeners$get","target","get","callback","observe","element","has","set","Set","add","unobserve","delete","size","useResizeObserver","props","targetRef","onResize","localRef","useRef","ref","setSize","useState","clientWidth","clientHeight","handleResize","useCallback","prev","useEffect","current","Element","Error","usePrevious","data","defineElement","property","createDecorators","_ProgressBarList","_A","WeakMap","ProgressBarList","ReactNextElement","constructor","arguments","_classPrivateFieldInitSpec","_init_dataSource","_init_extra_dataSource","dataSource","_classPrivateFieldGet","v","_classPrivateFieldSet","render","React","ProgressBarListComponent","this","barWidth","setBarWidth","list","setList","containerRef","length","maxData","maxBy","map","i","width","count","className","index","key","title","style","left","background","barBackground","loopBackground","border","_ProgressBarList2","e","c","_initClass","_applyDecs","styleTexts","styleText","attribute","___CSS_LOADER_EXPORT___","push","module","id","toString"],"sourceRoot":""}

package/dist/examples.json

@@ -2,30 +2,30 @@
   "data-view.gauge-chart": {
     "doc": "大屏仪表盘构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.gauge-chart\n  properties:\n    value: 100\n    radius: 180\n    strokeWidth: 20\n    description: 已部署 1490 个 / 3300个\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 已部署 1490 个 / 3300个\n            style:\n              font-size: 16px\n              font-weight: 500\n              color: \"#fff\"\n              margin: 0 0 300px 0\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.gauge-chart\n#   value=\"100\"\n#   radius=\"180\"\n#   stroke-width=\"20\"\n#   description=\"已部署 1490 个 / 3300个\"\n# >\n#   <div\n#     style=\"font-size: 16px; font-weight: 500; color: #fff; margin: 0 0 300px 0\"\n#   >\n#     已部署 1490 个 / 3300个\n#   </div>\n# </data-view.gauge-chart>\n# \n```\n"
   },
+  "data-view.modern-style-page-title": {
+    "doc": "现代风格的页面标题构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.modern-style-page-title\n  properties:\n    pageTitle: XX应用大屏\n    description: \"- APPLICATION HEALTH MONITORING SCREEN -\"\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-page-title\n#   page-title=\"XX应用大屏\"\n#   description=\"- APPLICATION HEALTH MONITORING SCREEN -\"\n#   style=\"display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-page-title>\n# \n```\n"
+  },
+  "data-view.modern-style-component-title": {
+    "doc": "现代风格的组件标题\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-component-title>\n# \n```\n\n### TitleSuffix && Toolbar slot\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n  slots:\n    toolbar:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: toolbar\n    titleSuffix:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: titleSuffix\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# >\n#   <span slot=\"toolbar\">toolbar</span>\n#   <span slot=\"titleSuffix\">titleSuffix</span>\n# </data-view.modern-style-component-title>\n# \n```\n\n### hideRightComponent\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    hideRightComponent: false\n    hideLeftComponent: true\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   hide-right-component=\"false\"\n#   hide-left-component=\"true\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-component-title>\n# \n```\n"
+  },
   "data-view.tabs-drawer": {
     "doc": "data-view.tabs-drawer\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.tabs-drawer\n  properties:\n    activeKey: search\n    id: drawer\n    visible: true\n    width: 800\n    style:\n      height: 600px\n      display: block\n    tabList:\n      - tooltip: 搜索\n        key: search\n        icon:\n          lib: fa\n          icon: search\n          prefix: fas\n      - tooltip: 内容\n        key: app\n        icon:\n          lib: easyops\n          category: app\n          icon: micro-app-configuration\n\n      - tooltip: 图表\n        key: chart\n        icon:\n          lib: fa\n          icon: ad\n          prefix: fas\n  slots:\n    search:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            style:\n              padding: 0 16px\n              height: 100px\n              background: red\n            textContent: 测试\n    app:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 内容区域\n            style:\n              background: yellow\n              height: 100px\n    chart:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 图表区域\n            style:\n              background: green\n              height: 100px\n  events:\n    close:\n      - action: console.log\n    tab.change:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.tabs-drawer\n#   active-key=\"search\"\n#   visible\n#   style=\"height: 600px; display: block\"\n#   id=\"drawer\"\n# >\n#   <div slot=\"search\" style=\"padding: 0 16px; height: 100px; background: red\">\n#     测试\n#   </div>\n#   <div slot=\"app\" style=\"background: yellow; height: 100px\">内容区域</div>\n#   <div slot=\"chart\" style=\"background: green; height: 100px\">图表区域</div>\n# </data-view.tabs-drawer>\n# \n# <script>\n#   const drawer = document.getElementById(\"drawer\");\n#   drawer.width = 800;\n#   drawer.tabList = [\n#     {\n#       tooltip: \"搜索\",\n#       key: \"search\",\n#       icon: {\n#         lib: \"fa\",\n#         icon: \"search\",\n#         prefix: \"fas\",\n#       },\n#     },\n#     {\n#       tooltip: \"内容\",\n#       key: \"app\",\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"app\",\n#         icon: \"micro-app-configuration\",\n#       },\n#     },\n#     {\n#       tooltip: \"图表\",\n#       key: \"chart\",\n#       icon: {\n#         lib: \"fa\",\n#         icon: \"ad\",\n#         prefix: \"fas\",\n#       },\n#     },\n#   ];\n#   drawer.addEventListener(\"close\", (e) => {\n#     console.log(e.detail);\n#   });\n#   drawer.addEventListener(\"tab.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "data-view.modern-style-treemap": {
     "doc": "data-view.modern-style-treemap\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.modern-style-treemap\n  properties:\n    data:\n      name: flare\n      children:\n        - name: analytics\n          children:\n            - name: cluster\n              children:\n                - name: AgglomerativeCluster\n                  value: 3938\n                - name: CommunityStructure\n                  value: 3812\n                - name: HierarchicalCluster\n                  value: 6714\n                - name: MergeEdge\n                  value: 743\n            - name: graph\n              children:\n                - name: BetweennessCentrality\n                  value: 3534\n                - name: LinkDistance\n                  value: 5731\n                - name: MaxFlowMinCut\n                  value: 7840\n                - name: ShortestPaths\n                  value: 5914\n                - name: SpanningTree\n                  value: 3416\n            - name: optimization\n              children:\n                - name: AspectRatioBanker\n                  value: 7074\n        - name: animate\n          children:\n            - name: Easing\n              value: 17010\n            - name: FunctionSequence\n              value: 5842\n            - name: interpolate\n              children:\n                - name: ArrayInterpolator\n                  value: 1983\n                - name: ColorInterpolator\n                  value: 2047\n                - name: DateInterpolator\n                  value: 1375\n                - name: Interpolator\n                  value: 8746\n                - name: MatrixInterpolator\n                  value: 2202\n                - name: NumberInterpolator\n                  value: 1382\n                - name: ObjectInterpolator\n                  value: 1629\n                - name: PointInterpolator\n                  value: 1675\n                - name: RectangleInterpolator\n                  value: 2042\n            - name: ISchedulable\n              value: 1041\n            - name: Parallel\n              value: 5176\n            - name: Pause\n              value: 449\n            - name: Scheduler\n              value: 5593\n            - name: Sequence\n              value: 5534\n            - name: Transition\n              value: 9201\n            - name: Transitioner\n              value: 19975\n            - name: TransitionEvent\n              value: 1116\n            - name: Tween\n              value: 6006\n        - name: data\n          children:\n            - name: converters\n              children:\n                - name: Converters\n                  value: 721\n                - name: DelimitedTextConverter\n                  value: 4294\n                - name: GraphMLConverter\n                  value: 9800\n                - name: IDataConverter\n                  value: 1314\n                - name: JSONConverter\n                  value: 2220\n            - name: DataField\n              value: 1759\n            - name: DataSchema\n              value: 2165\n            - name: DataSet\n              value: 586\n            - name: DataSource\n              value: 3331\n            - name: DataTable\n              value: 772\n            - name: DataUtil\n              value: 3322\n        - name: display\n          children:\n            - name: DirtySprite\n              value: 8833\n            - name: LineSprite\n              value: 1732\n            - name: RectSprite\n              value: 3623\n            - name: TextSprite\n              value: 10066\n        - name: flex\n          children:\n            - name: FlareVis\n              value: 4116\n        - name: physics\n          children:\n            - name: DragForce\n              value: 1082\n            - name: GravityForce\n              value: 1336\n            - name: IForce\n              value: 319\n            - name: NBodyForce\n              value: 10498\n            - name: Particle\n              value: 2822\n            - name: Simulation\n              value: 9983\n            - name: Spring\n              value: 2213\n            - name: SpringForce\n              value: 1681\n        - name: query\n          children:\n            - name: AggregateExpression\n              value: 1616\n            - name: And\n              value: 1027\n            - name: Arithmetic\n              value: 3891\n            - name: Average\n              value: 891\n            - name: BinaryExpression\n              value: 2893\n            - name: Comparison\n              value: 5103\n            - name: CompositeExpression\n              value: 3677\n            - name: Count\n              value: 781\n            - name: DateUtil\n              value: 4141\n            - name: Distinct\n              value: 933\n            - name: Expression\n              value: 5130\n            - name: ExpressionIterator\n              value: 3617\n            - name: Fn\n              value: 3240\n            - name: If\n              value: 2732\n            - name: IsA\n              value: 2039\n            - name: Literal\n              value: 1214\n            - name: Match\n              value: 3748\n            - name: Maximum\n              value: 843\n            - name: methods\n              children:\n                - name: add\n                  value: 593\n                - name: and\n                  value: 330\n                - name: average\n                  value: 287\n                - name: count\n                  value: 277\n                - name: distinct\n                  value: 292\n                - name: div\n                  value: 595\n                - name: eq\n                  value: 594\n                - name: fn\n                  value: 460\n                - name: gt\n                  value: 603\n                - name: gte\n                  value: 625\n                - name: iff\n                  value: 748\n                - name: isa\n                  value: 461\n                - name: lt\n                  value: 597\n                - name: lte\n                  value: 619\n                - name: max\n                  value: 283\n                - name: min\n                  value: 283\n                - name: mod\n                  value: 591\n                - name: mul\n                  value: 603\n                - name: neq\n                  value: 599\n                - name: not\n                  value: 386\n                - name: or\n                  value: 323\n                - name: orderby\n                  value: 307\n                - name: range\n                  value: 772\n                - name: select\n                  value: 296\n                - name: stddev\n                  value: 363\n                - name: sub\n                  value: 600\n                - name: sum\n                  value: 280\n                - name: update\n                  value: 307\n                - name: variance\n                  value: 335\n                - name: where\n                  value: 299\n                - name: xor\n                  value: 354\n                - name: _\n                  value: 264\n            - name: Minimum\n              value: 843\n            - name: Not\n              value: 1554\n            - name: Or\n              value: 970\n            - name: Query\n              value: 13896\n            - name: Range\n              value: 1594\n            - name: StringUtil\n              value: 4130\n            - name: Sum\n              value: 791\n            - name: Variable\n              value: 1124\n            - name: Variance\n              value: 1876\n            - name: Xor\n              value: 1101\n        - name: scale\n          children:\n            - name: IScaleMap\n              value: 2105\n            - name: LinearScale\n              value: 1316\n            - name: LogScale\n              value: 3151\n            - name: OrdinalScale\n              value: 3770\n            - name: QuantileScale\n              value: 2435\n            - name: QuantitativeScale\n              value: 4839\n            - name: RootScale\n              value: 1756\n            - name: Scale\n              value: 4268\n            - name: ScaleType\n              value: 1821\n            - name: TimeScale\n              value: 5833\n        - name: util\n          children:\n            - name: Arrays\n              value: 8258\n            - name: Colors\n              value: 10001\n            - name: Dates\n              value: 8217\n            - name: Displays\n              value: 12555\n            - name: Filter\n              value: 2324\n            - name: Geometry\n              value: 10993\n            - name: heap\n              children:\n                - name: FibonacciHeap\n                  value: 9354\n                - name: HeapNode\n                  value: 1233\n            - name: IEvaluable\n              value: 335\n            - name: IPredicate\n              value: 383\n            - name: IValueProxy\n              value: 874\n            - name: math\n              children:\n                - name: DenseMatrix\n                  value: 3165\n                - name: IMatrix\n                  value: 2815\n                - name: SparseMatrix\n                  value: 3366\n            - name: Maths\n              value: 17705\n            - name: Orientation\n              value: 1486\n            - name: palette\n              children:\n                - name: ColorPalette\n                  value: 6367\n                - name: Palette\n                  value: 1229\n                - name: ShapePalette\n                  value: 2059\n                - name: SizePalette\n                  value: 2291\n            - name: Property\n              value: 5559\n            - name: Shapes\n              value: 19118\n            - name: Sort\n              value: 6887\n            - name: Stats\n              value: 6557\n            - name: Strings\n              value: 22026\n        - name: vis\n          children:\n            - name: axis\n              children:\n                - name: Axes\n                  value: 1302\n                - name: Axis\n                  value: 24593\n                - name: AxisGridLine\n                  value: 652\n                - name: AxisLabel\n                  value: 636\n                - name: CartesianAxes\n                  value: 6703\n            - name: controls\n              children:\n                - name: AnchorControl\n                  value: 2138\n                - name: ClickControl\n                  value: 3824\n                - name: Control\n                  value: 1353\n                - name: ControlList\n                  value: 4665\n                - name: DragControl\n                  value: 2649\n                - name: ExpandControl\n                  value: 2832\n                - name: HoverControl\n                  value: 4896\n                - name: IControl\n                  value: 763\n                - name: PanZoomControl\n                  value: 5222\n                - name: SelectionControl\n                  value: 7862\n                - name: TooltipControl\n                  value: 8435\n            - name: data\n              children:\n                - name: Data\n                  value: 20544\n                - name: DataList\n                  value: 19788\n                - name: DataSprite\n                  value: 10349\n                - name: EdgeSprite\n                  value: 3301\n                - name: NodeSprite\n                  value: 19382\n                - name: render\n                  children:\n                    - name: ArrowType\n                      value: 698\n                    - name: EdgeRenderer\n                      value: 5569\n                    - name: IRenderer\n                      value: 353\n                    - name: ShapeRenderer\n                      value: 2247\n                - name: ScaleBinding\n                  value: 11275\n                - name: Tree\n                  value: 7147\n                - name: TreeBuilder\n                  value: 9930\n            - name: events\n              children:\n                - name: DataEvent\n                  value: 2313\n                - name: SelectionEvent\n                  value: 1880\n                - name: TooltipEvent\n                  value: 1701\n                - name: VisualizationEvent\n                  value: 1117\n            - name: legend\n              children:\n                - name: Legend\n                  value: 20859\n                - name: LegendItem\n                  value: 4614\n                - name: LegendRange\n                  value: 10530\n            - name: operator\n              children:\n                - name: distortion\n                  children:\n                    - name: BifocalDistortion\n                      value: 4461\n                    - name: Distortion\n                      value: 6314\n                    - name: FisheyeDistortion\n                      value: 3444\n                - name: encoder\n                  children:\n                    - name: ColorEncoder\n                      value: 3179\n                    - name: Encoder\n                      value: 4060\n                    - name: PropertyEncoder\n                      value: 4138\n                    - name: ShapeEncoder\n                      value: 1690\n                    - name: SizeEncoder\n                      value: 1830\n                - name: filter\n                  children:\n                    - name: FisheyeTreeFilter\n                      value: 5219\n                    - name: GraphDistanceFilter\n                      value: 3165\n                    - name: VisibilityFilter\n                      value: 3509\n                - name: IOperator\n                  value: 1286\n                - name: label\n                  children:\n                    - name: Labeler\n                      value: 9956\n                    - name: RadialLabeler\n                      value: 3899\n                    - name: StackedAreaLabeler\n                      value: 3202\n                - name: layout\n                  children:\n                    - name: AxisLayout\n                      value: 6725\n                    - name: BundledEdgeRouter\n                      value: 3727\n                    - name: CircleLayout\n                      value: 9317\n                    - name: CirclePackingLayout\n                      value: 12003\n                    - name: DendrogramLayout\n                      value: 4853\n                    - name: ForceDirectedLayout\n                      value: 8411\n                    - name: IcicleTreeLayout\n                      value: 4864\n                    - name: IndentedTreeLayout\n                      value: 3174\n                    - name: Layout\n                      value: 7881\n                    - name: NodeLinkTreeLayout\n                      value: 12870\n                    - name: PieLayout\n                      value: 2728\n                    - name: RadialTreeLayout\n                      value: 12348\n                    - name: RandomLayout\n                      value: 870\n                    - name: StackedAreaLayout\n                      value: 9121\n                    - name: TreeMapLayout\n                      value: 9191\n                - name: Operator\n                  value: 2490\n                - name: OperatorList\n                  value: 5248\n                - name: OperatorSequence\n                  value: 4190\n                - name: OperatorSwitch\n                  value: 2581\n                - name: SortOperator\n                  value: 2023\n            - name: Visualization\n              value: 16540\n    style:\n      width: 100%\n      height: 800px\n      display: block\n      background-color: \"#1c1e21\"\n    tooltipUseBrick:\n      useBrick:\n        brick: span\n        properties:\n          textContent: <% DATA.data?.name %>\n    leafUseBrick:\n      useBrick:\n        - if: <% DATA.x1 - DATA.x0 > 70 && DATA.y1 - DATA.y0 > 100 %>\n          brick: div\n          properties:\n            style:\n              padding: \"8px 6px\"\n          slots:\n            \"\":\n              type: bricks\n              bricks:\n                - brick: div\n                  properties:\n                    textContent: <% DATA.data.name %>\n                    style:\n                      \"font-size\": \"20px\"\n                      \"font-weight\": 500\n                      color: \"#FFFFFF\"\n                      \"line-height\": \"28px\"\n                      \"text-shadow\": \"0px 1px 4px #3366FF\"\n                      overflow: \"hidden\"\n                      \"white-space\": \"nowrap\"\n                      \"text-overflow\": \"ellipsis\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-treemap\n#   style=\"width: 100%; height: 800px; display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.modern-style-treemap>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = {\n#     name: \"flare\",\n#     children: [\n#       {\n#         name: \"analytics\",\n#         children: [\n#           {\n#             name: \"cluster\",\n#             children: [\n#               {\n#                 name: \"AgglomerativeCluster\",\n#                 value: 3938,\n#               },\n#               {\n#                 name: \"CommunityStructure\",\n#                 value: 3812,\n#               },\n#               {\n#                 name: \"HierarchicalCluster\",\n#                 value: 6714,\n#               },\n#               {\n#                 name: \"MergeEdge\",\n#                 value: 743,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"graph\",\n#             children: [\n#               {\n#                 name: \"BetweennessCentrality\",\n#                 value: 3534,\n#               },\n#               {\n#                 name: \"LinkDistance\",\n#                 value: 5731,\n#               },\n#               {\n#                 name: \"MaxFlowMinCut\",\n#                 value: 7840,\n#               },\n#               {\n#                 name: \"ShortestPaths\",\n#                 value: 5914,\n#               },\n#               {\n#                 name: \"SpanningTree\",\n#                 value: 3416,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"optimization\",\n#             children: [\n#               {\n#                 name: \"AspectRatioBanker\",\n#                 value: 7074,\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#       {\n#         name: \"animate\",\n#         children: [\n#           {\n#             name: \"Easing\",\n#             value: 17010,\n#           },\n#           {\n#             name: \"FunctionSequence\",\n#             value: 5842,\n#           },\n#           {\n#             name: \"interpolate\",\n#             children: [\n#               {\n#                 name: \"ArrayInterpolator\",\n#                 value: 1983,\n#               },\n#               {\n#                 name: \"ColorInterpolator\",\n#                 value: 2047,\n#               },\n#               {\n#                 name: \"DateInterpolator\",\n#                 value: 1375,\n#               },\n#               {\n#                 name: \"Interpolator\",\n#                 value: 8746,\n#               },\n#               {\n#                 name: \"MatrixInterpolator\",\n#                 value: 2202,\n#               },\n#               {\n#                 name: \"NumberInterpolator\",\n#                 value: 1382,\n#               },\n#               {\n#                 name: \"ObjectInterpolator\",\n#                 value: 1629,\n#               },\n#               {\n#                 name: \"PointInterpolator\",\n#                 value: 1675,\n#               },\n#               {\n#                 name: \"RectangleInterpolator\",\n#                 value: 2042,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"ISchedulable\",\n#             value: 1041,\n#           },\n#           {\n#             name: \"Parallel\",\n#             value: 5176,\n#           },\n#           {\n#             name: \"Pause\",\n#             value: 449,\n#           },\n#           {\n#             name: \"Scheduler\",\n#             value: 5593,\n#           },\n#           {\n#             name: \"Sequence\",\n#             value: 5534,\n#           },\n#           {\n#             name: \"Transition\",\n#             value: 9201,\n#           },\n#           {\n#             name: \"Transitioner\",\n#             value: 19975,\n#           },\n#           {\n#             name: \"TransitionEvent\",\n#             value: 1116,\n#           },\n#           {\n#             name: \"Tween\",\n#             value: 6006,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"data\",\n#         children: [\n#           {\n#             name: \"converters\",\n#             children: [\n#               {\n#                 name: \"Converters\",\n#                 value: 721,\n#               },\n#               {\n#                 name: \"DelimitedTextConverter\",\n#                 value: 4294,\n#               },\n#               {\n#                 name: \"GraphMLConverter\",\n#                 value: 9800,\n#               },\n#               {\n#                 name: \"IDataConverter\",\n#                 value: 1314,\n#               },\n#               {\n#                 name: \"JSONConverter\",\n#                 value: 2220,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"DataField\",\n#             value: 1759,\n#           },\n#           {\n#             name: \"DataSchema\",\n#             value: 2165,\n#           },\n#           {\n#             name: \"DataSet\",\n#             value: 586,\n#           },\n#           {\n#             name: \"DataSource\",\n#             value: 3331,\n#           },\n#           {\n#             name: \"DataTable\",\n#             value: 772,\n#           },\n#           {\n#             name: \"DataUtil\",\n#             value: 3322,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"display\",\n#         children: [\n#           {\n#             name: \"DirtySprite\",\n#             value: 8833,\n#           },\n#           {\n#             name: \"LineSprite\",\n#             value: 1732,\n#           },\n#           {\n#             name: \"RectSprite\",\n#             value: 3623,\n#           },\n#           {\n#             name: \"TextSprite\",\n#             value: 10066,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"flex\",\n#         children: [\n#           {\n#             name: \"FlareVis\",\n#             value: 4116,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"physics\",\n#         children: [\n#           {\n#             name: \"DragForce\",\n#             value: 1082,\n#           },\n#           {\n#             name: \"GravityForce\",\n#             value: 1336,\n#           },\n#           {\n#             name: \"IForce\",\n#             value: 319,\n#           },\n#           {\n#             name: \"NBodyForce\",\n#             value: 10498,\n#           },\n#           {\n#             name: \"Particle\",\n#             value: 2822,\n#           },\n#           {\n#             name: \"Simulation\",\n#             value: 9983,\n#           },\n#           {\n#             name: \"Spring\",\n#             value: 2213,\n#           },\n#           {\n#             name: \"SpringForce\",\n#             value: 1681,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"query\",\n#         children: [\n#           {\n#             name: \"AggregateExpression\",\n#             value: 1616,\n#           },\n#           {\n#             name: \"And\",\n#             value: 1027,\n#           },\n#           {\n#             name: \"Arithmetic\",\n#             value: 3891,\n#           },\n#           {\n#             name: \"Average\",\n#             value: 891,\n#           },\n#           {\n#             name: \"BinaryExpression\",\n#             value: 2893,\n#           },\n#           {\n#             name: \"Comparison\",\n#             value: 5103,\n#           },\n#           {\n#             name: \"CompositeExpression\",\n#             value: 3677,\n#           },\n#           {\n#             name: \"Count\",\n#             value: 781,\n#           },\n#           {\n#             name: \"DateUtil\",\n#             value: 4141,\n#           },\n#           {\n#             name: \"Distinct\",\n#             value: 933,\n#           },\n#           {\n#             name: \"Expression\",\n#             value: 5130,\n#           },\n#           {\n#             name: \"ExpressionIterator\",\n#             value: 3617,\n#           },\n#           {\n#             name: \"Fn\",\n#             value: 3240,\n#           },\n#           {\n#             name: \"If\",\n#             value: 2732,\n#           },\n#           {\n#             name: \"IsA\",\n#             value: 2039,\n#           },\n#           {\n#             name: \"Literal\",\n#             value: 1214,\n#           },\n#           {\n#             name: \"Match\",\n#             value: 3748,\n#           },\n#           {\n#             name: \"Maximum\",\n#             value: 843,\n#           },\n#           {\n#             name: \"methods\",\n#             children: [\n#               {\n#                 name: \"add\",\n#                 value: 593,\n#               },\n#               {\n#                 name: \"and\",\n#                 value: 330,\n#               },\n#               {\n#                 name: \"average\",\n#                 value: 287,\n#               },\n#               {\n#                 name: \"count\",\n#                 value: 277,\n#               },\n#               {\n#                 name: \"distinct\",\n#                 value: 292,\n#               },\n#               {\n#                 name: \"div\",\n#                 value: 595,\n#               },\n#               {\n#                 name: \"eq\",\n#                 value: 594,\n#               },\n#               {\n#                 name: \"fn\",\n#                 value: 460,\n#               },\n#               {\n#                 name: \"gt\",\n#                 value: 603,\n#               },\n#               {\n#                 name: \"gte\",\n#                 value: 625,\n#               },\n#               {\n#                 name: \"iff\",\n#                 value: 748,\n#               },\n#               {\n#                 name: \"isa\",\n#                 value: 461,\n#               },\n#               {\n#                 name: \"lt\",\n#                 value: 597,\n#               },\n#               {\n#                 name: \"lte\",\n#                 value: 619,\n#               },\n#               {\n#                 name: \"max\",\n#                 value: 283,\n#               },\n#               {\n#                 name: \"min\",\n#                 value: 283,\n#               },\n#               {\n#                 name: \"mod\",\n#                 value: 591,\n#               },\n#               {\n#                 name: \"mul\",\n#                 value: 603,\n#               },\n#               {\n#                 name: \"neq\",\n#                 value: 599,\n#               },\n#               {\n#                 name: \"not\",\n#                 value: 386,\n#               },\n#               {\n#                 name: \"or\",\n#                 value: 323,\n#               },\n#               {\n#                 name: \"orderby\",\n#                 value: 307,\n#               },\n#               {\n#                 name: \"range\",\n#                 value: 772,\n#               },\n#               {\n#                 name: \"select\",\n#                 value: 296,\n#               },\n#               {\n#                 name: \"stddev\",\n#                 value: 363,\n#               },\n#               {\n#                 name: \"sub\",\n#                 value: 600,\n#               },\n#               {\n#                 name: \"sum\",\n#                 value: 280,\n#               },\n#               {\n#                 name: \"update\",\n#                 value: 307,\n#               },\n#               {\n#                 name: \"variance\",\n#                 value: 335,\n#               },\n#               {\n#                 name: \"where\",\n#                 value: 299,\n#               },\n#               {\n#                 name: \"xor\",\n#                 value: 354,\n#               },\n#               {\n#                 name: \"_\",\n#                 value: 264,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"Minimum\",\n#             value: 843,\n#           },\n#           {\n#             name: \"Not\",\n#             value: 1554,\n#           },\n#           {\n#             name: \"Or\",\n#             value: 970,\n#           },\n#           {\n#             name: \"Query\",\n#             value: 13896,\n#           },\n#           {\n#             name: \"Range\",\n#             value: 1594,\n#           },\n#           {\n#             name: \"StringUtil\",\n#             value: 4130,\n#           },\n#           {\n#             name: \"Sum\",\n#             value: 791,\n#           },\n#           {\n#             name: \"Variable\",\n#             value: 1124,\n#           },\n#           {\n#             name: \"Variance\",\n#             value: 1876,\n#           },\n#           {\n#             name: \"Xor\",\n#             value: 1101,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"scale\",\n#         children: [\n#           {\n#             name: \"IScaleMap\",\n#             value: 2105,\n#           },\n#           {\n#             name: \"LinearScale\",\n#             value: 1316,\n#           },\n#           {\n#             name: \"LogScale\",\n#             value: 3151,\n#           },\n#           {\n#             name: \"OrdinalScale\",\n#             value: 3770,\n#           },\n#           {\n#             name: \"QuantileScale\",\n#             value: 2435,\n#           },\n#           {\n#             name: \"QuantitativeScale\",\n#             value: 4839,\n#           },\n#           {\n#             name: \"RootScale\",\n#             value: 1756,\n#           },\n#           {\n#             name: \"Scale\",\n#             value: 4268,\n#           },\n#           {\n#             name: \"ScaleType\",\n#             value: 1821,\n#           },\n#           {\n#             name: \"TimeScale\",\n#             value: 5833,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"util\",\n#         children: [\n#           {\n#             name: \"Arrays\",\n#             value: 8258,\n#           },\n#           {\n#             name: \"Colors\",\n#             value: 10001,\n#           },\n#           {\n#             name: \"Dates\",\n#             value: 8217,\n#           },\n#           {\n#             name: \"Displays\",\n#             value: 12555,\n#           },\n#           {\n#             name: \"Filter\",\n#             value: 2324,\n#           },\n#           {\n#             name: \"Geometry\",\n#             value: 10993,\n#           },\n#           {\n#             name: \"heap\",\n#             children: [\n#               {\n#                 name: \"FibonacciHeap\",\n#                 value: 9354,\n#               },\n#               {\n#                 name: \"HeapNode\",\n#                 value: 1233,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"IEvaluable\",\n#             value: 335,\n#           },\n#           {\n#             name: \"IPredicate\",\n#             value: 383,\n#           },\n#           {\n#             name: \"IValueProxy\",\n#             value: 874,\n#           },\n#           {\n#             name: \"math\",\n#             children: [\n#               {\n#                 name: \"DenseMatrix\",\n#                 value: 3165,\n#               },\n#               {\n#                 name: \"IMatrix\",\n#                 value: 2815,\n#               },\n#               {\n#                 name: \"SparseMatrix\",\n#                 value: 3366,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"Maths\",\n#             value: 17705,\n#           },\n#           {\n#             name: \"Orientation\",\n#             value: 1486,\n#           },\n#           {\n#             name: \"palette\",\n#             children: [\n#               {\n#                 name: \"ColorPalette\",\n#                 value: 6367,\n#               },\n#               {\n#                 name: \"Palette\",\n#                 value: 1229,\n#               },\n#               {\n#                 name: \"ShapePalette\",\n#                 value: 2059,\n#               },\n#               {\n#                 name: \"SizePalette\",\n#                 value: 2291,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"Property\",\n#             value: 5559,\n#           },\n#           {\n#             name: \"Shapes\",\n#             value: 19118,\n#           },\n#           {\n#             name: \"Sort\",\n#             value: 6887,\n#           },\n#           {\n#             name: \"Stats\",\n#             value: 6557,\n#           },\n#           {\n#             name: \"Strings\",\n#             value: 22026,\n#           },\n#         ],\n#       },\n#       {\n#         name: \"vis\",\n#         children: [\n#           {\n#             name: \"axis\",\n#             children: [\n#               {\n#                 name: \"Axes\",\n#                 value: 1302,\n#               },\n#               {\n#                 name: \"Axis\",\n#                 value: 24593,\n#               },\n#               {\n#                 name: \"AxisGridLine\",\n#                 value: 652,\n#               },\n#               {\n#                 name: \"AxisLabel\",\n#                 value: 636,\n#               },\n#               {\n#                 name: \"CartesianAxes\",\n#                 value: 6703,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"controls\",\n#             children: [\n#               {\n#                 name: \"AnchorControl\",\n#                 value: 2138,\n#               },\n#               {\n#                 name: \"ClickControl\",\n#                 value: 3824,\n#               },\n#               {\n#                 name: \"Control\",\n#                 value: 1353,\n#               },\n#               {\n#                 name: \"ControlList\",\n#                 value: 4665,\n#               },\n#               {\n#                 name: \"DragControl\",\n#                 value: 2649,\n#               },\n#               {\n#                 name: \"ExpandControl\",\n#                 value: 2832,\n#               },\n#               {\n#                 name: \"HoverControl\",\n#                 value: 4896,\n#               },\n#               {\n#                 name: \"IControl\",\n#                 value: 763,\n#               },\n#               {\n#                 name: \"PanZoomControl\",\n#                 value: 5222,\n#               },\n#               {\n#                 name: \"SelectionControl\",\n#                 value: 7862,\n#               },\n#               {\n#                 name: \"TooltipControl\",\n#                 value: 8435,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"data\",\n#             children: [\n#               {\n#                 name: \"Data\",\n#                 value: 20544,\n#               },\n#               {\n#                 name: \"DataList\",\n#                 value: 19788,\n#               },\n#               {\n#                 name: \"DataSprite\",\n#                 value: 10349,\n#               },\n#               {\n#                 name: \"EdgeSprite\",\n#                 value: 3301,\n#               },\n#               {\n#                 name: \"NodeSprite\",\n#                 value: 19382,\n#               },\n#               {\n#                 name: \"render\",\n#                 children: [\n#                   {\n#                     name: \"ArrowType\",\n#                     value: 698,\n#                   },\n#                   {\n#                     name: \"EdgeRenderer\",\n#                     value: 5569,\n#                   },\n#                   {\n#                     name: \"IRenderer\",\n#                     value: 353,\n#                   },\n#                   {\n#                     name: \"ShapeRenderer\",\n#                     value: 2247,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"ScaleBinding\",\n#                 value: 11275,\n#               },\n#               {\n#                 name: \"Tree\",\n#                 value: 7147,\n#               },\n#               {\n#                 name: \"TreeBuilder\",\n#                 value: 9930,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"events\",\n#             children: [\n#               {\n#                 name: \"DataEvent\",\n#                 value: 2313,\n#               },\n#               {\n#                 name: \"SelectionEvent\",\n#                 value: 1880,\n#               },\n#               {\n#                 name: \"TooltipEvent\",\n#                 value: 1701,\n#               },\n#               {\n#                 name: \"VisualizationEvent\",\n#                 value: 1117,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"legend\",\n#             children: [\n#               {\n#                 name: \"Legend\",\n#                 value: 20859,\n#               },\n#               {\n#                 name: \"LegendItem\",\n#                 value: 4614,\n#               },\n#               {\n#                 name: \"LegendRange\",\n#                 value: 10530,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"operator\",\n#             children: [\n#               {\n#                 name: \"distortion\",\n#                 children: [\n#                   {\n#                     name: \"BifocalDistortion\",\n#                     value: 4461,\n#                   },\n#                   {\n#                     name: \"Distortion\",\n#                     value: 6314,\n#                   },\n#                   {\n#                     name: \"FisheyeDistortion\",\n#                     value: 3444,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"encoder\",\n#                 children: [\n#                   {\n#                     name: \"ColorEncoder\",\n#                     value: 3179,\n#                   },\n#                   {\n#                     name: \"Encoder\",\n#                     value: 4060,\n#                   },\n#                   {\n#                     name: \"PropertyEncoder\",\n#                     value: 4138,\n#                   },\n#                   {\n#                     name: \"ShapeEncoder\",\n#                     value: 1690,\n#                   },\n#                   {\n#                     name: \"SizeEncoder\",\n#                     value: 1830,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"filter\",\n#                 children: [\n#                   {\n#                     name: \"FisheyeTreeFilter\",\n#                     value: 5219,\n#                   },\n#                   {\n#                     name: \"GraphDistanceFilter\",\n#                     value: 3165,\n#                   },\n#                   {\n#                     name: \"VisibilityFilter\",\n#                     value: 3509,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"IOperator\",\n#                 value: 1286,\n#               },\n#               {\n#                 name: \"label\",\n#                 children: [\n#                   {\n#                     name: \"Labeler\",\n#                     value: 9956,\n#                   },\n#                   {\n#                     name: \"RadialLabeler\",\n#                     value: 3899,\n#                   },\n#                   {\n#                     name: \"StackedAreaLabeler\",\n#                     value: 3202,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"layout\",\n#                 children: [\n#                   {\n#                     name: \"AxisLayout\",\n#                     value: 6725,\n#                   },\n#                   {\n#                     name: \"BundledEdgeRouter\",\n#                     value: 3727,\n#                   },\n#                   {\n#                     name: \"CircleLayout\",\n#                     value: 9317,\n#                   },\n#                   {\n#                     name: \"CirclePackingLayout\",\n#                     value: 12003,\n#                   },\n#                   {\n#                     name: \"DendrogramLayout\",\n#                     value: 4853,\n#                   },\n#                   {\n#                     name: \"ForceDirectedLayout\",\n#                     value: 8411,\n#                   },\n#                   {\n#                     name: \"IcicleTreeLayout\",\n#                     value: 4864,\n#                   },\n#                   {\n#                     name: \"IndentedTreeLayout\",\n#                     value: 3174,\n#                   },\n#                   {\n#                     name: \"Layout\",\n#                     value: 7881,\n#                   },\n#                   {\n#                     name: \"NodeLinkTreeLayout\",\n#                     value: 12870,\n#                   },\n#                   {\n#                     name: \"PieLayout\",\n#                     value: 2728,\n#                   },\n#                   {\n#                     name: \"RadialTreeLayout\",\n#                     value: 12348,\n#                   },\n#                   {\n#                     name: \"RandomLayout\",\n#                     value: 870,\n#                   },\n#                   {\n#                     name: \"StackedAreaLayout\",\n#                     value: 9121,\n#                   },\n#                   {\n#                     name: \"TreeMapLayout\",\n#                     value: 9191,\n#                   },\n#                 ],\n#               },\n#               {\n#                 name: \"Operator\",\n#                 value: 2490,\n#               },\n#               {\n#                 name: \"OperatorList\",\n#                 value: 5248,\n#               },\n#               {\n#                 name: \"OperatorSequence\",\n#                 value: 4190,\n#               },\n#               {\n#                 name: \"OperatorSwitch\",\n#                 value: 2581,\n#               },\n#               {\n#                 name: \"SortOperator\",\n#                 value: 2023,\n#               },\n#             ],\n#           },\n#           {\n#             name: \"Visualization\",\n#             value: 16540,\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.tooltipUseBrick = {\n#     useBrick: {\n#       brick: \"span\",\n#       properties: {\n#         textContent: \"<% DATA.data?.name %>\",\n#       },\n#     },\n#   };\n#   brick_1.leafUseBrick = {\n#     useBrick: [\n#       {\n#         if: \"<% DATA.x1 - DATA.x0 > 70 && DATA.y1 - DATA.y0 > 100 %>\",\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             padding: \"8px 6px\",\n#           },\n#         },\n#         slots: {\n#           \"\": {\n#             type: \"bricks\",\n#             bricks: [\n#               {\n#                 brick: \"div\",\n#                 properties: {\n#                   textContent: \"<% DATA.data.name %>\",\n#                   style: {\n#                     \"font-size\": \"20px\",\n#                     \"font-weight\": 500,\n#                     color: \"#FFFFFF\",\n#                     \"line-height\": \"28px\",\n#                     \"text-shadow\": \"0px 1px 4px #3366FF\",\n#                     overflow: \"hidden\",\n#                     \"white-space\": \"nowrap\",\n#                     \"text-overflow\": \"ellipsis\",\n#                   },\n#                 },\n#               },\n#             ],\n#           },\n#         },\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n"
   },
+  "data-view.battery-chart": {
+    "doc": "电池显示构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.battery-chart\n  properties:\n    value: 30\n    style:\n      background-color: \"#1c1e21\"\n      display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.battery-chart\n#   value=\"30\"\n#   style=\"background-color: #1c1e21; display: block\"\n# ></data-view.battery-chart>\n# \n```\n\n### ThresholdValue\n\n```yaml preview\n- brick: data-view.battery-chart\n  properties:\n    value: 100\n    thresholdValue: 120\n    batteryHeight: 80\n    batteryWidth: 50\n    thresholdColors:\n      - color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\"\n        startValue: 0\n        endValue: 120\n        headerColor: \"#246EFF\"\n      - color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\"\n        startValue: 120\n        endValue: 200\n        headerColor: \"#FF772A\"\n    style:\n      background-color: \"#1c1e21\"\n      display: block\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标题\n            style:\n              color: \"#fff\"\n              opacity: 0.6\n              marginTop: 10px\n              fontSize: 14px\n        - brick: div\n          properties:\n            textContent: 数据信息\n            style:\n              color: \"#fff\"\n              fontSize: 20px\n              line-height: 29px\n              fontWeight: 500\n    left:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标题\n            style:\n              color: \"#fff\"\n              opacity: 0.6\n              marginTop: 10px\n              fontSize: 14px\n        - brick: div\n          properties:\n            textContent: 数据信息\n            style:\n              color: \"#fff\"\n              fontSize: 20px\n              line-height: 29px\n              fontWeight: 500\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.battery-chart\n#   value=\"100\"\n#   threshold-value=\"120\"\n#   battery-height=\"80\"\n#   battery-width=\"50\"\n#   style=\"background-color: #1c1e21; display: block\"\n#   id=\"brick-1\"\n# >\n#   <div style=\"color: #fff; opacity: 0.6; margin-top: 10px; font-size: 14px\">\n#     标题\n#   </div>\n#   <div\n#     style=\"color: #fff; font-size: 20px; line-height: 29px; font-weight: 500\"\n#   >\n#     数据信息\n#   </div>\n#   <div\n#     slot=\"left\"\n#     style=\"color: #fff; opacity: 0.6; margin-top: 10px; font-size: 14px\"\n#   >\n#     标题\n#   </div>\n#   <div\n#     slot=\"left\"\n#     style=\"color: #fff; font-size: 20px; line-height: 29px; font-weight: 500\"\n#   >\n#     数据信息\n#   </div>\n# </data-view.battery-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.thresholdColors = [\n#     {\n#       color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\",\n#       startValue: 0,\n#       endValue: 120,\n#       headerColor: \"#246EFF\",\n#     },\n#     {\n#       color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\",\n#       startValue: 120,\n#       endValue: 200,\n#       headerColor: \"#FF772A\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+  },
   "data-view.dropdown-menu": {
     "doc": "大屏基础下拉菜单\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.dropdown-menu\n  properties:\n    options:\n      - label: 测试1\n        value: test1\n      - label: 测试2\n        value: test2\n    placeholder: 请选择\n    allowClear: true\n  events:\n    value.change:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.dropdown-menu\n#   placeholder=\"请选择\"\n#   allow-clear\n#   id=\"brick-1\"\n# ></data-view.dropdown-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"测试1\",\n#       value: \"test1\",\n#     },\n#     {\n#       label: \"测试2\",\n#       value: \"test2\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"value.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
-  "data-view.modern-style-component-title": {
-    "doc": "现代风格的组件标题\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-component-title>\n# \n```\n\n### TitleSuffix && Toolbar slot\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n  slots:\n    toolbar:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: toolbar\n    titleSuffix:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: titleSuffix\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# >\n#   <span slot=\"toolbar\">toolbar</span>\n#   <span slot=\"titleSuffix\">titleSuffix</span>\n# </data-view.modern-style-component-title>\n# \n```\n\n### hideRightComponent\n\n```yaml preview\n- brick: data-view.modern-style-component-title\n  properties:\n    componentTitle: 组件标题\n    hideRightComponent: false\n    hideLeftComponent: true\n    style:\n      height: 50px\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-component-title\n#   component-title=\"组件标题\"\n#   hide-right-component=\"false\"\n#   hide-left-component=\"true\"\n#   style=\"height: 50px; display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-component-title>\n# \n```\n"
+  "data-view.loading-panel": {
+    "doc": "data-view.loading-panel\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.loading-panel\n  properties:\n    customTitle: Hello World!!\n    loading: false\n    style:\n      height: 300px\n      display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.loading-panel\n#   custom-title=\"Hello World!!\"\n#   style=\"height: 300px; display: block\"\n# ></data-view.loading-panel>\n# \n```\n\n### Progress\n\n```yaml preview\n- brick: data-view.loading-panel\n  properties:\n    customTitle: Hello World!!\n    progress: 60\n    useRealTimeProgress: true\n    intervalTime: 300\n    style:\n      height: 300px\n      display: block\n  events:\n    end:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.loading-panel\n#   custom-title=\"Hello World!!\"\n#   progress=\"60\"\n#   use-real-time-progress\n#   interval-time=\"300\"\n#   style=\"height: 300px; display: block\"\n#   id=\"brick-1\"\n# ></data-view.loading-panel>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"end\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "data-view.complex-search": {
     "doc": "复杂的搜索框\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.complex-search\n  properties:\n    placeholder: Search\n    style:\n      background: \"#1c1e21\"\n      display: block\n      height: 300px\n    options:\n      - name: 主机1\n        icon:\n          lib: \"antd\"\n          icon: \"account-book\"\n          theme: \"outlined\"\n      - name: 主机2\n        icon:\n          lib: \"antd\"\n          icon: \"account-book\"\n          theme: \"outlined\"\n  events:\n    select:\n      - action: console.log\n    search:\n      - action: console.log\n    focus:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.complex-search\n#   placeholder=\"Search\"\n#   style=\"background: #1c1e21; display: block; height: 300px\"\n#   id=\"brick-1\"\n# ></data-view.complex-search>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       name: \"主机1\",\n#       icon: {\n#         lib: \"antd\",\n#         icon: \"account-book\",\n#         theme: \"outlined\",\n#       },\n#     },\n#     {\n#       name: \"主机2\",\n#       icon: {\n#         lib: \"antd\",\n#         icon: \"account-book\",\n#         theme: \"outlined\",\n#       },\n#     },\n#   ];\n#   brick_1.addEventListener(\"select\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"search\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"focus\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
-  "data-view.modern-style-page-title": {
-    "doc": "现代风格的页面标题构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.modern-style-page-title\n  properties:\n    pageTitle: XX应用大屏\n    description: \"- APPLICATION HEALTH MONITORING SCREEN -\"\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.modern-style-page-title\n#   page-title=\"XX应用大屏\"\n#   description=\"- APPLICATION HEALTH MONITORING SCREEN -\"\n#   style=\"display: block; background-color: #1c1e21\"\n# ></data-view.modern-style-page-title>\n# \n```\n"
-  },
-  "data-view.battery-chart": {
-    "doc": "电池显示构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.battery-chart\n  properties:\n    value: 30\n    style:\n      background-color: \"#1c1e21\"\n      display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.battery-chart\n#   value=\"30\"\n#   style=\"background-color: #1c1e21; display: block\"\n# ></data-view.battery-chart>\n# \n```\n\n### ThresholdValue\n\n```yaml preview\n- brick: data-view.battery-chart\n  properties:\n    value: 100\n    thresholdValue: 120\n    batteryHeight: 80\n    batteryWidth: 50\n    thresholdColors:\n      - color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\"\n        startValue: 0\n        endValue: 120\n        headerColor: \"#246EFF\"\n      - color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\"\n        startValue: 120\n        endValue: 200\n        headerColor: \"#FF772A\"\n    style:\n      background-color: \"#1c1e21\"\n      display: block\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标题\n            style:\n              color: \"#fff\"\n              opacity: 0.6\n              marginTop: 10px\n              fontSize: 14px\n        - brick: div\n          properties:\n            textContent: 数据信息\n            style:\n              color: \"#fff\"\n              fontSize: 20px\n              line-height: 29px\n              fontWeight: 500\n    left:\n      type: bricks\n      bricks:\n        - brick: div\n          properties:\n            textContent: 标题\n            style:\n              color: \"#fff\"\n              opacity: 0.6\n              marginTop: 10px\n              fontSize: 14px\n        - brick: div\n          properties:\n            textContent: 数据信息\n            style:\n              color: \"#fff\"\n              fontSize: 20px\n              line-height: 29px\n              fontWeight: 500\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.battery-chart\n#   value=\"100\"\n#   threshold-value=\"120\"\n#   battery-height=\"80\"\n#   battery-width=\"50\"\n#   style=\"background-color: #1c1e21; display: block\"\n#   id=\"brick-1\"\n# >\n#   <div style=\"color: #fff; opacity: 0.6; margin-top: 10px; font-size: 14px\">\n#     标题\n#   </div>\n#   <div\n#     style=\"color: #fff; font-size: 20px; line-height: 29px; font-weight: 500\"\n#   >\n#     数据信息\n#   </div>\n#   <div\n#     slot=\"left\"\n#     style=\"color: #fff; opacity: 0.6; margin-top: 10px; font-size: 14px\"\n#   >\n#     标题\n#   </div>\n#   <div\n#     slot=\"left\"\n#     style=\"color: #fff; font-size: 20px; line-height: 29px; font-weight: 500\"\n#   >\n#     数据信息\n#   </div>\n# </data-view.battery-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.thresholdColors = [\n#     {\n#       color: \"linear-gradient(180deg, #246EFF 0%, #26CE90 100%)\",\n#       startValue: 0,\n#       endValue: 120,\n#       headerColor: \"#246EFF\",\n#     },\n#     {\n#       color: \"linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)\",\n#       startValue: 120,\n#       endValue: 200,\n#       headerColor: \"#FF772A\",\n#     },\n#   ];\n# </script>\n# \n```\n"
-  },
-  "data-view.loading-panel": {
-    "doc": "data-view.loading-panel\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.loading-panel\n  properties:\n    customTitle: Hello World!!\n    loading: false\n    style:\n      height: 300px\n      display: block\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.loading-panel\n#   custom-title=\"Hello World!!\"\n#   style=\"height: 300px; display: block\"\n# ></data-view.loading-panel>\n# \n```\n\n### Progress\n\n```yaml preview\n- brick: data-view.loading-panel\n  properties:\n    customTitle: Hello World!!\n    progress: 60\n    useRealTimeProgress: true\n    intervalTime: 300\n    style:\n      height: 300px\n      display: block\n  events:\n    end:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.loading-panel\n#   custom-title=\"Hello World!!\"\n#   progress=\"60\"\n#   use-real-time-progress\n#   interval-time=\"300\"\n#   style=\"height: 300px; display: block\"\n#   id=\"brick-1\"\n# ></data-view.loading-panel>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"end\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
-  },
   "data-view.particle-animation": {
     "doc": "粒子上升动画\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.particle-animation\n  properties:\n    containerStyle:\n      width: 150px\n      height: 150px\n    colors:\n      startColor: \"#44E6F300\"\n      middleColor: \"#48D9EE\"\n      endColor: \"#E4FFFF\"\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.particle-animation\n#   style=\"display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.particle-animation>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.containerStyle = {\n#     width: \"150px\",\n#     height: \"150px\",\n#   };\n#   brick_1.colors = {\n#     startColor: \"#44E6F300\",\n#     middleColor: \"#48D9EE\",\n#     endColor: \"#E4FFFF\",\n#   };\n# </script>\n# \n```\n"
   },
@@ -74,12 +74,12 @@
   "data-view.gear-background": {
     "doc": "齿轮背景\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.gear-background\n  properties:\n    style:\n      width: 300px\n      height: 300px\n      display: block\n      background: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.gear-background\n#   style=\"width: 300px; height: 300px; display: block; background: #1c1e21\"\n# ></data-view.gear-background>\n# \n```\n"
   },
-  "data-view.radar-chart": {
-    "doc": "雷达图构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.radar-chart\n  properties:\n    dataSource:\n      - name: JavaScript\n        maxValue: 100\n        value: 60\n        percentValue: 45.8%\n      - name: Java\n        maxValue: 100\n        value: 30\n        percentValue: 45.8%\n      - name: CSS\n        maxValue: 100\n        value: 70\n        percentValue: 45.8%\n      - name: Python\n        maxValue: 100\n        value: 30\n        percentValue: 45.8%\n      - name: Three.js\n        maxValue: 100\n        value: 50\n        percentValue: 45.8%\n    value: 85.9\n    dataCircle:\n      fillStyle: red\n      r: 3\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.radar-chart\n#   style=\"display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.radar-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       name: \"JavaScript\",\n#       maxValue: 100,\n#       value: 60,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Java\",\n#       maxValue: 100,\n#       value: 30,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"CSS\",\n#       maxValue: 100,\n#       value: 70,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Python\",\n#       maxValue: 100,\n#       value: 30,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Three.js\",\n#       maxValue: 100,\n#       value: 50,\n#       percentValue: \"45.8%\",\n#     },\n#   ];\n#   brick_1.value = 85.9;\n#   brick_1.dataCircle = {\n#     fillStyle: \"red\",\n#     r: 3,\n#   };\n# </script>\n# \n```\n"
-  },
   "data-view.title-text": {
     "doc": "构件 title-text\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 大标题\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text text=\"大标题\"></data-view.title-text>\n# \n```\n\n### Stroke\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 大标题\n    type: stroke\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"stroke\";\n# </script>\n# \n```\n\n### Gradient\n\n```yaml preview\n- brick: data-view.title-text\n  properties:\n    text: 大标题\n    type: gradient\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.title-text text=\"大标题\" id=\"brick-1\"></data-view.title-text>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.type = \"gradient\";\n# </script>\n# \n```\n"
   },
+  "data-view.radar-chart": {
+    "doc": "雷达图构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.radar-chart\n  properties:\n    dataSource:\n      - name: JavaScript\n        maxValue: 100\n        value: 60\n        percentValue: 45.8%\n      - name: Java\n        maxValue: 100\n        value: 30\n        percentValue: 45.8%\n      - name: CSS\n        maxValue: 100\n        value: 70\n        percentValue: 45.8%\n      - name: Python\n        maxValue: 100\n        value: 30\n        percentValue: 45.8%\n      - name: Three.js\n        maxValue: 100\n        value: 50\n        percentValue: 45.8%\n    value: 85.9\n    dataCircle:\n      fillStyle: red\n      r: 3\n    style:\n      display: block\n      background-color: \"#1c1e21\"\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.radar-chart\n#   style=\"display: block; background-color: #1c1e21\"\n#   id=\"brick-1\"\n# ></data-view.radar-chart>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       name: \"JavaScript\",\n#       maxValue: 100,\n#       value: 60,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Java\",\n#       maxValue: 100,\n#       value: 30,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"CSS\",\n#       maxValue: 100,\n#       value: 70,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Python\",\n#       maxValue: 100,\n#       value: 30,\n#       percentValue: \"45.8%\",\n#     },\n#     {\n#       name: \"Three.js\",\n#       maxValue: 100,\n#       value: 50,\n#       percentValue: \"45.8%\",\n#     },\n#   ];\n#   brick_1.value = 85.9;\n#   brick_1.dataCircle = {\n#     fillStyle: \"red\",\n#     r: 3,\n#   };\n# </script>\n# \n```\n"
+  },
   "data-view.brick-notification": {
     "doc": "大屏通知提示构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.brick-notification\n  properties:\n    message: This is the content of the notification.\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.brick-notification\n#   message=\"This is the content of the notification.\"\n# ></data-view.brick-notification>\n# \n```\n\n### Icon\n\n```yaml preview\n- brick: data-view.brick-notification\n  properties:\n    message: This is the content of the notification.\n    icon:\n      icon: smile\n      lib: antd\n      theme: outlined\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.brick-notification\n#   message=\"This is the content of the notification.\"\n#   id=\"brick-1\"\n# ></data-view.brick-notification>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.icon = {\n#     icon: \"smile\",\n#     lib: \"antd\",\n#     theme: \"outlined\",\n#   };\n# </script>\n# \n```\n"
   },
@@ -107,12 +107,12 @@
   "data-view.data-display-flipper": {
     "doc": "构件 `data-view.data-display-flipper`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.data-display-flipper\n  properties:\n    flipperTitle: 翻牌器标题\n    data: 1281925.15\n    unit: 万\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper\n#   flipper-title=\"翻牌器标题\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 1281925.15;\n#   brick_1.unit = \"万\";\n# </script>\n# \n```\n\n### showDefaultPrefix\n\n```yaml preview\n- brick: data-view.data-display-flipper\n  properties:\n    data: 1281925.15\n    unit: 万\n    separator: \" \"\n    showDefaultPrefix: false\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper id=\"brick-1\"></data-view.data-display-flipper>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 1281925.15;\n#   brick_1.unit = \"万\";\n#   brick_1.separator = \" \";\n# </script>\n# \n```\n"
   },
-  "data-view.data-display-flipper-sixth": {
-    "doc": "构件 `data-view.data-display-flipper-sixth`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.data-display-flipper-sixth\n  properties:\n    flipperTitle: 翻牌器名称\n    data: 699\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-sixth\n#   flipper-title=\"翻牌器名称\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-sixth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 699;\n# </script>\n# \n```\n"
-  },
   "data-view.data-display-flipper-fifth": {
     "doc": "构件 `data-view.data-display-flipper-fifth`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.data-display-flipper-fifth\n  properties:\n    flipperTitle: 翻牌器名称\n    data: 195.15\n    unit: 单位\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-fifth\n#   flipper-title=\"翻牌器名称\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-fifth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 195.15;\n#   brick_1.unit = \"单位\";\n# </script>\n# \n```\n"
   },
+  "data-view.data-display-flipper-sixth": {
+    "doc": "构件 `data-view.data-display-flipper-sixth`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: data-view.data-display-flipper-sixth\n  properties:\n    flipperTitle: 翻牌器名称\n    data: 699\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.data-display-flipper-sixth\n#   flipper-title=\"翻牌器名称\"\n#   id=\"brick-1\"\n# ></data-view.data-display-flipper-sixth>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.data = 699;\n# </script>\n# \n```\n"
+  },
   "data-view.indicator-card": {
     "doc": "构件 `data-view.indicator-card`\n\n## Examples\n\n### Column\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"column\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"column\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Column Townhouse\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"column-townhouse\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"column-townhouse\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Row\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"row\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"row\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Row Townhouse\n\n```yaml preview\n- brick: data-view.indicator-card\n  properties:\n    layout: \"row-townhouse\"\n    datasource:\n      - value: 300\n        desc: 月碳排放量\n        unit: (吨)\n      - value: 1000.33\n        desc: 季度碳排放总量\n        unit: (吨)\n      - value: 2507.55\n        desc: 年度碳排放总量\n        unit: (吨)\n# -- YAML DELIMITER (1nbbm8) --\n# <data-view.indicator-card id=\"brick-1\"></data-view.indicator-card>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layout = \"row-townhouse\";\n#   brick_1.datasource = [\n#     {\n#       value: 300,\n#       desc: \"月碳排放量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 1000.33,\n#       desc: \"季度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#     {\n#       value: 2507.55,\n#       desc: \"年度碳排放总量\",\n#       unit: \"(吨)\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
@@ -125,13 +125,16 @@
   "data-view.crystal-ball-indicator": {
     "doc": "中间是水晶球动画的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.crystal-ball-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.crystal-ball-indicator\n#     id=\"brick-1\"\n#   ></data-view.crystal-ball-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
-  "data-view.globe-with-gear-indicator": {
-    "doc": "地球加轮盘的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-gear-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-gear-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-gear-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
-  },
   "data-view.globe-with-halo-indicator": {
     "doc": "地球加光环的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-halo-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-halo-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-halo-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
+  "data-view.globe-with-gear-indicator": {
+    "doc": "地球加轮盘的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-gear-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-gear-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-gear-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+  },
   "data-view.bubbles-indicator": {
     "doc": "构件 `data-view.bubbles-indicator`\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.bubbles-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.bubbles-indicator id=\"brick-1\"></data-view.bubbles-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
+  },
+  "data-view.globe-with-orbit-indicator": {
+    "doc": "地球加轨道的数据展示构件。\n\n## Examples\n\n### Basic\n\n```yaml preview height=\"660px\"\nbrick: div\nproperties:\n  style:\n    height: calc(100vh - 2em)\nchildren:\n  - brick: data-view.globe-with-orbit-indicator\n    properties:\n      centerDataSource:\n        label: 资产总数\n        value: 30123\n      dataSource:\n        - label: 低值易耗品\n          value: 3889\n        - label: 摊销资产\n          value: 2087\n        - label: 固定资产\n          value: 12088\n        - label: 无形资产\n          value: 1082\n        - label: 在建工程\n          value: 10997\n        - label: 其他资产\n          value: 4203\n      cornerDataSource:\n        - label: 资产增长\n          value: 43\n          color: red\n        - label: 资产减少\n          value: 21\n          color: green\n    # Currently this brick only works within dark theme\n    lifeCycle:\n      onPageLoad:\n        action: theme.setTheme\n        args:\n          - dark-v2\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"height: calc(100vh - 2em)\">\n#   <data-view.globe-with-orbit-indicator\n#     id=\"brick-1\"\n#   ></data-view.globe-with-orbit-indicator>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.centerDataSource = {\n#     label: \"资产总数\",\n#     value: 30123,\n#   };\n#   brick_1.dataSource = [\n#     {\n#       label: \"低值易耗品\",\n#       value: 3889,\n#     },\n#     {\n#       label: \"摊销资产\",\n#       value: 2087,\n#     },\n#     {\n#       label: \"固定资产\",\n#       value: 12088,\n#     },\n#     {\n#       label: \"无形资产\",\n#       value: 1082,\n#     },\n#     {\n#       label: \"在建工程\",\n#       value: 10997,\n#     },\n#     {\n#       label: \"其他资产\",\n#       value: 4203,\n#     },\n#   ];\n#   brick_1.cornerDataSource = [\n#     {\n#       label: \"资产增长\",\n#       value: 43,\n#       color: \"red\",\n#     },\n#     {\n#       label: \"资产减少\",\n#       value: 21,\n#       color: \"green\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   }
 }