@hitachivantara/uikit-react-viz 5.6.27 → 5.6.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/BarChart/BarChart.cjs +82 -80
- package/dist/cjs/components/BarChart/BarChart.cjs.map +1 -1
- package/dist/cjs/components/BaseChart/BaseChart.cjs +42 -36
- package/dist/cjs/components/BaseChart/BaseChart.cjs.map +1 -1
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.cjs +28 -17
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.cjs.map +1 -1
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.styles.cjs +22 -22
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.styles.cjs.map +1 -1
- package/dist/cjs/components/ConfusionMatrix/utils.cjs +32 -23
- package/dist/cjs/components/ConfusionMatrix/utils.cjs.map +1 -1
- package/dist/cjs/components/DonutChart/DonutChart.cjs +60 -59
- package/dist/cjs/components/DonutChart/DonutChart.cjs.map +1 -1
- package/dist/cjs/components/LineChart/LineChart.cjs +80 -81
- package/dist/cjs/components/LineChart/LineChart.cjs.map +1 -1
- package/dist/cjs/hooks/tooltip/styles.cjs +2 -7
- package/dist/cjs/hooks/tooltip/styles.cjs.map +1 -1
- package/dist/cjs/hooks/tooltip/useTooltip.cjs +55 -37
- package/dist/cjs/hooks/tooltip/useTooltip.cjs.map +1 -1
- package/dist/cjs/hooks/useData.cjs +24 -22
- package/dist/cjs/hooks/useData.cjs.map +1 -1
- package/dist/cjs/hooks/useDataZoom.cjs +15 -14
- package/dist/cjs/hooks/useDataZoom.cjs.map +1 -1
- package/dist/cjs/hooks/useDataset.cjs +7 -4
- package/dist/cjs/hooks/useDataset.cjs.map +1 -1
- package/dist/cjs/hooks/useGrid.cjs.map +1 -1
- package/dist/cjs/hooks/useLegend.cjs +5 -7
- package/dist/cjs/hooks/useLegend.cjs.map +1 -1
- package/dist/cjs/hooks/useOption.cjs +1 -4
- package/dist/cjs/hooks/useOption.cjs.map +1 -1
- package/dist/cjs/hooks/useSeries.cjs +14 -4
- package/dist/cjs/hooks/useSeries.cjs.map +1 -1
- package/dist/cjs/hooks/useVisualMap.cjs +11 -1
- package/dist/cjs/hooks/useVisualMap.cjs.map +1 -1
- package/dist/cjs/hooks/useVizTheme.cjs.map +1 -1
- package/dist/cjs/hooks/useXAxis.cjs +17 -10
- package/dist/cjs/hooks/useXAxis.cjs.map +1 -1
- package/dist/cjs/hooks/useYAxis.cjs +41 -44
- package/dist/cjs/hooks/useYAxis.cjs.map +1 -1
- package/dist/cjs/providers/Provider.cjs +3 -11
- package/dist/cjs/providers/Provider.cjs.map +1 -1
- package/dist/cjs/utils/getAgFunc.cjs.map +1 -1
- package/dist/cjs/utils/getAxisType.cjs.map +1 -1
- package/dist/cjs/utils/getGroupKey.cjs.map +1 -1
- package/dist/cjs/utils/getLegendIcon.cjs.map +1 -1
- package/dist/cjs/utils/getMeasure.cjs.map +1 -1
- package/dist/cjs/utils/registerTheme.cjs +15 -4
- package/dist/cjs/utils/registerTheme.cjs.map +1 -1
- package/dist/esm/components/BarChart/BarChart.js +82 -80
- package/dist/esm/components/BarChart/BarChart.js.map +1 -1
- package/dist/esm/components/BaseChart/BaseChart.js +42 -36
- package/dist/esm/components/BaseChart/BaseChart.js.map +1 -1
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.js +28 -17
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.js.map +1 -1
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.styles.js +22 -22
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.styles.js.map +1 -1
- package/dist/esm/components/ConfusionMatrix/utils.js +32 -23
- package/dist/esm/components/ConfusionMatrix/utils.js.map +1 -1
- package/dist/esm/components/DonutChart/DonutChart.js +60 -59
- package/dist/esm/components/DonutChart/DonutChart.js.map +1 -1
- package/dist/esm/components/LineChart/LineChart.js +80 -81
- package/dist/esm/components/LineChart/LineChart.js.map +1 -1
- package/dist/esm/hooks/tooltip/styles.js +2 -7
- package/dist/esm/hooks/tooltip/styles.js.map +1 -1
- package/dist/esm/hooks/tooltip/useTooltip.js +55 -37
- package/dist/esm/hooks/tooltip/useTooltip.js.map +1 -1
- package/dist/esm/hooks/useData.js +24 -22
- package/dist/esm/hooks/useData.js.map +1 -1
- package/dist/esm/hooks/useDataZoom.js +15 -14
- package/dist/esm/hooks/useDataZoom.js.map +1 -1
- package/dist/esm/hooks/useDataset.js +7 -4
- package/dist/esm/hooks/useDataset.js.map +1 -1
- package/dist/esm/hooks/useGrid.js.map +1 -1
- package/dist/esm/hooks/useLegend.js +5 -7
- package/dist/esm/hooks/useLegend.js.map +1 -1
- package/dist/esm/hooks/useOption.js +1 -4
- package/dist/esm/hooks/useOption.js.map +1 -1
- package/dist/esm/hooks/useSeries.js +14 -4
- package/dist/esm/hooks/useSeries.js.map +1 -1
- package/dist/esm/hooks/useVisualMap.js +11 -1
- package/dist/esm/hooks/useVisualMap.js.map +1 -1
- package/dist/esm/hooks/useVizTheme.js.map +1 -1
- package/dist/esm/hooks/useXAxis.js +17 -10
- package/dist/esm/hooks/useXAxis.js.map +1 -1
- package/dist/esm/hooks/useYAxis.js +41 -44
- package/dist/esm/hooks/useYAxis.js.map +1 -1
- package/dist/esm/providers/Provider.js +3 -11
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/esm/utils/getAgFunc.js.map +1 -1
- package/dist/esm/utils/getAxisType.js.map +1 -1
- package/dist/esm/utils/getGroupKey.js.map +1 -1
- package/dist/esm/utils/getLegendIcon.js.map +1 -1
- package/dist/esm/utils/getMeasure.js.map +1 -1
- package/dist/esm/utils/registerTheme.js +15 -4
- package/dist/esm/utils/registerTheme.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.cjs","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 \"@viz/types\";\nimport { getMeasure } from \"@viz/utils\";\nimport { HvEChartsOption } from \"@viz/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":["useTooltip","measures","classes","component","show","horizontal","trigger","type","valueFormatter","titleFormatter","nameFormatter","hvClasses","useClasses","renderTooltip","useCallback","params","title","seriesType","seriesName","value","encode","y","x","formattedTitle","measure","getMeasure","name","dimensionNames","formattedValue","singleTooltipRoot","singleTooltipTitle","singleTooltipValue","multipleTooltipRoot","multipleTooltipTitleContainer","multipleTooltipTitle","multipleTooltipValuesContainer","map","s","formattedName","multipleTooltipSeriesContainer","multipleTooltipSeriesNameContainer","color","multipleTooltipSeriesColor","multipleTooltipSeriesName","multipleTooltipSeriesValue","join","renderCustomTooltip","values","series","p","String","option","useMemo","tooltip","confine","position","point","dom","rect","size","contentSize","formatter","tooltipParams","Array","isArray"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useTooltip.cjs","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 \"@viz/types\";\nimport { getMeasure } from \"@viz/utils\";\nimport { HvEChartsOption } from \"@viz/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":["useClasses","useCallback","getMeasure","useMemo"],"mappings":"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"}
|
|
@@ -24,9 +24,7 @@ const useData = ({
|
|
|
24
24
|
}
|
|
25
25
|
const groupByFields = groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : [];
|
|
26
26
|
const splitByFields = Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : [];
|
|
27
|
-
const measuresFields = measures == null ? {} : typeof measures === "string" ? {
|
|
28
|
-
[measures]: getAgFunc.getAgFunc("sum", measures)
|
|
29
|
-
} : Array.isArray(measures) ? measures.reduce((acc, value) => {
|
|
27
|
+
const measuresFields = measures == null ? {} : typeof measures === "string" ? { [measures]: getAgFunc.getAgFunc("sum", measures) } : Array.isArray(measures) ? measures.reduce((acc, value) => {
|
|
30
28
|
let field;
|
|
31
29
|
let agFunction;
|
|
32
30
|
if (typeof value === "string") {
|
|
@@ -43,9 +41,7 @@ const useData = ({
|
|
|
43
41
|
}, {}) : {
|
|
44
42
|
[measures.field]: getAgFunc.getAgFunc(measures.agg ?? "sum", measures.field)
|
|
45
43
|
};
|
|
46
|
-
const sortByFields = sortBy == null ? {} : typeof sortBy === "string" ? {
|
|
47
|
-
[sortBy]: "asc"
|
|
48
|
-
} : Array.isArray(sortBy) ? sortBy.reduce((acc, value) => {
|
|
44
|
+
const sortByFields = sortBy == null ? {} : typeof sortBy === "string" ? { [sortBy]: "asc" } : Array.isArray(sortBy) ? sortBy.reduce((acc, value) => {
|
|
49
45
|
let field;
|
|
50
46
|
let orderFunction;
|
|
51
47
|
if (typeof value === "string") {
|
|
@@ -59,17 +55,22 @@ const useData = ({
|
|
|
59
55
|
...acc,
|
|
60
56
|
[field]: orderFunction
|
|
61
57
|
};
|
|
62
|
-
}, {}) : {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
58
|
+
}, {}) : { [sortBy.field]: sortBy.order ?? "asc" };
|
|
59
|
+
const allFields = [
|
|
60
|
+
...groupByFields,
|
|
61
|
+
...splitByFields,
|
|
62
|
+
...Object.keys(measuresFields)
|
|
63
|
+
];
|
|
66
64
|
if (delta) {
|
|
67
|
-
const deltaExpression = Object.keys(measuresFields).reduce(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
65
|
+
const deltaExpression = Object.keys(measuresFields).reduce(
|
|
66
|
+
(acc, curr) => {
|
|
67
|
+
return {
|
|
68
|
+
...acc,
|
|
69
|
+
[curr]: `d => d.${curr} - d.${delta}`
|
|
70
|
+
};
|
|
71
|
+
},
|
|
72
|
+
{}
|
|
73
|
+
);
|
|
73
74
|
tableData = tableData.derive(deltaExpression);
|
|
74
75
|
}
|
|
75
76
|
tableData = tableData.select(...allFields);
|
|
@@ -83,14 +84,15 @@ const useData = ({
|
|
|
83
84
|
}
|
|
84
85
|
if (groupByFields.length > 1) {
|
|
85
86
|
const expression = `d => ${groupByFields.map((field) => `d.${field}`).join(" + '_' + ")}`;
|
|
86
|
-
tableData = tableData.derive(
|
|
87
|
-
[groupByKey]: expression
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
});
|
|
87
|
+
tableData = tableData.derive(
|
|
88
|
+
{ [groupByKey]: expression },
|
|
89
|
+
{ after: groupByFields[groupByFields.length - 1] }
|
|
90
|
+
);
|
|
91
91
|
}
|
|
92
92
|
if (Object.keys(sortByFields).length > 0) {
|
|
93
|
-
tableData = tableData.orderby(
|
|
93
|
+
tableData = tableData.orderby(
|
|
94
|
+
...Object.keys(sortByFields).filter((key) => allFields.includes(key)).map((key) => sortByFields[key] === "desc" ? arquero.desc(key) : key)
|
|
95
|
+
);
|
|
94
96
|
}
|
|
95
97
|
if (groupByFields.length > 1) {
|
|
96
98
|
tableData = tableData.select(arquero.not(...groupByFields));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useData.cjs","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 \"@viz/types\";\nimport { getAgFunc, getGroupKey } from \"@viz/utils\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"@viz/types/common\";\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":["
|
|
1
|
+
{"version":3,"file":"useData.cjs","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 \"@viz/types\";\nimport { getAgFunc, getGroupKey } from \"@viz/utils\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"@viz/types/common\";\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":["getGroupKey","useMemo","internal","from","table","getAgFunc","desc","not"],"mappings":"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"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const react = require("react");
|
|
4
|
-
const useDataZoom = ({
|
|
5
|
-
showHorizontal
|
|
6
|
-
}) => {
|
|
4
|
+
const useDataZoom = ({ showHorizontal }) => {
|
|
7
5
|
const option = react.useMemo(() => {
|
|
8
6
|
return {
|
|
9
|
-
dataZoom: [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
dataZoom: [
|
|
8
|
+
{
|
|
9
|
+
show: showHorizontal ?? false,
|
|
10
|
+
type: "slider",
|
|
11
|
+
orient: "horizontal"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
show: showHorizontal ?? false,
|
|
15
|
+
type: "inside",
|
|
16
|
+
orient: "horizontal",
|
|
17
|
+
zoomOnMouseWheel: "shift",
|
|
18
|
+
moveOnMouseWheel: true
|
|
19
|
+
}
|
|
20
|
+
]
|
|
20
21
|
};
|
|
21
22
|
}, [showHorizontal]);
|
|
22
23
|
return option;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataZoom.cjs","sources":["../../../src/hooks/useDataZoom.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvEChartsOption } from \"@viz/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":["
|
|
1
|
+
{"version":3,"file":"useDataZoom.cjs","sources":["../../../src/hooks/useDataZoom.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvEChartsOption } from \"@viz/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":["useMemo"],"mappings":";;;AAQO,MAAM,cAAc,CAAC,EAAE,qBAA0C;AAChE,QAAA,SAASA,MAAAA,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;;"}
|
|
@@ -5,10 +5,13 @@ const useDataset = (data) => {
|
|
|
5
5
|
const option = react.useMemo(() => {
|
|
6
6
|
return {
|
|
7
7
|
dataset: {
|
|
8
|
-
source: data.columnNames().reduce(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
source: data.columnNames().reduce(
|
|
9
|
+
(acc, c) => ({
|
|
10
|
+
...acc,
|
|
11
|
+
[c]: data.array(c)
|
|
12
|
+
}),
|
|
13
|
+
{}
|
|
14
|
+
)
|
|
12
15
|
}
|
|
13
16
|
};
|
|
14
17
|
}, [data]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDataset.cjs","sources":["../../../src/hooks/useDataset.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { internal } from \"arquero\";\n\nimport { HvEChartsOption } from \"@viz/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":["
|
|
1
|
+
{"version":3,"file":"useDataset.cjs","sources":["../../../src/hooks/useDataset.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { internal } from \"arquero\";\n\nimport { HvEChartsOption } from \"@viz/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":["useMemo"],"mappings":";;;AAMa,MAAA,aAAa,CAAC,SAA+B;AAClD,QAAA,SAASA,MAAAA,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGrid.cjs","sources":["../../../src/hooks/useGrid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartGrid } from \"@viz/types\";\nimport { HvEChartsOption } from \"@viz/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":["
|
|
1
|
+
{"version":3,"file":"useGrid.cjs","sources":["../../../src/hooks/useGrid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartGrid } from \"@viz/types\";\nimport { HvEChartsOption } from \"@viz/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":["useMemo"],"mappings":";;;AAcO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACf,QAAA,SAASA,MAAAA,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;;"}
|
|
@@ -11,9 +11,7 @@ const useLegend = ({
|
|
|
11
11
|
direction = "horizontal"
|
|
12
12
|
}) => {
|
|
13
13
|
const option = react.useMemo(() => {
|
|
14
|
-
const position = {
|
|
15
|
-
y: positionProp?.y ?? "top"
|
|
16
|
-
};
|
|
14
|
+
const position = { y: positionProp?.y ?? "top" };
|
|
17
15
|
if (positionProp?.x != null && positionProp?.x !== "center") {
|
|
18
16
|
position[positionProp.x] = positionProp.x;
|
|
19
17
|
} else {
|
|
@@ -26,14 +24,14 @@ const useLegend = ({
|
|
|
26
24
|
formatter,
|
|
27
25
|
orient: direction,
|
|
28
26
|
...position,
|
|
29
|
-
...icon && {
|
|
30
|
-
icon: getLegendIcon.getLegendIcon(icon)
|
|
31
|
-
},
|
|
27
|
+
...icon && { icon: getLegendIcon.getLegendIcon(icon) },
|
|
32
28
|
...!icon && {
|
|
33
29
|
data: show !== false && Array.isArray(series) ? series.map((s) => {
|
|
34
30
|
return {
|
|
35
31
|
name: s.name,
|
|
36
|
-
icon: getLegendIcon.getLegendIcon(
|
|
32
|
+
icon: getLegendIcon.getLegendIcon(
|
|
33
|
+
s.areaStyle != null ? "square" : "line"
|
|
34
|
+
)
|
|
37
35
|
};
|
|
38
36
|
}) : void 0
|
|
39
37
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLegend.cjs","sources":["../../../src/hooks/useLegend.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"@viz/utils\";\nimport { HvChartLegend, HvChartLegendIcon } from \"@viz/types/legend\";\nimport { HvEChartsOption } from \"@viz/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":["
|
|
1
|
+
{"version":3,"file":"useLegend.cjs","sources":["../../../src/hooks/useLegend.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"@viz/utils\";\nimport { HvChartLegend, HvChartLegendIcon } from \"@viz/types/legend\";\nimport { HvEChartsOption } from \"@viz/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":["useMemo","getLegendIcon"],"mappings":";;;;AAeO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AACd,MAAyB;AACjB,QAAA,SAASA,MAAAA,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,MAAMC,cAAA,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,MAAMA,cAAA;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;;"}
|
|
@@ -12,10 +12,7 @@ const useOption = ({
|
|
|
12
12
|
},
|
|
13
13
|
animation: false
|
|
14
14
|
};
|
|
15
|
-
const opt = {
|
|
16
|
-
...baseOption,
|
|
17
|
-
...optionProp
|
|
18
|
-
};
|
|
15
|
+
const opt = { ...baseOption, ...optionProp };
|
|
19
16
|
return onOptionChange ? onOptionChange(opt) : opt;
|
|
20
17
|
}, [onOptionChange, optionProp]);
|
|
21
18
|
return option;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOption.cjs","sources":["../../../src/hooks/useOption.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartCommonProps, HvEChartsOption } from \"@viz/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":["
|
|
1
|
+
{"version":3,"file":"useOption.cjs","sources":["../../../src/hooks/useOption.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartCommonProps, HvEChartsOption } from \"@viz/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":["useMemo"],"mappings":";;;AASO,MAAM,YAAY,CAAC;AAAA,EACxB,QAAQ;AAAA,EACR;AACF,MAAyB;AACjB,QAAA,SAASA,MAAAA,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;;"}
|
|
@@ -76,9 +76,7 @@ const useSeries = ({
|
|
|
76
76
|
...axisOps,
|
|
77
77
|
connectNulls,
|
|
78
78
|
showSymbol,
|
|
79
|
-
areaStyle: isArea ? {
|
|
80
|
-
opacity: aOpacity
|
|
81
|
-
} : void 0
|
|
79
|
+
areaStyle: isArea ? { opacity: aOpacity } : void 0
|
|
82
80
|
};
|
|
83
81
|
}
|
|
84
82
|
}
|
|
@@ -92,7 +90,19 @@ const useSeries = ({
|
|
|
92
90
|
};
|
|
93
91
|
})
|
|
94
92
|
};
|
|
95
|
-
}, [
|
|
93
|
+
}, [
|
|
94
|
+
data,
|
|
95
|
+
groupByKey,
|
|
96
|
+
area,
|
|
97
|
+
stack,
|
|
98
|
+
nameFormatter,
|
|
99
|
+
emptyCellMode,
|
|
100
|
+
areaOpacity,
|
|
101
|
+
measures,
|
|
102
|
+
type,
|
|
103
|
+
horizontal,
|
|
104
|
+
radius
|
|
105
|
+
]);
|
|
96
106
|
return option;
|
|
97
107
|
};
|
|
98
108
|
exports.useSeries = useSeries;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSeries.cjs","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 \"@viz/utils\";\nimport {\n HvBarChartMeasures,\n HvChartEmptyCellMode,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"@viz/types\";\nimport {\n HvAxisChartCommonProps,\n HvChartCommonProps,\n HvEChartsOption,\n} from \"@viz/types/common\";\nimport { BarFullMeasures, LineFullMeasures } from \"@viz/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":["
|
|
1
|
+
{"version":3,"file":"useSeries.cjs","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 \"@viz/utils\";\nimport {\n HvBarChartMeasures,\n HvChartEmptyCellMode,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n} from \"@viz/types\";\nimport {\n HvAxisChartCommonProps,\n HvChartCommonProps,\n HvEChartsOption,\n} from \"@viz/types/common\";\nimport { BarFullMeasures, LineFullMeasures } from \"@viz/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":["getGroupKey","useMemo","getMeasure"],"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,aAAaA,wBAAY,OAAO;AAEhC,QAAA,SAA0CC,MAAAA,QAE9C,MAAM;AACC,WAAA;AAAA,MACL,QAAQ,KACL,YAAY,EACZ,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,IAA0D,CAAC,MAAM;AAC1D,cAAA,UAAUC,WAAAA,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;;"}
|
|
@@ -38,7 +38,17 @@ const useVisualMap = ({
|
|
|
38
38
|
left: positionProp?.x || "center"
|
|
39
39
|
}
|
|
40
40
|
};
|
|
41
|
-
}, [
|
|
41
|
+
}, [
|
|
42
|
+
colorScale,
|
|
43
|
+
direction,
|
|
44
|
+
max,
|
|
45
|
+
min,
|
|
46
|
+
pieces,
|
|
47
|
+
positionProp?.x,
|
|
48
|
+
positionProp?.y,
|
|
49
|
+
show,
|
|
50
|
+
type
|
|
51
|
+
]);
|
|
42
52
|
return option;
|
|
43
53
|
};
|
|
44
54
|
exports.useVisualMap = useVisualMap;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVisualMap.cjs","sources":["../../../src/hooks/useVisualMap.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"@viz/utils\";\nimport { HvChartLegend } from \"@viz/types\";\nimport { HvEChartsOption } from \"@viz/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":["
|
|
1
|
+
{"version":3,"file":"useVisualMap.cjs","sources":["../../../src/hooks/useVisualMap.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { getLegendIcon } from \"@viz/utils\";\nimport { HvChartLegend } from \"@viz/types\";\nimport { HvEChartsOption } from \"@viz/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":["useMemo","getLegendIcon"],"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,SAASA,MAAAA,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,YAAYC,4BAAc,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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVizTheme.cjs","sources":["../../../src/hooks/useVizTheme.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvVizContext, HvVizContextValue } from \"@viz/providers\";\n\nexport const useVizTheme = (): HvVizContextValue => {\n return useContext(HvVizContext);\n};\n"],"names":["
|
|
1
|
+
{"version":3,"file":"useVizTheme.cjs","sources":["../../../src/hooks/useVizTheme.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvVizContext, HvVizContextValue } from \"@viz/providers\";\n\nexport const useVizTheme = (): HvVizContextValue => {\n return useContext(HvVizContext);\n};\n"],"names":["useContext","HvVizContext"],"mappings":";;;;AAIO,MAAM,cAAc,MAAyB;AAClD,SAAOA,MAAAA,WAAWC,SAAAA,YAAY;AAChC;;"}
|
|
@@ -16,9 +16,7 @@ const useXAxis = ({
|
|
|
16
16
|
position,
|
|
17
17
|
nameProps
|
|
18
18
|
}) => {
|
|
19
|
-
const {
|
|
20
|
-
colors
|
|
21
|
-
} = uikitReactCore.useTheme();
|
|
19
|
+
const { colors } = uikitReactCore.useTheme();
|
|
22
20
|
const option = react.useMemo(() => {
|
|
23
21
|
const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
|
|
24
22
|
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
@@ -45,15 +43,24 @@ const useXAxis = ({
|
|
|
45
43
|
...nameStyle && {
|
|
46
44
|
nameTextStyle: nameStyle
|
|
47
45
|
},
|
|
48
|
-
...data && {
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
...position && {
|
|
52
|
-
position
|
|
53
|
-
}
|
|
46
|
+
...data && { data },
|
|
47
|
+
...position && { position }
|
|
54
48
|
}
|
|
55
49
|
};
|
|
56
|
-
}, [
|
|
50
|
+
}, [
|
|
51
|
+
nameProps,
|
|
52
|
+
id,
|
|
53
|
+
type,
|
|
54
|
+
name,
|
|
55
|
+
scale,
|
|
56
|
+
labelRotation,
|
|
57
|
+
labelFormatter,
|
|
58
|
+
maxValue,
|
|
59
|
+
minValue,
|
|
60
|
+
data,
|
|
61
|
+
position,
|
|
62
|
+
colors
|
|
63
|
+
]);
|
|
57
64
|
return option;
|
|
58
65
|
};
|
|
59
66
|
exports.useXAxis = useXAxis;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useXAxis.cjs","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartXAxis, HvEChartsOption } from \"@viz/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":["
|
|
1
|
+
{"version":3,"file":"useXAxis.cjs","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartXAxis, HvEChartsOption } from \"@viz/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":["useTheme","useMemo","getAxisType"],"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,WAAWA,eAAAA;AAEb,QAAA,SAASC,MAAAA,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,MAAMC,wBAAY,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;;"}
|