@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
106 lines (105 loc) • 4.71 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { AdaptableHelper } from '../../../../../Utilities/Helpers/AdaptableHelper';
import { resolveSparklineOptionsForRender } from '../../../../../Utilities/Helpers/StyledColumns/SparklineStyleHelper';
import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../../../Utilities/Helpers/StyleHelper';
import { Box } from '../../../../../components/Flex';
import { Tag } from '../../../../../components/Tag';
import { useAdaptable } from '../../../../AdaptableContext';
const FALLBACK_NUMBER_ARRAY = [12, 18, 9, 22, 15, 28, 19, 24, 17, 21];
const PREVIEW_HEIGHT = 36;
const PREVIEW_CELL_CLASS = 'ab-SparklinePreviewCell twa:block twa:min-w-[200px] twa:min-h-[36px] twa:px-2 twa:py-1 twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
export function getSparklineCellChromeCss(cell) {
if (!cell || !hasCellBoxStyle(cell)) {
return {};
}
return convertAdaptableStyleToCSS(cell);
}
const resolveSparklinePreviewData = (columnId, getColumnWithColumnId, getRowNodeForIndex) => {
if (!columnId) {
return FALLBACK_NUMBER_ARRAY;
}
const column = getColumnWithColumnId(columnId);
if (!column) {
return FALLBACK_NUMBER_ARRAY;
}
for (let row = 0; row < 20; row++) {
const rowNode = getRowNodeForIndex(row);
const cellData = rowNode?.data?.[column.field];
if (Array.isArray(cellData) && cellData.length > 0) {
return cellData;
}
}
return FALLBACK_NUMBER_ARRAY;
};
const buildSparklinePreviewOptions = (sparklineStyle, container, data, width, height) => {
const persisted = sparklineStyle.options ?? { type: 'line' };
const sanitized = AdaptableHelper.removeAdaptableObjectPrimitives({
...persisted,
});
const options = resolveSparklineOptionsForRender({
...sanitized,
type: sanitized.type ?? 'line',
container,
width,
height,
data: data,
});
if (options.tooltip?.renderer) {
const { renderer: _renderer, ...tooltipRest } = options.tooltip;
options.tooltip = tooltipRest;
}
return options;
};
const SparklinePreviewCanvas = ({ sparklineStyle, columnId }) => {
const adaptable = useAdaptable();
const containerRef = React.useRef(null);
const instanceRef = React.useRef(null);
const [previewError, setPreviewError] = React.useState(null);
const canDisplay = adaptable.api.styledColumnApi.canDisplaySparklines();
const optionsKey = JSON.stringify(sparklineStyle.options ?? {});
React.useEffect(() => {
return () => {
instanceRef.current?.destroy();
instanceRef.current = null;
};
}, []);
React.useEffect(() => {
const container = containerRef.current;
if (!container || !canDisplay) {
return;
}
const data = resolveSparklinePreviewData(columnId, (id) => adaptable.api.columnApi.getColumnWithColumnId(id), (index) => adaptable.api.gridApi.getRowNodeForIndex(index));
const width = Math.max(container.clientWidth, 200);
const options = buildSparklinePreviewOptions(sparklineStyle, container, data, width, PREVIEW_HEIGHT);
try {
if (!instanceRef.current) {
instanceRef.current = adaptable.api.styledColumnApi.internalApi.createSparkline(options);
}
else {
instanceRef.current.update(options);
}
setPreviewError(null);
}
catch (error) {
instanceRef.current?.destroy();
instanceRef.current = null;
setPreviewError(error instanceof Error ? error.message : 'Unable to render sparkline preview');
}
}, [sparklineStyle, columnId, canDisplay, adaptable.api, optionsKey]);
if (!canDisplay) {
return _jsx(Tag, { children: "Sparklines module not registered" });
}
if (previewError) {
return _jsx(Tag, { children: previewError });
}
return (_jsx("div", { ref: containerRef, className: "ab-SparklinePreviewCanvas", style: { width: '100%', height: PREVIEW_HEIGHT } }));
};
export const StyledColumnSparklinePreview = ({ data }) => {
const sparklineStyle = data.SparklineStyle;
if (!sparklineStyle) {
return _jsx(Tag, { children: "No Sparkline Style" });
}
const previewCellChrome = getSparklineCellChromeCss(sparklineStyle.Cell);
return (_jsx(Box, { className: PREVIEW_CELL_CLASS, style: previewCellChrome, children: _jsx(SparklinePreviewCanvas, { sparklineStyle: sparklineStyle, columnId: data.ColumnId }) }));
};