6.2.22 • Published 11 months ago

@cloudflare/chart-hierarchical v6.2.22

Weekly downloads
-
License
BSD-3-Clause
Repository
-
Last release
11 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

11 months ago

6.2.20

12 months ago

6.2.21

12 months ago

6.2.19

12 months ago

6.2.17

1 year ago

6.2.18

1 year ago

6.2.15

1 year ago

6.2.16

1 year ago

6.2.13

1 year ago

6.2.14

1 year ago

6.2.10

1 year ago

6.2.11

1 year ago

6.2.12

1 year ago

6.2.5

1 year ago

6.2.7

1 year ago

6.2.6

1 year ago

6.2.9

1 year 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

2 years ago

6.0.7

2 years ago

6.0.6

2 years ago

6.0.5

2 years ago

6.0.4

2 years ago

6.0.3

2 years ago

6.0.2

2 years 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

4 years ago

3.6.320

3 years ago

3.6.321

3 years ago

3.6.315

4 years ago

3.6.316

4 years ago

3.6.317

4 years ago

3.6.318

4 years ago

3.6.311

4 years ago

3.6.312

4 years ago

3.6.313

4 years ago

3.6.314

4 years ago

3.6.319

4 years ago

3.6.309

4 years ago

3.6.308

4 years ago

3.6.307

4 years ago

3.6.306

4 years ago

3.6.305

4 years ago

3.6.304

4 years ago

3.6.303

4 years ago

3.6.302

4 years ago

3.6.301

4 years ago

3.6.300

4 years ago

3.6.299

4 years ago

3.6.298

4 years ago

3.6.297

4 years ago

3.6.296

4 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

5 years ago

3.6.213

5 years ago

3.6.212

5 years ago

3.6.211

5 years ago

3.6.210

5 years ago

3.6.209

5 years ago

3.6.208

5 years ago

3.6.207

5 years ago

3.6.206

5 years ago

3.6.205

5 years ago

3.6.204

5 years ago

3.6.203

5 years ago

3.6.202

5 years ago

3.6.201

5 years ago

3.6.200

5 years ago

3.6.199

5 years ago

3.6.198

5 years ago

3.6.197

5 years ago

3.6.196

5 years ago

3.6.195

5 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

6 years ago

3.6.84

6 years ago

3.6.83

6 years ago

3.6.82

6 years ago

3.6.81

6 years ago

3.6.80

6 years ago

3.6.79

6 years ago

3.6.78

6 years ago

3.6.77

6 years ago

3.6.76

6 years ago

3.6.75

6 years ago

3.6.74

6 years ago

3.6.73

6 years ago

3.6.68

6 years ago

3.6.67

6 years ago

3.6.66

6 years ago

3.6.65

6 years ago

3.6.49

6 years ago

3.6.48

6 years ago

3.6.47

6 years ago

3.6.46

6 years ago

3.6.45

6 years ago

3.6.44

6 years ago

3.6.43

6 years ago

3.6.42

6 years ago

3.6.41

6 years ago

3.6.40

6 years ago

3.6.39

6 years ago

3.6.38

6 years ago

3.6.37

6 years ago

3.6.36

6 years ago

3.6.34

6 years ago

3.6.33

6 years ago

3.6.32

6 years ago

3.6.31

6 years ago

3.6.30

6 years ago

3.6.29

6 years ago

3.6.27

6 years ago

3.6.26

6 years ago

3.6.25

6 years ago

3.6.24

6 years ago

3.6.22

6 years ago

3.6.21

6 years ago

3.6.20

6 years ago

3.6.19

6 years ago

3.6.18

6 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

7 years ago

3.2.14

7 years ago

3.2.13

7 years ago

3.2.12

7 years ago

3.2.11

7 years ago

3.2.10

7 years ago

3.2.9

7 years ago

3.2.8

7 years ago

3.2.7

7 years ago

3.2.6

7 years ago

3.2.5

7 years ago

3.2.4

7 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