@neo4j-ndl/react-charts 1.1.6 → 1.1.8
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/lib/cjs/charts/ChartRender.js +2 -0
- package/lib/cjs/charts/ChartRender.js.map +1 -1
- package/lib/cjs/charts/hooks/use-chart-option.js +3 -1
- package/lib/cjs/charts/hooks/use-chart-option.js.map +1 -1
- package/lib/cjs/charts/utils/build-chart-option.js +10 -2
- package/lib/cjs/charts/utils/build-chart-option.js.map +1 -1
- package/lib/esm/charts/ChartRender.js +3 -1
- package/lib/esm/charts/ChartRender.js.map +1 -1
- package/lib/esm/charts/hooks/use-chart-option.js +3 -1
- package/lib/esm/charts/hooks/use-chart-option.js.map +1 -1
- package/lib/esm/charts/utils/build-chart-option.js +8 -2
- package/lib/esm/charts/utils/build-chart-option.js.map +1 -1
- package/lib/types/charts/ChartRender.d.ts.map +1 -1
- package/lib/types/charts/hooks/use-chart-option.d.ts +2 -1
- package/lib/types/charts/hooks/use-chart-option.d.ts.map +1 -1
- package/lib/types/charts/utils/build-chart-option.d.ts +6 -1
- package/lib/types/charts/utils/build-chart-option.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -55,6 +55,7 @@ const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, isLoadin
|
|
|
55
55
|
const xAxis = (0, react_2.useMemo)(() => (0, user_option_utils_1.mergeXAxis)(propXAxis, theme), [propXAxis, theme]);
|
|
56
56
|
const yAxis = (0, react_2.useMemo)(() => (0, user_option_utils_1.mergeYAxis)(propYAxis, theme), [propYAxis, theme]);
|
|
57
57
|
const hasCategoryXAxis = (0, build_chart_option_1.hasCategoryXAxis)(xAxis);
|
|
58
|
+
const hasMarkArea = (0, build_chart_option_1.hasMarkAreaInSeries)(series);
|
|
58
59
|
/**
|
|
59
60
|
* Hook responsibilities:
|
|
60
61
|
* - `useChartLifecycle` creates/disposes the ECharts instance and updates theme data.
|
|
@@ -69,6 +70,7 @@ const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, isLoadin
|
|
|
69
70
|
dataZoom,
|
|
70
71
|
dataset,
|
|
71
72
|
hasCategoryXAxis,
|
|
73
|
+
hasMarkArea,
|
|
72
74
|
hasSliderZoom,
|
|
73
75
|
propsSeries,
|
|
74
76
|
series,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartRender.js","sourceRoot":"","sources":["../../../src/charts/ChartRender.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAAkD;AAElD,iCAA2C;AAE3C,mEAIoC;AACpC,+DAA0D;AAC1D,2DAA6D;AAC7D,2DAAsD;AACtD,
|
|
1
|
+
{"version":3,"file":"ChartRender.js","sourceRoot":"","sources":["../../../src/charts/ChartRender.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { useNeedleTheme } from '@neo4j-ndl/react';\nimport type { EChartsOption } from 'echarts';\nimport { useEffect, useMemo } from 'react';\n\nimport {\n useChartLifecycle,\n useChartLoading,\n useChartResize,\n} from './hooks/use-chart-instance';\nimport { useChartOption } from './hooks/use-chart-option';\nimport { useChartRefsContext } from './hooks/use-chart-refs';\nimport { useChartZoom } from './hooks/use-chart-zoom';\nimport {\n hasCategoryXAxis as getHasCategoryXAxis,\n hasMarkAreaInSeries,\n hasSliderDataZoom,\n} from './utils/build-chart-option';\nimport type { ChartProps } from './utils/chart-types';\nimport { normalizeThresholdLines } from './utils/threshold';\nimport {\n mergeDataZoom,\n mergeSeries,\n mergeXAxis,\n mergeYAxis,\n} from './utils/user-option-utils';\n\nconst DEFAULT_CHART_SETTINGS: NonNullable<ChartProps['settings']> = {\n lazyUpdate: false,\n notMerge: true,\n silent: false,\n};\n\ntype ChartRenderProps = Omit<ChartProps, 'legend' | 'style'> & {\n onChartOptionChange: (chartOption: EChartsOption | undefined) => void;\n onFirstResizeChange: (isWaitingForFirstResize: boolean) => void;\n};\n\n/**\n * Owns the ECharts instance element and coordinates chart-specific hooks.\n *\n * The component normalizes user props into Needle-themed ECharts options,\n * initializes/resizes the chart instance, applies loading and zoom behavior, and\n * reports derived chart state back to `Chart` for legend rendering.\n */\nexport const ChartRender = ({\n callbacks,\n dataset,\n isChartZoomDisabled = false,\n isLoading,\n onChartOptionChange,\n onFirstResizeChange,\n option: userOption,\n palette,\n series: propsSeries,\n settings = DEFAULT_CHART_SETTINGS,\n xAxis: propXAxis,\n yAxis: propYAxis,\n}: ChartRenderProps) => {\n const { chartEchartRef } = useChartRefsContext();\n const dataZoomOptions = (userOption as EChartsOption)?.dataZoom;\n const toolboxOptions = (userOption as EChartsOption)?.toolbox;\n const { theme } = useNeedleTheme();\n\n const hasSliderZoom = hasSliderDataZoom(dataZoomOptions);\n const thresholdLines = useMemo(\n () => normalizeThresholdLines(propsSeries),\n [propsSeries],\n );\n const dataZoom = useMemo(\n () => mergeDataZoom(dataZoomOptions),\n [dataZoomOptions],\n );\n const series = useMemo(\n () => mergeSeries(propsSeries, theme, userOption, palette),\n [palette, propsSeries, theme, userOption],\n );\n const xAxis = useMemo(() => mergeXAxis(propXAxis, theme), [propXAxis, theme]);\n const yAxis = useMemo(() => mergeYAxis(propYAxis, theme), [propYAxis, theme]);\n const hasCategoryXAxis = getHasCategoryXAxis(xAxis);\n const hasMarkArea = hasMarkAreaInSeries(series);\n\n /**\n * Hook responsibilities:\n * - `useChartLifecycle` creates/disposes the ECharts instance and updates theme data.\n * - `useChartResize` keeps the canvas sized to its container before first render.\n * - `useChartOption` builds and applies the merged ECharts option.\n * - `useChartZoom` attaches consumer zoom callbacks.\n * - `useChartLoading` synchronizes the loading overlay with chart readiness.\n */\n useChartLifecycle({ palette, theme });\n const { isWaitingForFirstResize } = useChartResize();\n const chartOption = useChartOption({\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasMarkArea,\n hasSliderZoom,\n propsSeries,\n series,\n settings,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n });\n useChartZoom({ callbacks, isChartZoomDisabled });\n useChartLoading({\n isLoading,\n isWaitingForFirstResize,\n theme,\n });\n\n useEffect(() => {\n onFirstResizeChange(isWaitingForFirstResize);\n }, [isWaitingForFirstResize, onFirstResizeChange]);\n\n useEffect(() => {\n onChartOptionChange(chartOption);\n }, [chartOption, onChartOptionChange]);\n\n return <div ref={chartEchartRef} className=\"ndl-chart-echart\" />;\n};\n"]}
|
|
@@ -34,7 +34,7 @@ const use_chart_refs_1 = require("./use-chart-refs");
|
|
|
34
34
|
* downstream code, especially the custom legend, can read the final series and
|
|
35
35
|
* dataset shape ECharts is actually using.
|
|
36
36
|
*/
|
|
37
|
-
function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, propsSeries, series, settings, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, }) {
|
|
37
|
+
function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, propsSeries, series, settings, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, hasMarkArea, }) {
|
|
38
38
|
const { chartEchartRef, legendSelectedRef } = (0, use_chart_refs_1.useChartRefsContext)();
|
|
39
39
|
const [chartOption, setChartOption] = (0, react_1.useState)();
|
|
40
40
|
(0, react_1.useEffect)(() => {
|
|
@@ -46,6 +46,7 @@ function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, pr
|
|
|
46
46
|
dataZoom,
|
|
47
47
|
dataset,
|
|
48
48
|
hasCategoryXAxis,
|
|
49
|
+
hasMarkArea,
|
|
49
50
|
hasSliderZoom,
|
|
50
51
|
legendSelected: legendSelectedRef.current || {},
|
|
51
52
|
propsSeries,
|
|
@@ -63,6 +64,7 @@ function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, pr
|
|
|
63
64
|
dataZoom,
|
|
64
65
|
dataset,
|
|
65
66
|
hasCategoryXAxis,
|
|
67
|
+
hasMarkArea,
|
|
66
68
|
hasSliderZoom,
|
|
67
69
|
legendSelectedRef,
|
|
68
70
|
propsSeries,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-chart-option.js","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-option.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;
|
|
1
|
+
{"version":3,"file":"use-chart-option.js","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-option.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;AAoCH,wCA+DC;AAhGD,qCAA2C;AAC3C,iCAA4C;AAE5C,oEAA+D;AAG/D,qDAAuD;AAkBvD;;;;;;;;GAQG;AACH,SAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,MAAM,EACN,QAAQ,EACR,cAAc,EACd,cAAc,EACd,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,GACU;IACrB,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,IAAA,oCAAmB,GAAE,CAAC;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,GAAiB,CAAC;IAEhE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,IAAA,0BAAgB,EAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAEvD,MAAM,MAAM,GAAG,IAAA,qCAAgB,EAAC;YAC9B,QAAQ;YACR,OAAO;YACP,gBAAgB;YAChB,WAAW;YACX,aAAa;YACb,cAAc,EAAE,iBAAiB,CAAC,OAAO,IAAI,EAAE;YAC/C,WAAW;YACX,MAAM;YACN,cAAc;YACd,cAAc;YACd,UAAU;YACV,KAAK;YACL,KAAK;SACN,CAAC,CAAC;QAEH,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAEnC,cAAc,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,EAA+B,CAAC,CAAC;IAClE,CAAC,EAAE;QACD,cAAc;QACd,QAAQ;QACR,OAAO;QACP,gBAAgB;QAChB,WAAW;QACX,aAAa;QACb,iBAAiB;QACjB,WAAW;QACX,MAAM;QACN,QAAQ;QACR,cAAc;QACd,cAAc;QACd,UAAU;QACV,KAAK;QACL,KAAK;KACN,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC;AACrB,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport type { EChartsOption } from 'echarts';\nimport { getInstanceByDom } from 'echarts';\nimport { useEffect, useState } from 'react';\n\nimport { buildChartOption } from '../utils/build-chart-option';\nimport type { ChartProps, EchartsSeries } from '../utils/chart-types';\nimport type { NormalizedThresholdLine } from '../utils/threshold';\nimport { useChartRefsContext } from './use-chart-refs';\n\nexport type UseChartOptionParams = {\n dataZoom: EChartsOption['dataZoom'];\n dataset: ChartProps['dataset'];\n hasCategoryXAxis: boolean;\n hasSliderZoom: boolean;\n propsSeries: ChartProps['series'];\n series: EchartsSeries;\n settings: ChartProps['settings'];\n thresholdLines: NormalizedThresholdLine[];\n toolboxOptions: EChartsOption['toolbox'];\n userOption: ChartProps['option'];\n xAxis: EChartsOption['xAxis'];\n yAxis: EChartsOption['yAxis'];\n hasMarkArea: boolean;\n};\n\n/**\n * Builds, applies, and exposes the ECharts option for the current React props.\n *\n * `buildChartOption` merges Needle defaults, normalized axes/series, threshold\n * lines, zoom settings, toolbox options, user overrides, and the current legend\n * selection. After `setOption`, the hook returns ECharts' normalized option so\n * downstream code, especially the custom legend, can read the final series and\n * dataset shape ECharts is actually using.\n */\nexport function useChartOption({\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasSliderZoom,\n propsSeries,\n series,\n settings,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n hasMarkArea,\n}: UseChartOptionParams) {\n const { chartEchartRef, legendSelectedRef } = useChartRefsContext();\n const [chartOption, setChartOption] = useState<EChartsOption>();\n\n useEffect(() => {\n if (chartEchartRef.current === null) {\n return;\n }\n\n const chart = getInstanceByDom(chartEchartRef.current);\n\n const option = buildChartOption({\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasMarkArea,\n hasSliderZoom,\n legendSelected: legendSelectedRef.current || {},\n propsSeries,\n series,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n });\n\n chart?.setOption(option, settings);\n\n setChartOption(chart?.getOption() as EChartsOption | undefined);\n }, [\n chartEchartRef,\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasMarkArea,\n hasSliderZoom,\n legendSelectedRef,\n propsSeries,\n series,\n settings,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n ]);\n\n return chartOption;\n}\n"]}
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
|
+
exports.hasMarkAreaInSeries = void 0;
|
|
23
24
|
exports.hasSliderDataZoom = hasSliderDataZoom;
|
|
24
25
|
exports.hasCategoryXAxis = hasCategoryXAxis;
|
|
25
26
|
exports.buildChartOption = buildChartOption;
|
|
@@ -36,6 +37,13 @@ function hasSliderDataZoom(dataZoom) {
|
|
|
36
37
|
})
|
|
37
38
|
: (dataZoom === null || dataZoom === void 0 ? void 0 : dataZoom.type) === 'slider';
|
|
38
39
|
}
|
|
40
|
+
/**
|
|
41
|
+
* Mark area needs extra top grid space to fit inside the chart.
|
|
42
|
+
*/
|
|
43
|
+
const hasMarkAreaInSeries = (series) => Array.isArray(series)
|
|
44
|
+
? series.some((option) => !!option.markArea)
|
|
45
|
+
: !!series.markArea;
|
|
46
|
+
exports.hasMarkAreaInSeries = hasMarkAreaInSeries;
|
|
39
47
|
/**
|
|
40
48
|
* Category x-axes use slightly wider grid padding to avoid clipped labels.
|
|
41
49
|
*/
|
|
@@ -48,14 +56,14 @@ function hasCategoryXAxis(xAxis) {
|
|
|
48
56
|
* Builds the ECharts option object from Needle chart props and derived values.
|
|
49
57
|
* Applying the option to an ECharts instance happens in `useChartOption`.
|
|
50
58
|
*/
|
|
51
|
-
function buildChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, legendSelected, propsSeries, series, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, }) {
|
|
59
|
+
function buildChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, legendSelected, propsSeries, series, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, hasMarkArea, }) {
|
|
52
60
|
const customAriaDescription = (0, aria_description_1.generateThresholdAriaDescription)(propsSeries, dataset);
|
|
53
61
|
return Object.assign(Object.assign({}, userOption), { aria: Object.assign(Object.assign({ decal: {
|
|
54
62
|
show: false,
|
|
55
63
|
}, enabled: true }, (customAriaDescription !== undefined && {
|
|
56
64
|
label: { description: customAriaDescription },
|
|
57
65
|
})), userOption === null || userOption === void 0 ? void 0 : userOption.aria), dataZoom,
|
|
58
|
-
dataset, grid: Object.assign({ bottom: hasSliderZoom ? '60px' : '10px', containLabel: true, left: hasCategoryXAxis ? '15px' : '10px', right: hasCategoryXAxis ? '15px' : '10px', top: '10px', type: 'solid' }, userOption === null || userOption === void 0 ? void 0 : userOption.grid), legend: {
|
|
66
|
+
dataset, grid: Object.assign({ bottom: hasSliderZoom ? '60px' : '10px', containLabel: true, left: hasCategoryXAxis ? '15px' : '10px', right: hasCategoryXAxis ? '15px' : '10px', top: hasMarkArea ? '20px' : '10px', type: 'solid' }, userOption === null || userOption === void 0 ? void 0 : userOption.grid), legend: {
|
|
59
67
|
// ECharts mutates option.legend.selected internally; callers pass a
|
|
60
68
|
// copied object so the React ref remains the source of truth.
|
|
61
69
|
selected: Object.assign({}, legendSelected),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build-chart-option.js","sourceRoot":"","sources":["../../../../src/charts/utils/build-chart-option.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG
|
|
1
|
+
{"version":3,"file":"build-chart-option.js","sourceRoot":"","sources":["../../../../src/charts/utils/build-chart-option.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport type { DataZoomComponentOption, EChartsOption } from 'echarts';\n\nimport { generateThresholdAriaDescription } from './aria-description';\nimport { createAxisTooltipFormatter } from './chart-tooltip-formatter';\nimport type { ChartProps, EchartsSeries } from './chart-types';\nimport type { NormalizedThresholdLine } from './threshold';\nimport { mergeToolbox } from './user-option-utils';\n\ntype BuildChartOptionParams = {\n dataZoom: EChartsOption['dataZoom'];\n dataset: ChartProps['dataset'];\n hasCategoryXAxis: boolean;\n hasSliderZoom: boolean;\n legendSelected: Record<string, boolean>;\n propsSeries: ChartProps['series'];\n series: EchartsSeries;\n thresholdLines: NormalizedThresholdLine[];\n toolboxOptions: EChartsOption['toolbox'];\n userOption: ChartProps['option'];\n xAxis: EChartsOption['xAxis'];\n yAxis: EChartsOption['yAxis'];\n hasMarkArea: boolean;\n};\n\n/**\n * Slider zoom needs extra bottom grid space for ECharts' slider control.\n */\nexport function hasSliderDataZoom(\n dataZoom: EChartsOption['dataZoom'],\n): boolean {\n return Array.isArray(dataZoom)\n ? dataZoom.some((dataZoomOption: DataZoomComponentOption) => {\n return dataZoomOption?.type === 'slider';\n })\n : dataZoom?.type === 'slider';\n}\n\n/**\n * Mark area needs extra top grid space to fit inside the chart.\n */\nexport const hasMarkAreaInSeries = (series: EchartsSeries) =>\n Array.isArray(series)\n ? series.some((option) => !!option.markArea)\n : !!series.markArea;\n\n/**\n * Category x-axes use slightly wider grid padding to avoid clipped labels.\n */\nexport function hasCategoryXAxis(xAxis: EChartsOption['xAxis']): boolean {\n return Array.isArray(xAxis)\n ? xAxis.some((x) => x.type === 'category')\n : xAxis?.type === 'category';\n}\n\n/**\n * Builds the ECharts option object from Needle chart props and derived values.\n * Applying the option to an ECharts instance happens in `useChartOption`.\n */\nexport function buildChartOption({\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasSliderZoom,\n legendSelected,\n propsSeries,\n series,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n hasMarkArea,\n}: BuildChartOptionParams): EChartsOption {\n const customAriaDescription = generateThresholdAriaDescription(\n propsSeries,\n dataset,\n );\n\n return {\n ...userOption,\n aria: {\n decal: {\n show: false,\n },\n enabled: true,\n ...(customAriaDescription !== undefined && {\n label: { description: customAriaDescription },\n }),\n ...(userOption?.aria as EChartsOption['aria']),\n },\n dataZoom,\n dataset,\n grid: {\n bottom: hasSliderZoom ? '60px' : '10px',\n containLabel: true,\n left: hasCategoryXAxis ? '15px' : '10px',\n right: hasCategoryXAxis ? '15px' : '10px',\n top: hasMarkArea ? '20px' : '10px',\n type: 'solid',\n ...(userOption?.grid as EChartsOption['grid']),\n },\n legend: {\n // ECharts mutates option.legend.selected internally; callers pass a\n // copied object so the React ref remains the source of truth.\n selected: { ...legendSelected },\n show: false,\n },\n series,\n toolbox: mergeToolbox(toolboxOptions),\n tooltip: {\n borderRadius: 0,\n borderWidth: 0,\n confine: true,\n extraCssText: 'box-shadow: none; background-color: transparent;',\n formatter: createAxisTooltipFormatter({ thresholdLines, userOption }),\n padding: 0,\n trigger: 'axis',\n },\n xAxis,\n yAxis,\n };\n}\n"]}
|
|
@@ -25,7 +25,7 @@ import { useChartLifecycle, useChartLoading, useChartResize, } from './hooks/use
|
|
|
25
25
|
import { useChartOption } from './hooks/use-chart-option';
|
|
26
26
|
import { useChartRefsContext } from './hooks/use-chart-refs';
|
|
27
27
|
import { useChartZoom } from './hooks/use-chart-zoom';
|
|
28
|
-
import { hasCategoryXAxis as getHasCategoryXAxis, hasSliderDataZoom, } from './utils/build-chart-option';
|
|
28
|
+
import { hasCategoryXAxis as getHasCategoryXAxis, hasMarkAreaInSeries, hasSliderDataZoom, } from './utils/build-chart-option';
|
|
29
29
|
import { normalizeThresholdLines } from './utils/threshold';
|
|
30
30
|
import { mergeDataZoom, mergeSeries, mergeXAxis, mergeYAxis, } from './utils/user-option-utils';
|
|
31
31
|
const DEFAULT_CHART_SETTINGS = {
|
|
@@ -52,6 +52,7 @@ export const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, i
|
|
|
52
52
|
const xAxis = useMemo(() => mergeXAxis(propXAxis, theme), [propXAxis, theme]);
|
|
53
53
|
const yAxis = useMemo(() => mergeYAxis(propYAxis, theme), [propYAxis, theme]);
|
|
54
54
|
const hasCategoryXAxis = getHasCategoryXAxis(xAxis);
|
|
55
|
+
const hasMarkArea = hasMarkAreaInSeries(series);
|
|
55
56
|
/**
|
|
56
57
|
* Hook responsibilities:
|
|
57
58
|
* - `useChartLifecycle` creates/disposes the ECharts instance and updates theme data.
|
|
@@ -66,6 +67,7 @@ export const ChartRender = ({ callbacks, dataset, isChartZoomDisabled = false, i
|
|
|
66
67
|
dataZoom,
|
|
67
68
|
dataset,
|
|
68
69
|
hasCategoryXAxis,
|
|
70
|
+
hasMarkArea,
|
|
69
71
|
hasSliderZoom,
|
|
70
72
|
propsSeries,
|
|
71
73
|
series,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartRender.js","sourceRoot":"","sources":["../../../src/charts/ChartRender.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EACL,gBAAgB,IAAI,mBAAmB,EACvC,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,UAAU,GACX,MAAM,2BAA2B,CAAC;AAEnC,MAAM,sBAAsB,GAAwC;IAClE,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,KAAK;CACd,CAAC;AAOF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,OAAO,EACP,mBAAmB,GAAG,KAAK,EAC3B,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACnB,MAAM,EAAE,UAAU,EAClB,OAAO,EACP,MAAM,EAAE,WAAW,EACnB,QAAQ,GAAG,sBAAsB,EACjC,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,GACC,EAAE,EAAE;IACrB,MAAM,EAAE,cAAc,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACjD,MAAM,eAAe,GAAI,UAA4B,aAA5B,UAAU,uBAAV,UAAU,CAAoB,QAAQ,CAAC;IAChE,MAAM,cAAc,GAAI,UAA4B,aAA5B,UAAU,uBAAV,UAAU,CAAoB,OAAO,CAAC;IAC9D,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,EAAE,CAAC;IAEnC,MAAM,aAAa,GAAG,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACzD,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,uBAAuB,CAAC,WAAW,CAAC,EAC1C,CAAC,WAAW,CAAC,CACd,CAAC;IACF,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,EACpC,CAAC,eAAe,CAAC,CAClB,CAAC;IACF,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAC1D,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,CAC1C,CAAC;IACF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAC9E,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAC9E,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartRender.js","sourceRoot":"","sources":["../../../src/charts/ChartRender.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { useNeedleTheme } from '@neo4j-ndl/react';\nimport type { EChartsOption } from 'echarts';\nimport { useEffect, useMemo } from 'react';\n\nimport {\n useChartLifecycle,\n useChartLoading,\n useChartResize,\n} from './hooks/use-chart-instance';\nimport { useChartOption } from './hooks/use-chart-option';\nimport { useChartRefsContext } from './hooks/use-chart-refs';\nimport { useChartZoom } from './hooks/use-chart-zoom';\nimport {\n hasCategoryXAxis as getHasCategoryXAxis,\n hasMarkAreaInSeries,\n hasSliderDataZoom,\n} from './utils/build-chart-option';\nimport type { ChartProps } from './utils/chart-types';\nimport { normalizeThresholdLines } from './utils/threshold';\nimport {\n mergeDataZoom,\n mergeSeries,\n mergeXAxis,\n mergeYAxis,\n} from './utils/user-option-utils';\n\nconst DEFAULT_CHART_SETTINGS: NonNullable<ChartProps['settings']> = {\n lazyUpdate: false,\n notMerge: true,\n silent: false,\n};\n\ntype ChartRenderProps = Omit<ChartProps, 'legend' | 'style'> & {\n onChartOptionChange: (chartOption: EChartsOption | undefined) => void;\n onFirstResizeChange: (isWaitingForFirstResize: boolean) => void;\n};\n\n/**\n * Owns the ECharts instance element and coordinates chart-specific hooks.\n *\n * The component normalizes user props into Needle-themed ECharts options,\n * initializes/resizes the chart instance, applies loading and zoom behavior, and\n * reports derived chart state back to `Chart` for legend rendering.\n */\nexport const ChartRender = ({\n callbacks,\n dataset,\n isChartZoomDisabled = false,\n isLoading,\n onChartOptionChange,\n onFirstResizeChange,\n option: userOption,\n palette,\n series: propsSeries,\n settings = DEFAULT_CHART_SETTINGS,\n xAxis: propXAxis,\n yAxis: propYAxis,\n}: ChartRenderProps) => {\n const { chartEchartRef } = useChartRefsContext();\n const dataZoomOptions = (userOption as EChartsOption)?.dataZoom;\n const toolboxOptions = (userOption as EChartsOption)?.toolbox;\n const { theme } = useNeedleTheme();\n\n const hasSliderZoom = hasSliderDataZoom(dataZoomOptions);\n const thresholdLines = useMemo(\n () => normalizeThresholdLines(propsSeries),\n [propsSeries],\n );\n const dataZoom = useMemo(\n () => mergeDataZoom(dataZoomOptions),\n [dataZoomOptions],\n );\n const series = useMemo(\n () => mergeSeries(propsSeries, theme, userOption, palette),\n [palette, propsSeries, theme, userOption],\n );\n const xAxis = useMemo(() => mergeXAxis(propXAxis, theme), [propXAxis, theme]);\n const yAxis = useMemo(() => mergeYAxis(propYAxis, theme), [propYAxis, theme]);\n const hasCategoryXAxis = getHasCategoryXAxis(xAxis);\n const hasMarkArea = hasMarkAreaInSeries(series);\n\n /**\n * Hook responsibilities:\n * - `useChartLifecycle` creates/disposes the ECharts instance and updates theme data.\n * - `useChartResize` keeps the canvas sized to its container before first render.\n * - `useChartOption` builds and applies the merged ECharts option.\n * - `useChartZoom` attaches consumer zoom callbacks.\n * - `useChartLoading` synchronizes the loading overlay with chart readiness.\n */\n useChartLifecycle({ palette, theme });\n const { isWaitingForFirstResize } = useChartResize();\n const chartOption = useChartOption({\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasMarkArea,\n hasSliderZoom,\n propsSeries,\n series,\n settings,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n });\n useChartZoom({ callbacks, isChartZoomDisabled });\n useChartLoading({\n isLoading,\n isWaitingForFirstResize,\n theme,\n });\n\n useEffect(() => {\n onFirstResizeChange(isWaitingForFirstResize);\n }, [isWaitingForFirstResize, onFirstResizeChange]);\n\n useEffect(() => {\n onChartOptionChange(chartOption);\n }, [chartOption, onChartOptionChange]);\n\n return <div ref={chartEchartRef} className=\"ndl-chart-echart\" />;\n};\n"]}
|
|
@@ -31,7 +31,7 @@ import { useChartRefsContext } from './use-chart-refs';
|
|
|
31
31
|
* downstream code, especially the custom legend, can read the final series and
|
|
32
32
|
* dataset shape ECharts is actually using.
|
|
33
33
|
*/
|
|
34
|
-
export function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, propsSeries, series, settings, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, }) {
|
|
34
|
+
export function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, propsSeries, series, settings, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, hasMarkArea, }) {
|
|
35
35
|
const { chartEchartRef, legendSelectedRef } = useChartRefsContext();
|
|
36
36
|
const [chartOption, setChartOption] = useState();
|
|
37
37
|
useEffect(() => {
|
|
@@ -43,6 +43,7 @@ export function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZ
|
|
|
43
43
|
dataZoom,
|
|
44
44
|
dataset,
|
|
45
45
|
hasCategoryXAxis,
|
|
46
|
+
hasMarkArea,
|
|
46
47
|
hasSliderZoom,
|
|
47
48
|
legendSelected: legendSelectedRef.current || {},
|
|
48
49
|
propsSeries,
|
|
@@ -60,6 +61,7 @@ export function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZ
|
|
|
60
61
|
dataZoom,
|
|
61
62
|
dataset,
|
|
62
63
|
hasCategoryXAxis,
|
|
64
|
+
hasMarkArea,
|
|
63
65
|
hasSliderZoom,
|
|
64
66
|
legendSelectedRef,
|
|
65
67
|
propsSeries,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-chart-option.js","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-option.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAG/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"use-chart-option.js","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-option.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAG/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAkBvD;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,MAAM,EACN,QAAQ,EACR,cAAc,EACd,cAAc,EACd,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,GACU;IACrB,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAiB,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,gBAAgB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAEvD,MAAM,MAAM,GAAG,gBAAgB,CAAC;YAC9B,QAAQ;YACR,OAAO;YACP,gBAAgB;YAChB,WAAW;YACX,aAAa;YACb,cAAc,EAAE,iBAAiB,CAAC,OAAO,IAAI,EAAE;YAC/C,WAAW;YACX,MAAM;YACN,cAAc;YACd,cAAc;YACd,UAAU;YACV,KAAK;YACL,KAAK;SACN,CAAC,CAAC;QAEH,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAEnC,cAAc,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,EAA+B,CAAC,CAAC;IAClE,CAAC,EAAE;QACD,cAAc;QACd,QAAQ;QACR,OAAO;QACP,gBAAgB;QAChB,WAAW;QACX,aAAa;QACb,iBAAiB;QACjB,WAAW;QACX,MAAM;QACN,QAAQ;QACR,cAAc;QACd,cAAc;QACd,UAAU;QACV,KAAK;QACL,KAAK;KACN,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC;AACrB,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport type { EChartsOption } from 'echarts';\nimport { getInstanceByDom } from 'echarts';\nimport { useEffect, useState } from 'react';\n\nimport { buildChartOption } from '../utils/build-chart-option';\nimport type { ChartProps, EchartsSeries } from '../utils/chart-types';\nimport type { NormalizedThresholdLine } from '../utils/threshold';\nimport { useChartRefsContext } from './use-chart-refs';\n\nexport type UseChartOptionParams = {\n dataZoom: EChartsOption['dataZoom'];\n dataset: ChartProps['dataset'];\n hasCategoryXAxis: boolean;\n hasSliderZoom: boolean;\n propsSeries: ChartProps['series'];\n series: EchartsSeries;\n settings: ChartProps['settings'];\n thresholdLines: NormalizedThresholdLine[];\n toolboxOptions: EChartsOption['toolbox'];\n userOption: ChartProps['option'];\n xAxis: EChartsOption['xAxis'];\n yAxis: EChartsOption['yAxis'];\n hasMarkArea: boolean;\n};\n\n/**\n * Builds, applies, and exposes the ECharts option for the current React props.\n *\n * `buildChartOption` merges Needle defaults, normalized axes/series, threshold\n * lines, zoom settings, toolbox options, user overrides, and the current legend\n * selection. After `setOption`, the hook returns ECharts' normalized option so\n * downstream code, especially the custom legend, can read the final series and\n * dataset shape ECharts is actually using.\n */\nexport function useChartOption({\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasSliderZoom,\n propsSeries,\n series,\n settings,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n hasMarkArea,\n}: UseChartOptionParams) {\n const { chartEchartRef, legendSelectedRef } = useChartRefsContext();\n const [chartOption, setChartOption] = useState<EChartsOption>();\n\n useEffect(() => {\n if (chartEchartRef.current === null) {\n return;\n }\n\n const chart = getInstanceByDom(chartEchartRef.current);\n\n const option = buildChartOption({\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasMarkArea,\n hasSliderZoom,\n legendSelected: legendSelectedRef.current || {},\n propsSeries,\n series,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n });\n\n chart?.setOption(option, settings);\n\n setChartOption(chart?.getOption() as EChartsOption | undefined);\n }, [\n chartEchartRef,\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasMarkArea,\n hasSliderZoom,\n legendSelectedRef,\n propsSeries,\n series,\n settings,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n ]);\n\n return chartOption;\n}\n"]}
|
|
@@ -31,6 +31,12 @@ export function hasSliderDataZoom(dataZoom) {
|
|
|
31
31
|
})
|
|
32
32
|
: (dataZoom === null || dataZoom === void 0 ? void 0 : dataZoom.type) === 'slider';
|
|
33
33
|
}
|
|
34
|
+
/**
|
|
35
|
+
* Mark area needs extra top grid space to fit inside the chart.
|
|
36
|
+
*/
|
|
37
|
+
export const hasMarkAreaInSeries = (series) => Array.isArray(series)
|
|
38
|
+
? series.some((option) => !!option.markArea)
|
|
39
|
+
: !!series.markArea;
|
|
34
40
|
/**
|
|
35
41
|
* Category x-axes use slightly wider grid padding to avoid clipped labels.
|
|
36
42
|
*/
|
|
@@ -43,14 +49,14 @@ export function hasCategoryXAxis(xAxis) {
|
|
|
43
49
|
* Builds the ECharts option object from Needle chart props and derived values.
|
|
44
50
|
* Applying the option to an ECharts instance happens in `useChartOption`.
|
|
45
51
|
*/
|
|
46
|
-
export function buildChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, legendSelected, propsSeries, series, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, }) {
|
|
52
|
+
export function buildChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, legendSelected, propsSeries, series, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, hasMarkArea, }) {
|
|
47
53
|
const customAriaDescription = generateThresholdAriaDescription(propsSeries, dataset);
|
|
48
54
|
return Object.assign(Object.assign({}, userOption), { aria: Object.assign(Object.assign({ decal: {
|
|
49
55
|
show: false,
|
|
50
56
|
}, enabled: true }, (customAriaDescription !== undefined && {
|
|
51
57
|
label: { description: customAriaDescription },
|
|
52
58
|
})), userOption === null || userOption === void 0 ? void 0 : userOption.aria), dataZoom,
|
|
53
|
-
dataset, grid: Object.assign({ bottom: hasSliderZoom ? '60px' : '10px', containLabel: true, left: hasCategoryXAxis ? '15px' : '10px', right: hasCategoryXAxis ? '15px' : '10px', top: '10px', type: 'solid' }, userOption === null || userOption === void 0 ? void 0 : userOption.grid), legend: {
|
|
59
|
+
dataset, grid: Object.assign({ bottom: hasSliderZoom ? '60px' : '10px', containLabel: true, left: hasCategoryXAxis ? '15px' : '10px', right: hasCategoryXAxis ? '15px' : '10px', top: hasMarkArea ? '20px' : '10px', type: 'solid' }, userOption === null || userOption === void 0 ? void 0 : userOption.grid), legend: {
|
|
54
60
|
// ECharts mutates option.legend.selected internally; callers pass a
|
|
55
61
|
// copied object so the React ref remains the source of truth.
|
|
56
62
|
selected: Object.assign({}, legendSelected),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build-chart-option.js","sourceRoot":"","sources":["../../../../src/charts/utils/build-chart-option.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,OAAO,EAAE,gCAAgC,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAGvE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"build-chart-option.js","sourceRoot":"","sources":["../../../../src/charts/utils/build-chart-option.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport type { DataZoomComponentOption, EChartsOption } from 'echarts';\n\nimport { generateThresholdAriaDescription } from './aria-description';\nimport { createAxisTooltipFormatter } from './chart-tooltip-formatter';\nimport type { ChartProps, EchartsSeries } from './chart-types';\nimport type { NormalizedThresholdLine } from './threshold';\nimport { mergeToolbox } from './user-option-utils';\n\ntype BuildChartOptionParams = {\n dataZoom: EChartsOption['dataZoom'];\n dataset: ChartProps['dataset'];\n hasCategoryXAxis: boolean;\n hasSliderZoom: boolean;\n legendSelected: Record<string, boolean>;\n propsSeries: ChartProps['series'];\n series: EchartsSeries;\n thresholdLines: NormalizedThresholdLine[];\n toolboxOptions: EChartsOption['toolbox'];\n userOption: ChartProps['option'];\n xAxis: EChartsOption['xAxis'];\n yAxis: EChartsOption['yAxis'];\n hasMarkArea: boolean;\n};\n\n/**\n * Slider zoom needs extra bottom grid space for ECharts' slider control.\n */\nexport function hasSliderDataZoom(\n dataZoom: EChartsOption['dataZoom'],\n): boolean {\n return Array.isArray(dataZoom)\n ? dataZoom.some((dataZoomOption: DataZoomComponentOption) => {\n return dataZoomOption?.type === 'slider';\n })\n : dataZoom?.type === 'slider';\n}\n\n/**\n * Mark area needs extra top grid space to fit inside the chart.\n */\nexport const hasMarkAreaInSeries = (series: EchartsSeries) =>\n Array.isArray(series)\n ? series.some((option) => !!option.markArea)\n : !!series.markArea;\n\n/**\n * Category x-axes use slightly wider grid padding to avoid clipped labels.\n */\nexport function hasCategoryXAxis(xAxis: EChartsOption['xAxis']): boolean {\n return Array.isArray(xAxis)\n ? xAxis.some((x) => x.type === 'category')\n : xAxis?.type === 'category';\n}\n\n/**\n * Builds the ECharts option object from Needle chart props and derived values.\n * Applying the option to an ECharts instance happens in `useChartOption`.\n */\nexport function buildChartOption({\n dataZoom,\n dataset,\n hasCategoryXAxis,\n hasSliderZoom,\n legendSelected,\n propsSeries,\n series,\n thresholdLines,\n toolboxOptions,\n userOption,\n xAxis,\n yAxis,\n hasMarkArea,\n}: BuildChartOptionParams): EChartsOption {\n const customAriaDescription = generateThresholdAriaDescription(\n propsSeries,\n dataset,\n );\n\n return {\n ...userOption,\n aria: {\n decal: {\n show: false,\n },\n enabled: true,\n ...(customAriaDescription !== undefined && {\n label: { description: customAriaDescription },\n }),\n ...(userOption?.aria as EChartsOption['aria']),\n },\n dataZoom,\n dataset,\n grid: {\n bottom: hasSliderZoom ? '60px' : '10px',\n containLabel: true,\n left: hasCategoryXAxis ? '15px' : '10px',\n right: hasCategoryXAxis ? '15px' : '10px',\n top: hasMarkArea ? '20px' : '10px',\n type: 'solid',\n ...(userOption?.grid as EChartsOption['grid']),\n },\n legend: {\n // ECharts mutates option.legend.selected internally; callers pass a\n // copied object so the React ref remains the source of truth.\n selected: { ...legendSelected },\n show: false,\n },\n series,\n toolbox: mergeToolbox(toolboxOptions),\n tooltip: {\n borderRadius: 0,\n borderWidth: 0,\n confine: true,\n extraCssText: 'box-shadow: none; background-color: transparent;',\n formatter: createAxisTooltipFormatter({ thresholdLines, userOption }),\n padding: 0,\n trigger: 'axis',\n },\n xAxis,\n yAxis,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartRender.d.ts","sourceRoot":"","sources":["../../../src/charts/ChartRender.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartRender.d.ts","sourceRoot":"","sources":["../../../src/charts/ChartRender.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAgB7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAetD,KAAK,gBAAgB,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC7D,mBAAmB,EAAE,CAAC,WAAW,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtE,mBAAmB,EAAE,CAAC,uBAAuB,EAAE,OAAO,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,mMAazB,gBAAgB,4CAiElB,CAAC"}
|
|
@@ -34,6 +34,7 @@ export type UseChartOptionParams = {
|
|
|
34
34
|
userOption: ChartProps['option'];
|
|
35
35
|
xAxis: EChartsOption['xAxis'];
|
|
36
36
|
yAxis: EChartsOption['yAxis'];
|
|
37
|
+
hasMarkArea: boolean;
|
|
37
38
|
};
|
|
38
39
|
/**
|
|
39
40
|
* Builds, applies, and exposes the ECharts option for the current React props.
|
|
@@ -44,5 +45,5 @@ export type UseChartOptionParams = {
|
|
|
44
45
|
* downstream code, especially the custom legend, can read the final series and
|
|
45
46
|
* dataset shape ECharts is actually using.
|
|
46
47
|
*/
|
|
47
|
-
export declare function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, propsSeries, series, settings, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, }: UseChartOptionParams): EChartsOption | undefined;
|
|
48
|
+
export declare function useChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, propsSeries, series, settings, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, hasMarkArea, }: UseChartOptionParams): EChartsOption | undefined;
|
|
48
49
|
//# sourceMappingURL=use-chart-option.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-chart-option.d.ts","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-option.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAGlE,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,cAAc,EAAE,uBAAuB,EAAE,CAAC;IAC1C,cAAc,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IACjC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-chart-option.d.ts","sourceRoot":"","sources":["../../../../src/charts/hooks/use-chart-option.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAGlE,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,cAAc,EAAE,uBAAuB,EAAE,CAAC;IAC1C,cAAc,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IACjC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,MAAM,EACN,QAAQ,EACR,cAAc,EACd,cAAc,EACd,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,GACZ,EAAE,oBAAoB,6BAiDtB"}
|
|
@@ -34,11 +34,16 @@ type BuildChartOptionParams = {
|
|
|
34
34
|
userOption: ChartProps['option'];
|
|
35
35
|
xAxis: EChartsOption['xAxis'];
|
|
36
36
|
yAxis: EChartsOption['yAxis'];
|
|
37
|
+
hasMarkArea: boolean;
|
|
37
38
|
};
|
|
38
39
|
/**
|
|
39
40
|
* Slider zoom needs extra bottom grid space for ECharts' slider control.
|
|
40
41
|
*/
|
|
41
42
|
export declare function hasSliderDataZoom(dataZoom: EChartsOption['dataZoom']): boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Mark area needs extra top grid space to fit inside the chart.
|
|
45
|
+
*/
|
|
46
|
+
export declare const hasMarkAreaInSeries: (series: EchartsSeries) => boolean;
|
|
42
47
|
/**
|
|
43
48
|
* Category x-axes use slightly wider grid padding to avoid clipped labels.
|
|
44
49
|
*/
|
|
@@ -47,6 +52,6 @@ export declare function hasCategoryXAxis(xAxis: EChartsOption['xAxis']): boolean
|
|
|
47
52
|
* Builds the ECharts option object from Needle chart props and derived values.
|
|
48
53
|
* Applying the option to an ECharts instance happens in `useChartOption`.
|
|
49
54
|
*/
|
|
50
|
-
export declare function buildChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, legendSelected, propsSeries, series, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, }: BuildChartOptionParams): EChartsOption;
|
|
55
|
+
export declare function buildChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, legendSelected, propsSeries, series, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, hasMarkArea, }: BuildChartOptionParams): EChartsOption;
|
|
51
56
|
export {};
|
|
52
57
|
//# sourceMappingURL=build-chart-option.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build-chart-option.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/build-chart-option.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAA2B,aAAa,EAAE,MAAM,SAAS,CAAC;AAItE,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAG3D,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,WAAW,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,cAAc,EAAE,uBAAuB,EAAE,CAAC;IAC1C,cAAc,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IACjC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"build-chart-option.d.ts","sourceRoot":"","sources":["../../../../src/charts/utils/build-chart-option.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAA2B,aAAa,EAAE,MAAM,SAAS,CAAC;AAItE,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAG3D,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,WAAW,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,cAAc,EAAE,uBAAuB,EAAE,CAAC;IAC1C,cAAc,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACzC,UAAU,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IACjC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,GAClC,OAAO,CAMT;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,aAAa,YAGlC,CAAC;AAExB;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,OAAO,CAIvE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,WAAW,EACX,MAAM,EACN,cAAc,EACd,cAAc,EACd,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,GACZ,EAAE,sBAAsB,GAAG,aAAa,CAiDxC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react-charts",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.8",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React implementation of charts from Neo4j Design System",
|
|
6
6
|
"keywords": [
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"react": ">=19.0.0",
|
|
57
57
|
"react-dom": ">=19.0.0",
|
|
58
58
|
"@neo4j-ndl/base": "^4.16.1",
|
|
59
|
-
"@neo4j-ndl/react": "^4.16.
|
|
59
|
+
"@neo4j-ndl/react": "^4.16.3"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
62
|
"classnames": "2.5.1",
|