dateTimeFormatOptions

Allows you to customise how date times appear in views.

For example:

<Vizzly.Dashboard
  dateTimeFormatOptions={{
    [id: string]: {
      // Provide the logic of the formatting function
      formatter: (date: Date) => date;
    };
  }}
  // ... rest of the props
/>

Property Granularities used on Charts

See Label Formatting to change Granularity label.

Granularity	Key
Daily	`DD-MM-YYYY`
Hourly	`hh:mm`
Seconds	`hh:mm:ss`
Monthly	`MMMM YYYY`
Yearly	`YYYY`
Per Quarter	`quarter`
Weekly	`Week`

Properties used to format dates on the Basic and Pivot Tables

Description	Format String
DD/MM/YYYY	`DD/MM/YYYY`
MM/DD/YYYY	`MM/DD/YYYY`
DD-MM-YYYY	`DD-MM-YYYY`
MM-DD-YYYY	`MM-DD-YYYY`
DD MMMM YYYY, hh:mm	`DD MMMM YYYY, hh:mm`
dddd DD MMMM YYYY, hh:mm	`dddd DD MMMM YYYY, hh:mm`
hh:mm	`hh:mm`
hh:mm:ss	`hh:mm:ss`
DD MMMM YYYY	`DD MMMM YYYY`
MMMM YYYY	`MMMM YYYY`
YYYY	`YYYY`
YYYY-MM-DD[T]HH:mm:ss	`YYYY-MM-DD[T]HH:mm:ss`
Quarter	`quarter`
Week	`week`

Please note, the ID must not change, otherwise the formatting function will no-longer be found and we shall fallback to the Vizzly default of passing through the value.

Label Formatting

To customize the display of the Granularity selector in the Editor, utilize the textOverrides property. This allows for the modification of the default text labels according to your requirements.

Example

<Vizzly.Dashboard
  textOverrides={{
    weekly: 'Weeks',
  }}
  // more dashboard props
/>

/**
   * @default "Monthly"
   *
   * @returns
   * String containing the translation.
   */
  'config.supported_time.month': string;
 
  /**
   * @default "Yearly"
   *
   * @returns
   * String containing the translation.
   */
  'config.supported_time.year': string;
 
  /**
   * @default "Per quarter"
   *
   * @returns
   * String containing the translation.
   */
  'config.supported_time.quarter': string;
 
  /**
   * @default "Weekly"
   *
   * @returns
   * String containing the translation.
   */
  'config.supported_time.week': string;
 
  /**
   * @default "Daily"
   *
   * @returns
   * String containing the translation.
   */
  'config.supported_time.day': string;
 
  /**
   * @default "Per second"
   *
   * @returns
   * String containing the translation.
   */
  'config.supported_time.second': string;
 
  /**
   * @default "Hourly"
   *
   * @returns
   * String containing the translation.
   */
  'config.supported_time.hour': string;
 
  /**
   * @default "Per minute"
   *
   * @returns
   * String containing the translation.
   */
  'config.supported_time.minute': string;