FilesExpand file tree

 master

/

SparklineHistogram.tsx

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

58 lines (49 loc) · 1.48 KB

 master

/

SparklineHistogram.tsx

Top

File metadata and controls

• Code
• Blame

58 lines (49 loc) · 1.48 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

import React from "react";

import { HistogramDataType } from "../parsers/featureViewSummaryStatistics";

import { extent } from "d3-array";

import { scaleLinear } from "d3";

import { EuiBadge, useEuiTheme } from "@elastic/eui";

interface SparklineHistogramProps {

data: HistogramDataType;

}

const SparklineHistogram = ({ data }: SparklineHistogramProps) => {

const width = 100;

const height = 24;

const yMax = height - 2;

const { euiTheme } = useEuiTheme();

if (data.length > 0) {

const x0Extent = extent(data, (d) => d.x0) as [number, number];

const xScale = scaleLinear()

.domain(x0Extent)

.range([0, width - width / data.length]);

const yExtent = extent(data, (d) => d.count) as [number, number];

const yScale = scaleLinear().domain(yExtent).range([0, yMax]);

return (

<svg width={width} height={height}>

<rect

x={0}

y={height - 1}

width={width}

height={1}

fill={euiTheme.colors.mediumShade}

/>

{data.map((d) => {

const barHeight = yScale(d.count);

return (

<rect

key={d.x0}

width={width / data.length}

height={barHeight}

y={yMax - barHeight}

x={xScale(d.x0)}

fill={euiTheme.colors.primary}

/>

);

})}

</svg>

);

} else {

return <EuiBadge color="warning">histogram n/a</EuiBadge>;

}

};

export default SparklineHistogram;