in viz-lib/src/visualizations/chart/Editor/SeriesSettings.tsx [82:151]
export default function SeriesSettings({ options, data, onOptionsChange }: any) {
const series = useMemo(
() =>
map(
getChartData(data.rows, options), // returns sorted series
({ name }, zIndex) =>
extend({ key: name, type: options.globalSeriesType }, options.seriesOptions[name], { zIndex })
),
[options, data]
);
const handleSortEnd = useCallback(
({ oldIndex, newIndex }) => {
const seriesOptions = [...series];
seriesOptions.splice(newIndex, 0, ...seriesOptions.splice(oldIndex, 1));
// @ts-expect-error ts-migrate(2339) FIXME: Property 'key' does not exist on type 'Boolean'.
onOptionsChange({ seriesOptions: fromPairs(map(seriesOptions, ({ key }, zIndex) => [key, { zIndex }])) });
},
[onOptionsChange, series]
);
const updateSeriesOption = useCallback(
(key, prop, value) => {
onOptionsChange({
seriesOptions: {
[key]: {
[prop]: value,
},
},
});
},
[onOptionsChange]
);
const [debouncedUpdateSeriesOption] = useDebouncedCallback(updateSeriesOption, 200);
const columns = useMemo(() => getTableColumns(options, updateSeriesOption, debouncedUpdateSeriesOption), [
options,
updateSeriesOption,
debouncedUpdateSeriesOption,
]);
return (
<SortableContainer
axis="y"
lockAxis="y"
lockToContainerEdges
useDragHandle
helperClass="chart-editor-series-dragged-item"
helperContainer={(container: any) => container.querySelector("tbody")}
onSortEnd={handleSortEnd}
containerProps={{
className: "chart-editor-series",
}}>
{/* @ts-expect-error ts-migrate(2322) FIXME: Type 'Element' is not assignable to type 'null | u... Remove this comment to see the full error message */}
<Table
// @ts-expect-error ts-migrate(2322) FIXME: Type 'boolean[]' is not assignable to type 'object... Remove this comment to see the full error message
dataSource={series}
columns={columns}
components={{
body: {
row: SortableBodyRow,
},
}}
// @ts-expect-error ts-migrate(2322) FIXME: Type '(item: object) => { index: any; }' is not as... Remove this comment to see the full error message
onRow={item => ({ index: item.zIndex })}
pagination={false}
/>
</SortableContainer>
);
}