Click on the buttons to cycle through donut styles.
Donuts are similar to pie charts, showing proportional data on nodes.
Donuts can have an unlimited number of segments.
See also
import React from "react";
import { createRoot } from "react-dom/client";
import mapValues from "lodash/mapValues";
import pickBy from "lodash/pickBy";
import { Chart } from "regraph";
import { style } from "@ci/theme/rg/js/storyStyles";
import "@ci/theme/rg/css/properties.css";
import "@ci/theme/rg/css/button.css";
export const Demo = () => <DonutStyle />;
const donutProps = {
border: {
values: [
undefined,
{ width: 2, color: style.colors.darkGrey },
{ width: 4, color: style.colors.charcoal },
],
label: "Border",
},
segments: {
values: [
[
{ ...style.primary2, size: 2 },
{ ...style.secondary2, size: 1 },
],
[
{ ...style.primary2, size: 2 },
{ ...style.secondary2, size: 2 },
{ ...style.tertiary2, size: 2 },
],
[
{ ...style.primary2, size: 2 },
{ ...style.secondary2, size: 2 },
{ ...style.tertiary2, size: 2 },
{ ...style.primary0, size: 2 },
],
[
{ ...style.primary2, size: 2 },
{ ...style.secondary2, size: 2 },
{ ...style.tertiary2, size: 2 },
{ ...style.primary0, size: 2 },
{ color: style.colors.midGrey, size: 2 },
],
],
label: "Segments",
},
width: { values: [undefined, 20, 40], label: "Width" },
};
class DonutStyle extends React.PureComponent {
constructor(props) {
super(props);
this.state = { ...mapValues(donutProps, () => 0), show: true };
}
update = (id) => {
const { [id]: index } = this.state;
const { [id]: property } = donutProps;
const { values } = property;
let result = index + 1;
if (result > values.length - 1) {
result = 0;
}
this.setState({ [id]: result });
};
toggleDonut = () => {
const { show } = this.state;
this.setState({ show: !show });
};
reset = () => {
this.setState({ ...mapValues(donutProps, () => 0), show: true });
};
render = () => {
const { show } = this.state;
const donut = pickBy(
mapValues(donutProps, (value, key) => {
const { [key]: index } = this.state;
return value.values[index || 0];
}),
(value) => value !== undefined
);
const node1 = { ...style.primary1 };
if (show) {
node1.donut = donut;
}
return (
<div style={{ width: "100%", height: "100%" }}>
<Chart
items={{ node1 }}
animation={{ animate: true, time: 250 }}
options={{ fit: "all", navigation: false, overview: false }}
/>
<div style={{ position: "absolute", top: 0, left: 0 }}>
<button type="button" onClick={this.reset}>
Reset
</button>
<button type="button" onClick={this.toggleDonut}>
{show ? "Hide" : "Show"}
</button>
{Object.keys(donutProps).map((key) => (
<button
type="button"
title={donutProps[key].label}
key={key}
onClick={() => this.update(key)}
>
{key}
</button>
))}
</div>
<pre className="properties">{JSON.stringify({ node1 }, null, 2)}</pre>
</div>
);
};
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>