@hitachivantara/uikit-react-viz 5.10.2 → 5.11.1
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/BarChart/BarChart.cjs +9 -1
- package/dist/cjs/Boxplot/Boxplot.cjs +118 -0
- package/dist/cjs/Boxplot/Boxplot.styles.cjs +25 -0
- package/dist/cjs/Boxplot/useBoxplot.cjs +77 -0
- package/dist/cjs/Boxplot/useBoxplotData.cjs +31 -0
- package/dist/cjs/ConfusionMatrix/ConfusionMatrix.cjs +2 -0
- package/dist/cjs/DonutChart/DonutChart.cjs +2 -1
- package/dist/cjs/LineChart/LineChart.cjs +9 -1
- package/dist/cjs/ScatterPlot/ScatterPlot.cjs +9 -1
- package/dist/cjs/hooks/tooltip/useTooltip.cjs +3 -3
- package/dist/cjs/hooks/useData.cjs +13 -1
- package/dist/cjs/index.cjs +2 -0
- package/dist/cjs/utils/index.cjs +27 -0
- package/dist/esm/BarChart/BarChart.js +9 -1
- package/dist/esm/BarChart/BarChart.js.map +1 -1
- package/dist/esm/Boxplot/Boxplot.js +99 -0
- package/dist/esm/Boxplot/Boxplot.js.map +1 -0
- package/dist/esm/Boxplot/Boxplot.styles.js +25 -0
- package/dist/esm/Boxplot/Boxplot.styles.js.map +1 -0
- package/dist/esm/Boxplot/useBoxplot.js +77 -0
- package/dist/esm/Boxplot/useBoxplot.js.map +1 -0
- package/dist/esm/Boxplot/useBoxplotData.js +31 -0
- package/dist/esm/Boxplot/useBoxplotData.js.map +1 -0
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.js +2 -0
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.js.map +1 -1
- package/dist/esm/DonutChart/DonutChart.js +2 -1
- package/dist/esm/DonutChart/DonutChart.js.map +1 -1
- package/dist/esm/Heatmap/Heatmap.js.map +1 -1
- package/dist/esm/LineChart/LineChart.js +9 -1
- package/dist/esm/LineChart/LineChart.js.map +1 -1
- package/dist/esm/ScatterPlot/ScatterPlot.js +9 -1
- package/dist/esm/ScatterPlot/ScatterPlot.js.map +1 -1
- package/dist/esm/Treemap/Treemap.js.map +1 -1
- package/dist/esm/hooks/tooltip/useTooltip.js +3 -3
- package/dist/esm/hooks/tooltip/useTooltip.js.map +1 -1
- package/dist/esm/hooks/useData.js +15 -3
- package/dist/esm/hooks/useData.js.map +1 -1
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/index.js +27 -0
- package/dist/esm/utils/index.js.map +1 -1
- package/dist/types/index.d.ts +50 -2
- package/package.json +3 -3
package/dist/esm/utils/index.js
CHANGED
|
@@ -32,8 +32,35 @@ const getMeasure = (name, msr) => {
|
|
|
32
32
|
return m.field === measureName;
|
|
33
33
|
}) ?? measuresArray[0];
|
|
34
34
|
};
|
|
35
|
+
const getFilterFunction = (operation, field, value) => {
|
|
36
|
+
switch (operation) {
|
|
37
|
+
case "is": {
|
|
38
|
+
const valueArray = Array.isArray(value) ? value : [value];
|
|
39
|
+
return (row) => valueArray.includes(row[field]);
|
|
40
|
+
}
|
|
41
|
+
case "isNot": {
|
|
42
|
+
const valueArray = Array.isArray(value) ? value : [value];
|
|
43
|
+
return (row) => !valueArray.includes(row[field]);
|
|
44
|
+
}
|
|
45
|
+
case "contains":
|
|
46
|
+
return (row) => row[field].includes(value);
|
|
47
|
+
case "greaterThan":
|
|
48
|
+
return (row) => row[field] > (Array.isArray(value) ? value[0] : value);
|
|
49
|
+
case "greaterThanOrEqual":
|
|
50
|
+
return (row) => row[field] >= (Array.isArray(value) ? value[0] : value);
|
|
51
|
+
case "lessThan":
|
|
52
|
+
return (row) => row[field] < (Array.isArray(value) ? value[0] : value);
|
|
53
|
+
case "lessThanOrEqual":
|
|
54
|
+
return (row) => row[field] <= (Array.isArray(value) ? value[0] : value);
|
|
55
|
+
case "between":
|
|
56
|
+
return (row) => row[field] >= value[0] && row[field] <= value[1];
|
|
57
|
+
default:
|
|
58
|
+
throw new Error("Unsupported operation");
|
|
59
|
+
}
|
|
60
|
+
};
|
|
35
61
|
export {
|
|
36
62
|
getAxisType,
|
|
63
|
+
getFilterFunction,
|
|
37
64
|
getGroupKey,
|
|
38
65
|
getLegendIcon,
|
|
39
66
|
getMeasure
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport type {\n HvBarChartMeasures,\n HvChartAxisType,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"..\";\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvChartLegendIcon } from \"../types/legend\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\n\nexport const getAxisType = (type?: HvChartAxisType) => {\n switch (type) {\n case \"categorical\":\n return \"category\";\n case \"time\":\n return \"time\";\n case \"continuous\":\n return \"value\";\n default:\n return undefined;\n }\n};\n\nexport const getGroupKey = (groupBy: HvChartCommonProps[\"groupBy\"]) =>\n Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n\nexport const getLegendIcon = (icon: HvChartLegendIcon) => {\n switch (icon) {\n case \"circle\":\n return \"circle\";\n case \"square\":\n return \"path://M0,0L16,0L16,16L0,16L0,0Z\";\n case \"line\":\n default:\n return \"path://M0,0L16,0L16,2L0,2Z\";\n }\n};\n\nexport const getMeasure = (\n name: string,\n msr:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n | HvDonutChartMeasure,\n):\n | HvLineChartMeasures\n | HvBarChartMeasures\n | HvDonutChartMeasure\n | HvScatterPlotMeasure => {\n const measureName = name.split(\"_\")[0];\n const measuresArray = Array.isArray(msr) ? msr : [msr];\n // find the measure in measures array or return the first one\n return (\n measuresArray.find((m) => {\n if (typeof m === \"string\") {\n return m === measureName;\n }\n return m.field === measureName;\n }) ?? measuresArray[0]\n );\n};\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport type {\n HvBarChartMeasures,\n HvChartAxisType,\n HvChartFilter,\n HvChartFilterOperation,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"..\";\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvChartLegendIcon } from \"../types/legend\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\n\nexport const getAxisType = (type?: HvChartAxisType) => {\n switch (type) {\n case \"categorical\":\n return \"category\";\n case \"time\":\n return \"time\";\n case \"continuous\":\n return \"value\";\n default:\n return undefined;\n }\n};\n\nexport const getGroupKey = (groupBy: HvChartCommonProps[\"groupBy\"]) =>\n Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n\nexport const getLegendIcon = (icon: HvChartLegendIcon) => {\n switch (icon) {\n case \"circle\":\n return \"circle\";\n case \"square\":\n return \"path://M0,0L16,0L16,16L0,16L0,0Z\";\n case \"line\":\n default:\n return \"path://M0,0L16,0L16,2L0,2Z\";\n }\n};\n\nexport const getMeasure = (\n name: string,\n msr:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n | HvDonutChartMeasure,\n):\n | HvLineChartMeasures\n | HvBarChartMeasures\n | HvDonutChartMeasure\n | HvScatterPlotMeasure => {\n const measureName = name.split(\"_\")[0];\n const measuresArray = Array.isArray(msr) ? msr : [msr];\n // find the measure in measures array or return the first one\n return (\n measuresArray.find((m) => {\n if (typeof m === \"string\") {\n return m === measureName;\n }\n return m.field === measureName;\n }) ?? measuresArray[0]\n );\n};\n\nexport const getFilterFunction = (\n operation: HvChartFilterOperation,\n field: HvChartFilter[\"field\"],\n value: HvChartFilter[\"value\"],\n): Function => {\n switch (operation) {\n case \"is\": {\n const valueArray = Array.isArray(value) ? value : [value];\n return (row: any) => valueArray.includes(row[field]);\n }\n case \"isNot\": {\n const valueArray = Array.isArray(value) ? value : [value];\n return (row: any) => !valueArray.includes(row[field]);\n }\n case \"contains\":\n return (row: any) => row[field].includes(value);\n case \"greaterThan\":\n return (row: any) =>\n row[field] > (Array.isArray(value) ? value[0] : value);\n case \"greaterThanOrEqual\":\n return (row: any) =>\n row[field] >= (Array.isArray(value) ? value[0] : value);\n case \"lessThan\":\n return (row: any) =>\n row[field] < (Array.isArray(value) ? value[0] : value);\n case \"lessThanOrEqual\":\n return (row: any) =>\n row[field] <= (Array.isArray(value) ? value[0] : value);\n case \"between\":\n return (row: any) => row[field] >= value[0] && row[field] <= value[1];\n\n default:\n throw new Error(\"Unsupported operation\");\n }\n};\n"],"names":[],"mappings":"AAca,MAAA,cAAc,CAAC,SAA2B;AACrD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF;AAEa,MAAA,cAAc,CAAC,YAC1B,MAAM,QAAQ,OAAO,IAAI,QAAQ,KAAK,GAAG,IAAI;AAElC,MAAA,gBAAgB,CAAC,SAA4B;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AAAA,IACL;AACS,aAAA;AAAA,EACX;AACF;AAEa,MAAA,aAAa,CACxB,MACA,QAO0B;AAC1B,QAAM,cAAc,KAAK,MAAM,GAAG,EAAE,CAAC;AACrC,QAAM,gBAAgB,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,GAAG;AAGnD,SAAA,cAAc,KAAK,CAAC,MAAM;AACpB,QAAA,OAAO,MAAM,UAAU;AACzB,aAAO,MAAM;AAAA,IACf;AACA,WAAO,EAAE,UAAU;AAAA,EAAA,CACpB,KAAK,cAAc,CAAC;AAEzB;AAEO,MAAM,oBAAoB,CAC/B,WACA,OACA,UACa;AACb,UAAQ,WAAW;AAAA,IACjB,KAAK,MAAM;AACT,YAAM,aAAa,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AACxD,aAAO,CAAC,QAAa,WAAW,SAAS,IAAI,KAAK,CAAC;AAAA,IACrD;AAAA,IACA,KAAK,SAAS;AACZ,YAAM,aAAa,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AACxD,aAAO,CAAC,QAAa,CAAC,WAAW,SAAS,IAAI,KAAK,CAAC;AAAA,IACtD;AAAA,IACA,KAAK;AACH,aAAO,CAAC,QAAa,IAAI,KAAK,EAAE,SAAS,KAAK;AAAA,IAChD,KAAK;AACI,aAAA,CAAC,QACN,IAAI,KAAK,KAAK,MAAM,QAAQ,KAAK,IAAI,MAAM,CAAC,IAAI;AAAA,IACpD,KAAK;AACI,aAAA,CAAC,QACN,IAAI,KAAK,MAAM,MAAM,QAAQ,KAAK,IAAI,MAAM,CAAC,IAAI;AAAA,IACrD,KAAK;AACI,aAAA,CAAC,QACN,IAAI,KAAK,KAAK,MAAM,QAAQ,KAAK,IAAI,MAAM,CAAC,IAAI;AAAA,IACpD,KAAK;AACI,aAAA,CAAC,QACN,IAAI,KAAK,MAAM,MAAM,QAAQ,KAAK,IAAI,MAAM,CAAC,IAAI;AAAA,IACrD,KAAK;AACH,aAAO,CAAC,QAAa,IAAI,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAAA,IAEtE;AACQ,YAAA,IAAI,MAAM,uBAAuB;AAAA,EAC3C;AACF;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -39,6 +39,9 @@ declare interface BaseMeasure {
|
|
|
39
39
|
valueFormatter?: (value?: string | number) => string;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
declare interface BoxplotMeasure extends Omit<BaseMeasure, "agg" | "valueFormatter">, Omit<AxisMeasure, "stack" | "sampling"> {
|
|
43
|
+
}
|
|
44
|
+
|
|
42
45
|
declare interface ConfusionMatrixMeasure extends BaseMeasure {
|
|
43
46
|
}
|
|
44
47
|
|
|
@@ -100,6 +103,28 @@ export declare interface HvBarChartProps extends HvAxisChartCommonProps, HvChart
|
|
|
100
103
|
classes?: HvBarChartClasses;
|
|
101
104
|
}
|
|
102
105
|
|
|
106
|
+
/**
|
|
107
|
+
* A Boxplot chart visually summarizes the distribution of a dataset by depicting key statistical measures such as the median, quartiles, and outliers.
|
|
108
|
+
*/
|
|
109
|
+
export declare const HvBoxplot: ForwardRefExoticComponent<HvBoxplotProps & RefAttributes<default_3>>;
|
|
110
|
+
|
|
111
|
+
export declare type HvBoxplotClasses = ExtractNames<typeof useClasses_4>;
|
|
112
|
+
|
|
113
|
+
export declare type HvBoxplotMeasure = string | BoxplotMeasure;
|
|
114
|
+
|
|
115
|
+
export declare interface HvBoxplotProps extends HvAxisChartCommonProps, Omit<HvChartCommonProps, "groupBy"> {
|
|
116
|
+
/** The name of the heatmap */
|
|
117
|
+
name?: string;
|
|
118
|
+
/** Columns to measure on the chart. */
|
|
119
|
+
measures: Arrayable<HvBoxplotMeasure>;
|
|
120
|
+
/** Columns to use to group the data. */
|
|
121
|
+
groupBy?: string;
|
|
122
|
+
/** The tooltip options. */
|
|
123
|
+
tooltip?: Omit<HvChartTooltip, "type" | "valueFormatter" | "titleFormatter">;
|
|
124
|
+
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
125
|
+
classes?: HvBoxplotClasses;
|
|
126
|
+
}
|
|
127
|
+
|
|
103
128
|
/** Aggregation functions */
|
|
104
129
|
export declare type HvChartAggregation = "sum" | "average" | "min" | "max" | "count";
|
|
105
130
|
|
|
@@ -159,6 +184,8 @@ declare interface HvChartCommonProps {
|
|
|
159
184
|
groupBy: Arrayable<string>;
|
|
160
185
|
/** Columns to use to sort the data points. */
|
|
161
186
|
sortBy?: Arrayable<HvChartSortBy>;
|
|
187
|
+
/** Filters to apply to the data. */
|
|
188
|
+
filters?: Arrayable<HvChartFilter>;
|
|
162
189
|
/** Tooltip options. */
|
|
163
190
|
tooltip?: HvChartTooltip;
|
|
164
191
|
/** Legend options. */
|
|
@@ -184,6 +211,14 @@ export declare type HvChartData = Map<string | number, (string | number)[]> | Re
|
|
|
184
211
|
|
|
185
212
|
export declare type HvChartEmptyCellMode = (typeof emptyCellMode)[number];
|
|
186
213
|
|
|
214
|
+
export declare type HvChartFilter = {
|
|
215
|
+
field: string;
|
|
216
|
+
operation: HvChartFilterOperation;
|
|
217
|
+
value: string | string[] | number | number[];
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
export declare type HvChartFilterOperation = "is" | "isNot" | "contains" | "greaterThan" | "greaterThanOrEqual" | "lessThan" | "lessThanOrEqual" | "between";
|
|
221
|
+
|
|
187
222
|
export declare interface HvChartGrid {
|
|
188
223
|
/** Distance between the grid and the top of the container. */
|
|
189
224
|
top?: string | number;
|
|
@@ -359,7 +394,7 @@ export declare type HvHeatmapData = Array<HvHeatmapItem>;
|
|
|
359
394
|
|
|
360
395
|
export declare type HvHeatmapItem = Array<number | string>;
|
|
361
396
|
|
|
362
|
-
export declare interface HvHeatmapProps extends Omit<HvChartCommonProps, "data" | "groupBy" | "sortBy" | "grid" | "legend" | "tooltip"> {
|
|
397
|
+
export declare interface HvHeatmapProps extends Omit<HvChartCommonProps, "data" | "groupBy" | "sortBy" | "grid" | "legend" | "tooltip" | "filters"> {
|
|
363
398
|
/** The name of the heatmap */
|
|
364
399
|
name?: string;
|
|
365
400
|
/** The data to use on the heatmap */
|
|
@@ -430,7 +465,7 @@ export declare const HvTreemapChart: ForwardRefExoticComponent<HvTreemapChartPro
|
|
|
430
465
|
export declare interface HvTreemapChartClasses extends HvChartTooltipClasses {
|
|
431
466
|
}
|
|
432
467
|
|
|
433
|
-
export declare interface HvTreemapChartProps extends Omit<HvChartCommonProps, "data" | "groupBy" | "sortBy" | "grid" | "legend" | "tooltip"> {
|
|
468
|
+
export declare interface HvTreemapChartProps extends Omit<HvChartCommonProps, "data" | "groupBy" | "sortBy" | "grid" | "legend" | "tooltip" | "filters"> {
|
|
434
469
|
/** The name of the treemap */
|
|
435
470
|
name?: string;
|
|
436
471
|
/** The data to use on the treemap */
|
|
@@ -553,6 +588,19 @@ declare const useClasses_3: (classesProp?: Partial<Record<"tooltipRoot" | "toolt
|
|
|
553
588
|
cx: (...args: any) => string;
|
|
554
589
|
};
|
|
555
590
|
|
|
591
|
+
declare const useClasses_4: (classesProp?: Partial<Record<"tooltipRoot" | "tooltipContainer" | "tooltipText", string>>, addStatic?: boolean) => {
|
|
592
|
+
classes: {
|
|
593
|
+
tooltipRoot: string;
|
|
594
|
+
tooltipContainer: string;
|
|
595
|
+
tooltipText: string;
|
|
596
|
+
};
|
|
597
|
+
css: {
|
|
598
|
+
(template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
|
|
599
|
+
(...args: CSSInterpolation[]): string;
|
|
600
|
+
};
|
|
601
|
+
cx: (...args: any) => string;
|
|
602
|
+
};
|
|
603
|
+
|
|
556
604
|
declare interface XAxis extends HvChartXAxis {
|
|
557
605
|
data?: string[];
|
|
558
606
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.11.1",
|
|
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,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@emotion/css": "^11.11.0",
|
|
36
|
-
"@hitachivantara/uikit-react-core": "^5.64.
|
|
36
|
+
"@hitachivantara/uikit-react-core": "^5.64.5"
|
|
37
37
|
},
|
|
38
38
|
"files": [
|
|
39
39
|
"dist"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"access": "public",
|
|
43
43
|
"directory": "package"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "2d37cd09f6d809c3b09699ba280360b4fbfb4199",
|
|
46
46
|
"exports": {
|
|
47
47
|
".": {
|
|
48
48
|
"require": "./dist/cjs/index.cjs",
|