@next-bricks/data-view 1.6.0 → 1.6.2

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":""}