-
Notifications
You must be signed in to change notification settings - Fork 114
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(partition): waffle chart (#1255)
- Loading branch information
Showing
15 changed files
with
277 additions
and
39 deletions.
There are no files selected for viewing
Binary file added
BIN
+22.6 KB
...ual-tests-for-all-stories-waffle-alpha-simple-visually-looks-correct-1-snap.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
packages/charts/src/chart_types/partition_chart/layout/utils/waffle.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /* | ||
| * 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 { Part } from '../../../../common/text_utils'; | ||
| import { CHILDREN_KEY, HierarchyOfArrays } from './group_by_rollup'; | ||
|
|
||
| // 10 x 10 grid for 100 cells ie. one cell is 1% | ||
| const rowCount = 10; | ||
| const columnCount = 10; | ||
|
|
||
| /** @internal */ | ||
| export function waffle( | ||
| tree: HierarchyOfArrays, | ||
| totalValue: number, | ||
| { | ||
| x0: outerX0, | ||
| y0: outerY0, | ||
| width: outerWidth, | ||
| height: outerHeight, | ||
| }: { x0: number; y0: number; width: number; height: number }, | ||
| ): Array<Part> { | ||
| const size = Math.min(outerWidth, outerHeight); | ||
| const widthOffset = Math.max(0, outerWidth - size) / 2; | ||
| const heightOffset = Math.max(0, outerHeight - size) / 2; | ||
| const rowHeight = size / rowCount; | ||
| const columnWidth = size / columnCount; | ||
| const cellCount = rowCount * columnCount; | ||
| const valuePerCell = totalValue / cellCount; | ||
| let valueSoFar = 0; | ||
| let lastIndex = 0; | ||
| const root = tree[0]; | ||
| return [ | ||
| { node: root, x0: 0, y0: 0, x1: size, y1: size }, | ||
| ...root[1][CHILDREN_KEY].flatMap((entry) => { | ||
| const [, { value }] = entry; | ||
| valueSoFar += value; | ||
| const toIndex = Math.round(valueSoFar / valuePerCell); | ||
| const cells = []; | ||
| for (let i = lastIndex; i < toIndex; i++) { | ||
| const columnIndex = i % columnCount; | ||
| const rowIndex = (i - columnIndex) / columnCount; | ||
| const x0 = outerX0 + widthOffset + columnIndex * columnWidth; | ||
| const y0 = outerY0 + heightOffset + rowIndex * rowHeight; | ||
| cells.push({ | ||
| node: entry, | ||
| x0, | ||
| y0, | ||
| x1: x0 + columnWidth, | ||
| y1: y0 + rowHeight, | ||
| }); | ||
| } | ||
| lastIndex = toIndex; | ||
| return cells; | ||
| }), | ||
| ]; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_wrapped_renderers.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| /* | ||
| * 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 { ShapeViewModel } from '../../layout/types/viewmodel_types'; | ||
|
|
||
| const MAX_PADDING_RATIO = 0.25; | ||
|
|
||
| /** @internal */ | ||
| export function renderWrappedPartitionCanvas2d( | ||
| ctx: CanvasRenderingContext2D, | ||
| dpr: number, | ||
| { | ||
| config: { sectorLineWidth: padding, width: containerWidth, height: containerHeight }, | ||
| quadViewModel, | ||
| diskCenter, | ||
| width: panelWidth, | ||
| height: panelHeight, | ||
| }: ShapeViewModel, | ||
| ) { | ||
| const width = containerWidth * panelWidth; | ||
| const height = containerHeight * panelHeight; | ||
| const cornerRatio = 0.2; | ||
|
|
||
| ctx.save(); | ||
| ctx.textAlign = 'left'; | ||
| ctx.textBaseline = 'middle'; | ||
| ctx.lineCap = 'round'; | ||
| ctx.lineJoin = 'round'; | ||
| ctx.scale(dpr, dpr); | ||
| ctx.translate(diskCenter.x, diskCenter.y); | ||
| ctx.clearRect(0, 0, width, height); | ||
|
|
||
| quadViewModel.forEach(({ fillColor, x0, x1, y0px: y0, y1px: y1 }) => { | ||
| if (y1 - y0 <= padding) return; | ||
|
|
||
| const fWidth = x1 - x0; | ||
| const fPadding = Math.min(padding, MAX_PADDING_RATIO * fWidth); | ||
| const paintedWidth = fWidth - fPadding; | ||
| const paintedHeight = y1 - y0 - padding; | ||
| const cornerRadius = 2 * cornerRatio * Math.min(paintedWidth, paintedHeight); | ||
| const halfRadius = cornerRadius / 2; | ||
|
|
||
| ctx.fillStyle = fillColor; | ||
| ctx.strokeStyle = fillColor; | ||
| ctx.lineWidth = cornerRadius; | ||
| ctx.beginPath(); | ||
| ctx.rect( | ||
| x0 + fPadding + halfRadius, | ||
| y0 + padding / 2 + halfRadius, | ||
| paintedWidth - cornerRadius, | ||
| paintedHeight - cornerRadius, | ||
| ); | ||
| ctx.fill(); | ||
| ctx.stroke(); | ||
| }); | ||
|
|
||
| ctx.restore(); | ||
| } |
Oops, something went wrong.