Skip to content

Commit a24b6f7

Browse files
pollen8pollen8
authored
Merge pull request #5 from cognitivelogic/piecharts
Piecharts
2 parents 6d0a4e2 + b5aabce commit a24b6f7

19 files changed

+46041
-77439
lines changed

‎dist/index.js‎

Lines changed: 3 additions & 42172 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/examples.tsx‎

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as d3 from 'd3';
22
import * as React from 'react';
33
import * as ReactDOM from 'react-dom';
4-
import { Histogram, HorizontalHistogram, LineChart, ScatterPlot } from '../src';
4+
import { Histogram, HorizontalHistogram, LineChart, PieChart, ScatterPlot } from '../src';
55

66
const grid = {
77
x: {
@@ -21,26 +21,26 @@ const grid = {
2121
};
2222

2323
const data = {
24-
bins: ['1', '2', '3', '4'],
24+
bins: ['Data 1', 'Data 6', 'Data 3', 'Dat 4'],
2525
counts: [
2626
{
2727
borderColors: d3.schemeCategory20,
2828
colors: d3.schemeCategory20,
29-
data: [1, 2, 3, 4, 5],
29+
data: [1, 2, 3, 4],
3030
label: 'Data 1',
3131
},
3232
{
3333
borderColors: d3.schemeCategory20,
3434
colors: d3.schemeCategory20b,
35-
data: [3, 2, 1, 5],
35+
data: [13, 2, 1, 5],
3636
label: 'Data 2',
3737
},
3838
],
3939
grid,
4040
};
4141

4242
const data2 = {
43-
bins: ['1', '10', '25', '50', '75', '90', '99'],
43+
bins: ['bin 1', 'bin 2', 'bin 3', 'bin 4', 'bin 5', 'bin 9', 'bin 7'],
4444
counts: [
4545
{
4646
borderColors: ['red'],
@@ -50,6 +50,22 @@ const data2 = {
5050
],
5151
};
5252

53+
const data3 = {
54+
bins: ['bin 1', 'bin 2', 'bin 3'],
55+
counts: [
56+
{
57+
borderColors: ['red'],
58+
data: [100, 50, 40],
59+
label: 'Data 1',
60+
},
61+
{
62+
borderColors: ['red'],
63+
data: [32, 1, 5],
64+
label: 'Data 2',
65+
},
66+
],
67+
};
68+
5369
const points = [
5470
{
5571
data: [
@@ -121,7 +137,32 @@ const axis = {
121137
},
122138
};
123139

124-
const App: React.SFC<{}> = (): JSX.Element => <div>
140+
const legend = {
141+
display: true,
142+
fontSize: '10px',
143+
rectSize: 12,
144+
spacing: 4,
145+
};
146+
147+
const labels = {
148+
display: false,
149+
};
150+
151+
const App: React.SFC<{}> = (): JSX.Element => <div style={{ padding: '20px' }}>
152+
<h3>Pie Chart</h3>
153+
<PieChart
154+
width={200}
155+
height={200}
156+
data={data} />
157+
158+
<h4>Donut</h4>
159+
<PieChart width={300}
160+
backgroundColor="#eee"
161+
height={300}
162+
donutWidth={10}
163+
data={data3}
164+
legend={legend}
165+
labels={labels} />
125166
<div>
126167
<HorizontalHistogram data={data2} width={500} height={400} margin={{
127168
left: 30,

‎examples/index.html‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
11
<html>
2-
<head>
3-
<script src="https://unpkg.com/react@15/dist/react.js"></script>
4-
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
5-
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
6-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css"
7-
integrity="sha384-h21C2fcDk/eFsW9sC9h0dhokq5pDinLNklTKoxIZRUn3+hvmgQSffLLQ4G4l2eEr" crossorigin="anonymous">
8-
</head>
9-
<body>
10-
<div id="root">
11-
</div>
12-
13-
</body>
14-
<script src="./index.js"></script>
2+
3+
<head>
4+
<script src="https://unpkg.com/react@15/dist/react.js"></script>
5+
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cosmo/bootstrap.min.css" integrity="sha384-h21C2fcDk/eFsW9sC9h0dhokq5pDinLNklTKoxIZRUn3+hvmgQSffLLQ4G4l2eEr"
8+
crossorigin="anonymous">
9+
</head>
10+
<style>
11+
rect {
12+
cursor: pointer;
13+
stroke-width: 2;
14+
}
15+
16+
rect.disabled {
17+
fill: transparent !important;
18+
}
19+
</style>
20+
21+
<body>
22+
<div id="root">
23+
</div>
24+
25+
</body>
26+
<script src="./index.js"></script>
27+
1528
</html>

0 commit comments

Comments
 (0)