Skip to content

Commit a8495d6

Browse files
hi2dmitrihi2dmitri
authored
Merge pull request #101 from oslabs-beta/dev
v0.0.10
2 parents eaf1a5f + 8390602 commit a8495d6

File tree

14 files changed

+91
-62
lines changed

14 files changed

+91
-62
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@oslabs-beta/d3reactor",
3-
"version": "0.0.9",
3+
"version": "0.0.10",
44
"description": "Open-source charting library for creating performant, responsive data visualizations in React",
55
"keywords": ["d3", "react", "chart", "graph", "svg", "visualization", "data visualization"],
66
"main": "./dist/index.js",

‎src/App.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import PieChart from './charts/PieChart/PieChart';
88
import portfolio from '../data/portfolio.json';
99
import penguins from '../data/penguins.json';
1010
import fruit from '../data/fruit.json';
11+
import skinny_fruit from '../data/skinny_fruit.json';
1112

1213
import { Container } from './styles/componentStyles';
1314

@@ -16,20 +17,20 @@ function App() {
1617
<Container className="app">
1718
<PieChart
1819
theme="dark"
19-
data={fruit}
20+
data={fruit.sort((a, b) => a.value - b.value)}
2021
label="label"
2122
value="value"
22-
legend="top-left"
23-
outerRadius={240}
23+
outerRadius={400}
2424
pieLabel={true}
2525
/>
2626
<BarChart
27-
theme="dark"
27+
theme="light"
2828
height="100%"
2929
width="100%"
30-
data={portfolio.slice(5, 13)}
30+
data={skinny_fruit.reverse()}
3131
xKey="date"
3232
yKey="value"
33+
groupBy="fruit"
3334
xAxis="bottom"
3435
yAxis="right"
3536
yGrid={true}
@@ -52,7 +53,7 @@ function App() {
5253
yAxisLabel="Value"
5354
/>
5455
<LineChart
55-
theme="dark"
56+
theme="light"
5657
height={'100%'}
5758
width={'100%'}
5859
data={portfolio}

‎src/charts/AreaChart/AreaChart.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -185,10 +185,13 @@ export default function AreaChart({
185185
// Define how the data will drive your design
186186
// ********************
187187

188+
const numberOfKeys = Array.from(keys).length;
188189
const discreteColors =
189-
Array.from(keys).length < 4 ? 3 : Math.min(Array.from(keys).length, 9);
190-
const computedScheme = d3[`${colorScheme}`][discreteColors];
191-
const colorScale = d3.scaleOrdinal(Array.from(computedScheme).reverse());
190+
numberOfKeys < 4 ? 3 : Math.min(Array.from(keys).length, 9);
191+
const computedScheme = Array.from(
192+
d3[`${colorScheme}`][discreteColors]
193+
).reverse();
194+
const colorScale = d3.scaleOrdinal(computedScheme);
192195
colorScale.domain(keys);
193196

194197
// ********************

‎src/charts/BarChart/BarChart.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,10 +177,13 @@ export default function BarChart({
177177
// Define how the data will drive your design
178178
// ********************
179179

180+
const numberOfKeys = Array.from(keys).length;
180181
const discreteColors =
181-
Array.from(keys).length < 4 ? 3 : Math.min(Array.from(keys).length, 9);
182-
const computedScheme = d3[`${colorScheme}`][discreteColors];
183-
const colorScale = d3.scaleOrdinal(Array.from(computedScheme).reverse());
182+
numberOfKeys < 4 ? 3 : Math.min(Array.from(keys).length, 9);
183+
const computedScheme = Array.from(
184+
d3[`${colorScheme}`][discreteColors]
185+
).reverse();
186+
const colorScale = d3.scaleOrdinal(computedScheme);
184187
colorScale.domain(keys);
185188

186189
// ********************

‎src/charts/LineChart/LineChart.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,10 +158,13 @@ export default function LineChart({
158158
// Define how the data will drive your design
159159
// ********************
160160

161+
const numberOfKeys = Array.from(keys).length;
161162
const discreteColors =
162-
Array.from(keys).length < 4 ? 3 : Math.min(Array.from(keys).length, 9);
163-
const computedScheme = d3[`${colorScheme}`][discreteColors];
164-
const colorScale = d3.scaleOrdinal(Array.from(computedScheme));
163+
numberOfKeys < 4 ? 3 : Math.min(Array.from(keys).length, 9);
164+
const computedScheme = Array.from(
165+
d3[`${colorScheme}`][discreteColors]
166+
).reverse();
167+
const colorScale = d3.scaleOrdinal(computedScheme);
165168
colorScale.domain(computedScheme);
166169

167170
// ********************
@@ -201,6 +204,7 @@ export default function LineChart({
201204
);
202205
}, [data, xScale, yScale, xAccessor, yAccessor, cHeight, cWidth, margin]);
203206

207+
console.log('KEYS ', keys);
204208
return (
205209
<ThemeProvider theme={themes[theme]}>
206210
<div ref={anchor} style={{ width: width, height: height }}>

‎src/charts/PieChart/PieChart.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -145,16 +145,20 @@ export default function PieChart({
145145
// Define how the data will drive your design
146146
// ********************
147147

148-
const discreteColors = Math.min(keys.length, 9);
148+
const numberOfKeys = Array.from(keys).length;
149+
const discreteColors =
150+
numberOfKeys < 4 ? 3 : Math.min(Array.from(keys).length, 9);
149151
const computedScheme = d3[`${colorScheme}`][discreteColors];
150-
const colorScale = d3.scaleOrdinal(Array.from(computedScheme).reverse());
152+
const colorScale = d3.scaleOrdinal(computedScheme);
151153
colorScale.domain(keys);
152154

153155
// ********************
154156
// STEP 5. Set up supportive elements
155157
// Render your axes, labels, legends, annotations, etc.
156158
// ********************
157159

160+
const colorLabels = [...keys].reverse();
161+
158162
const textTranform = (d: any) => {
159163
const [x, y]: number[] = arcGenerator.centroid(d);
160164
return `translate(${x}, ${y})`;
@@ -287,7 +291,7 @@ export default function PieChart({
287291
<ColorLegend
288292
theme={theme}
289293
legendLabel={legendLabel}
290-
labels={keys}
294+
labels={colorLabels}
291295
circleRadius={5 /* Radius of each color swab in legend */}
292296
colorScale={colorScale}
293297
dataTestId="pie-chart-legend"

‎src/charts/ScatterPlot/ScatterPlot.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,10 +144,13 @@ export default function ScatterPlot({
144144
// ********************
145145

146146
// discreteColors must be between 3 and 9, so here we create a range.
147+
const numberOfKeys = Array.from(keys).length;
147148
const discreteColors =
148-
Array.from(keys).length < 4 ? 3 : Math.min(Array.from(keys).length, 9);
149-
const computedScheme = d3[`${colorScheme}`][discreteColors];
150-
const colorScale = d3.scaleOrdinal(Array.from(computedScheme).reverse());
149+
numberOfKeys < 4 ? 3 : Math.min(Array.from(keys).length, 9);
150+
const computedScheme = Array.from(
151+
d3[`${colorScheme}`][discreteColors]
152+
).reverse();
153+
const colorScale = d3.scaleOrdinal(computedScheme);
151154
colorScale.domain(keys);
152155

153156
// ********************

‎src/components/Arc.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/restrict-plus-operands */
12
import React from 'react';
23

34
import { ArcProps } from '../../types';
@@ -14,7 +15,6 @@ export const Arc = React.memo(
1415
margin,
1516
cWidth,
1617
}: ArcProps): JSX.Element => {
17-
1818
let tooltipState = {
1919
cursorX: 0,
2020
cursorY: 0,
@@ -26,13 +26,15 @@ export const Arc = React.memo(
2626
const onMouseMove = (e: any) => {
2727
if (setTooltip) {
2828
tooltipState = {
29-
cursorX: e.pageX,
30-
cursorY: e.pageY,
31-
distanceFromTop: e.clientY,
32-
distanceFromRight: (margin.left + cWidth + margin.right) - cWidth,
29+
cursorX: e.nativeEvent.pageX,
30+
cursorY: e.nativeEvent.pageY,
31+
distanceFromTop: e.nativeEvent.pageY - e.clientY + e.clientY,
32+
distanceFromRight:
33+
cWidth - (margin.right + margin.left) - e.nativeEvent.pageX,
3334
distanceFromLeft: e.pageX,
3435
data,
3536
};
37+
3638
setTooltip(tooltipState);
3739
}
3840
};

‎src/components/ListeningRect.tsx‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
xAccessorFunc,
88
yAccessorFunc,
99
} from '../../types';
10+
import { getBrowser } from '../utils';
1011

1112
export default function ListeningRect({
1213
data,
@@ -66,32 +67,6 @@ export default function ListeningRect({
6667
};
6768

6869
function onMouseMove(e: any) {
69-
let sBrowser;
70-
const sUsrAg = navigator.userAgent;
71-
if (sUsrAg.indexOf('Firefox') > -1) {
72-
sBrowser = 'Mozilla Firefox';
73-
// "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
74-
} else if (sUsrAg.indexOf('SamsungBrowser') > -1) {
75-
sBrowser = 'Samsung Internet';
76-
// "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
77-
} else if (sUsrAg.indexOf('Opera') > -1 || sUsrAg.indexOf('OPR') > -1) {
78-
sBrowser = 'Opera';
79-
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
80-
} else if (sUsrAg.indexOf('Trident') > -1) {
81-
sBrowser = 'Microsoft Internet Explorer';
82-
// "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
83-
} else if (sUsrAg.indexOf('Edge') > -1) {
84-
sBrowser = 'Microsoft Edge';
85-
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
86-
} else if (sUsrAg.indexOf('Chrome') > -1) {
87-
sBrowser = 'Chrome';
88-
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
89-
} else if (sUsrAg.indexOf('Safari') > -1) {
90-
sBrowser = 'Safari';
91-
// "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
92-
} else {
93-
sBrowser = 'unknown';
94-
}
9570
const mousePosition = d3.pointer(e);
9671
const hoveredX = xScale.invert(mousePosition[0]);
9772
const hoveredY = yScale.invert(mousePosition[1]);
@@ -115,7 +90,7 @@ export default function ListeningRect({
11590
closestXValue = xAccessor(closestDataPoint);
11691

11792
tooltipState.cursorX =
118-
sBrowser === 'Chrome'
93+
getBrowser() === 'Chrome'
11994
? e.nativeEvent.pageX - e.nativeEvent.layerX + xScale(closestXValue)
12095
: e.nativeEvent.pageX - e.nativeEvent.offsetX + xScale(closestXValue);
12196
}
@@ -143,7 +118,7 @@ export default function ListeningRect({
143118
closestYValue = layers[closestYIndex][closestXIndex][1];
144119

145120
tooltipState.cursorY =
146-
sBrowser === 'Chrome'
121+
getBrowser() === 'Chrome'
147122
? e.pageY - e.nativeEvent.layerY + yScale(closestYValue)
148123
: e.pageY - e.nativeEvent.offsetY + yScale(closestYValue);
149124

‎src/components/Rectangle.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const RectangleComp = ({
1919
fill,
2020
setTooltip,
2121
}: RectangleProps): JSX.Element => {
22-
2322
let tooltipState = {
2423
cursorX: 0,
2524
cursorY: 0,
@@ -45,7 +44,10 @@ const RectangleComp = ({
4544
cursorY: e.pageY - e.nativeEvent.offsetY + (y ?? 0),
4645
distanceFromTop: offsetFromTop + margin.top + rectTop,
4746
distanceFromRight:
48-
(margin.left + cWidth + margin.right) - (offsetFromLeft + margin.left + rectMidPoint),
47+
margin.left +
48+
cWidth +
49+
margin.right -
50+
(offsetFromLeft + margin.left + rectMidPoint),
4951
distanceFromLeft: offsetFromLeft + margin.left + rectMidPoint,
5052
data,
5153
};

0 commit comments

Comments
 (0)