@hitachivantara/uikit-react-viz 5.3.19 → 5.4.1

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

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { getMeasure } from "../../utils/getMeasure.js";
 import { useClasses } from "./styles.js";
 const useTooltip = ({
-  measures,
+  measures = [],
   classes,
   component,
   show = true,
@@ -65,8 +65,8 @@ const useTooltip = ({
         series: params.map((p) => {
           return {
             color: p.color,
-            name: p.seriesType === "pie" ? p.name : p.seriesName,
-            value: p.seriesType === "pie" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
+            name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" ? p.name : p.seriesName,
+            value: p.seriesType === "pie" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
           };
         })
       };

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\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: p.seriesType === \"pie\" ? p.name : p.seriesName,\n              value:\n                p.seriesType === \"pie\"\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","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 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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"}

package/dist/esm/hooks/useData.js

@@ -7,7 +7,8 @@ const useData = ({
   groupBy,
   measures,
   sortBy,
-  splitBy
+  splitBy,
+  delta
 }) => {
   const groupByKey = getGroupKey(groupBy);
   const chartData = useMemo(() => {
@@ -60,6 +61,15 @@ const useData = ({
       [sortBy.field]: sortBy.order ?? "asc"
     };
     const allFields = [...groupByFields, ...splitByFields, ...Object.keys(measuresFields)];
+    if (delta) {
+      const deltaExpression = Object.keys(measuresFields).reduce((acc, curr) => {
+        return {
+          ...acc,
+          [curr]: `d => d.${curr} - d.${delta}`
+        };
+      }, {});
+      tableData = tableData.derive(deltaExpression);
+    }
     tableData = tableData.select(...allFields);
     if (groupByFields.length > 0) {
       tableData = tableData.groupby(groupByFields);
@@ -84,7 +94,7 @@ const useData = ({
       tableData = tableData.select(not(...groupByFields));
     }
     return tableData;
-  }, [data, groupBy, groupByKey, splitBy, measures, sortBy]);
+  }, [data, groupBy, splitBy, measures, sortBy, delta, groupByKey]);
   return chartData;
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { from, internal, not, table, desc } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartAggregation,\n  HvChartOrder,\n  HvLineChartMeasures,\n  HvChartData,\n  HvDonutChartMeasure,\n} from \"@viz/types\";\nimport { getAgFunc, getGroupKey } from \"@viz/utils\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"@viz/types/common\";\n\ninterface HvDataHookProps {\n  data: HvChartData;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n  sortBy?: HvChartCommonProps[\"sortBy\"];\n}\n\nexport const useData = ({\n  data,\n  groupBy,\n  measures,\n  sortBy,\n  splitBy,\n}: HvDataHookProps): internal.ColumnTable => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useMemo<ColumnTable>(() => {\n    let tableData: ColumnTable;\n    if (data instanceof internal.ColumnTable) {\n      tableData = data;\n    } else if (Array.isArray(data)) {\n      tableData = from(data);\n    } else {\n      tableData = table(data);\n    }\n\n    const groupByFields = groupBy\n      ? Array.isArray(groupBy)\n        ? groupBy\n        : [groupBy]\n      : [];\n\n    const splitByFields = Array.isArray(splitBy)\n      ? splitBy\n      : splitBy != null\n      ? [splitBy]\n      : [];\n\n    const measuresFields: { [key: string]: string } =\n      measures == null\n        ? {}\n        : typeof measures === \"string\"\n        ? { [measures]: getAgFunc(\"sum\", measures) }\n        : Array.isArray(measures)\n        ? measures.reduce<{ [key: string]: string }>((acc, value) => {\n            let field: string;\n            let agFunction: HvChartAggregation;\n            if (typeof value === \"string\") {\n              field = value;\n              agFunction = \"sum\";\n            } else {\n              field = value.field;\n              agFunction = value.agg ?? \"sum\";\n            }\n\n            return {\n              ...acc,\n              [field]: getAgFunc(agFunction, field),\n            };\n          }, {})\n        : {\n            [measures.field]: getAgFunc(measures.agg ?? \"sum\", measures.field),\n          };\n\n    const sortByFields: { [key: string]: HvChartOrder } =\n      sortBy == null\n        ? {}\n        : typeof sortBy === \"string\"\n        ? { [sortBy]: \"asc\" }\n        : Array.isArray(sortBy)\n        ? sortBy.reduce<{ [key: string]: HvChartOrder }>((acc, value) => {\n            let field: string;\n            let orderFunction: HvChartOrder;\n            if (typeof value === \"string\") {\n              field = value;\n              orderFunction = \"asc\";\n            } else {\n              field = value.field;\n              orderFunction = value.order ?? \"asc\";\n            }\n\n            return {\n              ...acc,\n              [field]: orderFunction,\n            };\n          }, {})\n        : { [sortBy.field]: sortBy.order ?? \"asc\" };\n\n    const allFields = [\n      ...groupByFields,\n      ...splitByFields,\n      ...Object.keys(measuresFields),\n    ];\n\n    // remove unneeded fields\n    tableData = tableData.select(...allFields);\n\n    // group by groupBy fields\n    if (groupByFields.length > 0) {\n      tableData = tableData.groupby(groupByFields);\n    }\n\n    if (splitByFields.length > 0) {\n      // pivot by splitBy fields\n      tableData = tableData.pivot(splitByFields, measuresFields);\n    } else {\n      // if there is no splitBy fields, just aggregate measures fields\n      tableData = tableData.rollup(measuresFields);\n    }\n\n    // if grouped by multiple fields, create a new joint field\n    // as the line chart doesn't implement hierarchical axis label grouping\n    if (groupByFields.length > 1) {\n      const expression = `d => ${groupByFields\n        .map((field) => `d.${field}`)\n        .join(\" + '_' + \")}`;\n\n      tableData = tableData.derive(\n        { [groupByKey]: expression },\n        { after: groupByFields[groupByFields.length - 1] }\n      );\n    }\n\n    // sort by sortBy fields\n    if (Object.keys(sortByFields).length > 0) {\n      tableData = tableData.orderby(\n        ...Object.keys(sortByFields)\n          // only sort by fields that are in the table, ignore the rest\n          .filter((key) => allFields.includes(key))\n          .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key))\n      );\n    }\n\n    // if a derived field was created, remove the original fields\n    if (groupByFields.length > 1) {\n      tableData = tableData.select(not(...groupByFields));\n    }\n\n    return tableData;\n  }, [data, groupBy, groupByKey, splitBy, measures, sortBy]);\n\n  return chartData;\n};\n"],"names":["useData","data","groupBy","measures","sortBy","splitBy","groupByKey","getGroupKey","chartData","useMemo","tableData","internal","ColumnTable","Array","isArray","from","table","groupByFields","splitByFields","measuresFields","getAgFunc","reduce","acc","value","field","agFunction","agg","sortByFields","orderFunction","order","allFields","Object","keys","select","length","groupby","pivot","rollup","expression","map","join","derive","after","orderby","filter","key","includes","desc","not"],"mappings":"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"}
+{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { from, internal, not, table, desc } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartAggregation,\n  HvChartOrder,\n  HvLineChartMeasures,\n  HvChartData,\n  HvDonutChartMeasure,\n} from \"@viz/types\";\nimport { getAgFunc, getGroupKey } from \"@viz/utils\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"@viz/types/common\";\n\ninterface HvDataHookProps {\n  data: HvChartData;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n  sortBy?: HvChartCommonProps[\"sortBy\"];\n  delta?: string;\n}\n\nexport const useData = ({\n  data,\n  groupBy,\n  measures,\n  sortBy,\n  splitBy,\n  delta,\n}: HvDataHookProps): internal.ColumnTable => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useMemo<ColumnTable>(() => {\n    let tableData: ColumnTable;\n    if (data instanceof internal.ColumnTable) {\n      tableData = data;\n    } else if (Array.isArray(data)) {\n      tableData = from(data);\n    } else {\n      tableData = table(data);\n    }\n\n    const groupByFields = groupBy\n      ? Array.isArray(groupBy)\n        ? groupBy\n        : [groupBy]\n      : [];\n\n    const splitByFields = Array.isArray(splitBy)\n      ? splitBy\n      : splitBy != null\n      ? [splitBy]\n      : [];\n\n    const measuresFields: { [key: string]: string } =\n      measures == null\n        ? {}\n        : typeof measures === \"string\"\n        ? { [measures]: getAgFunc(\"sum\", measures) }\n        : Array.isArray(measures)\n        ? measures.reduce<{ [key: string]: string }>((acc, value) => {\n            let field: string;\n            let agFunction: HvChartAggregation;\n            if (typeof value === \"string\") {\n              field = value;\n              agFunction = \"sum\";\n            } else {\n              field = value.field;\n              agFunction = value.agg ?? \"sum\";\n            }\n\n            return {\n              ...acc,\n              [field]: getAgFunc(agFunction, field),\n            };\n          }, {})\n        : {\n            [measures.field]: getAgFunc(measures.agg ?? \"sum\", measures.field),\n          };\n\n    const sortByFields: { [key: string]: HvChartOrder } =\n      sortBy == null\n        ? {}\n        : typeof sortBy === \"string\"\n        ? { [sortBy]: \"asc\" }\n        : Array.isArray(sortBy)\n        ? sortBy.reduce<{ [key: string]: HvChartOrder }>((acc, value) => {\n            let field: string;\n            let orderFunction: HvChartOrder;\n            if (typeof value === \"string\") {\n              field = value;\n              orderFunction = \"asc\";\n            } else {\n              field = value.field;\n              orderFunction = value.order ?? \"asc\";\n            }\n\n            return {\n              ...acc,\n              [field]: orderFunction,\n            };\n          }, {})\n        : { [sortBy.field]: sortBy.order ?? \"asc\" };\n\n    const allFields = [\n      ...groupByFields,\n      ...splitByFields,\n      ...Object.keys(measuresFields),\n    ];\n\n    // --- Confusion matrix ---\n    // Recalculate the measures columns according to the delta column\n    if (delta) {\n      const deltaExpression = Object.keys(measuresFields).reduce(\n        (acc, curr) => {\n          return {\n            ...acc,\n            [curr]: `d => d.${curr} - d.${delta}`,\n          };\n        },\n        {}\n      );\n\n      tableData = tableData.derive(deltaExpression);\n    }\n\n    // remove unneeded fields\n    tableData = tableData.select(...allFields);\n\n    // group by groupBy fields\n    if (groupByFields.length > 0) {\n      tableData = tableData.groupby(groupByFields);\n    }\n\n    if (splitByFields.length > 0) {\n      // pivot by splitBy fields\n      tableData = tableData.pivot(splitByFields, measuresFields);\n    } else {\n      // if there is no splitBy fields, just aggregate measures fields\n      tableData = tableData.rollup(measuresFields);\n    }\n\n    // if grouped by multiple fields, create a new joint field\n    // as the line chart doesn't implement hierarchical axis label grouping\n    if (groupByFields.length > 1) {\n      const expression = `d => ${groupByFields\n        .map((field) => `d.${field}`)\n        .join(\" + '_' + \")}`;\n\n      tableData = tableData.derive(\n        { [groupByKey]: expression },\n        { after: groupByFields[groupByFields.length - 1] }\n      );\n    }\n\n    // sort by sortBy fields\n    if (Object.keys(sortByFields).length > 0) {\n      tableData = tableData.orderby(\n        ...Object.keys(sortByFields)\n          // only sort by fields that are in the table, ignore the rest\n          .filter((key) => allFields.includes(key))\n          .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key))\n      );\n    }\n\n    // if a derived field was created, remove the original fields\n    if (groupByFields.length > 1) {\n      tableData = tableData.select(not(...groupByFields));\n    }\n\n    return tableData;\n  }, [data, groupBy, splitBy, measures, sortBy, delta, groupByKey]);\n\n  return chartData;\n};\n"],"names":["useData","data","groupBy","measures","sortBy","splitBy","delta","groupByKey","getGroupKey","chartData","useMemo","tableData","internal","ColumnTable","Array","isArray","from","table","groupByFields","splitByFields","measuresFields","getAgFunc","reduce","acc","value","field","agFunction","agg","sortByFields","orderFunction","order","allFields","Object","keys","deltaExpression","curr","derive","select","length","groupby","pivot","rollup","expression","map","join","after","orderby","filter","key","includes","desc","not"],"mappings":"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"}

package/dist/esm/hooks/useGrid.js

@@ -3,7 +3,9 @@ const useGrid = ({
   top,
   left,
   right,
-  bottom
+  bottom,
+  width,
+  height
 }) => {
   const option = useMemo(() => {
     return {
@@ -20,10 +22,16 @@ const useGrid = ({
         },
         ...right != null && {
           right
+        },
+        ...width != null && {
+          width
+        },
+        ...height != null && {
+          height
         }
       }
     };
-  }, [top, left, right, bottom]);
+  }, [top, left, right, bottom, height, width]);
   return option;
 };
 export {

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}\n\nexport const useGrid = ({ top, left, right, bottom }: 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      },\n    };\n  }, [top, left, right, bottom]);\n\n  return option;\n};\n"],"names":["useGrid","top","left","right","bottom","option","useMemo","grid"],"mappings":";AAaO,MAAMA,UAAUA,CAAC;AAAA,EAAEC;AAAAA,EAAKC;AAAAA,EAAMC;AAAAA,EAAOC;AAAwB,MAAM;AAClEC,QAAAA,SAASC,QAAqC,MAAM;AACjD,WAAA;AAAA;AAAA,MAELC,MAAM;AAAA,QACJ,GAAIN,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,MACF;AAAA,IAAA;AAAA,KAED,CAACF,KAAKC,MAAMC,OAAOC,MAAM,CAAC;AAEtBC,SAAAA;AACT;"}
+{"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;"}

package/dist/esm/hooks/useVisualMap.js

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { getLegendIcon } from "../utils/getLegendIcon.js";
+const useVisualMap = ({
+  show = true,
+  direction = "horizontal",
+  type = "continuous",
+  pieces,
+  max,
+  min,
+  colorScale,
+  position: positionProp
+}) => {
+  const option = useMemo(() => {
+    return {
+      visualMap: {
+        type,
+        show,
+        ...pieces && {
+          pieces
+        },
+        ...type === "piecewise" && {
+          itemSymbol: getLegendIcon("square"),
+          itemGap: 20,
+          itemHeight: 16,
+          itemWidth: 16
+        },
+        ...colorScale && {
+          max,
+          min,
+          inRange: {
+            color: colorScale
+          }
+        },
+        orient: direction,
+        top: (positionProp == null ? void 0 : positionProp.y) || "top",
+        left: (positionProp == null ? void 0 : positionProp.x) || "center"
+      }
+    };
+  }, [colorScale, direction, max, min, pieces, positionProp == null ? void 0 : positionProp.x, positionProp == null ? void 0 : positionProp.y, show, type]);
+  return option;
+};
+export {
+  useVisualMap
+};
+//# sourceMappingURL=useVisualMap.js.map

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

@@ -0,0 +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;"}

package/dist/esm/hooks/useXAxis.js

@@ -1,26 +1,58 @@
 import { useMemo } from "react";
+import { useTheme } from "@hitachivantara/uikit-react-core";
 import { getAxisType } from "../utils/getAxisType.js";
 const useXAxis = ({
-  xAxis,
-  defaultType = "categorical",
-  scale = false
+  id,
+  type = "categorical",
+  labelFormatter,
+  labelRotation,
+  name,
+  maxValue,
+  minValue,
+  scale = false,
+  data,
+  position,
+  nameProps
 }) => {
+  const {
+    activeTheme,
+    selectedMode
+  } = useTheme();
   const option = useMemo(() => {
+    const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
+    const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
+      return {
+        ...acc,
+        [curr]: curr === "color" ? (activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode][nameProps[curr]]) || nameProps[curr] : nameProps[curr]
+      };
+    }, {}) : void 0;
     return {
       xAxis: {
-        id: xAxis == null ? void 0 : xAxis.id,
-        type: getAxisType(xAxis == null ? void 0 : xAxis.type) ?? getAxisType(defaultType),
-        name: xAxis == null ? void 0 : xAxis.name,
+        id,
+        type: getAxisType(type),
+        name,
         scale,
         axisLabel: {
-          rotate: (xAxis == null ? void 0 : xAxis.labelRotation) ?? 0,
-          formatter: xAxis == null ? void 0 : xAxis.labelFormatter
+          rotate: labelRotation ?? 0,
+          formatter: labelFormatter
         },
-        max: (xAxis == null ? void 0 : xAxis.maxValue) === "max" ? "dataMax" : xAxis == null ? void 0 : xAxis.maxValue,
-        min: (xAxis == null ? void 0 : xAxis.minValue) === "min" ? "dataMin" : xAxis == null ? void 0 : xAxis.minValue
+        max: maxValue === "max" ? "dataMax" : maxValue,
+        min: minValue === "min" ? "dataMin" : minValue,
+        ...(nameProps == null ? void 0 : nameProps.location) && {
+          nameLocation: nameProps.location
+        },
+        ...nameStyle && {
+          nameTextStyle: nameStyle
+        },
+        ...data && {
+          data
+        },
+        ...position && {
+          position
+        }
       }
     };
-  }, [xAxis, scale, defaultType]);
+  }, [nameProps, id, type, name, scale, labelRotation, labelFormatter, maxValue, minValue, data, position, activeTheme == null ? void 0 : activeTheme.colors.modes, selectedMode]);
   return option;
 };
 export {

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 { getAxisType } from \"@viz/utils\";\nimport { HvAxisChartCommonProps } from \"@viz/types/common\";\nimport { HvChartAxisType } from \"@viz/types\";\n\ninterface HvXAxisHookProps {\n  xAxis: HvAxisChartCommonProps[\"xAxis\"];\n  defaultType?: HvChartAxisType;\n  scale?: boolean;\n}\n\nexport const useXAxis = ({\n  xAxis,\n  defaultType = \"categorical\",\n  scale = false,\n}: HvXAxisHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"xAxis\">>(() => {\n    return {\n      xAxis: {\n        id: xAxis?.id,\n        type: getAxisType(xAxis?.type) ?? getAxisType(defaultType),\n        name: xAxis?.name,\n        scale,\n        axisLabel: {\n          rotate: xAxis?.labelRotation ?? 0,\n          formatter: xAxis?.labelFormatter,\n        },\n        max: xAxis?.maxValue === \"max\" ? \"dataMax\" : xAxis?.maxValue,\n        min: xAxis?.minValue === \"min\" ? \"dataMin\" : xAxis?.minValue,\n      },\n    };\n  }, [xAxis, scale, defaultType]);\n\n  return option;\n};\n"],"names":["useXAxis","xAxis","defaultType","scale","option","useMemo","id","type","getAxisType","name","axisLabel","rotate","labelRotation","formatter","labelFormatter","max","maxValue","min","minValue"],"mappings":";;AAcO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AAAA,EACdC,QAAQ;AACQ,MAAM;AAChBC,QAAAA,SAASC,QAAsC,MAAM;AAClD,WAAA;AAAA,MACLJ,OAAO;AAAA,QACLK,IAAIL,+BAAOK;AAAAA,QACXC,MAAMC,YAAYP,+BAAOM,IAAI,KAAKC,YAAYN,WAAW;AAAA,QACzDO,MAAMR,+BAAOQ;AAAAA,QACbN;AAAAA,QACAO,WAAW;AAAA,UACTC,SAAQV,+BAAOW,kBAAiB;AAAA,UAChCC,WAAWZ,+BAAOa;AAAAA,QACpB;AAAA,QACAC,MAAKd,+BAAOe,cAAa,QAAQ,YAAYf,+BAAOe;AAAAA,QACpDC,MAAKhB,+BAAOiB,cAAa,QAAQ,YAAYjB,+BAAOiB;AAAAA,MACtD;AAAA,IAAA;AAAA,EAED,GAAA,CAACjB,OAAOE,OAAOD,WAAW,CAAC;AAEvBE,SAAAA;AACT;"}
+{"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 { activeTheme, selectedMode } = 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                  ? activeTheme?.colors.modes[selectedMode][\n                      nameProps[curr] as string\n                    ] || 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    activeTheme?.colors.modes,\n    selectedMode,\n  ]);\n\n  return option;\n};\n"],"names":["useXAxis","id","type","labelFormatter","labelRotation","name","maxValue","minValue","scale","data","position","nameProps","activeTheme","selectedMode","useTheme","option","useMemo","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","colors","modes","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,IAAaC;AAAAA,MAAiBC,SAAS;AAEzCC,QAAAA,SAASC,QAAsC,MAAM;AACnDC,UAAAA,gBAAgBN,YAClBO,OAAOC,KAAKR,SAAS,EAAES,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJZ,aAAaM,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,WACLd,2CAAae,OAAOC,MAAMf,cACxBF,UAAUe,IAAI,OACXf,UAAUe,IAAI,IACnBf,UAAUe,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLO,OAAO;AAAA,QACL5B;AAAAA,QACAC,MAAM4B,YAAY5B,IAAI;AAAA,QACtBG;AAAAA,QACAG;AAAAA,QACAuB,WAAW;AAAA,UACTC,QAAQ5B,iBAAiB;AAAA,UACzB6B,WAAW9B;AAAAA,QACb;AAAA,QACA+B,KAAK5B,aAAa,QAAQ,YAAYA;AAAAA,QACtC6B,KAAK5B,aAAa,QAAQ,YAAYA;AAAAA,QACtC,IAAII,uCAAWyB,aAAY;AAAA,UACzBC,cAAc1B,UAAUyB;AAAAA,QAC1B;AAAA,QACA,GAAIb,aAAa;AAAA,UACfe,eAAef;AAAAA,QACjB;AAAA,QACA,GAAId,QAAQ;AAAA,UAAEA;AAAAA,QAAK;AAAA,QACnB,GAAIC,YAAY;AAAA,UAAEA;AAAAA,QAAS;AAAA,MAC7B;AAAA,IAAA;AAAA,EACF,GACC,CACDC,WACAV,IACAC,MACAG,MACAG,OACAJ,eACAD,gBACAG,UACAC,UACAE,MACAC,UACAE,2CAAae,OAAOC,OACpBf,YAAY,CACb;AAEME,SAAAA;AACT;"}

package/dist/esm/hooks/useYAxis.js

@@ -1,39 +1,62 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
+import { useTheme } from "@hitachivantara/uikit-react-core";
 import { getAxisType } from "../utils/getAxisType.js";
 const useYAxis = ({
-  yAxis,
+  axes,
   defaultType = "continuous"
 }) => {
-  const option = useMemo(() => {
-    if (!yAxis || !Array.isArray(yAxis)) {
+  const {
+    activeTheme,
+    selectedMode
+  } = useTheme();
+  const createAxis = useCallback(({
+    id,
+    type,
+    name,
+    labelFormatter,
+    labelRotation,
+    maxValue,
+    minValue,
+    nameProps,
+    data,
+    position
+  }) => {
+    const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
+    const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
       return {
-        yAxis: {
-          id: yAxis == null ? void 0 : yAxis.id,
-          type: getAxisType(yAxis == null ? void 0 : yAxis.type) ?? getAxisType(defaultType),
-          name: yAxis == null ? void 0 : yAxis.name,
-          axisLabel: {
-            rotate: (yAxis == null ? void 0 : yAxis.labelRotation) ?? 0,
-            formatter: yAxis == null ? void 0 : yAxis.labelFormatter
-          },
-          max: (yAxis == null ? void 0 : yAxis.maxValue) === "max" ? "dataMax" : yAxis == null ? void 0 : yAxis.maxValue,
-          min: (yAxis == null ? void 0 : yAxis.minValue) === "min" ? "dataMin" : yAxis == null ? void 0 : yAxis.minValue
-        }
+        ...acc,
+        [curr]: curr === "color" ? (activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode][nameProps[curr]]) || nameProps[curr] : nameProps[curr]
       };
-    }
+    }, {}) : void 0;
+    return {
+      id,
+      type: getAxisType(type) ?? getAxisType(defaultType),
+      name,
+      axisLabel: {
+        rotate: labelRotation ?? 0,
+        formatter: labelFormatter
+      },
+      max: maxValue === "max" ? "dataMax" : maxValue,
+      min: minValue === "min" ? "dataMin" : minValue,
+      ...(nameProps == null ? void 0 : nameProps.location) && {
+        nameLocation: nameProps == null ? void 0 : nameProps.location
+      },
+      ...nameStyle && {
+        nameTextStyle: nameStyle
+      },
+      ...data && {
+        data
+      },
+      ...position && {
+        position
+      }
+    };
+  }, [activeTheme == null ? void 0 : activeTheme.colors.modes, defaultType, selectedMode]);
+  const option = useMemo(() => {
     return {
-      yAxis: yAxis.map((axis) => ({
-        id: axis == null ? void 0 : axis.id,
-        type: getAxisType(axis == null ? void 0 : axis.type) ?? "value",
-        name: axis == null ? void 0 : axis.name,
-        axisLabel: {
-          rotate: (axis == null ? void 0 : axis.labelRotation) ?? 0,
-          formatter: axis == null ? void 0 : axis.labelFormatter
-        },
-        max: (axis == null ? void 0 : axis.maxValue) === "max" ? "dataMax" : axis == null ? void 0 : axis.maxValue,
-        min: (axis == null ? void 0 : axis.minValue) === "min" ? "dataMin" : axis == null ? void 0 : axis.minValue
-      }))
+      yAxis: Array.isArray(axes) ? axes.map((axis) => createAxis(axis)) : createAxis({})
     };
-  }, [yAxis, defaultType]);
+  }, [axes, createAxis]);
   return option;
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"useYAxis.js","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\nimport type { YAXisComponentOption } from \"echarts/types/dist/echarts\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvAxisChartCommonProps } from \"@viz/types/common\";\nimport { HvChartAxisType } from \"@viz/types\";\n\ninterface HvYAxisHookProps {\n  yAxis: HvAxisChartCommonProps[\"yAxis\"];\n  defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n  yAxis,\n  defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"yAxis\">>(() => {\n    if (!yAxis || !Array.isArray(yAxis)) {\n      return {\n        yAxis: {\n          id: yAxis?.id,\n          type: getAxisType(yAxis?.type) ?? getAxisType(defaultType),\n          name: yAxis?.name,\n          axisLabel: {\n            rotate: yAxis?.labelRotation ?? 0,\n            formatter: yAxis?.labelFormatter,\n          },\n          max: yAxis?.maxValue === \"max\" ? \"dataMax\" : yAxis?.maxValue,\n          min: yAxis?.minValue === \"min\" ? \"dataMin\" : yAxis?.minValue,\n        },\n      };\n    }\n\n    return {\n      yAxis: yAxis.map<YAXisComponentOption>((axis) => ({\n        id: axis?.id,\n        type: getAxisType(axis?.type) ?? \"value\",\n        name: axis?.name,\n        axisLabel: {\n          rotate: axis?.labelRotation ?? 0,\n          formatter: axis?.labelFormatter,\n        },\n        max: axis?.maxValue === \"max\" ? \"dataMax\" : axis?.maxValue,\n        min: axis?.minValue === \"min\" ? \"dataMin\" : axis?.minValue,\n      })),\n    };\n  }, [yAxis, defaultType]);\n\n  return option;\n};\n"],"names":["useYAxis","yAxis","defaultType","option","useMemo","Array","isArray","id","type","getAxisType","name","axisLabel","rotate","labelRotation","formatter","labelFormatter","max","maxValue","min","minValue","map","axis"],"mappings":";;AAcO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AACE,MAAM;AAChBC,QAAAA,SAASC,QAAsC,MAAM;AACzD,QAAI,CAACH,SAAS,CAACI,MAAMC,QAAQL,KAAK,GAAG;AAC5B,aAAA;AAAA,QACLA,OAAO;AAAA,UACLM,IAAIN,+BAAOM;AAAAA,UACXC,MAAMC,YAAYR,+BAAOO,IAAI,KAAKC,YAAYP,WAAW;AAAA,UACzDQ,MAAMT,+BAAOS;AAAAA,UACbC,WAAW;AAAA,YACTC,SAAQX,+BAAOY,kBAAiB;AAAA,YAChCC,WAAWb,+BAAOc;AAAAA,UACpB;AAAA,UACAC,MAAKf,+BAAOgB,cAAa,QAAQ,YAAYhB,+BAAOgB;AAAAA,UACpDC,MAAKjB,+BAAOkB,cAAa,QAAQ,YAAYlB,+BAAOkB;AAAAA,QACtD;AAAA,MAAA;AAAA,IAEJ;AAEO,WAAA;AAAA,MACLlB,OAAOA,MAAMmB,IAA2BC,CAAU,UAAA;AAAA,QAChDd,IAAIc,6BAAMd;AAAAA,QACVC,MAAMC,YAAYY,6BAAMb,IAAI,KAAK;AAAA,QACjCE,MAAMW,6BAAMX;AAAAA,QACZC,WAAW;AAAA,UACTC,SAAQS,6BAAMR,kBAAiB;AAAA,UAC/BC,WAAWO,6BAAMN;AAAAA,QACnB;AAAA,QACAC,MAAKK,6BAAMJ,cAAa,QAAQ,YAAYI,6BAAMJ;AAAAA,QAClDC,MAAKG,6BAAMF,cAAa,QAAQ,YAAYE,6BAAMF;AAAAA,MAAAA,EAClD;AAAA,IAAA;AAAA,EACJ,GACC,CAAClB,OAAOC,WAAW,CAAC;AAEhBC,SAAAA;AACT;"}
+{"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 { activeTheme, selectedMode } = 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                    ? activeTheme?.colors.modes[selectedMode][\n                        nameProps[curr] as string\n                      ] || 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    [activeTheme?.colors.modes, defaultType, selectedMode]\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","activeTheme","selectedMode","useTheme","createAxis","useCallback","id","type","name","labelFormatter","labelRotation","maxValue","minValue","nameProps","data","position","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","colors","modes","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,IAAaC;AAAAA,MAAiBC,SAAS;AAEzCC,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,WACLxB,2CAAayB,OAAOC,MAAMzB,cACxBW,UAAUY,IAAI,OACXZ,UAAUY,IAAI,IACnBZ,UAAUY,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLf;AAAAA,MACAC,MAAMqB,YAAYrB,IAAI,KAAKqB,YAAY5B,WAAW;AAAA,MAClDQ;AAAAA,MACAqB,WAAW;AAAA,QACTC,QAAQpB,iBAAiB;AAAA,QACzBqB,WAAWtB;AAAAA,MACb;AAAA,MACAuB,KAAKrB,aAAa,QAAQ,YAAYA;AAAAA,MACtCsB,KAAKrB,aAAa,QAAQ,YAAYA;AAAAA,MACtC,IAAIC,uCAAWqB,aAAY;AAAA,QACzBC,cAActB,uCAAWqB;AAAAA,MAC3B;AAAA,MACA,GAAIZ,aAAa;AAAA,QACfc,eAAed;AAAAA,MACjB;AAAA,MACA,GAAIR,QAAQ;AAAA,QAAEA;AAAAA,MAAK;AAAA,MACnB,GAAIC,YAAY;AAAA,QAAEA;AAAAA,MAAS;AAAA,IAAA;AAAA,EAC7B,GAEF,CAACd,2CAAayB,OAAOC,OAAO3B,aAAaE,YAAY,CACvD;AAEMmC,QAAAA,SAASC,QAAsC,MAAM;AAClD,WAAA;AAAA,MACLC,OAAOC,MAAMC,QAAQ1C,IAAI,IACrBA,KAAK2C,IAAKC,CAASvC,SAAAA,WAAWuC,IAAI,CAAC,IACnCvC,WAAW,CAAA,CAAE;AAAA,IAAA;AAAA,EACnB,GACC,CAACL,MAAMK,UAAU,CAAC;AAEdiC,SAAAA;AACT;"}

package/dist/esm/index.js

@@ -1,9 +1,11 @@
 import { HvLineChart } from "./components/LineChart/LineChart.js";
 import { HvBarChart } from "./components/BarChart/BarChart.js";
 import { HvDonutChart } from "./components/DonutChart/DonutChart.js";
+import { HvConfusionMatrix } from "./components/ConfusionMatrix/ConfusionMatrix.js";
 import { HvVizContext, HvVizProvider } from "./providers/Provider.js";
 export {
   HvBarChart,
+  HvConfusionMatrix,
   HvDonutChart,
   HvLineChart,
   HvVizContext,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/esm/utils/registerTheme.js

@@ -8,7 +8,8 @@ const registerTheme = (name, mode, themeStructure) => {
   };
   const customAxis = {
     nameTextStyle: {
-      ...baseText
+      ...baseText,
+      color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].secondary_80
     },
     axisLine: {
       show: true,
@@ -76,6 +77,22 @@ const registerTheme = (name, mode, themeStructure) => {
       lineStyle: {
         width: 2
       }
+    },
+    visualMap: {
+      textStyle: {
+        ...baseText
+      }
+    },
+    heatmap: {
+      label: {
+        fontWeight: baseText.fontWeight,
+        fontSize: baseText.fontSize,
+        fontFamily: baseText.fontFamily
+      },
+      itemStyle: {
+        borderColor: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].atmo3,
+        borderWidth: 1
+      }
     }
   });
 };

package/dist/esm/utils/registerTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerTheme.js","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import { HvTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as echarts from \"echarts/core\";\n\nexport const registerTheme = (\n  name: string,\n  mode: string,\n  themeStructure?: HvTheme\n) => {\n  const baseText = {\n    color: themeStructure?.colors.modes[mode].secondary,\n    fontWeight: themeStructure?.fontWeights.normal,\n    fontSize: themeStructure?.fontSizes.sm,\n    fontFamily: themeStructure?.fontFamily.body,\n  };\n\n  const customAxis = {\n    nameTextStyle: {\n      ...baseText,\n    },\n    axisLine: {\n      show: true,\n      lineStyle: {\n        color: themeStructure?.colors.modes[mode].atmo3,\n      },\n    },\n    axisTick: {\n      show: true,\n      lineStyle: {\n        color: themeStructure?.colors.modes[mode].atmo3,\n      },\n    },\n    axisLabel: {\n      color: themeStructure?.colors.modes[mode].secondary_80,\n      fontWeight: themeStructure?.fontWeights.normal,\n      fontSize: themeStructure?.fontSizes.sm,\n      fontFamily: themeStructure?.fontFamily.body,\n    },\n    splitLine: {\n      show: true,\n      lineStyle: {\n        color: themeStructure?.colors.modes[mode].atmo3,\n      },\n    },\n  };\n\n  echarts.registerTheme(`${name}-${mode}`, {\n    color: [\n      themeStructure?.colors.modes[mode].cat1,\n      themeStructure?.colors.modes[mode].cat2,\n      themeStructure?.colors.modes[mode].cat3,\n      themeStructure?.colors.modes[mode].cat4,\n      themeStructure?.colors.modes[mode].cat5,\n      themeStructure?.colors.modes[mode].cat6,\n      themeStructure?.colors.modes[mode].cat7,\n      themeStructure?.colors.modes[mode].cat8,\n      themeStructure?.colors.modes[mode].cat9,\n      themeStructure?.colors.modes[mode].cat10,\n      themeStructure?.colors.modes[mode].cat11,\n      themeStructure?.colors.modes[mode].cat12,\n    ],\n    legend: {\n      textStyle: {\n        ...baseText,\n      },\n    },\n    tooltip: {\n      borderWidth: 0,\n      padding: 0,\n      textStyle: {\n        ...baseText,\n      },\n      axisPointer: {\n        lineStyle: {\n          color: themeStructure?.colors.modes[mode].secondary,\n          width: 1,\n        },\n      },\n    },\n    dataZoom: {\n      textStyle: { ...baseText },\n    },\n    categoryAxis: {\n      ...customAxis,\n    },\n    valueAxis: {\n      ...customAxis,\n    },\n    logAxis: {\n      ...customAxis,\n    },\n    timeAxis: {\n      ...customAxis,\n    },\n    line: {\n      lineStyle: {\n        width: 2,\n      },\n    },\n  });\n};\n"],"names":["registerTheme","name","mode","themeStructure","baseText","color","colors","modes","secondary","fontWeight","fontWeights","normal","fontSize","fontSizes","sm","fontFamily","body","customAxis","nameTextStyle","axisLine","show","lineStyle","atmo3","axisTick","axisLabel","secondary_80","splitLine","cat1","cat2","cat3","cat4","cat5","cat6","cat7","cat8","cat9","cat10","cat11","cat12","legend","textStyle","tooltip","borderWidth","padding","axisPointer","width","dataZoom","categoryAxis","valueAxis","logAxis","timeAxis","line"],"mappings":";AAGO,MAAMA,gBAAgBA,CAC3BC,MACAC,MACAC,mBACG;AACH,QAAMC,WAAW;AAAA,IACfC,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMM;AAAAA,IAC1CC,YAAYN,iDAAgBO,YAAYC;AAAAA,IACxCC,UAAUT,iDAAgBU,UAAUC;AAAAA,IACpCC,YAAYZ,iDAAgBY,WAAWC;AAAAA,EAAAA;AAGzC,QAAMC,aAAa;AAAA,IACjBC,eAAe;AAAA,MACb,GAAGd;AAAAA,IACL;AAAA,IACAe,UAAU;AAAA,MACRC,MAAM;AAAA,MACNC,WAAW;AAAA,QACThB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMoB;AAAAA,MAC5C;AAAA,IACF;AAAA,IACAC,UAAU;AAAA,MACRH,MAAM;AAAA,MACNC,WAAW;AAAA,QACThB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMoB;AAAAA,MAC5C;AAAA,IACF;AAAA,IACAE,WAAW;AAAA,MACTnB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMuB;AAAAA,MAC1ChB,YAAYN,iDAAgBO,YAAYC;AAAAA,MACxCC,UAAUT,iDAAgBU,UAAUC;AAAAA,MACpCC,YAAYZ,iDAAgBY,WAAWC;AAAAA,IACzC;AAAA,IACAU,WAAW;AAAA,MACTN,MAAM;AAAA,MACNC,WAAW;AAAA,QACThB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMoB;AAAAA,MAC5C;AAAA,IACF;AAAA,EAAA;AAGMtB,UAAAA,cAAe,GAAEC,QAAQC,QAAQ;AAAA,IACvCG,OAAO,CACLF,iDAAgBG,OAAOC,MAAML,MAAMyB,MACnCxB,iDAAgBG,OAAOC,MAAML,MAAM0B,MACnCzB,iDAAgBG,OAAOC,MAAML,MAAM2B,MACnC1B,iDAAgBG,OAAOC,MAAML,MAAM4B,MACnC3B,iDAAgBG,OAAOC,MAAML,MAAM6B,MACnC5B,iDAAgBG,OAAOC,MAAML,MAAM8B,MACnC7B,iDAAgBG,OAAOC,MAAML,MAAM+B,MACnC9B,iDAAgBG,OAAOC,MAAML,MAAMgC,MACnC/B,iDAAgBG,OAAOC,MAAML,MAAMiC,MACnChC,iDAAgBG,OAAOC,MAAML,MAAMkC,OACnCjC,iDAAgBG,OAAOC,MAAML,MAAMmC,OACnClC,iDAAgBG,OAAOC,MAAML,MAAMoC,KAAK;AAAA,IAE1CC,QAAQ;AAAA,MACNC,WAAW;AAAA,QACT,GAAGpC;AAAAA,MACL;AAAA,IACF;AAAA,IACAqC,SAAS;AAAA,MACPC,aAAa;AAAA,MACbC,SAAS;AAAA,MACTH,WAAW;AAAA,QACT,GAAGpC;AAAAA,MACL;AAAA,MACAwC,aAAa;AAAA,QACXvB,WAAW;AAAA,UACThB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMM;AAAAA,UAC1CqC,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACAC,UAAU;AAAA,MACRN,WAAW;AAAA,QAAE,GAAGpC;AAAAA,MAAS;AAAA,IAC3B;AAAA,IACA2C,cAAc;AAAA,MACZ,GAAG9B;AAAAA,IACL;AAAA,IACA+B,WAAW;AAAA,MACT,GAAG/B;AAAAA,IACL;AAAA,IACAgC,SAAS;AAAA,MACP,GAAGhC;AAAAA,IACL;AAAA,IACAiC,UAAU;AAAA,MACR,GAAGjC;AAAAA,IACL;AAAA,IACAkC,MAAM;AAAA,MACJ9B,WAAW;AAAA,QACTwB,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"registerTheme.js","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import { HvTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as echarts from \"echarts/core\";\n\nexport const registerTheme = (\n  name: string,\n  mode: string,\n  themeStructure?: HvTheme\n) => {\n  const baseText = {\n    color: themeStructure?.colors.modes[mode].secondary,\n    fontWeight: themeStructure?.fontWeights.normal,\n    fontSize: themeStructure?.fontSizes.sm,\n    fontFamily: themeStructure?.fontFamily.body,\n  };\n\n  const customAxis = {\n    nameTextStyle: {\n      ...baseText,\n      color: themeStructure?.colors.modes[mode].secondary_80,\n    },\n    axisLine: {\n      show: true,\n      lineStyle: {\n        color: themeStructure?.colors.modes[mode].atmo3,\n      },\n    },\n    axisTick: {\n      show: true,\n      lineStyle: {\n        color: themeStructure?.colors.modes[mode].atmo3,\n      },\n    },\n    axisLabel: {\n      color: themeStructure?.colors.modes[mode].secondary_80,\n      fontWeight: themeStructure?.fontWeights.normal,\n      fontSize: themeStructure?.fontSizes.sm,\n      fontFamily: themeStructure?.fontFamily.body,\n    },\n    splitLine: {\n      show: true,\n      lineStyle: {\n        color: themeStructure?.colors.modes[mode].atmo3,\n      },\n    },\n  };\n\n  echarts.registerTheme(`${name}-${mode}`, {\n    color: [\n      themeStructure?.colors.modes[mode].cat1,\n      themeStructure?.colors.modes[mode].cat2,\n      themeStructure?.colors.modes[mode].cat3,\n      themeStructure?.colors.modes[mode].cat4,\n      themeStructure?.colors.modes[mode].cat5,\n      themeStructure?.colors.modes[mode].cat6,\n      themeStructure?.colors.modes[mode].cat7,\n      themeStructure?.colors.modes[mode].cat8,\n      themeStructure?.colors.modes[mode].cat9,\n      themeStructure?.colors.modes[mode].cat10,\n      themeStructure?.colors.modes[mode].cat11,\n      themeStructure?.colors.modes[mode].cat12,\n    ],\n    legend: {\n      textStyle: {\n        ...baseText,\n      },\n    },\n    tooltip: {\n      borderWidth: 0,\n      padding: 0,\n      textStyle: {\n        ...baseText,\n      },\n      axisPointer: {\n        lineStyle: {\n          color: themeStructure?.colors.modes[mode].secondary,\n          width: 1,\n        },\n      },\n    },\n    dataZoom: {\n      textStyle: { ...baseText },\n    },\n    categoryAxis: {\n      ...customAxis,\n    },\n    valueAxis: {\n      ...customAxis,\n    },\n    logAxis: {\n      ...customAxis,\n    },\n    timeAxis: {\n      ...customAxis,\n    },\n    line: {\n      lineStyle: {\n        width: 2,\n      },\n    },\n    visualMap: {\n      textStyle: {\n        ...baseText,\n      },\n    },\n    heatmap: {\n      label: {\n        fontWeight: baseText.fontWeight,\n        fontSize: baseText.fontSize,\n        fontFamily: baseText.fontFamily,\n      },\n      itemStyle: {\n        borderColor: themeStructure?.colors.modes[mode].atmo3,\n        borderWidth: 1,\n      },\n    },\n  });\n};\n"],"names":["registerTheme","name","mode","themeStructure","baseText","color","colors","modes","secondary","fontWeight","fontWeights","normal","fontSize","fontSizes","sm","fontFamily","body","customAxis","nameTextStyle","secondary_80","axisLine","show","lineStyle","atmo3","axisTick","axisLabel","splitLine","cat1","cat2","cat3","cat4","cat5","cat6","cat7","cat8","cat9","cat10","cat11","cat12","legend","textStyle","tooltip","borderWidth","padding","axisPointer","width","dataZoom","categoryAxis","valueAxis","logAxis","timeAxis","line","visualMap","heatmap","label","itemStyle","borderColor"],"mappings":";AAGO,MAAMA,gBAAgBA,CAC3BC,MACAC,MACAC,mBACG;AACH,QAAMC,WAAW;AAAA,IACfC,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMM;AAAAA,IAC1CC,YAAYN,iDAAgBO,YAAYC;AAAAA,IACxCC,UAAUT,iDAAgBU,UAAUC;AAAAA,IACpCC,YAAYZ,iDAAgBY,WAAWC;AAAAA,EAAAA;AAGzC,QAAMC,aAAa;AAAA,IACjBC,eAAe;AAAA,MACb,GAAGd;AAAAA,MACHC,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMiB;AAAAA,IAC5C;AAAA,IACAC,UAAU;AAAA,MACRC,MAAM;AAAA,MACNC,WAAW;AAAA,QACTjB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMqB;AAAAA,MAC5C;AAAA,IACF;AAAA,IACAC,UAAU;AAAA,MACRH,MAAM;AAAA,MACNC,WAAW;AAAA,QACTjB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMqB;AAAAA,MAC5C;AAAA,IACF;AAAA,IACAE,WAAW;AAAA,MACTpB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMiB;AAAAA,MAC1CV,YAAYN,iDAAgBO,YAAYC;AAAAA,MACxCC,UAAUT,iDAAgBU,UAAUC;AAAAA,MACpCC,YAAYZ,iDAAgBY,WAAWC;AAAAA,IACzC;AAAA,IACAU,WAAW;AAAA,MACTL,MAAM;AAAA,MACNC,WAAW;AAAA,QACTjB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMqB;AAAAA,MAC5C;AAAA,IACF;AAAA,EAAA;AAGMvB,UAAAA,cAAe,GAAEC,QAAQC,QAAQ;AAAA,IACvCG,OAAO,CACLF,iDAAgBG,OAAOC,MAAML,MAAMyB,MACnCxB,iDAAgBG,OAAOC,MAAML,MAAM0B,MACnCzB,iDAAgBG,OAAOC,MAAML,MAAM2B,MACnC1B,iDAAgBG,OAAOC,MAAML,MAAM4B,MACnC3B,iDAAgBG,OAAOC,MAAML,MAAM6B,MACnC5B,iDAAgBG,OAAOC,MAAML,MAAM8B,MACnC7B,iDAAgBG,OAAOC,MAAML,MAAM+B,MACnC9B,iDAAgBG,OAAOC,MAAML,MAAMgC,MACnC/B,iDAAgBG,OAAOC,MAAML,MAAMiC,MACnChC,iDAAgBG,OAAOC,MAAML,MAAMkC,OACnCjC,iDAAgBG,OAAOC,MAAML,MAAMmC,OACnClC,iDAAgBG,OAAOC,MAAML,MAAMoC,KAAK;AAAA,IAE1CC,QAAQ;AAAA,MACNC,WAAW;AAAA,QACT,GAAGpC;AAAAA,MACL;AAAA,IACF;AAAA,IACAqC,SAAS;AAAA,MACPC,aAAa;AAAA,MACbC,SAAS;AAAA,MACTH,WAAW;AAAA,QACT,GAAGpC;AAAAA,MACL;AAAA,MACAwC,aAAa;AAAA,QACXtB,WAAW;AAAA,UACTjB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMM;AAAAA,UAC1CqC,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACAC,UAAU;AAAA,MACRN,WAAW;AAAA,QAAE,GAAGpC;AAAAA,MAAS;AAAA,IAC3B;AAAA,IACA2C,cAAc;AAAA,MACZ,GAAG9B;AAAAA,IACL;AAAA,IACA+B,WAAW;AAAA,MACT,GAAG/B;AAAAA,IACL;AAAA,IACAgC,SAAS;AAAA,MACP,GAAGhC;AAAAA,IACL;AAAA,IACAiC,UAAU;AAAA,MACR,GAAGjC;AAAAA,IACL;AAAA,IACAkC,MAAM;AAAA,MACJ7B,WAAW;AAAA,QACTuB,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACAO,WAAW;AAAA,MACTZ,WAAW;AAAA,QACT,GAAGpC;AAAAA,MACL;AAAA,IACF;AAAA,IACAiD,SAAS;AAAA,MACPC,OAAO;AAAA,QACL7C,YAAYL,SAASK;AAAAA,QACrBG,UAAUR,SAASQ;AAAAA,QACnBG,YAAYX,SAASW;AAAAA,MACvB;AAAA,MACAwC,WAAW;AAAA,QACTC,aAAarD,iDAAgBG,OAAOC,MAAML,MAAMqB;AAAAA,QAChDmB,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EAAA,CACD;AACH;"}