@next-bricks/data-view 1.12.10 → 1.12.12

package/dist/chunks/bubbles-indicator.ab761540.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chunks/bubbles-indicator.ab761540.js","mappings":"2hBAwBA,MAAMA,EAAa,IACbC,EAAc,IACdC,EAAuB,IACvBC,EAA0B,GAC1BC,EAA0B,GAC1BC,EAAiB,GACjBC,EAA2B,GAC3BC,EAA2B,GAC3BC,EAAqB,IAErB,cAAEC,EAAa,SAAEC,IAAaC,EAAAA,EAAAA,oBAAmB,IAAAC,EAAA,IAAAC,EAAA,IAAAC,QAAAC,EAAA,IAAAD,QAAAE,EAAA,IAAAF,QAAAG,EAAA,IAAAH,QA0CvD,MAAAI,UAIUC,EAAAA,iBAEVC,WAAAA,GAAA,SAAAC,YACEC,EAAAA,EAAAA,GAAA,KAAAT,EAAAU,EAAA,QAOAD,EAAAA,EAAAA,GAAA,KAAAP,GAAAS,EAAA,MAAAC,EAAA,SAIAH,EAAAA,EAAAA,GAAA,KAAAN,GAAAU,EAAA,MAAAC,EAAA,SAMAL,EAAAA,EAAAA,GAAA,KAAAL,GAAAW,EAAA,MAAAC,EAAA,QAAAC,EAAA,oBAZSC,GAAU,OAAAC,EAAAA,EAAAA,GAAAnB,EAAA,oBAAVkB,CAAUE,IAAAC,EAAAA,EAAAA,GAAArB,EAAA,KAAAoB,EAAA,qBAIVE,GAAgB,OAAAH,EAAAA,EAAAA,GAAAjB,EAAA,0BAAhBoB,CAAgBF,IAAAC,EAAAA,EAAAA,GAAAnB,EAAA,KAAAkB,EAAA,qBAMhBG,GAAgB,OAAAJ,EAAAA,EAAAA,GAAAhB,EAAA,0BAAhBoB,CAAgBH,IAAAC,EAAAA,EAAAA,GAAAlB,EAAA,KAAAiB,EAAA,aAQhBI,GAAQ,OAAAL,EAAAA,EAAAA,GAAAf,EAAA,kBAARoB,CAAQJ,IAAAC,EAAAA,EAAAA,GAAAjB,EAAA,KAAAgB,EAAA,CAEjBK,MAAAA,GACE,OACEC,IAAAA,cAACC,EAAyB,CACxBC,KAAMC,KACNX,WAAYW,KAAKX,WACjBI,iBAAkBO,KAAKP,iBACvBC,iBAAkBM,KAAKN,iBACvBC,SAAUK,KAAKL,UAGrB,EAOK,SAASG,EAAyBG,GAMN,IANO,KACxCF,EAAI,WACJV,EAAU,iBACVI,EAAgB,iBAChBC,EAAgB,SAChBC,GAC+BM,EAC/B,MAAMC,GAAQC,EAAAA,EAAAA,GAAkB,CAC9BC,MAAO9C,EACP+C,OAAQ9C,EACRwC,OACAJ,cAEKW,EAAkBC,IAAkBC,EAAAA,EAAAA,GAAe,KAGpDC,GAASC,EAAAA,EAAAA,UAAQ,KAAM,IAAAC,EAAAC,EAC3B,MAAMC,EASD,QATuCF,EAC1CtB,SAAwB,QAAduB,EAAVvB,EAAYyB,MAAM,EAAG,WAAG,IAAAF,OAAA,EAAxBA,EAA0BG,KAAKC,IAAI,IAAAC,EAAA,MAAM,IACpCD,EACHE,oBAAqBC,KAAKC,IACR,QADWH,EAC3BD,EAAKK,mBAAW,IAAAJ,EAAAA,EACS,iBAAfD,EAAKM,MACTN,EAAKM,MACLC,WAAWP,EAAKM,QAEzB,WAAE,IAAAX,EAAAA,EAAI,GACHa,EAAuBX,EAAmBE,KAC7CC,GAASA,EAAKE,sBAEXO,EAAyBN,KAAKO,OAAOF,GAErCG,EAAQ,CAAClC,KAAqBoB,GAAoBE,KACtD,CAACC,EAAMY,IACK,IAAVA,EACI,CACEC,EAAGrE,EACHsE,GAAI,EACJC,GAAI,GAEN,CACEF,EAAGV,KAAKO,IACNhE,EACAyD,KAAKa,IACHvE,EACA0D,KAAKc,KACFjB,EAA0BE,oBACzBO,GACAhE,OAOZyE,EAAcpE,EAAqB6D,EAAMQ,OACzCC,EAAcC,MAAMC,KACxB,CAAEH,OAAQD,IACV,CAACK,EAAIC,KAAM,CACTC,UAAU,EACVZ,EACEjE,EACC4E,GAAK3E,EAA2BD,GAC/BsE,MAIRP,EAAMe,QAAQN,GAEd,MAAMO,GAAaC,EAAAA,EAAAA,GAAgBjB,GAChCkB,YAAY,IACZC,cAAc,IACdC,MAAM,KAAKC,EAAAA,EAAAA,KAASC,SAAS,MAC7BF,MAAM,KAAKG,EAAAA,EAAAA,KAASD,SAAS,MAC7BF,MAAM,UAAUI,EAAAA,EAAAA,GAAY,EAAG,GAAGF,SAAS,KAC3CF,MACC,WACAK,EAAAA,EAAAA,KACGC,QAAQC,GAAMA,EAAEzB,EAAIlE,IACpB4F,WAAW,IAEfR,MACC,UACAS,EAAAA,EAAAA,KAEGP,UAAU,KAMjB,OAHAN,EAAWc,OAuEf,SACEd,GAGAA,EAAWe,KACTvC,KAAKwC,KACHxC,KAAKyC,IAAIjB,EAAWkB,YAAc1C,KAAKyC,IAAI,EAAIjB,EAAWmB,eAGhE,CA/EIC,CAAqBpB,GAEdhB,EAAMb,MAAM,GAAGC,KAA0B,CAACiD,EAAMpC,KAAU,IAC3DoC,EAAKvB,SACL,CAAEA,UAAU,EAAMwB,MAAO,GAAI3C,MAAO,IACpCjC,EAAWuC,GACfsC,EAAGF,EAAKE,EACRC,EAAGH,EAAKG,EACRtC,EAAGmC,EAAKnC,KACP,GACF,CAACpC,EAAkBJ,IAEtB,OACEQ,IAAAA,cAAAA,IAAAA,SAAA,KACEA,IAAAA,cAAA,OACEuE,UAAU,oBACVC,MACE,CACEC,WAAsB,OAAVpE,EAAiB,SAAW,UACxC,UAAWA,IAMfL,IAAAA,cAAA,OAAKuE,UAAU,OACfvE,IAAAA,cAAA,OAAKuE,UAAU,eACfvE,IAAAA,cAAA,OAAKuE,UAAU,eACfvE,IAAAA,cAAA,OAAKuE,UAAU,UACbvE,IAAAA,cAAA,OAAKuE,UAAU,gBAAgB3E,aAAgB,EAAhBA,EAAkBwE,OACjDpE,IAAAA,cAAA,OACEuE,UAAU,eACVG,IAAKhE,EACL8D,MAAO,CACLC,WAAiC,OAArBhE,EAA4B,SAAW,UACnDkE,UAAW,SAASlE,QAAAA,EAAoB,QAGzCmE,EAAAA,EAAAA,GAAYhF,aAAgB,EAAhBA,EAAkB6B,SAGnCzB,IAAAA,cAAA,OAAKuE,UAAU,UACfvE,IAAAA,cAAA,OAAKuE,UAAU,WACZ3D,aAAM,EAANA,EAAQM,KAAI,CAACC,EAAMY,IAClB/B,IAAAA,cAAA,OACE6E,IAAK9C,EACLwC,UAAU,SACVC,MAAO,CACLG,UAAW,aAAaxD,EAAKkD,QAAQlD,EAAKmD,OAC1C/D,MAAgB,EAATY,EAAKa,EACZxB,OAAiB,EAATW,EAAKa,EAEb8C,OAAQ3D,EAAKyB,UAAY,EAAI,KAG7BzB,EAAKyB,UACL5C,IAAAA,cAAAA,IAAAA,SAAA,KACEA,IAAAA,cAAA,OAAKuE,UAAU,gBAAgBpD,EAAKiD,OACpCpE,IAAAA,cAAA,OAAKuE,UAAU,iBAAgBK,EAAAA,EAAAA,GAAYzD,EAAKM,cAO5DzB,IAAAA,cAAC+E,EAAAA,EAAe,CAAClF,iBAAkBA,IAGzC,CAnKCmF,EAAArG,IAAAsG,GAAAjG,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,GAAA2F,GAAA7G,EAAA8G,KAAAC,EAAAA,EAAAA,GAAAJ,EAAA,CA3CA9G,EAAc,8BAA+B,CAC5CmH,WAAY,CAACC,EAAAA,EAAWC,EAAAA,MACxB,EASCpH,EAAS,CAAEqH,WAAW,IAAQ,iBAI9BrH,EAAS,CAAEqH,WAAW,IAAQ,uBAM9BrH,EAAS,CAAEqH,WAAW,IAAQ,uBAQ9BrH,EAAS,CAAEsH,KAAMC,SAAS,wBAzBnB9G,EAAAA,mBAAgBuG,G,uFChF1B,MAAMQ,EAAkB,IAAIC,KAAKC,aAAa,QAAS,CACrDC,aAAa,IAGR,SAASlB,EAAYnD,GAC1B,OAUK,SAA4BA,GACjC,MAAqB,iBAAVA,EACFA,EAAQA,GAAU,EAEN,iBAAVA,GAAuC,KAAjBA,EAAMsE,SACa,QAAhBC,EAACN,OAAOO,gBAAQ,IAAAD,EAAAA,EAAIC,WAAWxE,GADb,IAAAuE,CAIxD,CAlBSE,CAAmBzE,GAASkE,EAAgBQ,QAAQ1E,GAASA,CACtE,C,YCJA2E,EAAOC,QAAU,SAAUC,EAAKC,GAI9B,OAHKA,IACHA,EAAU,CAAC,GAERD,GAGLA,EAAME,OAAOF,EAAIG,WAAaH,EAAII,QAAUJ,GAGxC,eAAeK,KAAKL,KACtBA,EAAMA,EAAIrF,MAAM,GAAI,IAElBsF,EAAQK,OACVN,GAAOC,EAAQK,MAKb,oBAAoBD,KAAKL,IAAQC,EAAQM,WACpC,IAAKC,OAAOR,EAAIS,QAAQ,KAAM,OAAOA,QAAQ,MAAO,OAAQ,KAE9DT,GAjBEA,CAkBX,C,kQCdIC,EAAU,CAAC,EAEfA,EAAQS,kBAAoB,IAC5BT,EAAQU,cAAgB,IACxBV,EAAQW,OAAS,SAAc,KAAM,QACrCX,EAAQY,OAAS,IACjBZ,EAAQa,mBAAqB,IAEhB,IAAI,IAASb,GAKJ,KAAW,IAAQc,QAAS,IAAQA,M,mGCpBtDC,EAAgC,IAAIC,IAAI,cACxCC,EAAgC,IAAID,IAAI,cACxCE,EAAgC,IAAIF,IAAI,cACxCG,EAAgC,IAAIH,IAAI,cACxCI,EAAgC,IAAIJ,IAAI,cACxCK,EAAgC,IAAIL,IAAI,cACxCM,EAA0B,IAA4B,KACtDC,EAAqC,IAAgCR,GACrES,EAAqC,IAAgCP,GACrEQ,EAAqC,IAAgCP,GACrEQ,EAAqC,IAAgCP,GACrEQ,EAAqC,IAAgCP,GACrEQ,EAAqC,IAAgCP,GAEzEC,EAAwBhF,KAAK,CAACuD,EAAOgC,GAAI,glBAW+FN,gEAAiGC,kHAAmJC,oIAAqKC,iHAAkJC,4MAA6OC,i9BAC10B,KAEtF,QAAeN,EAAwBQ,U,6DC1BhC,SAAS/H,EAAiBF,GAaf,IAZhBG,MAAO+H,EACP9H,OAAQ+H,EAAU,KAClBrI,EAAI,SACJJ,EAAQ,SACR0I,GAQDpI,EACC,MAAOC,EAAOoI,IAAYC,EAAAA,EAAAA,UAAwB,MAsBlD,OApBAC,EAAAA,EAAAA,YAAU,KACR,GAAIH,EAEF,YADAC,EAAS,MAIX,MAAMG,EAAW,IAAIC,EAAAA,GAAgBC,IACnC,IAAK,MAAMC,KAASD,EAClB,GAAIC,EAAMC,SAAW9I,EAAM,CACzB,MAAM,MAAEK,EAAK,OAAEC,GAAWuI,EAAME,YAChCR,EACEnH,KAAKa,IAAIrC,QAAAA,EAAY,EAAGS,EAAQ+H,EAAW9H,EAAS+H,GAExD,CACF,IAGF,OADAK,EAASM,QAAQhJ,GACV,IAAM0I,EAASO,YAAY,GACjC,CAACZ,EAAYD,EAAWE,EAAU1I,EAAUI,IAExCG,CACT,C,mGCvCIiH,EAAgC,IAAIC,IAAI,cACxCM,EAA0B,IAA4B,KACtDC,EAAqC,IAAgCR,GAEzEO,EAAwBhF,KAAK,CAACuD,EAAOgC,GAAI,0DAA0DN,MAAwC,KAE3I,S,+OCLA,MAAMsB,GAAaC,EAAAA,EAAAA,WAAyB,UAYrC,SAAStE,EAAe3E,GAA6C,IAA5C,iBAAEP,GAAwCO,EACxE,OACEJ,IAAAA,cAAA,OAAKuE,UAAU,UACZ1E,aAAgB,EAAhBA,EAAkBqB,KAAI,CAACC,EAAMY,IAC5B/B,IAAAA,cAAA,OAAK6E,IAAK9C,EAAOwC,UAAU,eACzBvE,IAAAA,cAAA,OAAKuE,UAAU,gBAAgBpD,EAAKiD,OACpCpE,IAAAA,cAACoJ,EAAU,CACT7E,UAAU,eACV+E,SAAO,EACPC,MAAOpI,EAAKoI,MACZC,SAAU,CACRC,SAAU,GACVC,QAAS,cAGV9E,EAAAA,EAAAA,GAAYzD,EAAKM,WAM9B,C,2HCnCIoG,E,MAA0B,GAA4B,KAE1DA,EAAwBhF,KAAK,CAACuD,EAAOgC,GAAI,qOAAsO,KAE/Q,QAAeP,EAAwBQ,U,wJCInC9B,EAAU,CAAC,EAEfA,EAAQS,kBAAoB,IAC5BT,EAAQU,cAAgB,IACxBV,EAAQW,OAAS,SAAc,KAAM,QACrCX,EAAQY,OAAS,IACjBZ,EAAQa,mBAAqB,IAEhB,IAAI,IAASb,GAKJ,KAAW,IAAQc,QAAS,IAAQA,M,6DClBnD,SAAS1G,EAAegJ,GAC7B,MAAOC,EAAaC,IAAkBnB,EAAAA,EAAAA,UAAwB,MACxDoB,GAAYC,EAAAA,EAAAA,QAAuB,MAezC,OAbApB,EAAAA,EAAAA,YAAU,KACR,MAAMqB,EAAqBF,EAAUG,QACrC,IAAKD,EACH,OAEF,MAAMpB,EAAW,IAAIC,EAAAA,GAAe,KAClC,MAAMtI,EAAQyJ,EAAmBE,YACjCL,EAAevI,KAAKa,IAAI,EAAGb,KAAKO,IAAI,GAAK8H,EAAWpJ,IAAQ,IAG9D,OADAqI,EAASM,QAAQc,GACV,IAAMpB,EAASO,YAAY,GACjC,CAACQ,IAEG,CAACC,EAAaE,EACvB,C,mGCpBIxC,EAAgC,IAAIC,IAAI,cACxCM,EAA0B,IAA4B,KACtDC,EAAqC,IAAgCR,GAEzEO,EAAwBhF,KAAK,CAACuD,EAAOgC,GAAI,iDAAiDN,MAAwC,KAElI,S","sources":["webpack:///./src/bubbles-indicator/index.tsx","webpack:///./src/shared/formatValue.ts","webpack:///../../node_modules/css-loader/dist/runtime/getUrl.js","webpack:///./src/fonts/PangMenZhengDaoBiaoTiTi.css?e8bb","webpack:///./src/bubbles-indicator/styles.shadow.css","webpack:///./src/shared/useContainerScale.ts","webpack:///./src/fonts/PangMenZhengDaoBiaoTiTi.css","webpack:///./src/shared/CornerIndicator.tsx","webpack:///./src/shared/CornerIndicator.shadow.css","webpack:///./src/fonts/ALiBaBaPuHuiTi.css?7885","webpack:///./src/shared/useCenterScale.ts","webpack:///./src/fonts/ALiBaBaPuHuiTi.css"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  forceSimulation,\n  forceCollide,\n  forceManyBody,\n  forceX,\n  forceY,\n  forceCenter,\n  type Simulation,\n  type SimulationNodeDatum,\n  type SimulationLinkDatum,\n} from \"d3-force\";\nimport { createDecorators } from \"@next-core/element\";\nimport { ReactNextElement } from \"@next-core/react-element\";\nimport \"@next-core/theme\";\nimport { formatValue } from \"../shared/formatValue\";\nimport { CornerIndicator } from \"../shared/CornerIndicator\";\nimport { useContainerScale } from \"../shared/useContainerScale\";\nimport { useCenterScale } from \"../shared/useCenterScale\";\nimport \"../fonts/ALiBaBaPuHuiTi.css\";\nimport \"../fonts/PangMenZhengDaoBiaoTiTi.css\";\nimport styleText from \"./styles.shadow.css\";\nimport cornerStyleText from \"../shared/CornerIndicator.shadow.css\";\n\nconst BASE_WIDTH = 900;\nconst BASE_HEIGHT = 700;\nconst CENTER_BUBBLE_RADIUS = 196;\nconst OTHER_BUBBLE_MAX_RADIUS = 81;\nconst OTHER_BUBBLE_MIN_RADIUS = 40;\nconst BUBBLE_PADDING = 12;\nconst RANDOM_BUBBLE_MIN_RADIUS = 10;\nconst RANDOM_BUBBLE_MAX_RADIUS = 22;\nconst TOTAL_BUBBLE_COUNT = 18;\n\nconst { defineElement, property } = createDecorators();\n\nexport interface BubblesIndicatorProps {\n  dataSource?: DataItem[];\n  centerDataSource?: DataItem;\n  cornerDataSource?: CornerDataItem[];\n  maxScale?: number;\n}\n\nexport interface DataItem {\n  label: string;\n  value: string | number;\n  /**\n   * 用于计算气泡相对大小的数值。\n   */\n  numberValue?: number;\n}\n\nexport interface CornerDataItem extends DataItem {\n  color?: string;\n}\n\ninterface DataItemWithPosition extends DataItem {\n  x: number;\n  y: number;\n  r: number;\n  isRandom?: boolean;\n}\n\ninterface ForceNode extends SimulationNodeDatum {\n  r: number;\n  isRandom?: boolean;\n}\n\ninterface NumberedDataItem extends DataItem {\n  positiveNumberValue: number;\n}\n\n/**\n * 气泡样式的数据展示构件。\n */\nexport\n@defineElement(\"data-view.bubbles-indicator\", {\n  styleTexts: [styleText, cornerStyleText],\n})\nclass BubblesIndicator\n  extends ReactNextElement\n  implements BubblesIndicatorProps\n{\n  /** 指标数据列表（显示在环上）\n   *\n   * 注意：最多显示12项数据\n   */\n  @property({ attribute: false })\n  accessor dataSource: DataItem[] | undefined;\n\n  /** 中心数据（显示在中心水晶球内） */\n  @property({ attribute: false })\n  accessor centerDataSource: DataItem | undefined;\n\n  /**\n   * 左上角指标数据列表\n   */\n  @property({ attribute: false })\n  accessor cornerDataSource: CornerDataItem[] | undefined;\n\n  /**\n   * 最大缩放比例\n   *\n   * @default 1\n   */\n  @property({ type: Number })\n  accessor maxScale: number | undefined;\n\n  render() {\n    return (\n      <BubblesIndicatorComponent\n        root={this}\n        dataSource={this.dataSource}\n        centerDataSource={this.centerDataSource}\n        cornerDataSource={this.cornerDataSource}\n        maxScale={this.maxScale}\n      />\n    );\n  }\n}\n\nexport interface BubblesIndicatorComponentProps extends BubblesIndicatorProps {\n  root: BubblesIndicator;\n}\n\nexport function BubblesIndicatorComponent({\n  root,\n  dataSource,\n  centerDataSource,\n  cornerDataSource,\n  maxScale,\n}: BubblesIndicatorComponentProps) {\n  const scale = useContainerScale({\n    width: BASE_WIDTH,\n    height: BASE_HEIGHT,\n    root,\n    maxScale,\n  });\n  const [centerValueScale, centerValueRef] = useCenterScale(280);\n\n  // 使用 d3 力学布局计算气泡位置，将普通数据排列在中心数据周围，并填充一些小的气泡\n  const labels = useMemo(() => {\n    const numberedDataSource: NumberedDataItem[] =\n      dataSource?.slice(0, 12)?.map((item) => ({\n        ...item,\n        positiveNumberValue: Math.abs(\n          item.numberValue ??\n            (typeof item.value === \"number\"\n              ? item.value\n              : parseFloat(item.value))\n        ),\n      })) ?? [];\n    const positiveNumberValues = numberedDataSource.map(\n      (item) => item.positiveNumberValue\n    );\n    const maxPositiveNumberValue = Math.max(...positiveNumberValues);\n\n    const nodes = [centerDataSource, ...numberedDataSource].map<ForceNode>(\n      (item, index) =>\n        index === 0\n          ? {\n              r: CENTER_BUBBLE_RADIUS,\n              fx: 0,\n              fy: 0,\n            }\n          : {\n              r: Math.max(\n                OTHER_BUBBLE_MIN_RADIUS,\n                Math.min(\n                  OTHER_BUBBLE_MAX_RADIUS,\n                  Math.sqrt(\n                    (item as NumberedDataItem).positiveNumberValue /\n                      maxPositiveNumberValue\n                  ) * OTHER_BUBBLE_MAX_RADIUS\n                )\n              ),\n            }\n    );\n\n    // 补齐气泡数量，新增的随机气泡大小在指定范围内均匀分布，而不是使用随机数，以便对于同一份数据得到相同的布局结果。\n    const randomCount = TOTAL_BUBBLE_COUNT - nodes.length;\n    const randomNodes = Array.from<unknown, ForceNode>(\n      { length: randomCount },\n      (_v, i) => ({\n        isRandom: true,\n        r:\n          RANDOM_BUBBLE_MIN_RADIUS +\n          (i * (RANDOM_BUBBLE_MAX_RADIUS - RANDOM_BUBBLE_MIN_RADIUS)) /\n            randomCount,\n      })\n    );\n\n    nodes.push(...randomNodes);\n\n    const simulation = forceSimulation(nodes)\n      .alphaTarget(0.3) // stay hot\n      .velocityDecay(0.1) // low friction\n      .force(\"x\", forceX().strength(0.01))\n      .force(\"y\", forceY().strength(0.02))\n      .force(\"center\", forceCenter(0, 0).strength(0.5))\n      .force(\n        \"collide\",\n        forceCollide<ForceNode>()\n          .radius((d) => d.r + BUBBLE_PADDING)\n          .iterations(3)\n      )\n      .force(\n        \"charge\",\n        forceManyBody()\n          //.strength((_d, i) => (/* i ? 0 : */ (-BASE_WIDTH * 1) / 3))\n          .strength(-84)\n      );\n\n    simulation.stop();\n    manuallyTickToTheEnd(simulation);\n\n    return nodes.slice(1).map<DataItemWithPosition>((node, index) => ({\n      ...(node.isRandom\n        ? { isRandom: true, label: \"\", value: \"\" }\n        : dataSource[index]),\n      x: node.x!,\n      y: node.y!,\n      r: node.r,\n    }));\n  }, [centerDataSource, dataSource]);\n\n  return (\n    <>\n      <div\n        className=\"bubbles-container\"\n        style={\n          {\n            visibility: scale === null ? \"hidden\" : \"visible\",\n            \"--scale\": scale,\n          } as React.CSSProperties & {\n            \"--scale\": number;\n          }\n        }\n      >\n        <div className=\"bg\"></div>\n        <div className=\"outer-ring\"></div>\n        <div className=\"inner-ring\"></div>\n        <div className=\"center\">\n          <div className=\"center-label\">{centerDataSource?.label}</div>\n          <div\n            className=\"center-value\"\n            ref={centerValueRef}\n            style={{\n              visibility: centerValueScale === null ? \"hidden\" : \"visible\",\n              transform: `scale(${centerValueScale ?? 1})`,\n            }}\n          >\n            {formatValue(centerDataSource?.value)}\n          </div>\n        </div>\n        <div className=\"light\"></div>\n        <div className=\"bubbles\">\n          {labels?.map((item, index) => (\n            <div\n              key={index}\n              className=\"bubble\"\n              style={{\n                transform: `translate(${item.x}px, ${item.y}px)`,\n                width: item.r * 2,\n                height: item.r * 2,\n                // Put extra random bubbles to the back layer.\n                zIndex: item.isRandom ? -1 : 0,\n              }}\n            >\n              {!item.isRandom && (\n                <>\n                  <div className=\"bubble-label\">{item.label}</div>\n                  <div className=\"bubble-value\">{formatValue(item.value)}</div>\n                </>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n      <CornerIndicator cornerDataSource={cornerDataSource} />\n    </>\n  );\n}\n\nfunction manuallyTickToTheEnd(\n  simulation: Simulation<ForceNode, SimulationLinkDatum<ForceNode>>\n): void {\n  // Manually tick to the end.\n  simulation.tick(\n    Math.ceil(\n      Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())\n    )\n  );\n}\n","const numberFormatter = new Intl.NumberFormat(\"zh-CN\", {\n  useGrouping: true,\n});\n\nexport function formatValue(value: string | number): string {\n  return isMeaningfulNumber(value) ? numberFormatter.format(+value) : value;\n}\n\n/**\n * 判断一个值是否是有意义的数字，包括数字和可以转换为数字的字符串。\n *\n * 但不包括 NaN、Infinity、-Infinity 等。\n *\n * Ref https://github.com/jonschlinkert/is-number/blob/master/index.js\n */\nexport function isMeaningfulNumber(value: unknown): value is number | string {\n  if (typeof value === \"number\") {\n    return value - value === 0;\n  }\n  if (typeof value === \"string\" && value.trim() !== \"\") {\n    return /* istanbul ignore next */ (Number.isFinite ?? isFinite)(+value);\n  }\n  return false;\n}\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      import API from \"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n      import domAPI from \"!../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n      import insertFn from \"!../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n      import setAttributes from \"!../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n      import insertStyleElement from \"!../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n      import styleTagTransformFn from \"!../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n      import content, * as namedExport from \"!!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./PangMenZhengDaoBiaoTiTi.css\";\n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./PangMenZhengDaoBiaoTiTi.css\";\n       export default content && content.locals ? content.locals : undefined;\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\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"./assets/bg.png\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(\"./assets/outer-ring.png\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_2___ = new URL(\"./assets/inner-ring.png\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_3___ = new URL(\"./assets/center-bubble.png\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_4___ = new URL(\"./assets/light.png\", import.meta.url);\nvar ___CSS_LOADER_URL_IMPORT_5___ = new URL(\"./assets/other-bubble.png\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);\nvar ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);\nvar ___CSS_LOADER_URL_REPLACEMENT_3___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_3___);\nvar ___CSS_LOADER_URL_REPLACEMENT_4___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_4___);\nvar ___CSS_LOADER_URL_REPLACEMENT_5___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_5___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host,\n.center,\n.bubble{display:flex;align-items:center;justify-content:center}:host{position:relative;color:#fff;height:100%}:host([hidden]){display:none}*{box-sizing:border-box}.bubbles-container{width:800px;height:640px;position:relative;transform:scale(var(--scale));--scale:1}.bg,\n.outer-ring,\n.inner-ring,\n.center,\n.light,\n.bubbles,\n.bubble{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.bg,\n.outer-ring,\n.inner-ring,\n.center{background-repeat:no-repeat;background-position:center;background-size:100%}.bg{width:572px;height:572px;background-image:url(${___CSS_LOADER_URL_REPLACEMENT_0___})}.outer-ring{width:529px;height:529px;background-image:url(${___CSS_LOADER_URL_REPLACEMENT_1___});animation:rotating-outer-ring 2s ease-in infinite}.inner-ring{width:487px;height:487px;background-image:url(${___CSS_LOADER_URL_REPLACEMENT_2___});animation:rotating-inner-ring 2s ease-in infinite}.center{flex-direction:column;width:292px;height:292px;background-image:url(${___CSS_LOADER_URL_REPLACEMENT_3___});text-shadow:0px 2px 4px rgba(0,0,0,0.5)}.light{width:292px;height:292px;border-radius:292px;background:url(${___CSS_LOADER_URL_REPLACEMENT_4___}) no-repeat;background-size:338px 478px;animation:moving-light 3s linear infinite;pointer-events:none}.bubbles{width:0;height:0}.bubble{flex-direction:column;border-radius:9999px;background-image:url(${___CSS_LOADER_URL_REPLACEMENT_5___});background-size:100%}.bubble-label{font-size:16px;font-weight:500;line-height:22px;color:#c8e2ff}.bubble-value{font-family:ALiBaBaPuHuiTi;font-size:24px;line-height:33px;text-shadow:0px 4px 7px #514af7}.center-label{font-size:24px;line-height:33px;font-weight:600;margin-top:13px;text-shadow:0px 2px 4px rgba(0,0,0,0.5)}.center-value{font-family:PangMenZhengDaoBiaoTiTi;font-size:64px;line-height:73px}.corner{position:absolute;top:13px;left:31px;font-size:18px}.corner-item{display:flex;margin-bottom:15px}.corner-label{font-weight:500;line-height:25px}.corner-value{display:block;margin-left:19px}@keyframes rotating-outer-ring{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes rotating-inner-ring{0%{transform:translate(-50%,-50%) rotate(360deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}@keyframes moving-light{0%,\n  73.3333%{background-position:-122px -332px}100%{background-position:100px 100px}}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","import { useEffect, useState } from \"react\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * 根据容器尺寸进行缩放\n */\nexport function useContainerScale({\n  width: baseWidth,\n  height: baseHeight,\n  root,\n  maxScale,\n  disabled,\n}: {\n  width: number;\n  height: number;\n  root: HTMLElement;\n  /** 最大缩放比例，默认为 1 */\n  maxScale?: number;\n  disabled?: boolean;\n}): number | null {\n  const [scale, setScale] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (disabled) {\n      setScale(null);\n      return;\n    }\n    // 当容器宽高低于预设值时，图形会自动缩小\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.target === root) {\n          const { width, height } = entry.contentRect;\n          setScale(\n            Math.min(maxScale ?? 1, width / baseWidth, height / baseHeight)\n          );\n        }\n      }\n    });\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [baseHeight, baseWidth, disabled, maxScale, root]);\n\n  return scale;\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\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"./PangMenZhengDaoBiaoTiTi-3.0.ttf\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `@font-face{font-family:PangMenZhengDaoBiaoTiTi;src:url(${___CSS_LOADER_URL_REPLACEMENT_0___})}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","import React from \"react\";\nimport { wrapBrick } from \"@next-core/react-element\";\nimport type { Tag, TagProps } from \"@next-bricks/basic/tag\";\nimport { formatValue } from \"./formatValue\";\n\nconst WrappedTag = wrapBrick<Tag, TagProps>(\"eo-tag\");\n\nexport interface CornerDataItem {\n  label: string;\n  value: string | number;\n  color?: string;\n}\n\nexport interface CornerIndicatorProps {\n  cornerDataSource?: CornerDataItem[];\n}\n\nexport function CornerIndicator({ cornerDataSource }: CornerIndicatorProps) {\n  return (\n    <div className=\"corner\">\n      {cornerDataSource?.map((item, index) => (\n        <div key={index} className=\"corner-item\">\n          <div className=\"corner-label\">{item.label}</div>\n          <WrappedTag\n            className=\"corner-value\"\n            outline\n            color={item.color}\n            tagStyle={{\n              fontSize: 18,\n              padding: \"2px 16px\",\n            }}\n          >\n            {formatValue(item.value)}\n          </WrappedTag>\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, `.corner{position:absolute;top:13px;left:31px;font-size:18px}.corner-item{display:flex;margin-bottom:15px}.corner-label{font-weight:500;line-height:25px;color:rgba(255,255,255,0.85)}.corner-value{display:block;margin-left:19px}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","\n      import API from \"!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n      import domAPI from \"!../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n      import insertFn from \"!../../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n      import setAttributes from \"!../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n      import insertStyleElement from \"!../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n      import styleTagTransformFn from \"!../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n      import content, * as namedExport from \"!!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./ALiBaBaPuHuiTi.css\";\n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./ALiBaBaPuHuiTi.css\";\n       export default content && content.locals ? content.locals : undefined;\n","import { useEffect, useRef, useState } from \"react\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\n/**\n * 让中心数据值不要超过球体范围，但缩放值最低不小于 0.3\n */\nexport function useCenterScale(maxWidth: number) {\n  const [centerScale, setCenterScale] = useState<number | null>(null);\n  const centerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const centerValueElement = centerRef.current;\n    if (!centerValueElement) {\n      return;\n    }\n    const observer = new ResizeObserver(() => {\n      const width = centerValueElement.clientWidth;\n      setCenterScale(Math.min(1, Math.max(0.3, maxWidth / width)));\n    });\n    observer.observe(centerValueElement);\n    return () => observer.disconnect();\n  }, [maxWidth]);\n\n  return [centerScale, centerRef] as const;\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\";\nimport ___CSS_LOADER_GET_URL_IMPORT___ from \"../../../../node_modules/css-loader/dist/runtime/getUrl.js\";\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(\"./ALiBaBaPuHuiTi.ttf\", import.meta.url);\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `@font-face{font-family:ALiBaBaPuHuiTi;src:url(${___CSS_LOADER_URL_REPLACEMENT_0___})}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n"],"names":["BASE_WIDTH","BASE_HEIGHT","CENTER_BUBBLE_RADIUS","OTHER_BUBBLE_MAX_RADIUS","OTHER_BUBBLE_MIN_RADIUS","BUBBLE_PADDING","RANDOM_BUBBLE_MIN_RADIUS","RANDOM_BUBBLE_MAX_RADIUS","TOTAL_BUBBLE_COUNT","defineElement","property","createDecorators","_BubblesIndicator","_A","WeakMap","_B","_C","_D","BubblesIndicator","ReactNextElement","constructor","arguments","_classPrivateFieldInitSpec","_init_dataSource","_init_extra_dataSource","_init_centerDataSource","_init_extra_centerDataSource","_init_cornerDataSource","_init_extra_cornerDataSource","_init_maxScale","_init_extra_maxScale","dataSource","_classPrivateFieldGet","v","_classPrivateFieldSet","centerDataSource","cornerDataSource","maxScale","render","React","BubblesIndicatorComponent","root","this","_ref","scale","useContainerScale","width","height","centerValueScale","centerValueRef","useCenterScale","labels","useMemo","_dataSource$slice$map","_dataSource$slice","numberedDataSource","slice","map","item","_item$numberValue","positiveNumberValue","Math","abs","numberValue","value","parseFloat","positiveNumberValues","maxPositiveNumberValue","max","nodes","index","r","fx","fy","min","sqrt","randomCount","length","randomNodes","Array","from","_v","i","isRandom","push","simulation","forceSimulation","alphaTarget","velocityDecay","force","forceX","strength","forceY","forceCenter","forceCollide","radius","d","iterations","forceManyBody","stop","tick","ceil","log","alphaMin","alphaDecay","manuallyTickToTheEnd","node","label","x","y","className","style","visibility","ref","transform","formatValue","key","zIndex","CornerIndicator","_BubblesIndicator2","e","c","_initClass","_applyDecs","styleTexts","styleText","cornerStyleText","attribute","type","Number","numberFormatter","Intl","NumberFormat","useGrouping","trim","_Number$isFinite","isFinite","isMeaningfulNumber","format","module","exports","url","options","String","__esModule","default","test","hash","needQuotes","concat","replace","styleTagTransform","setAttributes","insert","domAPI","insertStyleElement","locals","___CSS_LOADER_URL_IMPORT_0___","URL","___CSS_LOADER_URL_IMPORT_1___","___CSS_LOADER_URL_IMPORT_2___","___CSS_LOADER_URL_IMPORT_3___","___CSS_LOADER_URL_IMPORT_4___","___CSS_LOADER_URL_IMPORT_5___","___CSS_LOADER_EXPORT___","___CSS_LOADER_URL_REPLACEMENT_0___","___CSS_LOADER_URL_REPLACEMENT_1___","___CSS_LOADER_URL_REPLACEMENT_2___","___CSS_LOADER_URL_REPLACEMENT_3___","___CSS_LOADER_URL_REPLACEMENT_4___","___CSS_LOADER_URL_REPLACEMENT_5___","id","toString","baseWidth","baseHeight","disabled","setScale","useState","useEffect","observer","ResizeObserver","entries","entry","target","contentRect","observe","disconnect","WrappedTag","wrapBrick","outline","color","tagStyle","fontSize","padding","maxWidth","centerScale","setCenterScale","centerRef","useRef","centerValueElement","current","clientWidth"],"sourceRoot":""}