{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"echart-graphic","type":"registry:ui","title":"EChartGraphic","description":"Imperative graphic layer for annotations.","package":"fancy-echarts","dependencies":["echarts"],"registryDependencies":["types"],"files":[{"path":"components\/fancy\/echart-graphic\/EChartGraphic.tsx","content":"import React, { forwardRef, useMemo } from \"react\";\r\nimport type { EChartsOption } from \"echarts\";\r\nimport { useECharts } from \"..\/hooks\/use-echarts\";\r\nimport type { EChartBaseProps, ChartDivProps } from \"..\/types\";\r\n\r\nexport interface GraphicElement {\r\n  type:\r\n    | \"rect\"\r\n    | \"circle\"\r\n    | \"ring\"\r\n    | \"arc\"\r\n    | \"polygon\"\r\n    | \"polyline\"\r\n    | \"path\"\r\n    | \"image\"\r\n    | \"text\"\r\n    | \"group\";\r\n  left?: number | string;\r\n  top?: number | string;\r\n  right?: number | string;\r\n  bottom?: number | string;\r\n  shape?: Record<string, any>;\r\n  style?: Record<string, any>;\r\n  children?: GraphicElement[];\r\n  onclick?: (e: any) => void;\r\n  onmouseover?: (e: any) => void;\r\n  onmouseout?: (e: any) => void;\r\n  [key: string]: any;\r\n}\r\n\r\nexport interface EChartGraphicProps\r\n  extends Omit<EChartBaseProps, \"option\">,\r\n    ChartDivProps,\r\n    React.HTMLAttributes<HTMLDivElement> {\r\n  elements: GraphicElement[];\r\n  option?: Partial<EChartsOption>;\r\n}\r\n\r\nconst DEFAULT_STYLE: React.CSSProperties = { width: \"100%\", height: 400 };\r\n\r\n\/**\r\n * EChartGraphic \u2014 for custom drawing via ECharts graphic layer.\r\n * Supports rect, circle, ring, arc, polygon, polyline, path, image, text, group elements.\r\n *\/\r\nexport const EChartGraphic = forwardRef<HTMLDivElement, EChartGraphicProps>(\r\n  (\r\n    {\r\n      elements,\r\n      option: extraOption = {},\r\n      theme,\r\n      renderer,\r\n      notMerge,\r\n      lazyUpdate,\r\n      showLoading,\r\n      loadingOption,\r\n      onEvents,\r\n      autoResize = true,\r\n      style,\r\n      className,\r\n      ...rest\r\n    },\r\n    _ref\r\n  ) => {\r\n    const option = useMemo((): EChartsOption => {\r\n      return {\r\n        graphic: {\r\n          elements,\r\n        },\r\n        ...extraOption,\r\n      } as EChartsOption;\r\n    }, [elements, extraOption]);\r\n\r\n    const { chartRef } = useECharts({\r\n      option,\r\n      theme,\r\n      renderer,\r\n      notMerge,\r\n      lazyUpdate,\r\n      showLoading,\r\n      loadingOption,\r\n      onEvents,\r\n      autoResize,\r\n    });\r\n\r\n    return (\r\n      <div\r\n        ref={chartRef}\r\n        style={{ ...DEFAULT_STYLE, ...style }}\r\n        className={className}\r\n        {...rest}\r\n      \/>\r\n    );\r\n  }\r\n);\r\n\r\nEChartGraphic.displayName = \"EChartGraphic\";\r\n","type":"registry:ui","target":"components\/fancy\/echart-graphic\/EChartGraphic.tsx"}]}