Implementation:Apache Druid Timezone Aware Tick Generation
| Knowledge Sources | |
|---|---|
| Domains | Web_Console, Data_Visualization |
| Last Updated | 2026-02-10 10:00 GMT |
Overview
Provides timezone-aware tick calculation and formatting utilities for time-axis rendering in charts.
Description
The Ticks module reimplements D3's time tick generation and formatting in a timezone-aware manner using the chronoshift Duration library. The `timezoneAwareTicks` function computes evenly spaced Date ticks between a start and end date for a given count, respecting the specified timezone. The `tickFormatWithTimezone` function selects the appropriate format (millisecond, second, minute, hour, day, week, month, or year) based on which time boundary the date falls on, applying timezone offsets for correct display.
Usage
Used in the explore view's time-series charts to generate properly spaced and formatted axis ticks that respect the user's selected timezone.
Code Reference
Source Location
- Repository: Apache Druid
- File: web-console/src/utils/ticks.ts
- Lines: 1-132
Signature
export function tickFormatWithTimezone(date: Date, timezone: Timezone): string;
export function timezoneAwareTicks(start: Date, end: Date, count: number, timezone: Timezone): Date[];
Import
import { tickFormatWithTimezone, timezoneAwareTicks } from './utils/ticks';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| date | Date |
Yes | A JavaScript Date to format for tick label display |
| start | Date |
Yes | The start of the time range for tick generation |
| end | Date |
Yes | The end of the time range for tick generation |
| count | number |
Yes | The desired number of ticks to generate |
| timezone | Timezone |
Yes | A chronoshift Timezone for timezone-aware calculations |
Outputs
| Name | Type | Description |
|---|---|---|
| (return) | string |
A formatted tick label string appropriate for the time granularity (e.g., "09:30", "Jan 15", "2024") |
| (return) | Date[] |
An array of evenly spaced Date objects suitable for use as axis ticks |
Usage Examples
Generate timezone-aware ticks
import { timezoneAwareTicks } from './utils/ticks';
import { Timezone } from 'chronoshift';
const start = new Date('2024-01-01T00:00:00Z');
const end = new Date('2024-01-02T00:00:00Z');
const ticks = timezoneAwareTicks(start, end, 6, Timezone.UTC);
// Returns approximately 6 evenly spaced Date objects across the 24-hour range
Format a tick with timezone
import { tickFormatWithTimezone } from './utils/ticks';
import { Timezone } from 'chronoshift';
const label = tickFormatWithTimezone(new Date('2024-01-15T09:30:00Z'), Timezone.UTC);
// Returns '09:30' (minute-level format since it falls on a minute boundary)