This is an automated email from the ASF dual-hosted git repository. vogievetsky pushed a commit to branch segment_timeline2 in repository https://gitbox.apache.org/repos/asf/druid.git
commit 1b68c63d47c5d3885a35c8803cc16281bf0ec8e9 Author: Vadim Ogievetsky <[email protected]> AuthorDate: Thu Oct 31 09:08:03 2024 -0700 goodies --- .../segment-timeline/segment-bar-chart-render.tsx | 30 +++++++++++++++------- .../segment-timeline/segment-timeline.scss | 1 + 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx b/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx index dd813261125..72fff4e891c 100644 --- a/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx +++ b/web-console/src/components/segment-timeline/segment-bar-chart-render.tsx @@ -58,6 +58,9 @@ const POSSIBLE_GRANULARITIES = [ new Duration('P1Y'), ]; +const EXTEND_DATE_RANGE_BY = 0; +const EXTEND_X_SCALE_DOMAIN_BY = 10; + const COLORS = [ '#b33040', '#d25c4d', @@ -140,13 +143,18 @@ export const SegmentBarChartRender = function SegmentBarChartRender( const [shiftOffset, setShiftOffset] = useState<number | undefined>(); const svgRef = useRef<SVGSVGElement | null>(null); + const expandedDateRange: NonNullDateRange = useMemo(() => { + const extend = (dateRange[1].valueOf() - dateRange[0].valueOf()) * EXTEND_DATE_RANGE_BY; + return [new Date(dateRange[0].valueOf() - extend), new Date(dateRange[1].valueOf() + extend)]; + }, [dateRange]); + const trimGranularity = useMemo(() => { return Duration.pickSmallestGranularityThatFits( POSSIBLE_GRANULARITIES, - dateRange[1].valueOf() - dateRange[0].valueOf(), + expandedDateRange[1].valueOf() - expandedDateRange[0].valueOf(), Math.floor(stage.width / MIN_BAR_WIDTH), ).toString(); - }, [dateRange, stage.width]); + }, [expandedDateRange, stage.width]); console.log(trimGranularity); @@ -186,10 +194,12 @@ export const SegmentBarChartRender = function SegmentBarChartRender( const innerStage = stage.applyMargin(CHART_MARGIN); - const baseTimeScale = scaleUtc().domain(dateRange).range([0, innerStage.width]); + const baseTimeScale = scaleUtc() + .domain(expandedDateRange) + .range([EXTEND_X_SCALE_DOMAIN_BY, innerStage.width - EXTEND_X_SCALE_DOMAIN_BY]); const timeScale = shiftOffset - ? baseTimeScale.copy().domain(offsetDateRange(dateRange, shiftOffset)) + ? baseTimeScale.copy().domain(offsetDateRange(expandedDateRange, shiftOffset)) : baseTimeScale; const maxStat = max(intervalBars, d => d[shownIntervalStat] + d.offset[shownIntervalStat]); @@ -374,12 +384,14 @@ export const SegmentBarChartRender = function SegmentBarChartRender( {!!shiftOffset && ( <rect className="shifter" - x={timeScale(shiftOffset > 0 ? dateRange[1] : dateRange[0].valueOf() + shiftOffset)} + x={shiftOffset > 0 ? timeScale(expandedDateRange[1]) : 0} y={0} height={innerStage.height} - width={Math.abs( - timeScale(dateRange[0]) - timeScale(dateRange[0].valueOf() + shiftOffset), - )} + width={ + shiftOffset > 0 + ? innerStage.width - timeScale(expandedDateRange[1]) + : timeScale(expandedDateRange[0]) + } /> )} </g> @@ -403,7 +415,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender( ) : undefined} {!intervalRows.length && ( <div className="empty-placeholder"> - <div className="no-data-text">There are no segments in the selected date range</div> + <div className="no-data-text">There are no segments in the selected range</div> </div> )} </div> diff --git a/web-console/src/components/segment-timeline/segment-timeline.scss b/web-console/src/components/segment-timeline/segment-timeline.scss index 8295fa3cdfd..6582394869e 100644 --- a/web-console/src/components/segment-timeline/segment-timeline.scss +++ b/web-console/src/components/segment-timeline/segment-timeline.scss @@ -24,6 +24,7 @@ height: 40px; display: flex; align-items: start; + padding: 5px; gap: 10px; } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
