import React from 'react'
import ReactApexChart from 'react-apexcharts'
import ApexCharts from 'apexcharts'
import './styles.css'
// This demo also loads: https://cdn.jsdelivr.net/npm/apexcharts/dist/unit-shapes.js
// Every button maps to one plotOptions.unit patch. The shapes come from
// apexcharts/unit-shapes, which registers each one under its own name; packed
// and columns are built in. Nothing else changes between views, which is the
// point: the dots keep their identity, colour and size, so the crowd re-forms
// instead of being rebuilt.
var VIEWS = {
droplet: { layout: 'custom', positions: 'droplet' },
tree: { layout: 'custom', positions: 'tree' },
leaf: { layout: 'custom', positions: 'leaf' },
sun: { layout: 'custom', positions: 'sun' },
flame: { layout: 'custom', positions: 'flame' },
fish: { layout: 'custom', positions: 'fish' },
house: { layout: 'custom', positions: 'house' },
battery: { layout: 'custom', positions: 'battery' },
rocket: { layout: 'custom', positions: 'rocket' },
bulb: { layout: 'custom', positions: 'bulb' },
flask: { layout: 'custom', positions: 'flask' },
car: { layout: 'custom', positions: 'car' },
plane: { layout: 'custom', positions: 'plane' },
human: { layout: 'custom', positions: 'human' },
group: { layout: 'custom', positions: 'group' },
target: { layout: 'custom', positions: 'target' },
trophy: { layout: 'custom', positions: 'trophy' },
moneybag: { layout: 'custom', positions: 'moneybag' },
funnel: { layout: 'custom', positions: 'funnel' },
shield: { layout: 'custom', positions: 'shield' },
gear: { layout: 'custom', positions: 'gear' },
robot: { layout: 'custom', positions: 'robot' },
heart: { layout: 'custom', positions: 'heart' },
pyramid: { layout: 'custom', positions: 'pyramid' },
star: { layout: 'custom', positions: 'star' },
arrow: { layout: 'custom', positions: 'arrow' },
crown: { layout: 'custom', positions: 'crown' },
cross: { layout: 'custom', positions: 'cross' },
bolt: { layout: 'custom', positions: 'bolt' },
globe: { layout: 'custom', positions: 'globe' },
pin: { layout: 'custom', positions: 'pin' },
mountain: { layout: 'custom', positions: 'mountain' },
check: { layout: 'custom', positions: 'check' },
wifi: { layout: 'custom', positions: 'wifi' },
pulse: { layout: 'custom', positions: 'pulse' },
xmark: { layout: 'custom', positions: 'xmark' },
percent: { layout: 'custom', positions: 'percent' },
question: { layout: 'custom', positions: 'question' },
spiral: { layout: 'custom', positions: 'spiral' },
packed: { layout: 'packed', positions: undefined },
columns: { layout: 'columns', positions: undefined },
}
function setActive(id) {
document
.querySelectorAll('.actions button[data-view]')
.forEach(function (btn) {
btn.classList.toggle('active', btn.getAttribute('data-view') === id)
})
}
function wireGallery(chart) {
var current = 'heart'
setActive(current)
document
.querySelectorAll('.actions button[data-view]')
.forEach(function (btn) {
btn.addEventListener('click', function () {
var id = btn.getAttribute('data-view')
if (id === current) return
current = id
setActive(current)
chart.updateOptions({ plotOptions: { unit: VIEWS[id] } })
})
})
}
const ApexChart = () => {
const [state, setState] = React.useState({
series: [576, 168, 42, 34],
options: {
chart: {
id: 'shapeGallery',
type: 'unit',
height: 460,
animations: {
enabled: true,
speed: 900,
},
},
labels: ['Engineering', 'Sales', 'Marketing', 'Operations'],
colors: ['#008FFB', '#00B8D9', '#FFAB00', '#FF4560'],
plotOptions: {
unit: {
layout: 'custom',
positions: 'heart',
// Keyed by global order, so the crowd migrates across a relayout instead
// of each category fading in and out on the spot.
transition: 'flow',
clusterLabels: {
show: false,
},
},
},
legend: {
position: 'bottom',
},
},
})
React.useEffect(() => {
// The react-apexcharts wrapper owns the render, so reach the live instance by
// its chart.id, then wire the controls.
const timer = window.setInterval(() => {
const chart = ApexCharts.getChartByID('shapeGallery')
if (!chart) return
window.clearInterval(timer)
wireGallery(chart)
}, 50)
return () => window.clearInterval(timer)
}, [])
return (
<div>
<div className="wrap">
<h1>One crowd, thirty-nine layouts the chart does not ship</h1>
<p>
820 dots, one per employee. A unit layout is a plain function of every
mark and the plot rect, returning positions, so a shape can be
registered from outside the library. Every shape below comes from
apexcharts/unit-shapes; the last row are strokes, where the dots pack
a thickened line rather than an outline, which is how a shape with no
interior joins in. Switch views: the same dots flow into the next
arrangement, keeping their identity, colour and size, rather than the
chart being torn down and rebuilt.
</p>
<div className="actions">
<span className="cat">Nature</span>
<button data-view="droplet">Droplet</button>
<button data-view="tree">Tree</button>
<button data-view="leaf">Leaf</button>
<button data-view="sun">Sun</button>
<button data-view="flame">Flame</button>
<button data-view="fish">Fish</button>
</div>
<div className="actions">
<span className="cat">Objects</span>
<button data-view="house">House</button>
<button data-view="battery">Battery</button>
<button data-view="rocket">Rocket</button>
<button data-view="bulb">Bulb</button>
<button data-view="flask">Flask</button>
<button data-view="car">Car</button>
<button data-view="plane">Plane</button>
</div>
<div className="actions">
<span className="cat">People</span>
<button data-view="human">Human</button>
<button data-view="group">Group</button>
</div>
<div className="actions">
<span className="cat">Business</span>
<button data-view="target">Target</button>
<button data-view="trophy">Trophy</button>
<button data-view="moneybag">Moneybag</button>
<button data-view="funnel">Funnel</button>
</div>
<div className="actions">
<span className="cat">Technology</span>
<button data-view="shield">Shield</button>
<button data-view="gear">Gear</button>
<button data-view="robot">Robot</button>
</div>
<div className="actions">
<span className="cat">Symbols</span>
<button data-view="heart">Heart</button>
<button data-view="pyramid">Pyramid</button>
<button data-view="star">Star</button>
<button data-view="arrow">Arrow</button>
<button data-view="crown">Crown</button>
<button data-view="cross">Cross</button>
<button data-view="bolt">Bolt</button>
</div>
<div className="actions">
<span className="cat">Geography</span>
<button data-view="globe">Globe</button>
<button data-view="pin">Pin</button>
<button data-view="mountain">Mountain</button>
</div>
<div className="actions">
<span className="cat">Strokes</span>
<button data-view="check">Check</button>
<button data-view="wifi">Wifi</button>
<button data-view="pulse">Pulse</button>
<button data-view="xmark">Xmark</button>
<button data-view="percent">Percent</button>
<button data-view="question">Question</button>
<button data-view="spiral">Spiral</button>
</div>
<div className="actions builtin">
<span className="cat">Built in</span>
<button data-view="packed">Packed</button>
<button data-view="columns">Columns</button>
</div>
<div className="chart-wrap">
<div id="chart">
<ReactApexChart
options={state.options}
series={state.series}
type="unit"
height={460}
/>
</div>
</div>
<p className="note">
Same data, same dots. Only the position provider changes.
</p>
</div>
</div>
)
}
export default ApexChart