@hitachivantara/uikit-react-viz 5.6.0 → 5.6.2
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 +1 -1
- package/dist/cjs/components/BarChart/BarChart.cjs.map +1 -1
- package/dist/cjs/components/BaseChart/BaseChart.cjs +1 -2
- package/dist/cjs/components/BaseChart/BaseChart.cjs.map +1 -1
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.cjs +10 -12
- package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.cjs.map +1 -1
- package/dist/cjs/components/ConfusionMatrix/utils.cjs +7 -7
- package/dist/cjs/components/ConfusionMatrix/utils.cjs.map +1 -1
- package/dist/cjs/components/DonutChart/DonutChart.cjs +1 -1
- package/dist/cjs/components/DonutChart/DonutChart.cjs.map +1 -1
- package/dist/cjs/components/LineChart/LineChart.cjs +1 -1
- package/dist/cjs/components/LineChart/LineChart.cjs.map +1 -1
- package/dist/cjs/hooks/tooltip/useTooltip.cjs +12 -12
- package/dist/cjs/hooks/tooltip/useTooltip.cjs.map +1 -1
- package/dist/cjs/hooks/useLegend.cjs +2 -2
- package/dist/cjs/hooks/useLegend.cjs.map +1 -1
- package/dist/cjs/hooks/useVisualMap.cjs +3 -3
- package/dist/cjs/hooks/useVisualMap.cjs.map +1 -1
- package/dist/cjs/hooks/useXAxis.cjs +2 -2
- package/dist/cjs/hooks/useXAxis.cjs.map +1 -1
- package/dist/cjs/hooks/useYAxis.cjs +3 -3
- package/dist/cjs/hooks/useYAxis.cjs.map +1 -1
- package/dist/cjs/utils/registerTheme.cjs +15 -15
- package/dist/cjs/utils/registerTheme.cjs.map +1 -1
- package/dist/esm/components/BarChart/BarChart.js +1 -1
- package/dist/esm/components/BarChart/BarChart.js.map +1 -1
- package/dist/esm/components/BaseChart/BaseChart.js +1 -2
- package/dist/esm/components/BaseChart/BaseChart.js.map +1 -1
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.js +10 -12
- package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.js.map +1 -1
- package/dist/esm/components/ConfusionMatrix/utils.js +7 -7
- package/dist/esm/components/ConfusionMatrix/utils.js.map +1 -1
- package/dist/esm/components/DonutChart/DonutChart.js +1 -1
- package/dist/esm/components/DonutChart/DonutChart.js.map +1 -1
- package/dist/esm/components/LineChart/LineChart.js +1 -1
- package/dist/esm/components/LineChart/LineChart.js.map +1 -1
- package/dist/esm/hooks/tooltip/useTooltip.js +12 -12
- package/dist/esm/hooks/tooltip/useTooltip.js.map +1 -1
- package/dist/esm/hooks/useLegend.js +2 -2
- package/dist/esm/hooks/useLegend.js.map +1 -1
- package/dist/esm/hooks/useVisualMap.js +3 -3
- package/dist/esm/hooks/useVisualMap.js.map +1 -1
- package/dist/esm/hooks/useXAxis.js +2 -2
- package/dist/esm/hooks/useXAxis.js.map +1 -1
- package/dist/esm/hooks/useYAxis.js +3 -3
- package/dist/esm/hooks/useYAxis.js.map +1 -1
- package/dist/esm/utils/registerTheme.js +15 -15
- package/dist/esm/utils/registerTheme.js.map +1 -1
- package/package.json +3 -3
|
@@ -24,20 +24,20 @@ const useTooltip = ({
|
|
|
24
24
|
const value = params[0].seriesType === "pie" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
|
|
25
25
|
const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
|
|
26
26
|
return `
|
|
27
|
-
<div class="${hvClasses
|
|
28
|
-
<p class="${hvClasses
|
|
29
|
-
<p class="${hvClasses
|
|
27
|
+
<div class="${hvClasses?.singleTooltipRoot}">
|
|
28
|
+
<p class="${hvClasses?.singleTooltipTitle}">${formattedTitle}</p>
|
|
29
|
+
<p class="${hvClasses?.singleTooltipValue}">${formattedValue}</p>
|
|
30
30
|
</div>
|
|
31
31
|
`;
|
|
32
32
|
}
|
|
33
33
|
return `
|
|
34
|
-
<div class="${hvClasses
|
|
35
|
-
<div class="${hvClasses
|
|
34
|
+
<div class="${hvClasses?.multipleTooltipRoot}">
|
|
35
|
+
<div class="${hvClasses?.multipleTooltipTitleContainer}">
|
|
36
36
|
<div>
|
|
37
|
-
<p class="${hvClasses
|
|
37
|
+
<p class="${hvClasses?.multipleTooltipTitle}">${formattedTitle}</p>
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
|
-
<div class="${hvClasses
|
|
40
|
+
<div class="${hvClasses?.multipleTooltipValuesContainer}">
|
|
41
41
|
${params.map((s) => {
|
|
42
42
|
const measure = getMeasure(s.seriesType === "pie" ? s.name : horizontal ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]], measures);
|
|
43
43
|
const value = s.seriesType === "pie" ? s.value[s.encode.value[0]] : horizontal ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
|
|
@@ -45,12 +45,12 @@ const useTooltip = ({
|
|
|
45
45
|
const name = s.seriesType === "pie" ? s.name : s.seriesName;
|
|
46
46
|
const formattedName = nameFormatter ? nameFormatter(name) : name;
|
|
47
47
|
return `
|
|
48
|
-
<div key="${s.seriesName}" class="${hvClasses
|
|
49
|
-
<div class="${hvClasses
|
|
50
|
-
<p style="background-color: ${s.color};" class="${hvClasses
|
|
51
|
-
<p class="${hvClasses
|
|
48
|
+
<div key="${s.seriesName}" class="${hvClasses?.multipleTooltipSeriesContainer}">
|
|
49
|
+
<div class="${hvClasses?.multipleTooltipSeriesNameContainer}">
|
|
50
|
+
<p style="background-color: ${s.color};" class="${hvClasses?.multipleTooltipSeriesColor}" />
|
|
51
|
+
<p class="${hvClasses?.multipleTooltipSeriesName}">${formattedName}</p>
|
|
52
52
|
</div>
|
|
53
|
-
<p class="${hvClasses
|
|
53
|
+
<p class="${hvClasses?.multipleTooltipSeriesValue}">${formattedValue}</p>
|
|
54
54
|
</div>
|
|
55
55
|
`;
|
|
56
56
|
}).join(" ")}
|
|
@@ -1 +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 \"@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.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 \"@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":";;;AA4CO,MAAMA,aAAaA,CAAC;AAAA,EACzBC,WAAW,CAAE;AAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC,aAAa;AAAA,EACbC,UAAU;AAAA,EACVC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AACkB,MAAM;AAClB,QAAA;AAAA,IAAER,SAASS;AAAAA,EAAAA,IAAcC,WAAWV,OAAO;AAE3CW,QAAAA,gBAAgBC,YACpB,CAACC,WAAmC;AAClC,UAAMC,QACJD,OAAO,CAAC,EAAEE,eAAe,QACrBF,OAAO,CAAC,EAAEG,aACVb,aACAU,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOC,EAAE,CAAC,CAAC,IACrCN,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOE,EAAE,CAAC,CAAC;AAE3C,UAAMC,iBAAiBd,iBAAiBA,eAAeO,KAAK,IAAIA;AAEhE,QAAIT,SAAS,UAAU;AACrB,YAAMiB,UAAUC,WACdV,OAAO,CAAC,EAAEE,eAAe,QACrBF,OAAO,CAAC,EAAEW,OACVrB,aACAU,OAAO,CAAC,EAAEY,eAAeZ,OAAO,CAAC,EAAEK,OAAOE,EAAE,CAAC,CAAC,IAC9CP,OAAO,CAAC,EAAEY,eAAeZ,OAAO,CAAC,EAAEK,OAAOC,EAAE,CAAC,CAAC,GAClDpB,QACF;AAEA,YAAMkB,QACJJ,OAAO,CAAC,EAAEE,eAAe,QACrBF,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOD,MAAM,CAAC,CAAC,IACzCd,aACAU,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOE,EAAE,CAAC,CAAC,IACrCP,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOC,EAAE,CAAC,CAAC;AAE3C,YAAMO,iBACJ,OAAOJ,YAAY,YAAYA,QAAQhB,iBACnCgB,QAAQhB,eAAeW,KAAK,IAC5BX,iBACAA,eAAeW,KAAK,IACpBA;AAEE,aAAA;AAAA,0BACUR,WAAWkB,iBAAkB;AAAA,0BAC7BlB,WAAWmB,kBAAmB,KAAIP,cAAe;AAAA,0BACjDZ,WAAWoB,kBAAmB,KAAIH,cAAe;AAAA;AAAA;AAAA,IAGrE;AAEQ,WAAA;AAAA,sBACQjB,WAAWqB,mBAAoB;AAAA,wBAC7BrB,WAAWsB,6BAA8B;AAAA;AAAA,0BAGjDtB,WAAWuB,oBACZ,KAAIX,cAAe;AAAA;AAAA;AAAA,wBAGVZ,WAAWwB,8BAA+B;AAAA,cACpDpB,OACCqB,IAAKC,CAAM,MAAA;AACJb,YAAAA,UAAUC,WACdY,EAAEpB,eAAe,QACboB,EAAEX,OACFrB,aACAgC,EAAEV,eAAeU,EAAEjB,OAAOE,EAAE,CAAC,CAAC,IAC9Be,EAAEV,eAAeU,EAAEjB,OAAOC,EAAE,CAAC,CAAC,GAClCpB,QACF;AAEMkB,YAAAA,QACJkB,EAAEpB,eAAe,QACboB,EAAElB,MAAMkB,EAAEjB,OAAOD,MAAM,CAAC,CAAC,IACzBd,aACAgC,EAAElB,MAAMkB,EAAEjB,OAAOE,EAAE,CAAC,CAAC,IACrBe,EAAElB,MAAMkB,EAAEjB,OAAOC,EAAE,CAAC,CAAC;AAE3B,YAAMO,iBACJ,OAAOJ,YAAY,YAAYA,QAAQhB,iBACnCgB,QAAQhB,eAAeW,KAAK,IAC5BX,iBACAA,eAAeW,KAAK,IACpBA;AAEN,YAAMO,OAAOW,EAAEpB,eAAe,QAAQoB,EAAEX,OAAOW,EAAEnB;AAEjD,YAAMoB,gBAAgB5B,gBAClBA,cAAcgB,IAAI,IAClBA;AAEI,aAAA;AAAA,4BACIW,EAAEnB,UAAW,YAAWP,WAAW4B,8BAA+B;AAAA,gCAC9D5B,WAAW6B,kCAAmC;AAAA,kDAC5BH,EAAEI,KAAM,aAAY9B,WAAW+B,0BAA2B;AAAA,gCAC5E/B,WAAWgC,yBAA0B,KAAIL,aAAc;AAAA;AAAA,8BAEzD3B,WAAWiC,0BAA2B,KAAIhB,cAAe;AAAA;AAAA;AAAA,IAAA,CAGxE,EACAiB,KAAK,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA,EAAA,GAKrB,CACElC,WACAN,YACAE,MACAN,UACAS,eACAD,gBACAD,cAAc,CAElB;AAEMsC,QAAAA,sBAAsBhC,YAC1B,CAACC,WAAmC;AAC9B,QAAA,OAAOZ,cAAc,YAAY;AACnC,YAAM4C,SAA+B;AAAA,QACnC/B,OACED,OAAO,CAAC,EAAEE,eAAe,QACrBF,OAAO,CAAC,EAAEG,aACVb,aACAU,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOC,EAAE,CAAC,CAAC,IACrCN,OAAO,CAAC,EAAEI,MAAMJ,OAAO,CAAC,EAAEK,OAAOE,EAAE,CAAC,CAAC;AAAA,QAC3C0B,QAAQjC,OAAOqB,IAAKa,CAAM,MAAA;AACjB,iBAAA;AAAA,YACLR,OAAOQ,EAAER;AAAAA,YACTf,MACEuB,EAAEhC,eAAe,YACbiC,OAAOD,EAAE9B,MAAM8B,EAAE7B,OAAOC,EAAE,CAAC,CAAC,CAAC,IAC7B4B,EAAEhC,eAAe,QACjBgC,EAAEvB,OACFuB,EAAE/B;AAAAA,YACRC,OACE8B,EAAEhC,eAAe,SAASgC,EAAEhC,eAAe,YACvCgC,EAAE9B,MAAM8B,EAAE7B,OAAOD,MAAM,CAAC,CAAC,IACzBd,aACA4C,EAAE9B,MAAM8B,EAAE7B,OAAOE,EAAE,CAAC,CAAC,IACrB2B,EAAE9B,MAAM8B,EAAE7B,OAAOC,EAAE,CAAC,CAAC;AAAA,UAAA;AAAA,QAC7B,CACD;AAAA,MAAA;AAGH,aAAOlB,UAAU4C,MAAM;AAAA,IACzB;AAEO5C,WAAAA;AAAAA,EAAAA,GAET,CAACA,WAAWE,UAAU,CACxB;AAEM8C,QAAAA,SAASC,QAA0C,MAAM;AACtD,WAAA;AAAA,MACLC,SAAS;AAAA,QACPC,SAAS;AAAA,QACTlD;AAAAA,QACAE;AAAAA,QACAiD,UAAUA,CAACC,OAAOzC,QAAQ0C,KAAKC,MAAMC,SAAS;AACrC,iBAAA,CAACH,MAAM,CAAC,GAAGA,MAAM,CAAC,IAAIG,KAAKC,YAAY,CAAC,CAAC;AAAA,QAClD;AAAA,QACAC,WAAY9C,CAAW,WAAA;AACrB,gBAAM+C,gBAAgBC,MAAMC,QAAQjD,MAAM,IAAIA,SAAS,CAACA,MAAM;AAE9D,iBAAOZ,YACH2C,oBAAoBgB,aAAa,IACjCjD,cAAciD,aAAa;AAAA,QACjC;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACxD,SAASH,WAAWC,MAAMS,eAAeiC,mBAAmB,CAAC;AAE1DK,SAAAA;AACT;"}
|
|
@@ -10,9 +10,9 @@ const useLegend = ({
|
|
|
10
10
|
}) => {
|
|
11
11
|
const option = useMemo(() => {
|
|
12
12
|
const position = {
|
|
13
|
-
y:
|
|
13
|
+
y: positionProp?.y ?? "top"
|
|
14
14
|
};
|
|
15
|
-
if (
|
|
15
|
+
if (positionProp?.x != null && positionProp?.x !== "center") {
|
|
16
16
|
position[positionProp.x] = positionProp.x;
|
|
17
17
|
} else {
|
|
18
18
|
position.x = "center";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLegend.js","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":["useLegend","series","show","icon","formatter","position","positionProp","direction","option","useMemo","y","x","legend","Array","isArray","length","itemGap","orient","getLegendIcon","data","map","s","name","areaStyle","undefined"],"mappings":";;AAeO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AAAAA,EACVC,YAAY;AACK,MAAM;AACjBC,QAAAA,SAASC,QAAyC,MAAM;AAC5D,UAAMJ,WAAmC;AAAA,MAAEK,
|
|
1
|
+
{"version":3,"file":"useLegend.js","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":["useLegend","series","show","icon","formatter","position","positionProp","direction","option","useMemo","y","x","legend","Array","isArray","length","itemGap","orient","getLegendIcon","data","map","s","name","areaStyle","undefined"],"mappings":";;AAeO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AAAAA,EACVC,YAAY;AACK,MAAM;AACjBC,QAAAA,SAASC,QAAyC,MAAM;AAC5D,UAAMJ,WAAmC;AAAA,MAAEK,GAAGJ,cAAcI,KAAK;AAAA,IAAA;AACjE,QAAIJ,cAAcK,KAAK,QAAQL,cAAcK,MAAM,UAAU;AAClDL,eAAAA,aAAaK,CAAC,IAAIL,aAAaK;AAAAA,IAAAA,OACnC;AACLN,eAASM,IAAI;AAAA,IACf;AAEO,WAAA;AAAA,MACLC,QAAQ;AAAA,QACNV,MAAMA,SAASW,MAAMC,QAAQb,MAAM,KAAKA,OAAOc,SAAS;AAAA,QACxDC,SAAS;AAAA,QACTZ;AAAAA,QACAa,QAAQV;AAAAA,QACR,GAAGF;AAAAA,QACH,GAAIF,QAAQ;AAAA,UAAEA,MAAMe,cAAcf,IAAI;AAAA,QAAE;AAAA,QACxC,GAAI,CAACA,QAAQ;AAAA,UACXgB,MACEjB,SAAS,SAASW,MAAMC,QAAQb,MAAM,IAClCA,OAAOmB,IAAKC,CAAM,MAAA;AACT,mBAAA;AAAA,cACLC,MAAMD,EAAEC;AAAAA,cACRnB,MAAMe,cACHG,EAAUE,aAAa,OAAO,WAAW,MAC5C;AAAA,YAAA;AAAA,UAEH,CAAA,IACDC;AAAAA,QACR;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACvB,QAAQC,MAAMC,MAAMC,WAAWE,cAAcC,SAAS,CAAC;AAEpDC,SAAAA;AACT;"}
|
|
@@ -32,11 +32,11 @@ const useVisualMap = ({
|
|
|
32
32
|
}
|
|
33
33
|
},
|
|
34
34
|
orient: direction,
|
|
35
|
-
top:
|
|
36
|
-
left:
|
|
35
|
+
top: positionProp?.y || "top",
|
|
36
|
+
left: positionProp?.x || "center"
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
|
-
}, [colorScale, direction, max, min, pieces, positionProp
|
|
39
|
+
}, [colorScale, direction, max, min, pieces, positionProp?.x, positionProp?.y, show, type]);
|
|
40
40
|
return option;
|
|
41
41
|
};
|
|
42
42
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVisualMap.js","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":["useVisualMap","show","direction","type","pieces","max","min","colorScale","position","positionProp","option","useMemo","visualMap","itemSymbol","getLegendIcon","itemGap","itemHeight","itemWidth","inRange","color","orient","top","y","left","x"],"mappings":";;AAkBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC,OAAO;AAAA,EACPC,YAAY;AAAA,EACZC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AACU,MAAM;AACpBC,QAAAA,SAASC,QAA4C,MAAM;AACxD,WAAA;AAAA,MACLC,WAAW;AAAA,QACTT;AAAAA,QACAF;AAAAA,QACA,GAAIG,UAAU;AAAA,UACZA;AAAAA,QACF;AAAA,QACA,GAAID,SAAS,eAAe;AAAA,UAC1BU,YAAYC,cAAc,QAAQ;AAAA,UAClCC,SAAS;AAAA,UACTC,YAAY;AAAA,UACZC,WAAW;AAAA,QACb;AAAA,QACA,GAAIV,cAAc;AAAA,UAChBF;AAAAA,UACAC;AAAAA,UACAY,SAAS;AAAA,YACPC,OAAOZ;AAAAA,UACT;AAAA,QACF;AAAA,QACAa,QAAQlB;AAAAA,QACRmB,
|
|
1
|
+
{"version":3,"file":"useVisualMap.js","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":["useVisualMap","show","direction","type","pieces","max","min","colorScale","position","positionProp","option","useMemo","visualMap","itemSymbol","getLegendIcon","itemGap","itemHeight","itemWidth","inRange","color","orient","top","y","left","x"],"mappings":";;AAkBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC,OAAO;AAAA,EACPC,YAAY;AAAA,EACZC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AACU,MAAM;AACpBC,QAAAA,SAASC,QAA4C,MAAM;AACxD,WAAA;AAAA,MACLC,WAAW;AAAA,QACTT;AAAAA,QACAF;AAAAA,QACA,GAAIG,UAAU;AAAA,UACZA;AAAAA,QACF;AAAA,QACA,GAAID,SAAS,eAAe;AAAA,UAC1BU,YAAYC,cAAc,QAAQ;AAAA,UAClCC,SAAS;AAAA,UACTC,YAAY;AAAA,UACZC,WAAW;AAAA,QACb;AAAA,QACA,GAAIV,cAAc;AAAA,UAChBF;AAAAA,UACAC;AAAAA,UACAY,SAAS;AAAA,YACPC,OAAOZ;AAAAA,UACT;AAAA,QACF;AAAA,QACAa,QAAQlB;AAAAA,QACRmB,KAAKZ,cAAca,KAAK;AAAA,QACxBC,MAAMd,cAAce,KAAK;AAAA,MAC3B;AAAA,IAAA;AAAA,EAED,GAAA,CACDjB,YACAL,WACAG,KACAC,KACAF,QACAK,cAAce,GACdf,cAAca,GACdrB,MACAE,IAAI,CACL;AAEMO,SAAAA;AACT;"}
|
|
@@ -22,7 +22,7 @@ const useXAxis = ({
|
|
|
22
22
|
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
23
23
|
return {
|
|
24
24
|
...acc,
|
|
25
|
-
[curr]: curr === "color" ?
|
|
25
|
+
[curr]: curr === "color" ? colors?.[nameProps[curr]] || nameProps[curr] : nameProps[curr]
|
|
26
26
|
};
|
|
27
27
|
}, {}) : void 0;
|
|
28
28
|
return {
|
|
@@ -37,7 +37,7 @@ const useXAxis = ({
|
|
|
37
37
|
},
|
|
38
38
|
max: maxValue === "max" ? "dataMax" : maxValue,
|
|
39
39
|
min: minValue === "min" ? "dataMin" : minValue,
|
|
40
|
-
...
|
|
40
|
+
...nameProps?.location && {
|
|
41
41
|
nameLocation: nameProps.location
|
|
42
42
|
},
|
|
43
43
|
...nameStyle && {
|
|
@@ -1 +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 \"@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":["useXAxis","id","type","labelFormatter","labelRotation","name","maxValue","minValue","scale","data","position","nameProps","colors","useTheme","option","useMemo","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","xAxis","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle"],"mappings":";;;AAYO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,SAAS;AAEtBC,QAAAA,SAASC,QAAwC,MAAM;AACrDC,UAAAA,gBAAgBL,YAClBM,OAAOC,KAAKP,SAAS,EAAEQ,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJX,aAAaK,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,
|
|
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 \"@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":["useXAxis","id","type","labelFormatter","labelRotation","name","maxValue","minValue","scale","data","position","nameProps","colors","useTheme","option","useMemo","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","xAxis","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle"],"mappings":";;;AAYO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,SAAS;AAEtBC,QAAAA,SAASC,QAAwC,MAAM;AACrDC,UAAAA,gBAAgBL,YAClBM,OAAOC,KAAKP,SAAS,EAAEQ,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJX,aAAaK,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,UACLb,SAASD,UAAUc,IAAI,CAAY,KAAId,UAAUc,IAAI,IACrDd,UAAUc,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLK,OAAO;AAAA,QACLzB;AAAAA,QACAC,MAAMyB,YAAYzB,IAAI;AAAA,QACtBG;AAAAA,QACAG;AAAAA,QACAoB,WAAW;AAAA,UACTC,QAAQzB,iBAAiB;AAAA,UACzB0B,WAAW3B;AAAAA,QACb;AAAA,QACA4B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC0B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC,GAAII,WAAWsB,YAAY;AAAA,UACzBC,cAAcvB,UAAUsB;AAAAA,QAC1B;AAAA,QACA,GAAIX,aAAa;AAAA,UACfa,eAAeb;AAAAA,QACjB;AAAA,QACA,GAAIb,QAAQ;AAAA,UAAEA;AAAAA,QAAK;AAAA,QACnB,GAAIC,YAAY;AAAA,UAAEA;AAAAA,QAAS;AAAA,MAC7B;AAAA,IAAA;AAAA,EAED,GAAA,CACDC,WACAV,IACAC,MACAG,MACAG,OACAJ,eACAD,gBACAG,UACAC,UACAE,MACAC,UACAE,MAAM,CACP;AAEME,SAAAA;AACT;"}
|
|
@@ -24,7 +24,7 @@ const useYAxis = ({
|
|
|
24
24
|
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
25
25
|
return {
|
|
26
26
|
...acc,
|
|
27
|
-
[curr]: curr === "color" ?
|
|
27
|
+
[curr]: curr === "color" ? colors?.[nameProps[curr]] || nameProps[curr] : nameProps[curr]
|
|
28
28
|
};
|
|
29
29
|
}, {}) : void 0;
|
|
30
30
|
return {
|
|
@@ -37,8 +37,8 @@ const useYAxis = ({
|
|
|
37
37
|
},
|
|
38
38
|
max: maxValue === "max" ? "dataMax" : maxValue,
|
|
39
39
|
min: minValue === "min" ? "dataMin" : minValue,
|
|
40
|
-
...
|
|
41
|
-
nameLocation: nameProps
|
|
40
|
+
...nameProps?.location && {
|
|
41
|
+
nameLocation: nameProps?.location
|
|
42
42
|
},
|
|
43
43
|
...nameStyle && {
|
|
44
44
|
nameTextStyle: nameStyle
|
|
@@ -1 +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 \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis, HvEChartsOption } from \"@viz/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":["useYAxis","axes","defaultType","colors","useTheme","createAxis","useCallback","id","type","name","labelFormatter","labelRotation","maxValue","minValue","nameProps","data","position","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle","option","useMemo","yAxis","Array","isArray","map","axis"],"mappings":";;;AAiBO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AACE,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,SAAS;AAEtBC,QAAAA,aAAaC,YACjB,CAAC;AAAA,IACCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,MACW;AACLC,UAAAA,gBAAgBH,YAClBI,OAAOC,KAAKL,SAAS,EAAEM,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJT,aAAaG,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,
|
|
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 \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis, HvEChartsOption } from \"@viz/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":["useYAxis","axes","defaultType","colors","useTheme","createAxis","useCallback","id","type","name","labelFormatter","labelRotation","maxValue","minValue","nameProps","data","position","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle","option","useMemo","yAxis","Array","isArray","map","axis"],"mappings":";;;AAiBO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AACE,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,SAAS;AAEtBC,QAAAA,aAAaC,YACjB,CAAC;AAAA,IACCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,MACW;AACLC,UAAAA,gBAAgBH,YAClBI,OAAOC,KAAKL,SAAS,EAAEM,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJT,aAAaG,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,UACLvB,SAASW,UAAUY,IAAI,CAAY,KAAIZ,UAAUY,IAAI,IACrDZ,UAAUY,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLf;AAAAA,MACAC,MAAMmB,YAAYnB,IAAI,KAAKmB,YAAYzB,WAAW;AAAA,MAClDO;AAAAA,MACAmB,WAAW;AAAA,QACTC,QAAQlB,iBAAiB;AAAA,QACzBmB,WAAWpB;AAAAA,MACb;AAAA,MACAqB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtCoB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtC,GAAIC,WAAWmB,YAAY;AAAA,QACzBC,cAAcpB,WAAWmB;AAAAA,MAC3B;AAAA,MACA,GAAIV,aAAa;AAAA,QACfY,eAAeZ;AAAAA,MACjB;AAAA,MACA,GAAIR,QAAQ;AAAA,QAAEA;AAAAA,MAAK;AAAA,MACnB,GAAIC,YAAY;AAAA,QAAEA;AAAAA,MAAS;AAAA,IAAA;AAAA,EAC7B,GAEF,CAACb,QAAQD,WAAW,CACtB;AAEMkC,QAAAA,SAASC,QAAwC,MAAM;AACpD,WAAA;AAAA,MACLC,OAAOC,MAAMC,QAAQvC,IAAI,IACrBA,KAAKwC,IAAKC,CAAAA,SAASrC,WAAWqC,IAAI,CAAC,IACnC,CAACrC,WAAW,CAAE,CAAA,CAAC;AAAA,IAAA;AAAA,EACrB,GACC,CAACJ,MAAMI,UAAU,CAAC;AAEd+B,SAAAA;AACT;"}
|
|
@@ -1,43 +1,43 @@
|
|
|
1
1
|
import * as echarts from "echarts/core";
|
|
2
2
|
const registerTheme = (name, mode, themeStructure) => {
|
|
3
3
|
const baseText = {
|
|
4
|
-
color: themeStructure
|
|
5
|
-
fontWeight: themeStructure
|
|
6
|
-
fontSize: themeStructure
|
|
7
|
-
fontFamily: themeStructure
|
|
4
|
+
color: themeStructure?.colors.modes[mode].secondary,
|
|
5
|
+
fontWeight: themeStructure?.fontWeights.normal,
|
|
6
|
+
fontSize: themeStructure?.fontSizes.sm,
|
|
7
|
+
fontFamily: themeStructure?.fontFamily.body
|
|
8
8
|
};
|
|
9
9
|
const customAxis = {
|
|
10
10
|
nameTextStyle: {
|
|
11
11
|
...baseText,
|
|
12
|
-
color: themeStructure
|
|
12
|
+
color: themeStructure?.colors.modes[mode].secondary_80
|
|
13
13
|
},
|
|
14
14
|
axisLine: {
|
|
15
15
|
show: true,
|
|
16
16
|
lineStyle: {
|
|
17
|
-
color: themeStructure
|
|
17
|
+
color: themeStructure?.colors.modes[mode].atmo3
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
axisTick: {
|
|
21
21
|
show: true,
|
|
22
22
|
lineStyle: {
|
|
23
|
-
color: themeStructure
|
|
23
|
+
color: themeStructure?.colors.modes[mode].atmo3
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
axisLabel: {
|
|
27
|
-
color: themeStructure
|
|
28
|
-
fontWeight: themeStructure
|
|
29
|
-
fontSize: themeStructure
|
|
30
|
-
fontFamily: themeStructure
|
|
27
|
+
color: themeStructure?.colors.modes[mode].secondary_80,
|
|
28
|
+
fontWeight: themeStructure?.fontWeights.normal,
|
|
29
|
+
fontSize: themeStructure?.fontSizes.sm,
|
|
30
|
+
fontFamily: themeStructure?.fontFamily.body
|
|
31
31
|
},
|
|
32
32
|
splitLine: {
|
|
33
33
|
show: true,
|
|
34
34
|
lineStyle: {
|
|
35
|
-
color: themeStructure
|
|
35
|
+
color: themeStructure?.colors.modes[mode].atmo3
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
echarts.registerTheme(`${name}-${mode}`, {
|
|
40
|
-
color: [themeStructure
|
|
40
|
+
color: [themeStructure?.colors.modes[mode].cat1, themeStructure?.colors.modes[mode].cat2, themeStructure?.colors.modes[mode].cat3, themeStructure?.colors.modes[mode].cat4, themeStructure?.colors.modes[mode].cat5, themeStructure?.colors.modes[mode].cat6, themeStructure?.colors.modes[mode].cat7, themeStructure?.colors.modes[mode].cat8, themeStructure?.colors.modes[mode].cat9, themeStructure?.colors.modes[mode].cat10, themeStructure?.colors.modes[mode].cat11, themeStructure?.colors.modes[mode].cat12],
|
|
41
41
|
legend: {
|
|
42
42
|
textStyle: {
|
|
43
43
|
...baseText
|
|
@@ -51,7 +51,7 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
51
51
|
},
|
|
52
52
|
axisPointer: {
|
|
53
53
|
lineStyle: {
|
|
54
|
-
color: themeStructure
|
|
54
|
+
color: themeStructure?.colors.modes[mode].secondary,
|
|
55
55
|
width: 1
|
|
56
56
|
}
|
|
57
57
|
}
|
|
@@ -90,7 +90,7 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
90
90
|
fontFamily: baseText.fontFamily
|
|
91
91
|
},
|
|
92
92
|
itemStyle: {
|
|
93
|
-
borderColor: themeStructure
|
|
93
|
+
borderColor: themeStructure?.colors.modes[mode].atmo3,
|
|
94
94
|
borderWidth: 1
|
|
95
95
|
}
|
|
96
96
|
}
|
|
@@ -1 +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":["registerTheme","name","mode","themeStructure","baseText","color","colors","modes","secondary","fontWeight","fontWeights","normal","fontSize","fontSizes","sm","fontFamily","body","customAxis","nameTextStyle","secondary_80","axisLine","show","lineStyle","atmo3","axisTick","axisLabel","splitLine","echarts","cat1","cat2","cat3","cat4","cat5","cat6","cat7","cat8","cat9","cat10","cat11","cat12","legend","textStyle","tooltip","borderWidth","padding","axisPointer","width","dataZoom","categoryAxis","valueAxis","logAxis","timeAxis","line","visualMap","heatmap","label","itemStyle","borderColor"],"mappings":";AAGO,MAAMA,gBAAgBA,CAC3BC,MACAC,MACAC,mBACG;AACH,QAAMC,WAAW;AAAA,IACfC,OAAOF,
|
|
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":["registerTheme","name","mode","themeStructure","baseText","color","colors","modes","secondary","fontWeight","fontWeights","normal","fontSize","fontSizes","sm","fontFamily","body","customAxis","nameTextStyle","secondary_80","axisLine","show","lineStyle","atmo3","axisTick","axisLabel","splitLine","echarts","cat1","cat2","cat3","cat4","cat5","cat6","cat7","cat8","cat9","cat10","cat11","cat12","legend","textStyle","tooltip","borderWidth","padding","axisPointer","width","dataZoom","categoryAxis","valueAxis","logAxis","timeAxis","line","visualMap","heatmap","label","itemStyle","borderColor"],"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.2",
|
|
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.
|
|
36
|
+
"@hitachivantara/uikit-react-core": "^5.33.0"
|
|
37
37
|
},
|
|
38
38
|
"files": [
|
|
39
39
|
"dist"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"access": "public",
|
|
43
43
|
"directory": "package"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "d361bf3ce4206387697aaad36aac4e46c74928ae",
|
|
46
46
|
"main": "dist/cjs/index.cjs",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|