6.2.22 • Published 8 months ago

@cloudflare/chart-hierarchical v6.2.22

Weekly downloads
-
License
BSD-3-Clause
Repository
-
Last release
8 months ago

@cloudflare/chart-hierarchical

Cloudflare hierarchical interactive charts

Installation

Installation with yarn is recommended

$ yarn add @cloudflare/chart-hierarchical

Usage

import React from 'react';

import { createComponent } from '@cloudflare/style-container';
import { variables as theme } from '@cloudflare/style-const';
import { scaleOrdinal } from 'd3-scale';

import {
  PartitionChart,
  SunburstChart,
  TreemapChart,
  CirclePackChart
} from '../../src';

const CHILDREN_PROB_DECAY = 0.4; // per level
const MAX_CHILDREN = 10;
const MAX_VALUE = 100;

function genRandomData(id = 'root', parentId = '', probOfChildren = 1.2) {
  if (Math.random() < probOfChildren) {
    // Fork
    return [
      { id, parentId },
      ...[].concat(
        ...[...Array(Math.round(Math.random() * MAX_CHILDREN)).keys()].map(i =>
          genRandomData(`${id}.${i}`, id, probOfChildren - CHILDREN_PROB_DECAY)
        )
      )
    ];
  }

  // Leaf
  return [{ id, parentId, value: Math.round(Math.random() * MAX_VALUE) }];
}

const TooltipContent = (d, node) => (
  <div>
    <div>
      Self value: <em>{d.value || 0}</em> units
    </div>
    <div>
      Sub-tree sum: <em>{node.value || 0}</em> units
    </div>
    {!!node.parent && (
      <div>
        Parent sum ({nameOf(node.parent.data)}):{' '}
        <em>{node.parent.value || 0}</em> units
      </div>
    )}
  </div>
);

const catColor = scaleOrdinal(theme.colors.categorical);
const nameOf = d => d.id.replace(/^root./g, '');

const commonProps = {
  data: genRandomData(),
  height: 420,
  sizeDimension: 'value',
  colorDimension: d =>
    d.id === 'root' ? 'lightgrey' : catColor(d.id.split('.')[1]), // Color by top level index
  label: nameOf,
  subLabel: (d, node) => `${node.value || 0} units`,
  tooltipTitle: (_, node) => {
    const nodeChain = [];
    let curNode = node;
    do {
      nodeChain.unshift(curNode);
    } while ((curNode = curNode.parent));

    return nodeChain.map(nameOf).join(' > ');
  },
  tooltipContent: TooltipContent,
  highlightTerms: '',
  onHover: d => console.info('Hover state:', d)
};

const Cell = createComponent(({ n }) => ({
  display: 'inline-block',
  width: `calc(${Math.floor(100 / n)}% - 10px)`,
  margin: 5
}));

const ViewComponent = () => (
  <div>
    <div>
      <Cell n={3}>
        <TreemapChart {...commonProps} />
      </Cell>
      <Cell n={3}>
        <CirclePackChart {...commonProps} />
      </Cell>
      <Cell n={3}>
        <SunburstChart {...commonProps} />
      </Cell>
    </div>
    <div>
      <Cell n={3}>
        <PartitionChart orientation="horizontal" {...commonProps} />
      </Cell>
      <Cell n={3}>
        <PartitionChart orientation="flame" {...commonProps} />
      </Cell>
      <Cell n={3}>
        <PartitionChart orientation="icicle" {...commonProps} />
      </Cell>
    </div>
  </div>
);

export default ViewComponent;
6.2.22

8 months ago

6.2.20

9 months ago

6.2.21

9 months ago

6.2.19

9 months ago

6.2.17

10 months ago

6.2.18

10 months ago

6.2.15

10 months ago

6.2.16

10 months ago

6.2.13

10 months ago

6.2.14

10 months ago

6.2.10

11 months ago

6.2.11

11 months ago

6.2.12

11 months ago

6.2.5

1 year ago

6.2.7

1 year ago

6.2.6

1 year ago

6.2.9

12 months ago

6.2.8

1 year ago

6.2.4

1 year ago

6.2.3

1 year ago

6.2.2

1 year ago

6.2.1

1 year ago

6.2.0

1 year ago

6.1.0

1 year ago

6.0.8

1 year ago

6.0.7

1 year ago

6.0.6

1 year ago

6.0.5

1 year ago

6.0.4

1 year ago

6.0.3

1 year ago

6.0.2

1 year ago

6.0.1

2 years ago

5.0.20

2 years ago

5.0.21

2 years ago

5.0.22

2 years ago

5.0.23

2 years ago

5.0.24

2 years ago

5.0.25

2 years ago

5.0.26

2 years ago

5.0.27

2 years ago

5.0.28

2 years ago

5.0.29

2 years ago

5.0.11

2 years ago

5.0.12

2 years ago

5.0.13

2 years ago

5.0.14

2 years ago

5.0.15

2 years ago

5.0.16

2 years ago

5.0.17

2 years ago

5.0.18

2 years ago

5.0.19

2 years ago

6.0.0

2 years ago

5.0.10

2 years ago

5.0.9

2 years ago

5.0.8

2 years ago

5.0.7

2 years ago

5.0.6

2 years ago

5.0.5

2 years ago

5.0.4

2 years ago

5.0.3

2 years ago

5.0.2

2 years ago

5.0.1

2 years ago

5.0.0

3 years ago

4.0.0

3 years ago

3.7.5

3 years ago

3.7.4

3 years ago

3.7.3

3 years ago

3.7.2

3 years ago

3.7.6

3 years ago

3.6.351

3 years ago

3.6.352

3 years ago

3.6.353

3 years ago

3.6.354

3 years ago

3.6.350

3 years ago

3.6.348

3 years ago

3.6.349

3 years ago

3.6.344

3 years ago

3.6.345

3 years ago

3.6.346

3 years ago

3.6.347

3 years ago

3.6.355

3 years ago

3.6.356

3 years ago

3.6.357

3 years ago

3.7.1

3 years ago

3.7.0

3 years ago

3.6.330

3 years ago

3.6.331

3 years ago

3.6.332

3 years ago

3.6.327

3 years ago

3.6.328

3 years ago

3.6.329

3 years ago

3.6.340

3 years ago

3.6.341

3 years ago

3.6.342

3 years ago

3.6.343

3 years ago

3.6.337

3 years ago

3.6.338

3 years ago

3.6.339

3 years ago

3.6.333

3 years ago

3.6.334

3 years ago

3.6.335

3 years ago

3.6.336

3 years ago

3.6.326

3 years ago

3.6.322

3 years ago

3.6.323

3 years ago

3.6.324

3 years ago

3.6.325

3 years ago

3.6.310

3 years ago

3.6.320

3 years ago

3.6.321

3 years ago

3.6.315

3 years ago

3.6.316

3 years ago

3.6.317

3 years ago

3.6.318

3 years ago

3.6.311

3 years ago

3.6.312

3 years ago

3.6.313

3 years ago

3.6.314

3 years ago

3.6.319

3 years ago

3.6.309

3 years ago

3.6.308

3 years ago

3.6.307

3 years ago

3.6.306

3 years ago

3.6.305

3 years ago

3.6.304

3 years ago

3.6.303

3 years ago

3.6.302

3 years ago

3.6.301

3 years ago

3.6.300

3 years ago

3.6.299

3 years ago

3.6.298

3 years ago

3.6.297

3 years ago

3.6.296

3 years ago

3.6.295

4 years ago

3.6.294

4 years ago

3.6.293

4 years ago

3.6.292

4 years ago

3.6.291

4 years ago

3.6.290

4 years ago

3.6.289

4 years ago

3.6.288

4 years ago

3.6.287

4 years ago

3.6.286

4 years ago

3.6.285

4 years ago

3.6.284

4 years ago

3.6.283

4 years ago

3.6.282

4 years ago

3.6.281

4 years ago

3.6.280

4 years ago

3.6.279

4 years ago

3.6.278

4 years ago

3.6.277

4 years ago

3.6.276

4 years ago

3.6.275

4 years ago

3.6.274

4 years ago

3.6.273

4 years ago

3.6.272

4 years ago

3.6.271

4 years ago

3.6.270

4 years ago

3.6.269

4 years ago

3.6.268

4 years ago

3.6.267

4 years ago

3.6.266

4 years ago

3.6.265

4 years ago

3.6.264

4 years ago

3.6.263

4 years ago

3.6.262

4 years ago

3.6.261

4 years ago

3.6.260

4 years ago

3.6.259

4 years ago

3.6.258

4 years ago

3.6.257

4 years ago

3.6.256

4 years ago

3.6.255

4 years ago

3.6.254

4 years ago

3.6.253

4 years ago

3.6.252

4 years ago

3.6.251

4 years ago

3.6.250

4 years ago

3.6.249

4 years ago

3.6.248

4 years ago

3.6.247

4 years ago

3.6.246

4 years ago

3.6.245

4 years ago

3.6.244

4 years ago

3.6.243

4 years ago

3.6.242

4 years ago

3.6.241

4 years ago

3.6.240

4 years ago

3.6.239

4 years ago

3.6.238

4 years ago

3.6.237

4 years ago

3.6.236

4 years ago

3.6.235

4 years ago

3.6.234

4 years ago

3.6.233

4 years ago

3.6.231

4 years ago

3.6.230

4 years ago

3.6.229

4 years ago

3.6.228

4 years ago

3.6.227

4 years ago

3.6.226

4 years ago

3.6.225

4 years ago

3.6.224

4 years ago

3.6.223

4 years ago

3.6.222

4 years ago

3.6.221

4 years ago

3.6.220

4 years ago

3.6.219

4 years ago

3.6.218

4 years ago

3.6.217

4 years ago

3.6.216

4 years ago

3.6.215

4 years ago

3.6.214

4 years ago

3.6.213

4 years ago

3.6.212

4 years ago

3.6.211

4 years ago

3.6.210

4 years ago

3.6.209

4 years ago

3.6.208

4 years ago

3.6.207

4 years ago

3.6.206

4 years ago

3.6.205

4 years ago

3.6.204

4 years ago

3.6.203

4 years ago

3.6.202

4 years ago

3.6.201

4 years ago

3.6.200

4 years ago

3.6.199

4 years ago

3.6.198

4 years ago

3.6.197

4 years ago

3.6.196

4 years ago

3.6.195

4 years ago

3.6.194

5 years ago

3.6.193

5 years ago

3.6.192

5 years ago

3.6.191

5 years ago

3.6.190

5 years ago

3.6.189

5 years ago

3.6.188

5 years ago

3.6.187

5 years ago

3.6.186

5 years ago

3.6.185

5 years ago

3.6.184

5 years ago

3.6.183

5 years ago

3.6.182

5 years ago

3.6.181

5 years ago

3.6.180

5 years ago

3.6.179

5 years ago

3.6.178

5 years ago

3.6.177

5 years ago

3.6.176

5 years ago

3.6.175

5 years ago

3.6.174

5 years ago

3.6.173

5 years ago

3.6.172

5 years ago

3.6.171

5 years ago

3.6.170

5 years ago

3.6.169

5 years ago

3.6.168

5 years ago

3.6.167

5 years ago

3.6.166

5 years ago

3.6.165

5 years ago

3.6.164

5 years ago

3.6.163

5 years ago

3.6.162

5 years ago

3.6.161

5 years ago

3.6.160

5 years ago

3.6.159

5 years ago

3.6.158

5 years ago

3.6.157

5 years ago

3.6.156

5 years ago

3.6.155

5 years ago

3.6.154

5 years ago

3.6.153

5 years ago

3.6.152

5 years ago

3.6.151

5 years ago

3.6.150

5 years ago

3.6.149

5 years ago

3.6.148

5 years ago

3.6.147

5 years ago

3.6.146

5 years ago

3.6.145

5 years ago

3.6.144

5 years ago

3.6.143

5 years ago

3.6.142

5 years ago

3.6.141

5 years ago

3.6.140

5 years ago

3.6.139

5 years ago

3.6.138

5 years ago

3.6.137

5 years ago

3.6.136

5 years ago

3.6.135

5 years ago

3.6.134

5 years ago

3.6.133

5 years ago

3.6.132

5 years ago

3.6.131

5 years ago

3.6.130

5 years ago

3.6.129

5 years ago

3.6.128

5 years ago

3.6.127

5 years ago

3.6.126

5 years ago

3.6.125

5 years ago

3.6.124

5 years ago

3.6.123

5 years ago

3.6.122

5 years ago

3.6.121

5 years ago

3.6.120

5 years ago

3.6.119

5 years ago

3.6.118

5 years ago

3.6.117

5 years ago

3.6.116

5 years ago

3.6.115

5 years ago

3.6.114

5 years ago

3.6.113

5 years ago

3.6.112

5 years ago

3.6.111

5 years ago

3.6.110

5 years ago

3.6.109

5 years ago

3.6.108

5 years ago

3.6.107

5 years ago

3.6.106

5 years ago

3.6.105

5 years ago

3.6.103

5 years ago

3.6.102

5 years ago

3.6.101

5 years ago

3.6.100

5 years ago

3.6.99

5 years ago

3.6.98

5 years ago

3.6.97

5 years ago

3.6.96

5 years ago

3.6.95

5 years ago

3.6.94

5 years ago

3.6.93

5 years ago

3.6.92

5 years ago

3.6.91

5 years ago

3.6.90

5 years ago

3.6.89

5 years ago

3.6.88

5 years ago

3.6.87

5 years ago

3.6.86

5 years ago

3.6.85

5 years ago

3.6.84

5 years ago

3.6.83

5 years ago

3.6.82

5 years ago

3.6.81

5 years ago

3.6.80

5 years ago

3.6.79

5 years ago

3.6.78

5 years ago

3.6.77

5 years ago

3.6.76

5 years ago

3.6.75

5 years ago

3.6.74

5 years ago

3.6.73

5 years ago

3.6.68

5 years ago

3.6.67

5 years ago

3.6.66

5 years ago

3.6.65

5 years ago

3.6.49

5 years ago

3.6.48

5 years ago

3.6.47

5 years ago

3.6.46

5 years ago

3.6.45

5 years ago

3.6.44

5 years ago

3.6.43

5 years ago

3.6.42

5 years ago

3.6.41

5 years ago

3.6.40

5 years ago

3.6.39

5 years ago

3.6.38

5 years ago

3.6.37

5 years ago

3.6.36

5 years ago

3.6.34

5 years ago

3.6.33

5 years ago

3.6.32

5 years ago

3.6.31

5 years ago

3.6.30

5 years ago

3.6.29

5 years ago

3.6.27

5 years ago

3.6.26

5 years ago

3.6.25

5 years ago

3.6.24

5 years ago

3.6.22

5 years ago

3.6.21

5 years ago

3.6.20

5 years ago

3.6.19

5 years ago

3.6.18

5 years ago

3.6.17

6 years ago

3.6.16

6 years ago

3.6.15

6 years ago

3.6.14

6 years ago

3.6.13

6 years ago

3.6.12

6 years ago

3.6.10

6 years ago

3.6.9

6 years ago

3.6.8

6 years ago

3.6.7

6 years ago

3.6.6

6 years ago

3.6.5

6 years ago

3.6.4

6 years ago

3.6.3

6 years ago

3.6.2

6 years ago

3.6.0

6 years ago

3.4.12

6 years ago

3.4.11

6 years ago

3.4.8

6 years ago

3.4.7

6 years ago

3.4.6

6 years ago

3.4.5

6 years ago

3.4.4

6 years ago

3.4.3

6 years ago

3.4.1

6 years ago

3.4.0

6 years ago

3.3.34

6 years ago

3.3.33

6 years ago

3.3.32

6 years ago

3.3.31

6 years ago

3.3.30

6 years ago

3.3.29

6 years ago

3.3.28

6 years ago

3.3.27

6 years ago

3.3.26

6 years ago

3.3.25

6 years ago

3.3.24

6 years ago

3.3.23

6 years ago

3.3.22

6 years ago

3.3.21

6 years ago

3.3.20

6 years ago

3.3.19

6 years ago

3.3.18

6 years ago

3.3.17

6 years ago

3.3.16

6 years ago

3.3.15

6 years ago

3.3.14

6 years ago

3.3.13

6 years ago

3.3.12

6 years ago

3.3.11

6 years ago

3.3.10

6 years ago

3.3.9

6 years ago

3.3.8

6 years ago

3.3.7

6 years ago

3.3.6

6 years ago

3.3.5

6 years ago

3.3.4

6 years ago

3.3.3

6 years ago

3.3.2

6 years ago

3.3.1

6 years ago

3.3.0

6 years ago

3.2.61

6 years ago

3.2.60

6 years ago

3.2.59

6 years ago

3.2.58

6 years ago

3.2.57

6 years ago

3.2.56

6 years ago

3.2.55

6 years ago

3.2.54

6 years ago

3.2.53

6 years ago

3.2.52

6 years ago

3.2.51

6 years ago

3.2.50

6 years ago

3.2.49

6 years ago

3.2.48

6 years ago

3.2.47

6 years ago

3.2.46

6 years ago

3.2.45

6 years ago

3.2.44

6 years ago

3.2.43

6 years ago

3.2.42

6 years ago

3.2.41

6 years ago

3.2.40

6 years ago

3.2.39

6 years ago

3.2.38

6 years ago

3.2.37

6 years ago

3.2.36

6 years ago

3.2.35

6 years ago

3.2.34

6 years ago

3.2.33

6 years ago

3.2.32

6 years ago

3.2.31

6 years ago

3.2.30

6 years ago

3.2.29

6 years ago

3.2.28

6 years ago

3.2.27

6 years ago

3.2.26

6 years ago

3.2.25

6 years ago

3.2.24

6 years ago

3.2.23

6 years ago

3.2.22

6 years ago

3.2.21

6 years ago

3.2.20

6 years ago

3.2.19

6 years ago

3.2.18

6 years ago

3.2.17

6 years ago

3.2.16

6 years ago

3.2.15

6 years ago

3.2.14

6 years ago

3.2.13

6 years ago

3.2.12

6 years ago

3.2.11

6 years ago

3.2.10

6 years ago

3.2.9

6 years ago

3.2.8

6 years ago

3.2.7

6 years ago

3.2.6

6 years ago

3.2.5

6 years ago

3.2.4

6 years ago

3.2.3

7 years ago

3.2.2

7 years ago

3.2.1

7 years ago

3.2.0

7 years ago

3.1.5

7 years ago

3.1.4

7 years ago

3.1.3

7 years ago

3.1.2

7 years ago

3.1.1

7 years ago

3.1.0

7 years ago

3.0.24

7 years ago

3.0.23

7 years ago

3.0.22

7 years ago

3.0.21

7 years ago

3.0.20

7 years ago

3.0.19

7 years ago

3.0.18

7 years ago

3.0.17

7 years ago

3.0.16

7 years ago

3.0.15

7 years ago

3.0.14

7 years ago

3.0.13

7 years ago

3.0.12

7 years ago

3.0.11

7 years ago

3.0.10

7 years ago

3.0.9

7 years ago

3.0.8

7 years ago

3.0.7

7 years ago

3.0.6

7 years ago

3.0.5

7 years ago

3.0.4

7 years ago

3.0.3

7 years ago

3.0.2

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

2.2.8

7 years ago

2.2.7

7 years ago

2.2.6

7 years ago

2.2.5

7 years ago

2.2.4

7 years ago

2.2.3

7 years ago

2.2.2

7 years ago

2.2.1

7 years ago

2.2.0

7 years ago

2.1.11

7 years ago

2.1.10

7 years ago

2.1.9

7 years ago

2.1.8

7 years ago

2.1.7

7 years ago

2.1.5

7 years ago

2.1.4

7 years ago

2.1.3

7 years ago

2.1.2

7 years ago

2.1.1

7 years ago

2.1.0

7 years ago

2.0.0

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.1

7 years ago