diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-heatmap-alpha-time-snap-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-heatmap-alpha-time-snap-visually-looks-correct-1-snap.png new file mode 100644 index 0000000000..037b37feee Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-heatmap-alpha-time-snap-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-2-1-snap.png b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-2-1-snap.png new file mode 100644 index 0000000000..40d6391c0d Binary files /dev/null and b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-2-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-3-1-snap.png b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-3-1-snap.png new file mode 100644 index 0000000000..6a4d6535c2 Binary files /dev/null and b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-3-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-4-1-snap.png b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-4-1-snap.png new file mode 100644 index 0000000000..ff86455f23 Binary files /dev/null and b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-4-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-5-1-snap.png b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-5-1-snap.png new file mode 100644 index 0000000000..219f538773 Binary files /dev/null and b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-5-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-6-1-snap.png b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-6-1-snap.png new file mode 100644 index 0000000000..29a81d3915 Binary files /dev/null and b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-6-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-7-1-snap.png b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-7-1-snap.png new file mode 100644 index 0000000000..ec87a2f11a Binary files /dev/null and b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-7-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-8-1-snap.png b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-8-1-snap.png new file mode 100644 index 0000000000..cf9fa806b9 Binary files /dev/null and b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-8-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-9-1-snap.png b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-9-1-snap.png new file mode 100644 index 0000000000..97beb19e29 Binary files /dev/null and b/integration/tests/__image_snapshots__/heatmap-stories-test-ts-heatmap-stories-time-snap-with-dataset-9-1-snap.png differ diff --git a/integration/tests/heatmap_stories.test.ts b/integration/tests/heatmap_stories.test.ts index aa5251825d..16ac0add18 100644 --- a/integration/tests/heatmap_stories.test.ts +++ b/integration/tests/heatmap_stories.test.ts @@ -26,4 +26,11 @@ describe('Heatmap stories', () => { 'http://localhost:9001/?path=/story/heatmap-alpha--categorical&knob-use global min fontSize_labels=false', ); }); + + it.each([[2], [3], [4], [5], [6], [7], [8], [9]])('time snap with dataset %i', async (dataset) => { + await page.setViewport({ width: 785, height: 600 }); + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/heatmap-alpha--time-snap&globals=theme:light&knob-dataset=${dataset}`, + ); + }); }); diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 22b56eeb25..8956b12d73 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -709,6 +709,32 @@ export const entryKey: ([key]: ArrayEntry) => string; // @public (undocumented) export const entryValue: ([, value]: ArrayEntry) => ArrayNode; +// @public (undocumented) +export interface ESCalendarInterval { + // (undocumented) + type: 'calendar'; + // (undocumented) + unit: ESCalendarIntervalUnit; + // (undocumented) + value: number; +} + +// @public (undocumented) +export type ESCalendarIntervalUnit = 'minute' | 'm' | 'hour' | 'h' | 'day' | 'd' | 'week' | 'w' | 'month' | 'M' | 'quarter' | 'q' | 'year' | 'y'; + +// @public (undocumented) +export interface ESFixedInterval { + // (undocumented) + type: 'fixed'; + // (undocumented) + unit: ESFixedIntervalUnit; + // (undocumented) + value: number; +} + +// @public (undocumented) +export type ESFixedIntervalUnit = 'ms' | 's' | 'm' | 'h' | 'd'; + // @alpha export interface ExternalPointerEventsSettings { tooltip: TooltipPortalSettings<'chart'> & { @@ -1062,7 +1088,7 @@ export interface HeatmapSpec extends Spec { // (undocumented) xAccessor: Accessor | AccessorFn; // (undocumented) - xScaleType: SeriesScales['xScaleType']; + xScale: RasterTimeScale | OrdinalScale | LinearScale; // (undocumented) xSortPredicate: Predicate; // (undocumented) @@ -1300,6 +1326,12 @@ export interface LineAnnotationStyle { line: StrokeStyle & Opacity & Partial; } +// @public (undocumented) +export interface LinearScale { + // (undocumented) + type: typeof ScaleType.Linear; +} + // Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts // Warning: (ae-forgotten-export) The symbol "SpecOptionalProps" needs to be exported by the entry point index.d.ts // @@ -1402,6 +1434,12 @@ export interface OrderBy { // @public (undocumented) export type OrdinalDomain = (number | string)[]; +// @public (undocumented) +export interface OrdinalScale { + // (undocumented) + type: typeof ScaleType.Ordinal; +} + // @public (undocumented) export type OutOfRoomCallback = (wordCount: number, renderedWordCount: number, renderedWords: string[]) => void; @@ -1627,6 +1665,12 @@ export type ProjectedValues = { // @public export type ProjectionClickListener = (values: ProjectedValues) => void; +// @public (undocumented) +export interface RasterTimeScale extends TimeScale { + // (undocumented) + interval: ESCalendarInterval | ESFixedInterval; +} + // @public export type Ratio = number; @@ -2146,6 +2190,12 @@ export type TickStyle = StrokeStyle & Visible & { // @public (undocumented) export function timeFormatter(format: string): TickFormatter; +// @public (undocumented) +export interface TimeScale { + // (undocumented) + type: typeof ScaleType.Time; +} + // @public export function toEntries, S>(array: T[], accessor: keyof T, staticValue: S): Record; diff --git a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts index 5a12a328ee..372a84ad09 100644 --- a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts +++ b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts @@ -7,7 +7,7 @@ */ import { bisectLeft } from 'd3-array'; -import { scaleBand, scaleQuantize } from 'd3-scale'; +import { ScaleBand, scaleBand, scaleQuantize } from 'd3-scale'; import { colorToRgba } from '../../../../common/color_library_wrappers'; import { fillTextColor } from '../../../../common/fill_text_color'; @@ -15,12 +15,11 @@ import { Pixels } from '../../../../common/geometry'; import { Box, maximiseFontSize, TextMeasure } from '../../../../common/text_utils'; import { ScaleContinuous } from '../../../../scales'; import { ScaleType } from '../../../../scales/constants'; -import { SettingsSpec } from '../../../../specs'; +import { LinearScale, OrdinalScale, RasterTimeScale, SettingsSpec } from '../../../../specs'; import { withTextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator'; -import { snapDateToESInterval } from '../../../../utils/chrono/elasticsearch'; -import { clamp, range } from '../../../../utils/common'; +import { addIntervalToTime } from '../../../../utils/chrono/elasticsearch'; +import { clamp } from '../../../../utils/common'; import { Dimensions } from '../../../../utils/dimensions'; -import { ContinuousDomain } from '../../../../utils/domain'; import { Logger } from '../../../../utils/logger'; import { Theme } from '../../../../utils/themes/theme'; import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup'; @@ -86,7 +85,7 @@ export function shapeViewModel( ): ShapeViewModel { const gridStrokeWidth = config.grid.stroke.width ?? 1; - const { table, yValues, xDomain } = heatmapTable; + const { table, yValues, xValues } = heatmapTable; // measure the text width of all rows values to get the grid area width const boxedYValues = yValues.map }>((value) => ({ @@ -100,33 +99,6 @@ export function shapeViewModel( const yInvertedScale = scaleQuantize>().domain([0, height]).range(yValues); - const timeScale = - xDomain.type === ScaleType.Time - ? new ScaleContinuous( - { - type: ScaleType.Time, - domain: xDomain.domain as number[], - range: [0, chartDimensions.width], - nice: false, - }, - { - desiredTickCount: estimatedNonOverlappingTickCount(chartDimensions.width, config.xAxisLabel), - timeZone: config.timeZone, - }, - ) - : null; - - const xValues = timeScale - ? range( - snapDateToESInterval( - (xDomain.domain as ContinuousDomain)[0], - { type: 'fixed', unit: 'ms', quantity: xDomain.minInterval }, - 'start', - ), - (xDomain.domain as ContinuousDomain)[1], - xDomain.minInterval, - ) - : xDomain.domain; // compute the scale for the columns positions const xScale = scaleBand>().domain(xValues).range([0, chartDimensions.width]); @@ -143,28 +115,8 @@ export function shapeViewModel( const currentGridHeight = cellHeight * pageSize; - const getTextValue = ( - formatter: (v: any, options: any) => string, - scaleCallback: (x: any) => number | undefined | null = xScale, - ) => (value: any): TextBox => { - return { - text: formatter(value, { timeZone: config.timeZone }), - value, - ...config.xAxisLabel, - x: chartDimensions.left + (scaleCallback(value) || 0), - y: cellHeight * pageSize + config.xAxisLabel.fontSize / 2 + config.xAxisLabel.padding, - }; - }; - // compute the position of each column label - const textXValues: Array = timeScale - ? timeScale.ticks().map(getTextValue(config.xAxisLabel.formatter, (x: any) => timeScale.scale(x))) - : xValues.map((textBox: any) => { - return { - ...getTextValue(config.xAxisLabel.formatter)(textBox), - x: chartDimensions.left + (xScale(textBox) || 0) + xScale.bandwidth() / 2, - }; - }); + const textXValues = getXTicks(spec, config, chartDimensions, xScale, heatmapTable, currentGridHeight); const { padding } = config.yAxisLabel; const rightPadding = typeof padding === 'number' ? padding : padding.right ?? 0; @@ -291,8 +243,9 @@ export function shapeViewModel( const allXValuesInRange: Array> = getValuesInRange(xValues, startX, endX); const allYValuesInRange: Array> = getValuesInRange(yValues, startY, endY); const invertedXValues: Array> = - timeScale && typeof endX === 'number' ? [startX, endX + xDomain.minInterval] : [...allXValuesInRange]; - + isRasterTimeScale(spec.xScale) && typeof endX === 'number' + ? [startX, addIntervalToTime(endX, spec.xScale.interval, config.timeZone)] + : [...allXValuesInRange]; const cells: Cell[] = []; allXValuesInRange.forEach((x) => { @@ -371,19 +324,20 @@ export function shapeViewModel( }; // vertical lines - const xLines = []; - for (let i = 0; i < xValues.length + 1; i++) { - const x = chartDimensions.left + i * cellWidth; - const y1 = chartDimensions.top; - const y2 = cellHeight * pageSize; - xLines.push({ x1: x, y1, x2: x, y2 }); - } + const xLines = Array.from({ length: xValues.length + 1 }, (d, i) => ({ + x1: chartDimensions.left + i * cellWidth, + x2: chartDimensions.left + i * cellWidth, + y1: chartDimensions.top, + y2: currentGridHeight, + })); + // horizontal lines - const yLines = []; - for (let i = 0; i < pageSize + 1; i++) { - const y = i * cellHeight; - yLines.push({ x1: chartDimensions.left, y1: y, x2: chartDimensions.width + chartDimensions.left, y2: y }); - } + const yLines = Array.from({ length: pageSize + 1 }, (d, i) => ({ + x1: chartDimensions.left, + x2: chartDimensions.left + chartDimensions.width, + y1: i * cellHeight, + y2: i * cellHeight, + })); const cells = Object.values(cellMap); const tableMinFontSize = cells.reduce((acc, { fontSize }) => Math.min(acc, fontSize), Infinity); @@ -423,3 +377,52 @@ function getCellKey(x: NonNullable, y: NonNullable) { return rangesToHide.some(([min, max]) => min <= value && value < max); } + +/** @internal */ +export function isRasterTimeScale(scale: RasterTimeScale | OrdinalScale | LinearScale): scale is RasterTimeScale { + return scale.type === ScaleType.Time; +} + +function getXTicks( + spec: HeatmapSpec, + config: Config, + chartDimensions: Dimensions, + xScale: ScaleBand, + { xValues, xNumericExtent }: HeatmapTable, + gridHeight: number, +): Array { + const getTextValue = ( + formatter: Config['xAxisLabel']['formatter'], + scaleCallback: (x: string | number) => number | undefined | null, + ) => (value: string | number): TextBox => { + return { + text: formatter(value), + value, + ...config.xAxisLabel, + x: chartDimensions.left + (scaleCallback(value) ?? 0), + y: gridHeight + config.xAxisLabel.fontSize / 2 + config.xAxisLabel.padding, + }; + }; + if (isRasterTimeScale(spec.xScale)) { + const timeScale = new ScaleContinuous( + { + type: ScaleType.Time, + domain: xNumericExtent, + range: [0, chartDimensions.width], + nice: false, + }, + { + desiredTickCount: estimatedNonOverlappingTickCount(chartDimensions.width, config.xAxisLabel), + timeZone: config.timeZone, + }, + ); + return timeScale.ticks().map(getTextValue(config.xAxisLabel.formatter, (x) => timeScale.scale(x))); + } + + return xValues.map((textBox: string | number) => { + return { + ...getTextValue(config.xAxisLabel.formatter, xScale)(textBox), + x: chartDimensions.left + (xScale(textBox) || 0) + xScale.bandwidth() / 2, + }; + }); +} diff --git a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts index 36a8fe96f7..108cad94b9 100644 --- a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts +++ b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts @@ -12,10 +12,11 @@ import { ChartType } from '../..'; import { Color } from '../../../common/colors'; import { Predicate } from '../../../common/predicate'; import { ScaleType } from '../../../scales/constants'; -import { SeriesScales, Spec } from '../../../specs'; +import { Spec } from '../../../specs'; import { SpecType } from '../../../specs/constants'; import { getConnect, specComponentFactory } from '../../../state/spec_factory'; import { Accessor, AccessorFn } from '../../../utils/accessor'; +import { ESCalendarInterval, ESFixedInterval } from '../../../utils/chrono/elasticsearch'; import { Datum, RecursivePartial } from '../../../utils/common'; import { config } from '../layout/config/config'; import { Config } from '../layout/types/config_types'; @@ -27,7 +28,7 @@ const defaultProps = { data: [], xAccessor: ({ x }: { x: string | number }) => x, yAccessor: ({ y }: { y: string | number }) => y, - xScaleType: X_SCALE_DEFAULT.type, + xScale: { type: X_SCALE_DEFAULT.type }, valueAccessor: ({ value }: { value: string | number }) => value, valueFormatter: (value: number) => `${value}`, xSortPredicate: Predicate.AlphaAsc, @@ -58,6 +59,26 @@ export interface HeatmapBandsColorScale { labelFormatter?: (start: number, end: number) => string; } +/** @public */ +export interface TimeScale { + type: typeof ScaleType.Time; +} + +/** @public */ +export interface RasterTimeScale extends TimeScale { + interval: ESCalendarInterval | ESFixedInterval; +} + +/** @public */ +export interface LinearScale { + type: typeof ScaleType.Linear; +} + +/** @public */ +export interface OrdinalScale { + type: typeof ScaleType.Ordinal; +} + /** @alpha */ export interface HeatmapSpec extends Spec { specType: typeof SpecType.Series; @@ -70,7 +91,7 @@ export interface HeatmapSpec extends Spec { valueFormatter: (value: number) => string; xSortPredicate: Predicate; ySortPredicate: Predicate; - xScaleType: SeriesScales['xScaleType']; + xScale: RasterTimeScale | OrdinalScale | LinearScale; config: RecursivePartial; highlightedData?: { x: Array; y: Array }; name?: string; @@ -90,6 +111,6 @@ export const Heatmap: React.FunctionComponent< | 'xSortPredicate' | 'valueFormatter' | 'config' - | 'xScaleType' + | 'xScale' >(defaultProps), ); diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts b/packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts index c365c2c5c3..b07a0e8b27 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts @@ -15,7 +15,6 @@ import { getLegendSizeSelector } from '../../../../state/selectors/get_legend_si import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs'; import { Position } from '../../../../utils/common'; import { Dimensions } from '../../../../utils/dimensions'; -import { XDomain } from '../../../xy_chart/domains/types'; import { HeatmapCellDatum } from '../../layout/viewmodel/viewmodel'; import { getGridHeightParamsSelector } from './get_grid_full_height'; import { getHeatmapConfigSelector } from './get_heatmap_config'; @@ -25,10 +24,9 @@ import { getXAxisRightOverflow } from './get_x_axis_right_overflow'; /** @internal */ export interface HeatmapTable { table: Array; - // unique set of column values - xDomain: XDomain; - // unique set of row values yValues: Array; + xValues: Array; + xNumericExtent: [number, number]; extent: [number, number]; } diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.test.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.test.ts index 2d7833d995..9e4f4f2103 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.test.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_brushed_highlighted_shapes.test.ts @@ -29,7 +29,7 @@ describe('Categorical heatmap brush', () => { onBrushEnd: onBrushEndMock, }), MockSeriesSpec.heatmap({ - xScaleType: ScaleType.Ordinal, + xScale: { type: ScaleType.Ordinal }, data: [ { x: 'a', y: 'ya', value: 1 }, { x: 'b', y: 'ya', value: 2 }, @@ -81,7 +81,7 @@ describe('Categorical heatmap brush', () => { describe('Temporal heatmap brush', () => { let store: Store; let onBrushEndMock = jest.fn(); - const start = DateTime.fromISO('2021-07-01T00:00:00.000Z'); + const start = DateTime.fromISO('2021-07-01T00:00:00', { zone: 'Europe/Rome' }); beforeEach(() => { store = MockStore.default({ width: 300, height: 300, top: 0, left: 0 }, 'chartId'); onBrushEndMock = jest.fn(); @@ -91,7 +91,7 @@ describe('Temporal heatmap brush', () => { onBrushEnd: onBrushEndMock, }), MockSeriesSpec.heatmap({ - xScaleType: ScaleType.Time, + xScale: { type: ScaleType.Time, interval: { type: 'fixed', unit: 'h', value: 24 } }, data: [ { x: start.toMillis(), y: 'ya', value: 1 }, { x: start.plus({ days: 1 }).toMillis(), y: 'ya', value: 2 }, @@ -119,6 +119,7 @@ describe('Temporal heatmap brush', () => { visible: false, }, margin: { top: 0, bottom: 0, left: 0, right: 0 }, + timeZone: 'Europe/Rome', }, }), ], @@ -126,7 +127,7 @@ describe('Temporal heatmap brush', () => { ); }); - it('should brush on the x scale + minInterval', () => { + it('should brush above every cell', () => { const caller = createOnBrushEndCaller(); store.dispatch(onPointerMove({ x: 50, y: 50 }, 0)); store.dispatch(onMouseDown({ x: 50, y: 50 }, 100)); @@ -135,9 +136,9 @@ describe('Temporal heatmap brush', () => { caller(store.getState()); expect(onBrushEndMock).toBeCalledTimes(1); const brushEvent = onBrushEndMock.mock.calls[0][0]; - expect(brushEvent.cells).toHaveLength(6); + expect(brushEvent.cells).toHaveLength(9); // it covers from the beginning of the cell to the end of the next cell - expect(brushEvent.x).toEqual([start.toMillis(), start.plus({ days: 2 }).toMillis()]); + expect(brushEvent.x).toEqual([start.toMillis(), start.plus({ days: 3 }).toMillis()]); expect(brushEvent.y).toEqual(['ya', 'yb', 'yc']); }); it('should brush on the x scale + minInterval on a single cell', () => { diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts index 9a7ae82b32..73d1529dc5 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_heatmap_table.ts @@ -6,15 +6,16 @@ * Side Public License, v 1. */ +import { extent } from 'd3-array'; + import { getPredicateFn } from '../../../../common/predicate'; import { ScaleType } from '../../../../scales/constants'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs'; import { getAccessorValue } from '../../../../utils/accessor'; -import { mergeXDomain } from '../../../xy_chart/domains/x_domain'; -import { getXNiceFromSpec, getXScaleTypeFromSpec } from '../../../xy_chart/scales/get_api_scales'; -import { X_SCALE_DEFAULT } from '../../specs/scale_defaults'; +import { addIntervalToTime, timeRange } from '../../../../utils/chrono/elasticsearch'; import { HeatmapTable } from './compute_chart_dimensions'; +import { getHeatmapConfigSelector } from './get_heatmap_config'; import { getHeatmapSpecSelector } from './get_heatmap_spec'; /** @@ -22,12 +23,13 @@ import { getHeatmapSpecSelector } from './get_heatmap_spec'; * @internal */ export const getHeatmapTableSelector = createCustomCachedSelector( - [getHeatmapSpecSelector, getSettingsSpecSelector], - (spec, settingsSpec): HeatmapTable => { - const { data, valueAccessor, xAccessor, yAccessor, xSortPredicate, ySortPredicate } = spec; - const { xDomain } = settingsSpec; - - const resultData = data.reduce( + [getHeatmapSpecSelector, getSettingsSpecSelector, getHeatmapConfigSelector], + ( + { data, valueAccessor, xAccessor, yAccessor, xSortPredicate, ySortPredicate, xScale }, + { xDomain }, + { timeZone }, + ): HeatmapTable => { + const resultData = data.reduce( (acc, curr, index) => { const x = getAccessorValue(curr, xAccessor); @@ -59,26 +61,30 @@ export const getHeatmapTableSelector = createCustomCachedSelector( xValues: [], yValues: [], extent: [+Infinity, -Infinity], + xNumericExtent: [+Infinity, -Infinity], }, ); + if (xScale.type === ScaleType.Time) { + const [xDataMin = NaN, xDataMax = NaN] = extent(resultData.xValues as number[]); + // to correctly compute the time extent from data, we need to add an interval to the max value of the dataset + const dataMaxExtended = xDataMax ? addIntervalToTime(xDataMax, xScale.interval, timeZone) : NaN; - resultData.xDomain = mergeXDomain( - { - type: getXScaleTypeFromSpec(spec.xScaleType), - nice: getXNiceFromSpec(), - isBandScale: false, - desiredTickCount: X_SCALE_DEFAULT.desiredTickCount, - customDomain: xDomain, - }, - resultData.xValues, - ); - - // sort values by their predicates - if (spec.xScaleType === ScaleType.Ordinal) { - resultData.xDomain.domain.sort(getPredicateFn(xSortPredicate)); + const [customMin, customMax] = !Array.isArray(xDomain) ? [xDomain?.min ?? NaN, xDomain?.max ?? NaN] : [NaN, NaN]; + const [min, max] = extent([xDataMin, customMin, customMax, dataMaxExtended]); + resultData.xNumericExtent = [min ?? NaN, max ?? NaN]; + resultData.xValues = + isFiniteNumber(min) && isFiniteNumber(max) ? timeRange(min, max, xScale.interval, timeZone) : []; + } else if (xScale.type === ScaleType.Ordinal) { + resultData.xValues.sort(getPredicateFn(xSortPredicate)); } + + // sort Y values by their predicates resultData.yValues.sort(getPredicateFn(ySortPredicate)); return resultData; }, ); + +function isFiniteNumber(value: number | undefined): value is number { + return Number.isFinite(value); +} diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_picked_cells.test.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_picked_cells.test.ts index 1cdbeb230f..e70a0d2756 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/get_picked_cells.test.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_picked_cells.test.ts @@ -26,7 +26,7 @@ describe('Heatmap picked cells', () => { [ MockGlobalSpec.settingsNoMargins({ onBrushEnd: onBrushEndMock }), MockSeriesSpec.heatmap({ - xScaleType: ScaleType.Ordinal, + xScale: { type: ScaleType.Ordinal }, data: [ { x: 'a', y: 'ya', value: 1 }, { x: 'b', y: 'ya', value: 2 }, diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts index 4fdb8a5e08..b214694c7e 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_x_axis_right_overflow.ts @@ -11,6 +11,7 @@ import { ScaleType } from '../../../../scales/constants'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { withTextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator'; import { getHeatmapConfigSelector } from './get_heatmap_config'; +import { getHeatmapSpecSelector } from './get_heatmap_spec'; import { getHeatmapTableSelector } from './get_heatmap_table'; /** @@ -18,16 +19,19 @@ import { getHeatmapTableSelector } from './get_heatmap_table'; * Gets color scale based on specification and values range. */ export const getXAxisRightOverflow = createCustomCachedSelector( - [getHeatmapConfigSelector, getHeatmapTableSelector], - ({ xAxisLabel: { fontSize, fontFamily, padding, formatter, width }, timeZone }, { xDomain: { domain, type } }) => { - return type !== ScaleType.Time + [getHeatmapSpecSelector, getHeatmapConfigSelector, getHeatmapTableSelector], + ({ xScale }, { timeZone, xAxisLabel: { fontSize, fontFamily, padding, formatter, width } }, { xNumericExtent }) => { + return xScale.type !== ScaleType.Time ? 0 : typeof width === 'number' ? width / 2 - : withTextMeasure((measure) => - new ScaleContinuous({ type: ScaleType.Time, domain: domain as number[], range: [0, 1] }, { timeZone }) + : withTextMeasure((measure) => { + return new ScaleContinuous( + { type: ScaleType.Time, domain: xNumericExtent, range: [0, 1] }, + { timeZone: xScale.type === ScaleType.Time ? timeZone : undefined }, + ) .ticks() - .reduce((max, n) => Math.max(max, measure(formatter(n), padding, fontSize, fontFamily).width + padding), 0), - ) / 2; + .reduce((max, n) => Math.max(max, measure(formatter(n), padding, fontSize, fontFamily).width + padding), 0); + }) / 2; }, ); diff --git a/packages/charts/src/chart_types/specs.ts b/packages/charts/src/chart_types/specs.ts index 6f6d636a4b..1d0afcc8b7 100644 --- a/packages/charts/src/chart_types/specs.ts +++ b/packages/charts/src/chart_types/specs.ts @@ -21,4 +21,4 @@ export * from './xy_chart/utils/specs'; export { Partition } from './partition_chart/specs'; -export { Heatmap, HeatmapSpec } from './heatmap/specs'; +export { Heatmap, HeatmapSpec, RasterTimeScale, TimeScale, LinearScale, OrdinalScale } from './heatmap/specs'; diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts index b25ed1e11d..902b92577a 100644 --- a/packages/charts/src/index.ts +++ b/packages/charts/src/index.ts @@ -96,3 +96,10 @@ export { Pixels, Ratio } from './common/geometry'; export { AdditiveNumber } from './utils/accessor'; export { FontStyle, FONT_STYLES } from './common/text_utils'; export { Color } from './common/colors'; + +export { + ESCalendarInterval, + ESCalendarIntervalUnit, + ESFixedInterval, + ESFixedIntervalUnit, +} from './utils/chrono/elasticsearch'; diff --git a/packages/charts/src/mocks/specs/specs.ts b/packages/charts/src/mocks/specs/specs.ts index de693631fa..f0e9aa3d9a 100644 --- a/packages/charts/src/mocks/specs/specs.ts +++ b/packages/charts/src/mocks/specs/specs.ts @@ -185,7 +185,7 @@ export class MockSeriesSpec { }, xAccessor: ({ x }: { x: string | number }) => x, yAccessor: ({ y }: { y: string | number }) => y, - xScaleType: X_SCALE_DEFAULT.type, + xScale: { type: X_SCALE_DEFAULT.type }, valueAccessor: ({ value }: { value: string | number }) => value, valueFormatter: (value: number) => `${value}`, xSortPredicate: Predicate.AlphaAsc, diff --git a/packages/charts/src/utils/chrono/chrono.ts b/packages/charts/src/utils/chrono/chrono.ts index 495a826e37..1942876a27 100644 --- a/packages/charts/src/utils/chrono/chrono.ts +++ b/packages/charts/src/utils/chrono/chrono.ts @@ -18,13 +18,13 @@ import { formatTimeObj, diffTimeObjs, } from './moment'; -import { CalendarIntervalUnit, CalendarObj, DateTime, FixedIntervalUnit, Minutes, UnixTimestamp } from './types'; +import { CalendarIntervalUnit, DateTime, FixedIntervalUnit, Minutes, UnixTimestamp } from './types'; /** @internal */ export function addTime( dateTime: DateTime, timeZone: string | undefined, - unit: keyof CalendarObj, + unit: CalendarIntervalUnit | FixedIntervalUnit, count: number, ): UnixTimestamp { return timeObjToUnixTimestamp(addTimeToObj(getTimeObj(dateTime, timeZone), unit, count)); @@ -34,7 +34,7 @@ export function addTime( export function subtractTime( dateTime: DateTime, timeZone: string | undefined, - unit: keyof CalendarObj, + unit: CalendarIntervalUnit | FixedIntervalUnit, count: number, ): UnixTimestamp { return timeObjToUnixTimestamp(subtractTimeToObj(getTimeObj(dateTime, timeZone), unit, count)); diff --git a/packages/charts/src/utils/chrono/elasticsearch.test.ts b/packages/charts/src/utils/chrono/elasticsearch.test.ts index 9db1f5c05d..5f1c3b13d3 100644 --- a/packages/charts/src/utils/chrono/elasticsearch.test.ts +++ b/packages/charts/src/utils/chrono/elasticsearch.test.ts @@ -15,7 +15,7 @@ describe('snap to interval', () => { const initialDate = DateTime.fromISO('2020-01-03T07:00:01Z'); const snappedDate = snapDateToESInterval( initialDate.toMillis(), - { type: 'calendar', unit: 'd', quantity: 1 }, + { type: 'calendar', unit: 'd', value: 1 }, 'start', 'UTC', ); @@ -26,7 +26,7 @@ describe('snap to interval', () => { const initialDate = DateTime.fromISO('2020-01-03T07:00:01Z'); const snappedDate = snapDateToESInterval( initialDate.toMillis(), - { type: 'calendar', unit: 'd', quantity: 1 }, + { type: 'calendar', unit: 'd', value: 1 }, 'end', 'UTC', ); @@ -37,7 +37,7 @@ describe('snap to interval', () => { const initialDate = DateTime.fromISO('2020-01-03T07:00:01Z'); const snappedDate = snapDateToESInterval( initialDate.toMillis(), - { type: 'fixed', unit: 'm', quantity: 30 }, + { type: 'fixed', unit: 'm', value: 30 }, 'start', 'UTC', ); @@ -48,7 +48,7 @@ describe('snap to interval', () => { const initialDate = DateTime.fromISO('2020-01-03T07:00:01Z'); const snappedDate = snapDateToESInterval( initialDate.toMillis(), - { type: 'fixed', unit: 'm', quantity: 30 }, + { type: 'fixed', unit: 'm', value: 30 }, 'end', 'UTC', ); diff --git a/packages/charts/src/utils/chrono/elasticsearch.ts b/packages/charts/src/utils/chrono/elasticsearch.ts index 4b0af3c5c2..a5c44e199e 100644 --- a/packages/charts/src/utils/chrono/elasticsearch.ts +++ b/packages/charts/src/utils/chrono/elasticsearch.ts @@ -7,10 +7,10 @@ */ import { TimeMs } from '../../common/geometry'; -import { endOf, getUnixTimestamp, startOf } from './chrono'; +import { addTime, endOf, getUnixTimestamp, getUTCOffset, startOf } from './chrono'; import { CalendarIntervalUnit, FixedIntervalUnit, UnixTimestamp } from './types'; -/** @internal */ +/** @public */ export type ESCalendarIntervalUnit = | 'minute' | 'm' @@ -27,7 +27,8 @@ export type ESCalendarIntervalUnit = | 'year' | 'y'; -type ESFixedIntervalUnit = 'ms' | 's' | 'm' | 'h' | 'd'; +/** @public */ +export type ESFixedIntervalUnit = 'ms' | 's' | 'm' | 'h' | 'd'; /** @internal */ export const ES_FIXED_INTERVAL_UNIT_TO_BASE: Record = { @@ -38,18 +39,18 @@ export const ES_FIXED_INTERVAL_UNIT_TO_BASE: Record d: 1000 * 60 * 60 * 24, }; -/** @internal */ -export type ESCalendarInterval = { +/** @public */ +export interface ESCalendarInterval { type: 'calendar'; unit: ESCalendarIntervalUnit; - quantity: number; -}; + value: number; +} -/** @internal */ +/** @public */ export interface ESFixedInterval { type: 'fixed'; unit: ESFixedIntervalUnit; - quantity: number; + value: number; } const esCalendarIntervalToChronoInterval: Record = { @@ -74,7 +75,7 @@ export function snapDateToESInterval( date: number | Date, interval: ESCalendarInterval | ESFixedInterval, snapTo: 'start' | 'end', - timeZone?: string, + timeZone: string, ): UnixTimestamp { return isCalendarInterval(interval) ? esCalendarIntervalSnap(date, interval, snapTo, timeZone) @@ -100,10 +101,63 @@ function esFixedIntervalSnap( date: number | Date, interval: ESFixedInterval, snapTo: 'start' | 'end', - timeZone?: string, + timeZone: string, ): UnixTimestamp { - const unitMultiplier = interval.quantity * ES_FIXED_INTERVAL_UNIT_TO_BASE[interval.unit]; + const unitMultiplier = interval.value * ES_FIXED_INTERVAL_UNIT_TO_BASE[interval.unit]; const unixTimestamp = getUnixTimestamp(date, timeZone); - const roundedDate = Math.floor(unixTimestamp / unitMultiplier) * unitMultiplier; + const utcOffsetInMs = getUTCOffset(date, timeZone) * 60 * 1000; + const roundedDate = Math.floor((unixTimestamp + utcOffsetInMs) / unitMultiplier) * unitMultiplier - utcOffsetInMs; return snapTo === 'start' ? roundedDate : roundedDate + unitMultiplier - 1; } + +/** @internal */ +export function timeRange( + from: number, + to: number, + interval: ESCalendarInterval | ESFixedInterval, + timeZone: string, +): number[] { + return interval.type === 'fixed' + ? fixedTimeRange(from, to, interval, timeZone) + : calendarTimeRange(from, to, interval, timeZone); +} + +function calendarTimeRange(from: number, to: number, interval: ESCalendarInterval, timeZone: string): number[] { + const snappedFrom = snapDateToESInterval(from, interval, 'start', timeZone); + const snappedTo = snapDateToESInterval(to, interval, 'start', timeZone); + const values: number[] = [snappedFrom]; + let current = snappedFrom; + while (addTime(current, timeZone, esCalendarIntervalToChronoInterval[interval.unit], interval.value) < snappedTo) { + current = addTime(current, timeZone, esCalendarIntervalToChronoInterval[interval.unit], interval.value); + values.push(current); + } + return values; +} + +function fixedTimeRange(from: number, to: number, interval: ESFixedInterval, timeZone: string): number[] { + const snappedFrom = snapDateToESInterval(from, interval, 'start', timeZone); + const snappedTo = snapDateToESInterval(to, interval, 'start', timeZone); + const utcTo = localToUTC(snappedTo, timeZone); + let current = localToUTC(snappedFrom, timeZone); + const values: number[] = [current]; + while (current + interval.value * ES_FIXED_INTERVAL_UNIT_TO_BASE[interval.unit] < utcTo) { + current = current + interval.value * ES_FIXED_INTERVAL_UNIT_TO_BASE[interval.unit]; + values.push(current); + } + // filtering duplicates that can be generated around DST + return [...new Set(values.map((d) => utcToLocal(d, timeZone)))]; +} + +/** @internal */ +export function addIntervalToTime(time: number, interval: ESCalendarInterval | ESFixedInterval, timeZone: string) { + return interval.type === 'fixed' + ? utcToLocal(localToUTC(time, timeZone) + interval.value * ES_FIXED_INTERVAL_UNIT_TO_BASE[interval.unit], timeZone) + : addTime(time, timeZone, esCalendarIntervalToChronoInterval[interval.unit], interval.value); +} + +function utcToLocal(time: number, timeZone: string) { + return time - getUTCOffset(time, timeZone) * 60 * 1000; +} +function localToUTC(time: number, timeZone: string) { + return time + getUTCOffset(time, timeZone) * 60 * 1000; +} diff --git a/packages/charts/src/utils/chrono/moment.ts b/packages/charts/src/utils/chrono/moment.ts index 339bdfc291..1d5627d742 100644 --- a/packages/charts/src/utils/chrono/moment.ts +++ b/packages/charts/src/utils/chrono/moment.ts @@ -60,10 +60,12 @@ export const addTimeToObj = (obj: moment.Moment, unit: CalendarIntervalUnit | Fi export const subtractTimeToObj = (obj: moment.Moment, unit: CalendarIntervalUnit | FixedIntervalUnit, count: number) => obj.subtract(count, unit); /** @internal */ -export const startTimeOfObj = (obj: moment.Moment, unit: CalendarIntervalUnit | FixedIntervalUnit) => obj.startOf(unit); +export const startTimeOfObj = (obj: moment.Moment, unit: CalendarIntervalUnit | FixedIntervalUnit) => + obj.startOf(unit === 'week' ? 'isoWeek' : unit); // we should use the ISO week to align to ES /** @internal */ -export const endTimeOfObj = (obj: moment.Moment, unit: CalendarIntervalUnit | FixedIntervalUnit) => obj.endOf(unit); +export const endTimeOfObj = (obj: moment.Moment, unit: CalendarIntervalUnit | FixedIntervalUnit) => + obj.endOf(unit === 'week' ? 'isoWeek' : unit); // we should use the ISO week to align to ES /** @internal */ export const timeObjToUTCOffset = (obj: moment.Moment): Minutes => obj.utcOffset(); diff --git a/packages/charts/src/utils/data_samples/test_anomaly_swim_lane.ts b/packages/charts/src/utils/data_samples/test_anomaly_swim_lane.ts deleted file mode 100644 index 9d1cca39f5..0000000000 --- a/packages/charts/src/utils/data_samples/test_anomaly_swim_lane.ts +++ /dev/null @@ -1,721 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -/** @internal */ -export const SWIM_LANE_DATA = [ - { - laneLabel: 'i-71a7f77b', - time: 1572847200, - value: 0, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572892200, - value: 3, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572894000, - value: 25, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572895800, - value: 50, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572897600, - value: 75, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572899400, - value: 1, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572901200, - value: 2, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572903000, - value: 24, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572904800, - value: 49, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572906600, - value: 74, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572908400, - value: 0.07397995823713518, - }, - { - laneLabel: 'i-71a7f77b', - time: 1572910200, - value: 0.03091943662761636, - }, - { - laneLabel: 'i-5d303091', - time: 1572836400, - value: 0.08552883, - }, - { - laneLabel: 'i-5d303091', - time: 1572883200, - value: 93.72707, - }, - { - laneLabel: 'i-5d303091', - time: 1572885000, - value: 50.42717, - }, - { - laneLabel: 'i-5d303091', - time: 1572910200, - value: 2.397241548271217, - }, - { - laneLabel: 'i-9f07c700', - time: 1572879600, - value: 76.10974, - }, - { - laneLabel: 'i-9f07c700', - time: 1572881400, - value: 90.75613, - }, - { - laneLabel: 'i-9f07c700', - time: 1572883200, - value: 28.016079894074096, - }, - { - laneLabel: 'i-9f07c700', - time: 1572885000, - value: 2.1780847014803517, - }, - { - laneLabel: 'i-9f07c700', - time: 1572899400, - value: 0.02531410357696053, - }, - { - laneLabel: 'i-9f07c700', - time: 1572910200, - value: 2.258382748340588, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572849000, - value: 4.210354, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572892200, - value: 89.6491, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572894000, - value: 21.289199095933952, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572895800, - value: 2.6694704470251565, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572897600, - value: 0.5850535152380327, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572899400, - value: 65.51073, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572901200, - value: 0.792024488699497, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572903000, - value: 0.5615131943374475, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572904800, - value: 0.394169564717292, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572906600, - value: 0.2046931978696015, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572908400, - value: 0.15470219555712722, - }, - { - laneLabel: 'i-d17dcd4c', - time: 1572910200, - value: 0.11787869182904363, - }, - { - laneLabel: 'i-37fbfb39', - time: 1572883200, - value: 83.92723, - }, - { - laneLabel: 'i-37fbfb39', - time: 1572885000, - value: 21.49062, - }, - { - laneLabel: 'i-37fbfb39', - time: 1572910200, - value: 0.5619960991147903, - }, - { - laneLabel: 'i-b118880c', - time: 1572847200, - value: 0.7038798, - }, - { - laneLabel: 'i-b118880c', - time: 1572849000, - value: 8.885096, - }, - { - laneLabel: 'i-b118880c', - time: 1572892200, - value: 81.92052, - }, - { - laneLabel: 'i-b118880c', - time: 1572894000, - value: 6.385433818669964, - }, - { - laneLabel: 'i-b118880c', - time: 1572895800, - value: 0.7529454579485226, - }, - { - laneLabel: 'i-b118880c', - time: 1572897600, - value: 0.16135425990161706, - }, - { - laneLabel: 'i-b118880c', - time: 1572899400, - value: 32.23389, - }, - { - laneLabel: 'i-b118880c', - time: 1572901200, - value: 0.7578572100943552, - }, - { - laneLabel: 'i-b118880c', - time: 1572903000, - value: 0.6111162033658646, - }, - { - laneLabel: 'i-b118880c', - time: 1572904800, - value: 0.443324186956941, - }, - { - laneLabel: 'i-b118880c', - time: 1572906600, - value: 0.3075144354570065, - }, - { - laneLabel: 'i-b118880c', - time: 1572908400, - value: 0.18905638316915416, - }, - { - laneLabel: 'i-b118880c', - time: 1572910200, - value: 0.15234682243112949, - }, - { - laneLabel: 'i-66578749', - time: 1572881400, - value: 60.28918, - }, - { - laneLabel: 'i-66578749', - time: 1572883200, - value: 67.31324, - }, - { - laneLabel: 'i-66578749', - time: 1572885000, - value: 81.34977, - }, - { - laneLabel: 'i-66578749', - time: 1572892200, - value: 48.25439, - }, - { - laneLabel: 'i-66578749', - time: 1572894000, - value: 31.06416, - }, - { - laneLabel: 'i-66578749', - time: 1572895800, - value: 3.0462498034282, - }, - { - laneLabel: 'i-66578749', - time: 1572897600, - value: 0.23590009859709954, - }, - { - laneLabel: 'i-66578749', - time: 1572899400, - value: 59.04865, - }, - { - laneLabel: 'i-66578749', - time: 1572901200, - value: 0.9189229698167014, - }, - { - laneLabel: 'i-66578749', - time: 1572903000, - value: 0.3479760519757592, - }, - { - laneLabel: 'i-66578749', - time: 1572904800, - value: 0.09983690866310621, - }, - { - laneLabel: 'i-66578749', - time: 1572906600, - value: 0.026896391677229674, - }, - { - laneLabel: 'i-5d302081', - time: 1572883200, - value: 79.62794, - }, - { - laneLabel: 'i-5d302081', - time: 1572885000, - value: 38.70934, - }, - { - laneLabel: 'i-5d302081', - time: 1572910200, - value: 2.3953009901171605, - }, - { - laneLabel: 'i-ef74d410', - time: 1572849000, - value: 0.1538905, - }, - { - laneLabel: 'i-ef74d410', - time: 1572881400, - value: 77.86751, - }, - { - laneLabel: 'i-ef74d410', - time: 1572883200, - value: 7.1111139045789935, - }, - { - laneLabel: 'i-ef74d410', - time: 1572885000, - value: 0.07120867159413205, - }, - { - laneLabel: 'i-ef74d410', - time: 1572892200, - value: 0.46005659357549517, - }, - { - laneLabel: 'i-ef74d410', - time: 1572899400, - value: 0.38022323217471177, - }, - { - laneLabel: 'i-ef74d410', - time: 1572901200, - value: 0.05279469228246696, - }, - { - laneLabel: 'i-ef74d410', - time: 1572903000, - value: 0.04307715617784296, - }, - { - laneLabel: 'i-3b3565e0', - time: 1572881400, - value: 49.34176, - }, - { - laneLabel: 'i-3b3565e0', - time: 1572883200, - value: 74.35002, - }, - { - laneLabel: 'i-3b3565e0', - time: 1572885000, - value: 70.82227, - }, - { - laneLabel: 'i-3b3565e0', - time: 1572899400, - value: 1.129179725764338, - }, - { - laneLabel: 'i-3b3565e0', - time: 1572901200, - value: 0.08944716315823782, - }, - { - laneLabel: 'i-3b3565e0', - time: 1572903000, - value: 0.025215653478830508, - }, - { - laneLabel: 'i-7db7c747', - time: 1572881400, - value: 56.8998, - }, - { - laneLabel: 'i-7db7c747', - time: 1572883200, - value: 34.59895, - }, - { - laneLabel: 'i-7db7c747', - time: 1572885000, - value: 69.07187, - }, - { - laneLabel: 'i-7db7c747', - time: 1572899400, - value: 20.04246, - }, - { - laneLabel: 'i-7db7c747', - time: 1572901200, - value: 0.501246678069153, - }, - { - laneLabel: 'i-7db7c747', - time: 1572903000, - value: 0.10228357345625516, - }, - { - laneLabel: 'i-8270d519', - time: 1572858000, - value: 23.41472, - }, - { - laneLabel: 'i-8270d519', - time: 1572870600, - value: 0.09778774, - }, - { - laneLabel: 'i-8270d519', - time: 1572881400, - value: 57.96897, - }, - { - laneLabel: 'i-8270d519', - time: 1572883200, - value: 63.73998, - }, - { - laneLabel: 'i-8270d519', - time: 1572885000, - value: 45.19735, - }, - { - laneLabel: 'i-8270d519', - time: 1572892200, - value: 2.166846374797418, - }, - { - laneLabel: 'i-8270d519', - time: 1572894000, - value: 0.2283247569954898, - }, - { - laneLabel: 'i-8270d519', - time: 1572899400, - value: 42.24531, - }, - { - laneLabel: 'i-8270d519', - time: 1572901200, - value: 0.49207037746175214, - }, - { - laneLabel: 'i-8270d519', - time: 1572903000, - value: 0.3243143048875506, - }, - { - laneLabel: 'i-8270d519', - time: 1572904800, - value: 0.10024450293348822, - }, - { - laneLabel: 'i-8270d519', - time: 1572906600, - value: 0.033965805201251434, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572847200, - value: 0.1867262, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572849000, - value: 11.47219, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572892200, - value: 53.59314, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572894000, - value: 15.91959, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572895800, - value: 0.5736916311300446, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572897600, - value: 29.28071, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572899400, - value: 25.1765, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572901200, - value: 1.4671989108080628, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572903000, - value: 0.8367316591855911, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572904800, - value: 0.48490204846685775, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572906600, - value: 0.24413767062868427, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572908400, - value: 0.17736807671463703, - }, - { - laneLabel: 'i-4fefbf6c', - time: 1572910200, - value: 0.10326196476266834, - }, - { - laneLabel: 'i-16fd8d2a', - time: 1572859800, - value: 33.42309, - }, - { - laneLabel: 'i-16fd8d2a', - time: 1572861600, - value: 47.17204, - }, - { - laneLabel: 'i-16fd8d2a', - time: 1572863400, - value: 0.16179846422070132, - }, - { - laneLabel: 'i-ca80c01a', - time: 1572847200, - value: 0.6692097, - }, - { - laneLabel: 'i-ca80c01a', - time: 1572870600, - value: 44.60156, - }, - { - laneLabel: 'i-ca80c01a', - time: 1572883200, - value: 26.06775, - }, - { - laneLabel: 'i-ca80c01a', - time: 1572885000, - value: 0.24539550844649843, - }, - { - laneLabel: 'i-ca80c01a', - time: 1572910200, - value: 0.09130230719255052, - }, - { - laneLabel: 'i-4a90d021', - time: 1572883200, - value: 43.41428, - }, - { - laneLabel: 'i-4a90d021', - time: 1572885000, - value: 20.30829, - }, - { - laneLabel: 'i-4a90d021', - time: 1572910200, - value: 20.706159141229445, - }, - { - laneLabel: 'i-4ff414ac', - time: 1572883200, - value: 42.82781, - }, - { - laneLabel: 'i-4ff414ac', - time: 1572885000, - value: 3.643815188524499, - }, - { - laneLabel: 'i-4ff414ac', - time: 1572910200, - value: 7.987421742621203, - }, - { - laneLabel: 'i-850643a7', - time: 1572870600, - value: 37.51045, - }, - { - laneLabel: 'i-850643a7', - time: 1572904800, - value: 0.08720035850172568, - }, - { - laneLabel: 'i-c961f137', - time: 1572859800, - value: 0.7612613, - }, - { - laneLabel: 'i-c961f137', - time: 1572861600, - value: 36.94459, - }, - { - laneLabel: 'i-c961f137', - time: 1572863400, - value: 3.530620723871948, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572874200, - value: 3.468401, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572876000, - value: 15.87705, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572877800, - value: 21.19452, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572879600, - value: 22.534, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572881400, - value: 30.46893, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572883200, - value: 9.532251, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572885000, - value: 6.127118137471535, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572892200, - value: 0.13956047806108005, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572894000, - value: 0.11986169822285726, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572899400, - value: 4.098007780030352, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572901200, - value: 0.6927671145991932, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572903000, - value: 0.2113142229906149, - }, - { - laneLabel: 'i-7cdbab5b', - time: 1572904800, - value: 0.0823203266441151, - }, -]; diff --git a/packages/charts/src/utils/data_samples/test_dataset_heatmap.ts b/packages/charts/src/utils/data_samples/test_dataset_heatmap.ts new file mode 100644 index 0000000000..9aeeb021ff --- /dev/null +++ b/packages/charts/src/utils/data_samples/test_dataset_heatmap.ts @@ -0,0 +1,4242 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { DateTime } from 'luxon'; + +import { Config } from '../../chart_types/heatmap/layout/types/config_types'; +import { ESCalendarInterval, ESFixedInterval } from '../chrono/elasticsearch'; + +type HeatmapDataSets = { + domain?: { min: number; max: number }; + timeZone?: string; + data: Array<{ x: number; y: string; value: number }>; + interval: ESFixedInterval | ESCalendarInterval; + xFormatter?: Config['xAxisLabel']['formatter']; +}; + +/** @internal */ +export const DATA_1: HeatmapDataSets = { + interval: { type: 'fixed', unit: 'h', value: 12 }, + xFormatter: (value: string | number) => { + return DateTime.fromMillis(value as number).toFormat('dd/MM HHa', { timeZone: 'Europe/Rome' }); + }, + data: [ + { + y: 'AE', + x: 1633946400000, + value: 1630.1986083984375, + }, + { + y: 'AE', + x: 1633989600000, + value: 589.9012451171875, + }, + { + y: 'AE', + x: 1634076000000, + value: 1320.9326171875, + }, + { + y: 'AE', + x: 1634162400000, + value: 1246.115478515625, + }, + { + y: 'AE', + x: 1634248800000, + value: 1498.811767578125, + }, + { + y: 'AE', + x: 1634292000000, + value: 1184.3049011230469, + }, + { + y: 'AE', + x: 1634378400000, + value: 882.4849243164062, + }, + { + y: 'AE', + x: 1634508000000, + value: 381.0003967285156, + }, + { + y: 'AE', + x: 1634594400000, + value: 1137.0064697265625, + }, + { + y: 'AE', + x: 1634637600000, + value: 221.59982299804688, + }, + { + y: 'AR', + x: 1633903200000, + value: 1071.3580627441406, + }, + { + y: 'AR', + x: 1633946400000, + value: 533.4688110351562, + }, + { + y: 'AR', + x: 1633989600000, + value: 521.6063842773438, + }, + { + y: 'AR', + x: 1634032800000, + value: 1779.9789428710938, + }, + { + y: 'AR', + x: 1634076000000, + value: 1067.8575439453125, + }, + { + y: 'AR', + x: 1634119200000, + value: 1489.5529174804688, + }, + { + y: 'AR', + x: 1634162400000, + value: 1596.3911743164062, + }, + { + y: 'AR', + x: 1634205600000, + value: 1026.2750549316406, + }, + { + y: 'AR', + x: 1634248800000, + value: 1342.860107421875, + }, + { + y: 'AR', + x: 1634292000000, + value: 1527.0611572265625, + }, + { + y: 'AR', + x: 1634335200000, + value: 2064.026611328125, + }, + { + y: 'AR', + x: 1634378400000, + value: 1553.267333984375, + }, + { + y: 'AR', + x: 1634421600000, + value: 1454.1295166015625, + }, + { + y: 'AR', + x: 1634464800000, + value: 1645.395263671875, + }, + { + y: 'AR', + x: 1634508000000, + value: 1369.0120849609375, + }, + { + y: 'AR', + x: 1634551200000, + value: 1482.1971435546875, + }, + { + y: 'AR', + x: 1634594400000, + value: 1205.93310546875, + }, + { + y: 'AR', + x: 1634637600000, + value: 1348.623291015625, + }, + { + y: 'AR', + x: 1634680800000, + value: 959.8377685546875, + }, + { + y: 'AT', + x: 1633903200000, + value: 749.7982788085938, + }, + { + y: 'AT', + x: 1633946400000, + value: 1156.054931640625, + }, + { + y: 'AT', + x: 1633989600000, + value: 1419.3067626953125, + }, + { + y: 'AT', + x: 1634032800000, + value: 1137.7723999023438, + }, + { + y: 'AT', + x: 1634076000000, + value: 1555.2818603515625, + }, + { + y: 'AT', + x: 1634119200000, + value: 1516.8120727539062, + }, + { + y: 'AT', + x: 1634162400000, + value: 1545.7149047851562, + }, + { + y: 'AT', + x: 1634205600000, + value: 1298.5445556640625, + }, + { + y: 'AT', + x: 1634248800000, + value: 1644.07177734375, + }, + { + y: 'AT', + x: 1634292000000, + value: 1570.9822998046875, + }, + { + y: 'AT', + x: 1634335200000, + value: 1123.7603759765625, + }, + { + y: 'AT', + x: 1634378400000, + value: 1502.600341796875, + }, + { + y: 'AT', + x: 1634421600000, + value: 1215.3555908203125, + }, + { + y: 'AT', + x: 1634464800000, + value: 1761.99755859375, + }, + { + y: 'AT', + x: 1634508000000, + value: 1402.3016357421875, + }, + { + y: 'AT', + x: 1634551200000, + value: 1324.6370849609375, + }, + { + y: 'AT', + x: 1634594400000, + value: 1205.5257568359375, + }, + { + y: 'AT', + x: 1634637600000, + value: 1176.2248840332031, + }, + { + y: 'AT', + x: 1634680800000, + value: 934.2395324707031, + }, + { + y: 'AU', + x: 1633903200000, + value: 1228.46826171875, + }, + { + y: 'AU', + x: 1633946400000, + value: 1528.995849609375, + }, + { + y: 'AU', + x: 1633989600000, + value: 729.99755859375, + }, + { + y: 'AU', + x: 1634032800000, + value: 1393.302978515625, + }, + { + y: 'AU', + x: 1634076000000, + value: 971.7767944335938, + }, + { + y: 'AU', + x: 1634119200000, + value: 1033.0284423828125, + }, + { + y: 'AU', + x: 1634162400000, + value: 1826.966064453125, + }, + { + y: 'AU', + x: 1634205600000, + value: 1540.0936889648438, + }, + { + y: 'AU', + x: 1634248800000, + value: 1498.648681640625, + }, + { + y: 'AU', + x: 1634292000000, + value: 1128.2857666015625, + }, + { + y: 'AU', + x: 1634335200000, + value: 1374.63427734375, + }, + { + y: 'AU', + x: 1634378400000, + value: 1749.794677734375, + }, + { + y: 'AU', + x: 1634421600000, + value: 1624.445068359375, + }, + { + y: 'AU', + x: 1634464800000, + value: 1714.9954223632812, + }, + { + y: 'AU', + x: 1634508000000, + value: 1153.7655029296875, + }, + { + y: 'AU', + x: 1634551200000, + value: 1165.4229736328125, + }, + { + y: 'AU', + x: 1634594400000, + value: 1615.3231811523438, + }, + { + y: 'AU', + x: 1634637600000, + value: 799.819580078125, + }, + { + y: 'AU', + x: 1634680800000, + value: 1784.1341552734375, + }, + { + y: 'CA', + x: 1633903200000, + value: 1373.2542724609375, + }, + { + y: 'CA', + x: 1633946400000, + value: 984.0171508789062, + }, + { + y: 'CA', + x: 1633989600000, + value: 667.0845947265625, + }, + { + y: 'CA', + x: 1634032800000, + value: 1149.9925537109375, + }, + { + y: 'CA', + x: 1634076000000, + value: 1397.2909545898438, + }, + { + y: 'CA', + x: 1634119200000, + value: 1390.003662109375, + }, + { + y: 'CA', + x: 1634162400000, + value: 1242.8565673828125, + }, + { + y: 'CA', + x: 1634205600000, + value: 853.4672546386719, + }, + { + y: 'CA', + x: 1634248800000, + value: 937.9247436523438, + }, + { + y: 'CA', + x: 1634292000000, + value: 1240.626953125, + }, + { + y: 'CA', + x: 1634335200000, + value: 1598.92431640625, + }, + { + y: 'CA', + x: 1634378400000, + value: 2096.9384765625, + }, + { + y: 'CA', + x: 1634421600000, + value: 1404.4989013671875, + }, + { + y: 'CA', + x: 1634464800000, + value: 1532.7533569335938, + }, + { + y: 'CA', + x: 1634508000000, + value: 1308.9225463867188, + }, + { + y: 'CA', + x: 1634551200000, + value: 1254.5380859375, + }, + { + y: 'CA', + x: 1634594400000, + value: 1447.060791015625, + }, + { + y: 'CA', + x: 1634637600000, + value: 1026.0033569335938, + }, + { + y: 'CA', + x: 1634680800000, + value: 1454.3275146484375, + }, + { + y: 'CA', + x: 1634724000000, + value: 1378.6402587890625, + }, + { + y: 'CH', + x: 1633903200000, + value: 585.6773834228516, + }, + { + y: 'CH', + x: 1633946400000, + value: 690.4444274902344, + }, + { + y: 'CH', + x: 1633989600000, + value: 695.4150390625, + }, + { + y: 'CH', + x: 1634032800000, + value: 508.3909606933594, + }, + { + y: 'CH', + x: 1634076000000, + value: 1424.2265014648438, + }, + { + y: 'CH', + x: 1634119200000, + value: 1313.9705810546875, + }, + { + y: 'CH', + x: 1634162400000, + value: 1311.3236694335938, + }, + { + y: 'CH', + x: 1634205600000, + value: 1160.4334716796875, + }, + { + y: 'CH', + x: 1634248800000, + value: 549.681884765625, + }, + { + y: 'CH', + x: 1634292000000, + value: 879.4996032714844, + }, + { + y: 'CH', + x: 1634335200000, + value: 1364.97216796875, + }, + { + y: 'CH', + x: 1634378400000, + value: 1379.3760986328125, + }, + { + y: 'CH', + x: 1634421600000, + value: 1590.429931640625, + }, + { + y: 'CH', + x: 1634464800000, + value: 1702.2340698242188, + }, + { + y: 'CH', + x: 1634508000000, + value: 941.3290405273438, + }, + { + y: 'CH', + x: 1634551200000, + value: 1174.7496337890625, + }, + { + y: 'CH', + x: 1634594400000, + value: 729.7496948242188, + }, + { + y: 'CH', + x: 1634637600000, + value: 1526.578369140625, + }, + { + y: 'CH', + x: 1634680800000, + value: 1129.46484375, + }, + { + y: 'CL', + x: 1633946400000, + value: 1536.809814453125, + }, + { + y: 'CL', + x: 1634076000000, + value: 1113.52978515625, + }, + { + y: 'CL', + x: 1634162400000, + value: 1973.97119140625, + }, + { + y: 'CL', + x: 1634205600000, + value: 1560.9017333984375, + }, + { + y: 'CL', + x: 1634292000000, + value: 862.6887512207031, + }, + { + y: 'CL', + x: 1634335200000, + value: 2353.2763671875, + }, + { + y: 'CL', + x: 1634378400000, + value: 1944.758544921875, + }, + { + y: 'CL', + x: 1634508000000, + value: 1354.3873291015625, + }, + { + y: 'CL', + x: 1634637600000, + value: 996.3539428710938, + }, + { + y: 'CL', + x: 1634680800000, + value: 1355.901611328125, + }, + { + y: 'CN', + x: 1633903200000, + value: 1448.720703125, + }, + { + y: 'CN', + x: 1633946400000, + value: 1519.4761352539062, + }, + { + y: 'CN', + x: 1633989600000, + value: 1109.7001953125, + }, + { + y: 'CN', + x: 1634032800000, + value: 1220.62548828125, + }, + { + y: 'CN', + x: 1634076000000, + value: 968.7841186523438, + }, + { + y: 'CN', + x: 1634119200000, + value: 1275.71826171875, + }, + { + y: 'CN', + x: 1634162400000, + value: 1687.98876953125, + }, + { + y: 'CN', + x: 1634205600000, + value: 1047.9259033203125, + }, + { + y: 'CN', + x: 1634248800000, + value: 1552.34521484375, + }, + { + y: 'CN', + x: 1634292000000, + value: 1690.6611328125, + }, + { + y: 'CN', + x: 1634335200000, + value: 2057.9147338867188, + }, + { + y: 'CN', + x: 1634378400000, + value: 1597.23876953125, + }, + { + y: 'CN', + x: 1634421600000, + value: 1500.2396850585938, + }, + { + y: 'CN', + x: 1634464800000, + value: 1854.201416015625, + }, + { + y: 'CN', + x: 1634508000000, + value: 1057.568359375, + }, + { + y: 'CN', + x: 1634551200000, + value: 1644.513671875, + }, + { + y: 'CN', + x: 1634594400000, + value: 924.8408813476562, + }, + { + y: 'CN', + x: 1634637600000, + value: 1176.250244140625, + }, + { + y: 'CN', + x: 1634680800000, + value: 1293.4815673828125, + }, + { + y: 'CN', + x: 1634724000000, + value: 857.4727172851562, + }, + { + y: 'CO', + x: 1633903200000, + value: 1095.269775390625, + }, + { + y: 'CO', + x: 1633946400000, + value: 453.3008728027344, + }, + { + y: 'CO', + x: 1633989600000, + value: 1304.517822265625, + }, + { + y: 'CO', + x: 1634032800000, + value: 1854.322021484375, + }, + { + y: 'CO', + x: 1634076000000, + value: 1052.2171630859375, + }, + { + y: 'CO', + x: 1634292000000, + value: 989.3553466796875, + }, + { + y: 'CO', + x: 1634335200000, + value: 1096.70849609375, + }, + { + y: 'CO', + x: 1634378400000, + value: 1076.895751953125, + }, + { + y: 'CO', + x: 1634421600000, + value: 1075.150390625, + }, + { + y: 'CO', + x: 1634508000000, + value: 871.4742431640625, + }, + { + y: 'CO', + x: 1634551200000, + value: 1245.4185791015625, + }, + { + y: 'CO', + x: 1634594400000, + value: 1923.149658203125, + }, + { + y: 'CO', + x: 1634680800000, + value: 1824.5716552734375, + }, + { + y: 'DE', + x: 1633946400000, + value: 1132.97509765625, + }, + { + y: 'DE', + x: 1633989600000, + value: 1571.764404296875, + }, + { + y: 'DE', + x: 1634032800000, + value: 1040.1160888671875, + }, + { + y: 'DE', + x: 1634076000000, + value: 1529.804931640625, + }, + { + y: 'DE', + x: 1634119200000, + value: 960.6709594726562, + }, + { + y: 'DE', + x: 1634162400000, + value: 950.5629272460938, + }, + { + y: 'DE', + x: 1634205600000, + value: 1107.2994995117188, + }, + { + y: 'DE', + x: 1634248800000, + value: 770.2896118164062, + }, + { + y: 'DE', + x: 1634292000000, + value: 1618.79541015625, + }, + { + y: 'DE', + x: 1634335200000, + value: 1981.40087890625, + }, + { + y: 'DE', + x: 1634378400000, + value: 1429.888916015625, + }, + { + y: 'DE', + x: 1634421600000, + value: 1276.201171875, + }, + { + y: 'DE', + x: 1634464800000, + value: 2380.615478515625, + }, + { + y: 'DE', + x: 1634551200000, + value: 921.33544921875, + }, + { + y: 'DE', + x: 1634594400000, + value: 1053.485107421875, + }, + { + y: 'DE', + x: 1634637600000, + value: 1144.2720947265625, + }, + { + y: 'DE', + x: 1634680800000, + value: 1533.2845458984375, + }, + { + y: 'DK', + x: 1633903200000, + value: 1195.4417114257812, + }, + { + y: 'DK', + x: 1634032800000, + value: 945.0773315429688, + }, + { + y: 'DK', + x: 1634292000000, + value: 1464.6525268554688, + }, + { + y: 'DK', + x: 1634335200000, + value: 1778.8946533203125, + }, + { + y: 'DK', + x: 1634421600000, + value: 1895.1260986328125, + }, + { + y: 'DK', + x: 1634464800000, + value: 2099.8984375, + }, + { + y: 'DK', + x: 1634508000000, + value: 1178.702392578125, + }, + { + y: 'DK', + x: 1634637600000, + value: 1082.788818359375, + }, + { + y: 'DK', + x: 1634680800000, + value: 1333.0047607421875, + }, + { + y: 'EC', + x: 1633903200000, + value: 1260.6492309570312, + }, + { + y: 'EC', + x: 1633946400000, + value: 1139.206298828125, + }, + { + y: 'EC', + x: 1633989600000, + value: 1083.087646484375, + }, + { + y: 'EC', + x: 1634032800000, + value: 1226.3377075195312, + }, + { + y: 'EC', + x: 1634076000000, + value: 1277.2030029296875, + }, + { + y: 'EC', + x: 1634119200000, + value: 1494.2833251953125, + }, + { + y: 'EC', + x: 1634205600000, + value: 1556.5960693359375, + }, + { + y: 'EC', + x: 1634248800000, + value: 888.1316528320312, + }, + { + y: 'EC', + x: 1634292000000, + value: 1607.5115966796875, + }, + { + y: 'EC', + x: 1634335200000, + value: 1786.5728759765625, + }, + { + y: 'EC', + x: 1634378400000, + value: 1059.01220703125, + }, + { + y: 'EC', + x: 1634421600000, + value: 1307.0654907226562, + }, + { + y: 'EC', + x: 1634464800000, + value: 1700.533447265625, + }, + { + y: 'EC', + x: 1634508000000, + value: 1518.436279296875, + }, + { + y: 'EC', + x: 1634551200000, + value: 1680.8818359375, + }, + { + y: 'EC', + x: 1634594400000, + value: 1138.2274169921875, + }, + { + y: 'EC', + x: 1634637600000, + value: 801.6689453125, + }, + { + y: 'EC', + x: 1634680800000, + value: 1023.8098754882812, + }, + { + y: 'ES', + x: 1634205600000, + value: 1095.447250366211, + }, + { + y: 'ES', + x: 1634248800000, + value: 846.2098999023438, + }, + { + y: 'ES', + x: 1634464800000, + value: 513.0786743164062, + }, + { + y: 'ES', + x: 1634551200000, + value: 421.4815673828125, + }, + { + y: 'ES', + x: 1634680800000, + value: 1783.7108154296875, + }, + { + y: 'FI', + x: 1633946400000, + value: 1989.708740234375, + }, + { + y: 'FI', + x: 1633989600000, + value: 1616.2996826171875, + }, + { + y: 'FI', + x: 1634032800000, + value: 1238.53076171875, + }, + { + y: 'FI', + x: 1634076000000, + value: 1953.0860595703125, + }, + { + y: 'FI', + x: 1634162400000, + value: 1701.4493408203125, + }, + { + y: 'FI', + x: 1634205600000, + value: 1323.0477294921875, + }, + { + y: 'FI', + x: 1634508000000, + value: 958.4090576171875, + }, + { + y: 'FI', + x: 1634551200000, + value: 1426.584716796875, + }, + { + y: 'FI', + x: 1634594400000, + value: 1633.1131591796875, + }, + { + y: 'FI', + x: 1634680800000, + value: 778.8355102539062, + }, + { + y: 'FR', + x: 1633903200000, + value: 741.9657592773438, + }, + { + y: 'FR', + x: 1633946400000, + value: 1027.302001953125, + }, + { + y: 'FR', + x: 1633989600000, + value: 933.7100830078125, + }, + { + y: 'FR', + x: 1634032800000, + value: 1727.9757080078125, + }, + { + y: 'FR', + x: 1634205600000, + value: 1445.7293701171875, + }, + { + y: 'FR', + x: 1634335200000, + value: 1083.11572265625, + }, + { + y: 'FR', + x: 1634378400000, + value: 840.2843017578125, + }, + { + y: 'FR', + x: 1634464800000, + value: 1074.0158081054688, + }, + { + y: 'FR', + x: 1634508000000, + value: 1994.239501953125, + }, + { + y: 'FR', + x: 1634680800000, + value: 1290.5693359375, + }, + { + y: 'GB', + x: 1633903200000, + value: 1000.9656982421875, + }, + { + y: 'GB', + x: 1633946400000, + value: 1361.612060546875, + }, + { + y: 'GB', + x: 1633989600000, + value: 1048.4798278808594, + }, + { + y: 'GB', + x: 1634032800000, + value: 1040.1541748046875, + }, + { + y: 'GB', + x: 1634076000000, + value: 1261.7947387695312, + }, + { + y: 'GB', + x: 1634119200000, + value: 1279.813720703125, + }, + { + y: 'GB', + x: 1634162400000, + value: 1494.7257080078125, + }, + { + y: 'GB', + x: 1634205600000, + value: 1481.67041015625, + }, + { + y: 'GB', + x: 1634248800000, + value: 1128.2760009765625, + }, + { + y: 'GB', + x: 1634292000000, + value: 1075.6246337890625, + }, + { + y: 'GB', + x: 1634335200000, + value: 1837.26220703125, + }, + { + y: 'GB', + x: 1634378400000, + value: 1100.0601806640625, + }, + { + y: 'GB', + x: 1634421600000, + value: 2098.5350341796875, + }, + { + y: 'GB', + x: 1634464800000, + value: 1313.1705322265625, + }, + { + y: 'GB', + x: 1634508000000, + value: 1930.4819946289062, + }, + { + y: 'GB', + x: 1634551200000, + value: 1384.9301147460938, + }, + { + y: 'GB', + x: 1634594400000, + value: 1308.79443359375, + }, + { + y: 'GB', + x: 1634637600000, + value: 1189.3238525390625, + }, + { + y: 'GB', + x: 1634680800000, + value: 1454.0706787109375, + }, + { + y: '__other__', + x: 1633903200000, + value: 1193.8202514648438, + }, + { + y: '__other__', + x: 1633946400000, + value: 1200.88037109375, + }, + { + y: '__other__', + x: 1633989600000, + value: 1234.8555908203125, + }, + { + y: '__other__', + x: 1634032800000, + value: 1078.6812133789062, + }, + { + y: '__other__', + x: 1634076000000, + value: 995.9703979492188, + }, + { + y: '__other__', + x: 1634119200000, + value: 1198.1402587890625, + }, + { + y: '__other__', + x: 1634162400000, + value: 1106.43212890625, + }, + { + y: '__other__', + x: 1634205600000, + value: 1180.4904174804688, + }, + { + y: '__other__', + x: 1634248800000, + value: 1319.378173828125, + }, + { + y: '__other__', + x: 1634292000000, + value: 1177.3067016601562, + }, + { + y: '__other__', + x: 1634335200000, + value: 1503.594482421875, + }, + { + y: '__other__', + x: 1634378400000, + value: 1577.262939453125, + }, + { + y: '__other__', + x: 1634421600000, + value: 1739.27294921875, + }, + { + y: '__other__', + x: 1634464800000, + value: 1519.1485595703125, + }, + { + y: '__other__', + x: 1634508000000, + value: 1136.928466796875, + }, + { + y: '__other__', + x: 1634551200000, + value: 1072.9026489257812, + }, + { + y: '__other__', + x: 1634594400000, + value: 1105.2606201171875, + }, + { + y: '__other__', + x: 1634637600000, + value: 1313.4656982421875, + }, + { + y: '__other__', + x: 1634680800000, + value: 1250.16357421875, + }, + { + y: '__other__', + x: 1634724000000, + value: 999.7426681518555, + }, + ], +}; + +/** @internal */ +export const DATA_2: HeatmapDataSets = { + interval: { type: 'fixed', unit: 'h', value: 3 }, + xFormatter: (value: string | number) => { + return DateTime.fromMillis(value as number).toFormat('dd MMM HHa', { timeZone: 'Europe/Rome' }); + }, + timeZone: 'Europe/Rome', + data: [ + { y: 'CN', x: 1635285600000, value: 1 }, + { y: 'CN', x: 1635296400000, value: 1 }, + { y: 'CN', x: 1635307200000, value: 4 }, + { y: 'CN', x: 1635318000000, value: 9 }, + { y: 'CN', x: 1635328800000, value: 13 }, + { y: 'CN', x: 1635339600000, value: 13 }, + { y: 'CN', x: 1635350400000, value: 4 }, + { y: 'CN', x: 1635361200000, value: 1 }, + { y: 'CN', x: 1635372000000, value: 0 }, + { y: 'CN', x: 1635382800000, value: 1 }, + { y: 'CN', x: 1635393600000, value: 0 }, + { y: 'CN', x: 1635404400000, value: 12 }, + { y: 'CN', x: 1635415200000, value: 21 }, + { y: 'CN', x: 1635426000000, value: 6 }, + { y: 'CN', x: 1635436800000, value: 11 }, + { y: 'CN', x: 1635447600000, value: 1 }, + { y: 'CN', x: 1635458400000, value: 0 }, + { y: 'CN', x: 1635469200000, value: 0 }, + { y: 'CN', x: 1635480000000, value: 4 }, + { y: 'CN', x: 1635490800000, value: 8 }, + { y: 'CN', x: 1635501600000, value: 19 }, + { y: 'CN', x: 1635512400000, value: 10 }, + { y: 'CN', x: 1635523200000, value: 5 }, + { y: 'CN', x: 1635534000000, value: 1 }, + { y: 'CN', x: 1635544800000, value: 0 }, + { y: 'CN', x: 1635555600000, value: 0 }, + { y: 'CN', x: 1635566400000, value: 3 }, + { y: 'CN', x: 1635577200000, value: 15 }, + { y: 'CN', x: 1635588000000, value: 12 }, + { y: 'CN', x: 1635598800000, value: 8 }, + { y: 'CN', x: 1635609600000, value: 4 }, + { y: 'CN', x: 1635620400000, value: 2 }, + { y: 'CN', x: 1635631200000, value: 0 }, + { y: 'CN', x: 1635645600000, value: 1 }, + { y: 'CN', x: 1635656400000, value: 6 }, + { y: 'CN', x: 1635667200000, value: 13 }, + { y: 'CN', x: 1635678000000, value: 17 }, + { y: 'CN', x: 1635688800000, value: 10 }, + { y: 'CN', x: 1635699600000, value: 0 }, + { y: 'CN', x: 1635710400000, value: 0 }, + { y: 'CN', x: 1635721200000, value: 0 }, + { y: 'CN', x: 1635732000000, value: 1 }, + { y: 'CN', x: 1635742800000, value: 4 }, + { y: 'CN', x: 1635753600000, value: 13 }, + { y: 'CN', x: 1635764400000, value: 13 }, + { y: 'CN', x: 1635775200000, value: 12 }, + { y: 'CN', x: 1635786000000, value: 7 }, + { y: 'CN', x: 1635796800000, value: 0 }, + { y: 'CN', x: 1635807600000, value: 0 }, + { y: 'CN', x: 1635818400000, value: 3 }, + { y: 'CN', x: 1635829200000, value: 4 }, + { y: 'CN', x: 1635840000000, value: 9 }, + { y: 'CN', x: 1635850800000, value: 9 }, + { y: 'CN', x: 1635861600000, value: 8 }, + { y: 'CN', x: 1635872400000, value: 1 }, + { y: 'CN', x: 1635883200000, value: 1 }, + { y: 'CN', x: 1635894000000, value: 0 }, + { y: 'CN', x: 1635904800000, value: 1 }, + { y: 'CN', x: 1635915600000, value: 6 }, + { y: 'CN', x: 1635926400000, value: 16 }, + { y: 'CN', x: 1635937200000, value: 13 }, + { y: 'CN', x: 1635948000000, value: 14 }, + { y: 'IN', x: 1635307200000, value: 1 }, + { y: 'IN', x: 1635318000000, value: 14 }, + { y: 'IN', x: 1635328800000, value: 15 }, + { y: 'IN', x: 1635339600000, value: 11 }, + { y: 'IN', x: 1635350400000, value: 4 }, + { y: 'IN', x: 1635361200000, value: 0 }, + { y: 'IN', x: 1635372000000, value: 0 }, + { y: 'IN', x: 1635382800000, value: 1 }, + { y: 'IN', x: 1635393600000, value: 4 }, + { y: 'IN', x: 1635404400000, value: 8 }, + { y: 'IN', x: 1635415200000, value: 12 }, + { y: 'IN', x: 1635426000000, value: 11 }, + { y: 'IN', x: 1635436800000, value: 1 }, + { y: 'IN', x: 1635447600000, value: 1 }, + { y: 'IN', x: 1635458400000, value: 0 }, + { y: 'IN', x: 1635469200000, value: 1 }, + { y: 'IN', x: 1635480000000, value: 2 }, + { y: 'IN', x: 1635490800000, value: 7 }, + { y: 'IN', x: 1635501600000, value: 9 }, + { y: 'IN', x: 1635512400000, value: 9 }, + { y: 'IN', x: 1635523200000, value: 4 }, + { y: 'IN', x: 1635534000000, value: 1 }, + { y: 'IN', x: 1635544800000, value: 0 }, + { y: 'IN', x: 1635555600000, value: 2 }, + { y: 'IN', x: 1635566400000, value: 2 }, + { y: 'IN', x: 1635577200000, value: 8 }, + { y: 'IN', x: 1635588000000, value: 8 }, + { y: 'IN', x: 1635598800000, value: 10 }, + { y: 'IN', x: 1635609600000, value: 7 }, + { y: 'IN', x: 1635620400000, value: 0 }, + { y: 'IN', x: 1635631200000, value: 0 }, + { y: 'IN', x: 1635645600000, value: 1 }, + { y: 'IN', x: 1635656400000, value: 4 }, + { y: 'IN', x: 1635667200000, value: 6 }, + { y: 'IN', x: 1635678000000, value: 10 }, + { y: 'IN', x: 1635688800000, value: 3 }, + { y: 'IN', x: 1635699600000, value: 4 }, + { y: 'IN', x: 1635710400000, value: 0 }, + { y: 'IN', x: 1635721200000, value: 1 }, + { y: 'IN', x: 1635732000000, value: 1 }, + { y: 'IN', x: 1635742800000, value: 3 }, + { y: 'IN', x: 1635753600000, value: 6 }, + { y: 'IN', x: 1635764400000, value: 10 }, + { y: 'IN', x: 1635775200000, value: 11 }, + { y: 'IN', x: 1635786000000, value: 1 }, + { y: 'IN', x: 1635796800000, value: 1 }, + { y: 'IN', x: 1635807600000, value: 0 }, + { y: 'IN', x: 1635818400000, value: 2 }, + { y: 'IN', x: 1635829200000, value: 2 }, + { y: 'IN', x: 1635840000000, value: 10 }, + { y: 'IN', x: 1635850800000, value: 17 }, + { y: 'IN', x: 1635861600000, value: 7 }, + { y: 'IN', x: 1635872400000, value: 1 }, + { y: 'IN', x: 1635883200000, value: 1 }, + { y: 'IN', x: 1635894000000, value: 1 }, + { y: 'IN', x: 1635904800000, value: 0 }, + { y: 'IN', x: 1635915600000, value: 3 }, + { y: 'IN', x: 1635926400000, value: 4 }, + { y: 'IN', x: 1635937200000, value: 4 }, + { y: 'IN', x: 1635948000000, value: 10 }, + { y: 'IN', x: 1635958800000, value: 2 }, + { y: 'IN', x: 1635969600000, value: 1 }, + { y: 'US', x: 1635318000000, value: 6 }, + { y: 'US', x: 1635328800000, value: 6 }, + { y: 'US', x: 1635339600000, value: 4 }, + { y: 'US', x: 1635350400000, value: 5 }, + { y: 'US', x: 1635361200000, value: 0 }, + { y: 'US', x: 1635372000000, value: 0 }, + { y: 'US', x: 1635382800000, value: 0 }, + { y: 'US', x: 1635393600000, value: 1 }, + { y: 'US', x: 1635404400000, value: 2 }, + { y: 'US', x: 1635415200000, value: 5 }, + { y: 'US', x: 1635426000000, value: 6 }, + { y: 'US', x: 1635436800000, value: 2 }, + { y: 'US', x: 1635447600000, value: 0 }, + { y: 'US', x: 1635458400000, value: 0 }, + { y: 'US', x: 1635469200000, value: 0 }, + { y: 'US', x: 1635480000000, value: 1 }, + { y: 'US', x: 1635490800000, value: 4 }, + { y: 'US', x: 1635501600000, value: 4 }, + { y: 'US', x: 1635512400000, value: 2 }, + { y: 'US', x: 1635523200000, value: 0 }, + { y: 'US', x: 1635534000000, value: 1 }, + { y: 'US', x: 1635544800000, value: 0 }, + { y: 'US', x: 1635555600000, value: 0 }, + { y: 'US', x: 1635566400000, value: 1 }, + { y: 'US', x: 1635577200000, value: 4 }, + { y: 'US', x: 1635588000000, value: 9 }, + { y: 'US', x: 1635598800000, value: 4 }, + { y: 'US', x: 1635609600000, value: 1 }, + { y: 'US', x: 1635620400000, value: 1 }, + { y: 'US', x: 1635631200000, value: 0 }, + { y: 'US', x: 1635645600000, value: 0 }, + { y: 'US', x: 1635656400000, value: 3 }, + { y: 'US', x: 1635667200000, value: 4 }, + { y: 'US', x: 1635678000000, value: 10 }, + { y: 'US', x: 1635688800000, value: 3 }, + { y: 'US', x: 1635699600000, value: 0 }, + { y: 'US', x: 1635710400000, value: 0 }, + { y: 'US', x: 1635721200000, value: 0 }, + { y: 'US', x: 1635732000000, value: 0 }, + { y: 'US', x: 1635742800000, value: 2 }, + { y: 'US', x: 1635753600000, value: 6 }, + { y: 'US', x: 1635764400000, value: 3 }, + { y: 'US', x: 1635775200000, value: 4 }, + { y: 'US', x: 1635786000000, value: 1 }, + { y: 'US', x: 1635796800000, value: 0 }, + { y: 'US', x: 1635807600000, value: 0 }, + { y: 'US', x: 1635818400000, value: 0 }, + { y: 'US', x: 1635829200000, value: 1 }, + { y: 'US', x: 1635840000000, value: 5 }, + { y: 'US', x: 1635850800000, value: 4 }, + { y: 'US', x: 1635861600000, value: 3 }, + { y: 'US', x: 1635872400000, value: 0 }, + { y: 'US', x: 1635883200000, value: 0 }, + { y: 'US', x: 1635894000000, value: 1 }, + { y: 'US', x: 1635904800000, value: 1 }, + { y: 'US', x: 1635915600000, value: 4 }, + { y: 'US', x: 1635926400000, value: 2 }, + { y: 'US', x: 1635937200000, value: 7 }, + { y: 'US', x: 1635948000000, value: 0 }, + { y: 'US', x: 1635958800000, value: 4 }, + { y: '__other__', x: 1635296400000, value: 1 }, + { y: '__other__', x: 1635307200000, value: 8 }, + { y: '__other__', x: 1635318000000, value: 26 }, + { y: '__other__', x: 1635328800000, value: 39 }, + { y: '__other__', x: 1635339600000, value: 27 }, + { y: '__other__', x: 1635350400000, value: 21 }, + { y: '__other__', x: 1635361200000, value: 3 }, + { y: '__other__', x: 1635372000000, value: 0 }, + { y: '__other__', x: 1635382800000, value: 4 }, + { y: '__other__', x: 1635393600000, value: 12 }, + { y: '__other__', x: 1635404400000, value: 26 }, + { y: '__other__', x: 1635415200000, value: 34 }, + { y: '__other__', x: 1635426000000, value: 32 }, + { y: '__other__', x: 1635436800000, value: 15 }, + { y: '__other__', x: 1635447600000, value: 0 }, + { y: '__other__', x: 1635458400000, value: 1 }, + { y: '__other__', x: 1635469200000, value: 4 }, + { y: '__other__', x: 1635480000000, value: 10 }, + { y: '__other__', x: 1635490800000, value: 31 }, + { y: '__other__', x: 1635501600000, value: 40 }, + { y: '__other__', x: 1635512400000, value: 28 }, + { y: '__other__', x: 1635523200000, value: 19 }, + { y: '__other__', x: 1635534000000, value: 5 }, + { y: '__other__', x: 1635544800000, value: 1 }, + { y: '__other__', x: 1635555600000, value: 3 }, + { y: '__other__', x: 1635566400000, value: 3 }, + { y: '__other__', x: 1635577200000, value: 23 }, + { y: '__other__', x: 1635588000000, value: 50 }, + { y: '__other__', x: 1635598800000, value: 32 }, + { y: '__other__', x: 1635609600000, value: 12 }, + { y: '__other__', x: 1635620400000, value: 5 }, + { y: '__other__', x: 1635631200000, value: 2 }, + { y: '__other__', x: 1635645600000, value: 2 }, + { y: '__other__', x: 1635656400000, value: 16 }, + { y: '__other__', x: 1635667200000, value: 38 }, + { y: '__other__', x: 1635678000000, value: 36 }, + { y: '__other__', x: 1635688800000, value: 29 }, + { y: '__other__', x: 1635699600000, value: 11 }, + { y: '__other__', x: 1635710400000, value: 1 }, + { y: '__other__', x: 1635721200000, value: 2 }, + { y: '__other__', x: 1635732000000, value: 1 }, + { y: '__other__', x: 1635742800000, value: 19 }, + { y: '__other__', x: 1635753600000, value: 32 }, + { y: '__other__', x: 1635764400000, value: 44 }, + { y: '__other__', x: 1635775200000, value: 22 }, + { y: '__other__', x: 1635786000000, value: 9 }, + { y: '__other__', x: 1635796800000, value: 2 }, + { y: '__other__', x: 1635807600000, value: 0 }, + { y: '__other__', x: 1635818400000, value: 7 }, + { y: '__other__', x: 1635829200000, value: 16 }, + { y: '__other__', x: 1635840000000, value: 44 }, + { y: '__other__', x: 1635850800000, value: 40 }, + { y: '__other__', x: 1635861600000, value: 25 }, + { y: '__other__', x: 1635872400000, value: 8 }, + { y: '__other__', x: 1635883200000, value: 1 }, + { y: '__other__', x: 1635894000000, value: 1 }, + { y: '__other__', x: 1635904800000, value: 4 }, + { y: '__other__', x: 1635915600000, value: 13 }, + { y: '__other__', x: 1635926400000, value: 36 }, + { y: '__other__', x: 1635937200000, value: 35 }, + { y: '__other__', x: 1635948000000, value: 33 }, + { y: '__other__', x: 1635958800000, value: 12 }, + { y: '__other__', x: 1635969600000, value: 1 }, + ], +}; + +/** @internal */ +export const DATA_3: HeatmapDataSets = { + interval: { type: 'fixed', unit: 'h', value: 12 }, + xFormatter: (value: string | number) => { + return DateTime.fromMillis(value as number).toFormat('HH:mm', { timeZone: 'Europe/Rome' }); + }, + timeZone: 'Europe/Rome', + data: [ + { x: 1635588000000, y: 'a', value: 1 }, + { x: 1635631200000, y: 'a', value: 2 }, + { x: 1635678000000, y: 'a', value: 3 }, + { x: 1635721200000, y: 'a', value: 4 }, + { x: 1635764400000, y: 'a', value: 5 }, + ], +}; + +/** @internal */ +export const DATA_4: HeatmapDataSets = { + interval: { type: 'calendar', unit: 'w', value: 1 }, + xFormatter: (value: string | number) => { + return DateTime.fromMillis(value as number).toFormat('dd/MM HH:mm', { timeZone: 'Europe/Rome' }); + }, + timeZone: 'Europe/Rome', + data: [ + { x: 1634508000000, y: 'CN', value: 43 }, + { x: 1635112800000, y: 'CN', value: 330 }, + { x: 1635721200000, y: 'CN', value: 155 }, + { x: 1634508000000, y: 'IN', value: 41 }, + { x: 1635112800000, y: 'IN', value: 261 }, + { x: 1635721200000, y: 'IN', value: 115 }, + { x: 1634508000000, y: 'US', value: 20 }, + { x: 1635112800000, y: 'US', value: 123 }, + { x: 1635721200000, y: 'US', value: 53 }, + { x: 1634508000000, y: '__other__', value: 145 }, + { x: 1635112800000, y: '__other__', value: 902 }, + { x: 1635721200000, y: '__other__', value: 448 }, + ], +}; + +/** @internal */ +export const DATA_5: HeatmapDataSets = { + domain: { min: 1635984000000, max: 1636002000000 }, + interval: { type: 'calendar', unit: 'h', value: 1 }, + xFormatter: (value: string | number) => { + return DateTime.fromMillis(value as number).toFormat('HH:mm', { timeZone: 'Europe/Rome' }); + }, + data: [ + { x: 1635984000000, y: 'sample_web_logs', value: 4202 }, + { x: 1635987600000, y: 'sample_web_logs', value: 0 }, + { x: 1635994800000, y: 'sample_web_logs', value: 5808 }, + { x: 1635998400000, y: 'sample_web_logs', value: 4629 }, + ], +}; + +/** @internal */ +export const DATA_6: HeatmapDataSets = { + interval: { type: 'fixed', value: 30, unit: 'm' }, + timeZone: 'UTC', + xFormatter: (value: string | number) => { + return DateTime.fromMillis(value as number).toFormat('HH:mm', { timeZone: 'UTC' }); + }, + data: [ + { + x: 1572847200000, + y: 'i-71a7f77b', + value: 0, + }, + { + x: 1572892200000, + y: 'i-71a7f77b', + value: 3, + }, + { + x: 1572894000000, + y: 'i-71a7f77b', + value: 25, + }, + { + x: 1572895800000, + y: 'i-71a7f77b', + value: 50, + }, + { + x: 1572897600000, + y: 'i-71a7f77b', + value: 75, + }, + { + x: 1572899400000, + y: 'i-71a7f77b', + value: 1, + }, + { + x: 1572901200000, + y: 'i-71a7f77b', + value: 2, + }, + { + x: 1572903000000, + y: 'i-71a7f77b', + value: 24, + }, + { + x: 1572904800000, + y: 'i-71a7f77b', + value: 49, + }, + { + x: 1572906600000, + y: 'i-71a7f77b', + value: 74, + }, + { + x: 1572908400000, + y: 'i-71a7f77b', + value: 0.07397995823713518, + }, + { + x: 1572910200000, + y: 'i-71a7f77b', + value: 0.03091943662761636, + }, + { + x: 1572836400000, + y: 'i-5d303091', + value: 0.08552883, + }, + { + x: 1572883200000, + y: 'i-5d303091', + value: 93.72707, + }, + { + x: 1572885000000, + y: 'i-5d303091', + value: 50.42717, + }, + { + x: 1572910200000, + y: 'i-5d303091', + value: 2.397241548271217, + }, + { + x: 1572879600000, + y: 'i-9f07c700', + value: 76.10974, + }, + { + x: 1572881400000, + y: 'i-9f07c700', + value: 90.75613, + }, + { + x: 1572883200000, + y: 'i-9f07c700', + value: 28.016079894074096, + }, + { + x: 1572885000000, + y: 'i-9f07c700', + value: 2.1780847014803517, + }, + { + x: 1572899400000, + y: 'i-9f07c700', + value: 0.02531410357696053, + }, + { + x: 1572910200000, + y: 'i-9f07c700', + value: 2.258382748340588, + }, + { + x: 1572849000000, + y: 'i-d17dcd4c', + value: 4.210354, + }, + { + x: 1572892200000, + y: 'i-d17dcd4c', + value: 89.6491, + }, + { + x: 1572894000000, + y: 'i-d17dcd4c', + value: 21.289199095933952, + }, + { + x: 1572895800000, + y: 'i-d17dcd4c', + value: 2.6694704470251565, + }, + { + x: 1572897600000, + y: 'i-d17dcd4c', + value: 0.5850535152380327, + }, + { + x: 1572899400000, + y: 'i-d17dcd4c', + value: 65.51073, + }, + { + x: 1572901200000, + y: 'i-d17dcd4c', + value: 0.792024488699497, + }, + { + x: 1572903000000, + y: 'i-d17dcd4c', + value: 0.5615131943374475, + }, + { + x: 1572904800000, + y: 'i-d17dcd4c', + value: 0.394169564717292, + }, + { + x: 1572906600000, + y: 'i-d17dcd4c', + value: 0.2046931978696015, + }, + { + x: 1572908400000, + y: 'i-d17dcd4c', + value: 0.15470219555712722, + }, + { + x: 1572910200000, + y: 'i-d17dcd4c', + value: 0.11787869182904363, + }, + { + x: 1572883200000, + y: 'i-37fbfb39', + value: 83.92723, + }, + { + x: 1572885000000, + y: 'i-37fbfb39', + value: 21.49062, + }, + { + x: 1572910200000, + y: 'i-37fbfb39', + value: 0.5619960991147903, + }, + { + x: 1572847200000, + y: 'i-b118880c', + value: 0.7038798, + }, + { + x: 1572849000000, + y: 'i-b118880c', + value: 8.885096, + }, + { + x: 1572892200000, + y: 'i-b118880c', + value: 81.92052, + }, + { + x: 1572894000000, + y: 'i-b118880c', + value: 6.385433818669964, + }, + { + x: 1572895800000, + y: 'i-b118880c', + value: 0.7529454579485226, + }, + { + x: 1572897600000, + y: 'i-b118880c', + value: 0.16135425990161706, + }, + { + x: 1572899400000, + y: 'i-b118880c', + value: 32.23389, + }, + { + x: 1572901200000, + y: 'i-b118880c', + value: 0.7578572100943552, + }, + { + x: 1572903000000, + y: 'i-b118880c', + value: 0.6111162033658646, + }, + { + x: 1572904800000, + y: 'i-b118880c', + value: 0.443324186956941, + }, + { + x: 1572906600000, + y: 'i-b118880c', + value: 0.3075144354570065, + }, + { + x: 1572908400000, + y: 'i-b118880c', + value: 0.18905638316915416, + }, + { + x: 1572910200000, + y: 'i-b118880c', + value: 0.15234682243112949, + }, + { + x: 1572881400000, + y: 'i-66578749', + value: 60.28918, + }, + { + x: 1572883200000, + y: 'i-66578749', + value: 67.31324, + }, + { + x: 1572885000000, + y: 'i-66578749', + value: 81.34977, + }, + { + x: 1572892200000, + y: 'i-66578749', + value: 48.25439, + }, + { + x: 1572894000000, + y: 'i-66578749', + value: 31.06416, + }, + { + x: 1572895800000, + y: 'i-66578749', + value: 3.0462498034282, + }, + { + x: 1572897600000, + y: 'i-66578749', + value: 0.23590009859709954, + }, + { + x: 1572899400000, + y: 'i-66578749', + value: 59.04865, + }, + { + x: 1572901200000, + y: 'i-66578749', + value: 0.9189229698167014, + }, + { + x: 1572903000000, + y: 'i-66578749', + value: 0.3479760519757592, + }, + { + x: 1572904800000, + y: 'i-66578749', + value: 0.09983690866310621, + }, + { + x: 1572906600000, + y: 'i-66578749', + value: 0.026896391677229674, + }, + { + x: 1572883200000, + y: 'i-5d302081', + value: 79.62794, + }, + { + x: 1572885000000, + y: 'i-5d302081', + value: 38.70934, + }, + { + x: 1572910200000, + y: 'i-5d302081', + value: 2.3953009901171605, + }, + { + x: 1572849000000, + y: 'i-ef74d410', + value: 0.1538905, + }, + { + x: 1572881400000, + y: 'i-ef74d410', + value: 77.86751, + }, + { + x: 1572883200000, + y: 'i-ef74d410', + value: 7.1111139045789935, + }, + { + x: 1572885000000, + y: 'i-ef74d410', + value: 0.07120867159413205, + }, + { + x: 1572892200000, + y: 'i-ef74d410', + value: 0.46005659357549517, + }, + { + x: 1572899400000, + y: 'i-ef74d410', + value: 0.38022323217471177, + }, + { + x: 1572901200000, + y: 'i-ef74d410', + value: 0.05279469228246696, + }, + { + x: 1572903000000, + y: 'i-ef74d410', + value: 0.04307715617784296, + }, + { + x: 1572881400000, + y: 'i-3b3565e0', + value: 49.34176, + }, + { + x: 1572883200000, + y: 'i-3b3565e0', + value: 74.35002, + }, + { + x: 1572885000000, + y: 'i-3b3565e0', + value: 70.82227, + }, + { + x: 1572899400000, + y: 'i-3b3565e0', + value: 1.129179725764338, + }, + { + x: 1572901200000, + y: 'i-3b3565e0', + value: 0.08944716315823782, + }, + { + x: 1572903000000, + y: 'i-3b3565e0', + value: 0.025215653478830508, + }, + { + x: 1572881400000, + y: 'i-7db7c747', + value: 56.8998, + }, + { + x: 1572883200000, + y: 'i-7db7c747', + value: 34.59895, + }, + { + x: 1572885000000, + y: 'i-7db7c747', + value: 69.07187, + }, + { + x: 1572899400000, + y: 'i-7db7c747', + value: 20.04246, + }, + { + x: 1572901200000, + y: 'i-7db7c747', + value: 0.501246678069153, + }, + { + x: 1572903000000, + y: 'i-7db7c747', + value: 0.10228357345625516, + }, + { + x: 1572858000000, + y: 'i-8270d519', + value: 23.41472, + }, + { + x: 1572870600000, + y: 'i-8270d519', + value: 0.09778774, + }, + { + x: 1572881400000, + y: 'i-8270d519', + value: 57.96897, + }, + { + x: 1572883200000, + y: 'i-8270d519', + value: 63.73998, + }, + { + x: 1572885000000, + y: 'i-8270d519', + value: 45.19735, + }, + { + x: 1572892200000, + y: 'i-8270d519', + value: 2.166846374797418, + }, + { + x: 1572894000000, + y: 'i-8270d519', + value: 0.2283247569954898, + }, + { + x: 1572899400000, + y: 'i-8270d519', + value: 42.24531, + }, + { + x: 1572901200000, + y: 'i-8270d519', + value: 0.49207037746175214, + }, + { + x: 1572903000000, + y: 'i-8270d519', + value: 0.3243143048875506, + }, + { + x: 1572904800000, + y: 'i-8270d519', + value: 0.10024450293348822, + }, + { + x: 1572906600000, + y: 'i-8270d519', + value: 0.033965805201251434, + }, + { + x: 1572847200000, + y: 'i-4fefbf6c', + value: 0.1867262, + }, + { + x: 1572849000000, + y: 'i-4fefbf6c', + value: 11.47219, + }, + { + x: 1572892200000, + y: 'i-4fefbf6c', + value: 53.59314, + }, + { + x: 1572894000000, + y: 'i-4fefbf6c', + value: 15.91959, + }, + { + x: 1572895800000, + y: 'i-4fefbf6c', + value: 0.5736916311300446, + }, + { + x: 1572897600000, + y: 'i-4fefbf6c', + value: 29.28071, + }, + { + x: 1572899400000, + y: 'i-4fefbf6c', + value: 25.1765, + }, + { + x: 1572901200000, + y: 'i-4fefbf6c', + value: 1.4671989108080628, + }, + { + x: 1572903000000, + y: 'i-4fefbf6c', + value: 0.8367316591855911, + }, + { + x: 1572904800000, + y: 'i-4fefbf6c', + value: 0.48490204846685775, + }, + { + x: 1572906600000, + y: 'i-4fefbf6c', + value: 0.24413767062868427, + }, + { + x: 1572908400000, + y: 'i-4fefbf6c', + value: 0.17736807671463703, + }, + { + x: 1572910200000, + y: 'i-4fefbf6c', + value: 0.10326196476266834, + }, + { + x: 1572859800000, + y: 'i-16fd8d2a', + value: 33.42309, + }, + { + x: 1572861600000, + y: 'i-16fd8d2a', + value: 47.17204, + }, + { + x: 1572863400000, + y: 'i-16fd8d2a', + value: 0.16179846422070132, + }, + { + x: 1572847200000, + y: 'i-ca80c01a', + value: 0.6692097, + }, + { + x: 1572870600000, + y: 'i-ca80c01a', + value: 44.60156, + }, + { + x: 1572883200000, + y: 'i-ca80c01a', + value: 26.06775, + }, + { + x: 1572885000000, + y: 'i-ca80c01a', + value: 0.24539550844649843, + }, + { + x: 1572910200000, + y: 'i-ca80c01a', + value: 0.09130230719255052, + }, + { + x: 1572883200000, + y: 'i-4a90d021', + value: 43.41428, + }, + { + x: 1572885000000, + y: 'i-4a90d021', + value: 20.30829, + }, + { + x: 1572910200000, + y: 'i-4a90d021', + value: 20.706159141229445, + }, + { + x: 1572883200000, + y: 'i-4ff414ac', + value: 42.82781, + }, + { + x: 1572885000000, + y: 'i-4ff414ac', + value: 3.643815188524499, + }, + { + x: 1572910200000, + y: 'i-4ff414ac', + value: 7.987421742621203, + }, + { + x: 1572870600000, + y: 'i-850643a7', + value: 37.51045, + }, + { + x: 1572904800000, + y: 'i-850643a7', + value: 0.08720035850172568, + }, + { + x: 1572859800000, + y: 'i-c961f137', + value: 0.7612613, + }, + { + x: 1572861600000, + y: 'i-c961f137', + value: 36.94459, + }, + { + x: 1572863400000, + y: 'i-c961f137', + value: 3.530620723871948, + }, + { + x: 1572874200000, + y: 'i-7cdbab5b', + value: 3.468401, + }, + { + x: 1572876000000, + y: 'i-7cdbab5b', + value: 15.87705, + }, + { + x: 1572877800000, + y: 'i-7cdbab5b', + value: 21.19452, + }, + { + x: 1572879600000, + y: 'i-7cdbab5b', + value: 22.534, + }, + { + x: 1572881400000, + y: 'i-7cdbab5b', + value: 30.46893, + }, + { + x: 1572883200000, + y: 'i-7cdbab5b', + value: 9.532251, + }, + { + x: 1572885000000, + y: 'i-7cdbab5b', + value: 6.127118137471535, + }, + { + x: 1572892200000, + y: 'i-7cdbab5b', + value: 0.13956047806108005, + }, + { + x: 1572894000000, + y: 'i-7cdbab5b', + value: 0.11986169822285726, + }, + { + x: 1572899400000, + y: 'i-7cdbab5b', + value: 4.098007780030352, + }, + { + x: 1572901200000, + y: 'i-7cdbab5b', + value: 0.6927671145991932, + }, + { + x: 1572903000000, + y: 'i-7cdbab5b', + value: 0.2113142229906149, + }, + { + x: 1572904800000, + y: 'i-7cdbab5b', + value: 0.0823203266441151, + }, + ], +}; + +/** @internal */ +export const DATA_7: HeatmapDataSets = { + interval: { type: 'fixed', unit: 'h', value: 12 }, + timeZone: 'Europe/Rome', + xFormatter: (value: string | number) => { + return DateTime.fromMillis(value as number).toFormat('dd/MM HH:mm', { timeZone: 'Europe/Rome' }); + }, + data: [ + { + x: 1635026400000, + value: 33, + y: '', + }, + { + x: 1635069600000, + value: 59, + y: '', + }, + { + x: 1635112800000, + value: 29, + y: '', + }, + { + x: 1635156000000, + value: 67, + y: '', + }, + { + x: 1635199200000, + value: 27, + y: '', + }, + { + x: 1635242400000, + value: 61, + y: '', + }, + { + x: 1635285600000, + value: 19, + y: '', + }, + { + x: 1635328800000, + value: 71, + y: '', + }, + { + x: 1635372000000, + value: 26, + y: '', + }, + { + x: 1635415200000, + value: 51, + y: '', + }, + { + x: 1635458400000, + value: 30, + y: '', + }, + { + x: 1635501600000, + value: 54, + y: '', + }, + { + x: 1635544800000, + value: 20, + y: '', + }, + { + x: 1635588000000, + value: 59, + y: '', + }, + { + x: 1635631200000, + value: 30, + y: '', + }, + { + x: 1635678000000, + value: 58, + y: '', + }, + { + x: 1635721200000, + value: 34, + y: '', + }, + { + x: 1635764400000, + value: 58, + y: '', + }, + { + x: 1635807600000, + value: 41, + y: '', + }, + { + x: 1635850800000, + value: 48, + y: '', + }, + { + x: 1635894000000, + value: 37, + y: '', + }, + { + x: 1635937200000, + value: 44, + y: '', + }, + { + x: 1635980400000, + value: 37, + y: '', + }, + { + x: 1636023600000, + value: 62, + y: '', + }, + { + x: 1636066800000, + value: 16, + y: '', + }, + { + x: 1635026400000, + value: 18, + y: 'gz', + }, + { + x: 1635069600000, + value: 37, + y: 'gz', + }, + { + x: 1635112800000, + value: 8, + y: 'gz', + }, + { + x: 1635156000000, + value: 27, + y: 'gz', + }, + { + x: 1635199200000, + value: 13, + y: 'gz', + }, + { + x: 1635242400000, + value: 33, + y: 'gz', + }, + { + x: 1635285600000, + value: 13, + y: 'gz', + }, + { + x: 1635328800000, + value: 22, + y: 'gz', + }, + { + x: 1635372000000, + value: 20, + y: 'gz', + }, + { + x: 1635415200000, + value: 36, + y: 'gz', + }, + { + x: 1635458400000, + value: 12, + y: 'gz', + }, + { + x: 1635501600000, + value: 31, + y: 'gz', + }, + { + x: 1635544800000, + value: 9, + y: 'gz', + }, + { + x: 1635588000000, + value: 29, + y: 'gz', + }, + { + x: 1635631200000, + value: 18, + y: 'gz', + }, + { + x: 1635678000000, + value: 22, + y: 'gz', + }, + { + x: 1635721200000, + value: 15, + y: 'gz', + }, + { + x: 1635764400000, + value: 25, + y: 'gz', + }, + { + x: 1635807600000, + value: 12, + y: 'gz', + }, + { + x: 1635850800000, + value: 25, + y: 'gz', + }, + { + x: 1635894000000, + value: 16, + y: 'gz', + }, + { + x: 1635937200000, + value: 28, + y: 'gz', + }, + { + x: 1635980400000, + value: 12, + y: 'gz', + }, + { + x: 1636023600000, + value: 20, + y: 'gz', + }, + { + x: 1636066800000, + value: 10, + y: 'gz', + }, + { + x: 1635026400000, + value: 9, + y: 'css', + }, + { + x: 1635069600000, + value: 24, + y: 'css', + }, + { + x: 1635112800000, + value: 9, + y: 'css', + }, + { + x: 1635156000000, + value: 38, + y: 'css', + }, + { + x: 1635199200000, + value: 11, + y: 'css', + }, + { + x: 1635242400000, + value: 33, + y: 'css', + }, + { + x: 1635285600000, + value: 18, + y: 'css', + }, + { + x: 1635328800000, + value: 18, + y: 'css', + }, + { + x: 1635372000000, + value: 6, + y: 'css', + }, + { + x: 1635415200000, + value: 26, + y: 'css', + }, + { + x: 1635458400000, + value: 8, + y: 'css', + }, + { + x: 1635501600000, + value: 23, + y: 'css', + }, + { + x: 1635544800000, + value: 10, + y: 'css', + }, + { + x: 1635588000000, + value: 28, + y: 'css', + }, + { + x: 1635631200000, + value: 16, + y: 'css', + }, + { + x: 1635678000000, + value: 21, + y: 'css', + }, + { + x: 1635721200000, + value: 17, + y: 'css', + }, + { + x: 1635764400000, + value: 19, + y: 'css', + }, + { + x: 1635807600000, + value: 16, + y: 'css', + }, + { + x: 1635850800000, + value: 24, + y: 'css', + }, + { + x: 1635894000000, + value: 14, + y: 'css', + }, + { + x: 1635937200000, + value: 26, + y: 'css', + }, + { + x: 1635980400000, + value: 11, + y: 'css', + }, + { + x: 1636023600000, + value: 24, + y: 'css', + }, + { + x: 1636066800000, + value: 14, + y: 'css', + }, + { + x: 1635026400000, + value: 28, + y: '__other__', + }, + { + x: 1635069600000, + value: 41, + y: '__other__', + }, + { + x: 1635112800000, + value: 17, + y: '__other__', + }, + { + x: 1635156000000, + value: 36, + y: '__other__', + }, + { + x: 1635199200000, + value: 16, + y: '__other__', + }, + { + x: 1635242400000, + value: 35, + y: '__other__', + }, + { + x: 1635285600000, + value: 21, + y: '__other__', + }, + { + x: 1635328800000, + value: 55, + y: '__other__', + }, + { + x: 1635372000000, + value: 19, + y: '__other__', + }, + { + x: 1635415200000, + value: 45, + y: '__other__', + }, + { + x: 1635458400000, + value: 23, + y: '__other__', + }, + { + x: 1635501600000, + value: 49, + y: '__other__', + }, + { + x: 1635544800000, + value: 26, + y: '__other__', + }, + { + x: 1635588000000, + value: 49, + y: '__other__', + }, + { + x: 1635631200000, + value: 32, + y: '__other__', + }, + { + x: 1635678000000, + value: 33, + y: '__other__', + }, + { + x: 1635721200000, + value: 25, + y: '__other__', + }, + { + x: 1635764400000, + value: 38, + y: '__other__', + }, + { + x: 1635807600000, + value: 34, + y: '__other__', + }, + { + x: 1635850800000, + value: 29, + y: '__other__', + }, + { + x: 1635894000000, + value: 26, + y: '__other__', + }, + { + x: 1635937200000, + value: 40, + y: '__other__', + }, + { + x: 1635980400000, + value: 22, + y: '__other__', + }, + { + x: 1636023600000, + value: 42, + y: '__other__', + }, + { + x: 1636066800000, + value: 7, + y: '__other__', + }, + ], +}; + +/** @internal */ +export const DATA_8: HeatmapDataSets = { + interval: { type: 'fixed', unit: 'm', value: 60 }, + xFormatter: (value: string | number) => { + return DateTime.fromMillis(value as number).toFormat('HH:mm', { timeZone: 'Europe/Rome' }); + }, + timeZone: 'Europe/Rome', + data: [ + { + x: 1616799600000, + value: 150, + y: 'jpg', + }, + { + x: 1616803200000, + value: 1, + y: 'jpg', + }, + { + x: 1616806800000, + value: 2, + y: 'jpg', + }, + { + x: 1616810400000, + value: 9, + y: 'jpg', + }, + { + x: 1616814000000, + value: 11, + y: 'jpg', + }, + { + x: 1616817600000, + value: 19, + y: 'jpg', + }, + { + x: 1616821200000, + value: 29, + y: 'jpg', + }, + { + x: 1616824800000, + value: 54, + y: 'jpg', + }, + { + x: 1616828400000, + value: 74, + y: 'jpg', + }, + { + x: 1616832000000, + value: 91, + y: 'jpg', + }, + { + x: 1616835600000, + value: 118, + y: 'jpg', + }, + { + x: 1616839200000, + value: 109, + y: 'jpg', + }, + { + x: 1616842800000, + value: 123, + y: 'jpg', + }, + { + x: 1616846400000, + value: 97, + y: 'jpg', + }, + { + x: 1616850000000, + value: 87, + y: 'jpg', + }, + { + x: 1616853600000, + value: 83, + y: 'jpg', + }, + { + x: 1616857200000, + value: 48, + y: 'jpg', + }, + { + x: 1616860800000, + value: 35, + y: 'jpg', + }, + { + x: 1616864400000, + value: 30, + y: 'jpg', + }, + { + x: 1616868000000, + value: 8, + y: 'jpg', + }, + { + x: 1616871600000, + value: 8, + y: 'jpg', + }, + { + x: 1616875200000, + value: 5, + y: 'jpg', + }, + { + x: 1616878800000, + value: 5, + y: 'jpg', + }, + { + x: 1616882400000, + value: 3, + y: 'jpg', + }, + { + x: 1616886000000, + value: 2, + y: 'jpg', + }, + { + x: 1616889600000, + value: 0, + y: 'jpg', + }, + { + x: 1616893200000, + value: 19, + y: 'jpg', + }, + { + x: 1616896800000, + value: 16, + y: 'jpg', + }, + { + x: 1616900400000, + value: 20, + y: 'jpg', + }, + { + x: 1616904000000, + value: 45, + y: 'jpg', + }, + { + x: 1616907600000, + value: 33, + y: 'jpg', + }, + { + x: 1616911200000, + value: 84, + y: 'jpg', + }, + { + x: 1616914800000, + value: 90, + y: 'jpg', + }, + { + x: 1616918400000, + value: 94, + y: 'jpg', + }, + { + x: 1616922000000, + value: 129, + y: 'jpg', + }, + { + x: 1616925600000, + value: 108, + y: 'jpg', + }, + { + x: 1616929200000, + value: 103, + y: 'jpg', + }, + { + x: 1616932800000, + value: 98, + y: 'jpg', + }, + { + x: 1616936400000, + value: 76, + y: 'jpg', + }, + { + x: 1616940000000, + value: 59, + y: 'jpg', + }, + { + x: 1616943600000, + value: 45, + y: 'jpg', + }, + { + x: 1616947200000, + value: 30, + y: 'jpg', + }, + { + x: 1616950800000, + value: 11, + y: 'jpg', + }, + { + x: 1616954400000, + value: 12, + y: 'jpg', + }, + { + x: 1616958000000, + value: 7, + y: 'jpg', + }, + { + x: 1616961600000, + value: 1, + y: 'jpg', + }, + { + x: 1616965200000, + value: 2, + y: 'jpg', + }, + { + x: 1616968800000, + value: 1, + y: 'jpg', + }, + { + x: 1616972400000, + value: 3, + y: 'jpg', + }, + { + x: 1616976000000, + value: 2, + y: 'jpg', + }, + { + x: 1616979600000, + value: 9, + y: 'jpg', + }, + { + x: 1616983200000, + value: 9, + y: 'jpg', + }, + { + x: 1616986800000, + value: 30, + y: 'jpg', + }, + { + x: 1616990400000, + value: 28, + y: 'jpg', + }, + { + x: 1616994000000, + value: 71, + y: 'jpg', + }, + { + x: 1616997600000, + value: 89, + y: 'jpg', + }, + { + x: 1617001200000, + value: 78, + y: 'jpg', + }, + { + x: 1617004800000, + value: 109, + y: 'jpg', + }, + { + x: 1617008400000, + value: 106, + y: 'jpg', + }, + { + x: 1617012000000, + value: 131, + y: 'jpg', + }, + { + x: 1617015600000, + value: 100, + y: 'jpg', + }, + { + x: 1617019200000, + value: 93, + y: 'jpg', + }, + { + x: 1617022800000, + value: 67, + y: 'jpg', + }, + { + x: 1617026400000, + value: 52, + y: 'jpg', + }, + { + x: 1617030000000, + value: 46, + y: 'jpg', + }, + { + x: 1617033600000, + value: 24, + y: 'jpg', + }, + { + x: 1617037200000, + value: 13, + y: 'jpg', + }, + { + x: 1617040800000, + value: 4, + y: 'jpg', + }, + { + x: 1617044400000, + value: 5, + y: 'jpg', + }, + { + x: 1617048000000, + value: 0, + y: 'jpg', + }, + { + x: 1617051600000, + value: 2, + y: 'jpg', + }, + { + x: 1617055200000, + value: 150, + y: 'jpg', + }, + { + x: 1616810400000, + value: 2, + y: 'css', + }, + { + x: 1616814000000, + value: 5, + y: 'css', + }, + { + x: 1616817600000, + value: 5, + y: 'css', + }, + { + x: 1616821200000, + value: 8, + y: 'css', + }, + { + x: 1616824800000, + value: 15, + y: 'css', + }, + { + x: 1616828400000, + value: 16, + y: 'css', + }, + { + x: 1616832000000, + value: 31, + y: 'css', + }, + { + x: 1616835600000, + value: 22, + y: 'css', + }, + { + x: 1616839200000, + value: 26, + y: 'css', + }, + { + x: 1616842800000, + value: 32, + y: 'css', + }, + { + x: 1616846400000, + value: 20, + y: 'css', + }, + { + x: 1616850000000, + value: 20, + y: 'css', + }, + { + x: 1616853600000, + value: 19, + y: 'css', + }, + { + x: 1616857200000, + value: 11, + y: 'css', + }, + { + x: 1616860800000, + value: 10, + y: 'css', + }, + { + x: 1616864400000, + value: 6, + y: 'css', + }, + { + x: 1616868000000, + value: 2, + y: 'css', + }, + { + x: 1616871600000, + value: 0, + y: 'css', + }, + { + x: 1616875200000, + value: 3, + y: 'css', + }, + { + x: 1616878800000, + value: 3, + y: 'css', + }, + { + x: 1616882400000, + value: 1, + y: 'css', + }, + { + x: 1616886000000, + value: 0, + y: 'css', + }, + { + x: 1616889600000, + value: 0, + y: 'css', + }, + { + x: 1616893200000, + value: 2, + y: 'css', + }, + { + x: 1616896800000, + value: 0, + y: 'css', + }, + { + x: 1616900400000, + value: 7, + y: 'css', + }, + { + x: 1616904000000, + value: 7, + y: 'css', + }, + { + x: 1616907600000, + value: 23, + y: 'css', + }, + { + x: 1616911200000, + value: 16, + y: 'css', + }, + { + x: 1616914800000, + value: 19, + y: 'css', + }, + { + x: 1616918400000, + value: 27, + y: 'css', + }, + { + x: 1616922000000, + value: 34, + y: 'css', + }, + { + x: 1616925600000, + value: 24, + y: 'css', + }, + { + x: 1616929200000, + value: 22, + y: 'css', + }, + { + x: 1616932800000, + value: 23, + y: 'css', + }, + { + x: 1616936400000, + value: 23, + y: 'css', + }, + { + x: 1616940000000, + value: 9, + y: 'css', + }, + { + x: 1616943600000, + value: 7, + y: 'css', + }, + { + x: 1616947200000, + value: 9, + y: 'css', + }, + { + x: 1616950800000, + value: 2, + y: 'css', + }, + { + x: 1616954400000, + value: 1, + y: 'css', + }, + { + x: 1616958000000, + value: 3, + y: 'css', + }, + { + x: 1616961600000, + value: 1, + y: 'css', + }, + { + x: 1616965200000, + value: 1, + y: 'css', + }, + { + x: 1616968800000, + value: 0, + y: 'css', + }, + { + x: 1616972400000, + value: 1, + y: 'css', + }, + { + x: 1616976000000, + value: 3, + y: 'css', + }, + { + x: 1616979600000, + value: 0, + y: 'css', + }, + { + x: 1616983200000, + value: 1, + y: 'css', + }, + { + x: 1616986800000, + value: 5, + y: 'css', + }, + { + x: 1616990400000, + value: 13, + y: 'css', + }, + { + x: 1616994000000, + value: 9, + y: 'css', + }, + { + x: 1616997600000, + value: 16, + y: 'css', + }, + { + x: 1617001200000, + value: 25, + y: 'css', + }, + { + x: 1617004800000, + value: 26, + y: 'css', + }, + { + x: 1617008400000, + value: 36, + y: 'css', + }, + { + x: 1617012000000, + value: 27, + y: 'css', + }, + { + x: 1617015600000, + value: 29, + y: 'css', + }, + { + x: 1617019200000, + value: 20, + y: 'css', + }, + { + x: 1617022800000, + value: 25, + y: 'css', + }, + { + x: 1617026400000, + value: 14, + y: 'css', + }, + { + x: 1617030000000, + value: 10, + y: 'css', + }, + { + x: 1617033600000, + value: 3, + y: 'css', + }, + { + x: 1617037200000, + value: 5, + y: 'css', + }, + { + x: 1617040800000, + value: 3, + y: 'css', + }, + { + x: 1617044400000, + value: 1, + y: 'css', + }, + { + x: 1617048000000, + value: 3, + y: 'css', + }, + { + x: 1616799600000, + value: 3, + y: 'png', + }, + { + x: 1616803200000, + value: 1, + y: 'png', + }, + { + x: 1616806800000, + value: 1, + y: 'png', + }, + { + x: 1616810400000, + value: 2, + y: 'png', + }, + { + x: 1616814000000, + value: 2, + y: 'png', + }, + { + x: 1616817600000, + value: 5, + y: 'png', + }, + { + x: 1616821200000, + value: 6, + y: 'png', + }, + { + x: 1616824800000, + value: 16, + y: 'png', + }, + { + x: 1616828400000, + value: 12, + y: 'png', + }, + { + x: 1616832000000, + value: 21, + y: 'png', + }, + { + x: 1616835600000, + value: 11, + y: 'png', + }, + { + x: 1616839200000, + value: 15, + y: 'png', + }, + { + x: 1616842800000, + value: 25, + y: 'png', + }, + { + x: 1616846400000, + value: 14, + y: 'png', + }, + { + x: 1616850000000, + value: 17, + y: 'png', + }, + { + x: 1616853600000, + value: 16, + y: 'png', + }, + { + x: 1616857200000, + value: 8, + y: 'png', + }, + { + x: 1616860800000, + value: 7, + y: 'png', + }, + { + x: 1616864400000, + value: 1, + y: 'png', + }, + { + x: 1616868000000, + value: 1, + y: 'png', + }, + { + x: 1616871600000, + value: 2, + y: 'png', + }, + { + x: 1616875200000, + value: 0, + y: 'png', + }, + { + x: 1616878800000, + value: 0, + y: 'png', + }, + { + x: 1616882400000, + value: 0, + y: 'png', + }, + { + x: 1616886000000, + value: 0, + y: 'png', + }, + { + x: 1616889600000, + value: 0, + y: 'png', + }, + { + x: 1616893200000, + value: 2, + y: 'png', + }, + { + x: 1616896800000, + value: 2, + y: 'png', + }, + { + x: 1616900400000, + value: 3, + y: 'png', + }, + { + x: 1616904000000, + value: 5, + y: 'png', + }, + { + x: 1616907600000, + value: 8, + y: 'png', + }, + { + x: 1616911200000, + value: 9, + y: 'png', + }, + { + x: 1616914800000, + value: 7, + y: 'png', + }, + { + x: 1616918400000, + value: 24, + y: 'png', + }, + { + x: 1616922000000, + value: 22, + y: 'png', + }, + { + x: 1616925600000, + value: 19, + y: 'png', + }, + { + x: 1616929200000, + value: 19, + y: 'png', + }, + { + x: 1616932800000, + value: 12, + y: 'png', + }, + { + x: 1616936400000, + value: 7, + y: 'png', + }, + { + x: 1616940000000, + value: 7, + y: 'png', + }, + { + x: 1616943600000, + value: 3, + y: 'png', + }, + { + x: 1616947200000, + value: 4, + y: 'png', + }, + { + x: 1616950800000, + value: 3, + y: 'png', + }, + { + x: 1616954400000, + value: 1, + y: 'png', + }, + { + x: 1616958000000, + value: 2, + y: 'png', + }, + { + x: 1616961600000, + value: 1, + y: 'png', + }, + { + x: 1616965200000, + value: 0, + y: 'png', + }, + { + x: 1616968800000, + value: 1, + y: 'png', + }, + { + x: 1616972400000, + value: 0, + y: 'png', + }, + { + x: 1616976000000, + value: 0, + y: 'png', + }, + { + x: 1616979600000, + value: 2, + y: 'png', + }, + { + x: 1616983200000, + value: 2, + y: 'png', + }, + { + x: 1616986800000, + value: 2, + y: 'png', + }, + { + x: 1616990400000, + value: 4, + y: 'png', + }, + { + x: 1616994000000, + value: 8, + y: 'png', + }, + { + x: 1616997600000, + value: 7, + y: 'png', + }, + { + x: 1617001200000, + value: 17, + y: 'png', + }, + { + x: 1617004800000, + value: 16, + y: 'png', + }, + { + x: 1617008400000, + value: 16, + y: 'png', + }, + { + x: 1617012000000, + value: 24, + y: 'png', + }, + { + x: 1617015600000, + value: 16, + y: 'png', + }, + { + x: 1617019200000, + value: 17, + y: 'png', + }, + { + x: 1617022800000, + value: 11, + y: 'png', + }, + { + x: 1617026400000, + value: 10, + y: 'png', + }, + { + x: 1617030000000, + value: 7, + y: 'png', + }, + { + x: 1617033600000, + value: 6, + y: 'png', + }, + { + x: 1617037200000, + value: 1, + y: 'png', + }, + { + x: 1616810400000, + value: 1, + y: '__other__', + }, + { + x: 1616814000000, + value: 3, + y: '__other__', + }, + { + x: 1616817600000, + value: 2, + y: '__other__', + }, + { + x: 1616821200000, + value: 3, + y: '__other__', + }, + { + x: 1616824800000, + value: 6, + y: '__other__', + }, + { + x: 1616828400000, + value: 11, + y: '__other__', + }, + { + x: 1616832000000, + value: 19, + y: '__other__', + }, + { + x: 1616835600000, + value: 21, + y: '__other__', + }, + { + x: 1616839200000, + value: 18, + y: '__other__', + }, + { + x: 1616842800000, + value: 11, + y: '__other__', + }, + { + x: 1616846400000, + value: 17, + y: '__other__', + }, + { + x: 1616850000000, + value: 16, + y: '__other__', + }, + { + x: 1616853600000, + value: 17, + y: '__other__', + }, + { + x: 1616857200000, + value: 13, + y: '__other__', + }, + { + x: 1616860800000, + value: 4, + y: '__other__', + }, + { + x: 1616864400000, + value: 6, + y: '__other__', + }, + { + x: 1616868000000, + value: 4, + y: '__other__', + }, + { + x: 1616871600000, + value: 1, + y: '__other__', + }, + { + x: 1616875200000, + value: 1, + y: '__other__', + }, + { + x: 1616878800000, + value: 0, + y: '__other__', + }, + { + x: 1616882400000, + value: 0, + y: '__other__', + }, + { + x: 1616886000000, + value: 1, + y: '__other__', + }, + { + x: 1616889600000, + value: 0, + y: '__other__', + }, + { + x: 1616893200000, + value: 3, + y: '__other__', + }, + { + x: 1616896800000, + value: 1, + y: '__other__', + }, + { + x: 1616900400000, + value: 3, + y: '__other__', + }, + { + x: 1616904000000, + value: 5, + y: '__other__', + }, + { + x: 1616907600000, + value: 9, + y: '__other__', + }, + { + x: 1616911200000, + value: 9, + y: '__other__', + }, + { + x: 1616914800000, + value: 13, + y: '__other__', + }, + { + x: 1616918400000, + value: 13, + y: '__other__', + }, + { + x: 1616922000000, + value: 26, + y: '__other__', + }, + { + x: 1616925600000, + value: 23, + y: '__other__', + }, + { + x: 1616929200000, + value: 15, + y: '__other__', + }, + { + x: 1616932800000, + value: 11, + y: '__other__', + }, + { + x: 1616936400000, + value: 14, + y: '__other__', + }, + { + x: 1616940000000, + value: 9, + y: '__other__', + }, + { + x: 1616943600000, + value: 1, + y: '__other__', + }, + { + x: 1616947200000, + value: 0, + y: '__other__', + }, + { + x: 1616950800000, + value: 4, + y: '__other__', + }, + { + x: 1616954400000, + value: 0, + y: '__other__', + }, + { + x: 1616958000000, + value: 1, + y: '__other__', + }, + { + x: 1616961600000, + value: 0, + y: '__other__', + }, + { + x: 1616965200000, + value: 0, + y: '__other__', + }, + { + x: 1616968800000, + value: 0, + y: '__other__', + }, + { + x: 1616972400000, + value: 1, + y: '__other__', + }, + { + x: 1616976000000, + value: 0, + y: '__other__', + }, + { + x: 1616979600000, + value: 2, + y: '__other__', + }, + { + x: 1616983200000, + value: 0, + y: '__other__', + }, + { + x: 1616986800000, + value: 5, + y: '__other__', + }, + { + x: 1616990400000, + value: 1, + y: '__other__', + }, + { + x: 1616994000000, + value: 10, + y: '__other__', + }, + { + x: 1616997600000, + value: 11, + y: '__other__', + }, + { + x: 1617001200000, + value: 16, + y: '__other__', + }, + { + x: 1617004800000, + value: 14, + y: '__other__', + }, + { + x: 1617008400000, + value: 17, + y: '__other__', + }, + { + x: 1617012000000, + value: 18, + y: '__other__', + }, + { + x: 1617015600000, + value: 12, + y: '__other__', + }, + { + x: 1617019200000, + value: 12, + y: '__other__', + }, + { + x: 1617022800000, + value: 11, + y: '__other__', + }, + { + x: 1617026400000, + value: 8, + y: '__other__', + }, + { + x: 1617030000000, + value: 9, + y: '__other__', + }, + { + x: 1617033600000, + value: 0, + y: '__other__', + }, + { + x: 1617037200000, + value: 0, + y: '__other__', + }, + { + x: 1617040800000, + value: 2, + y: '__other__', + }, + { + x: 1617044400000, + value: 1, + y: '__other__', + }, + ], +}; + +/** @internal */ +export const DATA_9: HeatmapDataSets = { + // adding 6 hours to the max to include the last data interval that belongs to the max + 60m bucket + domain: { min: 1616799600000 - 5 * 60 * 60 * 1000, max: 1617055200000 + 6 * 60 * 60 * 1000 }, + interval: { type: 'fixed', unit: 'm', value: 60 }, + xFormatter: (value: string | number) => { + return DateTime.fromMillis(value as number).toFormat('HH:mm', { timeZone: 'Europe/Rome' }); + }, + timeZone: 'Europe/Rome', + data: DATA_8.data, +}; diff --git a/storybook/stories/heatmap/1_basic.story.tsx b/storybook/stories/heatmap/1_basic.story.tsx index 4804c093d5..b20cc36bb3 100644 --- a/storybook/stories/heatmap/1_basic.story.tsx +++ b/storybook/stories/heatmap/1_basic.story.tsx @@ -24,8 +24,8 @@ import { ElementClickListener, } from '@elastic/charts'; import { Config } from '@elastic/charts/src/chart_types/heatmap/layout/types/config_types'; -import { SWIM_LANE_DATA } from '@elastic/charts/src/utils/data_samples/test_anomaly_swim_lane'; +import { DATA_6 } from '../../../packages/charts/src/utils/data_samples/test_dataset_heatmap'; import { useBaseTheme } from '../../use_base_theme'; export const Example = () => { @@ -76,6 +76,7 @@ export const Example = () => { return niceTimeFormatter([1572825600000, 1572912000000])(value, { timeZone: 'UTC' }); }, }, + timeZone: DATA_6.timeZone, }), [], ); @@ -109,7 +110,7 @@ export const Example = () => { showLegend legendPosition="right" brushAxis="both" - xDomain={{ min: 1572825600000, max: 1572912000000, minInterval: 1800000 }} + xDomain={{ min: 1572825600000, max: 1572912000000 }} debugState={debugState} baseTheme={useBaseTheme()} onBrushEnd={(e) => { @@ -130,13 +131,13 @@ export const Example = () => { { start: 75, end: Infinity, color: '#fe5050' }, ], }} - data={SWIM_LANE_DATA.map((v) => ({ ...v, time: v.time * 1000 }))} - xAccessor={(d) => d.time} - yAccessor={(d) => d.laneLabel} - valueAccessor={(d) => d.value} + data={DATA_6.data} + xAccessor="x" + yAccessor="y" + valueAccessor="value" valueFormatter={(d) => `${Number(d.toFixed(2))}℃`} ySortPredicate="numAsc" - xScaleType={ScaleType.Time} + xScale={{ type: ScaleType.Time, interval: DATA_6.interval }} config={config} highlightedData={persistCellsSelection ? selection : undefined} /> diff --git a/storybook/stories/heatmap/3_time.story.tsx b/storybook/stories/heatmap/3_time.story.tsx index 5586a3dcdf..7923756a90 100644 --- a/storybook/stories/heatmap/3_time.story.tsx +++ b/storybook/stories/heatmap/3_time.story.tsx @@ -14,8 +14,8 @@ import { Chart, Heatmap, RecursivePartial, ScaleType, Settings, HeatmapConfig } import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils'; const rng = getRandomNumberGenerator(); -const start = DateTime.fromISO('2021-03-27T20:00:00'); -const end = DateTime.fromISO('2021-03-28T11:00:00'); +const start = DateTime.fromISO('2021-03-27T20:00:00', { zone: 'UTC' }); +const end = DateTime.fromISO('2021-03-28T11:00:00', { zone: 'UTC' }); const data = [...new Array(14)].flatMap((d, i) => { return [ [start.plus({ hour: i }).toMillis(), 'cat A', rng(-5, 5)], @@ -56,9 +56,12 @@ export const Example = () => { }, xAxisLabel: { formatter: (value: string | number) => { - return DateTime.fromMillis(value as number).toFormat('HH:mm:ss', { timeZone: 'UTC' }); + return DateTime.fromMillis(value as number) + .setZone('UTC') + .toFormat('HH:mm:ss'); }, }, + timeZone: 'UTC', }), [], ); @@ -84,12 +87,11 @@ export const Example = () => { { valueAccessor={(d) => d[2]} valueFormatter={(d) => d.toFixed(2)} ySortPredicate="numAsc" - xScaleType={ScaleType.Time} + xScale={{ + type: ScaleType.Time, + interval: { + type: 'fixed', + unit: 'h', + value: 1, + }, + }} config={config} /> diff --git a/storybook/stories/heatmap/4_test_time_snap.story.tsx b/storybook/stories/heatmap/4_test_time_snap.story.tsx new file mode 100644 index 0000000000..8860f4c47a --- /dev/null +++ b/storybook/stories/heatmap/4_test_time_snap.story.tsx @@ -0,0 +1,104 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { select } from '@storybook/addon-knobs'; +import { extent } from 'd3-array'; +import { DateTime } from 'luxon'; +import React from 'react'; + +import { Chart, Heatmap, ScaleType, Settings } from '@elastic/charts'; + +import { ColorBand } from '../../../packages/charts/src/chart_types/heatmap/specs/heatmap'; +import { + DATA_1, + DATA_2, + DATA_3, + DATA_4, + DATA_5, + DATA_6, + DATA_7, + DATA_8, + DATA_9, +} from '../../../packages/charts/src/utils/data_samples/test_dataset_heatmap'; + +const datasets = [DATA_1, DATA_2, DATA_3, DATA_4, DATA_5, DATA_6, DATA_7, DATA_8, DATA_9]; + +export const Example = () => { + const datasetIndex = select('dataset', [1, 2, 3, 4, 5, 6, 7, 8, 9], 1) - 1; + const dataset = datasets[datasetIndex]; + const [min = 0, max = 0] = extent(dataset.data, (d) => d.value); + const colors = ['#ca0020', '#f4a582', '#cecece', '#92c5de', '#0571b0']; + const numOfColors = colors.length; + const interval = (max - min) / numOfColors; + + const colorBands = Array.from({ length: numOfColors }, (d, i) => ({ + color: colors[i], + start: Math.floor(min + i * interval), + end: i === numOfColors - 1 ? Infinity : Math.ceil(min + (i + 1) * interval), + })); + const [tMin = 0, tMax = 0] = extent(dataset.data, (d) => d.x); + return ( + <> +
+ {DateTime.fromMillis(tMin).toISO()} to {DateTime.fromMillis(tMax).toISO()}{' '} + {`${dataset.interval.type}: ${dataset.interval.value}${dataset.interval.unit} points:${dataset.data.length}`} +
+ + + `[${s}, ${e})`, + }} + data={dataset.data} + xAccessor="x" + yAccessor="y" + valueAccessor="value" + ySortPredicate="numAsc" + xScale={{ + type: ScaleType.Time, + interval: dataset.interval, + }} + config={{ + grid: { + cellHeight: { + min: 20, + }, + stroke: { + width: 1, + color: 'black', + }, + }, + cell: { + maxWidth: 'fill', + maxHeight: 3, + label: { + visible: true, + }, + border: { + stroke: 'transparent', + strokeWidth: 0, + }, + }, + yAxisLabel: { + visible: true, + width: 'auto', + padding: { left: 10, right: 10 }, + }, + xAxisLabel: { + formatter: dataset.xFormatter, + }, + timeZone: dataset.timeZone ?? 'Europe/Rome', + }} + /> + + + ); +}; diff --git a/storybook/stories/heatmap/heatmap.stories.tsx b/storybook/stories/heatmap/heatmap.stories.tsx index 4d7781aab1..3b942b137d 100644 --- a/storybook/stories/heatmap/heatmap.stories.tsx +++ b/storybook/stories/heatmap/heatmap.stories.tsx @@ -13,3 +13,4 @@ export default { export { Example as basic } from './1_basic.story'; export { Example as time } from './3_time.story'; export { Example as categorical } from './2_categorical.story'; +export { Example as timeSnap } from './4_test_time_snap.story';