@hitachivantara/uikit-react-viz 5.13.13 → 5.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Boxplot/Boxplot.styles.cjs +2 -2
- package/dist/cjs/ConfusionMatrix/ConfusionMatrix.styles.cjs +2 -2
- package/dist/cjs/ConfusionMatrix/utils.cjs +3 -3
- package/dist/cjs/Heatmap/Heatmap.cjs +2 -2
- package/dist/cjs/Heatmap/Heatmap.styles.cjs +2 -2
- package/dist/cjs/hooks/tooltip/styles.cjs +2 -2
- package/dist/cjs/hooks/useXAxis.cjs +2 -2
- package/dist/cjs/hooks/useYAxis.cjs +2 -2
- package/dist/cjs/providers/Provider.cjs +2 -2
- package/dist/esm/Boxplot/Boxplot.js.map +1 -1
- package/dist/esm/Boxplot/Boxplot.styles.js +1 -1
- package/dist/esm/Boxplot/Boxplot.styles.js.map +1 -1
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.js.map +1 -1
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.styles.js +1 -1
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.styles.js.map +1 -1
- package/dist/esm/ConfusionMatrix/utils.js +1 -1
- package/dist/esm/ConfusionMatrix/utils.js.map +1 -1
- package/dist/esm/Heatmap/Heatmap.js +1 -1
- package/dist/esm/Heatmap/Heatmap.js.map +1 -1
- package/dist/esm/Heatmap/Heatmap.styles.js +1 -1
- package/dist/esm/Heatmap/Heatmap.styles.js.map +1 -1
- package/dist/esm/hooks/tooltip/styles.js +1 -1
- package/dist/esm/hooks/tooltip/styles.js.map +1 -1
- package/dist/esm/hooks/tooltip/useTooltip.js.map +1 -1
- package/dist/esm/hooks/useXAxis.js +1 -1
- package/dist/esm/hooks/useXAxis.js.map +1 -1
- package/dist/esm/hooks/useYAxis.js +1 -1
- package/dist/esm/hooks/useYAxis.js.map +1 -1
- package/dist/esm/providers/Provider.js +1 -1
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/esm/utils/registerTheme.js.map +1 -1
- package/dist/types/index.d.ts +6 -19
- package/package.json +4 -4
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const { useClasses, staticClasses } =
|
|
5
|
+
const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBoxplot", {
|
|
6
6
|
tooltipRoot: {
|
|
7
7
|
backgroundColor: uikitStyles.theme.colors.atmo1,
|
|
8
8
|
width: "fit-content",
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const { useClasses, staticClasses } =
|
|
5
|
+
const { useClasses, staticClasses } = uikitReactUtils.createClasses(
|
|
6
6
|
"HvConfusionMatrix",
|
|
7
7
|
{
|
|
8
8
|
tooltipRoot: {
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const react = require("react");
|
|
4
|
-
const
|
|
4
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
5
5
|
const useColorScale = ({
|
|
6
6
|
data,
|
|
7
7
|
delta,
|
|
8
8
|
custom,
|
|
9
9
|
filterKey
|
|
10
10
|
}) => {
|
|
11
|
-
const { colors } =
|
|
11
|
+
const { colors } = uikitReactUtils.useTheme();
|
|
12
12
|
const colorScale = react.useMemo(() => {
|
|
13
13
|
if (custom == null && delta) {
|
|
14
14
|
return;
|
|
@@ -47,7 +47,7 @@ const useSeries = ({
|
|
|
47
47
|
delta,
|
|
48
48
|
valuesProps
|
|
49
49
|
}) => {
|
|
50
|
-
const { colors } =
|
|
50
|
+
const { colors } = uikitReactUtils.useTheme();
|
|
51
51
|
const getDeltaColor = react.useCallback(
|
|
52
52
|
(value, diagonal) => {
|
|
53
53
|
if (diagonal && value > 0 || !diagonal && value < 0) {
|
|
@@ -5,7 +5,7 @@ const react = require("react");
|
|
|
5
5
|
const charts = require("echarts/charts");
|
|
6
6
|
const components = require("echarts/components");
|
|
7
7
|
const echarts = require("echarts/core");
|
|
8
|
-
const
|
|
8
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
9
9
|
const Heatmap_styles = require("./Heatmap.styles.cjs");
|
|
10
10
|
const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
|
|
11
11
|
const useXAxis = require("../hooks/useXAxis.cjs");
|
|
@@ -50,7 +50,7 @@ const HvHeatmap = react.forwardRef(
|
|
|
50
50
|
...others
|
|
51
51
|
} = props;
|
|
52
52
|
const { classes } = Heatmap_styles.useClasses(classesProp);
|
|
53
|
-
const { colors } =
|
|
53
|
+
const { colors } = uikitReactUtils.useTheme();
|
|
54
54
|
const chartTooltip = useTooltip.useTooltip({
|
|
55
55
|
component: (params) => {
|
|
56
56
|
const value = params?.value;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const { useClasses, staticClasses } =
|
|
5
|
+
const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvHeatmap", {
|
|
6
6
|
tooltipRoot: {
|
|
7
7
|
backgroundColor: uikitStyles.theme.colors.atmo1,
|
|
8
8
|
width: "fit-content",
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
4
4
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
5
|
-
const { useClasses, staticClasses } =
|
|
5
|
+
const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvChartTooltip", {
|
|
6
6
|
/** Single tooltip styles */
|
|
7
7
|
singleTooltipRoot: {
|
|
8
8
|
width: "fit-content",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const react = require("react");
|
|
4
|
-
const
|
|
4
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
5
5
|
const index = require("../utils/index.cjs");
|
|
6
6
|
const useXAxis = ({
|
|
7
7
|
id,
|
|
@@ -16,7 +16,7 @@ const useXAxis = ({
|
|
|
16
16
|
position,
|
|
17
17
|
nameProps
|
|
18
18
|
}) => {
|
|
19
|
-
const { colors } =
|
|
19
|
+
const { colors } = uikitReactUtils.useTheme();
|
|
20
20
|
const option = react.useMemo(() => {
|
|
21
21
|
const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
|
|
22
22
|
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const react = require("react");
|
|
4
|
-
const
|
|
4
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
5
5
|
const index = require("../utils/index.cjs");
|
|
6
6
|
const useYAxis = ({
|
|
7
7
|
axes,
|
|
8
8
|
defaultType = "continuous"
|
|
9
9
|
}) => {
|
|
10
|
-
const { colors } =
|
|
10
|
+
const { colors } = uikitReactUtils.useTheme();
|
|
11
11
|
const createAxis = react.useCallback(
|
|
12
12
|
({
|
|
13
13
|
id,
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const react = require("react");
|
|
5
|
-
const
|
|
5
|
+
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
|
|
6
6
|
const registerTheme = require("../utils/registerTheme.cjs");
|
|
7
7
|
const HvVizContext = react.createContext({
|
|
8
8
|
theme: void 0
|
|
9
9
|
});
|
|
10
10
|
const HvVizProvider = ({ children }) => {
|
|
11
|
-
const { activeTheme, selectedMode, selectedTheme } =
|
|
11
|
+
const { activeTheme, selectedMode, selectedTheme } = uikitReactUtils.useTheme();
|
|
12
12
|
const value = react.useMemo(() => {
|
|
13
13
|
registerTheme.registerTheme(selectedTheme, selectedMode, activeTheme);
|
|
14
14
|
return { theme: `${selectedTheme}-${selectedMode}`, activeTheme };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Boxplot.js","sources":["../../../src/Boxplot/Boxplot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BoxplotChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { ExtractNames } from \"@hitachivantara/uikit-react-
|
|
1
|
+
{"version":3,"file":"Boxplot.js","sources":["../../../src/Boxplot/Boxplot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BoxplotChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n useGrid,\n useLegend,\n useOption,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvBoxplotMeasure, HvChartTooltip } from \"../types\";\nimport {\n Arrayable,\n HvAxisChartCommonProps,\n HvChartCommonProps,\n} from \"../types/common\";\nimport { useClasses } from \"./Boxplot.styles\";\nimport { useBoxplot } from \"./useBoxplot\";\n\n// Register chart components\necharts.use([BoxplotChart, TooltipComponent, VisualMapComponent]);\n\nexport type HvBoxplotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBoxplotProps\n extends Omit<\n HvAxisChartCommonProps,\n \"splitBy\" | \"horizontalRangeSlider\" | \"seriesNameFormatter\" | \"stack\"\n >,\n Omit<HvChartCommonProps, \"groupBy\" | \"sortBy\"> {\n /** The name of the heatmap */\n name?: string;\n /** Columns to measure on the chart. */\n measures: Arrayable<HvBoxplotMeasure>;\n /** Columns to use to group the data. */\n groupBy?: string;\n /** The tooltip options. */\n tooltip?: Omit<HvChartTooltip, \"type\" | \"valueFormatter\" | \"titleFormatter\">;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBoxplotClasses;\n}\n\n/**\n * A Boxplot chart visually summarizes the distribution of a dataset by depicting key statistical measures such as the median, quartiles, and outliers.\n */\nexport const HvBoxplot = forwardRef<ReactECharts, HvBoxplotProps>(\n (props, ref) => {\n const {\n name,\n data,\n xAxis,\n yAxis,\n grid,\n legend,\n measures,\n groupBy,\n tooltip,\n width,\n height,\n filters,\n classes: classesProp,\n onOptionChange,\n ...others\n } = props;\n\n const { classes } = useClasses(classesProp);\n\n const chartTooltip = useTooltip({\n component: (params) => {\n const title = params?.title;\n const upper = params?.value?.[5];\n const q3 = params?.value?.[4];\n const median = params?.value?.[3];\n const q1 = params?.value?.[2];\n const lower = params?.value?.[1];\n\n return `\n <div class=\"${classes.tooltipRoot}\">\n <div class=\"${classes.tooltipContainer}\">\n <div>\n <p class=\"${classes.tooltipText}\">${title}</p>\n <p class=\"${classes.tooltipText}\">Upper: ${upper}</p>\n <p class=\"${classes.tooltipText}\">Q3: ${q3}</p>\n <p class=\"${classes.tooltipText}\">Median: ${median}</p>\n <p class=\"${classes.tooltipText}\">Q1: ${q1}</p>\n <p class=\"${classes.tooltipText}\">Lower: ${lower}</p>\n </div>\n </div>\n </div>`;\n },\n ...tooltip,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartLegend = useLegend({\n ...legend,\n icon: \"square\",\n });\n\n const chartXAxis = useXAxis({\n ...xAxis,\n });\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n defaultType: \"continuous\",\n ...yAxis,\n });\n\n const chartBoxplot = useBoxplot({ data, groupBy, measures, filters });\n\n const chartOption = useOption({\n option: {\n ...chartBoxplot,\n ...chartGrid,\n ...chartLegend,\n ...chartTooltip,\n ...chartXAxis,\n ...chartYAxis,\n },\n });\n\n return (\n <HvBaseChart\n ref={ref}\n option={chartOption}\n width={width}\n height={height}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA0BA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAyBzD,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,UAAM,eAAe,WAAW;AAAA,MAC9B,WAAW,CAAC,WAAW;AACrB,cAAM,QAAQ,QAAQ;AAChB,cAAA,QAAQ,QAAQ,QAAQ,CAAC;AACzB,cAAA,KAAK,QAAQ,QAAQ,CAAC;AACtB,cAAA,SAAS,QAAQ,QAAQ,CAAC;AAC1B,cAAA,KAAK,QAAQ,QAAQ,CAAC;AACtB,cAAA,QAAQ,QAAQ,QAAQ,CAAC;AAExB,eAAA;AAAA,wBACS,QAAQ,WAAW;AAAA,0BACjB,QAAQ,gBAAgB;AAAA;AAAA,0BAExB,QAAQ,WAAW,KAAK,KAAK;AAAA,0BAC7B,QAAQ,WAAW,YAAY,KAAK;AAAA,0BACpC,QAAQ,WAAW,SAAS,EAAE;AAAA,0BAC9B,QAAQ,WAAW,aAAa,MAAM;AAAA,0BACtC,QAAQ,WAAW,SAAS,EAAE;AAAA,0BAC9B,QAAQ,WAAW,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA,MAIxD;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,MAAM;AAAA,IAAA,CACP;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa;AAAA,MACb,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,eAAe,WAAW,EAAE,MAAM,SAAS,UAAU,SAAS;AAEpE,UAAM,cAAc,UAAU;AAAA,MAC5B,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createClasses } from "@hitachivantara/uikit-react-
|
|
1
|
+
import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
2
2
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
3
|
const { useClasses, staticClasses } = createClasses("HvBoxplot", {
|
|
4
4
|
tooltipRoot: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Boxplot.styles.js","sources":["../../../src/Boxplot/Boxplot.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-
|
|
1
|
+
{"version":3,"file":"Boxplot.styles.js","sources":["../../../src/Boxplot/Boxplot.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBoxplot\", {\n tooltipRoot: {\n backgroundColor: theme.colors.atmo1,\n width: \"fit-content\",\n minWidth: 150,\n boxShadow: theme.colors.shadow,\n zIndex: theme.zIndices.sticky,\n },\n tooltipContainer: {\n padding: theme.spacing(\"15px\", \"sm\"),\n display: \"flex\",\n flexDirection: \"column\",\n },\n tooltipText: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,aAAa;AAAA,EACtE,aAAa;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,IACxB,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS,MAAM,QAAQ,QAAQ,IAAI;AAAA,IACnC,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa;AAAA,IACX,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfusionMatrix.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n GridComponent,\n TooltipComponent,\n VisualMapComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { ExtractNames } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvVisualMapHookProps,\n useData,\n useGrid,\n useOption,\n useTooltip,\n useVisualMap,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport {\n Arrayable,\n HvChartCommonProps,\n HvChartXAxis,\n HvChartYAxis,\n} from \"../types/common\";\nimport { HvConfusionMatrixMeasure } from \"../types/measures\";\nimport { HvChartTooltip } from \"../types/tooltip\";\nimport { getGroupKey } from \"../utils\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n HvConfusionMatrixColorScale,\n HvConfusionMatrixFormat,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\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 filters,\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 ...others\n } = props;\n\n const { classes } = useClasses(classesProp);\n\n const groupByKey = getGroupKey(groupBy);\n\n const { data: 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 filters,\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) as any,\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} {...others} />;\n});\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ConfusionMatrix.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n GridComponent,\n TooltipComponent,\n VisualMapComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvVisualMapHookProps,\n useData,\n useGrid,\n useOption,\n useTooltip,\n useVisualMap,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport {\n Arrayable,\n HvChartCommonProps,\n HvChartXAxis,\n HvChartYAxis,\n} from \"../types/common\";\nimport { HvConfusionMatrixMeasure } from \"../types/measures\";\nimport { HvChartTooltip } from \"../types/tooltip\";\nimport { getGroupKey } from \"../utils\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n HvConfusionMatrixColorScale,\n HvConfusionMatrixFormat,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\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 filters,\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 ...others\n } = props;\n\n const { classes } = useClasses(classesProp);\n\n const groupByKey = getGroupKey(groupBy);\n\n const { data: 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 filters,\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) as any,\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} {...others} />;\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfusionMatrix.styles.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-
|
|
1
|
+
{"version":3,"file":"ConfusionMatrix.styles.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvConfusionMatrix\",\n {\n tooltipRoot: {\n backgroundColor: theme.colors.atmo1,\n width: \"fit-content\",\n minWidth: 150,\n boxShadow: theme.colors.shadow,\n zIndex: theme.zIndices.sticky,\n },\n tooltipContainer: {\n padding: theme.spacing(\"15px\", \"sm\"),\n display: \"flex\",\n flexDirection: \"column\",\n },\n tooltipText: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,aAAa;AAAA,MACX,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,MAAM,OAAO;AAAA,MACxB,QAAQ,MAAM,SAAS;AAAA,IACzB;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS,MAAM,QAAQ,QAAQ,IAAI;AAAA,MACnC,SAAS;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,aAAa;AAAA,MACX,YAAY,MAAM,WAAW;AAAA,MAC7B,YAAY,MAAM,YAAY;AAAA,MAC9B,UAAU,MAAM,UAAU;AAAA,MAC1B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,EACF;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../src/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\nimport { useTheme } from \"@hitachivantara/uikit-react-
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\nimport { useTheme } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvChartXAxis } from \"../types/common\";\nimport {\n HvConfusionMatrixColorScale,\n HvConfusionMatrixFormat,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n data,\n delta,\n custom,\n filterKey,\n}: {\n data: ColumnTable;\n delta: boolean;\n filterKey: string;\n custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n const { colors } = useTheme();\n\n const colorScale = useMemo(() => {\n if (custom == null && delta) {\n return;\n }\n\n if (custom && typeof custom[0] === \"object\") {\n return {\n pieces: (custom as HvConfusionMatrixColorScale[]).reduce(\n (acc: HvConfusionMatrixColorScale[], curr) => {\n acc.push({\n ...curr,\n color: colors?.[curr.color] || curr.color,\n });\n return acc;\n },\n [],\n ),\n };\n }\n\n const flatData = data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce((acc: number[], c: string) => {\n acc.push(...data.array(c));\n return acc;\n }, []);\n const max = Math.max(...flatData);\n const min = Math.min(...flatData);\n\n return {\n colorScale: custom || [colors?.base_light || \"\", colors?.cat3 || \"\"],\n max,\n min,\n };\n }, [colors, custom, data, filterKey, delta]);\n\n return colorScale;\n};\n\nexport const useSeries = ({\n data,\n filterKey,\n delta,\n valuesProps,\n}: {\n data: ColumnTable;\n filterKey: string;\n delta: boolean;\n valuesProps?: HvConfusionMatrixValuesProps;\n}) => {\n const { colors } = useTheme();\n\n const getDeltaColor = useCallback(\n (value: number, diagonal: boolean) => {\n if ((diagonal && value > 0) || (!diagonal && value < 0)) {\n return colors?.positive;\n }\n if ((diagonal && value < 0) || (!diagonal && value > 0)) {\n return colors?.negative;\n }\n\n return colors?.base_light;\n },\n [colors],\n );\n\n const chartSeries = useMemo(() => {\n return {\n series: {\n id: `series~${filterKey}`,\n type: \"heatmap\",\n label: {\n show: true,\n ...valuesProps,\n ...(valuesProps?.color && {\n color: colors?.[valuesProps.color] || valuesProps.color,\n }),\n },\n emphasis: {\n disabled: true,\n },\n data: data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce<(string | number)[][]>((acc, c, j) => {\n const row: any = (data.array(c) as any[]).reduce<\n {\n value: any[];\n visualMap?: boolean;\n itemStyle?: object;\n }[]\n >((racc, rv, i) => {\n racc.push({\n value: [data.array(filterKey)[i], c, rv != null ? rv : \"-\"],\n ...(delta && {\n visualMap: false,\n itemStyle: {\n color: getDeltaColor(rv, i === j),\n },\n }),\n });\n return racc;\n }, []);\n\n acc.push(...row);\n return acc;\n }, []),\n },\n };\n }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);\n\n return chartSeries;\n};\n\nconst SQUARE_SIZE = 52;\n\nexport const useGridLayout = ({\n data,\n filterKey,\n format,\n xAxisPosition,\n visualMapVisible,\n visualMapYPosition,\n}: {\n xAxisPosition: HvChartXAxis[\"position\"];\n data: ColumnTable;\n filterKey: string;\n format: HvConfusionMatrixFormat;\n visualMapVisible: boolean;\n visualMapYPosition: \"top\" | \"center\" | \"bottom\";\n}) => {\n const size = useMemo(() => {\n const nCols = data.array(filterKey).length;\n const nRows = data.columnNames().filter((p) => p !== filterKey).length;\n const itemHeight = format === \"square\" ? SQUARE_SIZE : SQUARE_SIZE / 2;\n\n return {\n padding: {\n bottom:\n xAxisPosition === \"bottom\" ||\n (visualMapVisible && visualMapYPosition === \"bottom\")\n ? 60\n : 20,\n top:\n xAxisPosition === \"top\" ||\n (visualMapVisible && visualMapYPosition === \"top\")\n ? 60\n : 20,\n ...(visualMapVisible &&\n visualMapYPosition === \"bottom\" &&\n xAxisPosition === \"bottom\" && {\n bottom: 100,\n }),\n ...(visualMapVisible &&\n visualMapYPosition === \"top\" &&\n xAxisPosition === \"top\" && {\n top: 100,\n }),\n left: 80,\n right: 80,\n },\n size: {\n height: Math.max(itemHeight * nRows, itemHeight * 8),\n width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8),\n },\n };\n }, [\n data,\n filterKey,\n format,\n visualMapVisible,\n visualMapYPosition,\n xAxisPosition,\n ]);\n\n return size;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import { HeatmapChart } from "echarts/charts";
|
|
4
4
|
import { TooltipComponent, VisualMapComponent } from "echarts/components";
|
|
5
5
|
import * as echarts from "echarts/core";
|
|
6
|
-
import { useTheme } from "@hitachivantara/uikit-react-
|
|
6
|
+
import { useTheme } from "@hitachivantara/uikit-react-utils";
|
|
7
7
|
import { useClasses } from "./Heatmap.styles.js";
|
|
8
8
|
import { useTooltip } from "../hooks/tooltip/useTooltip.js";
|
|
9
9
|
import { useXAxis } from "../hooks/useXAxis.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heatmap.js","sources":["../../../src/Heatmap/Heatmap.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport {
|
|
1
|
+
{"version":3,"file":"Heatmap.js","sources":["../../../src/Heatmap/Heatmap.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { useTheme, type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n useOption,\n useTooltip,\n useVisualMap,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvChartTooltip } from \"../types\";\nimport { HvChartCommonProps, XAxis, YAxis } from \"../types/common\";\nimport { useClasses } from \"./Heatmap.styles\";\n\n// Register chart components\necharts.use([HeatmapChart, TooltipComponent, VisualMapComponent]);\n\nexport type HvHeatmapClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeatmapItem = Array<number | string>;\n\nexport type HvHeatmapData = Array<HvHeatmapItem>;\n\nexport interface HvHeatmapProps\n extends Omit<\n HvChartCommonProps,\n \"data\" | \"groupBy\" | \"sortBy\" | \"grid\" | \"legend\" | \"tooltip\" | \"filters\"\n > {\n /** The name of the heatmap */\n name?: string;\n /** The data to use on the heatmap */\n data?: HvHeatmapData;\n /** The min value of the Heatmap */\n min: number;\n /** The max value of the Heatmap */\n max: number;\n /** The X axis definition */\n xAxis?: XAxis;\n /** The Y axis definition. */\n yAxis?: YAxis;\n /** The tooltip options. */\n tooltip?: Omit<HvChartTooltip, \"type\">;\n /** Color scale of the confusion matrix. Accepts an array of strings spanning from the lower to the upper ends of the scale. */\n colorScale?: string[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvHeatmapClasses;\n}\n\n/**\n * A Heatmap uses color gradients to represent data intensity across a surface.\n */\nexport const HvHeatmap = forwardRef<ReactECharts, HvHeatmapProps>(\n (props, ref) => {\n const {\n name,\n data,\n min,\n max,\n colorScale,\n xAxis,\n yAxis,\n classes: classesProp,\n tooltip,\n width,\n height,\n onOptionChange,\n ...others\n } = props;\n\n const { classes } = useClasses(classesProp);\n const { colors } = useTheme();\n\n const chartTooltip = useTooltip({\n component: (params) => {\n const value = params?.value;\n const title = params?.title;\n\n const valueToShow = value\n ? `${yAxis?.data?.[Number(value[1])]} - ${xAxis?.data?.[Number(value[0])]}: ${params?.series?.[0]?.name}`\n : \"-\";\n\n return `\n <div class=\"${classes.tooltipRoot}\">\n <div class=\"${classes.tooltipContainer}\">\n <div>\n <p class=\"${classes.tooltipText}\">${title}</p>\n <p class=\"${classes.tooltipText}\">${valueToShow}</p>\n </div>\n </div>\n </div>`;\n },\n ...tooltip,\n });\n\n const chartXAxis = useXAxis({ type: \"categorical\", ...xAxis });\n const chartYAxis = useYAxis({\n defaultType: \"categorical\",\n axes: yAxis ? [yAxis] : [],\n });\n\n const chartVisualMap = useVisualMap({\n min,\n max,\n orient: \"horizontal\",\n left: \"center\",\n calculable: true,\n position: {\n y: \"bottom\",\n },\n colorScale: colorScale || [colors?.cat1_180 || \"\", colors?.cat1_20 || \"\"],\n });\n\n const option = useOption({\n option: {\n xAxis: chartXAxis.xAxis,\n yAxis: chartYAxis.yAxis,\n visualMap: chartVisualMap.visualMap,\n series: [\n {\n name,\n type: \"heatmap\",\n data,\n label: {\n show: true,\n },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowColor: \"rgba(0, 0, 0, 0.5)\",\n },\n },\n },\n ],\n ...chartTooltip,\n },\n onOptionChange,\n });\n\n return (\n <HvBaseChart\n ref={ref}\n option={option}\n width={width}\n height={height}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoBA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAoCzD,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,EAAE,WAAW;AAEnB,UAAM,eAAe,WAAW;AAAA,MAC9B,WAAW,CAAC,WAAW;AACrB,cAAM,QAAQ,QAAQ;AACtB,cAAM,QAAQ,QAAQ;AAEhB,cAAA,cAAc,QAChB,GAAG,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,SAAS,CAAC,GAAG,IAAI,KACrG;AAEG,eAAA;AAAA,wBACS,QAAQ,WAAW;AAAA,0BACjB,QAAQ,gBAAgB;AAAA;AAAA,0BAExB,QAAQ,WAAW,KAAK,KAAK;AAAA,0BAC7B,QAAQ,WAAW,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,MAIvD;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,aAAa,SAAS,EAAE,MAAM,eAAe,GAAG,OAAO;AAC7D,UAAM,aAAa,SAAS;AAAA,MAC1B,aAAa;AAAA,MACb,MAAM,QAAQ,CAAC,KAAK,IAAI,CAAC;AAAA,IAAA,CAC1B;AAED,UAAM,iBAAiB,aAAa;AAAA,MAClC;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,QACR,GAAG;AAAA,MACL;AAAA,MACA,YAAY,cAAc,CAAC,QAAQ,YAAY,IAAI,QAAQ,WAAW,EAAE;AAAA,IAAA,CACzE;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,OAAO,WAAW;AAAA,QAClB,OAAO,WAAW;AAAA,QAClB,WAAW,eAAe;AAAA,QAC1B,QAAQ;AAAA,UACN;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,aAAa;AAAA,cACf;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createClasses } from "@hitachivantara/uikit-react-
|
|
1
|
+
import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
2
2
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
3
|
const { useClasses, staticClasses } = createClasses("HvHeatmap", {
|
|
4
4
|
tooltipRoot: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heatmap.styles.js","sources":["../../../src/Heatmap/Heatmap.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-
|
|
1
|
+
{"version":3,"file":"Heatmap.styles.js","sources":["../../../src/Heatmap/Heatmap.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvHeatmap\", {\n tooltipRoot: {\n backgroundColor: theme.colors.atmo1,\n width: \"fit-content\",\n minWidth: 150,\n boxShadow: theme.colors.shadow,\n zIndex: theme.zIndices.sticky,\n },\n tooltipContainer: {\n padding: theme.spacing(\"15px\", \"sm\"),\n display: \"flex\",\n flexDirection: \"column\",\n },\n tooltipText: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,aAAa;AAAA,EACtE,aAAa;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,IACxB,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS,MAAM,QAAQ,QAAQ,IAAI;AAAA,IACnC,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa;AAAA,IACX,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createClasses } from "@hitachivantara/uikit-react-
|
|
1
|
+
import { createClasses } from "@hitachivantara/uikit-react-utils";
|
|
2
2
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
3
3
|
const { useClasses, staticClasses } = createClasses("HvChartTooltip", {
|
|
4
4
|
/** Single tooltip styles */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/hooks/tooltip/styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/hooks/tooltip/styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvChartTooltip\", {\n /** Single tooltip styles */\n singleTooltipRoot: {\n width: \"fit-content\",\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n padding: theme.space.sm,\n display: \"flex\",\n },\n singleTooltipTitle: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n singleTooltipValue: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n marginLeft: theme.space.xs,\n },\n /** Multiple tooltip styles */\n multipleTooltipRoot: {\n width: \"fit-content\",\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n },\n multipleTooltipTitleContainer: {\n padding: `15px ${theme.space.sm}`,\n borderBottom: `3px solid ${theme.colors.atmo2}`,\n },\n multipleTooltipTitle: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n multipleTooltipValuesContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n\n \"& > *:not(:last-child)\": { paddingBottom: theme.space.sm },\n },\n multipleTooltipSeriesContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n multipleTooltipSeriesNameContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n marginRight: theme.space.sm,\n },\n multipleTooltipSeriesColor: {\n width: \"10px\",\n height: \"10px\",\n marginRight: \"5px\",\n },\n multipleTooltipSeriesName: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n multipleTooltipSeriesValue: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,kBAAkB;AAAA;AAAA,EAE3E,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,MAAM;AAAA,IACrB,SAAS;AAAA,EACX;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,MAAM;AAAA,EAC1B;AAAA;AAAA,EAEA,qBAAqB;AAAA,IACnB,OAAO;AAAA,IACP,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,+BAA+B;AAAA,IAC7B,SAAS,QAAQ,MAAM,MAAM,EAAE;AAAA,IAC/B,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,sBAAsB;AAAA,IACpB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gCAAgC;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IAErB,0BAA0B,EAAE,eAAe,MAAM,MAAM,GAAG;AAAA,EAC5D;AAAA,EACA,gCAAgC;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,oCAAoC;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,4BAA4B;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AAAA,EACA,2BAA2B;AAAA,IACzB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,4BAA4B;AAAA,IAC1B,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { ExtractNames } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvChartTooltip, HvChartTooltipParams } from \"../../types\";\nimport { HvEChartsOption } from \"../../types/common\";\nimport { getMeasure, SingleMeasure } from \"../../utils\";\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 measuresMapping?: Record<string, SingleMeasure>;\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 measuresMapping = {},\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 === \"treemap\" ||\n params[0].seriesType === \"heatmap\" ||\n params[0].seriesType === \"boxplot\"\n ? params[0].name\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].seriesType === \"treemap\" ||\n params[0].seriesType === \"heatmap\" ||\n params[0].seriesType === \"boxplot\"\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 measuresMapping,\n );\n\n const value =\n params[0].seriesType === \"pie\" ||\n params[0].seriesType === \"treemap\" ||\n params[0].seriesType === \"heatmap\"\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 measure && 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=\"${hvClasses?.multipleTooltipTitle}\">${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 measuresMapping,\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 measuresMapping,\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 === \"boxplot\"\n ? params[0].name\n : params[0].seriesType === \"pie\" ||\n params[0].seriesType === \"treemap\" ||\n params[0].seriesType === \"heatmap\"\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\" || p.seriesType === \"treemap\"\n ? p.name\n : p.seriesName,\n value:\n p.seriesType === \"pie\" ||\n p.seriesType === \"treemap\" ||\n 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 value: params[0].value,\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: any, params: any, dom: any, rect: any, size: any) => {\n return [point[0], point[1] - size.contentSize[1]];\n },\n formatter: (params: any) => {\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":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvChartTooltip, HvChartTooltipParams } from \"../../types\";\nimport { HvEChartsOption } from \"../../types/common\";\nimport { getMeasure, SingleMeasure } from \"../../utils\";\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 measuresMapping?: Record<string, SingleMeasure>;\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 measuresMapping = {},\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 === \"treemap\" ||\n params[0].seriesType === \"heatmap\" ||\n params[0].seriesType === \"boxplot\"\n ? params[0].name\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].seriesType === \"treemap\" ||\n params[0].seriesType === \"heatmap\" ||\n params[0].seriesType === \"boxplot\"\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 measuresMapping,\n );\n\n const value =\n params[0].seriesType === \"pie\" ||\n params[0].seriesType === \"treemap\" ||\n params[0].seriesType === \"heatmap\"\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 measure && 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=\"${hvClasses?.multipleTooltipTitle}\">${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 measuresMapping,\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 measuresMapping,\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 === \"boxplot\"\n ? params[0].name\n : params[0].seriesType === \"pie\" ||\n params[0].seriesType === \"treemap\" ||\n params[0].seriesType === \"heatmap\"\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\" || p.seriesType === \"treemap\"\n ? p.name\n : p.seriesName,\n value:\n p.seriesType === \"pie\" ||\n p.seriesType === \"treemap\" ||\n 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 value: params[0].value,\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: any, params: any, dom: any, rect: any, size: any) => {\n return [point[0], point[1] - size.contentSize[1]];\n },\n formatter: (params: any) => {\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":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useXAxis.js","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTheme } from \"@hitachivantara/uikit-react-
|
|
1
|
+
{"version":3,"file":"useXAxis.js","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useTheme } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvChartXAxis, HvEChartsOption } from \"../types/common\";\nimport { getAxisType } from \"../utils\";\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<Record<string, any>>((acc, curr) => {\n acc[curr] =\n (curr === \"color\" && colors?.[nameProps[curr] as string]) ||\n nameProps[curr as keyof typeof nameProps];\n return acc;\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":[],"mappings":";;;AAWO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AAChB,QAAA,EAAE,WAAW;AAEb,QAAA,SAAS,QAAwC,MAAM;AACrD,UAAA,gBAAgB,YAClB,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAQ,UAAU,IACzD;AACJ,UAAM,YACJ,aAAa,gBACT,cAAc,OAA4B,CAAC,KAAK,SAAS;AACnD,UAAA,IAAI,IACL,SAAS,WAAW,SAAS,UAAU,IAAI,CAAW,KACvD,UAAU,IAA8B;AACnC,aAAA;AAAA,IAAA,GACN,CAAE,CAAA,IACL;AAEC,WAAA;AAAA,MACL,OAAO;AAAA,QACL;AAAA,QACA,MAAM,YAAY,IAAI;AAAA,QACtB;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ,iBAAiB;AAAA,UACzB,WAAW;AAAA,QACb;AAAA,QACA,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,GAAI,WAAW,YAAY;AAAA,UACzB,cAAc,UAAU;AAAA,QAC1B;AAAA,QACA,GAAI,aAAa;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB,GAAI,YAAY,EAAE,SAAS;AAAA,MAC7B;AAAA,IAAA;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useYAxis.js","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useTheme } from \"@hitachivantara/uikit-react-
|
|
1
|
+
{"version":3,"file":"useYAxis.js","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useTheme } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvChartAxisType } from \"../types\";\nimport { HvEChartsOption, YAxis } from \"../types/common\";\nimport { getAxisType } from \"../utils\";\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<Record<string, any>>((acc, curr) => {\n acc[curr] =\n (curr === \"color\" && colors?.[nameProps[curr] as string]) ||\n nameProps[curr as keyof typeof nameProps];\n return acc;\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":[],"mappings":";;;AAYO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,MAAwB;AAChB,QAAA,EAAE,WAAW;AAEnB,QAAM,aAAa;AAAA,IACjB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,MACW;AACL,YAAA,gBAAgB,YAClB,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAQ,UAAU,IACzD;AACJ,YAAM,YACJ,aAAa,gBACT,cAAc,OAA4B,CAAC,KAAK,SAAS;AACnD,YAAA,IAAI,IACL,SAAS,WAAW,SAAS,UAAU,IAAI,CAAW,KACvD,UAAU,IAA8B;AACnC,eAAA;AAAA,MAAA,GACN,CAAE,CAAA,IACL;AAEC,aAAA;AAAA,QACL;AAAA,QACA,MAAM,YAAY,IAAI,KAAK,YAAY,WAAW;AAAA,QAClD;AAAA,QACA,WAAW;AAAA,UACT,QAAQ,iBAAiB;AAAA,UACzB,WAAW;AAAA,QACb;AAAA,QACA,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,GAAI,WAAW,YAAY;AAAA,UACzB,cAAc,WAAW;AAAA,QAC3B;AAAA,QACA,GAAI,aAAa;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB,GAAI,YAAY,EAAE,SAAS;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EAAA;AAGhB,QAAA,SAAS,QAAwC,MAAM;AACpD,WAAA;AAAA,MACL,OAAO,MAAM,QAAQ,IAAI,IACrB,KAAK,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IACnC,CAAC,WAAW,CAAE,CAAA,CAAC;AAAA,IAAA;AAAA,EACrB,GACC,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useMemo } from "react";
|
|
3
|
-
import { useTheme } from "@hitachivantara/uikit-react-
|
|
3
|
+
import { useTheme } from "@hitachivantara/uikit-react-utils";
|
|
4
4
|
import { registerTheme } from "../utils/registerTheme.js";
|
|
5
5
|
const HvVizContext = createContext({
|
|
6
6
|
theme: void 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\nimport { useTheme, type HvTheme } from \"@hitachivantara/uikit-react-utils\";\n\nimport { registerTheme } from \"../utils/registerTheme\";\n\nexport interface HvVizContextValue {\n /**\n * Current theme\n */\n theme?: string;\n /**\n * The current active theme\n */\n activeTheme?: HvTheme;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n /**\n * Component tree.\n */\n children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n * <HvVizProvider>\n * (...)\n * </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n const value = useMemo(() => {\n registerTheme(selectedTheme, selectedMode, activeTheme);\n\n return { theme: `${selectedTheme}-${selectedMode}`, activeTheme };\n }, [selectedTheme, selectedMode, activeTheme]);\n\n return (\n <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;AAgBO,MAAM,eAAe,cAAiC;AAAA,EAC3D,OAAO;AACT,CAAC;AA2BM,MAAM,gBAAgB,CAAC,EAAE,eAAmC;AACjE,QAAM,EAAE,aAAa,cAAc,kBAAkB,SAAS;AAExD,QAAA,QAAQ,QAAQ,MAAM;AACZ,kBAAA,eAAe,cAAc,WAAW;AAEtD,WAAO,EAAE,OAAO,GAAG,aAAa,IAAI,YAAY,IAAI;EACnD,GAAA,CAAC,eAAe,cAAc,WAAW,CAAC;AAE7C,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAe,SAAS,CAAA;AAEnD;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTheme.js","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import * as echarts from \"echarts/core\";\nimport { HvTheme } from \"@hitachivantara/uikit-react-
|
|
1
|
+
{"version":3,"file":"registerTheme.js","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import * as echarts from \"echarts/core\";\nimport { type HvTheme } from \"@hitachivantara/uikit-react-utils\";\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 treemap: {\n breadcrumb: {\n itemStyle: {\n color: themeStructure?.colors.modes[mode].secondary,\n textStyle: {\n color: themeStructure?.colors.modes[mode].atmo1,\n },\n },\n },\n },\n });\n};\n"],"names":[],"mappings":";AAGO,MAAM,gBAAgB,CAC3B,MACA,MACA,mBACG;AACH,QAAM,WAAW;AAAA,IACf,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IAC1C,YAAY,gBAAgB,YAAY;AAAA,IACxC,UAAU,gBAAgB,UAAU;AAAA,IACpC,YAAY,gBAAgB,WAAW;AAAA,EAAA;AAGzC,QAAM,aAAa;AAAA,IACjB,eAAe;AAAA,MACb,GAAG;AAAA,MACH,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IAC5C;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC1C,YAAY,gBAAgB,YAAY;AAAA,MACxC,UAAU,gBAAgB,UAAU;AAAA,MACpC,YAAY,gBAAgB,WAAW;AAAA,IACzC;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,EAAA;AAGF,UAAQ,cAAc,GAAG,IAAI,IAAI,IAAI,IAAI;AAAA,IACvC,OAAO;AAAA,MACL,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IACrC;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,UACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,UAC1C,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,WAAW,EAAE,GAAG,SAAS;AAAA,IAC3B;AAAA,IACA,cAAc;AAAA,MACZ,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,IACA,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,MACR,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,MACJ,WAAW;AAAA,QACT,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,YAAY,SAAS;AAAA,QACrB,UAAU,SAAS;AAAA,QACnB,YAAY,SAAS;AAAA,MACvB;AAAA,MACA,WAAW;AAAA,QACT,aAAa,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,QAChD,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,QACV,WAAW;AAAA,UACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,UAC1C,WAAW;AAAA,YACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,UAC5C;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EAAA,CACD;AACH;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { Context } from 'react';
|
|
2
|
-
import { CSSInterpolation } from '@emotion/serialize';
|
|
3
2
|
import { default as default_2 } from 'arquero/dist/types/table/column-table';
|
|
4
3
|
import { default as default_3 } from 'echarts-for-react/lib/core';
|
|
5
4
|
import { EChartsType } from 'echarts';
|
|
6
|
-
import { ExtractNames } from '@hitachivantara/uikit-react-
|
|
5
|
+
import { ExtractNames } from '@hitachivantara/uikit-react-utils';
|
|
7
6
|
import { ForwardRefExoticComponent } from 'react';
|
|
8
7
|
import { HvColorAny } from '@hitachivantara/uikit-styles';
|
|
9
|
-
import { HvTheme } from '@hitachivantara/uikit-react-
|
|
8
|
+
import { HvTheme } from '@hitachivantara/uikit-react-utils';
|
|
10
9
|
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
11
10
|
import { RefAttributes } from 'react';
|
|
12
11
|
|
|
@@ -561,10 +560,7 @@ declare const useClasses: (classesProp?: Partial<Record<"singleTooltipRoot" | "s
|
|
|
561
560
|
multipleTooltipSeriesName: string;
|
|
562
561
|
multipleTooltipSeriesValue: string;
|
|
563
562
|
};
|
|
564
|
-
css:
|
|
565
|
-
(template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
|
|
566
|
-
(...args: CSSInterpolation[]): string;
|
|
567
|
-
};
|
|
563
|
+
css: any;
|
|
568
564
|
cx: (...args: any) => string;
|
|
569
565
|
};
|
|
570
566
|
|
|
@@ -574,10 +570,7 @@ declare const useClasses_2: (classesProp?: Partial<Record<"tooltipRoot" | "toolt
|
|
|
574
570
|
tooltipContainer: string;
|
|
575
571
|
tooltipText: string;
|
|
576
572
|
};
|
|
577
|
-
css:
|
|
578
|
-
(template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
|
|
579
|
-
(...args: CSSInterpolation[]): string;
|
|
580
|
-
};
|
|
573
|
+
css: any;
|
|
581
574
|
cx: (...args: any) => string;
|
|
582
575
|
};
|
|
583
576
|
|
|
@@ -587,10 +580,7 @@ declare const useClasses_3: (classesProp?: Partial<Record<"tooltipRoot" | "toolt
|
|
|
587
580
|
tooltipContainer: string;
|
|
588
581
|
tooltipText: string;
|
|
589
582
|
};
|
|
590
|
-
css:
|
|
591
|
-
(template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
|
|
592
|
-
(...args: CSSInterpolation[]): string;
|
|
593
|
-
};
|
|
583
|
+
css: any;
|
|
594
584
|
cx: (...args: any) => string;
|
|
595
585
|
};
|
|
596
586
|
|
|
@@ -600,10 +590,7 @@ declare const useClasses_4: (classesProp?: Partial<Record<"tooltipRoot" | "toolt
|
|
|
600
590
|
tooltipContainer: string;
|
|
601
591
|
tooltipText: string;
|
|
602
592
|
};
|
|
603
|
-
css:
|
|
604
|
-
(template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
|
|
605
|
-
(...args: CSSInterpolation[]): string;
|
|
606
|
-
};
|
|
593
|
+
css: any;
|
|
607
594
|
cx: (...args: any) => string;
|
|
608
595
|
};
|
|
609
596
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.14.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React visualization components for the NEXT UI Kit.",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@hitachivantara/uikit-react-
|
|
37
|
-
"@hitachivantara/uikit-styles": "^5.
|
|
36
|
+
"@hitachivantara/uikit-react-utils": "^0.2.0",
|
|
37
|
+
"@hitachivantara/uikit-styles": "^5.32.0"
|
|
38
38
|
},
|
|
39
39
|
"files": [
|
|
40
40
|
"dist"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"access": "public",
|
|
44
44
|
"directory": "package"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "6a83ea59c8a9709fba4d58125777ef9f30a13f56",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|
|
49
49
|
"require": "./dist/cjs/index.cjs",
|