hexachart
v0.9.0
Published
Hexagon based data-viz ## Quick Run ```html <html> </head> <script src="https://unpkg.com/vue"></script> <script src="https://cdn.jsdelivr.net/npm/hexachart/dist/HexaChart.umd.min.js"></script> </head> <body> <div id="app" class="container"> <hexa-s
Downloads
32
Readme
hexachart
Hexagon based data-viz
Quick Run
<html>
</head>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/hexachart/dist/HexaChart.umd.min.js"></script>
</head>
<body>
<div id="app" class="container">
<hexa-stack-chart :data="hsData" :texts="hsTexts" :colors="hsColors"/>
</div>
<script>
// Comment the following line and uncomment the bellow line to use as plugin
Object.keys(HexaChart).forEach(name => {
Vue.component(name, HexaChart[name])
})
// Uncomment to use as a plugin
// const plugin = {
// install: Vue => {
// Object.keys(HexaChart).forEach(name => {
// Vue.component(name, HexaChart[name])
// })
// }
// }
// Vue.use(plugin)
const hsData = [52.5, 26.3, 21.2]
const hsColors = ['#666666', '#999999', '#cccccc']
const hsTexts = ['Alpha', 'Beta', 'Gamma']
const vm = new Vue({
data() {
return {
hsData,
hscolors,
hsTexts
}
},
}).$mount('#app')
</script>
</body>
</html>
In a Vue Project
npm i hexachart
...
</template>
<script>
import * as HexaChat from 'HexaChart'
export default {
name: 'Demo',
components: {
HexaChat.HexaStackChart,
...
},
...
Components
HexaStack
Minimal Example
<template>
<div>
<hexa-stack-chart
data="data"
:colors="colors"
:texts="texts"
/>
</div>
</template>
<script>
import { HexaStackChart } from 'HexaChart'
export default {
name: 'Demo',
components: {
HexaStackChart
},
data () {
return {
data: [52.5, 26.3, 21.2],
colors: ['#666666', '#999999', '#cccccc'],
texts: ['Alpha', 'Beta', 'Gamma']
}
}
}
</script>
<style>
/** Fluid & Fixed responsive **/
.hc-hexastack {
width: 170px;
height: 530px;
}
</style>
Props
| prop | type | default | description |
|------|------|---------|-------------|
| data | Array | [] | The main data, array of floats, e.g. [3.5, 4, 16]. The size
precede the data sum in priority, that means if size is greater than the data sum, the remaining cells will be filled by offColor
, while if it is lesser it will be truncated |
| colors | Array | ['#f67055'] | Colors to be used (reserve order with data) |
| texts | Array | [] |Array of strings that will be used as legend (reserve order with data) |
| offColor | String | '#757575' | default color for any inactive cell (hexagon) |
| size | Number | 100 | The Total number of cells |
| columns | Number | 5 | The number of columns |
| rows | Number | 20 | The number of rows |
| horizontal | Boolean | false | Either or not the hexastack is horizontal, default is vertical |
| animation | Boolean | true | Either or not use animation, if false no animation will play |
| animationDuration | Number | 3000 | Animation duration time in milliseconds, do not set to 0, use animation
false instead |
| animationOptions | Object |{delay: 0, easing: 'Bounce', easingEdge: 'Out'} | Object of tweenjs like animation |
| gradientSpread | Number | .5 | How much the gradient will spread, 0 for sharp separation|
HexaPie
Minimal Example
<template>
<div>
<hexa-pie-chart
:data="data"
:texts="texts"
/>
</div>
</template>
<script>
import HexaPieChart from 'HexaChart'
export default {
name: 'Demo',
components: {
HexaPieChart
},
data () {
return {
data: [32, 18],
texts: ['Alpha', 'Beta']
}
}
}
</script>
<style>
.hc-hexapie {
width: 316px;
height: 234px;
}
.hc-hexapie-text {
fill: #ffffff;
font-size: 20px;
}
.hc-hexapie-legend {
font-size: 20px;
fill: #999999;
}
</style>
Props
| prop | type | default | description |
|------|------|---------|-------------|
| data | Array | [] | The main data, array of floats, e.g. [3.5, 4, 16]. This data are represented as percentage on the pie chart |
| colors | Array | ['#666666', '#f56042'] | Colors to be used (reserve order with data) |
| texts | Array | Array of strings that will be used as legend (reserve order with data) |
| radius | Number | 116 | Radius of the pie |
| curve | Number | 0.8 | A float between 0..1 that indicate how rounded are the hexagon conrners, 0 would make it a circle and 1 a hexagon |
| animation | Boolean | true | Either or not use animation, if false no animation will play |
| animationDuration | Number | 3000 | Animation duration time in milliseconds, do not set to 0, use animation
false instead |
| animationOptions | Object |{delay: 0, easing: 'Bounce', easingEdge: 'Out'} | Object of tweenjs like animation |
HexaInception
Minimal Example
<template>
<div>
<hexa-inception-chart
:data="data"
:texts="texts"
:unit="unit"
/>
</div>
</template>
<script>
import HexaInceptionChart from 'HexaStack'
export default {
name: 'Demo',
components: {
HexaInceptionChart
},
data () {
return {
data: [107228, 76561],
texts: ['Alpha', 'Beta'],
unit: 'M'
}
}
}
</script>
<style>
.hc-hexainception {
width: 500px;
height: 500px;
}
</style>
Props
| prop | type | default | description |
|------|------|---------|-------------|
| data | Array | [] | The main data, Ordered array of floats, e.g. [16, 5, 2] |
| colors | Array | ['#666666', '#f56042'] | Colors to be used (reserve order with data) |
| texts | Array | Array of strings that will be used as legend (reserve order with data) |
| unit | String | '' | Unit used in the legend, if left empty it will be ommited |
| curve | Number | 0.8 | A float between 0..1 that indicate how rounded are the hexagon conrners, 0 would make it a circle and 1 a hexagon |
| animation | Boolean | true | Either or not use animation, if false no animation will play |
| animationDuration | Number | 3000 | Animation duration time in milliseconds, do not set to 0, use animation
false instead |
| animationOptions | Object |{delay: 0, easing: 'Bounce', easingEdge: 'Out'} | Object of tweenjs like animation |
HexaBubule
Minimal Example
<template>
<div>
<hexa-buble-chart
:data="data"
/>
</div>
</template>
<script>
import HexaBubleChart from 'HexaStack'
export default {
name: 'Demo',
components: {
HexaBubleChart
},
data () {
return {
data: [
{d: 30222 name: 'GrandPa1', id: 1, children: [
{d: 5600, name: 'Pa1_1', id: 11, children: [
{d: 130932 name: 'Kid1_1_1', id: 111},
{d: 89921 name: 'Kid1_1_2', id: 112},
...
]},
{d: 66554, name: 'Pa1_2', id: 12, children: [
...
]},
...
]},
...
]
}
}
}
</script>
<style>
.hc-hexabuble {
width: 100%;
height: 500px;
}
.hc-hexabuble-chart {
border: #000 solid 1px;
}
.hc-hexabuble-legend {
font-size: 16px;
fill: #999999;
}
</style>
Props
| prop | type | default | description |
|------|------|---------|-------------|
| data | Array | [] | The main data, One way bound Tree with leafs being on the format {d: 89921 name: 'name to be displayed', id: 1}
and parent having an additional children
attribute, which is an array of other nodes|
| colors* | undefined | undefined | not yet implemented |
| unit | String | '' | Unit used in the legend, if left empty it will be ommited |
| curve* | undefined | undefined | not yet implemented |
| animation | Boolean | true | Either or not use animation, if false no animation will play |
| animationDuration | Number | 3000 | Animation duration time in milliseconds, do not set to 0, use animation
false instead |
| animationOptions | Object |{delay: 0, easing: 'Bounce', easingEdge: 'Out'} | Object of tweenjs like animation |