Created
November 23, 2017 02:11
-
-
Save brightloudnoise/65c6e71c54ff96fdb91dc8a38d718fcc to your computer and use it in GitHub Desktop.
legend trouble
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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