@hitachivantara/uikit-react-viz 5.5.15 → 5.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"ConfusionMatrix.js","sources":["../../../../src/components/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport * as echarts from \"echarts/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n  VisualMapComponent,\n  GridComponent,\n  TooltipComponent,\n} from \"echarts/components\";\n\nimport {\n  HvVisualMapHookProps,\n  useData,\n  useGrid,\n  useTooltip,\n  useVisualMap,\n  useXAxis,\n  useYAxis,\n} from \"@viz/hooks\";\nimport { getGroupKey } from \"@viz/utils\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n  HvChartCommonProps,\n  HvChartXAxis,\n  HvChartYAxis,\n} from \"../../types/common\";\nimport { HvChartTooltip } from \"../../types/tooltip\";\nimport { HvConfusionMatrixMeasure } from \"../../types/measures\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\nimport {\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\n\n// Register chart components\necharts.use([\n  HeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  TooltipComponent,\n]);\n\nexport type HvConfusionMatrixClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvConfusionMatrixProps\n  extends Omit<HvChartCommonProps, \"tooltip\"> {\n  /** Column to measure. */\n  measure: HvConfusionMatrixMeasure;\n  /** Columns to use to split the measure. */\n  splitBy?: Arrayable<string>;\n  /**\n   * Column to use for the delta confusion matrix.\n   *\n   * It can be set to `true` in case the `measure` already has the calculations for the delta confusion matrix.\n   */\n  delta?: boolean | string;\n  /** Options for the xAxis, i.e. the horizontal axis. */\n  xAxis?: HvChartXAxis;\n  /** Options for the yAxis, i.e. the vertical axis. */\n  yAxis?: HvChartYAxis;\n  /** Tooltip options. */\n  tooltip?: Omit<HvChartTooltip, \"type\">;\n  /** Format of the confusion matrix. Defaults to `square`. */\n  format?: HvConfusionMatrixFormat;\n  /** Properties to customize the prediction values. */\n  valuesProps?: HvConfusionMatrixValuesProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvConfusionMatrixClasses;\n  /**\n   * Color scale of the confusion matrix.\n   *\n   * If an array of two strings is provided, the first and second values are the lower and upper ends of the scale, respectively.\n   * An array of objects can also be used to create a custom scale.\n   * If `delta` is not provided, a default color scale is used when `colorScale` is not defined: `[base-light, cat3]`.\n   */\n  colorScale?: [string, string] | HvConfusionMatrixColorScale[];\n}\n\n/**\n * Confusion Matrix is a table displaying the performance of a predictive model.\n * Typically the columns show the predicted class and the rows the expected class.\n * The main diagonal counts the positive matches while the cells outside it count the mismatches between predicted and expected.\n */\nexport const HvConfusionMatrix = ({\n  legend,\n  groupBy,\n  measure,\n  sortBy,\n  splitBy,\n  grid,\n  data: dataProp,\n  tooltip,\n  xAxis,\n  yAxis,\n  colorScale: colorScaleProp,\n  delta,\n  valuesProps,\n  width,\n  height,\n  format = \"square\",\n  classes: classesProp,\n}: HvConfusionMatrixProps) => {\n  const { classes } = useClasses(classesProp);\n\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useData({\n    data: dataProp,\n    groupBy,\n    measures: [measure],\n    sortBy: sortBy ?? groupBy, // automatically orders x axis to create the confusion matrix\n    splitBy,\n    delta: typeof delta === \"string\" ? delta : undefined,\n  });\n\n  const colorScale = useColorScale({\n    delta: !!delta,\n    data: chartData,\n    custom: colorScaleProp,\n    filterKey: groupByKey,\n  });\n\n  const chartVisualMap = useVisualMap({\n    show: colorScale?.pieces != null,\n    type: colorScale?.pieces != null ? \"piecewise\" : \"continuous\",\n    ...(colorScale as Pick<\n      HvVisualMapHookProps,\n      \"max\" | \"min\" | \"colorScale\" | \"pieces\"\n    >),\n    ...legend,\n  });\n\n  const chartTooltip = useTooltip({\n    component: (params) => {\n      const value = params?.series?.[0].value;\n      const fmtValue =\n        typeof measure !== \"string\" && measure.valueFormatter\n          ? measure.valueFormatter(value)\n          : tooltip?.valueFormatter\n          ? tooltip?.valueFormatter(value)\n          : value;\n      const ftmTitle = tooltip?.titleFormatter\n        ? tooltip.titleFormatter(params?.title)\n        : params?.title;\n\n      const content = `${ftmTitle} - ${params?.series?.[0].name}: ${fmtValue}`;\n\n      return `\n        <div class=\"${classes.tooltipRoot}\">\n            <div class=\"${classes.tooltipContainer}\">\n                <div>\n                    <p class=\"${classes.tooltipText}\">${content}</p>\n                </div>\n            </div>\n        </div>`;\n    },\n    ...tooltip,\n  });\n\n  const chartYAxis = useYAxis({\n    axes: [\n      {\n        type: \"categorical\",\n        name: \"True Label\",\n        position: \"left\",\n        ...yAxis,\n        nameProps: {\n          location: \"center\",\n          padding:\n            yAxis?.nameProps?.location == null ||\n            yAxis?.nameProps?.location === \"center\"\n              ? yAxis?.position === \"right\"\n                ? [50, 0, 0, 0]\n                : [0, 0, 50, 0]\n              : undefined,\n          ...yAxis?.nameProps,\n        },\n        data: chartData\n          .columnNames()\n          .filter((p) => p !== groupByKey)\n          .reverse(),\n      },\n    ],\n  });\n\n  const chartXAxis = useXAxis({\n    name: \"Predicted Value\",\n    position: \"top\",\n    ...xAxis,\n    nameProps: {\n      location: \"center\",\n      padding:\n        xAxis?.nameProps?.location == null ||\n        xAxis?.nameProps?.location === \"center\"\n          ? xAxis?.position === \"bottom\"\n            ? [30, 0, 0, 0]\n            : [0, 0, 30, 0]\n          : undefined,\n      ...xAxis?.nameProps,\n    },\n    data: chartData.array(groupByKey),\n  });\n\n  const chartSeries = useSeries({\n    data: chartData,\n    filterKey: groupByKey,\n    valuesProps,\n    delta: !!(delta && colorScale == null),\n  });\n\n  const chartGridLayout = useGridLayout({\n    data: chartData,\n    format,\n    filterKey: groupByKey,\n    visualMapVisible: chartVisualMap.visualMap.show,\n    visualMapYPosition: chartVisualMap.visualMap.top,\n    xAxisPosition: chartXAxis.xAxis.position,\n  });\n\n  const chartGrid = useGrid({\n    // If sizes are provided, the grid size should automatically adapt to the values provided\n    width: width != null ? undefined : chartGridLayout.size.width,\n    height: height != null ? undefined : chartGridLayout.size.height,\n    ...chartGridLayout.padding,\n    ...grid,\n  });\n\n  const size = useMemo(() => {\n    return {\n      width,\n      // Echarts has a problem were the height is always set to 300px\n      // Thus, we need to update the height to make sure the chart is not cut out\n      height:\n        height ??\n        chartGridLayout.size.height +\n          chartGridLayout.padding.bottom +\n          chartGridLayout.padding.top,\n    };\n  }, [\n    chartGridLayout.padding.bottom,\n    chartGridLayout.padding.top,\n    chartGridLayout.size.height,\n    height,\n    width,\n  ]);\n\n  const options = useMemo(() => {\n    return {\n      ...chartVisualMap,\n      ...chartTooltip,\n      ...chartGrid,\n      ...chartXAxis,\n      ...chartYAxis,\n      ...chartSeries,\n    };\n  }, [\n    chartVisualMap,\n    chartTooltip,\n    chartGrid,\n    chartYAxis,\n    chartSeries,\n    chartXAxis,\n  ]);\n\n  return <HvBaseChart options={options} {...size} />;\n};\n"],"names":["echarts","use","HeatmapChart","VisualMapComponent","GridComponent","TooltipComponent","HvConfusionMatrix","legend","groupBy","measure","sortBy","splitBy","grid","data","dataProp","tooltip","xAxis","yAxis","colorScale","colorScaleProp","delta","valuesProps","width","height","format","classes","classesProp","useClasses","groupByKey","getGroupKey","chartData","useData","measures","undefined","useColorScale","custom","filterKey","chartVisualMap","useVisualMap","show","pieces","type","chartTooltip","useTooltip","component","params","value","series","fmtValue","valueFormatter","ftmTitle","titleFormatter","title","content","name","tooltipRoot","tooltipContainer","tooltipText","chartYAxis","useYAxis","axes","position","nameProps","location","padding","columnNames","filter","p","reverse","chartXAxis","useXAxis","array","chartSeries","useSeries","chartGridLayout","useGridLayout","visualMapVisible","visualMap","visualMapYPosition","top","xAxisPosition","chartGrid","useGrid","size","useMemo","bottom","options"],"mappings":";;;;;;;;;;;;;;;AAwCAA,QAAQC,IAAI,CACVC,cACAC,oBACAC,eACAC,gBAAgB,CACjB;AA2CM,MAAMC,oBAAoBA,CAAC;AAAA,EAChCC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,MAAMC;AAAAA,EACNC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,YAAYC;AAAAA,EACZC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAAS;AAAA,EACTC,SAASC;AACa,MAAM;;AACtB,QAAA;AAAA,IAAED;AAAAA,EAAAA,IAAYE,WAAWD,WAAW;AAEpCE,QAAAA,aAAaC,YAAYrB,OAAO;AAEtC,QAAMsB,YAAYC,QAAQ;AAAA,IACxBlB,MAAMC;AAAAA,IACNN;AAAAA,IACAwB,UAAU,CAACvB,OAAO;AAAA,IAClBC,QAAQA,UAAUF;AAAAA;AAAAA,IAClBG;AAAAA,IACAS,OAAO,OAAOA,UAAU,WAAWA,QAAQa;AAAAA,EAAAA,CAC5C;AAED,QAAMf,aAAagB,cAAc;AAAA,IAC/Bd,OAAO,CAAC,CAACA;AAAAA,IACTP,MAAMiB;AAAAA,IACNK,QAAQhB;AAAAA,IACRiB,WAAWR;AAAAA,EAAAA,CACZ;AAED,QAAMS,iBAAiBC,aAAa;AAAA,IAClCC,OAAMrB,yCAAYsB,WAAU;AAAA,IAC5BC,OAAMvB,yCAAYsB,WAAU,OAAO,cAAc;AAAA,IACjD,GAAItB;AAAAA,IAIJ,GAAGX;AAAAA,EAAAA,CACJ;AAED,QAAMmC,eAAeC,WAAW;AAAA,IAC9BC,WAAYC,CAAW,WAAA;;AACrB,YAAMC,SAAQD,MAAAA,iCAAQE,WAARF,gBAAAA,IAAiB,GAAGC;AAClC,YAAME,WACJ,OAAOvC,YAAY,YAAYA,QAAQwC,iBACnCxC,QAAQwC,eAAeH,KAAK,KAC5B/B,mCAASkC,kBACTlC,mCAASkC,eAAeH,SACxBA;AACAI,YAAAA,YAAWnC,mCAASoC,kBACtBpC,QAAQoC,eAAeN,iCAAQO,KAAK,IACpCP,iCAAQO;AAENC,YAAAA,UAAW,GAAEH,QAAS,OAAKL,MAAAA,iCAAQE,WAARF,gBAAAA,IAAiB,GAAGS,IAAK,KAAIN,QAAS;AAE/D,aAAA;AAAA,sBACQvB,QAAQ8B,WAAY;AAAA,0BAChB9B,QAAQ+B,gBAAiB;AAAA;AAAA,gCAEnB/B,QAAQgC,WAAY,KAAIJ,OAAQ;AAAA;AAAA;AAAA;AAAA,IAI5D;AAAA,IACA,GAAGtC;AAAAA,EAAAA,CACJ;AAED,QAAM2C,aAAaC,SAAS;AAAA,IAC1BC,MAAM,CACJ;AAAA,MACEnB,MAAM;AAAA,MACNa,MAAM;AAAA,MACNO,UAAU;AAAA,MACV,GAAG5C;AAAAA,MACH6C,WAAW;AAAA,QACTC,UAAU;AAAA,QACVC,WACE/C,oCAAO6C,cAAP7C,mBAAkB8C,aAAY,UAC9B9C,oCAAO6C,cAAP7C,mBAAkB8C,cAAa,YAC3B9C,+BAAO4C,cAAa,UAClB,CAAC,IAAI,GAAG,GAAG,CAAC,IACZ,CAAC,GAAG,GAAG,IAAI,CAAC,IACd5B;AAAAA,QACN,GAAGhB,+BAAO6C;AAAAA,MACZ;AAAA,MACAjD,MAAMiB,UACHmC,YAAY,EACZC,OAAQC,CAAMA,MAAAA,MAAMvC,UAAU,EAC9BwC,QAAQ;AAAA,IAAA,CACZ;AAAA,EAAA,CAEJ;AAED,QAAMC,aAAaC,SAAS;AAAA,IAC1BhB,MAAM;AAAA,IACNO,UAAU;AAAA,IACV,GAAG7C;AAAAA,IACH8C,WAAW;AAAA,MACTC,UAAU;AAAA,MACVC,WACEhD,oCAAO8C,cAAP9C,mBAAkB+C,aAAY,UAC9B/C,oCAAO8C,cAAP9C,mBAAkB+C,cAAa,YAC3B/C,+BAAO6C,cAAa,WAClB,CAAC,IAAI,GAAG,GAAG,CAAC,IACZ,CAAC,GAAG,GAAG,IAAI,CAAC,IACd5B;AAAAA,MACN,GAAGjB,+BAAO8C;AAAAA,IACZ;AAAA,IACAjD,MAAMiB,UAAUyC,MAAM3C,UAAU;AAAA,EAAA,CACjC;AAED,QAAM4C,cAAcC,UAAU;AAAA,IAC5B5D,MAAMiB;AAAAA,IACNM,WAAWR;AAAAA,IACXP;AAAAA,IACAD,OAAO,CAAC,EAAEA,SAASF,cAAc;AAAA,EAAA,CAClC;AAED,QAAMwD,kBAAkBC,cAAc;AAAA,IACpC9D,MAAMiB;AAAAA,IACNN;AAAAA,IACAY,WAAWR;AAAAA,IACXgD,kBAAkBvC,eAAewC,UAAUtC;AAAAA,IAC3CuC,oBAAoBzC,eAAewC,UAAUE;AAAAA,IAC7CC,eAAeX,WAAWrD,MAAM6C;AAAAA,EAAAA,CACjC;AAED,QAAMoB,YAAYC,QAAQ;AAAA;AAAA,IAExB5D,OAAOA,SAAS,OAAOW,SAAYyC,gBAAgBS,KAAK7D;AAAAA,IACxDC,QAAQA,UAAU,OAAOU,SAAYyC,gBAAgBS,KAAK5D;AAAAA,IAC1D,GAAGmD,gBAAgBV;AAAAA,IACnB,GAAGpD;AAAAA,EAAAA,CACJ;AAEKuE,QAAAA,OAAOC,QAAQ,MAAM;AAClB,WAAA;AAAA,MACL9D;AAAAA;AAAAA;AAAAA,MAGAC,QACEA,UACAmD,gBAAgBS,KAAK5D,SACnBmD,gBAAgBV,QAAQqB,SACxBX,gBAAgBV,QAAQe;AAAAA,IAAAA;AAAAA,EAE7B,GAAA,CACDL,gBAAgBV,QAAQqB,QACxBX,gBAAgBV,QAAQe,KACxBL,gBAAgBS,KAAK5D,QACrBA,QACAD,KAAK,CACN;AAEKgE,QAAAA,UAAUF,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAG/C;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGuC;AAAAA,MACH,GAAGZ;AAAAA,MACH,GAAGX;AAAAA,MACH,GAAGc;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDnC,gBACAK,cACAuC,WACAvB,YACAc,aACAH,UAAU,CACX;AAED,SAAQ,oBAAA,aAAA,EAAY,SAAkB,GAAIc,KAAQ,CAAA;AACpD;"}
+{"version":3,"file":"ConfusionMatrix.js","sources":["../../../../src/components/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n  VisualMapComponent,\n  GridComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvVisualMapHookProps,\n  useData,\n  useGrid,\n  useOption,\n  useTooltip,\n  useVisualMap,\n  useXAxis,\n  useYAxis,\n} from \"@viz/hooks\";\nimport { getGroupKey } from \"@viz/utils\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n  HvChartCommonProps,\n  HvChartXAxis,\n  HvChartYAxis,\n} from \"../../types/common\";\nimport { HvChartTooltip } from \"../../types/tooltip\";\nimport { HvConfusionMatrixMeasure } from \"../../types/measures\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\nimport {\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\n\n// Register chart components\necharts.use([\n  HeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  TooltipComponent,\n]);\n\nexport type HvConfusionMatrixClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvConfusionMatrixProps\n  extends Omit<HvChartCommonProps, \"tooltip\"> {\n  /** Column to measure. */\n  measure: HvConfusionMatrixMeasure;\n  /** Columns to use to split the measure. */\n  splitBy?: Arrayable<string>;\n  /**\n   * Column to use for the delta confusion matrix.\n   *\n   * It can be set to `true` in case the `measure` already has the calculations for the delta confusion matrix.\n   */\n  delta?: boolean | string;\n  /** Options for the xAxis, i.e. the horizontal axis. */\n  xAxis?: HvChartXAxis;\n  /** Options for the yAxis, i.e. the vertical axis. */\n  yAxis?: HvChartYAxis;\n  /** Tooltip options. */\n  tooltip?: Omit<HvChartTooltip, \"type\">;\n  /** Format of the confusion matrix. Defaults to `square`. */\n  format?: HvConfusionMatrixFormat;\n  /** Properties to customize the prediction values. */\n  valuesProps?: HvConfusionMatrixValuesProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvConfusionMatrixClasses;\n  /**\n   * Color scale of the confusion matrix.\n   *\n   * If an array of two strings is provided, the first and second values are the lower and upper ends of the scale, respectively.\n   * An array of objects can also be used to create a custom scale.\n   * If `delta` is not provided, a default color scale is used when `colorScale` is not defined: `[base-light, cat3]`.\n   */\n  colorScale?: [string, string] | HvConfusionMatrixColorScale[];\n}\n\n/**\n * Confusion Matrix is a table displaying the performance of a predictive model.\n * Typically the columns show the predicted class and the rows the expected class.\n * The main diagonal counts the positive matches while the cells outside it count the mismatches between predicted and expected.\n */\nexport const HvConfusionMatrix = forwardRef<\n  ReactECharts,\n  HvConfusionMatrixProps\n>((props, ref) => {\n  const {\n    legend,\n    groupBy,\n    measure,\n    sortBy,\n    splitBy,\n    grid,\n    data: dataProp,\n    tooltip,\n    xAxis,\n    yAxis,\n    colorScale: colorScaleProp,\n    delta,\n    valuesProps,\n    width,\n    height,\n    format = \"square\",\n    classes: classesProp,\n    onOptionChange,\n  } = props;\n\n  const { classes } = useClasses(classesProp);\n\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useData({\n    data: dataProp,\n    groupBy,\n    measures: [measure],\n    sortBy: sortBy ?? groupBy, // automatically orders x axis to create the confusion matrix\n    splitBy,\n    delta: typeof delta === \"string\" ? delta : undefined,\n  });\n\n  const colorScale = useColorScale({\n    delta: !!delta,\n    data: chartData,\n    custom: colorScaleProp,\n    filterKey: groupByKey,\n  });\n\n  const chartVisualMap = useVisualMap({\n    show: colorScale?.pieces != null,\n    type: colorScale?.pieces != null ? \"piecewise\" : \"continuous\",\n    ...(colorScale as Pick<\n      HvVisualMapHookProps,\n      \"max\" | \"min\" | \"colorScale\" | \"pieces\"\n    >),\n    ...legend,\n  });\n\n  const chartTooltip = useTooltip({\n    component: (params) => {\n      const value = params?.series?.[0].value;\n      const fmtValue =\n        typeof measure !== \"string\" && measure.valueFormatter\n          ? measure.valueFormatter(value)\n          : tooltip?.valueFormatter\n          ? tooltip?.valueFormatter(value)\n          : value;\n      const ftmTitle = tooltip?.titleFormatter\n        ? tooltip.titleFormatter(params?.title)\n        : params?.title;\n\n      const content = `${ftmTitle} - ${params?.series?.[0].name}: ${fmtValue}`;\n\n      return `\n        <div class=\"${classes.tooltipRoot}\">\n            <div class=\"${classes.tooltipContainer}\">\n                <div>\n                    <p class=\"${classes.tooltipText}\">${content}</p>\n                </div>\n            </div>\n        </div>`;\n    },\n    ...tooltip,\n  });\n\n  const chartYAxis = useYAxis({\n    axes: [\n      {\n        type: \"categorical\",\n        name: \"True Label\",\n        position: \"left\",\n        ...yAxis,\n        nameProps: {\n          location: \"center\",\n          padding:\n            yAxis?.nameProps?.location == null ||\n            yAxis?.nameProps?.location === \"center\"\n              ? yAxis?.position === \"right\"\n                ? [50, 0, 0, 0]\n                : [0, 0, 50, 0]\n              : undefined,\n          ...yAxis?.nameProps,\n        },\n        data: chartData\n          .columnNames()\n          .filter((p) => p !== groupByKey)\n          .reverse(),\n      },\n    ],\n  });\n\n  const chartXAxis = useXAxis({\n    name: \"Predicted Value\",\n    position: \"top\",\n    ...xAxis,\n    nameProps: {\n      location: \"center\",\n      padding:\n        xAxis?.nameProps?.location == null ||\n        xAxis?.nameProps?.location === \"center\"\n          ? xAxis?.position === \"bottom\"\n            ? [30, 0, 0, 0]\n            : [0, 0, 30, 0]\n          : undefined,\n      ...xAxis?.nameProps,\n    },\n    data: chartData.array(groupByKey),\n  });\n\n  const chartSeries = useSeries({\n    data: chartData,\n    filterKey: groupByKey,\n    valuesProps,\n    delta: !!(delta && colorScale == null),\n  });\n\n  const chartGridLayout = useGridLayout({\n    data: chartData,\n    format,\n    filterKey: groupByKey,\n    visualMapVisible: chartVisualMap.visualMap.show,\n    visualMapYPosition: chartVisualMap.visualMap.top,\n    xAxisPosition: chartXAxis.xAxis.position,\n  });\n\n  const chartGrid = useGrid({\n    // If sizes are provided, the grid size should automatically adapt to the values provided\n    width: width != null ? undefined : chartGridLayout.size.width,\n    height: height != null ? undefined : chartGridLayout.size.height,\n    ...chartGridLayout.padding,\n    ...grid,\n  });\n\n  const size = useMemo(() => {\n    return {\n      width,\n      // Echarts has a problem were the height is always set to 300px\n      // Thus, we need to update the height to make sure the chart is not cut out\n      height:\n        height ??\n        chartGridLayout.size.height +\n          chartGridLayout.padding.bottom +\n          chartGridLayout.padding.top,\n    };\n  }, [\n    chartGridLayout.padding.bottom,\n    chartGridLayout.padding.top,\n    chartGridLayout.size.height,\n    height,\n    width,\n  ]);\n\n  const option = useOption({\n    option: {\n      ...chartVisualMap,\n      ...chartTooltip,\n      ...chartGrid,\n      ...chartXAxis,\n      ...chartYAxis,\n      ...chartSeries,\n    },\n    onOptionChange,\n  });\n\n  return <HvBaseChart ref={ref} option={option} {...size} />;\n});\n"],"names":["echarts","use","HeatmapChart","VisualMapComponent","GridComponent","TooltipComponent","HvConfusionMatrix","forwardRef","props","ref","legend","groupBy","measure","sortBy","splitBy","grid","data","dataProp","tooltip","xAxis","yAxis","colorScale","colorScaleProp","delta","valuesProps","width","height","format","classes","classesProp","onOptionChange","useClasses","groupByKey","getGroupKey","chartData","useData","measures","undefined","useColorScale","custom","filterKey","chartVisualMap","useVisualMap","show","pieces","type","chartTooltip","useTooltip","component","params","value","series","fmtValue","valueFormatter","ftmTitle","titleFormatter","title","content","name","tooltipRoot","tooltipContainer","tooltipText","chartYAxis","useYAxis","axes","position","nameProps","location","padding","columnNames","filter","p","reverse","chartXAxis","useXAxis","array","chartSeries","useSeries","chartGridLayout","useGridLayout","visualMapVisible","visualMap","visualMapYPosition","top","xAxisPosition","chartGrid","useGrid","size","useMemo","bottom","option","useOption"],"mappings":"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"}

package/dist/esm/components/DonutChart/DonutChart.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 { PieChart } from "echarts/charts";
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from "echarts/components";
@@ -8,23 +8,26 @@ 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([PieChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent]);
-const HvDonutChart = ({
-  data,
-  groupBy,
-  classes,
-  legend,
-  tooltip,
-  measure: measures,
-  sortBy,
-  grid,
-  width,
-  height,
-  type = "regular",
-  slicesNameFormatter
-}) => {
+const HvDonutChart = forwardRef((props, ref) => {
+  const {
+    data,
+    groupBy,
+    classes,
+    legend,
+    tooltip,
+    measure: measures,
+    sortBy,
+    grid,
+    width,
+    height,
+    type = "regular",
+    slicesNameFormatter,
+    onOptionChange
+  } = props;
   const chartData = useData({
     data,
     groupBy,
@@ -55,17 +58,18 @@ const HvDonutChart = ({
   const chartGrid = useGrid({
     ...grid
   });
-  const options = useMemo(() => {
-    return {
+  const option = useOption({
+    option: {
       ...chartSeries,
       ...chartDataset,
       ...chartLegend,
       ...chartTooltip,
       ...chartGrid
-    };
-  }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);
-  return /* @__PURE__ */ jsx(HvBaseChart, { options, width, height });
-};
+    },
+    onOptionChange
+  });
+  return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
+});
 export {
   HvDonutChart
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n} from \"echarts/components\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\n  useSeries,\n  useTooltip,\n} from \"@viz/hooks\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartCommonProps } from \"../../types/common\";\nimport { HvDonutChartMeasure } from \"../../types\";\n\n// Register chart components\necharts.use([\n  PieChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n]);\n\nexport interface HvDonutChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvDonutChartProps extends HvChartCommonProps {\n  /** Column to measure. */\n  measure: HvDonutChartMeasure;\n  /** Type: regular or thin. Defaults to `regular`. */\n  type?: \"regular\" | \"thin\";\n  /** Formatter for the slices names used on the tooltips and legend. */\n  slicesNameFormatter?: (value?: string) => string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDonutChartClasses;\n}\n\n/**\n * Donut charts nicely convey the part-whole relationship and they have become\n * the most recognizable chart types for representing proportions in business and data statistics.\n */\nexport const HvDonutChart = ({\n  data,\n  groupBy,\n  classes,\n  legend,\n  tooltip,\n  measure: measures,\n  sortBy,\n  grid,\n  width,\n  height,\n  type = \"regular\",\n  slicesNameFormatter,\n}: HvDonutChartProps) => {\n  const chartData = useData({ data, groupBy, measures, sortBy });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartSeries = useSeries({\n    type: \"pie\",\n    data: chartData,\n    groupBy,\n    measures,\n    radius: type === \"thin\" ? [\"65%\", \"70%\"] : [\"55%\", \"70%\"],\n  });\n\n  const chartLegend = useLegend({\n    ...legend,\n    show: legend?.show ?? true,\n    icon: \"square\",\n    series: chartSeries.series,\n    formatter: slicesNameFormatter,\n  });\n\n  const chartTooltip = useTooltip({\n    ...tooltip,\n    measures,\n    classes,\n    nameFormatter: slicesNameFormatter,\n  });\n\n  const chartGrid = useGrid({ ...grid });\n\n  const options = useMemo(() => {\n    return {\n      ...chartSeries,\n      ...chartDataset,\n      ...chartLegend,\n      ...chartTooltip,\n      ...chartGrid,\n    };\n  }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","HvDonutChart","data","groupBy","classes","legend","tooltip","measure","measures","sortBy","grid","width","height","type","slicesNameFormatter","chartData","useData","chartDataset","useDataset","chartSeries","useSeries","radius","chartLegend","useLegend","show","icon","series","formatter","chartTooltip","useTooltip","nameFormatter","chartGrid","useGrid","options","useMemo"],"mappings":";;;;;;;;;;;;AA0BAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,eAAe,CAChB;AAmBM,MAAMC,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AACiB,MAAM;AACvB,QAAMC,YAAYC,QAAQ;AAAA,IAAEd;AAAAA,IAAMC;AAAAA,IAASK;AAAAA,IAAUC;AAAAA,EAAAA,CAAQ;AAEvDQ,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,cAAcC,UAAU;AAAA,IAC5BP,MAAM;AAAA,IACNX,MAAMa;AAAAA,IACNZ;AAAAA,IACAK;AAAAA,IACAa,QAAQR,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,EAAA,CACzD;AAED,QAAMS,cAAcC,UAAU;AAAA,IAC5B,GAAGlB;AAAAA,IACHmB,OAAMnB,iCAAQmB,SAAQ;AAAA,IACtBC,MAAM;AAAA,IACNC,QAAQP,YAAYO;AAAAA,IACpBC,WAAWb;AAAAA,EAAAA,CACZ;AAED,QAAMc,eAAeC,WAAW;AAAA,IAC9B,GAAGvB;AAAAA,IACHE;AAAAA,IACAJ;AAAAA,IACA0B,eAAehB;AAAAA,EAAAA,CAChB;AAED,QAAMiB,YAAYC,QAAQ;AAAA,IAAE,GAAGtB;AAAAA,EAAAA,CAAM;AAE/BuB,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGf;AAAAA,MACH,GAAGF;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CAACZ,aAAaF,cAAcK,aAAaM,cAAcG,SAAS,CAAC;AAEpE,SAAQ,oBAAA,aAAA,EAAY,SAAkB,OAAc,OAAkB,CAAA;AACxE;"}
+{"version":3,"file":"DonutChart.js","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n} from \"@viz/hooks\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartCommonProps } from \"../../types/common\";\nimport { HvDonutChartMeasure } from \"../../types\";\n\n// Register chart components\necharts.use([\n  PieChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n]);\n\nexport interface HvDonutChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvDonutChartProps extends HvChartCommonProps {\n  /** Column to measure. */\n  measure: HvDonutChartMeasure;\n  /** Type: regular or thin. Defaults to `regular`. */\n  type?: \"regular\" | \"thin\";\n  /** Formatter for the slices names used on the tooltips and legend. */\n  slicesNameFormatter?: (value?: string) => string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDonutChartClasses;\n}\n\n/**\n * Donut charts nicely convey the part-whole relationship and they have become\n * the most recognizable chart types for representing proportions in business and data statistics.\n */\nexport const HvDonutChart = forwardRef<ReactECharts, HvDonutChartProps>(\n  (props, ref) => {\n    const {\n      data,\n      groupBy,\n      classes,\n      legend,\n      tooltip,\n      measure: measures,\n      sortBy,\n      grid,\n      width,\n      height,\n      type = \"regular\",\n      slicesNameFormatter,\n      onOptionChange,\n    } = props;\n\n    const chartData = useData({ data, groupBy, measures, sortBy });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartSeries = useSeries({\n      type: \"pie\",\n      data: chartData,\n      groupBy,\n      measures,\n      radius: type === \"thin\" ? [\"65%\", \"70%\"] : [\"55%\", \"70%\"],\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      show: legend?.show ?? true,\n      icon: \"square\",\n      series: chartSeries.series,\n      formatter: slicesNameFormatter,\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      measures,\n      classes,\n      nameFormatter: slicesNameFormatter,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const option = useOption({\n      option: {\n        ...chartSeries,\n        ...chartDataset,\n        ...chartLegend,\n        ...chartTooltip,\n        ...chartGrid,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart ref={ref} option={option} width={width} height={height} />\n    );\n  }\n);\n"],"names":["echarts","use","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","HvDonutChart","forwardRef","props","ref","data","groupBy","classes","legend","tooltip","measure","measures","sortBy","grid","width","height","type","slicesNameFormatter","onOptionChange","chartData","useData","chartDataset","useDataset","chartSeries","useSeries","radius","chartLegend","useLegend","show","icon","series","formatter","chartTooltip","useTooltip","nameFormatter","chartGrid","useGrid","option","useOption"],"mappings":";;;;;;;;;;;;;AA4BAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,eAAe,CAChB;AAmBM,MAAMC,eAAeC,WAC1B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,EACEf,IAAAA;AAEJ,QAAMgB,YAAYC,QAAQ;AAAA,IAAEf;AAAAA,IAAMC;AAAAA,IAASK;AAAAA,IAAUC;AAAAA,EAAAA,CAAQ;AAEvDS,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,cAAcC,UAAU;AAAA,IAC5BR,MAAM;AAAA,IACNX,MAAMc;AAAAA,IACNb;AAAAA,IACAK;AAAAA,IACAc,QAAQT,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,EAAA,CACzD;AAED,QAAMU,cAAcC,UAAU;AAAA,IAC5B,GAAGnB;AAAAA,IACHoB,OAAMpB,iCAAQoB,SAAQ;AAAA,IACtBC,MAAM;AAAA,IACNC,QAAQP,YAAYO;AAAAA,IACpBC,WAAWd;AAAAA,EAAAA,CACZ;AAED,QAAMe,eAAeC,WAAW;AAAA,IAC9B,GAAGxB;AAAAA,IACHE;AAAAA,IACAJ;AAAAA,IACA2B,eAAejB;AAAAA,EAAAA,CAChB;AAED,QAAMkB,YAAYC,QAAQ;AAAA,IAAE,GAAGvB;AAAAA,EAAAA,CAAM;AAErC,QAAMwB,SAASC,UAAU;AAAA,IACvBD,QAAQ;AAAA,MACN,GAAGd;AAAAA,MACH,GAAGF;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,IACL;AAAA,IACAjB;AAAAA,EAAAA,CACD;AAED,SACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAkB,CAAA;AAE3E,CACF;"}

package/dist/esm/components/LineChart/LineChart.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 { LineChart } from "echarts/charts";
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent } from "echarts/components";
@@ -11,30 +11,33 @@ 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([LineChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent]);
-const HvLineChart = ({
-  area = false,
-  emptyCellMode = "void",
-  areaOpacity = 0.5,
-  yAxis,
-  xAxis,
-  horizontalRangeSlider,
-  grid,
-  data,
-  groupBy,
-  splitBy,
-  sortBy,
-  measures,
-  stack,
-  seriesNameFormatter,
-  legend,
-  classes,
-  tooltip,
-  width,
-  height
-}) => {
+const HvLineChart = forwardRef((props, ref) => {
+  const {
+    area = false,
+    emptyCellMode = "void",
+    areaOpacity = 0.5,
+    yAxis,
+    xAxis,
+    horizontalRangeSlider,
+    grid,
+    data,
+    groupBy,
+    splitBy,
+    sortBy,
+    measures,
+    stack,
+    seriesNameFormatter,
+    legend,
+    classes,
+    tooltip,
+    width,
+    height,
+    onOptionChange
+  } = props;
   const chartData = useData({
     data,
     groupBy,
@@ -77,8 +80,8 @@ const HvLineChart = ({
     measures,
     classes
   });
-  const options = useMemo(() => {
-    return {
+  const option = useOption({
+    option: {
       ...chartYAxis,
       ...chartXAxis,
       ...chartSlider,
@@ -87,10 +90,11 @@ const HvLineChart = ({
       ...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 {
   HvLineChart
 };

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport * as echarts from \"echarts/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\n\nimport {\n  useYAxis,\n  useXAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n  LineChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n]);\n\nexport interface HvLineChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvLineChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvLineChartMeasures>;\n  /** Strategy to use when there are empty cells. Defaults to `void`. */\n  emptyCellMode?: HvChartEmptyCellMode;\n  /** Whether the area under the lines should be filled. Defaults to `false`. */\n  area?: boolean;\n  /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */\n  areaOpacity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLineChartClasses;\n}\n\n/**\n * A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = ({\n  area = false,\n  emptyCellMode = \"void\",\n  areaOpacity = 0.5,\n  yAxis,\n  xAxis,\n  horizontalRangeSlider,\n  grid,\n  data,\n  groupBy,\n  splitBy,\n  sortBy,\n  measures,\n  stack,\n  seriesNameFormatter,\n  legend,\n  classes,\n  tooltip,\n  width,\n  height,\n}: HvLineChartProps) => {\n  const chartData = useData({ data, groupBy, measures, splitBy, sortBy });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartYAxis = useYAxis({\n    axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n  });\n\n  const chartXAxis = useXAxis({ ...xAxis, scale: true });\n\n  const chartSlider = useDataZoom({\n    showHorizontal: horizontalRangeSlider?.show,\n  });\n\n  const chartGrid = useGrid({ ...grid });\n\n  const chartSeries = useSeries({\n    type: \"line\",\n    data: chartData,\n    groupBy,\n    measures,\n    area,\n    areaOpacity,\n    emptyCellMode,\n    stack,\n    nameFormatter: seriesNameFormatter,\n  });\n\n  const chartLegend = useLegend({\n    ...legend,\n    series: chartSeries.series,\n  });\n\n  const chartTooltip = useTooltip({\n    ...tooltip,\n    trigger: \"axis\",\n    measures,\n    classes,\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","LineChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvLineChart","area","emptyCellMode","areaOpacity","yAxis","xAxis","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","measures","stack","seriesNameFormatter","legend","classes","tooltip","width","height","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","axes","Array","isArray","chartXAxis","useXAxis","scale","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","type","nameFormatter","chartLegend","useLegend","series","chartTooltip","useTooltip","trigger","options","useMemo"],"mappings":";;;;;;;;;;;;;;;AAiCAA,QAAQC,IAAI,CACVC,WACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAuBM,MAAMC,cAAcA,CAAC;AAAA,EAC1BC,OAAO;AAAA,EACPC,gBAAgB;AAAA,EAChBC,cAAc;AAAA,EACdC;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;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AACtB,QAAMC,YAAYC,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASG;AAAAA,IAAUF;AAAAA,IAASC;AAAAA,EAAAA,CAAQ;AAEhEW,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQxB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,EAAA,CAC7D;AAED,QAAMyB,aAAaC,SAAS;AAAA,IAAE,GAAGzB;AAAAA,IAAO0B,OAAO;AAAA,EAAA,CAAM;AAErD,QAAMC,cAAcC,YAAY;AAAA,IAC9BC,gBAAgB5B,+DAAuB6B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAQ;AAAA,IAAE,GAAG9B;AAAAA,EAAAA,CAAM;AAErC,QAAM+B,cAAcC,UAAU;AAAA,IAC5BC,MAAM;AAAA,IACNhC,MAAMY;AAAAA,IACNX;AAAAA,IACAG;AAAAA,IACAX;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACA4B,eAAe3B;AAAAA,EAAAA,CAChB;AAED,QAAM4B,cAAcC,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQN,YAAYM;AAAAA,EAAAA,CACrB;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAG7B;AAAAA,IACH8B,SAAS;AAAA,IACTnC;AAAAA,IACAI;AAAAA,EAAAA,CACD;AAEKgC,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGzB;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGd;AAAAA,MACH,GAAGgB;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAL,YACAQ,aACAI,WACAd,cACAgB,aACAI,aACAG,YAAY,CACb;AAED,SAAQ,oBAAA,aAAA,EAAY,SAAkB,OAAc,OAAkB,CAAA;AACxE;"}
+{"version":3,"file":"LineChart.js","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { LineChart } 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  useYAxis,\n  useXAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n  useOption,\n} from \"@viz/hooks\";\n\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n  LineChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n]);\n\nexport interface HvLineChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvLineChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvLineChartMeasures>;\n  /** Strategy to use when there are empty cells. Defaults to `void`. */\n  emptyCellMode?: HvChartEmptyCellMode;\n  /** Whether the area under the lines should be filled. Defaults to `false`. */\n  area?: boolean;\n  /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */\n  areaOpacity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLineChartClasses;\n}\n\n/**\n * A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = forwardRef<ReactECharts, HvLineChartProps>(\n  (props, ref) => {\n    const {\n      area = false,\n      emptyCellMode = \"void\",\n      areaOpacity = 0.5,\n      yAxis,\n      xAxis,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      measures,\n      stack,\n      seriesNameFormatter,\n      legend,\n      classes,\n      tooltip,\n      width,\n      height,\n      onOptionChange,\n    } = props;\n\n    const chartData = useData({ data, groupBy, measures, splitBy, sortBy });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartYAxis = useYAxis({\n      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n    });\n\n    const chartXAxis = useXAxis({ ...xAxis, scale: true });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"line\",\n      data: chartData,\n      groupBy,\n      measures,\n      area,\n      areaOpacity,\n      emptyCellMode,\n      stack,\n      nameFormatter: seriesNameFormatter,\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      series: chartSeries.series,\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      trigger: \"axis\",\n      measures,\n      classes,\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","LineChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvLineChart","forwardRef","props","ref","area","emptyCellMode","areaOpacity","yAxis","xAxis","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","measures","stack","seriesNameFormatter","legend","classes","tooltip","width","height","onOptionChange","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","axes","Array","isArray","chartXAxis","useXAxis","scale","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","type","nameFormatter","chartLegend","useLegend","series","chartTooltip","useTooltip","trigger","option","useOption"],"mappings":";;;;;;;;;;;;;;;;AAmCAA,QAAQC,IAAI,CACVC,WACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAuBM,MAAMC,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,OAAO;AAAA,IACPC,gBAAgB;AAAA,IAChBC,cAAc;AAAA,IACdC;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,IACAC;AAAAA,IACAC;AAAAA,EACErB,IAAAA;AAEJ,QAAMsB,YAAYC,QAAQ;AAAA,IAAEd;AAAAA,IAAMC;AAAAA,IAASG;AAAAA,IAAUF;AAAAA,IAASC;AAAAA,EAAAA,CAAQ;AAEhEY,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQzB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,EAAA,CAC7D;AAED,QAAM0B,aAAaC,SAAS;AAAA,IAAE,GAAG1B;AAAAA,IAAO2B,OAAO;AAAA,EAAA,CAAM;AAErD,QAAMC,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,IAC5BC,MAAM;AAAA,IACNjC,MAAMa;AAAAA,IACNZ;AAAAA,IACAG;AAAAA,IACAX;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACA6B,eAAe5B;AAAAA,EAAAA,CAChB;AAED,QAAM6B,cAAcC,UAAU;AAAA,IAC5B,GAAG7B;AAAAA,IACH8B,QAAQN,YAAYM;AAAAA,EAAAA,CACrB;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAG9B;AAAAA,IACH+B,SAAS;AAAA,IACTpC;AAAAA,IACAI;AAAAA,EAAAA,CACD;AAED,QAAMiC,SAASC,UAAU;AAAA,IACvBD,QAAQ;AAAA,MACN,GAAGxB;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGd;AAAAA,MACH,GAAGgB;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGG;AAAAA,IACL;AAAA,IACA1B;AAAAA,EAAAA,CACD;AAED,SACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAkB,CAAA;AAE3E,CACF;"}

package/dist/esm/hooks/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","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.js","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":";;;AA4CO,MAAMA,aAAaA,CAAC;AAAA,EACzBC,WAAW,CAAE;AAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,aAAa;AAAA,EACbC,UAAU;AAAA,EACVC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AACkB,MAAM;AAClB,QAAA;AAAA,IAAER,SAASS;AAAAA,EAAAA,IAAcC,WAAWV,OAAO;AAE3CW,QAAAA,gBAAgBC,YACpB,CAACC,WAAmC;AAClC,UAAMC,QACJD,OAAO,CAAC,EAAEE,eAAe,QACrBF,OAAO,CAAC,EAAEG,aACVb,aACAU,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOC,EAAE,CAAC,CAAC,IACrCN,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOE,EAAE,CAAC,CAAC;AAE3C,UAAMC,iBAAiBd,iBAAiBA,eAAeO,KAAK,IAAIA;AAEhE,QAAIT,SAAS,UAAU;AACrB,YAAMiB,UAAUC,WACdV,OAAO,CAAC,EAAEE,eAAe,QACrBF,OAAO,CAAC,EAAEW,OACVrB,aACAU,OAAO,CAAC,EAAEY,eAAeZ,OAAO,CAAC,EAAEK,OAAOE,EAAE,CAAC,CAAC,IAC9CP,OAAO,CAAC,EAAEY,eAAeZ,OAAO,CAAC,EAAEK,OAAOC,EAAE,CAAC,CAAC,GAClDpB,QACF;AAEA,YAAMkB,QACJJ,OAAO,CAAC,EAAEE,eAAe,QACrBF,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOD,MAAM,CAAC,CAAC,IACzCd,aACAU,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOE,EAAE,CAAC,CAAC,IACrCP,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOC,EAAE,CAAC,CAAC;AAE3C,YAAMO,iBACJ,OAAOJ,YAAY,YAAYA,QAAQhB,iBACnCgB,QAAQhB,eAAeW,KAAK,IAC5BX,iBACAA,eAAeW,KAAK,IACpBA;AAEE,aAAA;AAAA,0BACUR,uCAAWkB,iBAAkB;AAAA,0BAC7BlB,uCAAWmB,kBAAmB,KAAIP,cAAe;AAAA,0BACjDZ,uCAAWoB,kBAAmB,KAAIH,cAAe;AAAA;AAAA;AAAA,IAGrE;AAEQ,WAAA;AAAA,sBACQjB,uCAAWqB,mBAAoB;AAAA,wBAC7BrB,uCAAWsB,6BAA8B;AAAA;AAAA,0BAGjDtB,uCAAWuB,oBACZ,KAAIX,cAAe;AAAA;AAAA;AAAA,wBAGVZ,uCAAWwB,8BAA+B;AAAA,cACpDpB,OACCqB,IAAKC,CAAM,MAAA;AACJb,YAAAA,UAAUC,WACdY,EAAEpB,eAAe,QACboB,EAAEX,OACFrB,aACAgC,EAAEV,eAAeU,EAAEjB,OAAOE,EAAE,CAAC,CAAC,IAC9Be,EAAEV,eAAeU,EAAEjB,OAAOC,EAAE,CAAC,CAAC,GAClCpB,QACF;AAEMkB,YAAAA,QACJkB,EAAEpB,eAAe,QACboB,EAAElB,MAAMkB,EAAEjB,OAAOD,MAAM,CAAC,CAAC,IACzBd,aACAgC,EAAElB,MAAMkB,EAAEjB,OAAOE,EAAE,CAAC,CAAC,IACrBe,EAAElB,MAAMkB,EAAEjB,OAAOC,EAAE,CAAC,CAAC;AAE3B,YAAMO,iBACJ,OAAOJ,YAAY,YAAYA,QAAQhB,iBACnCgB,QAAQhB,eAAeW,KAAK,IAC5BX,iBACAA,eAAeW,KAAK,IACpBA;AAEN,YAAMO,OAAOW,EAAEpB,eAAe,QAAQoB,EAAEX,OAAOW,EAAEnB;AAEjD,YAAMoB,gBAAgB5B,gBAClBA,cAAcgB,IAAI,IAClBA;AAEI,aAAA;AAAA,4BACIW,EAAEnB,UAAW,YAAWP,uCAAW4B,8BAA+B;AAAA,gCAC9D5B,uCAAW6B,kCAAmC;AAAA,kDAC5BH,EAAEI,KAAM,aAAY9B,uCAAW+B,0BAA2B;AAAA,gCAC5E/B,uCAAWgC,yBAA0B,KAAIL,aAAc;AAAA;AAAA,8BAEzD3B,uCAAWiC,0BAA2B,KAAIhB,cAAe;AAAA;AAAA;AAAA,IAAA,CAGxE,EACAiB,KAAK,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA,EAAA,GAKrB,CACElC,WACAN,YACAE,MACAN,UACAS,eACAD,gBACAD,cAAc,CAElB;AAEMsC,QAAAA,sBAAsBhC,YAC1B,CAACC,WAAmC;AAC9B,QAAA,OAAOZ,cAAc,YAAY;AACnC,YAAM4C,SAA+B;AAAA,QACnC/B,OACED,OAAO,CAAC,EAAEE,eAAe,QACrBF,OAAO,CAAC,EAAEG,aACVb,aACAU,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOC,EAAE,CAAC,CAAC,IACrCN,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOE,EAAE,CAAC,CAAC;AAAA,QAC3C0B,QAAQjC,OAAOqB,IAAKa,CAAM,MAAA;AACjB,iBAAA;AAAA,YACLR,OAAOQ,EAAER;AAAAA,YACTf,MACEuB,EAAEhC,eAAe,YACbiC,OAAOD,EAAE9B,MAAM8B,EAAE7B,OAAOC,EAAE,CAAC,CAAC,CAAC,IAC7B4B,EAAEhC,eAAe,QACjBgC,EAAEvB,OACFuB,EAAE/B;AAAAA,YACRC,OACE8B,EAAEhC,eAAe,SAASgC,EAAEhC,eAAe,YACvCgC,EAAE9B,MAAM8B,EAAE7B,OAAOD,MAAM,CAAC,CAAC,IACzBd,aACA4C,EAAE9B,MAAM8B,EAAE7B,OAAOE,EAAE,CAAC,CAAC,IACrB2B,EAAE9B,MAAM8B,EAAE7B,OAAOC,EAAE,CAAC,CAAC;AAAA,UAAA;AAAA,QAC7B,CACD;AAAA,MAAA;AAGH,aAAOlB,UAAU4C,MAAM;AAAA,IACzB;AAEO5C,WAAAA;AAAAA,EAAAA,GAET,CAACA,WAAWE,UAAU,CACxB;AAEM8C,QAAAA,SAASC,QAA0C,MAAM;AACtD,WAAA;AAAA,MACLC,SAAS;AAAA,QACPC,SAAS;AAAA,QACTlD;AAAAA,QACAE;AAAAA,QACAiD,UAAUA,CAACC,OAAOzC,QAAQ0C,KAAKC,MAAMC,SAAS;AACrC,iBAAA,CAACH,MAAM,CAAC,GAAGA,MAAM,CAAC,IAAIG,KAAKC,YAAY,CAAC,CAAC;AAAA,QAClD;AAAA,QACAC,WAAY9C,CAAW,WAAA;AACrB,gBAAM+C,gBAAgBC,MAAMC,QAAQjD,MAAM,IAAIA,SAAS,CAACA,MAAM;AAE9D,iBAAOZ,YACH2C,oBAAoBgB,aAAa,IACjCjD,cAAciD,aAAa;AAAA,QACjC;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACxD,SAASH,WAAWC,MAAMS,eAAeiC,mBAAmB,CAAC;AAE1DK,SAAAA;AACT;"}

package/dist/esm/hooks/useDataZoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataZoom.js","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,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.js","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,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/esm/hooks/useDataset.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataset.js","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,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.js","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,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/esm/hooks/useGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGrid.js","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,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.js","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,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/esm/hooks/useLegend.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLegend.js","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,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,cAAcf,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,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.js","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,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,cAAcf,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,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/esm/hooks/useOption.js

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+const useOption = ({
+  option: optionProp,
+  onOptionChange
+}) => {
+  const option = useMemo(() => {
+    const baseOption = {
+      aria: {
+        enabled: true
+      },
+      animation: false
+    };
+    const opt = {
+      ...baseOption,
+      ...optionProp
+    };
+    return onOptionChange ? onOptionChange(opt) : opt;
+  }, [onOptionChange, optionProp]);
+  return option;
+};
+export {
+  useOption
+};
+//# sourceMappingURL=useOption.js.map

package/dist/esm/hooks/useOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOption.js","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,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/esm/hooks/useSeries.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSeries.js","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,YAAYZ,OAAO;AAEhCa,QAAAA,SAAwCC,QAE5C,MAAM;AACC,WAAA;AAAA,MACLC,QAAQb,KACLc,YACAC,EAAAA,OAAQC,OAAMA,MAAMP,UAAU,EAC9BQ,IAA2DD,CAAM,MAAA;AAC1DE,cAAAA,UAAUC,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.js","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,YAAYZ,OAAO;AAEhCa,QAAAA,SAA0CC,QAE9C,MAAM;AACC,WAAA;AAAA,MACLC,QAAQb,KACLc,YACAC,EAAAA,OAAQC,OAAMA,MAAMP,UAAU,EAC9BQ,IAA2DD,CAAM,MAAA;AAC1DE,cAAAA,UAAUC,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/esm/hooks/useVisualMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualMap.js","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,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,cAAc,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.js","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,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,cAAc,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/esm/hooks/useXAxis.js.map

@@ -1 +1 @@
-{"version":3,"file":"useXAxis.js","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,SAAS;AAEtBC,QAAAA,SAASC,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,YAAYzB,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.js","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,SAAS;AAEtBC,QAAAA,SAASC,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,YAAYzB,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/esm/hooks/useYAxis.js

@@ -53,7 +53,7 @@ const useYAxis = ({
   }, [colors, defaultType]);
   const option = 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/esm/hooks/useYAxis.js.map

@@ -1 +1 @@
-{"version":3,"file":"useYAxis.js","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,SAAS;AAEtBC,QAAAA,aAAaC,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,YAAYnB,IAAI,KAAKmB,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,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.js","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,SAAS;AAEtBC,QAAAA,aAAaC,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,YAAYnB,IAAI,KAAKmB,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,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;"}