You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by vo...@apache.org on 2024/11/18 23:28:49 UTC
(druid) 14/42: goodies
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 <va...@ogievetsky.com>
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: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org