@hitachivantara/uikit-react-viz 5.3.19 → 5.4.0

package/dist/types/index.d.ts

@@ -32,6 +32,9 @@ declare interface BaseMeasures {
     valueFormatter?: (value?: string | number) => string;
 }
 
+declare interface ConfusionMatrixMeasure extends BaseMeasures {
+}
+
 declare interface DonutFullMeasures extends BaseMeasures {
 }
 
@@ -50,9 +53,9 @@ declare interface HvAxisChartCommonProps {
     /** Columns to use to split the measures. */
     splitBy?: Arrayable<string>;
     /** Options for the xAxis, i.e. the horizontal axis. */
-    xAxis?: HvChartAxis;
+    xAxis?: HvChartXAxis;
     /** Options for the yAxis, i.e. the vertical axis. */
-    yAxis?: HvChartAxis | [HvChartAxis, HvChartAxis];
+    yAxis?: HvChartYAxis | [HvChartYAxis, HvChartYAxis];
     /** Stack name to use when all the series should be stacked together. If not provided, the series are not stacked. */
     stack?: string;
     /** Ranger slider options for the horizontal axis. */
@@ -64,7 +67,7 @@ declare interface HvAxisChartCommonProps {
 /**
  * A bar chart is a chart or graph that presents categorical data with rectangular bars.
  */
-export declare const HvBarChart: ({ yAxis, xAxis, horizontal, horizontalRangeSlider, grid, data, groupBy, splitBy, sortBy, stack, seriesNameFormatter, measures, legend, tooltip, classes, }: HvBarChartProps) => JSX_2.Element;
+export declare const HvBarChart: ({ yAxis, xAxis, horizontal, horizontalRangeSlider, grid, data, groupBy, splitBy, sortBy, stack, seriesNameFormatter, measures, legend, tooltip, classes, height, width, }: HvBarChartProps) => JSX_2.Element;
 
 export declare interface HvBarChartClasses extends HvChartTooltipClasses {
 }
@@ -94,6 +97,21 @@ export declare interface HvChartAxis {
     labelRotation?: number;
     /** Name used for the axis. */
     name?: string;
+    /** Properties to customize the axis name. */
+    nameProps?: {
+        /** Location. */
+        location?: HvChartAxisNameLocation;
+        /** Padding. */
+        padding?: number | number[];
+        /** Color. You can use either an HEX or color name from the palette. */
+        color?: string;
+        /** Font size. */
+        fontSize?: number;
+        /** Font style. */
+        fontStyle?: "normal" | "italic";
+        /** Font weight. */
+        fontWeight?: number;
+    };
     /** Maximum value on the axis. Set this property to `max` to use the maximum data value. */
     maxValue?: string | number | "max" | ((obj: {
         max: string | number;
@@ -106,6 +124,8 @@ export declare interface HvChartAxis {
     }) => string | number);
 }
 
+export declare type HvChartAxisNameLocation = "start" | "end" | "center";
+
 /**
  * Axis types:
  * continuous: continuous data
@@ -128,6 +148,10 @@ declare interface HvChartCommonProps {
     legend?: HvChartLegend;
     /** Grid options. */
     grid?: HvChartGrid;
+    /** Chart width. */
+    width?: number;
+    /** Chart height. */
+    height?: number;
 }
 
 /** Chart data */
@@ -189,19 +213,97 @@ declare type HvChartTooltipClasses = ExtractNames<typeof useClasses>;
 export declare interface HvChartTooltipParams {
     title?: string | number;
     series?: {
+        color?: string;
         name?: string;
         value?: string | number;
-        color?: string;
     }[];
 }
 
 export declare type HvChartTooltipType = (typeof tooltipType)[number];
 
+declare interface HvChartXAxis extends HvChartAxis {
+    /** Position of the axis. */
+    position?: "top" | "bottom";
+}
+
+declare interface HvChartYAxis extends HvChartAxis {
+    /** Position of the axis. */
+    position?: "left" | "right";
+}
+
+/**
+ * Confusion Matrix is a table displaying the performance of a predictive model.
+ * Typically the columns show the predicted class and the rows the expected class.
+ * The main diagonal counts the positive matches while the cells outside it count the mismatches between predicted and expected.
+ */
+export declare const HvConfusionMatrix: ({ legend, groupBy, measure, sortBy, splitBy, grid, data: dataProp, tooltip, xAxis, yAxis, colorScale: colorScaleProp, delta, valuesProps, width, height, format, classes: classesProp, }: HvConfusionMatrixProps) => JSX_2.Element;
+
+export declare type HvConfusionMatrixClasses = ExtractNames<typeof useClasses_2>;
+
+export declare interface HvConfusionMatrixColorScale {
+    /** You can use either an HEX or color name from the palette. */
+    color: string;
+    label: string;
+    max?: number;
+    min?: number;
+    value?: number;
+}
+
+export declare type HvConfusionMatrixFormat = "square" | "landscape";
+
+export declare type HvConfusionMatrixMeasure = string | ConfusionMatrixMeasure;
+
+export declare interface HvConfusionMatrixProps extends Omit<HvChartCommonProps, "tooltip"> {
+    /** Column to measure. */
+    measure: HvConfusionMatrixMeasure;
+    /** Columns to use to split the measure. */
+    splitBy?: Arrayable<string>;
+    /**
+     * Column to use for the delta confusion matrix.
+     *
+     * It can be set to `true` in case the `measure` already has the calculations for the delta confusion matrix.
+     */
+    delta?: boolean | string;
+    /** Options for the xAxis, i.e. the horizontal axis. */
+    xAxis?: HvChartXAxis;
+    /** Options for the yAxis, i.e. the vertical axis. */
+    yAxis?: HvChartYAxis;
+    /** Tooltip options. */
+    tooltip?: Omit<HvChartTooltip, "type">;
+    /** Format of the confusion matrix. Defaults to `square`. */
+    format?: HvConfusionMatrixFormat;
+    /** Properties to customize the prediction values. */
+    valuesProps?: HvConfusionMatrixValuesProps;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvConfusionMatrixClasses;
+    /**
+     * Color scale of the confusion matrix.
+     *
+     * If an array of two strings is provided, the first and second values are the lower and upper ends of the scale, respectively.
+     * An array of objects can also be used to create a custom scale.
+     * If `delta` is not provided, a default color scale is used when `colorScale` is not defined: `[base-light, cat3]`.
+     */
+    colorScale?: [string, string] | HvConfusionMatrixColorScale[];
+}
+
+export declare interface HvConfusionMatrixValuesProps {
+    /** Whether to show the prediction values inside the confusion matrix or not. Defaults to `true`. */
+    show?: boolean;
+    /** Prediction values label color. You can use either an HEX or color name from the palette. */
+    color?: string;
+    /** Prediction values label font style. */
+    fontStyle?: "normal" | "italic";
+    /** Prediction values label font weight. */
+    fontWeight?: number;
+    /** Prediction values label font size. */
+    fontSize?: number;
+}
+
 /**
  * Donut charts nicely convey the part-whole relationship and they have become
  * the most recognizable chart types for representing proportions in business and data statistics.
  */
-export declare const HvDonutChart: ({ data, groupBy, classes, legend, tooltip, measure: measures, sortBy, grid, type, slicesNameFormatter, }: HvDonutChartProps) => JSX_2.Element;
+export declare const HvDonutChart: ({ data, groupBy, classes, legend, tooltip, measure: measures, sortBy, grid, width, height, type, slicesNameFormatter, }: HvDonutChartProps) => JSX_2.Element;
 
 export declare interface HvDonutChartClasses extends HvChartTooltipClasses {
 }
@@ -223,7 +325,7 @@ export declare interface HvDonutChartProps extends HvChartCommonProps {
  * A line chart or line plot or line graph is a type of chart which displays information as a series of data points
  * connected by straight line segments. It is a basic type of chart common in many fields.
  */
-export declare const HvLineChart: ({ area, emptyCellMode, areaOpacity, yAxis, xAxis, horizontalRangeSlider, grid, data, groupBy, splitBy, sortBy, measures, stack, seriesNameFormatter, legend, classes, tooltip, }: HvLineChartProps) => JSX_2.Element;
+export declare const HvLineChart: ({ area, emptyCellMode, areaOpacity, yAxis, xAxis, horizontalRangeSlider, grid, data, groupBy, splitBy, sortBy, measures, stack, seriesNameFormatter, legend, classes, tooltip, width, height, }: HvLineChartProps) => JSX_2.Element;
 
 export declare interface HvLineChartClasses extends HvChartTooltipClasses {
 }
@@ -315,4 +417,17 @@ declare const useClasses: (classesProp?: Partial<Record<"singleTooltipRoot" | "s
     cx: (...args: any) => string;
 };
 
+declare const useClasses_2: (classesProp?: Partial<Record<"tooltipRoot" | "tooltipContainer" | "tooltipText", string>>, addStatic?: boolean) => {
+    classes: {
+        tooltipRoot: string;
+        tooltipContainer: string;
+        tooltipText: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "5.3.19",
+  "version": "5.4.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React visualization components for the NEXT UI Kit.",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.25.3"
+    "@hitachivantara/uikit-react-core": "^5.26.0"
   },
   "files": [
     "dist"
@@ -42,7 +42,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "55c7e43152d07b2cc3788b1383aa87a58e292973",
+  "gitHead": "b9b65e926b74ae9834d26017a487e72a621383c7",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {