@hitachivantara/uikit-react-viz 6.1.6 → 6.1.7

package/dist/providers/Provider.js

@@ -1,24 +1,44 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, useMemo, useContext } from "react";
-import { useTheme } from "@hitachivantara/uikit-react-utils";
 import { registerTheme } from "../utils/registerTheme.js";
-const HvVizContext = createContext({
-  theme: void 0
-});
-const HvVizProvider = ({ children }) => {
-  const { activeTheme, selectedMode } = useTheme();
-  const value = useMemo(() => {
-    const themeName = `${activeTheme?.name}-${selectedMode}`;
-    registerTheme(themeName, selectedMode, activeTheme);
-    return { theme: themeName, activeTheme };
-  }, [selectedMode, activeTheme]);
-  return /* @__PURE__ */ jsx(HvVizContext.Provider, { value, children });
-};
-const useVizTheme = () => {
-  return useContext(HvVizContext);
+import { createContext, useContext, useMemo } from "react";
+import { useTheme } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/providers/Provider.tsx
+var HvVizContext = createContext({ theme: void 0 });
+/**
+* Enables theming capabilities for visualizations.
+*
+* Without this provider the visualizations will not comply to the UI Kit themes.
+*
+* This provider should always be used in combination with the `HvProvider` from
+* the core package since the former uses the themes provided by the latter.
+*
+* `HvVizProvider` should always be used after `HvProvider` like so to work properly:
+*
+* ```
+* <HvProvider>
+*    <HvVizProvider>
+*        (...)
+*    </HvVizProvider>
+* </HvProvider>
+* ```
+*/
+var HvVizProvider = ({ children }) => {
+	const { activeTheme, selectedMode } = useTheme();
+	const value = useMemo(() => {
+		const themeName = `${activeTheme?.name}-${selectedMode}`;
+		registerTheme(themeName, selectedMode, activeTheme);
+		return {
+			theme: themeName,
+			activeTheme
+		};
+	}, [selectedMode, activeTheme]);
+	return /* @__PURE__ */ jsx(HvVizContext.Provider, {
+		value,
+		children
+	});
 };
-export {
-  HvVizContext,
-  HvVizProvider,
-  useVizTheme
+var useVizTheme = () => {
+	return useContext(HvVizContext);
 };
+//#endregion
+export { HvVizContext, HvVizProvider, useVizTheme };

package/dist/utils/index.js

@@ -1,193 +1,127 @@
-import { internal, from, table } from "arquero";
-const getAxisType = (type) => {
-  switch (type) {
-    case "categorical":
-      return "category";
-    case "time":
-      return "time";
-    case "continuous":
-      return "value";
-    default:
-      return void 0;
-  }
+import { from, internal, table } from "arquero";
+//#region src/utils/index.ts
+var getAxisType = (type) => {
+	switch (type) {
+		case "categorical": return "category";
+		case "time": return "time";
+		case "continuous": return "value";
+		default: return;
+	}
 };
-const getGroupKey = (groupBy) => Array.isArray(groupBy) ? groupBy.join("_") : groupBy;
-const getLegendIcon = (icon) => {
-  switch (icon) {
-    case "circle":
-      return "circle";
-    case "square":
-      return "path://M0,0L16,0L16,16L0,16L0,0Z";
-    case "line":
-    default:
-      return "path://M0,0L16,0L16,2L0,2Z";
-  }
+var getGroupKey = (groupBy) => Array.isArray(groupBy) ? groupBy.join("_") : groupBy;
+var getLegendIcon = (icon) => {
+	switch (icon) {
+		case "circle": return "circle";
+		case "square": return "path://M0,0L16,0L16,16L0,16L0,0Z";
+		default: return "path://M0,0L16,0L16,2L0,2Z";
+	}
 };
-const getMeasure = (name, mapping) => {
-  let measure;
-  let count = 0;
-  for (const key of Object.keys(mapping)) {
-    if (name.includes(key) && key.length >= count) {
-      count = key.length;
-      measure = mapping[key];
-    }
-  }
-  return measure ?? Object.values(mapping)[0];
+var getMeasure = (name, mapping) => {
+	let measure;
+	let count = 0;
+	for (const key of Object.keys(mapping)) if (name.includes(key) && key.length >= count) {
+		count = key.length;
+		measure = mapping[key];
+	}
+	return measure ?? Object.values(mapping)[0];
 };
-const getFilterFunction = (operation, field, value) => {
-  const valueArray = Array.isArray(value) ? value : [value];
-  if (valueArray.length === 0) return () => true;
-  switch (operation) {
-    case "is": {
-      return (row) => valueArray.includes(row[field]);
-    }
-    case "isNot": {
-      return (row) => !valueArray.includes(row[field]);
-    }
-    case "contains":
-      return (row) => {
-        let include = false;
-        for (const val of valueArray) {
-          if (String(row[field]).includes(String(val))) {
-            include = true;
-          }
-        }
-        return include;
-      };
-    case "notContains":
-      return (row) => {
-        let include = true;
-        for (const val of valueArray) {
-          if (String(row[field]).includes(String(val))) {
-            include = false;
-          }
-        }
-        return include;
-      };
-    case "greaterThan":
-      return (row) => {
-        let include = false;
-        for (const val of valueArray) {
-          if (row[field] > val) {
-            include = true;
-          }
-        }
-        return include;
-      };
-    case "greaterThanOrEqual":
-      return (row) => {
-        let include = false;
-        for (const val of valueArray) {
-          if (row[field] >= val) {
-            include = true;
-          }
-        }
-        return include;
-      };
-    case "lessThan":
-      return (row) => {
-        let include = false;
-        for (const val of valueArray) {
-          if (row[field] < val) {
-            include = true;
-          }
-        }
-        return include;
-      };
-    case "lessThanOrEqual":
-      return (row) => {
-        let include = false;
-        for (const val of valueArray) {
-          if (row[field] <= val) {
-            include = true;
-          }
-        }
-        return include;
-      };
-    case "between":
-      return (row) => row[field] >= valueArray[0] && row[field] <= valueArray[1];
-    case "ends":
-      return (row) => {
-        let include = false;
-        for (const val of valueArray) {
-          if (String(row[field]).endsWith(String(val))) {
-            include = true;
-          }
-        }
-        return include;
-      };
-    case "notEnds":
-      return (row) => {
-        let include = true;
-        for (const val of valueArray) {
-          if (String(row[field]).endsWith(String(val))) {
-            include = false;
-          }
-        }
-        return include;
-      };
-    case "starts":
-      return (row) => {
-        let include = false;
-        for (const val of valueArray) {
-          if (String(row[field]).startsWith(String(val))) {
-            include = true;
-          }
-        }
-        return include;
-      };
-    case "notStarts":
-      return (row) => {
-        let include = true;
-        for (const val of valueArray) {
-          if (String(row[field]).startsWith(String(val))) {
-            include = false;
-          }
-        }
-        return include;
-      };
-    default:
-      throw new Error("Unsupported operation");
-  }
+var getFilterFunction = (operation, field, value) => {
+	const valueArray = Array.isArray(value) ? value : [value];
+	if (valueArray.length === 0) return () => true;
+	switch (operation) {
+		case "is": return (row) => valueArray.includes(row[field]);
+		case "isNot": return (row) => !valueArray.includes(row[field]);
+		case "contains": return (row) => {
+			let include = false;
+			for (const val of valueArray) if (String(row[field]).includes(String(val))) include = true;
+			return include;
+		};
+		case "notContains": return (row) => {
+			let include = true;
+			for (const val of valueArray) if (String(row[field]).includes(String(val))) include = false;
+			return include;
+		};
+		case "greaterThan": return (row) => {
+			let include = false;
+			for (const val of valueArray) if (row[field] > val) include = true;
+			return include;
+		};
+		case "greaterThanOrEqual": return (row) => {
+			let include = false;
+			for (const val of valueArray) if (row[field] >= val) include = true;
+			return include;
+		};
+		case "lessThan": return (row) => {
+			let include = false;
+			for (const val of valueArray) if (row[field] < val) include = true;
+			return include;
+		};
+		case "lessThanOrEqual": return (row) => {
+			let include = false;
+			for (const val of valueArray) if (row[field] <= val) include = true;
+			return include;
+		};
+		case "between": return (row) => row[field] >= valueArray[0] && row[field] <= valueArray[1];
+		case "ends": return (row) => {
+			let include = false;
+			for (const val of valueArray) if (String(row[field]).endsWith(String(val))) include = true;
+			return include;
+		};
+		case "notEnds": return (row) => {
+			let include = true;
+			for (const val of valueArray) if (String(row[field]).endsWith(String(val))) include = false;
+			return include;
+		};
+		case "starts": return (row) => {
+			let include = false;
+			for (const val of valueArray) if (String(row[field]).startsWith(String(val))) include = true;
+			return include;
+		};
+		case "notStarts": return (row) => {
+			let include = true;
+			for (const val of valueArray) if (String(row[field]).startsWith(String(val))) include = false;
+			return include;
+		};
+		default: throw new Error("Unsupported operation");
+	}
 };
-const getHvArqueroCombinedFilters = (row, filters) => {
-  return filters.every((filter) => {
-    const { field, operation, value } = filter;
-    const filterFunction = Object.hasOwn(row, field) ? getFilterFunction(operation, field, value) : () => true;
-    return filterFunction(row);
-  });
+/**
+* Combine filter functions into a single function. Only rows that pass all filters will be included.
+* Should be used inside the `escape` function provided by Arquero.
+* */
+var getHvArqueroCombinedFilters = (row, filters) => {
+	return filters.every((filter) => {
+		const { field, operation, value } = filter;
+		return (Object.hasOwn(row, field) ? getFilterFunction(operation, field, value) : () => true)(row);
+	});
 };
-const normalizeColumnName = (string) => {
-  return string.replace(/[^a-zA-Z0-9]/g, "__");
+/**
+* Normalizes a column name by replacing all characters that are not letters or numbers by "__"
+*/
+var normalizeColumnName = (string) => {
+	return string.replace(/[^a-zA-Z0-9]/g, "__");
 };
-const processTableData = (data) => {
-  let tableData;
-  if (data instanceof internal.ColumnTable) {
-    tableData = data;
-  } else if (Array.isArray(data)) {
-    tableData = from(data);
-  } else {
-    tableData = table(data);
-  }
-  const nameMapping = {};
-  const reversedNameMapping = {};
-  for (const column of tableData.columnNames()) {
-    const normalizedName = normalizeColumnName(column);
-    nameMapping[column] = normalizedName;
-    reversedNameMapping[normalizedName] = column;
-  }
-  return {
-    data: tableData.select(nameMapping),
-    mapping: reversedNameMapping
-  };
-};
-export {
-  getAxisType,
-  getFilterFunction,
-  getGroupKey,
-  getHvArqueroCombinedFilters,
-  getLegendIcon,
-  getMeasure,
-  normalizeColumnName,
-  processTableData
+/**
+* Converts data to a arquero data table and normalizes the column names for data processing.
+* @param data Chart data
+* @returns Processed data and reversed columns mapping to switch the columns to their original name
+*/
+var processTableData = (data) => {
+	let tableData;
+	if (data instanceof internal.ColumnTable) tableData = data;
+	else if (Array.isArray(data)) tableData = from(data);
+	else tableData = table(data);
+	const nameMapping = {};
+	const reversedNameMapping = {};
+	for (const column of tableData.columnNames()) {
+		const normalizedName = normalizeColumnName(column);
+		nameMapping[column] = normalizedName;
+		reversedNameMapping[normalizedName] = column;
+	}
+	return {
+		data: tableData.select(nameMapping),
+		mapping: reversedNameMapping
+	};
 };
+//#endregion
+export { getAxisType, getGroupKey, getHvArqueroCombinedFilters, getLegendIcon, getMeasure, normalizeColumnName, processTableData };

package/dist/utils/registerTheme.js

@@ -1,124 +1,86 @@
 import * as echarts from "echarts/core";
-const registerTheme = (themeName, mode, themeStructure) => {
-  const colors = themeStructure?.colors[mode];
-  if (!colors) return;
-  const baseText = {
-    color: colors?.text,
-    fontWeight: themeStructure?.fontWeights.normal,
-    fontSize: themeStructure?.fontSizes.sm,
-    fontFamily: themeStructure?.fontFamily.body
-  };
-  const customAxis = {
-    nameTextStyle: {
-      ...baseText,
-      color: colors?.textSubtle
-    },
-    axisLine: {
-      show: true,
-      lineStyle: {
-        color: colors?.borderSubtle
-      }
-    },
-    axisTick: {
-      show: true,
-      lineStyle: {
-        color: colors?.borderSubtle
-      }
-    },
-    axisLabel: {
-      color: colors?.textSubtle,
-      fontWeight: themeStructure?.fontWeights.normal,
-      fontSize: themeStructure?.fontSizes.sm,
-      fontFamily: themeStructure?.fontFamily.body
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: colors?.borderSubtle
-      }
-    }
-  };
-  echarts.registerTheme(themeName, {
-    color: [
-      colors?.cat1,
-      colors?.cat2,
-      colors?.cat3,
-      colors?.cat4,
-      colors?.cat5,
-      colors?.cat6,
-      colors?.cat7,
-      colors?.cat8,
-      colors?.cat9,
-      colors?.cat10,
-      colors?.cat11,
-      colors?.cat12
-    ],
-    legend: {
-      textStyle: {
-        ...baseText
-      }
-    },
-    tooltip: {
-      borderWidth: 0,
-      padding: 0,
-      textStyle: {
-        ...baseText
-      },
-      axisPointer: {
-        lineStyle: {
-          color: colors?.text,
-          width: 1
-        }
-      }
-    },
-    dataZoom: {
-      textStyle: { ...baseText }
-    },
-    categoryAxis: {
-      ...customAxis
-    },
-    valueAxis: {
-      ...customAxis
-    },
-    logAxis: {
-      ...customAxis
-    },
-    timeAxis: {
-      ...customAxis
-    },
-    line: {
-      lineStyle: {
-        width: 2
-      }
-    },
-    visualMap: {
-      textStyle: {
-        ...baseText
-      }
-    },
-    heatmap: {
-      label: {
-        fontWeight: baseText.fontWeight,
-        fontSize: baseText.fontSize,
-        fontFamily: baseText.fontFamily
-      },
-      itemStyle: {
-        borderColor: colors?.borderSubtle,
-        borderWidth: 1
-      }
-    },
-    treemap: {
-      breadcrumb: {
-        itemStyle: {
-          color: colors?.text,
-          textStyle: {
-            color: colors?.bgContainer
-          }
-        }
-      }
-    }
-  });
-};
-export {
-  registerTheme
+//#region src/utils/registerTheme.ts
+var registerTheme = (themeName, mode, themeStructure) => {
+	const colors = themeStructure?.colors[mode];
+	if (!colors) return;
+	const baseText = {
+		color: colors?.text,
+		fontWeight: themeStructure?.fontWeights.normal,
+		fontSize: themeStructure?.fontSizes.sm,
+		fontFamily: themeStructure?.fontFamily.body
+	};
+	const customAxis = {
+		nameTextStyle: {
+			...baseText,
+			color: colors?.textSubtle
+		},
+		axisLine: {
+			show: true,
+			lineStyle: { color: colors?.borderSubtle }
+		},
+		axisTick: {
+			show: true,
+			lineStyle: { color: colors?.borderSubtle }
+		},
+		axisLabel: {
+			color: colors?.textSubtle,
+			fontWeight: themeStructure?.fontWeights.normal,
+			fontSize: themeStructure?.fontSizes.sm,
+			fontFamily: themeStructure?.fontFamily.body
+		},
+		splitLine: {
+			show: true,
+			lineStyle: { color: colors?.borderSubtle }
+		}
+	};
+	echarts.registerTheme(themeName, {
+		color: [
+			colors?.cat1,
+			colors?.cat2,
+			colors?.cat3,
+			colors?.cat4,
+			colors?.cat5,
+			colors?.cat6,
+			colors?.cat7,
+			colors?.cat8,
+			colors?.cat9,
+			colors?.cat10,
+			colors?.cat11,
+			colors?.cat12
+		],
+		legend: { textStyle: { ...baseText } },
+		tooltip: {
+			borderWidth: 0,
+			padding: 0,
+			textStyle: { ...baseText },
+			axisPointer: { lineStyle: {
+				color: colors?.text,
+				width: 1
+			} }
+		},
+		dataZoom: { textStyle: { ...baseText } },
+		categoryAxis: { ...customAxis },
+		valueAxis: { ...customAxis },
+		logAxis: { ...customAxis },
+		timeAxis: { ...customAxis },
+		line: { lineStyle: { width: 2 } },
+		visualMap: { textStyle: { ...baseText } },
+		heatmap: {
+			label: {
+				fontWeight: baseText.fontWeight,
+				fontSize: baseText.fontSize,
+				fontFamily: baseText.fontFamily
+			},
+			itemStyle: {
+				borderColor: colors?.borderSubtle,
+				borderWidth: 1
+			}
+		},
+		treemap: { breadcrumb: { itemStyle: {
+			color: colors?.text,
+			textStyle: { color: colors?.bgContainer }
+		} } }
+	});
 };
+//#endregion
+export { registerTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "6.1.6",
+  "version": "6.1.7",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -34,8 +34,8 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@hitachivantara/uikit-react-utils": "^6.2.2",
-    "@hitachivantara/uikit-styles": "^6.1.0"
+    "@hitachivantara/uikit-react-utils": "^6.2.3",
+    "@hitachivantara/uikit-styles": "^6.1.1"
   },
   "files": [
     "dist"
@@ -44,7 +44,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "f79885f320f5cdf5b438ef8b2e866965c9626ce7",
+  "gitHead": "65c4f4394e8f8c7cccb58203e1c08c6832434638",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",