@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
75 lines • 3.73 kB
JavaScript
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { generateThresholdAriaDescription } from './aria-description';
import { createAxisTooltipFormatter } from './chart-tooltip-formatter';
import { mergeToolbox } from './user-option-utils';
/**
* Slider zoom needs extra bottom grid space for ECharts' slider control.
*/
export function hasSliderDataZoom(dataZoom) {
return Array.isArray(dataZoom)
? dataZoom.some((dataZoomOption) => {
return (dataZoomOption === null || dataZoomOption === void 0 ? void 0 : dataZoomOption.type) === 'slider';
})
: (dataZoom === null || dataZoom === void 0 ? void 0 : dataZoom.type) === 'slider';
}
/**
* Mark area needs extra top grid space to fit inside the chart.
*/
export const hasMarkAreaInSeries = (series) => Array.isArray(series)
? series.some((option) => !!option.markArea)
: !!series.markArea;
/**
* Category x-axes use slightly wider grid padding to avoid clipped labels.
*/
export function hasCategoryXAxis(xAxis) {
return Array.isArray(xAxis)
? xAxis.some((x) => x.type === 'category')
: (xAxis === null || xAxis === void 0 ? void 0 : xAxis.type) === 'category';
}
/**
* Builds the ECharts option object from Needle chart props and derived values.
* Applying the option to an ECharts instance happens in `useChartOption`.
*/
export function buildChartOption({ dataZoom, dataset, hasCategoryXAxis, hasSliderZoom, legendSelected, propsSeries, series, thresholdLines, toolboxOptions, userOption, xAxis, yAxis, hasMarkArea, }) {
const customAriaDescription = generateThresholdAriaDescription(propsSeries, dataset);
return Object.assign(Object.assign({}, userOption), { aria: Object.assign(Object.assign({ decal: {
show: false,
}, enabled: true }, (customAriaDescription !== undefined && {
label: { description: customAriaDescription },
})), userOption === null || userOption === void 0 ? void 0 : userOption.aria), dataZoom,
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: {
// ECharts mutates option.legend.selected internally; callers pass a
// copied object so the React ref remains the source of truth.
selected: Object.assign({}, legendSelected),
show: false,
}, series, toolbox: mergeToolbox(toolboxOptions), tooltip: {
borderRadius: 0,
borderWidth: 0,
confine: true,
extraCssText: 'box-shadow: none; background-color: transparent;',
formatter: createAxisTooltipFormatter({ thresholdLines, userOption }),
padding: 0,
trigger: 'axis',
}, xAxis,
yAxis });
}
//# sourceMappingURL=build-chart-option.js.map