From 539418de25e582e7ca276ab2b7730dcafdbba4e1 Mon Sep 17 00:00:00 2001 From: Murad CDC Date: Wed, 25 Sep 2024 16:15:06 -0400 Subject: [PATCH] [DEV-9167] Fix Line chart suppression & circle --- packages/chart/src/CdcChart.tsx | 2 +- .../components/EditorPanel/EditorPanel.tsx | 2 +- .../LineChart/components/LineChart.Circle.tsx | 61 +++++++++++++++++-- 3 files changed, 57 insertions(+), 8 deletions(-) diff --git a/packages/chart/src/CdcChart.tsx b/packages/chart/src/CdcChart.tsx index 1280318b8..79ef8631b 100644 --- a/packages/chart/src/CdcChart.tsx +++ b/packages/chart/src/CdcChart.tsx @@ -89,7 +89,7 @@ export default function CdcChart({ const [loading, setLoading] = useState(true) const [colorScale, setColorScale] = useState(null) const [config, setConfig] = useState({} as ChartConfig) - const [stateData, setStateData] = useState(configObj.data || []) + const [stateData, setStateData] = useState(configObj?.data || []) const [excludedData, setExcludedData] = useState[] | undefined>(undefined) const [filteredData, setFilteredData] = useState[] | undefined>(undefined) const [seriesHighlight, setSeriesHighlight] = useState( diff --git a/packages/chart/src/components/EditorPanel/EditorPanel.tsx b/packages/chart/src/components/EditorPanel/EditorPanel.tsx index af62867d1..8938f0a49 100644 --- a/packages/chart/src/components/EditorPanel/EditorPanel.tsx +++ b/packages/chart/src/components/EditorPanel/EditorPanel.tsx @@ -76,7 +76,7 @@ const PreliminaryData: React.FC = ({ config, updateConfig, dat const getStyleOptions = type => { const options = Object.keys(lineCodes) if (type === 'suppression') { - return options.slice(0, -1) + return options.slice(0, -2) } else { return options } diff --git a/packages/chart/src/components/LineChart/components/LineChart.Circle.tsx b/packages/chart/src/components/LineChart/components/LineChart.Circle.tsx index db4e27f43..a8db74952 100644 --- a/packages/chart/src/components/LineChart/components/LineChart.Circle.tsx +++ b/packages/chart/src/components/LineChart/components/LineChart.Circle.tsx @@ -27,11 +27,33 @@ type LineChartCircleProps = { } const LineChartCircle = (props: LineChartCircleProps) => { - const { config, d, tableData, displayArea, seriesKey, tooltipData, xScale, yScale, colorScale, parseDate, yScaleRight, data, circleData, dataIndex, mode } = props + const { + config, + d, + tableData, + displayArea, + seriesKey, + tooltipData, + xScale, + yScale, + colorScale, + parseDate, + yScaleRight, + data, + circleData, + dataIndex, + mode + } = props const { lineDatapointStyle } = config const filtered = config?.runtime?.series.filter(s => s.dataKey === seriesKey)?.[0] // If we're not showing the circle, simply return - const getColor = (displayArea: boolean, colorScale: Function, config: ChartConfig, hoveredKey: string, seriesKey: string) => { + const getColor = ( + displayArea: boolean, + colorScale: Function, + config: ChartConfig, + hoveredKey: string, + seriesKey: string + ) => { const seriesLabels = config.runtime.seriesLabels || [] let color @@ -47,14 +69,19 @@ const LineChartCircle = (props: LineChartCircleProps) => { return color } const getXPos = hoveredXValue => { - return (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0) + return ( + (config.xAxis.type === 'categorical' ? xScale(hoveredXValue) : xScale(parseDate(hoveredXValue))) + + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0) + ) } if (mode === 'ALWAYS_SHOW_POINTS') { if (lineDatapointStyle === 'hidden') return <> const getIndex = seriesKey => config.runtime.seriesLabelsAll.indexOf(seriesKey) if (lineDatapointStyle === 'always show') { - const isMatch = circleData?.some(cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey]) + const isMatch = circleData?.some( + cd => cd[config.xAxis.dataKey] === d[config.xAxis.dataKey] && cd[seriesKey] === d[seriesKey] + ) if (isMatch) { return <> } @@ -120,10 +147,17 @@ const LineChartCircle = (props: LineChartCircleProps) => { if (mode === 'ISOLATED_POINTS') { const drawIsolatedPoints = (currentIndex, seriesKey) => { + let isMatch = false const currentPoint = data[currentIndex] const previousPoint = currentIndex > 0 ? data[currentIndex - 1] : null const nextPoint = currentIndex < data.length - 1 ? data[currentIndex + 1] : null let res = false + // check if isolated points has overlap with circle effect + circleData.forEach(item => { + if (item?.data[seriesKey] === currentPoint[seriesKey]) { + isMatch = true + } + }) // Handle the first point in the array if (currentIndex === 0 && nextPoint && !nextPoint[seriesKey]) { @@ -135,10 +169,18 @@ const LineChartCircle = (props: LineChartCircleProps) => { } // Handle points in the middle if (currentIndex > 0 && currentIndex < data.length - 1) { - if (currentPoint && currentPoint[seriesKey] && (!previousPoint || !previousPoint[seriesKey]) && (!nextPoint || !nextPoint[seriesKey])) { + if ( + currentPoint && + currentPoint[seriesKey] && + (!previousPoint || !previousPoint[seriesKey]) && + (!nextPoint || !nextPoint[seriesKey]) + ) { res = true } } + if (isMatch) { + res = false + } return res } @@ -146,7 +188,14 @@ const LineChartCircle = (props: LineChartCircleProps) => { if (mode) { if (drawIsolatedPoints(dataIndex, seriesKey)) { return ( - + ) } }