@hitachivantara/uikit-react-viz 5.15.9 → 5.15.10
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 +1 -1
- package/dist/cjs/BaseChart/BaseChart.cjs +1 -1
- package/dist/cjs/Boxplot/Boxplot.cjs +1 -1
- package/dist/cjs/ConfusionMatrix/ConfusionMatrix.cjs +1 -1
- package/dist/cjs/DonutChart/DonutChart.cjs +1 -1
- package/dist/cjs/Heatmap/Heatmap.cjs +1 -1
- package/dist/cjs/LineChart/LineChart.cjs +1 -1
- package/dist/cjs/ScatterPlot/ScatterPlot.cjs +1 -1
- package/dist/cjs/Treemap/Treemap.cjs +1 -1
- package/dist/esm/BarChart/BarChart.js +1 -1
- package/dist/esm/BarChart/BarChart.js.map +1 -1
- package/dist/esm/BaseChart/BaseChart.js +1 -1
- package/dist/esm/BaseChart/BaseChart.js.map +1 -1
- package/dist/esm/Boxplot/Boxplot.js +1 -1
- package/dist/esm/Boxplot/Boxplot.js.map +1 -1
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.js +1 -1
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.js.map +1 -1
- package/dist/esm/DonutChart/DonutChart.js +1 -1
- package/dist/esm/DonutChart/DonutChart.js.map +1 -1
- package/dist/esm/Heatmap/Heatmap.js +1 -1
- package/dist/esm/Heatmap/Heatmap.js.map +1 -1
- package/dist/esm/LineChart/LineChart.js +1 -1
- package/dist/esm/LineChart/LineChart.js.map +1 -1
- package/dist/esm/ScatterPlot/ScatterPlot.js +1 -1
- package/dist/esm/ScatterPlot/ScatterPlot.js.map +1 -1
- package/dist/esm/Treemap/Treemap.js +1 -1
- package/dist/esm/Treemap/Treemap.js.map +1 -1
- package/package.json +4 -4
|
@@ -30,7 +30,7 @@ const ReactECharts__default = /* @__PURE__ */ _interopDefault(ReactECharts);
|
|
|
30
30
|
const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
|
|
31
31
|
echarts__namespace.use([renderers.CanvasRenderer, components.AriaComponent]);
|
|
32
32
|
const HvBaseChart = react.forwardRef(
|
|
33
|
-
(props, ref)
|
|
33
|
+
function HvBaseChart2(props, ref) {
|
|
34
34
|
const { option, width, height, onEvents, ...others } = props;
|
|
35
35
|
const { theme, activeTheme } = useVizTheme.useVizTheme();
|
|
36
36
|
const currentTheme = react.useRef(theme);
|
|
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
|
|
|
34
34
|
const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
|
|
35
35
|
echarts__namespace.use([charts.BoxplotChart, components.TooltipComponent, components.VisualMapComponent]);
|
|
36
36
|
const HvBoxplot = react.forwardRef(
|
|
37
|
-
(props, ref)
|
|
37
|
+
function HvBoxplot2(props, ref) {
|
|
38
38
|
const {
|
|
39
39
|
name,
|
|
40
40
|
data,
|
|
@@ -40,7 +40,7 @@ echarts__namespace.use([
|
|
|
40
40
|
components.GridComponent,
|
|
41
41
|
components.TooltipComponent
|
|
42
42
|
]);
|
|
43
|
-
const HvConfusionMatrix = react.forwardRef((props, ref)
|
|
43
|
+
const HvConfusionMatrix = react.forwardRef(function HvConfusionMatrix2(props, ref) {
|
|
44
44
|
const {
|
|
45
45
|
legend,
|
|
46
46
|
groupBy,
|
|
@@ -33,7 +33,7 @@ function _interopNamespace(e) {
|
|
|
33
33
|
const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
|
|
34
34
|
echarts__namespace.use([charts.HeatmapChart, components.TooltipComponent, components.VisualMapComponent]);
|
|
35
35
|
const HvHeatmap = react.forwardRef(
|
|
36
|
-
(props, ref)
|
|
36
|
+
function HvHeatmap2(props, ref) {
|
|
37
37
|
const {
|
|
38
38
|
name,
|
|
39
39
|
data,
|
|
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
|
|
|
28
28
|
const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
|
|
29
29
|
echarts__namespace.use([charts.TreemapChart, components.TooltipComponent]);
|
|
30
30
|
const HvTreemapChart = react.forwardRef(
|
|
31
|
-
(props, ref)
|
|
31
|
+
function HvTreemapChart2(props, ref) {
|
|
32
32
|
const {
|
|
33
33
|
name,
|
|
34
34
|
data,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","sources":["../../../src/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n DataZoomInsideComponent,\n DataZoomSliderComponent,\n GridComponent,\n LegendComponent,\n MarkLineComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useDataZoom,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvBarChartMeasures } from \"../types\";\nimport {\n Arrayable,\n HvAxisChartCommonProps,\n HvChartCommonProps,\n} from \"../types/common\";\n\n// Register chart components\necharts.use([\n BarChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n MarkLineComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n extends HvAxisChartCommonProps,\n HvChartCommonProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<HvBarChartMeasures>;\n /** Whether the bar chart should be horizontal. Defaults to `false`. */\n horizontal?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(\n (props, ref)
|
|
1
|
+
{"version":3,"file":"BarChart.js","sources":["../../../src/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n DataZoomInsideComponent,\n DataZoomSliderComponent,\n GridComponent,\n LegendComponent,\n MarkLineComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useDataZoom,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvBarChartMeasures } from \"../types\";\nimport {\n Arrayable,\n HvAxisChartCommonProps,\n HvChartCommonProps,\n} from \"../types/common\";\n\n// Register chart components\necharts.use([\n BarChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n MarkLineComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n extends HvAxisChartCommonProps,\n HvChartCommonProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<HvBarChartMeasures>;\n /** Whether the bar chart should be horizontal. Defaults to `false`. */\n horizontal?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(\n function HvBarChart(props, ref) {\n const {\n yAxis,\n xAxis,\n horizontal = false,\n horizontalRangeSlider,\n grid,\n data,\n groupBy,\n splitBy,\n sortBy,\n filters,\n stack,\n seriesNameFormatter,\n measures,\n legend,\n tooltip,\n classes,\n height,\n width,\n onOptionChange,\n ...others\n } = props;\n\n const { data: chartData, mapping: measuresMapping } = useData({\n data,\n groupBy,\n sortBy,\n splitBy,\n measures,\n filters,\n });\n\n const chartDataset = useDataset(chartData);\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n defaultType: horizontal ? \"categorical\" : \"continuous\",\n });\n\n const chartXAxis = useXAxis({\n type: horizontal ? \"continuous\" : \"categorical\",\n ...xAxis,\n });\n\n const chartSlider = useDataZoom({\n showHorizontal: horizontalRangeSlider?.show,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartSeries = useSeries({\n type: \"bar\",\n data: chartData,\n groupBy,\n measuresMapping,\n stack,\n nameFormatter: seriesNameFormatter,\n horizontal,\n });\n\n const chartLegend = useLegend({\n ...legend,\n series: chartSeries.series,\n icon: \"square\",\n });\n\n const chartTooltip = useTooltip({\n ...tooltip,\n trigger: \"axis\",\n measuresMapping,\n classes,\n horizontal,\n });\n\n const option = useOption({\n option: {\n ...chartYAxis,\n ...chartXAxis,\n ...chartSlider,\n ...chartGrid,\n ...chartDataset,\n ...chartSeries,\n ...chartLegend,\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":["HvBarChart"],"mappings":";;;;;;;;;;;;;;;;AAoCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAkBM,MAAM,aAAa;AAAA,EACxB,SAASA,YAAW,OAAO,KAAK;AACxB,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AAEJ,UAAM,EAAE,MAAM,WAAW,SAAS,gBAAA,IAAoB,QAAQ;AAAA,MAC5D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa,aAAa,gBAAgB;AAAA,IAAA,CAC3C;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,aAAa,eAAe;AAAA,MAClC,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,MAAM;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,MACpB,MAAM;AAAA,IAAA,CACP;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,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,IACN;AAAA,EAAA;AAGN;"}
|
|
@@ -8,7 +8,7 @@ import { CanvasRenderer } from "echarts/renderers";
|
|
|
8
8
|
import { useVizTheme } from "../hooks/useVizTheme.js";
|
|
9
9
|
echarts.use([CanvasRenderer, AriaComponent]);
|
|
10
10
|
const HvBaseChart = forwardRef(
|
|
11
|
-
(props, ref)
|
|
11
|
+
function HvBaseChart2(props, ref) {
|
|
12
12
|
const { option, width, height, onEvents, ...others } = props;
|
|
13
13
|
const { theme, activeTheme } = useVizTheme();
|
|
14
14
|
const currentTheme = useRef(theme);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseChart.js","sources":["../../../src/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { AriaComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { CanvasRenderer } from \"echarts/renderers\";\n\nimport { useVizTheme } from \"../hooks\";\nimport { HvChartCommonProps, HvEChartsOption } from \"../types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps extends Pick<HvChartCommonProps, \"onEvents\"> {\n /** ECharts option. */\n option: HvEChartsOption;\n /** Charts width. */\n width?: echarts.ResizeOpts[\"width\"];\n /** Charts height. */\n height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(\n (props, ref)
|
|
1
|
+
{"version":3,"file":"BaseChart.js","sources":["../../../src/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { AriaComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { CanvasRenderer } from \"echarts/renderers\";\n\nimport { useVizTheme } from \"../hooks\";\nimport { HvChartCommonProps, HvEChartsOption } from \"../types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps extends Pick<HvChartCommonProps, \"onEvents\"> {\n /** ECharts option. */\n option: HvEChartsOption;\n /** Charts width. */\n width?: echarts.ResizeOpts[\"width\"];\n /** Charts height. */\n height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(\n function HvBaseChart(props, ref) {\n const { option, width, height, onEvents, ...others } = props;\n\n const { theme, activeTheme } = useVizTheme();\n\n const currentTheme = useRef<string | undefined>(theme);\n const chartRef = useRef<ReactECharts>(null);\n\n const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n // Dispose the instance of the chart when the component unmounts. This ensures that\n // the chart theme will update when the theme changes.\n useEffect(() => {\n const instance = chartRef.current?.getEchartsInstance();\n\n if (!instance) return;\n\n return () => {\n instance.dispose();\n };\n }, [activeTheme]);\n\n useEffect(() => {\n // When the theme changes echarts destroys the chart and mounts it again\n // thus we need to reset the initial option\n if (theme !== currentTheme.current) {\n setInitialOption(option);\n currentTheme.current = theme;\n return;\n }\n\n const instance = chartRef.current?.getEchartsInstance();\n\n if (!instance) return;\n\n // More info: https://echarts.apache.org/en/api.html#echartsInstance.setOption\n instance.setOption(option, {\n replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\", \"dataZoom\"],\n });\n }, [theme, option]);\n\n return (\n <ReactECharts\n ref={forkedRef}\n echarts={echarts}\n option={initialOption}\n theme={theme}\n notMerge // When true all the current components will be removed and new components will be created according to the new option\n style={{\n width: width ?? \"100%\",\n height: height ?? \"100%\",\n }}\n onEvents={onEvents}\n {...others}\n />\n );\n },\n);\n"],"names":["HvBaseChart"],"mappings":";;;;;;;;AAWA,QAAQ,IAAI,CAAC,gBAAgB,aAAa,CAAC;AAcpC,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,KAAK;AAC/B,UAAM,EAAE,QAAQ,OAAO,QAAQ,UAAU,GAAG,WAAW;AAEvD,UAAM,EAAE,OAAO,YAAY,IAAI,YAAY;AAErC,UAAA,eAAe,OAA2B,KAAK;AAC/C,UAAA,WAAW,OAAqB,IAAI;AAEpC,UAAA,YAAY,WAAyB,KAAK,QAAQ;AAExD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAA0B,MAAM;AAI1E,cAAU,MAAM;AACR,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC,SAAU;AAEf,aAAO,MAAM;AACX,iBAAS,QAAQ;AAAA,MACnB;AAAA,IAAA,GACC,CAAC,WAAW,CAAC;AAEhB,cAAU,MAAM;AAGV,UAAA,UAAU,aAAa,SAAS;AAClC,yBAAiB,MAAM;AACvB,qBAAa,UAAU;AACvB;AAAA,MAAA;AAGI,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC,SAAU;AAGf,eAAS,UAAU,QAAQ;AAAA,QACzB,cAAc,CAAC,SAAS,SAAS,UAAU,WAAW,UAAU;AAAA,MAAA,CACjE;AAAA,IAAA,GACA,CAAC,OAAO,MAAM,CAAC;AAGhB,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA,UAAQ;AAAA,QACR,OAAO;AAAA,UACL,OAAO,SAAS;AAAA,UAChB,QAAQ,UAAU;AAAA,QACpB;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}
|
|
@@ -14,7 +14,7 @@ import { useOption } from "../hooks/useOption.js";
|
|
|
14
14
|
import { HvBaseChart } from "../BaseChart/BaseChart.js";
|
|
15
15
|
echarts.use([BoxplotChart, TooltipComponent, VisualMapComponent]);
|
|
16
16
|
const HvBoxplot = forwardRef(
|
|
17
|
-
(props, ref)
|
|
17
|
+
function HvBoxplot2(props, ref) {
|
|
18
18
|
const {
|
|
19
19
|
name,
|
|
20
20
|
data,
|
|
@@ -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 { 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)
|
|
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 function HvBoxplot(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":["HvBoxplot"],"mappings":";;;;;;;;;;;;;;AA0BA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAyBzD,MAAM,YAAY;AAAA,EACvB,SAASA,WAAU,OAAO,KAAK;AACvB,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,IAAA,IACD;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,MAAM;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,MAAA;AAAA,IACL,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}
|
|
@@ -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 { 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":";;;;;;;;;;;;;;;;AAwCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AA2CM,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,aAAa,YAAY,OAAO;AAEtC,QAAM,EAAE,MAAM,UAAU,IAAI,QAAQ;AAAA,IAClC,MAAM;AAAA,IACN;AAAA,IACA,UAAU,CAAC,OAAO;AAAA,IAClB,QAAQ,UAAU;AAAA;AAAA,IAClB;AAAA,IACA;AAAA,IACA,OAAO,OAAO,UAAU,WAAW,QAAQ;AAAA,EAAA,CAC5C;AAED,QAAM,aAAa,cAAc;AAAA,IAC/B,OAAO,CAAC,CAAC;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA,CACZ;AAED,QAAM,iBAAiB,aAAa;AAAA,IAClC,MAAM,YAAY,UAAU;AAAA,IAC5B,MAAM,YAAY,UAAU,OAAO,cAAc;AAAA,IACjD,GAAI;AAAA,IAIJ,GAAG;AAAA,EAAA,CACJ;AAED,QAAM,eAAe,WAAW;AAAA,IAC9B,WAAW,CAAC,WAAW;AACrB,YAAM,QAAQ,QAAQ,SAAS,CAAC,EAAE;AAClC,YAAM,WACJ,OAAO,YAAY,YAAY,QAAQ,iBACnC,QAAQ,eAAe,KAAK,IAC5B,SAAS,iBACP,SAAS,eAAe,KAAK,IAC7B;AACF,YAAA,WAAW,SAAS,iBACtB,QAAQ,eAAe,QAAQ,KAAK,IACpC,QAAQ;AAEN,YAAA,UAAU,GAAG,QAAQ,MAAM,QAAQ,SAAS,CAAC,EAAE,IAAI,KAAK,QAAQ;AAE/D,aAAA;AAAA,sBACS,QAAQ,WAAW;AAAA,0BACf,QAAQ,gBAAgB;AAAA;AAAA,gCAElB,QAAQ,WAAW,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,IAI3D;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,QAAM,aAAa,SAAS;AAAA,IAC1B,MAAM;AAAA,MACJ;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAG;AAAA,QACH,WAAW;AAAA,UACT,UAAU;AAAA,UACV,SACE,OAAO,WAAW,YAAY,QAC9B,OAAO,WAAW,aAAa,WAC3B,OAAO,aAAa,UAClB,CAAC,IAAI,GAAG,GAAG,CAAC,IACZ,CAAC,GAAG,GAAG,IAAI,CAAC,IACd;AAAA,UACN,GAAG,OAAO;AAAA,QACZ;AAAA,QACA,MAAM,UACH,cACA,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,QAAQ;AAAA,MAAA;AAAA,IACb;AAAA,EACF,CACD;AAED,QAAM,aAAa,SAAS;AAAA,IAC1B,MAAM;AAAA,IACN,UAAU;AAAA,IACV,GAAG;AAAA,IACH,WAAW;AAAA,MACT,UAAU;AAAA,MACV,SACE,OAAO,WAAW,YAAY,QAC9B,OAAO,WAAW,aAAa,WAC3B,OAAO,aAAa,WAClB,CAAC,IAAI,GAAG,GAAG,CAAC,IACZ,CAAC,GAAG,GAAG,IAAI,CAAC,IACd;AAAA,MACN,GAAG,OAAO;AAAA,IACZ;AAAA,IACA,MAAM,UAAU,MAAM,UAAU;AAAA,EAAA,CACjC;AAED,QAAM,cAAc,UAAU;AAAA,IAC5B,MAAM;AAAA,IACN,WAAW;AAAA,IACX;AAAA,IACA,OAAO,CAAC,EAAE,SAAS,cAAc;AAAA,EAAA,CAClC;AAED,QAAM,kBAAkB,cAAc;AAAA,IACpC,MAAM;AAAA,IACN;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB,eAAe,UAAU;AAAA,IAC3C,oBAAoB,eAAe,UAAU;AAAA,IAC7C,eAAe,WAAW,MAAM;AAAA,EAAA,CACjC;AAED,QAAM,YAAY,QAAQ;AAAA;AAAA,IAExB,OAAO,SAAS,OAAO,SAAY,gBAAgB,KAAK;AAAA,IACxD,QAAQ,UAAU,OAAO,SAAY,gBAAgB,KAAK;AAAA,IAC1D,GAAG,gBAAgB;AAAA,IACnB,GAAG;AAAA,EAAA,CACJ;AAEK,QAAA,OAAO,QAAQ,MAAM;AAClB,WAAA;AAAA,MACL;AAAA;AAAA;AAAA,MAGA,QACE,UACA,gBAAgB,KAAK,SACnB,gBAAgB,QAAQ,SACxB,gBAAgB,QAAQ;AAAA,IAC9B;AAAA,EAAA,GACC;AAAA,IACD,gBAAgB,QAAQ;AAAA,IACxB,gBAAgB,QAAQ;AAAA,IACxB,gBAAgB,KAAK;AAAA,IACrB;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,SAAS,UAAU;AAAA,IACvB,QAAQ;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,EAAA,CACD;AAED,6BAAQ,aAAY,EAAA,KAAU,QAAiB,GAAG,MAAO,GAAG,QAAQ;AACtE,CAAC;"}
|
|
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>(function HvConfusionMatrix(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":["HvConfusionMatrix"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart.js","sources":["../../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n LegendComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n} from \"../hooks\";\nimport { HvDonutChartMeasure } from \"../types\";\nimport { HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n PieChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n]);\n\nexport interface HvDonutChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvDonutChartProps extends HvChartCommonProps {\n /** Column to measure. */\n measure: HvDonutChartMeasure;\n /** Type: regular or thin. Defaults to `regular`. */\n type?: \"regular\" | \"thin\";\n /** Formatter for the slices names used on the tooltips and legend. */\n slicesNameFormatter?: (value?: string) => string;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDonutChartClasses;\n}\n\n/**\n * Donut charts nicely convey the part-whole relationship and they have become\n * the most recognizable chart types for representing proportions in business and data statistics.\n */\nexport const HvDonutChart = forwardRef<ReactECharts, HvDonutChartProps>(\n (props, ref)
|
|
1
|
+
{"version":3,"file":"DonutChart.js","sources":["../../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n LegendComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n} from \"../hooks\";\nimport { HvDonutChartMeasure } from \"../types\";\nimport { HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n PieChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n]);\n\nexport interface HvDonutChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvDonutChartProps extends HvChartCommonProps {\n /** Column to measure. */\n measure: HvDonutChartMeasure;\n /** Type: regular or thin. Defaults to `regular`. */\n type?: \"regular\" | \"thin\";\n /** Formatter for the slices names used on the tooltips and legend. */\n slicesNameFormatter?: (value?: string) => string;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvDonutChartClasses;\n}\n\n/**\n * Donut charts nicely convey the part-whole relationship and they have become\n * the most recognizable chart types for representing proportions in business and data statistics.\n */\nexport const HvDonutChart = forwardRef<ReactECharts, HvDonutChartProps>(\n function HvDonutChart(props, ref) {\n const {\n data,\n groupBy,\n classes,\n legend,\n tooltip,\n measure: measures,\n sortBy,\n filters,\n grid,\n width,\n height,\n type = \"regular\",\n slicesNameFormatter,\n onOptionChange,\n ...others\n } = props;\n\n const { data: chartData, mapping: measuresMapping } = useData({\n data,\n groupBy,\n measures,\n sortBy,\n filters,\n });\n\n const chartDataset = useDataset(chartData);\n\n const chartSeries = useSeries({\n type: \"pie\",\n data: chartData,\n groupBy,\n measuresMapping,\n radius: type === \"thin\" ? [\"65%\", \"70%\"] : [\"55%\", \"70%\"],\n });\n\n const chartLegend = useLegend({\n ...legend,\n show: legend?.show ?? true,\n icon: \"square\",\n series: chartSeries.series,\n formatter: slicesNameFormatter,\n });\n\n const chartTooltip = useTooltip({\n ...tooltip,\n measuresMapping,\n classes,\n nameFormatter: slicesNameFormatter,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const option = useOption({\n option: {\n ...chartSeries,\n ...chartDataset,\n ...chartLegend,\n ...chartTooltip,\n ...chartGrid,\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":["HvDonutChart"],"mappings":";;;;;;;;;;;;;AA0BA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAmBM,MAAM,eAAe;AAAA,EAC1B,SAASA,cAAa,OAAO,KAAK;AAC1B,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AAEJ,UAAM,EAAE,MAAM,WAAW,SAAS,gBAAA,IAAoB,QAAQ;AAAA,MAC5D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,QAAQ,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,IAAA,CACzD;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,MAAM,QAAQ,QAAQ;AAAA,MACtB,MAAM;AAAA,MACN,QAAQ,YAAY;AAAA,MACpB,WAAW;AAAA,IAAA,CACZ;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,MAAM;AAErC,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,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,IACN;AAAA,EAAA;AAGN;"}
|
|
@@ -13,7 +13,7 @@ import { useOption } from "../hooks/useOption.js";
|
|
|
13
13
|
import { HvBaseChart } from "../BaseChart/BaseChart.js";
|
|
14
14
|
echarts.use([HeatmapChart, TooltipComponent, VisualMapComponent]);
|
|
15
15
|
const HvHeatmap = forwardRef(
|
|
16
|
-
(props, ref)
|
|
16
|
+
function HvHeatmap2(props, ref) {
|
|
17
17
|
const {
|
|
18
18
|
name,
|
|
19
19
|
data,
|
|
@@ -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 { 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)
|
|
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 function HvHeatmap(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":["HvHeatmap"],"mappings":";;;;;;;;;;;;;AAoBA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAoCzD,MAAM,YAAY;AAAA,EACvB,SAASA,WAAU,OAAO,KAAK;AACvB,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,IAAA,IACD;AAEJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,EAAE,OAAO,IAAI,SAAS;AAE5B,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,CAAA;AAAA,IAAC,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,cAAA;AAAA,YACf;AAAA,UACF;AAAA,QAEJ;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,IACN;AAAA,EAAA;AAGN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.js","sources":["../../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n DataZoomInsideComponent,\n DataZoomSliderComponent,\n GridComponent,\n LegendComponent,\n MarkLineComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useDataZoom,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../types\";\nimport {\n Arrayable,\n HvAxisChartCommonProps,\n HvChartCommonProps,\n} from \"../types/common\";\n\n// Register chart components\necharts.use([\n LineChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n MarkLineComponent,\n]);\n\nexport interface HvLineChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvLineChartProps\n extends HvAxisChartCommonProps,\n HvChartCommonProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<HvLineChartMeasures>;\n /** Strategy to use when there are empty cells. Defaults to `void`. */\n emptyCellMode?: HvChartEmptyCellMode;\n /** Whether the area under the lines should be filled. Defaults to `false`. */\n area?: boolean;\n /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */\n areaOpacity?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvLineChartClasses;\n}\n\n/**\n * A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = forwardRef<ReactECharts, HvLineChartProps>(\n (props, ref)
|
|
1
|
+
{"version":3,"file":"LineChart.js","sources":["../../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n DataZoomInsideComponent,\n DataZoomSliderComponent,\n GridComponent,\n LegendComponent,\n MarkLineComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useDataZoom,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../types\";\nimport {\n Arrayable,\n HvAxisChartCommonProps,\n HvChartCommonProps,\n} from \"../types/common\";\n\n// Register chart components\necharts.use([\n LineChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n MarkLineComponent,\n]);\n\nexport interface HvLineChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvLineChartProps\n extends HvAxisChartCommonProps,\n HvChartCommonProps {\n /** Columns to measure on the chart. */\n measures: Arrayable<HvLineChartMeasures>;\n /** Strategy to use when there are empty cells. Defaults to `void`. */\n emptyCellMode?: HvChartEmptyCellMode;\n /** Whether the area under the lines should be filled. Defaults to `false`. */\n area?: boolean;\n /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */\n areaOpacity?: number;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvLineChartClasses;\n}\n\n/**\n * A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = forwardRef<ReactECharts, HvLineChartProps>(\n function HvLineChart(props, ref) {\n const {\n area = false,\n emptyCellMode = \"void\",\n areaOpacity = 0.5,\n yAxis,\n xAxis,\n horizontalRangeSlider,\n grid,\n data,\n groupBy,\n splitBy,\n sortBy,\n filters,\n measures,\n stack,\n seriesNameFormatter,\n legend,\n classes,\n tooltip,\n width,\n height,\n onOptionChange,\n ...others\n } = props;\n\n const { data: chartData, mapping: measuresMapping } = useData({\n data,\n groupBy,\n measures,\n splitBy,\n sortBy,\n filters,\n });\n\n const chartDataset = useDataset(chartData);\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n });\n\n const chartXAxis = useXAxis({ ...xAxis, scale: true });\n\n const chartSlider = useDataZoom({\n showHorizontal: horizontalRangeSlider?.show,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartSeries = useSeries({\n type: \"line\",\n data: chartData,\n groupBy,\n measuresMapping,\n area,\n areaOpacity,\n emptyCellMode,\n stack,\n nameFormatter: seriesNameFormatter,\n });\n\n const chartLegend = useLegend({\n ...legend,\n series: chartSeries.series,\n });\n\n const chartTooltip = useTooltip({\n ...tooltip,\n trigger: \"axis\",\n measuresMapping,\n classes,\n });\n\n const option = useOption({\n option: {\n ...chartYAxis,\n ...chartXAxis,\n ...chartSlider,\n ...chartGrid,\n ...chartDataset,\n ...chartSeries,\n ...chartLegend,\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":["HvLineChart"],"mappings":";;;;;;;;;;;;;;;;AAoCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAuBM,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,KAAK;AACzB,UAAA;AAAA,MACJ,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AAEJ,UAAM,EAAE,MAAM,WAAW,SAAS,gBAAA,IAAoB,QAAQ;AAAA,MAC5D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,IAAA,CAC7D;AAED,UAAM,aAAa,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM;AAErD,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,MAAM;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,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,IACN;AAAA,EAAA;AAGN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScatterPlot.js","sources":["../../../src/ScatterPlot/ScatterPlot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { ScatterChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n DataZoomInsideComponent,\n DataZoomSliderComponent,\n GridComponent,\n LegendComponent,\n MarkLineComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useDataZoom,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport {\n Arrayable,\n HvAxisChartCommonProps,\n HvChartCommonProps,\n} from \"../types/common\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\n\n// Register chart components\necharts.use([\n ScatterChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n MarkLineComponent,\n]);\n\nexport interface HvScatterPlotClasses extends HvChartTooltipClasses {}\n\nexport interface HvScatterPlotProps\n extends HvChartCommonProps,\n Omit<HvAxisChartCommonProps, \"stack\"> {\n /** Columns to measure on the plot. */\n measures: Arrayable<HvScatterPlotMeasure>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvScatterPlotClasses;\n}\n\n/**\n * A scatter plot is a type of chart which displays dots to represent two numeric variables.\n * This type of chart is used to determine the relationship between two variables.\n */\nexport const HvScatterPlot = forwardRef<ReactECharts, HvScatterPlotProps>(\n (props, ref)
|
|
1
|
+
{"version":3,"file":"ScatterPlot.js","sources":["../../../src/ScatterPlot/ScatterPlot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { ScatterChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n DataZoomInsideComponent,\n DataZoomSliderComponent,\n GridComponent,\n LegendComponent,\n MarkLineComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useDataZoom,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport {\n Arrayable,\n HvAxisChartCommonProps,\n HvChartCommonProps,\n} from \"../types/common\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\n\n// Register chart components\necharts.use([\n ScatterChart,\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n MarkLineComponent,\n]);\n\nexport interface HvScatterPlotClasses extends HvChartTooltipClasses {}\n\nexport interface HvScatterPlotProps\n extends HvChartCommonProps,\n Omit<HvAxisChartCommonProps, \"stack\"> {\n /** Columns to measure on the plot. */\n measures: Arrayable<HvScatterPlotMeasure>;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvScatterPlotClasses;\n}\n\n/**\n * A scatter plot is a type of chart which displays dots to represent two numeric variables.\n * This type of chart is used to determine the relationship between two variables.\n */\nexport const HvScatterPlot = forwardRef<ReactECharts, HvScatterPlotProps>(\n function HvScatterPlot(props, ref) {\n const {\n yAxis,\n xAxis,\n horizontalRangeSlider,\n grid,\n data,\n groupBy,\n splitBy,\n sortBy,\n filters,\n measures,\n seriesNameFormatter,\n legend,\n classes,\n tooltip,\n width,\n height,\n onOptionChange,\n ...others\n } = props;\n\n const { data: chartData, mapping: measuresMapping } = useData({\n data,\n groupBy,\n measures,\n splitBy,\n sortBy,\n filters,\n });\n\n const chartDataset = useDataset(chartData);\n\n const chartYAxis = useYAxis({\n axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n });\n\n const chartXAxis = useXAxis({ type: \"continuous\", ...xAxis });\n\n const chartSlider = useDataZoom({\n showHorizontal: horizontalRangeSlider?.show,\n });\n\n const chartGrid = useGrid({ ...grid });\n\n const chartSeries = useSeries({\n type: \"scatter\",\n data: chartData,\n groupBy,\n measuresMapping,\n nameFormatter: seriesNameFormatter,\n });\n\n const chartLegend = useLegend({\n ...legend,\n series: chartSeries.series,\n });\n\n const chartTooltip = useTooltip({\n ...tooltip,\n trigger: \"axis\",\n measuresMapping,\n classes,\n });\n\n const option = useOption({\n option: {\n ...chartYAxis,\n ...chartXAxis,\n ...chartSlider,\n ...chartGrid,\n ...chartDataset,\n ...chartSeries,\n ...chartLegend,\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":["HvScatterPlot"],"mappings":";;;;;;;;;;;;;;;;AAoCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAiBM,MAAM,gBAAgB;AAAA,EAC3B,SAASA,eAAc,OAAO,KAAK;AAC3B,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;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AAEJ,UAAM,EAAE,MAAM,WAAW,SAAS,gBAAA,IAAoB,QAAQ;AAAA,MAC5D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,IAAA,CAC7D;AAED,UAAM,aAAa,SAAS,EAAE,MAAM,cAAc,GAAG,OAAO;AAE5D,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,MAAM;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,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,IACN;AAAA,EAAA;AAGN;"}
|
|
@@ -8,7 +8,7 @@ import { useOption } from "../hooks/useOption.js";
|
|
|
8
8
|
import { HvBaseChart } from "../BaseChart/BaseChart.js";
|
|
9
9
|
echarts.use([TreemapChart, TooltipComponent]);
|
|
10
10
|
const HvTreemapChart = forwardRef(
|
|
11
|
-
(props, ref)
|
|
11
|
+
function HvTreemapChart2(props, ref) {
|
|
12
12
|
const {
|
|
13
13
|
name,
|
|
14
14
|
data,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Treemap.js","sources":["../../../src/Treemap/Treemap.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { TreemapChart } from \"echarts/charts\";\nimport { TooltipComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartTooltipClasses, useOption, useTooltip } from \"../hooks\";\nimport { HvChartTooltip } from \"../types\";\nimport { HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([TreemapChart, TooltipComponent]);\n\nexport type HvTreemapData = {\n [propName: string]:\n | string\n | number\n | number[]\n | HvTreemapData[]\n | undefined\n | null;\n children?: HvTreemapData[];\n name?: string;\n value?: number[];\n};\n\nexport interface HvTreemapChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvTreemapChartProps\n extends Omit<\n HvChartCommonProps,\n \"data\" | \"groupBy\" | \"sortBy\" | \"grid\" | \"legend\" | \"tooltip\" | \"filters\"\n > {\n /** The name of the treemap */\n name?: string;\n /** The data to use on the treemap */\n data?: HvTreemapData[];\n /** The tooltip options. */\n tooltip?: Omit<HvChartTooltip, \"type\">;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTreemapChartClasses;\n}\n\n/**\n * A tree map chart visually represents hierarchical data using nested rectangles, with each rectangle's size proportional to the value it represents.\n */\nexport const HvTreemapChart = forwardRef<ReactECharts, HvTreemapChartProps>(\n (props, ref)
|
|
1
|
+
{"version":3,"file":"Treemap.js","sources":["../../../src/Treemap/Treemap.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { TreemapChart } from \"echarts/charts\";\nimport { TooltipComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartTooltipClasses, useOption, useTooltip } from \"../hooks\";\nimport { HvChartTooltip } from \"../types\";\nimport { HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([TreemapChart, TooltipComponent]);\n\nexport type HvTreemapData = {\n [propName: string]:\n | string\n | number\n | number[]\n | HvTreemapData[]\n | undefined\n | null;\n children?: HvTreemapData[];\n name?: string;\n value?: number[];\n};\n\nexport interface HvTreemapChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvTreemapChartProps\n extends Omit<\n HvChartCommonProps,\n \"data\" | \"groupBy\" | \"sortBy\" | \"grid\" | \"legend\" | \"tooltip\" | \"filters\"\n > {\n /** The name of the treemap */\n name?: string;\n /** The data to use on the treemap */\n data?: HvTreemapData[];\n /** The tooltip options. */\n tooltip?: Omit<HvChartTooltip, \"type\">;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTreemapChartClasses;\n}\n\n/**\n * A tree map chart visually represents hierarchical data using nested rectangles, with each rectangle's size proportional to the value it represents.\n */\nexport const HvTreemapChart = forwardRef<ReactECharts, HvTreemapChartProps>(\n function HvTreemapChart(props, ref) {\n const {\n name,\n data,\n classes,\n width,\n height,\n tooltip,\n onOptionChange,\n ...others\n } = props;\n\n const chartTooltip = useTooltip({\n ...tooltip,\n type: \"single\",\n classes,\n });\n\n const option = useOption({\n option: {\n series: [\n {\n name,\n type: \"treemap\",\n data,\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":["HvTreemapChart"],"mappings":";;;;;;;;AAYA,QAAQ,IAAI,CAAC,cAAc,gBAAgB,CAAC;AAmCrC,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBAAe,OAAO,KAAK;AAC5B,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AAEJ,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,MAAM;AAAA,MACN;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN;AAAA,UAAA;AAAA,QAEJ;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,IACN;AAAA,EAAA;AAGN;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.15.
|
|
3
|
+
"version": "5.15.10",
|
|
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-utils": "^0.2.
|
|
37
|
-
"@hitachivantara/uikit-styles": "^5.40.
|
|
36
|
+
"@hitachivantara/uikit-react-utils": "^0.2.18",
|
|
37
|
+
"@hitachivantara/uikit-styles": "^5.40.3"
|
|
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": "6a098fbf98283ef8dc3d57e8cf167e0499af837c",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|
|
49
49
|
"types": "./dist/types/index.d.ts",
|