@hitachivantara/uikit-react-viz 5.6.38 → 5.6.40
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/esm/BarChart/{BarChart.mjs → BarChart.js} +12 -12
- package/dist/esm/BarChart/BarChart.js.map +1 -0
- package/dist/esm/BaseChart/{BaseChart.mjs → BaseChart.js} +2 -2
- package/dist/esm/BaseChart/BaseChart.js.map +1 -0
- package/dist/esm/ConfusionMatrix/{ConfusionMatrix.mjs → ConfusionMatrix.js} +12 -12
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.js.map +1 -0
- package/dist/esm/ConfusionMatrix/{ConfusionMatrix.styles.mjs → ConfusionMatrix.styles.js} +1 -1
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.styles.js.map +1 -0
- package/dist/esm/ConfusionMatrix/{utils.mjs → utils.js} +1 -1
- package/dist/esm/ConfusionMatrix/utils.js.map +1 -0
- package/dist/esm/DonutChart/{DonutChart.mjs → DonutChart.js} +9 -9
- package/dist/esm/DonutChart/DonutChart.js.map +1 -0
- package/dist/esm/LineChart/{LineChart.mjs → LineChart.js} +12 -12
- package/dist/esm/LineChart/LineChart.js.map +1 -0
- package/dist/esm/hooks/tooltip/{styles.mjs → styles.js} +1 -1
- package/dist/esm/hooks/tooltip/styles.js.map +1 -0
- package/dist/esm/hooks/tooltip/{useTooltip.mjs → useTooltip.js} +3 -3
- package/dist/esm/hooks/tooltip/useTooltip.js.map +1 -0
- package/dist/esm/hooks/{useData.mjs → useData.js} +2 -2
- package/dist/esm/hooks/useData.js.map +1 -0
- package/dist/esm/hooks/{useDataZoom.mjs → useDataZoom.js} +1 -1
- package/dist/esm/hooks/useDataZoom.js.map +1 -0
- package/dist/esm/hooks/{useDataset.mjs → useDataset.js} +1 -1
- package/dist/esm/hooks/useDataset.js.map +1 -0
- package/dist/esm/hooks/{useGrid.mjs → useGrid.js} +1 -1
- package/dist/esm/hooks/useGrid.js.map +1 -0
- package/dist/esm/hooks/{useLegend.mjs → useLegend.js} +2 -2
- package/dist/esm/hooks/useLegend.js.map +1 -0
- package/dist/esm/hooks/{useOption.mjs → useOption.js} +1 -1
- package/dist/esm/hooks/useOption.js.map +1 -0
- package/dist/esm/hooks/{useSeries.mjs → useSeries.js} +2 -2
- package/dist/esm/hooks/useSeries.js.map +1 -0
- package/dist/esm/hooks/{useVisualMap.mjs → useVisualMap.js} +2 -2
- package/dist/esm/hooks/useVisualMap.js.map +1 -0
- package/dist/esm/hooks/{useVizTheme.mjs → useVizTheme.js} +2 -2
- package/dist/esm/hooks/useVizTheme.js.map +1 -0
- package/dist/esm/hooks/{useXAxis.mjs → useXAxis.js} +2 -2
- package/dist/esm/hooks/useXAxis.js.map +1 -0
- package/dist/esm/hooks/{useYAxis.mjs → useYAxis.js} +2 -2
- package/dist/esm/hooks/useYAxis.js.map +1 -0
- package/dist/esm/{index.mjs → index.js} +6 -6
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/providers/{Provider.mjs → Provider.js} +2 -2
- package/dist/esm/providers/Provider.js.map +1 -0
- package/dist/esm/utils/{index.mjs → index.js} +1 -1
- package/dist/esm/utils/index.js.map +1 -0
- package/dist/esm/utils/{registerTheme.mjs → registerTheme.js} +1 -1
- package/dist/esm/utils/registerTheme.js.map +1 -0
- package/package.json +5 -5
- package/dist/esm/BarChart/BarChart.mjs.map +0 -1
- package/dist/esm/BaseChart/BaseChart.mjs.map +0 -1
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.mjs.map +0 -1
- package/dist/esm/ConfusionMatrix/ConfusionMatrix.styles.mjs.map +0 -1
- package/dist/esm/ConfusionMatrix/utils.mjs.map +0 -1
- package/dist/esm/DonutChart/DonutChart.mjs.map +0 -1
- package/dist/esm/LineChart/LineChart.mjs.map +0 -1
- package/dist/esm/hooks/tooltip/styles.mjs.map +0 -1
- package/dist/esm/hooks/tooltip/useTooltip.mjs.map +0 -1
- package/dist/esm/hooks/useData.mjs.map +0 -1
- package/dist/esm/hooks/useDataZoom.mjs.map +0 -1
- package/dist/esm/hooks/useDataset.mjs.map +0 -1
- package/dist/esm/hooks/useGrid.mjs.map +0 -1
- package/dist/esm/hooks/useLegend.mjs.map +0 -1
- package/dist/esm/hooks/useOption.mjs.map +0 -1
- package/dist/esm/hooks/useSeries.mjs.map +0 -1
- package/dist/esm/hooks/useVisualMap.mjs.map +0 -1
- package/dist/esm/hooks/useVizTheme.mjs.map +0 -1
- package/dist/esm/hooks/useXAxis.mjs.map +0 -1
- package/dist/esm/hooks/useYAxis.mjs.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/providers/Provider.mjs.map +0 -1
- package/dist/esm/utils/index.mjs.map +0 -1
- package/dist/esm/utils/registerTheme.mjs.map +0 -1
|
@@ -3,17 +3,17 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import * as echarts from "echarts/core";
|
|
4
4
|
import { BarChart } from "echarts/charts";
|
|
5
5
|
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent } from "echarts/components";
|
|
6
|
-
import { useData } from "../hooks/useData.
|
|
7
|
-
import { useDataset } from "../hooks/useDataset.
|
|
8
|
-
import { useYAxis } from "../hooks/useYAxis.
|
|
9
|
-
import { useXAxis } from "../hooks/useXAxis.
|
|
10
|
-
import { useDataZoom } from "../hooks/useDataZoom.
|
|
11
|
-
import { useGrid } from "../hooks/useGrid.
|
|
12
|
-
import { useSeries } from "../hooks/useSeries.
|
|
13
|
-
import { useLegend } from "../hooks/useLegend.
|
|
14
|
-
import { useTooltip } from "../hooks/tooltip/useTooltip.
|
|
15
|
-
import { useOption } from "../hooks/useOption.
|
|
16
|
-
import { HvBaseChart } from "../BaseChart/BaseChart.
|
|
6
|
+
import { useData } from "../hooks/useData.js";
|
|
7
|
+
import { useDataset } from "../hooks/useDataset.js";
|
|
8
|
+
import { useYAxis } from "../hooks/useYAxis.js";
|
|
9
|
+
import { useXAxis } from "../hooks/useXAxis.js";
|
|
10
|
+
import { useDataZoom } from "../hooks/useDataZoom.js";
|
|
11
|
+
import { useGrid } from "../hooks/useGrid.js";
|
|
12
|
+
import { useSeries } from "../hooks/useSeries.js";
|
|
13
|
+
import { useLegend } from "../hooks/useLegend.js";
|
|
14
|
+
import { useTooltip } from "../hooks/tooltip/useTooltip.js";
|
|
15
|
+
import { useOption } from "../hooks/useOption.js";
|
|
16
|
+
import { HvBaseChart } from "../BaseChart/BaseChart.js";
|
|
17
17
|
echarts.use([
|
|
18
18
|
BarChart,
|
|
19
19
|
DatasetComponent,
|
|
@@ -99,4 +99,4 @@ const HvBarChart = forwardRef(
|
|
|
99
99
|
export {
|
|
100
100
|
HvBarChart
|
|
101
101
|
};
|
|
102
|
-
//# sourceMappingURL=BarChart.
|
|
102
|
+
//# sourceMappingURL=BarChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarChart.js","sources":["../../../src/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n useXAxis,\n useYAxis,\n useDataZoom,\n useGrid,\n useData,\n useDataset,\n useSeries,\n useLegend,\n useTooltip,\n useOption,\n HvChartTooltipClasses,\n} from \"../hooks\";\n\nimport { HvBarChartMeasures } from \"../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } 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]);\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) => {\n const {\n yAxis,\n xAxis,\n horizontal = false,\n horizontalRangeSlider,\n grid,\n data,\n groupBy,\n splitBy,\n sortBy,\n stack,\n seriesNameFormatter,\n measures,\n legend,\n tooltip,\n classes,\n height,\n width,\n onOptionChange,\n } = props;\n\n const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\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 measures,\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 measures,\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 ref={ref} option={option} width={width} height={height} />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAkBM,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,QAAQ;AACR,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,IACE,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,QAAQ,SAAS,UAAU;AAEhE,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,KAAM,CAAA;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;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
|
|
@@ -5,7 +5,7 @@ import { AriaComponent } from "echarts/components";
|
|
|
5
5
|
import { CanvasRenderer } from "echarts/renderers";
|
|
6
6
|
import * as echarts from "echarts/core";
|
|
7
7
|
import ReactECharts from "echarts-for-react/lib/core";
|
|
8
|
-
import { useVizTheme } from "../hooks/useVizTheme.
|
|
8
|
+
import { useVizTheme } from "../hooks/useVizTheme.js";
|
|
9
9
|
echarts.use([CanvasRenderer, AriaComponent]);
|
|
10
10
|
const HvBaseChart = forwardRef(
|
|
11
11
|
(props, ref) => {
|
|
@@ -52,4 +52,4 @@ const HvBaseChart = forwardRef(
|
|
|
52
52
|
export {
|
|
53
53
|
HvBaseChart
|
|
54
54
|
};
|
|
55
|
-
//# sourceMappingURL=BaseChart.
|
|
55
|
+
//# sourceMappingURL=BaseChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseChart.js","sources":["../../../src/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { useVizTheme } from \"../hooks\";\nimport { HvEChartsOption } from \"../types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\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) => {\n const { option, width, height } = props;\n\n const { theme } = useVizTheme();\n\n const currentTheme = useRef<string | undefined>(theme);\n const chartRef = useRef<ReactECharts>(null);\n const isMounted = useRef<boolean>(false);\n\n const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n useEffect(() => {\n if (!isMounted.current) {\n isMounted.current = true;\n return;\n }\n\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 instance.setOption(option, {\n replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n });\n }, [theme, option]);\n\n return (\n <ReactECharts\n ref={forkedRef}\n echarts={echarts}\n option={initialOption}\n theme={theme}\n notMerge\n style={{\n width: width || \"100%\",\n height: height || \"100%\",\n }}\n />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;AAaA,QAAQ,IAAI,CAAC,gBAAgB,aAAa,CAAC;AAcpC,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,QAAQ,OAAO,OAAA,IAAW;AAE5B,UAAA,EAAE,UAAU;AAEZ,UAAA,eAAe,OAA2B,KAAK;AAC/C,UAAA,WAAW,OAAqB,IAAI;AACpC,UAAA,YAAY,OAAgB,KAAK;AAEjC,UAAA,YAAY,WAAyB,KAAK,QAAQ;AAExD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAA0B,MAAM;AAE1E,cAAU,MAAM;AACV,UAAA,CAAC,UAAU,SAAS;AACtB,kBAAU,UAAU;AACpB;AAAA,MACF;AAII,UAAA,UAAU,aAAa,SAAS;AAClC,yBAAiB,MAAM;AACvB,qBAAa,UAAU;AACvB;AAAA,MACF;AAEM,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;AAEf,eAAS,UAAU,QAAQ;AAAA,QACzB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,MAAA,CACrD;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,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
|
|
@@ -3,17 +3,17 @@ import { forwardRef, useMemo } from "react";
|
|
|
3
3
|
import * as echarts from "echarts/core";
|
|
4
4
|
import { HeatmapChart } from "echarts/charts";
|
|
5
5
|
import { VisualMapComponent, GridComponent, TooltipComponent } from "echarts/components";
|
|
6
|
-
import { getGroupKey } from "../utils/index.
|
|
7
|
-
import { useClasses } from "./ConfusionMatrix.styles.
|
|
8
|
-
import { useColorScale, useSeries, useGridLayout } from "./utils.
|
|
9
|
-
import { useVisualMap } from "../hooks/useVisualMap.
|
|
10
|
-
import { useData } from "../hooks/useData.
|
|
11
|
-
import { useTooltip } from "../hooks/tooltip/useTooltip.
|
|
12
|
-
import { useYAxis } from "../hooks/useYAxis.
|
|
13
|
-
import { useXAxis } from "../hooks/useXAxis.
|
|
14
|
-
import { useGrid } from "../hooks/useGrid.
|
|
15
|
-
import { useOption } from "../hooks/useOption.
|
|
16
|
-
import { HvBaseChart } from "../BaseChart/BaseChart.
|
|
6
|
+
import { getGroupKey } from "../utils/index.js";
|
|
7
|
+
import { useClasses } from "./ConfusionMatrix.styles.js";
|
|
8
|
+
import { useColorScale, useSeries, useGridLayout } from "./utils.js";
|
|
9
|
+
import { useVisualMap } from "../hooks/useVisualMap.js";
|
|
10
|
+
import { useData } from "../hooks/useData.js";
|
|
11
|
+
import { useTooltip } from "../hooks/tooltip/useTooltip.js";
|
|
12
|
+
import { useYAxis } from "../hooks/useYAxis.js";
|
|
13
|
+
import { useXAxis } from "../hooks/useXAxis.js";
|
|
14
|
+
import { useGrid } from "../hooks/useGrid.js";
|
|
15
|
+
import { useOption } from "../hooks/useOption.js";
|
|
16
|
+
import { HvBaseChart } from "../BaseChart/BaseChart.js";
|
|
17
17
|
echarts.use([
|
|
18
18
|
HeatmapChart,
|
|
19
19
|
VisualMapComponent,
|
|
@@ -159,4 +159,4 @@ const HvConfusionMatrix = forwardRef((props, ref) => {
|
|
|
159
159
|
export {
|
|
160
160
|
HvConfusionMatrix
|
|
161
161
|
};
|
|
162
|
-
//# sourceMappingURL=ConfusionMatrix.
|
|
162
|
+
//# sourceMappingURL=ConfusionMatrix.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConfusionMatrix.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n VisualMapComponent,\n GridComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvVisualMapHookProps,\n useData,\n useGrid,\n useOption,\n useTooltip,\n useVisualMap,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { getGroupKey } from \"../utils\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n HvChartCommonProps,\n HvChartXAxis,\n HvChartYAxis,\n} from \"../types/common\";\nimport { HvChartTooltip } from \"../types/tooltip\";\nimport { HvConfusionMatrixMeasure } from \"../types/measures\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\nimport {\n HvConfusionMatrixFormat,\n HvConfusionMatrixColorScale,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\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 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 } = props;\n\n const { classes } = useClasses(classesProp);\n\n const groupByKey = getGroupKey(groupBy);\n\n const 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 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),\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} />;\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ConfusionMatrix.styles.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvConfusionMatrix\",\n {\n tooltipRoot: {\n backgroundColor: theme.colors.atmo1,\n width: \"fit-content\",\n minWidth: 150,\n boxShadow: theme.colors.shadow,\n zIndex: theme.zIndices.sticky,\n },\n tooltipContainer: {\n padding: theme.spacing(\"15px\", \"sm\"),\n display: \"flex\",\n flexDirection: \"column\",\n },\n tooltipText: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,aAAa;AAAA,MACX,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,MAAM,OAAO;AAAA,MACxB,QAAQ,MAAM,SAAS;AAAA,IACzB;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS,MAAM,QAAQ,QAAQ,IAAI;AAAA,MACnC,SAAS;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,aAAa;AAAA,MACX,YAAY,MAAM,WAAW;AAAA,MAC7B,YAAY,MAAM,YAAY;AAAA,MAC9B,UAAU,MAAM,UAAU;AAAA,MAC1B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,EACF;AACF;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"../types/common\";\n\nimport {\n HvConfusionMatrixColorScale,\n HvConfusionMatrixFormat,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n data,\n delta,\n custom,\n filterKey,\n}: {\n data: ColumnTable;\n delta: boolean;\n filterKey: string;\n custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n const { colors } = useTheme();\n\n const colorScale = useMemo(() => {\n if (custom == null && delta) {\n return;\n }\n\n if (custom && typeof custom[0] === \"object\") {\n return {\n pieces: (custom as HvConfusionMatrixColorScale[]).reduce(\n (acc: HvConfusionMatrixColorScale[], curr) => {\n acc.push({\n ...curr,\n color: colors?.[curr.color] || curr.color,\n });\n return acc;\n },\n []\n ),\n };\n }\n\n const flatData = data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce((acc: number[], c: string) => {\n acc.push(...data.array(c));\n return acc;\n }, []);\n const max = Math.max(...flatData);\n const min = Math.min(...flatData);\n\n return {\n colorScale: custom || [colors?.base_light || \"\", colors?.cat3 || \"\"],\n max,\n min,\n };\n }, [colors, custom, data, filterKey, delta]);\n\n return colorScale;\n};\n\nexport const useSeries = ({\n data,\n filterKey,\n delta,\n valuesProps,\n}: {\n data: ColumnTable;\n filterKey: string;\n delta: boolean;\n valuesProps?: HvConfusionMatrixValuesProps;\n}) => {\n const { colors } = useTheme();\n\n const getDeltaColor = useCallback(\n (value: number, diagonal: boolean) => {\n if ((diagonal && value > 0) || (!diagonal && value < 0)) {\n return colors?.positive;\n }\n if ((diagonal && value < 0) || (!diagonal && value > 0)) {\n return colors?.negative;\n }\n\n return colors?.base_light;\n },\n [colors]\n );\n\n const chartSeries = useMemo(() => {\n return {\n series: {\n id: `series~${filterKey}`,\n type: \"heatmap\",\n label: {\n show: true,\n ...valuesProps,\n ...(valuesProps?.color && {\n color: colors?.[valuesProps.color] || valuesProps.color,\n }),\n },\n emphasis: {\n disabled: true,\n },\n data: data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce((acc: (string | number)[][], c: string, j) => {\n const row: (string | number)[][] = data\n .array(c)\n .reduce((racc, rv, i) => {\n racc.push({\n value: [data.array(filterKey)[i], c, rv != null ? rv : \"-\"],\n ...(delta && {\n visualMap: false,\n itemStyle: {\n color: getDeltaColor(rv, i === j),\n },\n }),\n });\n return racc;\n }, []);\n\n acc.push(...row);\n return acc;\n }, []),\n },\n };\n }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);\n\n return chartSeries;\n};\n\nconst SQUARE_SIZE = 52;\n\nexport const useGridLayout = ({\n data,\n filterKey,\n format,\n xAxisPosition,\n visualMapVisible,\n visualMapYPosition,\n}: {\n xAxisPosition: HvChartXAxis[\"position\"];\n data: ColumnTable;\n filterKey: string;\n format: HvConfusionMatrixFormat;\n visualMapVisible: boolean;\n visualMapYPosition: \"top\" | \"center\" | \"bottom\";\n}) => {\n const size = useMemo(() => {\n const nCols = data.array(filterKey).length;\n const nRows = data.columnNames().filter((p) => p !== filterKey).length;\n const itemHeight = format === \"square\" ? SQUARE_SIZE : SQUARE_SIZE / 2;\n\n return {\n padding: {\n bottom:\n xAxisPosition === \"bottom\" ||\n (visualMapVisible && visualMapYPosition === \"bottom\")\n ? 60\n : 20,\n top:\n xAxisPosition === \"top\" ||\n (visualMapVisible && visualMapYPosition === \"top\")\n ? 60\n : 20,\n ...(visualMapVisible &&\n visualMapYPosition === \"bottom\" &&\n xAxisPosition === \"bottom\" && {\n bottom: 100,\n }),\n ...(visualMapVisible &&\n visualMapYPosition === \"top\" &&\n xAxisPosition === \"top\" && {\n top: 100,\n }),\n left: 80,\n right: 80,\n },\n size: {\n height: Math.max(itemHeight * nRows, itemHeight * 8),\n width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8),\n },\n };\n }, [\n data,\n filterKey,\n format,\n visualMapVisible,\n visualMapYPosition,\n xAxisPosition,\n ]);\n\n return size;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -3,14 +3,14 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import * as echarts from "echarts/core";
|
|
4
4
|
import { PieChart } from "echarts/charts";
|
|
5
5
|
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from "echarts/components";
|
|
6
|
-
import { useData } from "../hooks/useData.
|
|
7
|
-
import { useDataset } from "../hooks/useDataset.
|
|
8
|
-
import { useSeries } from "../hooks/useSeries.
|
|
9
|
-
import { useLegend } from "../hooks/useLegend.
|
|
10
|
-
import { useTooltip } from "../hooks/tooltip/useTooltip.
|
|
11
|
-
import { useGrid } from "../hooks/useGrid.
|
|
12
|
-
import { useOption } from "../hooks/useOption.
|
|
13
|
-
import { HvBaseChart } from "../BaseChart/BaseChart.
|
|
6
|
+
import { useData } from "../hooks/useData.js";
|
|
7
|
+
import { useDataset } from "../hooks/useDataset.js";
|
|
8
|
+
import { useSeries } from "../hooks/useSeries.js";
|
|
9
|
+
import { useLegend } from "../hooks/useLegend.js";
|
|
10
|
+
import { useTooltip } from "../hooks/tooltip/useTooltip.js";
|
|
11
|
+
import { useGrid } from "../hooks/useGrid.js";
|
|
12
|
+
import { useOption } from "../hooks/useOption.js";
|
|
13
|
+
import { HvBaseChart } from "../BaseChart/BaseChart.js";
|
|
14
14
|
echarts.use([
|
|
15
15
|
PieChart,
|
|
16
16
|
DatasetComponent,
|
|
@@ -74,4 +74,4 @@ const HvDonutChart = forwardRef(
|
|
|
74
74
|
export {
|
|
75
75
|
HvDonutChart
|
|
76
76
|
};
|
|
77
|
-
//# sourceMappingURL=DonutChart.
|
|
77
|
+
//# sourceMappingURL=DonutChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DonutChart.js","sources":["../../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n} from \"../hooks\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvDonutChartMeasure } from \"../types\";\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) => {\n const {\n data,\n groupBy,\n classes,\n legend,\n tooltip,\n measure: measures,\n sortBy,\n grid,\n width,\n height,\n type = \"regular\",\n slicesNameFormatter,\n onOptionChange,\n } = props;\n\n const chartData = useData({ data, groupBy, measures, sortBy });\n\n const chartDataset = useDataset(chartData);\n\n const chartSeries = useSeries({\n type: \"pie\",\n data: chartData,\n groupBy,\n measures,\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 measures,\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 ref={ref} option={option} width={width} height={height} />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AA4BA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAmBM,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACE,IAAA;AAEJ,UAAM,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,QAAQ;AAEvD,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,KAAM,CAAA;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;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
|
|
@@ -3,17 +3,17 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import * as echarts from "echarts/core";
|
|
4
4
|
import { LineChart } from "echarts/charts";
|
|
5
5
|
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent } from "echarts/components";
|
|
6
|
-
import { useData } from "../hooks/useData.
|
|
7
|
-
import { useDataset } from "../hooks/useDataset.
|
|
8
|
-
import { useYAxis } from "../hooks/useYAxis.
|
|
9
|
-
import { useXAxis } from "../hooks/useXAxis.
|
|
10
|
-
import { useDataZoom } from "../hooks/useDataZoom.
|
|
11
|
-
import { useGrid } from "../hooks/useGrid.
|
|
12
|
-
import { useSeries } from "../hooks/useSeries.
|
|
13
|
-
import { useLegend } from "../hooks/useLegend.
|
|
14
|
-
import { useTooltip } from "../hooks/tooltip/useTooltip.
|
|
15
|
-
import { useOption } from "../hooks/useOption.
|
|
16
|
-
import { HvBaseChart } from "../BaseChart/BaseChart.
|
|
6
|
+
import { useData } from "../hooks/useData.js";
|
|
7
|
+
import { useDataset } from "../hooks/useDataset.js";
|
|
8
|
+
import { useYAxis } from "../hooks/useYAxis.js";
|
|
9
|
+
import { useXAxis } from "../hooks/useXAxis.js";
|
|
10
|
+
import { useDataZoom } from "../hooks/useDataZoom.js";
|
|
11
|
+
import { useGrid } from "../hooks/useGrid.js";
|
|
12
|
+
import { useSeries } from "../hooks/useSeries.js";
|
|
13
|
+
import { useLegend } from "../hooks/useLegend.js";
|
|
14
|
+
import { useTooltip } from "../hooks/tooltip/useTooltip.js";
|
|
15
|
+
import { useOption } from "../hooks/useOption.js";
|
|
16
|
+
import { HvBaseChart } from "../BaseChart/BaseChart.js";
|
|
17
17
|
echarts.use([
|
|
18
18
|
LineChart,
|
|
19
19
|
DatasetComponent,
|
|
@@ -97,4 +97,4 @@ const HvLineChart = forwardRef(
|
|
|
97
97
|
export {
|
|
98
98
|
HvLineChart
|
|
99
99
|
};
|
|
100
|
-
//# sourceMappingURL=LineChart.
|
|
100
|
+
//# sourceMappingURL=LineChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineChart.js","sources":["../../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n useYAxis,\n useXAxis,\n useDataZoom,\n useGrid,\n useData,\n useDataset,\n useSeries,\n useLegend,\n useTooltip,\n HvChartTooltipClasses,\n useOption,\n} from \"../hooks\";\n\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } 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]);\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) => {\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 measures,\n stack,\n seriesNameFormatter,\n legend,\n classes,\n tooltip,\n width,\n height,\n onOptionChange,\n } = props;\n\n const chartData = useData({ data, groupBy, measures, splitBy, sortBy });\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 measures,\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 measures,\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 ref={ref} option={option} width={width} height={height} />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAuBM,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,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,IACE,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,SAAS,QAAQ;AAEhE,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,KAAM,CAAA;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;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/hooks/tooltip/styles.tsx"],"sourcesContent":["import { theme, createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvChartTooltip\", {\n /** Single tooltip styles */\n singleTooltipRoot: {\n width: \"fit-content\",\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n padding: theme.space.sm,\n display: \"flex\",\n },\n singleTooltipTitle: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n singleTooltipValue: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n marginLeft: theme.space.xs,\n },\n /** Multiple tooltip styles */\n multipleTooltipRoot: {\n width: \"fit-content\",\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n },\n multipleTooltipTitleContainer: {\n padding: `15px ${theme.space.sm}`,\n borderBottom: `3px solid ${theme.colors.atmo2}`,\n },\n multipleTooltipTitle: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n multipleTooltipValuesContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n\n \"& > *:not(:last-child)\": { paddingBottom: theme.space.sm },\n },\n multipleTooltipSeriesContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n multipleTooltipSeriesNameContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n marginRight: theme.space.sm,\n },\n multipleTooltipSeriesColor: {\n width: \"10px\",\n height: \"10px\",\n marginRight: \"5px\",\n },\n multipleTooltipSeriesName: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n multipleTooltipSeriesValue: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,YAAY,kBAAkB,cAAc,kBAAkB;AAAA;AAAA,EAE3E,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,MAAM;AAAA,IACrB,SAAS;AAAA,EACX;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,MAAM;AAAA,EAC1B;AAAA;AAAA,EAEA,qBAAqB;AAAA,IACnB,OAAO;AAAA,IACP,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,+BAA+B;AAAA,IAC7B,SAAS,QAAQ,MAAM,MAAM,EAAE;AAAA,IAC/B,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,sBAAsB;AAAA,IACpB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gCAAgC;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IAErB,0BAA0B,EAAE,eAAe,MAAM,MAAM,GAAG;AAAA,EAC5D;AAAA,EACA,gCAAgC;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,oCAAoC;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,4BAA4B;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AAAA,EACA,2BAA2B;AAAA,IACzB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,4BAA4B;AAAA,IAC1B,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCallback, useMemo } from "react";
|
|
2
|
-
import { getMeasure } from "../../utils/index.
|
|
3
|
-
import { useClasses } from "./styles.
|
|
2
|
+
import { getMeasure } from "../../utils/index.js";
|
|
3
|
+
import { useClasses } from "./styles.js";
|
|
4
4
|
const useTooltip = ({
|
|
5
5
|
measures = [],
|
|
6
6
|
classes,
|
|
@@ -113,4 +113,4 @@ const useTooltip = ({
|
|
|
113
113
|
export {
|
|
114
114
|
useTooltip
|
|
115
115
|
};
|
|
116
|
-
//# sourceMappingURL=useTooltip.
|
|
116
|
+
//# sourceMappingURL=useTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartTooltip,\n HvChartTooltipParams,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"../../types\";\nimport { getMeasure } from \"../../utils\";\nimport { HvEChartsOption } from \"../../types/common\";\n\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n seriesName: string;\n value: (string | number)[];\n encode: { [key: string]: number[] };\n color: string;\n dimensionNames: string[];\n name: string;\n seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n measures?:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n | HvDonutChartMeasure;\n trigger?: \"item\" | \"axis\";\n classes?: HvChartTooltipClasses;\n horizontal?: boolean;\n show?: HvChartTooltip[\"show\"];\n type?: HvChartTooltip[\"type\"];\n component?: HvChartTooltip[\"component\"];\n valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n measures = [],\n classes,\n component,\n show = true,\n horizontal = false,\n trigger = \"item\",\n type = \"multiple\",\n valueFormatter,\n titleFormatter,\n nameFormatter,\n}: HvTooltipHookProps) => {\n const { classes: hvClasses } = useClasses(classes);\n\n const renderTooltip = useCallback(\n (params: EChartsTooltipParams[]) => {\n const title =\n params[0].seriesType === \"pie\"\n ? params[0].seriesName\n : horizontal\n ? params[0].value[params[0].encode.y[0]]\n : params[0].value[params[0].encode.x[0]];\n\n const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n if (type === \"single\") {\n const measure = getMeasure(\n params[0].seriesType === \"pie\"\n ? params[0].name\n : horizontal\n ? params[0].dimensionNames[params[0].encode.x[0]]\n : params[0].dimensionNames[params[0].encode.y[0]],\n measures\n );\n\n const value =\n params[0].seriesType === \"pie\"\n ? params[0].value[params[0].encode.value[0]]\n : horizontal\n ? params[0].value[params[0].encode.x[0]]\n : params[0].value[params[0].encode.y[0]];\n\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : valueFormatter\n ? valueFormatter(value)\n : value;\n\n return `\n <div class=\"${hvClasses?.singleTooltipRoot}\">\n <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n </div>\n `;\n }\n\n return `\n <div class=\"${hvClasses?.multipleTooltipRoot}\">\n <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n <div>\n <p class=\"${\n hvClasses?.multipleTooltipTitle\n }\">${formattedTitle}</p>\n </div>\n </div>\n <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n ${params\n .map((s) => {\n const measure = getMeasure(\n s.seriesType === \"pie\"\n ? s.name\n : horizontal\n ? s.dimensionNames[s.encode.x[0]]\n : s.dimensionNames[s.encode.y[0]],\n measures\n );\n\n const value =\n s.seriesType === \"pie\"\n ? s.value[s.encode.value[0]]\n : horizontal\n ? s.value[s.encode.x[0]]\n : s.value[s.encode.y[0]];\n\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : valueFormatter\n ? valueFormatter(value)\n : value;\n\n const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n const formattedName = nameFormatter\n ? nameFormatter(name)\n : name;\n\n return `\n <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n </div>\n <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n </div>\n `;\n })\n .join(\" \")}\n </div>\n </div>\n `;\n },\n [\n hvClasses,\n horizontal,\n type,\n measures,\n nameFormatter,\n titleFormatter,\n valueFormatter,\n ]\n );\n\n const renderCustomTooltip = useCallback(\n (params: EChartsTooltipParams[]) => {\n if (typeof component === \"function\") {\n const values: HvChartTooltipParams = {\n title:\n params[0].seriesType === \"pie\"\n ? params[0].seriesName\n : horizontal\n ? params[0].value[params[0].encode.y[0]]\n : params[0].value[params[0].encode.x[0]],\n series: params.map((p) => {\n return {\n color: p.color,\n name:\n p.seriesType === \"heatmap\"\n ? String(p.value[p.encode.y[0]])\n : p.seriesType === \"pie\"\n ? p.name\n : p.seriesName,\n value:\n p.seriesType === \"pie\" || p.seriesType === \"heatmap\"\n ? p.value[p.encode.value[0]]\n : horizontal\n ? p.value[p.encode.x[0]]\n : p.value[p.encode.y[0]],\n };\n }),\n };\n\n return component(values);\n }\n\n return component;\n },\n [component, horizontal]\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"tooltip\">>(() => {\n return {\n tooltip: {\n confine: false,\n show,\n trigger,\n position: (point, params, dom, rect, size) => {\n return [point[0], point[1] - size.contentSize[1]];\n },\n formatter: (params) => {\n const tooltipParams = Array.isArray(params) ? params : [params];\n\n return component\n ? renderCustomTooltip(tooltipParams)\n : renderTooltip(tooltipParams);\n },\n },\n };\n }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n return option;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
2
|
import { internal, from, table, desc, not } from "arquero";
|
|
3
|
-
import { getGroupKey } from "../utils/index.
|
|
3
|
+
import { getGroupKey } from "../utils/index.js";
|
|
4
4
|
const getAgFunc = (func, field) => func === "count" ? "count()" : `${func}(d["${field}"])`;
|
|
5
5
|
const useData = ({
|
|
6
6
|
data,
|
|
@@ -102,4 +102,4 @@ const useData = ({
|
|
|
102
102
|
export {
|
|
103
103
|
useData
|
|
104
104
|
};
|
|
105
|
-
//# sourceMappingURL=useData.
|
|
105
|
+
//# sourceMappingURL=useData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { from, internal, not, table, desc } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartAggregation,\n HvChartOrder,\n HvLineChartMeasures,\n HvChartData,\n HvDonutChartMeasure,\n} from \"../types\";\nimport { getGroupKey } from \"../utils\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\nconst getAgFunc = (func: HvChartAggregation, field: string) =>\n func === \"count\" ? \"count()\" : `${func}(d[\"${field}\"])`;\n\ninterface HvDataHookProps {\n data: HvChartData;\n groupBy: HvChartCommonProps[\"groupBy\"];\n measures:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n | HvDonutChartMeasure;\n splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n sortBy?: HvChartCommonProps[\"sortBy\"];\n delta?: string;\n}\n\nexport const useData = ({\n data,\n groupBy,\n measures,\n sortBy,\n splitBy,\n delta,\n}: HvDataHookProps): internal.ColumnTable => {\n const groupByKey = getGroupKey(groupBy);\n\n const chartData = useMemo<ColumnTable>(() => {\n let tableData: ColumnTable;\n if (data instanceof internal.ColumnTable) {\n tableData = data;\n } else if (Array.isArray(data)) {\n tableData = from(data);\n } else {\n tableData = table(data);\n }\n\n const groupByFields = groupBy\n ? Array.isArray(groupBy)\n ? groupBy\n : [groupBy]\n : [];\n\n const splitByFields = Array.isArray(splitBy)\n ? splitBy\n : splitBy != null\n ? [splitBy]\n : [];\n\n const measuresFields: { [key: string]: string } =\n measures == null\n ? {}\n : typeof measures === \"string\"\n ? { [measures]: getAgFunc(\"sum\", measures) }\n : Array.isArray(measures)\n ? measures.reduce<{ [key: string]: string }>((acc, value) => {\n let field: string;\n let agFunction: HvChartAggregation;\n if (typeof value === \"string\") {\n field = value;\n agFunction = \"sum\";\n } else {\n field = value.field;\n agFunction = value.agg ?? \"sum\";\n }\n\n return {\n ...acc,\n [field]: getAgFunc(agFunction, field),\n };\n }, {})\n : {\n [measures.field]: getAgFunc(measures.agg ?? \"sum\", measures.field),\n };\n\n const sortByFields: { [key: string]: HvChartOrder } =\n sortBy == null\n ? {}\n : typeof sortBy === \"string\"\n ? { [sortBy]: \"asc\" }\n : Array.isArray(sortBy)\n ? sortBy.reduce<{ [key: string]: HvChartOrder }>((acc, value) => {\n let field: string;\n let orderFunction: HvChartOrder;\n if (typeof value === \"string\") {\n field = value;\n orderFunction = \"asc\";\n } else {\n field = value.field;\n orderFunction = value.order ?? \"asc\";\n }\n\n return {\n ...acc,\n [field]: orderFunction,\n };\n }, {})\n : { [sortBy.field]: sortBy.order ?? \"asc\" };\n\n const allFields = [\n ...groupByFields,\n ...splitByFields,\n ...Object.keys(measuresFields),\n ];\n\n // --- Confusion matrix ---\n // Recalculate the measures columns according to the delta column\n if (delta) {\n const deltaExpression = Object.keys(measuresFields).reduce(\n (acc, curr) => {\n return {\n ...acc,\n [curr]: `d => d.${curr} - d.${delta}`,\n };\n },\n {}\n );\n\n tableData = tableData.derive(deltaExpression);\n }\n\n // remove unneeded fields\n tableData = tableData.select(...allFields);\n\n // group by groupBy fields\n if (groupByFields.length > 0) {\n tableData = tableData.groupby(groupByFields);\n }\n\n if (splitByFields.length > 0) {\n // pivot by splitBy fields\n tableData = tableData.pivot(splitByFields, measuresFields);\n } else {\n // if there is no splitBy fields, just aggregate measures fields\n tableData = tableData.rollup(measuresFields);\n }\n\n // if grouped by multiple fields, create a new joint field\n // as the line chart doesn't implement hierarchical axis label grouping\n if (groupByFields.length > 1) {\n const expression = `d => ${groupByFields\n .map((field) => `d.${field}`)\n .join(\" + '_' + \")}`;\n\n tableData = tableData.derive(\n { [groupByKey]: expression },\n { after: groupByFields[groupByFields.length - 1] }\n );\n }\n\n // sort by sortBy fields\n if (Object.keys(sortByFields).length > 0) {\n tableData = tableData.orderby(\n ...Object.keys(sortByFields)\n // only sort by fields that are in the table, ignore the rest\n .filter((key) => allFields.includes(key))\n .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key))\n );\n }\n\n // if a derived field was created, remove the original fields\n if (groupByFields.length > 1) {\n tableData = tableData.select(not(...groupByFields));\n }\n\n return tableData;\n }, [data, groupBy, splitBy, measures, sortBy, delta, groupByKey]);\n\n return chartData;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDataZoom.js","sources":["../../../src/hooks/useDataZoom.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvEChartsOption } from \"../types/common\";\n\ninterface HvDataZoomHookProps {\n showHorizontal?: boolean;\n}\n\nexport const useDataZoom = ({ showHorizontal }: HvDataZoomHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"dataZoom\">>(() => {\n return {\n dataZoom: [\n {\n show: showHorizontal ?? false,\n type: \"slider\",\n orient: \"horizontal\",\n },\n {\n show: showHorizontal ?? false,\n type: \"inside\",\n orient: \"horizontal\",\n zoomOnMouseWheel: \"shift\",\n moveOnMouseWheel: true,\n },\n ],\n };\n }, [showHorizontal]);\n\n return option;\n};\n"],"names":[],"mappings":";AAQO,MAAM,cAAc,CAAC,EAAE,qBAA0C;AAChE,QAAA,SAAS,QAA2C,MAAM;AACvD,WAAA;AAAA,MACL,UAAU;AAAA,QACR;AAAA,UACE,MAAM,kBAAkB;AAAA,UACxB,MAAM;AAAA,UACN,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,UACE,MAAM,kBAAkB;AAAA,UACxB,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,kBAAkB;AAAA,UAClB,kBAAkB;AAAA,QACpB;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,cAAc,CAAC;AAEZ,SAAA;AACT;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDataset.js","sources":["../../../src/hooks/useDataset.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { internal } from \"arquero\";\n\nimport { HvEChartsOption } from \"../types/common\";\n\nexport const useDataset = (data: internal.ColumnTable) => {\n const option = useMemo<Pick<HvEChartsOption, \"dataset\">>(() => {\n return {\n dataset: {\n source: data.columnNames().reduce(\n (acc, c) => ({\n ...acc,\n [c]: data.array(c),\n }),\n {}\n ),\n },\n };\n }, [data]);\n\n return option;\n};\n"],"names":[],"mappings":";AAMa,MAAA,aAAa,CAAC,SAA+B;AAClD,QAAA,SAAS,QAA0C,MAAM;AACtD,WAAA;AAAA,MACL,SAAS;AAAA,QACP,QAAQ,KAAK,YAAA,EAAc;AAAA,UACzB,CAAC,KAAK,OAAO;AAAA,YACX,GAAG;AAAA,YACH,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC;AAAA,UAAA;AAAA,UAEnB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,IAAI,CAAC;AAEF,SAAA;AACT;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useGrid.js","sources":["../../../src/hooks/useGrid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartGrid } from \"../types\";\nimport { HvEChartsOption } from \"../types/common\";\n\ninterface HvGridHookProps {\n top?: HvChartGrid[\"top\"];\n bottom?: HvChartGrid[\"bottom\"];\n left?: HvChartGrid[\"left\"];\n right?: HvChartGrid[\"right\"];\n width?: number | string;\n height?: number | string;\n}\n\nexport const useGrid = ({\n top,\n left,\n right,\n bottom,\n width,\n height,\n}: HvGridHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"grid\">>(() => {\n return {\n // if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise\n grid: {\n ...(top != null && {\n top,\n }),\n ...(bottom != null && {\n bottom,\n }),\n ...(left != null && {\n left,\n }),\n ...(right != null && {\n right,\n }),\n ...(width != null && {\n width,\n }),\n ...(height != null && {\n height,\n }),\n },\n };\n }, [top, left, right, bottom, height, width]);\n\n return option;\n};\n"],"names":[],"mappings":";AAcO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACf,QAAA,SAAS,QAAuC,MAAM;AACnD,WAAA;AAAA;AAAA,MAEL,MAAM;AAAA,QACJ,GAAI,OAAO,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,GAAI,UAAU,QAAQ;AAAA,UACpB;AAAA,QACF;AAAA,QACA,GAAI,QAAQ,QAAQ;AAAA,UAClB;AAAA,QACF;AAAA,QACA,GAAI,SAAS,QAAQ;AAAA,UACnB;AAAA,QACF;AAAA,QACA,GAAI,SAAS,QAAQ;AAAA,UACnB;AAAA,QACF;AAAA,QACA,GAAI,UAAU,QAAQ;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,KAAK,MAAM,OAAO,QAAQ,QAAQ,KAAK,CAAC;AAErC,SAAA;AACT;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import { getLegendIcon } from "../utils/index.
|
|
2
|
+
import { getLegendIcon } from "../utils/index.js";
|
|
3
3
|
const useLegend = ({
|
|
4
4
|
series,
|
|
5
5
|
show,
|
|
@@ -41,4 +41,4 @@ const useLegend = ({
|
|
|
41
41
|
export {
|
|
42
42
|
useLegend
|
|
43
43
|
};
|
|
44
|
-
//# sourceMappingURL=useLegend.
|
|
44
|
+
//# sourceMappingURL=useLegend.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLegend.js","sources":["../../../src/hooks/useLegend.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"../utils\";\nimport { HvChartLegend, HvChartLegendIcon } from \"../types/legend\";\nimport { HvEChartsOption } from \"../types/common\";\n\ninterface HvLegendHookProps {\n show?: HvChartLegend[\"show\"];\n direction?: HvChartLegend[\"direction\"];\n position?: HvChartLegend[\"position\"];\n series?: Pick<HvEChartsOption, \"series.series\">;\n icon?: HvChartLegendIcon;\n formatter?: string | ((value?: string) => string);\n}\n\nexport const useLegend = ({\n series,\n show,\n icon,\n formatter,\n position: positionProp,\n direction = \"horizontal\",\n}: HvLegendHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"legend\">>(() => {\n const position: Record<string, string> = { y: positionProp?.y ?? \"top\" };\n if (positionProp?.x != null && positionProp?.x !== \"center\") {\n position[positionProp.x] = positionProp.x;\n } else {\n position.x = \"center\";\n }\n\n return {\n legend: {\n show: show ?? (Array.isArray(series) && series.length > 1),\n itemGap: 20,\n formatter,\n orient: direction,\n ...position,\n ...(icon && { icon: getLegendIcon(icon) }),\n ...(!icon && {\n data:\n show !== false && Array.isArray(series)\n ? series.map((s) => {\n return {\n name: s.name as string,\n icon: getLegendIcon(\n (s as any).areaStyle != null ? \"square\" : \"line\"\n ),\n };\n })\n : undefined,\n }),\n },\n };\n }, [series, show, icon, formatter, positionProp, direction]);\n\n return option;\n};\n"],"names":[],"mappings":";;AAeO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AACd,MAAyB;AACjB,QAAA,SAAS,QAAyC,MAAM;AAC5D,UAAM,WAAmC,EAAE,GAAG,cAAc,KAAK,MAAM;AACvE,QAAI,cAAc,KAAK,QAAQ,cAAc,MAAM,UAAU;AAClD,eAAA,aAAa,CAAC,IAAI,aAAa;AAAA,IAAA,OACnC;AACL,eAAS,IAAI;AAAA,IACf;AAEO,WAAA;AAAA,MACL,QAAQ;AAAA,QACN,MAAM,SAAS,MAAM,QAAQ,MAAM,KAAK,OAAO,SAAS;AAAA,QACxD,SAAS;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR,GAAG;AAAA,QACH,GAAI,QAAQ,EAAE,MAAM,cAAc,IAAI,EAAE;AAAA,QACxC,GAAI,CAAC,QAAQ;AAAA,UACX,MACE,SAAS,SAAS,MAAM,QAAQ,MAAM,IAClC,OAAO,IAAI,CAAC,MAAM;AACT,mBAAA;AAAA,cACL,MAAM,EAAE;AAAA,cACR,MAAM;AAAA,gBACH,EAAU,aAAa,OAAO,WAAW;AAAA,cAC5C;AAAA,YAAA;AAAA,UAEH,CAAA,IACD;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,QAAQ,MAAM,MAAM,WAAW,cAAc,SAAS,CAAC;AAEpD,SAAA;AACT;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOption.js","sources":["../../../src/hooks/useOption.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartCommonProps, HvEChartsOption } from \"../types/common\";\n\ninterface HvOptionHookProps {\n option: HvEChartsOption;\n onOptionChange?: HvChartCommonProps[\"onOptionChange\"];\n}\n\nexport const useOption = ({\n option: optionProp,\n onOptionChange,\n}: HvOptionHookProps) => {\n const option = useMemo<HvEChartsOption>(() => {\n // Common properties to all charts\n const baseOption = {\n aria: {\n enabled: true,\n },\n animation: false,\n };\n\n const opt = { ...baseOption, ...optionProp };\n\n return onOptionChange ? onOptionChange(opt) : opt;\n }, [onOptionChange, optionProp]);\n\n return option;\n};\n"],"names":[],"mappings":";AASO,MAAM,YAAY,CAAC;AAAA,EACxB,QAAQ;AAAA,EACR;AACF,MAAyB;AACjB,QAAA,SAAS,QAAyB,MAAM;AAE5C,UAAM,aAAa;AAAA,MACjB,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,WAAW;AAAA,IAAA;AAGb,UAAM,MAAM,EAAE,GAAG,YAAY,GAAG,WAAW;AAEpC,WAAA,iBAAiB,eAAe,GAAG,IAAI;AAAA,EAAA,GAC7C,CAAC,gBAAgB,UAAU,CAAC;AAExB,SAAA;AACT;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import { getGroupKey, getMeasure } from "../utils/index.
|
|
2
|
+
import { getGroupKey, getMeasure } from "../utils/index.js";
|
|
3
3
|
const useSeries = ({
|
|
4
4
|
groupBy,
|
|
5
5
|
type,
|
|
@@ -105,4 +105,4 @@ const useSeries = ({
|
|
|
105
105
|
export {
|
|
106
106
|
useSeries
|
|
107
107
|
};
|
|
108
|
-
//# sourceMappingURL=useSeries.
|
|
108
|
+
//# sourceMappingURL=useSeries.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSeries.js","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n BarSeriesOption,\n LineSeriesOption,\n PieSeriesOption,\n} from \"echarts/charts\";\n\nimport { internal } from \"arquero\";\n\nimport { getGroupKey, getMeasure } from \"../utils\";\nimport {\n HvBarChartMeasures,\n HvChartEmptyCellMode,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"../types\";\nimport {\n HvAxisChartCommonProps,\n HvChartCommonProps,\n HvEChartsOption,\n} from \"../types/common\";\nimport { BarFullMeasures, LineFullMeasures } from \"../types/measures\";\n\ninterface HvSeriesHookProps {\n type: \"line\" | \"bar\" | \"pie\";\n data: internal.ColumnTable;\n groupBy: HvChartCommonProps[\"groupBy\"];\n measures:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n | HvDonutChartMeasure;\n area?: boolean;\n areaOpacity?: number;\n emptyCellMode?: HvChartEmptyCellMode;\n stack?: HvAxisChartCommonProps[\"stack\"];\n nameFormatter?: HvAxisChartCommonProps[\"seriesNameFormatter\"];\n horizontal?: boolean;\n radius?: number | string | (number | string)[];\n}\n\nexport const useSeries = ({\n groupBy,\n type,\n data,\n measures,\n nameFormatter,\n stack,\n horizontal = false,\n area = false,\n areaOpacity = 0.5,\n emptyCellMode,\n radius,\n}: HvSeriesHookProps) => {\n const groupByKey = getGroupKey(groupBy);\n\n const option: Pick<HvEChartsOption, \"series\"> = useMemo<\n Pick<HvEChartsOption, \"series\">\n >(() => {\n return {\n series: data\n .columnNames()\n .filter((c) => c !== groupByKey)\n .map<LineSeriesOption | BarSeriesOption | PieSeriesOption>((c) => {\n const measure = getMeasure(c, measures);\n\n let pieOps: PieSeriesOption = {};\n let lineOps: LineSeriesOption = {};\n let barOps: BarSeriesOption = {};\n\n // pie\n if (type === \"pie\") {\n pieOps = {\n encode: {\n value: c,\n itemName: groupByKey,\n },\n labelLine: {\n show: false,\n },\n label: {\n show: false,\n },\n emphasis: {\n label: {\n show: false,\n },\n },\n radius,\n };\n }\n\n // line or bar\n if (type === \"line\" || type === \"bar\") {\n const sampling =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures | BarFullMeasures).sampling\n : undefined;\n const yAxisId =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures | BarFullMeasures).yAxis\n : undefined;\n const stackName =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures | BarFullMeasures).stack ??\n stack ??\n undefined\n : stack ?? undefined;\n\n const axisOps = {\n sampling,\n yAxisId,\n stack: stackName,\n encode: horizontal\n ? {\n x: c,\n y: groupByKey,\n }\n : {\n x: groupByKey,\n y: c,\n },\n };\n\n // bar\n if (type === \"bar\") {\n barOps = {\n ...axisOps,\n barMaxWidth: 90,\n barMinWidth: 3,\n };\n }\n\n // line\n if (type === \"line\") {\n const showSymbol =\n typeof measure !== \"string\"\n ? !(measure as LineFullMeasures).hideSymbol\n : true;\n const connectNulls =\n typeof measure !== \"string\" &&\n (measure as LineFullMeasures).emptyCellMode\n ? (measure as LineFullMeasures).emptyCellMode === \"connect\"\n : emptyCellMode === \"connect\";\n const isArea =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures).area ?? area\n : area;\n const aOpacity =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures).areaOpacity ?? areaOpacity\n : areaOpacity;\n\n lineOps = {\n ...axisOps,\n connectNulls,\n showSymbol,\n areaStyle: isArea ? { opacity: aOpacity } : undefined,\n };\n }\n }\n\n return {\n id: `series~${groupByKey}~${c}`,\n type,\n name: nameFormatter ? nameFormatter(c) : c,\n ...pieOps,\n ...barOps,\n ...lineOps,\n } as LineSeriesOption | BarSeriesOption | PieSeriesOption;\n }),\n };\n }, [\n data,\n groupByKey,\n area,\n stack,\n nameFormatter,\n emptyCellMode,\n areaOpacity,\n measures,\n type,\n horizontal,\n radius,\n ]);\n\n return option;\n};\n"],"names":[],"mappings":";;AA0CO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AACF,MAAyB;AACjB,QAAA,aAAa,YAAY,OAAO;AAEhC,QAAA,SAA0C,QAE9C,MAAM;AACC,WAAA;AAAA,MACL,QAAQ,KACL,YAAY,EACZ,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,IAA0D,CAAC,MAAM;AAC1D,cAAA,UAAU,WAAW,GAAG,QAAQ;AAEtC,YAAI,SAA0B,CAAA;AAC9B,YAAI,UAA4B,CAAA;AAChC,YAAI,SAA0B,CAAA;AAG9B,YAAI,SAAS,OAAO;AACT,mBAAA;AAAA,YACP,QAAQ;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YACA,WAAW;AAAA,cACT,MAAM;AAAA,YACR;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,OAAO;AAAA,gBACL,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAEJ;AAGI,YAAA,SAAS,UAAU,SAAS,OAAO;AACrC,gBAAM,WACJ,OAAO,YAAY,WACd,QAA+C,WAChD;AACN,gBAAM,UACJ,OAAO,YAAY,WACd,QAA+C,QAChD;AACA,gBAAA,YACJ,OAAO,YAAY,WACd,QAA+C,SAChD,SACA,SACA,SAAS;AAEf,gBAAM,UAAU;AAAA,YACd;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ,aACJ;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YAAA,IAEL;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAIN,cAAI,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAG;AAAA,cACH,aAAa;AAAA,cACb,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAI,SAAS,QAAQ;AACnB,kBAAM,aACJ,OAAO,YAAY,WACf,CAAE,QAA6B,aAC/B;AACA,kBAAA,eACJ,OAAO,YAAY,YAClB,QAA6B,gBACzB,QAA6B,kBAAkB,YAChD,kBAAkB;AACxB,kBAAM,SACJ,OAAO,YAAY,WACd,QAA6B,QAAQ,OACtC;AACN,kBAAM,WACJ,OAAO,YAAY,WACd,QAA6B,eAAe,cAC7C;AAEI,sBAAA;AAAA,cACR,GAAG;AAAA,cACH;AAAA,cACA;AAAA,cACA,WAAW,SAAS,EAAE,SAAS,aAAa;AAAA,YAAA;AAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACL,IAAI,UAAU,UAAU,IAAI,CAAC;AAAA,UAC7B;AAAA,UACA,MAAM,gBAAgB,cAAc,CAAC,IAAI;AAAA,UACzC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,MACL,CACD;AAAA,IAAA;AAAA,EACL,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import { getLegendIcon } from "../utils/index.
|
|
2
|
+
import { getLegendIcon } from "../utils/index.js";
|
|
3
3
|
const useVisualMap = ({
|
|
4
4
|
show = true,
|
|
5
5
|
direction = "horizontal",
|
|
@@ -52,4 +52,4 @@ const useVisualMap = ({
|
|
|
52
52
|
export {
|
|
53
53
|
useVisualMap
|
|
54
54
|
};
|
|
55
|
-
//# sourceMappingURL=useVisualMap.
|
|
55
|
+
//# sourceMappingURL=useVisualMap.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useVisualMap.js","sources":["../../../src/hooks/useVisualMap.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"../utils\";\nimport { HvChartLegend } from \"../types\";\nimport { HvEChartsOption } from \"../types/common\";\n\nexport interface HvVisualMapHookProps {\n show?: boolean;\n pieces?: Record<string, string | number>[];\n max?: number;\n min?: number;\n colorScale?: string[];\n type?: \"continuous\" | \"piecewise\";\n // Uses the same props as the legend\n position?: HvChartLegend[\"position\"];\n direction?: HvChartLegend[\"direction\"];\n}\n\nexport const useVisualMap = ({\n show = true,\n direction = \"horizontal\",\n type = \"continuous\",\n pieces,\n max,\n min,\n colorScale,\n position: positionProp,\n}: HvVisualMapHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"visualMap\">>(() => {\n return {\n visualMap: {\n type,\n show,\n ...(pieces && {\n pieces,\n }),\n ...(type === \"piecewise\" && {\n itemSymbol: getLegendIcon(\"square\"),\n itemGap: 20,\n itemHeight: 16,\n itemWidth: 16,\n }),\n ...(colorScale && {\n max,\n min,\n inRange: {\n color: colorScale,\n },\n }),\n orient: direction,\n top: positionProp?.y || \"top\",\n left: positionProp?.x || \"center\",\n },\n };\n }, [\n colorScale,\n direction,\n max,\n min,\n pieces,\n positionProp?.x,\n positionProp?.y,\n show,\n type,\n ]);\n\n return option;\n};\n"],"names":[],"mappings":";;AAkBO,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAA4B;AACpB,QAAA,SAAS,QAA4C,MAAM;AACxD,WAAA;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,GAAI,UAAU;AAAA,UACZ;AAAA,QACF;AAAA,QACA,GAAI,SAAS,eAAe;AAAA,UAC1B,YAAY,cAAc,QAAQ;AAAA,UAClC,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA,QACA,GAAI,cAAc;AAAA,UAChB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,QACR,KAAK,cAAc,KAAK;AAAA,QACxB,MAAM,cAAc,KAAK;AAAA,MAC3B;AAAA,IAAA;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { useContext } from "react";
|
|
2
|
-
import { HvVizContext } from "../providers/Provider.
|
|
2
|
+
import { HvVizContext } from "../providers/Provider.js";
|
|
3
3
|
const useVizTheme = () => {
|
|
4
4
|
return useContext(HvVizContext);
|
|
5
5
|
};
|
|
6
6
|
export {
|
|
7
7
|
useVizTheme
|
|
8
8
|
};
|
|
9
|
-
//# sourceMappingURL=useVizTheme.
|
|
9
|
+
//# sourceMappingURL=useVizTheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useVizTheme.js","sources":["../../../src/hooks/useVizTheme.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvVizContext, HvVizContextValue } from \"../providers/Provider\";\n\nexport const useVizTheme = (): HvVizContextValue => {\n return useContext(HvVizContext);\n};\n"],"names":[],"mappings":";;AAIO,MAAM,cAAc,MAAyB;AAClD,SAAO,WAAW,YAAY;AAChC;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
2
|
import { useTheme } from "@hitachivantara/uikit-react-core";
|
|
3
|
-
import { getAxisType } from "../utils/index.
|
|
3
|
+
import { getAxisType } from "../utils/index.js";
|
|
4
4
|
const useXAxis = ({
|
|
5
5
|
id,
|
|
6
6
|
type = "categorical",
|
|
@@ -64,4 +64,4 @@ const useXAxis = ({
|
|
|
64
64
|
export {
|
|
65
65
|
useXAxis
|
|
66
66
|
};
|
|
67
|
-
//# sourceMappingURL=useXAxis.
|
|
67
|
+
//# sourceMappingURL=useXAxis.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useXAxis.js","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"../utils\";\nimport { HvChartXAxis, HvEChartsOption } from \"../types/common\";\n\ninterface HvXAxisHookProps extends HvChartXAxis {\n scale?: boolean;\n data?: string[];\n}\n\nexport const useXAxis = ({\n id,\n type = \"categorical\",\n labelFormatter,\n labelRotation,\n name,\n maxValue,\n minValue,\n scale = false,\n data,\n position,\n nameProps,\n}: HvXAxisHookProps) => {\n const { colors } = useTheme();\n\n const option = useMemo<Pick<HvEChartsOption, \"xAxis\">>(() => {\n const nameStyleKeys = nameProps\n ? Object.keys(nameProps).filter((key) => key !== \"location\")\n : undefined;\n const nameStyle =\n nameProps && nameStyleKeys\n ? nameStyleKeys.reduce((acc, curr) => {\n return {\n ...acc,\n [curr]:\n curr === \"color\"\n ? colors?.[nameProps[curr] as string] || nameProps[curr]\n : nameProps[curr],\n };\n }, {})\n : undefined;\n\n return {\n xAxis: {\n id,\n type: getAxisType(type),\n name,\n scale,\n axisLabel: {\n rotate: labelRotation ?? 0,\n formatter: labelFormatter,\n },\n max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n min: minValue === \"min\" ? \"dataMin\" : minValue,\n ...(nameProps?.location && {\n nameLocation: nameProps.location,\n }),\n ...(nameStyle && {\n nameTextStyle: nameStyle,\n }),\n ...(data && { data }),\n ...(position && { position }),\n },\n };\n }, [\n nameProps,\n id,\n type,\n name,\n scale,\n labelRotation,\n labelFormatter,\n maxValue,\n minValue,\n data,\n position,\n colors,\n ]);\n\n return option;\n};\n"],"names":[],"mappings":";;;AAYO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AAChB,QAAA,EAAE,WAAW;AAEb,QAAA,SAAS,QAAwC,MAAM;AACrD,UAAA,gBAAgB,YAClB,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAQ,UAAU,IACzD;AACJ,UAAM,YACJ,aAAa,gBACT,cAAc,OAAO,CAAC,KAAK,SAAS;AAC3B,aAAA;AAAA,QACL,GAAG;AAAA,QACH,CAAC,IAAI,GACH,SAAS,UACL,SAAS,UAAU,IAAI,CAAW,KAAK,UAAU,IAAI,IACrD,UAAU,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACL;AAEC,WAAA;AAAA,MACL,OAAO;AAAA,QACL;AAAA,QACA,MAAM,YAAY,IAAI;AAAA,QACtB;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ,iBAAiB;AAAA,UACzB,WAAW;AAAA,QACb;AAAA,QACA,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,GAAI,WAAW,YAAY;AAAA,UACzB,cAAc,UAAU;AAAA,QAC1B;AAAA,QACA,GAAI,aAAa;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB,GAAI,YAAY,EAAE,SAAS;AAAA,MAC7B;AAAA,IAAA;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCallback, useMemo } from "react";
|
|
2
2
|
import { useTheme } from "@hitachivantara/uikit-react-core";
|
|
3
|
-
import { getAxisType } from "../utils/index.
|
|
3
|
+
import { getAxisType } from "../utils/index.js";
|
|
4
4
|
const useYAxis = ({
|
|
5
5
|
axes,
|
|
6
6
|
defaultType = "continuous"
|
|
@@ -58,4 +58,4 @@ const useYAxis = ({
|
|
|
58
58
|
export {
|
|
59
59
|
useYAxis
|
|
60
60
|
};
|
|
61
|
-
//# sourceMappingURL=useYAxis.
|
|
61
|
+
//# sourceMappingURL=useYAxis.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useYAxis.js","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"../utils\";\nimport { HvChartAxisType } from \"../types\";\nimport { HvChartYAxis, HvEChartsOption } from \"../types/common\";\n\ninterface YAxis extends HvChartYAxis {\n data?: string[];\n}\n\ninterface HvYAxisHookProps {\n axes?: YAxis[];\n defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n axes,\n defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n const { colors } = useTheme();\n\n const createAxis = useCallback(\n ({\n id,\n type,\n name,\n labelFormatter,\n labelRotation,\n maxValue,\n minValue,\n nameProps,\n data,\n position,\n }: YAxis) => {\n const nameStyleKeys = nameProps\n ? Object.keys(nameProps).filter((key) => key !== \"location\")\n : undefined;\n const nameStyle =\n nameProps && nameStyleKeys\n ? nameStyleKeys.reduce((acc, curr) => {\n return {\n ...acc,\n [curr]:\n curr === \"color\"\n ? colors?.[nameProps[curr] as string] || nameProps[curr]\n : nameProps[curr],\n };\n }, {})\n : undefined;\n\n return {\n id,\n type: getAxisType(type) ?? getAxisType(defaultType),\n name,\n axisLabel: {\n rotate: labelRotation ?? 0,\n formatter: labelFormatter,\n },\n max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n min: minValue === \"min\" ? \"dataMin\" : minValue,\n ...(nameProps?.location && {\n nameLocation: nameProps?.location,\n }),\n ...(nameStyle && {\n nameTextStyle: nameStyle,\n }),\n ...(data && { data }),\n ...(position && { position }),\n };\n },\n [colors, defaultType]\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"yAxis\">>(() => {\n return {\n yAxis: Array.isArray(axes)\n ? axes.map((axis) => createAxis(axis))\n : [createAxis({})],\n };\n }, [axes, createAxis]);\n\n return option;\n};\n"],"names":[],"mappings":";;;AAiBO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,MAAwB;AAChB,QAAA,EAAE,WAAW;AAEnB,QAAM,aAAa;AAAA,IACjB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,MACW;AACL,YAAA,gBAAgB,YAClB,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAQ,UAAU,IACzD;AACJ,YAAM,YACJ,aAAa,gBACT,cAAc,OAAO,CAAC,KAAK,SAAS;AAC3B,eAAA;AAAA,UACL,GAAG;AAAA,UACH,CAAC,IAAI,GACH,SAAS,UACL,SAAS,UAAU,IAAI,CAAW,KAAK,UAAU,IAAI,IACrD,UAAU,IAAI;AAAA,QAAA;AAAA,MACtB,GACC,CAAE,CAAA,IACL;AAEC,aAAA;AAAA,QACL;AAAA,QACA,MAAM,YAAY,IAAI,KAAK,YAAY,WAAW;AAAA,QAClD;AAAA,QACA,WAAW;AAAA,UACT,QAAQ,iBAAiB;AAAA,UACzB,WAAW;AAAA,QACb;AAAA,QACA,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,GAAI,WAAW,YAAY;AAAA,UACzB,cAAc,WAAW;AAAA,QAC3B;AAAA,QACA,GAAI,aAAa;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB,GAAI,YAAY,EAAE,SAAS;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EAAA;AAGhB,QAAA,SAAS,QAAwC,MAAM;AACpD,WAAA;AAAA,MACL,OAAO,MAAM,QAAQ,IAAI,IACrB,KAAK,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IACnC,CAAC,WAAW,CAAE,CAAA,CAAC;AAAA,IAAA;AAAA,EACrB,GACC,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { HvVizContext, HvVizProvider } from "./providers/Provider.
|
|
2
|
-
import { HvLineChart } from "./LineChart/LineChart.
|
|
3
|
-
import { HvBarChart } from "./BarChart/BarChart.
|
|
4
|
-
import { HvDonutChart } from "./DonutChart/DonutChart.
|
|
5
|
-
import { HvConfusionMatrix } from "./ConfusionMatrix/ConfusionMatrix.
|
|
1
|
+
import { HvVizContext, HvVizProvider } from "./providers/Provider.js";
|
|
2
|
+
import { HvLineChart } from "./LineChart/LineChart.js";
|
|
3
|
+
import { HvBarChart } from "./BarChart/BarChart.js";
|
|
4
|
+
import { HvDonutChart } from "./DonutChart/DonutChart.js";
|
|
5
|
+
import { HvConfusionMatrix } from "./ConfusionMatrix/ConfusionMatrix.js";
|
|
6
6
|
export {
|
|
7
7
|
HvBarChart,
|
|
8
8
|
HvConfusionMatrix,
|
|
@@ -11,4 +11,4 @@ export {
|
|
|
11
11
|
HvVizContext,
|
|
12
12
|
HvVizProvider
|
|
13
13
|
};
|
|
14
|
-
//# sourceMappingURL=index.
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { createContext, useMemo } from "react";
|
|
3
3
|
import { useTheme } from "@hitachivantara/uikit-react-core";
|
|
4
|
-
import { registerTheme } from "../utils/registerTheme.
|
|
4
|
+
import { registerTheme } from "../utils/registerTheme.js";
|
|
5
5
|
const HvVizContext = createContext({
|
|
6
6
|
theme: void 0
|
|
7
7
|
});
|
|
@@ -17,4 +17,4 @@ export {
|
|
|
17
17
|
HvVizContext,
|
|
18
18
|
HvVizProvider
|
|
19
19
|
};
|
|
20
|
-
//# sourceMappingURL=Provider.
|
|
20
|
+
//# sourceMappingURL=Provider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { registerTheme } from \"../utils/registerTheme\";\n\nexport interface HvVizContextValue {\n /**\n * Current theme\n */\n theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n /**\n * Component tree.\n */\n children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n * <HvVizProvider>\n * (...)\n * </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n const value = useMemo(() => {\n registerTheme(selectedTheme, selectedMode, activeTheme);\n\n return { theme: `${selectedTheme}-${selectedMode}` };\n }, [selectedTheme, selectedMode, activeTheme]);\n\n return (\n <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,eAAe,cAAiC;AAAA,EAC3D,OAAO;AACT,CAAC;AA2BM,MAAM,gBAAgB,CAAC,EAAE,eAAmC;AACjE,QAAM,EAAE,aAAa,cAAc,kBAAkB,SAAS;AAExD,QAAA,QAAQ,QAAQ,MAAM;AACZ,kBAAA,eAAe,cAAc,WAAW;AAEtD,WAAO,EAAE,OAAO,GAAG,aAAa,IAAI,YAAY;EAC/C,GAAA,CAAC,eAAe,cAAc,WAAW,CAAC;AAE7C,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAe,SAAS,CAAA;AAEnD;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvChartLegendIcon } from \"../types/legend\";\n\nimport type {\n HvBarChartMeasures,\n HvChartAxisType,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"..\";\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 \"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: Arrayable<HvLineChartMeasures | HvBarChartMeasures> | HvDonutChartMeasure\n): HvLineChartMeasures | HvBarChartMeasures | HvDonutChartMeasure => {\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":"AAYa,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;AAAA,IACL;AACS,aAAA;AAAA,EACX;AACF;AAEa,MAAA,aAAa,CACxB,MACA,QACmE;AACnE,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;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"registerTheme.js","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import { HvTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as echarts from \"echarts/core\";\n\nexport const registerTheme = (\n name: string,\n mode: string,\n themeStructure?: HvTheme\n) => {\n const baseText = {\n color: themeStructure?.colors.modes[mode].secondary,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n };\n\n const customAxis = {\n nameTextStyle: {\n ...baseText,\n color: themeStructure?.colors.modes[mode].secondary_80,\n },\n axisLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisTick: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisLabel: {\n color: themeStructure?.colors.modes[mode].secondary_80,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n },\n splitLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n };\n\n echarts.registerTheme(`${name}-${mode}`, {\n color: [\n themeStructure?.colors.modes[mode].cat1,\n themeStructure?.colors.modes[mode].cat2,\n themeStructure?.colors.modes[mode].cat3,\n themeStructure?.colors.modes[mode].cat4,\n themeStructure?.colors.modes[mode].cat5,\n themeStructure?.colors.modes[mode].cat6,\n themeStructure?.colors.modes[mode].cat7,\n themeStructure?.colors.modes[mode].cat8,\n themeStructure?.colors.modes[mode].cat9,\n themeStructure?.colors.modes[mode].cat10,\n themeStructure?.colors.modes[mode].cat11,\n themeStructure?.colors.modes[mode].cat12,\n ],\n legend: {\n textStyle: {\n ...baseText,\n },\n },\n tooltip: {\n borderWidth: 0,\n padding: 0,\n textStyle: {\n ...baseText,\n },\n axisPointer: {\n lineStyle: {\n color: themeStructure?.colors.modes[mode].secondary,\n width: 1,\n },\n },\n },\n dataZoom: {\n textStyle: { ...baseText },\n },\n categoryAxis: {\n ...customAxis,\n },\n valueAxis: {\n ...customAxis,\n },\n logAxis: {\n ...customAxis,\n },\n timeAxis: {\n ...customAxis,\n },\n line: {\n lineStyle: {\n width: 2,\n },\n },\n visualMap: {\n textStyle: {\n ...baseText,\n },\n },\n heatmap: {\n label: {\n fontWeight: baseText.fontWeight,\n fontSize: baseText.fontSize,\n fontFamily: baseText.fontFamily,\n },\n itemStyle: {\n borderColor: themeStructure?.colors.modes[mode].atmo3,\n borderWidth: 1,\n },\n },\n });\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.6.
|
|
3
|
+
"version": "5.6.40",
|
|
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.44.
|
|
36
|
+
"@hitachivantara/uikit-react-core": "^5.44.2"
|
|
37
37
|
},
|
|
38
38
|
"files": [
|
|
39
39
|
"dist"
|
|
@@ -42,14 +42,14 @@
|
|
|
42
42
|
"access": "public",
|
|
43
43
|
"directory": "package"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "8bfd5f2420d58ddc196ab2b6e1a1474c4c2d9831",
|
|
46
46
|
"main": "dist/cjs/index.cjs",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|
|
49
49
|
"require": "./dist/cjs/index.cjs",
|
|
50
|
-
"import": "./dist/esm/index.
|
|
50
|
+
"import": "./dist/esm/index.js"
|
|
51
51
|
}
|
|
52
52
|
},
|
|
53
53
|
"types": "dist/types/index.d.ts",
|
|
54
|
-
"module": "dist/esm/index.
|
|
54
|
+
"module": "dist/esm/index.js"
|
|
55
55
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.mjs","sources":["../../../src/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n useXAxis,\n useYAxis,\n useDataZoom,\n useGrid,\n useData,\n useDataset,\n useSeries,\n useLegend,\n useTooltip,\n useOption,\n HvChartTooltipClasses,\n} from \"../hooks\";\n\nimport { HvBarChartMeasures } from \"../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } 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]);\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) => {\n const {\n yAxis,\n xAxis,\n horizontal = false,\n horizontalRangeSlider,\n grid,\n data,\n groupBy,\n splitBy,\n sortBy,\n stack,\n seriesNameFormatter,\n measures,\n legend,\n tooltip,\n classes,\n height,\n width,\n onOptionChange,\n } = props;\n\n const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\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 measures,\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 measures,\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 ref={ref} option={option} width={width} height={height} />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAkBM,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,QAAQ;AACR,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,IACE,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,QAAQ,SAAS,UAAU;AAEhE,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,KAAM,CAAA;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;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BaseChart.mjs","sources":["../../../src/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { useVizTheme } from \"../hooks\";\nimport { HvEChartsOption } from \"../types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\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) => {\n const { option, width, height } = props;\n\n const { theme } = useVizTheme();\n\n const currentTheme = useRef<string | undefined>(theme);\n const chartRef = useRef<ReactECharts>(null);\n const isMounted = useRef<boolean>(false);\n\n const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n useEffect(() => {\n if (!isMounted.current) {\n isMounted.current = true;\n return;\n }\n\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 instance.setOption(option, {\n replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n });\n }, [theme, option]);\n\n return (\n <ReactECharts\n ref={forkedRef}\n echarts={echarts}\n option={initialOption}\n theme={theme}\n notMerge\n style={{\n width: width || \"100%\",\n height: height || \"100%\",\n }}\n />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;AAaA,QAAQ,IAAI,CAAC,gBAAgB,aAAa,CAAC;AAcpC,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,QAAQ,OAAO,OAAA,IAAW;AAE5B,UAAA,EAAE,UAAU;AAEZ,UAAA,eAAe,OAA2B,KAAK;AAC/C,UAAA,WAAW,OAAqB,IAAI;AACpC,UAAA,YAAY,OAAgB,KAAK;AAEjC,UAAA,YAAY,WAAyB,KAAK,QAAQ;AAExD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAA0B,MAAM;AAE1E,cAAU,MAAM;AACV,UAAA,CAAC,UAAU,SAAS;AACtB,kBAAU,UAAU;AACpB;AAAA,MACF;AAII,UAAA,UAAU,aAAa,SAAS;AAClC,yBAAiB,MAAM;AACvB,qBAAa,UAAU;AACvB;AAAA,MACF;AAEM,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;AAEf,eAAS,UAAU,QAAQ;AAAA,QACzB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,MAAA,CACrD;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,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ConfusionMatrix.mjs","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n VisualMapComponent,\n GridComponent,\n TooltipComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvVisualMapHookProps,\n useData,\n useGrid,\n useOption,\n useTooltip,\n useVisualMap,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { getGroupKey } from \"../utils\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n HvChartCommonProps,\n HvChartXAxis,\n HvChartYAxis,\n} from \"../types/common\";\nimport { HvChartTooltip } from \"../types/tooltip\";\nimport { HvConfusionMatrixMeasure } from \"../types/measures\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\nimport {\n HvConfusionMatrixFormat,\n HvConfusionMatrixColorScale,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\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 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 } = props;\n\n const { classes } = useClasses(classesProp);\n\n const groupByKey = getGroupKey(groupBy);\n\n const 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 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),\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} />;\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ConfusionMatrix.styles.mjs","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\n \"HvConfusionMatrix\",\n {\n tooltipRoot: {\n backgroundColor: theme.colors.atmo1,\n width: \"fit-content\",\n minWidth: 150,\n boxShadow: theme.colors.shadow,\n zIndex: theme.zIndices.sticky,\n },\n tooltipContainer: {\n padding: theme.spacing(\"15px\", \"sm\"),\n display: \"flex\",\n flexDirection: \"column\",\n },\n tooltipText: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,aAAa;AAAA,MACX,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,MAAM,OAAO;AAAA,MACxB,QAAQ,MAAM,SAAS;AAAA,IACzB;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS,MAAM,QAAQ,QAAQ,IAAI;AAAA,MACnC,SAAS;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,aAAa;AAAA,MACX,YAAY,MAAM,WAAW;AAAA,MAC7B,YAAY,MAAM,YAAY;AAAA,MAC9B,UAAU,MAAM,UAAU;AAAA,MAC1B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,EACF;AACF;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.mjs","sources":["../../../src/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"../types/common\";\n\nimport {\n HvConfusionMatrixColorScale,\n HvConfusionMatrixFormat,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n data,\n delta,\n custom,\n filterKey,\n}: {\n data: ColumnTable;\n delta: boolean;\n filterKey: string;\n custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n const { colors } = useTheme();\n\n const colorScale = useMemo(() => {\n if (custom == null && delta) {\n return;\n }\n\n if (custom && typeof custom[0] === \"object\") {\n return {\n pieces: (custom as HvConfusionMatrixColorScale[]).reduce(\n (acc: HvConfusionMatrixColorScale[], curr) => {\n acc.push({\n ...curr,\n color: colors?.[curr.color] || curr.color,\n });\n return acc;\n },\n []\n ),\n };\n }\n\n const flatData = data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce((acc: number[], c: string) => {\n acc.push(...data.array(c));\n return acc;\n }, []);\n const max = Math.max(...flatData);\n const min = Math.min(...flatData);\n\n return {\n colorScale: custom || [colors?.base_light || \"\", colors?.cat3 || \"\"],\n max,\n min,\n };\n }, [colors, custom, data, filterKey, delta]);\n\n return colorScale;\n};\n\nexport const useSeries = ({\n data,\n filterKey,\n delta,\n valuesProps,\n}: {\n data: ColumnTable;\n filterKey: string;\n delta: boolean;\n valuesProps?: HvConfusionMatrixValuesProps;\n}) => {\n const { colors } = useTheme();\n\n const getDeltaColor = useCallback(\n (value: number, diagonal: boolean) => {\n if ((diagonal && value > 0) || (!diagonal && value < 0)) {\n return colors?.positive;\n }\n if ((diagonal && value < 0) || (!diagonal && value > 0)) {\n return colors?.negative;\n }\n\n return colors?.base_light;\n },\n [colors]\n );\n\n const chartSeries = useMemo(() => {\n return {\n series: {\n id: `series~${filterKey}`,\n type: \"heatmap\",\n label: {\n show: true,\n ...valuesProps,\n ...(valuesProps?.color && {\n color: colors?.[valuesProps.color] || valuesProps.color,\n }),\n },\n emphasis: {\n disabled: true,\n },\n data: data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce((acc: (string | number)[][], c: string, j) => {\n const row: (string | number)[][] = data\n .array(c)\n .reduce((racc, rv, i) => {\n racc.push({\n value: [data.array(filterKey)[i], c, rv != null ? rv : \"-\"],\n ...(delta && {\n visualMap: false,\n itemStyle: {\n color: getDeltaColor(rv, i === j),\n },\n }),\n });\n return racc;\n }, []);\n\n acc.push(...row);\n return acc;\n }, []),\n },\n };\n }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);\n\n return chartSeries;\n};\n\nconst SQUARE_SIZE = 52;\n\nexport const useGridLayout = ({\n data,\n filterKey,\n format,\n xAxisPosition,\n visualMapVisible,\n visualMapYPosition,\n}: {\n xAxisPosition: HvChartXAxis[\"position\"];\n data: ColumnTable;\n filterKey: string;\n format: HvConfusionMatrixFormat;\n visualMapVisible: boolean;\n visualMapYPosition: \"top\" | \"center\" | \"bottom\";\n}) => {\n const size = useMemo(() => {\n const nCols = data.array(filterKey).length;\n const nRows = data.columnNames().filter((p) => p !== filterKey).length;\n const itemHeight = format === \"square\" ? SQUARE_SIZE : SQUARE_SIZE / 2;\n\n return {\n padding: {\n bottom:\n xAxisPosition === \"bottom\" ||\n (visualMapVisible && visualMapYPosition === \"bottom\")\n ? 60\n : 20,\n top:\n xAxisPosition === \"top\" ||\n (visualMapVisible && visualMapYPosition === \"top\")\n ? 60\n : 20,\n ...(visualMapVisible &&\n visualMapYPosition === \"bottom\" &&\n xAxisPosition === \"bottom\" && {\n bottom: 100,\n }),\n ...(visualMapVisible &&\n visualMapYPosition === \"top\" &&\n xAxisPosition === \"top\" && {\n top: 100,\n }),\n left: 80,\n right: 80,\n },\n size: {\n height: Math.max(itemHeight * nRows, itemHeight * 8),\n width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8),\n },\n };\n }, [\n data,\n filterKey,\n format,\n visualMapVisible,\n visualMapYPosition,\n xAxisPosition,\n ]);\n\n return size;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DonutChart.mjs","sources":["../../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport {\n HvChartTooltipClasses,\n useData,\n useDataset,\n useGrid,\n useLegend,\n useOption,\n useSeries,\n useTooltip,\n} from \"../hooks\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvDonutChartMeasure } from \"../types\";\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) => {\n const {\n data,\n groupBy,\n classes,\n legend,\n tooltip,\n measure: measures,\n sortBy,\n grid,\n width,\n height,\n type = \"regular\",\n slicesNameFormatter,\n onOptionChange,\n } = props;\n\n const chartData = useData({ data, groupBy, measures, sortBy });\n\n const chartDataset = useDataset(chartData);\n\n const chartSeries = useSeries({\n type: \"pie\",\n data: chartData,\n groupBy,\n measures,\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 measures,\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 ref={ref} option={option} width={width} height={height} />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AA4BA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAmBM,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACE,IAAA;AAEJ,UAAM,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,QAAQ;AAEvD,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,KAAM,CAAA;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;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.mjs","sources":["../../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n useYAxis,\n useXAxis,\n useDataZoom,\n useGrid,\n useData,\n useDataset,\n useSeries,\n useLegend,\n useTooltip,\n HvChartTooltipClasses,\n useOption,\n} from \"../hooks\";\n\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } 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]);\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) => {\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 measures,\n stack,\n seriesNameFormatter,\n legend,\n classes,\n tooltip,\n width,\n height,\n onOptionChange,\n } = props;\n\n const chartData = useData({ data, groupBy, measures, splitBy, sortBy });\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 measures,\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 measures,\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 ref={ref} option={option} width={width} height={height} />\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAuBM,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,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,IACE,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,SAAS,QAAQ;AAEhE,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,KAAM,CAAA;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;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.mjs","sources":["../../../../src/hooks/tooltip/styles.tsx"],"sourcesContent":["import { theme, createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvChartTooltip\", {\n /** Single tooltip styles */\n singleTooltipRoot: {\n width: \"fit-content\",\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n padding: theme.space.sm,\n display: \"flex\",\n },\n singleTooltipTitle: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n singleTooltipValue: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n marginLeft: theme.space.xs,\n },\n /** Multiple tooltip styles */\n multipleTooltipRoot: {\n width: \"fit-content\",\n boxShadow: theme.colors.shadow,\n backgroundColor: theme.colors.atmo1,\n },\n multipleTooltipTitleContainer: {\n padding: `15px ${theme.space.sm}`,\n borderBottom: `3px solid ${theme.colors.atmo2}`,\n },\n multipleTooltipTitle: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n multipleTooltipValuesContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: theme.space.sm,\n\n \"& > *:not(:last-child)\": { paddingBottom: theme.space.sm },\n },\n multipleTooltipSeriesContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n },\n multipleTooltipSeriesNameContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n marginRight: theme.space.sm,\n },\n multipleTooltipSeriesColor: {\n width: \"10px\",\n height: \"10px\",\n marginRight: \"5px\",\n },\n multipleTooltipSeriesName: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.semibold,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n multipleTooltipSeriesValue: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,YAAY,kBAAkB,cAAc,kBAAkB;AAAA;AAAA,EAE3E,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,MAAM;AAAA,IACrB,SAAS;AAAA,EACX;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,MAAM;AAAA,EAC1B;AAAA;AAAA,EAEA,qBAAqB;AAAA,IACnB,OAAO;AAAA,IACP,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,+BAA+B;AAAA,IAC7B,SAAS,QAAQ,MAAM,MAAM,EAAE;AAAA,IAC/B,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,sBAAsB;AAAA,IACpB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gCAAgC;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IAErB,0BAA0B,EAAE,eAAe,MAAM,MAAM,GAAG;AAAA,EAC5D;AAAA,EACA,gCAAgC;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,oCAAoC;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,4BAA4B;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AAAA,EACA,2BAA2B;AAAA,IACzB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,4BAA4B;AAAA,IAC1B,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.mjs","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartTooltip,\n HvChartTooltipParams,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"../../types\";\nimport { getMeasure } from \"../../utils\";\nimport { HvEChartsOption } from \"../../types/common\";\n\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n seriesName: string;\n value: (string | number)[];\n encode: { [key: string]: number[] };\n color: string;\n dimensionNames: string[];\n name: string;\n seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n measures?:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n | HvDonutChartMeasure;\n trigger?: \"item\" | \"axis\";\n classes?: HvChartTooltipClasses;\n horizontal?: boolean;\n show?: HvChartTooltip[\"show\"];\n type?: HvChartTooltip[\"type\"];\n component?: HvChartTooltip[\"component\"];\n valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n measures = [],\n classes,\n component,\n show = true,\n horizontal = false,\n trigger = \"item\",\n type = \"multiple\",\n valueFormatter,\n titleFormatter,\n nameFormatter,\n}: HvTooltipHookProps) => {\n const { classes: hvClasses } = useClasses(classes);\n\n const renderTooltip = useCallback(\n (params: EChartsTooltipParams[]) => {\n const title =\n params[0].seriesType === \"pie\"\n ? params[0].seriesName\n : horizontal\n ? params[0].value[params[0].encode.y[0]]\n : params[0].value[params[0].encode.x[0]];\n\n const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n if (type === \"single\") {\n const measure = getMeasure(\n params[0].seriesType === \"pie\"\n ? params[0].name\n : horizontal\n ? params[0].dimensionNames[params[0].encode.x[0]]\n : params[0].dimensionNames[params[0].encode.y[0]],\n measures\n );\n\n const value =\n params[0].seriesType === \"pie\"\n ? params[0].value[params[0].encode.value[0]]\n : horizontal\n ? params[0].value[params[0].encode.x[0]]\n : params[0].value[params[0].encode.y[0]];\n\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : valueFormatter\n ? valueFormatter(value)\n : value;\n\n return `\n <div class=\"${hvClasses?.singleTooltipRoot}\">\n <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n </div>\n `;\n }\n\n return `\n <div class=\"${hvClasses?.multipleTooltipRoot}\">\n <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n <div>\n <p class=\"${\n hvClasses?.multipleTooltipTitle\n }\">${formattedTitle}</p>\n </div>\n </div>\n <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n ${params\n .map((s) => {\n const measure = getMeasure(\n s.seriesType === \"pie\"\n ? s.name\n : horizontal\n ? s.dimensionNames[s.encode.x[0]]\n : s.dimensionNames[s.encode.y[0]],\n measures\n );\n\n const value =\n s.seriesType === \"pie\"\n ? s.value[s.encode.value[0]]\n : horizontal\n ? s.value[s.encode.x[0]]\n : s.value[s.encode.y[0]];\n\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : valueFormatter\n ? valueFormatter(value)\n : value;\n\n const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n const formattedName = nameFormatter\n ? nameFormatter(name)\n : name;\n\n return `\n <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n </div>\n <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n </div>\n `;\n })\n .join(\" \")}\n </div>\n </div>\n `;\n },\n [\n hvClasses,\n horizontal,\n type,\n measures,\n nameFormatter,\n titleFormatter,\n valueFormatter,\n ]\n );\n\n const renderCustomTooltip = useCallback(\n (params: EChartsTooltipParams[]) => {\n if (typeof component === \"function\") {\n const values: HvChartTooltipParams = {\n title:\n params[0].seriesType === \"pie\"\n ? params[0].seriesName\n : horizontal\n ? params[0].value[params[0].encode.y[0]]\n : params[0].value[params[0].encode.x[0]],\n series: params.map((p) => {\n return {\n color: p.color,\n name:\n p.seriesType === \"heatmap\"\n ? String(p.value[p.encode.y[0]])\n : p.seriesType === \"pie\"\n ? p.name\n : p.seriesName,\n value:\n p.seriesType === \"pie\" || p.seriesType === \"heatmap\"\n ? p.value[p.encode.value[0]]\n : horizontal\n ? p.value[p.encode.x[0]]\n : p.value[p.encode.y[0]],\n };\n }),\n };\n\n return component(values);\n }\n\n return component;\n },\n [component, horizontal]\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"tooltip\">>(() => {\n return {\n tooltip: {\n confine: false,\n show,\n trigger,\n position: (point, params, dom, rect, size) => {\n return [point[0], point[1] - size.contentSize[1]];\n },\n formatter: (params) => {\n const tooltipParams = Array.isArray(params) ? params : [params];\n\n return component\n ? renderCustomTooltip(tooltipParams)\n : renderTooltip(tooltipParams);\n },\n },\n };\n }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n return option;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useData.mjs","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { from, internal, not, table, desc } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartAggregation,\n HvChartOrder,\n HvLineChartMeasures,\n HvChartData,\n HvDonutChartMeasure,\n} from \"../types\";\nimport { getGroupKey } from \"../utils\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\nconst getAgFunc = (func: HvChartAggregation, field: string) =>\n func === \"count\" ? \"count()\" : `${func}(d[\"${field}\"])`;\n\ninterface HvDataHookProps {\n data: HvChartData;\n groupBy: HvChartCommonProps[\"groupBy\"];\n measures:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n | HvDonutChartMeasure;\n splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n sortBy?: HvChartCommonProps[\"sortBy\"];\n delta?: string;\n}\n\nexport const useData = ({\n data,\n groupBy,\n measures,\n sortBy,\n splitBy,\n delta,\n}: HvDataHookProps): internal.ColumnTable => {\n const groupByKey = getGroupKey(groupBy);\n\n const chartData = useMemo<ColumnTable>(() => {\n let tableData: ColumnTable;\n if (data instanceof internal.ColumnTable) {\n tableData = data;\n } else if (Array.isArray(data)) {\n tableData = from(data);\n } else {\n tableData = table(data);\n }\n\n const groupByFields = groupBy\n ? Array.isArray(groupBy)\n ? groupBy\n : [groupBy]\n : [];\n\n const splitByFields = Array.isArray(splitBy)\n ? splitBy\n : splitBy != null\n ? [splitBy]\n : [];\n\n const measuresFields: { [key: string]: string } =\n measures == null\n ? {}\n : typeof measures === \"string\"\n ? { [measures]: getAgFunc(\"sum\", measures) }\n : Array.isArray(measures)\n ? measures.reduce<{ [key: string]: string }>((acc, value) => {\n let field: string;\n let agFunction: HvChartAggregation;\n if (typeof value === \"string\") {\n field = value;\n agFunction = \"sum\";\n } else {\n field = value.field;\n agFunction = value.agg ?? \"sum\";\n }\n\n return {\n ...acc,\n [field]: getAgFunc(agFunction, field),\n };\n }, {})\n : {\n [measures.field]: getAgFunc(measures.agg ?? \"sum\", measures.field),\n };\n\n const sortByFields: { [key: string]: HvChartOrder } =\n sortBy == null\n ? {}\n : typeof sortBy === \"string\"\n ? { [sortBy]: \"asc\" }\n : Array.isArray(sortBy)\n ? sortBy.reduce<{ [key: string]: HvChartOrder }>((acc, value) => {\n let field: string;\n let orderFunction: HvChartOrder;\n if (typeof value === \"string\") {\n field = value;\n orderFunction = \"asc\";\n } else {\n field = value.field;\n orderFunction = value.order ?? \"asc\";\n }\n\n return {\n ...acc,\n [field]: orderFunction,\n };\n }, {})\n : { [sortBy.field]: sortBy.order ?? \"asc\" };\n\n const allFields = [\n ...groupByFields,\n ...splitByFields,\n ...Object.keys(measuresFields),\n ];\n\n // --- Confusion matrix ---\n // Recalculate the measures columns according to the delta column\n if (delta) {\n const deltaExpression = Object.keys(measuresFields).reduce(\n (acc, curr) => {\n return {\n ...acc,\n [curr]: `d => d.${curr} - d.${delta}`,\n };\n },\n {}\n );\n\n tableData = tableData.derive(deltaExpression);\n }\n\n // remove unneeded fields\n tableData = tableData.select(...allFields);\n\n // group by groupBy fields\n if (groupByFields.length > 0) {\n tableData = tableData.groupby(groupByFields);\n }\n\n if (splitByFields.length > 0) {\n // pivot by splitBy fields\n tableData = tableData.pivot(splitByFields, measuresFields);\n } else {\n // if there is no splitBy fields, just aggregate measures fields\n tableData = tableData.rollup(measuresFields);\n }\n\n // if grouped by multiple fields, create a new joint field\n // as the line chart doesn't implement hierarchical axis label grouping\n if (groupByFields.length > 1) {\n const expression = `d => ${groupByFields\n .map((field) => `d.${field}`)\n .join(\" + '_' + \")}`;\n\n tableData = tableData.derive(\n { [groupByKey]: expression },\n { after: groupByFields[groupByFields.length - 1] }\n );\n }\n\n // sort by sortBy fields\n if (Object.keys(sortByFields).length > 0) {\n tableData = tableData.orderby(\n ...Object.keys(sortByFields)\n // only sort by fields that are in the table, ignore the rest\n .filter((key) => allFields.includes(key))\n .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key))\n );\n }\n\n // if a derived field was created, remove the original fields\n if (groupByFields.length > 1) {\n tableData = tableData.select(not(...groupByFields));\n }\n\n return tableData;\n }, [data, groupBy, splitBy, measures, sortBy, delta, groupByKey]);\n\n return chartData;\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useDataZoom.mjs","sources":["../../../src/hooks/useDataZoom.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvEChartsOption } from \"../types/common\";\n\ninterface HvDataZoomHookProps {\n showHorizontal?: boolean;\n}\n\nexport const useDataZoom = ({ showHorizontal }: HvDataZoomHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"dataZoom\">>(() => {\n return {\n dataZoom: [\n {\n show: showHorizontal ?? false,\n type: \"slider\",\n orient: \"horizontal\",\n },\n {\n show: showHorizontal ?? false,\n type: \"inside\",\n orient: \"horizontal\",\n zoomOnMouseWheel: \"shift\",\n moveOnMouseWheel: true,\n },\n ],\n };\n }, [showHorizontal]);\n\n return option;\n};\n"],"names":[],"mappings":";AAQO,MAAM,cAAc,CAAC,EAAE,qBAA0C;AAChE,QAAA,SAAS,QAA2C,MAAM;AACvD,WAAA;AAAA,MACL,UAAU;AAAA,QACR;AAAA,UACE,MAAM,kBAAkB;AAAA,UACxB,MAAM;AAAA,UACN,QAAQ;AAAA,QACV;AAAA,QACA;AAAA,UACE,MAAM,kBAAkB;AAAA,UACxB,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,kBAAkB;AAAA,UAClB,kBAAkB;AAAA,QACpB;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,cAAc,CAAC;AAEZ,SAAA;AACT;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useDataset.mjs","sources":["../../../src/hooks/useDataset.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { internal } from \"arquero\";\n\nimport { HvEChartsOption } from \"../types/common\";\n\nexport const useDataset = (data: internal.ColumnTable) => {\n const option = useMemo<Pick<HvEChartsOption, \"dataset\">>(() => {\n return {\n dataset: {\n source: data.columnNames().reduce(\n (acc, c) => ({\n ...acc,\n [c]: data.array(c),\n }),\n {}\n ),\n },\n };\n }, [data]);\n\n return option;\n};\n"],"names":[],"mappings":";AAMa,MAAA,aAAa,CAAC,SAA+B;AAClD,QAAA,SAAS,QAA0C,MAAM;AACtD,WAAA;AAAA,MACL,SAAS;AAAA,QACP,QAAQ,KAAK,YAAA,EAAc;AAAA,UACzB,CAAC,KAAK,OAAO;AAAA,YACX,GAAG;AAAA,YACH,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC;AAAA,UAAA;AAAA,UAEnB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,IAAI,CAAC;AAEF,SAAA;AACT;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useGrid.mjs","sources":["../../../src/hooks/useGrid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartGrid } from \"../types\";\nimport { HvEChartsOption } from \"../types/common\";\n\ninterface HvGridHookProps {\n top?: HvChartGrid[\"top\"];\n bottom?: HvChartGrid[\"bottom\"];\n left?: HvChartGrid[\"left\"];\n right?: HvChartGrid[\"right\"];\n width?: number | string;\n height?: number | string;\n}\n\nexport const useGrid = ({\n top,\n left,\n right,\n bottom,\n width,\n height,\n}: HvGridHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"grid\">>(() => {\n return {\n // if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise\n grid: {\n ...(top != null && {\n top,\n }),\n ...(bottom != null && {\n bottom,\n }),\n ...(left != null && {\n left,\n }),\n ...(right != null && {\n right,\n }),\n ...(width != null && {\n width,\n }),\n ...(height != null && {\n height,\n }),\n },\n };\n }, [top, left, right, bottom, height, width]);\n\n return option;\n};\n"],"names":[],"mappings":";AAcO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACf,QAAA,SAAS,QAAuC,MAAM;AACnD,WAAA;AAAA;AAAA,MAEL,MAAM;AAAA,QACJ,GAAI,OAAO,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,GAAI,UAAU,QAAQ;AAAA,UACpB;AAAA,QACF;AAAA,QACA,GAAI,QAAQ,QAAQ;AAAA,UAClB;AAAA,QACF;AAAA,QACA,GAAI,SAAS,QAAQ;AAAA,UACnB;AAAA,QACF;AAAA,QACA,GAAI,SAAS,QAAQ;AAAA,UACnB;AAAA,QACF;AAAA,QACA,GAAI,UAAU,QAAQ;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,KAAK,MAAM,OAAO,QAAQ,QAAQ,KAAK,CAAC;AAErC,SAAA;AACT;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useLegend.mjs","sources":["../../../src/hooks/useLegend.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"../utils\";\nimport { HvChartLegend, HvChartLegendIcon } from \"../types/legend\";\nimport { HvEChartsOption } from \"../types/common\";\n\ninterface HvLegendHookProps {\n show?: HvChartLegend[\"show\"];\n direction?: HvChartLegend[\"direction\"];\n position?: HvChartLegend[\"position\"];\n series?: Pick<HvEChartsOption, \"series.series\">;\n icon?: HvChartLegendIcon;\n formatter?: string | ((value?: string) => string);\n}\n\nexport const useLegend = ({\n series,\n show,\n icon,\n formatter,\n position: positionProp,\n direction = \"horizontal\",\n}: HvLegendHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"legend\">>(() => {\n const position: Record<string, string> = { y: positionProp?.y ?? \"top\" };\n if (positionProp?.x != null && positionProp?.x !== \"center\") {\n position[positionProp.x] = positionProp.x;\n } else {\n position.x = \"center\";\n }\n\n return {\n legend: {\n show: show ?? (Array.isArray(series) && series.length > 1),\n itemGap: 20,\n formatter,\n orient: direction,\n ...position,\n ...(icon && { icon: getLegendIcon(icon) }),\n ...(!icon && {\n data:\n show !== false && Array.isArray(series)\n ? series.map((s) => {\n return {\n name: s.name as string,\n icon: getLegendIcon(\n (s as any).areaStyle != null ? \"square\" : \"line\"\n ),\n };\n })\n : undefined,\n }),\n },\n };\n }, [series, show, icon, formatter, positionProp, direction]);\n\n return option;\n};\n"],"names":[],"mappings":";;AAeO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AACd,MAAyB;AACjB,QAAA,SAAS,QAAyC,MAAM;AAC5D,UAAM,WAAmC,EAAE,GAAG,cAAc,KAAK,MAAM;AACvE,QAAI,cAAc,KAAK,QAAQ,cAAc,MAAM,UAAU;AAClD,eAAA,aAAa,CAAC,IAAI,aAAa;AAAA,IAAA,OACnC;AACL,eAAS,IAAI;AAAA,IACf;AAEO,WAAA;AAAA,MACL,QAAQ;AAAA,QACN,MAAM,SAAS,MAAM,QAAQ,MAAM,KAAK,OAAO,SAAS;AAAA,QACxD,SAAS;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR,GAAG;AAAA,QACH,GAAI,QAAQ,EAAE,MAAM,cAAc,IAAI,EAAE;AAAA,QACxC,GAAI,CAAC,QAAQ;AAAA,UACX,MACE,SAAS,SAAS,MAAM,QAAQ,MAAM,IAClC,OAAO,IAAI,CAAC,MAAM;AACT,mBAAA;AAAA,cACL,MAAM,EAAE;AAAA,cACR,MAAM;AAAA,gBACH,EAAU,aAAa,OAAO,WAAW;AAAA,cAC5C;AAAA,YAAA;AAAA,UAEH,CAAA,IACD;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,QAAQ,MAAM,MAAM,WAAW,cAAc,SAAS,CAAC;AAEpD,SAAA;AACT;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOption.mjs","sources":["../../../src/hooks/useOption.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartCommonProps, HvEChartsOption } from \"../types/common\";\n\ninterface HvOptionHookProps {\n option: HvEChartsOption;\n onOptionChange?: HvChartCommonProps[\"onOptionChange\"];\n}\n\nexport const useOption = ({\n option: optionProp,\n onOptionChange,\n}: HvOptionHookProps) => {\n const option = useMemo<HvEChartsOption>(() => {\n // Common properties to all charts\n const baseOption = {\n aria: {\n enabled: true,\n },\n animation: false,\n };\n\n const opt = { ...baseOption, ...optionProp };\n\n return onOptionChange ? onOptionChange(opt) : opt;\n }, [onOptionChange, optionProp]);\n\n return option;\n};\n"],"names":[],"mappings":";AASO,MAAM,YAAY,CAAC;AAAA,EACxB,QAAQ;AAAA,EACR;AACF,MAAyB;AACjB,QAAA,SAAS,QAAyB,MAAM;AAE5C,UAAM,aAAa;AAAA,MACjB,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,WAAW;AAAA,IAAA;AAGb,UAAM,MAAM,EAAE,GAAG,YAAY,GAAG,WAAW;AAEpC,WAAA,iBAAiB,eAAe,GAAG,IAAI;AAAA,EAAA,GAC7C,CAAC,gBAAgB,UAAU,CAAC;AAExB,SAAA;AACT;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSeries.mjs","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n BarSeriesOption,\n LineSeriesOption,\n PieSeriesOption,\n} from \"echarts/charts\";\n\nimport { internal } from \"arquero\";\n\nimport { getGroupKey, getMeasure } from \"../utils\";\nimport {\n HvBarChartMeasures,\n HvChartEmptyCellMode,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"../types\";\nimport {\n HvAxisChartCommonProps,\n HvChartCommonProps,\n HvEChartsOption,\n} from \"../types/common\";\nimport { BarFullMeasures, LineFullMeasures } from \"../types/measures\";\n\ninterface HvSeriesHookProps {\n type: \"line\" | \"bar\" | \"pie\";\n data: internal.ColumnTable;\n groupBy: HvChartCommonProps[\"groupBy\"];\n measures:\n | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n | HvDonutChartMeasure;\n area?: boolean;\n areaOpacity?: number;\n emptyCellMode?: HvChartEmptyCellMode;\n stack?: HvAxisChartCommonProps[\"stack\"];\n nameFormatter?: HvAxisChartCommonProps[\"seriesNameFormatter\"];\n horizontal?: boolean;\n radius?: number | string | (number | string)[];\n}\n\nexport const useSeries = ({\n groupBy,\n type,\n data,\n measures,\n nameFormatter,\n stack,\n horizontal = false,\n area = false,\n areaOpacity = 0.5,\n emptyCellMode,\n radius,\n}: HvSeriesHookProps) => {\n const groupByKey = getGroupKey(groupBy);\n\n const option: Pick<HvEChartsOption, \"series\"> = useMemo<\n Pick<HvEChartsOption, \"series\">\n >(() => {\n return {\n series: data\n .columnNames()\n .filter((c) => c !== groupByKey)\n .map<LineSeriesOption | BarSeriesOption | PieSeriesOption>((c) => {\n const measure = getMeasure(c, measures);\n\n let pieOps: PieSeriesOption = {};\n let lineOps: LineSeriesOption = {};\n let barOps: BarSeriesOption = {};\n\n // pie\n if (type === \"pie\") {\n pieOps = {\n encode: {\n value: c,\n itemName: groupByKey,\n },\n labelLine: {\n show: false,\n },\n label: {\n show: false,\n },\n emphasis: {\n label: {\n show: false,\n },\n },\n radius,\n };\n }\n\n // line or bar\n if (type === \"line\" || type === \"bar\") {\n const sampling =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures | BarFullMeasures).sampling\n : undefined;\n const yAxisId =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures | BarFullMeasures).yAxis\n : undefined;\n const stackName =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures | BarFullMeasures).stack ??\n stack ??\n undefined\n : stack ?? undefined;\n\n const axisOps = {\n sampling,\n yAxisId,\n stack: stackName,\n encode: horizontal\n ? {\n x: c,\n y: groupByKey,\n }\n : {\n x: groupByKey,\n y: c,\n },\n };\n\n // bar\n if (type === \"bar\") {\n barOps = {\n ...axisOps,\n barMaxWidth: 90,\n barMinWidth: 3,\n };\n }\n\n // line\n if (type === \"line\") {\n const showSymbol =\n typeof measure !== \"string\"\n ? !(measure as LineFullMeasures).hideSymbol\n : true;\n const connectNulls =\n typeof measure !== \"string\" &&\n (measure as LineFullMeasures).emptyCellMode\n ? (measure as LineFullMeasures).emptyCellMode === \"connect\"\n : emptyCellMode === \"connect\";\n const isArea =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures).area ?? area\n : area;\n const aOpacity =\n typeof measure !== \"string\"\n ? (measure as LineFullMeasures).areaOpacity ?? areaOpacity\n : areaOpacity;\n\n lineOps = {\n ...axisOps,\n connectNulls,\n showSymbol,\n areaStyle: isArea ? { opacity: aOpacity } : undefined,\n };\n }\n }\n\n return {\n id: `series~${groupByKey}~${c}`,\n type,\n name: nameFormatter ? nameFormatter(c) : c,\n ...pieOps,\n ...barOps,\n ...lineOps,\n } as LineSeriesOption | BarSeriesOption | PieSeriesOption;\n }),\n };\n }, [\n data,\n groupByKey,\n area,\n stack,\n nameFormatter,\n emptyCellMode,\n areaOpacity,\n measures,\n type,\n horizontal,\n radius,\n ]);\n\n return option;\n};\n"],"names":[],"mappings":";;AA0CO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AACF,MAAyB;AACjB,QAAA,aAAa,YAAY,OAAO;AAEhC,QAAA,SAA0C,QAE9C,MAAM;AACC,WAAA;AAAA,MACL,QAAQ,KACL,YAAY,EACZ,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,IAA0D,CAAC,MAAM;AAC1D,cAAA,UAAU,WAAW,GAAG,QAAQ;AAEtC,YAAI,SAA0B,CAAA;AAC9B,YAAI,UAA4B,CAAA;AAChC,YAAI,SAA0B,CAAA;AAG9B,YAAI,SAAS,OAAO;AACT,mBAAA;AAAA,YACP,QAAQ;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YACA,WAAW;AAAA,cACT,MAAM;AAAA,YACR;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,OAAO;AAAA,gBACL,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAEJ;AAGI,YAAA,SAAS,UAAU,SAAS,OAAO;AACrC,gBAAM,WACJ,OAAO,YAAY,WACd,QAA+C,WAChD;AACN,gBAAM,UACJ,OAAO,YAAY,WACd,QAA+C,QAChD;AACA,gBAAA,YACJ,OAAO,YAAY,WACd,QAA+C,SAChD,SACA,SACA,SAAS;AAEf,gBAAM,UAAU;AAAA,YACd;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ,aACJ;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YAAA,IAEL;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAIN,cAAI,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAG;AAAA,cACH,aAAa;AAAA,cACb,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAI,SAAS,QAAQ;AACnB,kBAAM,aACJ,OAAO,YAAY,WACf,CAAE,QAA6B,aAC/B;AACA,kBAAA,eACJ,OAAO,YAAY,YAClB,QAA6B,gBACzB,QAA6B,kBAAkB,YAChD,kBAAkB;AACxB,kBAAM,SACJ,OAAO,YAAY,WACd,QAA6B,QAAQ,OACtC;AACN,kBAAM,WACJ,OAAO,YAAY,WACd,QAA6B,eAAe,cAC7C;AAEI,sBAAA;AAAA,cACR,GAAG;AAAA,cACH;AAAA,cACA;AAAA,cACA,WAAW,SAAS,EAAE,SAAS,aAAa;AAAA,YAAA;AAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACL,IAAI,UAAU,UAAU,IAAI,CAAC;AAAA,UAC7B;AAAA,UACA,MAAM,gBAAgB,cAAc,CAAC,IAAI;AAAA,UACzC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,MACL,CACD;AAAA,IAAA;AAAA,EACL,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useVisualMap.mjs","sources":["../../../src/hooks/useVisualMap.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"../utils\";\nimport { HvChartLegend } from \"../types\";\nimport { HvEChartsOption } from \"../types/common\";\n\nexport interface HvVisualMapHookProps {\n show?: boolean;\n pieces?: Record<string, string | number>[];\n max?: number;\n min?: number;\n colorScale?: string[];\n type?: \"continuous\" | \"piecewise\";\n // Uses the same props as the legend\n position?: HvChartLegend[\"position\"];\n direction?: HvChartLegend[\"direction\"];\n}\n\nexport const useVisualMap = ({\n show = true,\n direction = \"horizontal\",\n type = \"continuous\",\n pieces,\n max,\n min,\n colorScale,\n position: positionProp,\n}: HvVisualMapHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"visualMap\">>(() => {\n return {\n visualMap: {\n type,\n show,\n ...(pieces && {\n pieces,\n }),\n ...(type === \"piecewise\" && {\n itemSymbol: getLegendIcon(\"square\"),\n itemGap: 20,\n itemHeight: 16,\n itemWidth: 16,\n }),\n ...(colorScale && {\n max,\n min,\n inRange: {\n color: colorScale,\n },\n }),\n orient: direction,\n top: positionProp?.y || \"top\",\n left: positionProp?.x || \"center\",\n },\n };\n }, [\n colorScale,\n direction,\n max,\n min,\n pieces,\n positionProp?.x,\n positionProp?.y,\n show,\n type,\n ]);\n\n return option;\n};\n"],"names":[],"mappings":";;AAkBO,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAA4B;AACpB,QAAA,SAAS,QAA4C,MAAM;AACxD,WAAA;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,GAAI,UAAU;AAAA,UACZ;AAAA,QACF;AAAA,QACA,GAAI,SAAS,eAAe;AAAA,UAC1B,YAAY,cAAc,QAAQ;AAAA,UAClC,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA,QACA,GAAI,cAAc;AAAA,UAChB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,QACR,KAAK,cAAc,KAAK;AAAA,QACxB,MAAM,cAAc,KAAK;AAAA,MAC3B;AAAA,IAAA;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useVizTheme.mjs","sources":["../../../src/hooks/useVizTheme.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvVizContext, HvVizContextValue } from \"../providers/Provider\";\n\nexport const useVizTheme = (): HvVizContextValue => {\n return useContext(HvVizContext);\n};\n"],"names":[],"mappings":";;AAIO,MAAM,cAAc,MAAyB;AAClD,SAAO,WAAW,YAAY;AAChC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useXAxis.mjs","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"../utils\";\nimport { HvChartXAxis, HvEChartsOption } from \"../types/common\";\n\ninterface HvXAxisHookProps extends HvChartXAxis {\n scale?: boolean;\n data?: string[];\n}\n\nexport const useXAxis = ({\n id,\n type = \"categorical\",\n labelFormatter,\n labelRotation,\n name,\n maxValue,\n minValue,\n scale = false,\n data,\n position,\n nameProps,\n}: HvXAxisHookProps) => {\n const { colors } = useTheme();\n\n const option = useMemo<Pick<HvEChartsOption, \"xAxis\">>(() => {\n const nameStyleKeys = nameProps\n ? Object.keys(nameProps).filter((key) => key !== \"location\")\n : undefined;\n const nameStyle =\n nameProps && nameStyleKeys\n ? nameStyleKeys.reduce((acc, curr) => {\n return {\n ...acc,\n [curr]:\n curr === \"color\"\n ? colors?.[nameProps[curr] as string] || nameProps[curr]\n : nameProps[curr],\n };\n }, {})\n : undefined;\n\n return {\n xAxis: {\n id,\n type: getAxisType(type),\n name,\n scale,\n axisLabel: {\n rotate: labelRotation ?? 0,\n formatter: labelFormatter,\n },\n max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n min: minValue === \"min\" ? \"dataMin\" : minValue,\n ...(nameProps?.location && {\n nameLocation: nameProps.location,\n }),\n ...(nameStyle && {\n nameTextStyle: nameStyle,\n }),\n ...(data && { data }),\n ...(position && { position }),\n },\n };\n }, [\n nameProps,\n id,\n type,\n name,\n scale,\n labelRotation,\n labelFormatter,\n maxValue,\n minValue,\n data,\n position,\n colors,\n ]);\n\n return option;\n};\n"],"names":[],"mappings":";;;AAYO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AAChB,QAAA,EAAE,WAAW;AAEb,QAAA,SAAS,QAAwC,MAAM;AACrD,UAAA,gBAAgB,YAClB,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAQ,UAAU,IACzD;AACJ,UAAM,YACJ,aAAa,gBACT,cAAc,OAAO,CAAC,KAAK,SAAS;AAC3B,aAAA;AAAA,QACL,GAAG;AAAA,QACH,CAAC,IAAI,GACH,SAAS,UACL,SAAS,UAAU,IAAI,CAAW,KAAK,UAAU,IAAI,IACrD,UAAU,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACL;AAEC,WAAA;AAAA,MACL,OAAO;AAAA,QACL;AAAA,QACA,MAAM,YAAY,IAAI;AAAA,QACtB;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ,iBAAiB;AAAA,UACzB,WAAW;AAAA,QACb;AAAA,QACA,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,GAAI,WAAW,YAAY;AAAA,UACzB,cAAc,UAAU;AAAA,QAC1B;AAAA,QACA,GAAI,aAAa;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB,GAAI,YAAY,EAAE,SAAS;AAAA,MAC7B;AAAA,IAAA;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useYAxis.mjs","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"../utils\";\nimport { HvChartAxisType } from \"../types\";\nimport { HvChartYAxis, HvEChartsOption } from \"../types/common\";\n\ninterface YAxis extends HvChartYAxis {\n data?: string[];\n}\n\ninterface HvYAxisHookProps {\n axes?: YAxis[];\n defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n axes,\n defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n const { colors } = useTheme();\n\n const createAxis = useCallback(\n ({\n id,\n type,\n name,\n labelFormatter,\n labelRotation,\n maxValue,\n minValue,\n nameProps,\n data,\n position,\n }: YAxis) => {\n const nameStyleKeys = nameProps\n ? Object.keys(nameProps).filter((key) => key !== \"location\")\n : undefined;\n const nameStyle =\n nameProps && nameStyleKeys\n ? nameStyleKeys.reduce((acc, curr) => {\n return {\n ...acc,\n [curr]:\n curr === \"color\"\n ? colors?.[nameProps[curr] as string] || nameProps[curr]\n : nameProps[curr],\n };\n }, {})\n : undefined;\n\n return {\n id,\n type: getAxisType(type) ?? getAxisType(defaultType),\n name,\n axisLabel: {\n rotate: labelRotation ?? 0,\n formatter: labelFormatter,\n },\n max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n min: minValue === \"min\" ? \"dataMin\" : minValue,\n ...(nameProps?.location && {\n nameLocation: nameProps?.location,\n }),\n ...(nameStyle && {\n nameTextStyle: nameStyle,\n }),\n ...(data && { data }),\n ...(position && { position }),\n };\n },\n [colors, defaultType]\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"yAxis\">>(() => {\n return {\n yAxis: Array.isArray(axes)\n ? axes.map((axis) => createAxis(axis))\n : [createAxis({})],\n };\n }, [axes, createAxis]);\n\n return option;\n};\n"],"names":[],"mappings":";;;AAiBO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,MAAwB;AAChB,QAAA,EAAE,WAAW;AAEnB,QAAM,aAAa;AAAA,IACjB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,MACW;AACL,YAAA,gBAAgB,YAClB,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAQ,UAAU,IACzD;AACJ,YAAM,YACJ,aAAa,gBACT,cAAc,OAAO,CAAC,KAAK,SAAS;AAC3B,eAAA;AAAA,UACL,GAAG;AAAA,UACH,CAAC,IAAI,GACH,SAAS,UACL,SAAS,UAAU,IAAI,CAAW,KAAK,UAAU,IAAI,IACrD,UAAU,IAAI;AAAA,QAAA;AAAA,MACtB,GACC,CAAE,CAAA,IACL;AAEC,aAAA;AAAA,QACL;AAAA,QACA,MAAM,YAAY,IAAI,KAAK,YAAY,WAAW;AAAA,QAClD;AAAA,QACA,WAAW;AAAA,UACT,QAAQ,iBAAiB;AAAA,UACzB,WAAW;AAAA,QACb;AAAA,QACA,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,GAAI,WAAW,YAAY;AAAA,UACzB,cAAc,WAAW;AAAA,QAC3B;AAAA,QACA,GAAI,aAAa;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB,GAAI,YAAY,EAAE,SAAS;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EAAA;AAGhB,QAAA,SAAS,QAAwC,MAAM;AACpD,WAAA;AAAA,MACL,OAAO,MAAM,QAAQ,IAAI,IACrB,KAAK,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IACnC,CAAC,WAAW,CAAE,CAAA,CAAC;AAAA,IAAA;AAAA,EACrB,GACC,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;"}
|
package/dist/esm/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.mjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { registerTheme } from \"../utils/registerTheme\";\n\nexport interface HvVizContextValue {\n /**\n * Current theme\n */\n theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n /**\n * Component tree.\n */\n children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n * <HvVizProvider>\n * (...)\n * </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n const value = useMemo(() => {\n registerTheme(selectedTheme, selectedMode, activeTheme);\n\n return { theme: `${selectedTheme}-${selectedMode}` };\n }, [selectedTheme, selectedMode, activeTheme]);\n\n return (\n <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,eAAe,cAAiC;AAAA,EAC3D,OAAO;AACT,CAAC;AA2BM,MAAM,gBAAgB,CAAC,EAAE,eAAmC;AACjE,QAAM,EAAE,aAAa,cAAc,kBAAkB,SAAS;AAExD,QAAA,QAAQ,QAAQ,MAAM;AACZ,kBAAA,eAAe,cAAc,WAAW;AAEtD,WAAO,EAAE,OAAO,GAAG,aAAa,IAAI,YAAY;EAC/C,GAAA,CAAC,eAAe,cAAc,WAAW,CAAC;AAE7C,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAe,SAAS,CAAA;AAEnD;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvChartLegendIcon } from \"../types/legend\";\n\nimport type {\n HvBarChartMeasures,\n HvChartAxisType,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"..\";\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 \"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: Arrayable<HvLineChartMeasures | HvBarChartMeasures> | HvDonutChartMeasure\n): HvLineChartMeasures | HvBarChartMeasures | HvDonutChartMeasure => {\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":"AAYa,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;AAAA,IACL;AACS,aAAA;AAAA,EACX;AACF;AAEa,MAAA,aAAa,CACxB,MACA,QACmE;AACnE,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;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"registerTheme.mjs","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import { HvTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as echarts from \"echarts/core\";\n\nexport const registerTheme = (\n name: string,\n mode: string,\n themeStructure?: HvTheme\n) => {\n const baseText = {\n color: themeStructure?.colors.modes[mode].secondary,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n };\n\n const customAxis = {\n nameTextStyle: {\n ...baseText,\n color: themeStructure?.colors.modes[mode].secondary_80,\n },\n axisLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisTick: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisLabel: {\n color: themeStructure?.colors.modes[mode].secondary_80,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n },\n splitLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n };\n\n echarts.registerTheme(`${name}-${mode}`, {\n color: [\n themeStructure?.colors.modes[mode].cat1,\n themeStructure?.colors.modes[mode].cat2,\n themeStructure?.colors.modes[mode].cat3,\n themeStructure?.colors.modes[mode].cat4,\n themeStructure?.colors.modes[mode].cat5,\n themeStructure?.colors.modes[mode].cat6,\n themeStructure?.colors.modes[mode].cat7,\n themeStructure?.colors.modes[mode].cat8,\n themeStructure?.colors.modes[mode].cat9,\n themeStructure?.colors.modes[mode].cat10,\n themeStructure?.colors.modes[mode].cat11,\n themeStructure?.colors.modes[mode].cat12,\n ],\n legend: {\n textStyle: {\n ...baseText,\n },\n },\n tooltip: {\n borderWidth: 0,\n padding: 0,\n textStyle: {\n ...baseText,\n },\n axisPointer: {\n lineStyle: {\n color: themeStructure?.colors.modes[mode].secondary,\n width: 1,\n },\n },\n },\n dataZoom: {\n textStyle: { ...baseText },\n },\n categoryAxis: {\n ...customAxis,\n },\n valueAxis: {\n ...customAxis,\n },\n logAxis: {\n ...customAxis,\n },\n timeAxis: {\n ...customAxis,\n },\n line: {\n lineStyle: {\n width: 2,\n },\n },\n visualMap: {\n textStyle: {\n ...baseText,\n },\n },\n heatmap: {\n label: {\n fontWeight: baseText.fontWeight,\n fontSize: baseText.fontSize,\n fontFamily: baseText.fontFamily,\n },\n itemStyle: {\n borderColor: themeStructure?.colors.modes[mode].atmo3,\n borderWidth: 1,\n },\n },\n });\n};\n"],"names":[],"mappings":";AAGO,MAAM,gBAAgB,CAC3B,MACA,MACA,mBACG;AACH,QAAM,WAAW;AAAA,IACf,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IAC1C,YAAY,gBAAgB,YAAY;AAAA,IACxC,UAAU,gBAAgB,UAAU;AAAA,IACpC,YAAY,gBAAgB,WAAW;AAAA,EAAA;AAGzC,QAAM,aAAa;AAAA,IACjB,eAAe;AAAA,MACb,GAAG;AAAA,MACH,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IAC5C;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC1C,YAAY,gBAAgB,YAAY;AAAA,MACxC,UAAU,gBAAgB,UAAU;AAAA,MACpC,YAAY,gBAAgB,WAAW;AAAA,IACzC;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,EAAA;AAGF,UAAQ,cAAc,GAAG,IAAI,IAAI,IAAI,IAAI;AAAA,IACvC,OAAO;AAAA,MACL,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,MACnC,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,IACrC;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,UACT,OAAO,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,UAC1C,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,WAAW,EAAE,GAAG,SAAS;AAAA,IAC3B;AAAA,IACA,cAAc;AAAA,MACZ,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,IACA,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,MACR,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,MACJ,WAAW;AAAA,QACT,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,YAAY,SAAS;AAAA,QACrB,UAAU,SAAS;AAAA,QACnB,YAAY,SAAS;AAAA,MACvB;AAAA,MACA,WAAW;AAAA,QACT,aAAa,gBAAgB,OAAO,MAAM,IAAI,EAAE;AAAA,QAChD,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EAAA,CACD;AACH;"}
|