@hitachivantara/uikit-react-viz 5.5.15 → 5.6.1

package/dist/cjs/hooks/tooltip/useTooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.cjs","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartTooltip,\n  HvChartTooltipParams,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"@viz/types\";\nimport { getMeasure } from \"@viz/utils\";\n\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n  seriesName: string;\n  value: (string | number)[];\n  encode: { [key: string]: number[] };\n  color: string;\n  dimensionNames: string[];\n  name: string;\n  seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n  measures?:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  trigger?: \"item\" | \"axis\";\n  classes?: HvChartTooltipClasses;\n  horizontal?: boolean;\n  show?: HvChartTooltip[\"show\"];\n  type?: HvChartTooltip[\"type\"];\n  component?: HvChartTooltip[\"component\"];\n  valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n  titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n  nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n  measures = [],\n  classes,\n  component,\n  show = true,\n  horizontal = false,\n  trigger = \"item\",\n  type = \"multiple\",\n  valueFormatter,\n  titleFormatter,\n  nameFormatter,\n}: HvTooltipHookProps) => {\n  const { classes: hvClasses } = useClasses(classes);\n\n  const renderTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      const title =\n        params[0].seriesType === \"pie\"\n          ? params[0].seriesName\n          : horizontal\n          ? params[0].value[params[0].encode.y[0]]\n          : params[0].value[params[0].encode.x[0]];\n\n      const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n      if (type === \"single\") {\n        const measure = getMeasure(\n          params[0].seriesType === \"pie\"\n            ? params[0].name\n            : horizontal\n            ? params[0].dimensionNames[params[0].encode.x[0]]\n            : params[0].dimensionNames[params[0].encode.y[0]],\n          measures\n        );\n\n        const value =\n          params[0].seriesType === \"pie\"\n            ? params[0].value[params[0].encode.value[0]]\n            : horizontal\n            ? params[0].value[params[0].encode.x[0]]\n            : params[0].value[params[0].encode.y[0]];\n\n        const formattedValue =\n          typeof measure !== \"string\" && measure.valueFormatter\n            ? measure.valueFormatter(value)\n            : valueFormatter\n            ? valueFormatter(value)\n            : value;\n\n        return `\n            <div class=\"${hvClasses?.singleTooltipRoot}\">\n              <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n              <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n            </div>\n            `;\n      }\n\n      return `\n        <div class=\"${hvClasses?.multipleTooltipRoot}\">\n          <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n            <div>\n              <p class=\"${\n                hvClasses?.multipleTooltipTitle\n              }\">${formattedTitle}</p>\n            </div>\n          </div>\n          <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n            ${params\n              .map((s) => {\n                const measure = getMeasure(\n                  s.seriesType === \"pie\"\n                    ? s.name\n                    : horizontal\n                    ? s.dimensionNames[s.encode.x[0]]\n                    : s.dimensionNames[s.encode.y[0]],\n                  measures\n                );\n\n                const value =\n                  s.seriesType === \"pie\"\n                    ? s.value[s.encode.value[0]]\n                    : horizontal\n                    ? s.value[s.encode.x[0]]\n                    : s.value[s.encode.y[0]];\n\n                const formattedValue =\n                  typeof measure !== \"string\" && measure.valueFormatter\n                    ? measure.valueFormatter(value)\n                    : valueFormatter\n                    ? valueFormatter(value)\n                    : value;\n\n                const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n                const formattedName = nameFormatter\n                  ? nameFormatter(name)\n                  : name;\n\n                return `\n                <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n                  <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n                    <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n                    <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n                  </div>\n                  <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n                </div>\n              `;\n              })\n              .join(\" \")}\n          </div>\n        </div>\n        `;\n    },\n    [\n      hvClasses,\n      horizontal,\n      type,\n      measures,\n      nameFormatter,\n      titleFormatter,\n      valueFormatter,\n    ]\n  );\n\n  const renderCustomTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      if (typeof component === \"function\") {\n        const values: HvChartTooltipParams = {\n          title:\n            params[0].seriesType === \"pie\"\n              ? params[0].seriesName\n              : horizontal\n              ? params[0].value[params[0].encode.y[0]]\n              : params[0].value[params[0].encode.x[0]],\n          series: params.map((p) => {\n            return {\n              color: p.color,\n              name:\n                p.seriesType === \"heatmap\"\n                  ? String(p.value[p.encode.y[0]])\n                  : p.seriesType === \"pie\"\n                  ? p.name\n                  : p.seriesName,\n              value:\n                p.seriesType === \"pie\" || p.seriesType === \"heatmap\"\n                  ? p.value[p.encode.value[0]]\n                  : horizontal\n                  ? p.value[p.encode.x[0]]\n                  : p.value[p.encode.y[0]],\n            };\n          }),\n        };\n\n        return component(values);\n      }\n\n      return component;\n    },\n    [component, horizontal]\n  );\n\n  const option = useMemo<Pick<EChartsOption, \"tooltip\">>(() => {\n    return {\n      tooltip: {\n        confine: false,\n        show,\n        trigger,\n        position: (point, params, dom, rect, size) => {\n          return [point[0], point[1] - size.contentSize[1]];\n        },\n        formatter: (params) => {\n          const tooltipParams = Array.isArray(params) ? params : [params];\n\n          return component\n            ? renderCustomTooltip(tooltipParams)\n            : renderTooltip(tooltipParams);\n        },\n      },\n    };\n  }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n  return option;\n};\n"],"names":["useTooltip","measures","classes","component","show","horizontal","trigger","type","valueFormatter","titleFormatter","nameFormatter","hvClasses","useClasses","renderTooltip","useCallback","params","title","seriesType","seriesName","value","encode","y","x","formattedTitle","measure","getMeasure","name","dimensionNames","formattedValue","singleTooltipRoot","singleTooltipTitle","singleTooltipValue","multipleTooltipRoot","multipleTooltipTitleContainer","multipleTooltipTitle","multipleTooltipValuesContainer","map","s","formattedName","multipleTooltipSeriesContainer","multipleTooltipSeriesNameContainer","color","multipleTooltipSeriesColor","multipleTooltipSeriesName","multipleTooltipSeriesValue","join","renderCustomTooltip","values","series","p","String","option","useMemo","tooltip","confine","position","point","dom","rect","size","contentSize","formatter","tooltipParams","Array","isArray"],"mappings":"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"}
+{"version":3,"file":"useTooltip.cjs","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartTooltip,\n  HvChartTooltipParams,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"@viz/types\";\nimport { getMeasure } from \"@viz/utils\";\nimport { HvEChartsOption } from \"@viz/types/common\";\n\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n  seriesName: string;\n  value: (string | number)[];\n  encode: { [key: string]: number[] };\n  color: string;\n  dimensionNames: string[];\n  name: string;\n  seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n  measures?:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  trigger?: \"item\" | \"axis\";\n  classes?: HvChartTooltipClasses;\n  horizontal?: boolean;\n  show?: HvChartTooltip[\"show\"];\n  type?: HvChartTooltip[\"type\"];\n  component?: HvChartTooltip[\"component\"];\n  valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n  titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n  nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n  measures = [],\n  classes,\n  component,\n  show = true,\n  horizontal = false,\n  trigger = \"item\",\n  type = \"multiple\",\n  valueFormatter,\n  titleFormatter,\n  nameFormatter,\n}: HvTooltipHookProps) => {\n  const { classes: hvClasses } = useClasses(classes);\n\n  const renderTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      const title =\n        params[0].seriesType === \"pie\"\n          ? params[0].seriesName\n          : horizontal\n          ? params[0].value[params[0].encode.y[0]]\n          : params[0].value[params[0].encode.x[0]];\n\n      const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n      if (type === \"single\") {\n        const measure = getMeasure(\n          params[0].seriesType === \"pie\"\n            ? params[0].name\n            : horizontal\n            ? params[0].dimensionNames[params[0].encode.x[0]]\n            : params[0].dimensionNames[params[0].encode.y[0]],\n          measures\n        );\n\n        const value =\n          params[0].seriesType === \"pie\"\n            ? params[0].value[params[0].encode.value[0]]\n            : horizontal\n            ? params[0].value[params[0].encode.x[0]]\n            : params[0].value[params[0].encode.y[0]];\n\n        const formattedValue =\n          typeof measure !== \"string\" && measure.valueFormatter\n            ? measure.valueFormatter(value)\n            : valueFormatter\n            ? valueFormatter(value)\n            : value;\n\n        return `\n            <div class=\"${hvClasses?.singleTooltipRoot}\">\n              <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n              <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n            </div>\n            `;\n      }\n\n      return `\n        <div class=\"${hvClasses?.multipleTooltipRoot}\">\n          <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n            <div>\n              <p class=\"${\n                hvClasses?.multipleTooltipTitle\n              }\">${formattedTitle}</p>\n            </div>\n          </div>\n          <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n            ${params\n              .map((s) => {\n                const measure = getMeasure(\n                  s.seriesType === \"pie\"\n                    ? s.name\n                    : horizontal\n                    ? s.dimensionNames[s.encode.x[0]]\n                    : s.dimensionNames[s.encode.y[0]],\n                  measures\n                );\n\n                const value =\n                  s.seriesType === \"pie\"\n                    ? s.value[s.encode.value[0]]\n                    : horizontal\n                    ? s.value[s.encode.x[0]]\n                    : s.value[s.encode.y[0]];\n\n                const formattedValue =\n                  typeof measure !== \"string\" && measure.valueFormatter\n                    ? measure.valueFormatter(value)\n                    : valueFormatter\n                    ? valueFormatter(value)\n                    : value;\n\n                const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n                const formattedName = nameFormatter\n                  ? nameFormatter(name)\n                  : name;\n\n                return `\n                <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n                  <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n                    <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n                    <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n                  </div>\n                  <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n                </div>\n              `;\n              })\n              .join(\" \")}\n          </div>\n        </div>\n        `;\n    },\n    [\n      hvClasses,\n      horizontal,\n      type,\n      measures,\n      nameFormatter,\n      titleFormatter,\n      valueFormatter,\n    ]\n  );\n\n  const renderCustomTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      if (typeof component === \"function\") {\n        const values: HvChartTooltipParams = {\n          title:\n            params[0].seriesType === \"pie\"\n              ? params[0].seriesName\n              : horizontal\n              ? params[0].value[params[0].encode.y[0]]\n              : params[0].value[params[0].encode.x[0]],\n          series: params.map((p) => {\n            return {\n              color: p.color,\n              name:\n                p.seriesType === \"heatmap\"\n                  ? String(p.value[p.encode.y[0]])\n                  : p.seriesType === \"pie\"\n                  ? p.name\n                  : p.seriesName,\n              value:\n                p.seriesType === \"pie\" || p.seriesType === \"heatmap\"\n                  ? p.value[p.encode.value[0]]\n                  : horizontal\n                  ? p.value[p.encode.x[0]]\n                  : p.value[p.encode.y[0]],\n            };\n          }),\n        };\n\n        return component(values);\n      }\n\n      return component;\n    },\n    [component, horizontal]\n  );\n\n  const option = useMemo<Pick<HvEChartsOption, \"tooltip\">>(() => {\n    return {\n      tooltip: {\n        confine: false,\n        show,\n        trigger,\n        position: (point, params, dom, rect, size) => {\n          return [point[0], point[1] - size.contentSize[1]];\n        },\n        formatter: (params) => {\n          const tooltipParams = Array.isArray(params) ? params : [params];\n\n          return component\n            ? renderCustomTooltip(tooltipParams)\n            : renderTooltip(tooltipParams);\n        },\n      },\n    };\n  }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n  return option;\n};\n"],"names":["useTooltip","measures","classes","component","show","horizontal","trigger","type","valueFormatter","titleFormatter","nameFormatter","hvClasses","useClasses","renderTooltip","useCallback","params","title","seriesType","seriesName","value","encode","y","x","formattedTitle","measure","getMeasure","name","dimensionNames","formattedValue","singleTooltipRoot","singleTooltipTitle","singleTooltipValue","multipleTooltipRoot","multipleTooltipTitleContainer","multipleTooltipTitle","multipleTooltipValuesContainer","map","s","formattedName","multipleTooltipSeriesContainer","multipleTooltipSeriesNameContainer","color","multipleTooltipSeriesColor","multipleTooltipSeriesName","multipleTooltipSeriesValue","join","renderCustomTooltip","values","series","p","String","option","useMemo","tooltip","confine","position","point","dom","rect","size","contentSize","formatter","tooltipParams","Array","isArray"],"mappings":"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"}

package/dist/cjs/hooks/useDataZoom.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDataZoom.cjs","sources":["../../../src/hooks/useDataZoom.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\ninterface HvDataZoomHookProps {\n  showHorizontal?: boolean;\n}\n\nexport const useDataZoom = ({ showHorizontal }: HvDataZoomHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"dataZoom\">>(() => {\n    return {\n      dataZoom: [\n        {\n          show: showHorizontal ?? false,\n          type: \"slider\",\n          orient: \"horizontal\",\n        },\n        {\n          show: showHorizontal ?? false,\n          type: \"inside\",\n          orient: \"horizontal\",\n          zoomOnMouseWheel: \"shift\",\n          moveOnMouseWheel: true,\n        },\n      ],\n    };\n  }, [showHorizontal]);\n\n  return option;\n};\n"],"names":["useDataZoom","showHorizontal","option","useMemo","dataZoom","show","type","orient","zoomOnMouseWheel","moveOnMouseWheel"],"mappings":";;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAoC,MAAM;AAChEC,QAAAA,SAASC,MAAAA,QAAyC,MAAM;AACrD,WAAA;AAAA,MACLC,UAAU,CACR;AAAA,QACEC,MAAMJ,kBAAkB;AAAA,QACxBK,MAAM;AAAA,QACNC,QAAQ;AAAA,MAAA,GAEV;AAAA,QACEF,MAAMJ,kBAAkB;AAAA,QACxBK,MAAM;AAAA,QACNC,QAAQ;AAAA,QACRC,kBAAkB;AAAA,QAClBC,kBAAkB;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EAEL,GACC,CAACR,cAAc,CAAC;AAEZC,SAAAA;AACT;;"}
+{"version":3,"file":"useDataZoom.cjs","sources":["../../../src/hooks/useDataZoom.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvEChartsOption } from \"@viz/types/common\";\n\ninterface HvDataZoomHookProps {\n  showHorizontal?: boolean;\n}\n\nexport const useDataZoom = ({ showHorizontal }: HvDataZoomHookProps) => {\n  const option = useMemo<Pick<HvEChartsOption, \"dataZoom\">>(() => {\n    return {\n      dataZoom: [\n        {\n          show: showHorizontal ?? false,\n          type: \"slider\",\n          orient: \"horizontal\",\n        },\n        {\n          show: showHorizontal ?? false,\n          type: \"inside\",\n          orient: \"horizontal\",\n          zoomOnMouseWheel: \"shift\",\n          moveOnMouseWheel: true,\n        },\n      ],\n    };\n  }, [showHorizontal]);\n\n  return option;\n};\n"],"names":["useDataZoom","showHorizontal","option","useMemo","dataZoom","show","type","orient","zoomOnMouseWheel","moveOnMouseWheel"],"mappings":";;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAoC,MAAM;AAChEC,QAAAA,SAASC,MAAAA,QAA2C,MAAM;AACvD,WAAA;AAAA,MACLC,UAAU,CACR;AAAA,QACEC,MAAMJ,kBAAkB;AAAA,QACxBK,MAAM;AAAA,QACNC,QAAQ;AAAA,MAAA,GAEV;AAAA,QACEF,MAAMJ,kBAAkB;AAAA,QACxBK,MAAM;AAAA,QACNC,QAAQ;AAAA,QACRC,kBAAkB;AAAA,QAClBC,kBAAkB;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EAEL,GACC,CAACR,cAAc,CAAC;AAEZC,SAAAA;AACT;;"}

package/dist/cjs/hooks/useDataset.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDataset.cjs","sources":["../../../src/hooks/useDataset.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { internal } from \"arquero\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nexport const useDataset = (data: internal.ColumnTable) => {\n  const option = useMemo<Pick<EChartsOption, \"dataset\">>(() => {\n    return {\n      dataset: {\n        source: data.columnNames().reduce(\n          (acc, c) => ({\n            ...acc,\n            [c]: data.array(c),\n          }),\n          {}\n        ),\n      },\n    };\n  }, [data]);\n\n  return option;\n};\n"],"names":["useDataset","data","option","useMemo","dataset","source","columnNames","reduce","acc","c","array"],"mappings":";;;AAMaA,MAAAA,aAAaA,CAACC,SAA+B;AAClDC,QAAAA,SAASC,MAAAA,QAAwC,MAAM;AACpD,WAAA;AAAA,MACLC,SAAS;AAAA,QACPC,QAAQJ,KAAKK,YAAAA,EAAcC,OACzB,CAACC,KAAKC,OAAO;AAAA,UACX,GAAGD;AAAAA,UACH,CAACC,CAAC,GAAGR,KAAKS,MAAMD,CAAC;AAAA,QACnB,IACA,CAAA,CACF;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACR,IAAI,CAAC;AAEFC,SAAAA;AACT;;"}
+{"version":3,"file":"useDataset.cjs","sources":["../../../src/hooks/useDataset.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { internal } from \"arquero\";\n\nimport { HvEChartsOption } from \"@viz/types/common\";\n\nexport const useDataset = (data: internal.ColumnTable) => {\n  const option = useMemo<Pick<HvEChartsOption, \"dataset\">>(() => {\n    return {\n      dataset: {\n        source: data.columnNames().reduce(\n          (acc, c) => ({\n            ...acc,\n            [c]: data.array(c),\n          }),\n          {}\n        ),\n      },\n    };\n  }, [data]);\n\n  return option;\n};\n"],"names":["useDataset","data","option","useMemo","dataset","source","columnNames","reduce","acc","c","array"],"mappings":";;;AAMaA,MAAAA,aAAaA,CAACC,SAA+B;AAClDC,QAAAA,SAASC,MAAAA,QAA0C,MAAM;AACtD,WAAA;AAAA,MACLC,SAAS;AAAA,QACPC,QAAQJ,KAAKK,YAAAA,EAAcC,OACzB,CAACC,KAAKC,OAAO;AAAA,UACX,GAAGD;AAAAA,UACH,CAACC,CAAC,GAAGR,KAAKS,MAAMD,CAAC;AAAA,QACnB,IACA,CAAA,CACF;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACR,IAAI,CAAC;AAEFC,SAAAA;AACT;;"}

package/dist/cjs/hooks/useGrid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useGrid.cjs","sources":["../../../src/hooks/useGrid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { HvChartGrid } from \"@viz/types\";\n\ninterface HvGridHookProps {\n  top?: HvChartGrid[\"top\"];\n  bottom?: HvChartGrid[\"bottom\"];\n  left?: HvChartGrid[\"left\"];\n  right?: HvChartGrid[\"right\"];\n  width?: number | string;\n  height?: number | string;\n}\n\nexport const useGrid = ({\n  top,\n  left,\n  right,\n  bottom,\n  width,\n  height,\n}: HvGridHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"grid\">>(() => {\n    return {\n      // if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise\n      grid: {\n        ...(top != null && {\n          top,\n        }),\n        ...(bottom != null && {\n          bottom,\n        }),\n        ...(left != null && {\n          left,\n        }),\n        ...(right != null && {\n          right,\n        }),\n        ...(width != null && {\n          width,\n        }),\n        ...(height != null && {\n          height,\n        }),\n      },\n    };\n  }, [top, left, right, bottom, height, width]);\n\n  return option;\n};\n"],"names":["useGrid","top","left","right","bottom","width","height","option","useMemo","grid"],"mappings":";;;AAeO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACe,MAAM;AACfC,QAAAA,SAASC,MAAAA,QAAqC,MAAM;AACjD,WAAA;AAAA;AAAA,MAELC,MAAM;AAAA,QACJ,GAAIR,OAAO,QAAQ;AAAA,UACjBA;AAAAA,QACF;AAAA,QACA,GAAIG,UAAU,QAAQ;AAAA,UACpBA;AAAAA,QACF;AAAA,QACA,GAAIF,QAAQ,QAAQ;AAAA,UAClBA;AAAAA,QACF;AAAA,QACA,GAAIC,SAAS,QAAQ;AAAA,UACnBA;AAAAA,QACF;AAAA,QACA,GAAIE,SAAS,QAAQ;AAAA,UACnBA;AAAAA,QACF;AAAA,QACA,GAAIC,UAAU,QAAQ;AAAA,UACpBA;AAAAA,QACF;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACL,KAAKC,MAAMC,OAAOC,QAAQE,QAAQD,KAAK,CAAC;AAErCE,SAAAA;AACT;;"}
+{"version":3,"file":"useGrid.cjs","sources":["../../../src/hooks/useGrid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartGrid } from \"@viz/types\";\nimport { HvEChartsOption } from \"@viz/types/common\";\n\ninterface HvGridHookProps {\n  top?: HvChartGrid[\"top\"];\n  bottom?: HvChartGrid[\"bottom\"];\n  left?: HvChartGrid[\"left\"];\n  right?: HvChartGrid[\"right\"];\n  width?: number | string;\n  height?: number | string;\n}\n\nexport const useGrid = ({\n  top,\n  left,\n  right,\n  bottom,\n  width,\n  height,\n}: HvGridHookProps) => {\n  const option = useMemo<Pick<HvEChartsOption, \"grid\">>(() => {\n    return {\n      // if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise\n      grid: {\n        ...(top != null && {\n          top,\n        }),\n        ...(bottom != null && {\n          bottom,\n        }),\n        ...(left != null && {\n          left,\n        }),\n        ...(right != null && {\n          right,\n        }),\n        ...(width != null && {\n          width,\n        }),\n        ...(height != null && {\n          height,\n        }),\n      },\n    };\n  }, [top, left, right, bottom, height, width]);\n\n  return option;\n};\n"],"names":["useGrid","top","left","right","bottom","width","height","option","useMemo","grid"],"mappings":";;;AAcO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACe,MAAM;AACfC,QAAAA,SAASC,MAAAA,QAAuC,MAAM;AACnD,WAAA;AAAA;AAAA,MAELC,MAAM;AAAA,QACJ,GAAIR,OAAO,QAAQ;AAAA,UACjBA;AAAAA,QACF;AAAA,QACA,GAAIG,UAAU,QAAQ;AAAA,UACpBA;AAAAA,QACF;AAAA,QACA,GAAIF,QAAQ,QAAQ;AAAA,UAClBA;AAAAA,QACF;AAAA,QACA,GAAIC,SAAS,QAAQ;AAAA,UACnBA;AAAAA,QACF;AAAA,QACA,GAAIE,SAAS,QAAQ;AAAA,UACnBA;AAAAA,QACF;AAAA,QACA,GAAIC,UAAU,QAAQ;AAAA,UACpBA;AAAAA,QACF;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACL,KAAKC,MAAMC,OAAOC,QAAQE,QAAQD,KAAK,CAAC;AAErCE,SAAAA;AACT;;"}

package/dist/cjs/hooks/useLegend.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLegend.cjs","sources":["../../../src/hooks/useLegend.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { getLegendIcon } from \"@viz/utils\";\nimport { HvChartLegend, HvChartLegendIcon } from \"@viz/types/legend\";\n\ninterface HvLegendHookProps {\n  show?: HvChartLegend[\"show\"];\n  direction?: HvChartLegend[\"direction\"];\n  position?: HvChartLegend[\"position\"];\n  series?: Pick<EChartsOption, \"series.series\">;\n  icon?: HvChartLegendIcon;\n  formatter?: string | ((value?: string) => string);\n}\n\nexport const useLegend = ({\n  series,\n  show,\n  icon,\n  formatter,\n  position: positionProp,\n  direction = \"horizontal\",\n}: HvLegendHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"legend\">>(() => {\n    const position: Record<string, string> = { y: positionProp?.y ?? \"top\" };\n    if (positionProp?.x != null && positionProp?.x !== \"center\") {\n      position[positionProp.x] = positionProp.x;\n    } else {\n      position.x = \"center\";\n    }\n\n    return {\n      legend: {\n        show: show ?? (Array.isArray(series) && series.length > 1),\n        itemGap: 20,\n        formatter,\n        orient: direction,\n        ...position,\n        ...(icon && { icon: getLegendIcon(icon) }),\n        ...(!icon && {\n          data:\n            show !== false && Array.isArray(series)\n              ? series.map((s) => {\n                  return {\n                    name: s.name as string,\n                    icon: getLegendIcon(\n                      (s as any).areaStyle != null ? \"square\" : \"line\"\n                    ),\n                  };\n                })\n              : undefined,\n        }),\n      },\n    };\n  }, [series, show, icon, formatter, positionProp, direction]);\n\n  return option;\n};\n"],"names":["useLegend","series","show","icon","formatter","position","positionProp","direction","option","useMemo","y","x","legend","Array","isArray","length","itemGap","orient","getLegendIcon","data","map","s","name","areaStyle","undefined"],"mappings":";;;;AAgBO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AAAAA,EACVC,YAAY;AACK,MAAM;AACjBC,QAAAA,SAASC,MAAAA,QAAuC,MAAM;AAC1D,UAAMJ,WAAmC;AAAA,MAAEK,IAAGJ,6CAAcI,MAAK;AAAA,IAAA;AACjE,SAAIJ,6CAAcK,MAAK,SAAQL,6CAAcK,OAAM,UAAU;AAClDL,eAAAA,aAAaK,CAAC,IAAIL,aAAaK;AAAAA,IAAAA,OACnC;AACLN,eAASM,IAAI;AAAA,IACf;AAEO,WAAA;AAAA,MACLC,QAAQ;AAAA,QACNV,MAAMA,SAASW,MAAMC,QAAQb,MAAM,KAAKA,OAAOc,SAAS;AAAA,QACxDC,SAAS;AAAA,QACTZ;AAAAA,QACAa,QAAQV;AAAAA,QACR,GAAGF;AAAAA,QACH,GAAIF,QAAQ;AAAA,UAAEA,MAAMe,4BAAcf,IAAI;AAAA,QAAE;AAAA,QACxC,GAAI,CAACA,QAAQ;AAAA,UACXgB,MACEjB,SAAS,SAASW,MAAMC,QAAQb,MAAM,IAClCA,OAAOmB,IAAKC,CAAM,MAAA;AACT,mBAAA;AAAA,cACLC,MAAMD,EAAEC;AAAAA,cACRnB,MAAMe,cACHG,cAAAA,EAAUE,aAAa,OAAO,WAAW,MAC5C;AAAA,YAAA;AAAA,UAEH,CAAA,IACDC;AAAAA,QACR;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACvB,QAAQC,MAAMC,MAAMC,WAAWE,cAAcC,SAAS,CAAC;AAEpDC,SAAAA;AACT;;"}
+{"version":3,"file":"useLegend.cjs","sources":["../../../src/hooks/useLegend.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"@viz/utils\";\nimport { HvChartLegend, HvChartLegendIcon } from \"@viz/types/legend\";\nimport { HvEChartsOption } from \"@viz/types/common\";\n\ninterface HvLegendHookProps {\n  show?: HvChartLegend[\"show\"];\n  direction?: HvChartLegend[\"direction\"];\n  position?: HvChartLegend[\"position\"];\n  series?: Pick<HvEChartsOption, \"series.series\">;\n  icon?: HvChartLegendIcon;\n  formatter?: string | ((value?: string) => string);\n}\n\nexport const useLegend = ({\n  series,\n  show,\n  icon,\n  formatter,\n  position: positionProp,\n  direction = \"horizontal\",\n}: HvLegendHookProps) => {\n  const option = useMemo<Pick<HvEChartsOption, \"legend\">>(() => {\n    const position: Record<string, string> = { y: positionProp?.y ?? \"top\" };\n    if (positionProp?.x != null && positionProp?.x !== \"center\") {\n      position[positionProp.x] = positionProp.x;\n    } else {\n      position.x = \"center\";\n    }\n\n    return {\n      legend: {\n        show: show ?? (Array.isArray(series) && series.length > 1),\n        itemGap: 20,\n        formatter,\n        orient: direction,\n        ...position,\n        ...(icon && { icon: getLegendIcon(icon) }),\n        ...(!icon && {\n          data:\n            show !== false && Array.isArray(series)\n              ? series.map((s) => {\n                  return {\n                    name: s.name as string,\n                    icon: getLegendIcon(\n                      (s as any).areaStyle != null ? \"square\" : \"line\"\n                    ),\n                  };\n                })\n              : undefined,\n        }),\n      },\n    };\n  }, [series, show, icon, formatter, positionProp, direction]);\n\n  return option;\n};\n"],"names":["useLegend","series","show","icon","formatter","position","positionProp","direction","option","useMemo","y","x","legend","Array","isArray","length","itemGap","orient","getLegendIcon","data","map","s","name","areaStyle","undefined"],"mappings":";;;;AAeO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AAAAA,EACVC,YAAY;AACK,MAAM;AACjBC,QAAAA,SAASC,MAAAA,QAAyC,MAAM;AAC5D,UAAMJ,WAAmC;AAAA,MAAEK,IAAGJ,6CAAcI,MAAK;AAAA,IAAA;AACjE,SAAIJ,6CAAcK,MAAK,SAAQL,6CAAcK,OAAM,UAAU;AAClDL,eAAAA,aAAaK,CAAC,IAAIL,aAAaK;AAAAA,IAAAA,OACnC;AACLN,eAASM,IAAI;AAAA,IACf;AAEO,WAAA;AAAA,MACLC,QAAQ;AAAA,QACNV,MAAMA,SAASW,MAAMC,QAAQb,MAAM,KAAKA,OAAOc,SAAS;AAAA,QACxDC,SAAS;AAAA,QACTZ;AAAAA,QACAa,QAAQV;AAAAA,QACR,GAAGF;AAAAA,QACH,GAAIF,QAAQ;AAAA,UAAEA,MAAMe,4BAAcf,IAAI;AAAA,QAAE;AAAA,QACxC,GAAI,CAACA,QAAQ;AAAA,UACXgB,MACEjB,SAAS,SAASW,MAAMC,QAAQb,MAAM,IAClCA,OAAOmB,IAAKC,CAAM,MAAA;AACT,mBAAA;AAAA,cACLC,MAAMD,EAAEC;AAAAA,cACRnB,MAAMe,cACHG,cAAAA,EAAUE,aAAa,OAAO,WAAW,MAC5C;AAAA,YAAA;AAAA,UAEH,CAAA,IACDC;AAAAA,QACR;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACvB,QAAQC,MAAMC,MAAMC,WAAWE,cAAcC,SAAS,CAAC;AAEpDC,SAAAA;AACT;;"}

package/dist/cjs/hooks/useOption.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useOption = ({
+  option: optionProp,
+  onOptionChange
+}) => {
+  const option = react.useMemo(() => {
+    const baseOption = {
+      aria: {
+        enabled: true
+      },
+      animation: false
+    };
+    const opt = {
+      ...baseOption,
+      ...optionProp
+    };
+    return onOptionChange ? onOptionChange(opt) : opt;
+  }, [onOptionChange, optionProp]);
+  return option;
+};
+exports.useOption = useOption;
+//# sourceMappingURL=useOption.cjs.map

package/dist/cjs/hooks/useOption.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOption.cjs","sources":["../../../src/hooks/useOption.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartCommonProps, HvEChartsOption } from \"@viz/types/common\";\n\ninterface HvOptionHookProps {\n  option: HvEChartsOption;\n  onOptionChange?: HvChartCommonProps[\"onOptionChange\"];\n}\n\nexport const useOption = ({\n  option: optionProp,\n  onOptionChange,\n}: HvOptionHookProps) => {\n  const option = useMemo<HvEChartsOption>(() => {\n    // Common properties to all charts\n    const baseOption = {\n      aria: {\n        enabled: true,\n      },\n      animation: false,\n    };\n\n    const opt = { ...baseOption, ...optionProp };\n\n    return onOptionChange ? onOptionChange(opt) : opt;\n  }, [onOptionChange, optionProp]);\n\n  return option;\n};\n"],"names":["useOption","option","optionProp","onOptionChange","useMemo","baseOption","aria","enabled","animation","opt"],"mappings":";;;AASO,MAAMA,YAAYA,CAAC;AAAA,EACxBC,QAAQC;AAAAA,EACRC;AACiB,MAAM;AACjBF,QAAAA,SAASG,MAAAA,QAAyB,MAAM;AAE5C,UAAMC,aAAa;AAAA,MACjBC,MAAM;AAAA,QACJC,SAAS;AAAA,MACX;AAAA,MACAC,WAAW;AAAA,IAAA;AAGb,UAAMC,MAAM;AAAA,MAAE,GAAGJ;AAAAA,MAAY,GAAGH;AAAAA,IAAAA;AAEzBC,WAAAA,iBAAiBA,eAAeM,GAAG,IAAIA;AAAAA,EAAAA,GAC7C,CAACN,gBAAgBD,UAAU,CAAC;AAExBD,SAAAA;AACT;;"}

package/dist/cjs/hooks/useSeries.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSeries.cjs","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\nimport {\n  BarSeriesOption,\n  LineSeriesOption,\n  PieSeriesOption,\n} from \"echarts/charts\";\n\nimport { internal } from \"arquero\";\n\nimport { getGroupKey, getMeasure } from \"@viz/utils\";\nimport {\n  HvBarChartMeasures,\n  HvChartEmptyCellMode,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"@viz/types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"@viz/types/common\";\nimport { BarFullMeasures, LineFullMeasures } from \"@viz/types/measures\";\n\ninterface HvSeriesHookProps {\n  type: \"line\" | \"bar\" | \"pie\";\n  data: internal.ColumnTable;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  area?: boolean;\n  areaOpacity?: number;\n  emptyCellMode?: HvChartEmptyCellMode;\n  stack?: HvAxisChartCommonProps[\"stack\"];\n  nameFormatter?: HvAxisChartCommonProps[\"seriesNameFormatter\"];\n  horizontal?: boolean;\n  radius?: number | string | (number | string)[];\n}\n\nexport const useSeries = ({\n  groupBy,\n  type,\n  data,\n  measures,\n  nameFormatter,\n  stack,\n  horizontal = false,\n  area = false,\n  areaOpacity = 0.5,\n  emptyCellMode,\n  radius,\n}: HvSeriesHookProps) => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const option: Pick<EChartsOption, \"series\"> = useMemo<\n    Pick<EChartsOption, \"series\">\n  >(() => {\n    return {\n      series: data\n        .columnNames()\n        .filter((c) => c !== groupByKey)\n        .map<LineSeriesOption | BarSeriesOption | PieSeriesOption>((c) => {\n          const measure = getMeasure(c, measures);\n\n          let pieOps: PieSeriesOption = {};\n          let lineOps: LineSeriesOption = {};\n          let barOps: BarSeriesOption = {};\n\n          // pie\n          if (type === \"pie\") {\n            pieOps = {\n              encode: {\n                value: c,\n                itemName: groupByKey,\n              },\n              labelLine: {\n                show: false,\n              },\n              label: {\n                show: false,\n              },\n              emphasis: {\n                label: {\n                  show: false,\n                },\n              },\n              radius,\n            };\n          }\n\n          // line or bar\n          if (type === \"line\" || type === \"bar\") {\n            const sampling =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasures | BarFullMeasures).sampling\n                : undefined;\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasures | BarFullMeasures).yAxis\n                : undefined;\n            const stackName =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasures | BarFullMeasures).stack ??\n                  stack ??\n                  undefined\n                : stack ?? undefined;\n\n            const axisOps = {\n              sampling,\n              yAxisId,\n              stack: stackName,\n              encode: horizontal\n                ? {\n                    x: c,\n                    y: groupByKey,\n                  }\n                : {\n                    x: groupByKey,\n                    y: c,\n                  },\n            };\n\n            // bar\n            if (type === \"bar\") {\n              barOps = {\n                ...axisOps,\n                barMaxWidth: 90,\n                barMinWidth: 3,\n              };\n            }\n\n            // line\n            if (type === \"line\") {\n              const showSymbol =\n                typeof measure !== \"string\"\n                  ? !(measure as LineFullMeasures).hideSymbol\n                  : true;\n              const connectNulls =\n                typeof measure !== \"string\" &&\n                (measure as LineFullMeasures).emptyCellMode\n                  ? (measure as LineFullMeasures).emptyCellMode === \"connect\"\n                  : emptyCellMode === \"connect\";\n              const isArea =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasures).area ?? area\n                  : area;\n              const aOpacity =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasures).areaOpacity ?? areaOpacity\n                  : areaOpacity;\n\n              lineOps = {\n                ...axisOps,\n                connectNulls,\n                showSymbol,\n                areaStyle: isArea ? { opacity: aOpacity } : undefined,\n              };\n            }\n          }\n\n          return {\n            id: `series~${groupByKey}~${c}`,\n            type,\n            name: nameFormatter ? nameFormatter(c) : c,\n            ...pieOps,\n            ...barOps,\n            ...lineOps,\n          } as LineSeriesOption | BarSeriesOption | PieSeriesOption;\n        }),\n    };\n  }, [\n    data,\n    groupByKey,\n    area,\n    stack,\n    nameFormatter,\n    emptyCellMode,\n    areaOpacity,\n    measures,\n    type,\n    horizontal,\n    radius,\n  ]);\n\n  return option;\n};\n"],"names":["useSeries","groupBy","type","data","measures","nameFormatter","stack","horizontal","area","areaOpacity","emptyCellMode","radius","groupByKey","getGroupKey","option","useMemo","series","columnNames","filter","c","map","measure","getMeasure","pieOps","lineOps","barOps","encode","value","itemName","labelLine","show","label","emphasis","sampling","undefined","yAxisId","yAxis","stackName","axisOps","x","y","barMaxWidth","barMinWidth","showSymbol","hideSymbol","connectNulls","isArea","aOpacity","areaStyle","opacity","id","name"],"mappings":";;;;;AAuCO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,OAAO;AAAA,EACPC,cAAc;AAAA,EACdC;AAAAA,EACAC;AACiB,MAAM;AACjBC,QAAAA,aAAaC,wBAAYZ,OAAO;AAEhCa,QAAAA,SAAwCC,MAAAA,QAE5C,MAAM;AACC,WAAA;AAAA,MACLC,QAAQb,KACLc,YACAC,EAAAA,OAAQC,OAAMA,MAAMP,UAAU,EAC9BQ,IAA2DD,CAAM,MAAA;AAC1DE,cAAAA,UAAUC,WAAAA,WAAWH,GAAGf,QAAQ;AAEtC,YAAImB,SAA0B,CAAA;AAC9B,YAAIC,UAA4B,CAAA;AAChC,YAAIC,SAA0B,CAAA;AAG9B,YAAIvB,SAAS,OAAO;AACT,mBAAA;AAAA,YACPwB,QAAQ;AAAA,cACNC,OAAOR;AAAAA,cACPS,UAAUhB;AAAAA,YACZ;AAAA,YACAiB,WAAW;AAAA,cACTC,MAAM;AAAA,YACR;AAAA,YACAC,OAAO;AAAA,cACLD,MAAM;AAAA,YACR;AAAA,YACAE,UAAU;AAAA,cACRD,OAAO;AAAA,gBACLD,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACAnB;AAAAA,UAAAA;AAAAA,QAEJ;AAGIT,YAAAA,SAAS,UAAUA,SAAS,OAAO;AACrC,gBAAM+B,WACJ,OAAOZ,YAAY,WACdA,QAA+CY,WAChDC;AACN,gBAAMC,UACJ,OAAOd,YAAY,WACdA,QAA+Ce,QAChDF;AACAG,gBAAAA,YACJ,OAAOhB,YAAY,WACdA,QAA+Cf,SAChDA,SACA4B,SACA5B,SAAS4B;AAEf,gBAAMI,UAAU;AAAA,YACdL;AAAAA,YACAE;AAAAA,YACA7B,OAAO+B;AAAAA,YACPX,QAAQnB,aACJ;AAAA,cACEgC,GAAGpB;AAAAA,cACHqB,GAAG5B;AAAAA,YAAAA,IAEL;AAAA,cACE2B,GAAG3B;AAAAA,cACH4B,GAAGrB;AAAAA,YACL;AAAA,UAAA;AAIN,cAAIjB,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAGoC;AAAAA,cACHG,aAAa;AAAA,cACbC,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAIxC,SAAS,QAAQ;AACnB,kBAAMyC,aACJ,OAAOtB,YAAY,WACf,CAAEA,QAA6BuB,aAC/B;AACAC,kBAAAA,eACJ,OAAOxB,YAAY,YAClBA,QAA6BX,gBACzBW,QAA6BX,kBAAkB,YAChDA,kBAAkB;AACxB,kBAAMoC,SACJ,OAAOzB,YAAY,WACdA,QAA6Bb,QAAQA,OACtCA;AACN,kBAAMuC,WACJ,OAAO1B,YAAY,WACdA,QAA6BZ,eAAeA,cAC7CA;AAEI,sBAAA;AAAA,cACR,GAAG6B;AAAAA,cACHO;AAAAA,cACAF;AAAAA,cACAK,WAAWF,SAAS;AAAA,gBAAEG,SAASF;AAAAA,cAAab,IAAAA;AAAAA,YAAAA;AAAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACLgB,IAAK,UAAStC,UAAW,IAAGO,CAAE;AAAA,UAC9BjB;AAAAA,UACAiD,MAAM9C,gBAAgBA,cAAcc,CAAC,IAAIA;AAAAA,UACzC,GAAGI;AAAAA,UACH,GAAGE;AAAAA,UACH,GAAGD;AAAAA,QAAAA;AAAAA,MACL,CACD;AAAA,IAAA;AAAA,EAEJ,GAAA,CACDrB,MACAS,YACAJ,MACAF,OACAD,eACAK,eACAD,aACAL,UACAF,MACAK,YACAI,MAAM,CACP;AAEMG,SAAAA;AACT;;"}
+{"version":3,"file":"useSeries.cjs","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  BarSeriesOption,\n  LineSeriesOption,\n  PieSeriesOption,\n} from \"echarts/charts\";\n\nimport { internal } from \"arquero\";\n\nimport { getGroupKey, getMeasure } from \"@viz/utils\";\nimport {\n  HvBarChartMeasures,\n  HvChartEmptyCellMode,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"@viz/types\";\nimport {\n  HvAxisChartCommonProps,\n  HvChartCommonProps,\n  HvEChartsOption,\n} from \"@viz/types/common\";\nimport { BarFullMeasures, LineFullMeasures } from \"@viz/types/measures\";\n\ninterface HvSeriesHookProps {\n  type: \"line\" | \"bar\" | \"pie\";\n  data: internal.ColumnTable;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  area?: boolean;\n  areaOpacity?: number;\n  emptyCellMode?: HvChartEmptyCellMode;\n  stack?: HvAxisChartCommonProps[\"stack\"];\n  nameFormatter?: HvAxisChartCommonProps[\"seriesNameFormatter\"];\n  horizontal?: boolean;\n  radius?: number | string | (number | string)[];\n}\n\nexport const useSeries = ({\n  groupBy,\n  type,\n  data,\n  measures,\n  nameFormatter,\n  stack,\n  horizontal = false,\n  area = false,\n  areaOpacity = 0.5,\n  emptyCellMode,\n  radius,\n}: HvSeriesHookProps) => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const option: Pick<HvEChartsOption, \"series\"> = useMemo<\n    Pick<HvEChartsOption, \"series\">\n  >(() => {\n    return {\n      series: data\n        .columnNames()\n        .filter((c) => c !== groupByKey)\n        .map<LineSeriesOption | BarSeriesOption | PieSeriesOption>((c) => {\n          const measure = getMeasure(c, measures);\n\n          let pieOps: PieSeriesOption = {};\n          let lineOps: LineSeriesOption = {};\n          let barOps: BarSeriesOption = {};\n\n          // pie\n          if (type === \"pie\") {\n            pieOps = {\n              encode: {\n                value: c,\n                itemName: groupByKey,\n              },\n              labelLine: {\n                show: false,\n              },\n              label: {\n                show: false,\n              },\n              emphasis: {\n                label: {\n                  show: false,\n                },\n              },\n              radius,\n            };\n          }\n\n          // line or bar\n          if (type === \"line\" || type === \"bar\") {\n            const sampling =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasures | BarFullMeasures).sampling\n                : undefined;\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasures | BarFullMeasures).yAxis\n                : undefined;\n            const stackName =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasures | BarFullMeasures).stack ??\n                  stack ??\n                  undefined\n                : stack ?? undefined;\n\n            const axisOps = {\n              sampling,\n              yAxisId,\n              stack: stackName,\n              encode: horizontal\n                ? {\n                    x: c,\n                    y: groupByKey,\n                  }\n                : {\n                    x: groupByKey,\n                    y: c,\n                  },\n            };\n\n            // bar\n            if (type === \"bar\") {\n              barOps = {\n                ...axisOps,\n                barMaxWidth: 90,\n                barMinWidth: 3,\n              };\n            }\n\n            // line\n            if (type === \"line\") {\n              const showSymbol =\n                typeof measure !== \"string\"\n                  ? !(measure as LineFullMeasures).hideSymbol\n                  : true;\n              const connectNulls =\n                typeof measure !== \"string\" &&\n                (measure as LineFullMeasures).emptyCellMode\n                  ? (measure as LineFullMeasures).emptyCellMode === \"connect\"\n                  : emptyCellMode === \"connect\";\n              const isArea =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasures).area ?? area\n                  : area;\n              const aOpacity =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasures).areaOpacity ?? areaOpacity\n                  : areaOpacity;\n\n              lineOps = {\n                ...axisOps,\n                connectNulls,\n                showSymbol,\n                areaStyle: isArea ? { opacity: aOpacity } : undefined,\n              };\n            }\n          }\n\n          return {\n            id: `series~${groupByKey}~${c}`,\n            type,\n            name: nameFormatter ? nameFormatter(c) : c,\n            ...pieOps,\n            ...barOps,\n            ...lineOps,\n          } as LineSeriesOption | BarSeriesOption | PieSeriesOption;\n        }),\n    };\n  }, [\n    data,\n    groupByKey,\n    area,\n    stack,\n    nameFormatter,\n    emptyCellMode,\n    areaOpacity,\n    measures,\n    type,\n    horizontal,\n    radius,\n  ]);\n\n  return option;\n};\n"],"names":["useSeries","groupBy","type","data","measures","nameFormatter","stack","horizontal","area","areaOpacity","emptyCellMode","radius","groupByKey","getGroupKey","option","useMemo","series","columnNames","filter","c","map","measure","getMeasure","pieOps","lineOps","barOps","encode","value","itemName","labelLine","show","label","emphasis","sampling","undefined","yAxisId","yAxis","stackName","axisOps","x","y","barMaxWidth","barMinWidth","showSymbol","hideSymbol","connectNulls","isArea","aOpacity","areaStyle","opacity","id","name"],"mappings":";;;;;AA0CO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,OAAO;AAAA,EACPC,cAAc;AAAA,EACdC;AAAAA,EACAC;AACiB,MAAM;AACjBC,QAAAA,aAAaC,wBAAYZ,OAAO;AAEhCa,QAAAA,SAA0CC,MAAAA,QAE9C,MAAM;AACC,WAAA;AAAA,MACLC,QAAQb,KACLc,YACAC,EAAAA,OAAQC,OAAMA,MAAMP,UAAU,EAC9BQ,IAA2DD,CAAM,MAAA;AAC1DE,cAAAA,UAAUC,WAAAA,WAAWH,GAAGf,QAAQ;AAEtC,YAAImB,SAA0B,CAAA;AAC9B,YAAIC,UAA4B,CAAA;AAChC,YAAIC,SAA0B,CAAA;AAG9B,YAAIvB,SAAS,OAAO;AACT,mBAAA;AAAA,YACPwB,QAAQ;AAAA,cACNC,OAAOR;AAAAA,cACPS,UAAUhB;AAAAA,YACZ;AAAA,YACAiB,WAAW;AAAA,cACTC,MAAM;AAAA,YACR;AAAA,YACAC,OAAO;AAAA,cACLD,MAAM;AAAA,YACR;AAAA,YACAE,UAAU;AAAA,cACRD,OAAO;AAAA,gBACLD,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACAnB;AAAAA,UAAAA;AAAAA,QAEJ;AAGIT,YAAAA,SAAS,UAAUA,SAAS,OAAO;AACrC,gBAAM+B,WACJ,OAAOZ,YAAY,WACdA,QAA+CY,WAChDC;AACN,gBAAMC,UACJ,OAAOd,YAAY,WACdA,QAA+Ce,QAChDF;AACAG,gBAAAA,YACJ,OAAOhB,YAAY,WACdA,QAA+Cf,SAChDA,SACA4B,SACA5B,SAAS4B;AAEf,gBAAMI,UAAU;AAAA,YACdL;AAAAA,YACAE;AAAAA,YACA7B,OAAO+B;AAAAA,YACPX,QAAQnB,aACJ;AAAA,cACEgC,GAAGpB;AAAAA,cACHqB,GAAG5B;AAAAA,YAAAA,IAEL;AAAA,cACE2B,GAAG3B;AAAAA,cACH4B,GAAGrB;AAAAA,YACL;AAAA,UAAA;AAIN,cAAIjB,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAGoC;AAAAA,cACHG,aAAa;AAAA,cACbC,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAIxC,SAAS,QAAQ;AACnB,kBAAMyC,aACJ,OAAOtB,YAAY,WACf,CAAEA,QAA6BuB,aAC/B;AACAC,kBAAAA,eACJ,OAAOxB,YAAY,YAClBA,QAA6BX,gBACzBW,QAA6BX,kBAAkB,YAChDA,kBAAkB;AACxB,kBAAMoC,SACJ,OAAOzB,YAAY,WACdA,QAA6Bb,QAAQA,OACtCA;AACN,kBAAMuC,WACJ,OAAO1B,YAAY,WACdA,QAA6BZ,eAAeA,cAC7CA;AAEI,sBAAA;AAAA,cACR,GAAG6B;AAAAA,cACHO;AAAAA,cACAF;AAAAA,cACAK,WAAWF,SAAS;AAAA,gBAAEG,SAASF;AAAAA,cAAab,IAAAA;AAAAA,YAAAA;AAAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACLgB,IAAK,UAAStC,UAAW,IAAGO,CAAE;AAAA,UAC9BjB;AAAAA,UACAiD,MAAM9C,gBAAgBA,cAAcc,CAAC,IAAIA;AAAAA,UACzC,GAAGI;AAAAA,UACH,GAAGE;AAAAA,UACH,GAAGD;AAAAA,QAAAA;AAAAA,MACL,CACD;AAAA,IAAA;AAAA,EAEJ,GAAA,CACDrB,MACAS,YACAJ,MACAF,OACAD,eACAK,eACAD,aACAL,UACAF,MACAK,YACAI,MAAM,CACP;AAEMG,SAAAA;AACT;;"}

package/dist/cjs/hooks/useVisualMap.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualMap.cjs","sources":["../../../src/hooks/useVisualMap.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { getLegendIcon } from \"@viz/utils\";\nimport { HvChartLegend } from \"@viz/types\";\n\nexport interface HvVisualMapHookProps {\n  show?: boolean;\n  pieces?: Record<string, string | number>[];\n  max?: number;\n  min?: number;\n  colorScale?: string[];\n  type?: \"continuous\" | \"piecewise\";\n  // Uses the same props as the legend\n  position?: HvChartLegend[\"position\"];\n  direction?: HvChartLegend[\"direction\"];\n}\n\nexport const useVisualMap = ({\n  show = true,\n  direction = \"horizontal\",\n  type = \"continuous\",\n  pieces,\n  max,\n  min,\n  colorScale,\n  position: positionProp,\n}: HvVisualMapHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"visualMap\">>(() => {\n    return {\n      visualMap: {\n        type,\n        show,\n        ...(pieces && {\n          pieces,\n        }),\n        ...(type === \"piecewise\" && {\n          itemSymbol: getLegendIcon(\"square\"),\n          itemGap: 20,\n          itemHeight: 16,\n          itemWidth: 16,\n        }),\n        ...(colorScale && {\n          max,\n          min,\n          inRange: {\n            color: colorScale,\n          },\n        }),\n        orient: direction,\n        top: positionProp?.y || \"top\",\n        left: positionProp?.x || \"center\",\n      },\n    };\n  }, [\n    colorScale,\n    direction,\n    max,\n    min,\n    pieces,\n    positionProp?.x,\n    positionProp?.y,\n    show,\n    type,\n  ]);\n\n  return option;\n};\n"],"names":["useVisualMap","show","direction","type","pieces","max","min","colorScale","position","positionProp","option","useMemo","visualMap","itemSymbol","getLegendIcon","itemGap","itemHeight","itemWidth","inRange","color","orient","top","y","left","x"],"mappings":";;;;AAmBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC,OAAO;AAAA,EACPC,YAAY;AAAA,EACZC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AACU,MAAM;AACpBC,QAAAA,SAASC,MAAAA,QAA0C,MAAM;AACtD,WAAA;AAAA,MACLC,WAAW;AAAA,QACTT;AAAAA,QACAF;AAAAA,QACA,GAAIG,UAAU;AAAA,UACZA;AAAAA,QACF;AAAA,QACA,GAAID,SAAS,eAAe;AAAA,UAC1BU,YAAYC,4BAAc,QAAQ;AAAA,UAClCC,SAAS;AAAA,UACTC,YAAY;AAAA,UACZC,WAAW;AAAA,QACb;AAAA,QACA,GAAIV,cAAc;AAAA,UAChBF;AAAAA,UACAC;AAAAA,UACAY,SAAS;AAAA,YACPC,OAAOZ;AAAAA,UACT;AAAA,QACF;AAAA,QACAa,QAAQlB;AAAAA,QACRmB,MAAKZ,6CAAca,MAAK;AAAA,QACxBC,OAAMd,6CAAce,MAAK;AAAA,MAC3B;AAAA,IAAA;AAAA,EAED,GAAA,CACDjB,YACAL,WACAG,KACAC,KACAF,QACAK,6CAAce,GACdf,6CAAca,GACdrB,MACAE,IAAI,CACL;AAEMO,SAAAA;AACT;;"}
+{"version":3,"file":"useVisualMap.cjs","sources":["../../../src/hooks/useVisualMap.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"@viz/utils\";\nimport { HvChartLegend } from \"@viz/types\";\nimport { HvEChartsOption } from \"@viz/types/common\";\n\nexport interface HvVisualMapHookProps {\n  show?: boolean;\n  pieces?: Record<string, string | number>[];\n  max?: number;\n  min?: number;\n  colorScale?: string[];\n  type?: \"continuous\" | \"piecewise\";\n  // Uses the same props as the legend\n  position?: HvChartLegend[\"position\"];\n  direction?: HvChartLegend[\"direction\"];\n}\n\nexport const useVisualMap = ({\n  show = true,\n  direction = \"horizontal\",\n  type = \"continuous\",\n  pieces,\n  max,\n  min,\n  colorScale,\n  position: positionProp,\n}: HvVisualMapHookProps) => {\n  const option = useMemo<Pick<HvEChartsOption, \"visualMap\">>(() => {\n    return {\n      visualMap: {\n        type,\n        show,\n        ...(pieces && {\n          pieces,\n        }),\n        ...(type === \"piecewise\" && {\n          itemSymbol: getLegendIcon(\"square\"),\n          itemGap: 20,\n          itemHeight: 16,\n          itemWidth: 16,\n        }),\n        ...(colorScale && {\n          max,\n          min,\n          inRange: {\n            color: colorScale,\n          },\n        }),\n        orient: direction,\n        top: positionProp?.y || \"top\",\n        left: positionProp?.x || \"center\",\n      },\n    };\n  }, [\n    colorScale,\n    direction,\n    max,\n    min,\n    pieces,\n    positionProp?.x,\n    positionProp?.y,\n    show,\n    type,\n  ]);\n\n  return option;\n};\n"],"names":["useVisualMap","show","direction","type","pieces","max","min","colorScale","position","positionProp","option","useMemo","visualMap","itemSymbol","getLegendIcon","itemGap","itemHeight","itemWidth","inRange","color","orient","top","y","left","x"],"mappings":";;;;AAkBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC,OAAO;AAAA,EACPC,YAAY;AAAA,EACZC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AACU,MAAM;AACpBC,QAAAA,SAASC,MAAAA,QAA4C,MAAM;AACxD,WAAA;AAAA,MACLC,WAAW;AAAA,QACTT;AAAAA,QACAF;AAAAA,QACA,GAAIG,UAAU;AAAA,UACZA;AAAAA,QACF;AAAA,QACA,GAAID,SAAS,eAAe;AAAA,UAC1BU,YAAYC,4BAAc,QAAQ;AAAA,UAClCC,SAAS;AAAA,UACTC,YAAY;AAAA,UACZC,WAAW;AAAA,QACb;AAAA,QACA,GAAIV,cAAc;AAAA,UAChBF;AAAAA,UACAC;AAAAA,UACAY,SAAS;AAAA,YACPC,OAAOZ;AAAAA,UACT;AAAA,QACF;AAAA,QACAa,QAAQlB;AAAAA,QACRmB,MAAKZ,6CAAca,MAAK;AAAA,QACxBC,OAAMd,6CAAce,MAAK;AAAA,MAC3B;AAAA,IAAA;AAAA,EAED,GAAA,CACDjB,YACAL,WACAG,KACAC,KACAF,QACAK,6CAAce,GACdf,6CAAca,GACdrB,MACAE,IAAI,CACL;AAEMO,SAAAA;AACT;;"}

package/dist/cjs/hooks/useXAxis.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useXAxis.cjs","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartXAxis } from \"@viz/types/common\";\n\ninterface HvXAxisHookProps extends HvChartXAxis {\n  scale?: boolean;\n  data?: string[];\n}\n\nexport const useXAxis = ({\n  id,\n  type = \"categorical\",\n  labelFormatter,\n  labelRotation,\n  name,\n  maxValue,\n  minValue,\n  scale = false,\n  data,\n  position,\n  nameProps,\n}: HvXAxisHookProps) => {\n  const { colors } = useTheme();\n\n  const option = useMemo<Pick<EChartsOption, \"xAxis\">>(() => {\n    const nameStyleKeys = nameProps\n      ? Object.keys(nameProps).filter((key) => key !== \"location\")\n      : undefined;\n    const nameStyle =\n      nameProps && nameStyleKeys\n        ? nameStyleKeys.reduce((acc, curr) => {\n            return {\n              ...acc,\n              [curr]:\n                curr === \"color\"\n                  ? colors?.[nameProps[curr] as string] || nameProps[curr]\n                  : nameProps[curr],\n            };\n          }, {})\n        : undefined;\n\n    return {\n      xAxis: {\n        id,\n        type: getAxisType(type),\n        name,\n        scale,\n        axisLabel: {\n          rotate: labelRotation ?? 0,\n          formatter: labelFormatter,\n        },\n        max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n        min: minValue === \"min\" ? \"dataMin\" : minValue,\n        ...(nameProps?.location && {\n          nameLocation: nameProps.location,\n        }),\n        ...(nameStyle && {\n          nameTextStyle: nameStyle,\n        }),\n        ...(data && { data }),\n        ...(position && { position }),\n      },\n    };\n  }, [\n    nameProps,\n    id,\n    type,\n    name,\n    scale,\n    labelRotation,\n    labelFormatter,\n    maxValue,\n    minValue,\n    data,\n    position,\n    colors,\n  ]);\n\n  return option;\n};\n"],"names":["useXAxis","id","type","labelFormatter","labelRotation","name","maxValue","minValue","scale","data","position","nameProps","colors","useTheme","option","useMemo","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","xAxis","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle"],"mappings":";;;;;AAcO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,eAAS,SAAA;AAEtBC,QAAAA,SAASC,MAAAA,QAAsC,MAAM;AACnDC,UAAAA,gBAAgBL,YAClBM,OAAOC,KAAKP,SAAS,EAAEQ,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJX,aAAaK,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,WACLb,iCAASD,UAAUc,IAAI,OAAgBd,UAAUc,IAAI,IACrDd,UAAUc,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLK,OAAO;AAAA,QACLzB;AAAAA,QACAC,MAAMyB,wBAAYzB,IAAI;AAAA,QACtBG;AAAAA,QACAG;AAAAA,QACAoB,WAAW;AAAA,UACTC,QAAQzB,iBAAiB;AAAA,UACzB0B,WAAW3B;AAAAA,QACb;AAAA,QACA4B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC0B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC,IAAII,uCAAWsB,aAAY;AAAA,UACzBC,cAAcvB,UAAUsB;AAAAA,QAC1B;AAAA,QACA,GAAIX,aAAa;AAAA,UACfa,eAAeb;AAAAA,QACjB;AAAA,QACA,GAAIb,QAAQ;AAAA,UAAEA;AAAAA,QAAK;AAAA,QACnB,GAAIC,YAAY;AAAA,UAAEA;AAAAA,QAAS;AAAA,MAC7B;AAAA,IAAA;AAAA,EAED,GAAA,CACDC,WACAV,IACAC,MACAG,MACAG,OACAJ,eACAD,gBACAG,UACAC,UACAE,MACAC,UACAE,MAAM,CACP;AAEME,SAAAA;AACT;;"}
+{"version":3,"file":"useXAxis.cjs","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartXAxis, HvEChartsOption } from \"@viz/types/common\";\n\ninterface HvXAxisHookProps extends HvChartXAxis {\n  scale?: boolean;\n  data?: string[];\n}\n\nexport const useXAxis = ({\n  id,\n  type = \"categorical\",\n  labelFormatter,\n  labelRotation,\n  name,\n  maxValue,\n  minValue,\n  scale = false,\n  data,\n  position,\n  nameProps,\n}: HvXAxisHookProps) => {\n  const { colors } = useTheme();\n\n  const option = useMemo<Pick<HvEChartsOption, \"xAxis\">>(() => {\n    const nameStyleKeys = nameProps\n      ? Object.keys(nameProps).filter((key) => key !== \"location\")\n      : undefined;\n    const nameStyle =\n      nameProps && nameStyleKeys\n        ? nameStyleKeys.reduce((acc, curr) => {\n            return {\n              ...acc,\n              [curr]:\n                curr === \"color\"\n                  ? colors?.[nameProps[curr] as string] || nameProps[curr]\n                  : nameProps[curr],\n            };\n          }, {})\n        : undefined;\n\n    return {\n      xAxis: {\n        id,\n        type: getAxisType(type),\n        name,\n        scale,\n        axisLabel: {\n          rotate: labelRotation ?? 0,\n          formatter: labelFormatter,\n        },\n        max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n        min: minValue === \"min\" ? \"dataMin\" : minValue,\n        ...(nameProps?.location && {\n          nameLocation: nameProps.location,\n        }),\n        ...(nameStyle && {\n          nameTextStyle: nameStyle,\n        }),\n        ...(data && { data }),\n        ...(position && { position }),\n      },\n    };\n  }, [\n    nameProps,\n    id,\n    type,\n    name,\n    scale,\n    labelRotation,\n    labelFormatter,\n    maxValue,\n    minValue,\n    data,\n    position,\n    colors,\n  ]);\n\n  return option;\n};\n"],"names":["useXAxis","id","type","labelFormatter","labelRotation","name","maxValue","minValue","scale","data","position","nameProps","colors","useTheme","option","useMemo","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","xAxis","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle"],"mappings":";;;;;AAYO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,eAAS,SAAA;AAEtBC,QAAAA,SAASC,MAAAA,QAAwC,MAAM;AACrDC,UAAAA,gBAAgBL,YAClBM,OAAOC,KAAKP,SAAS,EAAEQ,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJX,aAAaK,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,WACLb,iCAASD,UAAUc,IAAI,OAAgBd,UAAUc,IAAI,IACrDd,UAAUc,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLK,OAAO;AAAA,QACLzB;AAAAA,QACAC,MAAMyB,wBAAYzB,IAAI;AAAA,QACtBG;AAAAA,QACAG;AAAAA,QACAoB,WAAW;AAAA,UACTC,QAAQzB,iBAAiB;AAAA,UACzB0B,WAAW3B;AAAAA,QACb;AAAA,QACA4B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC0B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC,IAAII,uCAAWsB,aAAY;AAAA,UACzBC,cAAcvB,UAAUsB;AAAAA,QAC1B;AAAA,QACA,GAAIX,aAAa;AAAA,UACfa,eAAeb;AAAAA,QACjB;AAAA,QACA,GAAIb,QAAQ;AAAA,UAAEA;AAAAA,QAAK;AAAA,QACnB,GAAIC,YAAY;AAAA,UAAEA;AAAAA,QAAS;AAAA,MAC7B;AAAA,IAAA;AAAA,EAED,GAAA,CACDC,WACAV,IACAC,MACAG,MACAG,OACAJ,eACAD,gBACAG,UACAC,UACAE,MACAC,UACAE,MAAM,CACP;AAEME,SAAAA;AACT;;"}

package/dist/cjs/hooks/useYAxis.cjs

@@ -55,7 +55,7 @@ const useYAxis = ({
   }, [colors, defaultType]);
   const option = react.useMemo(() => {
     return {
-      yAxis: Array.isArray(axes) ? axes.map((axis) => createAxis(axis)) : createAxis({})
+      yAxis: Array.isArray(axes) ? axes.map((axis) => createAxis(axis)) : [createAxis({})]
     };
   }, [axes, createAxis]);
   return option;

package/dist/cjs/hooks/useYAxis.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useYAxis.cjs","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis } from \"@viz/types/common\";\n\ninterface YAxis extends HvChartYAxis {\n  data?: string[];\n}\n\ninterface HvYAxisHookProps {\n  axes?: YAxis[];\n  defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n  axes,\n  defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n  const { colors } = useTheme();\n\n  const createAxis = useCallback(\n    ({\n      id,\n      type,\n      name,\n      labelFormatter,\n      labelRotation,\n      maxValue,\n      minValue,\n      nameProps,\n      data,\n      position,\n    }: YAxis) => {\n      const nameStyleKeys = nameProps\n        ? Object.keys(nameProps).filter((key) => key !== \"location\")\n        : undefined;\n      const nameStyle =\n        nameProps && nameStyleKeys\n          ? nameStyleKeys.reduce((acc, curr) => {\n              return {\n                ...acc,\n                [curr]:\n                  curr === \"color\"\n                    ? colors?.[nameProps[curr] as string] || nameProps[curr]\n                    : nameProps[curr],\n              };\n            }, {})\n          : undefined;\n\n      return {\n        id,\n        type: getAxisType(type) ?? getAxisType(defaultType),\n        name,\n        axisLabel: {\n          rotate: labelRotation ?? 0,\n          formatter: labelFormatter,\n        },\n        max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n        min: minValue === \"min\" ? \"dataMin\" : minValue,\n        ...(nameProps?.location && {\n          nameLocation: nameProps?.location,\n        }),\n        ...(nameStyle && {\n          nameTextStyle: nameStyle,\n        }),\n        ...(data && { data }),\n        ...(position && { position }),\n      };\n    },\n    [colors, defaultType]\n  );\n\n  const option = useMemo<Pick<EChartsOption, \"yAxis\">>(() => {\n    return {\n      yAxis: Array.isArray(axes)\n        ? axes.map((axis) => createAxis(axis))\n        : createAxis({}),\n    };\n  }, [axes, createAxis]);\n\n  return option;\n};\n"],"names":["useYAxis","axes","defaultType","colors","useTheme","createAxis","useCallback","id","type","name","labelFormatter","labelRotation","maxValue","minValue","nameProps","data","position","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle","option","useMemo","yAxis","Array","isArray","map","axis"],"mappings":";;;;;AAmBO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AACE,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,eAAS,SAAA;AAEtBC,QAAAA,aAAaC,MAAAA,YACjB,CAAC;AAAA,IACCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,MACW;AACLC,UAAAA,gBAAgBH,YAClBI,OAAOC,KAAKL,SAAS,EAAEM,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJT,aAAaG,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,WACLvB,iCAASW,UAAUY,IAAI,OAAgBZ,UAAUY,IAAI,IACrDZ,UAAUY,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLf;AAAAA,MACAC,MAAMmB,YAAAA,YAAYnB,IAAI,KAAKmB,YAAAA,YAAYzB,WAAW;AAAA,MAClDO;AAAAA,MACAmB,WAAW;AAAA,QACTC,QAAQlB,iBAAiB;AAAA,QACzBmB,WAAWpB;AAAAA,MACb;AAAA,MACAqB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtCoB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtC,IAAIC,uCAAWmB,aAAY;AAAA,QACzBC,cAAcpB,uCAAWmB;AAAAA,MAC3B;AAAA,MACA,GAAIV,aAAa;AAAA,QACfY,eAAeZ;AAAAA,MACjB;AAAA,MACA,GAAIR,QAAQ;AAAA,QAAEA;AAAAA,MAAK;AAAA,MACnB,GAAIC,YAAY;AAAA,QAAEA;AAAAA,MAAS;AAAA,IAAA;AAAA,EAC7B,GAEF,CAACb,QAAQD,WAAW,CACtB;AAEMkC,QAAAA,SAASC,MAAAA,QAAsC,MAAM;AAClD,WAAA;AAAA,MACLC,OAAOC,MAAMC,QAAQvC,IAAI,IACrBA,KAAKwC,IAAKC,CAASrC,SAAAA,WAAWqC,IAAI,CAAC,IACnCrC,WAAW,CAAA,CAAE;AAAA,IAAA;AAAA,EACnB,GACC,CAACJ,MAAMI,UAAU,CAAC;AAEd+B,SAAAA;AACT;;"}
+{"version":3,"file":"useYAxis.cjs","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis, HvEChartsOption } from \"@viz/types/common\";\n\ninterface YAxis extends HvChartYAxis {\n  data?: string[];\n}\n\ninterface HvYAxisHookProps {\n  axes?: YAxis[];\n  defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n  axes,\n  defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n  const { colors } = useTheme();\n\n  const createAxis = useCallback(\n    ({\n      id,\n      type,\n      name,\n      labelFormatter,\n      labelRotation,\n      maxValue,\n      minValue,\n      nameProps,\n      data,\n      position,\n    }: YAxis) => {\n      const nameStyleKeys = nameProps\n        ? Object.keys(nameProps).filter((key) => key !== \"location\")\n        : undefined;\n      const nameStyle =\n        nameProps && nameStyleKeys\n          ? nameStyleKeys.reduce((acc, curr) => {\n              return {\n                ...acc,\n                [curr]:\n                  curr === \"color\"\n                    ? colors?.[nameProps[curr] as string] || nameProps[curr]\n                    : nameProps[curr],\n              };\n            }, {})\n          : undefined;\n\n      return {\n        id,\n        type: getAxisType(type) ?? getAxisType(defaultType),\n        name,\n        axisLabel: {\n          rotate: labelRotation ?? 0,\n          formatter: labelFormatter,\n        },\n        max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n        min: minValue === \"min\" ? \"dataMin\" : minValue,\n        ...(nameProps?.location && {\n          nameLocation: nameProps?.location,\n        }),\n        ...(nameStyle && {\n          nameTextStyle: nameStyle,\n        }),\n        ...(data && { data }),\n        ...(position && { position }),\n      };\n    },\n    [colors, defaultType]\n  );\n\n  const option = useMemo<Pick<HvEChartsOption, \"yAxis\">>(() => {\n    return {\n      yAxis: Array.isArray(axes)\n        ? axes.map((axis) => createAxis(axis))\n        : [createAxis({})],\n    };\n  }, [axes, createAxis]);\n\n  return option;\n};\n"],"names":["useYAxis","axes","defaultType","colors","useTheme","createAxis","useCallback","id","type","name","labelFormatter","labelRotation","maxValue","minValue","nameProps","data","position","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle","option","useMemo","yAxis","Array","isArray","map","axis"],"mappings":";;;;;AAiBO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AACE,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,eAAS,SAAA;AAEtBC,QAAAA,aAAaC,MAAAA,YACjB,CAAC;AAAA,IACCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,MACW;AACLC,UAAAA,gBAAgBH,YAClBI,OAAOC,KAAKL,SAAS,EAAEM,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJT,aAAaG,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,WACLvB,iCAASW,UAAUY,IAAI,OAAgBZ,UAAUY,IAAI,IACrDZ,UAAUY,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLf;AAAAA,MACAC,MAAMmB,YAAAA,YAAYnB,IAAI,KAAKmB,YAAAA,YAAYzB,WAAW;AAAA,MAClDO;AAAAA,MACAmB,WAAW;AAAA,QACTC,QAAQlB,iBAAiB;AAAA,QACzBmB,WAAWpB;AAAAA,MACb;AAAA,MACAqB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtCoB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtC,IAAIC,uCAAWmB,aAAY;AAAA,QACzBC,cAAcpB,uCAAWmB;AAAAA,MAC3B;AAAA,MACA,GAAIV,aAAa;AAAA,QACfY,eAAeZ;AAAAA,MACjB;AAAA,MACA,GAAIR,QAAQ;AAAA,QAAEA;AAAAA,MAAK;AAAA,MACnB,GAAIC,YAAY;AAAA,QAAEA;AAAAA,MAAS;AAAA,IAAA;AAAA,EAC7B,GAEF,CAACb,QAAQD,WAAW,CACtB;AAEMkC,QAAAA,SAASC,MAAAA,QAAwC,MAAM;AACpD,WAAA;AAAA,MACLC,OAAOC,MAAMC,QAAQvC,IAAI,IACrBA,KAAKwC,IAAKC,CAAAA,SAASrC,WAAWqC,IAAI,CAAC,IACnC,CAACrC,WAAW,CAAE,CAAA,CAAC;AAAA,IAAA;AAAA,EACrB,GACC,CAACJ,MAAMI,UAAU,CAAC;AAEd+B,SAAAA;AACT;;"}

package/dist/esm/components/BarChart/BarChart.js

@@ -1,5 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useMemo } from "react";
+import { forwardRef } from "react";
 import * as echarts from "echarts/core";
 import { BarChart } from "echarts/charts";
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent } from "echarts/components";
@@ -11,28 +11,31 @@ import { useData } from "../../hooks/useData.js";
 import { useDataset } from "../../hooks/useDataset.js";
 import { useSeries } from "../../hooks/useSeries.js";
 import { useLegend } from "../../hooks/useLegend.js";
+import { useOption } from "../../hooks/useOption.js";
 import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
 echarts.use([BarChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent]);
-const HvBarChart = ({
-  yAxis,
-  xAxis,
-  horizontal = false,
-  horizontalRangeSlider,
-  grid,
-  data,
-  groupBy,
-  splitBy,
-  sortBy,
-  stack,
-  seriesNameFormatter,
-  measures,
-  legend,
-  tooltip,
-  classes,
-  height,
-  width
-}) => {
+const HvBarChart = forwardRef((props, ref) => {
+  const {
+    yAxis,
+    xAxis,
+    horizontal = false,
+    horizontalRangeSlider,
+    grid,
+    data,
+    groupBy,
+    splitBy,
+    sortBy,
+    stack,
+    seriesNameFormatter,
+    measures,
+    legend,
+    tooltip,
+    classes,
+    height,
+    width,
+    onOptionChange
+  } = props;
   const chartData = useData({
     data,
     groupBy,
@@ -76,8 +79,8 @@ const HvBarChart = ({
     classes,
     horizontal
   });
-  const options = useMemo(() => {
-    return {
+  const option = useOption({
+    option: {
       ...chartYAxis,
       ...chartXAxis,
       ...chartSlider,
@@ -86,10 +89,11 @@ const HvBarChart = ({
       ...chartSeries,
       ...chartLegend,
       ...chartTooltip
-    };
-  }, [chartXAxis, chartYAxis, chartSlider, chartGrid, chartDataset, chartSeries, chartLegend, chartTooltip]);
-  return /* @__PURE__ */ jsx(HvBaseChart, { options, width, height });
-};
+    },
+    onOptionChange
+  });
+  return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
+});
 export {
   HvBarChart
 };

package/dist/esm/components/BarChart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\n\nimport {\n  useXAxis,\n  useYAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvBarChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = ({\n  yAxis,\n  xAxis,\n  horizontal = false,\n  horizontalRangeSlider,\n  grid,\n  data,\n  groupBy,\n  splitBy,\n  sortBy,\n  stack,\n  seriesNameFormatter,\n  measures,\n  legend,\n  tooltip,\n  classes,\n  height,\n  width,\n}: HvBarChartProps) => {\n  const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartYAxis = useYAxis({\n    axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n    defaultType: horizontal ? \"categorical\" : \"continuous\",\n  });\n\n  const chartXAxis = useXAxis({\n    type: horizontal ? \"continuous\" : \"categorical\",\n    ...xAxis,\n  });\n\n  const chartSlider = useDataZoom({\n    showHorizontal: horizontalRangeSlider?.show,\n  });\n\n  const chartGrid = useGrid({ ...grid });\n\n  const chartSeries = useSeries({\n    type: \"bar\",\n    data: chartData,\n    groupBy,\n    measures,\n    stack,\n    nameFormatter: seriesNameFormatter,\n    horizontal,\n  });\n\n  const chartLegend = useLegend({\n    ...legend,\n    series: chartSeries.series,\n    icon: \"square\",\n  });\n\n  const chartTooltip = useTooltip({\n    ...tooltip,\n    trigger: \"axis\",\n    measures,\n    classes,\n    horizontal,\n  });\n\n  const options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","BarChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvBarChart","yAxis","xAxis","horizontal","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","stack","seriesNameFormatter","measures","legend","tooltip","classes","height","width","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","axes","Array","isArray","defaultType","chartXAxis","useXAxis","type","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","nameFormatter","chartLegend","useLegend","series","icon","chartTooltip","useTooltip","trigger","options","useMemo"],"mappings":";;;;;;;;;;;;;;;AAiCAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAkBM,MAAMC,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACe,MAAM;AACrB,QAAMC,YAAYC,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASE;AAAAA,IAAQD;AAAAA,IAASI;AAAAA,EAAAA,CAAU;AAEhEQ,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQzB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,IAC5D0B,aAAaxB,aAAa,gBAAgB;AAAA,EAAA,CAC3C;AAED,QAAMyB,aAAaC,SAAS;AAAA,IAC1BC,MAAM3B,aAAa,eAAe;AAAA,IAClC,GAAGD;AAAAA,EAAAA,CACJ;AAED,QAAM6B,cAAcC,YAAY;AAAA,IAC9BC,gBAAgB7B,+DAAuB8B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAQ;AAAA,IAAE,GAAG/B;AAAAA,EAAAA,CAAM;AAErC,QAAMgC,cAAcC,UAAU;AAAA,IAC5BR,MAAM;AAAA,IACNxB,MAAMY;AAAAA,IACNX;AAAAA,IACAK;AAAAA,IACAF;AAAAA,IACA6B,eAAe5B;AAAAA,IACfR;AAAAA,EAAAA,CACD;AAED,QAAMqC,cAAcC,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQL,YAAYK;AAAAA,IACpBC,MAAM;AAAA,EAAA,CACP;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAG/B;AAAAA,IACHgC,SAAS;AAAA,IACTlC;AAAAA,IACAG;AAAAA,IACAZ;AAAAA,EAAAA,CACD;AAEK4C,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAG1B;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGf;AAAAA,MACH,GAAGiB;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAN,YACAS,aACAI,WACAf,cACAiB,aACAG,aACAI,YAAY,CACb;AAED,SAAQ,oBAAA,aAAA,EAAY,SAAkB,OAAc,OAAkB,CAAA;AACxE;"}
+{"version":3,"file":"BarChart.js","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  useXAxis,\n  useYAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  useOption,\n  HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvBarChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(\n  (props, ref) => {\n    const {\n      yAxis,\n      xAxis,\n      horizontal = false,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      stack,\n      seriesNameFormatter,\n      measures,\n      legend,\n      tooltip,\n      classes,\n      height,\n      width,\n      onOptionChange,\n    } = props;\n\n    const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartYAxis = useYAxis({\n      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n      defaultType: horizontal ? \"categorical\" : \"continuous\",\n    });\n\n    const chartXAxis = useXAxis({\n      type: horizontal ? \"continuous\" : \"categorical\",\n      ...xAxis,\n    });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"bar\",\n      data: chartData,\n      groupBy,\n      measures,\n      stack,\n      nameFormatter: seriesNameFormatter,\n      horizontal,\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      series: chartSeries.series,\n      icon: \"square\",\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      trigger: \"axis\",\n      measures,\n      classes,\n      horizontal,\n    });\n\n    const option = useOption({\n      option: {\n        ...chartYAxis,\n        ...chartXAxis,\n        ...chartSlider,\n        ...chartGrid,\n        ...chartDataset,\n        ...chartSeries,\n        ...chartLegend,\n        ...chartTooltip,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart ref={ref} option={option} width={width} height={height} />\n    );\n  }\n);\n"],"names":["echarts","use","BarChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvBarChart","forwardRef","props","ref","yAxis","xAxis","horizontal","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","stack","seriesNameFormatter","measures","legend","tooltip","classes","height","width","onOptionChange","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","axes","Array","isArray","defaultType","chartXAxis","useXAxis","type","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","nameFormatter","chartLegend","useLegend","series","icon","chartTooltip","useTooltip","trigger","option","useOption"],"mappings":";;;;;;;;;;;;;;;;AAmCAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAkBM,MAAMC,aAAaC,WACxB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,aAAa;AAAA,IACbC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EACEnB,IAAAA;AAEJ,QAAMoB,YAAYC,QAAQ;AAAA,IAAEd;AAAAA,IAAMC;AAAAA,IAASE;AAAAA,IAAQD;AAAAA,IAASI;AAAAA,EAAAA,CAAU;AAEhES,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQ1B,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,IAC5D2B,aAAazB,aAAa,gBAAgB;AAAA,EAAA,CAC3C;AAED,QAAM0B,aAAaC,SAAS;AAAA,IAC1BC,MAAM5B,aAAa,eAAe;AAAA,IAClC,GAAGD;AAAAA,EAAAA,CACJ;AAED,QAAM8B,cAAcC,YAAY;AAAA,IAC9BC,gBAAgB9B,+DAAuB+B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAQ;AAAA,IAAE,GAAGhC;AAAAA,EAAAA,CAAM;AAErC,QAAMiC,cAAcC,UAAU;AAAA,IAC5BR,MAAM;AAAA,IACNzB,MAAMa;AAAAA,IACNZ;AAAAA,IACAK;AAAAA,IACAF;AAAAA,IACA8B,eAAe7B;AAAAA,IACfR;AAAAA,EAAAA,CACD;AAED,QAAMsC,cAAcC,UAAU;AAAA,IAC5B,GAAG7B;AAAAA,IACH8B,QAAQL,YAAYK;AAAAA,IACpBC,MAAM;AAAA,EAAA,CACP;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAGhC;AAAAA,IACHiC,SAAS;AAAA,IACTnC;AAAAA,IACAG;AAAAA,IACAZ;AAAAA,EAAAA,CACD;AAED,QAAM6C,SAASC,UAAU;AAAA,IACvBD,QAAQ;AAAA,MACN,GAAGzB;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGf;AAAAA,MACH,GAAGiB;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,IACL;AAAA,IACA3B;AAAAA,EAAAA,CACD;AAED,SACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAkB,CAAA;AAE3E,CACF;"}

package/dist/esm/components/BaseChart/BaseChart.js

@@ -1,29 +1,26 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
+import { forwardRef, useRef, useState, useEffect } from "react";
+import { useForkRef } from "@mui/material";
 import { AriaComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 import * as echarts from "echarts/core";
 import ReactECharts from "echarts-for-react/lib/core";
 import { useVizTheme } from "../../hooks/useVizTheme.js";
 echarts.use([CanvasRenderer, AriaComponent]);
-const HvBaseChart = ({
-  options,
-  width,
-  height
-}) => {
+const HvBaseChart = forwardRef((props, ref) => {
+  const {
+    option,
+    width,
+    height
+  } = props;
   const {
     theme
   } = useVizTheme();
   const currentTheme = useRef(theme);
   const chartRef = useRef(null);
   const isMounted = useRef(false);
-  const [initialOption, setInitialOption] = useState({
-    aria: {
-      enabled: true
-    },
-    animation: false,
-    ...options
-  });
+  const forkedRef = useForkRef(ref, chartRef);
+  const [initialOption, setInitialOption] = useState(option);
   useEffect(() => {
     var _a;
     if (!isMounted.current) {
@@ -31,32 +28,24 @@ const HvBaseChart = ({
       return;
     }
     if (theme !== currentTheme.current) {
-      setInitialOption({
-        aria: {
-          enabled: true
-        },
-        animation: false,
-        ...options
-      });
+      setInitialOption(option);
       currentTheme.current = theme;
       return;
     }
     const instance = (_a = chartRef.current) == null ? void 0 : _a.getEchartsInstance();
     if (!instance)
       return;
-    instance.setOption({
-      ...options
-    }, {
+    instance.setOption(option, {
       replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
     });
-  }, [theme, options]);
-  return /* @__PURE__ */ jsx(ReactECharts, { ref: chartRef, echarts, option: initialOption, theme, notMerge: true, ...(width || height) && {
+  }, [theme, option]);
+  return /* @__PURE__ */ jsx(ReactECharts, { ref: forkedRef, echarts, option: initialOption, theme, notMerge: true, ...(width || height) && {
     style: {
       width,
       height
     }
   } });
-};
+});
 export {
   HvBaseChart
 };

package/dist/esm/components/BaseChart/BaseChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseChart.js","sources":["../../../../src/components/BaseChart/BaseChart.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\n\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useVizTheme } from \"@viz/hooks\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\n  options: EChartsOption;\n  width?: echarts.ResizeOpts[\"width\"];\n  height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = ({ options, width, height }: HvBaseChartProps) => {\n  const { theme } = useVizTheme();\n\n  const currentTheme = useRef<string | undefined>(theme);\n  const chartRef = useRef<ReactECharts>(null);\n  const isMounted = useRef<boolean>(false);\n\n  const [initialOption, setInitialOption] = useState<EChartsOption>({\n    aria: {\n      enabled: true,\n    },\n    animation: false,\n    ...options,\n  });\n\n  useEffect(() => {\n    if (!isMounted.current) {\n      isMounted.current = true;\n      return;\n    }\n\n    // when the theme changes echarts destroys the chart and mounts it again\n    // thus we need to reset the initial option\n    if (theme !== currentTheme.current) {\n      setInitialOption({\n        aria: {\n          enabled: true,\n        },\n        animation: false,\n        ...options,\n      });\n      currentTheme.current = theme;\n      return;\n    }\n\n    const instance = chartRef.current?.getEchartsInstance();\n\n    if (!instance) return;\n\n    instance.setOption(\n      {\n        ...options,\n      },\n      {\n        replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n      }\n    );\n  }, [theme, options]);\n\n  return (\n    <ReactECharts\n      ref={chartRef}\n      echarts={echarts}\n      option={initialOption}\n      theme={theme}\n      notMerge\n      {...((width || height) && {\n        style: { width, height },\n      })}\n    />\n  );\n};\n"],"names":["echarts","use","CanvasRenderer","AriaComponent","HvBaseChart","options","width","height","theme","useVizTheme","currentTheme","useRef","chartRef","isMounted","initialOption","setInitialOption","useState","aria","enabled","animation","useEffect","current","instance","getEchartsInstance","setOption","replaceMerge","style"],"mappings":";;;;;;;AAYAA,QAAQC,IAAI,CAACC,gBAAgBC,aAAa,CAAC;AAWpC,MAAMC,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAASC;AAAAA,EAAOC;AAAyB,MAAM;AACrE,QAAA;AAAA,IAAEC;AAAAA,MAAUC,YAAY;AAExBC,QAAAA,eAAeC,OAA2BH,KAAK;AAC/CI,QAAAA,WAAWD,OAAqB,IAAI;AACpCE,QAAAA,YAAYF,OAAgB,KAAK;AAEvC,QAAM,CAACG,eAAeC,gBAAgB,IAAIC,SAAwB;AAAA,IAChEC,MAAM;AAAA,MACJC,SAAS;AAAA,IACX;AAAA,IACAC,WAAW;AAAA,IACX,GAAGd;AAAAA,EAAAA,CACJ;AAEDe,YAAU,MAAM;;AACV,QAAA,CAACP,UAAUQ,SAAS;AACtBR,gBAAUQ,UAAU;AACpB;AAAA,IACF;AAIIb,QAAAA,UAAUE,aAAaW,SAAS;AACjB,uBAAA;AAAA,QACfJ,MAAM;AAAA,UACJC,SAAS;AAAA,QACX;AAAA,QACAC,WAAW;AAAA,QACX,GAAGd;AAAAA,MAAAA,CACJ;AACDK,mBAAaW,UAAUb;AACvB;AAAA,IACF;AAEMc,UAAAA,YAAWV,cAASS,YAATT,mBAAkBW;AAEnC,QAAI,CAACD;AAAU;AAEfA,aAASE,UACP;AAAA,MACE,GAAGnB;AAAAA,IAAAA,GAEL;AAAA,MACEoB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,IAAA,CAExD;AAAA,EAAA,GACC,CAACjB,OAAOH,OAAO,CAAC;AAEnB,SACG,oBAAA,cAAA,EACC,KAAKO,UACL,SACA,QAAQE,eACR,OACA,UAAQ,MACH,IAACR,SAASC,WAAW;AAAA,IACxBmB,OAAO;AAAA,MAAEpB;AAAAA,MAAOC;AAAAA,IAAO;AAAA,EAEzB,EAAA,CAAA;AAEN;"}
+{"version":3,"file":"BaseChart.js","sources":["../../../../src/components/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { useForkRef } from \"@mui/material\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { useVizTheme } from \"@viz/hooks\";\nimport { HvEChartsOption } from \"@viz/types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\n  /** ECharts option. */\n  option: HvEChartsOption;\n  /** Charts width. */\n  width?: echarts.ResizeOpts[\"width\"];\n  /** Charts height. */\n  height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(\n  (props, ref) => {\n    const { option, width, height } = props;\n\n    const { theme } = useVizTheme();\n\n    const currentTheme = useRef<string | undefined>(theme);\n    const chartRef = useRef<ReactECharts>(null);\n    const isMounted = useRef<boolean>(false);\n\n    const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n    const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n    useEffect(() => {\n      if (!isMounted.current) {\n        isMounted.current = true;\n        return;\n      }\n\n      // when the theme changes echarts destroys the chart and mounts it again\n      // thus we need to reset the initial option\n      if (theme !== currentTheme.current) {\n        setInitialOption(option);\n        currentTheme.current = theme;\n        return;\n      }\n\n      const instance = chartRef.current?.getEchartsInstance();\n\n      if (!instance) return;\n\n      instance.setOption(option, {\n        replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n      });\n    }, [theme, option]);\n\n    return (\n      <ReactECharts\n        ref={forkedRef}\n        echarts={echarts}\n        option={initialOption}\n        theme={theme}\n        notMerge\n        {...((width || height) && {\n          style: { width, height },\n        })}\n      />\n    );\n  }\n);\n"],"names":["echarts","use","CanvasRenderer","AriaComponent","HvBaseChart","forwardRef","props","ref","option","width","height","theme","useVizTheme","currentTheme","useRef","chartRef","isMounted","forkedRef","useForkRef","initialOption","setInitialOption","useState","useEffect","current","instance","getEchartsInstance","setOption","replaceMerge","style"],"mappings":";;;;;;;;AAaAA,QAAQC,IAAI,CAACC,gBAAgBC,aAAa,CAAC;AAcpC,MAAMC,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IAAEC;AAAAA,IAAQC;AAAAA,IAAOC;AAAAA,EAAWJ,IAAAA;AAE5B,QAAA;AAAA,IAAEK;AAAAA,MAAUC,YAAY;AAExBC,QAAAA,eAAeC,OAA2BH,KAAK;AAC/CI,QAAAA,WAAWD,OAAqB,IAAI;AACpCE,QAAAA,YAAYF,OAAgB,KAAK;AAEjCG,QAAAA,YAAYC,WAAyBX,KAAKQ,QAAQ;AAExD,QAAM,CAACI,eAAeC,gBAAgB,IAAIC,SAA0Bb,MAAM;AAE1Ec,YAAU,MAAM;;AACV,QAAA,CAACN,UAAUO,SAAS;AACtBP,gBAAUO,UAAU;AACpB;AAAA,IACF;AAIIZ,QAAAA,UAAUE,aAAaU,SAAS;AAClCH,uBAAiBZ,MAAM;AACvBK,mBAAaU,UAAUZ;AACvB;AAAA,IACF;AAEMa,UAAAA,YAAWT,cAASQ,YAATR,mBAAkBU;AAEnC,QAAI,CAACD;AAAU;AAEfA,aAASE,UAAUlB,QAAQ;AAAA,MACzBmB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,IAAA,CACrD;AAAA,EAAA,GACA,CAAChB,OAAOH,MAAM,CAAC;AAElB,SACG,oBAAA,cAAA,EACC,KAAKS,WACL,SACA,QAAQE,eACR,OACA,UAAQ,MACH,IAACV,SAASC,WAAW;AAAA,IACxBkB,OAAO;AAAA,MAAEnB;AAAAA,MAAOC;AAAAA,IAAO;AAAA,EAEzB,EAAA,CAAA;AAEN,CACF;"}

package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.js

@@ -1,5 +1,5 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useMemo } from "react";
+import { forwardRef, useMemo } from "react";
 import * as echarts from "echarts/core";
 import { HeatmapChart } from "echarts/charts";
 import { VisualMapComponent, GridComponent, TooltipComponent } from "echarts/components";
@@ -8,32 +8,35 @@ import { useYAxis } from "../../hooks/useYAxis.js";
 import { useGrid } from "../../hooks/useGrid.js";
 import { useData } from "../../hooks/useData.js";
 import { useVisualMap } from "../../hooks/useVisualMap.js";
+import { useOption } from "../../hooks/useOption.js";
 import { getGroupKey } from "../../utils/getGroupKey.js";
 import { useClasses } from "./ConfusionMatrix.styles.js";
 import { useColorScale, useSeries, useGridLayout } from "./utils.js";
 import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
 echarts.use([HeatmapChart, VisualMapComponent, GridComponent, TooltipComponent]);
-const HvConfusionMatrix = ({
-  legend,
-  groupBy,
-  measure,
-  sortBy,
-  splitBy,
-  grid,
-  data: dataProp,
-  tooltip,
-  xAxis,
-  yAxis,
-  colorScale: colorScaleProp,
-  delta,
-  valuesProps,
-  width,
-  height,
-  format = "square",
-  classes: classesProp
-}) => {
+const HvConfusionMatrix = forwardRef((props, ref) => {
   var _a, _b, _c, _d;
+  const {
+    legend,
+    groupBy,
+    measure,
+    sortBy,
+    splitBy,
+    grid,
+    data: dataProp,
+    tooltip,
+    xAxis,
+    yAxis,
+    colorScale: colorScaleProp,
+    delta,
+    valuesProps,
+    width,
+    height,
+    format = "square",
+    classes: classesProp,
+    onOptionChange
+  } = props;
   const {
     classes
   } = useClasses(classesProp);
@@ -131,18 +134,19 @@ const HvConfusionMatrix = ({
       height: height ?? chartGridLayout.size.height + chartGridLayout.padding.bottom + chartGridLayout.padding.top
     };
   }, [chartGridLayout.padding.bottom, chartGridLayout.padding.top, chartGridLayout.size.height, height, width]);
-  const options = useMemo(() => {
-    return {
+  const option = useOption({
+    option: {
       ...chartVisualMap,
       ...chartTooltip,
       ...chartGrid,
       ...chartXAxis,
       ...chartYAxis,
       ...chartSeries
-    };
-  }, [chartVisualMap, chartTooltip, chartGrid, chartYAxis, chartSeries, chartXAxis]);
-  return /* @__PURE__ */ jsx(HvBaseChart, { options, ...size });
-};
+    },
+    onOptionChange
+  });
+  return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, ...size });
+});
 export {
   HvConfusionMatrix
 };