@neo4j-ndl/react-charts
Version:
React implementation of charts from Neo4j Design System
181 lines • 7.59 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/>.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.useLegendSeries = useLegendSeries;
const echarts_1 = require("echarts");
const react_1 = require("react");
const threshold_1 = require("../utils/threshold");
const use_chart_refs_1 = require("./use-chart-refs");
const isThresholdLineSeries = (series) => series.type === 'line' &&
typeof series.name === 'string' &&
(0, threshold_1.isThresholdLine)(series.name);
const getDatasetForSeries = (optionDataset, series) => {
const datasetList = Array.isArray(optionDataset)
? optionDataset
: [optionDataset];
if (series.datasetId && Array.isArray(optionDataset)) {
return datasetList.find((dataset) => (dataset === null || dataset === void 0 ? void 0 : dataset.id) === series.datasetId);
}
if (series.datasetIndex !== undefined) {
return datasetList[series.datasetIndex];
}
return datasetList[0];
};
const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
const getCachedLegendColor = ({ chart, isAllVisible, legendColorCacheRef, name, seriesIndex, dataIndexInside, }) => {
var _a;
const freshColor = chart === null || chart === void 0 ? void 0 : chart.getVisual({ dataIndexInside, seriesIndex }, 'color');
if (isAllVisible && typeof freshColor === 'string') {
legendColorCacheRef.current.set(name, freshColor);
}
return ((_a = legendColorCacheRef.current.get(name)) !== null && _a !== void 0 ? _a : (typeof freshColor === 'string' ? freshColor : '#000000'));
};
const createPieLegendSeriesItem = ({ chart, dataIndexInside, isAllVisible, legendColorCacheRef, name, seriesIndex, }) => ({
color: getCachedLegendColor({
chart,
dataIndexInside,
isAllVisible,
legendColorCacheRef,
name,
seriesIndex,
}),
name,
});
const getPieLegendSeriesFromArrayRows = ({ chart, dataset, encodedItemName, isAllVisible, legendColorCacheRef, seriesIndex, }) => {
const source = dataset === null || dataset === void 0 ? void 0 : dataset.source;
if (!Array.isArray(source) || !Array.isArray(source[0])) {
return [];
}
const itemNameIndex = source[0].findIndex((item) => item === encodedItemName);
if (itemNameIndex === -1) {
return [];
}
return source.slice(1).flatMap((row, rowIndex) => {
if (!Array.isArray(row)) {
return [];
}
return createPieLegendSeriesItem({
chart,
dataIndexInside: rowIndex,
isAllVisible,
legendColorCacheRef,
name: String(row[itemNameIndex]),
seriesIndex,
});
});
};
const getPieLegendSeriesFromObjectRows = ({ chart, dataset, encodedItemName, isAllVisible, legendColorCacheRef, seriesIndex, }) => {
const source = dataset === null || dataset === void 0 ? void 0 : dataset.source;
if (!Array.isArray(source) || typeof encodedItemName !== 'string') {
return [];
}
return source.flatMap((row, rowIndex) => {
if (!isRecord(row) || !(encodedItemName in row)) {
return [];
}
return createPieLegendSeriesItem({
chart,
dataIndexInside: rowIndex,
isAllVisible,
legendColorCacheRef,
name: String(row[encodedItemName]),
seriesIndex,
});
});
};
const getPieLegendSeries = (params) => {
var _a;
const source = (_a = params.dataset) === null || _a === void 0 ? void 0 : _a.source;
if (!Array.isArray(source) || source.length === 0) {
return [];
}
return Array.isArray(source[0])
? getPieLegendSeriesFromArrayRows(params)
: getPieLegendSeriesFromObjectRows(params);
};
/**
* Derives Needle legend rows from ECharts' normalized option and visual state.
*
* Standard series map one-to-one with legend items. Pie charts instead create a
* legend item for each data row, so the hook reads the encoded item-name column
* from the dataset and asks ECharts for each slice color. Fresh colors are
* cached while all slices are visible because ECharts reports dimmed colors for
* deselected slices.
*
* The hook waits until the first chart resize has completed so color lookups run
* against an initialized ECharts instance.
*/
function useLegendSeries({ chartOption, isWaitingForFirstResize, }) {
const { chartEchartRef, legendColorCacheRef, legendSelectedRef } = (0, use_chart_refs_1.useChartRefsContext)();
return (0, react_1.useMemo)(() => {
var _a;
if (chartEchartRef.current === null || isWaitingForFirstResize) {
return;
}
const chart = (0, echarts_1.getInstanceByDom)(chartEchartRef.current);
const optionSeries = (_a = chartOption === null || chartOption === void 0 ? void 0 : chartOption.series) !== null && _a !== void 0 ? _a : [];
const optionDataset = chartOption === null || chartOption === void 0 ? void 0 : chartOption.dataset;
const isAllLegendSeriesVisible = Object.values(legendSelectedRef.current).every((v) => v);
const legendSeries = [];
if (Array.isArray(optionSeries)) {
optionSeries.forEach((currentSeries, index) => {
var _a;
if (currentSeries === null) {
return;
}
else if (isThresholdLineSeries(currentSeries)) {
return;
}
else if (currentSeries.type === 'pie') {
legendSeries.push(...getPieLegendSeries({
chart,
dataset: getDatasetForSeries(optionDataset, currentSeries),
encodedItemName: (_a = currentSeries.encode) === null || _a === void 0 ? void 0 : _a.itemName,
isAllVisible: isAllLegendSeriesVisible,
legendColorCacheRef,
seriesIndex: index,
}));
return;
}
else {
const name = currentSeries.name;
if (name === undefined) {
return;
}
const color = chart === null || chart === void 0 ? void 0 : chart.getVisual({ seriesIndex: index }, 'color');
legendSeries.push({
color: typeof color === 'string' ? color : '#000000',
name: String(name),
});
}
});
}
return legendSeries;
}, [
chartEchartRef,
chartOption,
isWaitingForFirstResize,
legendColorCacheRef,
legendSelectedRef,
]);
}
//# sourceMappingURL=use-legend-series.js.map