Skip to content

Instantly share code, notes, and snippets.

@brightloudnoise

brightloudnoise/index.js

Last active November 23, 2017 02:08
Show Gist options
  • Save brightloudnoise/49a22ee8cec5b68d7d890c5dbcbed2be to your computer and use it in GitHub Desktop.
Save brightloudnoise/49a22ee8cec5b68d7d890c5dbcbed2be to your computer and use it in GitHub Desktop.
Download ZIP
LegendOrdinal
Raw
index.js
import React from "react";
import { Pie } from "@vx/shape";
import { Group } from "@vx/group";
import { scaleOrdinal } from "@vx/scale";
import { LegendOrdinal } from "@vx/legend";
//import data from "./CategoryByDay.json";
const data = [
{
"Category": "Category Name 1",
"Total": 643401
},
{
"Category": "Category Name 2",
"Total": 1062500
},
{
"Category": "Category Name 3",
"Total": 670000
}
]
function Label({ x, y, children }) {
return (
<text fill="black" textAnchor="middle" x={x} y={y} dy=".33em" fontSize={14}>
{children}
</text>
);
}
export default ({
title,
width,
height,
events = false,
margin = {
top: 30,
left: 20,
right: 20,
bottom: 30,
},
}) => {
if (width < 10) return null;
const radius = Math.min(width, height) / 2;
const color = scaleOrdinal({
domain: data.Category,
range: [
"#87cefa",
"#d4ea62",
"#d56464",
],
});
return (
<div>
<h4>{title}</h4>
<svg width={width} height={height}>
<Group top={radius} left={width / 2}>
<Pie
data={data}
pieValue={d => d.Total}
outerRadius={radius - radius / 10}
innerRadius={radius - radius / 1.8}
fill={function(d) {
return color(d.index);
}}
cornerRadius={0}
padAngle={0}
centroid={(centroid, arc) => {
const [x, y] = centroid;
const { startAngle, endAngle } = arc;
if (endAngle - startAngle < 0.1) return null;
return (
<Label fontSize={10} x={x} y={y}>
{arc.data.Category}
</Label>
);
}}
/>
</Group>
</svg>
<div
style={{
fontSize: '14px',
}}
>
<LegendOrdinal
scale={color}
direction="column"
labelMargin="0"
labelFormat={label => `${label}`}
/>
</div>
</div>
);
};
Raw
index1.js
import React from "react";
import { Pie } from "@vx/shape";
import { Group } from "@vx/group";
import { scaleOrdinal } from "@vx/scale";
import { LegendOrdinal } from "@vx/legend";
//import data from "./CategoryByDay.json";
const data = [
{
"Category": "Category Name 1",
"Total": 643401
},
{
"Category": "Category Name 2",
"Total": 1062500
},
{
"Category": "Category Name 3",
"Total": 670000
}
]
function Label({ x, y, children }) {
return (
<text fill="black" textAnchor="middle" x={x} y={y} dy=".33em" fontSize={14}>
{children}
</text>
);
}
export default ({
title,
width,
height,
events = false,
margin = {
top: 30,
left: 20,
right: 20,
bottom: 30,
},
}) => {
if (width < 10) return null;∏
const radius = Math.min(width, height) / 2;
const color = scaleOrdinal({
domain: data,
range: [
"#87cefa",
"#d4ea62",
"#d56464",
],
});
return (
<div>
<h4>{title}</h4>
<svg width={width} height={height}>
<Group top={radius} left={width / 2}>
<Pie
data={data}
pieValue={d => d.Total}
outerRadius={radius - radius / 10}
innerRadius={radius - radius / 1.8}
fill={function(d) {
return color(d.index);
}}
cornerRadius={0}
padAngle={0}
centroid={(centroid, arc) => {
const [x, y] = centroid;
const { startAngle, endAngle } = arc;
if (endAngle - startAngle < 0.1) return null;
return (
<Label fontSize={10} x={x} y={y}>
{arc.data.Category}
</Label>
);
}}
/>
</Group>
</svg>
<div
style={{
fontSize: '14px',
}}
>
<LegendOrdinal
scale={color}
direction="column"
labelMargin="0"
labelFormat={label => label.Category}
/>
</div>
</div>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment